/* ════════════════════════════════════════════════════════════════════
   HERO BENTO + SLIM CAROUSEL CARD SKIN
   Loaded AFTER custom.css (see frontend.layout.app) so it wins ties.

   Contents:
   1. Hero Bento widget (hero_bento) — asymmetric mosaic hero
   2. Slim card skin scoped to the kept owl-carousel product row
   ════════════════════════════════════════════════════════════════════ */

/* ── 1. HERO BENTO ────────────────────────────────────────────────
   All colors via --theme-* tokens so light, dark and RTL work
   without extra overrides. */
.hb-wrap { --hb-radius: 18px; }
.hb-grid {
    display: grid;
    gap: 12px;
    grid-template-columns: minmax(0, 2.2fr) minmax(0, 1fr) minmax(0, .95fr);
    grid-template-rows: 150px 170px;
    grid-template-areas:
        "main flash deal"
        "main vendor cat";
    margin-bottom: 18px;
}
.hb-tile {
    position: relative;
    border-radius: var(--hb-radius);
    overflow: hidden;
    background: var(--theme-surface-raised, #fff);
    border: 1px solid var(--theme-border, #e4e7ec);
    box-shadow: var(--theme-shadow-sm);
    isolation: isolate;
}
.hb-tile--main   { grid-area: main;   min-height: 332px; }
.hb-tile--flash  { grid-area: flash;  background: var(--theme-text-strong, #111827); border-color: transparent; }
.hb-tile--deal   { grid-area: deal; }
.hb-tile--vendor { grid-area: vendor; }
.hb-tile--cat    { grid-area: cat; }

/* Tile media (image-as-canvas) */
.hb-tile-media { position: absolute; inset: 0; display: block; }
.hb-tile-img,
.hb-fade__slide img {
    width: 100%; height: 100%;
    object-fit: cover; display: block;
}
.hb-tile-media .hb-tile-img { transition: transform .6s ease; }
.hb-tile:hover .hb-tile-media .hb-tile-img { transform: scale(1.04); }

/* Copy layer */
.hb-tile-copy {
    position: relative; z-index: 2;
    height: 100%;
    display: flex; flex-direction: column; justify-content: flex-end;
    padding: 20px;
    pointer-events: none;
}
.hb-tile-copy a, .hb-tile-copy .hb-btn { pointer-events: auto; }
.hb-tile--overlay .hb-tile-scrim,
.hb-tile--deal .hb-tile-scrim {
    position: absolute; inset: 0; z-index: 1;
    pointer-events: none;
    background: linear-gradient(180deg, rgba(15,23,42,0) 30%, rgba(15,23,42,.74) 100%);
}
.hb-tile--flash .hb-tile-scrim--ink {
    position: absolute; inset: 0; z-index: 1;
    pointer-events: none;
    background:
        radial-gradient(120% 130% at 85% -10%, var(--theme-accent, #3f5aa9) 0%, transparent 55%),
        rgba(2,6,23,.25);
}
/* Photo-backed flash tile (sale banner) — deepen the scrim so the
   countdown copy stays readable over any artwork. */
.hb-tile--flash.hb-tile--photo .hb-tile-scrim--ink {
    background:
        radial-gradient(120% 130% at 85% -10%, var(--theme-accent, #3f5aa9) 0%, transparent 55%),
        linear-gradient(180deg, rgba(2,6,23,.45) 0%, rgba(2,6,23,.82) 100%);
}
.hb-tile--flash .hb-tile-copy,
.hb-tile--deal .hb-tile-copy { color: #fff; }

/* Type */
.hb-eyebrow {
    display: inline-flex; align-items: center;
    font-size: 11px; font-weight: 700;
    letter-spacing: .16em; text-transform: uppercase;
    color: var(--theme-primary, #1f2b6c);
    margin-bottom: 6px;
}
.hb-tile--flash .hb-eyebrow,
.hb-tile--deal .hb-eyebrow { color: var(--theme-primary, #8ea3f0); }
.hb-eyebrow--live { color: #fca5a5; }
.hb-live-dot { font-size: 7px; margin-right: 6px; animation: hb-pulse 1.6s ease-in-out infinite; }
@keyframes hb-pulse { 0%,100% { opacity: 1; } 50% { opacity: .25; } }
.hb-headline {
    font-size: clamp(1.3rem, 2.2vw, 1.75rem);
    font-weight: 600; line-height: 1.18;
    color: #fff; margin: 0 0 6px;
    max-width: 22ch;
    text-shadow: 0 2px 14px rgba(2,6,23,.35);
}
.hb-sub {
    color: rgba(255,255,255,.88);
    font-size: .95rem; margin: 0 0 14px; max-width: 46ch;
}
.hb-tile-title {
    font-size: 1.02rem; font-weight: 700; line-height: 1.25;
    margin: 0 0 8px;
}
.hb-tile--main .hb-tile-title { color: #fff; }
.hb-tile-title-link { color: inherit; text-decoration: none; }
.hb-tile-title-link:hover, .hb-tile-title-link:focus-visible { color: #fff; text-decoration: underline; }

/* Buttons */
.hb-btn {
    display: inline-flex; align-items: center;
    font-size: .82rem; font-weight: 700;
    padding: 9px 18px; border-radius: 999px;
    transition: transform .15s ease, box-shadow .15s ease, background .15s ease;
}
.hb-btn:hover { transform: translateY(-1px); text-decoration: none; }
.hb-btn--solid {
    background: var(--theme-primary, #1f2b6c);
    color: var(--theme-on-primary, #ffffff);
    box-shadow: 0 6px 18px rgba(2,6,23,.28);
}
.hb-btn--solid:hover { background: var(--theme-primary-hover, #16205a); color: var(--theme-on-primary, #ffffff); }
.hb-btn--ghost {
    border: 1.5px solid rgba(255,255,255,.65);
    color: #fff; background: rgba(15,23,42,.14);
    backdrop-filter: blur(4px);
}
.hb-btn--ghost:hover { background: rgba(255,255,255,.16); color: #fff; }
.hb-btn--light { background: rgba(255,255,255,.94); color: #172033; align-self: flex-start; }
.hb-btn--light:hover { background: #fff; color: #172033; }
.hb-actions { display: flex; gap: 10px; flex-wrap: wrap; }

/* Flash tile extras */
.hb-countdown { display: flex; gap: 7px; margin: 4px 0 12px; }
.hb-count__cell {
    min-width: 44px; text-align: center;
    background: rgba(255,255,255,.12);
    border: 1px solid rgba(255,255,255,.18);
    border-radius: 10px; padding: 5px 8px 6px;
}
.hb-count__cell b {
    display: block; font-size: 1.05rem; font-weight: 700; color: #fff;
    font-variant-numeric: tabular-nums;
}
.hb-count__cell span {
    font-size: 9px; letter-spacing: .12em; text-transform: uppercase;
    color: rgba(255,255,255,.72);
}

/* Deal tile extras */
.hb-deal-badge {
    position: absolute; top: 14px; right: 14px;
    background: var(--theme-primary, #1f2b6c);
    color: var(--theme-on-primary, #ffffff);
    font-size: 12px; font-weight: 800;
    border-radius: 999px; padding: 4px 10px;
    box-shadow: 0 4px 14px rgba(2,6,23,.3);
}
.hb-price { display: flex; align-items: baseline; gap: 8px; }
.hb-price__now { font-size: 1.1rem; font-weight: 800; }
.hb-price__was { color: rgba(255,255,255,.65); font-size: .8rem; }

/* Vendor tile */
.hb-vendor-link {
    display: flex; align-items: center; gap: 12px;
    height: 100%; padding: 14px 16px;
    color: inherit; text-decoration: none;
}
.hb-vendor-ava {
    flex-shrink: 0; width: 56px; height: 56px; border-radius: 50%;
    overflow: hidden;
    display: flex; align-items: center; justify-content: center;
    background: linear-gradient(135deg, var(--theme-accent, #3f5aa9), #16205a);
    color: #fff; font-size: 20px;
    border: 2px solid var(--theme-border, #e4e7ec);
}
.hb-vendor-ava img { width: 100%; height: 100%; object-fit: cover; }
.hb-vendor-copy { min-width: 0; display: flex; flex-direction: column; }
.hb-vendor-copy .hb-eyebrow { margin-bottom: 2px; font-size: 9.5px; }
.hb-vendor-name {
    font-weight: 700; font-size: .95rem; line-height: 1.25;
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.hb-vendor-verified { color: var(--theme-accent, #3f5aa9); font-size: .78em; margin-left: 4px; }
.hb-vendor-meta {
    font-size: 11.5px; color: var(--theme-text-muted, #667085);
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.hb-star { color: #f59e0b; margin-right: 2px; }
.hb-vendor-arrow { margin-left: auto; color: var(--theme-text-subtle, #98a2b3); transition: transform .18s ease; }
.hb-vendor-link:hover .hb-vendor-arrow { transform: translateX(4px); }
.hb-vendor-link:hover { text-decoration: none; color: inherit; }

/* Category tile */
.hb-cat-link {
    display: flex; align-items: center; gap: 12px;
    height: 100%; padding: 14px 16px;
    color: inherit; text-decoration: none;
}
.hb-cat-link:hover { text-decoration: none; color: inherit; }
.hb-cat-img { width: 42px; height: 42px; border-radius: 10px; object-fit: cover; }
.hb-cat-ico {
    width: 42px; height: 42px; border-radius: 10px;
    display: flex; align-items: center; justify-content: center;
    background: var(--theme-surface-muted, #f9fafc);
    color: var(--theme-accent, #3f5aa9); font-size: 15px;
    border: 1px solid var(--theme-border, #e4e7ec);
}
.hb-cat-copy { display: flex; flex-direction: column; min-width: 0; }
.hb-cat-copy .hb-eyebrow { margin-bottom: 2px; font-size: 9.5px; }
.hb-cat-name { font-weight: 700; font-size: .95rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.hb-cat-count { font-size: 11.5px; color: var(--theme-text-muted, #667085); }
.hb-cat-arrow { margin-left: auto; color: var(--theme-text-subtle, #98a2b3); transition: transform .18s ease; }
.hb-cat-link:hover .hb-cat-arrow { transform: translateX(4px); }

/* Cross-fade layers inside the main tile */
.hb-fade { position: absolute; inset: 0; z-index: 0; }
.hb-fade__slide {
    position: absolute; inset: 0;
    opacity: 0; transition: opacity .9s ease;
}
.hb-fade__slide.is-on { opacity: 1; }

/* Responsive: tablet → main spans full width, side tiles wrap 2-up */
@media (max-width: 991.98px) {
    .hb-grid {
        grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
        grid-template-rows: 300px 132px 132px;
        grid-template-areas:
            "main main"
            "flash deal"
            "vendor cat";
    }
    .hb-tile--main { min-height: 300px; }
}
/* Mobile: single column, ordered by business value */
@media (max-width: 575.98px) {
    .hb-grid {
        grid-template-columns: minmax(0, 1fr);
        grid-template-rows: auto;
        grid-template-areas: "main" "flash" "deal" "vendor" "cat";
        gap: 10px;
    }
    .hb-tile--main { min-height: 260px; }
    .hb-tile-copy { padding: 16px; }
}

/* Dark mode: tiles already token-driven; strengthen scrims slightly */
[data-theme="dark"] .hb-tile { background: var(--theme-surface); }
/* Flash tile: --theme-text-strong flips to near-white in dark mode, which
   would put white copy on a white tile — pin it to deep ink instead. */
[data-theme="dark"] .hb-tile--flash { background: #0b1220; border-color: rgba(255,255,255,.08); }
/* Section titles / links use hardcoded light-mode colors in custom.css */
[data-theme="dark"] .home-feature-title { color: var(--theme-text-strong); }
[data-theme="dark"] .home-section-title { color: var(--theme-text-strong); }
[data-theme="dark"] .home-section-title i,
[data-theme="dark"] .home-section-link { color: var(--theme-accent); }
[data-theme="dark"] .hb-tile--overlay .hb-tile-scrim,
[data-theme="dark"] .hb-tile--deal .hb-tile-scrim {
    background: linear-gradient(180deg, rgba(2,6,23,.1) 30%, rgba(2,6,23,.82) 100%);
}
[data-theme="dark"] .hb-vendor-ava { border-color: var(--theme-border); }
[data-theme="dark"] .hb-vendor-name,
[data-theme="dark"] .hb-cat-name { color: var(--theme-text-strong); }
[data-theme="dark"] .hb-vendor-meta,
[data-theme="dark"] .hb-cat-count { color: var(--theme-text-muted); }

/* Reduced motion: kill zoom + pulse + fade transitions */
@media (prefers-reduced-motion: reduce) {
    .hb-tile:hover .hb-tile-media .hb-tile-img { transform: none; }
    .hb-live-dot { animation: none; }
    .hb-fade__slide { transition: none; }
}

/* RTL: arrows point the other way */
[dir="rtl"] .hb-vendor-arrow,
[dir="rtl"] .hb-cat-arrow { transform: scaleX(-1); }
[dir="rtl"] .hb-btn i.fa-arrow-right { transform: scaleX(-1); }

/* ── 2. SLIM CARD SKIN ────────────────────────────────────────────
   Scope: .owl-carousel-item only (the kept carousel row).
   Shop / account / related-product grids are untouched. */
.owl-carousel-item .modern-prod-card {
    border-radius: 14px;
    border: 1px solid var(--theme-border, #e4e7ec);
    background: var(--theme-surface-raised, #fff);
    box-shadow: none;
    overflow: hidden;
}
.owl-carousel-item .modern-prod-card:hover {
    box-shadow: 0 14px 34px rgba(15,23,42,.14);
    transform: translateY(-3px);
}
.owl-carousel-item .prod-image-wrap { background: transparent; }
.owl-carousel-item .prod-img { border-radius: 0; }
.owl-carousel-item .prod-vendor-row { margin-bottom: .15rem; }
.owl-carousel-item .prod-vendor-link {
    font-size: 10px; letter-spacing: .1em; text-transform: uppercase;
    color: var(--theme-text-muted, #667085);
}
.owl-carousel-item .prod-vendor-link .text-primary { color: var(--theme-accent, #3f5aa9) !important; }
.owl-carousel-item .prod-title { margin-bottom: .1rem; }
.owl-carousel-item .prod-title a { color: var(--theme-text-strong, #111827); font-weight: 600; }
.owl-carousel-item .prod-rating { margin-bottom: .35rem; }
.owl-carousel-item .prod-price-row .price-display {
    color: var(--theme-text-strong, #111827);
    font-weight: 800;
}
.owl-carousel-item .prod-badge-container .prod-badge {
    border-radius: 999px;
    backdrop-filter: blur(3px);
}
.owl-carousel-item .prod-quick-add {
    background: var(--theme-accent, #3f5aa9);
    border-radius: 50%;
    box-shadow: 0 6px 16px rgba(63,90,169,.35);
}
[data-theme="dark"] .owl-carousel-item .modern-prod-card {
    background: var(--theme-surface);
    border-color: var(--theme-border);
}
[data-theme="dark"] .owl-carousel-item .modern-prod-card:hover {
    box-shadow: 0 14px 34px rgba(2,6,23,.55);
}

/* ── 3. HOME STATS STRIP ──────────────────────────────────────────
   Real DB-driven marketplace numbers shown under the widgets.
   Token-driven: light/dark/RTL safe. */
.home-stats-strip {
    display: flex;
    background: var(--theme-surface-raised, #fff);
    border: 1px solid var(--theme-border, #e4e7ec);
    border-radius: 16px;
    box-shadow: var(--theme-shadow-sm);
    overflow: hidden;
}
.home-stat {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 2px;
    padding: 18px 10px;
    text-align: center;
    text-decoration: none;
    color: inherit;
    border-right: 1px solid var(--theme-border, #e4e7ec);
}
.home-stat:last-child { border-right: 0; }
.home-stat:hover { text-decoration: none; color: inherit; background: var(--theme-surface-muted, #f9fafc); }
.home-stat b {
    font-family: var(--font-heading, sans-serif);
    font-size: 1.45rem;
    font-weight: 500;
    color: var(--theme-accent, #3f5aa9);
    line-height: 1.1;
    font-variant-numeric: tabular-nums;
}
.home-stat__star { color: #f59e0b; font-size: .8em; margin-left: 4px; }
.home-stat span {
    font-size: 11px;
    letter-spacing: .12em;
    text-transform: uppercase;
    color: var(--theme-text-muted, #667085);
}
@media (max-width: 575.98px) {
    .home-stats-strip { flex-wrap: wrap; }
    .home-stat { flex: 1 1 50%; }
    .home-stat:nth-child(2) { border-right: 0; }
    .home-stat:nth-child(-n+2) { border-bottom: 1px solid var(--theme-border, #e4e7ec); }
}
[data-theme="dark"] .home-stat:hover { background: var(--theme-surface-muted); }
@media (prefers-reduced-motion: reduce) {
    .home-stat { transition: none; }
}

/* ── 4. VENDOR EDITORIAL BAND ─────────────────────────────────────
   Full-bleed spotlight for the top featured vendor. Real data:
   shop_description as the pull-quote, logo, rating, location. */
.vendor-band {
    position: relative;
    display: flex;
    align-items: center;
    min-height: 340px;
    margin: 6px 0 8px;
    overflow: hidden;
    isolation: isolate;
}
.vendor-band__media {
    position: absolute;
    inset: 0;
    z-index: 0;
}
.vendor-band__media img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}
.vendor-band__media::after { content: none; }
.vendor-band__tint {
    position: absolute;
    inset: 0;
    z-index: 1;
    background:
        radial-gradient(90% 120% at 100% 0%, rgba(63,90,169,.38) 0%, transparent 55%),
        linear-gradient(100deg, rgba(11,18,32,.94) 0%, rgba(11,18,32,.72) 52%, rgba(11,18,32,.45) 100%);
}
.vendor-band__inner {
    position: relative;
    z-index: 2;
    width: 100%;
    padding-top: 44px;
    padding-bottom: 44px;
}
.vendor-band__eyebrow {
    display: inline-flex;
    align-items: center;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: .18em;
    text-transform: uppercase;
    color: #8ea3f0;
    margin-bottom: 14px;
}
.vendor-band__quote {
    font-family: var(--font-heading, sans-serif);
    font-size: clamp(1.2rem, 2vw, 1.65rem);
    font-weight: 500;
    line-height: 1.4;
    letter-spacing: 0;
    color: #fff;
    max-width: 46ch;
    margin: 0 0 22px;
}
.vendor-band__meta {
    display: flex;
    align-items: center;
    gap: 14px;
    flex-wrap: wrap;
}
.vendor-band__ava {
    width: 44px;
    height: 44px;
    border-radius: 50%;
    object-fit: cover;
    border: 2px solid rgba(255,255,255,.35);
    flex-shrink: 0;
}
.vendor-band__ava--ico {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: rgba(255,255,255,.14);
    color: #fff;
    font-size: 15px;
}
.vendor-band__who {
    display: flex;
    flex-direction: column;
    min-width: 0;
}
.vendor-band__who b {
    color: #fff;
    font-weight: 700;
    font-size: .98rem;
    line-height: 1.3;
}
.vendor-band__verified { color: #93c5fd; font-size: .8em; margin-left: 4px; }
.vendor-band__who > span {
    color: rgba(255,255,255,.72);
    font-size: 12px;
}
.vendor-band__star { color: #f59e0b; margin-right: 2px; }
.vendor-band__cta {
    margin-left: auto;
    display: inline-flex;
    align-items: center;
    background: rgba(255,255,255,.94);
    color: #172033;
    font-size: .82rem;
    font-weight: 700;
    padding: 9px 18px;
    border-radius: 999px;
    transition: background .15s ease, transform .15s ease;
}
.vendor-band__cta:hover { background: #fff; color: #172033; text-decoration: none; transform: translateY(-1px); }
@media (max-width: 767.98px) {
    .vendor-band { min-height: 300px; }
    .vendor-band__inner { padding-top: 34px; padding-bottom: 34px; }
    .vendor-band__cta { margin-left: 0; }
}
[dir="rtl"] .vendor-band__cta i { transform: scaleX(-1); }
[data-theme="dark"] .vendor-band__tint {
    background:
        radial-gradient(90% 120% at 100% 0%, rgba(147,167,238,.28) 0%, transparent 55%),
        linear-gradient(100deg, rgba(2,6,23,.95) 0%, rgba(2,6,23,.8) 52%, rgba(2,6,23,.55) 100%);
}
@media (prefers-reduced-motion: reduce) {
    .vendor-band__cta { transition: none; }
}

/* ── 5. FEATURES BAR + CATEGORY CARDS SKIN ────────────────────────
   Matches the bento/slim-card language: flat token surfaces, 14px
   radius, soft-tinted accent icons, uppercase micro-labels, one
   consistent hover lift. Loads after custom.css → wins ties. */
.home-feature-card {
    background: var(--theme-surface-raised, #fff);
    border: 1px solid var(--theme-border, #e4e7ec);
    border-radius: 14px;
    box-shadow: none;
    transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease;
}
.home-feature-card:hover {
    transform: translateY(-3px);
    box-shadow: 0 14px 34px rgba(15,23,42,.14);
    border-color: var(--theme-border-strong, #cfd5df);
}
.home-feature-icon {
    width: 44px;
    height: 44px;
    border-radius: 50%;
    background: rgba(63, 90, 169, .12);
    color: var(--theme-accent, #3f5aa9);
    font-size: 1.05rem;
}
.home-feature-title {
    font-weight: 500;
    font-size: .92rem;
    color: var(--theme-text-strong, #111827);
    letter-spacing: 0;
}
[data-theme="dark"] .home-feature-icon {
    background: rgba(147, 167, 238, .16);
    color: var(--theme-accent, #93a7ee);
}

.home-cat-card {
    background: var(--theme-surface-raised, #fff);
    border: 1px solid var(--theme-border, #e4e7ec);
    border-radius: 14px;
    box-shadow: none;
    transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease;
}
.home-cat-card:hover {
    transform: translateY(-3px);
    box-shadow: 0 14px 34px rgba(15,23,42,.14);
    border-color: var(--theme-border-strong, #cfd5df);
}
.home-cat-card:focus-visible {
    outline: 2px solid var(--theme-focus, rgba(63,90,169,.4));
    outline-offset: 2px;
}
.home-feature-card:focus-visible,
.home-cat-card:focus-visible {
    outline: 2px solid var(--theme-focus, rgba(63,90,169,.4));
    outline-offset: 2px;
}
.home-cat-img-wrap {
    background: var(--theme-surface-muted, #f9fafc);
}
.home-cat-name {
    font-weight: 600;
    font-size: .95rem;
    color: var(--theme-text-strong, #111827);
    letter-spacing: 0;
}
.home-cat-count {
    font-size: 10px;
    font-weight: 600;
    letter-spacing: .12em;
    text-transform: uppercase;
    color: var(--theme-text-muted, #667085);
}
[data-theme="dark"] .home-cat-card:hover {
    box-shadow: 0 14px 34px rgba(2,6,23,.55);
}
[data-theme="dark"] .home-feature-card:hover {
    box-shadow: 0 14px 34px rgba(2,6,23,.55);
}
@media (prefers-reduced-motion: reduce) {
    .home-feature-card,
    .home-cat-card { transition: none; }
}

/* ── 6. DARK MODE CONTRAST POLISH ────────────────────────────────
   Vendor cards hardcode light-mode colors (#1d2330 name, #6b7280
   meta) which go near-invisible on the dark card surface. */
[data-theme="dark"] .vendor-card-name { color: var(--theme-text-strong) !important; }
[data-theme="dark"] .vendor-card-owner { color: var(--theme-text-muted) !important; }
[data-theme="dark"] .vendor-meta-item { color: var(--theme-text-muted) !important; }
[data-theme="dark"] .vendor-meta-item i { color: var(--theme-accent, #93a7ee); }
[data-theme="dark"] .vendor-card-desc { color: var(--theme-text-subtle) !important; }
[data-theme="dark"] .vendor-card-footer { border-top-color: var(--theme-border) !important; }
[data-theme="dark"] .vendor-logo-placeholder { color: var(--theme-accent, #93a7ee); }
/* Dark-indigo gradient button blends into the dark card — lighten it. */
[data-theme="dark"] .vendor-visit-btn {
    background: linear-gradient(135deg, #3f5aa9, #5470c2);
    box-shadow: 0 3px 10px rgba(2,6,23,.4);
}

/* ── 7. MOBILE TAP TARGETS (≥44px, WCAG 2.5.5 / Apple HIG) ─────── */
@media (max-width: 575.98px) {
    /* Quick-add is hover-revealed on desktop — useless on touch. */
    .prod-quick-add {
        width: 44px;
        height: 44px;
        font-size: 1rem;
        opacity: 1;
        transform: none;
        bottom: 10px;
        right: 10px;
    }
    /* Wishlist / compare icon buttons on cards. */
    .prod-wishlist-btn {
        min-width: 44px;
        min-height: 44px;
    }
    /* Hero bento pill buttons. */
    .hb-btn { padding: 12px 20px; }
    /* Countdown cells keep numerals comfortable to read/tap-adjacent. */
    .hb-count__cell { min-width: 48px; }
    /* Category marquee pills. */
    .cat-marquee-item { padding: 11px 16px; font-size: 14px; }
    /* Vendor card CTA. */
    .vendor-visit-btn { padding: 12px 16px; }
    /* Stats strip rows get a comfortable touch height. */
    .home-stat { min-height: 60px; }
    /* Keep the floating cart pill clear of the bigger buttons. */
    .owl-carousel-item .prod-quick-add { bottom: 10px; right: 10px; }
}
/* Touch devices without hover: never hide the cart button behind a
   hover gesture, and skip the hover-only lift (sticky on touch). */
@media (hover: none) {
    .prod-quick-add { opacity: 1; transform: none; }
    .modern-prod-card:hover { transform: none; }
    .owl-carousel-item .modern-prod-card:hover { transform: none; }
    .home-cat-card:hover,
    .home-feature-card:hover,
    .hb-tile:hover .hb-tile-media .hb-tile-img { transform: none; }
}