/* ============================================================
   Wholesale Club — "Clinic" dark theme (single stylesheet)
   Order: tokens -> base -> layout -> components -> screens -> responsive
   ============================================================ */
:root{
  --bg:#0D1113; --surface:#131A1D; --surface-2:#0F1518;
  --line:#213035; --line-soft:#1A2428;
  --text:#DCE5E8; --muted:#7C8C92; --dim:#4E5C61;
  --accent:#63B9C4; --accent-ink:#06161A; --accent-line:#255159;
  --danger:#E08A7A; --ok:#7FC8A4; --warn:#D8B673;
  --font: system-ui,-apple-system,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif;
  --mono: ui-monospace,"SF Mono","Cascadia Code",Menlo,Consolas,monospace;
  --r-sm:10px; --r-md:14px; --r-lg:18px;
}
*{box-sizing:border-box;}
html{-webkit-text-size-adjust:100%; color-scheme:dark;}
body{margin:0; background:var(--bg); color:var(--text); font-family:var(--font);
  line-height:1.55; font-size:16px; -webkit-font-smoothing:antialiased; text-rendering:optimizeLegibility;}
a{color:var(--accent); text-decoration:none;}
a:hover{text-decoration:underline;}
h1,h2,h3,h4{margin:0 0 .5em; line-height:1.15; text-wrap:balance; color:#EAF1F3; font-weight:700; letter-spacing:-.01em;}
h1{font-size:1.9rem;} h2{font-size:1.4rem;} h3{font-size:1.15rem;}
img{max-width:100%;}
:focus-visible{outline:2px solid var(--accent); outline-offset:2px;}

/* layout */
main.container{max-width:960px; margin:0 auto; padding:28px 20px 72px;}
.section-label{font-size:.7rem; letter-spacing:.22em; text-transform:uppercase; color:var(--muted);
  margin:0 0 16px; display:flex; align-items:center; gap:12px;}
.section-label::after{content:""; flex:1; height:1px; background:var(--line);}
.muted{color:var(--muted);}

/* header */
.site-header{position:sticky; top:0; z-index:20; background:color-mix(in srgb, var(--surface) 92%, transparent);
  border-bottom:1px solid var(--line); backdrop-filter:blur(8px);}
.site-header__inner{max-width:960px; margin:0 auto; padding:16px 20px;
  display:flex; align-items:center; justify-content:space-between;}
.brand{display:flex; flex-direction:column; line-height:1; text-decoration:none;}
.brand:hover{text-decoration:none;}
.brand__mk{font-size:1.05rem; font-weight:800; letter-spacing:.16em; text-transform:uppercase; color:var(--text);}
.brand__sub{font-size:.55rem; letter-spacing:.3em; text-transform:uppercase; color:var(--muted); margin-top:6px;}
.nav{display:flex; align-items:center; gap:14px;}
.nav form{margin:0;}
.nav a{color:var(--muted); font-size:.85rem;}
.nav a:hover{color:var(--text); text-decoration:none;}
.cart-pill{display:inline-flex; gap:7px; align-items:center; border:1px solid var(--line);
  border-radius:999px; padding:7px 14px; color:var(--text); font-size:.8rem;}
.cart-pill:hover{border-color:var(--accent); text-decoration:none;}
.cart-pill b{color:var(--accent); font-variant-numeric:tabular-nums;}

/* buttons */
.btn{display:inline-flex; align-items:center; justify-content:center; gap:8px; cursor:pointer;
  font-family:var(--font); font-size:.8rem; font-weight:700; letter-spacing:.08em; text-transform:uppercase;
  border:1px solid transparent; border-radius:999px; padding:10px 18px;
  transition:filter .15s ease, border-color .15s ease;}
.btn--primary{background:var(--accent); color:var(--accent-ink);}
.btn--primary:hover{filter:brightness(1.08); text-decoration:none;}
.btn--ghost{background:transparent; color:var(--text); border-color:var(--line);}
.btn--ghost:hover{border-color:var(--accent); text-decoration:none;}
.btn--danger{background:transparent; color:var(--danger); border-color:var(--accent-line);}
.btn--danger:hover{text-decoration:none;}
.btn--block{width:100%;}

/* forms */
.field{margin:0 0 16px;}
.label{display:block; font-size:.66rem; letter-spacing:.16em; text-transform:uppercase; color:var(--muted); margin:0 0 8px;}
.input, .textarea, select{width:100%; background:var(--surface-2); border:1px solid var(--line);
  border-radius:var(--r-sm); padding:12px 14px; color:var(--text); font-family:var(--font); font-size:1rem;}
.textarea{min-height:96px; resize:vertical;}
.input::placeholder{color:var(--dim);}
.input:focus-visible, .textarea:focus-visible, select:focus-visible{outline:2px solid var(--accent); outline-offset:1px; border-color:transparent;}
.check{display:flex; gap:10px; align-items:flex-start; font-size:.82rem; color:var(--muted); margin:0 0 18px; line-height:1.5;}
.check input{width:18px; height:18px; accent-color:var(--accent); flex:none; margin-top:1px;}

/* panels / messages */
.panel{background:var(--surface); border:1px solid var(--line); border-radius:var(--r-md); padding:18px 20px;}
.notice{color:var(--ok);}
.error{color:var(--danger);}
.error-banner{background:color-mix(in srgb, var(--danger) 12%, var(--surface));
  border:1px solid var(--accent-line); color:var(--danger); border-radius:var(--r-sm);
  padding:12px 14px; margin:0 0 18px; font-size:.9rem;}

/* data table (shop, cart, admin) */
.data-table{width:100%; border-collapse:collapse;}
.data-table thead th{text-align:left; font-size:.66rem; letter-spacing:.16em; text-transform:uppercase;
  color:var(--muted); font-weight:600; padding:0 12px 12px; border-bottom:1px solid var(--line); white-space:nowrap;}
.data-table thead th.num{text-align:right;}
.data-table tbody td{padding:14px 12px; border-bottom:1px solid var(--line-soft); vertical-align:middle; font-size:.9rem;}
.data-table tbody tr{transition:background .15s ease;}
.data-table tbody tr:hover{background:var(--surface);}
.thumb{width:44px; height:44px; border-radius:50%; object-fit:cover;
  background:radial-gradient(120% 100% at 30% 20%, #26363b, #0e1518); border:1px solid var(--line); display:block;}
.thumb--empty{background:none; border:1px dashed var(--line-soft);}
.chip{display:inline-block; font-size:.72rem; letter-spacing:.03em; color:var(--muted);
  border:1px solid var(--line); border-radius:999px; padding:3px 9px;}
.chip--mg{font-family:var(--mono); color:var(--accent); border-color:var(--accent-line);}
.mg{font-family:var(--mono); font-size:.8rem; color:var(--accent);}
.price{font-family:var(--mono); font-variant-numeric:tabular-nums; color:var(--text); white-space:nowrap;}
.price small{color:var(--muted); font-family:var(--font);}
.num{text-align:right;}
.stock{color:var(--muted); font-size:.82rem; white-space:nowrap;}
.stock--out{color:var(--danger);}
tr.is-sold td{opacity:.5;}
tr.is-sold:hover{background:transparent;}
.row-actions{display:inline-flex; gap:8px;}
.row-actions form{margin:0;}
.page-head{display:flex; align-items:center; justify-content:space-between; gap:16px; flex-wrap:wrap; margin:0 0 20px;}

/* quantity buy + stepper */
.buy{display:inline-flex; align-items:center; gap:8px; margin:0;}
.qty-input{width:70px; text-align:center; background:var(--surface-2); border:1px solid var(--line);
  border-radius:var(--r-sm); padding:9px; color:var(--text); font-family:var(--mono);
  font-variant-numeric:tabular-nums; -moz-appearance:textfield;}
.qty-input::-webkit-outer-spin-button,.qty-input::-webkit-inner-spin-button{-webkit-appearance:none; margin:0;}
.stepper{display:inline-flex; align-items:center; border:1px solid var(--line); border-radius:999px; overflow:hidden;}
.stepper button{background:transparent; color:var(--muted); border:0; width:30px; height:34px; font-size:1rem; cursor:pointer; line-height:1;}
.stepper button:hover{color:var(--text);}
.stepper .qty-input{width:44px; border:0; border-radius:0; background:transparent; padding:0;}
.soldbtn{border:1px dashed var(--line); border-radius:999px; padding:9px 16px; font-size:.72rem; color:var(--muted); letter-spacing:.04em;}

/* gate / admin login */
.gate{min-height:70vh; display:flex; align-items:center; justify-content:center; padding:24px;}
.gate__card{width:100%; max-width:360px; text-align:center; background:var(--surface);
  border:1px solid var(--line); border-radius:var(--r-lg); padding:36px 28px;}
.gate__card h1{letter-spacing:.14em; text-transform:uppercase; font-size:1.3rem;}
.gate__card p{color:var(--muted); margin:0 0 20px;}
.gate__card .input{margin-bottom:14px; text-align:center;}

/* checkout: signal panel + app badges + summary */
.checkout-grid{display:grid; grid-template-columns:1.05fr 1fr; gap:26px; margin-top:8px;}
.signal-panel p{color:var(--muted); font-size:.9rem; margin:0 0 14px;}
.appbadges{display:flex; gap:10px; flex-wrap:wrap; margin:0 0 12px;}
.appbadge{display:inline-flex; align-items:center; gap:10px; background:#000; border:1px solid rgba(255,255,255,.22);
  border-radius:9px; padding:7px 14px 7px 12px; color:#fff;}
.appbadge:hover{border-color:rgba(255,255,255,.5); text-decoration:none;}
.appbadge svg{width:20px; height:20px; flex:none;}
.appbadge span{display:flex; flex-direction:column; line-height:1.12;}
.appbadge small{font-size:.5rem; letter-spacing:.05em; text-transform:uppercase; opacity:.85;}
.appbadge b{font-size:.85rem; font-weight:600;}
.summary{width:100%; border-collapse:collapse; margin:0 0 20px;}
.summary td, .summary th{padding:10px 0; border-bottom:1px solid var(--line-soft); text-align:left; font-size:.9rem;}
.summary tfoot th{border-bottom:0; font-size:1.05rem; padding-top:14px;}
.summary .num{text-align:right; font-family:var(--mono); font-variant-numeric:tabular-nums;}

/* product detail */
.brand-link{color:var(--text); font-weight:600;}
.brand-link:hover{color:var(--accent); text-decoration:none;}
.product-detail{display:grid; grid-template-columns:300px 1fr; gap:28px; align-items:start; margin-top:8px;}
.product-img{width:100%; aspect-ratio:1/1; object-fit:cover; border-radius:var(--r-md);
  border:1px solid var(--line); background:var(--surface-2); display:block;}
.chips{display:flex; gap:8px; flex-wrap:wrap; margin:0 0 14px;}
.product-price{margin:14px 0 6px; font-size:1.2rem;}
.add-form{display:flex; flex-direction:column; align-items:flex-start; gap:10px; margin-top:14px;}
.add-form .label{margin-bottom:0;}

/* cart total / confirmation */
.cart-total{display:flex; justify-content:space-between; align-items:baseline; padding:16px 12px; margin-top:4px;
  border-top:1px solid var(--line); font-size:1.15rem;}
.cart-total .price{font-size:1.15rem;}
.confirm{max-width:560px; margin:24px auto; text-align:center;}

/* admin */
.admin-nav{display:flex; align-items:center; gap:6px 18px; flex-wrap:wrap; padding:14px 20px;
  background:var(--surface); border-bottom:1px solid var(--line);}
.admin-nav .brand__mk{font-size:.9rem; margin-right:8px;}
.admin-nav form{margin:0;}
.admin-nav a{color:var(--muted); font-size:.85rem;}
.admin-nav a:hover{color:var(--text); text-decoration:none;}
.stat-grid{display:grid; grid-template-columns:repeat(auto-fit,minmax(150px,1fr)); gap:14px; margin:0 0 26px;}
.stat-tile{background:var(--surface); border:1px solid var(--line); border-radius:var(--r-md); padding:18px;}
.stat-tile .n{font-family:var(--mono); font-size:1.8rem; font-variant-numeric:tabular-nums; color:var(--text);}
.stat-tile .k{font-size:.68rem; letter-spacing:.14em; text-transform:uppercase; color:var(--muted); margin-top:6px;}
.status-pill{display:inline-block; font-size:.66rem; letter-spacing:.1em; text-transform:uppercase; font-weight:700;
  border-radius:999px; padding:4px 10px; border:1px solid var(--line); white-space:nowrap;}
.status-pill--pending_payment{color:var(--warn); border-color:color-mix(in srgb,var(--warn) 40%, transparent);}
.status-pill--paid{color:var(--accent); border-color:var(--accent-line);}
.status-pill--fulfilled{color:var(--ok); border-color:color-mix(in srgb,var(--ok) 40%, transparent);}
.status-pill--cancelled{color:var(--muted);}
.inline-form{display:flex; gap:8px; align-items:center; flex-wrap:wrap;}
.inline-form select{width:auto;}

/* mobile: tables become stacked labelled cards */
@media (max-width:660px){
  main.container{padding:22px 14px 64px;}
  .checkout-grid{grid-template-columns:1fr;}
  .product-detail{grid-template-columns:1fr;}
  .data-table thead{display:none;}
  .data-table, .data-table tbody, .data-table tr, .data-table td{display:block; width:100%;}
  .data-table tr{border:1px solid var(--line); border-radius:var(--r-md); padding:8px 14px; margin-bottom:12px;}
  .data-table tr:hover{background:transparent;}
  .data-table tbody td{border:0; padding:8px 0; display:flex; justify-content:space-between; align-items:center; gap:14px; text-align:right;}
  .data-table td::before{content:attr(data-label); font-size:.66rem; letter-spacing:.1em; text-transform:uppercase;
    color:var(--muted); font-weight:600; text-align:left;}
  .data-table td.img{justify-content:flex-start;}
  .data-table td.img::before{display:none;}
  .data-table td:empty{display:none;}
}
@media (prefers-reduced-motion:reduce){*{transition:none !important; scroll-behavior:auto !important;}}

/* fixed order + checkout dock (single-page store) */
:root{ --dock:#18242A; --dock-line:#2C3D45; --flavor:#B3A8D6; }
main.container.has-dock{ padding-bottom:46vh; } /* JS refines to the dock's real height */
.order-dock{
  position:fixed; left:0; right:0; bottom:0; z-index:30;
  background:var(--dock); border-top:1px solid var(--dock-line);
  box-shadow:0 -24px 50px -26px rgba(0,0,0,.75);
  max-height:62vh; overflow-y:auto;
}
.order-dock__inner{ max-width:960px; margin:0 auto; padding:10px 20px 18px; }
.order-lines .order-line:first-child{ padding-top:0; }

/* compact order lines (one row per pack, not a stacked table) */
.order-lines{ list-style:none; margin:0; padding:0; }
.order-line{
  display:grid; align-items:center; gap:6px 16px;
  grid-template-columns:1fr auto auto auto;
  grid-template-areas:"name qty total remove";
  padding:9px 0; border-bottom:1px solid var(--dock-line);
}
.order-line__name{ grid-area:name; font-size:.9rem; }
.order-line__qty{ grid-area:qty; margin:0; }
.order-line__total{ grid-area:total; min-width:60px; text-align:right; }
.order-line__remove{ grid-area:remove; margin:0; justify-self:end; }
.btn--sm{ padding:7px 12px; font-size:.68rem; }
.order-empty{ margin:2px 0 6px; }

.order-dock .cart-total{ padding:7px 0; margin-top:0; font-size:1.05rem; border-top-color:var(--dock-line); }
.order-dock .checkout-grid{ margin-top:4px; gap:18px; }
.order-dock .signal-panel{ padding:13px 16px; background:color-mix(in srgb, var(--dock) 82%, #000 14%); border-color:var(--dock-line); }
.order-dock .signal-panel h3{ font-size:.95rem; margin-bottom:6px; }
.order-dock .signal-panel p{ font-size:.82rem; margin-bottom:10px; }
.order-dock .appbadges{ margin-bottom:8px; }
.order-dock .field{ margin-bottom:12px; }
.order-dock .check{ margin-bottom:12px; }
@media (max-width:660px){
  main.container.has-dock{ padding-bottom:64vh; }
  .order-dock{ max-height:78vh; }
  .order-dock__inner{ padding:8px 14px 16px; }
  .order-line{ grid-template-columns:1fr auto; grid-template-areas:"name total" "qty remove"; gap:8px 12px; }
  .order-line__total{ text-align:right; }
  .order-dock .checkout-grid{ gap:14px; }
}

/* catalogue: aligned table on desktop, compact 2-line card on mobile
   (same markup — .cat-meta uses display:contents so its fields become grid
   columns on desktop and an inline row on mobile) */
.catalogue{ display:flex; flex-direction:column; }
.cat-head, .cat-row{
  display:grid; align-items:center; gap:16px;
  grid-template-columns:44px 110px 180px 88px 96px 118px minmax(190px, 1fr);
  padding:12px;
}
.cat-head{ font-size:.66rem; letter-spacing:.16em; text-transform:uppercase; color:var(--muted);
  border-bottom:1px solid var(--line); padding-bottom:12px; white-space:nowrap; }
.cat-row{ border-bottom:1px solid var(--line-soft); transition:background .15s ease; }
.cat-row:hover{ background:var(--surface); }
.cat-title, .cat-figures{ display:contents; }
.cat-flavor{ color:var(--flavor); }
.cat-buy{ display:flex; justify-content:flex-end; }
.cat-row.is-sold{ opacity:.5; }
.cat-row.is-sold:hover{ background:transparent; }

/* phone + Signal confirmation share one row */
.phone-row{ display:flex; gap:14px; align-items:center; }
.phone-field{ flex:1 1 0; min-width:0; margin-bottom:0; }
.phone-check{ flex:1 1 0; min-width:0; margin-bottom:0; align-items:center; }

@media (max-width:660px){
  .cat-head{ display:none; }
  .cat-row{
    grid-template-columns:auto 1fr auto;
    grid-template-areas:"thumb title buy" "thumb figs buy";
    gap:1px 12px; padding:8px 12px; line-height:1.25;
    border:1px solid var(--line); border-radius:var(--r-md); margin-bottom:8px;
  }
  .cat-row:hover{ background:transparent; }
  .cat-thumb{ grid-area:thumb; align-self:center; }
  .cat-buy{ grid-area:buy; align-self:center; }
  /* line 1: brand · flavor · mg, dot-separated, kept together */
  .cat-title{ display:flex; grid-area:title; flex-wrap:wrap; align-items:baseline; gap:0 6px; line-height:1.2; }
  .cat-title .cat-brand{ font-weight:600; }
  .cat-title .cat-flavor:not(:empty)::before,
  .cat-title .cat-strength:not(:empty)::before{ content:"·"; margin-right:6px; color:var(--dim); }
  /* line 2: price + "N packs left" pill */
  .cat-figures{ display:flex; grid-area:figs; align-items:center; gap:9px; font-size:.78rem; line-height:1.2; }
  .cat-figures .cat-price{ text-align:left; }
  .cat-figures .cat-stock{ display:inline-block; border:1px solid var(--line); border-radius:999px;
    padding:2px 9px; font-size:.7rem; color:var(--muted); }
  .cat-figures .cat-stock.stock--out{ color:var(--danger); border-color:var(--accent-line); }
  /* compact buy control: smaller stepper over a small Add */
  .cat-buy .buy{ flex-direction:column; align-items:stretch; gap:5px; }
  .cat-buy .stepper button{ width:26px; height:26px; font-size:.9rem; }
  .cat-buy .stepper .qty-input{ width:30px; }
  .cat-buy .buy .btn{ width:100%; padding:6px 10px; font-size:.66rem; letter-spacing:.06em; }
}