/* ============================================================
   DekoDeals — shared responsive layer (loaded on every deals page
   via the dekodeals navbar partial, AFTER page styles). Centralises
   mobile/tablet fixes for all deals scopes so the pages are 100%
   responsive without touching each page's own <style> block.
   Scopes covered: dkdeals / dkflash / dklive / dkmoff / dkcity /
   dkevnt / dkcult / dkts / dkcoup / dkdt (detail) / dkpg (shared).
   ============================================================ */

/* Never allow a deals page to scroll sideways.
   `clip` (not `hidden`) — `hidden` makes these elements scroll containers,
   which breaks `position: sticky` on descendants such as the /deals right
   sidebar. `hidden` is kept first as a fallback for old browsers. */
.dkpg,
[class*="-scope"] { overflow-x: hidden; overflow-x: clip; max-width: 100%; }
/* Fluid-image default. `:where()` contributes no specificity, so this is a
   floor that any component rule overrides — as intended. Written as a plain
   descendant selector it scored (0,1,1) and beat every class-only image rule
   in dekodeals-redesign.css (.dklive-card-img, .dkdeals-product-img,
   .dkdeals-hero-avatar, …), forcing height:auto onto images that fill a
   fixed-height media box and cropping them instead of letterboxing. */
:where([class*="-scope"], .dkpg) img { max-width: 100%; height: auto; }

/* Wide content (tables) scrolls inside its own box, not the page. */
.dkpg table,
[class*="-scope"] table { max-width: 100%; }

/* ---- Hard overflow offenders (apply at ALL widths) ----
   Some heroes ship a hardcoded pixel width / bleeding decorations that
   overflow the frame on narrow screens. Neutralise them everywhere. */
.dkflash-hero-head { width: 100% !important; max-width: 100% !important; }
[class*="-hero"] { max-width: 100%; }
.dkdeals-hero, .dkflash-hero, .dkevnt-hero, .dkcity-hero,
.dkts-hero, .dklive-hero, .dkmoff-hero, .dkcult-hero,
.dkdeals-hero-wrap { overflow: hidden; }

/* ================= TABLET (≤ 991px) ================= */
@media (max-width: 991.98px) {

    /* Product-card grids → auto-flow so they never overflow.
       The /deals landing grids (.dkdeals-*) are deliberately NOT in this list:
       they run on the unified column ladder at the end of
       dekodeals-redesign.css, which keeps each teaser section to one complete
       row per breakpoint. auto-fill here fought that and produced the
       half-empty trailing rows the landing page was redesigned to remove. */
    .dkcity-grid, .dkflash-grid, .dkevnt-grid, .dkcult-grid, .dkmoff-grid,
    .dklive-grid, .dkts-grid, .dkpg-grid, .dkcoup-grid {
        grid-template-columns: repeat(auto-fill, minmax(158px, 1fr)) !important;
    }

    /* Main + sidebar layouts → single column. */
    .dkflash-layout, .dklive-layout, .dkts-layout, .dkdt-layout,
    .dkmoff-layout, .dkpg-layout {
        grid-template-columns: minmax(0, 1fr) !important;
    }

    /* Sidebars stop being sticky/fixed and flow full width. */
    .dklive-sidebar, .dkts-sidebar, .dkdt-side, .dkmoff-side, .dkcult-side {
        position: static !important;
        width: auto !important;
        max-width: none !important;
    }

    /* Heroes stack image under text. */
    .dkcity-hero, .dkevnt-hero, .dkflash-hero, .dkdt-hero,
    .dkts-hero, .dklive-hero, .dkmoff-hero {
        grid-template-columns: 1fr !important;
    }

    /* Secondary stat / how-to / benefit grids. */
    .dklive-stats-grid, .dklive-howto-grid, .dkts-benefits-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    }
}

/* ============================================================
   DEALS LANDING (/deals) - final phone hero authority
   ============================================================ */
@media (max-width: 767.98px) {
    .dkdeals-scope .container,
    .dkdeals-scope .container.px-xl-5 {
        width: 100% !important;
        max-width: 100% !important;
        padding-left: 14px !important;
        padding-right: 14px !important;
    }

    .dkdeals-hero-wrap {
        padding: 12px 0 14px !important;
        overflow: visible !important;
    }

    .dkdeals-hero {
        display: grid !important;
        grid-template-columns: minmax(0, 1fr) !important;
        gap: 16px !important;
        width: 100% !important;
        min-width: 0 !important;
        min-height: auto !important;
        padding: 20px 14px 16px !important;
        border-radius: 14px !important;
        overflow: hidden !important;
    }

    .dkdeals-hero > * {
        min-width: 0 !important;
    }

    .dkdeals-hero-content {
        order: 1 !important;
        width: 100% !important;
        max-width: none !important;
        justify-content: flex-start !important;
    }

    .dkdeals-hero-title {
        max-width: 100% !important;
        font-size: 30px !important;
        line-height: 1.02 !important;
        margin-bottom: 12px !important;
    }

    .dkdeals-hero-subtitle {
        max-width: 100% !important;
        font-size: 13px !important;
        line-height: 1.45 !important;
        margin-bottom: 10px !important;
    }

    .dkdeals-hero-tagline {
        font-size: 13px !important;
        line-height: 1.35 !important;
        margin-bottom: 14px !important;
    }

    .dkdeals-hero-btns {
        display: grid !important;
        grid-template-columns: minmax(0, 1fr) !important;
        gap: 9px !important;
        width: 100% !important;
        max-width: 220px !important;
        margin-bottom: 14px !important;
    }

    .dkdeals-hero-btns .dkdeals-hero-btn,
    .dkdeals-hero-btn {
        width: 100% !important;
        min-height: 36px !important;
        padding: 10px 14px !important;
        justify-content: center !important;
        font-size: 11px !important;
        white-space: nowrap !important;
    }

    .dkdeals-hero-stats {
        max-width: 100% !important;
        font-size: 11.5px !important;
        line-height: 1.3 !important;
        align-items: center !important;
    }

    .dkdeals-hero-center {
        order: 2 !important;
        width: 100% !important;
        align-items: stretch !important;
        justify-content: flex-start !important;
        gap: 12px !important;
        padding-top: 0 !important;
        overflow: hidden !important;
    }

    .dkdeals-countdown {
        width: 100% !important;
        max-width: 230px !important;
        min-width: 0 !important;
        align-self: flex-start !important;
        padding: 9px 14px 8px !important;
        border-radius: 10px !important;
    }

    .dkdeals-countdown-time,
    .dkdeals-countdown-num,
    .dkdeals-countdown-sep {
        font-size: 22px !important;
    }

    .dkdeals-countdown-units {
        gap: 22px !important;
        font-size: 7.5px !important;
    }

    .dkdeals-hero-products {
        display: flex !important;
        grid-template-columns: none !important;
        width: 100% !important;
        gap: 10px !important;
        overflow-x: auto !important;
        overflow-y: visible !important;
        padding: 4px 2px 10px !important;
        scroll-snap-type: x mandatory;
        scrollbar-width: none;
        -webkit-overflow-scrolling: touch;
    }

    .dkdeals-hero-products::-webkit-scrollbar {
        display: none;
    }

    .dkdeals-hero-products .dkdeals-hero-product,
    .dkdeals-hero-products .dkdeals-hero-product:nth-child(1),
    .dkdeals-hero-products .dkdeals-hero-product:nth-child(2),
    .dkdeals-hero-products .dkdeals-hero-product:nth-child(3) {
        display: block !important;
        flex: 0 0 138px !important;
        width: 138px !important;
        max-width: 138px !important;
        min-height: 164px !important;
        padding: 8px !important;
        scroll-snap-align: start;
        transform: none !important;
    }

    .dkdeals-hero-product-img {
        height: 82px !important;
        border-radius: 8px !important;
    }

    .dkdeals-hero-product-name {
        min-height: 24px !important;
        font-size: 10px !important;
    }

    .dkdeals-hero-product-price {
        font-size: 12px !important;
    }

    .dkdeals-hero-product-badge {
        top: -6px !important;
        right: -6px !important;
        font-size: 9px !important;
        padding: 4px 8px !important;
    }

    .dkdeals-hero-previews,
    .dkdeals-hero-chat {
        display: none !important;
    }
}

@media (max-width: 380px) {
    .dkdeals-hero {
        padding: 18px 12px 14px !important;
    }

    .dkdeals-hero-title {
        font-size: 27px !important;
    }

    .dkdeals-hero-subtitle {
        font-size: 12.5px !important;
    }

    .dkdeals-hero-btns {
        max-width: none !important;
    }

    .dkdeals-countdown {
        max-width: 214px !important;
    }

    .dkdeals-hero-products .dkdeals-hero-product {
        flex-basis: 132px !important;
        width: 132px !important;
        max-width: 132px !important;
    }
}

/* ================= PHONE (≤ 767px) ================= */
@media (max-width: 767.98px) {

    /* Tighten container gutters. */
    .dkpg .container,
    [class*="-scope"] .container,
    .container.px-xl-5 {
        padding-left: 14px !important;
        padding-right: 14px !important;
    }

    /* Filter bars wrap instead of overflowing; each control fills a row. */
    .dkflash-filterbar, .dkcult-filterbar, .dkmoff-filterbar,
    .dklive-filterbar, .dkts-filters, .dkpg-filterbar {
        flex-wrap: wrap !important;
        gap: 10px !important;
    }
    .dkflash-filterbar > *, .dkcult-filterbar > *, .dkmoff-filterbar > *,
    .dklive-filterbar > *, .dkts-filters > * {
        flex: 1 1 46% !important;
        min-width: 0 !important;
    }
    .dkflash-filterbar select, .dkcult-filterbar select, .dkmoff-filterbar select,
    .dklive-filterbar select, .dkts-filters select,
    .dkflash-filterbar input, .dkcult-filterbar input, .dkmoff-filterbar input {
        width: 100% !important;
    }
    /* …but full-width is meant for text/select controls only. Without this the
       !important above also stretches checkboxes into 200px+ boxes and shoves
       their labels to the far right. */
    [class*="-filterbar"] input[type="checkbox"], [class*="-filterbar"] input[type="radio"],
    .dkts-filters input[type="checkbox"], .dkts-filters input[type="radio"] {
        width: 16px !important;
        min-width: 16px !important;
        flex: 0 0 16px !important;
    }

    /* Category / market chip rows scroll horizontally rather than wrap-explode. */
    .dkcity-cats, .dkpg-chips, .dkcult-markets, .dkevnt-filters .dkpg-chips {
        display: flex !important;
        flex-wrap: nowrap !important;
        overflow-x: auto !important;
        -webkit-overflow-scrolling: touch;
        grid-template-columns: none !important;
        scrollbar-width: none;
        /* Must start flush left. A centred rail (e.g. .dkcult-pills) pushes its
           first chips to negative offsets once the row overflows, and scrollLeft
           cannot go below 0 — so those chips become permanently unreachable. */
        justify-content: flex-start !important;
    }
    .dkcity-cats::-webkit-scrollbar, .dkpg-chips::-webkit-scrollbar { display: none; }
    .dkcity-cats > *, .dkpg-chips > * { flex: 0 0 auto; }

    /* Heroes: less padding, smaller headings. */
    .dkcity-hero, .dkevnt-hero, .dkflash-hero, .dkts-hero,
    .dklive-hero, .dkmoff-hero, .dkdeals-hero {
        padding: 18px 16px !important;
        min-height: auto !important;
    }
    .dkcity-hero-title, .dkevnt-hero-title, .dkflash-hero-title,
    .dkts-hero-title, .dklive-hero-title, .dkdeals-hero-title,
    .dkdt-title {
        font-size: 24px !important;
        line-height: 1.25 !important;
    }

    /* Two-column hero heads stack (flash countdown, event inner, etc.). */
    .dkflash-hero-head, [class*="hero-head"], [class*="hero-inner"] {
        flex-direction: column !important;
        align-items: stretch !important;
        width: 100% !important;
    }
    .dkflash-countdown-panel, .dkflash-hero-left,
    [class*="hero-media"], [class*="countdown-panel"] {
        width: 100% !important;
        max-width: 100% !important;
        min-width: 0 !important;
    }

    /* Detail-page action rows and side-actions stack. */
    .dkdt-side-actions, .dkdeals-product-actions, .dkmoff-actions {
        flex-wrap: wrap !important;
    }

    /* Feature strips → 2 up. */
    .dkpg-featstrip { grid-template-columns: repeat(2, 1fr) !important; }
}

/* ================= SMALL PHONE (≤ 480px) ================= */
@media (max-width: 480px) {
    /* .dkdeals-* landing grids excluded — see the ≤991px note above; below
       768px they are swipeable rails, not grids. */
    .dkcity-grid, .dkflash-grid, .dkevnt-grid, .dkcult-grid, .dkmoff-grid,
    .dklive-grid, .dkts-grid, .dkpg-grid, .dkcoup-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    }
    .dklive-stats-grid, .dkts-benefits-grid, .dkpg-featstrip {
        grid-template-columns: 1fr 1fr !important;
    }
    /* Single-column for anything that still feels cramped. */
    .dklive-howto-grid { grid-template-columns: 1fr !important; }
}

/* ============================================================
   FLASH SALES (/deals/flash-sales) — dedicated professional
   responsive pass. Authoritative layer: overrides the base
   page rules so this page is fully responsive at every width.
   ============================================================ */

/* Large tablet / small laptop — tighten sidebar, 3-up grid. */
@media (max-width: 1199.98px) {
    .dkflash-layout { grid-template-columns: 200px minmax(0, 1fr) !important; gap: 18px !important; }
    .dkflash-grid   { grid-template-columns: repeat(3, minmax(0, 1fr)) !important; }
}

/* Tablet — sidebar moves above the grid; categories become pills. */
@media (max-width: 991.98px) {
    .dkflash-layout { grid-template-columns: 1fr !important; gap: 16px !important; }
    .dkflash-sidebar { position: static !important; }
    .dkflash-sidebar .dkpg-card { display: flex !important; flex-wrap: wrap !important; gap: 6px !important; padding: 12px !important; }
    .dkflash-side-title { flex: 1 1 100% !important; padding: 2px 2px 6px !important; }
    .dkflash-cat { margin: 0 !important; border-radius: 999px !important; padding: 7px 13px !important; background: #f6f7fb !important; }
    /* …but the pill background above is !important, so it also beat the
       selected chip's gradient and left white text on #f6f7fb. Re-assert it. */
    .dkflash-cat.active { background: var(--fs-grad) !important; color: #fff !important; }
    .dkflash-cat.active .dkflash-cat-count { background: rgba(255, 255, 255, .25) !important; color: #fff !important; }
    .dkflash-alert-card { flex: 1 1 100% !important; }
    .dkflash-grid { grid-template-columns: repeat(3, minmax(0, 1fr)) !important; }

    /* Hero: text + countdown stack full width. */
    .dkflash-hero { padding: 30px 24px !important; }
    .dkflash-hero-head { flex-direction: column !important; align-items: stretch !important; gap: 20px !important; width: 100% !important; }
    /* The desktop `flex: 1 1 320px` sizes the MAIN axis — once the head turns
       into a column that basis becomes a 320px HEIGHT, leaving ~200px of dead
       space under the title. Size to content instead. */
    .dkflash-hero-left { flex: 0 0 auto !important; min-width: 0 !important; }
    .dkflash-countdown-panel { width: 100% !important; justify-content: space-between !important; }

    /* Filter bar: two controls per row. */
    .dkflash-filterbar > div { flex: 1 1 46% !important; min-width: 46% !important; }
}

/* Phone. */
@media (max-width: 767.98px) {
    .dkflash-hero { padding: 22px 16px !important; border-radius: 16px !important; }
    .dkflash-hero-title { font-size: 30px !important; }
    .dkflash-title-bolt { font-size: 23px !important; }
    .dkflash-hero::after { display: none !important; }
    .dkflash-hero-sub { font-size: 13px !important; }
    .dkflash-hero-badges { gap: 8px !important; margin-top: 16px !important; }
    .dkflash-hero-badge { font-size: 11px !important; padding: 6px 10px !important; }

    /* Countdown stacks its two blocks. */
    .dkflash-countdown-panel { flex-wrap: wrap !important; gap: 14px !important; padding: 16px !important; }
    .dkflash-cd-divider { display: none !important; }
    .dkflash-cd-block, .dkflash-cd-progress { flex: 1 1 100% !important; min-width: 0 !important; max-width: none !important; }
    .dkflash-countdown-num { min-width: 46px !important; font-size: 19px !important; }

    /* Filter bar: full-width stacked controls (price inputs stay inline). */
    .dkflash-filterbar { flex-direction: column !important; align-items: stretch !important; gap: 12px !important; }
    .dkflash-filterbar > div { flex: 1 1 100% !important; min-width: 0 !important; width: 100% !important; }
    .dkflash-filterbar select, .dkflash-filterbar .dkpg-btn { width: 100% !important; }

    /* Clean 2-up product grid (replaces the hidden horizontal carousel). */
    .dkflash-grid { display: grid !important; grid-template-columns: repeat(2, minmax(0, 1fr)) !important; gap: 11px !important; overflow: visible !important; }
    .dkflash-grid > * { flex: none !important; max-width: none !important; }
    .dkflash-section-title { font-size: 17px !important; }
    .dkflash-section-sub { display: none !important; }

    /* Card density on small screens. */
    .dkflash-body { padding: 10px !important; }
    .dkflash-name { font-size: 13px !important; }
    .dkflash-price { font-size: 16px !important; }
}

/* Small phone. */
@media (max-width: 460px) {
    .dkflash-hero-title { font-size: 25px !important; }
    .dkflash-countdown-num { min-width: 40px !important; font-size: 17px !important; }
    .dkflash-countdown-sep { font-size: 15px !important; }
    .dkflash-grid { gap: 9px !important; }
}

/* ============================================================
   COUPONS (/deals/coupons) — dedicated professional responsive
   pass. Authoritative layer over the base page rules.
   ============================================================ */

/* Tablet — sidebar drops below and its cards flow two-up.
   minmax(0, …) is required: a bare `1fr` is minmax(auto, 1fr), so the track
   floors at the widest child's min-content and the whole column (cards
   included) blows past the frame. */
@media (max-width: 991.98px) {
    .dkcoup-layout { grid-template-columns: minmax(0, 1fr) !important; gap: 18px !important; }
    .dkcoup-layout > aside {
        display: grid !important;
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
        gap: 16px !important;
        align-items: start !important;
        min-width: 0 !important;
    }
    .dkcoup-layout > * { min-width: 0 !important; }
    .dkcoup-layout > aside .dkcoup-side-card { margin-bottom: 0 !important; }

    /* Sidebar chip rows wrap (as the markup intends) instead of inheriting the
       horizontal-scroll treatment meant for full-width filter rows. */
    .dkcoup-side-card .dkpg-chips {
        flex-wrap: wrap !important;
        overflow-x: visible !important;
    }
}

/* Phone. */
@media (max-width: 767.98px) {
    /* Heading + search. */
    .dkcoup-header { margin-top: 18px !important; }
    .dkcoup-title { font-size: 26px !important; line-height: 1.2 !important; }
    .dkcoup-sub { font-size: 13px !important; }
    /* An <input> defaults to a ~20-character intrinsic width, so without
       min-width:0 the flex row can't shrink and pushes the button out. */
    .dkcoup-search input { font-size: 13px !important; padding: 12px 10px !important; min-width: 0 !important; }
    .dkcoup-search button { padding: 0 18px !important; flex: 0 0 auto !important; }

    /* Coupon row → grid (logo + body on top, action block full-width below).
       Grid guarantees the CTA can't push past the frame like flex-wrap could. */
    .dkcoup-row {
        display: grid !important;
        grid-template-columns: auto minmax(0, 1fr) !important;
        grid-template-areas: "logo body" "cta cta" !important;
        gap: 12px 14px !important;
        padding: 14px 16px !important;
        align-items: start !important;
    }
    .dkcoup-logo { grid-area: logo !important; width: 56px !important; height: 56px !important; flex: 0 0 56px !important; }
    .dkcoup-body { grid-area: body !important; min-width: 0 !important; }
    /* Reserve room for the absolutely-positioned favourite heart so the
       category/redeem/verified badges don't run underneath it. */
    .dkcoup-cat { padding-right: 26px !important; }
    .dkcoup-cta { grid-area: cta !important; flex: none !important; width: 100% !important; max-width: 100% !important; text-align: left !important; }
    .dkcoup-code, .dkcoup-clip { width: 100% !important; max-width: 100% !important; box-sizing: border-box !important; }
    .dkcoup-code { justify-content: center !important; }
    .dkcoup-use-row { display: flex !important; flex-wrap: wrap !important; gap: 8px !important; margin-top: 8px !important; }
    .dkcoup-use-row > * { flex: 1 1 46% !important; min-width: 0 !important; box-sizing: border-box !important; }

    /* Sidebar back to a single column on phones. */
    .dkcoup-layout > aside { grid-template-columns: minmax(0, 1fr) !important; }

    /* Long single-word brands ("Demomerchant") must break inside the tile
       rather than spill out of it. */
    .dkcoup-logo { overflow: hidden !important; overflow-wrap: anywhere !important; }

    /* "How it works" strip stacks; drop the connector arrows. */
    .dkcoup-how { flex-direction: column !important; align-items: stretch !important; gap: 14px !important; padding: 18px 16px !important; }
    .dkcoup-how-step { width: 100% !important; }
    .dkcoup-how-sub { max-width: none !important; }
    .dkcoup-how-arrow { display: none !important; }
    .dkcoup-how-spark { display: none !important; }
}

/* Small phone. */
@media (max-width: 460px) {
    .dkcoup-title { font-size: 23px !important; }
    .dkcoup-logo { width: 50px !important; height: 50px !important; flex: 0 0 50px !important; }
    .dkcoup-deal-title { font-size: 15px !important; }
}

/* ============================================================
   LIVE BIDDING (/deals/live-bidding) — dedicated responsive
   pass. Authoritative layer over the base page rules.
   ============================================================ */

/* Tablet and below — the sidebar is replaced by the filter drawer. */
@media (max-width: 991.98px) {
    /* The hero is a flex row that wraps. `.dklive-hero-left` is forced to
       100%, so the stats grid wraps to its own line — but as a flex item it
       shrink-wraps to its max-content (a frozen 255px), leaving a dead gap
       across the rest of the hero. Make it claim the full line.
       (The base sheet tries to fix this via `.dklive-hero-stats`, which no
       longer exists in the markup — the element is `.dklive-stats-grid`.) */
    .dklive-stats-grid {
        flex: 1 1 100% !important;
        width: 100% !important;
        min-width: 0 !important;
    }

    /* Hero text must be able to shrink rather than push the badge around. */
    .dklive-hero-left { min-width: 0 !important; }
    .dklive-hero-text { min-width: 0 !important; }
}

/* Phone. */
@media (max-width: 767.98px) {
    /* `.dklive-filterbar > *` gets `flex: 1 1 46%` from the shared filter-bar
       rule above, which is meant for paired select controls. The pill rail and
       the sort control are not that — each needs its own full-width row, or the
       rail is squeezed to half and the sort select is unreadable. */
    .dklive-filterbar { flex-direction: column !important; align-items: stretch !important; }
    .dklive-filterbar > * { flex: 1 1 auto !important; width: 100% !important; }

    /* Keep the pill rail a horizontal scroller (it must not wrap into rows). */
    .dklive-pills {
        flex-wrap: nowrap !important;
        overflow-x: auto !important;
        -webkit-overflow-scrolling: touch;
        scrollbar-width: none;
    }
    .dklive-pills::-webkit-scrollbar { display: none; }
    .dklive-pill { flex: 0 0 auto !important; }

    .dklive-sort { justify-content: space-between !important; }
    .dklive-sort select { min-width: 0 !important; }
}

/* Small phone — keep two auction cards per row.
   dekodeals-redesign.css pairs a 1-up grid with a taller 168px card image at
   ≤400px. The shared 2-up grid rule above is !important, so it overrode only
   the grid and left that full-width image height on a half-width card — a
   152px-wide card standing 424px tall. We want the 2-up grid, so bring the
   image back in line with the rest of the phone range (130px). */
@media (max-width: 400px) {
    .dklive-card-media { height: 130px !important; }
}

/* ============================================================
   OFFER MARKET (/make-offer) — dedicated responsive pass.
   Authoritative layer over the base page rules.
   ============================================================ */

/* Pin "Make Offer" to the card bottom (all widths). The card body is already a
   flex column that grows, but the button only had a fixed `margin-top: 10px` —
   so its position followed the content above it. A title wrapping to two lines,
   or a "Free Shipping" meta chip wrapping where a "Ships" one didn't, dropped
   that card's button below its neighbours'. Cards in a grid row stretch to
   equal height, so an auto top margin lines every button up. */
.dkmoff-card .dkpg-btn { margin-top: auto !important; }
.dkmoff-card .dkmoff-retail { margin-bottom: 10px !important; }

/* Phone — the base sheet turns the product grid into a swipeable carousel
   (`display:flex` + 66vw cards + scroll-snap), so only ~1.5 cards are visible
   and the other 10 hide behind a sideways scroll with no affordance. The
   shared grid rule above sets grid-template-columns but never overrides
   `display:flex`, and the base sheet loads last — so it stayed a carousel.
   Match the rest of DekoDeals: a clean 2-up grid that wraps. */
@media (max-width: 767.98px) {
    .dkmoff-grid {
        display: grid !important;
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
        gap: 11px !important;
        overflow: visible !important;
        scroll-snap-type: none !important;
        padding-bottom: 0 !important;
    }
    .dkmoff-grid > * {
        flex: none !important;
        max-width: none !important;
        width: auto !important;
        scroll-snap-align: none !important;
    }

    /* Card internals: keep the name block from collapsing rows out of
       alignment, and let long titles wrap rather than stretch the track. */
    .dkmoff-card { min-width: 0 !important; }
    .dkmoff-name { overflow-wrap: anywhere !important; }

    /* Hero trust list: once it wraps to one-per-row, `justify-content: center`
       centres each row on its own width, so the three icons land at three
       different x positions (116 / 105 / 125 at 385px). Grid gives the column a
       single max-content track that is centred as a block, while the rows start
       flush inside it — so the icons line up. */
    .dkmoff-trust {
        display: grid !important;
        justify-content: center !important;
        gap: 10px !important;
    }
    .dkmoff-trust-item {
        justify-self: start !important;
        text-align: left !important;
    }
}

/* Small phone — stack the filter fields. Two-up squeezes the paired price
   inputs so hard that their "Min $" / "Max $" placeholders truncate. */
@media (max-width: 480px) {
    .dkmoff-filterbar { grid-template-columns: minmax(0, 1fr) !important; }
    .dkmoff-filterbar .dkpg-btn { width: 100% !important; justify-content: center !important; }
    /* The Apply button carries an `&nbsp;` label purely to bottom-align it
       next to a field; stacked, that spacer is just a blank line. */
    .dkmoff-field:last-child label { display: none !important; }
}

/* ============================================================
   CULTURAL DEALS (/deals/cultural-deals) — dedicated responsive
   pass. Authoritative layer over the base page rules.
   ============================================================ */

/* Card actions must never spill out of the card (all widths).
   `.dkcult-actions .dkpg-btn` is `flex: 1 1 0` with `white-space: nowrap`, and a
   flex item's automatic minimum size is its min-content — so the pair could not
   shrink below the ~200px their labels need and overflowed the card instead.
   The card clips (`overflow: hidden`), which is why "Make Offer" rendered as
   "Make" on every two-button card at 768/991. Basis auto + wrap lets the pair
   sit side by side when there is room and stack when there isn't. */
.dkcult-actions { flex-wrap: wrap !important; }
.dkcult-actions .dkpg-btn { flex: 1 1 auto !important; }

/* Phone — the base sheet turns this grid into a swipeable carousel
   (`display:flex` + 66vw cards + scroll-snap), hiding all but ~1.5 of the 61
   deals behind a sideways scroll. The shared grid rule sets
   grid-template-columns but never overrides `display:flex`, and the base sheet
   loads last, so the carousel survived. Match the rest of DekoDeals. */
@media (max-width: 767.98px) {
    .dkcult-grid {
        display: grid !important;
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
        gap: 11px !important;
        overflow: visible !important;
        scroll-snap-type: none !important;
        padding-bottom: 0 !important;
    }
    .dkcult-grid > * {
        flex: none !important;
        max-width: none !important;
        width: auto !important;
        scroll-snap-align: none !important;
    }
    .dkcult-card { min-width: 0 !important; }
    .dkcult-name { overflow-wrap: anywhere !important; }

    /* The pill rail sits under a centred hero; its 50px top margin was tuned
       for the wrapped desktop layout and leaves a gap once it is a rail. */
    .dkcult-pills { margin-top: 18px !important; }
}

/* Card badges: the region tag is anchored left at its content width and the
   "% OFF" badge is anchored 42px from the right (clearing the favourite). On a
   narrow card the two meet and overlap — "Caribbean" rendered as "Caribbear"
   under the discount pill on 25 of 120 badge pairs at 385px and 768px.
   This depends on the CARD's width, not the viewport (the card is 171px in the
   2-up phone grid but 366px at 767px), so it needs a container query rather
   than a breakpoint. Under 200px the discount drops to the image's bottom-left,
   which keeps both labels whole. */
.dkcult-media { container-type: inline-size; }
@container (max-width: 200px) {
    .dkcult-off {
        top: auto !important;
        bottom: 8px !important;
        left: 9px !important;
        right: auto !important;
    }
}

/* ============================================================
   TOP SELLER DEALS (/deals/top-seller-deals) — dedicated
   responsive pass. Authoritative layer over the base rules.
   ============================================================ */

/* Once the two-column layout collapses (the page's own breakpoint is 1100px),
   the sidebar still comes first in the DOM — so the TOP SELLERS list and the
   BENEFITS panel (702px of them) render above the page heading and every deal.
   Deals first; the supporting panels follow. */
@media (max-width: 1100px) {
    .dkts-main { order: 1 !important; }
    .dkts-sidebar { order: 2 !important; }
}

/* Phone. */
@media (max-width: 767.98px) {
    /* Unfloor the whole chain down to the rail. Both the sidebar (a grid item)
       and its cards (flex items, `flex: 1 1 280px`) keep `min-width: auto`, so
       each floors at its content's min-content width. Without this the rail
       cannot scroll at all: sidebar and card both grow to the full 722px of
       sellers, the page clips the excess, and the last sellers are unreachable
       — the same failure the centred chip rail had. */
    /* `flex-wrap: wrap` is inherited from the page's ≤1100 row layout. Left on
       a column, it makes a column-wrap container: the flex line's cross size
       comes from the items' max-content, so the card takes 756px instead of
       stretching to the 357px sidebar. It must be nowrap once this is a column. */
    .dkts-sidebar {
        flex-direction: column !important;
        flex-wrap: nowrap !important;
        min-width: 0 !important;
    }
    .dkts-sidebar > * { min-width: 0 !important; flex: 1 1 auto !important; }

    /* TOP SELLERS becomes a swipeable rail rather than a 344px vertical stack:
       avatar over name, and the chevron is dropped — it reads as a "go to row"
       affordance that no longer makes sense once each seller is a card. */
    .dkts-seller-list {
        flex-direction: row !important;
        overflow-x: auto !important;
        gap: 10px !important;
        padding-bottom: 4px !important;
        scroll-snap-type: x proximity;
        -webkit-overflow-scrolling: touch;
        scrollbar-width: none;
        justify-content: flex-start !important;
    }
    .dkts-seller-list::-webkit-scrollbar { display: none; }
    .dkts-seller-item {
        flex: 0 0 auto !important;
        width: 112px !important;
        flex-direction: column !important;
        align-items: center !important;
        text-align: center !important;
        gap: 6px !important;
        padding: 10px 8px !important;
        background: #f8fafc;
        scroll-snap-align: start;
    }
    .dkts-seller-info { flex: none !important; width: 100% !important; }
    .dkts-seller-arrow { display: none !important; }

    /* "Featured Top Sellers" becomes a swipe rail too, matching TOP SELLERS
       above. It is a 6-col grid by default (2-up on phones = a 483px block), so
       the grid template has to be cleared, not just the display switched. */
    .dkts-featured {
        display: flex !important;
        flex-wrap: nowrap !important;
        grid-template-columns: none !important;
        overflow-x: auto !important;
        gap: 10px !important;
        padding-bottom: 4px !important;
        scroll-snap-type: x proximity;
        -webkit-overflow-scrolling: touch;
        scrollbar-width: none;
        justify-content: flex-start !important;
    }
    .dkts-featured::-webkit-scrollbar { display: none; }
    .dkts-featured-card {
        flex: 0 0 auto !important;
        width: 150px !important;
        scroll-snap-align: start;
    }

    /* `.dkts-main` is a grid item, so its min-width:auto would floor it at the
       rail's full width and the rail would overflow-and-clip instead of scroll. */
    .dkts-main { min-width: 0 !important; }

    /* The category rail and the rating select are not a pair of equal controls,
       but the shared filter-bar rule gives every child `flex: 1 1 46%` — which
       squeezed the rail to half width (174px of 357px). Give each its own row. */
    .dkts-filters { flex-direction: column !important; align-items: stretch !important; }
    .dkts-filters > * { flex: 1 1 auto !important; width: 100% !important; }
    .dkts-ratingfilter { justify-content: space-between !important; }
}

/* ============================================================
   DEALS LANDING (/deals) — dedicated responsive pass.
   Authoritative layer over the base page rules.
   ============================================================ */

/* Client feedback: each /deals section gets its own full-width row.
   Keep minmax(0, 1fr) so cards can shrink on small screens without overflow. */
.dkdeals-two-col,
.dkdeals-full-row {
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) !important;
    gap: 16px;
}
.dkdeals-two-col > *,
.dkdeals-full-row > * { min-width: 0; }

@media (max-width: 991.98px) {
    .dkdeals-two-col,
    .dkdeals-full-row {
        grid-template-columns: minmax(0, 1fr) !important;
    }
    .dkdeals-card { min-width: 0 !important; }
}

/* Card action buttons: `.dkdeals-product-actions` is `grid-template-columns:
   1fr 1fr`, i.e. minmax(auto, 1fr) twice — so each track floors at its button's
   min-content. `.dkdeals-btn` is `white-space: nowrap`, so the pair could not
   shrink below their labels (~136px) and spilled out of a 147px swipe-rail card
   by up to 40px, clipping "Make Offer". Wrap instead: side by side when they
   fit, stacked when they don't. */
.dkdeals-product-actions {
    display: flex !important;
    flex-wrap: wrap !important;
}
.dkdeals-product-actions > * { flex: 1 1 auto !important; min-width: 0 !important; }

/* Hero ribbons are decorative confetti and are declared `position: absolute`,
   but `.dkdeals-hero > * { position: relative }` appears later in the same file
   at equal specificity (0,1,0), so source order wins and they compute to
   relative. That turns all six into real grid items, each taking its own row:
   they occupied y=0–162 and pushed the entire hero down by 162px of blank
   space on mobile. Restore the intended floating decoration. */
.dkdeals-hero-ribbon {
    position: absolute !important;
    /* Same rule also blankets them with z-index:3 — the value the hero CONTENT
       uses — so once floating they painted on top of the headline and struck
       through the text. Confetti belongs above the ::before/::after background
       decorations (z-index 0) but behind the copy. */
    z-index: 2 !important;
}

/* Phone — flatten the hero's 3D product showcase.
   `.dkdeals-hero-products` sets `perspective: 1000px` and each card gets its own
   transform (card 1 `rotateY(-8deg) rotateX(2deg)`, card 2
   `translateY(-12px) translateZ(20px)`). That is a deliberate desktop effect,
   but side by side in a 283px row the rotation and the perspective-scaling from
   translateZ render the pair at different sizes and offsets (134x169 at y=-2 vs
   138x171 at y=-14) — they read as misaligned. Flat and equal on mobile. */
@media (max-width: 767.98px) {
    /* The confetti is positioned at fixed percentages (top:12% left:36%, …)
       tuned for a wide hero where the copy occupies the left third. On a narrow
       hero the copy fills the box, so the dashes land across the headline and
       read as strikethrough. It is pure decoration — drop it on phones and keep
       it on desktop, where it lands in the empty space it was designed for. */
    .dkdeals-hero-ribbon { display: none !important; }

    .dkdeals-hero-products {
        perspective: none !important;
        align-items: stretch !important;
    }
    .dkdeals-hero-product,
    .dkdeals-hero-product:nth-child(1),
    .dkdeals-hero-product:nth-child(2),
    .dkdeals-hero-product:nth-child(3) {
        transform: none !important;
        animation: none !important;
        margin: 0 !important;
    }
}

/* Final landing hero clamp. Keep this at EOF so phones never inherit the
   desktop/two-column mockup hero. */
@media (max-width: 767.98px) {
    .dkdeals-hero {
        grid-template-columns: minmax(0, 1fr) !important;
        gap: 16px !important;
        min-height: auto !important;
        padding: 20px 14px 16px !important;
        overflow: hidden !important;
    }

    .dkdeals-hero-content,
    .dkdeals-hero-center {
        width: 100% !important;
        max-width: none !important;
        min-width: 0 !important;
    }

    .dkdeals-hero-content { order: 1 !important; }

    .dkdeals-hero-center {
        order: 2 !important;
        align-items: stretch !important;
        overflow: hidden !important;
    }

    .dkdeals-hero-title {
        font-size: 30px !important;
        line-height: 1.02 !important;
    }

    .dkdeals-countdown {
        width: 100% !important;
        max-width: 230px !important;
        min-width: 0 !important;
        align-self: flex-start !important;
    }

    .dkdeals-hero-products {
        display: flex !important;
        grid-template-columns: none !important;
        width: 100% !important;
        overflow-x: auto !important;
        overflow-y: visible !important;
        gap: 10px !important;
        padding: 4px 2px 10px !important;
        scroll-snap-type: x mandatory;
        scrollbar-width: none;
        -webkit-overflow-scrolling: touch;
    }

    .dkdeals-hero-products::-webkit-scrollbar { display: none; }

    .dkdeals-hero-products .dkdeals-hero-product,
    .dkdeals-hero-products .dkdeals-hero-product:nth-child(1),
    .dkdeals-hero-products .dkdeals-hero-product:nth-child(2),
    .dkdeals-hero-products .dkdeals-hero-product:nth-child(3) {
        display: block !important;
        flex: 0 0 138px !important;
        width: 138px !important;
        max-width: 138px !important;
        min-height: 164px !important;
        transform: none !important;
    }

    .dkdeals-hero-previews,
    .dkdeals-hero-chat {
        display: none !important;
    }
}

@media (max-width: 380px) {
    .dkdeals-hero-title { font-size: 27px !important; }
    .dkdeals-hero-products .dkdeals-hero-product {
        flex-basis: 132px !important;
        width: 132px !important;
        max-width: 132px !important;
    }
}

/* Mobile /deals hero mockup layout: text, 2x2 CTAs, stats, timer, two cards. */
@media (max-width: 767.98px) {
    .dkdeals-scope .container,
    .dkdeals-scope .container.px-xl-5 {
        padding-left: 10px !important;
        padding-right: 10px !important;
    }

    .dkdeals-hero-wrap {
        padding: 12px 0 12px !important;
    }

    .dkdeals-hero {
        display: grid !important;
        grid-template-columns: minmax(0, 1fr) !important;
        gap: 18px !important;
        padding: 20px 14px 18px !important;
        border-radius: 12px !important;
        background:
            radial-gradient(circle at 45% 2%, rgba(244, 114, 182, .3), transparent 10%),
            radial-gradient(circle at 88% 84%, rgba(245, 158, 11, .18), transparent 16%),
            linear-gradient(145deg, #4c1d95 0%, #2f1d78 42%, #24105c 100%) !important;
        border: 0 !important;
        box-shadow: none !important;
        overflow: hidden !important;
    }

    .dkdeals-hero::before {
        opacity: .45 !important;
        background-size: 118px 118px, 146px 146px, 162px 162px, 136px 136px !important;
    }

    .dkdeals-hero::after {
        opacity: .3 !important;
    }

    .dkdeals-hero-content {
        order: 1 !important;
        width: 100% !important;
        max-width: none !important;
    }

    .dkdeals-hero-title {
        font-size: 24px !important;
        line-height: 1.12 !important;
        margin: 0 0 18px !important;
    }

    .dkdeals-hero-title-line1 {
        color: #ffffff !important;
    }

    .dkdeals-hero-title-line2 {
        color: #ffd21e !important;
    }

    .dkdeals-hero-subtitle {
        max-width: 100% !important;
        font-size: 13.5px !important;
        line-height: 1.55 !important;
        color: #e5e7eb !important;
        margin: 0 0 12px !important;
    }

    .dkdeals-hero-tagline {
        font-size: 13px !important;
        line-height: 1.25 !important;
        margin: 0 0 18px !important;
    }

    .dkdeals-hero-tagline-bid,
    .dkdeals-hero-tagline-chat {
        color: #ff8a16 !important;
    }

    .dkdeals-hero-tagline-clip {
        color: #a855f7 !important;
    }

    .dkdeals-hero-tagline-make {
        color: #10d39a !important;
    }

    .dkdeals-hero-tagline-save {
        color: #ff424d !important;
    }

    .dkdeals-hero-btns {
        display: grid !important;
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
        gap: 9px !important;
        width: 100% !important;
        max-width: none !important;
        margin: 0 0 18px !important;
    }

    .dkdeals-hero-btns .dkdeals-hero-btn,
    .dkdeals-hero-btn {
        width: 100% !important;
        min-height: 31px !important;
        padding: 8px 10px !important;
        border-radius: 6px !important;
        font-size: 11px !important;
        line-height: 1 !important;
        white-space: nowrap !important;
    }

    .dkdeals-hero-btn-orange { background: #ff5a1f !important; }
    .dkdeals-hero-btn-purple { background: #a84eea !important; }
    .dkdeals-hero-btn-dark { background: #17213b !important; border-color: rgba(255, 255, 255, .18) !important; }
    .dkdeals-hero-btn-white { background: #ffffff !important; color: #0f172a !important; }

    .dkdeals-hero-stats {
        width: 100% !important;
        max-width: 250px !important;
        gap: 8px !important;
        font-size: 12.5px !important;
        line-height: 1.2 !important;
        color: #ffffff !important;
    }

    .dkdeals-hero-avatar {
        width: 25px !important;
        height: 25px !important;
        border-color: #28115f !important;
        margin-left: -7px !important;
    }

    .dkdeals-hero-avatar:first-child {
        margin-left: 0 !important;
    }

    .dkdeals-hero-center {
        order: 2 !important;
        display: grid !important;
        grid-template-columns: minmax(0, 1fr) !important;
        gap: 14px !important;
        width: 100% !important;
        max-width: none !important;
        overflow: visible !important;
    }

    .dkdeals-countdown {
        width: min(100%, 220px) !important;
        max-width: 220px !important;
        min-width: 0 !important;
        justify-self: center !important;
        align-self: center !important;
        padding: 9px 12px 8px !important;
        border-radius: 9px !important;
        background: #fbbf24 !important;
        border: 0 !important;
        color: #111827 !important;
        box-shadow: none !important;
    }

    .dkdeals-countdown-label {
        color: #111827 !important;
        font-size: 9.5px !important;
        letter-spacing: .6px !important;
    }

    .dkdeals-countdown-time,
    .dkdeals-countdown-num,
    .dkdeals-countdown-sep {
        color: #111827 !important;
        font-size: 25px !important;
        line-height: 1 !important;
    }

    .dkdeals-countdown-units {
        color: #111827 !important;
        gap: 24px !important;
        font-size: 8px !important;
    }

    .dkdeals-hero-products {
        display: grid !important;
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
        gap: 12px !important;
        width: 100% !important;
        overflow: visible !important;
        padding: 0 !important;
    }

    .dkdeals-hero-products .dkdeals-hero-product,
    .dkdeals-hero-products .dkdeals-hero-product:nth-child(1),
    .dkdeals-hero-products .dkdeals-hero-product:nth-child(2) {
        display: block !important;
        width: auto !important;
        max-width: none !important;
        min-height: 166px !important;
        padding: 8px 8px 10px !important;
        border-radius: 12px !important;
        scroll-snap-align: none !important;
        box-shadow: 0 14px 28px -18px rgba(0, 0, 0, .45) !important;
    }

    .dkdeals-hero-products .dkdeals-hero-product:nth-child(n+3) {
        display: none !important;
    }

    .dkdeals-hero-product-img {
        height: 88px !important;
        border-radius: 8px !important;
        object-fit: cover !important;
        margin-bottom: 7px !important;
    }

    .dkdeals-hero-product-name {
        min-height: 24px !important;
        font-size: 10px !important;
        line-height: 1.16 !important;
    }

    .dkdeals-hero-product-price {
        font-size: 12px !important;
        margin-top: 3px !important;
    }

    .dkdeals-hero-product-badge {
        top: -8px !important;
        right: -8px !important;
        padding: 4px 9px !important;
        font-size: 10px !important;
    }

    .dkdeals-hero-previews,
    .dkdeals-hero-chat {
        display: none !important;
    }
}

@media (max-width: 360px) {
    .dkdeals-hero {
        padding: 18px 13px 16px !important;
    }

    .dkdeals-hero-title {
        font-size: 22px !important;
    }

    .dkdeals-hero-subtitle {
        font-size: 13px !important;
    }

    .dkdeals-countdown {
        max-width: 214px !important;
    }

    .dkdeals-hero-products {
        gap: 10px !important;
    }
}