/* ======================================================================
   Sauce Texts with Arrow  —  v1.13.1
   Widget: sauce-texts-arrow
   Two texts with a line between them. The line is made of two segments that
   read as one continuous line on desktop. On mobile the layout wraps so the
   line divides across the two text rows:
       Row 1:  • TEXT ONE ————
       Row 2:  ————>  TEXT TWO
   ====================================================================== */

.sauce-texts-arrow {
    --stx-line-color: #ffffff;
    --stx-line-w:     2px;
    --stx-arrow-h:    9px;     /* arrowhead half-height */
    --stx-arrow-w:    14px;    /* arrowhead length */
    --stx-dot-color:  var(--sauce-hot-sauce, #FF5338);
    --stx-dot-size:   13px;
    --stx-gap:        24px;
    --stx-a-color:    #ffffff;
    --stx-b-color:    #ffffff;

    display: flex;
    flex-wrap: wrap;
    align-items: center;
    row-gap: 16px;
    width: 100%;
}

.stx__part {
    display: inline-flex;
    align-items: center;
    gap: 12px;
    flex: 0 0 auto;
    margin: 0;
}
.stx__part--a { color: var(--stx-a-color); margin-right: var(--stx-gap); }
.stx__part--b { color: var(--stx-b-color); margin-left: var(--stx-gap); }
.stx__txt { margin: 0; }

.stx__dot {
    flex-shrink: 0;
    width: var(--stx-dot-size);
    height: var(--stx-dot-size);
    border-radius: 50%;
    background: var(--stx-dot-color);
}

/* Rule segments (two touching pieces = one continuous line on desktop) */
.stx__rule {
    flex: 1 1 auto;
    display: flex;
    align-items: center;
    min-width: 40px;
}
.stx__line {
    flex: 1 1 auto;
    height: var(--stx-line-w);
    background: var(--stx-line-color);
}
.stx__head {
    flex: 0 0 auto;
    width: 0;
    height: 0;
    border-top: var(--stx-arrow-h) solid transparent;
    border-bottom: var(--stx-arrow-h) solid transparent;
    border-left: var(--stx-arrow-w) solid var(--stx-line-color);
    margin-left: -1px;
}

/* Wrap break: hidden on desktop (line stays continuous), forces the second
   segment + text onto a new row on mobile. */
.stx__break { display: none; flex-basis: 100%; height: 0; }

/* ── Mobile: divide the line across the two rows ─────────────────────── */
@media (max-width: 767px) {
    .stx__break { display: block; }
}