/* ==========================================================================
   Section: Sticky Bottom Bar — Checkout
   Node: 6129:29493
   Design: 1600×79px, position fixed bottom
   ========================================================================== */

/* ------------------------------------------------------------------
   Root wrapper — fixed bottom bar
   padding-left: 88px / 16 = 5.5rem
   padding-right: 100px / 16 = 6.25rem
   height: 79px / 16 = 4.9375rem
   ------------------------------------------------------------------ */
.section-sticky-bar {
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    z-index: 100;
    display: flex;
    align-items: center;
    background-color: #ffffff;
    box-shadow: 0 -0.25rem 1rem 0 rgba(0, 0, 0, 0.06);
    padding-left: 5.5rem;
    padding-right: 6.25rem;
    height: 4.9375rem;
}

/* ------------------------------------------------------------------
   Cells wrapper — flex row, takes all space before CTA
   ------------------------------------------------------------------ */
.section-sticky-bar__cells {
    display: flex;
    align-items: stretch;
    flex: 1 0 0;
    align-self: stretch;
}

/* ------------------------------------------------------------------
   Individual info cell
   padding: 14px top/bottom / 16 = 0.875rem, 12px left/right / 16 = 0.75rem
   ------------------------------------------------------------------ */
.section-sticky-bar__cell {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: flex-start;
    flex: 1 0 0;
    padding: 0.875rem 0.75rem;
    min-width: 0;
}

/* ------------------------------------------------------------------
   Label — 14px Medium, rgba(32,32,32,0.4), line-height 1.1
   ------------------------------------------------------------------ */
.section-sticky-bar__label {
    font-family: 'SVN-Gilroy', sans-serif;
    font-size: 0.875rem;
    font-weight: 500;
    line-height: 1.1;
    letter-spacing: 0;
    font-style: normal;
    color: rgba(32, 32, 32, 0.4);
    white-space: nowrap;
    display: block;
}

/* ------------------------------------------------------------------
   Value — 16px SemiBold, #202020, line-height normal
   margin-top: 12px / 16 = 0.75rem (replaces gap)
   ------------------------------------------------------------------ */
.section-sticky-bar__value {
    font-family: 'SVN-Gilroy', sans-serif;
    font-size: 1rem;
    font-weight: 600;
    line-height: normal;
    letter-spacing: 0;
    font-style: normal;
    color: #202020;
    display: block;
    width: 100%;
    margin-top: 0.75rem;
}

/* ------------------------------------------------------------------
   Vertical divider between cells
   width 0, 45px tall with 1px border-right
   height: 45px / 16 = 2.8125rem
   ------------------------------------------------------------------ */
.section-sticky-bar__divider {
    flex-shrink: 0;
    width: 0;
    height: 2.8125rem;
    border-right: 1px solid rgba(0, 0, 0, 0.12);
    align-self: center;
}

/* ------------------------------------------------------------------
   Price cell — gap 8px between price-row and savings (gap-[8px])
   gap 6px between price values (gap-[6px])
   Figma: flex-start alignment (padding provides top/bottom spacing)
   ------------------------------------------------------------------ */
.section-sticky-bar__cell--price {
    justify-content: flex-start;
}

.section-sticky-bar__price-row {
    display: flex;
    align-items: center;
}

/* Sale price — 24px XBold/800, #FF6A3D */
.section-sticky-bar__price-sale {
    font-family: 'SVN-Gilroy', sans-serif;
    font-size: 1.5rem;
    font-weight: 800;
    line-height: normal;
    letter-spacing: 0;
    font-style: normal;
    color: #ff6a3d;
    white-space: nowrap;
}

/* Original price — 14px Medium, #A4A4A4, line-through
   margin-left: 6px / 16 = 0.375rem */
.section-sticky-bar__price-original {
    font-family: 'SVN-Gilroy', sans-serif;
    font-size: 0.875rem;
    font-weight: 500;
    line-height: normal;
    letter-spacing: 0;
    font-style: normal;
    color: #a4a4a4;
    text-decoration: line-through;
    text-decoration-skip-ink: none;
    white-space: nowrap;
    margin-left: 0.375rem;
}

/* Savings line — 16px Medium, rgba(66,66,66,0.8)
   margin-top: 8px / 16 = 0.5rem */
.section-sticky-bar__savings {
    font-family: 'SVN-Gilroy', sans-serif;
    font-size: 1rem;
    font-weight: 500;
    line-height: 1.1;
    letter-spacing: 0;
    font-style: normal;
    color: rgba(66, 66, 66, 0.8);
    white-space: nowrap;
    margin-top: 0.5rem;
    margin-bottom: 0;
}

/* Savings bold amount — 16px Bold, #424242 */
.section-sticky-bar__savings-amount {
    font-family: 'SVN-Gilroy', sans-serif;
    font-size: 1rem;
    font-weight: 700;
    line-height: 1.1;
    letter-spacing: 0;
    color: #424242;
}

/* ------------------------------------------------------------------
   CTA Button
   padding: 14px 28px / 16 = 0.875rem 1.75rem
   border-radius: 1000px
   gradient: 99.2deg, #09B8B3 3%, #4DCBDF 99%
   ------------------------------------------------------------------ */
.section-sticky-bar__cta {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.375rem;
    width: 12rem;
    flex-shrink: 0;
    padding: 0.875rem 1.75rem;
    border-radius: 62.5rem;
    border: none;
    background-image: linear-gradient(99.2deg, #09b8b3 3%, #4dcbdf 99%);
    cursor: pointer;
    text-decoration: none;
    transition:
        gap 400ms cubic-bezier(0.47, 0, 0.01, 1.01),
        opacity 400ms cubic-bezier(0.47, 0, 0.01, 1.01);
}

/* CTA text — 14px SemiBold, white */
.section-sticky-bar__cta-text {
    font-family: 'SVN-Gilroy', sans-serif;
    font-size: 0.875rem;
    font-weight: 600;
    line-height: 1;
    letter-spacing: 0;
    font-style: normal;
    color: #ffffff;
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    white-space: nowrap;
    transition: transform 400ms cubic-bezier(0.47, 0, 0.01, 1.01);
}

/* CTA icon — 16×16px
   margin-left: 6px / 16 = 0.375rem */
.section-sticky-bar__cta-icon {
    display: block;
    width: 1rem;
    height: 1rem;
    flex-shrink: 0;
    margin-left: 0;
    transition: transform 400ms cubic-bezier(0.47, 0, 0.01, 1.01);
}

/* ------------------------------------------------------------------
   Hover states (desktop only)
   ------------------------------------------------------------------ */
@media (min-width: 1024px) {
    .section-sticky-bar__cta:hover {
        gap: 1.25rem;
        opacity: 0.88;
    }

    .section-sticky-bar__cta:hover .section-sticky-bar__cta-text {
        transform: translateX(-0.125rem);
    }

    .section-sticky-bar__cta:hover .section-sticky-bar__cta-icon {
        transform: translateX(0.25rem);
    }
}

/* Focus visible */
.section-sticky-bar__cta:focus-visible {
    outline: 2px solid #09b8b3;
    outline-offset: 2px;
}

/* ------------------------------------------------------------------
   Mobile — max-width: 639.98px
   Stack vertically, full-width, scrollable cells
   ------------------------------------------------------------------ */
@media screen and (max-width: 639.98px) {
    .section-sticky-bar {
        display: none;
    }
}