/* ==========================================================================
   Shop + admin. Inherits every token from style.css, so it follows whichever
   ground (dark or light) the site ends up on without a second palette.
   ========================================================================== */

.shop{ padding:clamp(2.5rem,7vw,5.5rem) var(--pad); max-width:var(--maxw); margin:0 auto; }

/* auto-FIT, not auto-fill: with 3 products in a 4-track row, auto-fill keeps the
   empty track and paints it with the grid's rule colour — a grey block sitting
   next to the cards. auto-fit collapses the empty track and the cards stretch. */
.grid{
  display:grid; grid-template-columns:repeat(auto-fit,minmax(260px,1fr));
  gap:1px; background:var(--rule); border:1px solid var(--rule); margin-top:2rem;
}
.p{ background:var(--ground); padding:clamp(1.3rem,3vw,1.9rem); min-width:0;
    display:flex; flex-direction:column; gap:.55rem; }
.p-cat{ font-family:var(--mono); font-size:.68rem; letter-spacing:.14em;
        text-transform:uppercase; color:var(--red); }
.p-name{ font-family:var(--display); font-variation-settings:'wght' 800;
         text-transform:uppercase; font-size:1.3rem; line-height:1.02; margin:0; }
.p-blurb{ color:var(--ink-dim); font-size:.94rem; margin:0; }
/* Wrap as whole items, never mid-phrase: "50 mg or 100 mg" beside "Price on
   request" squeezed both into two broken lines ("Price on / request"). */
.p-meta{ display:flex; flex-wrap:wrap; gap:.25rem .9rem; align-items:baseline; margin-top:auto;
         padding-top:.7rem; font-family:var(--mono); font-size:.8rem; }
.p-meta > *{ white-space:nowrap; }
.p-price{ color:var(--ink); font-size:1.05rem; }
.p-size{ color:var(--ink-dim); }
.p-draft{ font-family:var(--mono); font-size:.68rem; letter-spacing:.1em;
          text-transform:uppercase; color:#fff3f2; background:var(--red-deep);
          padding:.2rem .5rem; align-self:flex-start; }

.empty{ border:1px dashed var(--rule); padding:clamp(1.6rem,5vw,3rem); text-align:center;
        color:var(--ink-dim); margin-top:2rem; }
.empty strong{ color:var(--ink); display:block; margin-bottom:.5rem;
               font-family:var(--display); text-transform:uppercase; font-size:1.2rem; }

/* ---------- compliance banner: factual, and it stays ---------- */
.scope{
  border-left:3px solid var(--red); background:var(--ground-2);
  padding:1rem 1.15rem; margin:1.6rem 0; font-size:.9rem; color:var(--ink-dim);
  max-width:72ch;
}
.scope strong{color:var(--ink)}

/* ---------- admin ---------- */
.admin-bar{ display:flex; flex-wrap:wrap; gap:.7rem; align-items:center; margin:1.5rem 0; }
.tbl{ width:100%; border-collapse:collapse; margin-top:1rem; font-size:.9rem; }
.tbl th,.tbl td{ text-align:left; padding:.7rem .6rem; border-bottom:1px solid var(--rule);
                 vertical-align:top; }
.tbl th{ font-family:var(--mono); font-size:.68rem; letter-spacing:.12em;
         text-transform:uppercase; color:var(--ink-dim); }
.tbl td:last-child{ white-space:nowrap; }
.pill{ font-family:var(--mono); font-size:.66rem; letter-spacing:.09em; text-transform:uppercase;
       padding:.18rem .5rem; border:1px solid var(--rule); color:var(--ink-dim); }
.pill.on{ background:var(--red); border-color:var(--red); color:#fff; }
.mini{ font-size:.76rem; padding:.42rem .8rem; }
.danger{ background:transparent; box-shadow:inset 0 0 0 1px var(--red); color:var(--red); }
.danger:hover,.danger:focus-visible{ background:var(--red); color:#fff; }

.panel{ border:1px solid var(--rule); padding:clamp(1.2rem,3vw,1.8rem); margin-top:1.8rem;
        background:var(--ground-2); }
.panel h3{ font-family:var(--display); text-transform:uppercase; margin:0 0 1rem;
           font-variation-settings:'wght' 800; }
.msg{ font-family:var(--mono); font-size:.8rem; padding:.7rem .9rem; margin:1rem 0; }
.msg.ok{ background:var(--ground-2); color:var(--ink); border-left:3px solid var(--red); }
.msg.err{ background:var(--red-deep); color:#fff3f2; }
@media (max-width:640px){
  .tbl thead{display:none}
  .tbl tr{display:block;border-bottom:1px solid var(--rule);padding:.6rem 0}
  .tbl td{display:flex;justify-content:space-between;gap:1rem;border:0;padding:.28rem .2rem}
  .tbl td::before{content:attr(data-l);font-family:var(--mono);font-size:.66rem;
                  letter-spacing:.1em;text-transform:uppercase;color:var(--ink-dim)}
}

/* ---------- product packaging art ----------
   Vector renders of the packaging, not photographs. They must be replaced with
   real product photos before launch — see CONTENT-NEEDED.md §7. */
.p-img{
  width:100%; max-width:165px; height:auto; margin:0 auto .5rem; display:block;
  /* No mix-blend-mode here. multiply erases white, which is exactly what the
     glass rendering is made of — highlights, rim light, the specular strip. The
     SVGs carry no background rect, so they already sit transparently on the
     paper ground without it. */
}
@media (max-width:520px){ .p-img{max-width:135px} }

/* ---------- phone pass ---------- */
@media (max-width:620px){
  .p{padding:1.3rem 1.1rem}
  .p-cat{font-size:.72rem}
  .p-name{font-size:1.18rem}
  .p-meta{padding-top:.9rem}
  .scope{padding:.9rem 1rem; font-size:.88rem}
  /* Measured 40px — padding-guessing missed the 44 floor a THIRD time.
     Covers the panel's Save/Cancel too: they sit in an .admin-bar as well. */
  .admin-bar .btn{
    min-height:44px; display:inline-flex; align-items:center; justify-content:center;
    padding:0 1.2rem;
  }
  /* Measured 48x35 / 59x35 — under the 44px tap floor. Padding-guessing got
     them close twice; min-height is the deterministic fix. */
  .tbl td .btn{
    min-height:44px; display:inline-flex; align-items:center; justify-content:center;
    padding:0 1.1rem; margin:0;
  }
  /* The action cell is the one row that shouldn't be a label/value pair. */
  .tbl td:last-child{
    justify-content:flex-start; gap:.6rem; padding-top:.7rem; padding-bottom:.2rem;
  }
  .tbl td:last-child::before{display:none}
}

/* ==========================================================================
   CART — client-side order builder. No payment rail: it produces an order
   summary sent by email and paid manually by Zelle.
   ========================================================================== */
.nav-cart{
  font-family:var(--display); font-variation-settings:'wght' 700;
  text-transform:uppercase; font-size:.79rem; letter-spacing:.02em;
  background:var(--red-btn,#d81409); color:#fff; border:0; cursor:pointer;
  padding:.62rem 1.05rem; min-height:44px; display:inline-flex; align-items:center; gap:.5rem;
  clip-path:polygon(11px 0,100% 0,calc(100% - 11px) 100%,0 100%);
}
.nav-cart:hover{background:var(--ink);color:#fff}
.cart-count{
  font-family:var(--mono); font-size:.72rem; background:#fff; color:#15110f;
  min-width:1.3rem; height:1.3rem; border-radius:1rem; display:inline-flex;
  align-items:center; justify-content:center; padding:0 .3rem; font-weight:600;
}
.cart-count.bump{animation:cbump .3s ease}
@keyframes cbump{0%{transform:scale(1)}40%{transform:scale(1.4)}100%{transform:scale(1)}}

.p-add{width:100%; margin-top:.9rem; text-align:center; justify-content:center}
.p-add:disabled{opacity:.4; cursor:not-allowed}
.p-add:disabled:hover{background:var(--red-btn,#d81409); transform:none}

.cart-scrim{position:fixed; inset:0; background:rgba(0,0,0,.55); z-index:80}
.cart{
  position:fixed; top:0; right:0; height:100%; width:min(400px,92vw); z-index:90;
  background:var(--ground); border-left:1px solid var(--rule);
  transform:translateX(100%); transition:transform .25s ease;
  display:flex; flex-direction:column;
}
.cart.on{transform:none}
.cart-head{
  display:flex; align-items:center; justify-content:space-between;
  padding:1.1rem 1.2rem; border-bottom:1px solid var(--rule);
}
.cart-h{font-family:var(--display); text-transform:uppercase; margin:0;
        font-variation-settings:'wght' 800; font-size:1.25rem}
.cart-x{background:none; border:0; color:var(--ink); font-size:2rem; line-height:1;
        cursor:pointer; min-height:44px; min-width:44px}
.cart-body{flex:1; overflow-y:auto; padding:1rem 1.2rem}
.cart-empty{color:var(--ink-dim); font-family:var(--mono); font-size:.9rem}
.cart-line{display:grid; grid-template-columns:1fr auto auto; gap:.6rem 1rem;
           align-items:center; padding:.85rem 0; border-bottom:1px solid var(--rule)}
.cart-line-info{display:flex; flex-direction:column; gap:.15rem; min-width:0}
.cart-line-name{font-weight:600; font-size:.95rem}
.cart-line-size{font-family:var(--mono); font-size:.76rem; color:var(--ink-dim)}
.cart-line-price{font-family:var(--mono); font-size:.72rem; color:var(--ink-dim)}
.cart-qty{display:flex; align-items:center; gap:.1rem}
.qbtn{width:32px; height:44px; background:transparent; border:1px solid var(--rule);
      color:var(--ink); cursor:pointer; font-size:1.1rem; line-height:1}
.qbtn:hover{border-color:var(--ink-dim)}
.qval{font-family:var(--mono); min-width:2rem; text-align:center; font-size:.95rem}
.cart-line-sub{font-family:var(--mono); font-size:.95rem; white-space:nowrap}
.cart-foot{border-top:1px solid var(--rule); padding:1.1rem 1.2rem;
           display:flex; flex-direction:column; gap:.7rem}
.cart-total{display:flex; justify-content:space-between; align-items:baseline;
            font-family:var(--display); font-variation-settings:'wght' 800;
            text-transform:uppercase; font-size:1.3rem}
.cart-note{font-family:var(--mono); font-size:.72rem; color:var(--ink-dim); line-height:1.55; margin:0}
.cart-foot .btn{width:100%; text-align:center; justify-content:center}

/* ---------- admin photo upload ---------- */
.photo-field{margin:0 0 1rem}
.photo-row{display:flex; align-items:center; gap:1rem; flex-wrap:wrap}
.photo-prev{width:96px; height:96px; object-fit:contain; background:#fff;
            border:1px solid var(--rule); border-radius:4px; padding:4px}
.photo-actions{display:flex; align-items:center; gap:.6rem; flex-wrap:wrap}
.photo-pick{cursor:pointer}
.photo-actions select{padding-right:2.2rem}

/* ---------- admin packaging templates ---------- */
.tpl-grid{display:grid; grid-template-columns:repeat(auto-fill,minmax(120px,1fr)); gap:1rem; margin:.8rem 0}
.tpl-card{border:1px solid var(--rule); border-radius:4px; padding:.6rem; text-align:center}
.tpl-card img{width:100%; height:96px; object-fit:contain; background:#fff; border-radius:4px}
.tpl-card p{font-family:var(--mono); font-size:.72rem; margin:.5rem 0; word-break:break-word}

/* ---------- alternate payment (Venmo) ---------- */
.pay-alt{margin-top:1.4rem; padding-top:1.2rem; border-top:1px solid var(--rule)}
.pay-alt-h{font-family:var(--display); text-transform:uppercase; margin:0 0 .5rem;
           font-variation-settings:'wght' 800; font-size:1.05rem}
.pay-qr{width:180px; height:180px; background:#fff; padding:8px; border-radius:6px;
        margin-top:.6rem; display:block}

/* ---------- checkout ---------- */
.checkout{ padding:clamp(2rem,5vw,3.5rem) var(--pad); max-width:var(--maxw); margin:0 auto; }
.checkout-grid{ display:grid; grid-template-columns:1.4fr 1fr; gap:clamp(1.5rem,4vw,3rem); align-items:start; }
@media (max-width:760px){ .checkout-grid{ grid-template-columns:1fr; } }
.checkout-summary{ background:var(--ground-2); border:1px solid var(--rule);
                   padding:clamp(1.2rem,3vw,1.6rem); position:sticky; top:1rem; }
.cs-h{ font-family:var(--display); text-transform:uppercase; margin:0 0 1rem;
       font-variation-settings:'wght' 800; font-size:1.15rem; }
.cs-line{ display:flex; justify-content:space-between; gap:1rem; font-size:.86rem;
          padding:.35rem 0; color:var(--ink-dim); }
.cs-row{ display:flex; justify-content:space-between; gap:1rem; padding:.4rem 0;
         font-family:var(--mono); font-size:.9rem; border-top:1px solid var(--rule); margin-top:.3rem; }
.cs-total{ font-family:var(--display); font-variation-settings:'wght' 800;
           text-transform:uppercase; font-size:1.2rem; border-top:2px solid var(--ink); margin-top:.5rem; padding-top:.6rem; }
.checkout-summary .btn{ width:100%; text-align:center; justify-content:center; margin-top:.8rem; }

/* ---------- checkout payment methods ---------- */
.checkout-pay{ margin-top:1.2rem; padding-top:1.1rem; border-top:1px solid var(--rule); }
.cp-h{ font-family:var(--display); text-transform:uppercase; margin:0 0 .8rem;
       font-variation-settings:'wght' 800; font-size:.95rem; }
.pay-methods{ display:flex; flex-wrap:wrap; gap:1.2rem; }
.pay-m{ display:flex; flex-direction:column; gap:.5rem; }
.pay-m-label{ font-family:var(--mono); font-size:.8rem; color:var(--ink); }
.pay-m-label a{ color:var(--red); }
.pay-m-qr{ width:150px; height:150px; background:#fff; padding:8px; border-radius:6px; }
.pay-m-note{ font-family:var(--mono); font-size:.72rem; color:var(--ink-dim); max-width:22ch; margin:0; }

/* ---------- stacks ---------- */
.stacks-wrap{ margin-top:clamp(2rem,5vw,3.5rem); }
.stacks-wrap .grid{ margin-top:1.4rem; }