/* ─── DESIGN TOKENS ─────────────────────────────────────── */
    :root {
      --brand-purple: #471d54;
      --brand-white:  #F5F5F5;
      --brand-black:  #080808;

      --glass-bg:     rgba(255,255,255,0.04);
      --glass-bg-mid: rgba(255,255,255,0.07);
      --glass-border: rgba(255,255,255,0.10);
      --glass-blur:   blur(22px) saturate(160%);

      --radius-sm: 10px;
      --radius-md: 16px;
      --radius-lg: 24px;

      --font-display: 'Impact', 'Arial Black', sans-serif;
      --font-body:    'Inter', system-ui, sans-serif;

      --neon-pulse: 0 0 8px rgba(71,29,84,0.9), 0 0 24px rgba(71,29,84,0.5);

      /* Panel dimensions */
      --left-panel-w: 220px;
      --right-panel-w: 200px;
    }

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

    html, body {
      width: 100%; height: 100%;
      overflow: hidden;
      background: var(--brand-black);
      color: var(--brand-white);
      font-family: var(--font-body);
      -webkit-tap-highlight-color: transparent;
    }

    /* ─── UNITY CONTAINER ───────────────────────────────────── */
    #unity-container {
      position: fixed !important;
      inset: 0 !important;
      width: 100% !important;
      height: 100% !important;
      z-index: 0;
    }
    #unity-canvas {
      width: 100% !important;
      height: 100% !important;
      display: block;
    }
    #unity-loading-bar { position: absolute; left: 50%; top: 50%; transform: translate(-50%,-50%); z-index: 5; }
    #unity-footer      { position: absolute; bottom: 0; left: 0; right: 0; z-index: 5; }
    #unity-warning     { position: absolute; top: 0; left: 0; right: 0; z-index: 100; }

    /* ─── DRAG TOUCHPAD ─────────────────────────────────────── */
    #drag-touchpad {
      position: fixed;
      inset: 0;
      z-index: 10;
      cursor: grab;
      touch-action: none;
    }
    #drag-touchpad.dragging  { cursor: grabbing; }
    #drag-touchpad.disabled  { pointer-events: none; }

    /* ─── UI OVERLAY ─────────────────────────────────────────── */
    #ui-layer {
      position: fixed;
      inset: 0;
      z-index: 20;
      pointer-events: none;
    }
    #ui-layer > * { pointer-events: auto; }

    /* ─── TOP BAR ────────────────────────────────────────────── */
    #top-bar {
      position: absolute;
      top: 0; left: 0; right: 0;
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 10px;
      padding: 16px 20px;
      background: linear-gradient(to bottom, rgba(8,8,8,0.65) 0%, transparent 100%);
      pointer-events: auto;
    }
    #top-bar-left {
      display: flex;
      align-items: center;
      gap: 8px;
      min-width: 0; /* required for the child's overflow-x:auto to actually kick in inside a flex row */
      flex: 1;
    }

    /* ── Home quick nav (T-Shirts / Hoodies / Accessories) ──
       Only visible in ui-mode-home, see visibility rules below.
       overflow-x:auto is a safety net — on narrow phones (iPhone SE etc.)
       hamburger + 3 pills can be wider than the screen, so this scrolls
       instead of clipping/overflowing off the edge. */
    #quick-nav {
      display: none;
      align-items: center;
      gap: 6px;
      min-width: 0;
      overflow-x: auto;
      -webkit-overflow-scrolling: touch;
      scrollbar-width: none;
    }
    #quick-nav::-webkit-scrollbar { display: none; }
    .quick-nav-btn {
      display: flex;
      align-items: center;
      justify-content: center;
      flex-shrink: 0;
      height: 40px;
      padding: 0 14px;
      background: var(--glass-bg-mid);
      border: 1px solid var(--glass-border);
      backdrop-filter: var(--glass-blur);
      -webkit-backdrop-filter: var(--glass-blur);
      border-radius: var(--radius-sm);
      color: var(--brand-white);
      font-family: var(--font-body);
      font-size: 14px;
      font-weight: 500;
      letter-spacing: 0.01em;
      white-space: nowrap;
      cursor: pointer;
      transition: background 0.2s, border-color 0.2s, box-shadow 0.2s;
    }
    .quick-nav-btn:hover {
      background: rgba(255,255,255,0.13);
      border-color: rgba(255,255,255,0.22);
      box-shadow: var(--neon-pulse);
    }

    /* ── UI mode visibility rules ──
       home:     hamburger + quick-nav. No bag, no photo strip, no design tab.
       product:  normal top-bar (hamburger + bag) + photo strip + design tab.
       checkout: hamburger + quick-nav (so closing the Bag/Checkout panel still
                 leaves a way to jump straight into a product). No bag, no
                 photo strip, no design tab.
       !important because buildStripForDesign() sets an inline display:block on
       #thumb-strip-wrap when it has content — inline styles beat plain class
       rules, so without !important a product's strip could leak into home/checkout. */
    body.ui-mode-home #quick-nav,
    body.ui-mode-checkout #quick-nav { display: flex; }

    body.ui-mode-home .cart-btn,
    body.ui-mode-home #thumb-strip-wrap,
    body.ui-mode-home #right-tab { display: none !important; }

    body.ui-mode-checkout .cart-btn,
    body.ui-mode-checkout #thumb-strip-wrap,
    body.ui-mode-checkout #right-tab { display: none !important; }

    /* ── Hamburger button ──
       Switched from <span> bars to an inline SVG icon. iOS WebKit (Safari
       AND Chrome iOS — both run WebKit, Apple requires it) was failing to
       paint the thin <span> bars even after removing backdrop-filter, so
       the bars themselves were the problem, not the blur. SVG strokes use
       the same technique as every other icon in this file (nav items,
       cart, gyro button) which already renders correctly on iOS. */
    #hamburger-btn {
      display: flex;
      align-items: center;
      justify-content: center;
      width: 42px; height: 42px;
      flex-shrink: 0;
      padding: 0;
      background: var(--glass-bg-mid);
      border: 1px solid var(--glass-border);
      backdrop-filter: var(--glass-blur);
      -webkit-backdrop-filter: var(--glass-blur);
      border-radius: var(--radius-sm);
      cursor: pointer;
      transition: background 0.2s, border-color 0.2s;
    }
    #hamburger-btn svg {
      width: 18px; height: 18px;
      overflow: visible;
    }
    .ham-line {
      stroke: var(--brand-white);
      stroke-width: 2;
      stroke-linecap: round;
      transition: transform 0.3s ease, opacity 0.3s ease;
      transform-origin: center;
    }
    #hamburger-btn.open .ham-line-1 { transform: translateY(6px) rotate(45deg); }
    #hamburger-btn.open .ham-line-2 { opacity: 0; }
    #hamburger-btn.open .ham-line-3 { transform: translateY(-7px) rotate(-45deg); }
    #hamburger-btn:hover {
      background: rgba(18,18,18,0.85);
      border-color: rgba(255,255,255,0.22);
    }

    /* ── Cart button ── */
    .cart-btn {
      display: flex;
      align-items: center;
      gap: 8px;
      background: var(--glass-bg-mid);
      border: 1px solid var(--glass-border);
      backdrop-filter: var(--glass-blur);
      -webkit-backdrop-filter: var(--glass-blur);
      border-radius: 40px;
      padding: 8px 16px;
      color: var(--brand-white);
      font-family: var(--font-body);
      font-size: 13px;
      font-weight: 500;
      cursor: pointer;
      transition: background 0.2s, border-color 0.2s, box-shadow 0.2s;
    }
    .cart-btn:hover {
      background: rgba(255,255,255,0.13);
      border-color: rgba(255,255,255,0.22);
      box-shadow: var(--neon-pulse);
    }
    .cart-icon {
      width: 18px; height: 18px;
      stroke: currentColor;
      fill: none;
      stroke-width: 1.8;
      stroke-linecap: round;
      stroke-linejoin: round;
    }

    /* ─── LEFT NAV PANEL ─────────────────────────────────────── */
    #nav-panel {
      position: fixed;
      top: 0; left: 0;
      width: var(--left-panel-w);
      height: 100%;
      z-index: 40;
      background: rgba(8,8,8,0.72);
      backdrop-filter: var(--glass-blur);
      -webkit-backdrop-filter: var(--glass-blur);
      border-right: 1px solid var(--glass-border);
      transform: translateX(calc(-1 * var(--left-panel-w)));
      transition: transform 0.32s cubic-bezier(0.4, 0, 0.2, 1);
      display: flex;
      flex-direction: column;
      padding: 88px 0 40px;
      pointer-events: none;
    }
    #nav-panel.open {
      transform: translateX(0);
      pointer-events: auto;
    }

    /* Panel backdrop (tap-to-close) */
    #nav-backdrop {
      position: fixed;
      inset: 0;
      z-index: 39;
      background: rgba(0,0,0,0);
      pointer-events: none;
      transition: background 0.32s ease;
    }
    #nav-backdrop.active {
      background: rgba(0,0,0,0.45);
      pointer-events: auto;
    }

    .nav-section-label {
      font-size: 9px;
      font-weight: 600;
      letter-spacing: 0.14em;
      text-transform: uppercase;
      color: rgba(255,255,255,0.28);
      padding: 0 24px;
      margin-bottom: 8px;
    }

    .nav-item {
      display: flex;
      align-items: center;
      gap: 14px;
      padding: 14px 24px;
      color: rgba(255,255,255,0.6);
      font-size: 14px;
      font-weight: 500;
      cursor: pointer;
      transition: color 0.18s, background 0.18s;
      border: none;
      background: none;
      width: 100%;
      text-align: left;
    }
    .nav-item svg {
      width: 18px; height: 18px;
      stroke: currentColor;
      fill: none;
      stroke-width: 1.6;
      stroke-linecap: round;
      stroke-linejoin: round;
      flex-shrink: 0;
      transition: stroke 0.18s;
    }
    .nav-item:hover, .nav-item.active {
      color: var(--brand-white);
      background: rgba(255,255,255,0.06);
    }
    .nav-item.active {
      color: #fff;
    }
    .nav-item.active::before {
      content: '';
      position: absolute;
      left: 0;
      width: 3px; height: 28px;
      background: var(--brand-purple);
      border-radius: 0 2px 2px 0;
    }
    .nav-item { position: relative; }

    .nav-divider {
      height: 1px;
      background: var(--glass-border);
      margin: 12px 24px;
    }

    .nav-about {
      margin-top: auto;
    }

    /* ─── RIGHT DESIGN PANEL ─────────────────────────────────── */
    #right-panel {
      position: fixed;
      top: 0; right: 0;
      width: var(--right-panel-w);
      height: 100%;
      z-index: 38;
      background: rgba(8,8,8,0.72);
      backdrop-filter: var(--glass-blur);
      -webkit-backdrop-filter: var(--glass-blur);
      border-left: 1px solid var(--glass-border);
      transform: translateX(var(--right-panel-w));
      transition: transform 0.32s cubic-bezier(0.4, 0, 0.2, 1);
      display: flex;
      flex-direction: column;
      pointer-events: none;
    }
    #right-panel.open {
      transform: translateX(0);
      pointer-events: auto;
    }

    /* Pull tab */
    #right-tab {
      position: fixed;
      top: 50%;
      right: 0;
      transform: translateY(-50%);
      z-index: 37;
      background: var(--glass-bg-mid);
      border: 1px solid var(--glass-border);
      border-right: none;
      backdrop-filter: var(--glass-blur);
      -webkit-backdrop-filter: var(--glass-blur);
      border-radius: var(--radius-sm) 0 0 var(--radius-sm);
      padding: 12px 8px;
      cursor: pointer;
      transition: background 0.2s, transform 0.32s cubic-bezier(0.4, 0, 0.2, 1);
      pointer-events: auto;
      display: flex;
      flex-direction: column;
      align-items: center;
      gap: 6px;
    }
    #right-tab svg {
      width: 16px; height: 16px;
      stroke: rgba(255,255,255,0.5);
      fill: none;
      stroke-width: 1.6;
      stroke-linecap: round;
      stroke-linejoin: round;
    }
    #right-tab .tab-label {
      font-size: 9px;
      letter-spacing: 0.1em;
      text-transform: uppercase;
      color: rgba(255,255,255,0.35);
      writing-mode: vertical-rl;
      text-orientation: mixed;
      transform: rotate(180deg);
    }
    #right-tab:hover { background: var(--glass-bg); }
    #right-panel.open ~ #right-tab,
    #right-tab.panel-open {
      transform: translateY(-50%) translateX(calc(-1 * var(--right-panel-w)));
    }

    /* Right panel inner layout */
    .right-panel-header {
      padding: 20px 16px 12px;
      border-bottom: 1px solid var(--glass-border);
      display: flex;
      align-items: center;
      justify-content: space-between;
    }
    .right-panel-title {
      font-size: 11px;
      font-weight: 600;
      letter-spacing: 0.12em;
      text-transform: uppercase;
      color: rgba(255,255,255,0.45);
    }
    .right-panel-close {
      width: 28px; height: 28px;
      display: flex;
      align-items: center;
      justify-content: center;
      background: none;
      border: none;
      cursor: pointer;
      color: rgba(255,255,255,0.35);
      border-radius: 6px;
      transition: color 0.18s, background 0.18s;
    }
    .right-panel-close:hover { color: var(--brand-white); background: rgba(255,255,255,0.08); }
    .right-panel-close svg {
      width: 16px; height: 16px;
      stroke: currentColor;
      fill: none;
      stroke-width: 2;
      stroke-linecap: round;
    }

    #design-gallery {
      flex: 1;
      overflow-y: auto;
      padding: 12px;
      display: flex;
      flex-direction: column;
      gap: 8px;
      -webkit-overflow-scrolling: touch;
    }
    #design-gallery::-webkit-scrollbar { width: 0; }

    .design-thumb {
      width: 100%;
      aspect-ratio: 1;
      border-radius: var(--radius-sm);
      border: 1.5px solid var(--glass-border);
      background: var(--glass-bg);
      overflow: hidden;
      cursor: pointer;
      position: relative;
      transition: border-color 0.2s, transform 0.15s;
      flex-shrink: 0;
    }
    .design-thumb:hover { border-color: rgba(255,255,255,0.28); transform: scale(0.97); }
    .design-thumb.active {
      border-color: var(--brand-purple);
      box-shadow: 0 0 0 1px var(--brand-purple);
    }
    .design-thumb img {
      width: 100%; height: 100%;
      object-fit: cover;
      display: block;
    }
    /* Placeholder when no image — shows color block + index */
    .design-thumb .thumb-placeholder {
      width: 100%; height: 100%;
      display: flex;
      align-items: center;
      justify-content: center;
      font-size: 11px;
      font-weight: 600;
      letter-spacing: 0.08em;
      color: rgba(255,255,255,0.25);
      background: rgba(255,255,255,0.04);
    }
    .design-thumb-label {
      position: absolute;
      bottom: 0; left: 0; right: 0;
      padding: 6px 8px;
      font-size: 10px;
      font-weight: 500;
      color: rgba(255,255,255,0.55);
      background: linear-gradient(to top, rgba(8,8,8,0.8), transparent);
    }

    /* ─── CHATBOT + STRIP WRAPPER ────────────────────────────── */
    /* Both anchored bottom-left in a flex column.
       Strip is always above the chat frame — no JS repositioning needed. */
    #bottom-stack {
      position: fixed;
      bottom: 24px; left: 20px;
      width: min(380px, calc(100vw - 40px));
      display: flex;
      flex-direction: column;
      gap: 8px;
      z-index: 25;
      pointer-events: none;
    }
    #bottom-stack > * { pointer-events: auto; }

    /* ─── CHATBOT FRAME (BLOQUE 1) ───────────────────────────── */
    #chatbot {
      width: 100%;
      display: flex;
      flex-direction: column;
      gap: 0;
    }

    /* Unified glass frame */
    #chat-frame {
      background: var(--glass-bg);
      border: 1px solid var(--glass-border);
      backdrop-filter: var(--glass-blur);
      -webkit-backdrop-filter: var(--glass-blur);
      border-radius: var(--radius-md);
      overflow: hidden;
      transition: max-height 0.35s cubic-bezier(0.4,0,0.2,1), opacity 0.25s ease;
      max-height: 0;
      opacity: 0;
    }
    #chat-frame.visible {
      max-height: 170px;
      opacity: 1;
    }

    #chat-response {
      padding: 14px 16px 12px;
      font-size: 14px;
      line-height: 20px;
      color: rgba(255,255,255,0.82);
      min-height: 52px;
      /* Exactly 3 lines of text (3 × 20px line-height) + vertical padding.
         Using a fixed px line-height (not a unitless multiplier) so the
         line count is identical across browsers/fonts — unitless values
         can be rounded slightly differently depending on font metrics.
         JS keeps scrollTop pinned to the bottom as new text is typed,
         so the newest line is always visible; user can scroll up to
         reread earlier lines. */
      max-height: 86px;
      overflow-y: auto;
      -webkit-overflow-scrolling: touch;
      scrollbar-width: thin;
    }
    #chat-response::-webkit-scrollbar { width: 3px; }
    #chat-response::-webkit-scrollbar-track { background: transparent; }
    #chat-response::-webkit-scrollbar-thumb { background: rgba(255,255,255,0.15); border-radius: 3px; }
    #chat-response.loading { color: rgba(255,255,255,0.3); font-style: italic; }

    /* Thin separator inside the frame */
    #chat-separator {
      height: 1px;
      background: var(--glass-border);
      margin: 0 16px;
    }

    .chat-input-row {
      display: flex;
      gap: 0;
      align-items: center;
      padding: 10px 12px;
    }

    .chat-input {
      flex: 1;
      background: none;
      border: none;
      padding: 4px 8px;
      color: var(--brand-white);
      font-family: var(--font-body);
      font-size: 14px;
      outline: none;
    }
    .chat-input::placeholder { color: rgba(255,255,255,0.28); }

    /* Standalone input row when frame is collapsed (first load) */
    #chat-input-standalone {
      display: flex;
      gap: 8px;
      align-items: center;
      margin-top: 8px;
    }
    #chat-input-standalone.hidden {
      display: none;
    }

    .chat-input-pill {
      flex: 1;
      background: var(--glass-bg-mid);
      border: 1px solid var(--glass-border);
      backdrop-filter: var(--glass-blur);
      -webkit-backdrop-filter: var(--glass-blur);
      border-radius: 40px;
      padding: 11px 18px;
      color: var(--brand-white);
      font-family: var(--font-body);
      font-size: 14px;
      outline: none;
      transition: border-color 0.2s, box-shadow 0.2s;
    }
    .chat-input-pill::placeholder { color: rgba(255,255,255,0.28); }
    .chat-input-pill:focus {
      border-color: rgba(71,29,84,0.6);
      box-shadow: 0 0 0 3px rgba(71,29,84,0.12);
    }

    .chat-send {
      flex-shrink: 0;
      width: 42px; height: 42px;
      display: flex;
      align-items: center;
      justify-content: center;
      background: var(--brand-purple);
      border: none;
      border-radius: 50%;
      cursor: pointer;
      transition: transform 0.15s, box-shadow 0.2s;
    }
    .chat-send:hover { box-shadow: var(--neon-pulse); }
    .chat-send:active { transform: scale(0.94); }
    .chat-send svg {
      width: 18px; height: 18px;
      stroke: #fff;
      fill: none;
      stroke-width: 2;
      stroke-linecap: round;
      stroke-linejoin: round;
      transform: translateX(1px);
    }

    /* ─── BLOQUE 7A — THUMBNAIL STRIP ───────────────────────── */
    #thumb-strip-wrap {
      width: 100%;
      pointer-events: auto;
    }

    #thumb-strip {
      display: flex;
      gap: 8px;
      overflow-x: auto;
      overflow-y: hidden;
      scroll-snap-type: x mandatory;
      -webkit-overflow-scrolling: touch;
      padding: 8px 4px 4px;
      /* Fade edges */
      -webkit-mask-image: linear-gradient(to right, transparent 0%, black 6%, black 94%, transparent 100%);
      mask-image: linear-gradient(to right, transparent 0%, black 6%, black 94%, transparent 100%);
    }
    #thumb-strip::-webkit-scrollbar { display: none; }

    .strip-thumb {
      flex-shrink: 0;
      width: 64px;
      height: 64px;
      border-radius: var(--radius-sm);
      border: 1.5px solid var(--glass-border);
      background: var(--glass-bg);
      overflow: hidden;
      cursor: pointer;
      scroll-snap-align: start;
      transition: border-color 0.18s, transform 0.15s;
      position: relative;
    }
    .strip-thumb:hover  { border-color: rgba(255,255,255,0.3); transform: scale(1.04); }
    .strip-thumb.active { border-color: var(--brand-purple); box-shadow: 0 0 0 1px var(--brand-purple); }
    .strip-thumb img {
      width: 100%; height: 100%;
      object-fit: cover;
      display: block;
      pointer-events: none;
    }
    .strip-thumb .strip-placeholder {
      width: 100%; height: 100%;
      display: flex;
      align-items: center;
      justify-content: center;
      font-size: 9px;
      font-weight: 600;
      letter-spacing: 0.06em;
      color: rgba(255,255,255,0.22);
      text-transform: uppercase;
      background: rgba(255,255,255,0.03);
    }

    /* ─── BLOQUE 7B — LIGHTBOX ───────────────────────────────── */
    #lightbox {
      position: fixed;
      inset: 0;
      z-index: 80;
      background: rgba(0,0,0,0);
      backdrop-filter: none;
      -webkit-backdrop-filter: none;
      display: flex;
      align-items: center;
      justify-content: center;
      pointer-events: none;
      transition: background 0.28s ease, backdrop-filter 0.28s ease;
    }
    #lightbox.active {
      background: rgba(0,0,0,0.85);
      backdrop-filter: blur(12px) saturate(120%);
      -webkit-backdrop-filter: blur(12px) saturate(120%);
      pointer-events: auto;
    }

    #lightbox-track-wrap {
      width: 100%;
      height: 100%;
      overflow: hidden;
      display: flex;
      align-items: center;
      position: relative;
    }

    #lightbox-track {
      display: flex;
      align-items: center;
      height: 100%;
      will-change: transform;
    }
    #lightbox-track.snapping {
      transition: transform 0.32s cubic-bezier(0.25, 0.46, 0.45, 0.94);
    }

    .lb-slide {
      flex-shrink: 0;
      width: 100vw;
      height: 100%;
      display: flex;
      align-items: center;
      justify-content: center;
      padding: 72px 24px 60px;
    }

    .lb-slide img {
      max-width: 100%;
      max-height: 100%;
      object-fit: contain;
      border-radius: var(--radius-md);
      user-select: none;
      pointer-events: none;
      display: block;
      box-shadow: 0 24px 60px rgba(0,0,0,0.6);
    }

    .lb-slide .lb-placeholder {
      width: min(320px, 80vw);
      height: min(320px, 80vw);
      border-radius: var(--radius-md);
      background: var(--glass-bg-mid);
      border: 1px solid var(--glass-border);
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      gap: 12px;
      color: rgba(255,255,255,0.25);
      font-size: 13px;
    }
    .lb-placeholder-icon {
      width: 48px; height: 48px;
      stroke: rgba(255,255,255,0.15);
      fill: none;
      stroke-width: 1.2;
      stroke-linecap: round;
      stroke-linejoin: round;
    }

    /* Close button — always visible when lightbox is active */
    #lb-close {
      position: fixed;
      top: 20px; right: 20px;
      z-index: 82;
      width: 44px; height: 44px;
      display: flex;
      align-items: center;
      justify-content: center;
      background: rgba(0,0,0,0.55);
      border: 1px solid rgba(255,255,255,0.18);
      border-radius: 50%;
      cursor: pointer;
      opacity: 0;
      pointer-events: none;
      transition: opacity 0.22s ease, background 0.18s;
    }
    #lb-close.active {
      opacity: 1;
      pointer-events: auto;
    }
    #lb-close:hover { background: rgba(0,0,0,0.8); }
    #lb-close svg {
      width: 20px; height: 20px;
      stroke: #fff;
      fill: none;
      stroke-width: 2.2;
      stroke-linecap: round;
    }

    /* Dot indicator */
    #lb-dots {
      position: fixed;
      bottom: 28px; left: 50%;
      transform: translateX(-50%);
      z-index: 82;
      display: flex;
      gap: 6px;
      pointer-events: none;
      opacity: 0;
      transition: opacity 0.22s ease;
    }
    #lb-dots.active { opacity: 1; }

    .lb-dot {
      width: 6px; height: 6px;
      border-radius: 50%;
      background: rgba(255,255,255,0.3);
      transition: background 0.2s, transform 0.2s;
    }
    .lb-dot.active {
      background: var(--brand-white);
      transform: scale(1.35);
    }

    /* Caption */
    #lb-caption {
      position: fixed;
      bottom: 52px; left: 50%;
      transform: translateX(-50%);
      z-index: 82;
      font-size: 12px;
      letter-spacing: 0.05em;
      color: rgba(255,255,255,0.45);
      white-space: nowrap;
      pointer-events: none;
      opacity: 0;
      transition: opacity 0.22s ease;
    }
    #lb-caption.active { opacity: 1; }

    /* Typing cursor for typewriter effect */
    .tw-cursor {
      display: inline-block;
      width: 2px; height: 14px;
      background: rgba(255,255,255,0.6);
      margin-left: 2px;
      vertical-align: middle;
      animation: blink 0.9s step-end infinite;
    }
    @keyframes blink { 0%,100%{opacity:1} 50%{opacity:0} }

    /* ─── DRAG HINT ───────────────────────────────────────────── */
    #drag-hint {
      position: absolute;
      top: 50%; left: 50%;
      transform: translate(-50%, -50%);
      display: flex;
      align-items: center;
      gap: 8px;
      background: var(--glass-bg);
      border: 1px solid var(--glass-border);
      backdrop-filter: var(--glass-blur);
      -webkit-backdrop-filter: var(--glass-blur);
      border-radius: 40px;
      padding: 10px 18px;
      font-size: 13px;
      color: rgba(255,255,255,0.45);
      pointer-events: none;
      transition: opacity 0.5s ease;
      opacity: 0;
    }
    #drag-hint.visible { opacity: 1; }
    #drag-hint.fade    { opacity: 0; }
    #drag-hint svg {
      width: 16px; height: 16px;
      stroke: rgba(255,255,255,0.4);
      fill: none;
      stroke-width: 1.8;
      stroke-linecap: round;
      stroke-linejoin: round;
    }

    /* ─── BRAND LOADER ────────────────────────────────────────── */
    #brand-loader {
      position: fixed;
      inset: 0;
      z-index: 50;
      background: var(--brand-black);
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      padding: 6vh 8vw;
      transition: opacity 0.6s ease;
    }
    #brand-loader.hidden { opacity: 0; pointer-events: none; }

    /* Logo takes up almost the full canvas — scales with viewport, never overflows */
    .loader-logo {
      flex: 1 1 auto;
      min-height: 0;
      width: 100%;
      max-width: 640px;
      max-height: 72vh;
      height: auto;
      object-fit: contain;
    }

    /* Bar + label block — pinned below the logo, tightly grouped */
    .loader-bottom {
      flex-shrink: 0;
      display: flex;
      flex-direction: column;
      align-items: center;
      gap: 10px;
      margin-top: 32px;
      width: 100%;
    }
    .loader-bar-track {
      width: min(280px, 70vw);
      height: 2px;
      background: rgba(255,255,255,0.1);
      border-radius: 2px;
      overflow: hidden;
    }
    .loader-bar-fill {
      height: 100%;
      width: 0%;
      background: var(--brand-purple);
      box-shadow: 0 0 8px rgba(71,29,84,0.7);
      border-radius: 2px;
      transition: width 0.25s ease;
    }
    .loader-label {
      font-size: 11px;
      letter-spacing: 0.14em;
      color: rgba(255,255,255,0.25);
      text-transform: uppercase;
    }

    /* ─── LANDSCAPE LOCK ─────────────────────────────────────── */
    #landscape-lock {
      display: none;
      position: fixed;
      inset: 0;
      z-index: 999;
      background: var(--brand-black);
      flex-direction: column;
      align-items: center;
      justify-content: center;
      gap: 28px;
      text-align: center;
      padding: 40px;
    }
    #landscape-lock.active { display: flex; }
    .lock-icon {
      width: 52px; height: 52px;
      stroke: var(--brand-purple);
      fill: none;
      stroke-width: 1.4;
      stroke-linecap: round;
      stroke-linejoin: round;
      animation: tilt 1.8s ease-in-out infinite;
      filter: drop-shadow(0 0 10px rgba(71,29,84,0.6));
    }
    @keyframes tilt {
      0%, 100% { transform: rotate(0deg); }
      40%       { transform: rotate(-90deg); }
      60%       { transform: rotate(-90deg); }
    }
    .lock-title {
      font-family: var(--font-display);
      font-size: clamp(20px, 5vw, 30px);
      letter-spacing: 0.1em;
      text-transform: uppercase;
      color: var(--brand-white);
      line-height: 1.15;
    }
    .lock-title span { color: var(--brand-purple); }
    .lock-sub {
      font-size: 14px;
      color: rgba(255,255,255,0.38);
      line-height: 1.6;
      max-width: 260px;
    }

    /* ─── TOAST ───────────────────────────────────────────────── */
    #toast {
      position: fixed;
      bottom: 230px; left: 50%;
      transform: translateX(-50%) translateY(12px);
      background: rgba(255,255,255,0.92);
      color: #000;
      font-size: 13px;
      font-weight: 600;
      padding: 8px 20px;
      border-radius: 40px;
      white-space: nowrap;
      pointer-events: none;
      opacity: 0;
      z-index: 90;
      transition: opacity 0.25s ease, transform 0.25s ease;
    }
    #toast.show { opacity: 1; transform: translateX(-50%) translateY(0); }

    /* ─── BAG PANEL + CHECKOUT FORM PANEL ────────────────────────
       Full-screen glass overlays. Both share the same header/footer
       treatment so Checkout feels like a continuation of the Bag,
       not a different screen. */
    #bag-panel, #checkout-form-panel {
      position: fixed;
      inset: 0;
      z-index: 60;
      display: none;
      flex-direction: column;
      background: rgba(8,8,8,0.82);
      backdrop-filter: blur(28px) saturate(140%);
      -webkit-backdrop-filter: blur(28px) saturate(140%);
    }
    #bag-panel.open {
      display: flex;
      opacity: 0;
      transition: opacity 1s ease;
    }
    #bag-panel.open.bag-fade-in { opacity: 1; }
    #checkout-form-panel.open { display: flex; }

    .bag-panel-header {
      flex-shrink: 0;
      display: flex;
      align-items: center;
      justify-content: space-between;
      padding: 20px 20px 16px;
      border-bottom: 1px solid var(--glass-border);
    }
    .bag-panel-title {
      font-family: var(--font-display);
      font-size: 20px;
      letter-spacing: 0.03em;
      color: var(--brand-white);
    }
    .bag-panel-close {
      width: 36px; height: 36px;
      display: flex;
      align-items: center;
      justify-content: center;
      background: var(--glass-bg-mid);
      border: 1px solid var(--glass-border);
      border-radius: var(--radius-sm);
      color: var(--brand-white);
      cursor: pointer;
    }
    .bag-panel-close svg {
      width: 18px; height: 18px;
      stroke: currentColor; fill: none;
      stroke-width: 2; stroke-linecap: round;
    }

    /* Scrollable item list — the only part of the panel that scrolls.
       Header and footer (buttons) stay fixed outside it, per Charlie's spec. */
    #bag-items-scroll, .checkout-form-scroll {
      flex: 1;
      overflow-y: auto;
      -webkit-overflow-scrolling: touch;
      padding: 16px 20px;
    }

    .bag-empty {
      padding: 60px 20px;
      text-align: center;
      color: rgba(255,255,255,0.4);
      font-size: 14px;
      line-height: 1.6;
    }

    .bag-item {
      display: flex;
      gap: 14px;
      padding: 16px 0;
      border-bottom: 1px solid var(--glass-border);
    }
    .bag-item-thumb {
      width: 72px; height: 72px;
      flex-shrink: 0;
      border-radius: var(--radius-sm);
      overflow: hidden;
      background: rgba(255,255,255,0.05);
      border: 1px solid var(--glass-border);
    }
    .bag-item-thumb img {
      width: 100%; height: 100%;
      object-fit: cover;
    }
    .bag-item-thumb-placeholder {
      /* No image yet for this product — just a plain empty glass box,
         same fixed size as a real thumbnail (inherited from
         .bag-item-thumb above). No letter/initial shown here on purpose. */
      display: flex;
      align-items: center;
      justify-content: center;
    }
    .bag-item-info {
      flex: 1;
      min-width: 0;
      display: flex;
      flex-direction: column;
      gap: 6px;
    }
    .bag-item-name {
      font-size: 14px;
      font-weight: 600;
      color: var(--brand-white);
    }
    .bag-item-price {
      font-size: 13px;
      color: rgba(255,255,255,0.55);
    }
    .bag-item-sizes {
      display: flex;
      gap: 6px;
      margin-top: 2px;
    }
    .bag-size-btn {
      width: 32px; height: 32px;
      display: flex;
      align-items: center;
      justify-content: center;
      background: var(--glass-bg-mid);
      border: 1px solid var(--glass-border);
      border-radius: 6px;
      color: rgba(255,255,255,0.7);
      font-family: var(--font-body);
      font-size: 12px;
      font-weight: 600;
      cursor: pointer;
      transition: background 0.15s, border-color 0.15s, color 0.15s;
    }
    .bag-size-btn.active {
      background: var(--brand-purple);
      border-color: var(--brand-purple);
      color: var(--brand-white);
    }
    .bag-size-warn {
      font-size: 11px;
      color: #e8a33d;
    }
    .bag-item-qty {
      display: flex;
      align-items: center;
      gap: 10px;
      margin-top: 2px;
    }
    .bag-item-qty button {
      width: 26px; height: 26px;
      display: flex;
      align-items: center;
      justify-content: center;
      background: var(--glass-bg-mid);
      border: 1px solid var(--glass-border);
      border-radius: 6px;
      color: var(--brand-white);
      font-size: 15px;
      line-height: 1;
      cursor: pointer;
    }
    .bag-item-qty span {
      min-width: 16px;
      text-align: center;
      font-size: 13px;
      color: var(--brand-white);
    }
    .bag-item-remove {
      flex-shrink: 0;
      width: 32px; height: 32px;
      align-self: flex-start;
      display: flex;
      align-items: center;
      justify-content: center;
      background: none;
      border: none;
      color: rgba(255,255,255,0.35);
      cursor: pointer;
    }
    .bag-item-remove:hover { color: #e05a5a; }
    .bag-item-remove svg {
      width: 17px; height: 17px;
      stroke: currentColor; fill: none;
      stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round;
    }

    /* Footer — always outside the scroll area */
    .bag-panel-footer {
      flex-shrink: 0;
      padding: 16px 20px 22px;
      border-top: 1px solid var(--glass-border);
      background: rgba(8,8,8,0.4);
    }
    .bag-total-row {
      display: flex;
      justify-content: space-between;
      align-items: baseline;
      margin-bottom: 14px;
      font-family: var(--font-body);
      color: var(--brand-white);
    }
    .bag-total-row span:first-child {
      font-size: 12px;
      text-transform: uppercase;
      letter-spacing: 0.1em;
      color: rgba(255,255,255,0.45);
    }
    .bag-total-row span:last-child {
      font-size: 20px;
      font-weight: 600;
    }
    .bag-panel-actions {
      display: flex;
      gap: 10px;
    }
    .bag-return-btn, .bag-checkout-btn {
      flex: 1;
      padding: 14px;
      border-radius: var(--radius-sm);
      font-family: var(--font-body);
      font-size: 14px;
      font-weight: 600;
      cursor: pointer;
      transition: background 0.2s, opacity 0.2s;
    }
    .bag-return-btn {
      background: var(--glass-bg-mid);
      border: 1px solid var(--glass-border);
      color: var(--brand-white);
    }
    .bag-return-btn:hover { background: rgba(255,255,255,0.13); }
    .bag-checkout-btn {
      background: var(--brand-purple);
      border: 1px solid var(--brand-purple);
      color: var(--brand-white);
    }
    .bag-checkout-btn:hover { box-shadow: var(--neon-pulse); }
    .bag-checkout-btn:disabled {
      opacity: 0.35;
      cursor: not-allowed;
      box-shadow: none;
    }

    /* ─── Checkout form fields ────────────────────────────────── */
    .checkout-section { margin-bottom: 24px; }
    .checkout-section-label {
      font-size: 11px;
      font-weight: 600;
      letter-spacing: 0.12em;
      text-transform: uppercase;
      color: rgba(255,255,255,0.45);
      margin-bottom: 10px;
    }
    .checkout-input {
      width: 100%;
      background: var(--glass-bg-mid);
      border: 1px solid var(--glass-border);
      border-radius: var(--radius-sm);
      padding: 13px 14px;
      color: var(--brand-white);
      font-family: var(--font-body);
      font-size: 14px;
      margin-bottom: 10px;
    }
    .checkout-input::placeholder { color: rgba(255,255,255,0.35); }
    .checkout-input:focus {
      outline: none;
      border-color: var(--brand-purple);
    }
    .checkout-input-row {
      display: flex;
      gap: 10px;
    }
    .checkout-input-row .checkout-input { flex: 1; }

    .card-element-placeholder {
      display: flex;
      align-items: center;
      gap: 10px;
      background: var(--glass-bg-mid);
      border: 1px dashed var(--glass-border);
      border-radius: var(--radius-sm);
      padding: 16px 14px;
      color: rgba(255,255,255,0.4);
      font-family: var(--font-body);
      font-size: 13px;
    }
    .card-element-placeholder svg {
      width: 22px; height: 18px;
      flex-shrink: 0;
      stroke: rgba(255,255,255,0.4);
      fill: none;
      stroke-width: 1.6;
    }

    .checkout-summary-row {
      display: flex;
      justify-content: space-between;
      padding-top: 16px;
      margin-top: 4px;
      border-top: 1px solid var(--glass-border);
      font-family: var(--font-body);
      color: var(--brand-white);
      font-size: 15px;
      font-weight: 600;
    }

    /* ─── ABOUT PANEL ─────────────────────────────────────────── */
    #about-panel {
      position: fixed;
      inset: 0;
      z-index: 60;
      display: none;
      flex-direction: column;
      background: rgba(8,8,8,0.82);
      backdrop-filter: blur(28px) saturate(140%);
      -webkit-backdrop-filter: blur(28px) saturate(140%);
    }
    #about-panel.open { display: flex; }

    .about-content {
      flex: 1;
      overflow-y: auto;
      -webkit-overflow-scrolling: touch;
      padding: 8px 20px 32px;
    }
    .about-brand-line {
      font-family: var(--font-display);
      font-size: 26px;
      letter-spacing: 0.04em;
      color: var(--brand-white);
      margin-top: 12px;
    }
    .about-tagline {
      font-family: var(--font-body);
      font-size: 13px;
      color: rgba(255,255,255,0.5);
      margin-bottom: 22px;
    }
    .about-content p {
      font-family: var(--font-body);
      font-size: 14px;
      line-height: 1.7;
      color: rgba(255,255,255,0.85);
      margin-bottom: 16px;
    }
    .about-divider {
      height: 1px;
      background: var(--glass-border);
      margin: 8px 0 20px;
    }
    .about-email-link {
      display: inline-block;
      margin-top: 4px;
      font-family: var(--font-body);
      font-size: 14px;
      font-weight: 600;
      color: var(--brand-white);
      text-decoration: underline;
      text-decoration-color: var(--brand-purple);
      text-underline-offset: 3px;
    }
    
    /* ═══════════════════════════════════════════════════════════════
   FIX: Chat inputs must allow text selection despite global
   user-select: none (store-core.js screenshot protection).
   Also ensures iOS Safari allows typing even when Unity WebGL
   is running in the background.
═══════════════════════════════════════════════════════════════ */
.chat-input,
.chat-input-pill,
.checkout-input {
  -webkit-user-select: text !important;
  user-select: text !important;
  -webkit-touch-callout: default !important;
  touch-action: manipulation;
  -webkit-appearance: none;
  appearance: none;
  caret-color: #F5F5F5;
}

/* Explicit z-index overrides — these beat the inline critical CSS
   because they have the same specificity and load later when
   style.css successfully downloads. */
#drag-touchpad { z-index: 10; }
#bottom-stack  { z-index: 25; }
#ui-layer      { z-index: 20; }