/* ==========================================================================
   Flash Deal 2026 — blue gradient panel, lightning title, live countdown
   (driven by the flashsale.expired column) and restyled discount cards.
   Scoped under body.site2026 .flashDeal2026 so it never touches any other
   page or the legacy .containerFlashSale / .swiper-slide.flashSale rules
   in style.css. The card list is a native horizontally-scrollable, swipeable
   strip (CSS scroll-snap) rather than a Swiper instance, so it can never
   collide with the old fixed-height / touch-move-disabled Swiper rules.
   ========================================================================== */

body.site2026 .flashDeal2026 {
    position: relative;
    border-radius: 20px;
    padding: 24px 24px 28px;
    overflow: hidden;
    background: linear-gradient(135deg, #dce9fb 0%, #eef4fd 100%);
}

[data-theme="dark"] body.site2026 .flashDeal2026 {
    background: linear-gradient(135deg, #16233e 0%, #0e1221 100%);
}

body.site2026 .flashDeal2026 .headerFS {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 12px;
}

body.site2026 .flashDeal2026 .fd-left {
    display: flex;
    align-items: center;
    gap: 12px;
    flex: 1 1 auto;
    min-width: 0;
}

body.site2026 .flashDeal2026 .fd-icon {
    flex-shrink: 0;
    width: 42px;
    height: 42px;
    border-radius: 13px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #fff;
    font-size: 19px;
    background: linear-gradient(135deg, #e11d48, #ec4899);
}

body.site2026 .flashDeal2026 .fd-right {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-shrink: 0;
}

body.site2026 .flashDeal2026 .fd-label {
    font-size: 12.5px;
    font-weight: 600;
    color: var(--dark-blue);
    white-space: nowrap;
}

[data-theme="dark"] body.site2026 .flashDeal2026 .fd-label {
    color: rgba(255, 255, 255, 0.75);
}

body.site2026 .flashDeal2026-title {
    font-family: "Outfit", sans-serif;
    font-size: 17px;
    font-weight: 800;
    color: var(--dark-blue);
    line-height: 1.3;
    white-space: nowrap;
}

[data-theme="dark"] body.site2026 .flashDeal2026-title {
    color: var(--white);
}

/* -------- Countdown (hardened against the mobile wrap/squeeze bug:
   flex-shrink:0 + nowrap everywhere so the digits never get squashed
   or drop onto their own broken line) -------- */
body.site2026 .flashDeal2026-countdown {
    display: flex;
    align-items: center;
    flex-shrink: 0;
    flex-wrap: nowrap;
    white-space: nowrap;
    gap: 5px;
}

body.site2026 .flashDeal2026-countdown .fd-box {
    flex-shrink: 0;
    background: var(--dark-blue);
    color: var(--white);
    font-size: 15px;
    font-weight: 600;
    padding: 6px 9px;
    border-radius: 7px;
    min-width: 30px;
    text-align: center;
    font-variant-numeric: tabular-nums;
}

body.site2026 .flashDeal2026-countdown .fd-sep {
    flex-shrink: 0;
    color: var(--dark-blue);
    font-weight: 600;
}

[data-theme="dark"] body.site2026 .flashDeal2026-countdown .fd-sep {
    color: var(--white);
}

body.site2026 .flashDeal2026-sub {
    font-size: 13px;
    color: #3a4a63;
}

[data-theme="dark"] body.site2026 .flashDeal2026-sub {
    color: rgba(255, 255, 255, 0.65);
}

/* -------- Scroller (native swipe, no JS library needed) -------- */
body.site2026 .flashDeal2026 .fsScroller {
    margin-top: 18px;
    overflow-x: auto;
    overflow-y: hidden;
    -webkit-overflow-scrolling: touch;
    overscroll-behavior-x: contain;
    scrollbar-width: none;
    -ms-overflow-style: none;
}

body.site2026 .flashDeal2026 .fsScroller::-webkit-scrollbar {
    display: none;
    height: 0;
}

body.site2026 .flashDeal2026 .fsScroller {
    cursor: grab;
}

body.site2026 .flashDeal2026 .fsScroller.dragging {
    cursor: grabbing;
    scroll-snap-type: none;
}

body.site2026 .flashDeal2026 .fsTrack {
    display: flex;
    gap: 14px;
    scroll-snap-type: x proximity;
    padding-bottom: 2px;
}

/* -------- Cards -------- */
body.site2026 .flashDeal2026 .fsCard {
    position: relative;
    flex: 0 0 auto;
    width: clamp(150px, 30vw, 190px);
    scroll-snap-align: start;
    border-radius: 16px;
    overflow: hidden;
    cursor: pointer;
    background: var(--white);
    border: 1px solid var(--dark-grey);
    box-shadow: 0 2px 10px rgba(14, 18, 33, 0.06);
}

[data-theme="dark"] body.site2026 .flashDeal2026 .fsCard {
    background: #182036;
    border-color: hsla(0, 0%, 100%, 0.1);
}

body.site2026 .flashDeal2026 .fs-imgwrap {
    position: relative;
    padding: 10px 10px 0;
}

body.site2026 .flashDeal2026 .fs-badge {
    position: absolute;
    top: 18px;
    right: 18px;
    z-index: 2;
    display: flex;
    align-items: center;
    gap: 4px;
    background: #e0353d;
    color: #fff;
    font-size: 11px;
    font-weight: 700;
    padding: 3px 9px;
    border-radius: 999px;
}

/* Fixed, precise aspect-ratio box instead of an arbitrary pixel height,
   so the crop stays consistent (no more "kepotong") at every breakpoint. */
body.site2026 .flashDeal2026 .fs-img {
    width: 100%;
    aspect-ratio: 1 / 1;
    border-radius: 12px;
    background-color: var(--dark-grey);
    background-position: center;
    background-size: cover;
}

body.site2026 .flashDeal2026 .fs-body {
    /* height is intentionally natural/auto (never fixed) so the price
       and old-price lines can never get clipped on small screens */
    padding: 12px 14px 14px;
}

body.site2026 .flashDeal2026 .fs-name {
    font-size: 13.5px;
    font-weight: 800;
    color: var(--black);
    line-height: 1.3;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
}

[data-theme="dark"] body.site2026 .flashDeal2026 .fs-name {
    color: var(--white);
}

body.site2026 .flashDeal2026 .fs-cat {
    font-size: 12px;
    color: var(--black-text);
    opacity: .65;
    margin-top: 2px;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
}

body.site2026 .flashDeal2026 .fs-divider {
    border-top: 1px solid var(--dark-grey);
    margin: 10px 0 8px;
}

[data-theme="dark"] body.site2026 .flashDeal2026 .fs-divider {
    border-top-color: hsla(0, 0%, 100%, 0.1);
}

body.site2026 .flashDeal2026 .fs-old {
    font-size: 11.5px;
    color: var(--black-text);
    opacity: .55;
    text-decoration: line-through;
    white-space: nowrap;
}

body.site2026 .flashDeal2026 .fs-price {
    font-size: 15px;
    font-weight: 800;
    color: var(--accent-blue-2026);
    white-space: nowrap;
    margin-top: 2px;
}

[data-theme="dark"] body.site2026 .flashDeal2026 .fs-price {
    color: #38bdf8;
}

@media (max-width: 576px) {
    body.site2026 .flashDeal2026 {
        padding: 18px 16px 22px;
        border-radius: 16px;
    }

    body.site2026 .flashDeal2026-title {
        font-size: 15px;
        white-space: normal;
    }

    body.site2026 .flashDeal2026 .fd-icon {
        width: 36px;
        height: 36px;
        font-size: 16px;
        border-radius: 11px;
    }

    body.site2026 .flashDeal2026 .fd-label {
        display: none;
    }

    body.site2026 .flashDeal2026-countdown .fd-box {
        font-size: 13px;
        padding: 5px 7px;
        min-width: 26px;
    }

    body.site2026 .flashDeal2026 .fsCard {
        /* ~2.3 cards visible: big enough to read, clearly swipeable */
        width: clamp(128px, 42vw, 150px);
    }
}

/* -------------------------------------------------------------------- */
/* 2026-07 redesign accent overrides (sky/blue, matches new homepage)   */
/* -------------------------------------------------------------------- */
body.site2026 .flashDeal2026-title i {
    color: #E11D48;
}

body.site2026 .flashDeal2026-countdown .fd-box {
    background: #FFF1F2;
    color: #E11D48;
    border: 1px solid #FFE4E6;
}

[data-theme="dark"] body.site2026 .flashDeal2026-countdown .fd-box {
    background: rgba(225, 29, 72, 0.15);
}

/* Hover lift, matching the reference flash-sale cards. */
body.site2026 .flashDeal2026 .fsCard {
    transition: box-shadow 0.25s ease, transform 0.25s ease;
}

body.site2026 .flashDeal2026 .fsCard:hover {
    box-shadow: 0 10px 22px -10px rgba(2, 132, 199, 0.35);
    transform: translateY(-2px);
}

body.site2026 .flashDeal2026 .fs-badge {
    background: linear-gradient(135deg, #e11d48, #ec4899);
}