/* ════════════════════════════════════════════════════════════════════════
   RENOVA — E-COMMERCE HOME (from concept 13)
   Every rule is namespaced under .shop-home so the generic class names
   (.hero, .pcard, .btn, .container, .section …) cannot collide with
   renova.css or MudBlazor. The site header/footer come from PublicLayout;
   this stylesheet only styles the page body sections.
   This is a deliberate LIGHT palette; it does not react to dark mode.
   ════════════════════════════════════════════════════════════════════════ */

.shop-home {
    --sh-bg:        #faf6ec;
    --sh-paper:     #ffffff;
    --sh-mute:      #f0e9d6;
    --sh-ink:       #14110c;
    --sh-ink-soft:  #3a3327;
    --sh-ink-mute:  #76695a;
    --sh-ink-faint: #b8ac99;
    --sh-gold:      #c9a044;
    --sh-gold-light:#e0bf73;
    --sh-gold-deep: #8a6520;
    --sh-gold-soft: rgba(201,160,68,0.08);
    --sh-gold-bg:   #fbf1d9;
    --sh-sale:      #c43d3d;
    --sh-emerald:   #0f3024;
    --sh-leaf:      #5a7a5e;
    --sh-rule:      rgba(20,17,12,0.08);
    --sh-display:   'Cormorant Garamond', Georgia, serif;
    --sh-sans:      'DM Sans', system-ui, sans-serif;
    --sh-mono:      'DM Sans', ui-monospace, monospace;
    --sh-ease:      cubic-bezier(0.16, 1, 0.3, 1);
    --sh-shadow-1:  0 1px 3px rgba(20,17,12,0.05);
    --sh-shadow-2:  0 8px 28px rgba(20,17,12,0.10);
    --sh-shadow-3:  0 24px 60px rgba(20,17,12,0.16);

    background: var(--sh-bg);
    color: var(--sh-ink);
    font-family: var(--sh-sans);
    line-height: 1.5;
}

.shop-home a { color: inherit; text-decoration: none; }
.shop-home button { font-family: inherit; cursor: pointer; border: none; background: none; color: inherit; }
.shop-home img { display: block; max-width: 100%; height: auto; user-select: none; }
.shop-home *, .shop-home *::before, .shop-home *::after { box-sizing: border-box; }
.shop-home .num { font-variant-numeric: tabular-nums; }

.shop-home .sh-container { max-width: 1440px; margin: 0 auto; padding: 0 32px; }

@keyframes sh-pulse { 0%,100% { opacity: 1; transform: scale(1); } 50% { opacity: 0.5; transform: scale(0.7); } }
@keyframes sh-pinPulse { 0% { transform: scale(0.6); opacity: 0.8; } 100% { transform: scale(2); opacity: 0; } }

/* ─── BUTTONS ───────────────────────────────────────────────────────────── */
.shop-home .btn { display: inline-flex; align-items: center; gap: 10px; padding: 16px 30px; font-family: var(--sh-sans); font-size: 0.86rem; font-weight: 600; letter-spacing: 0.1em; text-transform: uppercase; border-radius: 999px; transition: all 0.3s var(--sh-ease); cursor: pointer; }
.shop-home .btn-primary { background: var(--sh-ink); color: var(--sh-bg); }
.shop-home .btn-primary:hover { background: var(--sh-gold-deep); transform: translateY(-2px); box-shadow: 0 8px 24px rgba(138,101,32,0.3); }
.shop-home .btn-gold { background: var(--sh-gold); color: var(--sh-ink); }
.shop-home .btn-gold:hover { background: var(--sh-gold-light); transform: translateY(-2px); }
.shop-home .btn-outline { background: transparent; color: var(--sh-ink); border: 1.5px solid var(--sh-ink); }
.shop-home .btn-outline:hover { background: var(--sh-ink); color: var(--sh-bg); }
.shop-home .btn .material-symbols-outlined { font-size: 18px; transition: transform 0.3s; }
.shop-home .btn:hover .material-symbols-outlined { transform: translateX(4px); }

/* ─── SECTION SCAFFOLD ──────────────────────────────────────────────────── */
.shop-home .section { padding: 80px 0; }
.shop-home .section-tight { padding: 48px 0; }
.shop-home .section-head { display: flex; justify-content: space-between; align-items: flex-end; margin-bottom: 36px; gap: 24px; flex-wrap: wrap; }
.shop-home .section-tag { font-family: var(--sh-mono); font-size: 0.72rem; font-weight: 600; color: var(--sh-gold-deep); text-transform: uppercase; letter-spacing: 0.18em; margin-bottom: 14px; display: flex; align-items: center; gap: 12px; }
.shop-home .section-tag::before { content: ''; width: 32px; height: 1px; background: var(--sh-gold-deep); }
.shop-home .section-title { font-family: var(--sh-display); font-size: clamp(2rem, 3.6vw, 2.8rem); line-height: 1.05; font-weight: 500; letter-spacing: -0.01em; color: var(--sh-ink); }
.shop-home .section-title em { color: var(--sh-gold-deep); font-style: italic; font-weight: 600; }
.shop-home .section-sub { color: var(--sh-ink-mute); font-size: 0.92rem; margin-top: 6px; }
.shop-home .section-link { font-family: var(--sh-sans); font-size: 0.84rem; font-weight: 600; color: var(--sh-ink); text-transform: uppercase; letter-spacing: 0.1em; border-bottom: 1.5px solid var(--sh-ink); padding-bottom: 4px; display: inline-flex; align-items: center; gap: 8px; transition: color 0.3s, border-color 0.3s, gap 0.3s var(--sh-ease); cursor: pointer; }
.shop-home .section-link:hover { color: var(--sh-gold-deep); border-color: var(--sh-gold-deep); gap: 12px; }
.shop-home .section-link .material-symbols-outlined { font-size: 16px; }

/* ─── HERO ──────────────────────────────────────────────────────────────── */
.shop-home .hero { padding: 32px 0 56px; background: linear-gradient(180deg, var(--sh-bg) 0%, var(--sh-mute) 100%); }
.shop-home .hero-grid { display: grid; grid-template-columns: 1fr 1.15fr; gap: 56px; align-items: center; }
.shop-home .hero-text { padding: 24px 0; }
.shop-home .hero-eyebrow { display: inline-flex; align-items: center; gap: 10px; background: var(--sh-ink); color: var(--sh-bg); font-family: var(--sh-mono); font-size: 0.72rem; font-weight: 500; padding: 8px 16px; border-radius: 999px; text-transform: uppercase; letter-spacing: 0.14em; margin-bottom: 28px; }
.shop-home .hero-eyebrow .dot { width: 8px; height: 8px; border-radius: 50%; background: var(--sh-sale); animation: sh-pulse 1.6s infinite; }
.shop-home .hero-headline { font-family: var(--sh-display); font-size: clamp(3rem, 6vw, 5.4rem); line-height: 0.98; font-weight: 500; letter-spacing: -0.02em; color: var(--sh-ink); margin-bottom: 24px; }
.shop-home .hero-headline em { color: var(--sh-gold-deep); font-style: italic; font-weight: 600; }
.shop-home .hero-sub { font-size: 1.05rem; line-height: 1.65; color: var(--sh-ink-soft); max-width: 480px; margin-bottom: 32px; }
.shop-home .hero-ctas { display: flex; gap: 14px; align-items: center; flex-wrap: wrap; margin-bottom: 48px; }
.shop-home .hero-showcase { position: relative; aspect-ratio: 1/1; }
.shop-home .showcase-frame { position: absolute; inset: 0; background: var(--sh-paper); border-radius: 8px; overflow: hidden; box-shadow: var(--sh-shadow-3); }
.shop-home .showcase-image { position: absolute; inset: 0; background-size: cover; background-position: center; transition: opacity 0.4s var(--sh-ease); }
.shop-home .showcase-image.fade { opacity: 0; }
.shop-home .showcase-overlay { position: absolute; bottom: 0; left: 0; right: 0; background: linear-gradient(180deg, transparent, rgba(20,17,12,0.85)); padding: 32px; color: var(--sh-bg); }
.shop-home .showcase-meta { font-family: var(--sh-mono); font-size: 0.7rem; font-weight: 500; color: var(--sh-gold-light); text-transform: uppercase; letter-spacing: 0.16em; margin-bottom: 10px; }
.shop-home .showcase-name { font-family: var(--sh-display); font-size: 1.85rem; font-weight: 500; line-height: 1.1; margin-bottom: 8px; color: var(--sh-bg); }
.shop-home .showcase-meta-row { display: flex; gap: 16px; align-items: baseline; flex-wrap: wrap; }
.shop-home .showcase-price { font-family: var(--sh-display); font-size: 1.6rem; font-weight: 500; color: var(--sh-bg); }
.shop-home .showcase-was { font-family: var(--sh-sans); font-size: 0.92rem; color: rgba(250,246,236,0.6); text-decoration: line-through; }
.shop-home .showcase-rating { font-family: var(--sh-mono); font-size: 0.82rem; color: rgba(250,246,236,0.85); display: inline-flex; align-items: center; gap: 5px; }
.shop-home .showcase-rating .material-symbols-outlined { font-size: 16px; color: var(--sh-gold-light); font-variation-settings: 'FILL' 1; }
.shop-home .showcase-fab { position: absolute; top: 24px; right: 24px; background: var(--sh-bg); color: var(--sh-ink); border-radius: 999px; padding: 12px 22px; font-family: var(--sh-sans); font-size: 0.78rem; font-weight: 600; letter-spacing: 0.1em; text-transform: uppercase; display: inline-flex; align-items: center; gap: 8px; box-shadow: var(--sh-shadow-2); transition: background 0.3s, color 0.3s; z-index: 2; }
.shop-home .showcase-fab:hover { background: var(--sh-gold); }
.shop-home .showcase-fab .material-symbols-outlined { font-size: 18px; }
.shop-home .showcase-thumbs { position: absolute; bottom: -32px; left: 50%; transform: translateX(-50%); background: var(--sh-paper); border: 1px solid var(--sh-rule); border-radius: 999px; padding: 8px; display: flex; gap: 6px; box-shadow: var(--sh-shadow-2); z-index: 3; max-width: 92%; overflow-x: auto; scrollbar-width: none; }
.shop-home .showcase-thumbs::-webkit-scrollbar { display: none; }
.shop-home .thumb { width: 62px; height: 62px; border-radius: 50%; overflow: hidden; background: var(--sh-mute); cursor: pointer; transition: transform 0.3s, box-shadow 0.3s; position: relative; flex-shrink: 0; padding: 0; }
.shop-home .thumb img { width: 100%; height: 100%; object-fit: cover; }
.shop-home .thumb.active { box-shadow: 0 0 0 2px var(--sh-gold); transform: scale(1.05); }
.shop-home .thumb:hover { transform: scale(1.08); }
.shop-home .hero-trust { display: flex; gap: 32px; align-items: center; padding-top: 32px; margin-top: 32px; border-top: 1px solid var(--sh-rule); flex-wrap: wrap; }
.shop-home .trust-item { display: flex; align-items: center; gap: 10px; font-family: var(--sh-mono); font-size: 0.72rem; color: var(--sh-ink-soft); letter-spacing: 0.06em; }
.shop-home .trust-item .material-symbols-outlined { color: var(--sh-gold-deep); font-size: 18px; }
.shop-home .trust-item b { color: var(--sh-ink); font-weight: 600; }

/* ─── CATEGORY STRIP ────────────────────────────────────────────────────── */
.shop-home .cat-row { display: grid; grid-template-columns: repeat(6, 1fr); gap: 16px; }
.shop-home .cat-card { position: relative; aspect-ratio: 3/4; border-radius: 8px; overflow: hidden; cursor: pointer; background: var(--sh-mute); transition: transform 0.5s var(--sh-ease); display: block; }
.shop-home .cat-card:hover { transform: translateY(-6px); }
.shop-home .cat-card img { width: 100%; height: 100%; object-fit: cover; transition: transform 0.7s var(--sh-ease); }
.shop-home .cat-card:hover img { transform: scale(1.08); }
.shop-home .cat-overlay { position: absolute; inset: 0; background: linear-gradient(180deg, transparent 40%, rgba(20,17,12,0.78)); }
.shop-home .cat-content { position: absolute; bottom: 0; left: 0; right: 0; padding: 20px; color: var(--sh-bg); z-index: 2; }
.shop-home .cat-name { font-family: var(--sh-display); font-size: 1.5rem; font-weight: 500; line-height: 1.1; color: var(--sh-bg); letter-spacing: -0.005em; }
.shop-home .cat-count { font-family: var(--sh-mono); font-size: 0.7rem; color: rgba(250,246,236,0.75); letter-spacing: 0.06em; margin-top: 3px; }

/* ─── PROMO BANNER ──────────────────────────────────────────────────────── */
.shop-home .promo-banner { background: var(--sh-gold-bg); border-radius: 12px; padding: 48px 56px; display: grid; grid-template-columns: 1fr 1.1fr; gap: 48px; align-items: center; overflow: hidden; position: relative; }
.shop-home .promo-tag { display: inline-flex; align-items: center; gap: 8px; background: var(--sh-ink); color: var(--sh-bg); font-family: var(--sh-mono); font-size: 0.7rem; font-weight: 500; padding: 7px 14px; border-radius: 999px; text-transform: uppercase; letter-spacing: 0.14em; margin-bottom: 18px; }
.shop-home .promo-tag .material-symbols-outlined { font-size: 15px; }
.shop-home .promo-text h2 { font-family: var(--sh-display); font-size: clamp(2rem, 3.6vw, 3rem); line-height: 1.05; font-weight: 500; letter-spacing: -0.01em; color: var(--sh-ink); margin-bottom: 14px; }
.shop-home .promo-text h2 em { color: var(--sh-gold-deep); font-style: italic; font-weight: 600; }
.shop-home .promo-text p { color: var(--sh-ink-soft); font-size: 1rem; margin-bottom: 24px; max-width: 420px; line-height: 1.6; }
.shop-home .promo-cta-row { display: flex; gap: 12px; align-items: center; flex-wrap: wrap; }
.shop-home .promo-collage { position: relative; aspect-ratio: 4/3; }
.shop-home .collage-pic { position: absolute; border-radius: 6px; overflow: hidden; box-shadow: var(--sh-shadow-2); transition: transform 0.5s var(--sh-ease); }
.shop-home .collage-pic img { width: 100%; height: 100%; object-fit: cover; }
.shop-home .collage-pic-1 { width: 55%; aspect-ratio: 1/1.2; top: 0; left: 0; transform: rotate(-3deg); z-index: 1; }
.shop-home .collage-pic-2 { width: 48%; aspect-ratio: 1/1.1; top: 20%; right: 0; transform: rotate(4deg); z-index: 2; }
.shop-home .collage-pic-3 { width: 38%; aspect-ratio: 1/1; bottom: 0; left: 25%; transform: rotate(-2deg); z-index: 3; }
.shop-home .promo-banner:hover .collage-pic-1 { transform: rotate(-5deg) translate(-6px,-6px); }
.shop-home .promo-banner:hover .collage-pic-2 { transform: rotate(6deg) translate(6px,-4px); }
.shop-home .promo-banner:hover .collage-pic-3 { transform: rotate(-3deg) translate(0,6px); }

/* ─── PRODUCT CARDS / BESTSELLERS GRID ──────────────────────────────────── */
.shop-home .product-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 20px; }
.shop-home .pcard { background: var(--sh-paper); border: 1px solid var(--sh-rule); border-radius: 8px; overflow: hidden; transition: all 0.4s var(--sh-ease); position: relative; display: flex; flex-direction: column; cursor: pointer; }
.shop-home .pcard:hover { transform: translateY(-4px); box-shadow: var(--sh-shadow-2); border-color: transparent; }
.shop-home .pcard-media { aspect-ratio: 1/1; overflow: hidden; background: var(--sh-mute); position: relative; }
.shop-home .pcard-media img { width: 100%; height: 100%; object-fit: cover; transition: transform 0.7s var(--sh-ease), opacity 0.4s; }
.shop-home .pcard:hover .pcard-media img { transform: scale(1.06); }
.shop-home .pcard-badge { position: absolute; top: 12px; left: 12px; background: var(--sh-sale); color: #fff; font-family: var(--sh-mono); font-size: 0.7rem; font-weight: 600; padding: 5px 10px; border-radius: 4px; letter-spacing: 0.04em; z-index: 2; }
.shop-home .pcard-badge.new { background: var(--sh-leaf); }
.shop-home .pcard-badge.bestseller { background: var(--sh-gold); color: var(--sh-ink); }
.shop-home .pcard-quick { position: absolute; bottom: 0; left: 0; right: 0; background: var(--sh-ink); color: var(--sh-bg); padding: 14px; font-family: var(--sh-sans); font-size: 0.78rem; font-weight: 600; letter-spacing: 0.12em; text-transform: uppercase; text-align: center; transform: translateY(100%); transition: transform 0.4s var(--sh-ease); display: flex; align-items: center; justify-content: center; gap: 8px; z-index: 3; }
.shop-home .pcard:hover .pcard-quick { transform: translateY(0); }
.shop-home .pcard-quick:hover { background: var(--sh-gold-deep); }
.shop-home .pcard-quick .material-symbols-outlined { font-size: 16px; }
.shop-home .pcard-body { padding: 18px 18px 20px; display: flex; flex-direction: column; gap: 6px; }
.shop-home .pcard-cat { font-family: var(--sh-mono); font-size: 0.66rem; font-weight: 500; color: var(--sh-ink-mute); text-transform: uppercase; letter-spacing: 0.14em; }
.shop-home .pcard-name { font-family: var(--sh-display); font-size: 1.15rem; font-weight: 500; line-height: 1.25; color: var(--sh-ink); min-height: 2.5em; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.shop-home .pcard-rating { display: flex; align-items: center; gap: 6px; font-family: var(--sh-mono); font-size: 0.74rem; color: var(--sh-ink-mute); }
.shop-home .pcard-rating .stars { display: inline-flex; gap: 1px; color: var(--sh-gold); }
.shop-home .pcard-rating .stars .material-symbols-outlined { font-size: 14px; font-variation-settings: 'FILL' 1; }
.shop-home .pcard-price-row { display: flex; align-items: baseline; gap: 10px; margin-top: 6px; padding-top: 10px; border-top: 1px solid var(--sh-rule); }
.shop-home .pcard-price { font-family: var(--sh-display); font-size: 1.35rem; font-weight: 600; color: var(--sh-ink); letter-spacing: 0.005em; }
.shop-home .pcard-was { font-family: var(--sh-sans); font-size: 0.85rem; color: var(--sh-ink-faint); text-decoration: line-through; }
.shop-home .pcard-save { margin-left: auto; font-family: var(--sh-mono); font-size: 0.7rem; font-weight: 600; color: var(--sh-leaf); letter-spacing: 0.04em; }

/* ─── SHOP THE LOOK ─────────────────────────────────────────────────────── */
.shop-home .look { background: var(--sh-ink); color: var(--sh-bg); padding: 80px 0; position: relative; overflow: hidden; }
.shop-home .look::before { content: ''; position: absolute; top: -100px; right: -100px; width: 500px; height: 500px; background: radial-gradient(circle, rgba(201,160,68,0.18), transparent 60%); pointer-events: none; }
.shop-home .look .section-head { border-bottom: 1px solid rgba(255,255,255,0.1); padding-bottom: 32px; }
.shop-home .look .section-tag { color: var(--sh-gold-light); }
.shop-home .look .section-tag::before { background: var(--sh-gold-light); }
.shop-home .look .section-title { color: var(--sh-bg); }
.shop-home .look .section-title em { color: var(--sh-gold-light); }
.shop-home .look .section-sub { color: rgba(250,246,236,0.7); }
.shop-home .look .section-link { color: var(--sh-bg); border-color: var(--sh-bg); }
.shop-home .look .section-link:hover { color: var(--sh-gold-light); border-color: var(--sh-gold-light); }
.shop-home .look-grid { display: grid; grid-template-columns: 1.3fr 1fr; gap: 48px; align-items: stretch; }
.shop-home .look-image { border-radius: 8px; overflow: hidden; aspect-ratio: 1/1.1; background-size: cover; background-position: center; position: relative; box-shadow: var(--sh-shadow-3); }
.shop-home .look-image img { width: 100%; height: 100%; object-fit: cover; }
.shop-home .look-pin { position: absolute; width: 36px; height: 36px; background: var(--sh-paper); border-radius: 50%; display: flex; align-items: center; justify-content: center; cursor: pointer; box-shadow: 0 4px 16px rgba(0,0,0,0.4); z-index: 3; transition: transform 0.3s; }
.shop-home .look-pin:hover { transform: scale(1.15); }
.shop-home .look-pin .material-symbols-outlined { color: var(--sh-ink); font-size: 18px; font-weight: 700; }
.shop-home .look-pin::before { content: ''; position: absolute; inset: -6px; border-radius: 50%; background: rgba(201,160,68,0.4); animation: sh-pinPulse 2.4s ease-out infinite; }
.shop-home .look-pin-1 { top: 18%; left: 32%; }
.shop-home .look-pin-2 { top: 48%; right: 22%; }
.shop-home .look-pin-3 { bottom: 22%; left: 42%; }
.shop-home .look-products { display: flex; flex-direction: column; gap: 12px; }
.shop-home .look-summary { background: rgba(255,255,255,0.05); border: 1px solid rgba(255,255,255,0.08); border-radius: 8px; padding: 24px 26px; margin-bottom: 6px; }
.shop-home .look-summary-row { display: flex; justify-content: space-between; align-items: baseline; margin-bottom: 8px; }
.shop-home .look-summary-row b { font-family: var(--sh-display); font-size: 1.4rem; color: var(--sh-bg); font-weight: 500; }
.shop-home .look-summary-row b em { color: var(--sh-gold-light); font-style: italic; }
.shop-home .look-was-price { font-family: var(--sh-display); font-size: 1.05rem; color: rgba(250,246,236,0.5); text-decoration: line-through; margin-right: 8px; }
.shop-home .look-now-price { font-family: var(--sh-display); font-size: 1.6rem; color: var(--sh-gold-light); font-weight: 600; }
.shop-home .look-save-tag { background: var(--sh-gold); color: var(--sh-ink); font-family: var(--sh-mono); font-size: 0.7rem; font-weight: 600; padding: 4px 10px; border-radius: 4px; text-transform: uppercase; letter-spacing: 0.06em; }
.shop-home .look-summary-sub { font-size: 0.86rem; color: rgba(250,246,236,0.7); }
.shop-home .look-prod { background: rgba(255,255,255,0.04); border: 1px solid rgba(255,255,255,0.06); border-radius: 6px; padding: 14px 16px; display: grid; grid-template-columns: 54px 1fr auto; gap: 14px; align-items: center; transition: background 0.3s; cursor: pointer; }
.shop-home .look-prod:hover { background: rgba(255,255,255,0.07); }
.shop-home .look-prod-img { width: 54px; height: 54px; border-radius: 6px; overflow: hidden; background: var(--sh-mute); }
.shop-home .look-prod-img img { width: 100%; height: 100%; object-fit: cover; }
.shop-home .look-prod-text { min-width: 0; }
.shop-home .look-prod-num { font-family: var(--sh-mono); font-size: 0.65rem; font-weight: 500; color: var(--sh-gold-light); letter-spacing: 0.14em; text-transform: uppercase; margin-bottom: 2px; }
.shop-home .look-prod-name { font-family: var(--sh-display); font-size: 1rem; font-weight: 500; color: var(--sh-bg); line-height: 1.2; }
.shop-home .look-prod-price { font-family: var(--sh-display); font-size: 1rem; font-weight: 500; color: var(--sh-bg); white-space: nowrap; }
.shop-home .look-bundle-cta { background: var(--sh-gold); color: var(--sh-ink); border: none; border-radius: 999px; padding: 16px; font-family: var(--sh-sans); font-size: 0.86rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.12em; width: 100%; display: inline-flex; align-items: center; justify-content: center; gap: 8px; margin-top: 8px; transition: background 0.3s, transform 0.3s var(--sh-ease); }
.shop-home .look-bundle-cta:hover { background: var(--sh-gold-light); transform: translateY(-2px); }
.shop-home .look-bundle-cta .material-symbols-outlined { font-size: 18px; }

/* ─── TRENDING CAROUSEL ─────────────────────────────────────────────────── */
.shop-home .trending-wrap { position: relative; }
.shop-home .trending-controls { display: flex; gap: 8px; }
.shop-home .tc-btn { width: 46px; height: 46px; border-radius: 50%; background: var(--sh-paper); border: 1px solid var(--sh-rule); color: var(--sh-ink); display: flex; align-items: center; justify-content: center; transition: all 0.3s; cursor: pointer; }
.shop-home .tc-btn:hover { background: var(--sh-ink); color: var(--sh-bg); border-color: var(--sh-ink); }
.shop-home .tc-btn .material-symbols-outlined { font-size: 22px; }
.shop-home .trending-rail { display: flex; gap: 18px; overflow-x: auto; overflow-y: hidden; scroll-snap-type: x mandatory; scrollbar-width: none; -ms-overflow-style: none; padding: 8px 0 24px; }
.shop-home .trending-rail::-webkit-scrollbar { display: none; }
.shop-home .trending-rail .pcard { flex-shrink: 0; width: 280px; scroll-snap-align: start; }

/* ─── MEGA SALE ─────────────────────────────────────────────────────────── */
.shop-home .mega-sale { padding: 0; background: linear-gradient(115deg, var(--sh-emerald) 0%, #1a4a3a 100%); color: var(--sh-bg); position: relative; overflow: hidden; }
.shop-home .mega-sale-grid { display: grid; grid-template-columns: 1.2fr 1fr; align-items: center; min-height: 520px; }
.shop-home .mega-sale-text { padding: 80px 80px 80px 0; position: relative; z-index: 2; }
.shop-home .mega-sale-eyebrow { display: inline-flex; align-items: center; gap: 10px; background: var(--sh-gold); color: var(--sh-ink); font-family: var(--sh-mono); font-size: 0.74rem; font-weight: 600; padding: 8px 16px; border-radius: 999px; text-transform: uppercase; letter-spacing: 0.14em; margin-bottom: 24px; }
.shop-home .mega-sale-eyebrow .pulse { width: 8px; height: 8px; border-radius: 50%; background: var(--sh-sale); animation: sh-pulse 1.6s infinite; }
.shop-home .mega-sale h2 { font-family: var(--sh-display); font-size: clamp(3rem, 6vw, 5rem); line-height: 0.95; font-weight: 500; color: var(--sh-bg); margin-bottom: 18px; letter-spacing: -0.02em; }
.shop-home .mega-sale h2 em { color: var(--sh-gold-light); font-style: italic; font-weight: 600; }
.shop-home .mega-sale-discount { font-family: var(--sh-display); font-style: italic; font-weight: 600; font-size: clamp(5rem, 10vw, 9rem); color: var(--sh-gold-light); line-height: 0.85; margin-bottom: 18px; letter-spacing: -0.04em; }
.shop-home .mega-sale-discount sup { font-size: 0.4em; vertical-align: super; color: var(--sh-bg); font-style: normal; font-weight: 500; margin-left: 4px; }
.shop-home .mega-sale p { font-size: 1.05rem; color: rgba(250,246,236,0.75); margin-bottom: 24px; max-width: 440px; }
.shop-home .mega-sale-countdown { display: flex; gap: 8px; align-items: center; margin-bottom: 32px; font-family: var(--sh-mono); font-size: 0.72rem; color: rgba(250,246,236,0.7); letter-spacing: 0.1em; text-transform: uppercase; }
.shop-home .cd-block { background: rgba(0,0,0,0.4); border: 1px solid rgba(201,160,68,0.3); border-radius: 6px; min-width: 60px; padding: 8px 4px; text-align: center; }
.shop-home .cd-block .num { font-family: var(--sh-display); font-style: italic; font-weight: 600; font-size: 1.6rem; color: var(--sh-gold-light); line-height: 1; }
.shop-home .cd-block .lbl { font-family: var(--sh-mono); font-size: 0.6rem; color: rgba(250,246,236,0.6); letter-spacing: 0.1em; margin-top: 4px; text-transform: uppercase; }
.shop-home .mega-sale-cta-row { display: flex; gap: 14px; align-items: center; flex-wrap: wrap; }
.shop-home .mega-sale-cta-row .btn-gold { padding: 18px 36px; font-size: 0.92rem; }
.shop-home .mega-sale-cta-row .btn-outline { color: var(--sh-bg); border-color: rgba(250,246,236,0.4); }
.shop-home .mega-sale-cta-row .btn-outline:hover { background: var(--sh-bg); color: var(--sh-ink); border-color: var(--sh-bg); }
.shop-home .mega-sale-products { position: relative; height: 520px; overflow: hidden; }
.shop-home .mega-sale-float { position: absolute; border-radius: 8px; overflow: hidden; box-shadow: 0 24px 60px rgba(0,0,0,0.4); background: var(--sh-paper); transition: transform 0.6s var(--sh-ease); }
.shop-home .mega-sale-float img { width: 100%; height: 100%; object-fit: cover; }
.shop-home .mega-sale-float-1 { width: 240px; height: 300px; top: 50%; left: 0; transform: translateY(-50%) rotate(-6deg); z-index: 1; }
.shop-home .mega-sale-float-2 { width: 260px; height: 320px; top: 40%; left: 25%; transform: translateY(-50%) rotate(4deg); z-index: 2; }
.shop-home .mega-sale-float-3 { width: 230px; height: 290px; top: 55%; right: 5%; transform: translateY(-50%) rotate(-3deg); z-index: 3; }
.shop-home .mega-sale-float .price-tag { position: absolute; bottom: 14px; left: 14px; background: var(--sh-ink); color: var(--sh-bg); font-family: var(--sh-mono); font-size: 0.74rem; font-weight: 600; padding: 5px 11px; border-radius: 4px; letter-spacing: 0.04em; }
.shop-home .mega-sale-float .price-tag b { color: var(--sh-gold-light); font-family: var(--sh-display); font-style: italic; font-size: 1.1rem; font-weight: 500; }
.shop-home .mega-sale-float .disc-flag { position: absolute; top: 14px; right: 14px; background: var(--sh-sale); color: #fff; font-family: var(--sh-mono); font-size: 0.72rem; font-weight: 700; padding: 5px 10px; border-radius: 4px; letter-spacing: 0.04em; }

/* ─── COLLECTIONS ───────────────────────────────────────────────────────── */
.shop-home .collections { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; }
.shop-home .coll-card { background: var(--sh-paper); border: 1px solid var(--sh-rule); border-radius: 10px; overflow: hidden; transition: all 0.4s var(--sh-ease); display: flex; flex-direction: column; cursor: pointer; }
.shop-home .coll-card:hover { transform: translateY(-4px); box-shadow: var(--sh-shadow-2); }
.shop-home .coll-hero { aspect-ratio: 16/10; background: var(--sh-mute); position: relative; overflow: hidden; }
.shop-home .coll-hero img { width: 100%; height: 100%; object-fit: cover; transition: transform 0.7s var(--sh-ease); }
.shop-home .coll-card:hover .coll-hero img { transform: scale(1.05); }
.shop-home .coll-hero-overlay { position: absolute; inset: 0; background: linear-gradient(180deg, transparent 50%, rgba(20,17,12,0.7)); }
.shop-home .coll-tag { position: absolute; top: 16px; left: 16px; background: rgba(250,246,236,0.95); font-family: var(--sh-mono); font-size: 0.7rem; font-weight: 600; color: var(--sh-ink); padding: 6px 12px; border-radius: 4px; letter-spacing: 0.06em; text-transform: uppercase; }
.shop-home .coll-title { position: absolute; bottom: 18px; left: 20px; right: 20px; color: var(--sh-bg); z-index: 2; }
.shop-home .coll-title h3 { font-family: var(--sh-display); font-size: 1.8rem; font-weight: 500; line-height: 1.05; color: var(--sh-bg); }
.shop-home .coll-title h3 em { color: var(--sh-gold-light); font-style: italic; }
.shop-home .coll-body { padding: 18px 22px 24px; }
.shop-home .coll-stats { display: flex; justify-content: space-between; align-items: center; margin-bottom: 14px; font-family: var(--sh-mono); font-size: 0.72rem; color: var(--sh-ink-mute); letter-spacing: 0.06em; }
.shop-home .coll-stats b { color: var(--sh-ink); font-family: var(--sh-display); font-size: 1.05rem; font-weight: 600; }
.shop-home .coll-products { display: flex; gap: 8px; margin-bottom: 18px; }
.shop-home .coll-prod-mini { width: 54px; height: 54px; border-radius: 6px; overflow: hidden; background: var(--sh-mute); border: 1px solid var(--sh-rule); flex-shrink: 0; }
.shop-home .coll-prod-mini img { width: 100%; height: 100%; object-fit: cover; }
.shop-home .coll-prod-more { width: 54px; height: 54px; border-radius: 6px; background: var(--sh-mute); border: 1px solid var(--sh-rule); display: flex; align-items: center; justify-content: center; font-family: var(--sh-display); font-style: italic; font-weight: 600; color: var(--sh-ink-soft); font-size: 0.95rem; }
.shop-home .coll-cta { width: 100%; background: var(--sh-ink); color: var(--sh-bg); border-radius: 999px; padding: 13px; font-family: var(--sh-sans); font-size: 0.78rem; font-weight: 600; text-transform: uppercase; letter-spacing: 0.12em; transition: background 0.3s; display: inline-flex; align-items: center; justify-content: center; gap: 8px; }
.shop-home .coll-cta:hover { background: var(--sh-gold-deep); }
.shop-home .coll-cta .material-symbols-outlined { font-size: 16px; }

/* ─── NEWSLETTER ────────────────────────────────────────────────────────── */
.shop-home .newsletter-row { background: var(--sh-gold-bg); border-radius: 12px; padding: 48px 64px; display: grid; grid-template-columns: 1.2fr 1fr; gap: 48px; align-items: center; }
.shop-home .nl-text h2 { font-family: var(--sh-display); font-size: clamp(1.9rem, 3vw, 2.6rem); line-height: 1.05; font-weight: 500; color: var(--sh-ink); margin-bottom: 12px; letter-spacing: -0.005em; }
.shop-home .nl-text h2 em { color: var(--sh-gold-deep); font-style: italic; font-weight: 600; }
.shop-home .nl-text p { color: var(--sh-ink-soft); font-size: 0.95rem; max-width: 420px; line-height: 1.6; }
.shop-home .nl-form { display: flex; gap: 0; background: var(--sh-paper); border: 1px solid var(--sh-rule); border-radius: 999px; padding: 6px 6px 6px 24px; transition: border-color 0.3s, box-shadow 0.3s; }
.shop-home .nl-form:focus-within { border-color: var(--sh-gold-deep); box-shadow: 0 0 0 4px var(--sh-gold-soft); }
.shop-home .nl-form input { flex: 1; background: transparent; border: none; outline: none; font-family: var(--sh-sans); font-size: 0.94rem; color: var(--sh-ink); }
.shop-home .nl-form input::placeholder { color: var(--sh-ink-faint); }
.shop-home .nl-form button { background: var(--sh-ink); color: var(--sh-bg); padding: 14px 26px; border-radius: 999px; font-family: var(--sh-sans); font-size: 0.78rem; font-weight: 600; text-transform: uppercase; letter-spacing: 0.12em; transition: background 0.3s; display: inline-flex; align-items: center; gap: 6px; white-space: nowrap; }
.shop-home .nl-form button:hover { background: var(--sh-gold-deep); }
.shop-home .nl-form button .material-symbols-outlined { font-size: 15px; }
.shop-home .nl-fine { font-family: var(--sh-mono); font-size: 0.7rem; color: var(--sh-ink-mute); margin-top: 12px; letter-spacing: 0.06em; }

/* ─── SKELETON (loading) ────────────────────────────────────────────────── */
.shop-home .sh-skel { position: relative; overflow: hidden; background: var(--sh-mute); border-radius: 8px; }
.shop-home .sh-skel::after { content: ''; position: absolute; inset: 0; transform: translateX(-100%); background: linear-gradient(90deg, transparent, rgba(255,255,255,0.55), transparent); animation: sh-shimmer 1.4s infinite; }
@keyframes sh-shimmer { 100% { transform: translateX(100%); } }
.shop-home .sh-skel-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 20px; }
.shop-home .sh-skel-card { aspect-ratio: 3/4; }

/* ─── EMPTY STATE ───────────────────────────────────────────────────────── */
.shop-home .sh-empty { text-align: center; padding: 64px 24px; color: var(--sh-ink-mute); }
.shop-home .sh-empty .material-symbols-outlined { font-size: 48px; color: var(--sh-ink-faint); margin-bottom: 12px; }
.shop-home .sh-empty h3 { font-family: var(--sh-display); font-size: 1.6rem; color: var(--sh-ink); margin-bottom: 8px; font-weight: 500; }

/* ─── RTL ───────────────────────────────────────────────────────────────── */
.shop-home[dir="rtl"] .section-tag::before { margin-left: 0; }
.shop-home[dir="rtl"] .pcard-save { margin-left: 0; margin-right: auto; }
.shop-home[dir="rtl"] .showcase-fab { right: auto; left: 24px; }

/* ─── RESPONSIVE ────────────────────────────────────────────────────────── */
@media (max-width: 1100px) {
    .shop-home .sh-container { padding: 0 24px; }
    .shop-home .hero-grid { grid-template-columns: 1fr; gap: 32px; }
    .shop-home .cat-row { grid-template-columns: repeat(3, 1fr); }
    .shop-home .product-grid, .shop-home .sh-skel-grid { grid-template-columns: repeat(2, 1fr); }
    .shop-home .promo-banner { grid-template-columns: 1fr; padding: 32px; gap: 24px; }
    .shop-home .look-grid { grid-template-columns: 1fr; gap: 24px; }
    .shop-home .mega-sale-grid { grid-template-columns: 1fr; min-height: auto; }
    .shop-home .mega-sale-text { padding: 48px 32px; }
    .shop-home .mega-sale-products { height: 360px; }
    .shop-home .collections { grid-template-columns: 1fr; }
    .shop-home .newsletter-row { grid-template-columns: 1fr; padding: 32px; gap: 24px; }
}
@media (max-width: 720px) {
    .shop-home .cat-row { grid-template-columns: repeat(2, 1fr); gap: 10px; }
    .shop-home .product-grid, .shop-home .sh-skel-grid { grid-template-columns: 1fr 1fr; gap: 12px; }
    .shop-home .hero-trust { gap: 18px; }
    .shop-home .showcase-thumbs { padding: 6px; }
    .shop-home .thumb { width: 48px; height: 48px; }
    .shop-home .nl-form { flex-direction: column; padding: 10px; border-radius: 8px; }
    .shop-home .nl-form button { border-radius: 6px; justify-content: center; }
}

/* ════════════════════════════════════════════════════════════════════════
   DARK MODE
   The whole page is token-driven (--sh-*), so dark mode is a pure token
   remap. Triggered by html[data-theme="dark"] (set by app.js / ThemeService
   when the header theme toggle flips). The deliberately-dark sections
   (mega-sale, shop-the-look) already use light text on dark grounds, so they
   stay correct; only the light surfaces/text need remapping.
   ════════════════════════════════════════════════════════════════════════ */
[data-theme="dark"] .shop-home {
    --sh-bg:        #14110c;   /* page ground — warm near-black */
    --sh-paper:     #211d16;   /* cards / surfaces — lifted so cards separate from bg */
    --sh-mute:      #2b261d;   /* elevated (image placeholders, chips, thumbs) */
    --sh-ink:       #f6f1e7;   /* primary text (warm white) */
    --sh-ink-soft:  #d6ccb6;
    --sh-ink-mute:  #a99e88;   /* brightened for legible secondary text */
    --sh-ink-faint: #7c7160;
    --sh-gold:      #d2aa52;
    --sh-gold-light:#e6c87a;
    --sh-gold-deep: #ddba6c;   /* lifted so gold headings/prices stay legible on dark */
    --sh-gold-soft: rgba(201,160,68,0.16);
    --sh-gold-bg:   #2c2417;   /* warm dark band for promo / newsletter */
    --sh-sale:      #e96d6d;   /* lifted red for contrast on dark */
    --sh-leaf:      #82ab88;
    --sh-rule:      rgba(246,241,231,0.13);   /* more visible borders (shadows read poorly on dark) */
    --sh-shadow-1:  0 1px 3px rgba(0,0,0,0.45);
    --sh-shadow-2:  0 10px 30px rgba(0,0,0,0.55);
    --sh-shadow-3:  0 26px 64px rgba(0,0,0,0.65);
}

/* ── Fix 1: light-on-dark text. Several elements use var(--sh-bg) as a stand-in
   for "light text" over a fixed-dark ground (image overlays, the emerald sale).
   That token flips dark here, so pin them light. ── */
[data-theme="dark"] .shop-home .showcase-overlay,
[data-theme="dark"] .shop-home .showcase-name,
[data-theme="dark"] .shop-home .showcase-price,
[data-theme="dark"] .shop-home .cat-content,
[data-theme="dark"] .shop-home .cat-name,
[data-theme="dark"] .shop-home .coll-title,
[data-theme="dark"] .shop-home .coll-title h3,
[data-theme="dark"] .shop-home .mega-sale,
[data-theme="dark"] .shop-home .mega-sale h2,
[data-theme="dark"] .shop-home .mega-sale-discount sup { color: #f6f1e7; }

/* ── Fix 2: the "shop the look" block is a dark feature section (bg var(--sh-ink),
   which flips LIGHT here). Pin it dark and its text light so it stays a dark band. ── */
[data-theme="dark"] .shop-home .look { background: #18140d; color: #f6f1e7; }
[data-theme="dark"] .shop-home .look .section-title,
[data-theme="dark"] .shop-home .look .section-link,
[data-theme="dark"] .shop-home .look-summary-row b,
[data-theme="dark"] .shop-home .look-prod-name,
[data-theme="dark"] .shop-home .look-prod-price { color: #f6f1e7; }

/* ── Fix 3: light "chip" tags need dark text (the chip stays light). ── */
[data-theme="dark"] .shop-home .coll-tag { color: #1a1510; }

/* ── Fix 4: gold-background elements keep DARK text (their text token would
   otherwise flip light and wash out on gold). ── */
[data-theme="dark"] .shop-home .btn-gold,
[data-theme="dark"] .shop-home .btn-gold:hover,
[data-theme="dark"] .shop-home .showcase-fab:hover,
[data-theme="dark"] .shop-home .pcard-badge.bestseller,
[data-theme="dark"] .shop-home .look-save-tag,
[data-theme="dark"] .shop-home .look-bundle-cta,
[data-theme="dark"] .shop-home .look-bundle-cta:hover,
[data-theme="dark"] .shop-home .mega-sale-eyebrow { color: #1a1510; }

/* ── Fix 5: card / surface definition. On dark, drop-shadows barely read, so
   give cards a visible border and a warm-gold hover edge instead of relying on
   shadow alone. Frame the white product photos so they read as deliberate tiles. ── */
[data-theme="dark"] .shop-home .pcard,
[data-theme="dark"] .shop-home .coll-card { border-color: rgba(246,241,231,0.12); }
[data-theme="dark"] .shop-home .pcard:hover,
[data-theme="dark"] .shop-home .coll-card:hover { border-color: rgba(210,170,82,0.45); box-shadow: 0 12px 34px rgba(0,0,0,0.6); }
[data-theme="dark"] .shop-home .pcard-media,
[data-theme="dark"] .shop-home .coll-hero { border-bottom: 1px solid rgba(0,0,0,0.35); }
[data-theme="dark"] .shop-home .cat-card,
[data-theme="dark"] .shop-home .showcase-frame { border: 1px solid rgba(246,241,231,0.10); }

/* ── Fix 6: richer hero on dark — a soft gold glow keeps it from reading flat. ── */
[data-theme="dark"] .shop-home .hero {
    background:
        radial-gradient(ellipse at 72% 0%, rgba(201,160,68,0.12), transparent 55%),
        linear-gradient(180deg, var(--sh-bg) 0%, var(--sh-mute) 100%);
}