/* ================================================================
   HOME PAGE (/, rendered by pages.views.home)
   ================================================================ */

.home-page {
    /* Drops the global 1280px container cap so the hero, rails, and
       deals panel can use the full viewport while sections keep their
       own rhythm via .home-section. */
    --home-radius-lg: 20px;
    --home-radius-md: 14px;
    padding-bottom: 72px;
    color: var(--text);
    position: relative;
    width: 100%;
    overflow-x: clip;
}

/* Drop the global .container max-width inside the home page so rails
   can stretch; keep the same 24px gutter for viewport-edge breathing. */
.home-page .container {
    max-width: none;
    margin: 0 auto;
    width: 100%;
    padding: 0 24px;
}

/* ===== Hero ====================================================== */
.home-hero {
    position: relative;
    overflow: hidden;
    isolation: isolate;
    /* Warm-crimson wash on the left fading into cool slate, then into
       white; radials add depth. */
    background:
        radial-gradient(60% 80% at 12% 18%, rgba(209,18,25,0.10), transparent 60%),
        radial-gradient(50% 70% at 92% 88%, rgba(2,12,39,0.07), transparent 60%),
        linear-gradient(135deg, #fff7f7 0%, #ffffff 55%, #f3f6fb 100%);
    padding: 72px 0 80px;
    border-bottom: 1px solid var(--border);
}
/* Ambient floating orbs behind the hero copy — soft, slow, brand-tinted.
   Keep them decorative: pointer-events none + behind content. */
.home-hero-orb {
    position: absolute;
    border-radius: 50%;
    filter: blur(48px);
    opacity: .55;
    z-index: -1;
    pointer-events: none;
    will-change: transform;
}
.home-hero-orb.o1 {
    width: 320px; height: 320px;
    background: radial-gradient(circle, rgba(255, 90, 95, .55) 0%, rgba(255, 90, 95, 0) 70%);
    top: -80px; left: -90px;
    animation: home-orb-drift-a 22s ease-in-out infinite;
}
.home-hero-orb.o2 {
    width: 260px; height: 260px;
    background: radial-gradient(circle, rgba(56, 90, 255, .35) 0%, rgba(56, 90, 255, 0) 70%);
    bottom: -60px; right: 12%;
    animation: home-orb-drift-b 26s ease-in-out infinite;
}
.home-hero-orb.o3 {
    width: 200px; height: 200px;
    background: radial-gradient(circle, rgba(255, 200, 130, .45) 0%, rgba(255, 200, 130, 0) 70%);
    top: 40%; right: -40px;
    animation: home-orb-drift-c 30s ease-in-out infinite;
}
@keyframes home-orb-drift-a {
    0%, 100% { transform: translate(0, 0) scale(1); }
    50%      { transform: translate(30px, 24px) scale(1.08); }
}
@keyframes home-orb-drift-b {
    0%, 100% { transform: translate(0, 0) scale(1); }
    50%      { transform: translate(-24px, 18px) scale(1.05); }
}
@keyframes home-orb-drift-c {
    0%, 100% { transform: translate(0, 0) scale(1); }
    50%      { transform: translate(-18px, -22px) scale(1.1); }
}
.home-hero::before {
    content: "";
    position: absolute; inset: 0;
    background-image:
        linear-gradient(rgba(2,12,39,0.045) 1px, transparent 1px),
        linear-gradient(90deg, rgba(2,12,39,0.045) 1px, transparent 1px);
    background-size: 56px 56px;
    background-position: center top;
    mask-image: radial-gradient(ellipse 80% 60% at 50% 0%, #000 30%, transparent 80%);
    -webkit-mask-image: radial-gradient(ellipse 80% 60% at 50% 0%, #000 30%, transparent 80%);
    z-index: -1;
    pointer-events: none;
}
.home-hero-inner {
    display: grid;
    grid-template-columns: 1.05fr 1fr;
    gap: 48px;
    align-items: center;
}
.home-hero-copy { max-width: 580px; }
.home-hero-copy .eyebrow {
    display: inline-flex; align-items: center; gap: 10px;
    padding: 7px 14px;
    border-radius: 999px;
    background: rgba(255,255,255,0.85);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    border: 1px solid rgba(255,255,255,0.6);
    box-shadow:
        0 1px 0 rgba(255,255,255,0.6) inset,
        0 6px 16px rgba(2,12,39,0.06);
    color: var(--ink-soft);
    font-size: 12.5px;
    font-weight: 600;
    letter-spacing: .02em;
}
.home-hero-copy .eyebrow .pulse {
    width: 8px; height: 8px; border-radius: 50%;
    background: var(--brand);
    box-shadow: 0 0 0 0 rgba(209,18,25,.55);
    animation: home-pulse 1.8s ease-out infinite;
    display: inline-block;
}
@keyframes home-pulse {
    0%   { box-shadow: 0 0 0 0 rgba(209,18,25,.55); }
    70%  { box-shadow: 0 0 0 10px rgba(209,18,25,0); }
    100% { box-shadow: 0 0 0 0 rgba(209,18,25,0); }
}
.home-hero h1 {
    font-size: clamp(34px, 5.4vw, 60px);
    line-height: 1.04;
    margin: 18px 0 14px;
    color: var(--ink);
    letter-spacing: -.028em;
    font-weight: 800;
}
.home-hero h1 .accent {
    background: linear-gradient(120deg, var(--brand) 0%, #ff5a5f 35%, var(--brand-dark) 65%, var(--ink) 100%);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
    display: inline-block;
    background-size: 200% 100%;
    animation: home-accent-shimmer 9s ease-in-out infinite;
}
@keyframes home-accent-shimmer {
    0%, 100% { background-position: 0% 50%; }
    50%      { background-position: 100% 50%; }
}
.home-hero .lead {
    color: var(--muted);
    font-size: 16px;
    line-height: 1.65;
    max-width: 56ch;
    margin: 0 0 26px;
}
.home-hero-cta { display: flex; gap: 12px; flex-wrap: wrap; align-items: center; }
.home-hero-cta .btn-ghost {
    background: var(--card);
    border: 1px solid var(--border);
    color: var(--ink);
    padding: 12px 22px;
    border-radius: 999px;
    font-weight: 700;
    text-decoration: none;
    letter-spacing: -.005em;
    box-shadow: 0 1px 0 rgba(255,255,255,0.7) inset, 0 6px 14px rgba(2,12,39,0.06);
    transition: transform .2s ease, box-shadow .2s ease, border-color .2s ease, color .2s ease;
}
.home-hero-cta .btn-ghost:hover {
    border-color: rgba(209,18,25,0.35);
    color: var(--brand-dark);
    transform: translateY(-2px);
    box-shadow: 0 10px 24px rgba(209,18,25,0.14);
    text-decoration: none;
}
.home-hero-cta .btn-primary {
    padding: 13px 26px;
    border-radius: 999px;
    font-weight: 700;
    letter-spacing: -.005em;
    box-shadow:
        0 1px 0 rgba(255,255,255,0.25) inset,
        0 10px 24px rgba(209,18,25,0.32);
    transition: transform .2s ease, box-shadow .2s ease, background .2s ease;
}
.home-hero-cta .btn-primary:hover {
    transform: translateY(-2px);
    box-shadow:
        0 1px 0 rgba(255,255,255,0.25) inset,
        0 16px 32px rgba(209,18,25,0.38);
}
.home-hero-meta {
    display: flex; gap: 22px; margin-top: 28px;
    flex-wrap: wrap;
    color: var(--muted);
    font-size: 13px;
}
.home-hero-meta .pill {
    display: inline-flex; align-items: center; gap: 8px;
    color: var(--ink-soft);
    font-weight: 600;
}
.home-hero-meta .pill svg { color: var(--brand); }

/* Stats strip — three tiny "trust signals" beneath the meta pills. */
.home-hero-stats {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 12px;
    margin-top: 30px;
    max-width: 580px;
}
.home-hero-stat {
    position: relative;
    padding: 14px 16px;
    border-radius: 14px;
    background: rgba(255,255,255,0.7);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    border: 1px solid rgba(255,255,255,0.7);
    box-shadow:
        0 1px 0 rgba(255,255,255,0.8) inset,
        0 6px 14px rgba(2,12,39,0.05);
    transition: transform .25s ease, box-shadow .25s ease, border-color .25s ease;
}
.home-hero-stat:hover {
    transform: translateY(-2px);
    border-color: rgba(209,18,25,0.22);
    box-shadow:
        0 1px 0 rgba(255,255,255,0.8) inset,
        0 12px 24px rgba(2,12,39,0.08);
}
.home-hero-stat__value {
    display: block;
    font-weight: 800;
    font-size: 20px;
    letter-spacing: -.02em;
    color: var(--ink);
    background: linear-gradient(135deg, var(--brand) 0%, var(--brand-dark) 100%);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
    line-height: 1.1;
}
.home-hero-stat__label {
    display: block;
    margin-top: 4px;
    font-size: 11.5px;
    font-weight: 600;
    letter-spacing: .04em;
    text-transform: uppercase;
    color: var(--muted);
}

/* ===== Hero collage =============================================== */
.home-hero-collage {
    position: relative;
    aspect-ratio: 5 / 4.6;
    min-height: 320px;
    border-radius: var(--home-radius-lg);
    /* Soft inset frame so tiles look set against a frosted card. */
    background: radial-gradient(circle at 50% 40%, rgba(255,255,255,0.55), transparent 65%);
}
.home-hero-collage .hero-blob {
    position: absolute; border-radius: 50%;
    filter: blur(36px); opacity: .55;
    z-index: 0;
}
.home-hero-collage .hero-blob.b1 { width: 240px; height: 240px; background: #ffcfd3; top: -20px; left: -30px; animation: home-orb-drift-a 18s ease-in-out infinite; }
.home-hero-collage .hero-blob.b2 { width: 200px; height: 200px; background: #c8d8ff; bottom: -20px; right: -10px; animation: home-orb-drift-b 22s ease-in-out infinite; }
.home-hero-collage .hero-blob.b3 { width: 160px; height: 160px; background: #ffe1c8; top: 42%; left: 52%; animation: home-orb-drift-c 26s ease-in-out infinite; }
.home-hero-collage .hero-tile {
    position: absolute;
    background: var(--card);
    border: 1px solid rgba(255,255,255,0.7);
    border-radius: 18px;
    overflow: hidden;
    box-shadow:
        0 1px 0 rgba(255,255,255,0.7) inset,
        0 22px 44px rgba(2,12,39,0.18),
        0 6px 14px rgba(2,12,39,0.08);
    display: flex; align-items: center; justify-content: center;
    z-index: 1;
    transition: transform .5s cubic-bezier(.2,.8,.2,1), box-shadow .5s ease;
}
.home-hero-collage .hero-tile img {
    width: 100%; height: 100%; object-fit: cover; display: block;
    transition: transform .7s cubic-bezier(.2,.7,.2,1);
}
.home-hero-collage:hover .hero-tile img { transform: scale(1.04); }
.home-hero-collage .hero-tile.t1 { width: 58%; height: 66%; top: 2%;  left: 2%;  transform: rotate(-3.5deg); animation: home-tile-float-a 6s ease-in-out infinite; }
.home-hero-collage .hero-tile.t2 { width: 44%; height: 50%; bottom: 4%; right: 4%; transform: rotate(4.5deg); animation: home-tile-float-b 7s ease-in-out infinite; }
.home-hero-collage .hero-tile.t3 { width: 38%; height: 42%; top: 38%; left: 32%; transform: rotate(-2deg); animation: home-tile-float-c 8s ease-in-out infinite; }
.home-hero-collage:hover .hero-tile.t1 { transform: rotate(-3.5deg) translateY(-6px) scale(1.03); box-shadow: 0 1px 0 rgba(255,255,255,0.7) inset, 0 30px 56px rgba(2,12,39,0.22), 0 8px 18px rgba(2,12,39,0.10); }
.home-hero-collage:hover .hero-tile.t2 { transform: rotate(4.5deg)  translateY(-6px) scale(1.03); box-shadow: 0 1px 0 rgba(255,255,255,0.7) inset, 0 30px 56px rgba(2,12,39,0.22), 0 8px 18px rgba(2,12,39,0.10); }
.home-hero-collage:hover .hero-tile.t3 { transform: rotate(-2deg)   translateY(-6px) scale(1.03); box-shadow: 0 1px 0 rgba(255,255,255,0.7) inset, 0 30px 56px rgba(2,12,39,0.22), 0 8px 18px rgba(2,12,39,0.10); }
@keyframes home-tile-float-a {
    0%, 100% { transform: rotate(-3.5deg) translateY(0); }
    50%      { transform: rotate(-3.5deg) translateY(-6px); }
}
@keyframes home-tile-float-b {
    0%, 100% { transform: rotate(4.5deg) translateY(0); }
    50%      { transform: rotate(4.5deg) translateY(-5px); }
}
@keyframes home-tile-float-c {
    0%, 100% { transform: rotate(-2deg) translateY(0); }
    50%      { transform: rotate(-2deg) translateY(-4px); }
}

/* Floating accent badge over the collage (focal "deal of the day"). */
.home-hero-collage .hero-badge {
    position: absolute;
    top: 14%; right: 8%;
    z-index: 2;
    background: var(--ink);
    color: #fff;
    padding: 8px 14px;
    border-radius: 999px;
    font-size: 12px;
    font-weight: 700;
    letter-spacing: .04em;
    text-transform: uppercase;
    box-shadow: 0 14px 30px rgba(2,12,39,0.22);
    display: inline-flex; align-items: center; gap: 6px;
}
.home-hero-collage .hero-badge::before {
    content: "";
    width: 6px; height: 6px;
    border-radius: 50%;
    background: var(--brand);
    box-shadow: 0 0 0 4px rgba(209,18,25,0.25);
}

/* ===== Section shell ============================================== */
.home-section {
    padding: 64px 0;
    position: relative;
}
/* Soft divider between stacked sections (handled by ::before). */
.home-section + .home-section::before {
    content: "";
    position: absolute;
    top: 0; left: 50%; transform: translateX(-50%);
    width: 80px; height: 2px;
    background: linear-gradient(90deg, transparent, var(--border-strong), transparent);
    border-radius: 2px;
}
.home-section-head {
    display: flex; align-items: flex-end; justify-content: space-between;
    gap: 16px; margin-bottom: 28px;
}
.home-section-eyebrow {
    display: inline-flex; align-items: center; gap: 8px;
    color: var(--brand);
    font-size: 11.5px;
    font-weight: 700;
    letter-spacing: .18em;
    text-transform: uppercase;
    margin-bottom: 10px;
    padding: 5px 11px;
    border-radius: 999px;
    background: rgba(209,18,25,0.07);
    border: 1px solid rgba(209,18,25,0.18);
}
.home-section-eyebrow::before {
    content: "";
    width: 6px; height: 6px;
    border-radius: 50%;
    background: var(--brand);
    box-shadow: 0 0 0 4px rgba(209,18,25,0.18);
    animation: home-eyebrow-pulse 2.2s ease-in-out infinite;
}
@keyframes home-eyebrow-pulse {
    0%, 100% { box-shadow: 0 0 0 4px rgba(209,18,25,0.18); }
    50%      { box-shadow: 0 0 0 8px rgba(209,18,25,0.04); }
}
.home-section-title {
    font-size: clamp(26px, 3vw, 36px);
    margin: 0;
    display: inline-flex; align-items: center; gap: 10px;
    letter-spacing: -.024em;
    font-weight: 800;
    color: var(--ink);
    line-height: 1.15;
    position: relative;
}
.home-section-sub {
    margin: 10px 0 0;
    color: var(--muted);
    font-size: 14.5px;
    max-width: 56ch;
}
.view-all-link {
    position: relative;
    display: inline-flex; align-items: center; gap: 8px;
    color: var(--ink);
    font-weight: 700;
    font-size: 14px;
    text-decoration: none;
    padding: 9px 16px 9px 18px;
    border-radius: 999px;
    background: var(--card);
    border: 1px solid var(--border);
    transition: transform .2s ease, box-shadow .2s ease, border-color .2s ease, color .2s ease, padding .2s ease;
    box-shadow: 0 1px 0 rgba(255,255,255,0.7) inset, 0 4px 10px rgba(2,12,39,0.04);
    overflow: hidden;
}
.view-all-link::after {
    /* Sweeping highlight that plays on hover. */
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(120deg, transparent 30%, rgba(255,255,255,0.55) 50%, transparent 70%);
    transform: translateX(-120%);
    transition: transform .7s ease;
    pointer-events: none;
}
.view-all-link:hover {
    border-color: rgba(209,18,25,0.35);
    color: var(--brand);
    text-decoration: none;
    transform: translateY(-2px);
    padding-right: 18px;
    box-shadow: 0 1px 0 rgba(255,255,255,0.7) inset, 0 12px 24px rgba(209,18,25,0.14);
}
.view-all-link:hover::after { transform: translateX(120%); }
.view-all-link svg { transition: transform .25s cubic-bezier(.2,.8,.2,1); }
.view-all-link:hover svg { transform: translateX(4px); }

.deal-flame {
    font-size: 26px; line-height: 1;
    filter: drop-shadow(0 4px 10px rgba(255,140,40,0.55));
    display: inline-block;
    transform-origin: 50% 90%;
    animation: home-flame-flicker 1.6s ease-in-out infinite;
}
@keyframes home-flame-flicker {
    0%, 100% { transform: scale(1) rotate(0deg); }
    25%      { transform: scale(1.06) rotate(-2deg); }
    50%      { transform: scale(.96) rotate(0deg); }
    75%      { transform: scale(1.04) rotate(2deg); }
}

/* ===== Reveal-on-scroll =========================================
   Pair with JS that adds .is-revealed once the element enters
   the viewport (or remove the rule for users who set
   prefers-reduced-motion — they get instant content). */
[data-reveal] {
    opacity: 0;
    transform: translateY(18px);
    transition:
        opacity .7s cubic-bezier(.2,.8,.2,1),
        transform .7s cubic-bezier(.2,.8,.2,1);
    will-change: opacity, transform;
}
[data-reveal].is-revealed {
    opacity: 1;
    transform: translateY(0);
}
/* Stagger children inside a revealed section so each tile lifts in turn. */
[data-reveal-stagger] > * {
    opacity: 0;
    transform: translateY(14px);
    transition:
        opacity .55s cubic-bezier(.2,.8,.2,1),
        transform .55s cubic-bezier(.2,.8,.2,1);
}
[data-reveal-stagger].is-revealed > * { opacity: 1; transform: translateY(0); }
[data-reveal-stagger].is-revealed > *:nth-child(1) { transition-delay: 0ms;   }
[data-reveal-stagger].is-revealed > *:nth-child(2) { transition-delay: 70ms;  }
[data-reveal-stagger].is-revealed > *:nth-child(3) { transition-delay: 140ms; }
[data-reveal-stagger].is-revealed > *:nth-child(4) { transition-delay: 210ms; }
[data-reveal-stagger].is-revealed > *:nth-child(5) { transition-delay: 280ms; }
[data-reveal-stagger].is-revealed > *:nth-child(6) { transition-delay: 320ms; }
[data-reveal-stagger].is-revealed > *:nth-child(n+7) { transition-delay: 360ms; }
@media (prefers-reduced-motion: reduce) {
    [data-reveal],
    [data-reveal-stagger] > *,
    .home-hero-orb,
    .deal-flame,
    .home-hero h1 .accent,
    .home-section-eyebrow::before {
        animation: none !important;
        transition: none !important;
        opacity: 1 !important;
        transform: none !important;
    }
}

/* ===== Featured categories rail (slider) ========================== */
.category-slider {
    position: relative;
    margin: 0 -8px;
}
.category-rail {
    list-style: none;
    padding: 8px 8px 12px;
    margin: 0;
    display: grid;
    /* Single-row rail: tiles shrink to fit when count is low,
       overflow and slide otherwise (JS — see home.html). */
    grid-auto-flow: column;
    grid-auto-columns: minmax(140px, 1fr);
    gap: 20px;
    overflow-x: auto;
    overflow-y: hidden;
    scroll-snap-type: x mandatory;
    scroll-padding: 8px;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    -ms-overflow-style: none;
    /* JS-driven slide: see home.html for the transform + DOM-reorder loop. */
    transition: transform .55s cubic-bezier(.22,.61,.36,1);
    will-change: transform;
}
.category-rail::-webkit-scrollbar { display: none; }
.category-rail > li {
    scroll-snap-align: start;
    min-width: 0;
}
@media (min-width: 720px) {
    .category-rail { grid-auto-columns: minmax(160px, 1fr); }
}
@media (min-width: 1100px) {
    .category-rail { grid-auto-columns: 190px; }
}
/* Duplicate .category-rail block removed; transition folded into the main rule above. */

.category-slider-nav {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    width: 40px; height: 40px;
    border-radius: 50%;
    border: 1px solid var(--border);
    background: var(--card);
    color: var(--text);
    display: inline-flex; align-items: center; justify-content: center;
    box-shadow: 0 6px 18px rgba(2,12,39,0.10);
    cursor: pointer;
    z-index: 2;
    transition:
        opacity .2s ease,
        transform .2s ease,
        background .2s ease,
        color .2s ease,
        box-shadow .2s ease;
    opacity: 0;
    pointer-events: none;
}
.category-slider:hover .category-slider-nav,
.category-slider:focus-within .category-slider-nav {
    opacity: 1;
    pointer-events: auto;
}
.category-slider-nav:hover {
    color: #fff;
    background: var(--brand);
    border-color: var(--brand);
    box-shadow: 0 10px 22px rgba(209,18,25,0.30);
}
.category-slider-nav:focus-visible {
    opacity: 1;
    pointer-events: auto;
    outline: 2px solid var(--brand);
    outline-offset: 2px;
}
.category-slider-nav.is-disabled {
    /* Stay visible on hover (so users know what it is) but unclickable.
       A sudden disappearance would look broken next to the working
       twin on the opposite side. */
    opacity: .35;
    cursor: not-allowed;
    pointer-events: none;
}
.category-slider-prev { left: 6px; }
.category-slider-next { right: 6px; }
@media (max-width: 600px) {
    /* Touch users can't hover to reveal arrows — keep them visible
       as tappable pills but slightly faded. */
    .category-slider-nav { opacity: .9; pointer-events: auto; }
    .category-slider-prev { left: 4px; }
    .category-slider-next { right: 4px; }
}
.category-tile {
    position: relative;
    display: flex; flex-direction: column;
    background: var(--card);
    border: 1px solid var(--border);
    border-radius: var(--home-radius-md);
    overflow: hidden;
    text-decoration: none;
    color: var(--text);
    transition:
        transform .25s cubic-bezier(.2,.8,.2,1),
        box-shadow .25s ease,
        border-color .25s ease;
    box-shadow:
        0 1px 0 rgba(255,255,255,0.8) inset,
        0 4px 12px rgba(2,12,39,0.05);
}
.category-tile::after {
    content: "";
    position: absolute; inset: 0;
    background: linear-gradient(120deg, transparent 30%, rgba(255,255,255,0.55) 50%, transparent 70%);
    transform: translateX(-120%);
    transition: transform .7s ease;
    pointer-events: none;
}
.category-tile:hover {
    transform: translateY(-6px);
    border-color: rgba(209,18,25,0.25);
    box-shadow:
        0 1px 0 rgba(255,255,255,0.8) inset,
        0 24px 40px rgba(2,12,39,0.12),
        0 8px 18px rgba(209,18,25,0.08);
    text-decoration: none;
}
.category-tile:hover::after { transform: translateX(120%); }
.category-thumb {
    position: relative;
    aspect-ratio: 1 / 1;
    overflow: hidden;
    background:
        radial-gradient(circle at 20% 20%, rgba(209, 18, 25, 0.05), transparent 55%),
        linear-gradient(135deg, #f5f6fa 0%, #e9ecf3 100%);
    display: flex; align-items: center; justify-content: center;
    color: #94a3b8;
}
.category-thumb::after {
    content: ""; position: absolute; inset: 0;
    box-shadow: inset 0 0 0 1px rgba(15, 23, 42, 0.04);
    border-radius: inherit;
    pointer-events: none;
}
.category-thumb img {
    position: relative; z-index: 1;
    width: 100%; height: 100%; object-fit: cover;
    transition: transform .6s cubic-bezier(.2,.7,.2,1), filter .35s;
    filter: saturate(1);
}
.category-tile:hover .category-thumb img {
    transform: scale(1.08);
    filter: saturate(1.05);
}
.category-thumb-fallback {
    font-size: 32px; font-weight: 800;
    background: linear-gradient(135deg, var(--brand) 0%, var(--brand-dark) 100%);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
    text-transform: uppercase;
    letter-spacing: -.02em;
}
.category-meta {
    padding: 10px 14px 14px;
    display: flex; flex-direction: column; gap: 2px;
    position: relative;
}
.category-name {
    font-weight: 700; font-size: 15.5px;
    color: var(--ink);
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
    letter-spacing: -.01em;
}
.category-count {
    font-size: 12px; color: var(--muted);
    font-weight: 500;
}
.category-arrow {
    position: absolute;
    right: 14px; bottom: 14px;
    width: 28px; height: 28px;
    border-radius: 50%;
    background: var(--brand-soft);
    color: var(--brand);
    display: flex; align-items: center; justify-content: center;
    opacity: 0; transform: translateX(-4px);
    transition: opacity .25s ease, transform .25s ease, background .25s ease;
}
.category-tile:hover .category-arrow {
    opacity: 1; transform: translateX(0);
    background: var(--brand);
    color: #fff;
}

/* ===== Featured brands rail (slider) ============================== */
.brand-slider {
    position: relative;
    margin: 0 -8px;
}
.brand-rail {
    list-style: none;
    padding: 8px 8px 12px;
    margin: 0;
    display: grid;
    /* Same single-row pattern as .category-rail (see comment there). */
    grid-auto-flow: column;
    grid-auto-columns: minmax(130px, 1fr);
    gap: 20px;
    overflow-x: auto;
    overflow-y: hidden;
    scroll-snap-type: x mandatory;
    scroll-padding: 8px;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    -ms-overflow-style: none;
    /* JS-driven slide: see home.html for the transform + DOM-reorder loop. */
    transition: transform .55s cubic-bezier(.22,.61,.36,1);
    will-change: transform;
}
.brand-rail::-webkit-scrollbar { display: none; }
.brand-rail > li {
    scroll-snap-align: start;
    min-width: 0;
}
@media (min-width: 720px) {
    .brand-rail { grid-auto-columns: minmax(150px, 1fr); }
}
@media (min-width: 1100px) {
    .brand-rail { grid-auto-columns: 170px; }
}
/* Duplicate .brand-rail block removed; transition folded into the main rule above. */
.brand-slider-nav {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    width: 40px; height: 40px;
    border-radius: 50%;
    border: 1px solid var(--border);
    background: var(--card);
    color: var(--text);
    display: inline-flex; align-items: center; justify-content: center;
    cursor: pointer;
    opacity: 0;
    pointer-events: none;
    transition: opacity .2s ease, background .2s ease, color .2s ease,
                transform .2s cubic-bezier(.2,.8,.2,1);
    box-shadow:
        0 1px 0 rgba(255,255,255,0.8) inset,
        0 4px 12px rgba(2,12,39,0.10);
    z-index: 2;
}
.brand-slider:hover .brand-slider-nav,
.brand-slider:focus-within .brand-slider-nav { opacity: 1; pointer-events: auto; }
.brand-slider-nav:hover { background: var(--brand); color: #fff; transform: translateY(-50%) scale(1.06); }
.brand-slider-nav:focus-visible {
    outline: 2px solid var(--brand);
    outline-offset: 2px;
    opacity: 1; pointer-events: auto;
}
.brand-slider-nav.is-disabled {
    opacity: .35;
    cursor: not-allowed;
    pointer-events: none;
}
.brand-slider-prev { left: 6px; }
.brand-slider-next { right: 6px; }
@media (max-width: 600px) {
    .brand-slider-nav { opacity: .9; pointer-events: auto; }
    .brand-slider-prev { left: 4px; }
    .brand-slider-next { right: 4px; }
}
.brand-tile {
    position: relative;
    display: flex; flex-direction: column;
    background: var(--card);
    border: 1px solid var(--border);
    border-radius: var(--home-radius-md);
    overflow: hidden;
    text-decoration: none;
    color: var(--text);
    transition:
        transform .25s cubic-bezier(.2,.8,.2,1),
        box-shadow .25s ease,
        border-color .25s ease;
    box-shadow:
        0 1px 0 rgba(255,255,255,0.8) inset,
        0 4px 12px rgba(2,12,39,0.05);
}
.brand-tile:hover {
    transform: translateY(-4px);
    border-color: rgba(2,12,39,0.18);
    box-shadow:
        0 1px 0 rgba(255,255,255,0.8) inset,
        0 18px 36px rgba(2,12,39,0.10);
    text-decoration: none;
}
.brand-thumb {
    position: relative;
    aspect-ratio: 4 / 3;
    overflow: hidden;
    background:
        radial-gradient(circle at 20% 20%, rgba(209, 18, 25, 0.05), transparent 55%),
        linear-gradient(135deg, #f5f6fa 0%, #e9ecf3 100%);
    display: flex; align-items: center; justify-content: center;
    color: #94a3b8;
}
.brand-thumb::after {
    content: ""; position: absolute; inset: 0;
    box-shadow: inset 0 0 0 1px rgba(15, 23, 42, 0.04);
    border-radius: inherit;
    pointer-events: none;
}
.brand-thumb img {
    position: relative; z-index: 1;
    width: 100%; height: 100%; object-fit: cover;
    transition: transform .6s cubic-bezier(.2,.7,.2,1), filter .35s;
    filter: saturate(1);
}
.brand-tile:hover .brand-thumb img {
    transform: scale(1.08);
    filter: saturate(1.05);
}
.brand-thumb-fallback {
    font-size: 22px; font-weight: 800;
    background: linear-gradient(135deg, var(--brand) 0%, var(--brand-dark) 100%);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
    text-transform: uppercase;
    letter-spacing: -.02em;
}
.brand-meta {
    padding: 8px 10px 10px;
    border-top: 1px solid var(--border);
    display: flex; flex-direction: column; gap: 1px;
    text-align: center;
    background: linear-gradient(180deg, transparent, rgba(2,12,39,0.015));
}
.brand-name {
    font-weight: 700; font-size: 13px;
    color: var(--ink);
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
    letter-spacing: -.005em;
}
.brand-count {
    font-size: 11px; color: var(--muted);
    font-weight: 500;
}

/* ===== Product rails ============================================== */
.home-product-grid {
    margin-top: 4px;
    gap: 22px;
}

/* ----- Exclusive Deals: warm premium treatment ----- */
.home-section-deals {
    position: relative;
    background:
        radial-gradient(60% 80% at 100% 0%, rgba(209,18,25,0.10), transparent 60%),
        radial-gradient(45% 70% at 0% 100%, rgba(255,170,120,0.18), transparent 60%),
        linear-gradient(180deg, #ffffff 0%, #fff8f3 100%);
    border-radius: var(--home-radius-lg);
    /* Full-bleed deals panel: side margins clamp so it can breathe on
       ultrawide displays without ever feeling cramped. */
    margin: 24px clamp(12px, 2.5vw, 40px);
    padding: 56px clamp(20px, 3vw, 48px);
    box-shadow:
        0 1px 0 rgba(255,255,255,0.8) inset,
        0 24px 60px rgba(209,18,25,0.10),
        0 1px 0 rgba(209,18,25,0.06) inset;
    overflow: hidden;
}
.home-section-deals::before {
    /* Top-edge accent so the section reads as a "campaign".
       Animated sweep keeps the bar alive without being noisy. */
    content: "";
    position: absolute;
    top: 0; left: 24px; right: 24px;
    height: 3px;
    background: linear-gradient(90deg, var(--brand), #ff7a4d, var(--brand-dark), var(--brand), var(--ink));
    background-size: 220% 100%;
    border-radius: 0 0 4px 4px;
    opacity: .9;
    animation: home-deals-sweep 7s linear infinite;
}
@keyframes home-deals-sweep {
    0%   { background-position: 0% 50%; }
    100% { background-position: 220% 50%; }
}
.home-section-deals .home-section-title .deal-flame { margin-right: 4px; }
.home-section-deals .home-product-grid { margin-top: 8px; }

/* Optional ribbon row above the deals title (renders "limited time" pill,
   count of items on sale, and the sweep timer). */
.home-deals-ribbon {
    display: inline-flex;
    align-items: center;
    gap: 14px;
    padding: 8px 16px 8px 10px;
    border-radius: 999px;
    background: linear-gradient(135deg, var(--brand) 0%, var(--brand-dark) 100%);
    color: #fff;
    font-size: 12px;
    font-weight: 700;
    letter-spacing: .04em;
    text-transform: uppercase;
    box-shadow:
        0 1px 0 rgba(255,255,255,0.25) inset,
        0 12px 24px rgba(209,18,25,0.30);
    margin-bottom: 18px;
    position: relative;
    overflow: hidden;
}
.home-deals-ribbon::after {
    /* Inner shine that sweeps once every few seconds. */
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(120deg, transparent 30%, rgba(255,255,255,0.35) 50%, transparent 70%);
    transform: translateX(-120%);
    animation: home-ribbon-shine 4.5s ease-in-out infinite;
    pointer-events: none;
}
@keyframes home-ribbon-shine {
    0%, 60%, 100% { transform: translateX(-120%); }
    80%           { transform: translateX(120%); }
}
.home-deals-ribbon__dot {
    width: 8px; height: 8px; border-radius: 50%;
    background: #fff;
    box-shadow: 0 0 0 4px rgba(255,255,255,0.25);
    animation: home-ribbon-pulse 1.4s ease-in-out infinite;
}
@keyframes home-ribbon-pulse {
    0%, 100% { box-shadow: 0 0 0 4px rgba(255,255,255,0.25); }
    50%      { box-shadow: 0 0 0 8px rgba(255,255,255,0.05); }
}
.home-deals-ribbon__count {
    display: inline-flex; align-items: center; gap: 6px;
    padding: 4px 10px;
    border-radius: 999px;
    background: rgba(255,255,255,0.18);
    font-size: 11px;
    font-weight: 700;
}

/* ===== Responsive ================================================ */
@media (max-width: 1080px) {
    .home-hero-inner { grid-template-columns: 1fr; gap: 28px; }
    .home-hero-collage { min-height: 280px; }
    .home-hero-orb.o1 { width: 240px; height: 240px; }
    .home-hero-orb.o2 { width: 200px; height: 200px; }
}
@media (max-width: 760px) {
    .home-hero { padding: 48px 0 56px; }
    .home-section { padding: 40px 0; }
    .home-section-head { flex-wrap: wrap; }
    .home-hero-meta { gap: 14px; }
    .home-hero-stats { grid-template-columns: repeat(3, 1fr); gap: 8px; margin-top: 22px; }
    .home-hero-stat { padding: 10px 12px; }
    .home-hero-stat__value { font-size: 17px; }
    .home-section-deals { padding: 36px 16px; }
    .home-deals-ribbon { font-size: 11px; padding: 7px 14px 7px 10px; }
}
@media (max-width: 480px) {
    .home-hero-copy .lead { font-size: 14.5px; }
    .home-hero-cta .btn { padding: 11px 18px; font-size: 14px; }
    .home-hero-cta .btn-ghost { padding: 11px 18px; }
    .home-hero-collage { min-height: 240px; }
    .home-hero-collage .hero-tile.t1 { width: 60%; height: 62%; }
    .home-hero-collage .hero-tile.t2 { width: 44%; height: 48%; }
    .home-hero-collage .hero-tile.t3 { width: 36%; height: 38%; }
    .home-hero-collage .hero-badge { top: 6%; right: 4%; font-size: 11px; padding: 6px 10px; }
    .home-section-title { font-size: 22px; }
    .home-hero-stats { grid-template-columns: 1fr; }
    .home-hero-stat__value { font-size: 18px; }
}