/* =============================================================================
   FAERI Store — storefront stylesheet
   Black & orange brand theme · light content, dark chrome.
   ========================================================================== */

:root {
    --ink: #18181b;
    --bg: #f5f6f8;
    --surface: #ffffff;
    --surface-2: #f0f1f4;
    --line: #e4e5ea;
    --muted: #6b6b75;
    --dark: #0e0e10;
    --dark-2: #1b1b20;
    --dark-3: #2a2a31;
    --accent: #f47a1f;
    --accent-600: #e06a12;
    --accent-tint: #fff3e9;
    --success: #1f9d57;
    --error: #d13b3b;
    --info: #2b6cb0;
    --warning: #b7791f;
    --radius: 12px;
    --radius-sm: 8px;
    --shadow: 0 1px 3px rgba(16,16,20,.06), 0 8px 24px rgba(16,16,20,.06);
    --shadow-sm: 0 1px 2px rgba(16,16,20,.08);
    --maxw: 1200px;
    --font: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
    --font-brand: "Montserrat", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
}

/* ---- Reset / base ---- */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
body {
    margin: 0;
    font-family: var(--font);
    color: var(--ink);
    background: var(--bg);
    line-height: 1.55;
    -webkit-font-smoothing: antialiased;
}
img { max-width: 100%; height: auto; display: block; }
a { color: inherit; text-decoration: none; }
h1, h2, h3, h4 { line-height: 1.2; margin: 0 0 .5em; }
button { font: inherit; cursor: pointer; }
input, select, textarea { font: inherit; }

/* Full-bleed: content spans the full viewport width on every device, with only
   a small responsive gutter so it isn't flush against the screen edges. */
.container { width: 100%; max-width: 100%; margin: 0 auto; padding: 0 clamp(16px, 3vw, 36px); }
.muted { color: var(--muted); }
.free { color: var(--success); font-weight: 700; }
.page-title { font-size: clamp(1.5rem, 3vw, 2rem); margin: 1.5rem 0; }
.site-main { min-height: 60vh; padding-bottom: 3rem; }
.skip-link {
    position: absolute; left: -9999px; top: 0; background: var(--accent); color: #fff;
    padding: .6rem 1rem; z-index: 100; border-radius: 0 0 8px 0;
}
.skip-link:focus { left: 0; }

/* ---- Buttons ---- */
.btn {
    display: inline-flex; align-items: center; justify-content: center; gap: .5rem;
    border: 1px solid transparent; border-radius: var(--radius-sm); padding: .6rem 1.1rem;
    font-weight: 600; font-size: .95rem; transition: background .15s, transform .05s, border-color .15s;
    text-align: center; white-space: nowrap;
}
.btn:active { transform: translateY(1px); }
.btn--primary { background: var(--accent); color: #fff; }
.btn--primary:hover { background: var(--accent-600); }
.btn--ghost { background: transparent; color: var(--ink); border-color: var(--line); }
.btn--ghost:hover { border-color: var(--accent); color: var(--accent); }
.btn--block { width: 100%; }
.btn--lg { padding: .85rem 1.5rem; font-size: 1.02rem; }
.btn--sm { padding: .35rem .7rem; font-size: .85rem; }
.btn[disabled] { opacity: .55; cursor: not-allowed; }

.link { color: var(--accent-600); font-weight: 600; }
.link:hover { text-decoration: underline; }
.link--danger { color: var(--error); background: none; border: 0; padding: 0; }
.link--center { display: block; text-align: center; margin-top: .8rem; }

/* ---- Alerts / flash ---- */
.flash-stack { margin: 1rem 0; display: grid; gap: .6rem; }
.alert {
    display: flex; justify-content: space-between; align-items: center; gap: 1rem;
    padding: .8rem 1rem; border-radius: var(--radius-sm); border: 1px solid; font-size: .95rem;
}
.alert--success { background: #eafaf0; border-color: #b9e7cb; color: #14663b; }
.alert--error   { background: #fdecec; border-color: #f3c0c0; color: #9c2424; }
.alert--info    { background: #eaf2fb; border-color: #bcd6f0; color: #1d4e80; }
.alert--warning { background: #fff6e6; border-color: #f0dcb0; color: #8a5e12; }
.alert__close { background: none; border: 0; font-size: 1.3rem; line-height: 1; color: inherit; opacity: .6; }
.alert__close:hover { opacity: 1; }

/* =============================================================================
   Header
   ========================================================================== */
.site-header { position: sticky; top: 0; z-index: 50; background: var(--dark); }

.masthead { background: var(--dark-2); color: #fff; }
.masthead__inner { display: flex; align-items: center; gap: 1.5rem; height: 76px; }
.brand { display: flex; align-items: center; gap: .7rem; flex-shrink: 0; }
.brand__logo {
    width: 60px; height: 60px; border-radius: 50%;
    /* High-res source (1625px) is downscaled here, so it stays crisp on HiDPI. */
    image-rendering: -webkit-optimize-contrast;
    filter: drop-shadow(0 2px 6px rgba(16,16,20,.25));
    animation: logo-float 5s ease-in-out infinite;
    will-change: transform;
}
.brand:hover .brand__logo { animation-play-state: paused; transform: scale(1.05) rotate(-3deg); transition: transform .3s; }
.brand__text { display: flex; flex-direction: column; line-height: 1.15; }
.brand__name { font-family: var(--font-brand); font-weight: 800; font-size: 1.25rem; letter-spacing: .4px; }
.brand__sub {
    font-family: var(--font-brand); font-weight: 600; font-size: .68rem;
    color: var(--accent); text-transform: uppercase; letter-spacing: 1.8px;
}

/* Subtle continuous logo motion: a gentle float with a soft glow pulse. */
@keyframes logo-float {
    0%, 100% { transform: translateY(0); filter: drop-shadow(0 2px 6px rgba(16,16,20,.25)); }
    50%      { transform: translateY(-4px); filter: drop-shadow(0 6px 12px rgba(244,122,31,.45)); }
}
@media (prefers-reduced-motion: reduce) {
    .brand__logo { animation: none; }
}

.search { flex: 1; display: flex; max-width: 560px; margin: 0 auto; }
.search input {
    flex: 1; border: 1px solid var(--dark-3); border-right: 0; background: #101014; color: #fff;
    padding: .65rem 1rem; border-radius: 8px 0 0 8px; outline: none;
}
.search input::placeholder { color: #8a8a94; }
.search input:focus { border-color: var(--accent); }
.search button {
    background: var(--accent); color: #fff; border: 0; padding: 0 1rem; border-radius: 0 8px 8px 0;
    display: grid; place-items: center;
}
.search button:hover { background: var(--accent-600); }

/* ---- Animated search field: pulsing glow border + focus dim/blur overlay ----
   The field sits above a soft gradient glow that pulses via OPACITY only, so the
   animation lives on the compositor (no per-frame layout or paint) — smooth and
   free of any Core Web Vitals / rendering cost. */
.search input, .search button { position: relative; z-index: 1; }
.search::before {
    content: ""; position: absolute; inset: -3px; z-index: 0; pointer-events: none;
    border-radius: 11px;
    background: linear-gradient(120deg, var(--accent), #22d3ee 55%, var(--accent));
    filter: blur(6px); opacity: .3; will-change: opacity;
    animation: search-glow 3s ease-in-out infinite;
}
@keyframes search-glow { 0%, 100% { opacity: .22; } 50% { opacity: .55; } }
/* Focus: a brighter, quicker pulse to spotlight the field. */
.search:focus-within::before { animation: search-glow-focus 1.6s ease-in-out infinite; }
@keyframes search-glow-focus { 0%, 100% { opacity: .7; } 50% { opacity: 1; } }

/* Dim the page while the search is focused. A fixed layer that sits BELOW the
   sticky header (z-50) and above all page content (<40), so the header, the search
   field and its suggestions stay crisp while everything behind recedes.
   Deliberately a plain translucent fill (no backdrop-filter): a full-viewport blur
   would have to re-sample and re-blur the animated hero every frame for as long as
   the field stayed focused. A solid alpha fill composites once and is never
   re-sampled — same "recede" effect, zero per-frame GPU cost. The one-off opacity
   fade is compositor-friendly on its own, so no permanent will-change layer either. */
.search-overlay {
    position: fixed; inset: 0; z-index: 40; pointer-events: none;
    background: rgba(8, 8, 12, .62);
    opacity: 0; transition: opacity .25s ease;
}
.search-overlay.is-active { opacity: 1; pointer-events: auto; }

@media (prefers-reduced-motion: reduce) {
    /* Keep a static glow (still a glowing border, just no pulse) and no fade. */
    .search::before { animation: none; opacity: .3; }
    .search:focus-within::before { animation: none; opacity: .55; }
    .search-overlay { transition: none; }
}

/* Search autocomplete dropdown ------------------------------------------- */
.search { position: relative; }
.search-suggest {
    position: absolute; top: calc(100% + 6px); left: 0; right: 0; z-index: 80;
    background: var(--dark-2); border: 1px solid var(--dark-3); border-radius: 12px;
    box-shadow: 0 18px 44px rgba(0,0,0,.45); padding: .3rem;
    max-height: min(70vh, 460px); overflow-y: auto; overscroll-behavior: contain;
}
.search-suggest[hidden] { display: none; }
.search-suggest__group {
    font-size: .68rem; font-weight: 700; text-transform: uppercase; letter-spacing: 1.4px;
    color: #8a8a94; padding: .55rem .7rem .3rem;
}
.search-suggest__item {
    display: flex; align-items: center; gap: .7rem; padding: .5rem .7rem;
    border-radius: 9px; color: #e8e8ee;
}
.search-suggest__item.is-active { background: rgba(255,255,255,.08); }
.search-suggest__thumb {
    width: 40px; height: 40px; border-radius: 8px; object-fit: cover;
    flex-shrink: 0; background: #101014;
}
.search-suggest__icon {
    width: 40px; height: 40px; border-radius: 8px; flex-shrink: 0; display: grid;
    place-items: center; background: rgba(244,122,31,.12); color: var(--accent);
}
.search-suggest__text { display: flex; flex-direction: column; min-width: 0; flex: 1; }
.search-suggest__name, .search-suggest__sub { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.search-suggest__name { font-size: .92rem; }
.search-suggest__sub { font-size: .76rem; color: #8a8a94; }
.search-suggest__price { font-weight: 700; font-size: .88rem; color: #fff; flex-shrink: 0; }
.search-suggest__meta {
    font-size: .72rem; color: #b9b9c2; background: rgba(255,255,255,.06);
    padding: .12rem .5rem; border-radius: 20px; flex-shrink: 0;
}
.search-suggest mark { background: transparent; color: var(--accent); font-weight: 700; }
.search-suggest__empty { padding: .9rem .7rem; color: #8a8a94; font-size: .9rem; }
.search-suggest__all {
    display: block; width: 100%; text-align: left; background: none; cursor: pointer;
    border: 0; border-top: 1px solid var(--dark-3); margin-top: .25rem; padding: .65rem .7rem;
    color: var(--accent); font-weight: 600; font-size: .85rem;
}
.search-suggest__all:hover { background: rgba(255,255,255,.06); }

.masthead__actions { display: flex; align-items: center; gap: .4rem; }
.icon-btn {
    position: relative; display: grid; place-items: center; width: 44px; height: 44px;
    border-radius: 10px; color: #fff; border: 0; background: transparent;
}
.icon-btn:hover { background: rgba(255,255,255,.08); color: var(--accent); }
.icon-btn--danger { color: var(--error); width: 36px; height: 36px; }
.icon-btn--danger:hover { background: #fdecec; }
.cart-count {
    position: absolute; top: 4px; right: 4px; background: var(--accent); color: #fff;
    font-size: .68rem; font-weight: 700; min-width: 18px; height: 18px; border-radius: 9px;
    display: grid; place-items: center; padding: 0 4px;
}
.cart-count[hidden] { display: none; }

.account-menu { position: relative; }
.account-menu__dropdown {
    position: absolute; top: calc(100% + 8px); right: 0; min-width: 180px; z-index: 60;
    background: var(--dark-2); border: 1px solid var(--dark-3); border-radius: 10px;
    box-shadow: 0 12px 34px rgba(0,0,0,.4); padding: .35rem; overflow: hidden;
}
.account-menu__dropdown[hidden] { display: none; }
.account-menu__item {
    display: block; padding: .6rem .85rem; color: #cfcfd6; font-size: .9rem;
    font-weight: 500; border-radius: 7px;
}
.account-menu__item:hover { background: rgba(255,255,255,.08); color: var(--accent); }

.nav-toggle { display: none; flex-direction: column; gap: 5px; background: none; border: 0; padding: 8px; }
.nav-toggle span { width: 24px; height: 2px; background: #fff; border-radius: 2px; }

/* Slim category bar: a single "Shop by Category" mega-menu button + a few
   quick links, instead of a full always-on category list. */
.primary-nav { background: var(--dark); margin-top: 6px; }
.primary-nav__bar { display: flex; align-items: stretch; gap: 1.5rem; }

.cat-menu { position: relative; display: flex; }
.cat-menu__btn {
    display: inline-flex; align-items: center; gap: .55rem;
    background: var(--accent); color: #fff; border: 0; cursor: pointer;
    font-weight: 700; font-size: .92rem; letter-spacing: .2px; padding: .8rem 1.2rem;
}
.cat-menu__btn:hover { background: var(--accent-600); }
.cat-menu__bars { display: inline-flex; flex-direction: column; gap: 3px; }
.cat-menu__bars span { width: 16px; height: 2px; background: #fff; border-radius: 2px; }
.cat-menu__caret { font-size: .7rem; opacity: .85; transition: transform .15s; }
.cat-menu__btn[aria-expanded="true"] .cat-menu__caret { transform: rotate(180deg); }

.cat-menu__panel {
    position: absolute; top: calc(100% + 6px); left: 0; z-index: 70;
    width: min(720px, 94vw);
    background: var(--surface); color: var(--ink);
    border: 1px solid var(--line); border-top: 3px solid var(--accent);
    border-radius: 0 0 14px 14px; box-shadow: 0 24px 50px rgba(16,16,20,.18);
    padding: 1rem; max-height: 74vh; overflow-y: auto;
    animation: catPanelIn .16s ease-out;
}
@keyframes catPanelIn {
    from { opacity: 0; transform: translateY(-6px); }
    to   { opacity: 1; transform: translateY(0); }
}
.cat-menu__panel[hidden] { display: none; }

/* Constrained mega-menu: a grid of main-category image tiles. Each links
   straight to its category page — no in-menu submenu expansion. */
.cat-mega {
    list-style: none; margin: 0; padding: 0;
    display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: .8rem;
}
.cat-mega__card {
    display: flex; flex-direction: column; gap: .5rem;
    color: var(--ink); font-weight: 600; font-size: .9rem;
}
.cat-mega__name { line-height: 1.25; transition: color .12s; }
.cat-mega__card:hover .cat-mega__name { color: var(--accent-600); }

/* Shared category visual (mega-menu tiles + sub-category cards). The image
   is cropped to a fixed ratio so the grid stays even and never shifts. */
.cat-media {
    display: block; position: relative; aspect-ratio: 16 / 10; overflow: hidden;
    border-radius: 11px; border: 1px solid var(--line);
    background: linear-gradient(135deg, var(--accent-tint), #fff);
}
.cat-media__img {
    width: 100%; height: 100%; object-fit: cover; display: block;
    transition: transform .3s ease;
}
.cat-mega__card:hover .cat-media__img,
.subcat-card:hover .cat-media__img { transform: scale(1.06); }
.cat-media__fallback {
    position: absolute; inset: 0; display: flex; align-items: center; justify-content: center;
    color: var(--accent); font-size: 1.9rem;
}

.primary-nav__quick { list-style: none; display: flex; flex-wrap: wrap; gap: .15rem; margin: 0; padding: 0; }
.primary-nav__quick a {
    display: block; padding: .8rem .9rem; color: #cfcfd6; font-size: .9rem; font-weight: 500;
    border-bottom: 2px solid transparent;
}
.primary-nav__quick a:hover { color: #fff; border-color: var(--accent); }

/* =============================================================================
   Hero + sections
   ========================================================================== */
.hero {
    --slide-accent: var(--accent);
    position: relative; isolation: isolate; color: #fff;
    background:
        radial-gradient(120% 120% at 82% -10%, #1a1a22 0%, var(--dark) 58%),
        var(--dark);
}
/* Base eyebrow (also used standalone on the About page). */
.hero__eyebrow { color: var(--accent); text-transform: uppercase; letter-spacing: 2px; font-size: .78rem; font-weight: 700; margin: 0 0 .6rem; }
/* Futuristic pill treatment, scoped to the hero slider so other pages keep the plain eyebrow. */
.hero .hero__eyebrow {
    display: inline-flex; align-items: center; gap: .55rem;
    color: #fff; letter-spacing: 2.5px; font-size: .72rem;
    margin: 0 0 1rem; padding: .42rem .8rem;
    border: 1px solid color-mix(in srgb, var(--slide-accent) 45%, transparent);
    border-radius: 999px; background: color-mix(in srgb, var(--slide-accent) 14%, transparent);
    backdrop-filter: blur(6px);
}
.hero__pulse {
    width: 8px; height: 8px; border-radius: 50%; background: var(--slide-accent);
    box-shadow: 0 0 0 0 color-mix(in srgb, var(--slide-accent) 70%, transparent);
    animation: hero-pulse 1.8s ease-out infinite;
}
@keyframes hero-pulse {
    0%   { box-shadow: 0 0 0 0 color-mix(in srgb, var(--slide-accent) 65%, transparent); }
    100% { box-shadow: 0 0 0 10px transparent; }
}
.hero__title {
    font-family: var(--font-brand); font-size: clamp(2.1rem, 5.2vw, 3.6rem);
    margin: 0 0 .7rem; letter-spacing: -1.2px; line-height: 1.05;
    background: linear-gradient(180deg, #fff 30%, #b9b9c6 100%);
    -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent;
}
.hero__text { color: #c3c3cc; max-width: 48ch; margin: 0 0 1.3rem; font-size: 1.02rem; }
.hero__chips { list-style: none; display: flex; flex-wrap: wrap; gap: .5rem; margin: 0 0 1.5rem; padding: 0; }
.hero__chip {
    display: inline-flex; align-items: center; gap: .4rem;
    font-size: .8rem; font-weight: 600; color: #e7e7ee;
    padding: .4rem .75rem; border-radius: 8px;
    background: rgba(255,255,255,.05); border: 1px solid rgba(255,255,255,.1);
}
.hero__chip i { font-size: .62rem; color: var(--slide-accent); }
.hero__actions { display: flex; flex-wrap: wrap; gap: .8rem; }
/* Ghost button on the dark hero: the base ghost uses dark ink (invisible here),
   so give it light text + a light border, accenting to the slide hue on hover. */
.hero .btn--ghost { color: #fff; border-color: rgba(255,255,255,.3); }
.hero .btn--ghost:hover { color: var(--slide-accent); border-color: var(--slide-accent); background: rgba(255,255,255,.06); }
@keyframes float { 0%,100% { transform: translateY(0); } 50% { transform: translateY(-12px); } }

/* ---- Futuristic backdrop (grid + aurora + scanline) ---- */
.hero-fx { position: absolute; inset: 0; z-index: 0; overflow: hidden; pointer-events: none; }
.hero-fx__grid {
    position: absolute; inset: -2px;
    background-image:
        linear-gradient(rgba(255,255,255,.05) 1px, transparent 1px),
        linear-gradient(90deg, rgba(255,255,255,.05) 1px, transparent 1px);
    background-size: 46px 46px;
    -webkit-mask-image: radial-gradient(120% 90% at 70% 0%, #000 35%, transparent 78%);
            mask-image: radial-gradient(120% 90% at 70% 0%, #000 35%, transparent 78%);
    animation: hero-grid-pan 22s linear infinite;
}
@keyframes hero-grid-pan { from { background-position: 0 0; } to { background-position: 46px 46px; } }
.hero-fx__aurora {
    position: absolute; width: 46vw; height: 46vw; max-width: 620px; max-height: 620px;
    border-radius: 50%; filter: blur(70px); opacity: .55; mix-blend-mode: screen;
}
.hero-fx__aurora--1 {
    top: -16%; right: -6%;
    background: radial-gradient(circle, var(--slide-accent), transparent 62%);
    animation: hero-drift-a 18s ease-in-out infinite;
}
.hero-fx__aurora--2 {
    bottom: -28%; left: -4%;
    background: radial-gradient(circle, #2563eb, transparent 64%);
    animation: hero-drift-b 24s ease-in-out infinite;
}
@keyframes hero-drift-a { 0%,100% { transform: translate(0,0) scale(1); } 50% { transform: translate(-5%,7%) scale(1.12); } }
@keyframes hero-drift-b { 0%,100% { transform: translate(0,0) scale(1); } 50% { transform: translate(6%,-5%) scale(1.1); } }
.hero-fx__scan {
    position: absolute; inset: 0;
    background: repeating-linear-gradient(0deg, transparent 0 3px, rgba(0,0,0,.18) 3px 4px);
    opacity: .25;
}

/* ---- Hero slider ---- */
.hero-slider { position: relative; overflow: hidden; }
.hero-slider__track { position: relative; z-index: 1; }
.hero-slide {
    position: absolute; inset: 0; opacity: 0; visibility: hidden;
    transition: opacity .7s ease; pointer-events: none;
}
.hero-slide.is-active { position: relative; opacity: 1; visibility: visible; pointer-events: auto; }
.hero-slide__inner {
    display: grid; grid-template-columns: 1.15fr .85fr; align-items: center;
    gap: 2.4rem; padding: clamp(3rem, 6vw, 5rem) 20px clamp(4rem, 7vw, 6rem);
}
/* Slide copy rises + fades in, element by element, when its slide activates. */
.hero-slide.is-active .hero-slide__copy > * { animation: hero-rise .65s cubic-bezier(.2,.7,.2,1) both; }
.hero-slide.is-active .hero-slide__copy > *:nth-child(2) { animation-delay: .07s; }
.hero-slide.is-active .hero-slide__copy > *:nth-child(3) { animation-delay: .14s; }
.hero-slide.is-active .hero-slide__copy > *:nth-child(4) { animation-delay: .21s; }
.hero-slide.is-active .hero-slide__copy > *:nth-child(5) { animation-delay: .28s; }
@keyframes hero-rise { from { opacity: 0; transform: translateY(18px); } to { opacity: 1; transform: translateY(0); } }

/* ---- Orbiting "reactor" art ---- */
.hero-slide__art { position: relative; display: grid; place-items: center; min-height: 340px; }
.hero-orb { position: relative; width: clamp(220px, 26vw, 320px); aspect-ratio: 1; display: grid; place-items: center; }
.hero-orb__ring {
    position: absolute; inset: 0; border-radius: 50%;
    border: 1px solid color-mix(in srgb, var(--slide-accent) 30%, transparent);
}
.hero-orb__ring--1 { animation: hero-spin 16s linear infinite; }
.hero-orb__ring--2 {
    inset: 13%; border-style: dashed;
    border-color: color-mix(in srgb, var(--slide-accent) 45%, transparent);
    animation: hero-spin 11s linear infinite reverse;
}
.hero-orb__ring--3 {
    inset: 26%; border-width: 2px;
    border-color: color-mix(in srgb, var(--slide-accent) 22%, transparent);
    border-top-color: var(--slide-accent); border-right-color: var(--slide-accent);
    animation: hero-spin 7s linear infinite;
}
/* A bright satellite riding the outer ring. */
.hero-orb__ring--1::before {
    content: ""; position: absolute; top: -5px; left: 50%; width: 10px; height: 10px;
    margin-left: -5px; border-radius: 50%; background: var(--slide-accent);
    box-shadow: 0 0 16px 3px var(--slide-accent);
}
.hero-orb__glow {
    position: absolute; inset: 30%; border-radius: 50%;
    background: radial-gradient(circle, color-mix(in srgb, var(--slide-accent) 55%, transparent), transparent 70%);
    filter: blur(14px); animation: hero-breathe 5s ease-in-out infinite;
}
.hero-orb__icon {
    position: relative; z-index: 1; font-size: clamp(3.4rem, 8vw, 6rem); line-height: 1;
    color: #fff;
    /* Plain gradient (no color-mix) so the icon is never invisible on browsers
       that lack color-mix — the shorthand stays valid and the fill applies. */
    background-image: linear-gradient(150deg, #fff, var(--slide-accent));
    -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent;
    filter: drop-shadow(0 10px 30px color-mix(in srgb, var(--slide-accent) 45%, transparent));
    animation: float 6s ease-in-out infinite;
}
.hero-orb__tag {
    position: absolute; bottom: 4%; left: 50%; transform: translateX(-50%);
    display: inline-flex; align-items: center; gap: .45rem; white-space: nowrap;
    font-size: .64rem; font-weight: 700; letter-spacing: 1.5px; color: #d7d7e0;
    padding: .35rem .7rem; border-radius: 999px;
    background: rgba(10,10,14,.6); border: 1px solid rgba(255,255,255,.12); backdrop-filter: blur(6px);
}
.hero-orb__dot { width: 6px; height: 6px; border-radius: 50%; background: var(--slide-accent); box-shadow: 0 0 8px var(--slide-accent); }
@keyframes hero-spin { to { transform: rotate(360deg); } }
@keyframes hero-breathe { 0%,100% { opacity: .65; transform: scale(1); } 50% { opacity: 1; transform: scale(1.08); } }

/* HUD corner brackets framing the art. */
.hero-art__corner { position: absolute; width: 26px; height: 26px; border: 2px solid color-mix(in srgb, var(--slide-accent) 55%, transparent); }
.hero-art__corner--tl { top: 6%; left: 8%; border-right: 0; border-bottom: 0; }
.hero-art__corner--tr { top: 6%; right: 8%; border-left: 0; border-bottom: 0; }
.hero-art__corner--bl { bottom: 8%; left: 8%; border-right: 0; border-top: 0; }
.hero-art__corner--br { bottom: 8%; right: 8%; border-left: 0; border-top: 0; }

/* Prev / next arrows */
.hero-slider__nav {
    position: absolute; top: 46%; transform: translateY(-50%);
    width: 46px; height: 46px; display: grid; place-items: center;
    border: 1px solid rgba(255,255,255,.25); border-radius: 50%;
    background: rgba(255,255,255,.07); color: #fff; cursor: pointer;
    backdrop-filter: blur(6px); transition: background .15s, border-color .15s, transform .15s; z-index: 3;
}
.hero-slider__nav:hover { background: var(--slide-accent); border-color: var(--slide-accent); transform: translateY(-50%) scale(1.08); }
.hero-slider__nav--prev { left: clamp(10px, 2vw, 26px); }
.hero-slider__nav--next { right: clamp(10px, 2vw, 26px); }
/* Where the edge arrows are visible (>860px), inset the slide content so the
   arrows sit in a clear side gutter instead of overlapping the copy — and give
   the left copy generous breathing room from the edge for readability. Below
   860px the arrows are hidden (dots + swipe drive the slider) and the mobile
   padding is left untouched. Pure CSS, so there is no performance cost. */
@media (min-width: 861px) {
    .hero-slide__inner {
        padding-left: clamp(80px, 8vw, 100px);
        padding-right: clamp(76px, 6.5vw, 92px);
    }
    .hero-slider__nav--prev { left: clamp(12px, 1.6vw, 24px); }
    .hero-slider__nav--next { right: clamp(12px, 1.6vw, 24px); }
}

/* Control bar: counter · dots · progress */
.hero-slider__bar {
    position: absolute; left: 0; right: 0; bottom: clamp(14px, 2.4vw, 26px); z-index: 3;
    display: flex; align-items: center; gap: 1.2rem;
}
.hero-slider__count { font-size: .82rem; font-weight: 600; color: #9a9aa6; letter-spacing: 1px; font-variant-numeric: tabular-nums; }
.hero-slider__count em { color: #fff; font-style: normal; font-size: 1.05rem; }
.hero-slider__dots { display: flex; gap: .5rem; }
.hero-slider__dot {
    width: 11px; height: 11px; padding: 0; border: 0; border-radius: 50%;
    background: rgba(255,255,255,.28); cursor: pointer; transition: background .2s, width .2s, border-radius .2s;
}
.hero-slider__dot:hover { background: rgba(255,255,255,.55); }
.hero-slider__dot.is-active { background: var(--slide-accent); width: 30px; border-radius: 6px; box-shadow: 0 0 12px color-mix(in srgb, var(--slide-accent) 60%, transparent); }
.hero-slider__progress { flex: 1; height: 2px; border-radius: 2px; background: rgba(255,255,255,.14); overflow: hidden; }
.hero-slider__progress-fill { display: block; width: 0; height: 100%; border-radius: 2px;
    background: linear-gradient(90deg, transparent, var(--slide-accent)); }
@keyframes hero-progress { from { width: 0; } to { width: 100%; } }

@media (prefers-reduced-motion: reduce) {
    .hero-slide { transition: none; }
    .hero-fx__grid, .hero-fx__aurora, .hero-orb__ring, .hero-orb__glow, .hero-orb__icon, .hero__pulse,
    .hero-slide.is-active .hero-slide__copy > * { animation: none; }
    .hero-slider__progress-fill { transition: none; }
}

/* ---- Product hero slide (auto-generated from products & offers) ---- */
.hero__brand {
    text-transform: uppercase; letter-spacing: 2px; font-size: .72rem; font-weight: 700;
    color: var(--slide-accent); margin: 0 0 .5rem;
}
.hero__title--product {
    font-size: clamp(1.7rem, 3.6vw, 2.9rem); letter-spacing: -.5px; line-height: 1.12;
    /* Solid, high-contrast fill — product names can be long, so skip the clipped
       gradient the marketing hero uses and clamp to two lines. */
    background: none; -webkit-text-fill-color: #fff; color: #fff;
    display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}
.hero__price { display: flex; align-items: baseline; flex-wrap: wrap; gap: .5rem .8rem; margin: 0 0 .4rem; }
.hero__price-now { font-size: clamp(1.6rem, 3vw, 2.2rem); font-weight: 800; color: #fff; letter-spacing: -.5px; }
.hero__price-was { font-size: 1.05rem; color: #9a9aa6; text-decoration: line-through; }
.hero__price-off {
    font-size: .8rem; font-weight: 800; letter-spacing: .5px; color: #fff;
    padding: .28rem .55rem; border-radius: 7px; background: var(--slide-accent);
    box-shadow: 0 6px 18px color-mix(in srgb, var(--slide-accent) 45%, transparent);
}
.hero__save {
    margin: 0 0 1.3rem; font-size: .9rem; font-weight: 600;
    color: color-mix(in srgb, var(--slide-accent) 70%, #fff);
}

/* Product image showcase (right side of the slide) */
.hero-slide__showcase { position: relative; display: grid; place-items: center; min-height: 340px; }
.hero-product {
    position: relative; display: grid; place-items: center;
    width: clamp(240px, 30vw, 380px); aspect-ratio: 1;
    padding: clamp(1rem, 2.4vw, 2rem); border-radius: 22px;
    background:
        radial-gradient(120% 120% at 50% 0%, color-mix(in srgb, var(--slide-accent) 16%, transparent), transparent 62%),
        rgba(255,255,255,.04);
    border: 1px solid color-mix(in srgb, var(--slide-accent) 24%, rgba(255,255,255,.08));
    box-shadow: 0 30px 70px rgba(0,0,0,.45); backdrop-filter: blur(4px);
    transition: transform .3s ease, box-shadow .3s ease;
}
.hero-product:hover { transform: translateY(-4px); box-shadow: 0 40px 90px rgba(0,0,0,.55); }
.hero-product__glow {
    position: absolute; inset: 12% 12% 6%; border-radius: 50%; z-index: 0;
    background: radial-gradient(circle, color-mix(in srgb, var(--slide-accent) 45%, transparent), transparent 70%);
    filter: blur(30px); animation: hero-breathe 5s ease-in-out infinite;
}
.hero-product picture { display: contents; }
.hero-product__img {
    position: relative; z-index: 1; width: auto; height: auto;
    max-width: 100%; max-height: clamp(190px, 26vw, 300px);
    object-fit: contain; border-radius: 12px;
    filter: drop-shadow(0 18px 34px rgba(0,0,0,.5));
    animation: float 6s ease-in-out infinite;
}
.hero-product__badge {
    position: absolute; top: -14px; right: -14px; z-index: 2;
    display: grid; place-items: center; text-align: center; line-height: 1;
    min-width: 62px; height: 62px; padding: .5rem; border-radius: 50%;
    font-size: 1.15rem; font-weight: 800; color: #fff; background: var(--slide-accent);
    border: 2px solid rgba(255,255,255,.25);
    box-shadow: 0 10px 26px color-mix(in srgb, var(--slide-accent) 55%, transparent);
}
.hero-product__badge small { display: block; font-size: .55rem; letter-spacing: 1.5px; font-weight: 700; opacity: .9; }

@media (max-width: 1024px) {
    /* Stack: image above the copy, matching the marketing hero's tablet layout. */
    .hero-slide__showcase { order: -1; min-height: 0; }
    .hero-product { width: clamp(200px, 42vw, 280px); }
}
@media (max-width: 560px) {
    /* Keep the product image visible on phones (it's the point of the slide) — just
       smaller — unlike the decorative orb art, which is hidden to reclaim space. */
    .hero-product { width: min(62vw, 240px); }
    .hero-product__badge { min-width: 52px; height: 52px; font-size: 1rem; }
}
@media (prefers-reduced-motion: reduce) {
    .hero-product__img, .hero-product__glow { animation: none; }
}

.section { padding: 2.5rem 0; }
.section--alt { background: var(--surface-2); }
.section__head { display: flex; justify-content: space-between; align-items: baseline; margin-bottom: 1.4rem; }
.section__title { font-size: clamp(1.3rem, 2.5vw, 1.7rem); margin: 0; }
.section__link { color: var(--accent-600); font-weight: 600; }
.section__link:hover { text-decoration: underline; }

/* ---- Promotions ---- */
.promo-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.2rem; }
.promo {
    --promo-accent: var(--accent);
    position: relative; overflow: hidden; display: flex; flex-direction: column;
    background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius);
    padding: 1.5rem; transition: border-color .15s, transform .15s, box-shadow .15s;
}
/* Soft accent wash in the corner + a top accent bar that grows on hover. */
.promo::before {
    content: ""; position: absolute; top: 0; right: 0; width: 160px; height: 160px;
    background: radial-gradient(circle at top right, color-mix(in srgb, var(--promo-accent) 22%, transparent), transparent 70%);
    pointer-events: none;
}
.promo::after {
    content: ""; position: absolute; left: 0; top: 0; height: 4px; width: 100%;
    background: linear-gradient(90deg, var(--promo-accent), transparent);
    transform: scaleX(0); transform-origin: left; transition: transform .3s ease;
}
.promo:hover { border-color: color-mix(in srgb, var(--promo-accent) 60%, var(--line)); transform: translateY(-4px); box-shadow: var(--shadow); }
.promo:hover::after { transform: scaleX(1); }
.promo__top { display: flex; align-items: center; justify-content: space-between; margin-bottom: 1.1rem; position: relative; }
.promo__icon {
    width: 50px; height: 50px; border-radius: 14px; display: grid; place-items: center; font-size: 1.4rem;
    color: var(--promo-accent);
    background: color-mix(in srgb, var(--promo-accent) 14%, transparent);
    border: 1px solid color-mix(in srgb, var(--promo-accent) 30%, transparent);
}
.promo__badge {
    font-size: .68rem; font-weight: 700; text-transform: uppercase; letter-spacing: 1px;
    color: var(--promo-accent); padding: .3rem .6rem; border-radius: 999px;
    background: color-mix(in srgb, var(--promo-accent) 12%, transparent);
    border: 1px solid color-mix(in srgb, var(--promo-accent) 26%, transparent);
}
.promo__kicker { margin: 0 0 .2rem; font-size: .82rem; font-weight: 600; color: var(--muted); text-transform: uppercase; letter-spacing: .6px; }
.promo__title { margin: 0 0 .5rem; font-family: var(--font-brand); font-size: clamp(1.5rem, 3vw, 1.9rem); letter-spacing: -.5px; }
.promo__text { margin: 0 0 1.3rem; color: var(--muted); font-size: .92rem; line-height: 1.55; }
.promo__foot { margin-top: auto; display: flex; align-items: center; justify-content: space-between; gap: .8rem; flex-wrap: wrap; }
.promo__code {
    display: inline-flex; align-items: center; gap: .45rem; cursor: pointer;
    font-family: ui-monospace, "SF Mono", Menlo, Consolas, monospace; font-weight: 700; font-size: .9rem;
    color: var(--ink); padding: .5rem .7rem; border-radius: var(--radius-sm);
    background: var(--surface-2); border: 1px dashed color-mix(in srgb, var(--promo-accent) 55%, var(--line));
    transition: background .15s, border-color .15s, color .15s;
}
.promo__code i { color: var(--promo-accent); }
.promo__code:hover { background: color-mix(in srgb, var(--promo-accent) 12%, var(--surface-2)); }
.promo__code-hint { font-family: var(--font); font-weight: 600; font-size: .72rem; color: var(--muted); text-transform: uppercase; letter-spacing: .5px; }
.promo__code.is-copied { border-style: solid; border-color: var(--success); color: var(--success); }
.promo__code.is-copied i { color: var(--success); }
.promo__code.is-copied .promo__code-hint { color: var(--success); }

/* ---- Advertisement billboard ---- */
.ad-banner {
    position: relative; isolation: isolate; overflow: hidden; border-radius: 18px;
    display: grid; grid-template-columns: 1.5fr .9fr; align-items: center; gap: 1.5rem;
    padding: clamp(2rem, 4vw, 3.2rem); color: #fff;
    background: radial-gradient(120% 130% at 85% 10%, #232330 0%, var(--dark) 60%), var(--dark);
    border: 1px solid rgba(255,255,255,.08);
}
.ad-banner__fx { position: absolute; inset: 0; z-index: -1; pointer-events: none; }
.ad-banner__grid {
    position: absolute; inset: 0;
    background-image:
        linear-gradient(rgba(255,255,255,.05) 1px, transparent 1px),
        linear-gradient(90deg, rgba(255,255,255,.05) 1px, transparent 1px);
    background-size: 42px 42px;
    -webkit-mask-image: radial-gradient(90% 120% at 80% 0%, #000 30%, transparent 75%);
            mask-image: radial-gradient(90% 120% at 80% 0%, #000 30%, transparent 75%);
}
.ad-banner__glow {
    position: absolute; top: -30%; right: -10%; width: 460px; height: 460px; border-radius: 50%;
    background: radial-gradient(circle, rgba(244,122,31,.45), transparent 62%);
    filter: blur(60px); animation: hero-breathe 7s ease-in-out infinite;
}
.ad-banner__eyebrow {
    display: inline-flex; align-items: center; gap: .45rem;
    color: var(--accent); font-weight: 700; text-transform: uppercase; letter-spacing: 2px; font-size: .72rem;
    margin-bottom: .9rem;
}
.ad-banner__title { font-family: var(--font-brand); font-size: clamp(1.7rem, 3.6vw, 2.6rem); margin: 0 0 .7rem; letter-spacing: -.8px; line-height: 1.1; }
.ad-banner__text { color: #c3c3cc; max-width: 50ch; margin: 0 0 1.5rem; }
.ad-banner__actions { display: flex; flex-wrap: wrap; gap: .8rem; margin-bottom: 1.8rem; }
.ad-banner__ghost { color: #fff; border-color: rgba(255,255,255,.3); }
.ad-banner__ghost:hover { border-color: var(--accent); color: var(--accent); }
.ad-banner__stats { list-style: none; display: flex; flex-wrap: wrap; gap: 2rem; margin: 0; padding: 0; }
.ad-banner__stats strong { display: block; font-family: var(--font-brand); font-size: 1.5rem; color: #fff; }
.ad-banner__stats span { font-size: .82rem; color: #9a9aa6; }
.ad-banner__art { position: relative; display: grid; place-items: center; min-height: 180px; }
.ad-banner__art i {
    font-size: clamp(6rem, 13vw, 10rem); line-height: 1;
    background-image: linear-gradient(150deg, #f8b36a, var(--accent));
    -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent;
    filter: drop-shadow(0 18px 40px rgba(244,122,31,.35)); animation: float 6s ease-in-out infinite;
}
.ad-banner__badge {
    position: absolute; top: 6%; right: 8%; z-index: 1; text-align: center; line-height: 1.05;
    font-family: var(--font-brand); font-weight: 800; font-size: .8rem; text-transform: uppercase; letter-spacing: .5px;
    width: 76px; height: 76px; border-radius: 50%; display: grid; place-items: center; color: #fff;
    background: var(--accent); box-shadow: 0 10px 30px rgba(244,122,31,.45); transform: rotate(8deg);
    animation: float 5s ease-in-out infinite;
}

/* ---- Trusted brands strip ---- */
.brands { padding: 1.6rem 0; border-bottom: 1px solid var(--line); }
.brands__label {
    margin: 0 0 .9rem; text-align: center; color: var(--muted);
    text-transform: uppercase; letter-spacing: 2px; font-size: .72rem; font-weight: 700;
}
.brands__list {
    list-style: none; margin: 0; padding: 0;
    display: flex; flex-wrap: wrap; justify-content: center; gap: .6rem;
}
.brands__chip {
    display: inline-block; padding: .5rem 1rem; border: 1px solid var(--line);
    border-radius: 999px; background: var(--surface); color: var(--ink);
    font-weight: 600; font-size: .9rem; letter-spacing: .3px;
    transition: border-color .15s, color .15s, transform .15s, box-shadow .15s;
}
.brands__chip:hover {
    border-color: var(--accent); color: var(--accent-600);
    transform: translateY(-2px); box-shadow: var(--shadow-sm);
}

/* ---- Learn & build teaser ---- */
.learn-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.2rem; }
.learn-card {
    display: flex; flex-direction: column; align-items: flex-start; gap: .6rem;
    background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius);
    padding: 1.6rem; transition: border-color .15s, transform .15s, box-shadow .15s;
}
.learn-card:hover { border-color: var(--accent); transform: translateY(-3px); box-shadow: var(--shadow); }
.learn-card__icon {
    width: 52px; height: 52px; border-radius: 14px; display: grid; place-items: center;
    background: var(--accent-tint); color: var(--accent); font-size: 1.5rem;
}
.learn-card__title { margin: 0; font-size: 1.08rem; }
.learn-card__text { margin: 0; color: var(--muted); font-size: .92rem; line-height: 1.5; }
.learn-card__cta { margin-top: auto; color: var(--accent-600); font-weight: 700; font-size: .9rem; }
.learn-card:hover .learn-card__cta { text-decoration: underline; }

/* ---- Newsletter band ---- */
.newsletter { background: radial-gradient(120% 120% at 20% 0%, #26262e 0%, var(--dark) 60%); color: #fff; }
.newsletter__inner {
    display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap;
    gap: 1.5rem; padding: 2.6rem 20px;
}
.newsletter__title { font-family: var(--font-brand); margin: 0 0 .4rem; font-size: clamp(1.4rem, 3vw, 2rem); }
.newsletter__text { margin: 0; color: #c3c3cc; max-width: 48ch; }
.newsletter__form { display: flex; gap: .6rem; flex: 1; min-width: 280px; max-width: 460px; }
.newsletter__form input {
    flex: 1; padding: .8rem 1rem; border-radius: var(--radius-sm);
    border: 1px solid rgba(255,255,255,.25); background: rgba(255,255,255,.1);
    color: #fff; font-size: .95rem;
}
.newsletter__form input::placeholder { color: rgba(255,255,255,.6); }
.newsletter__form input:focus { outline: none; border-color: var(--accent); background: rgba(255,255,255,.16); }
.newsletter__form .btn { white-space: nowrap; }

/* ---- Category grid ---- */
/* Fluid grid: cards auto-flow into as many even columns as fit, so the row is
   always full and balanced regardless of how many categories there are. */
.category-grid { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(170px, 1fr)); gap: 1rem; }
.category-card {
    display: flex; flex-direction: column; align-items: center; justify-content: center; gap: .6rem; text-align: center;
    min-height: 130px;
    background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius);
    padding: 1.3rem 1rem; transition: border-color .15s, transform .15s, box-shadow .15s;
}
.category-card:hover { border-color: var(--accent); transform: translateY(-3px); box-shadow: var(--shadow); }
.category-card__icon {
    display: grid; place-items: center;
    font-size: 2.4rem; line-height: 1; transition: transform .15s;
}
.category-card:hover .category-card__icon { transform: scale(1.1); }

/* Subject-matched solid colour (fallback when gradient text is unsupported). */
.category-card__icon[data-icon="drone"]   i { color: #2563eb; }
.category-card__icon[data-icon="robot"]   i { color: #0891b2; }
.category-card__icon[data-icon="chip"]    i { color: #16a34a; }
.category-card__icon[data-icon="sensor"]  i { color: #6366f1; }
.category-card__icon[data-icon="motor"]   i { color: #f59e0b; }
.category-card__icon[data-icon="print"]   i { color: #7c3aed; }
.category-card__icon[data-icon="tools"]   i { color: #ef4444; }
.category-card__icon[data-icon="parts"]   i { color: #06b6d4; }
.category-card__icon[data-icon="plane"]   i { color: #1e40af; }
.category-card__icon[data-icon="battery"] i { color: #65a30d; }

/* Multi-colour: a subject-matched gradient clipped to the glyph. */
@supports ((background-clip: text) or (-webkit-background-clip: text)) {
    .category-card__icon i {
        -webkit-background-clip: text; background-clip: text;
        -webkit-text-fill-color: transparent;
        /* Default gradient so a category whose icon key isn't mapped below still
           shows a visible accent glyph instead of a transparent (invisible) one. */
        background-image: linear-gradient(135deg, var(--accent), var(--accent-600));
    }
    .category-card__icon[data-icon="drone"]   i { background-image: linear-gradient(135deg, #38bdf8, #2563eb); } /* sky → blue */
    .category-card__icon[data-icon="robot"]   i { background-image: linear-gradient(135deg, #2dd4bf, #0891b2); } /* teal → cyan */
    .category-card__icon[data-icon="chip"]    i { background-image: linear-gradient(135deg, #4ade80, #15803d); } /* PCB greens */
    .category-card__icon[data-icon="sensor"]  i { background-image: linear-gradient(135deg, #a78bfa, #6366f1); } /* violet → indigo */
    .category-card__icon[data-icon="motor"]   i { background-image: linear-gradient(135deg, #fb923c, #f59e0b); } /* orange → amber */
    .category-card__icon[data-icon="print"]   i { background-image: linear-gradient(135deg, #818cf8, #7c3aed); } /* indigo → purple */
    .category-card__icon[data-icon="tools"]   i { background-image: linear-gradient(135deg, #fbbf24, #ef4444); } /* amber → solder red */
    .category-card__icon[data-icon="parts"]   i { background-image: linear-gradient(135deg, #22d3ee, #0891b2); } /* cyan → teal */
    .category-card__icon[data-icon="plane"]   i { background-image: linear-gradient(135deg, #60a5fa, #1e40af); } /* sky → navy */
    .category-card__icon[data-icon="battery"] i { background-image: linear-gradient(135deg, #a3e635, #16a34a); } /* lime → green */
}
.category-card__name {
    font-weight: 600; font-size: .92rem; line-height: 1.25;
    /* Keep cards uniform even with longer category names. */
    display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}

/* =============================================================================
   Product grid + card
   ========================================================================== */
.product-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 1.2rem; }
.product-grid--shop { grid-template-columns: repeat(4, 1fr); }
/* Home page shows five products per row on desktop. */
@media (min-width: 1025px) {
    .page-home .product-grid { grid-template-columns: repeat(5, 1fr); }
}

.product-card {
    background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius);
    /* min-width:0 lets the card shrink to its grid track. Without it, the minmax(auto,1fr)
       tracks expand to the card's min-content (the nowrap "Add to Cart" button / long
       product titles), so the 2-up mobile grid grows wider than the screen and the right
       card spills off-viewport. This is the root cause of the mobile horizontal overflow. */
    min-width: 0; overflow: hidden; display: flex; flex-direction: column; transition: box-shadow .15s, transform .15s, border-color .15s;
}
.product-card:hover { box-shadow: var(--shadow); transform: translateY(-3px); border-color: #d9dae0; }
.product-card__media { position: relative; display: block; aspect-ratio: 1/1; background: var(--surface-2); }
.product-card__media img { width: 100%; height: 100%; object-fit: cover; }
.product-card__body { padding: .9rem 1rem 1.1rem; display: flex; flex-direction: column; gap: .35rem; flex: 1; }
.product-card__brand, .product-card__cat { font-size: .72rem; text-transform: uppercase; letter-spacing: .8px; color: var(--muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
/* Home-page section badge — a per-section pill eyebrow set via $cardTag in pages/home.php
   (one label per band: Deal / Featured / Trending / New), shared by every card in that row.
   align-self keeps it hugging its content. */
.product-card__tag { align-self: flex-start; display: inline-flex; align-items: center; gap: .3rem; max-width: 100%;
    font-size: .66rem; font-weight: 800; letter-spacing: .5px; text-transform: uppercase;
    padding: .22rem .5rem; border-radius: 999px; line-height: 1.35; white-space: nowrap; }
.product-card__tag--deal     { background: #fff2e8; color: #a8480a; } /* Best deals    */
.product-card__tag--featured { background: #efeafc; color: #6b3fc0; } /* Featured      */
.product-card__tag--trending { background: #fdeaf0; color: #b13567; } /* Trending now  */
.product-card__tag--new      { background: #e4f6ec; color: #1a7a48; } /* New arrivals  */
.product-card__title { font-size: .98rem; font-weight: 600; margin: 0; line-height: 1.3; overflow-wrap: anywhere; }
.product-card__title a:hover { color: var(--accent-600); }
.product-card__price { margin-top: auto; display: flex; align-items: baseline; gap: .5rem; padding-top: .3rem; }
.product-card__actions { margin-top: .6rem; }

.price { font-size: 1.15rem; font-weight: 800; color: var(--ink); }
.price--lg { font-size: 1.8rem; }
.price--old { font-size: .9rem; font-weight: 500; color: var(--muted); text-decoration: line-through; }

.badge {
    position: absolute; top: 10px; font-size: .72rem; font-weight: 700; padding: .25rem .5rem;
    border-radius: 6px; color: #fff;
}
.badge--sale { left: 10px; background: var(--accent); }
.badge--low  { right: 10px; background: var(--warning); }

/* ---- Rating stars ---- */
.rating { display: inline-flex; align-items: center; gap: .35rem; font-size: .82rem; color: var(--muted); }
.rating__stars { position: relative; display: inline-block; font-size: 1rem; line-height: 1; font-family: Arial, sans-serif; }
.rating__stars::before { content: "★★★★★"; color: #d8d9df; letter-spacing: 1px; }
.rating__stars::after {
    content: "★★★★★"; color: var(--accent); letter-spacing: 1px; position: absolute; left: 0; top: 0;
    width: calc(var(--rating, 0) / 5 * 100%); overflow: hidden; white-space: nowrap;
}

/* =============================================================================
   Shop layout
   ========================================================================== */
.shop-layout { display: grid; grid-template-columns: 250px 1fr; gap: 1.8rem; margin: 1.5rem auto; }
/* min-width:0 stops either grid track being inflated past the viewport by a wide child —
   e.g. the filter panel when expanded on mobile — the classic CSS-grid horizontal-scroll trap. */
.shop-layout > * { min-width: 0; }
.shop-filters { position: sticky; top: 170px; align-self: start; }
.filter-block { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); padding: 1.1rem; margin-bottom: 1rem; }
.filter-block h3 { font-size: .95rem; margin: 0 0 .8rem; }
/* Single constrained column (minmax(0,1fr), not the implicit `auto`): the auto
   column sizes to the widest category name's max-content, so a long name never
   truncates and instead expands the list past the screen edge on a phone. minmax(0,…)
   pins the column to the container width so names ellipsis-truncate (see __name). */
.filter-cats { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: minmax(0, 1fr); gap: .15rem; }
.filter-cats a {
    display: flex; align-items: center; justify-content: space-between; gap: .5rem;
    padding: .45rem .6rem; border-radius: 6px; font-size: .9rem; color: var(--ink);
}
.filter-cats a:hover { background: var(--surface-2); }
.filter-cats a.is-active { background: var(--accent-tint); color: var(--accent-600); font-weight: 600; }
.filter-cats a.is-open { font-weight: 600; }
.filter-cats__name { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
/* "›" affordance on collapsed parents (has sub-categories to drill into). */
.filter-cats__more { color: var(--muted); font-size: 1.05rem; line-height: 1; flex-shrink: 0; }
.filter-cats a:hover .filter-cats__more { color: var(--accent); }
/* Nested sub-category levels: indent + guide line. */
.filter-cats .filter-cats { margin: .1rem 0 .25rem .55rem; padding-left: .5rem; border-left: 1px solid var(--line); }
.filter-cats .filter-cats a { font-size: .85rem; padding: .35rem .45rem; }
/* Keep the category panel compact: scroll within itself instead of stretching
   the whole page when there are many top-level categories. */
.filter-block--cats .filter-cats--root,
.filter-block--cats > .filter-cats { max-height: 60vh; overflow: hidden auto; overscroll-behavior: contain; }
.filter-price { display: flex; align-items: center; gap: .5rem; margin-bottom: .8rem; }
/* flex:1 + min-width:0 lets the two number inputs actually shrink to share the row.
   Without min-width:0 a flex item keeps its intrinsic min-width, so the inputs never
   compress and the row's min-content inflates the (minmax(auto,1fr)) sidebar track on
   mobile — pushing the whole page wider than the viewport (horizontal scroll). */
.filter-price input { flex: 1; min-width: 0; width: 100%; padding: .5rem; border: 1px solid var(--line); border-radius: 6px; }
.filter-check { display: flex; align-items: center; gap: .5rem; font-size: .9rem; margin-bottom: .8rem; min-height: 44px; }
/* Space the two stacked full-width filter buttons so Apply/Reset don't abut (mis-tap on touch). */
.filter-form .btn--block + .btn--block { margin-top: .5rem; }

.shop-head { display: flex; justify-content: space-between; align-items: flex-end; gap: 1rem; margin-bottom: 1.2rem; flex-wrap: wrap; }
.shop-head__title { font-size: 1.5rem; margin: 0; }
.shop-head__count { color: var(--muted); font-size: .9rem; margin: .2rem 0 0; }
.shop-sort { display: flex; align-items: center; gap: .5rem; }
.shop-sort label { font-size: .88rem; color: var(--muted); }
.shop-sort select, .filter-block select { padding: .5rem .6rem; border: 1px solid var(--line); border-radius: 6px; background: var(--surface); }

/* "Filters" disclosure button — hidden on desktop (the sidebar is always visible),
   revealed only on mobile (≤860px) where it collapses the whole filter panel. */
.filters-toggle { display: none; align-items: center; justify-content: space-between; width: 100%; margin-bottom: 1rem; }
.filters-toggle__icon { transition: transform .2s; }
.filters-toggle[aria-expanded="true"] .filters-toggle__icon { transform: rotate(180deg); }

/* Sub-category cards on a category page: a modern image grid. Images are
   lazy-loaded and ratio-locked, so this block adds no layout shift and no
   up-front network cost. The active sub-category is ringed in the accent. */
.subcat-grid {
    display: grid; grid-template-columns: repeat(auto-fill, minmax(158px, 1fr)); gap: .9rem;
    margin: 0 0 1.6rem;
}
.subcat-card {
    display: flex; flex-direction: column; gap: .55rem;
    color: var(--ink); font-weight: 600; font-size: .9rem;
}
.subcat-card__name { line-height: 1.25; transition: color .12s; }
.subcat-card:hover .subcat-card__name { color: var(--accent-600); }
.subcat-card:hover .cat-media { border-color: var(--accent); box-shadow: 0 10px 24px rgba(16,16,20,.12); }
.subcat-card.is-active .cat-media {
    border-color: var(--accent); box-shadow: 0 0 0 2px var(--accent);
}
.subcat-card.is-active .subcat-card__name { color: var(--accent-600); }

/* ---- Pagination ---- */
.pagination { display: flex; flex-wrap: wrap; gap: .35rem; justify-content: center; margin: 2rem 0 .5rem; }
.pagination__link {
    min-width: 40px; padding: .5rem .7rem; text-align: center; border: 1px solid var(--line);
    border-radius: 8px; background: var(--surface); font-weight: 600; font-size: .9rem;
}
.pagination__link:hover { border-color: var(--accent); color: var(--accent-600); }
.pagination__link.is-active { background: var(--accent); border-color: var(--accent); color: #fff; }
.pagination__gap { min-width: 40px; padding: .5rem .3rem; text-align: center; color: var(--muted); font-weight: 600; }

.empty-state { text-align: center; padding: 4rem 1rem; }
.empty-state h2 { margin-bottom: .4rem; }
.empty-state p { color: var(--muted); margin-bottom: 1.2rem; }

/* =============================================================================
   Product detail
   ========================================================================== */
.breadcrumb { font-size: .85rem; color: var(--muted); margin: 1.2rem 0; }
.breadcrumb a:hover { color: var(--accent-600); }
/* Shared breadcrumb trail (shop + product pages) */
.breadcrumbs { display: flex; flex-wrap: wrap; align-items: center; gap: .35rem; font-size: .82rem; color: var(--muted); margin: 1rem 0; }
.breadcrumbs a { color: var(--muted); }
.breadcrumbs a:hover { color: var(--accent-600); }
.breadcrumbs [aria-current="page"] { color: var(--ink); font-weight: 600; }
.breadcrumbs__sep { color: #c2c2c8; }

.product-detail { display: grid; grid-template-columns: 1fr 1fr; gap: 2.5rem; margin-bottom: 2rem; }
.product-detail__main { position: relative; background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); overflow: hidden; aspect-ratio: 1/1; }
.product-detail__main img { width: 100%; height: 100%; object-fit: cover; }
.product-detail__thumbs { display: flex; gap: .6rem; margin-top: .8rem; flex-wrap: wrap; }
.thumb { padding: 0; border: 2px solid var(--line); border-radius: 8px; overflow: hidden; background: var(--surface); width: 72px; height: 72px; }
.thumb.is-active, .thumb:hover { border-color: var(--accent); }
.thumb img { width: 100%; height: 100%; object-fit: cover; }

.product-detail__brand { text-transform: uppercase; letter-spacing: 1px; font-size: .78rem; color: var(--muted); font-weight: 700; }
.product-detail__title { font-size: clamp(1.5rem, 3vw, 2.1rem); margin: .3rem 0 .6rem; }
.product-detail__meta { display: flex; align-items: center; gap: 1rem; flex-wrap: wrap; margin-bottom: 1rem; color: var(--muted); font-size: .85rem; }
.product-detail__price { display: flex; align-items: baseline; gap: .8rem; flex-wrap: wrap; margin-bottom: 1rem; }
.product-detail__lead { color: #3f3f47; margin-bottom: 1rem; }
.product-detail__stock { margin: .6rem 0 1.2rem; }
.stock { font-weight: 600; font-size: .9rem; }
.stock--in { color: var(--success); }
.stock--low { color: var(--warning); }
.product-detail__buy { display: flex; align-items: center; gap: 1rem; margin-bottom: 1.4rem; flex-wrap: wrap; }
.product-detail__assurance { list-style: none; margin: 0; padding: 1rem 0 0; border-top: 1px solid var(--line); display: grid; gap: .4rem; color: var(--muted); font-size: .9rem; }
.product-detail__assurance li::before { content: "✓ "; color: var(--success); font-weight: 700; }

.qty-stepper { display: inline-flex; align-items: center; border: 1px solid var(--line); border-radius: 8px; overflow: hidden; background: var(--surface); }
.qty-stepper__btn { width: 40px; height: 44px; border: 0; background: var(--surface-2); font-size: 1.2rem; color: var(--ink); }
.qty-stepper__btn:hover { background: #e6e7ec; color: var(--accent-600); }
.qty-stepper__input { width: 54px; height: 44px; text-align: center; border: 0; outline: none; -moz-appearance: textfield; }
.qty-stepper__input::-webkit-outer-spin-button, .qty-stepper__input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }

.product-description .prose { max-width: 75ch; color: #38383f; }

/* Highlighted purchase box — frames price, stock and the add-to-cart action. */
.product-buybox {
    margin-top: 1.3rem; padding: 1.3rem 1.4rem;
    background: var(--surface); border: 1px solid var(--line);
    border-top: 3px solid var(--accent);
    border-radius: var(--radius); box-shadow: var(--shadow);
}
.product-buybox .product-detail__price { margin-bottom: .8rem; }
.product-buybox .product-detail__stock { margin: .4rem 0 1rem; }

/* Accented info panels for the product details + specifications below the fold.
   The description leads and is the wider column; the specifications sit alongside
   it on desktop and stack on mobile. With no specs, the description spans the full
   width, so all the detail lives in one clean main content area. */
.product-extra { display: grid; gap: 1.5rem; align-items: start; }
.product-extra--split { grid-template-columns: minmax(0, 1.6fr) minmax(0, 1fr); }
/* (A spec-less description with enough copy flows as two columns — see the
   .product-description .prose--cols rule below the .info-panel block, gated by $descTwoCol
   in product.php. A short one stays single-column .prose at max-width:75ch.) */
.info-panel {
    background: var(--surface); border: 1px solid var(--line);
    border-left: 4px solid var(--accent);
    border-radius: var(--radius); box-shadow: var(--shadow);
    padding: 1.5rem 1.7rem;
}
/* Prominent, consistent section headings: bold, an accent icon chip and an
   accent underline separator — applied to every panel title in this section. */
.info-panel__title {
    display: flex; align-items: center; gap: .65rem;
    font-size: 1.3rem; font-weight: 800; letter-spacing: -.2px; color: var(--ink);
    margin: 0 0 1.1rem; padding-bottom: .75rem;
    border-bottom: 2px solid var(--line); position: relative;
}
.info-panel__title::after {
    content: ""; position: absolute; left: 0; bottom: -2px;
    width: 54px; height: 2px; background: var(--accent); border-radius: 2px;
}
.info-panel__title i {
    display: inline-grid; place-items: center; flex: 0 0 auto;
    width: 30px; height: 30px; font-size: .9rem; color: var(--accent);
    background: color-mix(in srgb, var(--accent) 12%, transparent); border-radius: 8px;
}
.info-panel .spec-table { border: 0; border-radius: 0; }

/* Per-product colour: --pd-hue is set inline on .product-extra (seeded from the product's
   category in product.php), so the details/specs panels are colour-coded per product while
   keeping the same on-brand shape. Two shades: a mid tone for borders/underline/icon and a
   darker "ink" that stays legible on the pale tint used behind the eyebrow. */
.product-extra {
    --pd-accent:      hsl(var(--pd-hue, 22) 58% 45%);
    --pd-accent-ink:  hsl(var(--pd-hue, 22) 52% 30%);
    --pd-accent-soft: hsl(var(--pd-hue, 22) 60% 96%);
}
.product-extra .info-panel { border-left-color: var(--pd-accent); }
.product-extra .info-panel__title i { color: var(--pd-accent); background: var(--pd-accent-soft); }
.product-extra .info-panel__title::after { background: var(--pd-accent); }
/* Coloured eyebrow sub-heading above each panel title. */
.info-panel__eyebrow {
    display: inline-block; margin: 0 0 .55rem;
    font-size: .72rem; font-weight: 800; letter-spacing: .9px; text-transform: uppercase;
    color: var(--pd-accent-ink); background: var(--pd-accent-soft);
    padding: .22rem .6rem; border-radius: 999px;
}
/* A spec-less product's description fills the full-bleed width as two balanced text columns
   (instead of one column with a blank right side). Added only when there's enough copy to fill
   both columns — see $descTwoCol in product.php. Auto-collapses to one column when there isn't
   room for two ~20rem columns (phones / small tablets). */
.product-description .prose--cols {
    max-width: none; columns: 2 20rem; column-gap: 2.75rem; column-rule: 1px solid var(--line);
}

@media (max-width: 860px) {
    /* Stack the specifications under the details on tablet/mobile. */
    .product-extra--split { grid-template-columns: 1fr; }
}

/* =============================================================================
   Cart
   ========================================================================== */
.cart-layout { display: grid; grid-template-columns: 1fr 340px; gap: 1.8rem; align-items: start; margin-bottom: 2rem; }
.cart-items { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); padding: .5rem 1.2rem; }
.cart-row { display: grid; grid-template-columns: 90px 1fr auto auto auto; align-items: center; gap: 1rem; padding: 1rem 0; border-bottom: 1px solid var(--line); }
.cart-row:last-of-type { border-bottom: 0; }
.cart-row__media img { border-radius: 8px; }
.cart-row__name { font-weight: 600; display: block; }
.cart-row__name:hover { color: var(--accent-600); }
.cart-row__unit { color: var(--muted); font-size: .85rem; }
.cart-row__total { font-weight: 700; min-width: 90px; text-align: right; }
.cart-items__foot { display: flex; justify-content: space-between; align-items: center; padding: 1rem 0; }
.cart-items__foot form { margin: 0; }

.cart-summary, .checkout-summary { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); padding: 1.4rem; position: sticky; top: 170px; }
.cart-summary h2, .checkout-summary h2 { font-size: 1.15rem; margin-bottom: 1rem; }
.summary-lines { margin: 0 0 .6rem; display: grid; gap: .5rem; }
.summary-lines div { display: flex; justify-content: space-between; font-size: .95rem; }
.summary-lines dt { color: var(--muted); margin: 0; }
.summary-lines dd { margin: 0; font-weight: 600; }
.summary-total { display: flex; justify-content: space-between; font-size: 1.2rem; font-weight: 800; padding: .8rem 0 1rem; border-top: 1px solid var(--line); margin-top: .4rem; }
.cart-summary__hint { font-size: .85rem; color: var(--accent-600); background: var(--accent-tint); padding: .5rem .7rem; border-radius: 8px; margin: 0 0 1rem; }
.cart-summary__note, .checkout-summary .link { font-size: .82rem; color: var(--muted); text-align: center; margin-top: .8rem; }

/* Coupon / discount */
.summary-discount { color: var(--success); }
.coupon-box { margin: 0 0 1rem; }
.coupon-form { display: flex; gap: .5rem; }
.coupon-form input { flex: 1; min-width: 0; padding: .6rem .7rem; border: 1px solid var(--line); border-radius: var(--radius-sm); font: inherit; text-transform: uppercase; }
.coupon-form input:focus { border-color: var(--accent); outline: none; }
.coupon-form .btn { flex: 0 0 auto; }
.coupon-applied { display: flex; align-items: center; justify-content: space-between; gap: .5rem; font-size: .9rem; background: var(--accent-tint); border: 1px solid #f6d8bb; color: var(--accent-600); padding: .55rem .75rem; border-radius: var(--radius-sm); }
.coupon-applied form { margin: 0; }
.coupon-applied strong { color: var(--ink); }

/* =============================================================================
   Checkout
   ========================================================================== */
.checkout-layout { display: grid; grid-template-columns: 1fr 360px; gap: 1.8rem; align-items: start; margin-bottom: 2rem; }
.checkout-block { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); padding: 1.4rem; margin-bottom: 1.2rem; }
.checkout-block h2 { font-size: 1.1rem; margin-bottom: 1rem; }
.checkout-items { list-style: none; margin: 0 0 1rem; padding: 0; display: grid; gap: .55rem; max-height: 280px; overflow: auto; }
.checkout-items li { display: grid; grid-template-columns: auto 1fr auto; gap: .6rem; font-size: .9rem; }
.checkout-items__qty { color: var(--accent-600); font-weight: 700; }
.checkout-items__price { font-weight: 600; }

.pay-options { display: grid; gap: .7rem; margin-bottom: 1rem; }
.pay-option { display: flex; gap: .8rem; align-items: flex-start; border: 1px solid var(--line); border-radius: var(--radius-sm); padding: .9rem 1rem; cursor: pointer; }
.pay-option:hover { border-color: var(--accent); }
.pay-option input { margin-top: .25rem; }
.pay-option__body { display: flex; flex-direction: column; }
.bank-details { background: var(--surface-2); border: 1px dashed var(--line); border-radius: var(--radius-sm); padding: 1rem 1.1rem; }
.bank-details h3 { font-size: .95rem; margin-bottom: .6rem; }
.bank-details__list { list-style: none; margin: 0 0 1rem; padding: 0; display: grid; gap: .35rem; }
.bank-details__list li { display: flex; justify-content: space-between; gap: 1rem; font-size: .9rem; }
.bank-details__list span { color: var(--muted); }

/* =============================================================================
   Forms
   ========================================================================== */
.form { display: grid; gap: 1rem; }
.field { display: grid; gap: .35rem; }
.field__label { font-size: .85rem; font-weight: 600; color: #3a3a42; }
.field input, .field select, .field textarea {
    width: 100%; padding: .65rem .8rem; border: 1px solid var(--line); border-radius: var(--radius-sm);
    background: var(--surface); outline: none; transition: border-color .15s, box-shadow .15s;
}
.field input:focus, .field select:focus, .field textarea:focus { border-color: var(--accent); box-shadow: 0 0 0 3px rgba(244,122,31,.15); }
.field input:disabled { background: var(--surface-2); color: var(--muted); }
.form-row { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; }
.form-row--3 { grid-template-columns: 1fr 1fr 1fr; }
.form-actions { display: flex; gap: .6rem; }

/* ---- Auth ---- */
.auth-wrap { display: grid; place-items: center; padding: 2.5rem 20px; }
.auth-card { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); padding: 2rem; width: 100%; max-width: 440px; box-shadow: var(--shadow); }
.auth-card h1 { font-size: 1.5rem; margin-bottom: .3rem; }
.auth-alt { text-align: center; margin-top: 1.2rem; font-size: .92rem; }
.auth-alt a, .auth-demo strong { color: var(--accent-600); }
.auth-demo { text-align: center; font-size: .82rem; margin-top: .8rem; }

/* =============================================================================
   Cards / tables / account
   ========================================================================== */
.card { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); padding: 1.4rem; box-shadow: var(--shadow-sm); }
.card__head { display: flex; justify-content: space-between; align-items: center; margin-bottom: 1rem; }
.card h2 { font-size: 1.15rem; }

.table-wrap { overflow-x: auto; }
.data-table { width: 100%; border-collapse: collapse; font-size: .92rem; }
.data-table th, .data-table td { text-align: left; padding: .75rem .6rem; border-bottom: 1px solid var(--line); vertical-align: middle; }
.data-table th { font-size: .78rem; text-transform: uppercase; letter-spacing: .5px; color: var(--muted); }
.data-table code { background: var(--surface-2); padding: .15rem .4rem; border-radius: 5px; font-size: .85em; }

.status-pill { display: inline-block; font-size: .74rem; font-weight: 700; padding: .22rem .55rem; border-radius: 999px; text-transform: capitalize; }
.status-pill--pending    { background: #fff6e6; color: #8a5e12; }
.status-pill--confirmed  { background: #eaf2fb; color: #1d4e80; }
.status-pill--processing { background: #efeafc; color: #5a3aa8; }
.status-pill--shipped    { background: #e6f6fb; color: #176b80; }
.status-pill--delivered  { background: #eafaf0; color: #14663b; }
.status-pill--cancelled  { background: #fdecec; color: #9c2424; }

.account-layout { display: grid; grid-template-columns: 260px 1fr; gap: 1.8rem; margin: 1.5rem auto; align-items: start; }
.account-nav { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); padding: 1.2rem; position: sticky; top: 170px; }
.account-nav__user { display: flex; align-items: center; gap: .7rem; padding-bottom: 1rem; border-bottom: 1px solid var(--line); margin-bottom: 1rem; }
.account-nav__avatar { width: 42px; height: 42px; border-radius: 50%; background: var(--accent); color: #fff; display: grid; place-items: center; font-weight: 700; }
.account-nav__user div { display: flex; flex-direction: column; line-height: 1.2; overflow: hidden; }
.account-nav__user span.muted { font-size: .8rem; overflow: hidden; text-overflow: ellipsis; }
.account-nav nav { display: grid; gap: .15rem; }
.account-nav nav a { padding: .55rem .6rem; border-radius: 7px; font-weight: 500; }
.account-nav nav a:hover { background: var(--surface-2); color: var(--accent-600); }
.account-main { display: grid; gap: 1.4rem; }

.address-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 1rem; margin-bottom: 1rem; }
.address-card { border: 1px solid var(--line); border-radius: var(--radius-sm); padding: 1rem; position: relative; }
.address-card .badge { position: static; display: inline-block; margin-bottom: .4rem; }
.address-block { font-style: normal; line-height: 1.5; font-size: .9rem; color: #3f3f47; }
.disclosure summary { cursor: pointer; font-weight: 600; color: var(--accent-600); padding: .5rem 0; }

/* ---- Order confirmation ---- */
.order-confirm { max-width: 920px; margin: 2rem auto; }
.order-confirm__head { text-align: center; margin-bottom: 2rem; }
.order-confirm__check { width: 72px; height: 72px; border-radius: 50%; background: #eafaf0; color: var(--success); display: grid; place-items: center; margin: 0 auto 1rem; }
.order-confirm__head h1 { font-size: 1.7rem; }
.order-grid { display: grid; grid-template-columns: 1.4fr 1fr; gap: 1.4rem; }
.order-side { display: grid; gap: 1.4rem; }
.order-items, .checkout-items { list-style: none; padding: 0; }
.order-items { margin: 0 0 1rem; display: grid; gap: .6rem; }
.order-items li { display: grid; grid-template-columns: auto 1fr auto; gap: .7rem; align-items: baseline; }
.order-items__qty { color: var(--accent-600); font-weight: 700; }
.order-items__price { font-weight: 600; }
.order-confirm__actions { display: flex; gap: .8rem; justify-content: center; margin-top: 2rem; flex-wrap: wrap; }
.status-pill { margin-left: .2rem; }

/* =============================================================================
   Footer
   ========================================================================== */
.site-footer { background: var(--dark); color: #b9b9c2; margin-top: 3rem; }
.site-footer__grid { display: grid; grid-template-columns: 1.4fr 1fr 1fr 1.2fr; gap: 2rem; padding: 3rem 20px 2rem; }
.site-footer__name { color: #fff; font-weight: 700; font-size: 1.1rem; margin: .6rem 0 .3rem; }
.site-footer__col h4 { color: #fff; font-size: .95rem; margin-bottom: .8rem; }
.site-footer__col ul { list-style: none; margin: 0; padding: 0; display: grid; gap: .45rem; font-size: .9rem; }
.site-footer__col a:hover { color: var(--accent); }
.site-footer__contact { color: #b9b9c2; }
/* Brands band (relocated from the homepage) — dark footer variant. */
.site-footer__brands { border-top: 1px solid #26262d; }
.site-footer__brands-inner { display: flex; align-items: center; flex-wrap: wrap; gap: .6rem 1rem; padding: 1.2rem 20px; }
.site-footer__brands-label {
    color: #8a8a94; text-transform: uppercase; letter-spacing: 1.6px; font-size: .68rem; font-weight: 700;
    margin-right: .4rem;
}
.site-footer__brands-list { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: .5rem; }
.site-footer__brands-list a {
    display: inline-block; padding: .35rem .8rem; border: 1px solid #2c2c34; border-radius: 999px;
    color: #cfcfd6; font-size: .82rem; font-weight: 600;
}
.site-footer__brands-list a:hover { border-color: var(--accent); color: var(--accent); }

.site-footer__bar { border-top: 1px solid #26262d; }
.site-footer__bar-inner { display: flex; justify-content: space-between; gap: 1rem; padding: 1.2rem 20px; font-size: .82rem; flex-wrap: wrap; }

.text-warn { color: var(--warning); font-weight: 700; }

/* =============================================================================
   About page
   ========================================================================== */
.about-hero__inner { max-width: 760px; }
.about-hero__title {
    font-family: var(--font-brand); font-weight: 800; letter-spacing: -.5px;
    font-size: clamp(1.8rem, 4vw, 2.8rem); margin: .35rem 0 1rem;
}
.about-hero__lead { font-size: 1.12rem; line-height: 1.7; color: var(--ink); }
.about-hero__site { margin-top: 1.1rem; font-weight: 600; }
.about-hero__site a { color: var(--accent); }
.about-hero__site a:hover { text-decoration: underline; }

.about-prose { max-width: 760px; }
.about-prose p { line-height: 1.8; margin: 0 0 1rem; color: #333; }

.about-contact { font-style: normal; line-height: 1.8; color: #333; }
.about-contact__org { font-weight: 700; color: var(--ink); margin-bottom: .35rem; }
.about-contact a { color: var(--accent); }
.about-contact a:hover { text-decoration: underline; }

.about-cta { text-align: center; max-width: 640px; margin: 0 auto; }
.about-cta__title { font-family: var(--font-brand); font-size: clamp(1.5rem, 3vw, 2rem); margin-bottom: .4rem; }
.about-cta__actions { display: flex; gap: .8rem; justify-content: center; flex-wrap: wrap; margin-top: 1.4rem; }

/* --- About redesign: hero, impact, vision/mission, steps, FAQ, CTA panel ----
   Visuals are inline-SVG + CSS only (no images) so the page adds no requests and
   no layout shift. Icon boxes colour their SVG via currentColor. --------------- */
.about-tagline { font-family: var(--font-brand); font-weight: 700; color: var(--accent); font-size: 1.05rem; letter-spacing: .3px; margin: 1.1rem 0 0; }
.about-hero__actions { display: flex; gap: .8rem; flex-wrap: wrap; margin-top: 1.4rem; }

/* Centred section header + supporting sub-line (reused across the new sections). */
.section__head--center { justify-content: center; text-align: center; }
.section__head--center > div { max-width: 660px; margin: 0 auto; }
.section__sub { color: var(--muted); line-height: 1.6; margin: .5rem 0 0; }

/* Shared: SVG sizing inside the round/rounded icon tiles. */
.learn-card__icon svg, .about-duo__icon svg, .impact-stat__icon svg { width: 26px; height: 26px; }

/* Impact stats */
.impact-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 1.2rem; margin-top: 1.6rem; }
.impact-stat { display: flex; flex-direction: column; align-items: center; gap: .3rem; text-align: center;
    background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); padding: 1.7rem 1.2rem; }
.impact-stat__icon { width: 48px; height: 48px; border-radius: 50%; display: grid; place-items: center;
    background: var(--accent-tint); color: var(--accent); margin-bottom: .5rem; }
.impact-stat__num { font-family: var(--font-brand); font-weight: 800; line-height: 1; color: var(--ink); font-size: clamp(1.5rem, 3.4vw, 2rem); }
.impact-stat__label { color: var(--muted); font-size: .88rem; }

/* Vision / mission duo */
.about-duo { display: grid; grid-template-columns: 1fr 1fr; gap: 1.2rem; margin-top: 1.3rem; }
.about-duo__card { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); padding: 1.8rem; }
.about-duo__icon { width: 52px; height: 52px; border-radius: 14px; display: grid; place-items: center;
    background: var(--accent-tint); color: var(--accent); margin-bottom: .9rem; }
.about-duo__card h3 { margin: 0 0 .5rem; font-size: 1.2rem; }
.about-duo__card p { margin: 0; color: var(--muted); line-height: 1.75; }

/* Approach steps */
.steps { list-style: none; margin: 1.6rem 0 0; padding: 0; display: grid; grid-template-columns: repeat(4, 1fr); gap: 1.2rem; }
.step { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); padding: 1.5rem; }
.step__n { font-family: var(--font-brand); font-weight: 800; font-size: 1.35rem; color: var(--accent);
    background: var(--accent-tint); width: 46px; height: 46px; border-radius: 12px; display: grid; place-items: center; margin-bottom: .85rem; }
.step__title { margin: 0 0 .35rem; font-size: 1.05rem; }
.step__text { margin: 0; color: var(--muted); font-size: .9rem; line-height: 1.55; }

/* FAQ accordion (native <details>, zero JS) */
.about-faq { max-width: 820px; margin: 0 auto; }
.faq__item { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); margin-bottom: .7rem; overflow: hidden; }
.faq__q { display: flex; align-items: center; justify-content: space-between; gap: 1rem; cursor: pointer;
    padding: 1.1rem 1.25rem; list-style: none; }
.faq__q::-webkit-details-marker { display: none; }
.faq__q h3 { margin: 0; font-size: 1.02rem; font-weight: 700; color: var(--ink); }
.faq__icon { position: relative; width: 16px; height: 16px; flex: none; }
.faq__icon::before, .faq__icon::after { content: ""; position: absolute; background: var(--accent); border-radius: 2px; }
.faq__icon::before { left: 0; right: 0; top: 7px; height: 2px; }
.faq__icon::after { top: 0; bottom: 0; left: 7px; width: 2px; transition: transform .2s ease; }
.faq__item[open] .faq__icon::after { transform: scaleY(0); }
.faq__a { padding: 0 1.25rem 1.2rem; }
.faq__a p { margin: 0; color: var(--muted); line-height: 1.7; }

/* Final CTA panel (dark gradient, decorative grid + glow — CSS only) */
.cta-panel { position: relative; overflow: hidden; border-radius: var(--radius); color: #fff; text-align: center;
    padding: clamp(2rem, 5vw, 3.5rem); background: linear-gradient(135deg, var(--dark) 0%, var(--dark-2) 58%, #241a12 100%); }
.cta-panel__fx { position: absolute; inset: 0; pointer-events: none; }
.cta-panel__grid { position: absolute; inset: 0;
    background-image: linear-gradient(rgba(255,255,255,.05) 1px, transparent 1px), linear-gradient(90deg, rgba(255,255,255,.05) 1px, transparent 1px);
    background-size: 40px 40px;
    -webkit-mask-image: radial-gradient(ellipse at center, #000, transparent 75%);
            mask-image: radial-gradient(ellipse at center, #000, transparent 75%); }
.cta-panel__glow { position: absolute; width: 360px; height: 360px; top: -120px; right: -70px;
    background: radial-gradient(circle, rgba(244,122,31,.35), transparent 65%); filter: blur(18px); }
.cta-panel__body { position: relative; max-width: 680px; margin: 0 auto; }
.cta-panel .hero__eyebrow { color: var(--accent); }
.cta-panel__title { font-family: var(--font-brand); font-weight: 800; margin: .3rem 0 .7rem; font-size: clamp(1.6rem, 3.5vw, 2.3rem); }
.cta-panel__text { color: rgba(255,255,255,.82); line-height: 1.75; margin: 0; }
.cta-panel__ghost { border-color: rgba(255,255,255,.35); color: #fff; }
.cta-panel__ghost:hover { border-color: #fff; background: rgba(255,255,255,.08); }

/* About responsive — scoped so the 6-card grid beats the global .learn-grid rule */
@media (max-width: 860px) {
    .impact-grid { grid-template-columns: repeat(2, 1fr); }
    .steps { grid-template-columns: repeat(2, 1fr); }
    .about-duo { grid-template-columns: 1fr; }
    .page-about .learn-grid--6 { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 520px) {
    .steps { grid-template-columns: 1fr; }
    .page-about .learn-grid--6 { grid-template-columns: 1fr; }
}

/* =============================================================================
   Responsive
   ========================================================================== */
@media (max-width: 1024px) {
    .product-grid { grid-template-columns: repeat(3, 1fr); }
    .product-grid--shop { grid-template-columns: repeat(3, 1fr); }
    .category-grid { grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); }
    /* Stack copy over the orb; the orb stays as a centerpiece on tablet. */
    .hero-slide__inner { grid-template-columns: 1fr; gap: 1.6rem; justify-items: start; }
    .hero-slide__art { order: -1; min-height: 0; }
    .hero-orb { width: clamp(180px, 38vw, 240px); }
    .hero-art__corner { display: none; }
    .promo-grid { grid-template-columns: repeat(2, 1fr); }
    /* Billboard: stack the art under the copy. */
    .ad-banner { grid-template-columns: 1fr; }
    .ad-banner__art { order: -1; min-height: 0; }
    .ad-banner__badge { width: 64px; height: 64px; font-size: .7rem; }
}
@media (max-width: 560px) {
    .hero-slide__art { display: none; }   /* reclaim vertical space on small phones */
    .promo-grid { grid-template-columns: 1fr; }
    .ad-banner__stats { gap: 1.2rem; }
    .ad-banner__art { display: none; }
}
@media (max-width: 860px) {
    /* Row 1: brand + caption + account + cart + menu toggle, always on one line.
       Row 2: full-width search. The brand flexes and truncates so it can never
       push the action icons onto a second line. */
    .masthead__inner { flex-wrap: wrap; height: auto; padding: .7rem 0; gap: .55rem .75rem; }
    .brand { flex: 1 1 auto; min-width: 0; gap: .55rem; }
    .brand__logo { width: 48px; height: 48px; }
    .brand__text { min-width: 0; }
    .brand__name, .brand__sub { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 100%; }
    .masthead__actions { flex-shrink: 0; gap: .2rem; }
    .search { order: 3; flex-basis: 100%; width: 100%; max-width: none; margin: 0; }
    .nav-toggle { display: flex; flex-shrink: 0; padding: 8px 6px; }
    .primary-nav { display: none; }
    .primary-nav.is-open { display: block; }
    .primary-nav__bar { flex-direction: column; align-items: stretch; gap: 0; }
    .cat-menu { display: block; }
    .cat-menu__btn { width: 100%; justify-content: space-between; }
    /* The mega-panel expands inline inside the opened mobile menu (accordion),
       toggled by the button — no overlay. */
    .cat-menu__panel {
        position: static; width: auto; max-height: none;
        border: 0; border-radius: 0; box-shadow: none; padding: .4rem 0 .6rem .8rem;
    }
    .primary-nav__quick { flex-direction: column; }
    .primary-nav__quick a { padding-left: 0; }
    .shop-layout, .cart-layout, .checkout-layout, .account-layout, .order-grid, .admin-form__grid { grid-template-columns: 1fr; }
    .shop-filters, .cart-summary, .checkout-summary, .account-nav { position: static; }
    /* Mobile: collapse the whole filter panel behind the "Filters" button (JS toggle,
       mirroring the mobile nav) so the long category list no longer forms a wall of
       scrolling. Sorting stays available — it lives in .shop-main, outside the panel.
       When opened, the category list keeps its 60vh inner scroll (base rule) so it can
       never run away vertically either. */
    .filters-toggle { display: flex; margin-bottom: 0; }
    .shop-filters .filter-form { display: none; }
    /* The 1rem separation belongs to the open panel, not the collapsed button — this
       keeps the button flush above the products (no dead gap) until it's expanded. */
    .shop-filters .filter-form.is-open { display: block; margin-top: 1rem; }
    /* Hero slider: drop the cramped edge arrows; swipe + dots drive it on mobile. */
    .hero-slider__nav { display: none; }
    .hero-slide__inner { padding: 2.4rem 20px 4rem; }
    .hero-slider__count { display: none; }      /* free up room on the control bar */
    .hero-slider__bar { gap: .8rem; bottom: 12px; }
    .hero-slider__dot { width: 12px; height: 12px; }
    .hero-slider__dot.is-active { width: 28px; }
    .learn-grid { grid-template-columns: 1fr; }
    .newsletter__inner { flex-direction: column; align-items: flex-start; }
    .newsletter__form { max-width: none; width: 100%; }
    .product-detail { grid-template-columns: 1fr; }
    .product-grid--shop { grid-template-columns: repeat(2, 1fr); }
    .site-footer__grid { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 560px) {
    /* Tighten the single-line masthead row for narrow phones. */
    .masthead__inner { gap: .4rem .5rem; }
    .brand__logo { width: 44px; height: 44px; }
    .brand__name { font-size: 1.1rem; }
    .brand__sub { font-size: .62rem; letter-spacing: 1.2px; }
    .icon-btn { width: 40px; height: 40px; }
    .nav-toggle { padding: 8px 4px; }
    .product-grid, .product-grid--shop { grid-template-columns: repeat(2, 1fr); gap: .8rem; }
    /* Let the struck sale price wrap under the current price instead of being clipped by
       the card's overflow:hidden in the narrow two-column grid. */
    .product-card__price { flex-wrap: wrap; }
    /* Tighter body padding + a slightly smaller action button so the (nowrap) "Add to
       Cart" label fits comfortably inside a ~2-up card on the narrowest phones. */
    .product-card__body { padding: .75rem .8rem 1rem; }
    .product-card .btn { padding: .5rem .55rem; font-size: .85rem; }
    /* Keep sub-category cards 2-up on phones — auto-fill(minmax(158px,1fr)) otherwise
       drops to a single oversized banner card at ≤360px. Matches the product grid. */
    .subcat-grid { grid-template-columns: repeat(2, 1fr); gap: .8rem; }
    .category-grid { grid-template-columns: repeat(2, 1fr); }
    .cart-row { grid-template-columns: 70px 1fr auto; grid-template-areas: "media info remove" "media qty total"; row-gap: .6rem; }
    .cart-row__media { grid-area: media; }
    .cart-row__info { grid-area: info; }
    .cart-row__qty { grid-area: qty; }
    .cart-row__total { grid-area: total; }
    .cart-row__remove { grid-area: remove; justify-self: end; }
    .form-row, .form-row--3 { grid-template-columns: 1fr; }
    .site-footer__grid { grid-template-columns: 1fr; }
    .hero__actions .btn { flex: 1; }
}

/* -----------------------------------------------------------------------------
 | Product specifications table (populated by the catalogue importer)
 ---------------------------------------------------------------------------- */
.product-specs .spec-table {
    width: 100%;
    border-collapse: collapse;
    background: var(--surface);
    border: 1px solid var(--line);
    border-radius: var(--radius-sm);
    overflow: hidden;
}
.product-specs .spec-table th,
.product-specs .spec-table td {
    text-align: left;
    padding: .7rem 1rem;
    border-bottom: 1px solid var(--line);
    vertical-align: top;
    font-size: .95rem;
}
.product-specs .spec-table tr:last-child th,
.product-specs .spec-table tr:last-child td { border-bottom: 0; }
.product-specs .spec-table th {
    width: 38%;
    color: var(--muted);
    font-weight: 600;
    background: var(--bg);
}
/* Values are the key data — highlighted (bold, full-ink). */
.product-specs .spec-table td { color: var(--ink); font-weight: 700; }
/* Context icon beside each spec label — inline so it never breaks the table cell. */
.spec-ico { width: 17px; height: 17px; color: var(--accent); vertical-align: -3px; margin-right: .5rem; }

/* ---- Product share button ---- */
.product-share { position: relative; margin: 0 0 1rem; }
/* Prominent, on-brand toggle: accent border + tint fill, solid accent on hover. */
.product-share__toggle {
    gap: .45rem; font-weight: 700;
    color: var(--accent-600); background: var(--accent-tint);
    border-color: var(--accent); box-shadow: 0 1px 2px rgba(244,122,31,.18);
}
.product-share__toggle:hover,
.product-share__toggle[aria-expanded="true"] {
    background: var(--accent); border-color: var(--accent); color: #fff;
}
.product-share__menu {
    position: absolute; top: calc(100% + .4rem); left: 0; z-index: 30;
    min-width: 190px; display: flex; flex-direction: column;
    background: var(--surface); border: 1px solid var(--line);
    border-radius: var(--radius-sm); box-shadow: var(--shadow); overflow: hidden;
}
/* A bare class `display:flex` overrides the `hidden` attribute's UA display:none,
   which left the menu open by default — this restores hidden's precedence. */
.product-share__menu[hidden] { display: none; }
.product-share__opt {
    display: block; width: 100%; text-align: left; background: none; border: 0;
    padding: .6rem .9rem; font-size: .92rem; color: var(--ink); border-bottom: 1px solid var(--line);
}
.product-share__opt:last-child { border-bottom: 0; }
.product-share__opt:hover { background: var(--accent-tint); color: var(--accent-600); }

/* ---- Content protection ----
   Discourage casual copying of storefront text/images. Form controls stay fully
   selectable so customers can type, select and paste in search / cart / checkout.
   This is a deterrent only, paired with the JS handlers in main.js. */
body {
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
}
/* Re-enable selection inside anything the user is meant to edit. */
input, textarea, select, [contenteditable="true"] {
    -webkit-user-select: text;
    -moz-user-select: text;
    -ms-user-select: text;
    user-select: text;
}
/* Stop images being dragged out to the desktop / another tab to save them. */
img {
    -webkit-user-drag: none;
    -khtml-user-drag: none;
    -moz-user-drag: none;
    user-drag: none;
    -webkit-touch-callout: none; /* iOS Safari: suppress the long-press save menu */
}