:root {
        color-scheme: dark;
        --ink: #f6efe2;
        --muted: #b8ad9b;
        --soft: rgba(246, 239, 226, 0.68);
        --bg: #14100b;
        --wood: #4c2e1f;
        --wood-dark: #1a0f0a;
        --honey: #e7b85b;
        --mint: #75b99c;
        --olive: #8c9a56;
        --clay: #bf6144;
        --turmeric: #d99a27;
        --glass: rgba(246, 239, 226, 0.08);
        --line: rgba(246, 239, 226, 0.16);
        --progress: 0;
        --door-open: 0;
        --scene-reveal: 0;
        --door-layer-visible: 1;
        --pick-ready: 0;
        --hero-copy-visible: 1;
        --museum-depth: 0;
        --focus-color: var(--honey);
        --focus-glow: rgba(231, 184, 91, 0.42);
        --exhibit-image: url("/assets/category-zeytinyagi-v1.webp");
        font-family: "Bricolage Grotesque", "Segoe UI", sans-serif;
        background: var(--bg);
        color: var(--ink);
      }

      * {
        box-sizing: border-box;
      }

      html {
        scroll-behavior: smooth;
      }

      body {
        margin: 0;
        min-width: 320px;
        overflow-x: hidden;
        background:
          linear-gradient(rgba(8, 8, 6, 0.82), rgba(8, 8, 6, 0.88)),
          image-set(
            url("/assets/museum-texture-v2-light.avif") type("image/avif"),
            url("/assets/museum-texture-v2-light.webp") type("image/webp")
          ) center top / 1600px auto repeat-y,
          radial-gradient(circle at 50% 15%, rgba(191, 97, 68, 0.2), transparent 34rem),
          linear-gradient(180deg, #050504 0%, #11100c 46%, #090807 100%);
      }

      body::before {
        content: "";
        position: fixed;
        inset: 0;
        pointer-events: none;
        z-index: 40;
        opacity: 0.32;
        background-image:
          linear-gradient(rgba(255, 255, 255, 0.035) 1px, transparent 1px),
          linear-gradient(90deg, rgba(255, 255, 255, 0.02) 1px, transparent 1px);
        background-size: 44px 44px;
        mask-image: linear-gradient(to bottom, black, transparent 85%);
      }

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

      button,
      input,
      select {
        font: inherit;
      }

      button {
        cursor: pointer;
      }

      img[loading="lazy"] {
        background: linear-gradient(135deg, #14100b, #090806 70%);
      }

      .sr-only {
        position: absolute;
        width: 1px;
        height: 1px;
        padding: 0;
        margin: -1px;
        overflow: hidden;
        clip: rect(0, 0, 0, 0);
        border: 0;
      }

      .turnstile-container {
        position: absolute;
        left: -9999px;
        top: auto;
        width: 1px;
        height: 1px;
        overflow: hidden;
      }

      .site-shell {
        min-height: 100vh;
      }

      .topbar {
        position: fixed;
        top: 0;
        left: 0;
        right: 0;
        z-index: 50;
        display: grid;
        grid-template-columns: 1fr auto 1fr;
        align-items: center;
        gap: 1rem;
        padding: 18px clamp(18px, 4vw, 54px);
        color: rgba(246, 239, 226, 0.86);
        background: linear-gradient(180deg, rgba(8, 8, 6, 0.92), rgba(8, 8, 6, 0.2), rgba(8, 8, 6, 0));
        transition: padding 280ms ease, background 280ms ease, box-shadow 280ms ease;
      }

      .topbar.is-scrolled {
        padding-top: 10px;
        padding-bottom: 10px;
        background: linear-gradient(180deg, rgba(8, 8, 6, 0.97), rgba(8, 8, 6, 0.8));
        backdrop-filter: blur(12px);
        border-bottom: 1px solid rgba(246, 239, 226, 0.08);
        box-shadow: 0 16px 34px rgba(0, 0, 0, 0.4);
      }

      .topbar.is-scrolled .brand-mark {
        transform: translateY(2px) scale(0.84);
        box-shadow:
          0 0 0 6px rgba(8, 8, 6, 0.22),
          0 12px 30px rgba(0, 0, 0, 0.4),
          0 0 20px rgba(231, 184, 91, 0.12);
      }

      .topbar nav {
        display: flex;
        align-items: center;
        gap: clamp(0.7rem, 1.6vw, 1.3rem);
        font-size: 0.78rem;
        text-transform: uppercase;
        letter-spacing: 0.12em;
      }

      .topbar nav:last-child {
        justify-content: flex-end;
      }

      .topbar nav a {
        min-height: 44px;
        white-space: nowrap;
        display: inline-flex;
        align-items: center;
        padding: 0 0.18rem;
      }

      .topbar nav a.commerce-nav-link {
        min-height: 38px;
        padding: 0 0.78rem;
        border: 1px solid rgba(231, 184, 91, 0.3);
        border-radius: 999px;
        background: rgba(231, 184, 91, 0.07);
        color: var(--ink);
        box-shadow: inset 0 1px 0 rgba(246, 239, 226, 0.06);
      }

      .topbar nav a.commerce-nav-link.is-active {
        border-color: rgba(231, 184, 91, 0.58);
        background: rgba(231, 184, 91, 0.13);
      }

      .topbar nav a.is-active,
      .menu-panel a.is-active {
        color: var(--honey);
      }

      .brand-mark {
        width: 108px;
        height: 108px;
        display: grid;
        place-items: center;
        border: 1px solid rgba(246, 239, 226, 0.28);
        border-radius: 50%;
        background:
          radial-gradient(circle at 50% 42%, rgba(246, 239, 226, 0.16), transparent 42%),
          radial-gradient(circle, rgba(231, 184, 91, 0.2), transparent 62%),
          rgba(8, 8, 6, 0.78);
        box-shadow:
          0 0 0 10px rgba(8, 8, 6, 0.26),
          0 18px 48px rgba(0, 0, 0, 0.42),
          0 0 32px rgba(231, 184, 91, 0.14);
        overflow: hidden;
        transform: translateY(3px);
        transition: transform 280ms ease, box-shadow 280ms ease;
      }

      .brand-mark img {
        width: 86%;
        height: 86%;
        object-fit: contain;
        filter:
          contrast(1.05)
          drop-shadow(0 0 10px rgba(231, 184, 91, 0.16))
          drop-shadow(0 4px 12px rgba(0, 0, 0, 0.38));
      }

      .instagram-link[aria-disabled="true"] {
        color: rgba(246, 239, 226, 0.42);
        cursor: default;
      }

      .hero-scroll {
        height: 100svh;
        min-height: 640px;
        position: relative;
        z-index: 0;
      }

      /* Scrub modu: kapı hareketini korurken ana içeriği gereksiz yere geciktirmez. */
      :root[data-hero-mode="scroll"] .hero-scroll {
        height: 160svh;
      }

      :root[data-hero-mode="scroll"] .hero {
        position: sticky;
        top: 0;
        height: 100svh;
        min-height: 620px;
      }

      /* Scrub'da sahne parmağı doğrudan izler; gecikmeli geçiş istenmez */
      :root[data-hero-mode="scroll"][data-ready="true"] .hero-back,
      :root[data-hero-mode="scroll"] .hero-door-panel {
        transition: none;
      }

      .hero {
        --hero-scene-size: min(88%, 1420px);
        --hero-scene-y: 40%;
        position: relative;
        top: 0;
        min-height: 100vh;
        height: 100%;
        display: grid;
        place-items: center;
        overflow: hidden;
        perspective: 1500px;
        isolation: isolate;
        opacity: calc(1 - var(--museum-depth) * 0.36);
        background:
          radial-gradient(ellipse at 54% 88%, rgba(96, 62, 28, 0.26), transparent 42rem),
          radial-gradient(circle at 50% 46%, rgba(231, 184, 91, 0.08), transparent 26rem),
          linear-gradient(180deg, #050403 0%, #17120d 58%, #0b0805 100%);
        will-change: opacity;
      }

      .hero::before {
        content: "";
        position: absolute;
        z-index: 2;
        inset: 13vh 22vw 17vh 22vw;
        border-radius: 42% 42% 18% 18%;
        background:
          radial-gradient(circle at 50% 42%, rgba(246, 239, 226, 0.34), transparent 0 18%),
          radial-gradient(circle at 50% 48%, rgba(231, 184, 91, 0.34), transparent 0 42%),
          radial-gradient(circle at 50% 62%, rgba(117, 185, 156, 0.12), transparent 0 66%);
        filter: blur(18px);
        opacity: calc(var(--scene-reveal) * (0.18 + var(--door-open) * 0.54));
        transform: scale(calc(0.82 + var(--door-open) * 0.28));
        pointer-events: none;
        mix-blend-mode: screen;
        will-change: opacity, transform;
      }

      .hero::after {
        content: "";
        position: absolute;
        inset: 0;
        z-index: 4;
        pointer-events: none;
        background:
          linear-gradient(90deg,
            rgba(7, 5, 4, 0.94) 0%,
            rgba(21, 15, 9, 0.58) 12%,
            rgba(7, 5, 4, 0.04) 32%,
            rgba(7, 5, 4, 0.04) 68%,
            rgba(21, 15, 9, 0.58) 88%,
            rgba(7, 5, 4, 0.94) 100%),
          linear-gradient(180deg, transparent 0 62%, rgba(12, 8, 5, 0.4) 76%, rgba(5, 4, 3, 0.84) 100%),
          url("/assets/generated/hero-city-nature-hq-trial-20260709.webp") center var(--hero-scene-y) / var(--hero-scene-size) auto no-repeat;
        opacity: calc(0.34 + var(--scene-reveal) * 0.1);
        filter: saturate(0.82) brightness(0.5) contrast(1.08);
        mask-image: linear-gradient(90deg, black 0 22%, rgba(0, 0, 0, 0.66) 30%, transparent 37% 63%, rgba(0, 0, 0, 0.66) 70%, black 78% 100%);
      }

      .hero-back {
        position: absolute;
        inset: 0;
        z-index: 1;
        background:
          linear-gradient(90deg, rgba(0, 0, 0, 0.62), transparent 24%, transparent 72%, rgba(0, 0, 0, 0.62)),
          linear-gradient(180deg, rgba(5, 5, 4, 0.04), rgba(5, 5, 4, 0.12) 54%, rgba(12, 8, 5, 0.66) 100%),
          radial-gradient(circle at 50% 48%, rgba(231, 184, 91, 0.24), transparent 28rem),
          url("/assets/generated/hero-city-nature-hq-trial-20260709.webp") center var(--hero-scene-y) / var(--hero-scene-size) auto no-repeat,
          radial-gradient(ellipse at 54% 91%, rgba(102, 67, 31, 0.3), transparent 44rem),
          linear-gradient(180deg, #070605 0%, #17120d 56%, #0b0805 100%);
        opacity: var(--scene-reveal);
        transform:
          translate3d(0, calc((1 - var(--door-open)) * 10px + var(--progress) * -14px), 0)
          scale(calc(1.03 - var(--door-open) * 0.03 - var(--progress) * 0.02));
        transform-origin: 50% 46%;
        transition:
          opacity 740ms ease,
          transform 1300ms cubic-bezier(0.2, 0.72, 0.12, 1);
        will-change: opacity, transform;
      }

      @media (min-width: 761px) and (max-aspect-ratio: 16 / 9) {
        .hero::after {
          background-size: auto, auto, var(--hero-scene-size) auto;
          background-position: 0 0, 0 0, 50% var(--hero-scene-y);
        }

        .hero-back {
          background-size: auto, auto, auto, var(--hero-scene-size) auto, auto, auto;
          background-position: 0 0, 0 0, 50% 48%, 50% var(--hero-scene-y), 50% 100%, 0 0;
        }
      }

      .prod-clip {
        position: absolute;
        inset: 0;
        pointer-events: none;
        opacity: 0;
      }

      .hs-cards {
        position: absolute;
        z-index: 8;
        inset: 0;
        pointer-events: none;
      }

      .hs-card {
        position: absolute;
        width: 208px;
        padding: 0.85rem 1rem 0.95rem;
        background: rgba(9, 6, 4, 0.95);
        border: 1px solid rgba(231, 184, 91, 0.3);
        border-radius: 9px;
        box-shadow: 0 22px 48px rgba(0, 0, 0, 0.55);
        color: rgba(246, 239, 226, 0.88);
        font-size: 0.84rem;
        line-height: 1.56;
        pointer-events: none;
        opacity: 0;
        transform: translate(-50%, calc(-100% - 6px));
        transition:
          opacity 240ms ease,
          transform 340ms cubic-bezier(0.22, 1, 0.36, 1);
      }

      .hs-card::after {
        content: "";
        position: absolute;
        left: 50%;
        bottom: -6px;
        width: 12px;
        height: 12px;
        transform: translateX(-50%) rotate(45deg);
        background: rgba(9, 6, 4, 0.95);
        border-right: 1px solid rgba(231, 184, 91, 0.3);
        border-bottom: 1px solid rgba(231, 184, 91, 0.3);
      }

      .hs-card.is-visible {
        opacity: 1;
        pointer-events: auto;
        transform: translate(-50%, -100%);
      }

      .hs-card small {
        display: block;
        font-size: 0.7rem;
        letter-spacing: 0.12em;
        text-transform: uppercase;
        color: rgba(231, 184, 91, 0.78);
        margin-bottom: 0.42rem;
      }

      .hs-card p {
        margin: 0 0 0.6rem;
      }

      .hs-card-link {
        display: inline-flex;
        align-items: center;
        gap: 0.36rem;
        color: rgba(231, 184, 91, 0.92);
        text-decoration: none;
        font-size: 0.78rem;
        font-weight: 600;
        letter-spacing: 0.04em;
        transition: gap 220ms ease, color 200ms ease;
      }

      .hs-card-link:hover {
        gap: 0.6rem;
        color: rgba(246, 222, 170, 1);
      }

      .hero-indicator { display: none; }

      .hero-hotspot .hit-shape {
        fill: rgba(255, 255, 255, 0.001);
        stroke: transparent;
        stroke-width: 0;
        pointer-events: all;
        vector-effect: non-scaling-stroke;
        transform-box: fill-box;
        transform-origin: center;
        transition: none;
      }

      .hero-hotspot:hover .hit-shape,
      .hero-hotspot:focus-visible .hit-shape {
        fill: rgba(255, 255, 255, 0.001);
        stroke: transparent;
        transform: none;
      }

      .hero-hotspot:focus-visible {
        outline: none;
      }

      @keyframes indicatorPulse {
        0%, 100% { opacity: 0.35; transform: scale(0.72); }
        50%       { opacity: 0.82; transform: scale(1.28); }
      }

      .hero-back::before {
        content: "";
        position: absolute;
        inset: -12%;
        opacity: calc(0.18 + var(--progress) * 0.28);
        background:
          linear-gradient(90deg, transparent 0 13%, rgba(246, 239, 226, 0.08) 13.5% 14%, transparent 14.5%),
          linear-gradient(0deg, transparent 0 17%, rgba(246, 239, 226, 0.07) 17.5% 18%, transparent 18.5%);
        background-size: 180px 140px;
        transform: translate3d(calc(var(--progress) * -28px), calc(var(--progress) * -20px), 0) rotate(2deg);
        will-change: opacity, transform;
      }

      .hero-back::after {
        content: "";
        position: absolute;
        inset: 0;
        background:
          radial-gradient(circle at 50% 50%, transparent 0 32%, rgba(0, 0, 0, 0.06) 78%),
          linear-gradient(180deg, rgba(8, 8, 6, 0.0), rgba(8, 8, 6, 0.16));
        pointer-events: none;
      }

      .hero-door-stage {
        position: absolute;
        z-index: 3;
        inset:
          clamp(78px, 10vh, 116px)
          max(28px, calc((100vw - 1360px) / 2))
          clamp(76px, 11vh, 120px);
        min-width: 0;
        max-width: none;
        margin: auto;
        transform-style: preserve-3d;
        perspective: 1400px;
        pointer-events: none;
        opacity: var(--door-layer-visible);
        will-change: opacity;
      }

      .hero-door-stage::before {
        content: "";
        position: absolute;
        inset: 0;
        z-index: 0;
        background:
          radial-gradient(circle at 50% 46%, rgba(231, 184, 91, 0.22), transparent 0 32%),
          linear-gradient(90deg, rgba(5, 4, 3, 0.96), rgba(23, 18, 13, 0.88) 46%, rgba(23, 18, 13, 0.88) 54%, rgba(5, 4, 3, 0.96)),
          linear-gradient(120deg, #050403, #17120d 54%, #050403);
        opacity: calc((1 - var(--door-open)) * 0.46);
        box-shadow:
          inset 0 0 70px rgba(0, 0, 0, 0.76),
          inset 0 0 20px rgba(231, 184, 91, 0.08);
      }

      .hero-door-stage::after {
        content: "";
        position: absolute;
        z-index: 2;
        top: -8%;
        bottom: -8%;
        left: 50%;
        width: clamp(60px, 9vw, 150px);
        transform: translateX(-50%) scaleX(calc(0.4 + var(--door-open) * 1.4));
        background: linear-gradient(180deg,
          transparent,
          rgba(245, 208, 130, 0.5) 22%,
          rgba(255, 226, 158, 0.62) 50%,
          rgba(245, 208, 130, 0.5) 78%,
          transparent);
        filter: blur(26px);
        opacity: 0;
        mix-blend-mode: screen;
        pointer-events: none;
      }

      :root[data-hero-open="true"] .hero-door-stage::after {
        animation: doorLightSweep 2000ms cubic-bezier(0.32, 0.02, 0.18, 1) both;
      }

      @keyframes doorLightSweep {
        0% {
          opacity: 0;
          transform: translateX(-50%) scaleX(0.35);
        }
        38% {
          opacity: 0.92;
          transform: translateX(-50%) scaleX(1.12);
        }
        100% {
          opacity: 0;
          transform: translateX(-50%) scaleX(1.8);
        }
      }

      .hero-door-panel {
        position: absolute;
        z-index: 1;
        top: 0;
        bottom: 0;
        width: 50.5%;
        overflow: hidden;
        border: 1px solid rgba(246, 239, 226, 0.12);
        background:
          linear-gradient(90deg, rgba(246, 239, 226, 0.04), transparent 16% 78%, rgba(0, 0, 0, 0.2)),
          image-set(
            url("/assets/hero-closed-door-v1.avif") type("image/avif"),
            url("/assets/hero-closed-door-v1.webp") type("image/webp")
          ) var(--door-bg-x) center / 200% 100% no-repeat;
        box-shadow:
          inset 0 0 0 10px rgba(0, 0, 0, 0.12),
          inset 0 0 54px rgba(0, 0, 0, 0.58),
          0 26px 48px rgba(0, 0, 0, 0.34);
        transition: transform 2200ms cubic-bezier(0.32, 0.02, 0.18, 1);
        will-change: transform;
      }

      .hero-door-panel::before {
        content: "";
        position: absolute;
        inset: 0;
        border: 1px solid rgba(246, 239, 226, 0.08);
        box-shadow:
          inset 0 0 90px rgba(0, 0, 0, 0.38),
          inset 0 0 18px rgba(231, 184, 91, 0.07);
        background:
          linear-gradient(180deg, rgba(246, 239, 226, 0.025), transparent 42%, rgba(0, 0, 0, 0.22));
      }

      .hero-door-panel::after {
        content: "";
        display: none;
        position: absolute;
        top: 48%;
        width: 12px;
        height: 58px;
        border-radius: 999px;
        background: linear-gradient(#cba86b, #5a341d);
        box-shadow: 0 0 18px rgba(231, 184, 91, 0.22);
      }

      .hero-door-panel.left {
        --door-bg-x: left;
        left: 0;
        transform-origin: left center;
        transform:
          translateX(calc(var(--door-open) * -48% + var(--progress) * -3vw))
          rotateY(calc(var(--door-open) * -52deg));
      }

      .hero-door-panel.left::after {
        right: 24px;
      }

      .hero-door-panel.right {
        --door-bg-x: right;
        right: 0;
        transform-origin: right center;
        transform:
          translateX(calc(var(--door-open) * 48% + var(--progress) * 3vw))
          rotateY(calc(var(--door-open) * 52deg));
      }

      .hero-door-panel.right::after {
        left: 24px;
      }

      .hero-unlock {
        position: absolute;
        z-index: 12;
        left: 50%;
        top: 50%;
        width: clamp(86px, 6.3vw, 112px);
        aspect-ratio: 0.82;
        display: grid;
        place-items: center;
        align-content: center;
        gap: 0.22rem;
        padding: 0.78rem 0.62rem;
        border: 1px solid rgba(204, 159, 86, 0.5);
        border-radius: 999px 999px 46% 46%;
        color: rgba(246, 239, 226, 0.94);
        background:
          linear-gradient(145deg, rgba(246, 239, 226, 0.13), transparent 36%),
          linear-gradient(180deg, rgba(75, 48, 25, 0.72), rgba(13, 9, 6, 0.82) 58%, rgba(5, 4, 3, 0.92)),
          rgba(10, 7, 4, 0.84);
        box-shadow:
          0 0 0 5px rgba(8, 8, 6, 0.34),
          0 14px 34px rgba(0, 0, 0, 0.46),
          0 0 24px rgba(231, 184, 91, 0.16),
          inset 0 1px 0 rgba(246, 239, 226, 0.2),
          inset 0 -18px 28px rgba(0, 0, 0, 0.34);
        transform: translate(-50%, -50%);
        transition:
          opacity 520ms ease,
          transform 520ms cubic-bezier(0.22, 1, 0.36, 1),
          border-color 220ms ease,
          box-shadow 260ms ease;
        animation: unlockAura 3400ms ease-in-out infinite;
        visibility: visible;
      }

      @keyframes unlockAura {
        0%, 100% {
          box-shadow:
            0 0 0 5px rgba(8, 8, 6, 0.34),
            0 14px 34px rgba(0, 0, 0, 0.46),
            0 0 24px rgba(231, 184, 91, 0.18),
            inset 0 1px 0 rgba(246, 239, 226, 0.2),
            inset 0 -18px 28px rgba(0, 0, 0, 0.34);
        }
        50% {
          box-shadow:
            0 0 0 5px rgba(8, 8, 6, 0.34),
            0 16px 38px rgba(0, 0, 0, 0.5),
            0 0 46px rgba(231, 184, 91, 0.4),
            inset 0 1px 0 rgba(246, 239, 226, 0.22),
            inset 0 -18px 28px rgba(0, 0, 0, 0.32);
        }
      }

      /* Kapalı kapı daveti: kullanıcı ilk saniyelerde ne yapacağını görsün */
      .hero-door-invite {
        position: absolute;
        z-index: 12;
        left: 50%;
        top: calc(50% + clamp(80px, 9.4vh, 118px));
        transform: translateX(-50%);
        margin: 0;
        font-size: 0.7rem;
        font-weight: 600;
        letter-spacing: 0.18em;
        text-transform: uppercase;
        color: rgba(246, 239, 226, 0.7);
        text-shadow: 0 1px 8px rgba(5, 4, 3, 0.9);
        white-space: nowrap;
        pointer-events: none;
        opacity: calc((1 - var(--door-open)) * 0.92);
        animation: inviteFloat 3400ms ease-in-out infinite;
        will-change: transform, opacity;
      }

      @keyframes inviteFloat {
        0%, 100% { transform: translateX(-50%) translateY(0); }
        50% { transform: translateX(-50%) translateY(5px); }
      }

      :root.js:not([data-ready="true"]) .hero-door-invite {
        opacity: 0;
      }

      @media (prefers-reduced-motion: reduce) {
        .hero-door-invite,
        .hero-unlock {
          animation: none;
        }
      }

      .hero-unlock::before {
        content: "";
        position: absolute;
        inset: 7px;
        border: 1px solid rgba(246, 210, 142, 0.26);
        border-radius: inherit;
        background:
          linear-gradient(180deg, rgba(246, 239, 226, 0.08), transparent 46%),
          rgba(8, 8, 6, 0.18);
        pointer-events: none;
      }

      .hero-unlock::after {
        content: "";
        position: absolute;
        left: 50%;
        top: 100%;
        width: 1px;
        height: clamp(58px, 9vh, 104px);
        background: linear-gradient(180deg, rgba(231, 184, 91, 0.38), transparent);
        transform: translateX(-50%);
        pointer-events: none;
      }

      .hero-unlock:hover,
      .hero-unlock:focus-visible {
        animation: none;
        border-color: rgba(246, 222, 170, 0.72);
        box-shadow:
          0 0 0 5px rgba(8, 8, 6, 0.34),
          0 16px 38px rgba(0, 0, 0, 0.5),
          0 0 32px rgba(231, 184, 91, 0.28),
          inset 0 1px 0 rgba(246, 239, 226, 0.24),
          inset 0 -18px 28px rgba(0, 0, 0, 0.28);
        transform: translate(-50%, -50%) scale(1.025);
      }

      .hero-unlock:focus-visible {
        outline: 2px solid rgba(246, 222, 170, 0.9);
        outline-offset: 5px;
      }

      .hero-unlock svg {
        position: relative;
        z-index: 1;
        width: clamp(24px, 2.1vw, 32px);
        height: clamp(24px, 2.1vw, 32px);
        filter: drop-shadow(0 0 10px rgba(231, 184, 91, 0.22));
      }

      .hero-unlock span:last-child {
        position: relative;
        z-index: 1;
        font-size: 0.68rem;
        font-weight: 650;
        letter-spacing: 0.09em;
        text-transform: uppercase;
      }

      :root[data-hero-open="true"] .hero-unlock {
        opacity: 0;
        pointer-events: none;
        visibility: hidden;
        transform: translate(-50%, -50%) scale(0.82);
      }

      .hero-hotspots {
        display: none;
        position: absolute;
        inset: 0;
        z-index: 7;
        opacity: var(--pick-ready);
        pointer-events: none;
        transform-origin: center center;
        transform:
          scale(calc(0.84 - var(--progress) * 0.02))
          translate3d(0, calc(var(--progress) * -14px + (1 - var(--pick-ready)) * 8px), 0);
        transition:
          opacity 260ms ease,
          transform 260ms ease;
        will-change: opacity, transform;
      }

      :root[data-pick-ready="true"] .hero-hotspots { pointer-events: none; }

      .hero-hitmap {
        width: 100%;
        height: 100%;
        display: block;
        overflow: hidden;
      }

      .hero-hotspot {
        cursor: pointer;
      }

      .hero-pop, .hero-frame, .hero-dot,
      .hero-ring, .hero-glow, .hero-hotlabel { display: none; }

      .hero-ui {
        position: absolute;
        z-index: 8;
        left: clamp(20px, 5vw, 72px);
        right: clamp(20px, 6vw, 86px);
        bottom: clamp(86px, 13vh, 138px);
        display: grid;
        grid-template-columns: minmax(280px, 520px) minmax(280px, 1fr) auto;
        gap: 1.4rem;
        align-items: end;
        opacity: var(--hero-copy-visible);
        transform: translate3d(0, calc(var(--museum-depth) * -18px), 0);
        will-change: opacity, transform;
        pointer-events: none;
      }

      .hero-copy {
        position: relative;
        max-width: 610px;
        padding: 1rem 1.35rem 1.05rem 1.35rem;
        border: 0;
        background:
          linear-gradient(90deg, rgba(8, 8, 6, 0.84), rgba(8, 8, 6, 0.62) 62%, rgba(8, 8, 6, 0.12));
        box-shadow: none;
        text-shadow:
          0 2px 16px rgba(0, 0, 0, 1),
          0 0 46px rgba(0, 0, 0, 0.96);
        pointer-events: auto;
      }

      .hero-copy::before {
        content: "";
        position: absolute;
        left: -1px;
        top: 0.95rem;
        bottom: 0.95rem;
        width: 2px;
        background: linear-gradient(180deg, transparent, rgba(231, 184, 91, 0.86), transparent);
        box-shadow: 0 0 18px rgba(231, 184, 91, 0.3);
        pointer-events: none;
      }

      .hero-kicker {
        margin: 0 0 0.9rem;
        color: rgba(246, 239, 226, 0.74);
      }

      :root.js .hero-back,
      :root.js .hero-door-stage,
      :root.js [data-hero-seq] {
        will-change: transform, opacity;
        backface-visibility: hidden;
      }

      :root.js:not([data-ready="true"]) .hero-back {
        opacity: 0.001;
        scale: 1.05;
      }

      :root.js:not([data-ready="true"]) .hero-door-stage {
        opacity: 0;
        transform: translate3d(0, 18px, 0);
      }

      :root.js:not([data-ready="true"]) .hero-unlock {
        opacity: 0;
        pointer-events: none;
        transform: translate(-50%, calc(-50% + 16px)) scale(0.96);
      }

      :root.js:not([data-ready="true"]) [data-hero-seq] {
        opacity: 0;
        transform: translate3d(0, 28px, 0);
      }

      :root.js .hero-back {
        transition:
          opacity 900ms ease,
          transform 1700ms cubic-bezier(0.32, 0.02, 0.18, 1);
      }

      :root.js .hero-door-stage {
        transition:
          opacity 840ms ease 120ms,
          transform 980ms cubic-bezier(0.22, 1, 0.36, 1) 120ms;
      }

      :root.js [data-hero-seq] {
        transition:
          opacity 680ms ease,
          transform 820ms cubic-bezier(0.22, 1, 0.36, 1);
        transition-delay: calc(120ms + var(--hero-step, 0) * 120ms);
      }

      .hero-copy h1,
      .hero-copy h2 {
        margin: 0 0 1rem;
        font-size: clamp(1.7rem, 3vw, 3.45rem);
        line-height: 1;
        color: #fff8e7;
        text-wrap: balance;
      }

      .hero-copy p {
        margin: 0;
        color: rgba(255, 249, 235, 0.95);
        font-size: clamp(0.95rem, 1vw, 1.04rem);
        font-weight: 500;
        line-height: 1.58;
        max-width: 34rem;
      }

      .hero-mobile-brief {
        display: none;
      }

      :root[data-hero-open="true"] .hero-mobile-brief {
        opacity: 0;
        transform: translateY(-8px);
      }

      .button-row {
        display: flex;
        flex-wrap: wrap;
        gap: 0.72rem;
        margin-top: 1.4rem;
      }

      .hero-copy .button-row .museum-button {
        color: #fff8e7;
        border-color: rgba(231, 184, 91, 0.72);
        background:
          linear-gradient(90deg, rgba(140, 154, 86, 0.78), rgba(231, 184, 91, 0.34)),
          rgba(22, 20, 14, 0.92);
        box-shadow:
          0 12px 32px rgba(0, 0, 0, 0.52),
          0 0 24px rgba(231, 184, 91, 0.26);
        text-shadow: 0 1px 8px rgba(0, 0, 0, 0.72);
      }

      .hero-copy .button-row .museum-button.ghost {
        color: rgba(255, 248, 231, 0.94);
        border-color: rgba(246, 239, 226, 0.42);
        background:
          linear-gradient(90deg, rgba(246, 239, 226, 0.16), rgba(246, 239, 226, 0.06)),
          rgba(8, 8, 6, 0.82);
        box-shadow: 0 10px 26px rgba(0, 0, 0, 0.44);
      }

      .hero-family {
        display: flex;
        flex-wrap: wrap;
        gap: 0.45rem;
        margin-top: 1rem;
      }

      .hero-family a,
      .hero-family span {
        min-height: 44px;
        min-width: 44px;
        display: inline-flex;
        align-items: center;
        border: 1px solid rgba(246, 239, 226, 0.12);
        background: rgba(246, 239, 226, 0.055);
        color: rgba(246, 239, 226, 0.82);
        padding: 0.42rem 0.64rem;
        font-size: 0.78rem;
        border-radius: 999px;
        text-decoration: none;
        transition:
          transform 220ms ease,
          border-color 220ms ease,
          background 220ms ease;
      }

      .hero-family a:hover,
      .hero-family a:focus-visible,
      .hero-family span:hover {
        transform: translate3d(0, -2px, 0);
        border-color: rgba(231, 184, 91, 0.42);
        background: rgba(231, 184, 91, 0.12);
      }

      .hero-family a[data-upcoming="true"],
      .hero-family span[data-upcoming="true"],
      .hs-card-link[data-upcoming="true"] {
        color: rgba(246, 239, 226, 0.48);
        border-color: rgba(246, 239, 226, 0.1);
      }

      .hero-signals {
        display: none;
        grid-template-columns: repeat(3, minmax(0, 1fr));
        gap: 0.75rem;
        margin-top: 1.25rem;
      }

      .hero-signal {
        min-height: 116px;
        padding: 0.95rem 1rem;
        display: grid;
        align-content: space-between;
        gap: 0.55rem;
        text-align: left;
        color: var(--ink);
        border: 1px solid rgba(246, 239, 226, 0.12);
        background:
          linear-gradient(180deg, rgba(246, 239, 226, 0.06), rgba(8, 8, 6, 0.48)),
          rgba(8, 8, 6, 0.36);
        transition:
          transform 240ms ease,
          border-color 240ms ease,
          background 240ms ease;
      }

      .hero-signal:hover,
      .hero-signal:focus-visible {
        transform: translate3d(0, -4px, 0);
        border-color: color-mix(in oklch, var(--focus-color) 58%, white 12%);
        background:
          linear-gradient(180deg, color-mix(in oklch, var(--focus-color) 18%, transparent), rgba(8, 8, 6, 0.52)),
          rgba(8, 8, 6, 0.44);
      }

      .hero-signal small {
        color: var(--focus-color);
        text-transform: uppercase;
        letter-spacing: 0.12em;
        font-size: 0.68rem;
      }

      .hero-signal b {
        display: block;
        font-size: 1rem;
        line-height: 1.14;
      }

      .hero-signal span {
        color: var(--soft);
        line-height: 1.48;
        font-size: 0.92rem;
      }

      .hero-aside {
        display: none;
        padding: 1.05rem 1.05rem 1.1rem;
        border: 1px solid rgba(246, 239, 226, 0.16);
        background:
          linear-gradient(180deg, rgba(246, 239, 226, 0.12), rgba(8, 8, 6, 0.56)),
          rgba(8, 8, 6, 0.46);
        box-shadow: 0 24px 54px rgba(0, 0, 0, 0.28);
        backdrop-filter: blur(10px);
      }

      .hero-aside small {
        color: var(--muted);
        text-transform: uppercase;
        letter-spacing: 0.14em;
        font-size: 0.68rem;
      }

      .hero-aside b {
        display: block;
        margin: 0.65rem 0 0.55rem;
        font-size: 1.28rem;
        line-height: 1.08;
      }

      .hero-aside p {
        margin: 0;
        color: var(--soft);
        line-height: 1.6;
        font-size: 0.95rem;
      }

      .museum-button {
        position: relative;
        overflow: hidden;
        min-height: 46px;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        gap: 0.5rem;
        border: 1px solid color-mix(in oklch, var(--focus-color) 58%, white 12%);
        border-radius: 999px;
        padding: 0.82rem 1.1rem;
        color: var(--ink);
        background:
          linear-gradient(90deg, color-mix(in oklch, var(--focus-color) 32%, transparent), transparent),
          rgba(246, 239, 226, 0.06);
        box-shadow: 0 0 18px var(--focus-glow);
        transition:
          transform 220ms ease,
          background 220ms ease,
          border-color 220ms ease,
          box-shadow 240ms ease;
      }

      .museum-button::after {
        content: "";
        position: absolute;
        top: 0;
        left: -120%;
        width: 55%;
        height: 100%;
        background: linear-gradient(100deg, transparent, rgba(246, 239, 226, 0.28), transparent);
        transform: skewX(-18deg);
        transition: left 620ms cubic-bezier(0.22, 1, 0.36, 1);
        pointer-events: none;
      }

      .museum-button:hover,
      .museum-button:focus-visible {
        transform: translateY(-2px);
        box-shadow: 0 8px 26px var(--focus-glow), 0 0 22px var(--focus-glow);
        background:
          linear-gradient(90deg, color-mix(in oklch, var(--focus-color) 46%, transparent), rgba(246, 239, 226, 0.08)),
          rgba(246, 239, 226, 0.09);
      }

      .museum-button:hover::after,
      .museum-button:focus-visible::after {
        left: 130%;
      }

      .museum-button.ghost {
        border-color: rgba(246, 239, 226, 0.18);
        box-shadow: none;
        background: rgba(246, 239, 226, 0.055);
      }

      .scroll-meter {
        width: min(260px, 30vw);
        min-width: 190px;
        padding: 0;
        border: 0;
        background: transparent;
      }

      .scroll-meter span {
        display: block;
        color: rgba(246, 239, 226, 0.46);
        font-size: 0.78rem;
        letter-spacing: 0.16em;
        text-transform: uppercase;
        margin-bottom: 0.52rem;
      }

      .meter-line {
        height: 2px;
        background: rgba(246, 239, 226, 0.16);
        overflow: hidden;
      }

      .meter-line i {
        display: block;
        width: 100%;
        height: 100%;
        background: var(--focus-color);
        box-shadow: 0 0 12px var(--focus-glow);
        transform: scaleX(var(--progress));
        transform-origin: left center;
        will-change: transform;
      }

      .section {
        position: relative;
        z-index: 1;
        padding: clamp(46px, 6vw, 84px) clamp(20px, 5vw, 80px);
        scroll-margin-top: 132px;
        content-visibility: auto;
        contain-intrinsic-size: 920px;
      }

      .js main > .is-view-hidden {
        display: none !important;
      }

      body[data-view]:not([data-view="home"]) main {
        padding-top: clamp(84px, 10vw, 126px);
      }

      body[data-view]:not([data-view="home"]) .section-rail {
        display: none;
      }

      .shop-head {
        display: flex;
        align-items: end;
        justify-content: space-between;
        gap: 1rem;
        flex-wrap: wrap;
      }

      .shop-head .section-title {
        color: var(--ink);
      }

      .cart-pill {
        display: inline-flex;
        align-items: center;
        gap: 0.45rem;
        margin-left: auto;
        min-height: 44px;
        padding: 0.55rem 0.95rem;
        border-radius: 999px;
        border: 1px solid rgba(231, 184, 91, 0.24);
        background:
          linear-gradient(180deg, rgba(231, 184, 91, 0.1), rgba(246, 239, 226, 0.035)),
          rgba(8, 8, 6, 0.32);
        appearance: none;
        font: inherit;
        font-size: 0.86rem;
        color: var(--soft);
        cursor: pointer;
        box-shadow: inset 0 1px 0 rgba(246, 239, 226, 0.06);
      }

      .cart-pill b { color: var(--ink); }

      .category-commerce-bar {
        display: grid;
        grid-template-columns: minmax(0, 1fr) auto;
        gap: clamp(1rem, 3vw, 2.2rem);
        align-items: center;
        margin-top: clamp(2rem, 5vw, 4rem);
        padding: clamp(1rem, 2.4vw, 1.5rem) 0;
        border-top: 1px solid rgba(231, 184, 91, 0.26);
        border-bottom: 1px solid rgba(246, 239, 226, 0.1);
        background:
          linear-gradient(90deg, rgba(231, 184, 91, 0.06), transparent 42%),
          linear-gradient(180deg, rgba(246, 239, 226, 0.025), rgba(8, 6, 4, 0.18));
      }

      .category-commerce-copy {
        display: grid;
        gap: 0.28rem;
      }

      .category-commerce-copy small {
        color: var(--honey);
        font-size: 0.72rem;
        letter-spacing: 0.12em;
        text-transform: uppercase;
      }

      .category-commerce-copy b {
        color: var(--ink);
        font-family: "Instrument Serif", Georgia, serif;
        font-size: clamp(1.45rem, 2.4vw, 2.1rem);
        font-weight: 400;
        line-height: 1.08;
      }

      .category-commerce-copy span {
        max-width: 58ch;
        color: var(--soft);
        font-size: 0.94rem;
        line-height: 1.5;
      }

      .category-commerce-actions {
        display: flex;
        align-items: center;
        justify-content: flex-end;
        gap: 0.65rem;
      }

      .category-commerce-actions .museum-button {
        white-space: nowrap;
      }

      @media (max-width: 720px) {
        .category-commerce-bar {
          grid-template-columns: 1fr;
          align-items: start;
        }

        .category-commerce-actions {
          justify-content: flex-start;
          flex-wrap: wrap;
        }
      }

      .shop-grid {
        display: grid;
        grid-template-columns: repeat(3, minmax(0, 1fr));
        gap: 1rem;
        margin-top: 1.7rem;
      }

      .product-card {
        position: relative;
        display: flex;
        flex-direction: column;
        min-height: 100%;
        border: 1px solid rgba(246, 239, 226, 0.12);
        border-radius: 18px;
        overflow: hidden;
        background:
          radial-gradient(circle at 18% 0%, rgba(231, 184, 91, 0.11), transparent 32%),
          linear-gradient(180deg, rgba(246, 239, 226, 0.06), rgba(8, 6, 4, 0.48));
        box-shadow:
          inset 0 1px 0 rgba(246, 239, 226, 0.05),
          0 16px 42px rgba(0, 0, 0, 0.18);
        isolation: isolate;
        transition:
          transform 300ms ease,
          border-color 300ms ease,
          box-shadow 300ms ease;
      }

      .product-card::before {
        content: "";
        position: absolute;
        inset: 0;
        z-index: -1;
        opacity: 0;
        pointer-events: none;
        background: radial-gradient(circle at 50% 0%, rgba(231, 184, 91, 0.16), transparent 44%);
        transition: opacity 300ms ease;
      }

      .product-card.is-upcoming,
      .opt-card.is-upcoming {
        opacity: 0.86;
      }

      .cat-band.is-upcoming {
        opacity: 0.72;
      }

      .product-card.is-upcoming,
      .opt-card.is-upcoming {
        cursor: default;
      }

      .product-card.is-upcoming .product-thumb img,
      .opt-card.is-upcoming .opt-thumb img {
        filter: saturate(0.88) brightness(0.84);
      }

      .upcoming-note,
      .launch-note {
        display: inline-flex;
        align-items: center;
        width: fit-content;
        min-height: 30px;
        padding: 0.28rem 0.62rem;
        border-radius: 999px;
        border: 1px solid rgba(231, 184, 91, 0.24);
        background: rgba(231, 184, 91, 0.055);
        color: rgba(246, 239, 226, 0.78);
        font-size: 0.74rem;
        line-height: 1.2;
      }

      .launch-note {
        color: var(--honey);
      }

      .product-card:hover {
        transform: translateY(-6px);
        border-color: color-mix(in oklch, var(--honey) 40%, rgba(246, 239, 226, 0.2));
        box-shadow: 0 26px 58px rgba(0, 0, 0, 0.46);
      }

      .product-card:hover::before {
        opacity: 1;
      }

      .product-thumb {
        position: relative;
        aspect-ratio: 16 / 10.8;
        display: grid;
        place-items: center;
        overflow: hidden;
        background:
          radial-gradient(circle at 50% 36%, rgba(231, 184, 91, 0.1), transparent 44%),
          rgba(8, 6, 4, 0.42);
      }

      .product-thumb[role="button"] {
        cursor: pointer;
      }

      .product-thumb[role="button"]:focus-visible {
        outline: 2px solid color-mix(in oklch, var(--honey) 80%, white 8%);
        outline-offset: -4px;
      }

      .product-thumb img {
        width: 100%;
        height: 100%;
        object-fit: var(--img-fit, cover);
        object-position: var(--img-pos, center center);
        padding: var(--img-pad, 0);
        box-sizing: border-box;
        filter: saturate(1.14) brightness(1.06);
        transition: transform 480ms ease;
      }

      .product-card[data-image-fit="contain"] .product-thumb { background: radial-gradient(circle at 50% 38%, rgba(231, 184, 91, 0.16), transparent 42%), linear-gradient(180deg, rgba(246, 239, 226, 0.045), rgba(8, 6, 4, 0.44)); }
      .product-card[data-image-fit="contain"] .product-thumb img { padding: max(var(--img-pad, 0), 7%); }

      .product-card:hover .product-thumb img { transform: scale(1.035); }

      .product-badge {
        position: absolute;
        top: 0.7rem;
        left: 0.7rem;
        padding: 0.3rem 0.62rem;
        border-radius: 999px;
        font-size: 0.66rem;
        letter-spacing: 0.08em;
        text-transform: uppercase;
        background: rgba(20, 16, 11, 0.82);
        border: 1px solid rgba(231, 184, 91, 0.4);
        color: var(--honey);
      }

      .product-body {
        display: flex;
        flex-direction: column;
        gap: 0.62rem;
        padding: 1.12rem 1.18rem 1.22rem;
        flex: 1;
      }

      .product-body h3 {
        margin: 0;
        font-size: 1.18rem;
        line-height: 1.2;
        display: -webkit-box;
        -webkit-line-clamp: 2;
        -webkit-box-orient: vertical;
        overflow: hidden;
      }

      .product-body small { color: var(--soft); font-size: 0.82rem; }

      .product-meta {
        margin-top: auto;
        display: flex;
        align-items: center;
        justify-content: space-between;
        flex-wrap: wrap;
        gap: 0.6rem;
        padding-top: 0.82rem;
        border-top: 1px solid rgba(246, 239, 226, 0.08);
      }

      .product-price { display: inline-flex; align-items: center; width: fit-content; min-height: 32px; border: 1px solid rgba(231, 184, 91, 0.22); border-radius: 999px; padding: 0.3rem 0.7rem; background: rgba(231, 184, 91, 0.06); color: rgba(246, 239, 226, 0.88); font-size: 0.8rem; font-weight: 700; line-height: 1.2; }

      .add-btn {
        min-height: 44px;
        border: 1px solid color-mix(in oklch, var(--honey) 55%, white 10%);
        border-radius: 999px;
        padding: 0.5rem 0.95rem;
        color: var(--ink);
        background:
          linear-gradient(90deg, color-mix(in oklch, var(--honey) 30%, transparent), transparent),
          rgba(246, 239, 226, 0.06);
        font-size: 0.84rem;
        font-weight: 600;
        cursor: pointer;
        white-space: nowrap;
        transition: transform 200ms ease, background 200ms ease, border-color 200ms ease;
      }

      .add-btn:hover { transform: translateY(-2px); }

      .add-btn.added {
        background: color-mix(in oklch, var(--mint) 30%, rgba(8, 8, 6, 0.5));
        border-color: color-mix(in oklch, var(--mint) 60%, white 10%);
      }

      .demo-note {
        margin-top: 1rem;
        font-size: 0.8rem;
        color: var(--soft);
        font-style: italic;
      }

      @media (max-width: 900px) {
        .shop-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
      }

      @media (max-width: 560px) {
        .shop-grid { grid-template-columns: 1fr; }
      }

      .shop-subhead {
        margin: 2.6rem 0 0;
        font-family: "Instrument Serif", serif;
        font-weight: 400;
        font-size: 1.55rem;
        letter-spacing: -0.01em;
        color: var(--soft);
      }

      .vitrin-grid {
        display: grid;
        grid-template-columns: repeat(3, minmax(0, 1fr));
        gap: 1.1rem;
        margin-top: 1.7rem;
      }

      .vitrin-card .product-thumb { aspect-ratio: 16 / 12; }

      .product-desc {
        margin: 0;
        color: var(--soft);
        font-size: 0.88rem;
        line-height: 1.56;
      }

      .product-icerik {
        margin: 0;
        color: var(--muted);
        font-size: 0.78rem;
        line-height: 1.5;
      }

      .product-icerik b { color: var(--soft); font-weight: 600; }
      .product-proof {
        display: flex;
        flex-wrap: wrap;
        gap: 0.36rem;
        margin-top: 0.1rem;
      }
      .product-proof span {
        min-height: 30px;
        display: inline-flex;
        align-items: center;
        border: 1px solid rgba(246, 239, 226, 0.1);
        border-radius: 10px;
        padding: 0.24rem 0.58rem;
        color: rgba(246, 239, 226, 0.74);
        background:
          linear-gradient(180deg, rgba(246, 239, 226, 0.045), rgba(8, 6, 4, 0.1)),
          rgba(246, 239, 226, 0.025);
        font-size: 0.71rem;
        line-height: 1.2;
      }

      .modal-proof {
        margin: 0.05rem 0 0.25rem;
      }

      .size-chips {
        display: flex;
        flex-wrap: wrap;
        gap: 0.4rem;
        margin-top: 0.15rem;
      }

      .size-chip {
        min-height: 44px;
        padding: 0.34rem 0.72rem;
        border-radius: 10px;
        border: 1px solid rgba(246, 239, 226, 0.16);
        background: rgba(246, 239, 226, 0.04);
        color: var(--soft);
        font-size: 0.78rem;
        cursor: pointer;
        transition: transform 160ms ease, color 160ms ease, border-color 180ms ease, background 180ms ease;
      }

      .size-chip:hover {
        transform: translateY(-1px);
        color: var(--ink);
        border-color: color-mix(in oklch, var(--honey) 45%, rgba(246, 239, 226, 0.2));
      }

      .size-chip.active {
        color: var(--ink);
        background: color-mix(in oklch, var(--honey) 20%, rgba(8, 8, 6, 0.5));
        border-color: color-mix(in oklch, var(--honey) 60%, white 8%);
      }

      @media (max-width: 900px) {
        .vitrin-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
      }

      @media (max-width: 560px) {
        .vitrin-grid { grid-template-columns: 1fr; }
      }

      .menu-toggle {
        display: inline-flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
        gap: 5px;
        width: 44px;
        height: 44px;
        border: 0;
        background: transparent;
        cursor: pointer;
      }

      .menu-toggle span {
        display: block;
        width: 24px;
        height: 2px;
        border-radius: 2px;
        background: var(--ink);
        transition: transform 260ms cubic-bezier(0.22, 1, 0.36, 1), opacity 200ms ease;
      }

      .menu-toggle[aria-expanded="true"] span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
      .menu-toggle[aria-expanded="true"] span:nth-child(2) { opacity: 0; }
      .menu-toggle[aria-expanded="true"] span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

      .menu-overlay {
        position: fixed;
        inset: 0;
        z-index: 40;
        display: flex;
        justify-content: flex-end;
        background: rgba(8, 6, 4, 0.55);
        backdrop-filter: blur(4px);
        opacity: 0;
        visibility: hidden;
        pointer-events: none;
        transition: opacity 260ms ease, visibility 260ms ease;
      }

      .menu-overlay.is-open {
        opacity: 1;
        visibility: visible;
        pointer-events: auto;
      }

      .menu-panel {
        width: min(330px, 84vw);
        height: 100%;
        padding: 104px 30px 32px;
        display: flex;
        flex-direction: column;
        gap: 0.2rem;
        background: linear-gradient(180deg, #1c1610, #14100b);
        border-left: 1px solid rgba(231, 184, 91, 0.18);
        box-shadow: -24px 0 60px rgba(0, 0, 0, 0.5);
        transform: translateX(26px);
        transition: transform 320ms cubic-bezier(0.22, 1, 0.36, 1);
        overflow-y: auto;
      }

      .menu-overlay.is-open .menu-panel { transform: translateX(0); }

      .menu-panel-label {
        margin-bottom: 0.6rem;
        color: var(--muted);
        text-transform: uppercase;
        letter-spacing: 0.18em;
        font-size: 0.74rem;
      }

      .menu-panel a {
        min-height: 50px;
        display: flex;
        align-items: center;
        padding: 0.4rem 0.2rem;
        color: var(--ink);
        text-decoration: none;
        font-size: 1.16rem;
        border-bottom: 1px solid rgba(246, 239, 226, 0.08);
        transition: color 180ms ease, padding 220ms ease;
      }

      .menu-panel a:hover,
      .menu-panel a:focus-visible {
        color: var(--honey);
        padding-left: 0.6rem;
      }

      .cart-btn {
        position: relative;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        width: 44px;
        height: 44px;
        border: 0;
        background: transparent;
        color: var(--ink);
        cursor: pointer;
      }

      .cart-badge {
        position: absolute;
        top: 2px;
        right: 0;
        min-width: 18px;
        height: 18px;
        padding: 0 4px;
        border-radius: 999px;
        background: var(--honey);
        color: #1a120a;
        font-size: 0.68rem;
        font-weight: 700;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        line-height: 1;
      }

      .cart-badge[hidden] { display: none; }

      #cartOpen,
      .cart-pill {
        display: inline-flex;
      }

      .cart-overlay,
      .modal-overlay {
        position: fixed;
        inset: 0;
        z-index: 45;
        display: flex;
        background: rgba(8, 6, 4, 0.6);
        backdrop-filter: blur(4px);
        opacity: 0;
        visibility: hidden;
        pointer-events: none;
        transition: opacity 260ms ease, visibility 260ms ease;
      }

      .cart-overlay { justify-content: flex-end; }
      .modal-overlay { align-items: center; justify-content: center; padding: 24px; }

      .cart-overlay.is-open,
      .modal-overlay.is-open {
        opacity: 1;
        visibility: visible;
        pointer-events: auto;
      }

      .cart-panel {
        width: min(400px, 90vw);
        height: 100%;
        display: flex;
        flex-direction: column;
        background: linear-gradient(180deg, #1c1610, #14100b);
        border-left: 1px solid rgba(231, 184, 91, 0.18);
        box-shadow: -24px 0 60px rgba(0, 0, 0, 0.5);
        transform: translateX(30px);
        transition: transform 320ms cubic-bezier(0.22, 1, 0.36, 1);
      }

      .cart-overlay.is-open .cart-panel { transform: translateX(0); }

      .cart-head {
        display: flex;
        align-items: center;
        justify-content: space-between;
        padding: 1.3rem 1.4rem;
        border-bottom: 1px solid rgba(246, 239, 226, 0.1);
      }

      .cart-head b { font-size: 1.15rem; }

      .cart-close,
      .modal-close {
        width: 40px;
        height: 40px;
        border: 1px solid rgba(246, 239, 226, 0.18);
        border-radius: 999px;
        background: rgba(246, 239, 226, 0.05);
        color: var(--ink);
        font-size: 1.3rem;
        line-height: 1;
        cursor: pointer;
        transition: background 200ms ease, transform 200ms ease;
      }

      .cart-close:hover,
      .modal-close:hover { background: rgba(246, 239, 226, 0.12); transform: rotate(90deg); }

      .cart-items {
        flex: 1;
        overflow-y: auto;
        padding: 0.4rem 1.4rem;
      }

      .cart-item {
        display: grid;
        grid-template-columns: 58px 1fr auto;
        gap: 0.8rem;
        align-items: center;
        padding: 0.9rem 0;
        border-bottom: 1px solid rgba(246, 239, 226, 0.08);
      }

      .cart-item img { width: 58px; height: 58px; object-fit: var(--img-fit, cover); object-position: var(--img-pos, center center); padding: var(--img-pad, 0); box-sizing: border-box; border-radius: 8px; background: rgba(8, 6, 4, 0.36); }
      .cart-item-info b { font-size: 0.95rem; display: block; }
      .cart-item-info small { color: var(--soft); font-size: 0.78rem; }
      .cart-item-right { display: flex; flex-direction: column; align-items: flex-end; gap: 0.4rem; }
      .cart-item-price { font-weight: 600; }
      .cart-item-remove { border: 0; background: none; color: var(--soft); font-size: 0.74rem; cursor: pointer; text-decoration: underline; }

      .qty-stepper {
        display: inline-flex;
        align-items: center;
        border: 1px solid rgba(246, 239, 226, 0.2);
        border-radius: 999px;
        overflow: hidden;
      }

      .qty-stepper button {
        width: 32px;
        height: 34px;
        border: 0;
        background: transparent;
        color: var(--ink);
        font-size: 1.05rem;
        cursor: pointer;
      }

      .qty-stepper span { min-width: 26px; text-align: center; font-size: 0.92rem; }
      .qty-stepper[hidden] { display: none !important; }

      .cart-empty {
        flex: 1;
        display: none;
        align-items: center;
        justify-content: center;
        color: var(--soft);
        font-size: 0.95rem;
        padding: 2rem;
        text-align: center;
      }

      .cart-empty.is-shown { display: flex; }

      .cart-foot {
        padding: 1.2rem 1.4rem 1.4rem;
        border-top: 1px solid rgba(246, 239, 226, 0.1);
      }

      .cart-total {
        display: flex;
        align-items: baseline;
        justify-content: space-between;
        margin-bottom: 0.9rem;
      }

      .cart-total b { font-size: 1.4rem; }
      .cart-checkout { width: 100%; justify-content: center; }
      .cart-whatsapp { width: 100%; justify-content: center; }

      .cart-whatsapp-note {
        margin: 0.6rem 0 0;
        font-size: 0.78rem;
        line-height: 1.4;
        opacity: 0.82;
      }

      .cart-trust {
        display: flex;
        flex-wrap: wrap;
        gap: 0.4rem 1rem;
        margin-top: 1rem;
        color: var(--soft);
        font-size: 0.74rem;
      }

      .cart-trust span { display: inline-flex; align-items: center; gap: 0.36rem; }
      .cart-trust svg { width: 15px; height: 15px; opacity: 0.8; }

      .modal-card {
        position: relative;
        width: min(820px, 100%);
        max-height: 86vh;
        overflow: hidden;
        display: grid;
        grid-template-columns: 1fr 1fr;
        background: linear-gradient(180deg, #1c1610, #14100b);
        border: 1px solid rgba(231, 184, 91, 0.2);
        border-radius: 14px;
        box-shadow: 0 40px 90px rgba(0, 0, 0, 0.6);
        transform: translateY(16px) scale(0.98);
        transition: transform 320ms cubic-bezier(0.22, 1, 0.36, 1);
      }

      .modal-overlay.is-open .modal-card { transform: translateY(0) scale(1); }
      .modal-close { position: absolute; top: 14px; right: 14px; z-index: 2; }
      .modal-media { position: relative; min-height: 300px; }
      .modal-media img { width: 100%; height: 100%; object-fit: var(--img-fit, cover); object-position: var(--img-pos, center center); padding: var(--img-pad, 0); box-sizing: border-box; filter: saturate(1.14) brightness(1.06); }

      .modal-body {
        padding: 2rem 1.8rem;
        display: flex;
        flex-direction: column;
        gap: 0.7rem;
        overflow-y: auto;
      }

      .modal-body .product-badge { position: static; align-self: flex-start; }
      .modal-body h3 { margin: 0; font-size: 1.6rem; font-family: "Instrument Serif", serif; font-weight: 400; }
      .modal-buy { display: flex; align-items: center; justify-content: space-between; gap: 1rem; margin-top: 0.4rem; }
      .modal-buy .product-price { font-size: 1.5rem; }

      .shop-filter {
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: 1rem;
        flex-wrap: wrap;
        margin: 1rem 0 0;
      }

      .filter-chips { display: flex; flex-wrap: wrap; gap: 0.4rem; }

      .filter-chip {
        min-height: 38px;
        padding: 0.4rem 0.85rem;
        border-radius: 999px;
        border: 1px solid rgba(246, 239, 226, 0.16);
        background: rgba(246, 239, 226, 0.04);
        color: var(--soft);
        font-size: 0.82rem;
        cursor: pointer;
        transition: color 180ms ease, border-color 180ms ease, background 180ms ease;
      }

      .filter-chip:hover { color: var(--ink); border-color: color-mix(in oklch, var(--honey) 45%, rgba(246, 239, 226, 0.2)); }
      .filter-chip.active { color: var(--ink); background: color-mix(in oklch, var(--honey) 20%, rgba(8, 8, 6, 0.5)); border-color: color-mix(in oklch, var(--honey) 60%, white 8%); }

      .sort-select {
        min-height: 44px;
        padding: 0.4rem 0.8rem;
        border-radius: 999px;
        border: 1px solid rgba(246, 239, 226, 0.16);
        background: rgba(20, 16, 11, 0.9);
        color: var(--ink);
        font-size: 0.82rem;
        font-family: inherit;
        cursor: pointer;
      }

      .product-thumb { cursor: pointer; }

      .toast {
        position: fixed;
        left: 50%;
        bottom: 28px;
        transform: translateX(-50%) translateY(20px);
        z-index: 60;
        padding: 0.8rem 1.3rem;
        border-radius: 999px;
        background: rgba(20, 16, 11, 0.96);
        border: 1px solid color-mix(in oklch, var(--mint) 50%, rgba(246, 239, 226, 0.2));
        color: var(--ink);
        font-size: 0.9rem;
        opacity: 0;
        pointer-events: none;
        transition: opacity 260ms ease, transform 260ms ease;
      }

      .toast.is-shown { opacity: 1; transform: translateX(-50%) translateY(0); }

      @media (max-width: 640px) {
        .modal-card { grid-template-columns: 1fr; max-height: 92vh; }
        .modal-media { min-height: 200px; max-height: 34vh; }
      }

      .stars {
        color: var(--honey);
        letter-spacing: 0.02em;
        font-size: 0.78rem;
        font-weight: 650;
        line-height: 1.25;
      }
      .rating-row {
        display: grid;
        grid-template-columns: minmax(78px, max-content) minmax(0, 1fr);
        align-items: center;
        gap: 0.7rem;
        padding: 0.16rem 0 0.18rem;
      }
      .rating-row .stars {
        display: inline-flex;
        align-items: center;
        width: fit-content;
        min-height: 30px;
        padding: 0.28rem 0.62rem;
        border-radius: 999px;
        border: 1px solid rgba(231, 184, 91, 0.22);
        background: rgba(231, 184, 91, 0.055);
      }
      .rating-row small {
        color: var(--soft);
        font-size: 0.76rem;
        line-height: 1.45;
      }

      .stock-tag { font-size: 0.78rem; color: #e0a04a; }
      .stock-tag.out { color: #d98a8a; }

      .add-btn:disabled { opacity: 0.5; cursor: not-allowed; }

      .modal-thumbs {
        position: absolute;
        left: 12px;
        right: 12px;
        bottom: 12px;
        display: flex;
        gap: 0.4rem;
        flex-wrap: wrap;
      }

      .modal-thumb {
        width: 52px;
        height: 52px;
        border-radius: 7px;
        overflow: hidden;
        border: 2px solid transparent;
        cursor: pointer;
        padding: 0;
        background: none;
      }

      .modal-thumb img { width: 100%; height: 100%; object-fit: cover; object-position: var(--img-pos, center center); }
      .modal-thumb.active { border-color: var(--honey); }

      .ship-bar { margin-bottom: 1rem; }
      .ship-bar p { margin: 0 0 0.4rem; font-size: 0.8rem; color: var(--soft); }
      .ship-bar p b { color: var(--honey); }
      .ship-bar-track { height: 6px; border-radius: 999px; background: rgba(246, 239, 226, 0.12); overflow: hidden; }
      .ship-bar-fill { height: 100%; width: 0; background: linear-gradient(90deg, var(--honey), var(--turmeric)); transition: width 360ms ease; }

      .site-footer {
        border-top: 1px solid var(--line);
        background: #0d0a07;
        padding: clamp(2.6rem, 5vw, 4rem) clamp(20px, 5vw, 80px) 2rem;
      }

      .footer-grid {
        display: grid;
        grid-template-columns: 1.6fr 1fr 1fr 1fr;
        gap: 2rem;
        max-width: 1240px;
        margin: 0 auto;
      }

      .footer-brand p { color: var(--soft); font-size: 0.9rem; line-height: 1.6; max-width: 30ch; margin: 0.8rem 0 1rem; }
      .footer-brand img { width: 64px; height: 64px; }
      .footer-social { display: flex; gap: 0.6rem; }
      .footer-social a {
        width: 40px; height: 40px; border-radius: 999px; border: 1px solid var(--line);
        display: inline-flex; align-items: center; justify-content: center; color: var(--ink); border-bottom: 1px solid var(--line);
        transition: border-color 200ms ease, color 200ms ease;
      }
      .footer-social a:hover { color: var(--honey); border-color: color-mix(in oklch, var(--honey) 50%, var(--line)); }
      .footer-social svg { width: 18px; height: 18px; }

      .footer-col h4 { margin: 0 0 0.9rem; font-size: 0.78rem; letter-spacing: 0.14em; text-transform: uppercase; color: var(--muted); font-weight: 600; }
      .footer-col ul { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 0.55rem; }
      .footer-col a, .footer-col button {
        min-height: 36px;
        display: inline-flex;
        align-items: center;
        color: var(--soft); font-size: 0.88rem; text-decoration: none; border: 0; background: none; padding: 0; cursor: pointer; text-align: left;
        transition: color 180ms ease;
      }
      .footer-col a:hover, .footer-col button:hover { color: var(--honey); }

      .footer-bottom {
        max-width: 1240px; margin: 2.4rem auto 0; padding-top: 1.4rem; border-top: 1px solid rgba(246, 239, 226, 0.08);
        display: flex; align-items: center; justify-content: space-between; gap: 1rem; flex-wrap: wrap;
        color: var(--muted); font-size: 0.8rem;
      }
      .pay-icons { display: flex; gap: 0.5rem; align-items: center; }
      .pay-icons span {
        padding: 0.3rem 0.6rem; border: 1px solid var(--line); border-radius: 6px; font-size: 0.72rem; letter-spacing: 0.04em; color: var(--soft);
      }

      .info-overlay {
        position: fixed; inset: 0; z-index: 55; display: flex; align-items: center; justify-content: center; padding: 24px;
        background: rgba(8, 6, 4, 0.62); backdrop-filter: blur(4px);
        opacity: 0; visibility: hidden; pointer-events: none; transition: opacity 260ms ease, visibility 260ms ease;
      }
      .info-overlay.is-open { opacity: 1; visibility: visible; pointer-events: auto; }
      .info-card {
        position: relative; width: min(640px, 100%); max-height: 84vh; overflow-y: auto;
        background: linear-gradient(180deg, #1c1610, #14100b); border: 1px solid rgba(231, 184, 91, 0.2); border-radius: 14px;
        padding: 2.4rem 2.2rem; box-shadow: 0 40px 90px rgba(0, 0, 0, 0.6);
        transform: translateY(16px); transition: transform 320ms cubic-bezier(0.22, 1, 0.36, 1);
      }
      .info-card.article-info { width: min(860px, 100%); }
      .info-overlay.is-open .info-card { transform: translateY(0); }
      .info-card h3 { margin: 0 0 1rem; font-family: "Instrument Serif", serif; font-weight: 400; font-size: 1.8rem; }
      .info-card p, .info-card li { color: var(--soft); font-size: 0.92rem; line-height: 1.7; }
      .info-card h4 { color: var(--ink); margin: 1.2rem 0 0.4rem; font-size: 1rem; }

      .support-layout {
        display: grid;
        grid-template-columns: minmax(0, 1fr) minmax(260px, 0.32fr);
        gap: clamp(1rem, 3vw, 2rem);
        align-items: start;
      }
      .support-card,
      .support-nav {
        border: 1px solid rgba(246, 239, 226, 0.12);
        background: linear-gradient(180deg, rgba(246, 239, 226, 0.055), rgba(8, 6, 4, 0.24));
        border-radius: 10px;
        box-shadow: 0 22px 70px rgba(0, 0, 0, 0.22);
      }
      .support-card { padding: clamp(1.2rem, 3vw, 2rem); }
      .support-card h3 { margin: 0 0 1rem; font-family: "Instrument Serif", serif; font-size: clamp(1.8rem, 4vw, 3rem); font-weight: 400; line-height: 0.98; }
      .support-card h4 { margin: 1.4rem 0 0.42rem; color: var(--ink); font-size: 1rem; }
      .support-card p,
      .support-card li { color: var(--soft); line-height: 1.75; font-size: 0.98rem; }
      .support-card p:first-of-type { color: color-mix(in oklch, var(--ink) 72%, var(--soft)); font-size: 1.05rem; }
      .support-nav { padding: 1rem; position: sticky; top: calc(var(--topbar-h) + 18px); }
      .support-nav b { display: block; margin: 0 0 0.7rem; color: var(--ink); font-size: 0.88rem; letter-spacing: 0.12em; text-transform: uppercase; }
      .support-nav a {
        display: flex; align-items: center; justify-content: space-between; gap: 0.8rem;
        min-height: 42px; padding: 0.72rem 0.85rem; border-radius: 8px; color: var(--soft);
        border: 1px solid transparent; transition: color 180ms ease, border-color 180ms ease, background 180ms ease;
      }
      .support-nav a:hover,
      .support-nav a[aria-current="page"] {
        color: var(--ink);
        border-color: rgba(231, 184, 91, 0.28);
        background: rgba(231, 184, 91, 0.08);
      }
      .support-footnote {
        margin-top: 1.5rem; padding-top: 1rem; border-top: 1px solid rgba(246, 239, 226, 0.1);
        color: var(--muted); font-size: 0.86rem;
      }

      .cookie-consent {
        position: fixed;
        left: auto;
        right: clamp(16px, 4vw, 44px);
        bottom: clamp(16px, 3vw, 28px);
        width: min(760px, calc(100vw - 88px));
        z-index: 54;
        display: grid;
        grid-template-columns: minmax(0, 1fr) auto;
        gap: 0.85rem;
        align-items: center;
        padding: 0.88rem 0.95rem;
        border: 1px solid rgba(231, 184, 91, 0.24);
        border-radius: 16px;
        background: color-mix(in oklch, #11100c 92%, var(--honey) 8%);
        box-shadow: 0 24px 70px rgba(0, 0, 0, 0.54);
        color: var(--ink);
        transform: translateY(18px);
        opacity: 0;
        pointer-events: none;
        transition: opacity 240ms ease, transform 240ms ease;
      }
      .cookie-consent[hidden] { display: none; }
      .cookie-consent.is-visible {
        transform: translateY(0);
        opacity: 1;
        pointer-events: auto;
      }
      .cookie-consent p {
        margin: 0.2rem 0 0;
        color: var(--soft);
        font-size: 0.86rem;
        line-height: 1.55;
      }
      .cookie-consent b {
        display: block;
        font-size: 0.92rem;
        letter-spacing: 0.05em;
        text-transform: uppercase;
      }
      .cookie-actions {
        display: flex;
        flex-wrap: wrap;
        justify-content: flex-end;
        gap: 0.55rem;
      }
      .cookie-button {
        min-height: 40px;
        padding: 0.58rem 0.86rem;
        border: 1px solid rgba(246, 239, 226, 0.18);
        border-radius: 999px;
        background: rgba(246, 239, 226, 0.06);
        color: var(--ink);
        font: inherit;
        cursor: pointer;
      }
      .cookie-button.primary {
        border-color: rgba(231, 184, 91, 0.58);
        background: rgba(231, 184, 91, 0.18);
        color: #fff7dc;
      }
      .cookie-button:hover,
      .cookie-button:focus-visible { border-color: rgba(231, 184, 91, 0.72); }

      @media (max-width: 860px) {
        .footer-grid { grid-template-columns: 1fr 1fr; }
        .footer-brand { grid-column: 1 / -1; }
      }
      @media (max-width: 520px) {
        .footer-grid { grid-template-columns: 1fr; }
        .cookie-consent {
          grid-template-columns: 1fr;
          left: 12px;
          right: 12px;
          bottom: max(10px, env(safe-area-inset-bottom));
          gap: 0.62rem;
          padding: 0.78rem 0.86rem;
          border-radius: 14px;
        }
        .cookie-consent b {
          font-size: 0.82rem;
          letter-spacing: 0.04em;
        }
        .cookie-consent p {
          margin-top: 0.12rem;
          font-size: 0.78rem;
          line-height: 1.38;
        }
        .cookie-actions {
          display: grid;
          grid-template-columns: 0.82fr minmax(0, 1fr) minmax(0, 1fr);
          gap: 0.45rem;
          justify-content: stretch;
        }
        .cookie-button {
          flex: 1 1 auto;
          min-height: 40px;
          padding: 0.46rem 0.56rem;
          font-size: 0.82rem;
        }
        .cookie-button.inline-info-link {
          grid-column: auto;
          min-height: 40px;
          justify-self: start;
          padding: 0 0.08rem;
          margin: 0;
          font-size: 0.82rem;
        }
      }

      .checkout-overlay {
        position: fixed; inset: 0; z-index: 56; display: flex; align-items: center; justify-content: center; padding: 24px;
        background: rgba(8, 6, 4, 0.66); backdrop-filter: blur(5px);
        opacity: 0; visibility: hidden; pointer-events: none; transition: opacity 260ms ease, visibility 260ms ease;
      }
      .checkout-overlay.is-open { opacity: 1; visibility: visible; pointer-events: auto; }
      .checkout-card {
        position: relative; width: min(940px, 100%); max-height: 90vh; overflow: hidden;
        background: linear-gradient(180deg, #1c1610, #14100b); border: 1px solid rgba(231, 184, 91, 0.2); border-radius: 16px;
        box-shadow: 0 40px 100px rgba(0, 0, 0, 0.6); display: flex; flex-direction: column;
        transform: translateY(18px) scale(0.98); transition: transform 320ms cubic-bezier(0.22, 1, 0.36, 1);
      }
      .checkout-overlay.is-open .checkout-card { transform: translateY(0) scale(1); }
      .checkout-head { display: flex; align-items: center; justify-content: space-between; padding: 1.2rem 1.6rem; border-bottom: 1px solid rgba(246, 239, 226, 0.1); }
      .checkout-head b { font-size: 1.15rem; }
      .checkout-grid { display: grid; grid-template-columns: 1.5fr 1fr; flex: 1; overflow: hidden; }
      .checkout-main { padding: 1.6rem; overflow-y: auto; }
      .checkout-aside { padding: 1.6rem; background: rgba(8, 6, 4, 0.4); border-left: 1px solid rgba(246, 239, 226, 0.08); overflow-y: auto; }

      .steps { display: flex; gap: 0.5rem; margin-bottom: 1.5rem; }
      .step-dot { flex: 1; display: flex; align-items: center; gap: 0.5rem; font-size: 0.8rem; color: var(--soft); }
      .step-dot i { width: 24px; height: 24px; flex: none; border-radius: 999px; border: 1px solid var(--line); display: inline-flex; align-items: center; justify-content: center; font-style: normal; font-size: 0.78rem; }
      .step-dot.active i { background: var(--honey); border-color: var(--honey); color: #1a120a; }
      .step-dot.done i { background: color-mix(in oklch, var(--mint) 50%, transparent); border-color: var(--mint); color: var(--ink); }

      .co-step { display: none; flex-direction: column; gap: 0.9rem; }
      .co-step.active { display: flex; }
      .co-step h4 { margin: 0 0 0.2rem; font-size: 1.05rem; }
      .form-row { display: grid; grid-template-columns: 1fr 1fr; gap: 0.8rem; }
      .field { display: flex; flex-direction: column; gap: 0.3rem; }
      .field.full { grid-column: 1 / -1; }
      .field label { font-size: 0.78rem; color: var(--soft); }
      .field input {
        min-height: 44px; padding: 0.6rem 0.8rem; border-radius: 8px; border: 1px solid rgba(246, 239, 226, 0.18);
        background: rgba(246, 239, 226, 0.05); color: var(--ink); font-size: 0.92rem; font-family: inherit;
      }
      .field input:focus { outline: none; border-color: color-mix(in oklch, var(--honey) 55%, transparent); }
      .field input.invalid { border-color: #d98a8a; }
      .field-error { display: block; margin-top: 0.35rem; color: #e0a1a1; font-size: 0.76rem; line-height: 1.35; }
      .consent-row {
        display: flex;
        align-items: flex-start;
        gap: 0.58rem;
        color: var(--soft);
        font-size: 0.82rem;
        line-height: 1.45;
        padding: 0.72rem 0.78rem;
        border: 1px solid rgba(246, 239, 226, 0.12);
        border-radius: 8px;
        background: rgba(246, 239, 226, 0.035);
      }
      .consent-row.full { grid-column: 1 / -1; }
      .consent-row input { margin-top: 0.18rem; accent-color: var(--honey); }
      .consent-row.invalid { border-color: #d98a8a; color: var(--ink); }
      .consent-note {
        grid-column: 1 / -1;
        margin: -0.35rem 0 0;
        color: var(--muted);
        font-size: 0.78rem;
        line-height: 1.5;
      }
      .inline-info-link {
        appearance: none;
        border: 0;
        display: inline-flex;
        align-items: center;
        min-height: 32px;
        margin: -0.28rem 0;
        padding: 0 0.08rem;
        background: transparent;
        color: var(--honey);
        font: inherit;
        text-decoration: underline;
        text-underline-offset: 0.18em;
        cursor: pointer;
      }
      .inline-info-link:hover,
      .inline-info-link:focus-visible { color: var(--ink); }
      .hp-field {
        position: absolute;
        left: -10000px;
        width: 1px;
        height: 1px;
        opacity: 0;
        pointer-events: none;
      }

      .ship-option {
        width: 100%; color: inherit; font: inherit; text-align: left; background: rgba(246, 239, 226, 0.04);
        display: flex; align-items: center; justify-content: space-between; gap: 0.8rem; padding: 0.9rem 1rem;
        border: 1px solid rgba(246, 239, 226, 0.16); border-radius: 10px; cursor: pointer; transition: border-color 200ms ease, background 200ms ease;
      }
      .ship-option.active { border-color: color-mix(in oklch, var(--honey) 60%, white 8%); background: color-mix(in oklch, var(--honey) 12%, transparent); }
      .ship-option b { font-size: 0.92rem; }
      .ship-option small { color: var(--soft); font-size: 0.78rem; display: block; }

      .co-summary-item { display: grid; grid-template-columns: 44px 1fr auto; gap: 0.6rem; align-items: center; padding: 0.6rem 0; border-bottom: 1px solid rgba(246, 239, 226, 0.08); }
      .co-summary-item img { width: 44px; height: 44px; border-radius: 6px; object-fit: var(--img-fit, cover); object-position: var(--img-pos, center center); padding: var(--img-pad, 0); box-sizing: border-box; background: rgba(8, 6, 4, 0.36); }
      .co-summary-item small { color: var(--soft); font-size: 0.76rem; }
      .co-summary-note { grid-template-columns: 1fr auto; }
      .co-line { display: flex; align-items: center; justify-content: space-between; margin-top: 0.7rem; font-size: 0.9rem; color: var(--soft); }
      .co-line.total { margin-top: 1rem; padding-top: 0.9rem; border-top: 1px solid rgba(246, 239, 226, 0.12); color: var(--ink); }
      .co-line.total b { font-size: 1.3rem; }

      .checkout-foot { display: flex; align-items: center; justify-content: space-between; gap: 1rem; padding: 1.2rem 1.6rem; border-top: 1px solid rgba(246, 239, 226, 0.1); }
      .co-secure { display: flex; align-items: center; gap: 0.4rem; font-size: 0.76rem; color: var(--soft); }
      .co-secure svg { width: 14px; height: 14px; }
      .co-demo-note { font-size: 0.74rem; color: var(--muted); font-style: italic; margin: 0.4rem 0 0; }

      .co-success { display: none; flex-direction: column; align-items: center; text-align: center; gap: 0.8rem; padding: 3rem 2rem; }
      .co-success.is-shown { display: flex; }
      .co-success .check { width: 64px; height: 64px; border-radius: 999px; background: color-mix(in oklch, var(--mint) 30%, rgba(8,8,6,0.4)); border: 1px solid var(--mint); display: flex; align-items: center; justify-content: center; }
      .co-success .check svg { width: 30px; height: 30px; color: var(--mint); }
      .co-success h3 { margin: 0; font-family: "Instrument Serif", serif; font-weight: 400; font-size: 1.9rem; }
      .co-order-no { font-size: 0.9rem; color: var(--soft); }
      .co-order-no b { color: var(--honey); }

      @media (max-width: 760px) {
        .checkout-grid { grid-template-columns: 1fr; }
        .checkout-aside { border-left: 0; border-top: 1px solid rgba(246, 239, 226, 0.08); }
      }

      .pm-section { border-top: 1px solid rgba(246, 239, 226, 0.1); padding-top: 0.9rem; margin-top: 0.2rem; }
      .pm-section h5 { margin: 0 0 0.6rem; font-size: 0.74rem; letter-spacing: 0.14em; text-transform: uppercase; color: var(--muted); }

      .taste-wrap { display: flex; align-items: center; gap: 1.1rem; }
      .taste-radar { width: 124px; height: 124px; flex: none; }
      .taste-legend { display: flex; flex-direction: column; gap: 0.34rem; flex: 1; }
      .taste-legend .tl-row { display: flex; align-items: center; justify-content: space-between; gap: 0.8rem; font-size: 0.8rem; color: var(--soft); }
      .taste-legend .dots { letter-spacing: 1px; color: var(--honey); }

      .origin-row { display: flex; gap: 1.4rem; flex-wrap: wrap; margin-bottom: 0.5rem; }
      .origin-item small { color: var(--muted); font-size: 0.7rem; text-transform: uppercase; letter-spacing: 0.1em; display: block; margin-bottom: 0.15rem; }
      .origin-item b { font-size: 0.9rem; }
      .origin-note { color: var(--soft); font-size: 0.86rem; line-height: 1.6; margin: 0; }

      .review-item { display: flex; gap: 0.8rem; padding: 0.75rem 0; border-bottom: 1px solid rgba(246, 239, 226, 0.06); }
      .review-item img { width: 50px; height: 50px; border-radius: 8px; object-fit: cover; flex: none; }
      .review-name { color: var(--ink); font-weight: 600; font-size: 0.85rem; }
      .review-item .stars { font-size: 0.76rem; }
      .review-text { color: var(--soft); font-size: 0.85rem; line-height: 1.5; margin: 0.2rem 0 0; }

      .zoom-hint {
        position: absolute; top: 10px; left: 10px; z-index: 3;
        background: rgba(20, 16, 11, 0.82); border: 1px solid rgba(231, 184, 91, 0.3); color: var(--honey);
        font-size: 0.68rem; letter-spacing: 0.04em; padding: 0.32rem 0.6rem; border-radius: 999px; pointer-events: none;
        display: inline-flex; align-items: center; gap: 0.35rem;
      }
      .zoom-hint svg { width: 13px; height: 13px; }
      .modal-media { cursor: crosshair; touch-action: none; }
      .modal-media img { transition: transform 140ms ease; will-change: auto; }
      .modal-media.zooming img { transition: none; will-change: transform; }

      .notify-btn {
        min-height: 46px; border: 1px dashed color-mix(in oklch, var(--honey) 50%, rgba(246, 239, 226, 0.3));
        border-radius: 999px; padding: 0.6rem 1rem; color: var(--honey); background: rgba(231, 184, 91, 0.06);
        font-size: 0.84rem; font-weight: 650; cursor: pointer; transition: background 200ms ease, border-color 200ms ease, transform 200ms ease;
      }
      .notify-btn:hover { background: rgba(231, 184, 91, 0.12); border-color: rgba(231, 184, 91, 0.62); transform: translateY(-1px); }

      .search-overlay {
        position: fixed; inset: 0; z-index: 58; display: flex; justify-content: center; align-items: flex-start;
        padding: 12vh 24px 24px; background: rgba(8, 6, 4, 0.7); backdrop-filter: blur(6px);
        opacity: 0; visibility: hidden; pointer-events: none; transition: opacity 240ms ease, visibility 240ms ease;
      }
      .search-overlay.is-open { opacity: 1; visibility: visible; pointer-events: auto; }
      .search-box { width: min(620px, 100%); }
      .search-input { width: 100%; min-height: 56px; padding: 1rem 1.2rem; border-radius: 12px; border: 1px solid rgba(231, 184, 91, 0.3); background: #1c1610; color: var(--ink); font-size: 1.1rem; font-family: inherit; }
      .search-input:focus { outline: none; border-color: var(--honey); }
      .search-results { margin-top: 0.8rem; background: #14100b; border: 1px solid rgba(246, 239, 226, 0.1); border-radius: 12px; overflow: hidden; max-height: 54vh; overflow-y: auto; }
      .search-res { display: flex; gap: 0.8rem; align-items: center; padding: 0.7rem 1rem; cursor: pointer; border: 0; border-bottom: 1px solid rgba(246, 239, 226, 0.06); width: 100%; text-align: left; background: none; color: var(--ink); }
      .search-res:hover { background: rgba(246, 239, 226, 0.05); }
      .search-res img { width: 44px; height: 44px; border-radius: 7px; object-fit: var(--img-fit, cover); object-position: var(--img-pos, center center); padding: var(--img-pad, 0); box-sizing: border-box; background: rgba(8, 6, 4, 0.36); }
      .search-res small { color: var(--soft); display: block; font-size: 0.78rem; }
      .search-empty { padding: 1.4rem; color: var(--soft); text-align: center; }

      .meal-chips { display: flex; flex-wrap: wrap; gap: 0.5rem; margin: 1.4rem 0; }
      .set-result { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1rem; }
      .set-foot { display: flex; align-items: center; justify-content: space-between; gap: 1rem; flex-wrap: wrap; margin-top: 1.4rem; padding-top: 1.2rem; border-top: 1px solid rgba(246, 239, 226, 0.1); }
      .set-total b { font-size: 1.3rem; color: var(--ink); }
      .set-total span { color: var(--soft); font-size: 0.85rem; }

      .giftbox-grid {
        position: relative;
        display: grid;
        grid-template-columns: minmax(0, 1fr) minmax(340px, 440px);
        gap: 1.25rem;
        margin-top: 1.6rem;
        align-items: start;
        padding: 1rem;
        border: 1px solid rgba(246, 239, 226, 0.12);
        border-radius: 16px;
        overflow: hidden;
        background:
          radial-gradient(circle at 12% 14%, rgba(231, 184, 91, 0.13), transparent 32%),
          radial-gradient(circle at 92% 12%, rgba(117, 185, 156, 0.08), transparent 28%),
          linear-gradient(135deg, rgba(246, 239, 226, 0.045), rgba(8, 6, 4, 0.24));
        box-shadow: inset 0 1px 0 rgba(246, 239, 226, 0.06), 0 26px 70px rgba(0, 0, 0, 0.28);
      }
      .gift-proof {
        display: grid;
        grid-template-columns: minmax(0, 0.72fr) minmax(240px, 0.28fr);
        gap: 1rem;
        align-items: stretch;
        margin: 1.4rem 0 0;
        padding: 0;
      }
      .gift-proof img {
        width: 100%;
        height: 100%;
        min-height: 260px;
        aspect-ratio: 4 / 3;
        object-fit: cover;
        border-radius: 10px;
        border: 1px solid rgba(246, 239, 226, 0.14);
        box-shadow: 0 22px 56px rgba(0, 0, 0, 0.36);
        filter: saturate(1.08) brightness(1.03);
      }
      .gift-proof figcaption {
        display: flex;
        flex-direction: column;
        justify-content: end;
        gap: 0.72rem;
        margin: 0;
        padding: 1.25rem;
        border: 1px solid rgba(231, 184, 91, 0.18);
        border-radius: 10px;
        background:
          radial-gradient(circle at 22% 12%, rgba(231, 184, 91, 0.12), transparent 34%),
          rgba(8, 6, 4, 0.32);
      }
      .gift-proof span {
        color: var(--honey);
        font-size: 0.72rem;
        letter-spacing: 0.14em;
        text-transform: uppercase;
      }
      .gift-proof b {
        font-family: "Instrument Serif", serif;
        font-size: clamp(1.7rem, 3.1vw, 2.7rem);
        line-height: 1.02;
        font-weight: 400;
      }
      .gift-proof p {
        margin: 0;
        color: var(--soft);
        line-height: 1.62;
        font-size: 0.94rem;
      }
      .gift-pool {
        display: grid;
        grid-template-columns: repeat(3, minmax(0, 1fr));
        grid-auto-rows: minmax(154px, auto);
        gap: 0.76rem;
      }
      .gift-pick { position: relative; min-height: 154px; aspect-ratio: 4 / 3; border: 1px solid rgba(246, 239, 226, 0.14); border-radius: 10px; overflow: hidden; cursor: pointer; transition: transform 220ms ease, border-color 220ms ease, box-shadow 220ms ease; padding: 0; background: rgba(246, 239, 226, 0.035); text-align: left; color: var(--ink); isolation: isolate; }
      .gift-pick:hover { transform: translateY(-3px); border-color: color-mix(in oklch, var(--honey) 42%, rgba(246, 239, 226, 0.18)); box-shadow: 0 18px 34px rgba(0, 0, 0, 0.28); }
      .gift-pick.selected { border-color: var(--honey); box-shadow: 0 0 0 1px rgba(231, 184, 91, 0.28), 0 18px 34px rgba(0, 0, 0, 0.3); }
      .gift-pick.selected::after { content: ""; position: absolute; inset: 0; border: 1px solid rgba(231, 184, 91, 0.38); border-radius: inherit; pointer-events: none; }
      .gift-pick img,
      .gift-pick .gift-thumb-sprite { width: 100%; height: 100%; min-height: 100%; aspect-ratio: auto; object-fit: var(--img-fit, cover); object-position: var(--img-pos, center center); padding: var(--img-pad, 0); box-sizing: border-box; display: block; filter: saturate(1.08) brightness(1.02); transition: transform 420ms ease, filter 220ms ease; }
      .gift-pick:hover img,
      .gift-pick:hover .gift-thumb-sprite { transform: scale(1.035); filter: saturate(1.16) brightness(1.08); }
      .gift-pick b { position: absolute; left: 0; right: 0; bottom: 0; z-index: 2; display: block; padding: 1.1rem 0.7rem 0.62rem; font-size: 0.82rem; line-height: 1.14; background: linear-gradient(180deg, transparent, rgba(8, 6, 4, 0.88)); text-shadow: 0 1px 9px rgba(0, 0, 0, 0.72); }
      .gift-pick .pick-badge { position: absolute; top: 8px; right: 8px; width: 26px; height: 26px; border-radius: 999px; background: var(--honey); color: #1a120a; display: none; align-items: center; justify-content: center; font-weight: 700; font-size: 0.8rem; }
      .gift-pick.selected .pick-badge { display: flex; }
      .gift-box-panel { position: sticky; top: 120px; max-height: calc(100svh - 148px); overflow: auto; border: 1px solid rgba(231, 184, 91, 0.22); border-radius: 16px; padding: 1.05rem; background: linear-gradient(160deg, rgba(39, 27, 17, 0.72), rgba(8, 6, 4, 0.58)); box-shadow: inset 0 1px 0 rgba(246, 239, 226, 0.08); scrollbar-width: thin; scrollbar-color: rgba(231, 184, 91, 0.28) transparent; }
      .gift-panel-head { display: flex; align-items: center; justify-content: space-between; gap: 1rem; margin-bottom: 0.76rem; color: var(--muted); font-size: 0.72rem; letter-spacing: 0.13em; text-transform: uppercase; }
      .gift-panel-head b { color: var(--honey); font-size: 0.76rem; letter-spacing: 0.08em; white-space: nowrap; }
      .gift-box-visual { position: relative; min-height: 218px; border-radius: 12px; background: radial-gradient(circle at 50% 35%, rgba(231, 184, 91, 0.15), transparent 42%), linear-gradient(145deg, #2a1d12, #120d08 70%); border: 1px solid rgba(231, 184, 91, 0.22); display: grid; grid-template-columns: repeat(2, minmax(76px, 104px)); grid-auto-rows: 76px; align-content: center; justify-content: center; gap: 10px; padding: 20px; margin-bottom: 0.82rem; overflow: hidden; }
      .gift-box-visual::before { content: ""; position: absolute; left: 9%; right: 9%; bottom: 12%; height: 48%; border-radius: 12px 12px 18px 18px; background: linear-gradient(180deg, rgba(168, 114, 51, 0.22), rgba(64, 39, 19, 0.56)); border: 1px solid rgba(231, 184, 91, 0.18); box-shadow: inset 0 16px 22px rgba(246, 239, 226, 0.035), inset 0 -18px 28px rgba(0, 0, 0, 0.24); }
      .gift-box-visual::after { content: ""; position: absolute; left: 16%; right: 16%; bottom: 57%; height: 1px; background: linear-gradient(90deg, transparent, rgba(231, 184, 91, 0.5), transparent); opacity: 0.72; }
      .gift-box-visual img,
      .gift-box-visual .gift-thumb-sprite { position: relative; z-index: 2; width: 100%; height: 100%; border-radius: 8px; object-fit: var(--img-fit, cover); object-position: var(--img-pos, center center); padding: var(--img-pad, 0); box-sizing: border-box; transform: translateY(var(--gift-y, 0)) rotate(var(--gift-rot, 0deg)); box-shadow: 0 14px 26px rgba(0, 0, 0, 0.34); border: 1px solid rgba(246, 239, 226, 0.14); background: rgba(8, 6, 4, 0.5); }
      .gift-box-visual span { position: relative; z-index: 2; color: var(--soft); font-size: 0.85rem; text-align: center; padding: 0.52rem 0.74rem; border: 1px solid rgba(246, 239, 226, 0.12); border-radius: 999px; background: rgba(8, 6, 4, 0.28); }
      .gift-slot { position: relative; z-index: 2; display: block; height: 100%; min-width: 0; margin: 0; transform: translateY(var(--gift-y, 0)) rotate(var(--gift-rot, 0deg)); }
      .gift-box-visual .gift-slot img,
      .gift-box-visual .gift-slot .gift-thumb-sprite { width: 100%; height: 100%; min-height: 0; padding: max(var(--img-pad, 0), 7%); transform: none; box-shadow: 0 12px 22px rgba(0, 0, 0, 0.32); }
      .gift-box-visual .gift-slot img {
        object-fit: cover;
        object-position: var(--img-pos, center center);
        filter: saturate(1.1) brightness(1.04);
        padding: 0;
      }
      .gift-selected-list {
        display: grid;
        gap: 0.36rem;
        margin: -0.2rem 0 0.75rem;
      }
      .gift-selected-list p {
        margin: 0;
        color: var(--muted);
        font-size: 0.78rem;
        line-height: 1.45;
      }
      .gift-selected-list ul {
        list-style: none;
        margin: 0;
        padding: 0;
        display: flex;
        flex-wrap: wrap;
        gap: 0.38rem;
      }
      .gift-selected-list li {
        max-width: 100%;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
        border: 1px solid rgba(231, 184, 91, 0.24);
        border-radius: 999px;
        background: rgba(231, 184, 91, 0.08);
        color: var(--ink);
        font-size: 0.75rem;
        line-height: 1.2;
        padding: 0.32rem 0.58rem;
      }
      .gift-thumb-sprite {
        background:
          linear-gradient(rgba(8, 6, 4, 0.04), rgba(8, 6, 4, 0.04)),
          url("/assets/generated/gift-thumb-sprite.webp") var(--gift-sprite-x, 0%) var(--gift-sprite-y, 0%) / 400% 300% no-repeat;
      }
      .gift-note { width: 100%; min-height: 70px; margin: 0.6rem 0; padding: 0.7rem 0.9rem; border-radius: 8px; border: 1px solid rgba(246, 239, 226, 0.18); background: rgba(246, 239, 226, 0.05); color: var(--ink); font-family: inherit; resize: vertical; }
      .gift-choices { display: grid; gap: 0.46rem; margin: 0.55rem 0 0.75rem; color: var(--muted); font-size: 0.72rem; letter-spacing: 0.12em; text-transform: uppercase; }
      .gift-choices div { display: flex; flex-wrap: wrap; gap: 0.42rem; }
      .gift-choices button {
        min-height: 34px;
        border-radius: 999px;
        border: 1px solid rgba(246, 239, 226, 0.14);
        background: rgba(246, 239, 226, 0.04);
        color: var(--soft);
        padding: 0.35rem 0.7rem;
        font: inherit;
        letter-spacing: 0;
        text-transform: none;
        cursor: pointer;
      }
      .gift-choices button[aria-pressed="true"] { color: var(--ink); border-color: rgba(231, 184, 91, 0.55); background: rgba(231, 184, 91, 0.14); }

      .sub-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1rem; margin-top: 1.8rem; }
      .sub-card { border: 1px solid rgba(246, 239, 226, 0.14); border-radius: 12px; padding: 1.7rem 1.4rem; display: flex; flex-direction: column; gap: 0.7rem; position: relative; }
      .sub-card.featured { border-color: color-mix(in oklch, var(--honey) 55%, transparent); background: rgba(231, 184, 91, 0.06); }
      .sub-flag { position: absolute; top: -11px; left: 1.4rem; background: var(--honey); color: #1a120a; font-size: 0.7rem; font-weight: 700; padding: 0.2rem 0.6rem; border-radius: 999px; }
      .sub-price { font-size: 1.8rem; font-family: "Instrument Serif", serif; line-height: 1.05; }
      .sub-price small { font-size: 0.85rem; color: var(--soft); font-family: "Bricolage Grotesque", sans-serif; }
      .sub-card ul { list-style: none; margin: 0.2rem 0 0.6rem; padding: 0; display: flex; flex-direction: column; gap: 0.4rem; color: var(--soft); font-size: 0.85rem; }
      .sub-card ul li::before { content: ""; display: inline-block; width: 5px; height: 5px; margin: 0 0.42rem 0.16rem 0; border-radius: 50%; background: var(--honey); }
      .sub-card .museum-button { margin-top: auto; justify-content: center; }

      .journal-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 1rem; margin-top: 1.6rem; }
      .journal-card { border: 1px solid rgba(246, 239, 226, 0.12); border-radius: 11px; overflow: hidden; cursor: pointer; background: rgba(246, 239, 226, 0.035); transition: transform 300ms ease, border-color 300ms ease, background 300ms ease; display: flex; flex-direction: column; text-align: left; text-decoration: none; padding: 0; color: var(--ink); min-height: 100%; }
      .journal-card:hover { transform: translateY(-5px); border-color: color-mix(in oklch, var(--honey) 40%, rgba(246, 239, 226, 0.2)); background: rgba(246, 239, 226, 0.055); }
      .journal-card img { width: 100%; height: clamp(180px, 18vw, 238px); aspect-ratio: 16 / 10; object-fit: cover; object-position: var(--img-pos, center center); filter: saturate(1.12) brightness(1.05); }
      .jc-body { padding: 1rem 1.1rem 1.15rem; display: flex; flex-direction: column; gap: 0.58rem; flex: 1; }
      .jc-top { display: flex; align-items: center; justify-content: space-between; gap: 0.7rem; }
      .jc-body small { color: var(--honey); font-size: 0.72rem; letter-spacing: 0.1em; text-transform: uppercase; }
      .jc-time { color: var(--muted); font-size: 0.74rem; white-space: nowrap; }
      .jc-body h3 { margin: 0; font-size: 1.08rem; line-height: 1.25; }
      .jc-body p { margin: 0; color: var(--soft); font-size: 0.85rem; line-height: 1.5; }
      .jc-meta { display: flex; flex-wrap: wrap; gap: 0.36rem; margin-top: auto; }
      .jc-meta span,
      .recipe-tags span,
      .recipe-tags a {
        border: 1px solid rgba(246, 239, 226, 0.12);
        border-radius: 999px;
        color: rgba(246, 239, 226, 0.76);
        font-size: 0.72rem;
        padding: 0.22rem 0.52rem;
        background: rgba(8, 6, 4, 0.28);
        text-decoration: none;
      }
      .recipe-tags a:hover { border-color: rgba(231, 184, 91, 0.48); color: var(--ink); }
      .article-img { width: 100%; border-radius: 10px; margin-bottom: 1rem; aspect-ratio: 16 / 9; object-fit: cover; object-position: var(--img-pos, center center); }
      .recipe-hero-meta { display: flex; flex-wrap: wrap; gap: 0.45rem; margin: -0.2rem 0 1rem; }
      .recipe-hero-meta span {
        display: inline-flex;
        align-items: center;
        min-height: 30px;
        padding: 0.28rem 0.62rem;
        border-radius: 999px;
        border: 1px solid rgba(231, 184, 91, 0.22);
        color: rgba(246, 239, 226, 0.78);
        background: rgba(231, 184, 91, 0.055);
        font-size: 0.78rem;
      }
      .recipe-summary { margin-bottom: 1.2rem; }
      .recipe-layout { display: grid; grid-template-columns: minmax(0, 0.78fr) minmax(0, 1.22fr); gap: 1.2rem; align-items: start; }
      .recipe-panel {
        border: 1px solid rgba(246, 239, 226, 0.1);
        border-radius: 10px;
        background: rgba(246, 239, 226, 0.035);
        padding: 1rem;
      }
      .recipe-panel h4 { margin-top: 0; }
      .recipe-panel ul,
      .recipe-steps { margin: 0; padding-left: 1.1rem; }
      .recipe-panel li,
      .recipe-steps li { margin: 0.44rem 0; }
      .recipe-note {
        margin-top: 1rem;
        border-left: 2px solid rgba(231, 184, 91, 0.48);
        background: rgba(231, 184, 91, 0.06);
        border-radius: 0 9px 9px 0;
        padding: 0.8rem 1rem;
      }
      .recipe-products { margin-top: 1rem; }
      .recipe-tags { display: flex; flex-wrap: wrap; gap: 0.38rem; margin-top: 0.5rem; }
      .editorial-byline { display: flex; flex-wrap: wrap; gap: 0.45rem 0.9rem; color: var(--muted); font-size: 0.78rem; margin: -0.2rem 0 1rem; }
      .editorial-sources { margin-top: 1.1rem; padding-top: 0.9rem; border-top: 1px solid rgba(246, 239, 226, 0.1); }
      .editorial-sources h4 { margin: 0 0 0.5rem; }
      .editorial-sources ul { display: grid; gap: 0.45rem; }
      .editorial-sources a { color: var(--honey); text-underline-offset: 0.2em; }
      .knowledge-lead {
        display: grid;
        grid-template-columns: minmax(0, 0.95fr) minmax(240px, 0.55fr);
        gap: 1.2rem;
        align-items: stretch;
        margin-top: 1.4rem;
      }
      .knowledge-note,
      .faq-note {
        border: 1px solid rgba(246, 239, 226, 0.12);
        border-radius: 12px;
        background:
          linear-gradient(135deg, rgba(231, 184, 91, 0.08), rgba(117, 185, 156, 0.05)),
          rgba(8, 6, 4, 0.34);
        padding: 1rem;
        color: var(--soft);
        font-size: 0.92rem;
        line-height: 1.65;
      }
      .knowledge-note b,
      .faq-note b {
        display: block;
        margin-bottom: 0.38rem;
        color: var(--ink);
        font-size: 1rem;
      }
      .guide-body h4 {
        margin: 1.25rem 0 0.42rem;
      }
      .guide-body p,
      .guide-body li {
        color: var(--soft);
        line-height: 1.7;
      }
      .guide-body ul {
        margin: 0;
        padding-left: 1.15rem;
      }
      .guide-grid {
        margin-top: 1.6rem;
      }
      .content-detail-page { padding-top: clamp(2.6rem, 6vw, 5rem); }
      .content-detail-shell { width: min(100%, 980px); margin: 0 auto; }
      .content-detail-nav { display: flex; align-items: center; justify-content: space-between; gap: 1rem; margin-bottom: 1.2rem; }
      .content-detail-back { display: inline-flex; align-items: center; min-height: 44px; color: var(--honey); text-decoration: none; }
      .content-detail-back::before { content: "←"; margin-right: 0.5rem; }
      .content-detail-body { margin-top: 1.5rem; }
      .content-detail-body .article-img { width: 100%; height: auto; max-height: 600px; aspect-ratio: 8 / 5; object-fit: cover; object-position: var(--img-pos, center); }
      .product-page { padding-top: clamp(2.4rem, 5vw, 4.5rem); }
      .product-page-shell { width: min(100%, 1180px); margin: 0 auto; }
      .product-page-back { display: inline-flex; align-items: center; min-height: 44px; margin-bottom: 1rem; color: var(--honey); text-decoration: none; }
      .product-page-back::before { content: "←"; margin-right: 0.5rem; }
      .product-page-layout { display: grid; grid-template-columns: minmax(0, 1.08fr) minmax(360px, 0.92fr); gap: clamp(1.5rem, 4vw, 3.6rem); align-items: start; }
      .product-page-media { position: sticky; top: 120px; min-width: 0; }
      .product-page-main-image { width: 100%; height: auto; aspect-ratio: 4 / 3; object-fit: var(--img-fit, cover); object-position: var(--img-pos, center); padding: var(--img-pad, 0); box-sizing: border-box; border: 1px solid rgba(246, 239, 226, 0.14); border-radius: 8px; }
      .product-page-thumbs { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 0.55rem; margin-top: 0.65rem; }
      .product-page-thumb { padding: 0; min-height: 64px; border: 1px solid rgba(246, 239, 226, 0.14); border-radius: 6px; overflow: hidden; background: transparent; cursor: pointer; }
      .product-page-thumb.active { border-color: var(--honey); }
      .product-page-thumb img { width: 100%; height: 100%; aspect-ratio: 4 / 3; object-fit: cover; object-position: var(--img-pos, center); }
      .product-page-info { min-width: 0; max-width: 100%; padding-top: 0.2rem; }
      .product-page-info > .product-badge { position: static; display: inline-flex; align-self: flex-start; margin-bottom: 0.75rem; }
      .product-page-info .section-title { margin-bottom: 0.8rem; overflow-wrap: break-word; }
      .product-page-status { display: flex; flex-wrap: wrap; align-items: center; gap: 0.65rem; margin-bottom: 1rem; min-width: 0; max-width: 100%; }
      .product-page-status small { color: var(--muted); min-width: 0; max-width: 100%; white-space: normal; overflow-wrap: break-word; }
      .product-page-description { color: var(--soft); font-size: 1rem; line-height: 1.7; overflow-wrap: break-word; }
      .product-page-ingredients { color: var(--soft); overflow-wrap: break-word; }
      .product-page-buy { display: grid; grid-template-columns: minmax(0, 1fr); gap: 0.8rem; margin-top: 1.15rem; padding: 1rem 0; border-top: 1px solid rgba(246, 239, 226, 0.11); border-bottom: 1px solid rgba(246, 239, 226, 0.11); min-width: 0; max-width: 100%; }
      .product-page-price { display: block; color: var(--ink); font-family: var(--serif); font-size: clamp(1.45rem, 3vw, 2.15rem); min-width: 0; max-width: 100%; white-space: normal; overflow-wrap: break-word; }
      .product-page-buy .museum-button { justify-content: center; width: 100%; }
      .product-page-facts { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0.8rem; margin-top: 1.2rem; }
      .product-page-fact { padding: 0.9rem; border: 1px solid rgba(246, 239, 226, 0.11); border-radius: 7px; background: rgba(246, 239, 226, 0.025); }
      .product-page-fact b { display: block; margin-bottom: 0.35rem; }
      .product-page-fact span { color: var(--soft); line-height: 1.55; }
      @media (max-width: 760px) {
        .product-page { padding-top: 1.7rem; }
        .product-page-layout { grid-template-columns: 1fr; gap: 1.2rem; }
        .product-page-media { position: static; }
        .product-page-main-image { aspect-ratio: 1 / 1; }
        .product-page-thumbs { gap: 0.4rem; }
        .product-page-thumb { min-height: 52px; }
        .product-page-facts { grid-template-columns: 1fr; }
        .product-page-buy { position: sticky; bottom: 0; z-index: 8; margin-inline: -0.35rem; padding: 0.85rem; background: rgba(15, 12, 8, 0.96); backdrop-filter: blur(12px); }
      }
      .faq-layout {
        display: grid;
        grid-template-columns: minmax(220px, 0.42fr) minmax(0, 1fr);
        gap: 1.2rem;
        align-items: start;
        margin-top: 1.6rem;
      }
      .faq-nav {
        position: sticky;
        top: 104px;
        display: grid;
        gap: 0.55rem;
      }
      .faq-nav a {
        min-height: 42px;
        display: flex;
        align-items: center;
        padding: 0.62rem 0.8rem;
        border: 1px solid rgba(246, 239, 226, 0.12);
        border-radius: 10px;
        color: var(--soft);
        text-decoration: none;
        background: rgba(246, 239, 226, 0.035);
      }
      .faq-nav a:hover {
        color: var(--ink);
        border-color: color-mix(in oklch, var(--honey) 42%, rgba(246, 239, 226, 0.18));
      }
      .faq-groups {
        display: grid;
        gap: 1.15rem;
      }
      .faq-group {
        scroll-margin-top: 120px;
      }
      .faq-group h3 {
        margin: 0 0 0.7rem;
        font-family: "Instrument Serif", serif;
        font-weight: 400;
        font-size: clamp(1.45rem, 2.4vw, 2.1rem);
      }
      .faq-item {
        border-top: 1px solid rgba(246, 239, 226, 0.1);
        background: rgba(8, 6, 4, 0.16);
      }
      .faq-item:last-child {
        border-bottom: 1px solid rgba(246, 239, 226, 0.1);
      }
      .faq-item summary {
        min-height: 54px;
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: 1rem;
        cursor: pointer;
        color: var(--ink);
        font-weight: 650;
        list-style: none;
        padding: 0.92rem 0.2rem;
      }
      .faq-item summary::-webkit-details-marker {
        display: none;
      }
      .faq-item summary::after {
        content: "+";
        flex: 0 0 auto;
        color: var(--honey);
        font-size: 1.2rem;
        line-height: 1;
      }
      .faq-item[open] summary::after {
        content: "-";
      }
      .faq-item p {
        margin: -0.2rem 0 1rem;
        color: var(--soft);
        line-height: 1.68;
        max-width: 72ch;
      }

      @media (max-width: 980px) {
        .set-result, .sub-grid, .journal-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
        .knowledge-lead,
        .faq-layout { grid-template-columns: 1fr; }
        .inspection-studio { grid-template-columns: 1fr; }
        .inspection-main {
          min-height: 0;
          aspect-ratio: 3 / 2;
        }
        .faq-nav { position: static; grid-template-columns: repeat(2, minmax(0, 1fr)); }
        .recipe-layout { grid-template-columns: 1fr; }
      }
      @media (max-width: 720px) {
        .set-result, .sub-grid, .journal-grid, .gift-pool, .giftbox-grid { grid-template-columns: 1fr; }
        .gift-box-panel { position: static; }
        #giftbox .gift-proof {
          grid-template-columns: 1fr;
          gap: 0.72rem;
          margin-top: 1rem;
        }
        #giftbox .gift-proof img {
          min-height: 0;
          aspect-ratio: 4 / 3;
          border-radius: 8px;
        }
        #giftbox .gift-proof figcaption {
          padding: 1rem;
          border-radius: 8px;
        }
        #giftbox .gift-proof b {
          font-size: clamp(1.45rem, 8vw, 2.05rem);
        }
        #giftbox .gift-proof p {
          font-size: 0.86rem;
        }
        #giftbox .giftbox-grid {
          gap: 0.9rem;
          padding: 0.72rem;
          border-radius: 10px;
        }
        #giftbox .gift-pool {
          grid-template-columns: repeat(2, minmax(0, 1fr));
          grid-template-rows: auto;
          grid-template-areas: none;
          gap: 0.68rem;
        }
        #giftbox .gift-pick:nth-child(1),
        #giftbox .gift-pick:nth-child(2),
        #giftbox .gift-pick:nth-child(3),
        #giftbox .gift-pick:nth-child(4) {
          grid-area: auto;
        }
        #giftbox .gift-pick {
          min-height: 0;
        }
        #giftbox .gift-pick img {
          height: 100%;
          min-height: 100%;
          aspect-ratio: auto;
        }
        #giftbox .gift-pick b {
          padding: 0.56rem 0.62rem 0.64rem;
          font-size: 0.78rem;
          line-height: 1.18;
        }
        #giftbox .gift-box-panel {
          padding: 1rem;
          max-height: none;
          overflow: visible;
        }
        #giftbox .gift-panel-head {
          margin-bottom: 0.62rem;
          font-size: 0.64rem;
        }
        #giftbox .gift-box-visual {
          grid-template-columns: repeat(2, minmax(0, 1fr));
          grid-auto-rows: minmax(82px, auto);
          aspect-ratio: auto;
          min-height: 176px;
          padding: 14px;
          margin-bottom: 0.7rem;
        }
        #giftbox .gift-box-visual img {
          width: 100%;
          height: 100%;
        }
        #giftbox .gift-selected-list {
          margin: -0.12rem 0 0.62rem;
          gap: 0.3rem;
        }
        #giftbox .gift-selected-list li {
          font-size: 0.7rem;
          padding: 0.28rem 0.5rem;
        }
        .inspection-main {
          min-height: 0;
          aspect-ratio: 3 / 2;
        }
        .inspection-caption {
          align-items: start;
          flex-direction: column;
        }
        .faq-nav { grid-template-columns: 1fr; }
      }

      .cat-grid { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 1rem; margin-top: 1.8rem; }
      .cat-card { display: flex; flex-direction: column; border: 1px solid rgba(246, 239, 226, 0.12); border-radius: 11px; overflow: hidden; background: rgba(246, 239, 226, 0.035); cursor: pointer; text-align: left; padding: 0; color: var(--ink); transition: transform 300ms ease, border-color 300ms ease, box-shadow 300ms ease; }
      .cat-card:hover { transform: translateY(-5px); border-color: color-mix(in oklch, var(--honey) 40%, rgba(246, 239, 226, 0.2)); box-shadow: 0 22px 44px rgba(0, 0, 0, 0.35); }
      .cat-thumb { position: relative; aspect-ratio: 4 / 3; overflow: hidden; }
      .cat-thumb img { width: 100%; height: 100%; object-fit: cover; object-position: var(--img-pos, center center); filter: saturate(1.12) brightness(1.05); transition: transform 480ms ease; }
      .cat-card:hover .cat-thumb img { transform: scale(1.08); }
      .cat-thumb b { position: absolute; left: 0; right: 0; bottom: 0; padding: 1rem 0.8rem 0.6rem; font-size: 1.05rem; background: linear-gradient(180deg, transparent, rgba(8, 8, 6, 0.85)); }
      .cat-opts { display: flex; flex-wrap: wrap; gap: 0.3rem; padding: 0.7rem 0.7rem 0.9rem; }
      .cat-opts span { font-size: 0.72rem; color: var(--soft); border: 1px solid rgba(246, 239, 226, 0.14); border-radius: 999px; padding: 0.2rem 0.5rem; }
      @media (max-width: 980px) { .cat-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
      @media (max-width: 600px) { .cat-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }

      .home-category-grid {
        display: grid;
        grid-template-columns: repeat(3, minmax(0, 1fr));
        gap: clamp(0.8rem, 2vw, 1.2rem);
        margin-top: clamp(1.5rem, 3vw, 2.4rem);
      }

      .home-category-card {
        --cat-accent: var(--honey);
        min-width: 0;
        display: grid;
        grid-template-rows: auto 1fr;
        overflow: hidden;
        border: 1px solid color-mix(in oklch, var(--cat-accent) 28%, rgba(246, 239, 226, 0.12));
        border-radius: 8px;
        color: var(--ink);
        background:
          linear-gradient(155deg, color-mix(in oklch, var(--cat-accent) 7%, transparent), transparent 42%),
          rgba(10, 8, 6, 0.66);
        box-shadow: inset 0 1px 0 rgba(246, 239, 226, 0.05);
        transition: transform 300ms ease, border-color 300ms ease, box-shadow 300ms ease;
      }

      .home-category-card:hover {
        transform: translateY(-4px);
        border-color: color-mix(in oklch, var(--cat-accent) 58%, rgba(246, 239, 226, 0.18));
        box-shadow: 0 22px 44px rgba(0, 0, 0, 0.3);
      }

      .home-category-media {
        position: relative;
        aspect-ratio: 4 / 3;
        overflow: hidden;
        background: #0d0a07;
      }

      .home-category-media::after {
        content: "";
        position: absolute;
        inset: 0;
        pointer-events: none;
        background:
          linear-gradient(180deg, transparent 48%, rgba(8, 6, 4, 0.74)),
          linear-gradient(90deg, color-mix(in oklch, var(--cat-accent) 13%, transparent), transparent 48%);
      }

      .home-category-media img {
        width: 100%;
        height: 100%;
        object-fit: cover;
        object-position: var(--img-pos, center center);
        filter: saturate(1.08) brightness(1.02) contrast(1.03);
        transition: transform 520ms cubic-bezier(0.2, 0.72, 0.12, 1);
      }

      .home-category-card:hover .home-category-media img {
        transform: scale(1.045);
      }

      .home-category-body {
        min-height: 176px;
        display: grid;
        grid-template-rows: auto auto 1fr auto;
        align-content: start;
        gap: 0.42rem;
        padding: clamp(0.9rem, 2vw, 1.2rem);
      }

      .home-category-body small {
        color: color-mix(in oklch, var(--cat-accent) 78%, var(--ink));
        font-size: 0.7rem;
        letter-spacing: 0.11em;
        text-transform: uppercase;
      }

      .home-category-body h3 {
        margin: 0;
        font-family: "Instrument Serif", Georgia, serif;
        font-size: clamp(1.6rem, 2.5vw, 2.25rem);
        font-weight: 400;
        line-height: 1.02;
      }

      .home-category-body p {
        margin: 0;
        color: var(--soft);
        font-size: 0.92rem;
        line-height: 1.48;
      }

      .home-category-action {
        align-self: end;
        display: inline-flex;
        align-items: center;
        gap: 0.45rem;
        margin-top: 0.4rem;
        color: color-mix(in oklch, var(--cat-accent) 78%, var(--ink));
        font-size: 0.78rem;
        font-weight: 650;
      }

      .home-category-action::after {
        content: "→";
        transition: transform 240ms ease;
      }

      .home-category-card:hover .home-category-action::after {
        transform: translateX(4px);
      }

      @media (max-width: 760px) {
        .home-category-grid {
          grid-template-columns: 1fr;
          gap: 0.72rem;
        }

        .home-category-card {
          grid-template-columns: minmax(126px, 40%) minmax(0, 1fr);
          grid-template-rows: minmax(154px, auto);
        }

        .home-category-media {
          height: 100%;
          aspect-ratio: auto;
        }

        .home-category-body {
          min-height: 154px;
          padding: 0.82rem 0.88rem;
        }

        .home-category-body h3 {
          font-size: clamp(1.42rem, 7vw, 1.85rem);
        }

        .home-category-body p {
          font-size: 0.84rem;
          line-height: 1.4;
        }
      }

      .cat-band { --cat-accent: var(--honey); padding: 1.8rem 0; border-top: 1px solid rgba(246, 239, 226, 0.1); }
      .cat-band:first-child { border-top: 0; padding-top: 0.4rem; }
      .cat-band-head {
        display: flex;
        align-items: center;
        gap: 0.78rem;
        margin-bottom: 1.1rem;
      }
      .cat-band-head h3 {
        order: 1;
        flex: 0 0 auto;
        margin: 0;
        font-family: "Instrument Serif", serif;
        font-weight: 400;
        font-size: clamp(1.4rem, 2.4vw, 1.95rem);
        line-height: 1.04;
      }
      .cat-band-head::before {
        content: "";
        order: 2;
        flex: 1 1 auto;
        min-width: 56px;
        height: 1px;
        background:
          linear-gradient(90deg,
            color-mix(in oklch, var(--cat-accent) 72%, transparent),
            color-mix(in oklch, var(--cat-accent) 34%, rgba(246, 239, 226, 0.18)) 44%,
            rgba(246, 239, 226, 0.08));
        box-shadow: 0 0 14px color-mix(in oklch, var(--cat-accent) 34%, transparent);
        opacity: 0.88;
        transform: translateY(0.08em);
      }
      .cat-band-head .hs-card-link {
        order: 3;
        flex: 0 0 auto;
        align-self: center;
        min-height: 34px;
        display: inline-flex;
        align-items: center;
        padding: 0.08rem 0;
        white-space: nowrap;
        color: color-mix(in oklch, var(--cat-accent) 76%, rgba(246, 239, 226, 0.78));
      }
      @media (max-width: 420px) {
        .cat-band-head {
          gap: 0.55rem;
        }
        .cat-band-head::before {
          min-width: 28px;
        }
        .cat-band-head .hs-card-link {
          font-size: 0.72rem;
          letter-spacing: 0.02em;
        }
      }
      .cat-options { display: grid; grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); gap: 1rem; }
      .opt-card { display: flex; flex-direction: column; border: 1px solid rgba(246, 239, 226, 0.12); border-radius: 10px; overflow: hidden; background: rgba(246, 239, 226, 0.035); cursor: pointer; text-align: left; padding: 0; color: var(--ink); transition: transform 280ms ease, border-color 280ms ease, box-shadow 280ms ease; }
      .opt-card:hover { transform: translateY(-4px); border-color: color-mix(in oklch, var(--honey) 40%, rgba(246, 239, 226, 0.2)); box-shadow: 0 18px 36px rgba(0, 0, 0, 0.32); }
      .opt-thumb { aspect-ratio: 4 / 3; overflow: hidden; }
      .opt-thumb img { width: 100%; height: 100%; object-fit: var(--img-fit, cover); object-position: var(--img-pos, center center); padding: var(--img-pad, 0); box-sizing: border-box; filter: saturate(1.12) brightness(1.05); transition: transform 460ms ease; }
      .opt-card:hover .opt-thumb img { transform: scale(1.08); }
      .opt-card b { padding: 0.7rem 0.8rem 0.9rem; font-size: 0.95rem; }
      .opt-card-action {
        margin: -0.55rem 0.8rem 0.78rem;
        color: var(--honey);
        font-size: 0.72rem;
        letter-spacing: 0.04em;
      }
      .opt-card .upcoming-note {
        margin: -0.32rem 0.72rem 0.78rem;
        background: rgba(20, 16, 11, 0.5);
        color: rgba(246, 239, 226, 0.84);
      }
      .opt-card:disabled {
        pointer-events: none;
      }

      .section.dark-band {
        background:
          linear-gradient(rgba(26, 20, 13, 0.62), rgba(20, 16, 11, 0.78)),
          image-set(
            url("/assets/museum-texture-v2-light.avif") type("image/avif"),
            url("/assets/museum-texture-v2-light.webp") type("image/webp")
          ) center center / cover no-repeat,
          radial-gradient(circle at 76% 18%, rgba(231, 184, 91, 0.12), transparent 30rem),
          radial-gradient(circle at 20% 80%, rgba(117, 185, 156, 0.1), transparent 26rem),
          #14100b;
      }

      .section-label {
        display: inline-flex;
        align-items: center;
        gap: 0.6rem;
        margin: 0 0 1.2rem;
        color: var(--muted);
        text-transform: uppercase;
        letter-spacing: 0.18em;
        font-size: 0.78rem;
      }

      .section-label::before {
        content: "";
        width: 1.8rem;
        height: 1px;
        background: linear-gradient(90deg, var(--focus-color), transparent);
        opacity: 0.7;
      }

      .section-title {
        margin: 0 0 clamp(1.1rem, 2.4vw, 2.3rem);
        font-family: "Instrument Serif", serif;
        font-size: clamp(2rem, 3vw, 3.45rem);
        line-height: 1.1;
        font-weight: 400;
        letter-spacing: -0.012em;
        max-width: 760px;
        text-wrap: balance;
      }

      :root.js [data-reveal],
      :root.js [data-reveal].is-visible,
      :root.js .cat-band.is-visible .opt-card[data-reveal] {
        opacity: 1;
        transform: none;
        filter: none;
        transition: none;
        animation: none;
        will-change: auto;
        backface-visibility: hidden;
      }

      .intro-copy {
        color: var(--soft);
        font-size: clamp(1rem, 1.35vw, 1.26rem);
        line-height: 1.78;
        max-width: 720px;
      }

      .visual-museum {
        display: grid;
        grid-template-columns: minmax(240px, 0.42fr) minmax(0, 1fr);
        gap: clamp(1.4rem, 4vw, 4rem);
        align-items: center;
      }

      .visual-copy {
        position: relative;
        z-index: 2;
      }

      .visual-copy .section-title {
        max-width: 14ch;
        font-size: clamp(2.05rem, 3.2vw, 3.65rem);
        line-height: 1.08;
      }

      .visual-stage {
        min-height: 0;
        aspect-ratio: 3 / 2;
        position: relative;
        overflow: hidden;
        border: 1px solid rgba(246, 239, 226, 0.12);
        background: #090806;
        box-shadow: 0 34px 90px rgba(0, 0, 0, 0.32);
        contain: layout paint;
      }

      .visual-stage img {
        position: absolute;
        inset: 0;
        width: 100%;
        height: 100%;
        object-fit: cover;
        filter: saturate(1.12) brightness(1.06);
        transform: scale(1.05);
        animation: slowDrift 16s ease-in-out infinite alternate;
        will-change: transform;
      }

      .visual-stage::after {
        content: "";
        position: absolute;
        inset: 0;
        background:
          radial-gradient(circle at 62% 42%, transparent 0 26%, rgba(8, 8, 6, 0.18) 62%),
          linear-gradient(90deg, rgba(8, 8, 6, 0.24), transparent 38%, rgba(8, 8, 6, 0.26));
        pointer-events: none;
      }

      .sensory-strip {
        margin-top: clamp(1rem, 2.2vw, 1.8rem);
        display: grid;
        grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
        gap: 0.85rem;
      }

      .sensory-card {
        min-height: 230px;
        position: relative;
        overflow: hidden;
        border: 1px solid rgba(246, 239, 226, 0.11);
        background: #090806;
        color: var(--ink);
        text-align: left;
        transition: transform 260ms ease, border-color 260ms ease;
        contain: layout paint;
      }

      .sensory-card img {
        position: absolute;
        inset: 0;
        width: 100%;
        height: 100%;
        object-fit: cover;
        opacity: 0.78;
        transform: scale(1.06);
        animation: softImageBreath 22s ease-in-out infinite alternate;
        transition: transform 420ms ease, opacity 300ms ease;
        will-change: transform;
      }

      .sensory-card::after {
        content: "";
        position: absolute;
        inset: 0;
        background: linear-gradient(180deg, rgba(8, 8, 6, 0.04), rgba(8, 8, 6, 0.76));
      }

      .sensory-card b {
        position: absolute;
        z-index: 1;
        left: 1rem;
        bottom: 1rem;
        font-size: 1.18rem;
      }

      .sensory-card:hover,
      .sensory-card:focus-visible {
        transform: translate3d(0, -5px, 0);
        border-color: color-mix(in oklch, var(--focus-color) 50%, rgba(246, 239, 226, 0.2));
      }

      .sensory-card:hover img,
      .sensory-card:focus-visible img {
        transform: scale(1.02);
        opacity: 0.92;
      }

      .motion-window {
        margin-top: clamp(1rem, 2.4vw, 2rem);
        min-height: clamp(320px, 34vw, 520px);
        position: relative;
        overflow: hidden;
        border: 1px solid rgba(246, 239, 226, 0.12);
        background: #090806;
        contain: layout paint;
      }

      .motion-window img,
      .motion-window canvas {
        position: absolute;
        inset: 0;
        width: 100%;
        height: 100%;
      }

      .motion-window img {
        object-fit: cover;
        opacity: 0.72;
        transform: scale(1.06);
      }

      .motion-window canvas {
        z-index: 1;
      }

      .motion-window::after {
        content: "";
        position: absolute;
        inset: 0;
        z-index: 2;
        background:
          linear-gradient(90deg, rgba(8, 8, 6, 0.78), transparent 52%, rgba(8, 8, 6, 0.18)),
          linear-gradient(180deg, rgba(8, 8, 6, 0.08), rgba(8, 8, 6, 0.62));
        pointer-events: none;
      }

      .motion-caption {
        position: absolute;
        z-index: 3;
        left: clamp(1rem, 3vw, 2rem);
        bottom: clamp(1rem, 3vw, 2rem);
        max-width: min(560px, 72vw);
      }

      .motion-caption small {
        color: var(--focus-color);
        letter-spacing: 0.16em;
        text-transform: uppercase;
        font-size: 0.68rem;
      }

      .motion-caption b {
        display: block;
        margin-top: 0.65rem;
        font-family: "Instrument Serif", serif;
        font-size: clamp(1.85rem, 3.2vw, 3.65rem);
        font-weight: 400;
        line-height: 1;
      }

      @keyframes slowDrift {
        from {
          transform: scale(1.05) translate3d(-1.2%, 0, 0);
        }
        to {
          transform: scale(1.09) translate3d(1.2%, -1%, 0);
        }
      }

      @keyframes softImageBreath {
        from {
          transform: scale(1.055) translate3d(-0.5%, 0, 0);
        }
        to {
          transform: scale(1.075) translate3d(0.5%, -0.4%, 0);
        }
      }

      .visit-mini-grid small {
        color: var(--muted);
        text-transform: uppercase;
        letter-spacing: 0.15em;
        font-size: 0.68rem;
      }

      .curation-band {
        position: relative;
        overflow: hidden;
        background:
          linear-gradient(180deg, rgba(11, 10, 8, 0.86), rgba(11, 10, 8, 0.94)),
          radial-gradient(circle at 18% 22%, rgba(231, 184, 91, 0.12), transparent 22rem),
          radial-gradient(circle at 78% 76%, rgba(117, 185, 156, 0.1), transparent 18rem),
          #0a0907;
      }

      .curation-band::before {
        content: "";
        position: absolute;
        inset: 0;
        pointer-events: none;
        background:
          linear-gradient(90deg, rgba(246, 239, 226, 0.035) 1px, transparent 1px),
          linear-gradient(rgba(246, 239, 226, 0.025) 1px, transparent 1px);
        background-size: 26vw 100%, 100% 34vh;
        opacity: 0.28;
      }

      .curation-head {
        position: relative;
        z-index: 1;
        display: grid;
        grid-template-columns: minmax(0, 0.9fr) minmax(280px, 0.58fr);
        gap: clamp(1.2rem, 4vw, 3rem);
        align-items: end;
      }

      .curation-grid {
        position: relative;
        z-index: 1;
        margin-top: clamp(1.25rem, 2.4vw, 2rem);
        display: grid;
        grid-template-columns: repeat(6, minmax(0, 1fr));
        gap: 1rem;
      }

      .curation-card {
        position: relative;
        min-height: clamp(270px, 27vw, 360px);
        display: flex;
        align-items: end;
        overflow: hidden;
        border: 1px solid rgba(246, 239, 226, 0.12);
        background:
          linear-gradient(180deg, rgba(8, 8, 6, 0) 34%, rgba(8, 8, 6, 0.26) 64%, rgba(8, 8, 6, 0.74)),
          var(--curation-image) center center / cover no-repeat,
          #0d0b08;
        transition:
          transform 320ms ease,
          border-color 320ms ease,
          box-shadow 320ms ease;
      }

      .curation-card:nth-child(1),
      .curation-card:nth-child(2),
      .curation-card:nth-child(3) {
        grid-column: span 2;
      }

      .curation-card:nth-child(4),
      .curation-card:nth-child(5) {
        grid-column: span 3;
        min-height: clamp(240px, 22vw, 300px);
      }

      .curation-card::before {
        content: "";
        position: absolute;
        inset: 0;
        background:
          linear-gradient(180deg, transparent 40%, rgba(8, 8, 6, 0.06) 66%, rgba(8, 8, 6, 0.42)),
          radial-gradient(circle at 50% 8%, var(--curation-glow), transparent 38%);
        pointer-events: none;
      }

      .curation-card::after {
        content: "";
        position: absolute;
        inset: 0;
        z-index: 0;
        background:
          radial-gradient(circle at 50% 36%, color-mix(in oklch, var(--focus-color) 30%, transparent), transparent 60%);
        opacity: 0;
        transition: opacity 360ms ease;
        pointer-events: none;
      }

      .curation-card:hover,
      .curation-card:focus-visible {
        transform: translate3d(0, -6px, 0);
        border-color: color-mix(in oklch, var(--focus-color) 40%, rgba(246, 239, 226, 0.2));
        box-shadow: 0 30px 62px rgba(0, 0, 0, 0.4);
      }

      .curation-card:hover::after,
      .curation-card:focus-visible::after {
        opacity: 0.5;
      }

      .curation-copy {
        position: relative;
        z-index: 1;
        width: 100%;
        padding: 1.1rem 1.2rem 1.2rem;
        display: grid;
        gap: 0.55rem;
        border-top: 1px solid rgba(246, 239, 226, 0.1);
        background: linear-gradient(180deg, rgba(8, 8, 6, 0.08), rgba(8, 8, 6, 0.66));
        backdrop-filter: blur(4px);
      }

      .curation-copy small {
        color: var(--muted);
        text-transform: uppercase;
        letter-spacing: 0.12em;
        font-size: 0.68rem;
      }

      .curation-copy b {
        font-size: 1.34rem;
        line-height: 1.04;
        text-shadow: 0 14px 28px rgba(0, 0, 0, 0.36);
      }

      .curation-copy span {
        color: var(--soft);
        line-height: 1.58;
        max-width: 24ch;
      }

      .gallery-layout {
        display: grid;
        grid-template-columns: 1fr;
        gap: clamp(1.4rem, 4vw, 4rem);
        align-items: stretch;
        margin-top: clamp(0.9rem, 2vw, 1.5rem);
      }

      .inspection-studio {
        display: grid;
        grid-template-columns: minmax(0, 1.22fr) minmax(280px, 0.78fr);
        gap: 1.05rem;
        margin: 1.45rem 0 1.1rem;
        align-items: stretch;
      }

      .inspection-main {
        position: relative;
        min-height: clamp(320px, 38vw, 520px);
        border: 1px solid rgba(246, 239, 226, 0.14);
        border-radius: 18px;
        background: rgba(8, 6, 4, 0.42);
        overflow: hidden;
        isolation: isolate;
        cursor: crosshair;
      }

      .inspection-main img {
        position: absolute;
        inset: 0;
        width: 100%;
        height: 100%;
        object-fit: cover;
        object-position: var(--img-pos, center center);
        filter: saturate(1.12) brightness(1.05);
        transform: scale(1);
        transition: transform 520ms ease, filter 320ms ease;
      }

      .inspection-main:hover img {
        transform: scale(1.035);
        filter: saturate(1.18) brightness(1.1);
      }

      .inspection-main::before {
        content: "";
        position: absolute;
        inset: 0;
        z-index: 1;
        pointer-events: none;
        background:
          radial-gradient(circle at 54% 42%, transparent 0 28%, rgba(0, 0, 0, 0.16) 72%),
          linear-gradient(180deg, rgba(8, 6, 4, 0.04), rgba(8, 6, 4, 0.76));
      }

      .inspection-main::after {
        content: "";
        position: absolute;
        right: 1rem;
        top: 1rem;
        z-index: 2;
        width: 62px;
        height: 62px;
        border-radius: 999px;
        border: 1px solid rgba(231, 184, 91, 0.44);
        background: radial-gradient(circle, rgba(231, 184, 91, 0.12), transparent 62%);
        opacity: 0;
        transform: scale(0.78);
        transition: opacity 260ms ease, transform 320ms ease;
      }

      .inspection-main:hover::after {
        opacity: 1;
        transform: scale(1);
      }

      .inspection-caption {
        position: absolute;
        z-index: 2;
        left: clamp(1rem, 2vw, 1.4rem);
        right: clamp(1rem, 2vw, 1.4rem);
        bottom: clamp(1rem, 2vw, 1.4rem);
        display: flex;
        align-items: end;
        justify-content: space-between;
        gap: 1rem;
      }

      .inspection-caption b {
        display: block;
        font-family: "Instrument Serif", serif;
        font-weight: 400;
        font-size: clamp(1.9rem, 3.7vw, 4rem);
        line-height: 0.98;
      }

      .inspection-caption span {
        display: inline-flex;
        align-items: center;
        min-height: 34px;
        padding: 0.32rem 0.72rem;
        border: 1px solid rgba(231, 184, 91, 0.28);
        border-radius: 999px;
        background: rgba(8, 6, 4, 0.54);
        color: var(--honey);
        font-size: 0.72rem;
        letter-spacing: 0.12em;
        text-transform: uppercase;
        white-space: nowrap;
      }

      .inspection-notes {
        display: grid;
        gap: 0.72rem;
      }

      .inspection-note {
        min-height: 0;
        padding: 1rem 1.05rem;
        border: 1px solid rgba(246, 239, 226, 0.08);
        border-left: 2px solid color-mix(in oklch, var(--focus-color) 54%, transparent);
        border-radius: 14px;
        background:
          linear-gradient(90deg, color-mix(in oklch, var(--focus-color) 10%, transparent), rgba(246, 239, 226, 0.035)),
          rgba(8, 6, 4, 0.26);
        box-shadow: inset 0 1px 0 rgba(246, 239, 226, 0.03);
      }

      .inspection-note small {
        display: block;
        margin-bottom: 0.38rem;
        color: var(--focus-color);
        font-size: 0.68rem;
        letter-spacing: 0.14em;
        text-transform: uppercase;
      }

      .inspection-note b {
        display: block;
        margin-bottom: 0.32rem;
        font-size: 1rem;
      }

      .inspection-note span {
        color: var(--soft);
        font-size: 0.86rem;
        line-height: 1.5;
      }

      @media (max-width: 980px) {
        .inspection-studio {
          grid-template-columns: 1fr;
        }

        .inspection-main {
          min-height: 0;
          aspect-ratio: 3 / 2;
        }
      }

      @media (max-width: 620px) {
        .inspection-studio {
          gap: 0.72rem;
          margin: 1rem 0 0.8rem;
        }

        .inspection-main {
          min-height: 0;
          aspect-ratio: 3 / 2;
          cursor: default;
        }

        .inspection-main:hover img {
          transform: scale(1);
        }

        .inspection-main::after {
          display: none;
        }

        .inspection-caption {
          align-items: flex-start;
          flex-direction: column;
          gap: 0.5rem;
        }
      }

      #gallery .section-title,
      #visit .section-title {
        font-size: clamp(2rem, 2.9vw, 3.35rem);
        max-width: 760px;
      }

      #gallery,
      #trust,
      #visit {
        padding-top: clamp(48px, 6vw, 84px);
      }

      .artifact-inspector {
        position: sticky;
        top: 110px;
        height: clamp(430px, 37vw, 560px);
        min-height: 430px;
        border: 1px solid var(--line);
        background:
          linear-gradient(180deg, rgba(8, 8, 6, 0.1), rgba(8, 8, 6, 0.76)),
          image-set(
            url("/assets/museum-texture-v2-light.avif") type("image/avif"),
            url("/assets/museum-texture-v2-light.webp") type("image/webp")
          ) center center / cover no-repeat,
          radial-gradient(circle at 50% 26%, var(--focus-glow), transparent 13rem),
          linear-gradient(180deg, rgba(246, 239, 226, 0.06), rgba(246, 239, 226, 0.025));
        display: grid;
        grid-template-rows: 1fr;
        overflow: hidden;
        perspective: 1100px;
        contain: layout paint;
        transition:
          transform 340ms ease-out,
          border-color 220ms ease,
          box-shadow 220ms ease;
        will-change: transform, opacity;
      }

      .artifact-image {
        position: absolute;
        inset: 0;
        z-index: 0;
        width: 100%;
        height: 100%;
        object-fit: cover;
        filter: saturate(1.16) contrast(1.05) brightness(1.08);
      }

      .artifact-inspector::before {
        content: "";
        position: absolute;
        inset: 0;
        z-index: 1;
        pointer-events: none;
        background:
          radial-gradient(circle at 52% 30%, transparent 0 26%, rgba(0, 0, 0, 0.18) 62%),
          linear-gradient(90deg, rgba(0, 0, 0, 0.22), transparent 22% 76%, rgba(0, 0, 0, 0.22));
      }

      .artifact-label {
        position: absolute;
        bottom: 8%;
        left: 8%;
        right: 8%;
        padding: 1.2rem;
        border-top: 1px solid rgba(246, 239, 226, 0.14);
        background: rgba(8, 8, 6, 0.74);
        backdrop-filter: blur(10px);
        z-index: 2;
      }

      .artifact-label h3 {
        margin: 0 0 0.3rem;
        font-size: clamp(1.5rem, 3vw, 2.5rem);
      }

      .artifact-label p {
        margin: 0;
        color: var(--soft);
        line-height: 1.6;
      }

      .exhibit-panel {
        display: grid;
        gap: 1rem;
        position: relative;
        z-index: 2;
        align-content: start;
      }

      .room-filter {
        position: relative;
        z-index: 3;
        display: flex;
        flex-wrap: wrap;
        gap: 0.5rem;
        border: 0;
        background: transparent;
      }

      .category-intro {
        display: grid;
        grid-template-columns: minmax(0, 1fr) auto;
        align-items: end;
        gap: 1rem;
      }

      .category-count {
        color: var(--muted);
        border: 1px solid rgba(246, 239, 226, 0.14);
        padding: 0.6rem 0.8rem;
        background: rgba(8, 8, 6, 0.38);
        text-transform: uppercase;
        letter-spacing: 0.12em;
        font-size: 0.68rem;
        white-space: nowrap;
      }

      .exhibit-tab {
        min-height: 92px;
        padding: 1rem;
        text-align: left;
        color: var(--ink);
        border: 1px solid var(--line);
        background: rgba(246, 239, 226, 0.045);
        transition:
          transform 180ms ease,
          border-color 180ms ease,
          background 180ms ease;
      }

      .exhibit-tab[aria-selected="true"] {
        border-color: color-mix(in oklch, var(--focus-color) 70%, white 8%);
        background:
          linear-gradient(90deg, color-mix(in oklch, var(--focus-color) 22%, transparent), rgba(246, 239, 226, 0.04));
        box-shadow: inset 0 0 0 1px rgba(246, 239, 226, 0.08);
      }

      .exhibit-tab:hover {
        transform: translateX(4px);
      }

      .exhibit-tab b {
        display: block;
        font-size: 1.1rem;
      }

      .exhibit-tab span {
        display: block;
        margin-top: 0.32rem;
        color: var(--muted);
        line-height: 1.45;
      }

      .exhibit-detail {
        min-height: 380px;
        padding: clamp(1.2rem, 3vw, 2.2rem);
        border: 1px solid var(--line);
        border-radius: 22px;
        background:
          radial-gradient(circle at 82% 0%, color-mix(in oklch, var(--focus-color) 10%, transparent), transparent 24rem),
          linear-gradient(180deg, rgba(246, 239, 226, 0.055), rgba(8, 6, 4, 0.34));
        box-shadow:
          inset 0 1px 0 rgba(246, 239, 226, 0.05),
          0 24px 70px rgba(0, 0, 0, 0.18);
        will-change: transform, opacity;
      }

      .detail-kicker {
        margin: 0 0 0.6rem;
        color: var(--focus-color);
        letter-spacing: 0.14em;
        text-transform: uppercase;
        font-size: 0.74rem;
      }

      .exhibit-detail h3 {
        margin: 0 0 0.9rem;
        font-size: clamp(2.05rem, 3.5vw, 4.05rem);
        line-height: 1.1;
      }

      .exhibit-detail p {
        margin: 0;
        color: var(--soft);
        font-size: 1.06rem;
        line-height: 1.78;
        max-width: 820px;
      }

      .shelf-grid {
        display: grid;
        grid-template-columns: repeat(4, minmax(0, 1fr));
        gap: 0.75rem;
        margin: 1.4rem 0;
        border: 0;
        background: transparent;
      }

      .shelf-card {
        min-height: 142px;
        padding: 0.95rem 1rem 1.05rem;
        display: grid;
        align-content: space-between;
        border-top: 1px solid color-mix(in oklch, var(--focus-color) 48%, rgba(246, 239, 226, 0.2));
        background:
          linear-gradient(180deg, rgba(246, 239, 226, 0.055), rgba(8, 8, 6, 0.4));
        contain: layout paint;
        transition:
          transform 300ms ease-out,
          box-shadow 300ms ease-out,
          background 300ms ease-out;
        will-change: transform, opacity;
      }

      .shelf-card small {
        color: var(--focus-color);
        letter-spacing: 0.12em;
        text-transform: uppercase;
        font-size: 0.68rem;
      }

      .shelf-card b {
        display: block;
        margin: 0.45rem 0;
        font-size: 1.05rem;
        line-height: 1.25;
      }

      .shelf-card span {
        color: var(--soft);
        font-size: 0.9rem;
        line-height: 1.5;
      }

      .category-cabinet {
        display: grid;
        grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
        gap: 0.8rem;
        margin-top: 1rem;
      }

      .cabinet-card {
        min-height: 0;
        aspect-ratio: 4 / 3;
        border: 1px solid rgba(246, 239, 226, 0.12);
        background:
          linear-gradient(135deg, color-mix(in oklch, var(--focus-color) 16%, transparent), rgba(8, 8, 6, 0.44)),
          rgba(246, 239, 226, 0.035);
        padding: 1rem;
        display: grid;
        align-content: end;
        position: relative;
        overflow: hidden;
        contain: layout paint;
        transition:
          transform 300ms ease-out,
          box-shadow 300ms ease-out,
          border-color 300ms ease-out;
        will-change: transform, opacity;
      }

      .cabinet-card img {
        position: absolute;
        inset: 0;
        width: 100%;
        height: 100%;
        object-fit: cover;
        opacity: 1;
        filter: saturate(1.14) brightness(1.08);
        transform: scale(1.02);
        transition:
          transform 420ms ease-out,
          opacity 320ms ease-out;
        will-change: transform, opacity;
      }

      .cabinet-card::before {
        content: "";
        position: absolute;
        inset: 0;
        z-index: 1;
        background: linear-gradient(180deg, rgba(8, 8, 6, 0) 32%, rgba(8, 8, 6, 0.5) 72%, rgba(8, 8, 6, 0.86));
        pointer-events: none;
      }

      .cabinet-card b,
      .cabinet-card span {
        position: relative;
        z-index: 1;
      }

      .cabinet-card b {
        font-size: 1.1rem;
        line-height: 1.15;
      }

      .cabinet-card span {
        margin-top: 0.38rem;
        color: var(--soft);
        font-size: 0.9rem;
        line-height: 1.45;
      }

      .category-cabinet .cabinet-card:first-child {
        grid-row: auto;
        min-height: 0;
      }

      .product-stage-shell {
        margin-top: 1rem;
        border: 1px solid rgba(246, 239, 226, 0.12);
        background:
          linear-gradient(180deg, rgba(246, 239, 226, 0.04), rgba(8, 8, 6, 0.36)),
          rgba(8, 8, 6, 0.38);
        overflow: hidden;
        contain: layout paint;
        will-change: transform, opacity;
      }

      .product-stage-head {
        display: grid;
        gap: 0.38rem;
        padding: 1rem 1rem 0;
      }

      .product-stage-head small {
        color: var(--muted);
        text-transform: uppercase;
        letter-spacing: 0.14em;
        font-size: 0.66rem;
      }

      .product-stage-head b {
        font-size: 1.08rem;
        line-height: 1.25;
      }

      .product-stage-head span {
        color: var(--soft);
        font-size: 0.92rem;
        line-height: 1.55;
      }

      .product-stage-canvas {
        position: relative;
        min-height: 220px;
        margin: 1rem;
        border: 1px dashed rgba(246, 239, 226, 0.16);
        background:
          radial-gradient(circle at 50% 28%, color-mix(in oklch, var(--focus-color) 16%, transparent), transparent 10rem),
          linear-gradient(180deg, rgba(8, 8, 6, 0.1), rgba(8, 8, 6, 0.68));
        display: grid;
        place-items: center;
        overflow: hidden;
      }

      .product-stage-canvas[data-canvas-state="mounted"] {
        border-style: solid;
        border-color: color-mix(in oklch, var(--focus-color) 42%, rgba(246, 239, 226, 0.12));
      }

      .insight-stage {
        display: grid;
        grid-template-columns: repeat(3, minmax(0, 1fr));
        gap: 0.85rem;
        width: 100%;
      }

      .insight-card {
        min-height: 176px;
        padding: 1rem;
        border: 1px solid rgba(246, 239, 226, 0.1);
        background:
          linear-gradient(180deg, rgba(246, 239, 226, 0.06), rgba(8, 8, 6, 0.4)),
          rgba(8, 8, 6, 0.38);
        display: grid;
        align-content: space-between;
        gap: 0.65rem;
      }

      .insight-card small {
        color: var(--muted);
        text-transform: uppercase;
        letter-spacing: 0.12em;
        font-size: 0.66rem;
      }

      .insight-card b {
        display: block;
        font-size: 1.14rem;
        line-height: 1.12;
      }

      .insight-card span {
        color: var(--soft);
        line-height: 1.58;
      }


      .room-filter button {
        min-height: 44px;
        flex: 0 0 auto;
        color: var(--soft);
        border: 1px solid rgba(246, 239, 226, 0.16);
        border-radius: 999px;
        background: rgba(246, 239, 226, 0.04);
        padding: 0.52rem 0.95rem;
        font-size: 0.92rem;
        text-wrap: balance;
        transition:
          transform 220ms ease-out,
          color 200ms ease,
          border-color 220ms ease,
          background 220ms ease,
          box-shadow 260ms ease-out;
        will-change: transform, opacity;
      }

      .room-filter button[aria-pressed="true"] {
        color: var(--ink);
        border-color: color-mix(in oklch, var(--focus-color) 70%, white 8%);
        background: color-mix(in oklch, var(--focus-color) 20%, rgba(8, 8, 6, 0.5));
        box-shadow:
          0 0 0 1px color-mix(in oklch, var(--focus-color) 32%, transparent),
          0 10px 22px rgba(0, 0, 0, 0.28);
      }

      .room-filter button:hover {
        transform: translateY(-2px);
        color: var(--ink);
        border-color: color-mix(in oklch, var(--focus-color) 52%, rgba(246, 239, 226, 0.2));
      }

      @media (hover: hover) and (pointer: fine) {
        .shelf-card:hover,
        .shelf-card:focus-within,
        .cabinet-card:hover,
        .cabinet-card:focus-within,
        .artifact-inspector:hover,
        .artifact-inspector:focus-within {
          transform: translate3d(0, -5px, 0);
          box-shadow: 0 22px 36px rgba(0, 0, 0, 0.22);
        }

        .cabinet-card:hover,
        .cabinet-card:focus-within {
          border-color: color-mix(in oklch, var(--focus-color) 42%, rgba(246, 239, 226, 0.12));
        }

        .cabinet-card:hover img,
        .cabinet-card:focus-within img {
          transform: scale(1.06);
          opacity: 1;
        }
      }

      .result-card {
        min-height: 330px;
        display: grid;
        align-content: center;
        border: 1px solid color-mix(in oklch, var(--focus-color) 48%, white 8%);
        background:
          radial-gradient(circle at 80% 20%, color-mix(in oklch, var(--focus-color) 34%, transparent), transparent 16rem),
          rgba(8, 8, 6, 0.36);
      }

      .result-card h3 {
        font-family: "Instrument Serif", serif;
        font-weight: 400;
        font-size: clamp(3.2rem, 6.8vw, 6.4rem);
      }

      .sliders {
        display: grid;
        gap: 1.05rem;
      }

      .slider-row label {
        display: flex;
        justify-content: space-between;
        gap: 1rem;
        margin-bottom: 0.45rem;
        color: var(--muted);
        font-size: 0.9rem;
      }

      input[type="range"] {
        width: 100%;
        accent-color: var(--focus-color);
      }

      .blend-output {
        min-height: 170px;
        border: 1px solid rgba(246, 239, 226, 0.12);
        background:
          linear-gradient(135deg, rgba(231, 184, 91, 0.34), rgba(117, 185, 156, 0.22), rgba(217, 154, 39, 0.2));
        padding: 1rem;
        display: grid;
        align-content: end;
        overflow: hidden;
      }

      .blend-output strong {
        font-size: 1.4rem;
      }

      .blend-output span {
        margin-top: 0.4rem;
        color: rgba(246, 239, 226, 0.78);
        line-height: 1.5;
      }

      .trust-head {
        display: grid;
        grid-template-columns: minmax(0, 1fr) minmax(240px, 420px);
        gap: clamp(1.1rem, 3vw, 3rem);
        align-items: end;
        margin-bottom: 1.4rem;
      }

      .trust-summary {
        margin: 0;
        color: var(--soft);
        font-size: clamp(1rem, 1.35vw, 1.18rem);
        line-height: 1.8;
      }

      .trust-grid {
        display: grid;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 1px;
        border: 1px solid var(--line);
        background: var(--line);
      }

      .trust-note {
        min-height: 220px;
        padding: clamp(1rem, 2vw, 1.4rem);
        background:
          linear-gradient(180deg, rgba(246, 239, 226, 0.1), rgba(8, 8, 6, 0.28)),
          #0d0b08;
        contain: layout paint;
      }

      .trust-note small {
        color: var(--focus-color);
        letter-spacing: 0.12em;
        text-transform: uppercase;
      }

      .trust-note b {
        display: block;
        margin: 0.85rem 0 0.65rem;
        font-size: clamp(1.14rem, 1.45vw, 1.34rem);
        line-height: 1.16;
      }

      .trust-note span {
        color: var(--soft);
        line-height: 1.65;
      }

      .trust-note.manifesto-note {
        min-height: 460px;
        grid-row: span 2;
        display: grid;
        align-content: end;
        position: relative;
        overflow: hidden;
        background:
          linear-gradient(180deg, rgba(8, 8, 6, 0.4), rgba(8, 8, 6, 0.62) 52%, rgba(8, 8, 6, 0.88)),
          radial-gradient(circle at 74% 14%, color-mix(in oklch, var(--focus-color) 22%, transparent), transparent 15rem),
          url("/assets/premium-pantry-hall-v1.webp") center center / cover no-repeat,
          #0d0b08;
      }

      .trust-note.manifesto-note b {
        font-size: clamp(1.6rem, 2.1vw, 2.25rem);
        line-height: 1.14;
      }

      .visit-copy-panel {
        border: 1px solid rgba(246, 239, 226, 0.1);
        background:
          linear-gradient(180deg, rgba(246, 239, 226, 0.12), rgba(8, 8, 6, 0.18)),
          rgba(8, 8, 6, 0.24);
        padding: clamp(1.2rem, 3vw, 2rem);
      }

      .visit-panel {
        min-height: auto;
        display: grid;
        grid-template-columns: minmax(0, 1.1fr) minmax(280px, 0.9fr);
        gap: clamp(1.4rem, 5vw, 5rem);
        align-items: start;
      }

      .ticket {
        border: 1px solid color-mix(in oklch, var(--focus-color) 42%, white 8%);
        background:
          linear-gradient(135deg, rgba(246, 239, 226, 0.16), rgba(246, 239, 226, 0.06)),
          rgba(8, 8, 6, 0.34);
        padding: clamp(1.2rem, 3vw, 2rem);
        contain: layout paint;
      }

      .ticket h3 {
        margin: 0 0 0.6rem;
        font-size: clamp(1.85rem, 3.1vw, 3.15rem);
        line-height: 1.14;
      }

      .ticket p {
        color: var(--soft);
        line-height: 1.7;
      }

      .visit-mini-grid {
        margin-top: 1.4rem;
        display: grid;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 1px;
        border: 1px solid var(--line);
        background: var(--line);
      }

      .visit-mini-item {
        min-height: 150px;
        padding: 1rem;
        background:
          linear-gradient(180deg, rgba(246, 239, 226, 0.08), rgba(8, 8, 6, 0.24)),
          rgba(8, 8, 6, 0.36);
      }

      .visit-mini-item b {
        display: block;
        margin: 0.5rem 0;
        font-size: 1.05rem;
      }

      .visit-mini-item span {
        color: var(--soft);
        line-height: 1.5;
      }

      .signup-form {
        display: grid;
        gap: 0.8rem;
        margin-top: 1rem;
      }

      .signup-form input {
        min-height: 52px;
        border: 1px solid rgba(246, 239, 226, 0.18);
        background: rgba(8, 8, 6, 0.45);
        color: var(--ink);
        padding: 0 1rem;
      }

      .signup-form .museum-button {
        min-height: 46px;
      }

      .form-status {
        min-height: 1.5rem;
        color: var(--mint);
        line-height: 1.5;
      }

      footer {
        padding: 3rem clamp(20px, 5vw, 80px);
        color: var(--muted);
        border-top: 1px solid var(--line);
        background: #070605;
      }

      footer a {
        color: var(--ink);
        border-bottom: 1px solid rgba(246, 239, 226, 0.2);
      }

      @media (max-width: 920px) {
        .topbar {
          grid-template-columns: 1fr auto 1fr;
        }

        .topbar nav:first-child {
          display: none;
        }

        .brand-mark {
          grid-column: 2;
        }

        .topbar nav:last-child {
          grid-column: 3;
        }

        .brand-mark {
          width: 68px;
          height: 68px;
        }

        .hero-ui,
        .visual-museum,
        .curation-head,
        .gallery-layout,
        .trust-head,
        .visit-panel {
          grid-template-columns: 1fr;
        }

        .visit-panel .ticket {
          order: -1;
        }

        .scroll-meter {
          display: none;
        }

        .artifact-inspector {
          position: relative;
          top: auto;
          height: clamp(320px, 58vh, 500px);
          min-height: 320px;
        }

        .shelf-grid,
        .insight-stage,
        .sensory-strip,
        .category-cabinet,
        .trust-grid,
        .visit-mini-grid {
          grid-template-columns: 1fr;
        }

        .category-cabinet .cabinet-card:first-child {
          grid-row: auto;
          min-height: 0;
        }

        .curation-grid {
          grid-template-columns: repeat(2, minmax(0, 1fr));
        }

        .curation-card:nth-child(n) {
          grid-column: span 1;
        }

        .visual-copy .section-title {
          max-width: 12ch;
        }

        .visual-stage {
          min-height: 0;
          aspect-ratio: 3 / 2;
        }

        .topbar nav:last-child .instagram-link {
          display: none;
        }
      }

      @media (max-width: 760px), (pointer: coarse) {
        body::before {
          opacity: 0.18;
        }

        .hero {
          opacity: calc(1 - var(--museum-depth) * 0.16);
        }

        .hero::after {
          display: none;
        }

        .hero-scroll {
          height: 100svh;
          min-height: 620px;
        }

        :root[data-hero-mode="scroll"] .hero-scroll {
          height: 155svh;
        }

        .hero-back {
          background:
            linear-gradient(180deg, rgba(5, 5, 4, 0.02), rgba(5, 5, 4, 0.06) 44%, rgba(5, 5, 4, 0.28) 70%, rgba(5, 5, 4, 0.66)),
            radial-gradient(circle at 50% 33%, rgba(246, 239, 226, 0.16), transparent 18%),
            radial-gradient(circle at 50% 24%, rgba(231, 184, 91, 0.24), transparent 42%),
            url("/assets/generated/hero-mobile-award-v1.webp") center top / cover no-repeat,
            linear-gradient(120deg, #070605, #17120d 54%, #050403);
          transform:
            translate3d(0, calc((1 - var(--door-open)) * 10px + var(--progress) * -5px), 0)
            scale(calc(1.01 - var(--door-open) * 0.01 - var(--progress) * 0.004));
          transform-origin: 50% 31%;
        }

        .hero-back::before {
          inset: 0;
          opacity: 0.08;
          transform: translate3d(calc(var(--progress) * -10px), calc(var(--progress) * -8px), 0);
        }

        .hero-back::after {
          background:
            radial-gradient(ellipse at 50% 68%, rgba(231, 184, 91, 0.14), transparent 38%),
            radial-gradient(circle at 50% 44%, transparent 0 48%, rgba(0, 0, 0, 0.02) 86%),
            linear-gradient(180deg, rgba(8, 8, 6, 0.01), rgba(8, 8, 6, 0.04));
        }

        .hero::before {
          inset: 12vh 13vw 31vh 13vw;
          opacity: calc(var(--scene-reveal) * (0.12 + var(--door-open) * 0.58));
          filter: blur(14px);
        }

        .hero-hotspots,
        .hs-cards {
          display: none;
        }

        .hero-hitshape {
          stroke-width: 1.9;
          opacity: 0.56;
        }

        .hero-hotlabel {
          font-size: 20px;
        }

        .hero-hitmap a[data-mobile-hidden="true"] {
          display: none;
        }

        .hero-copy {
          max-width: min(25rem, 100%);
          padding: 0.9rem;
          border-left-color: rgba(231, 184, 91, 0.42);
          background:
            linear-gradient(90deg, rgba(8, 8, 6, 0.48), rgba(8, 8, 6, 0.18) 66%, transparent),
            linear-gradient(180deg, rgba(8, 8, 6, 0.08), rgba(8, 8, 6, 0.26));
          backdrop-filter: blur(6px);
          box-shadow: 0 14px 34px rgba(0, 0, 0, 0.16);
        }

        .hero-family {
          margin-bottom: clamp(0.7rem, 2.5svh, 1.25rem);
        }

        #museum {
          margin-top: clamp(24px, 5svh, 48px);
        }

        .hero-ui {
          top: auto;
          bottom: clamp(28px, 5.8svh, 54px);
          align-items: end;
          grid-template-columns: 1fr;
          opacity: var(--hero-copy-visible);
          transform: translate3d(0, calc(var(--museum-depth) * -6px), 0);
        }

        .hero-signals,
        .hero-aside,
        .scroll-meter {
          display: none;
        }

        .brand-mark,
        .museum-button,
        .hero-door-panel,
        .meter-line i {
          box-shadow: none;
        }

        .hero-door-panel {
          background:
            linear-gradient(90deg, rgba(248, 215, 137, 0.07), transparent 17% 83%, rgba(248, 215, 137, 0.07)),
            image-set(
              url("/assets/hero-closed-door-mobile-portrait.webp") type("image/webp")
            ) var(--door-bg-x) center / 200% 100% no-repeat,
            linear-gradient(110deg, #1f1408, #412712 45%, #130b05);
          box-shadow:
            inset 0 0 0 8px rgba(0, 0, 0, 0.12),
            inset 0 0 38px rgba(0, 0, 0, 0.58);
        }

        .hero-unlock {
          top: 48%;
          width: 92px;
          aspect-ratio: 0.86;
          padding: 0.72rem;
        }

        .hero-unlock span:last-child {
          font-size: 0.66rem;
          letter-spacing: 0.1em;
        }

        .section.dark-band,
        .artifact-inspector {
          background-size: cover;
        }

        .artifact-label {
          background: linear-gradient(180deg, rgba(8, 8, 6, 0.46), rgba(8, 8, 6, 0.78));
        }

        .hero-aside {
          background-image: linear-gradient(180deg, rgba(246, 239, 226, 0.055), rgba(8, 8, 6, 0.36));
        }

        .visual-stage img {
          object-position: 58% center;
          transform: scale(1.08);
          transform-origin: 58% 52%;
          animation: none;
        }

        .visual-stage::after {
          background:
            radial-gradient(circle at 58% 46%, transparent 0 32%, rgba(8, 8, 6, 0.12) 70%),
            linear-gradient(90deg, rgba(8, 8, 6, 0.1), transparent 42%, rgba(8, 8, 6, 0.18));
        }

        .motion-window img {
          animation: slowDrift 26s ease-in-out infinite alternate;
          will-change: transform;
        }
      }

      @media (max-width: 760px) {
        .topbar nav:last-child a:not(.commerce-nav-link) {
          display: none;
        }
      }

      @media (max-width: 620px) {
        .topbar {
          grid-template-columns: minmax(40px, 1fr) auto minmax(88px, 1fr);
          gap: 0.45rem;
          padding: 12px;
          background: linear-gradient(180deg, rgba(8, 8, 6, 0.99), rgba(8, 8, 6, 0.96));
          backdrop-filter: blur(12px);
          border-bottom: 1px solid rgba(246, 239, 226, 0.08);
          box-shadow: 0 16px 34px rgba(0, 0, 0, 0.4);
        }

        .topbar nav:last-child {
          min-width: 0;
          gap: 0.28rem;
          align-items: center;
        }

        .topbar nav:last-child a:not(.commerce-nav-link) {
          display: none;
        }

        .topbar nav a.commerce-nav-link {
          min-height: 40px;
          padding: 0 0.46rem;
          font-size: 0.62rem;
          letter-spacing: 0.08em;
        }

        .topbar nav {
          font-size: 0.7rem;
          letter-spacing: 0.1em;
        }

        #cartOpen {
          display: inline-flex;
        }

        #searchOpen {
          display: none;
        }

        .brand-mark {
          width: 62px;
          height: 62px;
        }

        .brand-mark img {
          width: 84%;
          height: 84%;
        }

        .hero-ui {
          left: 18px;
          right: 18px;
          top: auto;
          bottom: clamp(30px, 5.4svh, 48px);
          gap: 0.65rem;
        }

        .hero-mobile-brief {
          position: absolute;
          z-index: 12;
          display: block;
          opacity: 1;
          left: 18px;
          right: 18px;
          top: 126px;
          padding: 0.82rem 0.92rem;
          background: linear-gradient(90deg, rgba(8, 8, 6, 0.86), rgba(8, 8, 6, 0.56), transparent);
          text-shadow: 0 2px 18px rgba(0, 0, 0, 0.95);
          pointer-events: none;
          transition: opacity 360ms ease, transform 420ms ease;
        }

        .hero-mobile-brief small {
          display: block;
          color: rgba(231, 184, 91, 0.92);
          font-size: 0.62rem;
          font-weight: 800;
          letter-spacing: 0.12em;
          text-transform: uppercase;
          margin-bottom: 0.22rem;
        }

        .hero-mobile-brief b {
          display: block;
          color: #fff8e7;
          max-width: 24ch;
          font-size: clamp(0.98rem, 4.25vw, 1.1rem);
          line-height: 1.2;
          overflow-wrap: anywhere;
        }

        .hero-door-stage {
          inset: 82px 0 0 0;
          min-width: 0;
        }

        .hero-door-panel::after {
          height: 42px;
          width: 9px;
        }

        .hero-copy {
          max-width: none;
          padding: 0.82rem 0.82rem;
        }

        .hero-copy h1,
        .hero-copy h2 {
          margin-bottom: 0.56rem;
          max-width: 18ch;
          font-size: clamp(1.46rem, 6.15vw, 1.92rem);
          line-height: 1.03;
        }

        .hero-copy p {
          max-width: 21rem;
          color: rgba(246, 239, 226, 0.9);
          font-size: 0.84rem;
          line-height: 1.4;
        }

        .button-row {
          gap: 0.45rem;
          margin-top: 0.72rem;
        }

        .hero-family {
          gap: 0.32rem;
          margin-top: 0.62rem;
        }

        .hero-family a,
        .hero-family span {
          min-height: 44px;
          padding: 0.42rem 0.56rem;
          font-size: 0.67rem;
        }

        .hero-signals {
          grid-template-columns: 1fr;
          gap: 0.55rem;
          margin-top: 1rem;
        }

        .hero-signal {
          min-height: 0;
        }

        .hero-aside {
          padding: 0.95rem;
        }

        .museum-button {
          min-height: 44px;
          padding: 0.62rem 0.82rem;
          font-size: 0.88rem;
          backdrop-filter: blur(8px);
        }

        .section {
          padding-top: 58px;
          padding-bottom: 52px;
          padding-left: 16px;
          padding-right: 16px;
        }

        .visual-copy .section-title {
          max-width: 14ch;
          font-size: clamp(1.78rem, 8.1vw, 2.58rem);
          line-height: 1.03;
        }

        .intro-copy {
          font-size: 0.96rem;
          line-height: 1.58;
        }

        .visual-stage {
          min-height: 0;
          aspect-ratio: 3 / 2;
        }

        .sensory-card {
          min-height: 160px;
        }

        #gallery .section-title,
        #trust .section-title,
        #visit .section-title {
          max-width: 18ch;
          font-size: clamp(1.46rem, 6.25vw, 1.92rem);
          line-height: 1.08;
        }

        .room-filter {
          display: flex;
          gap: 1px;
          overflow-x: auto;
          overscroll-behavior-x: contain;
          scroll-snap-type: x proximity;
          scrollbar-width: none;
        }

        .room-filter button {
          min-height: 44px;
          flex: 0 0 clamp(116px, 32vw, 152px);
          padding: 0.58rem 0.68rem;
          scroll-snap-align: start;
        }

        .room-filter::-webkit-scrollbar {
          display: none;
        }

        .curation-grid {
          grid-template-columns: 1fr;
          gap: 0.7rem;
        }

        .curation-card {
          min-height: 180px;
        }

        .curation-copy {
          padding: 0.86rem 0.92rem 0.95rem;
          gap: 0.38rem;
        }

        .curation-copy b {
          font-size: 1.16rem;
        }

        .curation-copy span {
          max-width: none;
        }

        .category-intro {
          grid-template-columns: 1fr;
          gap: 0.45rem;
        }

        .category-count {
          width: auto;
          border: 0;
          padding: 0;
          background: transparent;
          font-size: 0.62rem;
          letter-spacing: 0.16em;
          color: color-mix(in oklch, var(--focus-color) 72%, rgba(246, 239, 226, 0.56));
        }

        .exhibit-detail {
          padding: 1.05rem;
        }

        .exhibit-detail h3 {
          margin-bottom: 0.72rem;
          font-size: clamp(1.95rem, 12vw, 3.1rem);
          line-height: 1.08;
        }

        .exhibit-detail p {
          font-size: 0.98rem;
          line-height: 1.58;
        }

        .shelf-card {
          min-height: 0;
          padding: 0.86rem;
        }

        .shelf-card b {
          font-size: 0.96rem;
          line-height: 1.34;
        }

        .shelf-grid {
          gap: 0.65rem;
          border: 0;
          background: transparent;
        }

        .shelf-card {
          border: 1px solid rgba(246, 239, 226, 0.12);
        }

        .shelf-card span {
          font-size: 0.84rem;
          line-height: 1.42;
        }

        .category-cabinet {
          gap: 0.7rem;
        }

        .cabinet-card,
        .category-cabinet .cabinet-card:first-child {
          min-height: 0;
        }

        .cabinet-card {
          padding: 0.9rem;
        }

        .cabinet-card b {
          font-size: 1rem;
        }

        .cabinet-card span {
          font-size: 0.84rem;
          line-height: 1.38;
        }

        .trust-head {
          align-items: start;
          gap: 0.85rem;
        }

        .trust-summary {
          max-width: 22rem;
          font-size: 0.95rem;
          line-height: 1.52;
        }

        .trust-note,
        .trust-note.manifesto-note {
          min-height: 0;
          padding: 1rem;
        }

        .trust-note b {
          font-size: 1.08rem;
          line-height: 1.18;
        }

        .trust-note span {
          font-size: 0.9rem;
          line-height: 1.48;
        }

        .artifact-inspector {
          height: clamp(260px, 46vh, 360px);
          min-height: 260px;
        }

        .artifact-label {
          left: 7%;
          right: 7%;
          bottom: 7%;
          padding: 0.95rem 1rem;
        }

        .artifact-label h3 {
          font-size: clamp(1.28rem, 5.8vw, 1.62rem);
          line-height: 1.06;
        }

        .artifact-label p {
          max-width: 16rem;
          font-size: 0.88rem;
          line-height: 1.42;
        }

        .visit-panel {
          gap: 1rem;
        }

        .visit-copy-panel,
        .ticket {
          padding: 1rem;
        }

        .visit-mini-grid {
          display: none;
        }

        .ticket h3 {
          font-size: clamp(1.62rem, 8vw, 2.35rem);
          line-height: 1.14;
        }

        .ticket p {
          font-size: 0.92rem;
          line-height: 1.5;
        }

      }

      @media (max-width: 620px) {
        .section {
          padding-top: 44px;
          padding-bottom: 42px;
        }

        .section-label {
          margin-bottom: 0.72rem;
          font-size: 0.66rem;
          letter-spacing: 0.14em;
        }

        .section-title,
        #gallery .section-title,
        #trust .section-title,
        #visit .section-title {
          max-width: 20ch;
          font-size: clamp(1.34rem, 5.7vw, 1.72rem);
          line-height: 1.08;
        }

        .visual-copy .section-title {
          max-width: 18ch;
          font-size: clamp(1.46rem, 6.5vw, 2rem);
        }

        .intro-copy,
        .trust-summary,
        .knowledge-note,
        .faq-note {
          font-size: 0.88rem;
          line-height: 1.5;
        }

        .visual-stage {
          min-height: 0;
          aspect-ratio: 3 / 2;
          border-radius: 10px;
        }

        .visual-stage img {
          inset: 0;
          width: 100%;
          height: 100%;
          object-fit: cover;
          object-position: 58% center;
          transform: scale(1.08);
          transform-origin: 58% 52%;
          animation: none;
        }

        .visual-stage::after {
          background:
            radial-gradient(circle at 58% 46%, transparent 0 32%, rgba(8, 8, 6, 0.12) 70%),
            linear-gradient(90deg, rgba(8, 8, 6, 0.1), transparent 42%, rgba(8, 8, 6, 0.18));
        }

        .room-filter {
          flex-wrap: nowrap;
          gap: 0.42rem;
          overflow-x: auto;
          overscroll-behavior-x: contain;
          scroll-snap-type: x proximity;
          scrollbar-width: none;
          padding-bottom: 0.15rem;
        }

        .room-filter button {
          flex: 0 0 auto;
          min-width: 112px;
          min-height: 42px;
          scroll-snap-align: start;
        }

        .room-filter::-webkit-scrollbar {
          display: none;
        }

        .cat-options {
          grid-template-columns: repeat(2, minmax(0, 1fr));
          gap: 0.82rem;
        }

        .cat-band {
          padding: 1.34rem 0;
        }

        .opt-thumb {
          aspect-ratio: 16 / 10;
        }

        .curation-grid,
        .gift-pool,
        .sub-grid {
          grid-template-columns: repeat(2, minmax(0, 1fr));
          gap: 0.62rem;
        }

        .vitrin-grid,
        .shop-grid,
        .journal-grid,
        .guide-grid,
        .set-result {
          grid-template-columns: 1fr;
          gap: 0.78rem;
        }

        .cat-band {
          padding: 1.08rem 0;
        }

        .cat-band-head {
          margin-bottom: 0.62rem;
        }

        .cat-band-head h3 {
          font-size: 1.16rem;
        }

        .cat-band-head .hs-card-link {
          font-size: 0.66rem;
        }

        .opt-card,
        .product-card,
        .journal-card,
        .curation-card,
        .gift-pick,
        .sub-card {
          border-radius: 8px;
        }

        .opt-thumb {
          aspect-ratio: 1 / 0.72;
        }

        .product-thumb,
        .vitrin-card .product-thumb {
          aspect-ratio: 16 / 10;
        }

        .journal-card img {
          height: auto;
          aspect-ratio: 16 / 8.6;
        }

        .giftbox-grid {
          gap: 1rem;
        }

        .gift-pick img {
          height: 100%;
          min-height: 100%;
          aspect-ratio: auto;
        }

        .gift-box-panel {
          padding: 0.95rem;
        }

        .gift-box-visual {
          aspect-ratio: auto;
          min-height: 88px;
          margin-bottom: 0.65rem;
        }

        .gift-note {
          min-height: 54px;
          margin: 0.45rem 0;
        }

        .gift-pick b {
          display: -webkit-box;
          -webkit-line-clamp: 2;
          -webkit-box-orient: vertical;
          overflow: hidden;
        }

        #subscription .sub-grid {
          grid-template-columns: 1fr;
          gap: 0.72rem;
        }

        #subscription .sub-card {
          padding: 1rem;
          gap: 0.48rem;
        }

        #subscription .sub-price {
          font-size: 1.32rem;
        }

        #subscription .sub-card ul {
          gap: 0.28rem;
          font-size: 0.78rem;
        }

        .opt-card b,
        .product-body,
        .jc-body,
        .gift-pick b {
          padding: 0.58rem 0.62rem 0.66rem;
        }

        .product-body {
          gap: 0.28rem;
        }

        .product-body h3,
        .jc-body h3,
        .opt-card b {
          font-size: 1.02rem;
          line-height: 1.18;
        }

        .product-icerik,
        .stock-tag {
          display: none;
        }

        .jc-body {
          gap: 0.34rem;
        }

        .jc-body p {
          display: -webkit-box;
          -webkit-line-clamp: 2;
          -webkit-box-orient: vertical;
          overflow: hidden;
          color: rgba(246, 239, 226, 0.7);
          font-size: 0.72rem;
          line-height: 1.35;
        }

        .jc-meta {
          display: flex;
          margin-top: 0.1rem;
          gap: 0.28rem;
        }

        .jc-meta span {
          min-height: 26px;
          padding: 0.18rem 0.46rem;
          font-size: 0.62rem;
        }

        .jc-meta span:nth-child(n+3) {
          display: none;
        }

        .product-card {
          min-height: 0;
        }

        .product-body {
          min-height: 0;
        }

        .product-desc {
          display: -webkit-box;
          -webkit-line-clamp: 2;
          -webkit-box-orient: vertical;
          overflow: hidden;
          color: rgba(246, 239, 226, 0.7);
          font-size: 0.82rem;
          line-height: 1.38;
        }

        .product-badge {
          top: 0.42rem;
          left: 0.42rem;
          padding: 0.22rem 0.44rem;
          font-size: 0.54rem;
        }

        .product-meta {
          padding-top: 0.42rem;
          gap: 0.4rem;
        }

        .product-price {
          font-size: 0.92rem;
        }

        .add-btn,
        .notify-btn {
          min-height: 44px;
          padding: 0.46rem 0.72rem;
          font-size: 0.76rem;
        }

        .jc-top {
          align-items: flex-start;
          gap: 0.4rem;
        }

        .jc-body small,
        .jc-time {
          font-size: 0.58rem;
          letter-spacing: 0.07em;
        }

        .knowledge-lead,
        .faq-layout,
        .giftbox-grid {
          grid-template-columns: 1fr;
          gap: 0.82rem;
        }

        .faq-nav {
          grid-template-columns: repeat(2, minmax(0, 1fr));
          gap: 0.42rem;
        }

        .faq-nav a {
          min-height: 36px;
          padding: 0.46rem 0.58rem;
          border-radius: 8px;
          font-size: 0.76rem;
          line-height: 1.15;
        }

        .faq-group h3 {
          font-size: 1.24rem;
        }

        .faq-item summary {
          min-height: 44px;
          padding: 0.68rem 0.1rem;
          font-size: 0.88rem;
        }

        .faq-item p {
          font-size: 0.84rem;
          line-height: 1.5;
        }

        .modal-overlay,
        .info-overlay,
        .checkout-overlay {
          padding: 12px;
        }

        .modal-card,
        .info-card,
        .checkout-card {
          border-radius: 10px;
        }

        .modal-media {
          min-height: 156px;
          max-height: 28vh;
        }

        .modal-body,
        .info-card,
        .checkout-main,
        .checkout-aside {
          padding: 1rem;
        }

        .article-img {
          aspect-ratio: 4 / 3;
        }
      }

      /* Sayfanın en üstünde scroll ilerleme çubuğu */
      .scroll-progress {
        position: fixed;
        top: 0;
        left: 0;
        right: 0;
        height: 3px;
        z-index: 60;
        background: rgba(246, 239, 226, 0.06);
        pointer-events: none;
      }

      .scroll-progress span {
        display: block;
        height: 100%;
        width: 100%;
        transform: scaleX(0);
        transform-origin: left center;
        will-change: transform;
        background: linear-gradient(90deg, var(--turmeric), var(--honey));
        box-shadow: 0 0 12px rgba(231, 184, 91, 0.5);
      }

      /* Sağ kenarda bölüm atlama rayı (scroll-spy) */
      .section-rail {
        position: fixed;
        right: clamp(10px, 1.6vw, 22px);
        top: 50%;
        transform: translateY(-50%);
        z-index: 36;
        display: flex;
        flex-direction: column;
        gap: 0.7rem;
        align-items: flex-end;
      }

      .section-rail a {
        min-width: 44px;
        min-height: 44px;
        display: flex;
        align-items: center;
        justify-content: flex-end;
        gap: 0.55rem;
        padding: 5px 2px 5px 10px;
        color: var(--soft);
      }

      .rail-label {
        font-size: 0.66rem;
        text-transform: uppercase;
        letter-spacing: 0.12em;
        white-space: nowrap;
        opacity: 0;
        transform: translateX(6px);
        transition: opacity 220ms ease, transform 220ms ease;
        pointer-events: none;
      }

      .rail-dot {
        width: 8px;
        height: 8px;
        border-radius: 50%;
        border: 1px solid rgba(246, 239, 226, 0.5);
        background: transparent;
        transition: transform 220ms ease, background 220ms ease,
          border-color 220ms ease, box-shadow 220ms ease;
        flex: none;
      }

      .section-rail a:hover .rail-label,
      .section-rail a.is-active .rail-label {
        opacity: 1;
        transform: translateX(0);
      }

      .section-rail a:hover .rail-dot,
      .section-rail a.is-active .rail-dot {
        background: var(--honey);
        border-color: var(--honey);
        box-shadow: 0 0 12px rgba(231, 184, 91, 0.6);
      }

      .section-rail a.is-active .rail-dot {
        transform: scale(1.35);
      }

      @media (max-width: 620px) {
        .section-rail {
          display: none;
        }
      }

      @media (max-width: 620px) and (max-height: 720px) {
        .hero-unlock {
          top: 43%;
          width: 80px;
          padding: 0.58rem;
        }

        .hero-unlock::after {
          height: 40px;
        }

        .hero-unlock svg {
          width: 22px;
          height: 22px;
        }

        .hero-unlock span:last-child {
          font-size: 0.59rem;
          letter-spacing: 0.08em;
        }

        .hero-ui {
          bottom: 10px;
          gap: 0.5rem;
        }

        .hero-mobile-brief {
          top: 104px;
          padding: 0.72rem 0.78rem;
        }

        .hero-copy {
          padding: 0.66rem 0.72rem;
        }

        .hero-kicker {
          margin-bottom: 0.42rem;
          font-size: 0.62rem;
          letter-spacing: 0.13em;
        }

        .hero-copy h1,
        .hero-copy h2 {
          max-width: 16ch;
          margin-bottom: 0.42rem;
          font-size: clamp(1.28rem, 6.2vw, 1.62rem);
          line-height: 1.02;
        }

        .hero-copy p {
          max-width: 20rem;
          font-size: 0.78rem;
          line-height: 1.34;
        }

        .button-row {
          gap: 0.38rem;
          margin-top: 0.54rem;
        }

        .museum-button {
          min-height: 40px;
          padding: 0.52rem 0.68rem;
          font-size: 0.8rem;
        }

        .hero-family {
          gap: 0.24rem;
          margin-top: 0.48rem;
        }

        .hero-family a,
        .hero-family span {
          min-height: 38px;
          padding: 0.34rem 0.48rem;
          font-size: 0.62rem;
        }
      }

      @media (max-width: 620px) {
        :root:not([data-hero-open="true"]) .hero-ui {
          opacity: 0;
          transform: translate3d(0, 14px, 0);
          pointer-events: none;
        }

        :root[data-hero-open="true"] .hero-ui {
          opacity: var(--hero-copy-visible);
          transform: translate3d(0, calc(var(--museum-depth) * -6px), 0);
          pointer-events: auto;
          transition:
            opacity 420ms ease 220ms,
            transform 520ms cubic-bezier(0.22, 1, 0.36, 1);
        }

        :root[data-hero-open="true"] .hero-mobile-brief {
          opacity: 0;
          transform: translateY(-10px);
          pointer-events: none;
        }

        .shop-head {
          display: grid;
          grid-template-columns: minmax(0, 1fr) auto;
          align-items: start;
          gap: 0.7rem 0.55rem;
        }

        .shop-head > div {
          min-width: 0;
        }

        .shop-head .section-title {
          max-width: 11ch;
          font-size: clamp(1.56rem, 7vw, 2.15rem);
          line-height: 1.02;
        }

        .cart-pill {
          align-self: start;
          white-space: nowrap;
          gap: 0.32rem;
          margin-top: 0.18rem;
          padding: 0.42rem 0.6rem;
          font-size: 0.72rem;
          letter-spacing: 0.01em;
        }

        .cookie-consent {
          width: auto;
        }
      }
      /* UI/UX synthesis: cinematic brand language with a clearer commerce rhythm. */
      :root {
        --content-max: 1320px;
        --page-gutter: clamp(18px, 5vw, 80px);
        --surface-low: rgba(246, 239, 226, 0.035);
        --surface-mid: rgba(246, 239, 226, 0.065);
        --line-soft: rgba(246, 239, 226, 0.11);
      }

      :where(h1, h2, h3, h4, h5, h6),
      .section-title,
      .shop-subhead {
        letter-spacing: 0;
      }

      .section {
        padding-inline: max(var(--page-gutter), calc((100vw - var(--content-max)) / 2));
      }

      .section-label {
        margin-bottom: 0.86rem;
        font-size: 0.72rem;
        letter-spacing: 0.16em;
      }

      .section-title {
        margin-bottom: clamp(0.88rem, 1.8vw, 1.6rem);
        line-height: 1.04;
      }

      .intro-copy {
        max-width: 68ch;
        color: rgba(246, 239, 226, 0.74);
      }

      :where(a, button, input, select, textarea, summary):focus-visible {
        outline: 2px solid color-mix(in oklch, var(--honey) 82%, white 8%);
        outline-offset: 3px;
      }

      @media (min-width: 921px) {
        .topbar {
          padding-block: 13px;
          background: linear-gradient(180deg, rgba(8, 8, 6, 0.94), rgba(8, 8, 6, 0.54), transparent);
        }

        .brand-mark {
          width: 90px;
          height: 90px;
          box-shadow:
            0 0 0 7px rgba(8, 8, 6, 0.22),
            0 14px 36px rgba(0, 0, 0, 0.38),
            0 0 24px rgba(231, 184, 91, 0.1);
        }

        .topbar.is-scrolled {
          padding-block: 8px;
        }

        body[data-view]:not([data-view="home"]) .topbar {
          background: rgba(8, 8, 6, 0.94);
          backdrop-filter: blur(14px);
          border-bottom: 1px solid rgba(246, 239, 226, 0.08);
        }
      }

      .product-card,
      .journal-card,
      .knowledge-note,
      .faq-note,
      .inspection-main,
      .inspection-note,
      .visit-copy-panel,
      .ticket {
        border-radius: 8px;
      }

      .product-card {
        border-color: var(--line-soft);
        background:
          linear-gradient(180deg, var(--surface-mid), rgba(8, 6, 4, 0.42)),
          rgba(8, 6, 4, 0.34);
        box-shadow: inset 0 1px 0 rgba(246, 239, 226, 0.035);
      }

      .product-card:hover {
        transform: translateY(-3px);
        box-shadow: 0 18px 38px rgba(0, 0, 0, 0.34);
      }

      .journal-grid {
        gap: 0.82rem;
      }

      .journal-card {
        background: rgba(8, 6, 4, 0.3);
        border-color: var(--line-soft);
      }

      .journal-card:hover {
        transform: translateY(-3px);
      }

      .knowledge-note,
      .faq-note {
        border-color: rgba(231, 184, 91, 0.18);
        border-left: 2px solid rgba(231, 184, 91, 0.54);
        background: rgba(231, 184, 91, 0.045);
      }

      .faq-item {
        background: transparent;
      }

      /* Trust is an editorial sequence, not one large card with two smaller cards. */
      .trust-grid {
        grid-template-columns: repeat(3, minmax(0, 1fr));
        gap: 0;
        border-inline: 0;
        background: transparent;
      }

      .trust-note,
      .trust-note.manifesto-note {
        min-height: 250px;
        grid-row: auto;
        padding: clamp(1.15rem, 2.4vw, 1.75rem);
      }

      .trust-note {
        border-left: 1px solid var(--line-soft);
        background: linear-gradient(180deg, rgba(246, 239, 226, 0.045), rgba(8, 8, 6, 0.18));
      }

      .trust-note:first-child {
        border-left: 0;
      }

      .trust-note.manifesto-note {
        align-content: end;
        background:
          linear-gradient(180deg, rgba(8, 8, 6, 0.36), rgba(8, 8, 6, 0.86)),
          url("/assets/premium-pantry-hall-v1.webp") center 46% / cover no-repeat,
          #0d0b08;
      }

      .trust-note.manifesto-note b {
        font-size: clamp(1.35rem, 1.8vw, 1.85rem);
      }

      /* The comparison view reads as one product workspace instead of nested cards. */
      #gallery .exhibit-detail {
        min-height: 0;
        padding: clamp(1.35rem, 2.6vw, 2rem) 0 0;
        border: 0;
        border-top: 1px solid color-mix(in oklch, var(--focus-color) 32%, var(--line-soft));
        border-radius: 0;
        background: transparent;
        box-shadow: none;
      }

      #gallery .exhibit-detail h3 {
        max-width: 15ch;
        font-size: clamp(2rem, 3.25vw, 3.5rem);
        line-height: 1;
      }

      #gallery .exhibit-detail > p {
        max-width: 68ch;
        font-size: 1rem;
        line-height: 1.68;
      }

      #gallery .inspection-main {
        border-color: var(--line-soft);
      }

      #gallery .inspection-note {
        border-color: rgba(246, 239, 226, 0.075);
        border-left-color: color-mix(in oklch, var(--focus-color) 58%, transparent);
        background: rgba(246, 239, 226, 0.028);
        box-shadow: none;
      }

      .visit-copy-panel {
        border: 0;
        border-left: 2px solid rgba(231, 184, 91, 0.42);
        background: transparent;
      }

      .ticket {
        background: rgba(246, 239, 226, 0.045);
      }

      @media (max-width: 920px) {
        .trust-grid {
          grid-template-columns: 1fr;
        }

        .trust-note,
        .trust-note.manifesto-note {
          min-height: 0;
          border-left: 0;
          border-top: 1px solid var(--line-soft);
        }

        .trust-note.manifesto-note {
          min-height: 260px;
        }
      }

      @media (max-width: 620px) {
        .section {
          padding-inline: 16px;
        }

        .section-label {
          margin-bottom: 0.68rem;
          font-size: 0.66rem;
        }

        .topbar {
          min-height: 82px;
          padding-block: 9px;
          box-shadow: none;
        }

        .brand-mark {
          width: 58px;
          height: 58px;
        }

        #shop .shop-grid {
          gap: 0.72rem;
          margin-top: 1.15rem;
        }

        /* Mobil mağaza kartı: dikey düzen — görsel tam genişlik, metin kesilmeden okunur */
        #shop .product-card {
          display: flex;
          flex-direction: column;
          min-height: 0;
          overflow: hidden;
        }

        #shop .product-thumb {
          width: 100%;
          min-height: 0;
          aspect-ratio: 16 / 10;
          align-self: auto;
        }

        #shop .product-body {
          min-width: 0;
          gap: 0.5rem;
          padding: 0.95rem 0.95rem 1.05rem;
        }

        #shop .product-body h3 {
          font-size: 1.12rem;
          line-height: 1.2;
        }

        #shop .rating-row {
          display: flex;
          flex-wrap: wrap;
          gap: 0.28rem 0.44rem;
          padding: 0;
        }

        #shop .rating-row .stars {
          min-height: 26px;
          padding: 0.2rem 0.5rem;
          font-size: 0.72rem;
        }

        #shop .rating-row small {
          font-size: 0.72rem;
          line-height: 1.3;
        }

        #shop .product-desc {
          -webkit-line-clamp: 2;
          font-size: 0.84rem;
          line-height: 1.45;
        }

        #shop .product-meta {
          display: grid;
          grid-template-columns: 1fr;
          gap: 0.34rem;
          margin-top: auto;
          padding-top: 0;
          border-top: 0;
        }

        #shop .product-price {
          min-height: 0;
          padding: 0;
          border: 0;
          background: transparent;
          color: var(--honey);
          font-size: 0.78rem;
        }

        #shop .add-btn,
        #shop .notify-btn {
          width: 100%;
          min-height: 46px;
          padding: 0.55rem 0.7rem;
          border-radius: 8px;
          font-size: 0.82rem;
          white-space: normal;
        }

        #shop .product-badge {
          top: 0.4rem;
          left: 0.4rem;
          max-width: calc(100% - 0.8rem);
          overflow: hidden;
          text-overflow: ellipsis;
          white-space: nowrap;
        }

        #gallery .room-filter {
          position: sticky;
          top: 88px;
          z-index: 7;
          display: grid;
          grid-template-columns: repeat(3, minmax(0, 1fr));
          gap: 3px;
          overflow: visible;
          padding: 3px;
          border: 1px solid var(--line-soft);
          border-radius: 8px;
          background: rgba(8, 8, 6, 0.92);
          backdrop-filter: blur(12px);
        }

        #gallery .room-filter button {
          width: 100%;
          min-width: 0;
          min-height: 42px;
          justify-content: center;
          padding: 0.46rem 0.3rem;
          border: 0;
          border-radius: 6px;
          font-size: 0.75rem;
          text-align: center;
        }

        #gallery .room-filter button[aria-pressed="true"] {
          box-shadow: none;
        }

        #gallery .category-count {
          display: none;
        }

        #gallery .exhibit-detail {
          padding-top: 1.1rem;
        }

        #gallery .exhibit-detail h3 {
          font-size: clamp(1.85rem, 10vw, 2.65rem);
        }

        #gallery .exhibit-detail > p {
          font-size: 0.9rem;
          line-height: 1.58;
        }

        #gallery .inspection-caption b {
          font-size: clamp(1.55rem, 8vw, 2.15rem);
        }

        .knowledge-note,
        .faq-note {
          padding: 0.86rem;
        }

        .journal-grid {
          gap: 0.72rem;
        }

        .visit-copy-panel {
          padding: 0 0 0 0.92rem;
        }

        .visit-panel .ticket {
          order: 0;
        }

        .site-footer {
          padding: 2rem 16px 1.25rem;
        }

        .footer-grid {
          grid-template-columns: repeat(2, minmax(0, 1fr));
          gap: 1.5rem 1rem;
        }

        .footer-brand {
          grid-column: 1 / -1;
          display: grid;
          grid-template-columns: 52px minmax(0, 1fr);
          gap: 0.2rem 0.85rem;
          align-items: center;
        }

        .footer-brand img {
          width: 52px;
          height: 52px;
          grid-row: 1 / span 2;
        }

        .footer-brand p {
          max-width: 42ch;
          margin: 0;
          font-size: 0.8rem;
          line-height: 1.5;
        }

        .footer-social {
          gap: 0.4rem;
        }

        .footer-social a {
          width: 38px;
          height: 38px;
        }

        .footer-col {
          min-width: 0;
        }

        .footer-col h4 {
          margin-bottom: 0.48rem;
          font-size: 0.68rem;
        }

        .footer-col a,
        .footer-col button {
          font-size: 0.8rem;
          line-height: 1.3;
        }

        .footer-bottom {
          margin-top: 1.5rem;
          padding-top: 1rem;
          align-items: flex-start;
          font-size: 0.72rem;
          line-height: 1.45;
        }
      }

      .skip-link {
        position: fixed;
        top: 0;
        left: 16px;
        z-index: 200;
        padding: 0.7rem 1.1rem;
        border-radius: 0 0 10px 10px;
        background: var(--honey);
        color: #1a120a;
        font-weight: 700;
        text-decoration: none;
        transform: translateY(-130%);
        opacity: 0;
        pointer-events: none;
        transition: transform 200ms ease;
      }
      .skip-link:focus-visible {
        transform: translateY(0);
        opacity: 1;
        pointer-events: auto;
        outline: 2px solid #1a120a;
        outline-offset: 2px;
      }

      /* Commerce and accessibility repairs: dialogs must always sit above navigation. */
      .cart-overlay,
      .modal-overlay,
      .info-overlay,
      .checkout-overlay,
      .search-overlay {
        z-index: 100;
      }

      body.has-dialog-open .topbar,
      body.has-dialog-open main,
      body.has-dialog-open .site-footer {
        pointer-events: none;
      }

      .cart-close,
      .modal-close {
        width: 44px;
        height: 44px;
        min-width: 44px;
        min-height: 44px;
      }

      .product-thumb[data-quickview] {
        width: 100%;
        padding: 0;
        border: 0;
        color: inherit;
        font: inherit;
        text-align: left;
        text-decoration: none;
        cursor: pointer;
      }

      .product-thumb[data-quickview]:focus-visible {
        outline: 2px solid color-mix(in oklch, var(--honey) 80%, white 8%);
        outline-offset: -4px;
      }

      .shop-readiness-note {
        margin: 1rem 0 1.25rem;
        padding: 0.85rem 1rem;
        border-left: 2px solid var(--honey);
        background: rgba(231, 184, 91, 0.07);
        color: color-mix(in oklch, var(--ink) 78%, var(--soft));
        line-height: 1.55;
      }

      .site-footer li a,
      .site-footer li button {
        min-width: 44px;
        min-height: 44px;
        display: inline-flex;
        align-items: center;
      }

      @media (max-width: 920px) {
        .support-layout {
          grid-template-columns: minmax(0, 1fr);
          gap: 1rem;
        }

        .support-nav {
          position: static;
          top: auto;
          order: -1;
        }

        .support-nav nav {
          display: grid;
          grid-template-columns: repeat(2, minmax(0, 1fr));
          gap: 0.4rem;
        }

        .support-nav a {
          min-height: 44px;
        }
      }

      @media (max-width: 620px) {
        .topbar {
          grid-template-columns: minmax(24px, 1fr) auto minmax(132px, 1fr);
        }

        .topbar nav a.commerce-nav-link {
          display: none;
        }

        #searchOpen {
          display: inline-flex;
        }

        .support-section {
          padding-left: 18px;
          padding-right: 18px;
        }

        .support-card {
          min-width: 0;
          padding: 1rem;
        }

        .support-card h3 {
          font-size: clamp(1.65rem, 9vw, 2.35rem);
        }

        .support-card p,
        .support-card li {
          font-size: 1rem;
          line-height: 1.68;
          overflow-wrap: anywhere;
        }

        .support-nav nav {
          grid-template-columns: 1fr;
        }

        .modal-overlay {
          padding: 0;
          align-items: stretch;
        }

        .modal-card {
          width: 100%;
          height: 100dvh;
          max-height: none;
          grid-template-columns: 1fr;
          grid-template-rows: minmax(180px, 34dvh) minmax(0, 1fr);
          border: 0;
          border-radius: 0;
        }

        .modal-media {
          min-height: 180px;
          max-height: none;
        }

        .modal-body {
          min-height: 0;
          padding: 1rem 1rem calc(1rem + env(safe-area-inset-bottom));
        }

        .modal-close {
          top: max(12px, env(safe-area-inset-top));
          right: 12px;
          z-index: 4;
          background: rgba(8, 6, 4, 0.88);
        }
      }

      @media (prefers-reduced-motion: reduce) {
        *,
        *::before,
        *::after {
          animation-duration: 0.01ms !important;
          animation-iteration-count: 1 !important;
          scroll-behavior: auto !important;
          transition-duration: 0s !important;
        }
      }
          /* 2026 experience refresh: a clear, static commerce hero replaces scroll scrubbing. */
      .hero-scroll.hero-v2,
      :root[data-hero-mode="scroll"] .hero-scroll.hero-v2 {
        height: auto;
        min-height: 0;
      }

      .hero-v2 .hero,
      :root[data-hero-mode="scroll"] .hero-v2 .hero {
        position: relative;
        top: auto;
        height: min(820px, 92svh);
        min-height: 680px;
        display: block;
        overflow: hidden;
        perspective: none;
        isolation: isolate;
        opacity: 1;
        background: #0b0906;
      }

      .hero-v2 .hero::before {
        content: none;
      }

      .hero-v2 .hero::after {
        content: "";
        position: absolute;
        z-index: 2;
        left: 0;
        right: 0;
        bottom: -1px;
        height: clamp(120px, 18svh, 190px);
        pointer-events: none;
        background:
          linear-gradient(180deg, rgba(11, 9, 6, 0) 0%, rgba(11, 9, 6, 0.62) 58%, var(--bg) 100%),
          radial-gradient(80% 80% at 50% 100%, rgba(181, 129, 45, 0.22), rgba(181, 129, 45, 0) 62%);
      }

      .hero-v2-media {
        position: absolute;
        inset: 0;
        z-index: 0;
        display: block;
        overflow: hidden;
        background: #090806;
      }

      .hero-v2-media img {
        width: 100%;
        height: 100%;
        display: block;
        object-fit: cover;
        object-position: center center;
        filter: saturate(0.96) contrast(1.06) brightness(0.94);
        transform: scale(1.025);
        transition:
          transform 1200ms cubic-bezier(0.22, 1, 0.36, 1),
          filter 900ms ease;
      }

      :root[data-ready="true"] .hero-v2-media img {
        filter: saturate(1.04) contrast(1.05) brightness(1);
        transform: scale(1);
      }

      .hero-v2-shade {
        position: absolute;
        inset: 0;
        z-index: 1;
        pointer-events: none;
        background:
          linear-gradient(90deg, rgba(5, 4, 3, 0.84) 0%, rgba(5, 4, 3, 0.64) 26%, rgba(5, 4, 3, 0.14) 58%, rgba(5, 4, 3, 0.08) 100%),
          linear-gradient(180deg, rgba(5, 4, 3, 0.18) 0%, transparent 38%, rgba(5, 4, 3, 0.54) 100%);
      }

      .hero-v2 .hero-ui {
        position: absolute;
        z-index: 3;
        inset: auto clamp(24px, 5vw, 76px) clamp(72px, 9svh, 104px);
        display: block;
        opacity: 1;
        transform: none;
        pointer-events: none;
      }

      .hero-v2 .hero-copy {
        max-width: 650px;
        padding: 0;
        border: 0;
        background: transparent;
        box-shadow: none;
        backdrop-filter: none;
        text-shadow:
          0 1px 1px rgba(0, 0, 0, 0.56),
          0 14px 34px rgba(0, 0, 0, 0.72);
        -webkit-font-smoothing: antialiased;
        text-rendering: geometricPrecision;
        pointer-events: auto;
        opacity: 0;
        transform: translate3d(0, 18px, 0);
        transition:
          opacity 520ms ease 120ms,
          transform 720ms cubic-bezier(0.22, 1, 0.36, 1) 120ms;
      }

      :root[data-ready="true"] .hero-v2 .hero-copy {
        opacity: 1;
        transform: translate3d(0, 0, 0);
      }

      .hero-v2 .hero-copy::before {
        content: none;
      }

      .hero-v2 .hero-kicker {
        display: flex;
        align-items: center;
        gap: 0.72rem;
        margin: 0 0 1rem;
        color: rgba(255, 248, 231, 0.94);
        font-weight: 800;
        letter-spacing: 0.13em;
      }

      .hero-v2 .hero-kicker::before {
        content: "";
        width: 38px;
        height: 1px;
        flex: 0 0 auto;
        background: var(--honey);
        box-shadow: 0 0 12px rgba(231, 184, 91, 0.42);
      }

      .hero-v2 .hero-copy h1 {
        max-width: 11ch;
        margin: 0 0 1.1rem;
        color: #fff8e7;
        font-size: 4.75rem;
        font-weight: 430;
        line-height: 0.96;
        letter-spacing: 0;
        text-wrap: balance;
      }

      .hero-v2 .hero-copy > p:not(.hero-kicker) {
        max-width: 52ch;
        margin: 0;
        color: rgba(255, 249, 235, 0.94);
        font-size: 1.06rem;
        font-weight: 620;
        line-height: 1.58;
      }

      .hero-v2 .button-row {
        margin-top: 1.45rem;
        gap: 0.72rem;
      }

      .hero-v2 .button-row .museum-button {
        min-height: 52px;
        padding-inline: 1.3rem;
        border-color: rgba(231, 184, 91, 0.7);
        color: #fff8e7;
        background: rgba(114, 106, 54, 0.72);
        box-shadow: 0 12px 30px rgba(0, 0, 0, 0.34);
        text-shadow: none;
      }

      .hero-v2 .button-row .museum-button.ghost {
        border-color: rgba(246, 239, 226, 0.34);
        color: rgba(255, 248, 231, 0.94);
        background: rgba(8, 8, 6, 0.54);
        box-shadow: none;
      }

      .hero-category-links {
        display: flex;
        flex-wrap: wrap;
        gap: 0.4rem 1.25rem;
        margin-top: 1.4rem;
      }

      .hero-category-links a {
        min-height: 42px;
        display: inline-flex;
        align-items: center;
        color: rgba(246, 239, 226, 0.76);
        font-size: 0.82rem;
        font-weight: 650;
        border-bottom: 1px solid rgba(246, 239, 226, 0.18);
        transition: color 180ms ease, border-color 180ms ease;
      }

      .hero-category-links a:hover,
      .hero-category-links a:focus-visible {
        color: #fff8e7;
        border-color: var(--honey);
      }

      .hero-v2-next {
        position: absolute;
        z-index: 3;
        right: clamp(24px, 5vw, 76px);
        bottom: clamp(72px, 9svh, 104px);
        min-height: 42px;
        display: inline-flex;
        align-items: center;
        gap: 0.58rem;
        color: rgba(255, 248, 231, 0.78);
        font-size: 0.72rem;
        font-weight: 650;
        letter-spacing: 0.1em;
        text-transform: uppercase;
        text-shadow: 0 8px 22px rgba(0, 0, 0, 0.68);
      }

      .hero-v2-next i {
        width: 26px;
        height: 26px;
        position: relative;
        display: grid;
        place-items: center;
        border: 1px solid rgba(231, 184, 91, 0.42);
        border-radius: 999px;
        background: rgba(9, 7, 4, 0.28);
        box-shadow: inset 0 0 18px rgba(231, 184, 91, 0.08);
      }

      .hero-v2-next i::after {
        content: "";
        width: 6px;
        height: 6px;
        border-right: 1px solid currentColor;
        border-bottom: 1px solid currentColor;
        transform: rotate(45deg);
        margin-top: -3px;
      }

      @media (max-width: 1100px) {
        .hero-v2 .hero-copy h1 {
          font-size: 3.65rem;
        }

        .hero-v2-next {
          display: none;
        }
      }

      @media (max-width: 760px), (pointer: coarse) {
        .hero-v2 .hero,
        :root[data-hero-mode="scroll"] .hero-v2 .hero {
          height: clamp(620px, 90svh, 760px);
          min-height: 620px;
        }

        .hero-v2-media img {
          object-position: center top;
          filter: saturate(0.98) contrast(1.05) brightness(0.9);
        }

        :root[data-ready="true"] .hero-v2-media img {
          filter: saturate(1.04) contrast(1.04) brightness(0.96);
        }

        .hero-v2-shade {
          background:
            linear-gradient(180deg, rgba(5, 4, 3, 0.04) 0%, rgba(5, 4, 3, 0.02) 34%, rgba(5, 4, 3, 0.64) 62%, rgba(5, 4, 3, 0.96) 100%),
            linear-gradient(90deg, rgba(5, 4, 3, 0.14), transparent 72%);
        }

        .hero-v2 .hero-ui {
          inset: auto 20px 32px;
        }

        .hero-v2 .hero-copy {
          max-width: 100%;
        }

        .hero-v2 .hero-copy h1 {
          max-width: 12ch;
          margin-bottom: 0.72rem;
          font-size: 2.65rem;
          line-height: 0.98;
        }

        .hero-v2 .hero-copy > p:not(.hero-kicker) {
          max-width: 35ch;
          font-size: 0.9rem;
          line-height: 1.48;
        }

        .hero-v2 .button-row {
          margin-top: 1rem;
          gap: 0.5rem;
        }

        .hero-v2 .button-row .museum-button {
          min-height: 48px;
          padding: 0.72rem 1rem;
          font-size: 0.88rem;
        }

        .hero-category-links {
          gap: 0.2rem 0.9rem;
          margin-top: 0.62rem;
        }

        .hero-category-links a {
          min-height: 38px;
          font-size: 0.75rem;
        }
      }

      @media (max-width: 420px) {
        .hero-v2 .hero-copy h1 {
          font-size: 2.35rem;
        }

        .hero-v2 .hero-kicker {
          margin-bottom: 0.72rem;
        }

        .hero-v2 .button-row .museum-button {
          flex: 1 1 100%;
        }
      }

      @media (prefers-reduced-motion: reduce) {
        .hero-v2-media img,
        .hero-v2 .hero-copy {
          transition: none;
          transform: none;
        }
      }

      /* Content imagery stays still after loading; movement is reserved for direct interaction. */
      .visual-stage img,
      .motion-window img,
      .sensory-card img {
        animation: none;
        will-change: auto;
      }

      /* Native lazy loading with an intentional, short-lived visual state. */
      img.media-reveal {
        background:
          linear-gradient(115deg, rgba(231, 184, 91, 0.04), rgba(231, 184, 91, 0.14) 48%, rgba(8, 6, 4, 0.05)),
          #100d09;
        opacity: 0.76;
        scale: 1.008;
        transition:
          opacity 420ms ease,
          scale 680ms cubic-bezier(0.22, 1, 0.36, 1),
          filter 520ms ease;
      }

      img.media-reveal.is-pending {
        animation: none;
        opacity: 0.72;
        filter: saturate(0.74) brightness(0.68);
      }

      img.media-reveal.is-loading {
        animation: mediaLoadingBreath 780ms ease-in-out alternate infinite;
        filter: saturate(0.72) brightness(0.72);
      }

      img.media-reveal.is-loaded {
        animation: none;
        opacity: 1;
        scale: 1;
      }

      img.media-reveal.is-error {
        animation: none;
        opacity: 0.5;
        scale: 1;
        filter: grayscale(1);
      }

      @keyframes mediaLoadingBreath {
        from { opacity: 0.62; }
        to { opacity: 0.84; }
      }

      @media (prefers-reduced-motion: reduce) {
        img.media-reveal,
        img.media-reveal.is-pending,
        img.media-reveal.is-loading {
          animation: none;
          transition: opacity 160ms linear;
          scale: 1;
        }
      }

      /* A one-product category reads as a deliberate feature, not an incomplete grid. */
      .cat-band.is-single .cat-options {
        grid-template-columns: minmax(0, 620px);
      }

      .cat-band.is-single .opt-card {
        min-height: 248px;
        display: grid;
        grid-template-columns: minmax(0, 1.45fr) minmax(180px, 0.75fr);
        grid-template-rows: minmax(0, 1fr) auto;
      }

      .cat-band.is-single .opt-thumb {
        grid-row: 1 / 3;
        min-height: 248px;
        aspect-ratio: auto;
      }

      .cat-band.is-single .opt-card b {
        align-self: end;
        padding: 1.3rem 1.15rem 0.35rem;
        font-size: 1.12rem;
        line-height: 1.18;
      }

      .cat-band.is-single .opt-card-action {
        align-self: start;
        margin: 0;
        padding: 0 1.15rem 1.25rem;
      }

      /* Long Turkish labels wrap before they compete with actions. */
      .category-commerce-copy,
      .category-commerce-actions,
      .shop-head > *,
      .checkout-aside,
      .cart-item-info {
        min-width: 0;
      }

      .category-commerce-copy b {
        max-width: 22ch;
        text-wrap: balance;
        overflow-wrap: break-word;
      }

      .category-commerce-copy span {
        max-width: 62ch;
      }

      .category-commerce-actions {
        flex-wrap: wrap;
      }

      .category-commerce-actions .museum-button {
        max-width: 100%;
        white-space: normal;
        text-align: center;
      }

      .section-title,
      .product-card h3,
      .journal-card h3,
      .support-card h3,
      .menu-panel a {
        overflow-wrap: break-word;
      }

      @media (max-width: 1080px) {
        .category-commerce-bar {
          grid-template-columns: minmax(0, 1fr);
          align-items: start;
        }

        .category-commerce-actions {
          justify-content: flex-start;
        }
      }

      @media (max-width: 520px) {
        .cat-band.is-single .cat-options {
          grid-template-columns: minmax(0, 1fr);
        }

        .cat-band.is-single .opt-card {
          min-height: 142px;
          grid-template-columns: minmax(0, 45%) minmax(0, 55%);
        }

        .cat-band.is-single .opt-thumb {
          min-height: 142px;
        }

        .cat-band.is-single .opt-card b {
          padding: 1rem 0.9rem 0.3rem;
          font-size: 0.94rem;
        }

        .cat-band.is-single .opt-card-action {
          padding: 0 0.9rem 1rem;
        }

        .category-commerce-actions {
          display: grid;
          grid-template-columns: minmax(0, 1fr);
          width: 100%;
        }

        .category-commerce-actions .museum-button {
          width: 100%;
        }
      }

      /* ── Aktar Kadranı hero ─────────────────────────────────────────── */
      /* Arka plan fotoğrafı kadran sahnesinde loş bir fon olarak kalır. */
      .hero-dial .hero-v2-media img,
      :root[data-ready="true"] .hero-dial .hero-v2-media img {
        filter: saturate(0.92) contrast(1.05) brightness(0.52);
        transform: scale(1.035);
      }

      .hero-dial .hero-v2-shade {
        background:
          linear-gradient(90deg, rgba(5, 4, 3, 0.9) 0%, rgba(5, 4, 3, 0.72) 34%, rgba(5, 4, 3, 0.42) 64%, rgba(5, 4, 3, 0.56) 100%),
          radial-gradient(52% 60% at 76% 50%, rgba(231, 184, 91, 0.1), transparent 72%);
      }

      /* Amber ışık katmanı sabit kalır; scroll sırasında GPU yükü bindirmez. */
      .hero-v2-glow {
        position: absolute;
        inset: -12%;
        z-index: 2;
        pointer-events: none;
        opacity: 0.55;
        background:
          radial-gradient(44% 36% at 68% 28%, rgba(231, 184, 91, 0.15), transparent 70%),
          radial-gradient(30% 26% at 22% 78%, rgba(191, 97, 68, 0.1), transparent 72%);
        transform: translateZ(0);
      }

      /* Başlık: Instrument Serif, satırlar sahneye sırayla girer */
      .hero-v2 .hero-copy h1 {
        max-width: 14ch;
        font-family: "Instrument Serif", Georgia, serif;
        font-size: clamp(2.55rem, 4.8vw, 4.35rem);
        font-weight: 400;
        line-height: 0.98;
        letter-spacing: 0.004em;
        padding-bottom: 1.2rem;
      }

      .hero-v2 .hero-copy h1 em {
        font-style: italic;
        color: #f4d69c;
      }

      .hero-v2 .hero-copy h1 .hero-line {
        display: block;
        opacity: 0;
        transform: translate3d(0, 26px, 0);
        transition: opacity 620ms ease 160ms, transform 780ms cubic-bezier(0.22, 1, 0.36, 1) 160ms;
      }

      .hero-v2 .hero-copy h1 .hero-line + .hero-line {
        transition-delay: 320ms, 320ms;
      }

      :root[data-ready="true"] .hero-v2 .hero-copy h1 .hero-line {
        opacity: 1;
        transform: translate3d(0, 0, 0);
      }

      /* Kategori rafı: küçük görselli kapsül bağlantılar */
      .hero-category-links a {
        min-height: 46px;
        gap: 0.55rem;
        padding: 0.3rem 0.95rem 0.3rem 0.34rem;
        border: 1px solid rgba(246, 239, 226, 0.16);
        border-bottom: 1px solid rgba(246, 239, 226, 0.16);
        border-radius: 999px;
        background: rgba(9, 7, 4, 0.42);
        backdrop-filter: blur(6px);
        color: rgba(246, 239, 226, 0.88);
        font-size: 0.8rem;
        transition: color 180ms ease, border-color 180ms ease, background 180ms ease, transform 180ms ease;
      }

      .hero-category-links img {
        width: 34px;
        height: 34px;
        flex: 0 0 auto;
        border-radius: 999px;
        object-fit: cover;
        border: 1px solid rgba(231, 184, 91, 0.38);
      }

      .hero-category-links a:hover,
      .hero-category-links a:focus-visible {
        color: #fff8e7;
        border-color: rgba(231, 184, 91, 0.62);
        background: rgba(9, 7, 4, 0.62);
        transform: translateY(-2px);
      }

      /* Sol metin bloğu dikeyde ortalanır, kadrana yer açar */
      .hero-dial .hero-ui {
        inset: 0 auto 0 clamp(24px, 5vw, 76px);
        display: flex;
        align-items: center;
        padding: clamp(96px, 13vh, 150px) 0 56px;
        box-sizing: border-box;
      }

      .hero-dial .hero-copy {
        max-width: clamp(360px, 33vw, 470px);
      }

      .hero-dial .hero-copy .hero-kicker {
        margin-bottom: 1.4rem;
      }

      .hero-dial .hero-copy h1 {
        margin-bottom: 1.5rem;
      }

      .hero-dial .hero-copy > p {
        margin-bottom: 2.1rem;
      }

      .hero-dial .button-row {
        gap: 1.1rem;
        margin-bottom: 2.4rem;
      }

      .hero-dial .hero-category-links {
        gap: 0.85rem;
      }

      /* Kadran sahnesi: sağ kenardan taşan döner çark */
      .hero-dial-stage {
        --dial-size: min(600px, 37.5vw);
        --dial-item: min(102px, 7.7vw);
        position: absolute;
        z-index: 3;
        top: 50%;
        right: clamp(190px, 17vw, 250px);
        width: var(--dial-size);
        height: var(--dial-size);
        transform: translateY(-50%);
      }

      /* Diş, ray yarıçapı ve merkez sahne boyutundan türetilir */
      .hero-dial-stage .dial-item {
        width: var(--dial-item);
        height: var(--dial-item);
        margin: calc(var(--dial-item) / -2) 0 0 calc(var(--dial-item) / -2);
        transform: rotate(var(--item-ang, 0deg)) translateX(calc(var(--dial-size) / 2 - var(--dial-item) / 2));
      }

      .hero-dial-center {
        width: calc(var(--dial-size) * 0.5);
        height: calc(var(--dial-size) * 0.5);
      }

      .hero-dial-stage::before {
        content: "";
        position: absolute;
        inset: 0;
        border: 1px dashed rgba(231, 184, 91, 0.24);
        border-radius: 50%;
      }

      .hero-dial-stage::after {
        content: "";
        position: absolute;
        inset: 72px;
        border: 1px solid rgba(246, 239, 226, 0.09);
        border-radius: 50%;
      }

      .hero-dial-wheel {
        position: absolute;
        inset: 0;
        transform: rotate(var(--dial-rot, 180deg));
        transition: transform 720ms cubic-bezier(0.22, 1, 0.36, 1);
        cursor: grab;
        touch-action: none;
      }

      .hero-dial-wheel.is-dragging {
        transition: none;
        cursor: grabbing;
      }

      .dial-item {
        position: absolute;
        left: 50%;
        top: 50%;
      }

      .dial-item .dial-thumb {
        display: block;
        width: 100%;
        height: 100%;
        border-radius: 50%;
        overflow: hidden;
        border: 1px solid rgba(231, 184, 91, 0.34);
        background: #100d09;
        box-shadow:
          0 0 0 5px rgba(6, 5, 3, 0.82),
          0 0 0 6px rgba(231, 184, 91, 0.16),
          0 14px 30px rgba(0, 0, 0, 0.55);
        opacity: 0.82;
        transform: rotate(calc(-1 * (var(--item-ang, 0deg) + var(--dial-rot, 180deg))));
        transition:
          transform 720ms cubic-bezier(0.22, 1, 0.36, 1),
          scale 420ms cubic-bezier(0.22, 1, 0.36, 1),
          opacity 260ms ease,
          border-color 260ms ease,
          box-shadow 260ms ease;
      }

      .hero-dial-wheel.is-dragging .dial-thumb {
        transition: none;
      }

      .dial-item img {
        width: 100%;
        height: 100%;
        display: block;
        object-fit: cover;
      }

      .dial-item:hover .dial-thumb,
      .dial-item:focus-visible .dial-thumb {
        opacity: 1;
        border-color: rgba(231, 184, 91, 0.55);
        box-shadow:
          0 0 0 5px rgba(6, 5, 3, 0.85),
          0 0 0 6px rgba(231, 184, 91, 0.32),
          0 14px 30px rgba(0, 0, 0, 0.55);
      }

      .dial-item.is-active .dial-thumb {
        opacity: 1;
        scale: 1.3;
        border-color: rgba(231, 184, 91, 0.8);
        box-shadow:
          0 0 0 5px rgba(6, 5, 3, 0.9),
          0 0 0 6.5px rgba(231, 184, 91, 0.55),
          0 0 46px rgba(231, 184, 91, 0.3),
          0 18px 40px rgba(0, 0, 0, 0.6);
      }

      /* Kadran merkezi: aktif ürünün künyesi */
      .hero-dial-center {
        position: absolute;
        left: 50%;
        top: 50%;
        transform: translate(-50%, -50%);
        border-radius: 50%;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        gap: 0.4rem;
        padding: 8% 10%;
        box-sizing: border-box;
        overflow: hidden;
        text-align: center;
        background: rgba(9, 7, 4, 0.66);
        border: 1px solid rgba(231, 184, 91, 0.3);
        backdrop-filter: blur(8px);
        z-index: 2;
      }

      .hero-dial-center small {
        font-size: 0.62rem;
        font-weight: 700;
        letter-spacing: 0.24em;
        color: var(--honey);
      }

      .hero-dial-center b {
        font-family: "Instrument Serif", Georgia, serif;
        font-weight: 400;
        font-size: clamp(1rem, 1.25vw, 1.5rem);
        line-height: 1.14;
        color: #fff8e7;
        text-wrap: balance;
        display: -webkit-box;
        -webkit-box-orient: vertical;
        -webkit-line-clamp: 2;
        overflow: hidden;
      }

      .hero-dial-center span {
        font-size: clamp(0.62rem, 0.72vw, 0.75rem);
        line-height: 1.32;
        color: rgba(246, 239, 226, 0.72);
        display: -webkit-box;
        -webkit-box-orient: vertical;
        -webkit-line-clamp: 2;
        overflow: hidden;
      }

      .hero-dial-center a {
        margin-top: 0.3rem;
        min-height: 40px;
        display: inline-flex;
        align-items: center;
        white-space: nowrap;
        padding: 0 1.1rem;
        border: 1px solid rgba(231, 184, 91, 0.6);
        border-radius: 999px;
        color: #fff8e7;
        font-size: 0.82rem;
        font-weight: 650;
        transition: background 180ms ease, border-color 180ms ease;
      }

      .hero-dial-center a:hover,
      .hero-dial-center a:focus-visible {
        background: rgba(231, 184, 91, 0.16);
        border-color: var(--honey);
      }

      .hero-dial-controls {
        position: absolute;
        left: 50%;
        bottom: calc(-1 * var(--dial-item) / 2 - 58px);
        transform: translateX(-50%);
        display: flex;
        align-items: center;
        gap: 0.7rem;
        z-index: 3;
      }

      .hero-dial-controls button {
        width: 46px;
        height: 46px;
        border-radius: 999px;
        border: 1px solid rgba(246, 239, 226, 0.3);
        background: rgba(9, 7, 4, 0.55);
        color: var(--ink);
        font-size: 1rem;
        cursor: pointer;
        transition: border-color 180ms ease, background 180ms ease;
      }

      .hero-dial-controls button:hover,
      .hero-dial-controls button:focus-visible {
        border-color: var(--honey);
        background: rgba(231, 184, 91, 0.14);
      }

      .hero-dial-count {
        min-width: 64px;
        text-align: center;
        font-size: 0.7rem;
        letter-spacing: 0.18em;
        color: var(--soft);
        font-variant-numeric: tabular-nums;
      }

      .hero-dial-hint {
        position: absolute;
        left: 50%;
        bottom: calc(-1 * var(--dial-item) / 2 - 92px);
        transform: translateX(-50%);
        margin: 0;
        font-size: 0.62rem;
        letter-spacing: 0.2em;
        color: var(--muted);
        white-space: nowrap;
      }



      @media (max-width: 1100px), (pointer: coarse) {
        .hero-dial .hero,
        :root[data-hero-mode="scroll"] .hero-dial .hero {
          height: auto;
          min-height: 100svh;
        }

        .hero-dial .hero-ui {
          position: relative;
          inset: auto;
          display: block;
          padding: 104px 20px 0;
        }

        .hero-dial .hero-copy {
          max-width: 100%;
        }

        .hero-dial-stage {
          --dial-size: min(340px, 88vw);
          --dial-item: 76px;
          position: relative;
          top: auto;
          right: auto;
          width: var(--dial-size);
          height: var(--dial-size);
          margin: 2.1rem auto 0;
          transform: none;
          scale: 1;
        }

        .hero-dial-stage::after {
          inset: 42px;
        }



        .dial-item.is-active .dial-thumb {
          scale: 1.3;
        }

        .hero-dial-center {
          width: calc(var(--dial-size) * 0.56);
          height: calc(var(--dial-size) * 0.56);
          gap: 0.3rem;
          padding: 10%;
        }

        .hero-v2 .hero-copy h1 {
          font-size: clamp(2.5rem, 9.5vw, 3.4rem);
        }

        .hero-dial-center b {
          font-size: 1.2rem;
        }

        .hero-dial-center small {
          font-size: 0.55rem;
        }

        .hero-dial-center span {
          font-size: 0.66rem;
        }

        .hero-dial-center a {
          min-height: 40px;
          padding: 0 1rem;
          font-size: 0.72rem;
        }

        .hero-dial-stage {
          margin-bottom: 8.2rem;
        }

        .hero-dial-controls {
          top: 100%;
          bottom: auto;
          margin-top: 1.3rem;
        }

        .hero-dial-hint {
          top: 100%;
          bottom: auto;
          margin-top: 4.8rem;
          text-align: center;
          white-space: normal;
        }
      }

      @media (max-width: 760px) {
        .hero-dial .hero,
        :root[data-hero-mode="scroll"] .hero-dial .hero {
          min-height: 86svh;
        }

        .hero-dial .hero-ui {
          padding: 88px 20px 34px;
        }

        .hero-dial .hero-copy .hero-kicker {
          margin-bottom: 0.8rem;
        }

        .hero-dial .hero-copy h1 {
          margin-bottom: 1rem;
        }

        .hero-dial .hero-copy > p {
          margin-bottom: 1.25rem;
        }

        .hero-dial .button-row {
          gap: 0.65rem;
          margin-bottom: 0.9rem;
        }

        .hero-dial .hero-category-links {
          gap: 0.5rem;
        }

        .hero-dial-stage {
          display: none;
        }
      }

      @media (prefers-reduced-motion: reduce) {
        .hero-v2 .hero-copy h1 .hero-line,
        .hero-dial-wheel,
        .dial-item .dial-thumb {
          transition: none;
        }

        .hero-v2 .hero-copy h1 .hero-line {
          transform: none;
        }

        .hero-v2-glow {
          animation: none;
        }
      }

      /* ── Ödül hareket dili: kadranla eş zaman/eğri, amber halka vokabüleri ── */
      :root {
        --award-ease: cubic-bezier(0.22, 1, 0.36, 1);
        --award-dur: 780ms;
      }

      /* Scroll reveal: yalnız JS hazır olunca gizlenir (JS'siz sayfa tam görünür) */
      :root[data-award-motion="true"] .rv {
        opacity: 0;
        transform: none;
        transition:
          opacity 420ms ease calc(var(--rv-i, 0) * 55ms);
        will-change: opacity;
      }

      :root[data-award-motion="true"] .rv.is-in {
        opacity: 1;
        transform: none;
      }

      /* Bölüm etiketi: kadran dişini yankılayan amber halka-nokta */
      .section-label::before {
        content: "";
        width: 7px;
        height: 7px;
        margin-right: 0.55rem;
        border-radius: 50%;
        border: 1.5px solid var(--honey);
        box-shadow: 0 0 0 3px rgba(6, 5, 3, 0.8), 0 0 0 4px rgba(231, 184, 91, 0.18);
        flex: 0 0 auto;
      }

      /* Kart vokabüleri: kalkış + amber halka (dial-thumb ile aynı dil) */
      .opt-card,
      .product-card,
      .trust-note,
      .sub-card,
      .journal-card,
      .category-commerce-bar {
        transition:
          transform 420ms var(--award-ease),
          border-color 260ms ease,
          box-shadow 260ms ease;
      }

      .opt-card:hover,
      .product-card:hover,
      .sub-card:hover,
      .journal-card:hover {
        transform: translateY(-4px);
        border-color: rgba(231, 184, 91, 0.4);
        box-shadow:
          0 0 0 1px rgba(231, 184, 91, 0.22),
          0 18px 40px rgba(0, 0, 0, 0.4);
      }

      /* Görsel sahneler: yavaş Ken Burns (kadran dönüşüyle eş sükunet) */
      .visual-stage img,
      .opt-thumb img,
      .product-thumb img {
        transition: transform 1400ms var(--award-ease);
      }

      .visual-stage:hover img,
      .opt-card:hover .opt-thumb img,
      .product-card:hover .product-thumb img {
        transform: scale(1.045);
      }

      /* Koyu bantlarda hero'daki amber ışıma katmanının sakin yankısı */
      .dark-band {
        position: relative;
      }

      .dark-band::after {
        content: "";
        position: absolute;
        inset: 0;
        pointer-events: none;
        background: radial-gradient(46% 40% at 74% 18%, rgba(231, 184, 91, 0.06), transparent 72%);
      }

      /* Butonlar: tutarlı kalkış + amber odak halkası */
      .museum-button {
        transition: transform 320ms var(--award-ease), border-color 200ms ease, background 200ms ease, color 200ms ease;
      }

      .museum-button:hover {
        transform: translateY(-2px);
      }

      .museum-button:focus-visible,
      .opt-card:focus-visible,
      .dial-item:focus-visible {
        outline: 2px solid rgba(231, 184, 91, 0.75);
        outline-offset: 3px;
      }

      @media (prefers-reduced-motion: reduce) {
        :root[data-award-motion="true"] .rv {
          opacity: 1;
          transform: none;
          transition: none;
        }

        .opt-card,
        .product-card,
        .trust-note,
        .sub-card,
        .journal-card,
        .museum-button,
        .visual-stage img,
        .opt-thumb img,
        .product-thumb img {
          transition: none;
        }

        .opt-card:hover,
        .product-card:hover,
        .sub-card:hover,
        .journal-card:hover,
        .museum-button:hover {
          transform: none;
        }

        .visual-stage:hover img,
        .opt-card:hover .opt-thumb img,
        .product-card:hover .product-thumb img {
          transform: none;
        }
      }

      /* ── Mağaza kartları: vitrin ışığı + kadran dili ─────────────────── */
      /* Kart: cam vitrin hissi — koyu zemin, ince amber çerçeve, spot ışığı */
      .product-card {
        border-color: rgba(231, 184, 91, 0.14);
        background:
          radial-gradient(120% 90% at 50% -20%, rgba(231, 184, 91, 0.07), transparent 55%),
          linear-gradient(180deg, rgba(246, 239, 226, 0.035), rgba(8, 8, 6, 0.2));
      }

      /* Görselin üstünde süzülen vitrin spotu (hover'da ürünün üzerinden geçer) */
      .product-thumb::after {
        content: "";
        position: absolute;
        inset: 0;
        pointer-events: none;
        background: linear-gradient(115deg, transparent 32%, rgba(255, 244, 214, 0.14) 46%, rgba(255, 244, 214, 0.05) 54%, transparent 68%);
        transform: translateX(-130%);
        transition: transform 1100ms var(--award-ease);
      }

      .product-card:hover .product-thumb::after {
        transform: translateX(130%);
      }

      /* Hover: kart yükselir, amber halka yanar, spot altta ısınır */
      .product-card:hover {
        transform: translateY(-6px);
        border-color: rgba(231, 184, 91, 0.5);
        box-shadow:
          0 0 0 1px rgba(231, 184, 91, 0.3),
          0 0 44px rgba(231, 184, 91, 0.12),
          0 24px 48px rgba(0, 0, 0, 0.5);
      }

      .product-card:hover .product-thumb img {
        transform: scale(1.055);
      }

      /* Rozet: kadran merkezini yankılayan amber halkalı kapsül */
      .product-badge {
        border: 1px solid rgba(231, 184, 91, 0.42);
        background: rgba(9, 7, 4, 0.72);
        backdrop-filter: blur(6px);
        box-shadow: 0 0 0 3px rgba(6, 5, 3, 0.5);
      }

      /* Ürün adı hover'da amber'e ısınır */
      .product-card h3 {
        transition: color 240ms ease;
      }

      .product-card:hover h3 {
        color: #f4d69c;
      }

      /* Ana CTA: nefes alan amber vurgu (yalnız satıştaki ürünlerde) */
      .product-card[data-status="launch"] .add-btn {
        position: relative;
      }

      .product-card[data-status="launch"]:hover .add-btn {
        box-shadow: 0 0 0 1px rgba(231, 184, 91, 0.45), 0 0 22px rgba(231, 184, 91, 0.18);
      }

      /* Grid girişi: kartlar kadran eğrisiyle sırayla yükselir (rv sistemi zaten bağlı) */
      #shop .product-card.rv {
        transition-duration: 700ms;
      }

      @media (prefers-reduced-motion: reduce) {
        .product-thumb::after {
          display: none;
        }

        .product-card:hover {
          transform: none;
        }

        .product-card:hover .product-thumb img {
          transform: none;
        }
      }

      /* ── Müze Kaidesi: mağaza kartı ─────────────────────────────────── */
      #shop .product-card {
        text-align: center;
        padding-top: 1.9rem;
        background:
          radial-gradient(90% 46% at 50% 0%, rgba(231, 184, 91, 0.08), transparent 62%),
          #0b0906;
      }

      /* Görselin arkasında kadran rayını yankılayan kesikli halka */
      #shop .product-card::before {
        content: "";
        position: absolute;
        left: 50%;
        top: 1.35rem;
        transform: translateX(-50%);
        width: min(258px, 74%);
        aspect-ratio: 1;
        border: 1px dashed rgba(231, 184, 91, 0.18);
        border-radius: 50%;
        pointer-events: none;
      }

      /* Yuvarlak vitrin görseli — dial-thumb ile aynı halka dili */
      #shop .product-thumb {
        position: relative;
        width: min(200px, 58%);
        aspect-ratio: 1 / 1;
        margin: 0 auto;
        border-radius: 50%;
        overflow: hidden;
        border: 1px solid rgba(231, 184, 91, 0.4);
        box-shadow:
          0 0 0 6px rgba(6, 5, 3, 0.85),
          0 0 0 7px rgba(231, 184, 91, 0.2),
          0 26px 40px rgba(0, 0, 0, 0.6);
      }

      #shop .product-thumb img {
        width: 100%;
        height: 100%;
        object-fit: cover;
      }

      /* Kaide ışığı: görselin altındaki sıcak leke */
      #shop .product-body {
        position: relative;
        align-items: center;
      }

      #shop .product-body::before {
        content: "";
        position: absolute;
        left: 50%;
        top: -0.5rem;
        transform: translateX(-50%);
        width: 150px;
        height: 12px;
        background: radial-gradient(50% 100% at 50% 0%, rgba(231, 184, 91, 0.28), transparent 80%);
        pointer-events: none;
      }

      /* Kategori rozeti gizli — bilgi kayıt satırında */
      #shop .product-badge {
        display: none;
      }

      /* Kayıt satırı: iki yana incecik amber çizgiler */
      #shop .product-record {
        display: flex;
        align-items: center;
        justify-content: center;
        gap: 0.6rem;
        margin: 0.9rem 0 0;
        font-family: ui-monospace, "SF Mono", Menlo, monospace;
        font-size: 0.62rem;
        letter-spacing: 0.18em;
        color: var(--honey);
      }

      #shop .product-record span {
        width: 26px;
        height: 1px;
        flex: 0 0 auto;
        background: linear-gradient(90deg, transparent, rgba(231, 184, 91, 0.55));
      }

      #shop .product-record span:last-child {
        background: linear-gradient(90deg, rgba(231, 184, 91, 0.55), transparent);
      }

      #shop .product-body h3 {
        margin-top: 0.15rem;
      }

      /* Künye: boy + sinyal çip kapsülleri, ortalanmış */
      #shop .rating-row {
        justify-content: center;
        gap: 0.5rem;
        flex-wrap: wrap;
      }

      #shop .rating-row .stars,
      #shop .rating-row small {
        border: 1px solid rgba(246, 239, 226, 0.18);
        border-radius: 12px;
        padding: 0.28rem 0.8rem;
        background: transparent;
        color: var(--soft);
        font-size: 0.7rem;
        line-height: 1.3;
      }

      #shop .product-desc {
        text-align: center;
      }

      #shop .size-chips {
        justify-content: center;
      }

      #shop .product-card .product-meta {
        display: flex;
        flex-direction: column;
        gap: 0.55rem;
        align-items: stretch;
      }

      #shop .product-card .product-meta .product-price {
        width: 100%;
        justify-content: center;
      }

      #shop .product-meta .product-price {
        text-align: center;
      }

      #shop .add-btn,
      #shop .notify-btn {
        width: 100%;
        border-radius: 24px;
        min-height: 46px;
        box-shadow: 0 0 22px rgba(231, 184, 91, 0.14);
      }

      /* Hover: kaide üstünde hafif yükselme, halka parlar */
      #shop .product-card:hover .product-thumb {
        border-color: rgba(231, 184, 91, 0.7);
        box-shadow:
          0 0 0 6px rgba(6, 5, 3, 0.9),
          0 0 0 7.5px rgba(231, 184, 91, 0.45),
          0 0 42px rgba(231, 184, 91, 0.22),
          0 30px 46px rgba(0, 0, 0, 0.65);
      }

      @media (max-width: 640px) {
        #shop .product-thumb {
          width: min(180px, 62%);
          aspect-ratio: 1 / 1;
          min-height: 0;
        }

        #shop .product-card::before {
          width: min(228px, 78%);
        }
      }

      /* ── Site geneli premium başlık dili: hero ile aynı serif ── */
      .section-title {
        font-family: "Instrument Serif", Georgia, serif;
        font-weight: 400;
        letter-spacing: 0.004em;
        font-size: clamp(1.9rem, 3.1vw, 2.7rem);
        line-height: 1.08;
      }

      /* ── Museum: görsel üstünde müze vitrin etiketleri ── */
      .visual-stage {
        overflow: visible;
      }

      .visual-stage .stage-tag {
        position: absolute;
        z-index: 3;
        display: flex;
        align-items: center;
        pointer-events: none;
      }

      .stage-tag i {
        width: 7px;
        height: 7px;
        border-radius: 50%;
        border: 1.5px solid var(--honey);
        background: rgba(9, 7, 4, 0.6);
        box-shadow: 0 0 0 3px rgba(6, 5, 3, 0.7), 0 0 12px rgba(231, 184, 91, 0.35);
        flex: 0 0 auto;
      }

      .stage-tag em {
        width: 0;
        height: 1px;
        background: linear-gradient(90deg, rgba(231, 184, 91, 0.7), rgba(231, 184, 91, 0.2));
        transition: width 700ms var(--award-ease) 350ms;
        flex: 0 0 auto;
      }

      .stage-tag b {
        font-weight: 500;
        font-size: 0.72rem;
        letter-spacing: 0.06em;
        color: var(--ink);
        background: rgba(9, 7, 4, 0.74);
        border: 1px solid rgba(231, 184, 91, 0.38);
        border-radius: 4px;
        padding: 0.4rem 0.7rem;
        backdrop-filter: blur(5px);
        white-space: nowrap;
        opacity: 0;
        transform: translateX(-8px);
        transition: opacity 480ms ease 750ms, transform 620ms var(--award-ease) 750ms;
      }

      .visual-stage.rv.is-in .stage-tag em,
      :root:not([data-award-motion="true"]) .stage-tag em {
        width: 44px;
      }

      .visual-stage.rv.is-in .stage-tag b,
      :root:not([data-award-motion="true"]) .stage-tag b {
        opacity: 1;
        transform: translateX(0);
      }

      .stage-tag-1 { left: 6%; top: 16%; }
      .stage-tag-2 { left: 12%; bottom: 14%; }
      .stage-tag-2 em { transition-delay: 950ms; }
      .stage-tag-2 b { transition-delay: 1350ms, 1350ms; }

      @media (max-width: 760px) {
        .stage-tag b { font-size: 0.62rem; }
        .stage-tag-1 { left: 4%; top: 8%; }
        .stage-tag-2 { left: 8%; bottom: 8%; }
      }

      /* ── Trust notları: kayıt numarası + amber halka nokta ── */
      .trust-note small {
        display: flex;
        align-items: center;
        gap: 0.55rem;
      }

      .trust-note .note-no {
        font-family: ui-monospace, "SF Mono", Menlo, monospace;
        font-size: 0.66rem;
        letter-spacing: 0.16em;
        color: var(--honey);
        border: 1px solid rgba(231, 184, 91, 0.35);
        border-radius: 999px;
        padding: 0.18rem 0.55rem;
        box-shadow: 0 0 0 3px rgba(6, 5, 3, 0.55);
      }

      .trust-note {
        background:
          radial-gradient(110% 70% at 50% -14%, rgba(231, 184, 91, 0.05), transparent 58%),
          rgba(246, 239, 226, 0.02);
      }

      /* ── Haber al: bilet kartı kadran merkezi dilinde ── */
      .signup-card {
        position: relative;
        overflow: hidden;
        background:
          radial-gradient(96% 60% at 50% 0%, rgba(231, 184, 91, 0.07), transparent 62%),
          rgba(9, 7, 4, 0.55);
        border-color: rgba(231, 184, 91, 0.28);
      }

      .signup-card::before {
        content: "";
        position: absolute;
        right: -70px;
        top: -70px;
        width: 190px;
        height: 190px;
        border: 1px dashed rgba(231, 184, 91, 0.22);
        border-radius: 50%;
        pointer-events: none;
      }

      .signup-form .museum-button[type="submit"] {
        box-shadow: 0 0 22px rgba(231, 184, 91, 0.14);
      }

      /* ── Galeri inceleme rozeti kapsül diliyle ── */
      .inspection-caption span {
        border: 1px solid rgba(231, 184, 91, 0.42);
        background: rgba(9, 7, 4, 0.72);
        border-radius: 14px;
        padding: 0.28rem 0.75rem;
      }

      @media (prefers-reduced-motion: reduce) {
        .stage-tag em,
        .stage-tag b {
          transition: none;
          width: 44px;
          opacity: 1;
          transform: none;
        }
      }

      /* ── Anlatı köprüleri: bölüm sonundan sıradaki salona davet ── */
      .section-next {
        display: inline-flex;
        align-items: center;
        gap: 0.6rem;
        margin-top: clamp(1.6rem, 3vw, 2.6rem);
        min-height: 44px;
        color: var(--honey);
        font-size: 0.86rem;
        font-weight: 650;
        letter-spacing: 0.04em;
        border-bottom: 1px solid rgba(231, 184, 91, 0.35);
        transition: color 200ms ease, border-color 200ms ease, gap 260ms var(--award-ease);
      }

      .section-next i {
        font-style: normal;
        transition: transform 420ms var(--award-ease);
      }

      .section-next:hover,
      .section-next:focus-visible {
        color: #f4d69c;
        border-color: rgba(231, 184, 91, 0.7);
        gap: 0.85rem;
      }

      .section-next:hover i {
        transform: translateY(3px);
      }

      /* ── Somutluk bandı: sayılar, kadran künyesi dilinde ── */
      .trust-stats {
        display: flex;
        align-items: center;
        gap: clamp(1.2rem, 3vw, 2.4rem);
        margin: 0 0 clamp(1.6rem, 3vw, 2.4rem);
        flex-wrap: wrap;
      }

      .trust-stats > div {
        display: flex;
        align-items: baseline;
        gap: 0.6rem;
      }

      .trust-stats b {
        font-family: "Instrument Serif", Georgia, serif;
        font-weight: 400;
        font-size: clamp(2rem, 3.4vw, 2.9rem);
        color: #f4d69c;
        line-height: 1;
      }

      .trust-stats span {
        max-width: 15ch;
        font-size: 0.82rem;
        line-height: 1.35;
        color: var(--soft);
      }

      .trust-stats > i {
        width: 1px;
        height: 34px;
        background: linear-gradient(rgba(231, 184, 91, 0.4), transparent);
      }

      /* ── Gezi çubuğu: ana sayfada scroll sonrası beliren sabit davet ── */
      .journey-bar {
        position: fixed;
        left: 50%;
        bottom: 18px;
        z-index: 60;
        display: flex;
        align-items: center;
        gap: 0.9rem;
        padding: 0.5rem 0.55rem 0.5rem 1.15rem;
        border-radius: 999px;
        border: 1px solid rgba(231, 184, 91, 0.35);
        background: rgba(9, 7, 4, 0.82);
        backdrop-filter: blur(10px);
        box-shadow: 0 18px 44px rgba(0, 0, 0, 0.55), 0 0 0 3px rgba(6, 5, 3, 0.4);
        transform: translate(-50%, calc(100% + 26px));
        opacity: 0;
        transition: transform 620ms var(--award-ease), opacity 420ms ease;
      }

      .journey-bar.is-shown {
        transform: translate(-50%, 0);
        opacity: 1;
      }

      .journey-bar small {
        font-size: 0.74rem;
        letter-spacing: 0.06em;
        color: var(--soft);
        white-space: nowrap;
      }

      .journey-bar small b {
        color: #f4d69c;
        font-weight: 650;
      }

      .journey-bar .journey-cta {
        min-height: 42px;
        display: inline-flex;
        align-items: center;
        padding: 0 1.25rem;
        border-radius: 999px;
        background: var(--honey);
        color: #1c1812;
        font-size: 0.82rem;
        font-weight: 750;
        white-space: nowrap;
        transition: transform 260ms var(--award-ease), box-shadow 260ms ease;
      }

      .journey-bar .journey-cta:hover,
      .journey-bar .journey-cta:focus-visible {
        transform: translateY(-2px);
        box-shadow: 0 0 24px rgba(231, 184, 91, 0.35);
      }

      .journey-bar .journey-close {
        width: 34px;
        height: 34px;
        border: 0;
        border-radius: 999px;
        background: transparent;
        color: var(--muted);
        font-size: 0.95rem;
        cursor: pointer;
      }

      .journey-bar .journey-close:hover {
        color: var(--ink);
      }

      @media (max-width: 620px) {
        .journey-bar small span {
          display: none;
        }
      }

      @media (prefers-reduced-motion: reduce) {
        .journey-bar {
          transition: none;
        }

        .section-next,
        .section-next i {
          transition: none;
        }
      }

      /* ── Mobil ve performans rötuşları ── */
      .journey-bar {
        bottom: calc(14px + env(safe-area-inset-bottom, 0px));
        max-width: calc(100vw - 24px);
      }

      @media (max-width: 620px) {
        .journey-bar {
          gap: 0.55rem;
          padding: 0.4rem 0.45rem 0.4rem 0.9rem;
        }

        .journey-bar .journey-cta {
          min-height: 44px;
          padding: 0 1rem;
          font-size: 0.78rem;
        }

        .journey-bar .journey-close {
          width: 44px;
          height: 44px;
        }

        .trust-stats {
          gap: 1rem 1.4rem;
        }

        .trust-stats > i {
          display: none;
        }

        .trust-stats b {
          font-size: 1.7rem;
        }

        .trust-stats span {
          font-size: 0.72rem;
        }

        .section-next {
          font-size: 0.8rem;
        }

        .stage-tag b {
          max-width: 46vw;
          white-space: normal;
          line-height: 1.3;
        }
      }

      /* Kaydırma performansı: ağır sabit katmanlar mobilde sadeleşir */
      @media (max-width: 760px) {
        .hero-v2-glow {
          animation: none;
          opacity: 0.4;
        }

        .visual-stage img,
        .opt-thumb img,
        .product-thumb img {
          transition: none;
        }
      }