/* =====================================================================
   Storefront improvements, design review.
   Loaded only while at least one improvement or the new bottom nav is
   switched on in Admin → General Settings. Every rule is scoped to its own
   body class (tw-<key>) or its own element, so each one can be turned off
   on its own and the current design is untouched when all are off.
   Colours come from the existing theme variables (--primary, --white).
   ===================================================================== */

:root {
    --tw-nav-h: 0px;          /* height of the visible bottom nav; tweaks.js measures it */
    --tw-sticky-bar-h: 63px;  /* height of the product order bar; tweaks.js measures it */
    --tw-safe-b: env(safe-area-inset-bottom, 0px);
}

/* ---------- 01 Bottom navigation (five items, raised centre) ---------- */
.sbn {
    display: none;
}

@media (max-width: 900px) {
    /* The bar's real height (6 + 48 + 6 + the phone's safe area), known before the
       first paint so nothing placed above it moves once tweaks.js measures it. */
    body.tw-bottom-nav {
        --tw-nav-h: calc(60px + var(--tw-safe-b));
    }

    .sbn {
        display: flex;
        position: fixed;
        left: 0;
        right: 0;
        bottom: 0;
        z-index: 300;
        align-items: flex-end;
        padding: 6px 4px calc(6px + var(--tw-safe-b));
        background: rgba(255, 255, 255, 0.97);
        -webkit-backdrop-filter: blur(12px);
        backdrop-filter: blur(12px);
        box-shadow: 0 -1px 0 #e5e5ea, 0 -4px 24px rgba(0, 0, 0, 0.08);
    }

    .sbn-item {
        flex: 1 1 0;
        min-width: 0;
        min-height: 48px;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: flex-end;
        gap: 3px;
        color: #8e8e93;
        font-size: 10.5px;
        font-weight: 500;
        line-height: 1.2;
        text-decoration: none;
        position: relative;
        -webkit-tap-highlight-color: transparent;
    }

    .sbn-item.is-active {
        color: var(--primary);
        font-weight: 600;
    }

    .sbn-icon {
        position: relative;
        display: flex;
        align-items: center;
        justify-content: center;
        width: 28px;
        height: 26px;
        font-size: 21px;
    }

    .sbn-icon img {
        width: 26px;
        height: 26px;
        object-fit: contain;
    }

    .sbn-label {
        max-width: 100%;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
    }

    .sbn-item--centre .sbn-icon {
        width: 56px;
        height: 56px;
        margin-top: -30px;
        border-radius: 50%;
        border: 4px solid var(--white, #fff);
        background: var(--sbn-centre, var(--primary));
        color: var(--white, #fff);
        font-size: 25px;
        box-shadow: 0 6px 16px rgba(0, 0, 0, 0.18);
    }

    .sbn-item--centre .sbn-icon img {
        width: 30px;
        height: 30px;
    }

    .sbn-item--centre .sbn-label {
        color: #333;
        font-weight: 600;
    }

    .sbn-badge {
        position: absolute;
        top: -4px;
        right: -8px;
        min-width: 17px;
        height: 17px;
        padding: 0 4px;
        border-radius: 10px;
        border: 2px solid var(--white, #fff);
        background: var(--primary);
        color: var(--white, #fff);
        font-size: 9px;
        font-style: normal;
        font-weight: 700;
        display: flex;
        align-items: center;
        justify-content: center;
    }

    .sbn-item--centre .sbn-badge {
        top: -2px;
        right: -4px;
        background: #111;
    }

    .sbn-badge[hidden] {
        display: none;
    }

    /* Keep the chat button and the "just bought" popup clear of the bar. The
       product order bar lifts them further with translate (section 02), which
       moves them on the compositor and never counts as a layout shift. */
    body.tw-bottom-nav #gcc-toggle,
    body.tw-product-sticky-buy #gcc-toggle {
        bottom: calc(var(--tw-nav-h) + 14px);
        /* The chat's own transitions, plus the lift. */
        transition: transform .2s, box-shadow .2s, opacity .2s, translate .25s ease;
    }

    /* checkout_look: the checkout hides the bottom nav but has its own order bar at
       the bottom; keep the chat button above that bar, off its "order" button. */
    body.tw-checkout-look.tw-bottom-nav:has(.ck-mobile-bar) #gcc-toggle,
    body.tw-checkout-look.tw-product-sticky-buy:has(.ck-mobile-bar) #gcc-toggle {
        bottom: calc(86px + var(--tw-safe-b, 0px));
    }

    body.tw-bottom-nav #gcc-panel,
    body.tw-product-sticky-buy #gcc-panel {
        bottom: calc(var(--tw-nav-h) + 80px);
        /* The chat's own "transition: all" would also animate layout properties;
           only its open/close effect and the lift animate. */
        transition-property: transform, opacity, translate;
    }

    body.tw-bottom-nav #snx-popup,
    body.tw-product-sticky-buy #snx-popup {
        bottom: calc(var(--tw-nav-h) + 14px);
        /* The popup's own transitions, plus the lift. */
        transition: transform 0.45s cubic-bezier(.34, 1.56, .64, 1), opacity 0.35s ease, translate .25s ease;
    }
}

/* ---------- 02 Product page: order bar that stays on screen ---------- */
.tw-sticky-buy {
    display: none;
}

@media (max-width: 767px) {
    .tw-sticky-buy {
        display: flex;
        align-items: center;
        gap: 10px;
        position: fixed;
        left: 0;
        right: 0;
        bottom: var(--tw-nav-h);
        z-index: 299;
        padding: 8px 12px;
        background: var(--white, #fff);
        border-top: 1px solid #f0e4e8;
        box-shadow: 0 -6px 20px rgba(0, 0, 0, 0.08);
        transform: translateY(calc(100% + var(--tw-nav-h) + 40px));
        transition: transform 0.25s ease;
    }

    .tw-sticky-buy.is-shown {
        transform: none;
    }

    body.tw-sticky-shown #gcc-toggle,
    body.tw-sticky-shown #gcc-panel,
    body.tw-sticky-shown #snx-popup {
        translate: 0 calc(-1 * var(--tw-sticky-bar-h));
    }

    .tw-sticky-price {
        display: flex;
        flex-direction: column;
        line-height: 1.1;
        margin-right: auto;
        min-width: 0;
    }

    .tw-sticky-price small {
        font-size: 11px;
        color: #888;
    }

    .tw-sticky-price strong {
        font-size: 18px;
        font-weight: 800;
        color: var(--primary);
        white-space: nowrap;
    }

    .tw-sticky-cart,
    .tw-sticky-order {
        min-height: 46px;
        border-radius: 10px;
        font-weight: 700;
        cursor: pointer;
    }

    .tw-sticky-cart {
        order: -1;
        width: 46px;
        flex: 0 0 46px;
        border: 1.5px solid var(--primary);
        background: var(--white, #fff);
        color: var(--primary);
        font-size: 18px;
    }

    .tw-sticky-order {
        flex: 0 0 auto;
        width: 40%;
        max-width: 170px;
        border: none;
        background: var(--primary);
        color: var(--white, #fff);
        font-size: 15px;
        box-shadow: 0 4px 14px rgba(var(--primary-rgb), 0.3);
    }

    body.tw-has-sticky {
        padding-bottom: calc(var(--tw-nav-h) + 76px);
    }
}

/* ---------- 03 Product page: Bangla buttons, WhatsApp order, no share ----------
   The three buttons share one height and one gap (the row's own 12px), so the
   WhatsApp button sits exactly as far below "এখনই অর্ডার করুন" as that one sits
   below "কার্টে যোগ করুন". */
body.tw-product-buy-box {
    --tw-buy-gap: 12px;
    --tw-buy-h: 54px;
}

body.tw-product-buy-box .product-detail-actions {
    gap: var(--tw-buy-gap);
    margin-bottom: var(--tw-buy-gap);
}

body.tw-product-buy-box :is(.btn-add-cart, .btn-buy-now) {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    min-height: var(--tw-buy-h);
    padding-top: 0;
    padding-bottom: 0;
    box-sizing: border-box;
}

body.tw-product-buy-box .btn-buy-now {
    border: 2px solid transparent;   /* same box as the outlined cart button */
}

.tw-wa-order {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    width: 100%;
    min-height: var(--tw-buy-h, 54px);
    box-sizing: border-box;
    margin: 0 0 var(--tw-buy-gap, 12px);
    padding: 0 16px;
    border-radius: 5px;
    background: #0F8A4F;            /* WhatsApp green, dark enough for white text (4.6:1) */
    color: #fff;
    font-size: 15.5px;
    font-weight: 700;
    text-decoration: none;
    position: relative;
}

.tw-wa-order:hover,
.tw-wa-order:focus-visible {
    background: #0B7040;
    color: #fff;
}

.tw-wa-order-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 28px;
    height: 28px;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.16);
    font-size: 19px;
    line-height: 1;
}

body.tw-style-refresh .tw-wa-order {
    border-radius: 999px;
}

.tw-buy-trust-list {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin: 0 0 16px;
    padding: 0;
    list-style: none;
}

.tw-buy-trust-list li {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 6px 11px;
    border-radius: 999px;
    border: 1px solid rgba(var(--primary-rgb), 0.18);
    background: rgba(var(--primary-rgb), 0.05);
    color: #333;
    font-size: 12.5px;
    font-weight: 500;
}

.tw-buy-trust-list i {
    color: var(--primary);
}

/* ---------- 04 Cart page on a phone ---------- */
@media (max-width: 860px) {
    body.tw-cart-mobile .cart-page-grid {
        grid-template-columns: minmax(0, 1fr);
    }
}

@media (max-width: 600px) {
    body.tw-cart-mobile .cart-page-item {
        display: grid;
        grid-template-columns: 64px minmax(0, 1fr);
        column-gap: 12px;
        row-gap: 10px;
        align-items: start;
    }

    body.tw-cart-mobile .cart-page-thumb {
        grid-row: span 2;
        width: 64px;
        height: 64px;
    }

    body.tw-cart-mobile .cart-page-name {
        white-space: normal;
        display: -webkit-box;
        -webkit-line-clamp: 2;
        -webkit-box-orient: vertical;
        overflow: hidden;
        padding-right: 22px;
    }

    body.tw-cart-mobile .cart-page-info {
        padding-right: 0;
    }

    body.tw-cart-mobile .cart-page-unit-price {
        white-space: nowrap;
    }

    body.tw-cart-mobile .cart-page-qty {
        margin-left: 0;
        justify-self: start;
        grid-column: 2;
    }

    body.tw-cart-mobile .cart-page-item-right {
        grid-column: 2;
        justify-content: space-between;
        margin: -44px 0 0 auto;
    }
}

/* ---------- 05 Footer on a phone ---------- */
@media (max-width: 767px) {
    body.tw-mobile-footer .features-bar {
        display: block !important;
        padding: 14px 0;
    }

    /* The body already leaves room for the bottom bar. */
    body.tw-mobile-footer .site-footer {
        display: block !important;
        padding-bottom: 8px;
    }

    body.tw-mobile-footer .site-footer ul a {
        color: var(--white, #fff) !important;
        opacity: 1;
    }

    body.tw-mobile-footer .site-footer .footer-grid {
        grid-template-columns: 1fr 1fr;
        gap: 18px 16px;
    }

    body.tw-mobile-footer .site-footer .footer-about,
    body.tw-mobile-footer .site-footer .footer-newsletter {
        grid-column: 1 / -1;
    }

    body.tw-mobile-footer .site-footer .footer-logo {
        max-width: 150px;
    }

    /* The two link groups start closed and open with a tap; a closed group's
       links are not laid out at all while the page loads. */
    body.tw-mobile-footer .site-footer .tw-foot-acc {
        grid-column: 1 / -1;
        border-bottom: 1px solid rgba(255, 255, 255, .12);
    }

    body.tw-mobile-footer .tw-foot-acc h4 {
        margin: 0;
    }

    body.tw-mobile-footer .tw-foot-toggle {
        display: flex;
        align-items: center;
        justify-content: space-between;
        width: 100%;
        min-height: 48px;
        padding: 0;
        border: 0;
        background: none;
        color: inherit;
        font: inherit;
        text-align: left;
        cursor: pointer;
    }

    body.tw-mobile-footer .tw-foot-toggle i {
        font-size: 12px;
        transition: transform .2s ease;
    }

    body.tw-mobile-footer .tw-foot-acc.is-open .tw-foot-toggle i {
        transform: rotate(180deg);
    }

    body.tw-mobile-footer .tw-foot-acc:not(.is-open) ul {
        display: none;
    }

    body.tw-mobile-footer .tw-foot-acc ul {
        padding-bottom: 12px;
    }
}

/* On wider screens the groups are always open and the toggle is a plain heading. */
@media (min-width: 768px) {
    .tw-foot-toggle {
        padding: 0;
        border: 0;
        background: none;
        color: inherit;
        font: inherit;
        pointer-events: none;
    }

    .tw-foot-toggle i {
        display: none;
    }
}

/* ---------- 06 Home: optional sections (trending, offer brands, video, reviews) ---------- */
.hs-section {
    padding: 22px 0 8px;
}

.hs-head h2 {
    display: flex;
    align-items: center;
    gap: 8px;
}

.hs-sample {
    display: inline-block;
    padding: 2px 8px;
    border-radius: 6px;
    background: #FEF3C7;
    color: #92400E;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0;
    text-transform: none;
    vertical-align: middle;
}

/* A row you swipe on a phone; a plain row of five on a computer. */
.hs-rail {
    display: grid;
    grid-auto-flow: column;
    grid-auto-columns: minmax(158px, 44%);
    gap: 12px;
    overflow-x: auto;
    overscroll-behavior-x: contain;
    scroll-snap-type: x mandatory;
    scrollbar-width: none;
    padding: 2px 2px 10px;
}

.hs-rail::-webkit-scrollbar {
    display: none;
}

.hs-rail > * {
    scroll-snap-align: start;
}

@media (min-width: 901px) {
    .hs-rail {
        grid-auto-columns: calc((100% - 4 * 16px) / 5);
        gap: 16px;
    }
}

.hs-trending .product-thumb {
    position: relative;
}

.hs-rank {
    position: absolute;
    right: 8px;
    top: 8px;
    z-index: 2;
    min-width: 30px;
    padding: 3px 7px;
    border-radius: 999px;
    background: #1E2939;
    color: #fff;
    font: 700 12px/1.3 "Roboto", sans-serif;
    text-align: center;
}

.hs-brand-rail {
    grid-auto-columns: minmax(130px, 36%);
}

@media (min-width: 901px) {
    .hs-brand-rail {
        grid-auto-columns: calc((100% - 5 * 16px) / 6);
    }
}

.hs-brand-card {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
    padding: 26px 10px 12px;
    border: 1px solid #ECEEF2;
    border-radius: 16px;
    background: #fff;
    color: #1E2939;
    text-decoration: none;
    transition: border-color .2s, box-shadow .2s;
}

.hs-brand-card:hover {
    border-color: rgba(var(--primary-rgb), .35);
    box-shadow: 0 6px 18px rgba(30, 41, 57, .08);
}

.hs-brand-badge {
    position: absolute;
    top: 0;
    left: 50%;
    transform: translate(-50%, -40%);
    max-width: 92%;
    padding: 4px 10px;
    border-radius: 999px;
    background: var(--primary);
    color: #fff;
    font-size: 11.5px;
    font-weight: 700;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    box-shadow: 0 3px 8px rgba(var(--primary-rgb), .3);
}

.hs-brands .hs-rail {
    padding-top: 12px;
}

.hs-brand-logo {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 64px;
}

.hs-brand-logo img {
    width: 100%;
    height: 64px;
    object-fit: contain;
}

.hs-brand-name {
    font-size: 13.5px;
    font-weight: 600;
    text-align: center;
}

/* Videos: a coverflow of vertical cards. The centre card is largest and the
   neighbours shrink behind it; tweaks.js places each card with transform and
   opacity only. Only cover pictures load until a card is tapped. */
.hs-videos {
    overflow: hidden;
    overflow: clip;
}

.hs-cf {
    --cf-w: min(56vw, 230px);
    --cf-k: .62;              /* distance between card centres, as a share of the card width */
    --cf-strip: 64px;
    position: relative;
    height: calc(var(--cf-w) * 16 / 9 + var(--cf-strip) + 22px);
    max-width: 1200px;
    margin: 0 auto;
    touch-action: pan-y;
    user-select: none;
    -webkit-user-select: none;
    -webkit-tap-highlight-color: transparent;
    outline: none;
}

@media (min-width: 768px) {
    .hs-cf {
        --cf-w: 270px;
        --cf-k: .74;
    }
}

.hs-cf:focus-visible {
    outline: 2px solid var(--primary);
    outline-offset: 4px;
    border-radius: 16px;
}

.hs-cf-stage {
    position: absolute;
    inset: 0;
}

.hs-cf-card {
    position: absolute;
    top: 6px;
    left: 50%;
    width: var(--cf-w);
    margin-left: calc(var(--cf-w) / -2);
    border-radius: 16px;
    overflow: hidden;
    background: #fff;
    box-shadow: 0 10px 26px rgba(30, 41, 57, .16);
    transition: transform .45s cubic-bezier(.2, .8, .2, 1), opacity .45s ease;
    will-change: transform;
    cursor: pointer;
}

/* Before tweaks.js places the cards, only the first shows (no jump, no shift). */
.hs-cf:not(.is-ready) .hs-cf-card:not(:first-child) {
    opacity: 0;
}

.hs-cf.is-dragging .hs-cf-card {
    transition: none;
}

.hs-cf-card.is-active {
    cursor: default;
}

.hs-cf-media {
    position: relative;
    aspect-ratio: 9 / 16;
    background: #1E2939;
}

.hs-cf-media img,
.hs-cf-media iframe {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    border: 0;
}

.hs-cf-play {
    position: absolute;
    left: 50%;
    top: 50%;
    z-index: 1;
    width: 60px;
    height: 60px;
    margin: -30px 0 0 -30px;
    padding: 0 0 0 4px;
    border: 0;
    border-radius: 50%;
    background: rgba(255, 255, 255, .94);
    color: var(--primary);
    font-size: 22px;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 6px 18px rgba(0, 0, 0, .28);
    cursor: pointer;
    transition: opacity .2s ease;
}

.hs-cf-card.is-playing .hs-cf-play {
    opacity: 0;
    pointer-events: none;
}

.hs-cf-card.is-playing.is-paused .hs-cf-play {
    opacity: 1;
    pointer-events: auto;
}

/* YouTube is steered by the card (tap = pause, sound button), so swipes reach the carousel.
   Facebook has no such control, so its own player keeps the taps. */
.hs-cf-card[data-provider="youtube"] iframe {
    pointer-events: none;
}

/* A Facebook player keeps its own controls and catches every touch on the video,
   so its card gets a close button (added by tweaks.js) as the way back to swiping. */
.hs-cf-close {
    left: 10px;
    right: auto;
}

.hs-cf-mute,
.hs-cf-close {
    position: absolute;
    right: 10px;
    top: 10px;
    z-index: 2;
    width: 36px;
    height: 36px;
    padding: 0;
    border: 0;
    border-radius: 50%;
    background: rgba(17, 17, 17, .5);
    color: #fff;
    font-size: 15px;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
}

.hs-cf-product {
    display: flex;
    align-items: center;
    gap: 10px;
    height: var(--cf-strip);
    padding: 0 12px;
    background: #fff;
    color: #1E2939;
    text-decoration: none;
}

.hs-cf-product:hover {
    color: #1E2939;
    text-decoration: none;
}

.hs-cf-product img {
    flex: 0 0 44px;
    width: 44px;
    height: 44px;
    border-radius: 10px;
    object-fit: cover;
    background: #F8F9FB;
}

.hs-cf-info {
    display: grid;
    flex: 1;
    min-width: 0;
    line-height: 1.3;
}

.hs-cf-cat {
    overflow: hidden;
    color: #6A7282;
    font-size: 12px;
    white-space: nowrap;
    text-overflow: ellipsis;
}

.hs-cf-price {
    color: var(--primary);
    font: 700 15px/1.3 "Roboto", sans-serif;
    white-space: nowrap;
}

.hs-cf-price del {
    margin-left: 4px;
    color: #99A1AF;
    font-size: 12.5px;
    font-weight: 400;
}

.hs-cf-go {
    flex: 0 0 32px;
    width: 32px;
    height: 32px;
    border-radius: 50%;
    background: #1E2939;
    color: #fff;
    font-size: 13px;
    display: flex;
    align-items: center;
    justify-content: center;
}

/* Arrows beside the centre card on computers; phones swipe. */
.hs-cf-arrow {
    display: none;
}

@media (min-width: 768px) {
    .hs-cf-arrow {
        position: absolute;
        top: calc(var(--cf-w) * 8 / 9 - 16px);
        z-index: 200;
        width: 44px;
        height: 44px;
        padding: 0;
        border: 0;
        border-radius: 50%;
        background: #fff;
        color: #1E2939;
        font-size: 16px;
        display: flex;
        align-items: center;
        justify-content: center;
        box-shadow: 0 4px 14px rgba(30, 41, 57, .2);
        cursor: pointer;
    }

    .hs-cf-prev {
        left: calc(50% - var(--cf-w) / 2 - 22px);
    }

    .hs-cf-next {
        left: calc(50% + var(--cf-w) / 2 - 22px);
    }
}

@media (prefers-reduced-motion: reduce) {
    .hs-cf-card {
        transition: none;
    }
}

.hs-review-rail {
    grid-auto-columns: minmax(250px, 80%);
    align-items: start;
}

@media (min-width: 901px) {
    .hs-review-rail {
        grid-auto-columns: calc((100% - 3 * 16px) / 4);
    }
}

.hs-shot-rail {
    grid-auto-columns: minmax(150px, 42%);
}

@media (min-width: 901px) {
    .hs-shot-rail {
        grid-auto-columns: calc((100% - 5 * 16px) / 6);
    }
}

.hs-review {
    margin: 0;
    padding: 16px;
    border: 1px solid #ECEEF2;
    border-radius: 16px;
    background: #fff;
}

.hs-review-stars {
    color: #F59E0B;
    font-size: 13px;
}

.hs-review p {
    margin: 8px 0 10px;
    color: #374151;
    font-size: 14px;
    line-height: 1.55;
}

.hs-review footer {
    color: #1E2939;
    font-weight: 600;
    font-size: 13px;
}

.hs-review-shot {
    margin: 0;
}

.hs-review-shot img {
    width: 100%;
    height: auto;
    aspect-ratio: 9 / 14;
    object-fit: cover;
    object-position: top;
    border: 1px solid #ECEEF2;
    border-radius: 16px;
    background: #F8F9FB;
}

.hs-review-shot figcaption {
    padding: 6px 2px 0;
    font-size: 12.5px;
    color: #4A5565;
}

/* ---------- 07 Button animations ----------
   Transform and opacity only, so nothing on the page moves or reflows.
   Nothing runs for people who asked their phone for less motion. The
   attention shake runs only while its button is on screen (tweaks.js adds
   tw-attn while it is visible) and stops for good once the customer taps
   an order, cart or WhatsApp button. */
@media (prefers-reduced-motion: no-preference) {
    body.tw-button-anim {
        --tw-lift: -1px;
        --tw-press: .97;
        --tw-dur: 180ms;
        --tw-bump: 1.22;
        --tw-shake-x: 2px;
        --tw-shake-r: 1deg;
        --tw-shake-round: 7deg;
    }

    body.tw-button-anim.tw-anim-strong {
        --tw-lift: -3px;
        --tw-press: .93;
        --tw-bump: 1.45;
        --tw-shake-x: 5px;
        --tw-shake-r: 2deg;
        --tw-shake-round: 14deg;
    }

    body.tw-button-anim :is(.btn-order, .btn-cart, .btn-add-cart, .btn-buy-now, .tw-wa-order, .tw-sticky-order, .tw-sticky-cart,
        .btn-view-all, .top-categories-viewall, .btn-track, .btn-load-more, .cart-page-checkout-btn, .ck-place-order,
        .ck-mobile-bar-btn, .vom-btn-order, .vom-btn-cart, .search-submit, .ck-coupon-btn, .sbn-item--centre .sbn-icon) {
        transition: transform var(--tw-dur) ease, box-shadow var(--tw-dur) ease, background-color var(--tw-dur) ease, color var(--tw-dur) ease;
    }

    @media (hover: hover) {
        body.tw-button-anim :is(.btn-order, .btn-cart, .btn-add-cart, .btn-buy-now, .tw-wa-order, .btn-view-all,
            .top-categories-viewall, .btn-track, .btn-load-more, .cart-page-checkout-btn, .ck-place-order, .vom-btn-order, .vom-btn-cart):hover {
            transform: translateY(var(--tw-lift));
            box-shadow: 0 6px 16px rgba(var(--primary-rgb), .22);
        }

        body.tw-button-anim .tw-wa-order:hover {
            box-shadow: 0 6px 16px rgba(15, 138, 79, .3);
        }
    }

    body.tw-button-anim :is(.btn-order, .btn-cart, .btn-add-cart, .btn-buy-now, .tw-wa-order, .tw-sticky-order, .tw-sticky-cart,
        .btn-view-all, .top-categories-viewall, .btn-track, .btn-load-more, .cart-page-checkout-btn, .ck-place-order,
        .ck-mobile-bar-btn, .vom-btn-order, .vom-btn-cart, .search-submit, .ck-coupon-btn):active,
    body.tw-button-anim .sbn-item--centre:active .sbn-icon {
        animation: none;
        transform: scale(var(--tw-press));
        transition-duration: 90ms;
    }

    /* Attention shake: about half a second of wiggle at the start of every
       4.5 s cycle, then still. tweaks.js sets each button's start on one shared
       clock (SHAKE_CYCLE there must stay equal to 4.5s here), so two buttons on
       screen never shake together. The resting transform means the shake starting
       and stopping (as a button scrolls into and out of view) does not change how
       the button is laid out; without it each start or stop cost a layout mid-scroll. */
    body.tw-button-anim :is(.btn-buy-now, .tw-sticky-order, .tw-wa-order),
    body.tw-button-anim .sbn-item--centre .sbn-icon {
        transform: translateX(0);
    }

    body.tw-button-anim :is(.btn-buy-now, .tw-sticky-order, .tw-wa-order).tw-attn {
        animation: tw-shake 4.5s ease-in-out infinite;
    }

    body.tw-button-anim .sbn-item--centre .sbn-icon.tw-attn {
        animation: tw-shake-round 4.5s ease-in-out infinite;
    }

    @keyframes tw-shake {
        0%, 12%, 100% { transform: none; }
        2% { transform: translateX(calc(var(--tw-shake-x) * -1)) rotate(calc(var(--tw-shake-r) * -1)); }
        4% { transform: translateX(var(--tw-shake-x)) rotate(var(--tw-shake-r)); }
        6% { transform: translateX(calc(var(--tw-shake-x) * -.7)) rotate(calc(var(--tw-shake-r) * -.7)); }
        8% { transform: translateX(calc(var(--tw-shake-x) * .45)) rotate(calc(var(--tw-shake-r) * .45)); }
        10% { transform: translateX(calc(var(--tw-shake-x) * -.2)); }
    }

    @keyframes tw-shake-round {
        0%, 12%, 100% { transform: none; }
        2% { transform: rotate(calc(var(--tw-shake-round) * -1)); }
        4% { transform: rotate(var(--tw-shake-round)); }
        6% { transform: rotate(calc(var(--tw-shake-round) * -.7)); }
        8% { transform: rotate(calc(var(--tw-shake-round) * .45)); }
        10% { transform: rotate(calc(var(--tw-shake-round) * -.2)); }
    }

    /* Added to cart: the button says so for a moment, and the cart count bounces. */
    body.tw-button-anim :is(.btn-add-cart, .btn-cart, .tw-sticky-cart, .vom-btn-cart) {
        position: relative;
    }

    body.tw-button-anim :is(.btn-add-cart, .btn-cart, .tw-sticky-cart, .vom-btn-cart)::before {
        content: attr(data-tw-done);
        position: absolute;
        inset: -1.5px;
        display: flex;
        align-items: center;
        justify-content: center;
        border-radius: inherit;
        background: #12805C;
        color: #fff;
        font-weight: 700;
        font-size: 15px;
        opacity: 0;
        transform: scale(.85);
        transition: opacity 160ms ease, transform 200ms ease;
        pointer-events: none;
        z-index: 2;
    }

    body.tw-button-anim .tw-added::before {
        opacity: 1;
        transform: scale(1);
    }

    body.tw-button-anim .tw-bump {
        animation: tw-bump 520ms cubic-bezier(.3, 1.6, .5, 1);
    }

    @keyframes tw-bump {
        0% { transform: scale(1); }
        35% { transform: scale(var(--tw-bump)); }
        65% { transform: scale(.92); }
        100% { transform: scale(1); }
    }
}

/* ---------- 08 Menu icons and the new side menu ("menu_icons") ----------
   One inline SVG sprite; every icon is a <use> of it, so no request per icon.
   The drawer still slides with transform only (style.css); here it gets a white
   head, search on top, icons, and sub-lists that open by growing their row. */
.tw-i {
    width: 18px;
    height: 18px;
    flex: 0 0 auto;
    fill: none;
    stroke: currentColor;
    stroke-width: 1.9;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.tw-i-img {
    width: 20px;
    height: 20px;
    flex: 0 0 auto;
    object-fit: contain;
}

@media (max-width: 900px) {
    .tw-menu-icons .main-nav {
        flex-wrap: nowrap;
        gap: 0;
        width: min(320px, 88vw);
        contain: layout paint;
    }

    .tw-menu-icons .main-nav.tw-drag {
        transition: none;
    }

    /* The chat button would float over the open menu. */
    .tw-menu-icons.menu-open #gcc-toggle {
        visibility: hidden;
    }

    .tw-menu-icons .tw-dm-head {
        padding: 12px 12px 12px 18px;
        background: #fff;
        color: var(--text);
        border-bottom: 1px solid #eceef1;
    }

    .tw-menu-icons .tw-dm-head .drawer-title {
        font-size: 17px;
    }

    .tw-menu-icons .tw-dm-head .drawer-close {
        width: 40px;
        height: 40px;
        border-radius: 50%;
        background: #f3f4f6;
        color: var(--text);
    }

    .tw-dm {
        flex: 1 1 0;
        min-height: 0;
        overflow-y: auto;
        overscroll-behavior: contain;
        padding: 12px 0 calc(24px + var(--tw-safe-b, 0px));
    }

    .tw-dm-search {
        display: flex;
        align-items: center;
        gap: 8px;
        height: 44px;
        margin: 0 16px 6px;
        padding: 0 12px;
        border-radius: 12px;
        background: #f3f4f6;
        color: var(--muted);
    }

    .tw-dm-search:focus-within {
        outline: 2px solid var(--primary);
        outline-offset: 0;
    }

    .tw-dm-search input {
        flex: 1 1 auto;
        min-width: 0;
        border: 0;
        outline: none;
        background: none;
        font: inherit;
        font-size: 15px;
        color: var(--text);
    }

    .tw-dm-label {
        margin: 16px 18px 4px;
        font-size: 12px;
        font-weight: 700;
        color: var(--muted);
    }

    .tw-dm-list,
    .tw-dm-sub ul {
        margin: 0;
        padding: 0;
        list-style: none;
    }

    .tw-dm-row {
        display: flex;
        align-items: center;
    }

    .main-nav .tw-dm-link {
        display: flex;
        flex: 1 1 auto;
        align-items: center;
        gap: 12px;
        min-width: 0;
        min-height: 48px;
        padding: 6px 8px 6px 16px;
        font-size: 15px;
        font-weight: 600;
        line-height: 1.3;
        color: var(--text);
    }

    .main-nav .tw-dm-link:active {
        background: #f6f6f7;
    }

    .tw-dm-ico {
        display: grid;
        flex: 0 0 auto;
        place-items: center;
        width: 34px;
        height: 34px;
        border-radius: 10px;
        background: rgba(var(--primary-rgb), .08);
        color: var(--primary);
    }

    .tw-dm-ico .tw-i {
        width: 19px;
        height: 19px;
    }

    .tw-dm-link.is-wa .tw-dm-ico {
        background: #25d366;
        color: #fff;
    }

    .tw-dm-toggle {
        display: grid;
        flex: 0 0 auto;
        place-items: center;
        width: 48px;
        height: 48px;
        border: 0;
        background: none;
        color: var(--muted);
        cursor: pointer;
    }

    .tw-dm-toggle .tw-i {
        transition: transform .25s ease;
    }

    .tw-dm-group.is-open > .tw-dm-row .tw-dm-toggle .tw-i {
        transform: rotate(180deg);
    }

    /* The sub-list grows from nothing to its own height; closed, its links leave the tab order. */
    .tw-dm-sub {
        display: grid;
        grid-template-rows: 0fr;
        transition: grid-template-rows .25s ease;
    }

    .tw-dm-sub > ul {
        min-height: 0;
        overflow: hidden;
        visibility: hidden;
        transition: visibility 0s linear .25s;
    }

    .tw-dm-group.is-open > .tw-dm-sub {
        grid-template-rows: 1fr;
    }

    .tw-dm-group.is-open > .tw-dm-sub > ul {
        visibility: visible;
        transition: none;
    }

    .main-nav .tw-dm-sub .tw-dm-link {
        min-height: 44px;
        padding-left: 30px;
        font-size: 14px;
        font-weight: 500;
    }

    .main-nav .tw-dm-sub .tw-dm-sub .tw-dm-link {
        padding-left: 46px;
    }

    .tw-dm-sub .tw-dm-ico {
        width: 28px;
        height: 28px;
        background: none;
    }

    .tw-dm-sub .tw-dm-ico .tw-i {
        width: 17px;
        height: 17px;
    }
}

@media (max-width: 900px) and (prefers-reduced-motion: reduce) {
    .tw-dm-sub,
    .tw-dm-toggle .tw-i {
        transition: none;
    }
}

/* Opening the menu used to flip visibility and pointer-events on it; both pass down
   to every element inside, so the browser restyled ~800 elements on each open and
   close and dropped a frame or two. Here the closed menu is only moved off screen
   and its contents skipped (content-visibility), which also keeps them out of the
   tab order and screen readers; the browser keeps their layout, so opening costs
   little. Closed sub-lists are skipped the same way. Browsers without these
   features keep the old way. */
@supports (content-visibility: hidden) and (transition-behavior: allow-discrete) {
    @media (max-width: 900px) {
        .tw-menu-icons .main-nav {
            visibility: visible;
            pointer-events: auto;
            content-visibility: hidden;
            /* Far enough that the shadow does not show at the screen edge. */
            transform: translateX(calc(-100% - 48px));
            transition: transform .3s ease, content-visibility 0s linear .3s;
            transition-behavior: allow-discrete;
        }

        .tw-menu-icons .main-nav.open {
            content-visibility: visible;
            transform: translateX(0);
            transition: transform .3s ease;
        }

        .tw-menu-icons .main-nav.tw-drag {
            transition: none;
        }

        /* A moment of layout while idle (tweaks.js), still off screen. */
        .tw-menu-icons .main-nav.tw-dm-warm {
            content-visibility: visible;
            transition: none;
        }

        .tw-dm-sub > ul {
            content-visibility: hidden;
            transition: visibility 0s linear .25s, content-visibility 0s linear .25s;
            transition-behavior: allow-discrete;
        }

        .tw-dm-group.is-open > .tw-dm-sub > ul {
            content-visibility: visible;
            transition: none;
        }
    }
}

/* Phase 1 item 2, blog_focus (Saad 2026-10-08): the blog pages read without chrome. The notice
   ticker and the category row are gone, and the header waits above the screen; tweaks.js adds
   .bf-show while the reader scrolls up. It moves by top, so the drawer inside it stays put. */
body.tw-blog-focus.tw-blog-page .notice-ticker,
body.tw-blog-focus.tw-blog-page .header-category-bar { display: none; }
body.tw-blog-focus.tw-blog-page .site-header {
    position: fixed;
    left: 0;
    right: 0;
    top: calc(-1 * var(--bf-h, 200px) - 8px);
    transition: top .25s ease;
}
body.tw-blog-focus.tw-blog-page .site-header.bf-show {
    top: 0;
    box-shadow: 0 4px 16px rgba(0, 0, 0, .08);
}
@media (prefers-reduced-motion: reduce) {
    body.tw-blog-focus.tw-blog-page .site-header { transition: none; }
}

/* ---------- side_menu_v3 (sprint R-A, S2; Saad's r8 pick with two changes) ----------
   The phone side menu as r8 draws it. Change 1: its foot is the three trust boxes only, no logo
   and no credit text (markup: partials/tweaks/side-menu-v3). Change 2: the search box has a
   plain border and nothing glows or moves, focused or not. */
@media (max-width: 900px) {
    body.tw-side-menu-v3 .tw-dm3 {
        display: grid;
        align-content: start;
        gap: 12px;
        flex: 1 1 0;
        min-height: 0;
        overflow-y: auto;
        overscroll-behavior: contain;
        padding: 14px 16px calc(24px + var(--tw-safe-b, 0px));
        background: #fff;
        color: #17191E;
    }

    body.tw-side-menu-v3 .tw-dm3 .tw-i { width: 18px; height: 18px; }

    /* The head logo, sized here too so it holds when side_menu_v2 is off. */
    body.tw-side-menu-v3 .tw-dm3-head .tw-dm-logo img { display: block; width: auto; height: 32px; }

    body.tw-side-menu-v3 .tw-dm3 .tw-dm3-hotline {
        display: flex;
        align-items: center;
        gap: 12px;
        padding: 12px 14px;
        border: 1px solid #ECEEF2;
        border-radius: 16px;
        background: #fff;
    }
    body.tw-side-menu-v3 .tw-dm3 .tw-dm3-hotline-ico {
        display: grid;
        flex: 0 0 44px;
        width: 44px;
        height: 44px;
        place-items: center;
        border-radius: 50%;
        background: #FFF0F5;
        color: #E0004A;
    }
    body.tw-side-menu-v3 .tw-dm3 .tw-dm3-hotline-text { display: grid; flex: 1; min-width: 0; line-height: 1.25; }
    body.tw-side-menu-v3 .tw-dm3 .tw-dm3-hotline-text span { color: #6B7280; font-size: 12px; }
    body.tw-side-menu-v3 .tw-dm3 .tw-dm3-hotline-text strong { font-size: 18px; font-weight: 700; }
    body.tw-side-menu-v3 .tw-dm3 .tw-dm3-call {
        display: inline-flex;
        align-items: center;
        min-height: 36px;
        padding: 0 16px;
        border-radius: 999px;
        background: #E0004A;
        color: #fff;
        font-weight: 700;
    }

    body.tw-side-menu-v3 .tw-dm3 .tw-dm3-search {
        display: flex;
        align-items: center;
        gap: 8px;
        height: 50px;
        margin: 0;
        padding: 0 5px 0 14px;
        border-radius: 999px;
        background: #F7F8FA;
        color: #6B7280;
        text-decoration: none;
    }
    /* Change 2: a plain stroke only, the same focused or not; no glow, no animation. R-A2: the box is
       a link to the search page, so it looks the same pressed; a keyboard user still gets the
       focus_ring outline (tw-r7.css, :focus-visible only). */
    body.tw-side-menu-v3 .tw-dm3 .tw-dm3-search {
        border: 1px solid #DADDE3;
        box-shadow: none;
        animation: none;
        transition: none;
    }
    body.tw-side-menu-v3 .tw-dm3 .tw-dm3-search:is(:hover, :active, :focus) {
        border-color: #DADDE3;
        background: #F7F8FA;
        color: #6B7280;
        box-shadow: none !important;
    }
    body.tw-side-menu-v3 .tw-dm3 .tw-dm3-search-ph {
        flex: 1;
        min-width: 0;
        overflow: hidden;
        font-size: 15px;
        white-space: nowrap;
        text-overflow: ellipsis;
    }
    body.tw-side-menu-v3 .tw-dm3 .tw-dm3-go {
        display: grid;
        flex: 0 0 40px;
        width: 40px;
        height: 40px;
        place-items: center;
        border: 0;
        border-radius: 50%;
        background: #E0004A;
        color: #fff;
    }

    body.tw-side-menu-v3 .tw-dm3 .tw-dm3-label {
        margin: 6px 0 0;
        color: #6B7280;
        font-size: 12px;
        font-weight: 700;
    }
    body.tw-side-menu-v3 .tw-dm3 :is(.tw-dm3-cats, .tw-dm3-pages, .tw-dm3-social, .tw-dm3-trust) {
        margin: 0;
        padding: 0;
        list-style: none;
    }
    body.tw-side-menu-v3 .tw-dm3 .tw-dm3-cat { border-bottom: 1px solid #F0F1F4; }
    body.tw-side-menu-v3 .tw-dm3 .tw-dm3-row { display: flex; align-items: center; gap: 8px; min-height: 56px; }
    body.tw-side-menu-v3 .tw-dm3 .tw-dm3-link { display: flex; flex: 1; align-items: center; gap: 12px; min-width: 0; color: inherit; }
    body.tw-side-menu-v3 .tw-dm3 .tw-dm3-photo {
        display: grid;
        flex: 0 0 40px;
        width: 40px;
        height: 40px;
        overflow: hidden;
        place-items: center;
        border-radius: 50%;
        background: #F7F8FA;
        color: #E0004A;
    }
    body.tw-side-menu-v3 .tw-dm3 .tw-dm3-photo img { width: 100%; height: 100%; object-fit: cover; }
    body.tw-side-menu-v3 .tw-dm3 .tw-dm3-name { font-size: 16px; font-weight: 600; }
    body.tw-side-menu-v3 .tw-dm3 .tw-dm3-toggle {
        display: grid;
        flex: 0 0 36px;
        width: 36px;
        height: 36px;
        place-items: center;
        border: 0;
        border-radius: 50%;
        background: #F3F4F6;
        color: #6B7280;
    }
    body.tw-side-menu-v3 .tw-dm3 .tw-dm3-cat.is-open .tw-dm3-toggle { background: #E0004A; color: #fff; }
    body.tw-side-menu-v3 .tw-dm3 .tw-dm3-cat.is-open .tw-dm3-toggle .tw-i { transform: rotate(180deg); }
    body.tw-side-menu-v3 .tw-dm3 .tw-dm3-cat.is-open .tw-dm3-name { color: #E0004A; }
    body.tw-side-menu-v3 .tw-dm3 .tw-dm3-sub { display: none; }
    body.tw-side-menu-v3 .tw-dm3 .tw-dm3-cat.is-open > .tw-dm3-sub { display: block; }
    body.tw-side-menu-v3 .tw-dm3 .tw-dm3-sub-in { display: grid; gap: 10px; padding: 4px 0 14px 52px; }
    body.tw-side-menu-v3 .tw-dm3 .tw-dm3-pills { display: flex; flex-wrap: wrap; gap: 8px; }
    body.tw-side-menu-v3 .tw-dm3 .tw-dm3-pill {
        display: inline-flex;
        align-items: center;
        min-height: 36px;
        padding: 0 14px;
        border: 1px solid #E5E7EB;
        border-radius: 999px;
        color: #17191E;
        font-size: 14px;
    }
    body.tw-side-menu-v3 .tw-dm3 .tw-dm3-all { display: inline-flex; align-items: center; gap: 4px; color: #E0004A; font-size: 14px; font-weight: 700; }

    /* R-A2 item 3: each page a soft button with its icon, one under the other. */
    body.tw-side-menu-v3 .tw-dm3 .tw-dm3-pages { display: grid; gap: 8px; }
    body.tw-side-menu-v3 .tw-dm3 .tw-dm3-page {
        display: flex;
        align-items: center;
        gap: 12px;
        min-height: 52px;
        padding: 6px 12px 6px 6px;
        border: 1px solid #ECEEF2;
        border-radius: 14px;
        background: #fff;
        color: #17191E;
        font-size: 15px;
        font-weight: 600;
        text-decoration: none;
    }
    body.tw-side-menu-v3 .tw-dm3 .tw-dm3-page:active { background: #FFF5F8; border-color: #F6CADA; }
    body.tw-side-menu-v3 .tw-dm3 .tw-dm3-page-ico {
        display: grid;
        flex: 0 0 38px;
        width: 38px;
        height: 38px;
        place-items: center;
        border-radius: 11px;
        background: #FFF0F5;
        color: #E0004A;
        font-size: 15px;
    }
    body.tw-side-menu-v3 .tw-dm3 .tw-dm3-page-name { flex: 1; min-width: 0; }
    body.tw-side-menu-v3 .tw-dm3 .tw-dm3-page > .tw-i { color: #9CA3AF; }

    body.tw-side-menu-v3 .tw-dm3 .tw-dm3-track {
        display: flex;
        align-items: center;
        gap: 12px;
        padding: 14px 16px;
        border-radius: 16px;
        background: #17191E;
        color: #fff;
    }
    body.tw-side-menu-v3 .tw-dm3 .tw-dm3-track-ico {
        display: grid;
        flex: 0 0 40px;
        width: 40px;
        height: 40px;
        place-items: center;
        border-radius: 12px;
        background: rgba(255, 255, 255, .1);
    }
    body.tw-side-menu-v3 .tw-dm3 .tw-dm3-track-text { display: grid; flex: 1; min-width: 0; }
    body.tw-side-menu-v3 .tw-dm3 .tw-dm3-track-text span { color: #C5C9D2; font-size: 12.5px; }

    /* R-A2 item 3: round icons only, in one row that wraps. */
    body.tw-side-menu-v3 .tw-dm3 .tw-dm3-social { display: flex; flex-wrap: wrap; gap: 8px; }
    body.tw-side-menu-v3 .tw-dm3 .tw-dm3-social-btn {
        display: grid;
        width: 40px;
        height: 40px;
        place-items: center;
        border: 1px solid #F6CADA;
        border-radius: 50%;
        background: #FFF5F8;
        color: #E0004A;
        font-size: 18px;
        text-decoration: none;
    }
    body.tw-side-menu-v3 .tw-dm3 .tw-dm3-social-btn:active { background: #E0004A; border-color: #E0004A; color: #fff; }

    body.tw-side-menu-v3 .tw-dm3 .tw-dm3-trust {
        display: grid;
        grid-template-columns: repeat(3, minmax(0, 1fr));
        gap: 8px;
        padding: 14px 10px;
        border: 1px solid #F6CADA;
        border-radius: 16px;
        background: #FFF5F8;
    }
    body.tw-side-menu-v3 .tw-dm3 .tw-dm3-trust-item {
        display: grid;
        gap: 6px;
        justify-items: center;
        text-align: center;
        font-size: 13px;
        font-weight: 600;
        line-height: 1.3;
    }
    body.tw-side-menu-v3 .tw-dm3 .tw-dm3-trust-item > span {
        display: grid;
        width: 36px;
        height: 36px;
        place-items: center;
        border-radius: 50%;
        background: #fff;
        color: #E0004A;
    }
}

/* ---------- R-A2 (sprint P0 #1 fixes; Saad's feedback on R-A, 2026-10-14) ----------
   Fixes on the switches R-A added, no new switch. tw-ra.js (header_v3) adds .hv3-bars-hidden
   (item 6) and, where :has() is missing, .notice-closed (item 7). R-A3 took item 5 (the logo glass)
   out again: the logo is as before R-A2. */

/* 2. The offer chip row is for phones only, with slimmer chips (like Beauty Booth's). The
   all-categories page keeps its own inline row. */
@media (min-width: 901px) {
    body.tw-chips-center .oc-row:not(.oc-row--inline) {
        display: none;
    }
}

body.tw-chips-v5.tw-chips-center .oc-chip {
    min-height: 34px;
    padding: 0 12px;
    font-size: 13.5px;
}

body.tw-chips-v5.tw-chips-center .b5-oc-list {
    gap: 6px;
    padding-right: 6px;
}

/* 7. The header meets the ticker, or the top of the screen when there is none. style.css keeps
   38px for it on every phone page but home, where the ticker is 34px tall; with no ticker on the
   page (switched off, or closed) it kept the space anyway. */
body.tw-header-v3:not(:has(#noticeTicker:not(.is-hidden))) {
    --notice-height: 0px;
}

@media (max-width: 767px) {
    body.tw-header-v3:has(#noticeTicker:not(.is-hidden)) {
        --notice-height: 34px;
    }
}

/* 6. After a scroll the header and the floating cart stay while scrolling and 1.4 s after it
   stops, then slide away: the header up behind the ticker (or off the top), the cart off the
   right edge. No transform at all while shown: the drawer inside the header is position: fixed,
   and a transform would make the header its frame. Transform only, so nothing else moves. */
body.tw-header-v3 .site-header {
    transition: transform .34s cubic-bezier(.2, .7, .2, 1), box-shadow .2s ease;
}

body.tw-header-v3.hv3-bars-hidden:not(.menu-open) .site-header {
    transform: translateY(-100%);
    box-shadow: none;
}

/* The menu opened while the header was away: back at once, with no transition, so the drawer
   (position: fixed inside the header) never rides a moving frame. */
body.tw-header-v3.menu-open .site-header {
    transition: none;
}

/* :hover too, so a tap that leaves the cart "hovered" on a phone cannot keep it out (tw-ra.css has
   its hover lift and its transition). */
body.tw-header-v3.hv3-bars-hidden .tw-fcart,
body.tw-header-v3.hv3-bars-hidden .tw-fcart:hover {
    transform: translate(110%, -50%);
    box-shadow: none;
}

/* Reduce motion: the slide stays, shorter (standing rule: shorter, never none). */
@media (prefers-reduced-motion: reduce) {
    body.tw-header-v3:not(.tw-ignore-reduced-motion) :is(.site-header, .tw-fcart) {
        transition: transform 150ms ease, box-shadow 150ms ease;
    }
}

/* 4. Order and cart buttons, in the search button's family: the order buttons get its pink glass
   and its passing light, the cart buttons a soft pink face and its icon's tilt. Colours, shadow
   and a pseudo-element only, so no button changes size. */
body.tw-cart-icon-v2 :is(.btn-order, .btn-buy-now, .tw-sticky-order, .cart-page-checkout-btn, .ck-place-order, .vom-btn-order) {
    position: relative;
    overflow: hidden;
    isolation: isolate;
    border-color: transparent;
    background: linear-gradient(140deg, #F23A72, #E0004A);
    color: #fff;
    box-shadow: 0 6px 14px rgba(224, 0, 74, .22), inset 0 1px 0 rgba(255, 255, 255, .22);
}

body.tw-cart-icon-v2 :is(.btn-order, .btn-buy-now, .tw-sticky-order, .cart-page-checkout-btn, .ck-place-order, .vom-btn-order)::after {
    content: "";
    position: absolute;
    top: -20%;
    bottom: -20%;
    left: 0;
    z-index: -1;
    width: 40%;
    background: linear-gradient(90deg, rgba(255, 255, 255, 0), rgba(255, 255, 255, .45), rgba(255, 255, 255, 0));
    opacity: 0;
    pointer-events: none;
}

/* A button the page has switched off keeps looking off. */
body.tw-cart-icon-v2 :is(.btn-order, .btn-buy-now, .tw-sticky-order, .cart-page-checkout-btn, .ck-place-order, .vom-btn-order):disabled {
    background: #E5E7EB;
    color: #6B7280;
    box-shadow: none;
}

body.tw-cart-icon-v2 :is(.btn-order, .btn-buy-now, .tw-sticky-order, .cart-page-checkout-btn, .ck-place-order, .vom-btn-order):disabled::after {
    display: none;
}

body.tw-cart-icon-v2 :is(.btn-cart, .btn-add-cart, .tw-sticky-cart, .vom-btn-cart) {
    border-color: #F4C2D3;
    background: #FFF5F8;
    color: #E0004A;
}

body.tw-cart-icon-v2 :is(.btn-cart, .btn-add-cart, .tw-sticky-cart, .vom-btn-cart) .sb-cart-i {
    transform-origin: 50% 60%;
}

/* The motion: a light passes every 6 s and the cart icon tilts, as on the search button; still
   for people who asked their phone for less motion. Neighbouring cards take turns. */
@media (prefers-reduced-motion: no-preference) {
    body.tw-cart-icon-v2 :is(.btn-order, .btn-buy-now, .tw-sticky-order, .cart-page-checkout-btn, .ck-place-order, .vom-btn-order)::after {
        animation: ra2-sweep 6s ease-in-out 1.2s infinite;
    }

    body.tw-cart-icon-v2 :is(.btn-cart, .btn-add-cart, .tw-sticky-cart, .vom-btn-cart) .sb-cart-i {
        animation: ra2-tilt 6s ease-in-out 1.6s infinite;
    }

    body.tw-cart-icon-v2 .product-card:nth-child(2n) .btn-order::after,
    body.tw-cart-icon-v2 .product-card:nth-child(2n) .btn-cart .sb-cart-i {
        animation-delay: 4.2s;
    }

    @keyframes ra2-sweep {
        0%, 62% { transform: translateX(-130%) skewX(-20deg); opacity: 0; }
        66% { opacity: 1; }
        82%, 100% { transform: translateX(300%) skewX(-20deg); opacity: 0; }
    }

    @keyframes ra2-tilt {
        0%, 64% { transform: rotate(0); }
        70% { transform: rotate(-12deg); }
        76% { transform: rotate(8deg); }
        82%, 100% { transform: rotate(0); }
    }
}