/* =============================================================
   HOME.CSS — Hero, carousels, category grid, vibes, drops, flash
   ============================================================= */

/* HERO CAROUSEL */
.hero { position: relative; border-radius: var(--r-2xl); overflow: hidden; margin-top: var(--s-6); box-shadow: var(--sh-md); }
.hero-track { display: flex; transition: transform var(--t-slow) var(--ease-out); }
.hero-slide { min-width: 100%; position: relative; aspect-ratio: 24/9; display: flex; align-items: center; }
.hero-slide .bg { position: absolute; inset: 0; }
.hero-slide .bg::after { content: ""; position: absolute; inset: 0; background: linear-gradient(90deg, rgba(20,16,26,.6) 0%, rgba(20,16,26,.15) 55%, transparent 100%); }
.hero-content { position: relative; z-index: 2; padding: 0 clamp(24px, 6vw, 80px); max-width: 640px; color: #fff; }
.hero-content .eyebrow { color: #fff; opacity: .9; }
.hero-content h1 { color: #fff; font-size: clamp(1.6rem, 6vw, 4rem); margin: 12px 0; }
.hero-content p { color: rgba(255,255,255,.9); font-size: var(--fs-lg); margin-bottom: var(--s-6); max-width: 460px; }
.hero-dots { position: absolute; bottom: 20px; left: 50%; transform: translateX(-50%); display: flex; gap: 8px; z-index: 3; }
.hero-dots button { width: 9px; height: 9px; border-radius: 50%; background: rgba(255,255,255,.5); transition: all var(--t-base); }
.hero-dots button.active { background: #fff; width: 28px; border-radius: var(--r-pill); }
.hero-arrow { position: absolute; top: 50%; transform: translateY(-50%); width: 48px; height: 48px; border-radius: 50%; background: rgba(255,255,255,.85); display: grid; place-items: center; z-index: 3; box-shadow: var(--sh-md); transition: all var(--t-base); }
.hero-arrow:hover { background: #fff; transform: translateY(-50%) scale(1.08); }
.hero-arrow.prev { left: 16px; } .hero-arrow.next { right: 16px; }
.hero-arrow svg { width: 22px; height: 22px; }

/* USP strip */
.usp-strip { display: grid; grid-template-columns: repeat(4,1fr); gap: var(--s-4); margin-top: var(--s-6); }
.usp { display: flex; align-items: center; gap: 12px; padding: var(--s-4); background: var(--c-bg-alt); border-radius: var(--r-md); }
.usp .ic { width: 44px; height: 44px; border-radius: var(--r-sm); background: var(--c-primary-tint); color: var(--c-primary); display: grid; place-items: center; flex-shrink: 0; }
.usp .ic svg { width: 22px; height: 22px; }
.usp b { display: block; font-size: var(--fs-sm); }
.usp small { color: var(--c-muted); font-size: var(--fs-xs); }

/* CATEGORY CIRCLES */
.cat-circles { display: grid; grid-template-columns: repeat(8, 1fr); gap: var(--s-4); }
.cat-circle { text-align: center; cursor: pointer; }
.cat-circle .ring { aspect-ratio: 1; border-radius: 50%; overflow: hidden; padding: 4px; background: var(--g-vibe); transition: transform var(--t-base); }
.cat-circle:hover .ring { transform: scale(1.06) rotate(3deg); }
.cat-circle .ring img { width: 100%; height: 100%; object-fit: cover; border-radius: 50%; border: 3px solid #fff; }
.cat-circle span { display: block; margin-top: 8px; font-weight: var(--fw-semibold); font-size: var(--fs-sm); }

/* VIBE TILES */
.vibe-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--s-5); }
.vibe { position: relative; border-radius: var(--r-lg); overflow: hidden; aspect-ratio: 4/3; display: flex; align-items: flex-end; padding: var(--s-5); cursor: pointer; }
.vibe img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; transition: transform var(--t-slow) var(--ease-out); }
.vibe::after { content: ""; position: absolute; inset: 0; background: linear-gradient(0deg, rgba(20,16,26,.75), transparent 70%); }
.vibe:hover img { transform: scale(1.08); }
.vibe-text { position: relative; z-index: 2; color: #fff; }
.vibe-text h3 { color: #fff; }
.vibe-text span { font-size: var(--fs-sm); opacity: .85; }

/* CATEGORY GRID (mosaic) */
.mosaic { display: grid; grid-template-columns: repeat(4, 1fr); grid-auto-rows: 200px; gap: var(--s-4); }
.mosaic .tile { position: relative; border-radius: var(--r-lg); overflow: hidden; cursor: pointer; }
.mosaic .tile.tall { grid-row: span 2; }
.mosaic .tile.wide { grid-column: span 2; }
.mosaic .tile img { width: 100%; height: 100%; object-fit: cover; transition: transform var(--t-slow); }
.mosaic .tile:hover img { transform: scale(1.06); }
.mosaic .tile .label { position: absolute; left: 16px; bottom: 16px; color: #fff; z-index: 2; }
.mosaic .tile .label h4 { color: #fff; }
.mosaic .tile::after { content:""; position:absolute; inset:0; background: linear-gradient(0deg, rgba(20,16,26,.6), transparent 60%); }

/* BRAND STRIP */
.brand-strip { display: grid; grid-template-columns: repeat(6, 1fr); gap: var(--s-4); }
.brand-logo { aspect-ratio: 16/10; border-radius: var(--r-md); border: 1px solid var(--c-border); display: grid; place-items: center; font-family: var(--font-display); font-weight: var(--fw-black); font-size: var(--fs-lg); color: var(--c-charcoal); background: #fff; transition: all var(--t-base); cursor: pointer; letter-spacing: -.02em; }
.brand-logo:hover { box-shadow: var(--sh-md); transform: translateY(-4px); color: var(--c-primary); }

/* FLASH SALE */
.flash { background: var(--g-flash); border-radius: var(--r-2xl); padding: var(--s-7); color: #fff; position: relative; overflow: hidden; }
.flash-head { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: var(--s-4); margin-bottom: var(--s-6); }
.flash-head h2 { color: #fff; display: flex; align-items: center; gap: 10px; }
.countdown { display: flex; gap: 8px; }
.countdown .unit { background: rgba(255,255,255,.18); border-radius: var(--r-sm); padding: 8px 12px; text-align: center; min-width: 54px; backdrop-filter: blur(4px); }
.countdown .unit b { font-size: var(--fs-xl); font-family: var(--font-display); display: block; line-height: 1; }
.countdown .unit small { font-size: 10px; text-transform: uppercase; opacity: .85; }

/* DROPS */
.drop-banner { position: relative; border-radius: var(--r-2xl); overflow: hidden; min-height: 320px; display: flex; align-items: center; background: var(--g-dark); }
.drop-banner img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: .55; }
.drop-banner .inner { position: relative; z-index: 2; padding: clamp(24px,5vw,64px); color: #fff; }

/* horizontal scroll rail */
.rail { display: flex; gap: var(--s-5); overflow-x: auto; scroll-snap-type: x mandatory; padding-bottom: var(--s-3); scrollbar-width: thin; }
.rail::-webkit-scrollbar { height: 6px; }
.rail > * { scroll-snap-align: start; flex: 0 0 auto; width: 240px; }

/* seller spotlight */
.seller-spot { display: grid; grid-template-columns: 320px 1fr; gap: var(--s-6); align-items: center; background: var(--c-bg-alt); border-radius: var(--r-xl); padding: var(--s-6); }
.seller-spot .hero-img { border-radius: var(--r-lg); aspect-ratio: 4/3; overflow: hidden; }
.seller-spot .hero-img img { width:100%; height:100%; object-fit: cover; }