/* ===================== FONTS (self-hosted, no FOUT) ===================== */
      @font-face { font-family: "Inter"; font-style: normal; font-weight: 400; font-display: swap; src: url("../assets/fonts/inter-400.woff2") format("woff2"); }
      @font-face { font-family: "Inter"; font-style: normal; font-weight: 500; font-display: swap; src: url("../assets/fonts/inter-500.woff2") format("woff2"); }
      @font-face { font-family: "Inter"; font-style: normal; font-weight: 600; font-display: swap; src: url("../assets/fonts/inter-600.woff2") format("woff2"); }
      @font-face { font-family: "Inter"; font-style: normal; font-weight: 700; font-display: swap; src: url("../assets/fonts/inter-700.woff2") format("woff2"); }
      @font-face { font-family: "Sora"; font-style: normal; font-weight: 400; font-display: swap; src: url("../assets/fonts/sora-400.woff2") format("woff2"); }
      @font-face { font-family: "Sora"; font-style: normal; font-weight: 600; font-display: swap; src: url("../assets/fonts/sora-600.woff2") format("woff2"); }
      @font-face { font-family: "Sora"; font-style: normal; font-weight: 700; font-display: swap; src: url("../assets/fonts/sora-700.woff2") format("woff2"); }
      @font-face { font-family: "Sora"; font-style: normal; font-weight: 800; font-display: swap; src: url("../assets/fonts/sora-800.woff2") format("woff2"); }

      /* Smooth cross-fade between pages (progressive enhancement) */
      @view-transition { navigation: auto; }
      @media (prefers-reduced-motion: reduce) {
        ::view-transition-old(root), ::view-transition-new(root) { animation: none; }
      }

/* ===================== TOKENS ===================== */
      :root {
        --bg: #080a12;
        --bg-2: #0b0e18;
        --surface: #10131f;
        --surface-2: #141826;
        --surface-3: #171b2b;
        --border: rgba(255, 255, 255, 0.07);
        --border-strong: rgba(255, 255, 255, 0.12);
        --text: #f4f5fa;
        --muted: #9297a8;
        --muted-2: #6d7284;
        --accent: #9a9ef2;
        --accent-2: #7f84e8;
        --accent-soft: rgba(154, 158, 242, 0.14);
        --radius: 16px;
        --radius-lg: 22px;
        --maxw: 1200px;
        --shadow: 0 24px 60px -20px rgba(0, 0, 0, 0.7);
      }

      * {
        box-sizing: border-box;
        margin: 0;
        padding: 0;
      }

      html {
        scroll-behavior: smooth;
      }

      body {
        background: var(--bg);
        color: var(--text);
        font-family: "Inter", system-ui, -apple-system, sans-serif;
        line-height: 1.5;
        -webkit-font-smoothing: antialiased;
        text-rendering: optimizeLegibility;
        overflow-x: hidden;
        position: relative;
      }
      /* fixed background layer — smoother than background-attachment: fixed */
      .bg-layer {
        position: fixed;
        inset: 0;
        z-index: -2;
        pointer-events: none;
        background:
          linear-gradient(180deg, rgba(8, 10, 18, 0.4) 0%, rgba(8, 10, 18, 0.55) 55%, rgba(7, 8, 16, 0.72) 100%),
          url("../assets/site-bg.png") center top / cover no-repeat;
      }

      /* fine grain for a premium, less-flat surface */
      body::after {
        content: "";
        position: fixed;
        inset: 0;
        z-index: -1;
        pointer-events: none;
        opacity: 0.035;
        mix-blend-mode: soft-light;
        background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
      }

      h1,
      h2,
      h3,
      .brand {
        font-family: "Sora", "Inter", sans-serif;
        letter-spacing: -0.02em;
      }

      a {
        color: inherit;
        text-decoration: none;
      }

      img {
        max-width: 100%;
        display: block;
        -webkit-user-drag: none;
        -khtml-user-drag: none;
        -moz-user-drag: none;
        user-drag: none;
        -webkit-user-select: none;
        user-select: none;
        -webkit-touch-callout: none;
      }

      .container {
        width: 100%;
        max-width: var(--maxw);
        margin: 0 auto;
        padding: 0 24px;
      }

      .accent {
        color: var(--accent);
      }

      /* ===================== BUTTONS ===================== */
      .btn {
        display: inline-flex;
        align-items: center;
        gap: 10px;
        font-family: "Inter", sans-serif;
        font-weight: 600;
        font-size: 15px;
        border: none;
        border-radius: 12px;
        padding: 14px 22px;
        cursor: pointer;
        transition: transform 0.18s ease, box-shadow 0.18s ease,
          background 0.18s ease;
      }

      .btn-primary {
        background: var(--accent);
        color: #0c0e18;
        box-shadow: 0 12px 30px -10px rgba(154, 158, 242, 0.6);
      }

      .btn-primary:hover {
        background: #aeb2f6;
        transform: translateY(-2px);
      }

      .btn svg {
        width: 18px;
        height: 18px;
      }

      /* ===================== HEADER (light floating pill) ===================== */
      .site-header {
        position: sticky;
        top: 0;
        z-index: 50;
        padding: 18px 0;
        transition: padding 0.3s ease;
      }
      .site-header.scrolled {
        padding: 10px 0;
      }

      .nav-pill {
        --pill-text: #f4f5fb;
        --pill-muted: #9aa0b8;
        position: relative;
        display: flex;
        align-items: center;
        gap: 22px;
        height: 60px;
        padding: 0 12px 0 22px;
        border-radius: 999px;
        background: transparent;
        box-shadow: 0 0 0 0 rgba(0, 0, 0, 0);
        transition: background 0.4s ease, box-shadow 0.4s ease,
          backdrop-filter 0.4s ease;
      }
      /* hairline border — invisible at top, fades in on scroll */
      .nav-pill::before {
        content: "";
        position: absolute;
        inset: 0;
        border-radius: inherit;
        padding: 1px;
        background: linear-gradient(
          135deg,
          rgba(255, 255, 255, 0.16),
          rgba(255, 255, 255, 0.02) 45%,
          color-mix(in srgb, var(--accent) 22%, transparent) 85%
        );
        -webkit-mask: linear-gradient(#000 0 0) content-box,
          linear-gradient(#000 0 0);
        -webkit-mask-composite: xor;
        mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
        mask-composite: exclude;
        opacity: 0;
        transition: opacity 0.4s ease;
        pointer-events: none;
      }
      .site-header.scrolled .nav-pill {
        background: rgba(10, 12, 20, 0.65);
        backdrop-filter: blur(22px) saturate(150%);
        -webkit-backdrop-filter: blur(22px) saturate(150%);
        box-shadow: 0 20px 50px -26px rgba(0, 0, 0, 0.9),
          inset 0 1px 0 rgba(255, 255, 255, 0.05);
      }
      .site-header.scrolled .nav-pill::before {
        opacity: 1;
      }

      .brand {
        display: inline-flex;
        align-items: center;
        gap: 10px;
        font-size: 20px;
        font-weight: 700;
        letter-spacing: -0.01em;
        color: var(--pill-text);
        flex-shrink: 0;
      }
      .brand-mark {
        width: 34px;
        height: 34px;
        border-radius: 10px;
        object-fit: contain;
        display: block;
        flex-shrink: 0;
        transition: transform 0.25s cubic-bezier(0.2, 0.7, 0.2, 1),
          filter 0.25s ease;
      }
      .brand:hover .brand-mark {
        transform: rotate(-4deg) scale(1.06);
        filter: drop-shadow(
          0 6px 16px color-mix(in srgb, var(--accent) 55%, transparent)
        );
      }

      .nav-links {
        display: flex;
        align-items: center;
        gap: 4px;
        list-style: none;
        font-size: 14.5px;
        font-weight: 500;
        margin: 0;
      }
      .nav-links a {
        position: relative;
        display: block;
        padding: 9px 13px;
        border-radius: 999px;
        color: var(--pill-muted);
        transition: color 0.16s ease, background 0.16s ease;
      }
      .nav-links a:hover {
        color: var(--pill-text);
        background: rgba(255, 255, 255, 0.07);
      }
      .nav-links a.active {
        color: var(--pill-text);
        font-weight: 600;
      }
      .nav-links a.active::after {
        content: "";
        position: absolute;
        left: 13px;
        right: 13px;
        bottom: 3px;
        height: 2px;
        border-radius: 2px;
        background: linear-gradient(90deg, var(--accent), var(--accent-2));
        box-shadow: 0 0 10px color-mix(in srgb, var(--accent) 70%, transparent);
      }

      .nav-actions {
        margin-left: auto;
        display: flex;
        align-items: center;
        gap: 4px;
      }
      /* divider between nav and actions */
      .nav-actions::before {
        content: "";
        width: 1px;
        height: 24px;
        margin: 0 8px 0 4px;
        background: linear-gradient(
          180deg,
          transparent,
          rgba(255, 255, 255, 0.14),
          transparent
        );
      }

      /* language toggle */
      .lang-toggle {
        display: inline-flex;
        align-items: center;
        padding: 3px;
        border-radius: 999px;
        background: rgba(255, 255, 255, 0.06);
        gap: 2px;
      }
      .lang-toggle button {
        border: none;
        background: none;
        cursor: pointer;
        font-family: inherit;
        font-size: 12.5px;
        font-weight: 600;
        color: var(--pill-muted);
        padding: 5px 10px;
        border-radius: 999px;
        transition: color 0.16s ease, background 0.16s ease,
          box-shadow 0.16s ease;
      }
      .lang-toggle button.active {
        color: var(--pill-text);
        background: color-mix(in srgb, var(--accent) 30%, transparent);
        box-shadow: inset 0 0 0 1px
          color-mix(in srgb, var(--accent) 45%, transparent);
      }

      .icon-btn {
        width: 38px;
        height: 38px;
        border-radius: 999px;
        background: none;
        border: none;
        color: var(--pill-muted);
        cursor: pointer;
        display: grid;
        place-items: center;
        position: relative;
        transition: color 0.16s ease, background 0.16s ease;
      }
      .icon-btn:hover {
        color: var(--pill-text);
        background: rgba(255, 255, 255, 0.08);
      }
      .icon-btn svg {
        width: 19px;
        height: 19px;
      }

      /* primary CTA in the pill */
      .pill-cta {
        position: relative;
        display: inline-flex;
        align-items: center;
        gap: 7px;
        height: 42px;
        padding: 0 19px;
        border-radius: 999px;
        font-size: 14px;
        font-weight: 600;
        color: #fff;
        overflow: hidden;
        background: linear-gradient(135deg, var(--accent), var(--accent-2));
        box-shadow: 0 10px 26px -10px color-mix(in srgb, var(--accent) 80%, #000),
          inset 0 1px 0 rgba(255, 255, 255, 0.28);
        transition: transform 0.18s ease, box-shadow 0.18s ease,
          filter 0.18s ease;
        white-space: nowrap;
      }
      /* moving gloss */
      .pill-cta::before {
        content: "";
        position: absolute;
        top: 0;
        left: -80%;
        width: 60%;
        height: 100%;
        background: linear-gradient(
          100deg,
          transparent,
          rgba(255, 255, 255, 0.35),
          transparent
        );
        transform: skewX(-18deg);
        transition: left 0.6s ease;
      }
      .pill-cta:hover {
        transform: translateY(-1px);
        filter: brightness(1.05);
        box-shadow: 0 16px 34px -10px color-mix(in srgb, var(--accent) 80%, #000),
          inset 0 1px 0 rgba(255, 255, 255, 0.28);
      }
      .pill-cta:hover::before {
        left: 120%;
      }
      .pill-cta svg {
        position: relative;
        width: 16px;
        height: 16px;
        transition: transform 0.18s ease;
      }
      .pill-cta:hover svg {
        transform: translateX(3px);
      }

      .cart-badge {
        position: absolute;
        top: -1px;
        right: -1px;
        background: linear-gradient(145deg, var(--accent), var(--accent-2));
        color: #fff;
        font-size: 10px;
        line-height: 1;
        font-weight: 700;
        min-width: 18px;
        height: 18px;
        border-radius: 999px;
        display: grid;
        place-items: center;
        padding: 0 4px;
        font-family: "Inter", sans-serif;
        border: 2px solid #0b0d16;
        box-shadow: 0 2px 8px -2px color-mix(in srgb, var(--accent) 80%, #000);
      }

      @media (max-width: 900px) {
        .nav-links,
        .pill-cta span {
          display: none;
        }
      }

      /* ===================== HERO ===================== */
      .hero {
        position: relative;
        min-height: 800px;
        display: flex;
        flex-direction: column;
        overflow: hidden;
      }

      /* full-bleed background photo */
      .hero-photo {
        position: absolute;
        inset: 0;
        z-index: 0;
      }

      /* keyboard overlay (transparent PNG) on top of the texture */
      .hero-kb {
        position: absolute;
        right: calc(50% - 940px);
        top: 50%;
        transform: translateY(-50%);
        height: 74%;
        max-height: 600px;
        width: auto;
        object-fit: contain;
        z-index: 1;
        pointer-events: none;
        filter: drop-shadow(0 34px 54px rgba(0, 0, 0, 0.5));
      }

      @media (max-width: 980px) {
        .hero-kb {
          position: relative;
          right: 0;
          top: 0;
          transform: none;
          width: 100%;
          max-width: 520px;
          margin: 24px auto 0;
        }
      }

      /* legibility gradient so the text side stays dark */
      .hero-photo::after {
        content: "";
        position: absolute;
        inset: 0;
        background: radial-gradient(
          65% 75% at 24% 42%,
          rgba(8, 10, 18, 0.72) 0%,
          rgba(8, 10, 18, 0.35) 45%,
          rgba(8, 10, 18, 0) 72%
        );
      }

      .hero-overlay {
        position: relative;
        z-index: 2;
        flex: 1;
        display: flex;
        align-items: center;
        padding-top: 40px;
      }

      /* eyebrow badge */
      .hero-eyebrow {
        display: inline-flex;
        align-items: center;
        gap: 9px;
        margin-bottom: 22px;
        padding: 7px 15px 7px 12px;
        border-radius: 999px;
        font-size: 13px;
        font-weight: 600;
        letter-spacing: 0.01em;
        color: var(--text);
        background: rgba(255, 255, 255, 0.05);
        border: 1px solid rgba(255, 255, 255, 0.09);
        backdrop-filter: blur(10px);
        -webkit-backdrop-filter: blur(10px);
      }
      .hero-eyebrow-dot {
        width: 8px;
        height: 8px;
        border-radius: 999px;
        background: var(--accent);
        box-shadow: 0 0 0 0 color-mix(in srgb, var(--accent) 60%, transparent);
        animation: heroPulse 2.4s ease-out infinite;
      }
      @keyframes heroPulse {
        0% {
          box-shadow: 0 0 0 0 color-mix(in srgb, var(--accent) 55%, transparent);
        }
        70% {
          box-shadow: 0 0 0 8px transparent;
        }
        100% {
          box-shadow: 0 0 0 0 transparent;
        }
      }

      .hero-title {
        font-size: clamp(44px, 6vw, 74px);
        line-height: 1.02;
        font-weight: 700;
      }

      .hero-lead {
        margin-top: 24px;
        color: var(--muted);
        font-size: 17px;
        max-width: 420px;
        line-height: 1.6;
      }

      .hero-cta {
        margin-top: 34px;
        display: flex;
        align-items: center;
        gap: 12px;
        flex-wrap: wrap;
      }
      .btn-ghost {
        background: rgba(255, 255, 255, 0.04);
        border: 1px solid rgba(255, 255, 255, 0.12);
        color: var(--text);
        backdrop-filter: blur(10px);
        -webkit-backdrop-filter: blur(10px);
      }
      .btn-ghost:hover {
        background: rgba(255, 255, 255, 0.09);
        border-color: rgba(255, 255, 255, 0.2);
        transform: translateY(-2px);
      }

      /* social proof */
      .hero-proof {
        margin-top: 30px;
        display: flex;
        align-items: center;
        gap: 12px;
        flex-wrap: wrap;
      }
      .hero-stars {
        display: inline-flex;
        gap: 2px;
        color: #f0b64b;
      }
      .hero-stars svg {
        width: 17px;
        height: 17px;
        filter: drop-shadow(0 1px 3px rgba(240, 182, 75, 0.35));
      }
      .hero-proof-text {
        font-size: 14px;
        color: var(--muted);
      }
      .hero-proof-text b {
        color: var(--text);
        font-weight: 600;
      }

      .hero-features-wrap {
        position: relative;
        z-index: 2;
        padding-bottom: 46px;
      }

      /* ===================== FEATURE BAR ===================== */
      .features {
        display: flex;
        gap: 54px;
        flex-wrap: wrap;
      }

      .feature {
        display: flex;
        align-items: center;
        gap: 14px;
      }

      .feature-ico {
        width: 40px;
        height: 40px;
        border-radius: 10px;
        display: grid;
        place-items: center;
        background: var(--surface-2);
        border: 1px solid var(--border);
        color: var(--accent);
        flex-shrink: 0;
      }

      .feature-ico svg {
        width: 20px;
        height: 20px;
      }

      .feature-title {
        font-size: 14.5px;
        font-weight: 600;
      }

      .feature-sub {
        font-size: 13px;
        color: var(--muted-2);
      }

      /* ===================== SECTIONS ===================== */
      section {
        padding: 48px 0;
        scroll-margin-top: 92px;
      }
      #cart-anchor,
      [id] {
        scroll-margin-top: 92px;
      }

      .section-head {
        display: flex;
        align-items: flex-end;
        justify-content: space-between;
        margin-bottom: 26px;
      }

      .section-title {
        font-size: clamp(24px, 3vw, 30px);
        font-weight: 600;
      }

      .link-more {
        display: inline-flex;
        align-items: center;
        gap: 8px;
        font-size: 14px;
        color: var(--muted);
        font-weight: 500;
        transition: color 0.15s, gap 0.15s;
      }

      .link-more:hover {
        color: var(--text);
        gap: 12px;
      }

      .link-more svg {
        width: 16px;
        height: 16px;
      }

      /* ===================== KEYCAP ILLUSTRATION ===================== */
      .thumb-scene {
        position: absolute;
        inset: 0;
        display: grid;
        place-items: center;
        overflow: hidden;
        background: radial-gradient(
          120% 120% at 50% 16%,
          color-mix(in srgb, var(--cap) 20%, #0e1019) 0%,
          #0b0d15 56%,
          #090a11 100%
        );
      }

      .thumb-scene::before {
        content: "";
        position: absolute;
        width: 80%;
        aspect-ratio: 1;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -52%);
        background: radial-gradient(
          circle,
          color-mix(in srgb, var(--cap) 45%, transparent) 0%,
          transparent 62%
        );
        filter: blur(8px);
        opacity: 0.5;
        transition: opacity 0.35s ease, transform 0.45s ease;
      }

      /* subtle dotted grid texture */
      .thumb-scene::after {
        content: "";
        position: absolute;
        inset: 0;
        background-image: radial-gradient(
          rgba(255, 255, 255, 0.05) 1px,
          transparent 1px
        );
        background-size: 16px 16px;
        opacity: 0.5;
        mask-image: radial-gradient(circle at 50% 45%, #000 30%, transparent 75%);
      }

      .keycap {
        position: relative;
        z-index: 1;
        width: 45%;
        max-width: 128px;
        filter: drop-shadow(0 18px 22px rgba(0, 0, 0, 0.55));
        transition: transform 0.45s cubic-bezier(0.2, 0.7, 0.2, 1);
      }

      .keycap .kc-left {
        fill: color-mix(in srgb, var(--cap) 60%, #05060a);
      }
      .keycap .kc-right {
        fill: color-mix(in srgb, var(--cap) 38%, #05060a);
      }
      .keycap .kc-top {
        fill: var(--cap);
      }
      .keycap .kc-hi {
        fill: color-mix(in srgb, var(--cap) 65%, #fff);
        opacity: 0.22;
      }

      /* wide keyboard art */
      .keycap.kb {
        width: 84%;
        max-width: 224px;
      }

      /* product/category photos */
      .thumb-img {
        position: absolute;
        inset: 0;
        width: 100%;
        height: 100%;
        object-fit: cover;
        z-index: 1;
        transition: transform 0.45s cubic-bezier(0.2, 0.7, 0.2, 1);
      }

      .cat-card:hover .thumb-img {
        transform: scale(1.05);
      }

      .banner-img {
        position: absolute;
        inset: 0;
        width: 100%;
        height: 100%;
        object-fit: cover;
      }

      /* symbol palette — inherited into <use> shadow content via custom props */
      .thumb-scene,
      .banner-media {
        --c-case: color-mix(in srgb, var(--cap) 24%, #12131b);
        --c-caseStroke: color-mix(in srgb, var(--cap) 28%, #2a2c36);
        --c-plate: #0a0b11;
        --c-key: color-mix(in srgb, var(--cap) 18%, #3a3e4a);
        --c-accent: var(--cap);
        --c-swbase: #22242e;
        --c-swtop: color-mix(in srgb, var(--cap) 22%, #2d3039);
        --c-stem: var(--cap);
        --c-leg: #4b4f5b;
        --c-kct: color-mix(in srgb, var(--cap) 14%, #3a3e4a);
        --c-kcl: color-mix(in srgb, var(--cap) 10%, #212530);
        --c-kcr: #181a22;
        --c-kcAt: var(--cap);
        --c-kcAl: color-mix(in srgb, var(--cap) 58%, #000);
        --c-kcAr: color-mix(in srgb, var(--cap) 38%, #000);
        --c-conn: #2a2d38;
        --c-tip: #4b4f5b;
        --c-wire: #3a3e4a;
        --c-coil: color-mix(in srgb, var(--cap) 34%, #3a3e4a);
        --c-av: var(--cap);
      }

      /* ===================== CATEGORY GRID ===================== */
      .cat-grid {
        display: grid;
        grid-template-columns: repeat(2, 1fr);
        gap: 24px;
      }

      .cat-card {
        position: relative;
        border-radius: var(--radius-lg);
        overflow: hidden;
        aspect-ratio: 3 / 1;
        border: 1px solid var(--border);
        background: radial-gradient(
          130% 130% at 72% 0%,
          #191d2b 0%,
          #0f1119 55%,
          #0c0d15 100%
        );
        display: flex;
        align-items: center;
        transition: transform 0.25s ease, border-color 0.25s ease,
          box-shadow 0.25s ease;
      }

      .cat-card:hover {
        transform: translateY(-4px);
        border-color: var(--border-strong);
        box-shadow: 0 24px 50px -26px rgba(0, 0, 0, 0.8);
      }

      /* photo on the right, blended into the card */
      .cat-card .thumb-scene {
        position: absolute;
        inset: 0;
        width: 100%;
        background: none;
      }
      .cat-card .thumb-scene::before,
      .cat-card .thumb-scene::after {
        display: none;
      }
      .cat-card .thumb-img {
        object-fit: cover;
        z-index: 0;
      }
      .cat-card::after {
        content: "";
        position: absolute;
        inset: 0;
        z-index: 1;
        background: linear-gradient(
          90deg,
          rgba(9, 10, 17, 0.96) 0%,
          rgba(9, 10, 17, 0.8) 28%,
          rgba(9, 10, 17, 0.3) 46%,
          rgba(9, 10, 17, 0) 62%
        );
        pointer-events: none;
      }

      .cat-body {
        position: relative;
        z-index: 2;
        padding-left: 42px;
      }

      .cat-name {
        font-size: 30px;
        font-weight: 600;
        font-family: "Sora", sans-serif;
      }

      .cat-explore {
        margin-top: 10px;
        font-size: 15px;
        color: var(--accent);
        display: inline-flex;
        align-items: center;
        gap: 8px;
        transition: gap 0.2s ease;
      }

      .cat-card:hover .cat-explore {
        gap: 12px;
      }

      .cat-explore svg {
        width: 16px;
        height: 16px;
      }

      /* ===================== PRODUCT GRID ===================== */
      .product-grid {
        display: grid;
        grid-template-columns: repeat(auto-fit, minmax(198px, 1fr));
        gap: 16px;
      }

      .product-card {
        position: relative;
        background: linear-gradient(180deg, rgba(27, 30, 47, 0.6) 0%, var(--surface) 58%);
        border: 1px solid var(--border);
        border-radius: var(--radius);
        overflow: hidden;
        box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.04);
        transition: transform 0.3s cubic-bezier(0.2, 0.7, 0.2, 1),
          border-color 0.3s ease, box-shadow 0.3s ease;
      }

      /* top accent sheen — brightens on hover */
      .product-card::after {
        content: "";
        position: absolute;
        top: 0;
        left: 18%;
        right: 18%;
        height: 1px;
        z-index: 4;
        background: linear-gradient(
          90deg,
          transparent,
          color-mix(in srgb, var(--cap) 65%, transparent),
          transparent
        );
        opacity: 0.5;
        transition: opacity 0.3s ease, left 0.3s ease, right 0.3s ease;
      }

      .product-card:hover {
        transform: translateY(-8px);
        border-color: color-mix(in srgb, var(--cap) 42%, var(--border-strong));
        box-shadow: 0 26px 50px -28px rgba(0, 0, 0, 0.8),
          0 0 46px -24px color-mix(in srgb, var(--cap) 90%, transparent);
      }
      .product-card:hover::after {
        opacity: 1;
        left: 6%;
        right: 6%;
      }

      .product-card:hover .keycap {
        transform: translateY(-9px);
      }

      .product-card:hover .thumb-scene::before {
        opacity: 1;
        transform: translate(-50%, -52%) scale(1.12);
      }

      .product-thumb {
        aspect-ratio: 1 / 1;
        position: relative;
        overflow: hidden;
      }

      /* blend the photo seamlessly into the card body */
      .product-thumb::after {
        content: "";
        position: absolute;
        inset: auto 0 -1px 0;
        height: 46%;
        z-index: 2;
        background: linear-gradient(to bottom, transparent, var(--surface) 92%);
        pointer-events: none;
      }

      .badge {
        position: absolute;
        top: 12px;
        left: 12px;
        z-index: 3;
        font-size: 11px;
        font-weight: 600;
        letter-spacing: 0.02em;
        padding: 5px 10px;
        border-radius: 999px;
        background: color-mix(in srgb, var(--cap) 20%, rgba(12, 14, 22, 0.72));
        color: color-mix(in srgb, var(--cap) 72%, #fff);
        border: 1px solid color-mix(in srgb, var(--cap) 40%, transparent);
        backdrop-filter: blur(6px);
      }

      .wish-btn {
        position: absolute;
        top: 11px;
        right: 11px;
        z-index: 3;
        width: 34px;
        height: 34px;
        border-radius: 999px;
        display: grid;
        place-items: center;
        cursor: pointer;
        background: rgba(12, 14, 22, 0.55);
        border: 1px solid var(--border);
        color: var(--muted);
        backdrop-filter: blur(6px);
        transition: color 0.15s, background 0.15s, transform 0.15s;
      }

      .wish-btn:hover {
        color: #ff7a9c;
        background: rgba(12, 14, 22, 0.82);
        transform: scale(1.06);
      }

      .wish-btn svg {
        width: 16px;
        height: 16px;
      }

      .product-body {
        padding: 12px 14px 14px;
        position: relative;
        z-index: 3;
      }

      .product-top {
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: 10px;
      }

      .product-name {
        font-size: 15px;
        font-weight: 600;
        font-family: "Sora", sans-serif;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
      }

      .rating {
        display: inline-flex;
        align-items: center;
        gap: 5px;
        font-size: 12.5px;
        font-weight: 700;
        color: #f4c56a;
        flex-shrink: 0;
        background: rgba(244, 197, 106, 0.09);
        border: 1px solid rgba(244, 197, 106, 0.22);
        padding: 3px 9px;
        border-radius: 999px;
      }

      .rating svg {
        width: 13px;
        height: 13px;
        color: #f6c344;
      }

      .product-cat {
        font-size: 12.5px;
        color: var(--muted-2);
        margin-top: 3px;
      }

      .product-foot {
        margin-top: 16px;
        padding-top: 15px;
        border-top: 1px solid var(--border);
        display: flex;
        align-items: center;
        justify-content: space-between;
      }

      .product-price {
        font-size: 20px;
        font-weight: 800;
        font-family: "Sora", sans-serif;
        font-variant-numeric: tabular-nums;
        letter-spacing: -0.01em;
      }

      .add-btn {
        height: 40px;
        padding: 0 18px;
        border-radius: 999px;
        border: 1px solid var(--border-strong);
        background: rgba(255, 255, 255, 0.04);
        color: var(--text);
        display: inline-flex;
        align-items: center;
        gap: 8px;
        font-size: 13.5px;
        font-weight: 600;
        font-family: "Inter", sans-serif;
        cursor: pointer;
        transition: background 0.18s, color 0.18s, border-color 0.18s,
          transform 0.18s, box-shadow 0.18s;
      }

      .add-btn:hover {
        background: var(--accent);
        border-color: var(--accent);
        color: #0c0e18;
        transform: translateY(-2px);
        box-shadow: 0 10px 22px -8px color-mix(in srgb, var(--accent) 70%, #000);
      }

      .add-btn svg {
        width: 16px;
        height: 16px;
      }

      @media (prefers-reduced-motion: reduce) {
        .keycap,
        .cat-card,
        .product-card,
        .thumb-scene::before {
          transition: none !important;
        }
      }

      /* entrance reveal — pure CSS so it always finishes visible.
         html.anim is set synchronously (inline <head> script) so the
         "from" state applies before first paint = no flash. */
      @keyframes kbReveal {
        from {
          opacity: 0;
          transform: translateY(22px);
        }
        to {
          opacity: 1;
          transform: none;
        }
      }
      html.anim .section-head,
      html.anim .cat-card,
      html.anim .product-card,
      html.anim .banner,
      html.anim .stats {
        animation: kbReveal 0.6s cubic-bezier(0.2, 0.7, 0.2, 1) both;
      }
      /* clean left→right / top→bottom cascade within a grid */
      html.anim .product-card:nth-child(1) { animation-delay: 0.02s; }
      html.anim .product-card:nth-child(2) { animation-delay: 0.08s; }
      html.anim .product-card:nth-child(3) { animation-delay: 0.14s; }
      html.anim .product-card:nth-child(4) { animation-delay: 0.20s; }
      html.anim .product-card:nth-child(5) { animation-delay: 0.26s; }
      html.anim .product-card:nth-child(6) { animation-delay: 0.30s; }
      html.anim .product-card:nth-child(n + 7) { animation-delay: 0.34s; }
      @media (prefers-reduced-motion: reduce) {
        html.anim .section-head,
        html.anim .cat-card,
        html.anim .product-card,
        html.anim .banner,
        html.anim .stats {
          animation: none !important;
        }
      }

      /* ===================== POLISH & MOTION ===================== */
      /* ambient background glow */
      body::before {
        display: none;
      }
      @keyframes auroraShift {
        from {
          transform: translate3d(0, 0, 0);
        }
        to {
          transform: translate3d(0, -26px, 0);
        }
      }

      /* eyebrow label */
      .eyebrow {
        display: inline-block;
        font-size: 12px;
        font-weight: 600;
        letter-spacing: 0.14em;
        text-transform: uppercase;
        color: var(--accent);
        padding: 6px 12px;
        border: 1px solid color-mix(in srgb, var(--accent) 30%, transparent);
        border-radius: 999px;
        background: color-mix(in srgb, var(--accent) 9%, transparent);
        margin-bottom: 14px;
      }

      .section-sub {
        color: var(--muted);
        font-size: 15px;
        margin-top: 8px;
        max-width: 460px;
      }

      /* nav pill hover handled in header block */

      /* button shine sweep */
      .btn-primary {
        position: relative;
        overflow: hidden;
      }
      .btn-primary::after {
        content: "";
        position: absolute;
        top: 0;
        left: -130%;
        width: 55%;
        height: 100%;
        background: linear-gradient(
          100deg,
          transparent,
          rgba(255, 255, 255, 0.35),
          transparent
        );
        transform: skewX(-18deg);
        pointer-events: none;
      }
      .btn-primary:hover::after {
        animation: shine 0.85s ease;
      }
      @keyframes shine {
        to {
          left: 135%;
        }
      }

      /* hero entrance */
      @keyframes fadeUp {
        from {
          opacity: 0;
          transform: translateY(20px);
        }
        to {
          opacity: 1;
          transform: none;
        }
      }
      .anim .hero-eyebrow {
        animation: fadeUp 0.8s 0.02s both cubic-bezier(0.2, 0.7, 0.2, 1);
      }
      .anim .hero-title {
        animation: fadeUp 0.8s 0.12s both cubic-bezier(0.2, 0.7, 0.2, 1);
      }
      .anim .hero-lead {
        animation: fadeUp 0.8s 0.26s both cubic-bezier(0.2, 0.7, 0.2, 1);
      }
      .anim .hero-cta {
        animation: fadeUp 0.8s 0.38s both cubic-bezier(0.2, 0.7, 0.2, 1);
      }
      .anim .hero-proof {
        animation: fadeUp 0.8s 0.5s both cubic-bezier(0.2, 0.7, 0.2, 1);
      }
      .anim .features {
        animation: fadeUp 0.8s 0.6s both cubic-bezier(0.2, 0.7, 0.2, 1);
      }

      /* shimmering accent word */
      .hero-title .accent {
        background: linear-gradient(
          90deg,
          #9a9ef2 0%,
          #cdb8f2 50%,
          #9a9ef2 100%
        );
        background-size: 220% 100%;
        -webkit-background-clip: text;
        background-clip: text;
        color: transparent;
        animation: shimmer 7s linear infinite;
      }
      @keyframes shimmer {
        to {
          background-position: 220% 0;
        }
      }

      @media (prefers-reduced-motion: reduce) {
        body::before,
        .hero-title .accent,
        .hero-eyebrow-dot {
          animation: none;
        }
        .anim .hero-eyebrow,
        .anim .hero-title,
        .anim .hero-lead,
        .anim .hero-cta,
        .anim .hero-proof,
        .anim .features {
          animation: none;
        }
      }

      /* ===================== BANNER ===================== */
      .banner {
        position: relative;
        border-radius: var(--radius-lg);
        overflow: hidden;
        border: none;
        background: #0f1018;
        display: flex;
        align-items: center;
        min-height: 420px;
      }

      /* legibility gradient over the full-bleed photo */
      .banner::after {
        content: "";
        position: absolute;
        inset: 0;
        z-index: 1;
        background: linear-gradient(
          90deg,
          rgba(10, 11, 18, 0.96) 0%,
          rgba(10, 11, 18, 0.78) 30%,
          rgba(10, 11, 18, 0.15) 55%,
          rgba(10, 11, 18, 0) 72%
        );
        pointer-events: none;
      }

      .banner-body {
        padding: 54px 50px;
        position: relative;
        z-index: 2;
        max-width: 460px;
      }

      .banner h2 {
        font-size: clamp(30px, 3.5vw, 40px);
        font-weight: 700;
        line-height: 1.05;
      }

      .banner-body .eyebrow {
        margin-bottom: 16px;
      }

      .banner p {
        margin-top: 16px;
        color: var(--muted);
        max-width: 320px;
        font-size: 15.5px;
        line-height: 1.55;
      }

      .banner-feats {
        list-style: none;
        margin: 22px 0 0;
        padding: 0;
        display: flex;
        flex-direction: column;
        gap: 12px;
      }
      .banner-feats li {
        display: flex;
        align-items: center;
        gap: 11px;
        font-size: 14.5px;
        color: var(--text);
      }
      .banner-feats svg {
        width: 15px;
        height: 15px;
        flex-shrink: 0;
        color: var(--accent);
        padding: 5px;
        border-radius: 999px;
        background: color-mix(in srgb, var(--accent) 16%, transparent);
        box-sizing: content-box;
      }

      .banner-cta {
        margin-top: 30px;
      }

      .banner-media {
        position: absolute;
        inset: 0;
        z-index: 0;
      }

      .banner-media {
        background: radial-gradient(
          80% 100% at 70% 45%,
          color-mix(in srgb, var(--cap) 22%, transparent) 0%,
          transparent 60%
        );
      }

      .banner-kb {
        position: absolute;
        inset: 0;
        width: 100%;
        height: 100%;
        filter: drop-shadow(0 22px 30px rgba(0, 0, 0, 0.5));
      }

      /* ===================== STATS ===================== */
      .stats {
        display: grid;
        grid-template-columns: repeat(4, 1fr);
        gap: 18px;
      }

      .stat {
        display: flex;
        align-items: center;
        gap: 16px;
        padding: 26px 24px;
        border-radius: 20px;
        border: 1px solid var(--border);
        background: linear-gradient(
          160deg,
          rgba(32, 35, 52, 0.6),
          rgba(15, 18, 29, 0.6)
        );
        position: relative;
        overflow: hidden;
        transition: transform 0.28s cubic-bezier(0.2, 0.7, 0.2, 1),
          border-color 0.28s ease, box-shadow 0.28s ease;
      }

      /* top accent line on hover */
      .stat::before {
        content: "";
        position: absolute;
        top: 0;
        left: 0;
        right: 0;
        height: 2px;
        background: linear-gradient(90deg, transparent, var(--accent), transparent);
        opacity: 0;
        transition: opacity 0.28s ease;
      }

      .stat:hover {
        transform: translateY(-5px);
        border-color: color-mix(in srgb, var(--accent) 45%, var(--border-strong));
        box-shadow: 0 22px 44px -24px color-mix(in srgb, var(--accent) 55%, #000);
      }

      .stat:hover::before {
        opacity: 1;
      }

      .stat-ico {
        width: 50px;
        height: 50px;
        border-radius: 14px;
        display: grid;
        place-items: center;
        background: color-mix(in srgb, var(--accent) 12%, var(--surface-2));
        border: 1px solid var(--border);
        color: var(--accent);
        flex-shrink: 0;
        transition: transform 0.3s cubic-bezier(0.2, 0.7, 0.2, 1);
      }

      .stat:hover .stat-ico {
        transform: scale(1.08) rotate(-3deg);
      }

      .stat-ico svg {
        width: 23px;
        height: 23px;
      }

      .stat-num {
        font-size: 28px;
        font-weight: 700;
        font-family: "Sora", sans-serif;
        line-height: 1.05;
        background: linear-gradient(180deg, #ffffff, #c7cad9);
        -webkit-background-clip: text;
        background-clip: text;
        color: transparent;
      }

      .stat-label {
        font-size: 13px;
        color: var(--muted);
        margin-top: 4px;
      }

      /* ===================== FOOTER ===================== */
      .footer {
        margin-top: 48px;
        position: relative;
        border-top: 1px solid var(--border);
        background: linear-gradient(
          180deg,
          rgba(18, 21, 34, 0.55) 0%,
          rgba(8, 10, 18, 0.92) 100%
        );
      }
      /* glowing top seam */
      .footer::before {
        content: "";
        position: absolute;
        top: -1px;
        left: 50%;
        transform: translateX(-50%);
        width: 55%;
        height: 1px;
        background: linear-gradient(
          90deg,
          transparent,
          color-mix(in srgb, var(--accent) 65%, transparent),
          transparent
        );
      }

      /* newsletter CTA card */
      .footer-cta {
        position: relative;
        margin-top: 56px;
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: 40px;
        flex-wrap: wrap;
        padding: 34px 40px;
        border-radius: var(--radius-lg);
        overflow: hidden;
        background: linear-gradient(
          135deg,
          color-mix(in srgb, var(--accent) 16%, rgba(18, 21, 34, 0.9)),
          rgba(14, 16, 26, 0.9)
        );
        border: 1px solid rgba(255, 255, 255, 0.08);
        box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.06);
      }
      .footer-cta-glow {
        position: absolute;
        top: -60%;
        right: -5%;
        width: 380px;
        height: 380px;
        border-radius: 50%;
        background: radial-gradient(
          circle,
          color-mix(in srgb, var(--accent) 40%, transparent),
          transparent 65%
        );
        filter: blur(20px);
        pointer-events: none;
      }
      .footer-cta-text {
        position: relative;
        z-index: 1;
        display: flex;
        align-items: center;
        gap: 18px;
      }
      .footer-cta-mark {
        width: 52px;
        height: 52px;
        flex-shrink: 0;
        object-fit: contain;
      }
      .footer-cta-text h3 {
        font-family: "Sora", sans-serif;
        font-size: 22px;
        font-weight: 700;
        letter-spacing: -0.01em;
      }
      .footer-cta-text p {
        margin-top: 6px;
        color: var(--muted);
        font-size: 14px;
        max-width: 380px;
        line-height: 1.55;
      }

      .footer-grid {
        display: grid;
        grid-template-columns: 1.8fr 1fr 1fr 1fr;
        gap: 48px;
        padding: 56px 0 20px;
      }

      .footer .brand {
        font-size: 21px;
        display: inline-flex;
        align-items: center;
        gap: 10px;
      }
      .footer .brand .brand-mark {
        width: 32px;
        height: 32px;
      }

      .footer-about {
        margin-top: 16px;
        color: var(--muted);
        font-size: 14px;
        max-width: 270px;
        line-height: 1.7;
      }

      .socials {
        margin-top: 24px;
        display: flex;
        gap: 12px;
      }

      .socials a {
        width: 40px;
        height: 40px;
        border-radius: 11px;
        display: grid;
        place-items: center;
        color: var(--muted);
        border: 1px solid var(--border);
        background: var(--surface);
        transition: color 0.18s, background 0.18s, border-color 0.18s,
          transform 0.18s;
      }
      .socials a:hover {
        color: #0c0e18;
        background: var(--accent);
        border-color: var(--accent);
        transform: translateY(-3px);
      }
      .socials svg {
        width: 18px;
        height: 18px;
      }

      .footer-col h4 {
        font-size: 12px;
        font-weight: 600;
        font-family: "Sora", sans-serif;
        letter-spacing: 0.14em;
        text-transform: uppercase;
        color: var(--muted-2);
        margin-bottom: 18px;
      }

      .footer-col ul {
        list-style: none;
        display: flex;
        flex-direction: column;
        gap: 12px;
      }

      .footer-col a {
        position: relative;
        color: var(--muted);
        font-size: 14px;
        padding-left: 0;
        transition: color 0.16s ease, padding-left 0.16s ease;
      }
      .footer-col a::before {
        content: "";
        position: absolute;
        left: 0;
        top: 50%;
        transform: translateY(-50%);
        width: 8px;
        height: 2px;
        border-radius: 2px;
        background: var(--accent);
        opacity: 0;
        transition: opacity 0.16s ease;
      }
      .footer-col a:hover {
        color: var(--text);
        padding-left: 14px;
      }
      .footer-col a:hover::before {
        opacity: 1;
      }

      .footer-news p {
        color: var(--muted);
        font-size: 14px;
        margin-bottom: 16px;
        line-height: 1.65;
      }

      .news-form {
        position: relative;
        z-index: 1;
        display: flex;
        gap: 8px;
        background: rgba(8, 10, 18, 0.55);
        border: 1px solid var(--border-strong);
        border-radius: 999px;
        padding: 6px 6px 6px 8px;
        min-width: 340px;
        transition: border-color 0.18s ease, box-shadow 0.18s ease;
      }
      .news-form:focus-within {
        border-color: color-mix(in srgb, var(--accent) 55%, var(--border-strong));
        box-shadow: 0 0 0 4px color-mix(in srgb, var(--accent) 16%, transparent);
      }

      .news-form input {
        flex: 1;
        background: none;
        border: none;
        outline: none;
        color: var(--text);
        padding: 11px 14px;
        font-size: 14px;
        font-family: "Inter", sans-serif;
      }

      .news-form input::placeholder {
        color: var(--muted-2);
      }

      .news-form button {
        display: inline-flex;
        align-items: center;
        gap: 7px;
        background: linear-gradient(135deg, var(--accent), var(--accent-2));
        border: none;
        color: #fff;
        padding: 0 20px;
        border-radius: 999px;
        font-size: 14px;
        font-weight: 600;
        font-family: "Inter", sans-serif;
        cursor: pointer;
        white-space: nowrap;
        box-shadow: 0 8px 20px -8px color-mix(in srgb, var(--accent) 80%, #000);
        transition: transform 0.15s ease, filter 0.15s ease;
      }

      .news-form button:hover {
        transform: translateY(-1px);
        filter: brightness(1.06);
      }

      .news-form button svg {
        width: 16px;
        height: 16px;
        transition: transform 0.15s ease;
      }
      .news-form button:hover svg {
        transform: translateX(3px);
      }

      /* giant faded wordmark */
      .footer-word {
        font-family: "Sora", sans-serif;
        font-weight: 800;
        font-size: clamp(70px, 15vw, 200px);
        line-height: 0.9;
        letter-spacing: -0.03em;
        text-align: center;
        margin: 8px 0 -0.14em;
        background: linear-gradient(
          180deg,
          rgba(255, 255, 255, 0.07),
          transparent 82%
        );
        -webkit-background-clip: text;
        background-clip: text;
        color: transparent;
        user-select: none;
        pointer-events: none;
      }

      .footer-bottom {
        position: relative;
        border-top: 1px solid var(--border);
        display: flex;
        align-items: center;
        justify-content: space-between;
        padding: 22px 0;
        font-size: 13px;
        color: var(--muted-2);
      }

      .footer-bottom-links {
        display: flex;
        gap: 26px;
      }

      .footer-bottom-links a {
        color: var(--muted-2);
        transition: color 0.15s;
      }

      .footer-bottom-links a:hover {
        color: var(--text);
      }

      /* keyboard illustration (svg fill) */
      .kb-illus {
        width: 100%;
        height: 100%;
      }

      /* ===================== CART ===================== */
      .wish-btn.active {
        color: #ff5c7a;
        background: rgba(255, 92, 122, 0.14);
        border-color: rgba(255, 92, 122, 0.4);
      }
      .wish-btn.active svg {
        fill: #ff5c7a;
      }

      .cart-overlay {
        position: fixed;
        inset: 0;
        background: rgba(0, 0, 0, 0.55);
        backdrop-filter: blur(2px);
        opacity: 0;
        visibility: hidden;
        transition: opacity 0.3s ease, visibility 0.3s ease;
        z-index: 90;
      }
      .cart-overlay.open {
        opacity: 1;
        visibility: visible;
      }

      .cart-drawer {
        position: fixed;
        top: 0;
        right: 0;
        height: 100%;
        width: 390px;
        max-width: 90vw;
        background: #0c0e17;
        border-left: 1px solid var(--border);
        z-index: 100;
        transform: translateX(100%);
        transition: transform 0.34s cubic-bezier(0.2, 0.7, 0.2, 1);
        display: flex;
        flex-direction: column;
        box-shadow: -30px 0 60px -30px rgba(0, 0, 0, 0.8);
      }
      .cart-drawer.open {
        transform: none;
      }
      .cart-head {
        display: flex;
        align-items: center;
        justify-content: space-between;
        padding: 22px 22px 18px;
        border-bottom: 1px solid var(--border);
      }
      .cart-head h3 {
        font-size: 18px;
        font-family: "Sora", sans-serif;
        font-weight: 600;
      }
      .cart-close {
        background: none;
        border: none;
        color: var(--muted);
        cursor: pointer;
        display: inline-flex;
        transition: color 0.15s;
      }
      .cart-close:hover {
        color: var(--text);
      }
      .cart-close svg {
        width: 22px;
        height: 22px;
      }
      .cart-items {
        flex: 1;
        overflow-y: auto;
        padding: 16px 18px;
        display: flex;
        flex-direction: column;
        gap: 14px;
      }
      .cart-empty {
        margin: auto;
        text-align: center;
        color: var(--muted-2);
        font-size: 14px;
        padding: 40px 20px;
      }
      /* header count chip */
      .cart-count {
        display: inline-grid;
        place-items: center;
        min-width: 22px;
        height: 22px;
        padding: 0 7px;
        margin-left: 6px;
        border-radius: 999px;
        background: var(--accent-soft);
        color: var(--accent);
        font-family: "Inter", sans-serif;
        font-size: 12px;
        font-weight: 700;
        vertical-align: middle;
      }

      /* cart item card */
      .cart-item {
        display: grid;
        grid-template-columns: 66px 1fr;
        gap: 13px;
        padding: 12px;
        border: 1px solid var(--border);
        border-radius: 15px;
        background: linear-gradient(180deg, var(--surface-2), var(--surface));
        transition: border-color 0.2s, transform 0.2s;
      }
      .cart-item:hover {
        border-color: color-mix(in srgb, var(--accent) 34%, transparent);
      }
      .cart-item-media {
        width: 66px;
        height: 60px;
        border-radius: 11px;
        border: 1px solid var(--border);
        background:
          radial-gradient(120% 120% at 50% 20%, rgba(255, 255, 255, 0.05), transparent 60%),
          #10121b;
        overflow: hidden;
        display: grid;
        place-items: center;
      }
      .cart-item-img {
        width: 100%;
        height: 100%;
        object-fit: contain;
        padding: 6px;
      }
      .cart-item-main {
        min-width: 0;
        display: flex;
        flex-direction: column;
        gap: 6px;
      }
      .cart-item-top {
        display: flex;
        align-items: flex-start;
        justify-content: space-between;
        gap: 8px;
      }
      .cart-item-name {
        font-size: 14.5px;
        font-weight: 600;
        font-family: "Sora", sans-serif;
        line-height: 1.25;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
      }
      .cart-item-unit {
        font-size: 12.5px;
        color: var(--muted-2);
      }
      .cart-item-bottom {
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: 10px;
        margin-top: 2px;
      }
      .cart-qty {
        display: inline-flex;
        align-items: center;
        border: 1px solid var(--border-strong);
        border-radius: 999px;
        background: var(--surface);
        overflow: hidden;
      }
      .cart-qty button {
        width: 30px;
        height: 30px;
        border: none;
        background: transparent;
        color: var(--text);
        cursor: pointer;
        font-size: 16px;
        line-height: 1;
        display: grid;
        place-items: center;
        transition: background 0.15s, color 0.15s;
      }
      .cart-qty button:hover {
        background: var(--accent-soft);
        color: var(--accent);
      }
      .cart-qty span {
        min-width: 26px;
        text-align: center;
        font-size: 14px;
        font-weight: 600;
        font-variant-numeric: tabular-nums;
      }
      .cart-item-total {
        font-size: 15px;
        font-weight: 700;
        font-family: "Sora", sans-serif;
        font-variant-numeric: tabular-nums;
      }
      .cart-remove {
        width: 28px;
        height: 28px;
        flex-shrink: 0;
        border-radius: 8px;
        background: none;
        border: none;
        color: var(--muted-2);
        cursor: pointer;
        display: grid;
        place-items: center;
        transition: color 0.15s, background 0.15s;
      }
      .cart-remove:hover {
        color: #ff5c7a;
        background: rgba(255, 92, 122, 0.1);
      }
      .cart-remove svg {
        width: 16px;
        height: 16px;
      }
      .cart-foot {
        padding: 18px 22px 22px;
        border-top: 1px solid var(--border);
        background: linear-gradient(180deg, transparent, rgba(255, 255, 255, 0.018));
      }
      .cart-total-row {
        display: flex;
        align-items: baseline;
        justify-content: space-between;
        margin-bottom: 14px;
        padding-top: 4px;
      }
      .cart-total-row span {
        color: var(--muted);
        font-size: 13px;
        text-transform: uppercase;
        letter-spacing: 0.08em;
      }
      .cart-total-row b {
        font-size: 24px;
        font-family: "Sora", sans-serif;
        font-variant-numeric: tabular-nums;
        letter-spacing: -0.01em;
      }
      .cart-foot .btn {
        width: 100%;
        justify-content: center;
      }

      /* toast */
      .toast {
        position: fixed;
        bottom: 24px;
        left: 50%;
        transform: translateX(-50%) translateY(20px);
        background: #141726;
        border: 1px solid var(--border-strong);
        color: var(--text);
        padding: 12px 18px;
        border-radius: 12px;
        font-size: 14px;
        z-index: 120;
        opacity: 0;
        pointer-events: none;
        transition: opacity 0.25s ease, transform 0.25s ease;
        box-shadow: var(--shadow);
      }
      .toast.show {
        opacity: 1;
        transform: translateX(-50%) translateY(0);
      }

      /* cart badge bump */
      .cart-badge.bump {
        animation: badgeBump 0.4s cubic-bezier(0.2, 0.7, 0.2, 1);
      }
      @keyframes badgeBump {
        0% {
          transform: scale(1);
        }
        40% {
          transform: scale(1.5);
        }
        100% {
          transform: scale(1);
        }
      }

      /* cart item entrance */
      @keyframes cartItemIn {
        from {
          opacity: 0;
          transform: translateX(16px);
        }
        to {
          opacity: 1;
          transform: none;
        }
      }
      .cart-item {
        animation: cartItemIn 0.3s ease both;
      }

      /* free-shipping bar */
      .ship-bar {
        margin-bottom: 16px;
      }
      .ship-msg {
        font-size: 12.5px;
        color: var(--muted);
        margin-bottom: 8px;
      }
      .ship-msg b {
        color: var(--accent);
      }
      .ship-track {
        height: 6px;
        border-radius: 999px;
        background: var(--surface-2);
        overflow: hidden;
      }
      .ship-fill {
        height: 100%;
        width: 0;
        border-radius: 999px;
        background: linear-gradient(90deg, var(--accent-2), var(--accent));
        box-shadow: 0 0 12px color-mix(in srgb, var(--accent) 55%, transparent);
        transition: width 0.5s cubic-bezier(0.2, 0.7, 0.2, 1);
      }

      /* checkout success */
      /* the [hidden] attribute must win over the display below,
         otherwise the success panel covers the cart permanently */
      .cart-success[hidden] {
        display: none;
      }
      .cart-success {
        position: absolute;
        inset: 0;
        background: #0c0e17;
        z-index: 3;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        text-align: center;
        padding: 30px;
        gap: 6px;
      }
      .cart-success h4 {
        font-family: "Sora", sans-serif;
        font-size: 22px;
        font-weight: 600;
        margin-top: 8px;
      }
      .cart-success p {
        color: var(--muted);
        font-size: 14px;
        margin-bottom: 18px;
      }
      .success-check {
        width: 76px;
        height: 76px;
        border-radius: 999px;
        display: grid;
        place-items: center;
        color: #0c0e18;
        background: linear-gradient(145deg, #8affc1, #37d98a);
        animation: pop 0.45s cubic-bezier(0.2, 0.9, 0.3, 1.4) both;
      }
      .success-check svg {
        width: 38px;
        height: 38px;
      }
      @keyframes pop {
        from {
          transform: scale(0.4);
          opacity: 0;
        }
        to {
          transform: scale(1);
          opacity: 1;
        }
      }

      /* ===================== SEARCH OVERLAY ===================== */
      .search-overlay {
        position: fixed;
        inset: 0;
        z-index: 110;
        background: radial-gradient(
            120% 90% at 50% 0%,
            rgba(30, 24, 58, 0.55),
            rgba(6, 8, 14, 0.82) 60%
          );
        backdrop-filter: blur(10px) saturate(120%);
        -webkit-backdrop-filter: blur(10px) saturate(120%);
        opacity: 0;
        visibility: hidden;
        transition: opacity 0.28s ease, visibility 0.28s ease;
        display: flex;
        justify-content: center;
        align-items: flex-start;
        padding: 12vh 20px 20px;
      }
      .search-overlay.open {
        opacity: 1;
        visibility: visible;
      }
      .search-panel {
        width: 100%;
        max-width: 640px;
        transform: translateY(-18px) scale(0.98);
        opacity: 0;
        transition: transform 0.32s cubic-bezier(0.2, 0.75, 0.2, 1),
          opacity 0.28s ease;
      }
      .search-overlay.open .search-panel {
        transform: none;
        opacity: 1;
      }
      .search-box {
        display: flex;
        align-items: center;
        gap: 12px;
        background: linear-gradient(
          180deg,
          rgba(23, 26, 42, 0.95),
          rgba(15, 18, 30, 0.95)
        );
        border: 1px solid var(--border-strong);
        border-radius: 18px;
        padding: 7px 7px 7px 20px;
        box-shadow: 0 22px 60px -24px rgba(0, 0, 0, 0.85),
          inset 0 1px 0 rgba(255, 255, 255, 0.05);
        transition: border-color 0.2s ease, box-shadow 0.2s ease;
      }
      .search-box:focus-within {
        border-color: color-mix(in srgb, var(--accent) 55%, transparent);
        box-shadow: 0 22px 60px -24px rgba(0, 0, 0, 0.85),
          0 0 0 4px color-mix(in srgb, var(--accent) 16%, transparent),
          inset 0 1px 0 rgba(255, 255, 255, 0.05);
      }
      .search-box > svg {
        width: 20px;
        height: 20px;
        color: var(--accent);
        flex-shrink: 0;
      }
      .search-box input {
        flex: 1;
        background: none;
        border: none;
        outline: none;
        color: var(--text);
        font-size: 16px;
        font-family: "Inter", sans-serif;
        padding: 15px 0;
      }
      .search-box input::placeholder {
        color: var(--muted-2);
      }
      .search-close {
        width: 40px;
        height: 40px;
        border-radius: 12px;
        border: 1px solid var(--border);
        background: rgba(255, 255, 255, 0.04);
        color: var(--muted);
        cursor: pointer;
        display: grid;
        place-items: center;
        flex-shrink: 0;
        transition: color 0.15s, background 0.15s, transform 0.15s;
      }
      .search-close:hover {
        color: var(--text);
        background: rgba(255, 255, 255, 0.09);
        transform: rotate(90deg);
      }
      .search-close svg {
        width: 18px;
        height: 18px;
      }
      .search-results {
        margin-top: 14px;
        background: linear-gradient(
          180deg,
          rgba(23, 26, 42, 0.95),
          rgba(15, 18, 30, 0.95)
        );
        border: 1px solid var(--border);
        border-radius: 18px;
        padding: 7px;
        overflow: hidden;
        max-height: 60vh;
        overflow-y: auto;
        box-shadow: 0 22px 60px -26px rgba(0, 0, 0, 0.85);
      }
      .search-results:empty {
        display: none;
      }
      .search-result {
        display: flex;
        align-items: center;
        gap: 14px;
        padding: 11px 13px;
        cursor: pointer;
        border-radius: 13px;
        position: relative;
        transition: background 0.16s ease, transform 0.16s ease;
        animation: srIn 0.32s cubic-bezier(0.2, 0.7, 0.2, 1) both;
      }
      @keyframes srIn {
        from {
          opacity: 0;
          transform: translateY(6px);
        }
      }
      .search-result:hover {
        background: color-mix(in srgb, var(--accent) 12%, transparent);
        transform: translateX(3px);
      }
      .search-result img {
        width: 60px;
        height: 46px;
        object-fit: cover;
        border-radius: 10px;
        border: 1px solid var(--border);
        background: #0c0e18;
        transition: border-color 0.16s ease;
      }
      .search-result:hover img {
        border-color: color-mix(in srgb, var(--accent) 55%, transparent);
      }
      .search-result .sr-name {
        font-size: 14.5px;
        font-weight: 600;
        font-family: "Sora", sans-serif;
        color: var(--text);
      }
      .search-result .sr-cat {
        font-size: 12.5px;
        color: var(--muted);
        margin-top: 2px;
      }
      .search-result .sr-price {
        margin-left: auto;
        font-weight: 700;
        font-family: "Sora", sans-serif;
        color: var(--accent);
        font-size: 15px;
      }
      .search-none {
        padding: 28px 16px;
        color: var(--muted-2);
        font-size: 14px;
        text-align: center;
      }

      /* ===================== RESPONSIVE ===================== */
      @media (max-width: 980px) {
        .nav-links {
          display: none;
        }
        .hero {
          min-height: 640px;
        }
        .hero-photo {
          background-position: 72% center;
        }
        .cat-grid {
          grid-template-columns: repeat(2, 1fr);
        }
        .banner-body {
          max-width: none;
        }
        .stats {
          grid-template-columns: repeat(2, 1fr);
          gap: 14px;
        }
        .footer-grid {
          grid-template-columns: 1fr 1fr;
        }
        .footer-brand {
          grid-column: 1 / -1;
        }
        .footer-cta {
          padding: 28px 26px;
        }
        .news-form {
          min-width: 0;
          flex: 1;
        }
      }

      @media (max-width: 560px) {
        .footer-cta-text {
          align-items: flex-start;
        }
        .news-form {
          width: 100%;
        }
        .features {
          gap: 24px;
        }
        .cat-grid,
        .stats {
          grid-template-columns: 1fr;
        }
        .footer-grid {
          grid-template-columns: 1fr;
        }
        .footer-bottom {
          flex-direction: column;
          gap: 12px;
        }
      }

      /* ===================== LINKED CARDS ===================== */
      .product-card.is-linked { cursor: pointer; }
      .product-card.is-linked .product-name { transition: color 0.2s; }
      .product-card.is-linked .product-name:hover { color: var(--accent); }
      .product-card.is-linked .product-name:focus-visible {
        outline: 2px solid var(--accent);
        outline-offset: 3px;
        border-radius: 6px;
      }
      .product-card .thumb-scene { will-change: transform; }

      /* ===================== IMAGE SKELETONS ===================== */
      .img-skeleton {
        position: absolute;
        inset: 0;
        z-index: 4;
        border-radius: inherit;
        overflow: hidden;
        background: linear-gradient(180deg, var(--surface-2), var(--surface-3));
        opacity: 1;
        transition: opacity 0.4s ease;
      }
      .img-skeleton.is-hidden { opacity: 0; }
      .img-skeleton::after {
        content: "";
        position: absolute;
        inset: 0;
        transform: translateX(-100%);
        background: linear-gradient(
          90deg,
          transparent 0%,
          rgba(255, 255, 255, 0.06) 45%,
          rgba(255, 255, 255, 0.10) 50%,
          rgba(255, 255, 255, 0.06) 55%,
          transparent 100%
        );
        animation: skeletonSweep 1.35s ease-in-out infinite;
      }
      @keyframes skeletonSweep {
        to { transform: translateX(100%); }
      }
      @media (prefers-reduced-motion: reduce) {
        .img-skeleton::after { animation: none; }
      }

      /* ===================== PRODUCT PAGE (PDP) ===================== */
      .pdp {
        padding: 34px 0 20px;
      }
      .pdp-grid {
        display: grid;
        grid-template-columns: 1.05fr 1fr;
        gap: clamp(28px, 5vw, 68px);
        align-items: start;
      }
      .pdp-col-left,
      .pdp-col-right {
        display: flex;
        flex-direction: column;
        gap: 22px;
        min-width: 0;
      }
      .pdp-h3 {
        font-family: "Sora", sans-serif;
        font-size: 20px;
        font-weight: 600;
        margin-bottom: 16px;
      }
      .pdp-stage {
        position: relative;
        border-radius: var(--radius-lg);
        border: 1px solid var(--border-strong);
        background: var(--surface);
        overflow: hidden;
        aspect-ratio: 4 / 3.4;
        cursor: zoom-in;
      }
      .pdp-stage .zoom-hint {
        position: absolute;
        bottom: 12px;
        right: 12px;
        z-index: 2;
        width: 34px;
        height: 34px;
        display: grid;
        place-items: center;
        border-radius: 10px;
        background: rgba(8, 10, 18, 0.55);
        backdrop-filter: blur(8px);
        border: 1px solid var(--border-strong);
        color: var(--text);
        opacity: 0;
        transition: opacity 0.2s;
      }
      .pdp-stage:hover .zoom-hint { opacity: 1; }
      .pdp-stage .zoom-hint svg { width: 18px; height: 18px; }

      /* ===================== LIGHTBOX ===================== */
      .lightbox {
        position: fixed;
        inset: 0;
        z-index: 200;
        display: grid;
        place-items: center;
        padding: 4vmin;
        background: rgba(6, 7, 13, 0.86);
        backdrop-filter: blur(10px);
        opacity: 0;
        visibility: hidden;
        transition: opacity 0.28s ease, visibility 0.28s;
        cursor: zoom-out;
      }
      .lightbox.open {
        opacity: 1;
        visibility: visible;
      }
      .lightbox img {
        max-width: min(1100px, 94vw);
        max-height: 90vh;
        border-radius: 16px;
        border: 1px solid var(--border-strong);
        box-shadow: 0 40px 90px -30px rgba(0, 0, 0, 0.9);
        transform: scale(0.94);
        transition: transform 0.3s cubic-bezier(0.22, 1, 0.36, 1);
      }
      .lightbox.open img { transform: scale(1); }
      .lightbox-close {
        position: absolute;
        top: 20px;
        right: 24px;
        width: 46px;
        height: 46px;
        border-radius: 50%;
        display: grid;
        place-items: center;
        border: 1px solid var(--border-strong);
        background: rgba(20, 23, 38, 0.7);
        color: var(--text);
        cursor: pointer;
        transition: background 0.2s, transform 0.15s;
      }
      .lightbox-close:hover { background: var(--surface-3); transform: scale(1.06); }
      .lightbox-close svg { width: 22px; height: 22px; }
      /* full-bleed product photo */
      .pdp-stage img {
        width: 100%;
        height: 100%;
        object-fit: cover;
        display: block;
        transition: transform 0.55s cubic-bezier(0.22, 1, 0.36, 1);
      }
      .pdp-stage img { transform: none; }
      /* subtle cap-coloured sheen along the top edge */
      .pdp-stage::before {
        content: "";
        position: absolute;
        inset: 0;
        z-index: 1;
        pointer-events: none;
        background: radial-gradient(120% 60% at 50% 0%, color-mix(in srgb, var(--cap, var(--accent)) 20%, transparent), transparent 55%);
        mix-blend-mode: screen;
      }
      @media (prefers-reduced-motion: reduce) {
        .pdp-stage:hover img { transform: none; }
      }
      .pdp-badge {
        position: absolute;
        top: 16px; left: 16px;
        z-index: 2;
        padding: 6px 12px;
        border-radius: 999px;
        font-size: 12px;
        font-weight: 700;
        letter-spacing: 0.02em;
        color: #0b0e18;
        background: var(--cap, var(--accent));
      }

      .pdp-eyebrow {
        font-size: 12px;
        text-transform: uppercase;
        letter-spacing: 0.16em;
        color: var(--accent);
        font-weight: 700;
      }
      .pdp-title {
        font-size: clamp(28px, 4vw, 44px);
        line-height: 1.05;
        margin: 12px 0 14px;
      }
      .pdp-meta {
        display: flex;
        align-items: center;
        gap: 12px;
        flex-wrap: wrap;
        margin-bottom: 20px;
        padding-bottom: 20px;
        border-bottom: 1px solid var(--border);
      }
      .pdp-meta .rating {
        display: inline-flex;
        align-items: center;
        gap: 6px;
        color: #f4c56a;
        font-weight: 700;
        padding: 5px 11px;
        border-radius: 999px;
        background: rgba(244, 197, 106, 0.1);
        border: 1px solid rgba(244, 197, 106, 0.25);
      }
      .pdp-meta .rating svg { width: 15px; height: 15px; }
      .pdp-stock {
        display: inline-flex;
        align-items: center;
        gap: 7px;
        color: #7fe0a8;
        font-size: 14px;
        font-weight: 600;
      }
      .pdp-stock::before {
        content: "";
        width: 8px; height: 8px;
        border-radius: 50%;
        background: #7fe0a8;
        box-shadow: 0 0 0 4px rgba(127, 224, 168, 0.18);
      }
      .pdp-price {
        font-size: 32px;
        font-weight: 800;
        letter-spacing: -0.01em;
        margin-bottom: 18px;
      }
      .pdp-blurb {
        color: var(--muted);
        line-height: 1.7;
        margin-bottom: 22px;
        max-width: 52ch;
      }
      .pdp-features {
        display: flex;
        flex-wrap: wrap;
        gap: 9px;
        margin-bottom: 26px;
      }
      .pdp-feature {
        display: inline-flex;
        align-items: center;
        gap: 7px;
        padding: 8px 13px;
        border-radius: 999px;
        border: 1px solid var(--border-strong);
        background: var(--surface-2);
        font-size: 13px;
        color: var(--text);
        transition: border-color 0.2s, background 0.2s;
      }
      .pdp-feature:hover {
        border-color: color-mix(in srgb, var(--accent) 40%, transparent);
        background: var(--accent-soft);
      }
      .pdp-feature svg { width: 14px; height: 14px; color: var(--accent); }

      .pdp-buy {
        display: flex;
        align-items: center;
        gap: 12px;
        flex-wrap: wrap;
        padding: 22px 0;
        border-top: 1px solid var(--border);
        border-bottom: 1px solid var(--border);
        margin-bottom: 24px;
      }
      .qty {
        display: inline-flex;
        align-items: center;
        border: 1px solid var(--border-strong);
        border-radius: 999px;
        overflow: hidden;
        background: var(--surface-2);
      }
      .qty button {
        width: 46px; height: 50px;
        border: none;
        background: transparent;
        color: var(--text);
        font-size: 20px;
        cursor: pointer;
        transition: background 0.2s, color 0.2s;
      }
      .qty button:hover { background: var(--accent-soft); color: var(--accent); }
      .qty span {
        min-width: 40px;
        text-align: center;
        font-weight: 700;
        font-variant-numeric: tabular-nums;
      }
      .pdp-buy .add-to-cart { flex: 1; min-width: 190px; height: 52px; }
      .pdp-wish {
        width: 52px; height: 52px;
        border-radius: 50%;
        border: 1px solid var(--border-strong);
        background: var(--surface-2);
        color: var(--muted);
        display: grid;
        place-items: center;
        cursor: pointer;
        transition: color 0.2s, border-color 0.2s, transform 0.15s;
      }
      .pdp-wish svg { width: 20px; height: 20px; }
      .pdp-wish:hover { transform: scale(1.08); color: var(--text); }
      .pdp-wish.active {
        color: #ff6b8a;
        border-color: rgba(255, 107, 138, 0.4);
        background: rgba(255, 107, 138, 0.12);
      }
      .pdp-wish.active svg { fill: #ff6b8a; }

      .pdp-perks {
        display: grid;
        grid-template-columns: repeat(3, 1fr);
        gap: 12px;
      }
      .pdp-perk {
        position: relative;
        display: flex;
        flex-direction: column;
        align-items: center;
        text-align: center;
        gap: 6px;
        padding: 20px 10px;
        border: 1px solid var(--border);
        border-radius: 16px;
        background: linear-gradient(180deg, var(--surface-2), var(--surface));
        box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.04);
        color: var(--muted-2);
        font-size: 12px;
        overflow: hidden;
        transition: transform 0.22s var(--ease, ease), border-color 0.22s, box-shadow 0.22s;
      }
      .pdp-perk::before {
        content: "";
        position: absolute;
        top: -34%;
        left: 50%;
        transform: translateX(-50%);
        width: 130px;
        height: 130px;
        border-radius: 50%;
        background: var(--accent);
        filter: blur(52px);
        opacity: 0.12;
        transition: opacity 0.25s;
      }
      .pdp-perk:hover {
        transform: translateY(-4px);
        border-color: color-mix(in srgb, var(--accent) 42%, transparent);
        box-shadow: 0 20px 38px -18px rgba(0, 0, 0, 0.75), inset 0 1px 0 rgba(255, 255, 255, 0.07);
      }
      .pdp-perk:hover::before { opacity: 0.24; }
      .perk-ico {
        position: relative;
        width: 46px;
        height: 46px;
        display: grid;
        place-items: center;
        border-radius: 14px;
        background: color-mix(in srgb, var(--accent) 12%, var(--surface-2));
        border: 1px solid var(--border);
        color: var(--accent);
        margin-bottom: 5px;
      }
      .perk-ico svg { width: 21px; height: 21px; }
      .pdp-perk b { position: relative; color: var(--text); font-size: 13px; font-weight: 600; }
      .pdp-perk > span:last-child { position: relative; }

      /* specs + description */
      .pdp-details {
        display: grid;
        grid-template-columns: 1fr 1fr;
        gap: clamp(28px, 5vw, 60px);
        padding: 40px 0 10px;
      }
      .pdp-details h3 {
        font-size: 20px;
        margin-bottom: 18px;
      }
      .spec-grid {
        display: grid;
        grid-template-columns: 1fr 1fr;
        gap: 12px;
      }
      .spec-cell {
        position: relative;
        display: flex;
        flex-direction: column;
        gap: 7px;
        padding: 16px 18px;
        border: 1px solid var(--border);
        border-radius: 14px;
        background: var(--surface);
        overflow: hidden;
        transition: border-color 0.2s, background 0.2s;
      }
      .spec-cell::before {
        content: "";
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 2px;
        background: linear-gradient(90deg, var(--accent), transparent 70%);
        opacity: 0;
        transition: opacity 0.25s;
      }
      .spec-cell:hover {
        transform: translateY(-2px);
        border-color: color-mix(in srgb, var(--accent) 35%, transparent);
        box-shadow: 0 16px 32px -18px rgba(0, 0, 0, 0.75), inset 0 1px 0 rgba(255, 255, 255, 0.06);
      }
      .spec-cell:hover::before { opacity: 1; }
      .spec-k {
        display: inline-flex;
        align-items: center;
        gap: 8px;
        font-size: 11px;
        text-transform: uppercase;
        letter-spacing: 0.1em;
        color: var(--muted-2);
        font-weight: 600;
      }
      .spec-k::before {
        content: "";
        width: 6px;
        height: 6px;
        border-radius: 50%;
        background: var(--accent);
        box-shadow: 0 0 8px color-mix(in srgb, var(--accent) 80%, transparent);
      }
      .spec-v {
        font-size: 15px;
        font-weight: 600;
        color: var(--text);
      }
      @media (max-width: 520px) {
        .spec-grid { grid-template-columns: 1fr; }
      }
      .pdp-desc { color: var(--muted); line-height: 1.8; }
      .pdp-desc p { margin-bottom: 14px; }

      .pdp-related { padding: 30px 0 10px; }

      @media (max-width: 860px) {
        /* flatten the two columns and reorder: image → buy info → specs → about */
        .pdp-grid { display: flex; flex-direction: column; gap: 24px; }
        .pdp-col-left,
        .pdp-col-right { display: contents; }
        .pdp-stage { order: 1; }
        .pdp-info-main { order: 2; }
        .pdp-specs { order: 3; }
        .pdp-about { order: 4; }
      }