/* ===========================================================================
   GEAR GARAGE BD :: shared shop furniture
   ---------------------------------------------------------------------------
   Two jobs in one file. The TOKENS + BASE blocks let product.html, account.html
   and reset.html stand on their own without repeating the home page's inline
   sheet. Everything from CART DRAWER down is also pulled in by index.html, so
   the cart and the account button look the same wherever they turn up.
   =========================================================================== */

/* ------------------------------------------------------------------ tokens */
:root{
  --canvas:#0C1014;
  --canvas-2:#11171D;
  --panel:#161E26;
  --accent:#5AB0E0;
  --accent-hover:#86C9EE;
  --accent-muted:rgba(90,176,224,.18);
  --amber:#D9A05B;
  --violet:#8E76D8;
  --text-primary:#E6EDF3;
  --text-secondary:#93A3B1;
  --hairline:rgba(147,163,177,.16);
  --border-strong:rgba(147,163,177,.34);
  --danger:#E0715A;
  --ok:#6FBF8B;

  --display:"Chakra Petch",system-ui,sans-serif;
  --body:"Barlow",system-ui,sans-serif;
  --mono:"JetBrains Mono",ui-monospace,monospace;

  --ease:cubic-bezier(.22,.61,.36,1);
  --ease-soft:cubic-bezier(.4,0,.2,1);

  --gut:clamp(20px,5vw,72px);
  --maxw:1280px;
}

/* -------------------------------------------------------------------- base */
/* index.html carries its own copy of these, so guard them behind the page
   marker to avoid fighting with it. */
body[data-page]{
  margin:0;background:var(--canvas);color:var(--text-primary);
  font-family:var(--body);font-size:clamp(16px,1.05vw,18px);line-height:1.62;
  -webkit-font-smoothing:antialiased;
}
body[data-page] img{max-width:100%;display:block}
body[data-page] h1,
body[data-page] h2,
body[data-page] h3{font-family:var(--display);font-weight:700;line-height:1.06;
  letter-spacing:-.015em;margin:0}
body[data-page] a{color:var(--accent)}
body[data-page] *:focus-visible{outline:2px solid var(--accent);outline-offset:3px}

.kicker{font-family:var(--mono);font-size:11.5px;letter-spacing:.2em;
  text-transform:uppercase;color:var(--accent);margin:0 0 14px}
.muted{color:var(--text-secondary)}
.wrapx{max-width:var(--maxw);margin:0 auto;padding:0 var(--gut)}

/* buttons, matching the home page exactly */
body[data-page] .btn{display:inline-flex;align-items:center;justify-content:center;gap:10px;
  font-family:var(--mono);font-size:12.5px;letter-spacing:.13em;text-transform:uppercase;
  padding:13px 24px;border-radius:2px;text-decoration:none;cursor:pointer;
  border:1px solid transparent;
  transition:background .38s var(--ease-soft),color .38s var(--ease-soft),
             border-color .38s var(--ease-soft),transform .38s var(--ease)}
body[data-page] .btn--primary{background:var(--accent);color:#070B0F;font-weight:500}
body[data-page] .btn--primary:hover{background:var(--accent-hover);transform:translateY(-2px)}
body[data-page] .btn--ghost{border-color:var(--border-strong);color:var(--text-primary);
  background:transparent}
body[data-page] .btn--ghost:hover{border-color:var(--accent);color:var(--accent)}
.btn[disabled]{opacity:.5;cursor:not-allowed;transform:none!important}
/* the same look for a link that cannot be followed, which cannot be [disabled] */
.btn--off{opacity:.5;cursor:not-allowed;transform:none!important;pointer-events:none}
.btn.small{padding:9px 15px;font-size:11px}
.btn.wide{width:100%}
.btn.danger{color:var(--danger);border-color:rgba(224,113,90,.4)}
.btn.danger:hover{border-color:var(--danger);color:var(--danger)}

.linkbtn{background:none;border:0;padding:0;cursor:pointer;color:var(--accent);
  font-family:var(--mono);font-size:11.5px;letter-spacing:.1em;text-transform:uppercase}
.linkbtn:hover{color:var(--accent-hover)}
.linkbtn.danger{color:var(--danger)}

/* A photo still on its way, anywhere on the site. The class goes on the image
   itself and comes off the moment it paints, so the square reads as loading
   rather than as an empty hole while a phone is still pulling it down. */
img.ph-wait{
  background-color:var(--canvas-2);
  background-image:linear-gradient(100deg,
    rgba(147,163,177,0) 22%,rgba(147,163,177,.09) 44%,
    rgba(147,163,177,.17) 50%,rgba(147,163,177,.09) 56%,rgba(147,163,177,0) 78%);
  background-size:220% 100%;
  animation:ph-wait 1.5s linear infinite}
@keyframes ph-wait{from{background-position:170% 0} to{background-position:-70% 0}}
@media (prefers-reduced-motion:reduce){
  img.ph-wait{animation:none;background-image:none}}

/* -------------------------------------------------------------- shared nav */
.shopnav{position:sticky;top:0;z-index:60;display:flex;align-items:center;gap:18px;
  padding:14px var(--gut);background:rgba(12,16,20,.92);
  backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);
  border-bottom:1px solid var(--hairline)}
.shopnav__brand{font-family:var(--display);font-weight:700;font-size:16px;
  letter-spacing:.02em;text-decoration:none;color:var(--text-primary);
  display:flex;align-items:center;gap:9px}
.shopnav__brand em{font-style:normal;color:var(--accent)}
.shopnav__brand i{width:9px;height:9px;border-radius:50%;background:var(--amber);
  box-shadow:0 0 12px rgba(217,160,91,.7)}
.shopnav__sp{flex:1}
.shopnav__back{font-family:var(--mono);font-size:11.5px;letter-spacing:.14em;
  text-transform:uppercase;color:var(--text-secondary);text-decoration:none}
.shopnav__back:hover{color:var(--accent)}

/* ------------------------------------------- cart button + account control */
/* these ride in index.html's own .nav as well as .shopnav */
.navcart{position:relative;display:inline-flex;align-items:center;justify-content:center;
  width:40px;height:40px;border-radius:2px;cursor:pointer;
  background:transparent;border:1px solid var(--border-strong);color:var(--text-primary);
  transition:border-color .3s var(--ease-soft),color .3s var(--ease-soft)}
.navcart:hover{border-color:var(--accent);color:var(--accent)}
/* Search and cart are one pair of controls, so they sit closer to each other
   than to the links beside them. Both bars space their children with gap, so
   the pull has to be negative and it has to know which bar it is in. */
.nav__links .navfind + .navcart{margin-left:-16px}
.shopnav .navfind + .navcart{margin-left:-8px}
.navcart__n{position:absolute;top:-7px;right:-7px;min-width:19px;height:19px;
  border-radius:19px;background:var(--accent);color:#070B0F;
  font-family:var(--mono);font-size:10.5px;font-weight:500;line-height:19px;
  text-align:center;padding:0 5px}

.navwho{display:inline-flex;align-items:center;gap:9px;text-decoration:none;
  padding:5px 12px 5px 5px;border-radius:22px;border:1px solid var(--border-strong);
  color:var(--text-primary);transition:border-color .3s var(--ease-soft)}
.navwho:hover{border-color:var(--accent)}
.navwho__pic{width:30px;height:30px;border-radius:50%;object-fit:cover;
  background:var(--panel);display:block}
.navwho__ini{width:30px;height:30px;border-radius:50%;display:grid;place-items:center;
  background:var(--accent-muted);color:var(--accent);
  font-family:var(--mono);font-size:12px;text-transform:uppercase}
.navwho__nm{font-family:var(--mono);font-size:11.5px;letter-spacing:.1em;
  text-transform:uppercase;max-width:120px;overflow:hidden;text-overflow:ellipsis;
  white-space:nowrap}
@media (max-width:720px){ .navwho__nm{display:none} .navwho{padding:5px} }

/* ------------------------------------------------------ the photo, full size */
/* Sits above everything, the cart included, because it is opened from the page
   underneath and closed again straight away. The picture is never enlarged past
   its own size: contain inside the screen means a small photo stays small and
   honest rather than being blown up into mush.
   Flex and not grid, which this was first: a grid row sizes itself to its
   content, so max-height:100% on the picture resolved against the picture and a
   tall photo ran off the bottom of a wide screen. A flex container keeps the
   definite height it gets from inset:0, which is what the percentage needs. */
.zoom{position:fixed;inset:0;z-index:200;display:flex;align-items:center;justify-content:center;
  padding:clamp(12px,3vw,34px);background:#030507;
  opacity:0;transition:opacity .3s var(--ease-soft)}
body.zoom-on .zoom{opacity:1}
/* nothing scrolls behind the photo while it is up */
body.zoom-on{overflow:hidden}
.zoom__img{max-width:100%;max-height:100%;width:auto;height:auto;object-fit:contain;
  border-radius:3px;transform:scale(.98);transition:transform .3s var(--ease)}
body.zoom-on .zoom__img{transform:none}
.zoom__close{position:absolute;top:clamp(10px,2.5vw,22px);right:clamp(10px,2.5vw,22px);
  background:var(--canvas-2);border:1px solid var(--border-strong);border-radius:2px;
  color:var(--text-primary);cursor:pointer;padding:10px 15px;
  font-family:var(--mono);font-size:11px;letter-spacing:.13em;text-transform:uppercase;
  transition:color .3s var(--ease-soft),border-color .3s var(--ease-soft)}
.zoom__close:hover{color:var(--accent);border-color:var(--accent)}
/* On a phone the padded version gains almost nothing: the photo already fills
   the column at 333px and the overlay would hand it 351. Edge to edge is the
   whole point of opening it, so on a small screen the frame goes away. */
@media (max-width:719px){
  .zoom{padding:0}
  .zoom__img{border-radius:0}
}

/* ------------------------------------------------------------- cart drawer */
.cart-scrim{position:fixed;inset:0;z-index:130;background:rgba(4,6,9,.72);
  opacity:0;transition:opacity .3s var(--ease-soft)}
body.cart-on .cart-scrim{opacity:1}
.cart{position:fixed;top:0;right:0;bottom:0;width:min(420px,92vw);z-index:131;
  background:var(--canvas-2);border-left:1px solid var(--hairline);
  display:flex;flex-direction:column;
  transform:translateX(100%);transition:transform .34s var(--ease)}
body.cart-on .cart{transform:none}
.cart__head{display:flex;align-items:center;gap:12px;padding:18px 20px;
  border-bottom:1px solid var(--hairline)}
.cart__title{font-family:var(--display);font-weight:700;font-size:15px;
  letter-spacing:.02em;flex:1}
.cart__close{background:none;border:0;color:var(--text-secondary);cursor:pointer;
  font-family:var(--mono);font-size:11.5px;letter-spacing:.14em;text-transform:uppercase}
.cart__close:hover{color:var(--accent)}
.cart__body{flex:1;overflow-y:auto;padding:16px 20px}
.cart__foot{border-top:1px solid var(--hairline);padding:16px 20px}

.cline{display:flex;gap:12px;padding:12px 0;border-bottom:1px solid var(--hairline)}
.cline__ph{width:58px;height:58px;flex:0 0 58px;border-radius:2px;overflow:hidden;
  background:var(--panel)}
.cline__ph img{width:100%;height:100%;object-fit:cover}
.cline__mid{flex:1;min-width:0}
.cline__nm{font-size:14.5px;line-height:1.3;margin:0 0 3px}
.cline__var{font-family:var(--mono);font-size:10.5px;letter-spacing:.1em;
  text-transform:uppercase;color:var(--text-secondary)}
.cline__end{text-align:right;display:flex;flex-direction:column;
  justify-content:space-between;align-items:flex-end;gap:8px}
.cline__price{font-family:var(--mono);font-size:12.5px}
.qty{display:inline-flex;align-items:center;border:1px solid var(--border-strong);
  border-radius:2px;overflow:hidden}
.qty button{width:26px;height:26px;background:none;border:0;color:var(--text-primary);
  cursor:pointer;font-size:15px;line-height:1}
.qty button:hover{background:var(--accent-muted);color:var(--accent)}
.qty span{min-width:26px;text-align:center;font-family:var(--mono);font-size:12px}
.cart__sum{display:flex;justify-content:space-between;align-items:baseline;
  margin-bottom:14px;font-family:var(--mono);font-size:13px}
.cart__sum b{font-size:17px}
.cart__stop:not(:empty){margin-bottom:14px}
/* a line still in the cart that cannot be sold today: legible, but plainly
   not part of the number at the bottom */
.cline--gone{opacity:.62}
.cline--gone .cline__ph{filter:grayscale(1)}
.cline__gone{display:block;margin-top:3px;font-family:var(--mono);font-size:10px;
  letter-spacing:.12em;text-transform:uppercase;color:var(--danger)}

/* ============================================================
   SEARCH
   ============================================================
   A dialog, not a dropdown under the button. On a phone a dropdown hanging
   off a 40px control is a letterbox, and the same markup then works over the
   home page and the product page without either of them knowing about it. */
.find-scrim{position:fixed;inset:0;z-index:140;background:rgba(4,6,9,.74);
  opacity:0;transition:opacity .26s var(--ease-soft)}
body.find-on .find-scrim{opacity:1}
.find{position:fixed;z-index:141;left:50%;top:0;width:min(680px,94vw);
  transform:translate(-50%,-14px);opacity:0;
  margin-top:clamp(14px,7vh,72px);
  background:var(--canvas-2);border:1px solid var(--hairline);border-radius:3px;
  box-shadow:0 30px 80px rgba(0,0,0,.55);
  display:flex;flex-direction:column;max-height:min(76vh,720px);
  transition:transform .26s var(--ease),opacity .26s var(--ease-soft)}
body.find-on .find{transform:translate(-50%,0);opacity:1}

.find__bar{display:flex;align-items:center;gap:12px;padding:14px 16px;
  border-bottom:1px solid var(--hairline)}
.find__i{color:var(--text-secondary);display:flex;flex:0 0 auto}
.find__in{flex:1;min-width:0;background:none;border:0;color:var(--text-primary);
  font-family:var(--body);font-size:17px;padding:4px 0}
.find__in::placeholder{color:var(--text-secondary)}
.find__in:focus{outline:none}
.find__in::-webkit-search-cancel-button{-webkit-appearance:none}
.find__x{background:none;border:0;cursor:pointer;color:var(--text-secondary);
  font-family:var(--mono);font-size:11px;letter-spacing:.14em;text-transform:uppercase}
.find__x:hover{color:var(--accent)}

.find__out{overflow-y:auto;padding:8px 8px 12px;-webkit-overflow-scrolling:touch}
.find__head{font-family:var(--mono);font-size:10px;letter-spacing:.18em;
  text-transform:uppercase;color:var(--text-secondary);margin:10px 10px 6px}
.find__wait{margin:18px 10px}
.find__chips{display:flex;flex-wrap:wrap;gap:7px;padding:0 8px 4px}
.find__chip{background:none;border:1px solid var(--hairline);border-radius:2px;
  color:var(--text-secondary);cursor:pointer;padding:6px 11px;
  font-family:var(--mono);font-size:10.5px;letter-spacing:.1em;text-transform:uppercase;
  transition:border-color .3s var(--ease-soft),color .3s var(--ease-soft)}
.find__chip:hover{border-color:var(--accent);color:var(--accent)}
.find__none{padding:16px 10px 4px}
.find__none p{margin:0 0 6px;font-size:15px}

.fres{display:flex;align-items:center;gap:13px;padding:9px 10px;border-radius:2px;
  text-decoration:none;color:var(--text-primary)}
.fres.is-on{background:var(--accent-muted)}
.fres__ph{width:46px;height:46px;flex:0 0 46px;border-radius:2px;overflow:hidden;
  background:var(--panel)}
.fres__ph img{width:100%;height:100%;object-fit:cover}
.fres__mid{flex:1;min-width:0}
.fres__nm{display:block;font-size:15px;line-height:1.25}
.fres__ln{display:block;font-size:12.5px;line-height:1.35;color:var(--text-secondary);
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.fres__pr{flex:0 0 auto;font-family:var(--mono);font-size:12px;
  color:var(--text-secondary)}

/* On a phone it takes the whole screen. Half a panel with a keyboard under it
   is not enough room to read a result, let alone six. */
@media (max-width:560px){
  .find{width:100vw;max-width:none;margin-top:0;top:0;height:100%;
    max-height:100%;border-radius:0;border:0}
}
@media (prefers-reduced-motion:reduce){
  .find,.find-scrim{transition:none}
}

/* ------------------------------------------------------------------ fields */
.field{margin-bottom:14px}
.field label{display:block;font-family:var(--mono);font-size:10.5px;letter-spacing:.15em;
  text-transform:uppercase;color:var(--text-secondary);margin-bottom:6px}
.field input,.field textarea,.field select{
  width:100%;box-sizing:border-box;background:var(--panel);color:var(--text-primary);
  border:1px solid var(--hairline);border-radius:2px;padding:11px 13px;
  font-family:var(--body);font-size:15px;transition:border-color .3s var(--ease-soft)}
.field textarea{min-height:78px;resize:vertical}
.field input:focus,.field textarea:focus,.field select:focus{
  outline:none;border-color:var(--accent)}
.field--pw{position:relative}
.field--pw input{padding-right:62px}
.peek{position:absolute;right:8px;bottom:8px;background:none;border:0;cursor:pointer;
  color:var(--text-secondary);font-family:var(--mono);font-size:10px;letter-spacing:.12em;
  text-transform:uppercase;padding:5px 6px}
.peek:hover{color:var(--accent)}
.row2{display:grid;grid-template-columns:1fr 1fr;gap:0 14px}
@media (max-width:560px){ .row2{grid-template-columns:1fr} }

.note{font-family:var(--mono);font-size:11.5px;letter-spacing:.05em;
  padding:9px 11px;border-radius:2px;margin:10px 0}
.note--bad{background:rgba(224,113,90,.12);color:var(--danger);
  border:1px solid rgba(224,113,90,.3)}
.note--ok{background:rgba(111,191,139,.12);color:var(--ok);
  border:1px solid rgba(111,191,139,.3)}
.saved{font-family:var(--mono);font-size:10.5px;letter-spacing:.1em;
  color:var(--text-secondary);margin-left:10px}

/* ---------------------------------------------------------- product detail */
.pdp{display:grid;grid-template-columns:1.05fr .95fr;gap:clamp(28px,5vw,64px);
  padding:clamp(28px,5vh,60px) 0 80px;align-items:start}
@media (max-width:900px){ .pdp{grid-template-columns:1fr} }
.pdp__media{position:sticky;top:88px}
@media (max-width:900px){ .pdp__media{position:static} }
/* The photo is shown whole. Products come in every shape here, a tall bottle
   one row and a wide banner the next, and a fixed 4/3 window with cover cut the
   ends off whichever way the picture happened to run. So: no forced ratio. The
   box takes the picture's own height, capped so a portrait shot cannot swallow
   the screen, and contain keeps every edge inside whatever height is left. */
.pdp__shot{position:relative;background:var(--panel);border:1px solid var(--hairline);
  border-radius:3px;overflow:hidden;display:grid;place-items:center;min-height:200px}
.pdp__shot img{width:100%;height:auto;max-height:min(74vh,680px);object-fit:contain}
/* and the whole thing again, larger, when it is asked for. The hint sits on the
   picture rather than beside it so it costs no height, and it takes no pointer
   events so a tap on the label is still a tap on the photo. Two classes in the
   selector only to outrank the .pdp__shot span rule below it. */
.pdp__shot--zoom{cursor:zoom-in}
.pdp__shot--zoom:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
.pdp__shot .pdp__zoomhint{position:absolute;right:10px;bottom:10px;pointer-events:none;
  font-family:var(--mono);font-size:10px;letter-spacing:.14em;text-transform:uppercase;
  color:var(--text-primary);background:rgba(4,6,9,.66);
  border:1px solid var(--hairline);border-radius:2px;padding:5px 8px}
.pdp__shot span{font-family:var(--mono);font-size:12px;letter-spacing:.14em;
  text-transform:uppercase;color:var(--text-secondary)}
.pdp__name{font-size:clamp(28px,3.6vw,44px);margin-bottom:10px}
.pdp__line{color:var(--text-secondary);margin:0 0 22px}
.pdp__desc{white-space:pre-wrap;margin:0 0 26px}
.pdp__price{font-family:var(--mono);font-size:24px;margin:0 0 4px}
.pdp__price s{color:var(--text-secondary);font-size:16px;margin-right:9px}
.pdp__deal{display:inline-block;font-family:var(--mono);font-size:10.5px;
  letter-spacing:.12em;text-transform:uppercase;color:var(--amber);
  border:1px solid rgba(217,160,91,.4);border-radius:2px;padding:2px 7px;
  margin-bottom:22px}
.pdp__opts{margin-bottom:24px}
.pdp__optlabel{font-family:var(--mono);font-size:10.5px;letter-spacing:.15em;
  text-transform:uppercase;color:var(--text-secondary);margin:0 0 9px}
.opts{display:flex;flex-wrap:wrap;gap:8px}
.swatch{display:inline-flex;align-items:center;gap:7px;cursor:pointer;
  background:transparent;border:1px solid var(--border-strong);border-radius:2px;
  padding:7px 12px;color:var(--text-primary);font-family:var(--mono);font-size:11px;
  letter-spacing:.1em;text-transform:uppercase;
  transition:border-color .3s var(--ease-soft),color .3s var(--ease-soft)}
.swatch .dot{width:11px;height:11px;border-radius:50%;display:block}
.swatch[aria-pressed="true"]{border-color:var(--accent);color:var(--accent)}
.swatch--gone{opacity:.4;text-decoration:line-through}
.pdp__act{display:flex;gap:10px;flex-wrap:wrap;align-items:center;margin-top:8px}
.pdp__sold{font-family:var(--mono);font-size:12px;letter-spacing:.12em;
  text-transform:uppercase;color:var(--danger)}
.pdp__meta{margin-top:30px;padding-top:22px;border-top:1px solid var(--hairline);
  font-size:14.5px;color:var(--text-secondary)}
.pdp__meta li{margin-bottom:7px}

/* --------------------------------------------------------------- checkout */
.co{max-width:620px;margin:0 auto;padding:clamp(28px,5vh,60px) 0 80px}
.co__lines{border:1px solid var(--hairline);border-radius:3px;padding:4px 16px;
  margin-bottom:26px;background:var(--canvas-2)}
.order__item--off{color:var(--ok)}
/* a line the summary is showing but the order will not carry */
.order__item--gone{color:var(--text-secondary);text-decoration:line-through;
  text-decoration-color:rgba(147,163,177,.5)}
.co__stop:not(:empty){margin:0 0 18px;display:flex;flex-direction:column;
  align-items:flex-start;gap:10px}

/* ---- the coupon box ---- */
/* Built to the same pattern as the phone gate, amber where that one is blue,
   so the two read as the same kind of thing: one more line of the form, not a
   banner. Turns into a chip once a code is on, because the state worth showing
   then is which code, not the empty box it came out of. */
.coupon{border:1px solid var(--hairline);border-left:2px solid var(--amber);
  border-radius:3px;background:var(--canvas-2);padding:13px 15px;margin:2px 0 18px}
/* stretch, not center: the box and the Apply beside it are set in different
   fonts at different sizes and would otherwise sit five pixels apart */
.coupon__row{display:flex;align-items:stretch;gap:10px;flex-wrap:wrap}
.coupon__lbl{flex-basis:100%;margin-bottom:1px;font-family:var(--mono);font-size:10.5px;
  letter-spacing:.15em;text-transform:uppercase;color:var(--text-secondary)}
.coupon__in{flex:1;min-width:148px;background:var(--panel);color:var(--text-primary);
  border:1px solid var(--border-strong);border-radius:2px;padding:10px 12px;
  font-family:var(--mono);font-size:13.5px;letter-spacing:.2em;text-transform:uppercase}
.coupon__in:focus{outline:none;border-color:var(--accent)}
.coupon__in::placeholder{color:var(--text-secondary);opacity:.45;letter-spacing:.08em;
  text-transform:none}
.coupon__chip{flex:1;display:inline-flex;align-items:center;gap:10px;
  border:1px solid rgba(111,191,139,.45);border-radius:2px;padding:7px 11px;
  font-family:var(--mono);font-size:11px;letter-spacing:.13em;text-transform:uppercase;
  color:var(--ok)}
.coupon__chip b{font-size:13px;letter-spacing:.18em}
.coupon__chip span{color:var(--text-secondary)}
.coupon__hint{flex-basis:100%;margin:2px 0 0;font-size:13px;color:var(--text-secondary)}
.coupon__msg{margin-top:11px}
.coupon__msg:empty{display:none}
.coupon__msg .note{margin:0}

/* ---------------------------------------------------------------- account */
.acct{display:grid;grid-template-columns:260px 1fr;gap:clamp(24px,4vw,52px);
  padding:clamp(26px,4vh,48px) 0 80px;align-items:start}
@media (max-width:860px){ .acct{grid-template-columns:1fr} }
.acct__side{position:sticky;top:88px}
@media (max-width:860px){ .acct__side{position:static} }
.acct__tabs{display:flex;flex-direction:column;gap:4px}
@media (max-width:860px){ .acct__tabs{flex-direction:row;flex-wrap:wrap} }
.acct__tabs button{text-align:left;background:none;cursor:pointer;
  border:1px solid transparent;border-radius:2px;padding:10px 13px;
  color:var(--text-secondary);font-family:var(--mono);font-size:11.5px;
  letter-spacing:.13em;text-transform:uppercase;
  transition:color .3s var(--ease-soft),border-color .3s var(--ease-soft)}
.acct__tabs button:hover{color:var(--text-primary)}
.acct__tabs button[aria-pressed="true"]{color:var(--accent);
  border-color:var(--accent);background:var(--accent-muted)}
.acct__who{display:flex;align-items:center;gap:13px;margin-bottom:24px}
.acct__pic{width:56px;height:56px;border-radius:50%;object-fit:cover;background:var(--panel)}
.acct__ini{width:56px;height:56px;border-radius:50%;display:grid;place-items:center;
  background:var(--accent-muted);color:var(--accent);font-family:var(--mono);font-size:19px;
  text-transform:uppercase}
.acct__nm{font-family:var(--display);font-weight:700;font-size:17px;line-height:1.2}
.acct__un{font-family:var(--mono);font-size:11px;color:var(--text-secondary)}
.acct__tag{display:inline-block;font-family:var(--mono);font-size:9.5px;letter-spacing:.14em;
  text-transform:uppercase;color:var(--amber);border:1px solid rgba(217,160,91,.4);
  border-radius:2px;padding:1px 6px;margin-top:4px}
.acct__h{font-family:var(--display);font-weight:700;font-size:20px;margin:0 0 16px}
.acct__sec{margin-bottom:40px}

.avatarrow{display:flex;align-items:center;gap:16px;margin-bottom:22px}
.avatarrow input[type=file]{font-family:var(--mono);font-size:11px;color:var(--text-secondary);
  max-width:210px}

/* ------------------------------------------------------------------ orders */
.orders{display:flex;flex-direction:column;gap:9px}
.order{border:1px solid var(--hairline);border-radius:3px;background:var(--canvas-2)}
.order__head{cursor:pointer;display:flex;align-items:center;gap:12px;flex-wrap:wrap;
  padding:12px 15px;list-style:none}
.order__head::-webkit-details-marker{display:none}
.order__no{font-family:var(--mono);font-size:12.5px;color:var(--accent)}
.order__when{font-family:var(--mono);font-size:11px;color:var(--text-secondary);flex:1}
.order__st{font-family:var(--mono);font-size:10.5px;letter-spacing:.12em;
  text-transform:uppercase;border:1px solid var(--border-strong);border-radius:2px;
  padding:2px 8px}
.st--new{color:var(--accent);border-color:rgba(90,176,224,.45)}
.st--confirmed{color:var(--violet);border-color:rgba(142,118,216,.45)}
.st--shipped{color:var(--amber);border-color:rgba(217,160,91,.45)}
.st--delivered{color:var(--ok);border-color:rgba(111,191,139,.45)}
.st--cancelled{color:var(--danger);border-color:rgba(224,113,90,.45)}
.order__body{padding:4px 15px 15px;border-top:1px solid var(--hairline)}
.order__item{display:flex;justify-content:space-between;gap:14px;padding:7px 0;
  font-size:14.5px}
.order__total{display:flex;justify-content:space-between;padding:9px 0 0;
  margin-top:6px;border-top:1px solid var(--hairline);font-family:var(--mono);font-size:13px}
.order__meta{margin-top:12px;padding-top:12px;border-top:1px solid var(--hairline);
  font-size:14px;color:var(--text-secondary)}
.order__meta div{margin-bottom:4px}
.order__act{display:flex;align-items:center;gap:9px;flex-wrap:wrap;margin-top:14px;
  padding-top:12px;border-top:1px solid var(--hairline)}
.order__act label{font-family:var(--mono);font-size:10.5px;letter-spacing:.13em;
  text-transform:uppercase;color:var(--text-secondary)}
.ministatus{background:var(--panel);color:var(--text-primary);border:1px solid var(--hairline);
  border-radius:2px;padding:6px 9px;font-family:var(--mono);font-size:11.5px}

.tiles{display:flex;gap:9px;flex-wrap:wrap;margin-bottom:22px}
.tile{border:1px solid var(--hairline);border-radius:3px;padding:11px 16px;
  background:var(--canvas-2);min-width:88px}
.tile b{display:block;font-family:var(--display);font-size:22px;line-height:1.1}
.tile span{font-family:var(--mono);font-size:10px;letter-spacing:.12em;
  text-transform:uppercase;color:var(--text-secondary)}

/* -------------------------------------------------------- product editors */
.prod{border:1px solid var(--hairline);border-radius:3px;background:var(--canvas-2);
  margin-bottom:9px}
.prod__head{cursor:pointer;display:flex;align-items:center;gap:12px;flex-wrap:wrap;
  padding:12px 15px;list-style:none}
.prod__head::-webkit-details-marker{display:none}
.prod__name{flex:1;font-family:var(--display);font-weight:700;font-size:15px}
.prod__price{font-family:var(--mono);font-size:12px;color:var(--text-secondary)}
.prod__flags{font-family:var(--mono);font-size:10px;letter-spacing:.1em;
  text-transform:uppercase;color:var(--amber)}
.prod__body{padding:6px 15px 16px;border-top:1px solid var(--hairline)}
.prod__h{font-family:var(--mono);font-size:10.5px;letter-spacing:.15em;
  text-transform:uppercase;color:var(--text-secondary);margin:20px 0 10px}
.erow{display:grid;grid-template-columns:150px 1fr;gap:12px;align-items:center;
  margin-bottom:10px}
@media (max-width:640px){ .erow{grid-template-columns:1fr;gap:5px} }
.erow>label{font-family:var(--mono);font-size:10.5px;letter-spacing:.13em;
  text-transform:uppercase;color:var(--text-secondary)}
.erow input[type=text],.erow input[type=number],.erow textarea{
  width:100%;box-sizing:border-box;background:var(--panel);color:var(--text-primary);
  border:1px solid var(--hairline);border-radius:2px;padding:9px 11px;
  font-family:var(--body);font-size:14.5px}
.erow textarea{min-height:88px;resize:vertical}
.erow input:focus,.erow textarea:focus{outline:none;border-color:var(--accent)}
.erow--checks{display:flex;gap:20px;flex-wrap:wrap}
.erow--act{display:flex;gap:9px;align-items:center;flex-wrap:wrap;margin-top:16px;
  padding-top:14px;border-top:1px solid var(--hairline)}
.chk{display:inline-flex;align-items:center;gap:8px;cursor:pointer;
  font-family:var(--mono);font-size:11px;letter-spacing:.1em;text-transform:uppercase;
  color:var(--text-secondary)}
.chk input{accent-color:var(--accent);width:15px;height:15px}
.shotwrap{display:flex;align-items:center;gap:12px;flex-wrap:wrap}
.shot{width:82px;height:62px;border-radius:2px;overflow:hidden;background:var(--panel);
  flex:0 0 82px}
.shot img{width:100%;height:100%;object-fit:cover}
.vars{display:flex;flex-direction:column;gap:8px}
.var{display:flex;align-items:center;gap:8px;flex-wrap:wrap;padding:9px;
  border:1px solid var(--hairline);border-radius:2px}
.var input[type=text]{width:110px;box-sizing:border-box;background:var(--panel);
  color:var(--text-primary);border:1px solid var(--hairline);border-radius:2px;
  padding:7px 9px;font-family:var(--body);font-size:13.5px}
.var .dot{width:15px;height:15px;border-radius:50%;flex:0 0 15px}
.vthumb{width:38px;height:30px;border-radius:2px;overflow:hidden;background:var(--panel);
  flex:0 0 38px}
.vthumb img{width:100%;height:100%;object-fit:cover}
.var input[type=file]{max-width:150px;font-size:10.5px;color:var(--text-secondary)}

/* ------------------------------------------------------------------- misc */
.empty{border:1px dashed var(--border-strong);border-radius:3px;padding:34px 22px;
  text-align:center;color:var(--text-secondary)}
.centre{max-width:440px;margin:0 auto;padding:clamp(40px,9vh,110px) 0 90px}
.swapline{font-size:14.5px;color:var(--text-secondary);margin-top:18px}
.foot-lite{border-top:1px solid var(--hairline);padding:26px var(--gut);
  font-family:var(--mono);font-size:11px;letter-spacing:.1em;
  color:var(--text-secondary);text-align:center}

/* ------------------------------------------------------ reach us, the icons */
/* deliberately unscoped: the home page footer uses these too */
.social{display:flex;gap:10px;flex-wrap:wrap;margin:2px 0 14px}
.social__b{display:inline-grid;place-items:center;width:42px;height:42px;border-radius:50%;
  border:1px solid var(--border-strong);color:var(--text-secondary);text-decoration:none;
  transition:color .3s var(--ease-soft),border-color .3s var(--ease-soft),
             background .3s var(--ease-soft),transform .3s var(--ease)}
.social__b:hover,.social__b:focus-visible{transform:translateY(-2px)}
.social__b--wa:hover,.social__b--wa:focus-visible{color:#25D366;border-color:#25D366;
  background:rgba(37,211,102,.1)}
.social__b--mail:hover,.social__b--mail:focus-visible{color:var(--accent);
  border-color:var(--accent);background:var(--accent-muted)}
.social__b--ig:hover,.social__b--ig:focus-visible{color:#E1306C;border-color:#E1306C;
  background:rgba(225,48,108,.1)}
.social__b--fb:hover,.social__b--fb:focus-visible{color:#1877F2;border-color:#1877F2;
  background:rgba(24,119,242,.1)}
.social__line{margin:0;font-family:var(--mono);font-size:12px;letter-spacing:.06em}
.social__line a{color:var(--text-secondary);text-decoration:none}
.social__line a:hover{color:var(--accent)}
@media (pointer:coarse){ .social__b{width:46px;height:46px} }

/* the generated brand mark, standing in for the old dot */
.brandmark{width:22px;height:22px;border-radius:50%;object-fit:cover;display:block;flex:0 0 22px}

/* the footer carries the full stacked lockup, which needs real room */
.footlogo{width:clamp(132px,15vw,164px);height:auto;display:block;margin-bottom:16px;
  border-radius:4px}

/* --------------------------------------------------- the four order rooms */
/* All orders is four rooms, not one list: what just came in, what is out for
   delivery, what landed, what died. Each button carries its own count. */
.rooms{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:9px;margin:0 0 14px}
@media (max-width:760px){ .rooms{grid-template-columns:repeat(2,minmax(0,1fr))} }
.rooms .room{display:flex;flex-direction:column;align-items:flex-start;gap:6px;
  cursor:pointer;text-align:left;background:var(--canvas-2);
  border:1px solid var(--hairline);border-left:2px solid var(--border-strong);
  border-radius:3px;padding:11px 14px;
  transition:border-color .3s var(--ease-soft),background .3s var(--ease-soft)}
.rooms .room:hover{border-color:var(--border-strong)}
.room__nm{font-family:var(--mono);font-size:10.5px;letter-spacing:.13em;
  text-transform:uppercase;color:var(--text-secondary);line-height:1.35}
.room__n{font-family:var(--display);font-weight:700;font-size:22px;line-height:1;
  color:var(--text-primary)}
.rooms .room--latest{border-left-color:rgba(90,176,224,.55)}
.rooms .room--onway{border-left-color:rgba(217,160,91,.55)}
.rooms .room--delivered{border-left-color:rgba(111,191,139,.55)}
.rooms .room--cancelled{border-left-color:rgba(224,113,90,.55)}
.rooms .room[aria-pressed="true"]{background:var(--accent-muted);border-color:var(--accent)}
.rooms .room[aria-pressed="true"] .room__nm{color:var(--accent)}
.rooms__line{display:flex;align-items:center;justify-content:space-between;gap:14px;
  flex-wrap:wrap;margin:0 0 14px}
.rooms__line .muted{font-family:var(--mono);font-size:11px;letter-spacing:.05em}

/* ---------------------------------------------------- the range, in pages */
/* Nine cards a page. The numbered tabs and Show more do the same job, one for
   people who know where they are going and one for people who are browsing. */
.pager{display:flex;align-items:center;justify-content:space-between;gap:16px;
  flex-wrap:wrap;margin-top:clamp(22px,3vw,34px)}
.pager[hidden]{display:none}
.pager__count{margin:0;font-family:var(--mono);font-size:11px;letter-spacing:.1em;
  text-transform:uppercase;color:var(--text-secondary)}
.pager__tabs{display:flex;gap:6px;flex-wrap:wrap}
.pager__n{min-width:38px;height:38px;padding:0 10px;cursor:pointer;
  background:var(--panel);color:var(--text-secondary);
  border:1px solid var(--hairline);border-radius:3px;
  font-family:var(--mono);font-size:12.5px;
  transition:color .3s var(--ease-soft),border-color .3s var(--ease-soft),
             background .3s var(--ease-soft)}
.pager__n:hover{color:var(--text-primary);border-color:var(--border-strong)}
.pager__n[aria-selected="true"]{color:var(--accent);border-color:var(--accent);
  background:var(--accent-muted)}
@media (max-width:640px){
  .pager{justify-content:center;text-align:center}
  .pager__count{flex-basis:100%}
  .pager__more{flex-basis:100%}
}

/* ---------------------------------------------- proving a phone number */
/* Sits between the name and address rows at checkout. Deliberately looks
   like part of the form rather than a warning: it is one more thing to
   fill in, not a telling off. */
.gate{border:1px solid var(--hairline);border-left:2px solid var(--accent);
  border-radius:3px;background:var(--canvas-2);padding:13px 15px;margin:0 0 18px}
.gate__row{display:flex;align-items:center;gap:12px;flex-wrap:wrap}
.gate__say{flex:1;min-width:190px;font-size:13.5px;color:var(--text-secondary)}
.gate__chip{font-family:var(--mono);font-size:10.5px;letter-spacing:.13em;
  text-transform:uppercase;color:var(--ok);border:1px solid rgba(111,191,139,.45);
  border-radius:2px;padding:3px 9px}
.gate__chip[hidden]{display:none}
.gate__codes{display:flex;align-items:center;gap:10px;flex-wrap:wrap;margin-top:13px}
.gate__codes[hidden]{display:none}
.gate__code{width:158px;background:var(--panel);color:var(--text-primary);
  border:1px solid var(--border-strong);border-radius:2px;padding:10px 12px;
  font-family:var(--mono);font-size:17px;letter-spacing:.4em;text-align:center}
.gate__code:focus{outline:none;border-color:var(--accent)}
.gate__code::placeholder{color:var(--text-secondary);opacity:.45}
.gate__msg:empty{display:none}
.gate__msg{margin-top:11px}
.gate__msg .note{margin:0}
.gate .linkbtn[disabled]{color:var(--text-secondary);cursor:default}

/* -------------------------------------------------------- ask on whatsapp */
/* Wherever a piece carries no price. Reads as a link at rest and turns
   WhatsApp green on hover, the same move the footer icons make. */
.wa-ask{display:inline-flex;align-items:center;gap:7px;text-decoration:none;
  color:var(--accent);transition:color .3s var(--ease-soft)}
.wa-ask__i{display:inline-flex;line-height:0}
.wa-ask:hover,.wa-ask:focus-visible{color:#25D366}
.wa-ask--price{font-size:20px;letter-spacing:.01em}
.pdp__price--ask{margin-bottom:18px}
.btn.wa-ask--btn{color:#070B0F}
.btn.wa-ask--btn:hover,.btn.wa-ask--btn:focus-visible{color:#070B0F;
  background:#25D366;border-color:#25D366}
.pdp__askline{font-size:13.5px;color:var(--text-secondary);flex-basis:100%;margin:6px 0 0}

/* ---------------------------------------------------------- the people screen */
/* Built out of the same parts as the orders and products screens: a details
   block per row, a mono label column, and the same chips. Nothing new to learn
   for anyone who has already used the other two tabs. */
.peoplesearch{width:100%;background:var(--panel);color:var(--text-primary);
  border:1px solid var(--hairline);border-radius:3px;padding:11px 14px;
  font-family:var(--body);font-size:14.5px;margin:0 0 16px}
.peoplesearch:focus{outline:none;border-color:var(--accent)}
.people{display:flex;flex-direction:column;gap:9px}

.person{border:1px solid var(--hairline);border-radius:3px;background:var(--canvas-2)}
.person[open]{border-color:var(--border-strong)}
.person__head{cursor:pointer;display:flex;align-items:center;gap:11px;flex-wrap:wrap;
  padding:12px 15px;list-style:none}
.person__head::-webkit-details-marker{display:none}
.person__pic{width:34px;height:34px;border-radius:50%;object-fit:cover;background:var(--panel)}
.person__ini{width:34px;height:34px;border-radius:50%;display:grid;place-items:center;
  background:var(--panel);border:1px solid var(--hairline);text-transform:uppercase;
  font-family:var(--mono);font-size:12px;color:var(--text-secondary)}
.person__who{display:flex;flex-direction:column;gap:1px;flex:1;min-width:130px}
.person__who b{font-family:var(--display);font-weight:700;font-size:15px;line-height:1.25}
.person__un{font-family:var(--mono);font-size:11px;color:var(--text-secondary)}
.person__n{font-family:var(--mono);font-size:11px;color:var(--text-secondary)}
.person__spend{font-family:var(--mono);font-size:13px;color:var(--text-primary);
  min-width:74px;text-align:right}

.chip{font-family:var(--mono);font-size:9.5px;letter-spacing:.14em;text-transform:uppercase;
  border-radius:2px;padding:3px 7px;white-space:nowrap}
.chip--admin{color:var(--accent);border:1px solid var(--accent-muted);
  background:rgba(90,176,224,.1)}
.chip--blocked{color:var(--danger);border:1px solid rgba(224,113,90,.4);
  background:rgba(224,113,90,.1)}

.person__body{padding:4px 15px 16px;border-top:1px solid var(--hairline)}
.person__sec{padding:16px 0;border-bottom:1px solid var(--hairline)}
.person__sec:last-child{border-bottom:0;padding-bottom:2px}
.person__h{font-family:var(--mono);font-size:10.5px;letter-spacing:.15em;
  text-transform:uppercase;color:var(--text-secondary);margin:0 0 12px}
.person__ro{font-family:var(--mono);font-size:12.5px;color:var(--text-secondary)}
.person__hint{font-size:13px;color:var(--text-secondary);margin:0 0 10px;max-width:62ch}
.person__self{font-family:var(--mono);font-size:11px;letter-spacing:.05em;
  color:var(--accent);background:var(--accent-muted);border-radius:2px;
  padding:9px 12px;margin:14px 0 0}

/* the record. Deliberately plain: it is meant to be read, not admired. */
.person__log{display:flex;flex-direction:column;gap:7px;font-size:13px}
.person__logrow{display:flex;gap:10px;flex-wrap:wrap;align-items:baseline;
  padding-bottom:7px;border-bottom:1px solid var(--hairline)}
.person__logrow:last-child{border-bottom:0;padding-bottom:0}
.person__logwhen{font-family:var(--mono);font-size:11px;color:var(--text-secondary);
  min-width:150px}
.person__logwho{font-family:var(--mono);font-size:11px;color:var(--text-secondary);
  margin-left:auto}

@media (max-width:640px){
  .person__spend{min-width:0;text-align:left}
  .person__logwhen{min-width:0;width:100%}
  .person__logwho{margin-left:0}
}

/* -------------------------------------------------- more from the range */
/* Sits under the product itself. Four smaller cards, and a way back to the
   whole range for anyone none of them suits. */
.also{padding:0 0 90px;border-top:1px solid var(--hairline)}
.also .kicker{padding-top:clamp(30px,5vh,52px)}
.also__h{font-family:var(--display);font-weight:700;
  font-size:clamp(21px,2.4vw,28px);margin:0 0 clamp(20px,3vh,30px)}
.also__grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));
  gap:clamp(12px,1.6vw,20px)}
@media (max-width:900px){ .also__grid{grid-template-columns:repeat(2,minmax(0,1fr))} }

.mini{display:flex;flex-direction:column;gap:9px;text-decoration:none;
  color:inherit;background:var(--panel);border:1px solid var(--hairline);
  border-radius:3px;padding:9px 9px 13px;
  transition:border-color .35s var(--ease-soft),transform .35s var(--ease)}
.mini:hover,.mini:focus-visible{border-color:var(--border-strong);transform:translateY(-3px)}
.mini__ph{position:relative;display:block;aspect-ratio:1/1;overflow:hidden;
  border-radius:2px;background:var(--canvas-2)}
.mini__ph img{width:100%;height:100%;object-fit:cover;
  transition:transform 1s var(--ease)}
.mini:hover .mini__ph img{transform:scale(1.04)}
.mini__none{position:absolute;inset:0;display:grid;place-items:center;
  font-family:var(--mono);font-size:10.5px;letter-spacing:.13em;
  text-transform:uppercase;color:var(--text-secondary)}
/* the two badges the range grid uses, redrawn here because those live in
   index.html's own stylesheet and never reach this page */
.mini__tag{position:absolute;top:8px;font-family:var(--mono);font-size:9.5px;
  letter-spacing:.1em;text-transform:uppercase;border-radius:2px;padding:3px 6px}
.mini__tag--gone{left:8px;background:rgba(8,11,15,.85);color:#E0A97A;
  border:1px solid rgba(224,169,122,.45)}
.mini__tag--deal{right:8px;background:var(--accent);color:#070B0F}
.mini__nm{padding:0 3px;font-family:var(--display);font-weight:700;
  font-size:14px;line-height:1.25}
.mini__price{padding:0 3px;font-family:var(--mono);font-size:13px;
  color:var(--text-primary);margin-top:auto}
.mini__price s{color:var(--text-secondary);font-size:11.5px;margin-right:5px}
.mini__price--ask{font-size:11px;letter-spacing:.1em;color:var(--text-secondary)}
.also__all{margin-top:clamp(18px,2.6vh,26px);font-family:var(--mono);
  font-size:11.5px;letter-spacing:.13em;text-transform:uppercase}