/* ── Brand tokens: only the two colours you chose ───────────── */
  :root{
    --carbon:#252627;        /* Carbon Black */
    --snow:#FFF9FB;          /* Snow */
    --carbon-60:rgba(37,38,39,.6);
    --carbon-12:rgba(37,38,39,.12);
    --snow-60:rgba(255,249,251,.6);
    --snow-15:rgba(255,249,251,.15);
  }
  *{margin:0;padding:0;box-sizing:border-box}
  html{scroll-behavior:smooth}
  body{
    background:var(--snow);
    color:var(--carbon);
    font-family:"Helvetica Neue",Helvetica,Arial,sans-serif;
    -webkit-font-smoothing:antialiased;
  }
  button{font-family:inherit;cursor:pointer}
  input,select,textarea{font-family:inherit}
  ::selection{background:var(--carbon);color:var(--snow)}

  .label{
    font-size:11px;letter-spacing:.18em;text-transform:uppercase;
    color:var(--carbon-60);font-weight:500;
  }

  /* ── Top bar ────────────────────────────────────────────────── */
  header{
    position:sticky;top:0;z-index:50;
    display:flex;align-items:center;justify-content:space-between;
    padding:18px 28px;background:var(--snow);
    border-bottom:1px solid var(--carbon-12);
  }
  .wordmark{
    font-weight:800;font-size:24px;letter-spacing:-.04em;
    color:var(--carbon);text-decoration:none;line-height:1;
  }
  .wordmark span{display:inline-block;transition:transform .25s}
  .wordmark:hover span{transform:translateY(-2px)}
  nav{display:flex;align-items:center;gap:22px}
  .nav-link{
    background:none;border:none;font-size:12px;letter-spacing:.16em;
    text-transform:uppercase;color:var(--carbon);padding:6px 2px;
    border-bottom:2px solid transparent;
  }
  .nav-link:hover,.nav-link.active{border-bottom-color:var(--carbon)}
  .cart-btn{position:relative}
  .cart-count{
    position:absolute;top:-8px;right:-14px;
    background:var(--carbon);color:var(--snow);
    font-size:10px;font-weight:700;min-width:17px;height:17px;
    border-radius:50%;display:flex;align-items:center;justify-content:center;
    padding:0 4px;
  }

  /* ── Hero ───────────────────────────────────────────────────── */
  .hero{padding:90px 28px 70px;border-bottom:1px solid var(--carbon-12);overflow:hidden}
  .hero h1{
    font-weight:800;letter-spacing:-.05em;line-height:.92;
    font-size:clamp(72px,17vw,220px);
  }
  .hero h1 .dot{display:inline-block;animation:blink 2.4s steps(1) infinite}
  @keyframes blink{0%,70%{opacity:1}71%,100%{opacity:0}}
  @media (prefers-reduced-motion: reduce){.hero h1 .dot{animation:none}}
  .hero p{margin-top:26px;max-width:420px;font-size:15px;line-height:1.6;color:var(--carbon-60)}

  /* ── Marquee strip (signature) ──────────────────────────────── */
  .strip{
    background:var(--carbon);color:var(--snow);
    overflow:hidden;white-space:nowrap;padding:12px 0;
    border-bottom:1px solid var(--carbon-12);
  }
  .strip-inner{display:inline-block;animation:slide 22s linear infinite;
    font-size:12px;letter-spacing:.3em;text-transform:uppercase}
  .strip-inner span{margin:0 34px}
  @keyframes slide{from{transform:translateX(0)}to{transform:translateX(-50%)}}
  @media (prefers-reduced-motion: reduce){.strip-inner{animation:none}}

  /* ── Product grid ───────────────────────────────────────────── */
  .shop{padding:60px 28px 100px;max-width:1280px;margin:0 auto}
  .shop-head{display:flex;justify-content:space-between;align-items:baseline;margin-bottom:34px}
  .shop-head h2{font-size:30px;font-weight:800;letter-spacing:-.03em}
  .grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(270px,1fr));gap:2px;background:var(--carbon-12);border:1px solid var(--carbon-12)}
  .card{background:var(--snow);padding:0;display:flex;flex-direction:column;transition:background .2s,color .2s}
  .card:hover{background:var(--carbon);color:var(--snow)}
  .card:hover .label,.card:hover .price{color:var(--snow-60)}
  .card-img{aspect-ratio:4/5;display:flex;align-items:center;justify-content:center;overflow:hidden;border-bottom:1px solid var(--carbon-12)}
  .card-img img{width:100%;height:100%;object-fit:cover;filter:grayscale(1);transition:filter .3s}
  .card:hover .card-img img{filter:grayscale(0)}
  .card-img .ph{font-weight:800;font-size:46px;letter-spacing:-.04em;opacity:.12}
  .card-body{padding:18px 18px 20px;display:flex;flex-direction:column;gap:10px;flex:1}
  .card-body h3{font-size:16px;font-weight:700;letter-spacing:-.01em}
  .price{font-size:14px;color:var(--carbon-60)}
  .sizes{display:flex;gap:6px;flex-wrap:wrap}
  .size{
    border:1px solid currentColor;background:transparent;color:inherit;
    font-size:11px;padding:5px 9px;min-width:32px;
  }
  .size.sel{background:var(--snow);color:var(--carbon)}
  .card:not(:hover) .size.sel{background:var(--carbon);color:var(--snow)}
  .add-btn{
    margin-top:auto;border:1px solid currentColor;background:transparent;color:inherit;
    padding:11px;font-size:12px;letter-spacing:.16em;text-transform:uppercase;font-weight:600;
  }
  .add-btn:hover{background:var(--snow);color:var(--carbon)}
  .card:not(:hover) .add-btn:hover{background:var(--carbon);color:var(--snow)}
  .empty-shop{padding:80px 0;text-align:center;color:var(--carbon-60);grid-column:1/-1;background:var(--snow)}

  /* ── Cart drawer ────────────────────────────────────────────── */
  .overlay{position:fixed;inset:0;background:rgba(37,38,39,.45);z-index:90;opacity:0;pointer-events:none;transition:opacity .25s}
  .overlay.open{opacity:1;pointer-events:auto}
  .drawer{
    position:fixed;top:0;right:0;height:100%;width:min(420px,100%);
    background:var(--snow);z-index:100;transform:translateX(100%);
    transition:transform .3s;display:flex;flex-direction:column;
    border-left:1px solid var(--carbon-12);
  }
  .drawer.open{transform:translateX(0)}
  .drawer-head{display:flex;justify-content:space-between;align-items:center;padding:22px 24px;border-bottom:1px solid var(--carbon-12)}
  .drawer-head h3{font-size:18px;font-weight:800;letter-spacing:-.02em}
  .x-btn{background:none;border:none;font-size:22px;line-height:1;color:var(--carbon)}
  .cart-items{flex:1;overflow-y:auto;padding:8px 24px}
  .cart-row{display:flex;justify-content:space-between;align-items:center;gap:12px;padding:16px 0;border-bottom:1px solid var(--carbon-12)}
  .cart-row .info{flex:1}
  .cart-row .info strong{font-size:14px;display:block}
  .cart-row .info span{font-size:12px;color:var(--carbon-60)}
  .qty{display:flex;align-items:center;gap:8px}
  .qty button{width:24px;height:24px;border:1px solid var(--carbon);background:none;font-size:14px}
  .rm{background:none;border:none;font-size:11px;letter-spacing:.1em;text-transform:uppercase;color:var(--carbon-60);text-decoration:underline}
  .drawer-foot{padding:20px 24px;border-top:1px solid var(--carbon-12)}
  .total-row{display:flex;justify-content:space-between;font-weight:800;font-size:17px;margin-bottom:14px}
  .pay-btn{
    width:100%;background:var(--carbon);color:var(--snow);border:1px solid var(--carbon);
    padding:15px;font-size:13px;letter-spacing:.16em;text-transform:uppercase;font-weight:700;
  }
  .pay-btn:hover{background:var(--snow);color:var(--carbon)}
  .pay-note{margin-top:10px;font-size:11px;color:var(--carbon-60);line-height:1.5;text-align:center}

  /* ── Admin ──────────────────────────────────────────────────── */
  .admin{display:none;padding:60px 28px 100px;max-width:1100px;margin:0 auto}
  .admin.show{display:block}
  .admin h2{font-size:30px;font-weight:800;letter-spacing:-.03em;margin-bottom:6px}
  .admin .sub{color:var(--carbon-60);font-size:14px;margin-bottom:40px}
  .panel{border:1px solid var(--carbon-12);padding:28px;margin-bottom:40px;background:var(--snow)}
  .panel h3{font-size:18px;font-weight:800;letter-spacing:-.02em;margin-bottom:20px}
  .form-grid{display:grid;grid-template-columns:1fr 1fr;gap:16px}
  .form-grid .full{grid-column:1/-1}
  .field label{display:block;margin-bottom:6px}
  .field input,.field textarea{
    width:100%;border:1px solid var(--carbon);background:var(--snow);color:var(--carbon);
    padding:11px 12px;font-size:14px;
  }
  .field input:focus,.field textarea:focus{outline:2px solid var(--carbon);outline-offset:1px}
  .btn-dark{
    background:var(--carbon);color:var(--snow);border:1px solid var(--carbon);
    padding:12px 26px;font-size:12px;letter-spacing:.16em;text-transform:uppercase;font-weight:700;
  }
  .btn-dark:hover{background:var(--snow);color:var(--carbon)}
  .btn-ghost{
    background:none;border:1px solid var(--carbon);color:var(--carbon);
    padding:8px 14px;font-size:11px;letter-spacing:.12em;text-transform:uppercase;
  }
  .btn-ghost:hover{background:var(--carbon);color:var(--snow)}
  table{width:100%;border-collapse:collapse;font-size:13px}
  th{text-align:left;padding:10px 12px;border-bottom:1px solid var(--carbon);font-size:11px;letter-spacing:.14em;text-transform:uppercase;color:var(--carbon-60);font-weight:600}
  td{padding:12px;border-bottom:1px solid var(--carbon-12);vertical-align:top}
  .stat-row{display:grid;grid-template-columns:repeat(3,1fr);gap:2px;background:var(--carbon-12);border:1px solid var(--carbon-12);margin-bottom:40px}
  .stat{background:var(--carbon);color:var(--snow);padding:24px}
  .stat .label{color:var(--snow-60)}
  .stat strong{display:block;font-size:34px;font-weight:800;letter-spacing:-.03em;margin-top:6px}
  .muted{color:var(--carbon-60)}

  /* ── Toast ──────────────────────────────────────────────────── */
  .toast{
    position:fixed;bottom:26px;left:50%;transform:translate(-50%,80px);
    background:var(--carbon);color:var(--snow);padding:13px 22px;
    font-size:13px;letter-spacing:.04em;z-index:200;transition:transform .3s;
  }
  .toast.show{transform:translate(-50%,0)}

  footer{border-top:1px solid var(--carbon-12);padding:34px 28px;display:flex;justify-content:space-between;align-items:center;flex-wrap:wrap;gap:12px}
  footer .wordmark{font-size:17px}
  footer p{font-size:11px;color:var(--carbon-60);letter-spacing:.08em}

  @media(max-width:640px){
    .hero{padding:60px 20px 50px}
    .shop,.admin{padding:44px 20px 80px}
    .form-grid{grid-template-columns:1fr}
    .stat-row{grid-template-columns:1fr}
    header{padding:14px 20px}
  }