:root {
  --c-bg: #000; --c-bg1: #09090b; --c-bg2: #0f0f0f; --c-bg3: #111; --c-bg4: #18181b;
  --c-border: #27272a; --c-border2: #1a1a1a;
  --c-muted1: #3f3f46; --c-muted2: #52525b; --c-muted3: #71717a; --c-muted4: #a1a1aa;
  --c-white: #fff; --c-text: #e4e4e7;
  --c-green: #4ade80; --c-red: #f87171; --c-red-dim: #ef4444;
}
    *, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
    img {
      -webkit-user-drag: none; user-drag: none;
      -webkit-user-select: none; user-select: none;
      pointer-events: none;
    }

    html { scrollbar-width: none; }
    html::-webkit-scrollbar { display: none; }
    body {
      font-family: 'Inter', sans-serif;
      background: #000;
      color: #fff;
      overflow-x: hidden;
      scrollbar-width: none;
    }
    body::-webkit-scrollbar { display: none; }

    /* Hero */
    #hero {
      height: 100vh;
      display: flex;
      align-items: center;
      justify-content: center;
      position: relative;
    }

    #logoContainer {
      text-align: center;
      transition: opacity 0.5s ease;
    }

    #logoContainer img { display: none !important; }

    #logo3DCanvas {
      display: block;
      margin: 0 auto 1.5rem;
      width: min(95vw, 600px);
      height: min(28vw, 180px);
      cursor: grab;
    }
    #logo3DCanvas:active { cursor: grabbing; }

    #logoContainer p {
      color: #71717a;
      letter-spacing: 0.2em;
      font-size: 0.875rem;
    }
    #heroCountdown { text-align: center; margin-top: 0.25rem; }
    #heroCountdownLabel { color: #71717a; letter-spacing: 0.2em; font-size: 0.875rem; }
    #heroCountdownTimer {
      font-size: 1.5rem; font-weight: 800; letter-spacing: 0.12em;
      font-variant-numeric: tabular-nums; color: #fff; margin-top: 0.4rem;
    }

    .hero-fade {
      position: absolute;
      bottom: 0;
      width: 100%;
      height: 8rem;
      background: linear-gradient(to bottom, transparent, #000);
    }

    /* Shop Section */
    #shopSection {
      padding: 6rem 1.5rem;
      opacity: 1;
      transform: none;
    }

    #shopSection.visible { opacity: 1; transform: translateY(0); }

    .shop-inner { max-width: 72rem; margin: 0 auto; }

    .shop-toolbar {
      display: flex;
      flex-direction: column;
      gap: 1.25rem;
      margin-bottom: 3rem;
    }

    @media (min-width: 768px) {
      .shop-toolbar { flex-direction: row; align-items: center; justify-content: space-between; }
    }

    .shop-toolbar h2 { font-size: 1.875rem; font-weight: 800; white-space: nowrap; }

    @media (min-width: 768px) { .shop-toolbar h2 { font-size: 2.25rem; } }

    .toolbar-controls { display: flex; flex-wrap: wrap; align-items: center; gap: 0.75rem; }

    .search-wrap { position: relative; display: flex; align-items: center; }

    .search-wrap svg {
      position: absolute;
      left: 0.875rem;
      width: 1rem;
      height: 1rem;
      color: #71717a;
      pointer-events: none;
    }

    #searchInput {
      background: #0f0f0f;
      border: 1px solid #27272a;
      color: #fff;
      font-family: inherit;
      font-size: 0.875rem;
      padding: 0.5rem 1rem 0.5rem 2.5rem;
      border-radius: 0.75rem;
      outline: none;
      width: 200px;
      transition: border-color 0.2s ease, width 0.3s ease;
    }

    #searchInput::placeholder { color: #52525b; }
    #searchInput:focus { border-color: #52525b; width: 240px; }

    /* Category Dropdown */
    .filter-dropdown-wrap {
      position: relative;
      display: inline-block;
    }
    .filter-dropdown-btn {
      display: flex;
      align-items: center;
      gap: 0.6rem;
      background: #111;
      border: 1px solid #27272a;
      color: #fff;
      padding: 0.55rem 1rem;
      border-radius: 0.75rem;
      cursor: pointer;
      font-family: inherit;
      font-size: 0.8rem;
      font-weight: 700;
      letter-spacing: 0.05em;
      transition: border-color 0.15s ease;
      min-width: 10rem;
      justify-content: space-between;
    }
    .filter-dropdown-btn:hover { border-color: #52525b; }
    .filter-dropdown-btn.open { border-color: #52525b; border-bottom-left-radius: 0; border-bottom-right-radius: 0; }
    .filter-dropdown-btn .arrow {
      font-size: 0.6rem;
      color: #52525b;
      transition: transform 0.2s ease;
    }
    .filter-dropdown-btn.open .arrow { transform: rotate(180deg); }
    .filter-dropdown-menu {
      display: none;
      position: absolute;
      top: 100%;
      left: 0;
      min-width: 100%;
      background: #111;
      border: 1px solid #27272a;
      border-top: none;
      border-bottom-left-radius: 0.75rem;
      border-bottom-right-radius: 0.75rem;
      z-index: 20;
      overflow: hidden;
    }
    .filter-dropdown-menu.open { display: block; }
    .filter-dropdown-item {
      display: flex;
      align-items: center;
      justify-content: space-between;
      padding: 0.6rem 1rem;
      font-size: 0.78rem;
      font-weight: 600;
      color: #71717a;
      cursor: pointer;
      letter-spacing: 0.04em;
      transition: background 0.1s ease, color 0.1s ease;
      white-space: nowrap;
    }
    .filter-dropdown-item:hover { background: #1a1a1a; color: #fff; }
    .filter-dropdown-item.active { color: #fff; }
    .filter-dropdown-item .item-check {
      font-size: 0.6rem;
      opacity: 0;
    }
    .filter-dropdown-item.active .item-check { opacity: 1; }
    .filter-dropdown-item .item-count {
      font-size: 0.62rem;
      color: #3f3f46;
      margin-left: 0.75rem;
    }

    .result-count { font-size: 0.8rem; color: #52525b; margin-bottom: 1.5rem; letter-spacing: 0.05em; }

    /* Size Selector */
    .size-selector { display: flex; flex-wrap: wrap; gap: 0.3rem; margin: 0.6rem 0 0.5rem; }
    .size-btn {
      font-size: 0.62rem; font-weight: 800; letter-spacing: 0.04em;
      padding: 0.28rem 0.5rem; border-radius: 0.4rem;
      border: 1px solid #27272a; background: transparent; color: #71717a;
      cursor: pointer; font-family: inherit; transition: all 0.15s ease;
    }
    .size-btn:hover:not(.size-btn-out) { border-color: #71717a; color: #fff; }
    .size-btn.selected { border-color: #fff; background: #fff; color: #000; }
    .size-required-hint { font-size: 0.62rem; color: #ef4444; margin-bottom: 0.35rem; display: none; }
    .size-required-hint.shake { animation: po-hint-shake 0.35s ease; }

    /* Product Carousel */
    .product-carousel-wrap { position: relative; }

    .product-grid { display: grid; gap: 0.75rem; grid-template-columns: repeat(2, 1fr); }
    @media (min-width: 640px) { .product-grid { gap: 1.5rem; grid-template-columns: repeat(2, 1fr); } }
    @media (min-width: 768px) { .product-grid { grid-template-columns: repeat(3, 1fr); } }

    /* Pagination bar */
    .carousel-nav {
      display: flex; align-items: center; justify-content: center;
      gap: 1rem; margin-top: 2.5rem;
    }
    .carousel-btn {
      width: 2.5rem; height: 2.5rem;
      background: #0f0f0f; border: 1px solid #27272a; color: #71717a;
      border-radius: 0.6rem; cursor: pointer;
      display: flex; align-items: center; justify-content: center;
      transition: all 0.15s ease; font-size: 1rem; flex-shrink: 0;
    }
    .carousel-btn:hover:not(:disabled) { background: #1a1a1a; border-color: #52525b; color: #fff; }
    .carousel-btn:disabled { opacity: 0.2; cursor: default; }

    .carousel-dots { display: flex; align-items: center; gap: 0.4rem; }
    .carousel-dot {
      width: 0.35rem; height: 0.35rem; border-radius: 50%;
      background: #27272a; transition: all 0.2s ease; cursor: pointer;
    }
    .carousel-dot.active { background: #fff; width: 1.25rem; border-radius: 0.2rem; }

    .carousel-count {
      font-size: 0.65rem; font-weight: 700; color: #3f3f46;
      letter-spacing: 0.1em; min-width: 4rem; text-align: center;
    }

    .product {
      background: #09090b;
      border: 1px solid #27272a;
      border-radius: 1rem;
      overflow: hidden;
      transition: transform 0.2s ease, box-shadow 0.25s ease, border-color 0.25s ease;
      display: flex;
      flex-direction: column;
    }

    .product:hover { border-color: #71717a; transform: translateY(-2px); box-shadow: 0 0 0 2px rgba(255,255,255,0.12), 0 0 18px rgba(255,255,255,0.08); }
    .product.hidden { display: none; }

    .product-img {
      aspect-ratio: 1 / 1;
      background: #18181b;
      display: flex;
      align-items: center;
      justify-content: center;
      color: #52525b;
      font-size: 0.75rem;
      letter-spacing: 0.05em;
      position: relative;
      overflow: hidden;
    }

    .product-img img {
      width: 100%;
      height: 100%;
      object-fit: cover;
      display: block;
      transition: opacity 0.2s ease;
      image-rendering: -webkit-optimize-contrast;
      image-rendering: crisp-edges;
      filter: contrast(1.04) saturate(1.08) brightness(1.01);
    }

    /* Image carousel arrows */
    .img-arrow {
      position: absolute; top: 50%; transform: translateY(-50%);
      width: 1.75rem; height: 1.75rem; border-radius: 50%;
      background: rgba(0,0,0,0.6); border: 1px solid rgba(255,255,255,0.15);
      color: #fff; cursor: pointer; z-index: 3;
      display: flex; align-items: center; justify-content: center;
      font-size: 0.7rem; opacity: 0; transition: opacity 0.15s ease;
    }
    .img-arrow.left  { left: 0.5rem; }
    .img-arrow.right { right: 0.5rem; }
    .product:hover .img-arrow { opacity: 1; }
    .img-arrow:hover { background: rgba(0,0,0,0.85); }

    .product:hover .po-expand-hint { opacity: 1 !important; }

    /* Image dots */
    .img-dots {
      position: absolute; bottom: 0.5rem; left: 50%; transform: translateX(-50%);
      display: flex; gap: 0.3rem; z-index: 3;
      opacity: 0; transition: opacity 0.15s ease;
    }
    .product:hover .img-dots { opacity: 1; }
    .img-dot {
      width: 0.3rem; height: 0.3rem; border-radius: 50%;
      background: rgba(255,255,255,0.35); transition: background 0.15s;
    }
    .img-dot.active { background: #fff; }

    .product-badge {
      position: absolute;
      top: 0.75rem;
      left: 0.75rem;
      font-size: 0.65rem;
      font-weight: 700;
      letter-spacing: 0.08em;
      padding: 0.2rem 0.6rem;
      border-radius: 0.4rem;
      border: 1px solid rgba(255,255,255,0.2);
      backdrop-filter: blur(10px) saturate(160%);
      -webkit-backdrop-filter: blur(10px) saturate(160%);
      box-shadow: inset 0 1px 0 rgba(255,255,255,0.18), 0 2px 8px rgba(0,0,0,0.35);
      z-index: 2;
    }

    .product-body { padding: 1.5rem; display: flex; flex-direction: column; flex: 1; }
    .product-body h3 { font-weight: 600; margin-bottom: 0.5rem; font-size: 0.95rem; }
    .product-body p { color: #a1a1aa; font-size: 0.8rem; margin-bottom: 1rem; }

    .product-row { display: flex; justify-content: space-between; align-items: center; margin-top: auto; }
    .product-row span { font-weight: 800; }

    .addBtn {
      background: #fff;
      color: #000;
      border: none;
      padding: 0.5rem 1rem;
      border-radius: 0.75rem;
      font-size: 0.8rem;
      font-weight: 600;
      cursor: pointer;
      font-family: inherit;
      transition: background 0.15s ease;
    }

    .addBtn:hover { background: #e4e4e7; }
    .addBtn.viewBtn {
      background: #fff; color: #000;
      border: none;
    }
    .addBtn.viewBtn:hover { background: #e4e4e7; }
    .addBtn.coming-soon-btn {
      background: #18181b; color: #52525b;
      border: 1px solid #27272a; cursor: not-allowed;
      font-size: 0.65rem; letter-spacing: 0.08em;
    }
    .addBtn.preorder-btn {
      background: #fff; color: #000; border: none;
    }
    .addBtn.preorder-btn:hover { background: #e4e4e7; }

    /* Pre-order in product overlay */
    .po-preorder-btn { background: #fff !important; color: #000 !important; border: none !important; }
    .po-preorder-btn:hover:not(:disabled) { background: #e4e4e7 !important; transform: translateY(-1px); }
    .po-stock-note.preorder { color: #fff; }

    /* Pre-order badge in cart */
    .cart-preorder-badge {
      display: inline-block; font-size: 0.55rem; font-weight: 800;
      letter-spacing: 0.1em; color: #c4b5fd; background: #2e1065;
      border: 1px solid #4c1d95; border-radius: 0.25rem;
      padding: 0.1rem 0.35rem; vertical-align: middle; margin-left: 0.25rem;
    }

    /* Coming Soon overlay */
    .coming-soon-img { cursor: default !important; }
    /* Blur the image itself — nothing on top gets affected */
    .coming-soon-img img {
      filter: blur(7px) !important;
      transform: scale(1.08); /* prevent blurry white edges */
    }
    .coming-soon-overlay {
      position: absolute; inset: 0; z-index: 5;
      display: flex; align-items: center; justify-content: center;
      background: rgba(0,0,0,0.25);
      overflow: hidden;
    }
    .coming-soon-text {
      font-size: 0.68rem; font-weight: 800; letter-spacing: 0.18em;
      text-transform: uppercase; color: #fff;
      background: rgba(0,0,0,0.6);
      border: 1px solid rgba(255,255,255,0.18);
      border-radius: 0.45rem; padding: 0.45rem 1rem;
    }
    .addBtn.sold-out {
      background: #18181b; color: #52525b; border: 1px solid #27272a;
      cursor: not-allowed; pointer-events: none;
      font-size: 0.72rem; letter-spacing: 0.06em;
    }
    .addBtn.sold-out:hover { background: #18181b; }
    .size-btn-out {
      cursor: not-allowed;
      border-color: #1e1e1e;
      color: #2a2a2a;
      background: transparent;
      text-decoration: line-through;
      text-decoration-color: #3f3f46;
      pointer-events: none;
    }

    #noResults { display: none; text-align: center; padding: 5rem 0; color: #52525b; }
    #noResults p:first-child { font-size: 2rem; margin-bottom: 0.75rem; }
    #noResults p:last-child  { font-size: 0.9rem; }

    /* Vision */
    .vision-section {
      padding: 0;
      position: relative;
      overflow: hidden;
      border-top: 1px solid #0f0f0f;
      border-bottom: 1px solid #0f0f0f;
      line-height: 0;
    }
    .vision-wall-img {
      width: 100%;
      height: auto;
      display: block;
    }

    /* ── Scroll reveal ───────────────────────────────────── */
    .reveal {
      opacity: 0;
      transform: translateY(32px);
      transition: opacity 0.75s cubic-bezier(0.4, 0, 0.2, 1),
                  transform 0.75s cubic-bezier(0.4, 0, 0.2, 1);
    }
    .reveal.visible {
      opacity: 1;
      transform: translateY(0);
    }

    /* ── Marquee strip ───────────────────────────────────── */
    .marquee-strip {
      overflow: hidden;
      border-top: 1px solid #18181b;
      border-bottom: 1px solid #18181b;
      padding: 0.9rem 0;
      background: #030303;
      white-space: nowrap;
      user-select: none;
    }
    .marquee-track {
      display: inline-flex;
      white-space: nowrap;
      animation: marquee 28s linear infinite;
    }
    .marquee-track span {
      white-space: nowrap;
      flex-shrink: 0;
      font-size: 0.68rem;
      font-weight: 800;
      letter-spacing: 0.22em;
      text-transform: uppercase;
      color: #3f3f46;
      padding-right: 0;
      transition: color 0.2s;
    }
    .marquee-strip:hover .marquee-track span { color: #71717a; }
    @keyframes marquee {
      0%   { transform: translateX(0); }
      100% { transform: translateX(-25%); }
    }

    /* Product image zoom on hover */
    .product-img img {
      transition: transform 0.5s cubic-bezier(0.4, 0, 0.2, 1);
    }
    .product:hover .product-img img {
      transform: scale(1.06);
    }

    /* Site Footer */
    .site-footer {
      background: #030303;
      border-top: 1px solid #0f0f0f;
      padding: 5rem 2rem 2.5rem;
    }
    .site-footer-inner {
      max-width: 72rem; margin: 0 auto;
      display: grid;
      grid-template-columns: 1.5fr 1fr 1fr 1.25fr;
      gap: 3rem;
      padding-bottom: 3.5rem;
      border-bottom: 1px solid #0f0f0f;
    }
    @media (max-width: 900px) {
      .site-footer-inner { grid-template-columns: 1fr 1fr; gap: 2.5rem; }
    }
    @media (max-width: 560px) {
      .site-footer-inner { grid-template-columns: 1fr; }
    }

    .footer-brand-name {
      font-size: 1rem; font-weight: 900; letter-spacing: 0.08em;
      text-transform: uppercase; color: #fff; margin-bottom: 0.875rem;
      display: flex; align-items: center; gap: 0.5rem;
    }
    .footer-brand-name span {
      display: inline-block; width: 0.4rem; height: 0.4rem;
      background: #fff; border-radius: 50%;
    }
    .footer-brand p {
      font-size: 0.78rem; color: #333; line-height: 1.75; max-width: 20rem;
    }
    .footer-brand-tag {
      display: inline-block; margin-top: 1.25rem;
      font-size: 0.58rem; font-weight: 700; letter-spacing: 0.14em;
      text-transform: uppercase; color: #222;
      border: 1px solid #1a1a1a; border-radius: 0.3rem;
      padding: 0.25rem 0.6rem;
    }

    .footer-col-title {
      font-size: 0.58rem; font-weight: 700; letter-spacing: 0.18em;
      text-transform: uppercase; color: #2a2a2a;
      margin-bottom: 1.25rem;
    }
    .footer-links { display: flex; flex-direction: column; gap: 0.75rem; }
    .footer-links a {
      font-size: 0.8rem; color: #444; text-decoration: none;
      transition: color 0.15s ease; width: fit-content;
    }
    .footer-links a:hover { color: #fff; }

    .footer-cta-block { display: flex; flex-direction: column; }
    .footer-cta-text {
      font-size: 0.78rem; color: #333; line-height: 1.7; margin-bottom: 1.25rem;
    }
    .footer-cta-link {
      display: inline-flex; align-items: center; justify-content: center; gap: 0.5rem;
      background: #fff; color: #000; font-size: 0.72rem; font-weight: 800;
      letter-spacing: 0.08em; text-transform: uppercase;
      padding: 0.75rem 1.25rem; border-radius: 0.6rem;
      text-decoration: none; transition: all 0.15s ease;
      margin-bottom: 0.875rem;
    }
    .footer-cta-link:hover { background: #e4e4e7; transform: translateY(-1px); }
    .footer-email-soft {
      font-size: 0.72rem; color: #2a2a2a; text-decoration: none;
      transition: color 0.15s; letter-spacing: 0.04em;
    }
    .footer-email-soft:hover { color: #777; }

    .footer-bottom {
      max-width: 72rem; margin: 2rem auto 0;
      display: flex; align-items: center; justify-content: space-between;
      flex-wrap: wrap; gap: 0.75rem;
    }
    .footer-bottom-left {
      font-size: 0.68rem; color: #1f1f1f;
      display: flex; align-items: center; gap: 0.5rem;
    }
    .footer-bottom-right {
      font-size: 0.68rem; color: #1a1a1a; letter-spacing: 0.06em; text-transform: uppercase;
    }

    /* Footer (legacy rule kept for safety) */
    footer {
      padding: 0;
    }

    /* Contact Section */
    #contactSection { background:#050505; border-top:1px solid #18181b; padding:6rem 1.5rem; }
    .contact-inner { max-width:72rem; margin:0 auto; }
    .contact-header { margin-bottom:3.5rem; }
    .contact-header h2 { font-size:clamp(1.75rem,4vw,2.5rem); font-weight:800; margin-bottom:0.5rem; }
    .contact-header p { color:#52525b; font-size:0.875rem; letter-spacing:0.05em; }
    .contact-grid { display:grid; grid-template-columns:1fr; gap:1.25rem; }
    @media (min-width:640px)  { .contact-grid { grid-template-columns:1fr 1fr; } }
    @media (min-width:1024px) { .contact-grid { grid-template-columns:1fr 1fr; } }
    .contact-card {
      background:#09090b; border:1px solid #18181b; border-radius:1.25rem;
      padding:1.75rem; display:flex; flex-direction:column; gap:1rem; transition:border-color 0.2s;
    }
    .contact-card:hover { border-color:#27272a; }
    .contact-card-icon {
      width:2.5rem; height:2.5rem; border-radius:0.65rem; background:#111;
      border:1px solid #27272a; display:flex; align-items:center; justify-content:center; font-size:1.1rem;
    }
    .contact-card h3 { font-size:0.95rem; font-weight:800; }
    .contact-card-body { display:flex; flex-direction:column; gap:0.65rem; flex:1; }
    .contact-card-body p { font-size:0.8rem; color:#71717a; line-height:1.7; }
    .contact-card-body p strong { color:#a1a1aa; font-weight:600; }
    .contact-divider { height:1px; background:#18181b; margin:0.25rem 0; }
    .contact-email-link {
      display:inline-flex; align-items:center; gap:0.4rem; color:#fff;
      font-size:0.8rem; font-weight:600; text-decoration:none;
      border-bottom:1px solid #27272a; padding-bottom:0.1rem; transition:border-color 0.2s,color 0.2s;
    }
    .contact-email-link:hover { border-color:#fff; color:#e4e4e7; }
    .contact-tag {
      display:inline-block; font-size:0.62rem; font-weight:700; letter-spacing:0.08em;
      text-transform:uppercase; padding:0.2rem 0.55rem; border-radius:0.35rem;
      background:#111; color:#52525b; border:1px solid #1f1f1f;
    }
    /* Top Nav Bar */
    #topNav {
      position: fixed;
      top: 0; left: 0; right: 0;
      height: 60px;
      background: rgba(0,0,0,0.0);
      backdrop-filter: blur(0px);
      -webkit-backdrop-filter: blur(0px);
      border-bottom: 1px solid transparent;
      display: flex;
      align-items: center;
      justify-content: space-between;
      padding: 0 1.5rem;
      z-index: 49;
      transition: background 0.4s ease, backdrop-filter 0.4s ease, border-color 0.4s ease;
      pointer-events: none;
    }
    #topNav.scrolled {
      background: rgba(0,0,0,0.88);
      backdrop-filter: blur(14px);
      -webkit-backdrop-filter: blur(14px);
      border-bottom: 1px solid rgba(255,255,255,0.07);
      pointer-events: all;
    }
    /* Always allow clicks on auth buttons and cart */
    #authNav, #cartStatus, #shopByBtn { pointer-events: all; }

    /* Nav Center Logo */
    #navLogo {
      position: absolute;
      left: 50%;
      transform: translateX(-50%);
      height: 70px;
      opacity: 0;
      transition: opacity 0.4s ease;
      pointer-events: none;
      display: flex;
      align-items: center;
    }
    #navLogo.visible { opacity: 1; }
    #navLogo img { height: 70px; }

    /* Auth Nav */
    #authNav { display: flex; gap: 0.625rem; z-index: 50; }

    .auth-btn {
      display: inline-block;
      padding: 0.6rem 1.1rem;
      border-radius: 0.75rem;
      font-size: 0.8rem;
      font-weight: 600;
      font-family: inherit;
      cursor: pointer;
      text-decoration: none;
      transition: box-shadow 0.15s ease, background 0.15s ease, color 0.15s ease;
      background: #fff;
      color: #000;
      border: 1px solid #fff;
    }

    .auth-btn-outline { background: transparent; color: #fff; border: 1px solid #3f3f46; }
    .auth-btn-outline:hover { border-color: #71717a; }

    @keyframes authGlow {
      0%   { box-shadow: 0 0 0px rgba(255,255,255,0); }
      40%  { box-shadow: 0 0 18px rgba(255,255,255,0.95); }
      100% { box-shadow: 0 0 0px rgba(255,255,255,0); }
    }

    .auth-btn.glow { animation: authGlow 0.5s ease forwards; }

    #profileBtn {
      display: none;
      align-items: center; gap: 0.45rem;
      padding: 0.5rem 1rem;
      border-radius: 0.75rem;
      font-size: 0.8rem; font-weight: 700;
      font-family: inherit; cursor: pointer;
      text-decoration: none;
      background: #111; color: #fff;
      border: 1px solid #27272a;
      transition: all 0.15s ease; letter-spacing: 0.03em;
    }
    #profileBtn:hover { border-color: #71717a; background: #18181b; }
    #profileBtn svg { flex-shrink: 0; }

    #shopNavBtn {
      display: flex; align-items: center; justify-content: center;
      padding: 0.5rem 0.65rem; border-radius: 0.75rem;
      background: #111; border: 1px solid #27272a; color: #a1a1aa;
      cursor: pointer; transition: border-color 0.15s, color 0.15s, background 0.15s;
    }
    #shopNavBtn:hover { border-color: #71717a; color: #fff; background: #18181b; }

    /* Nav Countdown */
    #navCountdown {
      display: none;
      align-items: center;
      gap: 0.5rem;
      font-size: 0.72rem;
      font-weight: 700;
      letter-spacing: 0.08em;
      color: #fff;
      opacity: 0;
      transition: opacity 0.3s ease;
      pointer-events: none;
      white-space: nowrap;
      margin-right: 0.5rem;
    }
    #navCountdown.active { display: flex; }
    #navCountdown.active.visible { opacity: 1; pointer-events: all; }
    #navCountdown .nav-drop-label {
      color: #71717a;
      letter-spacing: 0.12em;
      font-size: 0.65rem;
      text-transform: uppercase;
    }
    #navCountdown .nav-drop-timer {
      color: #fff;
      font-variant-numeric: tabular-nums;
    }

    /* Cart Badge */
    #cartStatus {
      background: #fff;
      color: #000;
      padding: 0.55rem 1.2rem;
      border-radius: 0.85rem;
      font-weight: 600;
      font-size: 0.875rem;
      cursor: pointer;
      transition: opacity 0.3s ease, transform 0.15s ease;
      z-index: 50;
      display: flex;
      align-items: center;
      gap: 0.5rem;
    }
    #cartStatus .cart-icon { font-size: 1rem; line-height: 1; }

    #cartStatus .divider { color: #a1a1aa; }
    #cartStatus.hidden-badge { opacity: 0; pointer-events: none; }

    /* Cart Drawer */
    /* Cart Drawer */
    #cartDrawer {
      position: fixed;
      top: 0; right: 0;
      height: 100%; width: 22rem;
      background: #0a0a0a;
      border-left: 1px solid #1a1a1a;
      transform: translateX(100%);
      transition: transform 0.35s cubic-bezier(0.4,0,0.2,1);
      z-index: 70;
      display: flex;
      flex-direction: column;
    }

    #cartDrawer.open { transform: translateX(0); }

    .drawer-header {
      padding: 1.25rem 1.5rem;
      display: flex; justify-content: space-between; align-items: center;
      border-bottom: 1px solid #1a1a1a;
      background: #0a0a0a;
    }
    .drawer-header-left { display: flex; align-items: center; gap: 0.875rem; }
    .drawer-header h3 { font-weight: 800; font-size: 0.95rem; letter-spacing: 0.06em; text-transform: uppercase; }
    .drawer-item-count {
      font-size: 0.62rem; font-weight: 700; background: #1a1a1a;
      color: #71717a; padding: 0.2rem 0.5rem; border-radius: 0.35rem;
      letter-spacing: 0.06em;
    }

    #removeAllBtn {
      font-size: 0.65rem; font-weight: 700; letter-spacing: 0.06em;
      color: #52525b; background: none; border: 1px solid #27272a;
      cursor: pointer; font-family: inherit; text-transform: uppercase;
      padding: 0.25rem 0.6rem; border-radius: 0.4rem;
      transition: all 0.15s ease; white-space: nowrap; flex-shrink: 0;
    }
    #removeAllBtn:hover { border-color: #f87171; color: #f87171; background: rgba(248,113,113,0.06); }
    #removeAllBtn.hidden { display: none; }

    .drawer-close {
      background: #1a1a1a; border: none; color: #71717a;
      width: 1.75rem; height: 1.75rem; border-radius: 0.4rem;
      font-size: 0.8rem; cursor: pointer; display: flex; align-items: center; justify-content: center;
      transition: all 0.15s ease;
    }
    .drawer-close:hover { background: #27272a; color: #fff; }

    #cartItems {
      padding: 1rem 1.25rem;
      flex: 1; overflow-y: auto;
      display: flex; flex-direction: column; gap: 0.5rem;
    }
    #cartItems::-webkit-scrollbar { width: 3px; }
    #cartItems::-webkit-scrollbar-track { background: transparent; }
    #cartItems::-webkit-scrollbar-thumb { background: #27272a; border-radius: 2px; }

    .cart-empty {
      flex: 1; display: flex; flex-direction: column;
      align-items: center; justify-content: center;
      gap: 0.5rem; color: #3f3f46; padding: 3rem 0;
    }
    .cart-empty-icon { font-size: 2rem; opacity: 0.4; }
    .cart-empty p { font-size: 0.78rem; letter-spacing: 0.04em; }

    .cart-item {
      display: flex; align-items: center; gap: 0.875rem;
      background: #111; border: 1px solid #1a1a1a;
      border-radius: 0.75rem; padding: 0.75rem 0.875rem;
      transition: border-color 0.15s ease;
    }
    .cart-item:hover { border-color: #27272a; }
    .cart-item-thumb {
      width: 2.75rem; height: 2.75rem; border-radius: 0.5rem;
      background: #1a1a1a; flex-shrink: 0; overflow: hidden;
      display: flex; align-items: center; justify-content: center;
      font-size: 0.5rem; color: #3f3f46;
    }
    .cart-item-thumb img { width: 100%; height: 100%; object-fit: cover; }
    .cart-item-info { flex: 1; min-width: 0; }
    .cart-item-name {
      font-size: 0.72rem; font-weight: 700; color: #fff;
      white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
      letter-spacing: 0.02em;
    }
    .cart-item-size {
      display: inline-flex; align-items: center; gap: 0.3rem;
      margin-top: 0.2rem;
      font-size: 0.6rem; font-weight: 800; letter-spacing: 0.08em;
      color: #71717a;
    }
    .cart-item-size-chip {
      background: #1e1e1e; border: 1px solid #2e2e2e;
      color: #fff; font-size: 0.6rem; font-weight: 800;
      letter-spacing: 0.06em; padding: 0.1rem 0.45rem;
      border-radius: 0.3rem;
    }
    .cart-item-color-chip {
      display: inline-block; width: 0.85rem; height: 0.85rem; border-radius: 50%;
      border: 1px solid rgba(255,255,255,0.2); vertical-align: middle; flex-shrink: 0;
    }
    .cart-item-color-row {
      display: flex; align-items: center; gap: 0.4rem; margin-top: 0.25rem;
    }
    .cart-item-color-dot {
      width: 0.75rem; height: 0.75rem; border-radius: 50%; flex-shrink: 0;
      border: 1px solid rgba(255,255,255,0.25);
    }
    .cart-item-color-name {
      font-size: 0.65rem; color: #a1a1aa; letter-spacing: 0.03em;
    }
    .cart-item-price { font-size: 0.68rem; color: #52525b; margin-top: 0.15rem; font-weight: 600; }
    .cart-item-right { display: flex; align-items: center; gap: 0.5rem; flex-shrink: 0; }
    .cart-item-qty {
      display: flex; align-items: center; gap: 0.3rem;
      background: #1a1a1a; border-radius: 0.4rem; padding: 0.2rem 0.1rem;
    }
    .qty-btn {
      width: 1.4rem; height: 1.4rem; border-radius: 0.3rem;
      background: none; border: none; color: #71717a;
      font-size: 0.9rem; cursor: pointer; font-family: inherit;
      display: flex; align-items: center; justify-content: center;
      transition: all 0.15s ease; line-height: 1;
    }
    .qty-btn:hover { background: #27272a; color: #fff; }
    .qty-num { font-size: 0.72rem; font-weight: 700; color: #fff; min-width: 1rem; text-align: center; }
    .cart-item-remove {
      width: 1.4rem; height: 1.4rem; border-radius: 0.3rem;
      background: none; border: none; color: #3f3f46;
      font-size: 0.7rem; cursor: pointer; font-family: inherit;
      display: flex; align-items: center; justify-content: center;
      transition: all 0.15s ease;
    }
    .cart-item-remove:hover { background: #1f0a0a; color: #f87171; }

    .drawer-footer {
      padding: 1.25rem 1.5rem;
      border-top: 1px solid #1a1a1a;
      background: #0a0a0a;
      display: flex; flex-direction: column; gap: 1rem;
    }
    .drawer-total {
      display: flex; justify-content: space-between; align-items: center;
    }
    .drawer-total-label { font-size: 0.72rem; color: #52525b; font-weight: 600; letter-spacing: 0.06em; text-transform: uppercase; }
    .drawer-total-value { font-size: 1.1rem; font-weight: 800; color: #fff; }
    .drawer-sh-note { font-size: 0.6rem; color: #3f3f46; letter-spacing: 0.04em; margin-top: -0.5rem; }

    #checkoutBtn {
      width: 100%; background: #fff; color: #000; border: none;
      padding: 0.825rem; border-radius: 0.75rem;
      font-weight: 700; cursor: pointer; font-family: inherit; font-size: 0.9rem;
      letter-spacing: 0.04em; transition: background 0.15s ease;
    }
    #checkoutBtn:hover:not(:disabled) { background: #e4e4e7; }

    /* Checkout Screen */

    .checkout-inner { max-width: 42rem; margin: 0 auto; padding: 4rem 1.5rem; display: flex; flex-direction: column; gap: 2.5rem; }

    .checkout-back { background: none; border: none; color: #a1a1aa; cursor: pointer; font-family: inherit; font-size: 1rem; text-align: left; }
    .checkout-back:hover { color: #fff; }
    .checkout-inner h2 { font-size: 1.875rem; font-weight: 800; }


    .form-fields { display: flex; flex-direction: column; gap: 1rem; }

    .form-fields input { width: 100%; padding: 1rem; background: #18181b; border: 1px solid #3f3f46; border-radius: 0.75rem; color: #fff; font-family: inherit; font-size: 1rem; transition: border-color 0.2s ease; outline: none; }
    .form-fields input:focus { border-color: #71717a; }
    .form-fields input::placeholder { color: #52525b; }

    .form-row { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; }

    .field-error { border-color: #ef4444 !important; }
    .field-valid  { border-color: #22c55e !important; }

    .error-msg { color: #ef4444; font-size: 0.875rem; margin-top: 0.25rem; display: none; }
    .error-msg.visible { display: block; }

    .checkout-summary { border-top: 1px solid #27272a; padding-top: 1.5rem; }
    .checkout-total-row { display: flex; justify-content: space-between; font-size: 1.125rem; font-weight: 600; margin-bottom: 1.5rem; }



    /* Discount code */
    .discount-section {
      background: #09090b;
      border: 1px solid #27272a;
      border-radius: 0.875rem;
      padding: 1.125rem 1.25rem;
      margin-bottom: 1.25rem;
    }

    .discount-section-label {
      font-size: 0.7rem; font-weight: 700; color: #71717a;
      letter-spacing: 0.1em; text-transform: uppercase; margin-bottom: 0.875rem;
      display: flex; align-items: center; gap: 0.5rem;
    }

    .discount-section-label::before {
      content: ''; display: inline-block;
      width: 0.5rem; height: 0.5rem; border-radius: 50%;
      background: #27272a;
    }

    .discount-input-row {
      display: flex; gap: 0.625rem; align-items: stretch;
    }

    .discount-input-wrap {
      flex: 1; position: relative;
    }

    .discount-input-wrap input {
      width: 100%;
      background: #111; border: 1px solid #2d2d2d;
      border-radius: 0.65rem; color: #fff;
      font-family: inherit; font-size: 0.9rem; font-weight: 700;
      letter-spacing: 0.1em; text-transform: uppercase;
      padding: 0.75rem 1rem; outline: none;
      transition: border-color 0.2s ease;
    }

    .discount-input-wrap input::placeholder {
      text-transform: none; letter-spacing: normal;
      font-weight: 400; color: #3f3f46; font-size: 0.875rem;
    }

    .discount-input-wrap input:focus { border-color: #52525b; }
    .discount-input-wrap input.dc-valid  { border-color: #166534 !important; background: #0a1a0f; }
    .discount-input-wrap input.dc-error  { border-color: #7f1d1d !important; background: #1a0a0a; }

    .discount-apply-btn {
      background: #1a1a1a; color: #a1a1aa;
      border: 1px solid #2d2d2d; border-radius: 0.65rem;
      padding: 0.75rem 1.125rem; font-size: 0.8rem; font-weight: 700;
      cursor: pointer; font-family: inherit; white-space: nowrap;
      letter-spacing: 0.06em; transition: all 0.15s ease; flex-shrink: 0;
    }
    .discount-apply-btn:hover { border-color: #52525b; color: #fff; }
    .discount-apply-btn.applied {
      background: #0a1a0f; color: #4ade80;
      border-color: #166534; cursor: default;
    }

    /* Applied code chip */
    .discount-chip {
      display: none; align-items: center; gap: 0.5rem;
      margin-top: 0.75rem; padding: 0.5rem 0.75rem;
      background: #0a1a0f; border: 1px solid #166534;
      border-radius: 0.55rem;
    }
    .discount-chip.visible { display: flex; }
    .discount-chip-icon { font-size: 0.85rem; }
    .discount-chip-text { flex: 1; font-size: 0.8rem; color: #4ade80; font-weight: 600; }
    .discount-chip-remove {
      background: none; border: none; color: #52525b;
      cursor: pointer; font-size: 0.8rem; padding: 0;
      line-height: 1; transition: color 0.15s ease;
    }
    .discount-chip-remove:hover { color: #f87171; }

    /* Error message */
    .discount-error-msg {
      font-size: 0.78rem; color: #f87171;
      margin-top: 0.5rem; display: none; align-items: center; gap: 0.35rem;
    }
    .discount-error-msg.visible { display: flex; }

    .checkout-savings-row {
      display: flex; justify-content: space-between;
      font-size: 0.875rem; color: #22c55e; margin-bottom: 0.5rem;
    }
    .checkout-subtotal-row {
      display: flex; justify-content: space-between;
      font-size: 0.875rem; color: #a1a1aa; margin-bottom: 0.5rem;
    }

    /* Order summary in checkout */
    .checkout-items-list {
      display: flex; flex-direction: column; gap: 0.625rem;
      margin-bottom: 1.25rem;
    }
    .checkout-item-row {
      display: flex; align-items: center; gap: 0.875rem;
      padding: 0.625rem 0; border-bottom: 1px solid #18181b;
    }
    .checkout-item-thumb {
      width: 2.75rem; height: 2.75rem; border-radius: 0.4rem;
      background: #18181b; overflow: hidden; flex-shrink: 0;
      display: flex; align-items: center; justify-content: center;
      font-size: 0.5rem; color: #52525b;
    }
    .checkout-item-thumb img { width:100%; height:100%; object-fit:cover; }
    .checkout-item-info { flex: 1; min-width: 0; }
    .checkout-item-name { font-size: 0.8rem; font-weight: 600; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
    .checkout-item-sub  { font-size: 0.72rem; color: #71717a; }
    .checkout-item-qty  { font-size: 0.75rem; color: #71717a; white-space:nowrap; }
    .checkout-item-price{ font-size: 0.8rem; font-weight: 700; white-space:nowrap; }


    /* Payment method selector */
    .pay-method-label {
      font-size: 0.7rem; font-weight: 700; color: #71717a;
      letter-spacing: 0.1em; text-transform: uppercase;
      margin-bottom: 0.875rem; margin-top: 1.5rem;
    }

    .pay-tiles {
      display: grid; grid-template-columns: repeat(3, 1fr);
      gap: 0.625rem; margin-bottom: 1.25rem;
    }

    .pay-tile {
      position: relative; display: flex; flex-direction: column;
      align-items: center; justify-content: center; gap: 0.45rem;
      padding: 1rem 0.5rem; background: #0d0d0d;
      border: 1px solid #27272a; border-radius: 1rem;
      cursor: pointer; transition: all 0.18s ease; user-select: none;
    }
    .pay-tile:hover { border-color: #3f3f46; background: #111; }
    .pay-tile.active {
      border-color: #ffffff; background: #111;
      box-shadow: 0 0 0 1px #fff;
    }

    .pay-tile-dot {
      position: absolute; top: 0.5rem; right: 0.5rem;
      width: 0.8rem; height: 0.8rem; border-radius: 50%;
      border: 1px solid #3f3f46; background: #0d0d0d;
      transition: all 0.15s ease;
    }
    .pay-tile.active .pay-tile-dot {
      background: #fff; border-color: #fff;
    }

    .pay-tile-icon { font-size: 1.4rem; line-height: 1; }

    .pay-tile-name {
      font-size: 0.65rem; font-weight: 700; letter-spacing: 0.06em;
      color: #52525b; text-transform: uppercase; transition: color 0.15s;
    }
    .pay-tile.active .pay-tile-name { color: #fff; }

    /* PayPal wordmark */
    .paypal-mark {
      font-size: 0.95rem; font-weight: 900; font-style: italic;
      font-family: Georgia, serif; line-height: 1;
    }
    .paypal-mark .pp-blue  { color: #009cde; }
    .paypal-mark .pp-dark  { color: #003087; }

    /* Shipping label */
    .shipping-label {
      font-size: 0.7rem; font-weight: 700; color: #71717a;
      letter-spacing: 0.1em; text-transform: uppercase;
      margin-bottom: 0.875rem;
    }

    /* Alt-pay confirm panels */
    .alt-pay-panel {
      display: none; flex-direction: column; align-items: center;
      gap: 1rem; padding: 2rem 1.5rem;
      background: #09090b; border: 1px solid #27272a;
      border-radius: 1rem; text-align: center;
    }
    .alt-pay-panel.show { display: flex; }

    .alt-pay-badge {
      width: 3.5rem; height: 3.5rem; border-radius: 1rem;
      display: flex; align-items: center; justify-content: center;
      font-size: 1.5rem;
    }

    .alt-pay-panel h3 { font-size: 1rem; font-weight: 800; }

    .alt-pay-panel p {
      font-size: 0.8rem; color: #71717a; line-height: 1.65; max-width: 22rem;
    }

    .alt-pay-cta {
      width: 100%; max-width: 22rem; padding: 0.9rem;
      border: none; border-radius: 0.875rem;
      font-size: 0.9rem; font-weight: 700; font-family: inherit;
      cursor: pointer; transition: filter 0.15s ease;
      display: flex; align-items: center; justify-content: center; gap: 0.6rem;
    }
    .alt-pay-cta:hover { filter: brightness(1.1); }
    .alt-pay-cta.paypal { background: #003087; color: #fff; }
    .alt-pay-cta.apple  { background: #fff;    color: #000; }

    .alt-pay-security {
      font-size: 0.68rem; color: #3f3f46; display: flex;
      align-items: center; gap: 0.35rem;
    }


    /* Drop Countdown */
    #dropCountdown {
      display: none;
      position: absolute;
      bottom: 9rem;
      left: 50%;
      transform: translateX(-50%);
      text-align: center;
      z-index: 5;
      pointer-events: none;
    }
    #dropCountdown .drop-label {
      font-size: 0.65rem;
      font-weight: 800;
      letter-spacing: 0.22em;
      text-transform: uppercase;
      color: rgba(255,255,255,0.45);
      margin-bottom: 0.25rem;
    }
    #dropCountdown .drop-units {
      display: inline-flex;
      align-items: center;
      gap: 0.15rem;
    }
    #dropCountdown .drop-unit {
      display: flex;
      flex-direction: column;
      align-items: center;
    }
    #dropCountdown .drop-num {
      font-size: clamp(1.5rem, 4vw, 2.5rem);
      font-weight: 800;
      line-height: 1;
      letter-spacing: -0.02em;
      font-variant-numeric: tabular-nums;
      min-width: 2ch;
    }
    #dropCountdown .drop-sublabel {
      font-size: 0.55rem;
      font-weight: 600;
      letter-spacing: 0.18em;
      text-transform: uppercase;
      color: rgba(255,255,255,0.35);
      margin-top: 0.15rem;
    }
    #dropCountdown .drop-sep {
      font-size: clamp(1.2rem, 3vw, 2rem);
      font-weight: 300;
      color: rgba(255,255,255,0.2);
      padding-bottom: 0.5rem;
      margin: 0 0.1rem;
    }

    /* Ad Carousel */
    #adCarousel {
      position: relative;
      width: 100%;
      height: 80vh;
      cursor: grab;
      min-height: 480px;
      max-height: 720px;
      overflow: hidden;
      background: #000;
    }

    .ad-track {
      display: flex;
      height: 100%;
      transition: transform 0.8s cubic-bezier(0.77, 0, 0.175, 1);
      will-change: transform;
    }

    .ad-slide {
      min-width: 100%;
      height: 100%;
      overflow: hidden;
      position: relative;
      overflow: hidden;
    }

    /* Full-bleed image fill */
    .ad-slide-bg {
      width: 100%;
      height: 80vh;
      min-height: 480px;
      max-height: 720px;
      object-fit: cover;
      display: block;
      transition: transform 0.5s cubic-bezier(0.4, 0, 0.2, 1);
    }
    #adCarousel:hover .ad-slide-bg {
      transform: scale(1.04);
    }

    /* Overlay gradient */
    .ad-slide-overlay {
      position: absolute;
      inset: 0;
      background: linear-gradient(
        to right,
        rgba(0,0,0,0.72) 0%,
        rgba(0,0,0,0.35) 50%,
        rgba(0,0,0,0.05) 100%
      );
      display: flex;
      align-items: center;
      padding: 4rem 8%;
    }

    /* Fallback colour slide (no image) */
    .ad-slide-color {
      width: 100%;
      height: 80vh;
      min-height: 480px;
      max-height: 720px;
      display: flex;
      align-items: center;
      padding: 4rem 8%;
    }

    .ad-content { max-width: 38rem; }

    .ad-eyebrow {
      font-size: 0.7rem;
      font-weight: 700;
      letter-spacing: 0.25em;
      text-transform: uppercase;
      color: rgba(255,255,255,0.6);
      margin-bottom: 1rem;
    }

    .ad-headline {
      font-size: clamp(2rem, 5vw, 3.75rem);
      font-weight: 800;
      line-height: 1.05;
      letter-spacing: -0.02em;
      margin-bottom: 1.125rem;
    }

    .ad-body {
      font-size: 1rem;
      color: rgba(255,255,255,0.75);
      line-height: 1.65;
      margin-bottom: 2rem;
      max-width: 28rem;
    }

    .ad-cta {
      display: inline-flex;
      align-items: center;
      gap: 0.5rem;
      background: #fff;
      color: #000;
      font-family: inherit;
      font-size: 0.875rem;
      font-weight: 700;
      letter-spacing: 0.04em;
      padding: 0.875rem 1.75rem;
      border-radius: 0.75rem;
      border: none;
      cursor: pointer;
      text-decoration: none;
      transition: background 0.15s ease, transform 0.15s ease;
    }
    .ad-cta:hover { background: #e4e4e7; transform: translateY(-1px); }
    .ad-cta.dark { background: #000; color: #fff; border: 1px solid rgba(255,255,255,0.25); }
    .ad-cta.dark:hover { background: #111; }

    /* Dots */
    .ad-dots {
      position: absolute;
      bottom: 1.5rem;
      left: 50%;
      transform: translateX(-50%);
      display: flex;
      gap: 0.5rem;
      z-index: 10;
    }

    .ad-dot {
      width: 0.45rem;
      height: 0.45rem;
      border-radius: 50%;
      background: rgba(255,255,255,0.35);
      cursor: pointer;
      transition: all 0.3s ease;
      border: none;
      padding: 0;
    }
    .ad-dot.active {
      background: #fff;
      width: 1.5rem;
      border-radius: 0.25rem;
    }

    /* Prev / Next arrows */
    .ad-arrow {
      position: absolute;
      top: 50%;
      transform: translateY(-50%);
      z-index: 10;
      background: rgba(0,0,0,0.4);
      border: 1px solid rgba(255,255,255,0.15);
      color: #fff;
      width: 2.75rem;
      height: 2.75rem;
      border-radius: 50%;
      font-size: 1rem;
      cursor: pointer;
      display: flex;
      align-items: center;
      justify-content: center;
      transition: background 0.15s ease;
      backdrop-filter: blur(4px);
    }
    #adCarousel.dragging { cursor: grabbing; user-select: none; }
    .bs-carousel-wrap { cursor: grab; }
    .bs-carousel-wrap.dragging { cursor: grabbing; user-select: none; }

    /* Progress bar */
    .ad-progress {
      position: absolute;
      bottom: 0;
      left: 0;
      height: 2px;
      background: rgba(255,255,255,0.9);
      width: 0%;
      transition: width linear;
      z-index: 10;
    }

    /* Empty state */
    .ad-empty {
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      height: 28rem;
      color: #27272a;
      gap: 0.75rem;
      background: #050505;
      border-bottom: 1px solid #18181b;
    }
    .ad-empty span { font-size: 2rem; }
    .ad-empty p { font-size: 0.8rem; letter-spacing: 0.1em; text-transform: uppercase; }

    .checkout-disabled { background: #111 !important; color: #444 !important; border: 1px solid #333 !important; cursor: not-allowed !important; opacity: 0.6; }

    /* Animations */
    @keyframes pop { 0% { transform: scale(1); } 50% { transform: scale(1.15); } 100% { transform: scale(1); } }
    .pop { animation: pop 0.3s ease; }

    @keyframes lightningStrike {
      0%   { box-shadow: 0 0 0px rgba(255,255,255,0),   0 0 0px  rgba(255,255,255,0);   border-color: #27272a; }
      8%   { box-shadow: 0 0 16px 5px rgba(255,255,255,0.9), 0 0 40px 12px rgba(255,255,255,0.2); border-color: #ffffff; }
      20%  { box-shadow: 0 0 4px 1px rgba(255,255,255,0.15); border-color: #555; }
      33%  { box-shadow: 0 0 22px 7px rgba(255,255,255,0.8), 0 0 50px 14px rgba(255,255,255,0.15); border-color: #ffffff; }
      52%  { box-shadow: 0 0 5px 1px rgba(255,255,255,0.2);  border-color: #444; }
      63%  { box-shadow: 0 0 12px 3px rgba(255,255,255,0.45); border-color: #aaa; }
      100% { box-shadow: 0 0 0px rgba(255,255,255,0);   border-color: #27272a; }
    }

    .addBtn, .po-add-btn { position: relative; overflow: visible !important; }

    @keyframes btnBorderFlash {
      0%   { box-shadow: none; border-color: transparent; }
      10%  { box-shadow: 0 0 8px 2px rgba(255,255,255,0.9); border-color: rgba(255,255,255,1); }
      35%  { box-shadow: 0 0 3px 1px rgba(255,255,255,0.3); border-color: rgba(255,255,255,0.4); }
      55%  { box-shadow: 0 0 6px 2px rgba(255,255,255,0.6); border-color: rgba(255,255,255,0.7); }
      100% { box-shadow: none; border-color: transparent; }
    }
    .addBtn.lightning, .po-add-btn.lightning {
      animation: btnBorderFlash 0.6s ease-out forwards;
    }

    @keyframes btnShake {
      0%   { transform: translateX(0); }
      20%  { transform: translateX(-2px); }
      40%  { transform: translateX(2px); }
      60%  { transform: translateX(-1px); }
      80%  { transform: translateX(1px); }
      100% { transform: translateX(0); }
    }

    .glow-effect { animation: lightningStrike 0.75s ease-out forwards; }
    .btn-shake   { animation: btnShake 0.35s ease; }

    /* Full Cart Screen */
    /* Product Detail Overlay */
    #productOverlay {
      position: fixed; inset: 0; background: #050505;
      z-index: 65; display: none; overflow-y: auto;
      scrollbar-width: none;
      animation: overlayIn 0.32s cubic-bezier(0.4,0,0.2,1);
    }
    #productOverlay::-webkit-scrollbar { display: none; }
    #productOverlay.open { display: block; }
    @keyframes overlayIn {
      from { opacity: 0; transform: translateY(1.5rem); }
      to   { opacity: 1; transform: translateY(0); }
    }

    .po-inner {
      max-width: 68rem; margin: 0 auto;
      padding: 2rem 2rem 6rem;
    }

    .po-top-bar {
      display: flex; align-items: center; justify-content: space-between;
      margin-bottom: 2.5rem;
    }
    .po-back {
      display: flex; align-items: center; gap: 0.5rem;
      background: none; border: 1px solid #1f1f1f; border-radius: 0.5rem;
      color: #a1a1aa; font-size: 0.72rem; font-weight: 700; font-family: inherit;
      letter-spacing: 0.05em; padding: 0.45rem 0.875rem; cursor: pointer;
      transition: all 0.15s ease;
    }
    .po-back:hover { border-color: #52525b; color: #fff; }
    .po-back svg { flex-shrink: 0; }

    .po-layout {
      display: grid;
      grid-template-columns: 1fr 1fr;
      gap: 4rem;
      align-items: start;
    }
    @media (max-width: 760px) {
      .po-layout { grid-template-columns: 1fr; gap: 2rem; }
    }

    /* Image column */
    .po-images { position: sticky; top: 1.5rem; }
    .po-main-img {
      aspect-ratio: 1; background: #111; border-radius: 0.875rem;
      overflow: hidden; position: relative; margin-bottom: 0.75rem;
    }
    .po-main-img img {
      width: 100%; height: 100%; object-fit: cover; display: block;
      transition: opacity 0.2s ease;
      image-rendering: -webkit-optimize-contrast;
      filter: contrast(1.04) saturate(1.08) brightness(1.01);
    }
    .po-main-img .product-badge {
      position: absolute; top: 1rem; left: 1rem;
      font-size: 0.68rem; font-weight: 800; letter-spacing: 0.08em;
      padding: 0.25rem 0.65rem; border-radius: 0.4rem; z-index: 2;
      backdrop-filter: blur(10px) saturate(160%);
      -webkit-backdrop-filter: blur(10px) saturate(160%);
      box-shadow: inset 0 1px 0 rgba(255,255,255,0.18), 0 2px 8px rgba(0,0,0,0.35);
    }

    .po-thumbs {
      display: flex; gap: 0.5rem;
    }
    .po-thumb {
      flex: 1; aspect-ratio: 1; border-radius: 0.5rem; overflow: hidden;
      background: #111; border: 1.5px solid #1a1a1a; cursor: pointer;
      transition: border-color 0.15s ease;
    }
    .po-thumb:hover  { border-color: #52525b; }
    .po-thumb.active { border-color: #fff; }
    .po-thumb img { width: 100%; height: 100%; object-fit: cover; display: block;
      image-rendering: -webkit-optimize-contrast;
      filter: contrast(1.04) saturate(1.08) brightness(1.01); }

    /* Info column */
    .po-info { padding-top: 0.5rem; }
    .po-eyebrow {
      font-size: 0.62rem; font-weight: 800; letter-spacing: 0.14em;
      text-transform: uppercase; color: #52525b; margin-bottom: 0.625rem;
    }
    .po-name {
      font-size: clamp(1.5rem, 3vw, 2.25rem); font-weight: 900;
      letter-spacing: -0.01em; line-height: 1.1; color: #fff;
      margin-bottom: 0.625rem;
    }
    .po-subtitle {
      font-size: 0.875rem; color: #71717a; margin-bottom: 1.5rem; line-height: 1.6;
    }
    .po-price-row {
      display: flex; align-items: baseline; gap: 0.75rem; margin-bottom: 0.4rem;
    }
    .po-sh-note {
      display: block; font-size: 0.6rem; color: #3f3f46; letter-spacing: 0.04em; margin-bottom: 1.35rem;
    }
    .po-price {
      font-size: 1.75rem; font-weight: 900; color: #fff;
    }
    .po-price-orig {
      font-size: 1.1rem; font-weight: 700; color: #3f3f46;
      text-decoration: line-through;
    }
    .po-price-sale { color: #4ade80; }
    .po-save-badge {
      font-size: 0.62rem; font-weight: 800; letter-spacing: 0.08em;
      padding: 0.2rem 0.55rem; border-radius: 0.35rem;
      background: #052e16; color: #4ade80; border: 1px solid #166534;
    }

    .po-divider {
      height: 1px; background: #111; margin: 1.5rem 0;
    }

    .po-section-label {
      font-size: 0.62rem; font-weight: 800; letter-spacing: 0.12em;
      text-transform: uppercase; color: #52525b; margin-bottom: 0.75rem;
    }

    .po-sizes {
      display: flex; flex-wrap: wrap; gap: 0.5rem; margin-bottom: 1.5rem;
    }
    .po-size-btn {
      min-width: 3rem; padding: 0.55rem 0.75rem; border-radius: 0.5rem;
      border: 1px solid #27272a; background: #0f0f0f;
      font-size: 0.72rem; font-weight: 800; letter-spacing: 0.06em;
      color: #71717a; cursor: pointer; font-family: inherit;
      transition: all 0.15s ease; text-align: center;
    }
    .po-size-btn:hover:not(:disabled)  { border-color: #fff; color: #fff; }
    .po-size-btn.selected { border-color: #fff; background: #fff; color: #000; }
    .po-size-btn:disabled {
      opacity: 0.3; cursor: not-allowed; text-decoration: line-through;
    }

    .po-stock-note {
      font-size: 0.7rem; font-weight: 700; margin-bottom: 1.25rem;
    }
    .po-stock-note.low { color: #f97316; }
    .po-stock-note.out { color: #f87171; }

    .po-add-btn {
      width: 100%; padding: 1rem; border-radius: 0.625rem;
      border: none; font-size: 0.875rem; font-weight: 800;
      letter-spacing: 0.06em; text-transform: uppercase;
      cursor: pointer; font-family: inherit;
      transition: all 0.2s ease;
      background: #fff; color: #000;
    }
    .po-add-btn:hover:not(:disabled) { background: #e4e4e7; transform: translateY(-1px); }
    .po-add-btn:disabled { background: #111; color: #3f3f46; cursor: not-allowed; border: 1px solid #1f1f1f; transform: none; }
    .po-add-btn.added { background: #052e16; color: #4ade80; border: 1px solid #166534; }

    @keyframes po-btn-press {
      0%   { transform: scale(1); }
      30%  { transform: scale(0.94); }
      65%  { transform: scale(1.04); }
      100% { transform: scale(1); }
    }
    .po-add-btn.pressed { animation: po-btn-press 0.28s cubic-bezier(0.36,0.07,0.19,0.97); }

    @keyframes po-hint-shake {
      0%, 100% { transform: translateX(0); }
      20%       { transform: translateX(-5px); }
      40%       { transform: translateX(5px); }
      60%       { transform: translateX(-4px); }
      80%       { transform: translateX(4px); }
    }
    .po-size-hint.shake { animation: po-hint-shake 0.35s ease; }

    .po-size-hint {
      font-size: 0.7rem; color: #f87171; margin-top: 0.6rem;
      display: none; text-align: center;
    }

    /* Color swatches — product overlay */
    .po-colors {
      display: flex; flex-wrap: wrap; gap: 0.6rem; margin-bottom: 0.6rem;
    }
    .po-color-btn {
      width: 2rem; height: 2rem; border-radius: 50%;
      border: 2px solid transparent; outline: 2px solid transparent;
      box-shadow: 0 0 0 1.5px #3f3f46;
      cursor: pointer; padding: 0; flex-shrink: 0;
      transition: transform 0.15s ease, outline-color 0.15s ease;
      position: relative;
    }
    .po-color-btn:hover { transform: scale(1.15); }
    .po-color-btn.selected {
      outline-color: #fff;
      outline-offset: 2px;
      transform: scale(1.1);
    }
    .po-color-selected-label {
      font-size: 0.72rem; color: #a1a1aa; margin-bottom: 1.25rem;
      letter-spacing: 0.04em; min-height: 1.1rem;
    }

    #fullCartScreen::-webkit-scrollbar { display: none; }
    #fullCartScreen {
      position: fixed; inset: 0; background: #050505;
      z-index: 70; display: none; overflow-y: auto;
      scrollbar-width: none;
    }
    #fullCartScreen.open { display: block; }

    .full-cart-inner {
      max-width: 72rem; margin: 0 auto;
      padding: 3rem 2rem 6rem;
    }

    .full-cart-top {
      display: flex; align-items: center; justify-content: space-between;
      margin-bottom: 3rem;
    }

    .full-cart-back {
      display: inline-flex; align-items: center; gap: 0.5rem;
      background: transparent; border: 1px solid #222; color: #555;
      cursor: pointer; font-family: inherit; font-size: 0.72rem;
      font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase;
      padding: 0.55rem 1rem; border-radius: 0.5rem;
      transition: all 0.15s ease;
    }
    .full-cart-back:hover { border-color: #555; color: #fff; }

    .full-cart-heading h2 {
      font-size: 1.75rem; font-weight: 800; letter-spacing: -0.03em;
      text-align: right;
    }
    .full-cart-heading span {
      display: block; font-size: 0.7rem; color: #444;
      letter-spacing: 0.1em; text-transform: uppercase; text-align: right;
      margin-top: 0.2rem;
    }

    /* Two-column layout */
    .full-cart-layout {
      display: grid;
      grid-template-columns: 1fr 22rem;
      gap: 2rem;
      align-items: start;
    }

    /* Items column */
    .full-cart-thead {
      display: grid;
      grid-template-columns: 1fr 5rem 7rem 2rem;
      gap: 1rem; padding-bottom: 0.875rem;
      border-bottom: 1px solid #161616;
      font-size: 0.6rem; font-weight: 700; color: #333;
      letter-spacing: 0.12em; text-transform: uppercase;
    }

    .full-cart-row {
      display: grid;
      grid-template-columns: 1fr 5rem 7rem 2rem;
      gap: 1rem; padding: 1.25rem 0;
      border-bottom: 1px solid #0f0f0f;
      align-items: center;
    }
    .full-cart-row:last-child { border-bottom: none; }

    .full-cart-product { display: flex; align-items: center; gap: 1rem; min-width: 0; }

    .full-cart-thumb {
      width: 4.5rem; height: 4.5rem; border-radius: 0.75rem;
      background: #111; border: 1px solid #1a1a1a;
      overflow: hidden; flex-shrink: 0;
      display: flex; align-items: center; justify-content: center;
      font-size: 0.5rem; color: #333;
    }
    .full-cart-thumb img { width: 100%; height: 100%; object-fit: cover; }

    .full-cart-info { min-width: 0; }
    .full-cart-name {
      font-weight: 700; font-size: 0.8rem; letter-spacing: 0.01em;
      white-space: nowrap; overflow: hidden; text-overflow: ellipsis; color: #e4e4e7;
    }
    .full-cart-sub {
      font-size: 0.7rem; color: #444; margin-top: 0.2rem;
      white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
    }
    .full-cart-unit-price {
      font-size: 0.68rem; color: #555; margin-top: 0.35rem; font-weight: 600;
    }

    .full-cart-size-badge {
      display: inline-flex; align-items: center; justify-content: center;
      font-size: 0.65rem; font-weight: 800; letter-spacing: 0.08em;
      color: #777; background: #111; border: 1px solid #222;
      border-radius: 0.4rem; padding: 0.2rem 0.55rem;
      width: 100%; max-width: 5rem;
    }
    .full-cart-size-badge.none { color: #2a2a2a; background: none; border-color: transparent; }

    .qty-control { display: flex; align-items: center; gap: 0.35rem; }
    .qty-btn {
      width: 1.5rem; height: 1.5rem;
      background: #111; border: 1px solid #1f1f1f; color: #777;
      border-radius: 0.35rem; font-size: 0.85rem;
      cursor: pointer; display: flex; align-items: center; justify-content: center;
      transition: all 0.12s ease; flex-shrink: 0; font-family: inherit; line-height: 1;
    }
    .qty-btn:hover { background: #1f1f1f; border-color: #333; color: #fff; }
    .qty-num { font-size: 0.8rem; font-weight: 700; min-width: 1.25rem; text-align: center; color: #e4e4e7; }

    .full-cart-remove {
      width: 1.5rem; height: 1.5rem; border-radius: 0.35rem;
      background: none; border: none; color: #2a2a2a;
      cursor: pointer; font-size: 0.75rem; font-family: inherit;
      display: flex; align-items: center; justify-content: center;
      transition: all 0.12s ease;
    }
    .full-cart-remove:hover { color: #ef4444; background: rgba(239,68,68,0.08); }

    /* Sidebar summary */
    .full-cart-sidebar { position: sticky; top: 2rem; }

    .full-cart-summary {
      background: #0a0a0a; border: 1px solid #161616;
      border-radius: 1.25rem; overflow: hidden;
    }

    .summary-header {
      padding: 1.25rem 1.5rem; border-bottom: 1px solid #111;
      font-size: 0.6rem; font-weight: 700; color: #333;
      letter-spacing: 0.14em; text-transform: uppercase;
    }

    .summary-rows { padding: 0.5rem 1.5rem; }

    .full-cart-summary-row {
      display: flex; justify-content: space-between; align-items: center;
      font-size: 0.8rem; color: #555; padding: 0.65rem 0;
      border-bottom: 1px solid #0f0f0f;
    }
    .full-cart-summary-row:last-of-type { border-bottom: none; }
    .full-cart-summary-row.total {
      font-size: 1rem; font-weight: 800; color: #fff;
      border-top: 1px solid #1a1a1a; border-bottom: none;
      padding-top: 1rem; margin-top: 0.25rem;
    }
    .full-cart-summary-row .free-tag {
      color: #22c55e; font-size: 0.72rem; font-weight: 700; letter-spacing: 0.06em;
    }

    .summary-discount { padding: 1rem 1.5rem; border-top: 1px solid #111; }

    .full-cart-checkout-btn {
      display: block; width: calc(100% - 3rem); margin: 0 1.5rem 1.5rem;
      background: #fff; color: #000; border: none;
      padding: 0.9rem; border-radius: 0.75rem; font-size: 0.8rem;
      font-weight: 800; cursor: pointer; font-family: inherit;
      letter-spacing: 0.08em; text-transform: uppercase;
      transition: all 0.15s ease; text-align: center;
    }
    .full-cart-checkout-btn:hover { background: #e4e4e7; transform: translateY(-1px); }

    .full-cart-empty {
      text-align: center; padding: 8rem 0; color: #222;
      grid-column: 1 / -1;
    }
    .full-cart-empty .empty-icon { font-size: 2rem; margin-bottom: 1rem; display: block; }
    .full-cart-empty p { font-size: 0.8rem; letter-spacing: 0.06em; text-transform: uppercase; }
    .full-cart-empty p:first-child { font-size: 2rem; margin-bottom: 0.75rem; }

    /* Expand button in drawer */
    .drawer-expand {
      background: #18181b; border: 1px solid #27272a; color: #a1a1aa;
      font-size: 0.68rem; font-weight: 700; cursor: pointer; font-family: inherit;
      letter-spacing: 0.08em; padding: 0.35rem 0.75rem; border-radius: 0.5rem;
      transition: all 0.15s ease; display: flex; align-items: center; gap: 0.35rem;
      text-transform: uppercase; white-space: nowrap;
    }
    .drawer-expand:hover { background: #27272a; color: #fff; border-color: #3f3f46; }

    /* Hide native cursor everywhere; restore for text/grab/disabled */
    *, *::before, *::after { cursor: none !important; }
    input[type='text'], input[type='email'], input[type='password'],
    input[type='search'], textarea, [contenteditable='true'] { cursor: text !important; }
    #logo3DCanvas        { cursor: grab     !important; }
    #logo3DCanvas:active { cursor: grabbing !important; }
    :disabled, [disabled], .checkout-disabled,
    .addBtn.sold-out, .po-add-btn:disabled, .size-btn-out { cursor: not-allowed !important; }

    /* Custom cursor element */
    #warlok-cur {
      position: fixed;
      top: 0; left: 0;
      width: 17px; height: 17px;
      pointer-events: none;
      z-index: 2147483647;
      transform: translate(-50%, -50%);
      opacity: 0;
      transition: opacity 0.15s ease;
    }
    #warlok-cur svg { display: block; }
    #warlok-cur.hovering svg {
      animation: warlokGlow 1.5s ease-in-out infinite;
    }
    @keyframes warlokGlow {
      0%, 100% {
        filter: drop-shadow(0 0 2px rgba(255,255,255,0.15));
      }
      50% {
        filter: drop-shadow(0 0 5px rgba(255,255,255,0.55)) drop-shadow(0 0 9px rgba(255,255,255,0.2));
      }
    }

/* ── Best Sellers ─────────────────────────────────────── */
#bestSellersSection {
  padding: 4rem 1.5rem 6rem;
  background: #fff;
  position: relative;
  overflow: hidden;
}
#bestSellersSection::after {
  content: '';
  position: absolute;
  inset: 0;
  background: rgba(255,255,255,0.12);
  z-index: 1;
  pointer-events: none;
}
.bs-bg {
  display: none !important;
  transform: translate(-50%, -50%) rotate(-90deg);
  z-index: 0;
  pointer-events: none;
  user-select: none;
}
.bs-inner { max-width: 72rem; margin: 0 auto; position: relative; z-index: 2; }
.bs-header {
  display: flex; align-items: center; justify-content: space-between;
  margin-bottom: 2.5rem; flex-wrap: wrap; gap: 1rem;
}
.bs-title {
  font-size: clamp(1rem, 3vw, 1.4rem); font-weight: 800; letter-spacing: 0.1em; color: #000;
  background: rgba(255,255,255,0.75); backdrop-filter: blur(6px);
  padding: 0.35rem 0.85rem; border-radius: 0.5rem;
}
.bs-filters { display: flex; gap: 0.5rem; }
.bs-filter {
  background: rgba(255,255,255,0.75); backdrop-filter: blur(6px); border: 1px solid #d4d4d8; color: #71717a;
  font-family: inherit; font-size: 0.72rem; font-weight: 700;
  letter-spacing: 0.08em; text-transform: uppercase;
  padding: 0.45rem 1rem; border-radius: 0.5rem; cursor: pointer;
  transition: border-color 0.15s, color 0.15s;
}
.bs-filter.active, .bs-filter:hover { border-color: #000; color: #000; }

/* Carousel wrapper */
.bs-carousel-wrap {
  position: relative; overflow: hidden; padding: 1.5rem 0 2.5rem; z-index: 2;
}
#bestSellersGrid {
  position: relative; height: 450px;
  display: flex; align-items: center; justify-content: center;
}
/* Arrow buttons */
.bs-arrow {
  position: absolute; top: 50%; transform: translateY(-50%);
  z-index: 10; background: #18181b; border: 1px solid #27272a;
  color: #fff; width: 2.5rem; height: 2.5rem; border-radius: 50%;
  cursor: pointer; display: flex; align-items: center; justify-content: center;
  transition: background 0.15s, border-color 0.15s; flex-shrink: 0;
}
.bs-arrow:hover { background: #27272a; border-color: #52525b; }
.bs-arrow-left  { left:  1.25rem; }
.bs-arrow-right { right: 1.25rem; }

/* Cards — absolutely positioned on the track */
.bs-card {
  position: absolute; left: 50%; width: 340px;
  background: #09090b; border: 1.5px solid #000; border-radius: 1rem; box-shadow: 0 4px 20px rgba(0,0,0,0.25);
  overflow: hidden; cursor: pointer; will-change: transform, opacity;
  transition: transform 0.45s cubic-bezier(0.4,0,0.2,1),
              opacity 0.45s cubic-bezier(0.4,0,0.2,1),
              border-color 0.2s;
}
/* Podium positions */
.bs-pos-center {
  transform: translateX(-50%) scale(1);
  opacity: 1; z-index: 3;
}
.bs-pos-right {
  transform: translateX(calc(-50% + 380px)) scale(0.72);
  opacity: 0.5; z-index: 2;
}
.bs-pos-left {
  transform: translateX(calc(-50% - 380px)) scale(0.72);
  opacity: 0.5; z-index: 2;
}
/* Hover: only center lifts; sides hint they're clickable */
.bs-pos-center:hover { border-color: #444; }
.bs-pos-left:hover, .bs-pos-right:hover { opacity: 0.75; }
.bs-card.rank-1 { border-color: #854d0e; }
.bs-pos-center.rank-1:hover { border-color: #ca8a04; }

.bs-img {
  aspect-ratio: 1 / 1; background: #18181b;
  display: flex; align-items: center; justify-content: center;
  overflow: hidden; position: relative;
}
.bs-img img { width: 100%; height: 100%; object-fit: cover; }
.bs-rank {
  position: absolute; top: 0.75rem; left: 0.75rem;
  width: 2rem; height: 2rem; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  z-index: 6;
  font-size: 0.75rem; font-weight: 800; z-index: 2;
}
.bs-rank-1 { background: #a16207; color: #fef08a; }
.bs-rank-2 { background: #3f3f46; color: #d4d4d8; }
.bs-rank-3 { background: #292524; color: #a78bfa; }
.bs-body { padding: 1rem; }
.bs-name {
  font-size: 0.82rem; font-weight: 800; letter-spacing: 0.04em;
  margin-bottom: 0.2rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.bs-price { font-size: 0.78rem; font-weight: 700; color: #a1a1aa; }
.bs-sold  { font-size: 0.65rem; color: #52525b; font-weight: 700; letter-spacing: 0.06em; margin-top: 0.35rem; }
.bs-empty { text-align: center; color: #3f3f46; font-size: 0.82rem; letter-spacing: 0.08em; padding: 3rem 0; }

@media (max-width: 640px) {
  #bestSellersGrid { height: 330px; }
  .bs-card { width: 200px; }
  .bs-pos-right { transform: translateX(calc(-50% + 215px)) scale(0.72); }
  .bs-pos-left  { transform: translateX(calc(-50% - 215px)) scale(0.72); }
  .bs-header { flex-direction: column; align-items: flex-start; }
}

/* ── Mobile / Touch Responsive ───────────────────────────── */

/* Hide custom cursor on touch devices */
@media (hover: none) and (pointer: coarse) {
  *, *::before, *::after { cursor: auto !important; }
  input, textarea, [contenteditable='true'] { cursor: text !important; }
  :disabled, [disabled], .checkout-disabled,
  .addBtn.sold-out, .po-add-btn:disabled, .size-btn-out { cursor: not-allowed !important; }
  #warlok-cur { display: none !important; }
  #logo3DCanvas { cursor: default !important; }
}

/* Larger touch targets on touch devices */
@media (hover: none) and (pointer: coarse) {
  .size-btn {
    padding: 0.6rem 0.8rem;
    min-height: 2.75rem;
    font-size: 0.7rem;
  }
  .qty-btn {
    width: 2.5rem;
    height: 2.5rem;
  }
  .cart-item-remove {
    width: 2.5rem;
    height: 2.5rem;
  }
  .po-color-btn {
    width: 2.75rem;
    height: 2.75rem;
  }
  .bs-filter {
    padding: 0.7rem 1.25rem;
  }
  .po-size-btn {
    padding: 0.75rem 1rem;
    min-height: 2.75rem;
  }
}

/* Cart drawer — full width on phones */
@media (max-width: 480px) {
  #cartDrawer {
    width: 100%;
    border-left: none;
  }
}

/* Search input — flexible on mobile */
@media (max-width: 640px) {
  .toolbar-controls {
    width: 100%;
  }
  .search-wrap {
    flex: 1;
  }
  #searchInput {
    width: 100%;
  }
  #searchInput:focus {
    width: 100%;
  }
  /* Compact product cards on mobile */
  .product-body {
    padding: 0.6rem;
  }
  .product-body h3 {
    font-size: 0.75rem;
    margin-bottom: 0.2rem;
    line-height: 1.3;
  }
  .product-body p {
    font-size: 0.65rem;
    margin-bottom: 0.4rem;
    line-height: 1.3;
    display: -webkit-box;
    -webkit-line-clamp: 1;
    -webkit-box-orient: vertical;
    overflow: hidden;
  }
  /* Stack price above button in 2-col grid */
  .product-row {
    flex-direction: column;
    align-items: flex-start;
    gap: 0.35rem;
  }
  .product-row .addBtn {
    width: 100%;
    text-align: center;
    padding: 0.45rem 0.4rem;
    font-size: 0.68rem;
    min-height: 36px;
  }
  .product-row span {
    font-size: 0.82rem;
    font-weight: 800;
  }
}

/* Shop section padding */
@media (max-width: 640px) {
  #shopSection {
    padding: 2rem 0.75rem;
  }
  .shop-toolbar {
    gap: 0.75rem;
    margin-bottom: 1.25rem;
  }
  .shop-toolbar h2 {
    font-size: 1.25rem;
  }
  .result-count {
    margin-bottom: 1rem;
    font-size: 0.65rem;
  }
}

/* Checkout form — stack fields on mobile */
@media (max-width: 580px) {
  .form-row {
    grid-template-columns: 1fr;
  }
  .checkout-inner {
    padding: 2.5rem 1rem;
  }
}

/* Payment tiles — 2 columns on mobile */
@media (max-width: 480px) {
  .pay-tiles {
    grid-template-columns: repeat(2, 1fr);
  }
}

/* Ad carousel — shorter on mobile */
@media (max-width: 640px) {
  #adCarousel {
    height: 65vh;
    min-height: 360px;
  }
  .ad-slide-bg,
  .ad-slide-color {
    height: 65vh;
    min-height: 360px;
  }
  .ad-slide-overlay,
  .ad-slide-color {
    padding: 1.5rem 1.25rem 4rem;
    align-items: flex-end;
    background: linear-gradient(
      to top,
      rgba(0,0,0,0.85) 0%,
      rgba(0,0,0,0.4) 50%,
      rgba(0,0,0,0.05) 100%
    );
  }
  .ad-body {
    font-size: 0.875rem;
    margin-bottom: 1.25rem;
  }
  .ad-headline {
    font-size: clamp(1.5rem, 7vw, 2.5rem);
  }
}

/* Nav countdown — hide label early, then full countdown on tiny screens */
@media (max-width: 560px) {
  /* Hide "PREORDER NOW" label — timer only */
  .nav-drop-label { display: none; }
  #navCountdown { gap: 0.25rem; margin-right: 0.35rem; }
  #navCountdown .nav-drop-timer { font-size: 0.68rem; }
  #topNav { padding: 0 1rem; }
}
@media (max-width: 400px) {
  /* Screen too narrow for any countdown — hide it entirely */
  #navCountdown { display: none !important; }
}

/* Product overlay — less padding on mobile */
@media (max-width: 640px) {
  .po-inner {
    padding: 1.25rem 1rem 4rem;
  }
  .po-top-bar {
    margin-bottom: 1.25rem;
  }
}

/* Full cart — single column on mobile */
@media (max-width: 768px) {
  .full-cart-layout {
    grid-template-columns: 1fr;
  }
  .full-cart-sidebar {
    position: static;
  }
}

/* Full cart rows — 2-row layout on small phones */
@media (max-width: 580px) {
  .full-cart-inner {
    padding: 1.5rem 1rem 4rem;
  }
  .full-cart-thead {
    display: none;
  }
  .full-cart-row {
    grid-template-columns: 1fr auto auto;
    grid-template-rows: auto auto;
    row-gap: 0.75rem;
  }
  .full-cart-product {
    grid-column: 1 / -1;
  }
  .full-cart-size-badge {
    grid-column: 1;
    align-self: center;
    justify-self: start;
  }
  .qty-control {
    grid-column: 2;
    align-self: center;
  }
  .full-cart-remove {
    grid-column: 3;
    align-self: center;
  }
}

/* Best sellers — extra small screens */
@media (max-width: 360px) {
  #bestSellersGrid { height: 280px; }
  .bs-card { width: 160px; }
  .bs-pos-right { transform: translateX(calc(-50% + 175px)) scale(0.72); }
  .bs-pos-left  { transform: translateX(calc(-50% - 175px)) scale(0.72); }
}

/* Footer padding on mobile */
@media (max-width: 640px) {
  .site-footer {
    padding: 3rem 1.25rem 2rem;
  }
}

/* Contact section padding */
@media (max-width: 640px) {
  #contactSection {
    padding: 3.5rem 1rem;
  }
}

/* ── Shop By Button ──────────────────────────────────────────────────────── */
#shopByBtn {
  display: flex;
  align-items: center;
  gap: 0.4rem;
  background: transparent;
  border: 1px solid #27272a;
  color: #a1a1aa;
  font-family: 'Inter', sans-serif;
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  padding: 0.4rem 0.75rem;
  border-radius: 0.5rem;
  cursor: none;
  transition: border-color 0.15s, color 0.15s, background 0.15s;
}
#shopByBtn:hover { border-color: #52525b; color: #fff; background: #0f0f0f; }
#shopByBtn.active { border-color: #fff; color: #fff; background: #0f0f0f; }

/* ── Shop By Overlay ─────────────────────────────────────────────────────── */
#shopByOverlay {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.78);
  z-index: 9000;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.3s ease;
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
}
#shopByOverlay.open {
  opacity: 1;
  pointer-events: all;
}

#shopByPanel {
  position: absolute;
  top: 60px;
  left: 0;
  right: 0;
  background: #000;
  border-bottom: 1px solid rgba(255,255,255,0.08);
  box-shadow: 0 12px 48px rgba(0,0,0,0.9);
  padding: 2rem 2rem 2.5rem;
  transform: translateY(-12px);
  transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  max-height: calc(50vh);
  overflow-y: auto;
}
#shopByOverlay.open #shopByPanel {
  transform: translateY(0);
}

.shopby-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 1.75rem;
  padding-bottom: 1rem;
  border-bottom: 1px solid rgba(255,255,255,0.08);
}
.shopby-title {
  font-family: 'Inter', sans-serif;
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 0.28em;
  color: rgba(255,255,255,0.35);
  text-transform: uppercase;
}
.shopby-close {
  background: transparent;
  border: 1px solid rgba(255,255,255,0.12);
  border-radius: 0.4rem;
  color: rgba(255,255,255,0.35);
  font-size: 0.72rem;
  font-family: 'Inter', sans-serif;
  cursor: none;
  padding: 0.3rem 0.65rem;
  letter-spacing: 0.1em;
  font-weight: 700;
  transition: border-color 0.15s, color 0.15s;
}
.shopby-close:hover { border-color: #fff; color: #fff; }

#shopByGrid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));
  gap: 0.75rem;
}

.shopby-cat {
  display: flex;
  flex-direction: column;
  gap: 0.35rem;
  background: #000;
  border: 1px solid rgba(255,255,255,0.08);
  border-radius: 0.65rem;
  padding: 1rem 1.25rem;
  cursor: none;
  transition: border-color 0.2s ease, background 0.2s ease, box-shadow 0.2s ease, transform 0.2s ease;
  text-align: left;
}
.shopby-cat:hover {
  border-color: rgba(255,255,255,0.5);
  background: #0a0a0a;
  box-shadow: 0 0 0 1px rgba(255,255,255,0.08), 0 4px 24px rgba(0,0,0,0.6);
  transform: translateY(-1px);
}
.shopby-cat-name {
  font-family: 'Inter', sans-serif;
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  color: #fff;
  text-transform: uppercase;
}
.shopby-cat-count {
  font-size: 0.62rem;
  color: rgba(255,255,255,0.25);
  letter-spacing: 0.1em;
  font-weight: 700;
}

@media (max-width: 640px) {
  #shopByPanel {
    padding: 1.5rem 1rem 2rem;
    max-height: 55vh;
  }
  #shopByGrid {
    grid-template-columns: repeat(2, 1fr);
    gap: 0.6rem;
  }
  #shopByBtn span { display: none; }
  /* Pull out of right group and anchor next to the shop icon on the left */
  #shopByBtn {
    position: absolute;
    left: 3.5rem;
    top: 50%;
    transform: translateY(-50%);
    padding: 0.4rem 0.6rem;
  }
}

/* ── Mobile Optimizations ────────────────────────────────────────────────── */

/* 1. Hero — shorter on mobile so shop is visible faster */
@media (max-width: 640px) {
  #hero {
    height: 75vh;
    min-height: 420px;
  }
  #logo3DCanvas {
    height: min(32vw, 180px);
  }
}

/* 2. Product overlay — remove sticky image, full-width CTA, better spacing */
@media (max-width: 760px) {
  .po-images {
    position: static !important;
  }
  .po-add-btn {
    padding: 1.1rem;
    font-size: 1rem;
  }
  .po-size-btn {
    min-width: 3.5rem;
    padding: 0.7rem 0.875rem;
    font-size: 0.78rem;
  }
  .po-color-btn {
    width: 2.5rem;
    height: 2.5rem;
  }
  .po-name {
    font-size: clamp(1.4rem, 6vw, 2rem);
  }
}

/* 3. Filter dropdown — taller items for touch */
@media (hover: none) and (pointer: coarse) {
  .filter-dropdown-item {
    padding: 0.85rem 1rem;
    font-size: 0.85rem;
  }
  .size-btn {
    padding: 0.5rem 0.75rem;
    font-size: 0.72rem;
    min-width: 2.5rem;
  }
  /* Ensure all tappable buttons meet 44px minimum (overridden in product cards) */
  .addBtn {
    min-height: 44px;
  }
  /* In product cards on mobile: full-width stacked, smaller height is fine */
  .product-row .addBtn {
    min-height: 36px;
  }
  .carousel-btn {
    width: 2.75rem;
    height: 2.75rem;
  }
  #cartStatus {
    min-height: 44px;
    padding: 0 0.75rem;
  }
  .shopby-cat {
    padding: 1.1rem 1.25rem;
  }
}

/* 4. Footer — cleaner stacking on small screens */
@media (max-width: 560px) {
  .site-footer {
    padding: 3rem 1.25rem 2rem;
  }
  .footer-bottom {
    flex-direction: column;
    align-items: flex-start;
    gap: 0.4rem;
  }
  .footer-cta-link {
    width: 100%;
    justify-content: center;
  }
}

/* 5. Best sellers header — stack cleanly on mobile */
@media (max-width: 640px) {
  .bs-filters {
    gap: 0.4rem;
    flex-wrap: wrap;
  }
  .bs-filter {
    padding: 0.45rem 0.875rem;
    font-size: 0.7rem;
  }
}

/* 6. Marquee — faster on mobile */
@media (max-width: 640px) {
  .marquee-track {
    animation-duration: 18s;
  }
}

/* 7. Product overlay top bar — better touch spacing */
@media (max-width: 640px) {
  .po-top-bar {
    position: sticky;
    top: 0;
    background: rgba(0,0,0,0.92);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    margin: -1.25rem -1rem 1.25rem;
    padding: 0.875rem 1rem;
    z-index: 10;
    border-bottom: 1px solid #1a1a1a;
  }
  .po-back {
    min-height: 36px;
    padding: 0.35rem 0.75rem;
  }
}