/* Bradford IT Guy — storefront + admin styles */
:root{
  --ink:#16191d; --muted:#6b7280; --line:#e4e7eb; --bg:#f6f7f9; --card:#fff;
  --blue:#2e5aac; --blue-d:#1e3e7a; --price:#c0392b; --green:#12813f; --amber:#f5a623;
  --radius:10px; --shadow:0 4px 16px rgba(16,24,40,.08);

  /* "Slate & Sky" storefront identity: a dark slate header/footer (cooler
     and more neutral than the earlier navy) with two accent roles —
     --accent is the sky blue used for buy/checkout actions, the logo mark
     and the search button; --accent2 is a small, rare lime-green kept only
     for the cart badge and the promo headline, so it reads as a highlight
     rather than a second competing action color. --cta/--cta-fg exist so
     admin (further down) can point the same .btn class back at the plain
     blue it always used, instead of also going sky blue. */
  --header-bg:#1e2530; --header-fg:#e9edf3;
  --accent:#2f8fe0; --accent-d:#2270b3;
  --accent2:#baf24b; --accent2-fg:#1e2530;
  --cta:var(--accent); --cta-hover:var(--accent-d); --cta-fg:#ffffff;
}
*{box-sizing:border-box}
html{overflow-x:hidden}
body{margin:0;background:var(--bg);color:var(--ink);
  font:400 14.5px/1.55 var(--font-sans, Arial, Helvetica, sans-serif);
  -webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;
  text-rendering:optimizeLegibility}
a{color:var(--blue);text-decoration:none}
a:hover{text-decoration:underline}
/* A <button> made to read exactly like the <a class="link"> beside it —
   used where the action has to be a POST (signing out) rather than a
   plain, CSRF-forgeable link. */
.linkplain{border:0;background:none;padding:0;font:inherit;cursor:pointer;text-decoration:none;color:inherit}
.linkplain:hover{text-decoration:underline}
img{max-width:100%}
.wrap{max-width:1280px;margin:0 auto;padding:0 20px}

/* ---------- header ---------- */
header.site{background:var(--header-bg);border-bottom:1px solid rgba(255,255,255,.08);position:sticky;top:0;z-index:40}
.hbar{display:flex;align-items:center;gap:18px;padding:12px 20px}
/* flex:0 0 auto — a flex item sized only by height (auto width, as the
   logo image is) can otherwise get shrunk to 0 width by its siblings when
   the header is tight on space, since an "auto" cross-size isn't protected
   the way an explicit one is. */
.logo{display:flex;align-items:center;gap:9px;text-decoration:none;color:var(--header-fg);flex:0 0 auto}
.logo:hover{text-decoration:none}
/* Full banner logo (badge + phone + tagline) — sized to stay legible rather
   than shrunk to a small wordmark, which is why the header is taller than
   a typical compact logo bar. */
.logo-img{height:60px;width:auto;display:block}
/* The account-menu hamburger reuses .navdrop-wrap/-trigger/-panel (see
   below) for its open/close behavior and look, but it lives in the header
   bar and is mobile-only, unlike every other .navdrop-wrap (always-on,
   inside nav.cats). ".acctmenu-wrap.navdrop-wrap" — two classes on the
   selector, not just one — so this wins over the shared ".navdrop-wrap
   {display:flex}" rule regardless of which is later in the file. */
.acctmenu-wrap.navdrop-wrap{display:none}
.acctmenu-trigger.navdrop-trigger{color:var(--header-fg);padding:8px}
.acctmenu-trigger.navdrop-trigger .ico{color:inherit}
.search{flex:1;display:flex;position:relative}
.search input{width:100%;padding:11px 14px;border:2px solid transparent;border-right:0;
  border-radius:8px 0 0 8px;font-size:14px;outline:none;background:#fff;color:var(--ink)}
.search input:focus{border-color:var(--accent)}
.search button{background:var(--accent);color:var(--cta-fg);border:0;padding:0 20px;border-radius:0 8px 8px 0;
  cursor:pointer;font-weight:800}
.search button:hover{background:var(--accent-d)}
/* Positioned via JS (left/top/width set from the search box's own rect) so
   it's never at the mercy of how narrow the input itself gets on a small
   screen — see the predictive-search script in footer.php. */
.searchsuggest{position:fixed;background:#fff;
  border:1px solid var(--line);border-radius:10px;box-shadow:var(--shadow);overflow:hidden;z-index:60;
  max-height:70vh;overflow-y:auto}
.sg-row{display:flex;align-items:center;gap:10px;padding:8px 12px;color:var(--ink)}
.sg-row:hover,.sg-row.hi{background:#f4f7fc;text-decoration:none}
.sg-row img{width:34px;height:34px;object-fit:contain;flex:0 0 auto}
.sg-name{flex:1;min-width:0;font-size:12.5px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.sg-price{flex:0 0 auto;font-size:12.5px;font-weight:700;color:var(--price)}
.sg-price em{font-style:normal;color:#c23e6a;font-weight:700;margin-left:3px}
.sg-more{display:block;padding:10px 12px;font-size:12.5px;font-weight:700;color:var(--blue);
  text-align:center;border-top:1px solid var(--line);background:#fafbfc}
.sg-more:hover{background:#f4f7fc;text-decoration:none}
.sg-empty{padding:14px 12px;font-size:12.5px;color:var(--muted);margin:0}
.hact{display:flex;align-items:center;gap:12px;white-space:nowrap}
.hact .link{font-size:13px;color:var(--header-fg);opacity:.87}
.hact .link:hover{color:#fff;opacity:1}
.cartbtn{display:flex;align-items:center;gap:8px;border:2px solid rgba(255,255,255,.2);border-radius:8px;
  padding:8px 14px;font-weight:700;color:var(--header-fg)}
.cartbtn:hover{border-color:var(--accent);color:var(--accent);text-decoration:none}
.badge{background:var(--accent2);color:var(--accent2-fg);border-radius:20px;font-size:11px;padding:1px 7px;font-weight:800}
.wishlink{display:flex;align-items:center;gap:6px;font-size:13px;font-weight:700;opacity:.87}
.wishlink:hover{opacity:1;text-decoration:none}
.wishlink .ico-heart{transition:.15s}
.wishlink:hover .ico-heart{color:#ff8fa8}
/* The logo, "Cart" label and account links don't shrink or wrap, so on
   narrow screens they used to force the whole header wider than the
   viewport. Below 640px the account links move into the hamburger menu
   entirely (see .acctmenu-wrap below) instead of being squeezed — this
   block just trims what's left (logo, cart padding). */
@media(max-width:640px){
  .hbar{gap:10px;padding:8px 14px}
  .logo-img{height:40px}
  .acctmenu-wrap.navdrop-wrap{display:flex}
  /* Sign in/Register (or Hi,X/Admin/Sign out), plus Wishlist, now live in
     the account-menu dropdown above instead — the only thing left in
     .hact at this width is the cart. */
  /* .signout-form itself has an inline style="display:contents" (so it
     doesn't break the flex row on desktop) which beats a stylesheet rule
     trying to hide the form element directly — hide the button inside it
     instead, which has the same visible effect. */
  .hact .greet,.hact .adminlink,.hact .signout-form button,.hact .guestlink,.hact .wishlink{display:none}
  .hact{gap:6px}
  .cartbtn{padding:6px 8px}
  .cartbtn .cartlabel{display:none}
}
/* The department bar: one dropdown per top-level category ticked "Own
   menu" in admin -> Categories (.navdrop-wrap, below), plus a few quick
   links. Pinned to the original blue on purpose — this whole bar keeps its
   current look exactly, even though --blue above now feeds the new
   navy/lime identity elsewhere. */
nav.cats{border-top:1px solid var(--line);border-bottom:1px solid var(--line);background:#fff;
  --blue:#0a5bd3;--blue-d:#084bad}
nav.cats .wrap{display:flex;align-items:stretch;gap:28px}

.quicklinks{display:flex;align-items:center;gap:22px;overflow-x:auto;white-space:nowrap}
.quicklinks a{display:flex;align-items:center;gap:6px;padding:13px 0;font-size:13px;font-weight:600;color:var(--ink);white-space:nowrap}
.quicklinks a .ico{color:var(--blue)}
.quicklinks a:hover{color:var(--blue);text-decoration:none}
@media(max-width:760px){.quicklinks{display:none}}

/* The generic dropdown: a trigger button plus a flat/nested list panel, no
   rail and no drill-down. Used for each per-department dropdown in nav.cats
   above, and reused as-is for the mobile account menu in the header (see
   .acctmenu-wrap) — any element carrying these three class names gets the
   open/close behavior for free, no JS change needed (see footer.php). */
.navdrop-wrap{position:relative;flex:0 0 auto;display:flex;align-items:center}
.navdrop-trigger{display:flex;align-items:center;gap:9px;border:0;background:none;cursor:pointer;
  padding:13px 4px;font-size:13.5px;font-weight:700;color:var(--ink);font-family:inherit}
.navdrop-trigger .ico{color:var(--blue)}
.navdrop-trigger:hover,.navdrop-wrap.open .navdrop-trigger{color:var(--blue)}
.navdrop-panel{position:absolute;top:100%;left:0;width:280px;background:#fff;
  border:1px solid var(--line);box-shadow:0 16px 36px rgba(16,24,40,.16);z-index:80;
  padding:6px 0;max-height:min(70vh,480px);overflow-y:auto;
  opacity:0;transform:translateY(-6px);transition:opacity .16s ease,transform .16s ease;pointer-events:none}
.navdrop-panel[hidden]{display:none}
.navdrop-wrap.open .navdrop-panel{opacity:1;transform:translateY(0);pointer-events:auto}
.navdrop-title{display:flex;align-items:center;gap:9px;font-weight:700;font-size:13.5px;color:var(--ink);
  padding:10px 16px 12px;border-bottom:1px solid var(--line);margin-bottom:6px}
.navdrop-title:hover{color:var(--blue);text-decoration:none}
.navdrop-title .ico{color:var(--blue)}
.navdrop-panel ul{list-style:none;margin:0;padding:0 10px}
.navdrop-panel li{margin:0}
.navdrop-panel a{display:flex;align-items:center;justify-content:space-between;gap:10px;
  padding:7px 10px;font-size:12.5px;color:var(--ink);border-radius:2px;border-left:2px solid transparent}
.navdrop-panel a .l{display:flex;align-items:center;gap:7px;min-width:0}
.navdrop-panel a .l span{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.navdrop-panel a .l .ico{flex:0 0 auto;opacity:.6}
.navdrop-panel a:hover .ico,.navdrop-panel a.on .ico{opacity:1}
.navdrop-panel a:hover{background:#f2f5f9;color:var(--blue);text-decoration:none}
.navdrop-panel a.on{background:#eef4ff;color:var(--blue);border-left-color:var(--blue);font-weight:600}
.navdrop-panel a.on i{color:var(--blue)}
.navdrop-panel i{font-style:normal;font-size:11px;color:var(--muted);flex:0 0 auto}
.navdrop-panel ul ul{padding-left:14px}
.navdrop-panel>ul>li>a{font-weight:600;color:var(--ink)}
.navdrop-panel ul ul a{font-weight:400;color:var(--muted);font-size:12px}
.navdrop-panel{scrollbar-width:thin;scrollbar-color:var(--line) transparent}
.navdrop-panel::-webkit-scrollbar{width:8px}
.navdrop-panel::-webkit-scrollbar-thumb{background:var(--line);border-radius:8px}
/* Sign out has to be a <form><button> (it's a POST, not a link) but sits in
   the account menu among plain <a> links — same box, same hover, same type
   style as ".navdrop-panel>ul>li>a" above, just on a <button>. */
.navdrop-panel button.acct-signout{display:block;width:100%;text-align:left;
  padding:7px 10px;font-size:12.5px;font-weight:600;color:var(--ink);font-family:inherit;
  background:none;border:0;border-left:2px solid transparent;border-radius:2px;cursor:pointer}
.navdrop-panel button.acct-signout:hover{background:#f2f5f9;color:var(--blue)}
@media(max-width:760px){.navdrop-trigger span{display:none}.navdrop-panel{width:260px}}

/* Still used by a department's dropdown (.navdrop-panel, above) when it has
   no sub-categories yet — the rail+sub-pane two-pane layout this originally
   belonged to ("Shop by Category") is gone, but this one message box is
   shared with what replaced it. */
.sub-empty{color:var(--muted);font-size:12.5px;padding:4px 20px 10px}

/* ---------- messages ---------- */
.flash{border-radius:8px;padding:11px 14px;margin:16px 0;font-size:13.5px}
.flash.ok{background:#e8f6ec;color:#12813f;border:1px solid #bfe4cb}
.flash.warn{background:#fff6e5;color:#8a5a06;border:1px solid #f2dcae}
.flash.err{background:#fdecea;color:#a32316;border:1px solid #f5c4bd}
/* The "your card is authorized, not charged yet" note on checkout — a plain
   .flash.warn box reads fine for a one-line message, but this one explains
   something shoppers actively worry about right before entering a card
   number, so it gets a bit more size/weight and sits ahead of the card
   field instead of as a quiet footnote below it. */
.payauth-note{display:flex;align-items:flex-start;gap:9px;font-size:14px;font-weight:600;line-height:1.5}
.payauth-note .ico{flex:0 0 auto;margin-top:2px}
.errors{background:#fdecea;border:1px solid #f5c4bd;color:#a32316;border-radius:8px;padding:12px 16px;margin:14px 0}
.errors ul{margin:0;padding-left:18px}

/* ---------- promo + layout ---------- */
.promo{display:flex;align-items:center;justify-content:space-between;gap:18px;flex-wrap:wrap;
  background:linear-gradient(120deg,#1e2530,#2b3444 75%);color:#fff;border-radius:12px;padding:18px 22px;margin:18px 0 4px}
.promo b{display:block;font-size:16px;color:var(--accent2)}
.promo span.sm{font-size:12.5px;opacity:.88}
.pchips{display:flex;gap:8px;flex-wrap:wrap}
.pchips span{background:rgba(255,255,255,.15);border:1px solid rgba(255,255,255,.25);
  border-radius:20px;padding:5px 12px;font-size:12px;font-weight:700}
.crumb{font-size:12px;color:var(--muted);margin:16px 0}
.layout{display:grid;grid-template-columns:230px 1fr;gap:22px;margin:16px 0 50px}
aside.filters{background:#fff;border:1px solid var(--line);border-radius:var(--radius);padding:16px;height:fit-content;position:sticky;top:130px}
aside.filters h4{margin:0 0 8px;font-size:12px;text-transform:uppercase;letter-spacing:.05em;color:var(--muted)}
aside.filters .grp{padding:12px 0;border-top:1px solid var(--line)}
aside.filters .grp:first-of-type{border-top:0;padding-top:0}
aside.filters label{display:flex;align-items:center;gap:7px;font-size:13px;padding:3px 0;cursor:pointer}
aside.filters input[type=number]{width:74px;padding:6px;border:1px solid var(--line);border-radius:6px}
.listhead{display:flex;justify-content:space-between;align-items:center;gap:12px;flex-wrap:wrap;margin-bottom:14px}
.listhead h1{margin:0;font-size:22px}
select,.btn{font:inherit}
select{padding:8px 10px;border:1px solid var(--line);border-radius:8px;background:#fff}

/* ---------- product grid ---------- */
.grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(212px,1fr));gap:16px}
.card{background:#fff;border:1px solid var(--line);border-radius:var(--radius);display:flex;flex-direction:column;
  overflow:hidden;position:relative;transition:.15s}
.card:hover{box-shadow:var(--shadow);transform:translateY(-2px)}
.card .ph{height:170px;display:flex;align-items:center;justify-content:center;padding:14px}
.card .ph img{max-height:100%;object-fit:contain}
.card .cb{padding:0 14px 14px;display:flex;flex-direction:column;gap:7px;flex:1}
.card .nm{font-size:12.5px;font-weight:700;min-height:52px;color:var(--ink)}
.card .nm:hover{color:var(--blue);text-decoration:none}
.card .pr{margin-top:auto}
.card .pr b{font-size:18px;color:var(--price)}
.card .pr s{font-size:12px;color:var(--muted);margin-left:6px}
.tag{position:absolute;top:10px;left:10px;font-size:10px;font-weight:700;padding:3px 8px;border-radius:20px;
  background:#eef4ff;color:var(--blue);text-transform:uppercase}
.tag.ob{background:#fff5e5;color:#a2660a}
.tag.rf{background:#f0f0f2;color:#555}
.wishform{position:absolute;top:8px;right:8px;z-index:2;margin:0}
.wishbtn{width:30px;height:30px;border-radius:50%;background:#fff;border:1px solid var(--line);
  display:flex;align-items:center;justify-content:center;color:var(--muted);cursor:pointer;
  box-shadow:0 1px 3px rgba(0,0,0,.1);transition:.15s}
.wishbtn:hover{color:#e8496b;border-color:#f5c9d6}
.wishbtn.on{color:#fff;background:#e8496b;border-color:#e8496b}
.wishbtn.on .ico-heart{fill:currentColor}
.wishbtn.pulse{animation:wishpulse .3s ease}
@keyframes wishpulse{0%{transform:scale(1)}40%{transform:scale(1.25)}100%{transform:scale(1)}}
.wishform.pdp{position:static;margin:10px 0 0}
.wishbtn.lg{width:auto;height:auto;border-radius:8px;padding:10px 16px;gap:8px;font-size:13.5px;font-weight:700}
.wishbtn.lg .wlabel{white-space:nowrap}
.tag.rn{background:#f3eefd;color:#6d3fc4}
.tag.us{background:#eef7f4;color:#0f7a6c}
.btn{display:inline-block;background:var(--cta);color:var(--cta-fg);border:0;border-radius:8px;padding:10px 18px;
  cursor:pointer;font-weight:700;text-align:center}
.btn:hover{background:var(--cta-hover);color:var(--cta-fg);text-decoration:none}
.btn[disabled],.btn:disabled{background:#eceff3;color:var(--muted);cursor:not-allowed}
.btn[disabled]:hover,.btn:disabled:hover{background:#eceff3;color:var(--muted)}
.btn.ghost{background:#fff;border:2px solid var(--line);color:var(--ink)}
.btn.ghost:hover{border-color:var(--blue);color:var(--blue);background:#fff}
.btn.amber{background:var(--amber);color:#16191d}
.btn.sm{padding:6px 12px;font-size:12.5px}
.btn.wide{width:100%}
.pager{display:flex;gap:6px;justify-content:center;margin:26px 0}
.pager a,.pager span{border:1px solid var(--line);background:#fff;border-radius:8px;padding:7px 12px;font-size:13px}
.pager span.on{background:var(--blue);border-color:var(--blue);color:#fff;font-weight:700}
.empty{background:#fff;border:1px solid var(--line);border-radius:var(--radius);padding:50px 20px;text-align:center;color:var(--muted)}

/* ---------- product detail ---------- */
.detail{display:grid;grid-template-columns:minmax(280px,460px) 1fr;gap:34px;background:#fff;
  border:1px solid var(--line);border-radius:var(--radius);padding:26px;margin-bottom:22px}
.detail .gal img{width:100%;border:1px solid var(--line);border-radius:10px;padding:12px;background:#fff}
.detail h1{margin:0 0 8px;font-size:23px;line-height:1.3}
.dmeta{font-size:12.5px;color:var(--muted);margin-bottom:14px}
.dmeta b{color:var(--ink)}
.dprice{font-size:32px;font-weight:700;color:var(--price)}
.dprice s{font-size:15px;color:var(--muted);font-weight:400;margin-left:10px}
.save{display:inline-block;background:#fdecea;color:var(--price);font-size:12px;font-weight:700;
  padding:3px 9px;border-radius:20px;margin-left:8px}
.instock{color:var(--green);font-weight:700;font-size:13px;margin:8px 0 16px}
.oos{color:var(--price);font-weight:700;font-size:13px;margin:8px 0 16px}
.optpicks{display:flex;gap:14px;flex-wrap:wrap;margin:14px 0}
.optpicks .field{margin-bottom:0;min-width:140px}
.optpicks select{cursor:pointer}
.optpicks .field.has-chips{min-width:100%}
.optsel{font-weight:600;color:var(--ink)}
.swatches{display:flex;flex-wrap:wrap;gap:8px;margin-top:6px}
.swatch{display:inline-flex;align-items:center;gap:8px;padding:7px 12px;background:#fff;border:1px solid var(--line);
  border-radius:8px;font-size:14px;line-height:1.2;color:var(--ink);cursor:pointer;transition:border-color .12s,box-shadow .12s}
.swatch:hover{border-color:#b9c0cc}
.swatch[aria-checked="true"]{border-color:var(--blue);box-shadow:0 0 0 1px var(--blue);font-weight:600}
.swatch:focus-visible{outline:2px solid var(--blue);outline-offset:2px}
.swatch .sw{display:inline-block;width:16px;height:16px;border-radius:3px;border:1px solid rgba(16,24,40,.28);flex:none}
.swatch.is-oos{color:var(--muted)}
.swatch.is-oos span{text-decoration:line-through;text-decoration-thickness:1px}
.swatch.is-oos .sw{opacity:.45}
.sw-clear{background:repeating-conic-gradient(#d9dde3 0 25%,#fff 0 50%) 0 0/8px 8px}
.buy{display:flex;gap:10px;align-items:center;margin:16px 0;flex-wrap:wrap}
.qty{display:flex;align-items:center;border:1px solid var(--line);border-radius:8px;overflow:hidden;background:#fff}
.qty input{width:56px;height:38px;border:0;text-align:center;font-weight:700}
h3.sub{font-size:13px;text-transform:uppercase;letter-spacing:.04em;color:var(--muted);
  margin:22px 0 8px;padding-bottom:6px;border-bottom:1px solid var(--line)}
.desc{white-space:pre-wrap;font-size:13.5px}
table.specs{width:100%;border-collapse:collapse;font-size:13px}
table.specs td{padding:6px 8px;border-bottom:1px solid var(--line);vertical-align:top}
table.specs td:first-child{width:200px;color:var(--muted);font-weight:700}

/* ---------- cart / forms ---------- */
.panel{background:#fff;border:1px solid var(--line);border-radius:var(--radius);padding:20px;margin:18px 0}
.cols{display:grid;grid-template-columns:1fr 330px;gap:22px;align-items:start;margin-bottom:50px}
.line{display:grid;grid-template-columns:78px 1fr auto auto;gap:14px;align-items:center;
  padding:14px 0;border-top:1px solid var(--line)}
.line:first-child{border-top:0}
.line img{width:78px;height:78px;object-fit:contain}
.line .t{font-size:13px;font-weight:700;color:var(--ink)}
.line .sub{font-size:12px;color:var(--muted)}
.line .lp{font-weight:700;color:var(--price);white-space:nowrap}
.summary{background:#fff;border:1px solid var(--line);border-radius:var(--radius);padding:20px;height:fit-content;position:sticky;top:130px}
.summary .row{display:flex;justify-content:space-between;padding:6px 0}
.summary .row.tot{border-top:1px solid var(--line);margin-top:8px;padding-top:12px;font-size:19px;font-weight:700}
.couponbox{display:flex;gap:6px;margin:0 0 14px}
.couponbox input{flex:1;min-width:0;padding:9px 10px;border:1px solid var(--line);border-radius:8px;font:inherit}
.couponbox input:focus{outline:none;border-color:var(--blue)}
.note{font-size:12px;color:var(--muted);margin-top:10px}
.field{margin-bottom:12px}
.field label{display:block;font-size:12px;font-weight:700;margin-bottom:4px}
.field input,.field select,.field textarea{width:100%;padding:10px;border:1px solid var(--line);
  border-radius:8px;font:inherit;background:#fff}
.field input:focus,.field textarea:focus{outline:none;border-color:var(--blue)}
.two{display:grid;grid-template-columns:1fr 1fr;gap:12px}

/* A $ (or, for a coupon's value, a toggling $ / %) sitting inside a cost
   field, the same way a bank site shows it — never typed, never posted,
   just a hint of what the number means. */
.moneyfield{position:relative}
.moneyfield input{padding-left:24px}
.moneyfield .prefix{position:absolute;left:11px;top:50%;transform:translateY(-50%);
  color:var(--muted);font-size:14px;pointer-events:none}
.moneyfield.suffix input{padding-left:10px;padding-right:24px}
.moneyfield.suffix .prefix{left:auto;right:11px}
.narrow{max-width:460px;margin:26px auto 60px}
.linkrow{font-size:13px;margin-top:10px}
table.data{width:100%;border-collapse:collapse;background:#fff;font-size:13px}
table.data th,table.data td{padding:10px;border-bottom:1px solid var(--line);text-align:left;vertical-align:middle}
table.data th{background:#f2f5f9;font-size:12px;text-transform:uppercase;letter-spacing:.03em;color:var(--muted)}
.sortcol{color:inherit;text-decoration:none;cursor:pointer}
.sortcol:hover{color:var(--ink);text-decoration:none}
.sortcol.on{color:var(--blue)}
table.data tr:hover td{background:#fafbfc}
.pill{display:inline-block;font-size:11px;font-weight:700;padding:3px 9px;border-radius:20px;background:#eef4ff;color:var(--blue)}
.pill.pending{background:#fff6e5;color:#8a5a06}
.pill.paid{background:#e8f6ec;color:#12813f}
.pill.shipped{background:#eef4ff;color:var(--blue)}
.pill.cancelled{background:#f0f0f2;color:#555}
.ok-box{background:#fff;border:1px solid var(--line);border-radius:var(--radius);padding:50px 30px;text-align:center;margin:30px 0 60px}
.ok-box .big{font-size:46px;color:var(--green)}

/* ---------- footer ---------- */
footer.site{background:var(--header-bg);color:#c9d6e5;margin-top:40px;padding:30px 0 0}
footer.site h5{color:#fff;margin:0 0 8px;font-size:13px}
footer.site p{margin:3px 0;font-size:12.5px}
footer.site a{color:#c9d6e5}
footer.site a:hover{color:var(--accent)}
/* Brand row above the link columns: logo + one-line tagline, same dark
   ground as the rest of the footer, just set off by its own divider. */
footer.site .intro{display:flex;align-items:center;gap:14px;padding-bottom:22px;
  border-bottom:1px solid #1d3a5c;margin-bottom:24px}
/* flex:0 0 auto on the link guards against the same flexbox bug the header
   logo has: an image sized only by height (width:auto) isn't protected from
   being squashed under space pressure the way a flex:auto box is. */
footer.site .intro>a{flex:0 0 auto}
footer.site .intro img{height:36px;width:auto;display:block}
footer.site .intro h5{margin:0}
footer.site .intro p{margin:2px 0 0;color:#9fb0c3}
footer.site .cols4{display:grid;grid-template-columns:repeat(4,1fr);gap:24px}
/* "Visit & hours" — hours/phone/email each get a small leading icon
   instead of reading as a plain line of text. */
footer.site .visit p{display:flex;align-items:center;gap:7px}
footer.site .visit .ico{color:#7c90a6;flex:0 0 auto}
footer.site .visit a{display:flex;align-items:center;gap:7px}
/* Trust strip between the link columns and the copyright bar — "Secure
   checkout" only appears when checkout actually is secure (same condition
   the copyright line below already uses), so this never overpromises on a
   demo install that has no payments configured. */
footer.site .strip{margin-top:26px;background:#19202b;border-top:1px solid #1d3a5c;border-bottom:1px solid #1d3a5c}
footer.site .strip .wrap{display:flex;gap:34px;padding:14px 0;flex-wrap:wrap}
footer.site .strip span{display:flex;align-items:center;gap:8px;font-size:12.5px;color:#cdd9e6;font-weight:600}
footer.site .strip .ico{color:var(--accent)}
footer.site .base{padding:14px 0;font-size:12px;opacity:.8}

/* ---------- admin ---------- */
/* The storefront redesign above (navy header/footer, lime accent, lime
   buttons) is a customer-facing brand change — the admin dashboard is a
   working tool, not a storefront, so it keeps exactly the blue it always
   had. Re-pointing these three tokens back is enough: everything in admin
   reads them rather than --accent directly. */
body.admin{background:#eef1f5;--blue:#0a5bd3;--blue-d:#084bad;--cta:#0a5bd3;--cta-hover:#084bad;--cta-fg:#fff}
.adminbar{background:#0a2540;color:#fff;padding:11px 0}
.adminbar .wrap{display:flex;align-items:center;gap:18px;flex-wrap:wrap}
.adminbar a{color:#c9d6e5;font-size:13px}
.adminbar a.on,.adminbar a:hover{color:#fff;text-decoration:none}
.adminbar .linkplain{color:#c9d6e5;font-size:13px}
.adminbar .linkplain:hover{color:#fff;text-decoration:none}
.adminbar .brand{font-weight:700;color:#fff;font-size:15px}
.adminbar .right{margin-left:auto;display:flex;gap:14px}
/* product search in the admin bar */
.adminbar .asearch{position:relative;flex:1 1 220px;max-width:400px;min-width:180px;display:flex;align-items:center}
.adminbar .asearch>.ico{position:absolute;left:10px;color:#9db0c6;pointer-events:none}
.adminbar .asearch input{width:100%;box-sizing:border-box;height:32px;padding:0 10px 0 31px;border:1px solid #2c4a6c;border-radius:8px;background:#0f3157;color:#fff;font:inherit;font-size:13px}
.adminbar .asearch input::placeholder{color:#8fa4bd}
.adminbar .asearch input:focus{outline:2px solid #5aa2ff;outline-offset:0;background:#123a66}
.asug{position:absolute;top:38px;left:0;right:0;min-width:340px;background:#fff;color:#16191d;border:1px solid #d9e0e8;border-radius:10px;box-shadow:0 12px 32px rgba(10,37,64,.28);overflow:hidden;z-index:60}
.asug[hidden]{display:none}
.adminbar .asug a{color:inherit;font-size:13px}
.asug-row{display:flex;align-items:center;gap:10px;padding:8px 12px;border-bottom:1px solid #eef1f5;text-decoration:none}
.asug-row:hover,.asug-row.on{background:#eef4ff;text-decoration:none}
.asug-img{flex:0 0 36px;width:36px;height:36px;border-radius:6px;background:#f2f4f7;display:flex;align-items:center;justify-content:center;overflow:hidden}
.asug-img img{width:100%;height:100%;object-fit:contain}
.asug-mid{flex:1;min-width:0;display:flex;flex-direction:column}
.asug-name{white-space:nowrap;overflow:hidden;text-overflow:ellipsis;font-weight:600}
.asug-meta{color:#6b7280;font-size:12px;font-family:ui-monospace,Menlo,Consolas,monospace}
.asug-right{flex:0 0 auto;display:flex;flex-direction:column;align-items:flex-end;gap:2px;font-size:12px}
.asug-price{font-weight:600}
.asug-tag{color:#b42318;background:#fef3f2;border-radius:999px;padding:0 7px;font-size:11px}
.adminbar .asug .asug-all{display:block;padding:9px 12px;text-align:center;color:#0a5bd3;font-weight:600;background:#f7f9fb}
.adminbar .asug .asug-all:hover{background:#eef4ff}
.asug-none{padding:12px;color:#6b7280;font-size:13px}
@media(max-width:900px){.adminbar .asearch{order:5;flex:1 1 100%;max-width:none}.asug{min-width:0}}

/* grouped dropdowns (Catalog / Fulfillment / People) in the admin bar */
.agroup{position:relative;display:flex;align-items:center}
.agroup-trigger{display:inline-flex;align-items:center;gap:6px;color:#c9d6e5;font-size:13px;cursor:pointer;user-select:none}
.agroup-trigger:hover,.agroup.open .agroup-trigger,.agroup.on .agroup-trigger{color:#fff}
.agroup-trigger .ico:last-child{transition:transform .15s ease}
.agroup.open .agroup-trigger .ico:last-child{transform:rotate(180deg)}
.agroup .adrop{position:absolute;top:100%;left:0;background:#fff;border:1px solid var(--line);
  border-radius:8px;box-shadow:0 16px 32px rgba(16,24,40,.22);min-width:180px;padding:6px;z-index:60;
  opacity:0;transform:translateY(-6px);pointer-events:none;transition:opacity .14s ease,transform .14s ease}
.agroup.open .adrop{opacity:1;transform:translateY(0);pointer-events:auto}
.agroup .adrop a{display:flex;align-items:center;gap:9px;padding:8px 10px;border-radius:6px;
  color:var(--ink);font-size:13px}
.agroup .adrop a:hover,.agroup .adrop a.on{background:#f2f5f9;color:var(--blue)}
.agroup .adrop a .ico{opacity:.6}
.agroup .adrop a:hover .ico,.agroup .adrop a.on .ico{opacity:1}
.stats{display:grid;grid-template-columns:repeat(4,1fr);gap:14px;margin:20px 0}
.stat{background:#fff;border:1px solid var(--line);border-radius:var(--radius);padding:16px}
.stat b{display:block;font-size:26px}
.stat span{font-size:12px;color:var(--muted)}
.toolbar{display:flex;gap:10px;align-items:center;flex-wrap:wrap;margin:16px 0}
.bulkbar{display:flex;align-items:center;gap:10px;background:#eef4ff;border:1px solid #cfe0fb;
  border-radius:8px;padding:8px 12px;margin:0 0 12px;font-size:13px}
.bulkbar[hidden]{display:none}
.bulkbar b{font-variant-numeric:tabular-nums}
.bulkbar-cat{display:inline-flex;align-items:center;gap:6px;padding-left:6px;border-left:1px solid #cfe0fb}
.bulkbar-cat select{padding:5px 7px;border:1px solid var(--line);border-radius:7px;font:inherit;font-size:12.5px}
.toolbar input[type=search]{padding:9px 12px;border:1px solid var(--line);border-radius:8px;min-width:240px}
.thumb-sm{width:46px;height:46px;object-fit:contain}
@media(max-width:900px){
  .layout,.cols{grid-template-columns:1fr}
  aside.filters,.summary{position:static}
  .detail{grid-template-columns:1fr}
  .stats{grid-template-columns:1fr 1fr}
  footer.site .cols4{grid-template-columns:1fr 1fr}
}
/* Narrower still: the 2-column footer grid above gets cramped once Shop/
   Account/Help/Visit & hours all have to share two columns on a phone —
   stack to one. Placed after the 900px block above so it wins at these
   widths (same selector/specificity, later in the cascade). */
@media(max-width:520px){
  footer.site .cols4{grid-template-columns:1fr}
  footer.site .strip .wrap{gap:16px 26px}
}

/* sub-category tiles on a department page reuse .cattiles/.cattile as-is
   (same icon-badge design as the home page); this just adds the bottom
   margin that section needs before the product grid starts. */
.cattiles-below{margin:0 0 18px}

.cathero{margin:22px 0 28px}
.cathero h2{font-size:19px;margin:0 0 14px}
.introline{margin:30px 0 8px;padding-top:22px;border-top:1px solid var(--line);
  color:var(--muted);font-size:13px;line-height:1.6;text-align:center;max-width:680px;margin-left:auto;margin-right:auto}
.cattiles{display:grid;grid-template-columns:repeat(auto-fill,minmax(128px,1fr));gap:12px}
.cattile{background:#fff;border:1px solid var(--line);border-radius:var(--radius);padding:18px 10px 16px;
  display:flex;flex-direction:column;align-items:center;text-align:center;gap:6px;color:var(--ink);
  transition:transform .12s ease,box-shadow .12s ease,border-color .12s ease}
.cattile:hover{border-color:var(--blue);box-shadow:var(--shadow);transform:translateY(-2px);text-decoration:none}
.cattile-ico{width:50px;height:50px;border-radius:50%;background:#eef4ff;color:var(--blue);
  display:flex;align-items:center;justify-content:center;margin-bottom:2px}
.cattile-ico svg{width:26px;height:26px}
.cattile-img{width:100%;aspect-ratio:1/1;max-width:104px;display:flex;align-items:center;justify-content:center;margin-bottom:2px}
.cattile-img img{max-width:100%;max-height:100%;width:auto;height:auto;object-fit:contain;display:block}
.cattile.has-pic{padding-top:12px}
.cattile b{font-size:13px;line-height:1.25}
.cattile span{font-size:11.5px;color:var(--muted)}
/* Each category tile's icon badge cycles through this palette by position,
   so the row reads as varied and colorful rather than one repeated blue
   circle. Cycles every 13 tiles — with fewer or more categories than that
   it still cycles cleanly, just starting over sooner or later. */
.cattile:nth-child(13n+1) .cattile-ico{background:#eaf1ff;color:#2e5aac}
.cattile:nth-child(13n+2) .cattile-ico{background:#eafaf1;color:#12813f}
.cattile:nth-child(13n+3) .cattile-ico{background:#fff3e3;color:#a2660a}
.cattile:nth-child(13n+4) .cattile-ico{background:#f5eefe;color:#6d3fc4}
.cattile:nth-child(13n+5) .cattile-ico{background:#fdeef2;color:#c23e6a}
.cattile:nth-child(13n+6) .cattile-ico{background:#e9fbfa;color:#0f7a6c}
.cattile:nth-child(13n+7) .cattile-ico{background:#fef0ec;color:#c0392b}
.cattile:nth-child(13n+8) .cattile-ico{background:#eef2ff;color:#4453c9}
.cattile:nth-child(13n+9) .cattile-ico{background:#f4f9e8;color:#5c7d1e}
.cattile:nth-child(13n+10) .cattile-ico{background:#fef7e0;color:#b8860b}
.cattile:nth-child(13n+11) .cattile-ico{background:#eef8fd;color:#1a7ba8}
.cattile:nth-child(13n+12) .cattile-ico{background:#fbeef7;color:#a83e9e}
.cattile:nth-child(13n) .cattile-ico{background:#f0f0f2;color:#555}
@media (max-width:480px){
  .cattiles{grid-template-columns:repeat(auto-fill,minmax(100px,1fr));gap:8px}
  .cattile{padding:14px 6px 12px}
  .cattile-ico{width:42px;height:42px}
  .cattile-ico svg{width:22px;height:22px}
}

/* ---------- draggable category rows ---------- */
.crow{display:grid;grid-template-columns:26px 1fr;align-items:center;gap:8px;
  border-bottom:1px solid var(--line);background:#fff}
.crow .rowform{display:grid;grid-template-columns:1.4fr 1fr 1fr 70px 60px auto;
  gap:8px;align-items:center;padding:8px 0}
.crow.head{font-size:11px;text-transform:uppercase;letter-spacing:.03em;color:var(--muted);
  background:#f2f5f9;padding:9px 0;border-radius:8px 8px 0 0}
.crow.head span{padding:0 2px}
.crow.head{grid-template-columns:24px 1.4fr 1fr 1fr 70px 60px auto}
.crow input,.crow select{padding:7px;border:1px solid var(--line);border-radius:7px;font:inherit;width:100%}
.crow .cell{display:flex;align-items:center;gap:6px;min-width:0}
.crow .cell.count,.crow .cell.ord{color:var(--muted);font-size:13px;justify-content:center}
.crow .cell.acts{gap:4px;justify-content:flex-end;white-space:nowrap}
.crow .tick{color:var(--muted);font-weight:400}
/* Indent depth is set inline per row (padding-left scales with nesting level)
   since a category tree can now run to any number of levels. */
.crow .handle{cursor:grab;color:#9aa4b2;text-align:center;user-select:none;font-size:15px}
.crow .handle:active{cursor:grabbing}
.crow.dragging{opacity:.45}
.crow.over{box-shadow:inset 0 2px 0 var(--blue)}
.crow .mv{border:1px solid var(--line);background:#fff;border-radius:6px;width:26px;height:26px;
  cursor:pointer;font-size:10px;color:var(--muted);line-height:1}
.crow .mv:hover{border-color:var(--blue);color:var(--blue)}
.btn.ghost.danger{color:var(--price)}
.btn.ghost.danger:hover{border-color:var(--price);color:var(--price)}
@media(max-width:900px){
  .crow,.crow .rowform{grid-template-columns:1fr}
  .crow.head{display:none}
}

/* categories admin: extra columns and states */
.crow .rowform{grid-template-columns:1.6fr 1.15fr 1fr .95fr 62px 92px 250px}
.crow.head{grid-template-columns:26px 1.6fr 1.15fr 1fr .95fr 62px 92px 250px}
.crow input.mono{font-family:Menlo,Consolas,monospace;font-size:12px;color:var(--muted)}
.crow .cell.live{justify-content:center}
.crow .cell.count a{font-weight:700}
.crow .cell.count small{color:var(--muted);font-weight:400;margin-left:3px}
.crow.dirty{background:#fffbe9;box-shadow:inset 3px 0 0 var(--amber)}
.crow.failed{background:#fdecea;box-shadow:inset 3px 0 0 var(--price)}
.crow.hiddencat .cell.name input{color:var(--muted);font-style:italic}
.crow.hiddencat{background:#fafafa}
.crow.nest{box-shadow:inset 0 0 0 2px var(--blue);border-radius:8px}
.crow.toplevel-drop{grid-template-columns:24px 1fr;color:var(--muted);font-size:12.5px;
  border:1px dashed var(--line);border-radius:8px;margin-top:8px;padding:9px 0;background:#fafbfc}
.crow.toplevel-drop.nest{border-color:var(--blue);color:var(--blue);background:#f2f7ff}
.crow.uncat{grid-template-columns:24px 1fr;background:#fff8ec;border:1px solid #f2dcae;
  border-radius:8px;margin-top:10px;padding:10px;font-size:13px}
.delpanel{grid-column:1 / -1;background:#fdf3f2;border-top:1px solid #f5c4bd;padding:12px 14px}
.delpanel form{display:flex;flex-wrap:wrap;gap:10px;align-items:center;font-size:13px}
.delpanel select{padding:6px;border:1px solid var(--line);border-radius:7px}
.delpanel label{display:flex;align-items:center;gap:6px}
.btn.danger-solid{background:var(--price);color:#fff}
.btn.danger-solid:hover{background:#a32316}
.savebar{position:sticky;bottom:0;display:flex;align-items:center;gap:10px;background:#fffbe9;
  border:1px solid #f2dcae;border-radius:8px;padding:10px 14px;margin-top:12px;font-size:13px}
.savebar[hidden]{display:none}

.crow.novis .rowform{grid-template-columns:1.7fr 1.2fr 1fr 1fr 92px 250px}
.crow.head.novis{grid-template-columns:26px 1.7fr 1.2fr 1fr 1fr 92px 250px}

/* categories admin: room for the manual Icon column, with or without Live */
.crow.hasicon .rowform{grid-template-columns:1.4fr 118px 1.1fr 1fr .95fr 62px 92px 250px}
.crow.head.hasicon{grid-template-columns:26px 1.4fr 118px 1.1fr 1fr .95fr 62px 92px 250px}
.crow.hasicon.novis .rowform{grid-template-columns:1.5fr 118px 1.15fr 1fr 1fr 92px 250px}
.crow.head.hasicon.novis{grid-template-columns:26px 1.5fr 118px 1.15fr 1fr 1fr 92px 250px}
.crow .cell.icon{gap:5px}
.crow .cell.icon select{font-size:12px;padding:6px 4px}
.crow .iconprev{flex:0 0 auto;display:flex;align-items:center;justify-content:center;
  width:26px;height:26px;border:1px solid var(--line);border-radius:6px;color:var(--muted);background:#f8fafc}

/* =====================================================================
   Categories admin — full-width layout, stat bar, modal
   ===================================================================== */
.pagehead{display:flex;align-items:flex-start;justify-content:space-between;gap:20px;
  flex-wrap:wrap;margin:22px 0 6px}
.pagehead h1{margin:0 0 4px;font-size:24px;letter-spacing:-.3px}
.pagehead .lede{margin:0;color:var(--muted);font-size:13px;max-width:720px}
.pagehead-actions{display:flex;gap:8px;align-items:center}
.pagehead-actions{flex-wrap:wrap;justify-content:flex-end}
.pagehead-actions .btn{display:inline-flex;align-items:center;gap:6px;padding:8px 12px;font-size:12.5px;line-height:1.2;white-space:nowrap}
.pagehead-actions .btn .ico{flex:none}

.statbar{display:grid;grid-template-columns:repeat(4,1fr);gap:12px;margin:16px 0}
.statbar div{background:#fff;border:1px solid var(--line);border-radius:var(--radius);padding:12px 16px}
.statbar b{display:block;font-size:22px;line-height:1.2}
.statbar span{font-size:12px;color:var(--muted)}
.statbar .warnstat{background:#fff8ec;border-color:#f2dcae}

.panel.wide{padding:0;overflow:hidden}
.panel.wide .crow.head{position:sticky;top:0;z-index:2;border-radius:0;padding:11px 14px;
  border-bottom:1px solid var(--line)}
.panel.wide .crow{padding-left:14px;padding-right:14px}
.crow .cell.mid{justify-content:center;text-align:center}
.crow.head .mid{text-align:center}
.crow.head .right{text-align:right}
.crow:hover:not(.head){background:#fbfcfd}
.tablefoot{display:flex;justify-content:space-between;align-items:center;gap:16px;flex-wrap:wrap;
  padding:11px 14px;background:#fafbfc;border-top:1px solid var(--line);font-size:12px;color:var(--muted)}
.emptyrow{padding:36px 14px;text-align:center;color:var(--muted)}

/* on/off switch for the Live column */
.switch{position:relative;display:inline-block;width:36px;height:20px;cursor:pointer}
.switch input{opacity:0;width:0;height:0;position:absolute}
.switch i{position:absolute;inset:0;background:#cfd6de;border-radius:20px;transition:.15s}
.switch i:before{content:"";position:absolute;width:16px;height:16px;left:2px;top:2px;
  background:#fff;border-radius:50%;transition:.15s}
.switch input:checked + i{background:var(--green)}
.switch input:checked + i:before{transform:translateX(16px)}

/* the Live column grows a second little switch ("Own menu") for top-level
   categories once nav_separate is around — stacked, not side by side, so it
   still fits the same narrow column instead of needing a layout of its own. */
.crow .cell.mid.dual{flex-direction:column;gap:4px}

/* modal */
.modal{position:fixed;inset:0;background:rgba(12,20,32,.55);display:flex;align-items:flex-start;
  justify-content:center;padding:60px 20px;z-index:120;overflow:auto}
.modal[hidden]{display:none}
.modal-card{background:#fff;border-radius:12px;width:100%;max-width:560px;
  box-shadow:0 18px 50px rgba(10,20,40,.28);animation:pop .14s ease-out}
@keyframes pop{from{transform:translateY(-8px);opacity:.6}to{transform:none;opacity:1}}
.modal-head{display:flex;align-items:center;justify-content:space-between;
  padding:16px 20px;border-bottom:1px solid var(--line)}
.modal-head h3{margin:0;font-size:17px}
.modal-x{border:0;background:none;font-size:26px;line-height:1;color:var(--muted);cursor:pointer}
.modal-x:hover{color:var(--ink)}
.modal-body{padding:18px 20px}
.modal-body .field label small{font-weight:400;color:var(--muted);margin-left:4px}
.modal-body .field label.inline{display:flex;align-items:center;gap:8px;font-weight:400}
.modal-foot{display:flex;justify-content:flex-end;gap:8px;padding:14px 20px;
  border-top:1px solid var(--line);background:#fafbfc;border-radius:0 0 12px 12px}

@media(max-width:1100px){.statbar{grid-template-columns:1fr 1fr}}

/* department (top-level) names stand out from their sub-categories */
.crow:not(.child):not(.head):not(.toplevel-drop):not(.uncat) .cell.name input{
  font-weight:700;color:var(--ink)}
.crow.child .cell.name input{font-weight:400}
.crow.hiddencat:not(.child) .cell.name input{color:var(--muted)}

/* checkboxes and radios must not inherit the full-width field rule */
.field input[type=checkbox],
.field input[type=radio]{width:auto;display:inline-block;margin:0;flex:0 0 auto}

/* a checkbox with its wording, as one tidy control */
.field label.inline,
.field > label:has(> input[type=checkbox]){
  display:flex;align-items:center;gap:9px;font-weight:400;font-size:13.5px;
  padding:10px 12px;border:1px solid var(--line);border-radius:8px;background:#fafbfc;
  cursor:pointer;margin:0}
.field label.inline:hover{border-color:var(--blue)}
.field label.inline input{order:-1}

/* multi-category picker on the product form — a select-styled box that
   opens a checklist panel instead of offering one choice at a time */
.catselect{position:relative}
.catselect-box{display:flex;align-items:center;justify-content:space-between;gap:8px;
  width:100%;padding:10px;border:1px solid var(--line);border-radius:8px;background:#fff;
  font:inherit;text-align:left;cursor:pointer;color:var(--ink)}
.catselect-box:hover{border-color:var(--blue)}
.catselect.open .catselect-box{border-color:var(--blue)}
.catselect-box svg{flex:0 0 auto;stroke:var(--muted);transition:transform .15s}
.catselect.open .catselect-box svg{transform:rotate(180deg)}
.catselect-summary{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;color:var(--muted)}
.catselect-summary.has-value{color:var(--ink)}
.catselect-panel{position:absolute;z-index:20;top:calc(100% + 4px);left:0;right:0;
  max-height:260px;overflow-y:auto;background:#fff;border:1px solid var(--line);
  border-radius:8px;box-shadow:var(--shadow);padding:6px}
.catselect-opt{display:flex;align-items:center;gap:8px;padding:7px 9px;border-radius:6px;
  cursor:pointer;font-size:13.5px;font-weight:400;margin:0}
.catselect-opt:hover{background:var(--bg)}
.catselect-opt input{width:auto;margin:0;flex:0 0 auto}

/* image upload boxes on the product form */
.uploadbox{border:1px solid var(--line);border-radius:var(--radius);padding:12px;margin-bottom:12px;background:#fafbfc}
.uploadbox > label{display:block;font-size:12px;font-weight:700;margin-bottom:8px}
.uploadbox > label small{font-weight:400;color:var(--muted);margin-left:4px}
.uploadbox .preview{display:block;max-height:130px;margin:0 auto 10px;background:#fff;
  border:1px solid var(--line);border-radius:8px;padding:6px}
.uploadbox .preview.empty{display:flex;align-items:center;justify-content:center;height:90px;
  color:var(--muted);font-size:12px;border-style:dashed}
.uploadbox input[type=file]{width:100%;font-size:12.5px;padding:8px;border:1px dashed var(--line);
  border-radius:8px;background:#fff;margin-bottom:8px;cursor:pointer}
.uploadbox input[type=file]:hover{border-color:var(--blue)}
.uploadbox input[type=text],.uploadbox input:not([type]){width:100%;padding:8px;border:1px solid var(--line);
  border-radius:8px;font-size:12px;color:var(--muted)}

/* storefront gallery */
.detail .gal .thumbs{display:flex;flex-wrap:wrap;gap:8px;margin-top:12px}
.detail .gal .thumb{width:70px;height:70px;padding:4px;background:#fff;border:1px solid var(--line);
  border-radius:8px;cursor:pointer;display:flex;align-items:center;justify-content:center}
.detail .gal .thumb img{max-width:100%;max-height:100%;object-fit:contain}
.detail .gal .thumb:hover{border-color:var(--blue)}
.detail .gal .thumb.on{border-color:var(--blue);box-shadow:0 0 0 2px rgba(46,90,172,.22)}

/* admin gallery editor */
.uploadbox.gallery .galgrid{display:grid;grid-template-columns:repeat(auto-fill,minmax(112px,1fr));
  gap:10px;margin-bottom:12px}
.galitem{background:#fff;border:1px solid var(--line);border-radius:8px;padding:8px;
  display:flex;flex-direction:column;gap:6px}
.galitem img{width:100%;height:74px;object-fit:contain}
.galitem input[type=number]{width:100%;padding:5px;border:1px solid var(--line);border-radius:6px;font-size:12px}
.galitem input[type=text]{width:100%;padding:5px;border:1px solid var(--line);border-radius:6px;font-size:11.5px}
.galitem label{display:flex;align-items:center;gap:5px;font-size:11.5px;color:var(--muted);cursor:pointer;
  padding:0;border:0;background:none}
.galitem label input{width:auto;margin:0}
.galitem .galdel{color:var(--price)}
.galitem:has(.galdel input:checked){opacity:.5;border-color:var(--price)}
.galitem:has(.galmain input:checked){border-color:var(--blue);box-shadow:0 0 0 2px rgba(10,91,211,.15)}

/* gallery: drag to reorder, drop to upload */
.galitem{position:relative;cursor:default}
.galgrid.js .galitem{cursor:grab}
.galgrid.js .galitem:active{cursor:grabbing}
.galgrid.js .ordfield{display:none}
.galpos{position:absolute;top:6px;left:6px;background:var(--ink);color:#fff;font-size:10.5px;
  font-weight:700;min-width:18px;height:18px;border-radius:20px;display:none;
  align-items:center;justify-content:center;padding:0 5px}
.galgrid.js .galpos{display:flex}
.galgrip{position:absolute;top:6px;right:8px;color:#b6bec8;font-size:13px;display:none}
.galgrid.js .galgrip{display:block}
.galitem.dragging{opacity:.4}
.galitem.over{box-shadow:inset 0 0 0 2px var(--blue)}

.dropzone{position:relative;border:2px dashed var(--line);border-radius:10px;background:#fff;
  padding:14px;text-align:center;transition:.12s}
.dropzone.over{border-color:var(--blue);background:#f2f7ff}
.dropzone input[type=file]{width:100%;border:0;background:none;padding:0;margin:0;font-size:12.5px;cursor:pointer}
.dz-hint{margin:6px 0 0;font-size:12px;color:var(--muted)}
.dropzone.over .dz-hint{color:var(--blue)}

/* admin: bulk image upload — match-to-product review grid */
.matchgrid{display:grid;grid-template-columns:repeat(auto-fill,minmax(190px,1fr));gap:12px;margin:14px 0}
.matchitem{background:#fff;border:1px solid var(--line);border-radius:8px;padding:10px;
  display:flex;flex-direction:column;gap:7px}
.matchitem img{width:100%;height:120px;object-fit:contain;background:#fafbfc;border-radius:6px}
.matchitem .mname{font-size:11px;color:var(--muted);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.matchitem input[list]{width:100%;padding:7px 9px;border:1px solid var(--line);border-radius:6px;font-size:12.5px}
.matchitem.guessed{border-color:var(--blue)}
.matchitem .guesstag{font-size:10.5px;color:var(--blue);font-weight:600;display:flex;align-items:center;gap:4px}

.pending{display:flex;flex-wrap:wrap;gap:8px;margin-top:10px}
.penditem{width:76px;background:#fff;border:1px solid var(--line);border-radius:8px;padding:5px;
  display:flex;flex-direction:column;gap:4px;align-items:center}
.penditem img{width:100%;height:52px;object-fit:contain}
.penditem span{font-size:10.5px;color:var(--muted);text-align:center;word-break:break-all;line-height:1.25}

/* main-image selection inside the gallery */
.keepmain{display:flex;align-items:center;gap:8px;font-size:12.5px;background:#fff;
  border:1px solid var(--line);border-radius:8px;padding:8px 10px;margin-bottom:10px;cursor:pointer}
.keepmain input{width:auto;margin:0}
.keepmain img{height:34px;margin-left:auto;border:1px solid var(--line);border-radius:6px;padding:2px;background:#fff}
.keepmain:hover{border-color:var(--blue)}
.galitem.ismain{border-color:var(--green);box-shadow:0 0 0 2px rgba(18,129,63,.15)}
.mainflag{position:absolute;top:6px;left:6px;background:var(--green);color:#fff;font-size:9.5px;
  font-weight:700;padding:2px 7px;border-radius:20px;letter-spacing:.02em}
.galgrid.js .galitem.ismain .galpos{left:auto;right:30px}
.galitem .galmain input:disabled + span,.galitem .galmain input:disabled{opacity:.5}

/* ---------- product page: assurances, zoom, sticky buy bar ---------- */
ul.assure{list-style:none;margin:18px 0 4px;padding:14px 16px;display:grid;
  grid-template-columns:1fr 1fr;gap:10px 18px;background:#f7f9fb;border:1px solid var(--line);border-radius:var(--radius)}
ul.assure li{font-size:12.5px;line-height:1.45}
ul.assure b{display:block;font-size:11px;text-transform:uppercase;letter-spacing:.04em;color:var(--muted)}
ul.assure span{color:var(--ink)}

.detail .gal img#mainShot{cursor:zoom-in}
.zoomhint{font-size:11.5px;color:var(--muted);text-align:center;margin:8px 0 0}
.detail .gal{aspect-ratio:auto}
.detail .gal > img{aspect-ratio:1/1;object-fit:contain}

.lightbox{position:fixed;inset:0;background:rgba(10,16,24,.93);z-index:150;
  display:flex;align-items:center;justify-content:center;padding:40px}
.lightbox[hidden]{display:none}
.lightbox img{max-width:88vw;max-height:86vh;object-fit:contain;background:#fff;border-radius:10px;padding:10px}
.lb-close{position:absolute;top:14px;right:20px;background:none;border:0;color:#fff;font-size:38px;
  line-height:1;cursor:pointer;opacity:.8}
.lb-close:hover{opacity:1}
.lb-nav{position:absolute;top:50%;transform:translateY(-50%);background:rgba(255,255,255,.14);
  border:0;color:#fff;font-size:34px;width:48px;height:64px;border-radius:8px;cursor:pointer}
.lb-nav:hover{background:rgba(255,255,255,.26)}
.lb-prev{left:18px}
.lb-next{right:18px}
.lb-count{position:absolute;bottom:20px;left:0;right:0;text-align:center;color:#fff;font-size:13px;opacity:.85}

.stickybuy{position:fixed;left:0;right:0;bottom:0;background:#fff;border-top:1px solid var(--line);
  box-shadow:0 -4px 18px rgba(16,24,40,.10);z-index:60;padding:10px 0}
.stickybuy[hidden]{display:none}
.stickybuy .wrap{display:flex;align-items:center;gap:14px}
.stickybuy img{width:42px;height:42px;object-fit:contain}
.stickybuy .sb-name{font-size:13px;font-weight:700;flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.stickybuy .sb-price{font-size:19px;font-weight:700;color:var(--price)}
.stickybuy form{display:flex;gap:8px;align-items:center}
.stickybuy input[type=number]{width:62px;padding:9px;border:1px solid var(--line);border-radius:8px;text-align:center}
@media(max-width:700px){
  ul.assure{grid-template-columns:1fr}
  .stickybuy .sb-name{display:none}
  .lb-nav{width:40px;height:54px;font-size:28px}
}

/* simple HTML editor for specifications */
.editor{border:1px solid var(--line);border-radius:var(--radius);overflow:hidden;background:#fff}
.ed-toolbar{display:flex;flex-wrap:wrap;gap:4px;padding:7px 8px;background:#f2f5f9;border-bottom:1px solid var(--line)}
.ed-toolbar button{border:1px solid transparent;background:#fff;border-radius:6px;padding:5px 9px;
  font-size:12px;cursor:pointer;color:var(--ink);min-width:30px}
.ed-toolbar button:hover{border-color:var(--blue);color:var(--blue)}
.ed-toolbar button.on{background:var(--blue);color:#fff;border-color:var(--blue)}
.ed-sep{width:1px;background:var(--line);margin:2px 4px}
.ed-area{min-height:190px;padding:12px 14px;font-size:13.5px;line-height:1.55;outline:none}
.ed-area:focus{box-shadow:inset 0 0 0 2px rgba(10,91,211,.12)}
.ed-area table{border-collapse:collapse;width:100%;margin:6px 0}
.ed-area th,.ed-area td{border:1px solid var(--line);padding:6px 8px;text-align:left;font-size:13px}
.ed-area th{background:#f7f9fb;width:38%;font-weight:700}
.ed-area h3{font-size:15px;margin:10px 0 4px}
.ed-area ul,.ed-area ol{margin:6px 0;padding-left:20px}
.ed-code{width:100%;min-height:190px;border:0;padding:12px 14px;font:12px/1.5 Menlo,Consolas,monospace;
  resize:vertical;outline:none}
.field label small{font-weight:400;color:var(--muted);margin-left:5px}

/* storefront: rendered specification HTML */
.specs-html{font-size:13.5px;line-height:1.6}
.specs-html table{border-collapse:collapse;width:100%;margin:4px 0}
.specs-html th,.specs-html td{border-bottom:1px solid var(--line);padding:7px 9px;text-align:left;vertical-align:top}
.specs-html th{width:200px;color:var(--muted);font-weight:700}
/* Labels stay on one line ("Minimum Bending Radius"); on a phone they may wrap again. */
@media (min-width:600px){
  .specs-html td:first-child,.specs-html th:first-child{white-space:nowrap;padding-right:18px}
}
.specs-html ul,.specs-html ol{margin:4px 0;padding-left:20px}
.specs-html h3,.specs-html h4{font-size:14px;margin:12px 0 4px}

/* =====================================================================
   Product add/edit — stacked card layout
   ===================================================================== */
#productForm{max-width:1000px;margin:0 auto 90px}
#productForm .card{background:#fff;border:1px solid var(--line);border-radius:12px;margin-bottom:18px;overflow:hidden}
#productForm .card-head{display:flex;align-items:center;justify-content:space-between;gap:16px;
  padding:14px 20px;border-bottom:1px solid var(--line);background:#fafbfc}
#productForm .card-head h2{margin:0;font-size:15px}
#productForm .card-hint{font-size:12px;color:var(--muted)}
#productForm .card-body{padding:20px}
#productForm .grid-2{display:grid;grid-template-columns:1fr 1fr;gap:16px}
#productForm .grid-3{display:grid;grid-template-columns:repeat(3,1fr);gap:16px}
#productForm .two{display:grid;grid-template-columns:1fr 1fr;gap:16px}
#productForm .field{margin-bottom:16px}
#productForm .grid-2 .field,#productForm .grid-3 .field,#productForm .two .field{margin-bottom:0}
#productForm .pricing{background:#f7f9fb;border:1px solid var(--line);border-radius:var(--radius);padding:14px;margin-top:4px}
#productForm .uploadbox{margin-bottom:0;height:100%}
#productForm .uploadbox.gallery{margin-top:16px}

/* visible-in-store switch in the card header */
.livetoggle{display:flex;align-items:center;gap:9px;font-size:12.5px;cursor:pointer;white-space:nowrap}
.livetoggle input{position:absolute;opacity:0;width:0;height:0}
.livetoggle i{width:36px;height:20px;border-radius:20px;background:#cfd6de;position:relative;transition:.15s;flex:0 0 auto}
.livetoggle i:before{content:"";position:absolute;width:16px;height:16px;left:2px;top:2px;background:#fff;
  border-radius:50%;transition:.15s}
.livetoggle input:checked + i{background:var(--green)}
.livetoggle input:checked + i:before{transform:translateX(16px)}

/* sticky save bar — pinned to the bottom of the screen for the whole
   scroll of this long form. The one problem that caused (floating on top
   of the specs editor's own toolbar, blocking its buttons) is handled in
   product_edit.php's formBarUpdate() script: it adds .away for exactly the
   stretch of scrolling where the two would otherwise overlap, fading the
   bar out there and back in everywhere else. */
.formbar{position:sticky;bottom:0;display:flex;align-items:center;gap:10px;justify-content:flex-end;
  background:#fff;border:1px solid var(--line);border-radius:12px;padding:12px 16px;
  box-shadow:0 -3px 14px rgba(16,24,40,.07);margin-top:6px;
  transition:opacity .15s ease}
.formbar.away{opacity:0;pointer-events:none}
@media(prefers-reduced-motion: reduce){.formbar{transition:none}}
.formbar .fb-note{margin-right:auto;font-size:12px;color:var(--muted)}

@media(max-width:820px){
  #productForm .grid-2,#productForm .grid-3,#productForm .two{grid-template-columns:1fr}
}

/* Options & variants — one row per option (name + comma-separated values),
   and a generated grid below with one row per value combination. */
.optrows{display:flex;flex-direction:column;gap:8px;margin-bottom:10px}
.optrow{display:grid;grid-template-columns:180px 1fr 34px;gap:8px;align-items:center}
.optrow input{width:100%;padding:10px;border:1px solid var(--line);border-radius:8px;font-size:13.5px}
.optrow input:focus{outline:none;border-color:var(--blue)}
.optremove{width:34px;height:34px;padding:0;border-radius:8px;font-size:16px;line-height:1;color:var(--price)}
.subhead{margin:18px 0 8px;font-size:13.5px;font-weight:700}
.varhead,.variantrow{display:grid;
  grid-template-columns:minmax(90px,1fr) minmax(90px,1fr) 100px 100px 110px minmax(120px,1.3fr);
  gap:8px;align-items:center}
.varhead{font-size:11px;font-weight:700;text-transform:uppercase;letter-spacing:.03em;color:var(--muted);
  padding:0 2px 6px}
#variantRows{display:flex;flex-direction:column;gap:8px}
.variantrow{background:#f7f9fb;border:1px solid var(--line);border-radius:8px;padding:8px}
.variantrow .v-combo{font-size:12.5px;font-weight:600;padding:0 2px}
.variantrow input,.variantrow select{width:100%;padding:8px;border:1px solid var(--line);
  border-radius:6px;font-size:12.5px;background:#fff}
.variantrow input:focus,.variantrow select:focus{outline:none;border-color:var(--blue)}
@media(max-width:820px){
  .optrow{grid-template-columns:1fr 34px;grid-template-rows:auto auto}
  .optrow input:first-child{grid-column:1}
  .optrow input:nth-child(2){grid-column:1 / -2}
  .varhead{display:none}
  .variantrow{grid-template-columns:1fr 1fr;grid-auto-flow:row}
  .variantrow .v-combo{grid-column:1 / -1}
}

/* full-width specifications block under the gallery and buy box */
.specsblock{background:#fff;border:1px solid var(--line);border-radius:var(--radius);
  padding:22px 26px;margin:0 0 22px}
.specsblock h2{margin:0 0 14px;font-size:16px;padding-bottom:10px;border-bottom:1px solid var(--line)}
.specsblock .specs-html th{width:260px}
@media(min-width:900px){
  .specsblock .specs-html table{max-width:900px}
}

/* =====================================================================
   Typography refinements for the web font
   ===================================================================== */
:root{--font-sans:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif}
button,input,select,textarea{font-family:inherit}

h1,h2,h3,h4,h5{font-weight:600;letter-spacing:-.015em;color:var(--ink)}
h1{letter-spacing:-.022em}

/* prices and quantities line up column-wise with tabular numerals */
.card .pr b,.dprice,.summary .row span,.line .lp,.stickybuy .sb-price,
.statbar b,.stat b,table.data td,.crow .cell.count,.pager a,.pager span,
.qty input,input[type=number]{font-variant-numeric:tabular-nums;font-feature-settings:"tnum" 1}

.card .pr b,.dprice,.stickybuy .sb-price{font-weight:600;letter-spacing:-.02em}
.card .nm{font-weight:500;letter-spacing:-.005em;line-height:1.4}
.detail h1{font-size:24px;line-height:1.28}
.desc,.specs-html,ul.assure span{font-size:14px}

/* buttons and labels read better a touch lighter than 700 */
.btn,.cartbtn,.crow .cell.acts .btn{font-weight:600}
aside.filters h4,table.data th,.crow.head,ul.assure b{font-weight:600;letter-spacing:.02em}
.badge{font-weight:600}

/* small caps-ish labels stay legible in the web font */
h3.sub,.card-head h2,.specsblock h2{font-weight:600;letter-spacing:-.01em}

/* availability line on the product page */
.avail{margin:10px 0 18px}
.avail .in{font-size:17px;font-weight:600;color:var(--green)}
.avail .out{font-size:17px;font-weight:600;color:var(--price)}
.avail .ship{font-size:14px;font-weight:400;color:var(--ink);margin-left:4px}

/* related-product picker */
.relgrid{display:grid;grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:12px;margin-bottom:18px}
.relitem{display:flex;flex-direction:column;gap:5px;background:#fff;border:1px solid var(--line);
  border-radius:10px;padding:10px;cursor:pointer;font-size:12px}
.relitem img{width:100%;height:70px;object-fit:contain}
.relitem .reltitle{font-weight:500;line-height:1.35}
.relitem .relprice{color:var(--price);font-weight:600}
.relitem .relrm{margin-top:2px;border:1px solid var(--line);background:#fff;color:var(--price);
  border-radius:7px;padding:5px 8px;font-size:11.5px;cursor:pointer;font-family:inherit}
.relitem .relrm:hover{border-color:var(--price);background:#fdf3f2}
.relitem .relrm:disabled{opacity:.5;cursor:default}
.relbar{display:flex;align-items:center;gap:12px;margin:0 0 18px}
.reladd > label{display:block;font-size:12px;font-weight:600;margin-bottom:6px}
.relrows{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:10px;margin-bottom:10px}
.relrows input{width:100%;padding:10px;border:1px solid var(--line);border-radius:8px;font:inherit}
.relrows input:focus{outline:none;border-color:var(--blue)}

/* product cards: centred text, no reserved gap under short titles */
.card .cb{align-items:center;text-align:center}
.card .nm{min-height:0;text-align:center}
.card .pr{text-align:center}
.card .cb form{width:100%}

/* =====================================================================
   Required fields and inline validation — global
   ===================================================================== */

/* an asterisk appears automatically beside any label whose control is required */
.field:has(> input[required], > select[required], > textarea[required]) > label::after,
.field:has(input[required], select[required], textarea[required]) > label::after,
label.req::after{
  content:" *";color:var(--price);font-weight:700;font-size:1.05em;line-height:1}

/* browsers without :has() still show manually marked labels */
.field > label .req{color:var(--price);font-weight:700}

/* the field that needs attention */
input.invalid,select.invalid,textarea.invalid{
  border-color:var(--price);background:#fffafa;box-shadow:0 0 0 3px rgba(192,57,43,.10)}
input.invalid:focus,select.invalid:focus,textarea.invalid:focus{
  outline:none;border-color:var(--price);box-shadow:0 0 0 3px rgba(192,57,43,.18)}

.fielderr{display:flex;align-items:center;gap:6px;color:var(--price);font-size:12.5px;
  margin-top:6px;animation:errIn .16s ease-out}
.fielderr::before{content:"!";display:inline-flex;align-items:center;justify-content:center;
  width:15px;height:15px;border-radius:50%;background:var(--price);color:#fff;
  font-size:10px;font-weight:700;flex:0 0 auto}
@keyframes errIn{from{opacity:0;transform:translateY(-3px)}to{opacity:1;transform:none}}

/* the floating summary */
.formtoast{position:fixed;left:50%;bottom:26px;transform:translate(-50%,14px);
  background:#16191d;color:#fff;font-size:13.5px;font-weight:500;
  padding:12px 20px;border-radius:10px;box-shadow:0 8px 26px rgba(10,20,40,.28);
  z-index:200;opacity:0;pointer-events:none;transition:opacity .18s,transform .18s}
.formtoast.on{opacity:1;transform:translate(-50%,0)}
.formtoast::before{content:"";display:inline-block;width:8px;height:8px;border-radius:50%;
  background:var(--price);margin-right:9px;vertical-align:middle}

/* label with a helper link on the right (e.g. Forgot your password?) */
/* labels nested in a label row still get the required asterisk */
.field:has(input[required], select[required], textarea[required]) > .labelrow > label::after{
  content:" *";color:var(--price);font-weight:700;font-size:1.05em;line-height:1}

.labelrow{display:flex;align-items:baseline;justify-content:space-between;gap:12px;margin-bottom:4px}
.labelrow label{margin:0}
.labelrow .minor{font-size:12px;font-weight:400;color:var(--blue)}
.labelrow .minor:hover{text-decoration:underline}

/* ---------- password fields, strength meter, bot trap ---------- */
.pwwrap{position:relative;display:flex;align-items:center}
.pwwrap input{padding-right:62px}
.pwtoggle{position:absolute;right:6px;top:50%;transform:translateY(-50%);border:0;background:none;
  color:var(--blue);font-size:12px;font-weight:600;cursor:pointer;padding:6px 8px;font-family:inherit}
.pwtoggle:hover{text-decoration:underline}

.pwmeter{margin-top:8px}
.pwmeter span{display:block;height:5px;width:0;border-radius:4px;background:var(--price);transition:width .18s,background .18s}
.pwmeter em{display:block;font-size:11.5px;font-style:normal;color:var(--muted);margin-top:5px}
.pwmeter[data-level="2"] span{background:var(--amber)}
.pwmeter[data-level="3"] span{background:#7cb342}
.pwmeter[data-level="4"] span{background:var(--green)}
.pwmeter[data-level="3"] em,.pwmeter[data-level="4"] em{color:var(--green)}

.checkline{display:flex;align-items:center;gap:9px;font-size:13px;margin:0 0 14px;cursor:pointer}
.checkline input{width:auto;margin:0}

/* honeypot: off-screen for people, irresistible to bots */
.hp{position:absolute;left:-9999px;top:auto;width:1px;height:1px;overflow:hidden}

/* ---------- address book ---------- */
.panel-head{display:flex;align-items:center;justify-content:space-between;gap:14px;margin-bottom:14px}
.panel-head h2{margin:0;font-size:16px}
.addrgrid{display:grid;grid-template-columns:repeat(auto-fill,minmax(230px,1fr));gap:12px;margin-bottom:16px}
.addrcard{position:relative;border:1px solid var(--line);border-radius:10px;padding:14px;background:#fff;
  display:flex;flex-direction:column;gap:5px;font-size:13px}
.addrcard.isdefault{border-color:var(--green);box-shadow:0 0 0 2px rgba(18,129,63,.12)}
.addrflag{position:absolute;top:10px;right:10px;background:var(--green);color:#fff;font-size:10px;
  font-weight:700;padding:2px 8px;border-radius:20px}
.addrcard .who{color:var(--muted)}
.addrcard .lines{line-height:1.5}
.addracts{display:flex;flex-wrap:wrap;gap:6px;margin-top:auto;padding-top:10px;border-top:1px solid var(--line)}
.addrform{border-top:1px solid var(--line);padding-top:6px}

/* checkout address picker */
.addrpick{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:10px;margin-bottom:18px}
.addropt{display:flex;align-items:flex-start;gap:10px;border:1px solid var(--line);border-radius:10px;
  padding:12px;cursor:pointer;background:#fff;font-size:13px;line-height:1.45}
.addropt:hover{border-color:var(--blue)}
.addropt.on{border-color:var(--blue);box-shadow:0 0 0 2px rgba(46,90,172,.18);background:#f7faff}
.addropt input{width:auto;margin:2px 0 0}
.addropt small{color:var(--muted)}
.tinyflag{font-style:normal;font-size:10px;font-weight:700;color:var(--green);
  background:#e8f6ec;border-radius:20px;padding:1px 7px;margin-left:5px}

/* delivery instructions */
.addrnote{background:#fff8ec;border:1px solid #f2dcae;border-radius:7px;padding:6px 9px;
  font-size:12px;color:#8a5a06;line-height:1.4}
.deliverynote{background:#fff8ec;border:1px solid #f2dcae;border-radius:8px;padding:10px 12px;
  font-size:13px;margin:0}

/* ---------- Yes / No dialog ---------- */
.askbox .modal-card{max-width:440px}
.askbox .modal-head h3{font-size:16px}
.askbox .askmsg{margin:0;font-size:14px;line-height:1.55;color:var(--ink)}
.askbox .modal-foot .btn{min-width:88px}
.askbox .modal-foot .btn.ghost{color:var(--muted)}

/* =====================================================================
   Account summary bar
   ===================================================================== */
.acctbar{display:flex;align-items:center;justify-content:space-between;gap:20px;flex-wrap:wrap;
  background:#fff;border:1px solid var(--line);border-radius:12px;padding:14px 18px;margin:18px 0}
.acctbar .who{display:flex;align-items:center;gap:13px;min-width:0}
.acctbar .avatar{width:44px;height:44px;flex:0 0 auto;border-radius:50%;
  background:linear-gradient(135deg,var(--blue),var(--accent));color:#fff;font-weight:600;font-size:16px;
  display:flex;align-items:center;justify-content:center;letter-spacing:.02em}
.acctbar .idblock{display:flex;flex-direction:column;gap:2px;min-width:0}
.acctbar .idblock b{font-size:16px;font-weight:600;letter-spacing:-.01em}
.acctbar .meta{font-size:12.5px;color:var(--muted);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.acctbar .micro{font-size:11.5px;color:#9aa4b2}
.acctbar .vtick{font-style:normal;color:var(--green);font-weight:600;margin-left:4px}
.acctbar .vwarn{color:var(--amber);font-weight:600;margin-left:4px}

.acctstats{display:flex;gap:8px;flex-wrap:wrap;align-items:stretch}
.acctstats .stat{display:flex;flex-direction:column;justify-content:center;gap:1px;min-width:78px;
  padding:8px 12px;border:1px solid var(--line);border-radius:9px;background:#fafbfc;
  text-decoration:none;color:var(--ink);transition:.12s}
.acctstats .stat:hover{border-color:var(--blue);background:#f4f8ff;text-decoration:none}
.acctstats .stat b{font-size:16px;font-weight:600;line-height:1.15;font-variant-numeric:tabular-nums}
.acctstats .stat span{font-size:11px;color:var(--muted);white-space:nowrap}
/* The pill badge is an inline-block with its own vertical padding, so next
   to plain text it aligns on its own text baseline rather than the text's —
   a small but visible mismatch in a card this compact. inline-flex centers
   the two on the same line regardless of either one's own metrics. */
.acctstats .stat .statline{display:inline-flex;align-items:center;gap:5px}
.acctstats .stat.open{background:#fff8ec;border-color:#f2dcae}
.acctstats .stat.open b{color:#8a5a06}
.acctstats .stat.wide{min-width:132px}
.acctstats .stat.wide b{font-size:13.5px}
.acctstats .stat.act{min-width:60px;text-align:center;align-items:center}
.acctstats .stat.act b{font-size:15px;color:var(--blue)}

@media(max-width:760px){
  .acctbar{align-items:flex-start}
  .acctstats{width:100%}
  .acctstats .stat{flex:1 1 84px;min-width:0}
  .acctbar .meta{white-space:normal}
}

/* ---------- order progress ---------- */
ol.progress{list-style:none;display:grid;grid-template-columns:repeat(3,1fr);gap:14px;margin:16px 0 4px;padding:0}
ol.progress li{position:relative;padding-top:26px;font-size:12.5px;color:var(--muted)}
ol.progress li:before{content:"";position:absolute;top:6px;left:0;width:14px;height:14px;border-radius:50%;
  background:#fff;border:2px solid var(--line)}
ol.progress li:after{content:"";position:absolute;top:12px;left:16px;right:-14px;height:2px;background:var(--line)}
ol.progress li:last-child:after{display:none}
ol.progress li b{display:block;color:var(--muted);font-size:13px;margin-bottom:2px}
ol.progress li.done:before,ol.progress li.now:before{border-color:var(--green);background:var(--green)}
ol.progress li.done:after{background:var(--green)}
ol.progress li.done b,ol.progress li.now b{color:var(--ink)}
ol.progress li.now:before{box-shadow:0 0 0 4px rgba(18,129,63,.15)}
@media(max-width:640px){ol.progress{grid-template-columns:1fr;gap:10px}ol.progress li:after{display:none}}

/* ---------- mini-cart ---------- */
.minicart{position:relative}
.mcpanel{position:absolute;right:0;top:calc(100% + 10px);width:320px;background:#fff;
  border:1px solid var(--line);border-radius:12px;box-shadow:0 12px 34px rgba(16,24,40,.14);
  padding:14px;z-index:50}
.mcpanel[hidden]{display:none}
.mcempty{margin:0;font-size:13px;color:var(--muted);text-align:center;padding:10px 0}
.mclist{display:flex;flex-direction:column;gap:8px;margin-bottom:12px}
.mcrow{display:grid;grid-template-columns:38px 1fr auto;gap:9px;align-items:center;color:var(--ink);
  font-size:12.5px;text-decoration:none}
.mcrow:hover{text-decoration:none;color:var(--blue)}
.mcrow img{width:38px;height:38px;object-fit:contain}
.mcname{line-height:1.35}
.mcqty{color:var(--muted);white-space:nowrap;font-variant-numeric:tabular-nums}
.mcmore{margin:2px 0 0;font-size:11.5px;color:var(--muted)}
.mcfoot{display:flex;justify-content:space-between;align-items:center;padding:10px 0;
  border-top:1px solid var(--line);font-size:13px}
.mcfoot b{font-size:16px;color:var(--price);font-variant-numeric:tabular-nums}

/* free-shipping progress */
.shipbar{height:6px;border-radius:6px;background:var(--line);overflow:hidden;margin:4px 0 6px}
.shipbar .fill{display:block;height:100%;background:var(--amber);transition:width .3s}
.shipbar.done .fill{background:var(--green)}
.shipnote{margin:0 0 10px;font-size:12px;color:var(--muted)}
.shipbar.done + .shipnote{color:var(--green);font-weight:600}
@media(max-width:560px){.mcpanel{width:280px}}

/* ---------- content pages ---------- */
.contentpage{background:#fff;border:1px solid var(--line);border-radius:12px;
  padding:30px 34px;margin:8px auto 40px;max-width:820px}
.contentpage h1{margin:0 0 18px;font-size:26px}
.prose{font-size:14.5px;line-height:1.7;color:var(--ink)}
.prose h3{font-size:16px;margin:24px 0 6px}
.prose h4{font-size:14px;margin:18px 0 4px}
.prose p{margin:0 0 12px}
.prose ul,.prose ol{margin:0 0 12px;padding-left:22px}
.prose li{margin-bottom:4px}
.prose table{border-collapse:collapse;width:100%;margin:10px 0}
.prose th,.prose td{border:1px solid var(--line);padding:8px 10px;text-align:left}
.contentpage .note{border-top:1px solid var(--line);margin-top:24px;padding-top:14px}
@media(max-width:640px){.contentpage{padding:22px}}

/* ---------- account: history filter, requests, security ---------- */
.histfilter{display:flex;gap:8px;flex-wrap:wrap;align-items:center}
.histfilter input[type=search]{padding:8px 10px;border:1px solid var(--line);border-radius:8px;min-width:190px}
.histfilter select{padding:8px 10px}

.reqline{background:#fafbfc;border:1px solid var(--line);border-radius:8px;padding:9px 12px;
  font-size:12.5px;margin:0 0 8px}
.reqform{background:#fafbfc;border:1px solid var(--line);border-radius:10px;padding:12px 14px;margin-bottom:14px}
.reqform .field{margin-bottom:8px}

.secgrid{display:grid;grid-template-columns:repeat(auto-fit,minmax(230px,1fr));gap:14px}
.secitem{border:1px solid var(--line);border-radius:10px;padding:14px;display:flex;flex-direction:column;gap:6px}
.secitem b{font-size:13.5px}
.secitem span{font-size:12.5px;color:var(--muted);line-height:1.5;flex:1}
.secitem form{margin-top:4px}
.secitem.danger{border-color:#f5c4bd;background:#fffafa}

/* admin: customer requests on an order */
.adminreq{border:1px solid var(--line);border-radius:10px;padding:12px 14px;margin-bottom:10px;background:#fafbfc}
.adminreq .reqhead{display:flex;align-items:center;gap:10px;margin-bottom:6px}
.adminreq p{margin:0 0 6px;font-size:13px}
.reqresolve{display:flex;gap:6px;flex-wrap:wrap;align-items:center}
.reqresolve input{flex:1;min-width:180px;padding:7px 9px;border:1px solid var(--line);border-radius:7px;font-size:12.5px}

/* delete-account tile and dialog */
.acctstats .stat.danger b{color:var(--price)}
.acctstats .stat.danger:hover{border-color:var(--price);background:#fdf3f2}
#deleteModal .modal-card{max-width:480px}
#deleteModal .dellist{margin:0 0 12px;padding-left:20px;font-size:13.5px;color:var(--ink)}
#deleteModal .dellist li{margin-bottom:4px}
#deleteModal p{font-size:13.5px;line-height:1.55;color:var(--muted)}

/* account bar: the action buttons sit under the stats */
.acctacts{display:flex;gap:8px;flex-wrap:wrap;align-items:center;width:100%;
  justify-content:flex-end;padding-top:12px;margin-top:12px;border-top:1px solid var(--line)}
.acctacts .btn.danger{color:var(--price)}
.acctacts .btn.danger:hover{border-color:var(--price);background:#fdf3f2}
@media(max-width:760px){.acctacts{justify-content:flex-start}}

/* stat tiles: centre the number over its label */
.acctstats .stat{align-items:center;text-align:center}
.acctstats .stat b,.acctstats .stat span{width:100%;text-align:center}
.acctstats .stat.wide{align-items:center}

/* ---------- inline icons ---------- */
.ico{display:inline-block;vertical-align:-2px;flex:0 0 auto}
.btn .ico{margin-right:5px;vertical-align:-3px}
h2 .ico,h3 .ico{color:var(--muted);margin-right:7px;vertical-align:-3px}
.cartbtn .ico{margin-right:2px}
.search button .ico{vertical-align:-3px;margin-right:4px}
@media(max-width:640px){.search button .srlabel{display:none}}

/* stat tiles with an icon above the number */
.acctstats .stat .ico{color:var(--muted);margin-bottom:2px}
.acctstats .stat:hover .ico{color:var(--blue)}
.acctstats .stat.open .ico{color:#8a5a06}

/* the person an address belongs to reads as content, not metadata */
.addrcard .who{color:var(--ink);font-weight:500}

/* icons in the admin bar and headings */
.adminbar a .ico{vertical-align:-3px;margin-right:5px;opacity:.85}
.adminbar a.on .ico,.adminbar a:hover .ico{opacity:1}
.pagehead h1 .ico{color:var(--muted);margin-right:8px;vertical-align:-3px}
.card-head h2 .ico,.panel-head h2 .ico{color:var(--muted);margin-right:7px;vertical-align:-3px}

/* ---------- CSV product import ---------- */
.dropzone{border:2px dashed var(--line);border-radius:10px;background:#fbfcfd;
          padding:22px 18px;text-align:center;transition:border-color .15s,background .15s}
.dropzone:hover,.dropzone.over{border-color:var(--blue);background:#f5f9ff}
.dropzone input[type=file]{width:100%;font-size:13px;cursor:pointer}
.dropzone .dz-hint{margin:10px 0 0;font-size:12px;color:var(--muted)}
.dropzone .dz-file{margin:10px 0 0;font-size:12.5px;font-weight:600;color:var(--blue)}

textarea.mono{font:12px/1.5 Menlo,Consolas,monospace;white-space:pre;overflow-x:auto}

.imptable{max-height:430px;overflow:auto;border:1px solid var(--line);border-radius:8px}
.imptable table.data{font-size:12.5px}
.imptable table.data th{position:sticky;top:0;z-index:1}
.imptable code{font-size:11.5px;color:var(--muted)}
table.data tr.badrow td{background:#fdf6f5}
table.data tr.badrow:hover td{background:#fceeec}
table.data td.why{font-size:12px;color:#a32316}

.impgo{margin-top:16px;display:flex;gap:8px;align-items:center}
.impgo button[disabled]{opacity:.45;cursor:not-allowed}

table.data.cols-help td{padding:7px 8px;font-size:12px;color:var(--muted);vertical-align:top}
table.data.cols-help td:first-child{width:96px}
table.data.cols-help code{color:var(--ink);font-size:11.5px}

/* ---------- admin dashboard ---------- */

/* Tiles are links now: a number you can act on beats a number you can only read. */
.stats .stat{display:flex;flex-direction:column;align-items:center;text-align:center;
             text-decoration:none;color:inherit;position:relative;
             padding:16px 18px;transition:border-color .15s,box-shadow .15s,transform .15s}
.stats a.stat:hover{border-color:var(--blue);box-shadow:0 2px 10px rgba(10,91,211,.09);transform:translateY(-1px)}
.stats .stat .ico{color:var(--muted);margin-bottom:8px}
.stats a.stat:hover .ico{color:var(--blue)}
.stats .stat b{font-size:27px;letter-spacing:-.5px;line-height:1.15;margin-bottom:2px}
.stats .stat span{display:block;font-size:12px;color:var(--muted)}
.stats .stat em{display:block;align-self:stretch;margin-top:9px;padding-top:8px;border-top:1px solid var(--line);
                font-style:normal;font-size:11.5px;color:var(--muted)}
.stats .stat em.up{color:#12813f;font-weight:600}
.stats .stat em.down{color:#a32316;font-weight:600}

/* Fourteen-day takings, drawn with plain divs so no chart library is needed. */
.spark{display:flex;align-items:flex-end;gap:6px;height:132px;padding-top:6px}
.sparkcol{flex:1;display:flex;flex-direction:column;justify-content:flex-end;align-items:center;
          height:100%;gap:6px;cursor:default}
.sparkbar{width:100%;max-width:38px;background:#dce8fb;border-radius:4px 4px 0 0;min-height:2px;
          transition:background .15s}
.sparkcol:hover .sparkbar{background:var(--blue)}
.sparkbar.now{background:var(--blue)}
.sparkcol span{font-size:10.5px;color:var(--muted);font-variant-numeric:tabular-nums}

/* The to-do list: what is wrong, why it matters, and where to fix it. */
.todo{list-style:none;margin:0;padding:0}
.todo li{display:flex;gap:11px;padding:12px 0;border-top:1px solid var(--line)}
.todo li:first-child{border-top:0;padding-top:2px}
.todo li .ico{flex:0 0 auto;margin-top:2px}
.todo li.warn .ico{color:#b7791f}
.todo li.info .ico{color:var(--blue)}
.todo li.risk .ico{color:#a32316}
.todo li b{display:block;font-size:13px;line-height:1.35}
.todo li span{display:block;font-size:12px;color:var(--muted);margin-top:2px}
.todo li a{display:inline-block;margin-top:5px;font-size:12px;font-weight:600;text-decoration:none}
.allclear{font-size:13px;color:#12813f;background:#e8f6ec;border:1px solid #bfe4cb;
          border-radius:8px;padding:11px 13px;margin:0}
.allclear .ico{vertical-align:-3px;margin-right:5px}

/* Best sellers and recently added. */
.ranklist{list-style:none;margin:0;padding:0}
.ranklist li{display:flex;gap:10px;align-items:flex-start;padding:9px 0;border-top:1px solid var(--line)}
.ranklist li:first-child{border-top:0;padding-top:0}
.ranklist .rank{flex:0 0 22px;height:22px;border-radius:6px;background:#eef4ff;color:var(--blue);
                font-size:11.5px;font-weight:700;display:grid;place-items:center}
.ranklist a{font-size:13px;font-weight:500;text-decoration:none;display:block;line-height:1.35}
.ranklist a:hover{text-decoration:underline}
.ranklist span{display:block;font-size:11.5px;color:var(--muted);margin-top:2px}

.emptyline{color:var(--muted);font-size:13px;margin:6px 0 0}

@media(max-width:900px){
  .stats{grid-template-columns:repeat(2,1fr)}
  .spark{height:104px}
}

/* ---------- suspended customers ---------- */
/* .btn.ghost.danger already exists; nothing new is needed for the buttons. */

/* A button that is present but deliberately not usable — the shopper can see
   the checkout step exists, and why it is closed, rather than it vanishing. */
.btn.off{background:#eceff3;color:var(--muted);cursor:not-allowed;text-align:center;
         display:inline-block;box-shadow:none}
.btn.off:hover{background:#eceff3}
.btn.ghost.wide{width:100%;text-align:center}

.rowacts{display:flex;gap:6px;align-items:center;justify-content:flex-end;flex-wrap:wrap}
.rowacts form{margin:0}
.whysus{display:block;font-size:11.5px;color:var(--muted);margin-top:3px;max-width:230px;line-height:1.35}

/* ---------- icons inside data tables ---------- */
table.data th .ico{vertical-align:-2px;margin-right:5px;opacity:.65}
table.data td .ico{vertical-align:-2px}
.pill .ico{vertical-align:-2px;margin-right:3px}
.whysus .ico{vertical-align:-1px;margin-right:3px;opacity:.7}
.modal-head h3 .ico{color:var(--muted);margin-right:7px;vertical-align:-3px}
.flash .ico{vertical-align:-3px;margin-right:5px}

/* ---------- shipping rules ---------- */

/* The gap list reads as a checklist rather than a wall of sentences. */
.flash.holes{display:flex;gap:10px;align-items:flex-start}
.flash.holes ul{margin:5px 0 0;padding-left:18px}
.flash.holes li{margin:2px 0}

/* --- the price matrix: destinations down the side, methods across --- */
.matrixwrap{overflow-x:auto;border:1px solid var(--line);border-radius:10px;background:#fff}
table.matrix{width:100%;border-collapse:collapse;font-size:13px;min-width:620px}
table.matrix th,table.matrix td{border-bottom:1px solid var(--line);border-right:1px solid var(--line);
                                vertical-align:top;padding:11px 13px;text-align:left}
table.matrix tr:last-child th,table.matrix tr:last-child td{border-bottom:0}
table.matrix th:last-child,table.matrix td:last-child{border-right:0}

table.matrix thead th{background:#f2f5f9;font-size:12px;font-weight:700;white-space:nowrap;
                      position:sticky;top:0;z-index:1}
table.matrix thead th a{color:var(--ink);text-decoration:none}
table.matrix thead th a:hover{color:var(--blue);text-decoration:underline}
table.matrix thead th small{display:block;font-weight:400;font-size:11px;color:var(--muted);
                            margin-top:2px;text-transform:none;letter-spacing:0}
table.matrix th.corner{background:#eef2f7;width:190px}

table.matrix th.zonecell{background:#fafbfd;width:190px}
table.matrix th.zonecell a{font-size:13.5px;font-weight:600;color:var(--ink);text-decoration:none}
table.matrix th.zonecell a:hover{color:var(--blue);text-decoration:underline}
table.matrix th.zonecell small{display:block;font-weight:400;font-size:11px;color:var(--muted);
                               margin-top:3px;letter-spacing:.02em}
table.matrix th.zonecell .destname{font-size:13.5px;font-weight:600;display:block}
table.matrix tr.national th.zonecell{background:#eef4ff}
table.matrix tr.national th.zonecell .destname{color:var(--blue)}
table.matrix tr.overridden th.zonecell .destname::after{content:'set';margin-left:7px;font-size:10px;
  font-weight:700;letter-spacing:.04em;text-transform:uppercase;color:#12813f;
  background:#e8f6ec;border-radius:20px;padding:2px 7px;vertical-align:2px}
table.matrix tr:not(.national):not(.overridden) td{background:#fcfcfd}
/* Inherited prices used to be greyed out; now they read the same as an
   owned one — "SET" on the province and "Price differently" under a price
   already say which is which, so dimming the price itself was redundant. */
.linkbtn{border:0;background:none;padding:0;margin-top:3px;font:inherit;font-size:11px;
  color:var(--muted);text-decoration:underline;cursor:pointer}
.linkbtn:hover{color:var(--price)}
table.matrix th.zonecell form{margin:0}
table.matrix th.off,table.matrix td.off{opacity:.55}

/* a cell is a little ladder of bands */
.bandlist{list-style:none;margin:0 0 6px;padding:0}
.bandlist li + li{margin-top:3px}
.band{display:flex;align-items:baseline;justify-content:space-between;gap:10px;
      padding:5px 8px;border-radius:6px;text-decoration:none;color:inherit;
      background:#f7f9fc;transition:background .12s}
.band:hover{background:#e8f0fd}
.band-when{font-size:11.5px;color:var(--muted);white-space:nowrap}
.band-cost{font-weight:700;font-size:13px;font-variant-numeric:tabular-nums;white-space:nowrap}
.band-cost.free{color:#12813f}

.cell-add{display:inline-flex;align-items:center;gap:4px;font-size:11.5px;font-weight:600;
          color:var(--muted);text-decoration:none}
.cell-add:hover{color:var(--blue)}
.cell-add .ico{margin:0}
.cell-empty{display:flex;flex-direction:column;gap:5px}
.cell-empty > span{font-size:11.5px;color:var(--muted);font-style:italic}

/* --- the two supporting lists sit side by side --- */
.two.lists{gap:18px;align-items:start}
.two.lists .panel{margin:18px 0 0}
.two.lists table.data td{padding:9px 10px}
.two.lists table.data a{font-weight:600;text-decoration:none}
.two.lists table.data a:hover{text-decoration:underline}
.two.lists .sub{display:block;font-size:11.5px;color:var(--muted);margin-top:2px}
.two.lists .pill{margin-left:6px}
.two.lists form{margin:0}

/* --- right-hand column --- */
.shipside{display:flex;flex-direction:column;gap:18px}
.shipside .summary{position:static;margin:0}
.editorhead{display:flex;align-items:center;justify-content:space-between;gap:10px;margin-bottom:12px}
.editorhead h3{margin:0;font-size:15px}
.editorhead .modal-x{text-decoration:none;line-height:1}

.provgrid{display:grid;grid-template-columns:1fr 1fr;gap:4px}
.provgrid label.inline{font-size:11.5px;padding:5px 7px;gap:6px;margin:0}
.provgrid label.inline b{font-weight:700}
.provgrid label.inline span{color:var(--muted);font-size:10.5px;overflow:hidden;
                            text-overflow:ellipsis;white-space:nowrap}

.testresult{list-style:none;margin:0;padding:0}
.testresult li{display:flex;justify-content:space-between;align-items:baseline;gap:10px;
               padding:7px 0;border-top:1px solid var(--line)}
.testresult li:first-child{border-top:0}
.testresult span{display:flex;flex-direction:column}
.testresult span b{font-size:13px}
.testresult span small{font-size:11px;color:var(--muted)}
.testresult > li > b{font-variant-numeric:tabular-nums}
.testresult > li > b.free{color:#12813f}

.howto dl{margin:0}
.howto dt{font-size:12.5px;font-weight:700;margin-top:10px;display:flex;align-items:center;gap:6px}
.howto dt:first-child{margin-top:0}
.howto dt .ico{color:var(--muted)}
.howto dd{margin:3px 0 0;font-size:12px;color:var(--muted);line-height:1.5}
.howto dd i{color:var(--ink);font-style:normal;background:#f2f5f9;padding:1px 5px;border-radius:4px}

@media(max-width:1100px){
  .two.lists{grid-template-columns:1fr}
}
.ranklist.plain li{align-items:center}

/* ---------- delivery method picker at checkout ---------- */
.shipopts{display:flex;flex-direction:column;gap:8px;margin-bottom:6px}
.shipopt{display:flex;align-items:center;gap:11px;border:1px solid var(--line);border-radius:10px;
         padding:12px 14px;cursor:pointer;background:#fff;transition:border-color .15s,background .15s}
.shipopt:hover{border-color:var(--blue)}
.shipopt.on{border-color:var(--blue);background:#f5f9ff;box-shadow:inset 0 0 0 1px var(--blue)}
.shipopt input[type=radio]{width:auto;margin:0;flex:0 0 auto}
.shipopt .sm-body{flex:1;min-width:0;display:flex;flex-direction:column;gap:2px}
.shipopt .sm-body b{font-size:14px;font-weight:600}
.shipopt .sm-body small{font-size:12px;color:var(--muted)}
.shipopt .sm-price{font-weight:700;font-size:14.5px;white-space:nowrap;
                   font-variant-numeric:tabular-nums}

/* ---------- carrier tracking ---------- */
.trackbox{display:flex;align-items:center;justify-content:space-between;gap:14px;flex-wrap:wrap;
          background:#f5f9ff;border:1px solid #cfe0fa;border-radius:10px;padding:13px 16px;
          margin-top:16px}
.trackbox .tb-main{display:flex;flex-direction:column;gap:2px;min-width:0}
.trackbox .tb-label{font-size:12px;font-weight:600;color:var(--blue);display:flex;
                    align-items:center;gap:6px}
.trackbox .tb-number{font:15px/1.3 Menlo,Consolas,monospace;letter-spacing:.02em;
                     word-break:break-all}
.trackbox .tb-when{font-size:11.5px;color:var(--muted)}
.trackbox .btn{flex:0 0 auto}
.trackmini{display:block;margin-top:4px;font:11px/1.3 Menlo,Consolas,monospace;color:var(--muted)}
.trackmini .ico{vertical-align:-1px;margin-right:3px}
.trackmini.missing{color:#a32316;font-family:inherit;font-size:11.5px}
.field input.mono{font:13px/1.4 Menlo,Consolas,monospace;letter-spacing:.02em}

.fallsback{margin:7px 0 3px;font-size:10.5px;font-weight:700;letter-spacing:.05em;
           text-transform:uppercase;color:var(--muted)}
.flash.tidyup{background:#eef4ff;border-color:#cfe0fa;color:var(--ink)}
.flash.tidyup .ico{color:var(--blue)}
.flash.tidyup form{margin:0}

/* ---------- admin product list ---------- */
/* Compact rows: the point of the list is to scan a lot of products, so the
   row height is set by the thumbnail and nothing is allowed to wrap. */
.plist{padding:0;overflow-x:auto}
table.data.prods{table-layout:fixed;min-width:840px}
table.data.prods th,table.data.prods td{padding:7px 10px;vertical-align:middle}
table.data.prods thead th{position:sticky;top:0;z-index:1}
table.data.prods tr.dim td{background:#fbfbfc}
table.data.prods tr.dim .c-name a{color:var(--muted)}

/* Fixed columns are sized to their content so the leftover space goes to
   the product name, which is the only thing that benefits from it. */
table.data.prods .c-check{width:32px;padding-right:0;text-align:center}
table.data.prods .c-img{width:50px;padding-right:0}
table.data.prods .c-cat{width:210px}
table.data.prods .c-price{width:124px;text-align:right;font-variant-numeric:tabular-nums;
                          font-weight:600}
table.data.prods .c-state{width:136px}
table.data.prods .c-act{width:126px;text-align:right;white-space:nowrap;padding-left:0}

.thumb-sm{width:34px;height:34px;object-fit:contain;border:1px solid var(--line);
          border-radius:6px;background:#fff;display:block}
.thumb-sm.noimg{display:grid;place-items:center;color:var(--muted);background:#f4f6f9}

/* Name and the details that used to need three columns of their own. */
.c-name a{font-size:13.5px;font-weight:500;text-decoration:none;display:block;
          white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.c-name a:hover{text-decoration:underline}
.c-name .meta{display:block;font-size:11px;color:var(--muted);margin-top:1px;
              white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.c-name .meta code{font-size:10.5px;letter-spacing:.02em}

.c-cat{font-size:12.5px;color:var(--muted);white-space:nowrap;overflow:hidden;
       text-overflow:ellipsis}
.warnlink{color:#a32316;text-decoration:none;border-bottom:1px dotted currentColor}

/* One status column: live/hidden is a switch, out-of-stock is a note. */
.c-state form{margin:0;display:inline}
.statepill{display:inline-block;border:0;font:inherit;font-size:11px;font-weight:700;
           border-radius:20px;padding:3px 9px;cursor:pointer;background:#e8f6ec;color:#12813f}
.statepill.off{background:#f0f0f2;color:#555}
.statepill.flat{cursor:default;background:#fdecea;color:#a32316;margin-top:3px;display:block;
                width:fit-content}
.statepill:hover{filter:brightness(.96)}

/* Stock indicator: just a coloured dot, always shown so the state never has
   to be inferred from something's absence. Hover for the word, click to flip
   it (a button, styled to look exactly like the plain dot it replaced). */
.stockdot{display:inline-block;width:8px;height:8px;border-radius:50%;
          margin-top:5px;background:#1fae55;border:0;padding:0;cursor:pointer}
.stockdot.out{background:#d92d20}
.stockdot:hover{filter:brightness(.85)}

/* Click-to-edit price: looks like plain text until you focus the box, when
   the save button appears. No JavaScript required — it is a normal form. */
.quickedit{display:inline-flex;align-items:baseline;gap:2px;margin:0}
.quickedit .cur{color:var(--muted);font-weight:400}
.quickedit .qedit-input{width:76px;padding:2px 3px;border:1px solid transparent;
          border-radius:5px;font:inherit;font-weight:600;font-variant-numeric:tabular-nums;
          text-align:right;background:transparent;color:inherit;-moz-appearance:textfield}
.quickedit .qedit-input:hover{border-color:var(--line)}
.quickedit .qedit-input:focus{border-color:var(--blue);background:#fff;outline:none}
/* The native up/down spinner is what was colliding with the last digit on
   longer prices (e.g. 220.80) — this field is edited by typing, not by
   clicking tiny arrows, so it's hidden in every browser that draws one. */
.quickedit .qedit-input::-webkit-outer-spin-button,
.quickedit .qedit-input::-webkit-inner-spin-button{-webkit-appearance:none;margin:0}
.quickedit .qedit-save{display:none;flex:0 0 auto;width:20px;height:20px;border:0;
          border-radius:5px;background:var(--blue);color:#fff;cursor:pointer;padding:0;
          align-items:center;justify-content:center}
.quickedit:focus-within .qedit-save{display:inline-flex}

/* Click-to-edit category: same "looks like plain text until touched"
   treatment as the price field above, but a <select> commits the moment a
   choice is made — there's nothing to type, so no separate save button. */
.qedit-cat{display:block;max-width:100%}
.qedit-select{width:100%;max-width:100%;padding:3px 4px;border:1px solid transparent;
          border-radius:5px;font:inherit;font-size:12.5px;color:inherit;background:transparent;
          cursor:pointer}
.qedit-select:hover{border-color:var(--line)}
.qedit-select:focus{border-color:var(--blue);background:#fff;outline:none}
.qedit-select.uncategorised{color:#a32316}

/* Actions as icons. The column is wide enough for all three plus their
   gaps — a couple of pixels short and the last one is clipped. */
.c-act form{margin:0;display:inline}
.iconbtn{display:inline-grid;place-items:center;width:28px;height:28px;border-radius:7px;
         border:1px solid var(--line);background:#fff;color:var(--muted);cursor:pointer;
         text-decoration:none;vertical-align:middle;margin-left:4px}
.iconbtn:first-child{margin-left:0}
.iconbtn:hover{border-color:var(--blue);color:var(--blue)}
.iconbtn.danger:hover{border-color:var(--price);color:var(--price);background:#fdf3f2}
.iconbtn .ico{margin:0}

@media(max-width:1120px){
  table.data.prods .c-cat{display:none}
  table.data.prods{min-width:640px}
}

/* categories with nothing in them yet (shown, but quiet) */
.cattile.zero{opacity:.8}
.cattile.zero > span:last-child{color:var(--muted);font-style:italic}
.navdrop-panel li.zero > a{opacity:.65}

/* ---- Filters on a phone: a "Filters" button opens a panel from the bottom ----
   Everything is switched on by the script in index.php (it adds .fsheet-ok), so
   without JavaScript the filters simply stay above the products as before.
   Above 900px none of this applies. */
.filterbtn,.fsheet-head,.brandmore,.brandq,.fchips,.fbackdrop{display:none}
@media(max-width:900px){
  .listhead > div{display:flex;align-items:center;gap:10px;flex-wrap:wrap}
  .fsheet-ok .filterbtn{display:inline-flex;align-items:center;gap:7px;height:38px;padding:0 14px;border:1px solid var(--line);border-radius:999px;background:#fff;color:var(--ink);font-weight:600;font-size:14px;cursor:pointer}
  .fsheet-ok .filterbtn:focus-visible,.fsheet-x:focus-visible,.brandmore:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
  .fcount{min-width:20px;height:20px;padding:0 6px;border-radius:10px;background:var(--accent);color:#fff;font-size:12px;display:inline-flex;align-items:center;justify-content:center}
  .fsheet-ok .fchips{display:flex;flex-wrap:wrap;gap:8px;margin:0 0 14px}
  .fchip{display:inline-flex;align-items:center;gap:6px;padding:6px 12px;border-radius:999px;background:#eef4ff;color:var(--blue-d);font-size:13px;font-weight:600;text-decoration:none}
  .fchip:hover{text-decoration:none;background:#e0ecff}
  .fchip-clear{background:none;color:var(--muted);text-decoration:underline}

  .fsheet-ok aside.filters{position:fixed;left:0;right:0;bottom:0;top:auto;z-index:141;max-height:88vh;overflow-y:auto;overscroll-behavior:contain;
    padding:0 16px;border-radius:16px 16px 0 0;border-bottom:0;box-shadow:0 -10px 40px rgba(16,24,40,.28);
    transform:translateY(105%);visibility:hidden}
  .fsheet-ok aside.filters.fanim{transition:transform .25s ease,visibility 0s .25s}
  .fsheet-ok aside.filters.fopen{transform:none;visibility:visible;transition:transform .25s ease}
  .fsheet-ok .fbackdrop{display:block;position:fixed;inset:0;background:rgba(16,24,40,.45);z-index:140}
  .fsheet-ok .fbackdrop[hidden]{display:none}
  body.fopen-lock{overflow:hidden}
  .fsheet-ok .fsheet-head{display:flex;justify-content:space-between;align-items:center;position:sticky;top:0;z-index:1;background:#fff;padding:14px 0 10px;font-size:17px;border-bottom:1px solid var(--line);margin-bottom:6px}
  .fsheet-x{width:38px;height:38px;border:0;border-radius:50%;background:#f1f3f6;color:var(--ink);font-size:24px;line-height:1;cursor:pointer}
  .fsheet-ok aside.filters label{padding:9px 0;font-size:15px}
  .fsheet-ok aside.filters input[type=checkbox]{width:18px;height:18px}
  .fsheet-ok aside.filters input[type=number]{width:100%;min-width:0;padding:9px;font-size:15px}
  .fsheet-ok .brandrest{display:none}
  .fsheet-ok .brand-open .brandrest{display:flex}
  .fsheet-ok .brandmore{display:block;margin:6px 0 0;padding:8px 0;border:0;background:none;color:var(--blue);font:inherit;font-weight:600;font-size:14px;cursor:pointer}
  .fsheet-ok .brandmore[hidden]{display:none}
  .fsheet-ok .brand-open .brandq{display:block;width:100%;box-sizing:border-box;margin:0 0 6px;padding:10px 12px;border:1px solid var(--line);border-radius:8px;font-size:15px}
  .fsheet-ok .fsheet-foot{position:sticky;bottom:0;z-index:1;background:#fff;border-top:1px solid var(--line);margin:8px -16px 0;padding:12px 16px calc(12px + env(safe-area-inset-bottom))}
  .fsheet-ok .fsheet-foot .btn{padding:13px 18px;font-size:16px}
  .fsheet-ok .fsheet-foot .linkrow{margin:8px 0 0;text-align:center}
}
@media(prefers-reduced-motion:reduce){.fsheet-ok aside.filters.fanim,.fsheet-ok aside.filters.fopen{transition:none}}