/* ============================================================
   Catalog Template — plain CSS, no build step, no external fonts.
   Mobile first: phone styles are the defaults, wider screens add
   to them further down.

   Layout of this file
     1. Design tokens (colour, type scale, spacing, radius, shadow)
     2. Base + reset
     3. App bar, staff menu, footer
     4. Browse bar (chips, search, sort/filter sheets)
     5. Product grid + cards
     6. Product detail
     7. Staff screens (panels, forms, tables, master cards)
     8. Buttons, action colours, tags
     9. Feedback (flash, notice, toast, empty)
    10. Tablet / desktop
   ============================================================ */

/* ============================================================
   1. Design tokens
   ============================================================ */
:root{
  /* --- Surfaces --- */
  --bg:#f4f7fb;              /* page */
  --bg-deep:#e8eef7;         /* wells, image placeholders */
  --card:#fff;
  --card-2:#fbfcfe;          /* nested surface inside a card */

  /* --- Ink. Darkened for contrast: 15.6:1 and 5.9:1 on white. --- */
  --ink:#0d1729;
  --ink-2:#2b3a55;           /* secondary heading / strong body */
  --muted:#54637c;           /* meta text — passes AA at 15px */
  --faint:#93a1b5;           /* placeholders only, never body copy */

  /* --- Lines --- */
  --line:#dfe6f0;
  --line-2:#c9d5e6;          /* stronger rule, form borders */

  /* --- Accent (blue) --- */
  --accent:#1d4ed8;
  --accent-600:#1e40af;
  --accent-700:#1b3a9c;
  --accent-soft:#eef4ff;
  --accent-line:#c7dbfe;
  --accent-grad:linear-gradient(140deg,#2563eb 0%,#1d4ed8 55%,#1b3fa8 100%);

  /* --- Money (green) --- */
  --price:#047857;
  --price-deep:#065f46;
  --price-soft:#e7f7f0;

  /* --- WhatsApp --- */
  --wa:#25d366;
  --wa-ink:#07361e;
  --wa-grad:linear-gradient(140deg,#37dd77 0%,#22c55e 55%,#16a34a 100%);

  /* --- Category badge (warm, sits on photos) --- */
  --badge-grad:linear-gradient(140deg,#f59e0b 0%,#d97706 60%,#b45309 100%);

  /* --- Type scale --- */
  --font:-apple-system,BlinkMacSystemFont,"Segoe UI Variable Text","Segoe UI",
         Roboto,"Helvetica Neue",Arial,"Noto Sans",sans-serif,
         "Apple Color Emoji","Segoe UI Emoji";
  --font-mono:ui-monospace,SFMono-Regular,"SF Mono",Menlo,Consolas,
              "Liberation Mono",monospace;
  --t-2xs:11px;
  --t-xs:12px;
  --t-sm:13px;
  --t-base:15px;
  --t-md:16px;
  --t-lg:18px;
  --t-xl:21px;
  --t-2xl:25px;
  --t-3xl:31px;

  /* --- Spacing scale (4px rhythm) --- */
  --s1:4px; --s2:8px; --s3:12px; --s4:16px; --s5:22px; --s6:30px; --s7:42px;

  /* --- Radius --- */
  --r-xs:8px; --r-sm:10px; --r:13px; --r-lg:16px; --r-xl:20px; --r-pill:999px;

  /* --- Elevation. Two-layer shadows read as real depth. --- */
  --sh-1:0 1px 2px rgba(13,23,41,.06), 0 1px 3px rgba(13,23,41,.05);
  --sh-2:0 2px 4px rgba(13,23,41,.05), 0 6px 16px rgba(13,23,41,.08);
  --sh-3:0 4px 8px rgba(13,23,41,.06), 0 16px 34px rgba(13,23,41,.12);
  --sh-4:0 8px 18px rgba(13,23,41,.10), 0 26px 56px rgba(13,23,41,.18);
  --sh-up:0 -2px 6px rgba(13,23,41,.05), 0 -10px 28px rgba(13,23,41,.10);
  --ring:0 0 0 3px rgba(37,99,235,.22);

  --appbar-h:56px;
  --ease:cubic-bezier(.4,.14,.3,1);
}

/* ============================================================
   2. Base
   ============================================================ */
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{
  margin:0;background:var(--bg);color:var(--ink);
  font-family:var(--font);font-size:var(--t-base);line-height:1.55;
  font-weight:450;
  -webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;
  font-feature-settings:"kern" 1,"liga" 1;
  -webkit-tap-highlight-color:transparent;
}
a{color:inherit;text-decoration:none}
img{max-width:100%}
h1,h2,h3{line-height:1.2;letter-spacing:-.018em;font-weight:800;color:var(--ink)}
b,strong{font-weight:700}

/* One visible focus ring for the whole app — keyboard and screen-reader users
   never lose their place, mouse users never see it. */
:focus-visible{outline:2px solid var(--accent);outline-offset:2px;border-radius:6px}
input:focus-visible,select:focus-visible,textarea:focus-visible{outline:none}

.wrap{max-width:1180px;margin:0 auto;padding:0 var(--s3)}
.wrap.narrow{max-width:460px}

/* Page head */
main{padding-top:var(--s4)}
.page-head{display:flex;flex-wrap:wrap;align-items:center;gap:var(--s2) var(--s3);
  margin-bottom:var(--s4)}
.page-head h1{margin:0;font-size:var(--t-xl)}
.count{color:var(--muted);font-size:var(--t-sm);font-weight:600}

@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.001ms !important;transition-duration:.001ms !important}
}

/* ============================================================
   3. App bar, staff menu, footer
   ============================================================ */
.appbar{
  position:sticky;top:0;z-index:40;
  background:rgba(255,255,255,.94);
  -webkit-backdrop-filter:saturate(180%) blur(12px);
  backdrop-filter:saturate(180%) blur(12px);
  border-bottom:1px solid rgba(13,23,41,.07);
  box-shadow:0 1px 3px rgba(13,23,41,.05), 0 6px 18px rgba(13,23,41,.05);
}
.appbar-in{display:flex;align-items:center;justify-content:space-between;
  height:var(--appbar-h);gap:var(--s2)}
.brand{display:flex;align-items:center;gap:var(--s2);min-width:0;
  padding:4px 6px 4px 0;border-radius:var(--r-sm)}
.brand-mark{width:32px;height:32px;flex:0 0 32px;border-radius:10px;
  background:var(--accent-grad);color:#fff;font-weight:800;font-size:var(--t-md);
  display:flex;align-items:center;justify-content:center;
  box-shadow:0 2px 6px rgba(29,78,216,.32), inset 0 1px 0 rgba(255,255,255,.28)}
.brand-text{font-weight:800;font-size:var(--t-lg);letter-spacing:-.028em;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;color:var(--ink)}
.appbar-actions{display:flex;align-items:center;gap:7px}

.icon-btn{width:42px;height:42px;border-radius:50%;border:0;cursor:pointer;
  display:flex;align-items:center;justify-content:center;
  background:#e9eef6;color:var(--ink-2);
  transition:transform .16s var(--ease),box-shadow .16s var(--ease),
             background-color .16s var(--ease)}
.icon-btn:active{transform:scale(.92)}
.icon-btn.wa{background:var(--wa-grad);color:#fff;
  box-shadow:0 2px 8px rgba(22,163,74,.34)}
.icon-btn.call{background:var(--accent-grad);color:#fff;
  box-shadow:0 2px 8px rgba(29,78,216,.30)}
.icon-btn.add{background:var(--accent-grad);color:#fff;
  box-shadow:0 2px 8px rgba(29,78,216,.30)}
@media (hover:hover){
  .icon-btn:hover{background:#dde5f1}
  .icon-btn.wa:hover,.icon-btn.call:hover,.icon-btn.add:hover{filter:brightness(1.06)}
}

/* Staff menu (never shown to customers) */
.staff-menu{background:var(--card);border-top:1px solid var(--line);
  box-shadow:var(--sh-3)}
.staff-menu .wrap{display:flex;flex-direction:column;
  padding-top:var(--s2);padding-bottom:var(--s3)}
.staff-who{font-size:var(--t-2xs);color:var(--accent);text-transform:uppercase;
  letter-spacing:.09em;font-weight:800;padding:var(--s2) 2px var(--s1)}
.staff-menu a{padding:14px 4px;font-weight:650;font-size:var(--t-md);
  color:var(--ink-2);border-bottom:1px solid var(--line);min-height:48px;
  display:flex;align-items:center;border-radius:var(--r-xs)}
.staff-menu a:last-child{border-bottom:0}
.staff-menu a:active{background:var(--accent-soft);color:var(--accent)}
.staff-menu a.danger{color:#b91c1c}

.foot{margin-top:var(--s7);padding:var(--s5) 0 var(--s6);
  border-top:1px solid var(--line);color:var(--muted);font-size:var(--t-sm)}

/* ============================================================
   4. Browse bar
   ============================================================ */
.browse{position:sticky;top:var(--appbar-h);z-index:30;
  background:rgba(244,247,251,.93);
  -webkit-backdrop-filter:saturate(180%) blur(10px);
  backdrop-filter:saturate(180%) blur(10px);
  margin:0 calc(var(--s3) * -1) var(--s3);
  padding:var(--s2) var(--s3) var(--s2);
  border-bottom:1px solid var(--line)}

.chips-row{display:flex;gap:7px;overflow-x:auto;padding-bottom:var(--s2);
  scrollbar-width:none;-webkit-overflow-scrolling:touch}
.chips-row::-webkit-scrollbar{display:none}
.chip-tab{flex:0 0 auto;padding:9px 15px;border-radius:var(--r-pill);
  background:var(--card);color:var(--ink-2);
  font-size:var(--t-sm);font-weight:700;letter-spacing:-.005em;
  white-space:nowrap;border:1px solid var(--line);min-height:38px;
  display:inline-flex;align-items:center;
  box-shadow:0 1px 2px rgba(13,23,41,.04);
  transition:transform .15s var(--ease),box-shadow .15s var(--ease),
             color .15s var(--ease),border-color .15s var(--ease)}
.chip-tab:active{transform:scale(.96)}
.chip-tab.on{background:var(--accent-grad);color:#fff;border-color:transparent;
  box-shadow:0 2px 8px rgba(29,78,216,.34)}
@media (hover:hover){
  .chip-tab:hover{border-color:var(--accent-line);color:var(--accent)}
  .chip-tab.on:hover{color:#fff}
}

.search-row{display:flex;gap:7px;align-items:stretch}
.search-box{flex:1;min-width:0;display:flex;align-items:center;gap:var(--s2);
  background:var(--card);border:1px solid var(--line-2);border-radius:var(--r);
  padding:0 12px;color:var(--muted);
  box-shadow:0 1px 2px rgba(13,23,41,.04);
  transition:border-color .15s var(--ease),box-shadow .15s var(--ease)}
.search-box:focus-within{border-color:var(--accent);box-shadow:var(--ring);
  color:var(--accent)}
.search-box input{flex:1;min-width:0;border:0;outline:0;background:none;
  font-family:inherit;font-size:var(--t-md);font-weight:500;
  padding:12px 0;color:var(--ink)}
.search-box input::placeholder{color:var(--faint);font-weight:450}

.tool{display:flex;align-items:center;gap:5px;padding:0 12px;min-height:46px;
  border:1px solid var(--line-2);border-radius:var(--r);background:var(--card);
  color:var(--ink-2);font-family:inherit;font-size:var(--t-2xs);font-weight:800;
  text-transform:uppercase;letter-spacing:.06em;cursor:pointer;white-space:nowrap;
  box-shadow:0 1px 2px rgba(13,23,41,.04);
  transition:transform .15s var(--ease),border-color .15s var(--ease),
             color .15s var(--ease),background-color .15s var(--ease)}
.tool:active{transform:scale(.96)}
.tool.on{border-color:var(--accent);color:var(--accent);background:var(--accent-soft);
  box-shadow:0 1px 2px rgba(29,78,216,.14)}
@media (hover:hover){ .tool:hover{border-color:var(--accent);color:var(--accent)} }

/* z-index matters: the product thumbs below are position:relative, so without
   it the open sheet paints underneath them on wide screens. */
.sheet{position:absolute;z-index:50;left:var(--s3);right:var(--s3);margin-top:var(--s2);
  background:var(--card);border:1px solid var(--line);border-radius:var(--r-lg);
  overflow:hidden;box-shadow:var(--sh-4);max-height:62vh;overflow-y:auto;
  animation:sheet-in .16s var(--ease)}
@keyframes sheet-in{from{opacity:0;transform:translateY(-6px)}to{opacity:1;transform:none}}
.sheet-title{padding:var(--s3) var(--s4) var(--s1);font-size:var(--t-2xs);
  font-weight:800;color:var(--muted);text-transform:uppercase;letter-spacing:.08em}
.sheet-item{display:flex;align-items:center;min-height:48px;
  padding:12px var(--s4);border-bottom:1px solid var(--line);
  font-size:var(--t-md);font-weight:600;color:var(--ink-2)}
.sheet-item:last-child{border-bottom:0}
.sheet-item.on{color:var(--accent);background:var(--accent-soft);font-weight:750;
  box-shadow:inset 3px 0 0 var(--accent)}
.sheet-item.clear{color:#b91c1c;font-weight:700}
@media (hover:hover){ .sheet-item:hover{background:var(--bg)} }

.result-line{display:flex;align-items:center;justify-content:space-between;
  gap:var(--s3);color:var(--muted);font-size:var(--t-sm);font-weight:600;
  margin:2px 0 var(--s3)}
.result-line span{min-width:0}

/* Filter bar (staff pages) */
.filters{display:flex;flex-wrap:wrap;gap:var(--s2);margin-bottom:var(--s4)}
.filters input,.filters select{
  padding:12px 13px;border:1px solid var(--line-2);border-radius:var(--r);
  background:var(--card);color:var(--ink);
  font-family:inherit;font-size:var(--t-md);min-width:130px;min-height:46px;
  box-shadow:0 1px 2px rgba(13,23,41,.04)}
.filters input{flex:1 1 200px;min-width:150px}

/* ============================================================
   5. Product grid + cards
   ============================================================ */
.grid{display:grid;gap:var(--s3);grid-template-columns:repeat(2,minmax(0,1fr))}

.card{background:var(--card);border:1px solid var(--line);border-radius:var(--r-lg);
  overflow:hidden;display:flex;flex-direction:column;box-shadow:var(--sh-1)}
.thumb{position:relative;aspect-ratio:1/1;
  background:linear-gradient(150deg,#f2f6fc,#e6ecf6);
  display:flex;align-items:center;justify-content:center;overflow:hidden}
.thumb img{width:100%;height:100%;object-fit:cover;display:block}
.thumb .ph{color:var(--faint);font-size:var(--t-2xs);letter-spacing:.1em;
  text-transform:uppercase;font-weight:700}
.card-body{padding:11px 11px 12px;display:flex;flex-direction:column;gap:1px;flex:1}
.art{font-weight:750;font-size:var(--t-base);line-height:1.3;color:var(--ink);
  letter-spacing:-.012em}
.meta{color:var(--muted);font-size:var(--t-xs);font-weight:550}
.rate{margin-top:auto;padding-top:var(--s2);font-weight:800;
  font-size:var(--t-lg);color:var(--price);letter-spacing:-.02em;
  font-variant-numeric:tabular-nums}
.tag{align-self:flex-start;font-size:var(--t-2xs);padding:3px 9px;
  border-radius:var(--r-pill);background:var(--accent-soft);color:var(--accent);
  font-weight:700;border:1px solid var(--accent-line);white-space:nowrap}

/* Category badge sitting on the photo. Deepened so white text clears AA. */
.cat-badge{position:absolute;top:8px;left:8px;z-index:1;
  background:var(--badge-grad);color:#fff;
  font-size:var(--t-2xs);font-weight:800;letter-spacing:.05em;
  text-transform:uppercase;padding:4px 9px;border-radius:var(--r-xs);
  max-width:76%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;
  box-shadow:0 2px 6px rgba(120,53,15,.32), inset 0 1px 0 rgba(255,255,255,.24)}

a.card{transition:box-shadow .18s var(--ease),transform .18s var(--ease),
                  border-color .18s var(--ease)}
a.card:active{transform:scale(.975)}
@media (hover:hover){
  a.card:hover{box-shadow:var(--sh-3);transform:translateY(-3px);
    border-color:var(--accent-line)}
}

/* Pagination */
.pager{display:flex;gap:6px;justify-content:center;margin-top:var(--s6);
  flex-wrap:wrap}
.pager a,.pager span{display:inline-flex;align-items:center;justify-content:center;
  min-width:44px;min-height:44px;padding:0 14px;border-radius:var(--r-sm);
  border:1px solid var(--line);background:var(--card);font-size:var(--t-sm);
  font-weight:700;color:var(--ink-2);box-shadow:0 1px 2px rgba(13,23,41,.04)}
.pager .on{background:var(--accent-grad);color:#fff;border-color:transparent;
  box-shadow:0 2px 8px rgba(29,78,216,.30)}
.pager .off{color:var(--faint);box-shadow:none;background:transparent}
@media (hover:hover){ .pager a:hover{border-color:var(--accent);color:var(--accent)} }

/* ============================================================
   6. Product detail
   ============================================================ */
.crumb{margin:0 0 var(--s3);font-size:var(--t-sm);font-weight:650;color:var(--muted)}
.crumb a{color:var(--accent)}
.crumb a:hover{text-decoration:underline}

.detail-page{padding-bottom:96px}      /* room for the fixed action bar */
.pcard{background:var(--card);border:1px solid var(--line);border-radius:var(--r-xl);
  overflow:hidden;box-shadow:var(--sh-2)}
.pshot{background:linear-gradient(160deg,#f2f6fc,#e6ecf6);display:block}
.pshot img{width:100%;height:auto;display:block;cursor:zoom-in}
.pshot-empty{aspect-ratio:1/1;display:flex;align-items:center;justify-content:center;
  color:var(--faint);font-size:var(--t-sm);letter-spacing:.1em;
  text-transform:uppercase;font-weight:700}
.pstrip{display:flex;gap:var(--s2);padding:var(--s2) var(--s3);overflow-x:auto;
  scrollbar-width:none;border-top:1px solid var(--line)}
.pstrip::-webkit-scrollbar{display:none}
.shot{flex:0 0 62px;width:62px;height:62px;padding:0;border:1px solid var(--line);
  border-radius:var(--r-sm);overflow:hidden;background:var(--card);cursor:pointer;
  transition:border-color .15s var(--ease),box-shadow .15s var(--ease),
             transform .15s var(--ease)}
.shot:active{transform:scale(.94)}
.shot.on{border-color:var(--accent);box-shadow:0 0 0 2px var(--accent-line)}
.shot img{width:100%;height:100%;object-fit:cover;display:block}

.pbody{padding:var(--s4) var(--s4) var(--s5)}
.pbody h1{margin:0;font-size:var(--t-2xl);font-weight:800;letter-spacing:-.026em}
.p-art{color:var(--muted);font-size:var(--t-sm);margin-top:var(--s1);font-weight:600}
.p-art span{font-family:var(--font-mono);color:var(--ink);font-weight:700;
  background:var(--bg-deep);border-radius:6px;padding:1px 7px;font-size:var(--t-xs);
  letter-spacing:0}
.p-name{color:var(--muted);font-size:var(--t-base);margin-top:2px}
.p-price{font-size:var(--t-3xl);font-weight:800;color:var(--price);
  letter-spacing:-.03em;margin:var(--s3) 0 var(--s1);
  font-variant-numeric:tabular-nums;line-height:1.1}

.spec-tiles{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));
  gap:var(--s2);margin-top:var(--s4)}
.spec{background:var(--card-2);border:1px solid var(--line);
  border-radius:var(--r);padding:10px 12px;font-size:var(--t-sm);min-width:0}
.spec span{display:block;color:var(--muted);font-size:var(--t-2xs);
  text-transform:uppercase;letter-spacing:.07em;font-weight:700;margin-bottom:2px}
.spec b{font-size:var(--t-base);color:var(--ink);font-weight:700;
  overflow-wrap:anywhere;letter-spacing:-.01em}
.p-remarks{margin-top:var(--s4);padding-top:var(--s3);
  border-top:1px solid var(--line);font-size:var(--t-base);line-height:1.6;
  color:var(--ink-2)}
.p-remarks span{color:var(--muted);font-weight:700;text-transform:uppercase;
  font-size:var(--t-2xs);letter-spacing:.07em}

/* More in category — horizontal rail with snap */
.more{margin-top:var(--s5)}
.more-head{display:flex;align-items:baseline;justify-content:space-between;
  gap:var(--s3);margin:0 2px var(--s3)}
.more-head h2{margin:0;font-size:var(--t-lg);font-weight:800}
.swipe-hint{font-size:var(--t-xs);color:var(--muted);font-weight:600;
  white-space:nowrap}
.more-rail{display:flex;gap:var(--s3);overflow-x:auto;padding:2px 0 var(--s2);
  scroll-snap-type:x mandatory;scrollbar-width:none}
.more-rail::-webkit-scrollbar{display:none}
.mini-card{flex:0 0 138px;width:138px;background:var(--card);
  border:1px solid var(--line);border-radius:var(--r-lg);overflow:hidden;
  scroll-snap-align:start;box-shadow:var(--sh-1);
  transition:box-shadow .18s var(--ease),transform .18s var(--ease)}
.mini-card:active{transform:scale(.975)}
@media (hover:hover){ .mini-card:hover{box-shadow:var(--sh-2);transform:translateY(-2px)} }
.mini-card .thumb{aspect-ratio:1/1}
.mini-body{padding:8px 9px 10px}
.mini-body .art{font-size:var(--t-sm);font-weight:750;white-space:nowrap;
  overflow:hidden;text-overflow:ellipsis}
.mini-body .meta{font-size:var(--t-2xs);white-space:nowrap;overflow:hidden;
  text-overflow:ellipsis}
.mini-body .rate{font-size:var(--t-base);padding-top:var(--s1)}

/* Fixed action bar (customer) */
.action-bar{position:fixed;left:0;right:0;bottom:0;z-index:45;display:flex;
  gap:var(--s2);padding:10px var(--s3) calc(10px + env(safe-area-inset-bottom));
  background:rgba(255,255,255,.92);border-top:1px solid var(--line);
  -webkit-backdrop-filter:saturate(180%) blur(14px);
  backdrop-filter:saturate(180%) blur(14px);
  box-shadow:var(--sh-up)}
.ab-btn{flex:1;display:flex;align-items:center;justify-content:center;gap:8px;
  min-height:50px;border-radius:var(--r);font-weight:800;font-size:var(--t-md);
  letter-spacing:-.01em;
  transition:transform .15s var(--ease),filter .15s var(--ease)}
.ab-btn:active{transform:scale(.97)}
.ab-call{flex:0 0 33%;background:#e9eef6;color:var(--ink);
  border:1px solid var(--line-2)}
.ab-wa{background:var(--wa-grad);color:var(--wa-ink);
  box-shadow:0 3px 12px rgba(22,163,74,.36), inset 0 1px 0 rgba(255,255,255,.30)}
@media (hover:hover){
  .ab-call:hover{background:#dde5f1}
  .ab-wa:hover{filter:brightness(1.05)}
}

/* Older detail markup kept working (gallery / info / specs / related) */
.detail{display:grid;gap:var(--s4);grid-template-columns:minmax(0,1fr)}
.gallery .thumb.main{border:1px solid var(--line);border-radius:var(--r-lg);
  background:var(--card)}
.strip{display:flex;gap:7px;margin-top:var(--s3);overflow-x:auto;padding-bottom:var(--s1)}
.info h1{margin:var(--s2) 0 2px;font-size:var(--t-2xl)}
.info .sub{margin:0;color:var(--muted)}
.info .price{margin:var(--s3) 0;font-size:var(--t-2xl);font-weight:800;color:var(--price)}
.btn-wa{display:inline-flex;align-items:center;gap:var(--s2);
  background:var(--wa-grad);color:var(--wa-ink);text-decoration:none;
  width:100%;justify-content:center;padding:14px;font-size:var(--t-md)}
.btn-wa:hover{filter:brightness(1.05)}
.wa-hint{margin:var(--s2) 0 0;font-size:var(--t-xs);color:var(--muted)}
.specs{display:grid;grid-template-columns:auto 1fr;gap:7px var(--s4);margin:0;
  padding-top:var(--s4);border-top:1px solid var(--line);font-size:var(--t-base)}
.specs dt{color:var(--muted)}
.specs dd{margin:0;font-weight:650}
.remarks{margin-top:var(--s5);padding-top:var(--s4);border-top:1px solid var(--line)}
.remarks h2{margin:0 0 var(--s2);font-size:var(--t-xs);color:var(--muted);
  text-transform:uppercase;letter-spacing:.07em}
.remarks p{margin:0;font-size:var(--t-base)}
.related{margin-top:var(--s6)}
.related h2{font-size:var(--t-lg);margin:0 0 var(--s3)}

/* ============================================================
   7. Staff screens
   ============================================================ */
/* Tabs — scroll sideways instead of wrapping into a wall */
.tabs{display:flex;gap:2px;margin-bottom:var(--s5);
  border-bottom:1px solid var(--line);overflow-x:auto;scrollbar-width:none;
  -webkit-overflow-scrolling:touch}
.tabs::-webkit-scrollbar{display:none}
.tabs a{padding:11px 15px;font-size:var(--t-sm);font-weight:700;color:var(--muted);
  border-bottom:2.5px solid transparent;margin-bottom:-1px;white-space:nowrap;
  border-radius:var(--r-xs) var(--r-xs) 0 0;
  transition:color .15s var(--ease),background-color .15s var(--ease)}
.tabs a:hover{color:var(--ink);background:rgba(29,78,216,.05)}
.tabs a.on{color:var(--accent);border-bottom-color:var(--accent);
  background:var(--accent-soft)}

/* Panels */
.panel{background:var(--card);border:1px solid var(--line);border-radius:var(--r-lg);
  padding:var(--s4);margin-bottom:var(--s4);box-shadow:var(--sh-1)}
.panel h2{margin:0 0 var(--s1);font-size:var(--t-lg);letter-spacing:-.022em}
.panel .hint{margin:0 0 var(--s4);color:var(--muted);font-size:var(--t-sm);
  line-height:1.5}
.panel .hint code{background:var(--bg-deep);border-radius:5px;padding:1px 6px;
  font-family:var(--font-mono);font-size:var(--t-xs);color:var(--ink-2)}
.danger-zone{border-color:#f3b8b8;background:linear-gradient(#fffafa,#fff)}

/* Toggle chips */
.chips{display:flex;flex-wrap:wrap;gap:var(--s2)}
.chip{display:inline-flex;align-items:center;gap:8px;padding:10px 15px;
  cursor:pointer;border:1px solid var(--line-2);border-radius:var(--r-pill);
  font-size:var(--t-base);font-weight:700;color:var(--ink-2);background:var(--card);
  user-select:none;min-height:46px;
  transition:border-color .15s var(--ease),background-color .15s var(--ease),
             color .15s var(--ease)}
.chip input{accent-color:var(--accent);width:18px;height:18px;margin:0}
.chip.on{border-color:var(--accent);background:var(--accent-soft);color:var(--accent);
  box-shadow:0 1px 3px rgba(29,78,216,.14)}
@media (hover:hover){ .chip:hover{border-color:var(--accent)} }

/* Form fields */
.fields{display:grid;gap:var(--s4);grid-template-columns:1fr}
.fields label,.cell{display:flex;flex-direction:column;gap:6px;
  font-size:var(--t-sm);color:var(--muted);font-weight:700;
  letter-spacing:.005em}
.fields input,.fields select,.fields textarea,.cell input,.stack input,
.add-master input,.rename-form input,.m-rename input[type=text],.m-order,
.mini-select,.mini-input{
  border:1px solid var(--line-2);border-radius:var(--r);background:var(--card);
  font-family:inherit;color:var(--ink);font-weight:500;
  box-shadow:0 1px 2px rgba(13,23,41,.04);
  transition:border-color .15s var(--ease),box-shadow .15s var(--ease)}
.fields input,.fields select,.fields textarea,.cell input,.stack input{
  padding:12px 13px;width:100%;font-size:var(--t-md);min-height:48px}
.fields textarea{resize:vertical;line-height:1.55;min-height:96px}
.fields input:focus,.fields select:focus,.fields textarea:focus,.cell input:focus,
.stack input:focus,.filters input:focus,.filters select:focus,
.add-master input:focus,.rename-form input:focus,.m-rename input:focus,
.m-order:focus,.mini-select:focus,.mini-input:focus{
  outline:none;border-color:var(--accent);box-shadow:var(--ring)}
.fields input::placeholder,.stack input::placeholder,
.add-master input::placeholder,.filters input::placeholder{color:var(--faint)}
.fields .hidden{display:none}
.fields .wide{grid-column:1 / -1}
.fields .self-end{justify-content:flex-end}
.field-hint{font-weight:500;font-size:var(--t-xs);color:var(--muted);line-height:1.45}

/* Select + "New" button pairs on the upload form */
.pick:not(input){display:flex;gap:6px;align-items:stretch}
.pick:not(input) select{flex:1;min-width:0}
.new-btn{flex:0 0 auto;padding:0 14px;min-height:48px;
  border:1.5px dashed var(--accent);border-radius:var(--r);
  background:var(--accent-soft);color:var(--accent);
  font-family:inherit;font-size:var(--t-sm);font-weight:800;cursor:pointer;
  white-space:nowrap;transition:background-color .15s var(--ease),color .15s var(--ease)}
.new-btn.on{background:var(--accent-grad);color:#fff;border-style:solid;
  border-color:transparent;box-shadow:0 2px 8px rgba(29,78,216,.28)}
.new-input{margin-top:6px}

/* One row per image: small image left, changing columns right */
.rows{display:flex;flex-direction:column;gap:var(--s3);margin-top:var(--s4)}
.row{display:flex;align-items:center;gap:var(--s3);padding:var(--s3);
  border:1px solid var(--line);border-radius:var(--r-lg);background:var(--card-2)}
.shot-sm{width:60px;height:60px;flex:0 0 60px;object-fit:cover;
  border-radius:var(--r-sm);background:var(--bg-deep);display:block;
  border:1px solid var(--line)}
.row-main{flex:1;min-width:0}
.cells{display:grid;gap:var(--s2);grid-template-columns:1fr}
.row-label{font-size:var(--t-2xs);text-transform:uppercase;letter-spacing:.07em;
  font-weight:800;color:var(--muted)}
.cell input{padding:11px 12px;font-size:var(--t-md);min-height:46px}
.row .file{margin-top:6px;font-size:var(--t-xs);color:var(--muted);
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.row .x{flex:0 0 auto;width:40px;height:40px;border:1px solid var(--line-2);
  border-radius:var(--r-sm);background:var(--card);color:var(--muted);
  font-size:19px;line-height:1;cursor:pointer;
  transition:border-color .15s var(--ease),color .15s var(--ease),
             background-color .15s var(--ease)}
.row .x:hover{border-color:#fca5a5;color:#b91c1c;background:#fef2f2}
#picker{font-family:inherit;font-size:var(--t-base);width:100%;padding:12px 0}
.actions{display:flex;flex-wrap:wrap;gap:var(--s3);align-items:center;
  margin:var(--s5) 0 var(--s2)}
.actions .btn{flex:1 1 auto}

/* Manage table */
.table-wrap{overflow-x:auto;background:var(--card);border:1px solid var(--line);
  border-radius:var(--r-lg);box-shadow:var(--sh-1)}
.tbl{width:100%;border-collapse:collapse;font-size:var(--t-sm);min-width:640px}
.tbl th{text-align:left;padding:12px 13px;font-size:var(--t-2xs);
  text-transform:uppercase;letter-spacing:.07em;font-weight:800;color:var(--muted);
  background:var(--card-2);border-bottom:1px solid var(--line-2);white-space:nowrap}
.tbl td{padding:12px 13px;border-bottom:1px solid var(--line);vertical-align:middle}
.tbl tbody tr:nth-child(even) td{background:rgba(244,247,251,.55)}
.tbl tbody tr:last-child td{border-bottom:0}
@media (hover:hover){ .tbl tbody tr:hover td{background:var(--accent-soft)} }
.tbl .num{text-align:right;font-variant-numeric:tabular-nums;font-weight:700}
.tbl .strong{font-weight:750;color:var(--ink);white-space:nowrap}
.tbl .strong:hover{color:var(--accent);text-decoration:underline}
.tbl tr.dim td:not(.row-acts){opacity:.5}
.ph-sm{display:flex;align-items:center;justify-content:center;color:var(--faint);
  background:linear-gradient(150deg,#f2f6fc,#e6ecf6);border-radius:var(--r-sm);
  border:1px solid var(--line)}
.row-acts{white-space:nowrap;text-align:right}
.row-acts form{display:inline-block;margin:0}
.row-acts>*+*{margin-left:6px}
.pick-col{width:38px}
.pick-col input{width:20px;height:20px}
.tbl input[type=checkbox]{accent-color:var(--accent)}

/* Compact "⋮" row menu */
.more-menu{position:relative;display:inline-block}
.dots{width:40px;height:40px;border:1px solid var(--line-2);border-radius:var(--r-sm);
  background:var(--card);color:var(--ink-2);font-size:20px;line-height:1;cursor:pointer}
.dots:hover{border-color:var(--accent);color:var(--accent)}
.menu-pop{position:absolute;right:0;top:44px;z-index:20;min-width:168px;
  background:var(--card);border:1px solid var(--line);border-radius:var(--r);
  overflow:hidden;box-shadow:var(--sh-4)}
.menu-pop a,.menu-pop button{display:flex;align-items:center;gap:10px;width:100%;
  text-align:left;padding:13px 15px;border:0;border-bottom:1px solid var(--line);
  background:none;font-family:inherit;font-size:var(--t-base);font-weight:650;
  cursor:pointer;color:var(--ink-2);min-height:48px}
.menu-pop a:last-child,.menu-pop button:last-child{border-bottom:0}
.menu-pop a:hover,.menu-pop button:hover{background:var(--bg)}
.menu-pop .i-edit{color:var(--info)}
.menu-pop .i-view{color:var(--alt)}
.menu-pop .i-hide{color:var(--warn)}
.menu-pop .i-show{color:var(--ok)}
.menu-pop .i-del{color:var(--bad)}

.dupe-note{margin:calc(var(--s2) * -1) 0 var(--s4);font-size:var(--t-sm);
  color:var(--muted)}
.dupe-note a{color:var(--accent);font-weight:700;text-decoration:underline}
.warn{font-size:var(--t-xs);font-weight:700;color:var(--warn)}
.warn a{text-decoration:underline}

/* Masters: brands / categories / sizes as cards */
.add-master{display:flex;flex-direction:column;align-items:stretch;gap:var(--s2);
  margin-bottom:var(--s4)}
.add-master input{flex:0 0 auto;width:100%;padding:12px 13px;
  font-size:var(--t-md);min-height:48px}
.add-master .btn{width:100%}
.m-cards{display:grid;gap:var(--s3);grid-template-columns:1fr}
.m-card{border:1px solid var(--line);border-radius:var(--r-lg);
  padding:var(--s3) var(--s3) var(--s3);background:var(--card-2);
  box-shadow:0 1px 2px rgba(13,23,41,.04)}
.m-card.off{opacity:.62}
.m-top{display:flex;align-items:center;justify-content:space-between;gap:var(--s2)}
.m-name{font-weight:800;font-size:var(--t-md);min-width:0;overflow-wrap:anywhere;
  letter-spacing:-.02em;color:var(--ink)}
.m-uses{color:var(--muted);font-size:var(--t-xs);margin-top:1px;font-weight:600}
.m-acts{margin-top:var(--s3);display:flex;flex-direction:column;gap:var(--s2)}
.m-rename{display:flex;gap:6px}
.m-rename input[type=text]{flex:1;min-width:0;padding:11px 12px;
  font-size:var(--t-md);min-height:46px}
.m-order{width:70px;padding:11px 8px;font-size:var(--t-md);min-height:46px;
  text-align:center}
.m-buttons{display:flex;flex-wrap:wrap;gap:6px;align-items:center}
.m-buttons form{display:flex;gap:5px;align-items:center;margin:0}
.m-merge .mini-select{max-width:118px}
.rename-form,.merge-form{display:flex;gap:6px;align-items:center}
.rename-form input{flex:1;min-width:120px;padding:10px 12px;font-size:var(--t-md)}
.mini-select{padding:10px 7px;font-size:var(--t-base);max-width:118px;
  min-height:44px;font-weight:600}
.mini-input{width:140px;padding:10px 11px;font-size:var(--t-base);min-height:44px}

/* Edit page images */
.img-grid{display:grid;gap:var(--s2);grid-template-columns:repeat(3,minmax(0,1fr));
  margin-bottom:var(--s4)}
.img-tile{position:relative;border:1px solid var(--line);border-radius:var(--r);
  overflow:hidden;background:var(--card);box-shadow:var(--sh-1)}
.img-tile img{width:100%;aspect-ratio:1/1;object-fit:cover;display:block}
.cover-badge{position:absolute;top:8px;left:8px;background:var(--accent-grad);
  color:#fff;font-size:var(--t-2xs);font-weight:800;padding:3px 9px;
  border-radius:var(--r-pill);box-shadow:0 2px 6px rgba(29,78,216,.35);
  letter-spacing:.03em}
.img-actions{display:flex;gap:5px;padding:7px;justify-content:center;flex-wrap:wrap}
.img-actions form{margin:0}
.img-tile[draggable]{cursor:grab}
.img-tile.dragging{opacity:.4;cursor:grabbing}
.img-tile.over{outline:2px dashed var(--accent);outline-offset:-2px}
.add-images{display:flex;flex-direction:column;align-items:stretch;gap:var(--s3);
  padding-top:var(--s4);border-top:1px solid var(--line)}
.add-images input{flex:0 0 auto;width:100%}
.add-images .btn{width:100%}

/* Auth */
.who{font-size:var(--t-sm);font-weight:700;color:var(--ink)}
.stack{display:flex;flex-direction:column;gap:var(--s3)}
.stack label{display:flex;flex-direction:column;gap:6px;font-size:var(--t-sm);
  color:var(--muted);font-weight:700}
.stack .actions{margin:var(--s2) 0 0}
.reset-form{display:inline-flex;gap:5px;align-items:center}

/* Settings page */
.set-preview{display:flex;align-items:center;gap:var(--s3)}
.set-preview .brand-mark{width:48px;height:48px;flex-basis:48px;font-size:24px;
  border-radius:14px}

/* Sticky staff bars */
.bulk-bar,.submit-bar{position:fixed;left:0;right:0;bottom:0;z-index:45;
  display:flex;align-items:center;gap:var(--s2);
  padding:10px var(--s3) calc(10px + env(safe-area-inset-bottom));
  background:rgba(255,255,255,.94);border-top:1px solid var(--line);
  -webkit-backdrop-filter:saturate(180%) blur(14px);
  backdrop-filter:saturate(180%) blur(14px);
  box-shadow:var(--sh-up)}
.bb-count,.sb-count{flex:1;min-width:0;font-size:var(--t-sm);font-weight:700;
  color:var(--muted)}
.submit-bar .btn{flex:0 0 auto}
#bulk-form,form#bulk-form,#manage-form,form#manage-form{padding-bottom:84px}

/* ============================================================
   8. Buttons, action colours, tags
   ============================================================ */
input,select,textarea,button{font-family:inherit}
/* iOS zooms the page when a focused input is under 16px. */
input[type=text],input[type=search],input[type=number],input[type=password],
input[type=email],input[type=tel],select,textarea{font-size:16px}

.btn{display:inline-flex;align-items:center;justify-content:center;gap:7px;
  padding:13px 20px;border:0;border-radius:var(--r);background:var(--accent-grad);
  color:#fff;font-family:inherit;font-size:var(--t-base);font-weight:750;
  letter-spacing:-.008em;cursor:pointer;min-height:48px;
  box-shadow:0 2px 8px rgba(29,78,216,.28), inset 0 1px 0 rgba(255,255,255,.18);
  transition:transform .15s var(--ease),box-shadow .15s var(--ease),
             filter .15s var(--ease)}
.btn:active{transform:translateY(1px) scale(.985);
  box-shadow:0 1px 4px rgba(29,78,216,.30)}
@media (hover:hover){ .btn:hover{filter:brightness(1.07);
  box-shadow:0 4px 14px rgba(29,78,216,.34)} }
.btn:disabled{opacity:.45;cursor:not-allowed;box-shadow:none;filter:none}
.btn svg{display:block}
.btn-ghost{background:var(--card);color:var(--ink-2);border:1px solid var(--line-2);
  box-shadow:0 1px 2px rgba(13,23,41,.05)}
.btn-ghost:hover{filter:none;background:var(--bg);border-color:var(--accent);
  color:var(--accent);box-shadow:0 1px 3px rgba(13,23,41,.08)}
.btn-add{padding:10px 15px;min-height:44px;font-size:var(--t-sm);white-space:nowrap}
.page-head .btn-add{margin-left:auto}

/* Link-styled submit button (manage.php) */
.as-link{border:0;background:none;padding:0;font-family:inherit;
  font-size:inherit;font-weight:700;color:var(--accent);cursor:pointer;
  text-decoration:underline}

/* Each action keeps the same colour everywhere:
   green = show/save, amber = hide, red = delete, blue = edit/view,
   violet = merge. */
:root{
  --ok:#047857;      --ok-bg:#ecfdf5;      --ok-line:#9ae6c4;
  --warn:#b45309;    --warn-bg:#fffbeb;    --warn-line:#f8d488;
  --bad:#b91c1c;     --bad-bg:#fef2f2;     --bad-line:#f9bcbc;
  --info:#1d4ed8;    --info-bg:#eff6ff;    --info-line:#b6d2fd;
  --alt:#6d28d9;     --alt-bg:#f5f3ff;     --alt-line:#d3c8fd;
}
.mini{display:inline-flex;align-items:center;justify-content:center;gap:6px;
  padding:9px 13px;border-radius:var(--r-sm);border:1px solid var(--line-2);
  background:var(--card);color:var(--ink-2);font-family:inherit;
  font-size:var(--t-sm);font-weight:700;cursor:pointer;min-height:44px;
  transition:background-color .15s var(--ease),color .15s var(--ease),
             border-color .15s var(--ease),transform .15s var(--ease)}
.mini:active{transform:scale(.95)}
.mini:hover{color:var(--ink);border-color:var(--line-2)}
.mini svg{display:block}
.mini.danger:hover{border-color:var(--bad-line);color:var(--bad);background:var(--bad-bg)}
.mini[disabled]{opacity:.35;cursor:not-allowed}

.mini.act-ok   {color:var(--ok);   background:var(--ok-bg);   border-color:var(--ok-line)}
.mini.act-warn {color:var(--warn); background:var(--warn-bg); border-color:var(--warn-line)}
.mini.act-bad  {color:var(--bad);  background:var(--bad-bg);  border-color:var(--bad-line)}
.mini.act-info {color:var(--info); background:var(--info-bg); border-color:var(--info-line)}
.mini.act-alt  {color:var(--alt);  background:var(--alt-bg);  border-color:var(--alt-line)}
.mini.act-ok:hover  {background:var(--ok);   color:#fff;border-color:var(--ok)}
.mini.act-warn:hover{background:var(--warn); color:#fff;border-color:var(--warn)}
.mini.act-bad:hover {background:var(--bad);  color:#fff;border-color:var(--bad)}
.mini.act-info:hover{background:var(--info); color:#fff;border-color:var(--info)}
.mini.act-alt:hover {background:var(--alt);  color:#fff;border-color:var(--alt)}

/* Icon-only: square, no label text */
.mini.ico{width:44px;height:44px;padding:0}
.mini.ico svg{width:19px;height:19px}

/* Bulk bar buttons are solid, so the destructive one is unmistakable */
.bulk-bar .mini{border:0;color:#fff;font-weight:750;padding:11px 15px;
  font-size:var(--t-sm);box-shadow:var(--sh-1)}
.bulk-bar .act-ok{background:var(--ok)}
.bulk-bar .act-warn{background:var(--warn)}
.bulk-bar .act-bad{background:var(--bad)}
.bulk-bar .act-ok:hover{background:#036a4d;color:#fff}
.bulk-bar .act-warn:hover{background:#9a4708;color:#fff}
.bulk-bar .act-bad:hover{background:#a11616;color:#fff}

.btn-danger{background:var(--bad);
  box-shadow:0 2px 8px rgba(185,28,28,.28), inset 0 1px 0 rgba(255,255,255,.18)}
.btn-danger:hover{box-shadow:0 4px 14px rgba(185,28,28,.34)}

.tag-off{background:#eef1f6;color:var(--muted);border-color:var(--line-2)}
.tag-warn{background:var(--warn-bg);color:var(--warn);border-color:var(--warn-line)}

/* ============================================================
   9. Feedback: empty, flash, notice, toast
   ============================================================ */
.empty{background:var(--card);border:2px dashed var(--line-2);
  border-radius:var(--r-xl);padding:var(--s7) var(--s5);text-align:center;
  color:var(--muted);font-size:var(--t-md);line-height:1.6}
.empty p{margin:0 0 var(--s3)}
.empty p:last-child{margin-bottom:0}
.empty a:not(.btn){color:var(--accent);font-weight:700;text-decoration:underline}

.flash{border-radius:var(--r);padding:14px 16px;margin-bottom:var(--s4);
  font-size:var(--t-base);font-weight:600;line-height:1.5;
  display:flex;flex-wrap:wrap;align-items:center;gap:var(--s3);
  box-shadow:var(--sh-1)}
.flash.ok{background:var(--ok-bg);border:1px solid var(--ok-line);
  border-left:4px solid var(--ok);color:var(--price-deep)}
.flash.bad{background:var(--bad-bg);border:1px solid var(--bad-line);
  border-left:4px solid var(--bad);color:#911616;display:block}
.flash ul{margin:var(--s2) 0 0;padding-left:20px}
.flash li{margin-bottom:3px}

.notice{background:linear-gradient(#fffdf5,#fffbeb);border:1px solid #f6dc9a;
  border-left:4px solid #d97706;border-radius:var(--r-lg);padding:var(--s5);
  margin:var(--s5) 0;box-shadow:var(--sh-1)}
.notice h2{margin:0 0 var(--s2);font-size:var(--t-lg);color:#7c3f06}
.notice p{margin:0 0 var(--s2)}
.notice p:last-child{margin-bottom:0}
.notice a{color:var(--accent);font-weight:700;text-decoration:underline}
.notice code{background:#fff;border:1px solid #f6dc9a;border-radius:6px;
  padding:1px 6px;font-family:var(--font-mono);font-size:var(--t-sm)}

/* Undo toast — replaces the "are you sure?" dialog for reversible deletes */
.toast{position:fixed;left:var(--s3);right:var(--s3);bottom:var(--s4);z-index:60;
  display:flex;align-items:center;gap:var(--s3);padding:14px 16px;
  border-radius:var(--r-lg);
  background:linear-gradient(150deg,#182545,#0d1729);
  color:#fff;font-size:var(--t-base);font-weight:650;
  box-shadow:0 12px 34px rgba(13,23,41,.40), inset 0 1px 0 rgba(255,255,255,.10);
  animation:toast-in .2s var(--ease)}
.toast span{flex:1;min-width:0}
.toast form{margin:0}
.toast-btn{border:0;background:rgba(125,211,252,.14);color:#8fd8fb;
  font-family:inherit;font-size:var(--t-sm);font-weight:800;text-transform:uppercase;
  letter-spacing:.06em;cursor:pointer;padding:9px 14px;border-radius:var(--r-xs);
  min-height:40px;transition:background-color .15s var(--ease)}
.toast-btn:hover{background:rgba(125,211,252,.26);color:#bae6fd}
.toast.gone{opacity:0;transform:translateY(10px);pointer-events:none;
  transition:opacity .22s,transform .22s}
@keyframes toast-in{from{opacity:0;transform:translateY(12px)}to{opacity:1;transform:none}}

/* Hide the bars while scrolling down, bring them back on scroll up. The phone's
   own address bar hides on the same gesture, so the screen fills with products. */
.appbar{transition:transform .24s var(--ease)}
.browse{transition:top .24s var(--ease)}
body.bars-off .appbar{transform:translateY(-100%)}
body.bars-off .browse{top:0}

/* On a phone the hamburger menu already lists every staff page, so the tab
   strip is pure noise; bring it back on wider screens. */
@media (max-width:639px){ .tabs{display:none} }

/* ============================================================
   10. Tablet and desktop
   ============================================================ */
@media (min-width:640px){
  .wrap{padding:0 var(--s4)}
  main{padding-top:var(--s5)}
  .page-head h1{font-size:var(--t-2xl)}

  .browse{margin:0 calc(var(--s4) * -1) var(--s4);padding:10px var(--s4) var(--s2)}
  .sheet{left:var(--s4);right:auto;min-width:300px;max-width:420px}

  .grid{grid-template-columns:repeat(auto-fill,minmax(200px,1fr));gap:var(--s4)}

  .pbody{padding:var(--s5)}
  .pbody h1{font-size:var(--t-3xl)}
  .spec-tiles{grid-template-columns:repeat(4,minmax(0,1fr))}
  .shot{flex-basis:74px;width:74px;height:74px}
  .detail{grid-template-columns:minmax(0,1.1fr) minmax(0,1fr);gap:var(--s6)}

  .action-bar,.submit-bar,.bulk-bar{justify-content:flex-end}
  .ab-btn{flex:0 0 auto;padding:0 26px}
  .ab-call{flex:0 0 auto}
  .btn-wa{width:auto}

  .panel{padding:var(--s5)}
  .fields{grid-template-columns:repeat(auto-fit,minmax(220px,1fr))}
  .cells{grid-template-columns:repeat(auto-fit,minmax(160px,1fr))}
  .img-grid{grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:var(--s3)}
  .shot-sm{width:68px;height:68px;flex-basis:68px}
  .add-images,.add-master{flex-direction:row;align-items:center}
  .add-images .btn,.add-master .btn{width:auto}
  .add-master input{flex:1 1 240px;width:auto}
  .actions .btn{flex:0 0 auto}
  .m-cards{grid-template-columns:repeat(auto-fill,minmax(330px,1fr))}
  .mini{min-height:38px;padding:7px 12px}
  .mini.ico{width:38px;height:38px}
  .mini-select,.m-merge .mini-select{max-width:170px;min-height:38px;padding:8px 10px}
  .mini-input{min-height:38px;padding:8px 11px}
  .tbl{min-width:720px;font-size:var(--t-sm)}
  .toast{left:auto;right:24px;min-width:340px;max-width:470px}
}
@media (min-width:900px){
  .browse{position:static;background:none;border-bottom:0;margin:0 0 var(--s4);
    padding:0;-webkit-backdrop-filter:none;backdrop-filter:none}
  .sheet{position:absolute}
  .grid{gap:var(--s4)}
  .more-rail{scroll-snap-type:none}
}
@media (min-width:1024px){
  .grid{grid-template-columns:repeat(auto-fill,minmax(215px,1fr))}
}

/* Footer line doubles as the hidden staff entrance (five taps) — it must still
   look like an ordinary copyright, so only the cursor and tap behaviour change. */
#foot-mark span{cursor:default;-webkit-user-select:none;user-select:none}

/* Required vs optional fields.
   Red asterisk = must be filled in; grey "optional" chip = can be left blank. */
.req{color:var(--bad);font-weight:800;font-size:1.05em;line-height:1}
.opt{color:var(--muted);background:var(--bg-deep);border-radius:var(--r-pill);
  padding:1px 7px;font-size:var(--t-2xs);font-weight:700;text-transform:uppercase;
  letter-spacing:.05em;vertical-align:1px}
.legend{margin:-2px 0 var(--s3)}
.legend .req{margin-right:2px}
.row-label .req,.row-label .opt{margin-left:3px}
.row-label .opt{padding:0 5px;font-size:9.5px}

/* Field labels flow as text, so the caption and its required/optional marker
   stay on one line — as a flex column each was becoming its own row. */
.fields label{display:block}
.fields label > input,
.fields label > select,
.fields label > textarea,
.fields label > .new-input{display:block;width:100%;margin-top:5px}
.fields label > .pick{display:flex;width:100%;margin-top:5px}
/* Must come last: a display rule above would otherwise beat the hidden
   attribute and reveal the "+ New" boxes that should stay closed. */
.fields label > [hidden]{display:none}
.fields label > .field-hint{display:block;margin-top:4px}
.fields .self-end{display:flex;align-items:flex-end}
.fields .self-end > .btn{width:100%}

/* ============================================================
   Brands / Categories / Sizes / Remarks each get their own colour,
   so the sections stay apart at a glance. One --sec variable per
   section drives the bar, heading, cards and Add button.
   ============================================================ */
.master-brand   {--sec:#1d4ed8; --sec-soft:#eef4ff; --sec-line:#c7dbfe}  /* blue   */
.master-category{--sec:#7c3aed; --sec-soft:#f5f3ff; --sec-line:#ddd6fe}  /* violet */
.master-size    {--sec:#0f766e; --sec-soft:#ecfdf5; --sec-line:#a7f3d0}  /* teal   */
.master-remark  {--sec:#b45309; --sec-soft:#fffbeb; --sec-line:#fde68a}  /* amber  */

.master-sec{border-top:3px solid var(--sec);position:relative}
.master-sec > h2{color:var(--sec)}
.master-sec > h2 .count{color:var(--sec);opacity:.75}
.master-sec .m-card{background:var(--sec-soft);border-color:var(--sec-line);
  border-left:3px solid var(--sec)}
.master-sec .m-card.off{background:var(--bg);border-left-color:var(--line-2)}
.master-sec .add-master .btn{background:var(--sec)}
.master-sec .m-name{color:var(--sec)}
.master-sec .m-card.off .m-name{color:var(--muted)}

/* Sizes carry an extra "order" box, and on a 375px screen the name + order +
   save row pushed the whole page sideways. Let the name shrink and keep the
   order box narrow; the card can never be wider than its column. */
.m-card{max-width:100%;overflow-x:hidden}
.m-rename{flex-wrap:nowrap;min-width:0}
.m-rename input[type=text]{flex:1 1 auto;min-width:0}
.m-order{flex:0 0 56px;width:56px;padding-left:6px;padding-right:6px;text-align:center}

/* ============================================================
   Collapsible master sections. Closed by default, so the page opens
   as four headings instead of a long wall of cards.
   ============================================================ */
details.master-sec{padding:0;overflow:hidden}
details.master-sec > summary{
  list-style:none;cursor:pointer;user-select:none;-webkit-user-select:none;
  display:flex;align-items:center;gap:var(--s2);
  padding:var(--s3) var(--s4);min-height:52px;
  font-weight:800;font-size:var(--t-lg);letter-spacing:-.02em;color:var(--sec);
  background:var(--sec-soft);
}
details.master-sec > summary::-webkit-details-marker{display:none}
details.master-sec > summary:hover{filter:brightness(.985)}
details.master-sec > summary .sec-title{flex:1;min-width:0}
details.master-sec > summary .count{
  background:var(--sec);color:#fff;border-radius:var(--r-pill);
  padding:1px 9px;font-size:var(--t-xs);font-weight:800;opacity:1}
details.master-sec > summary .chev{flex:0 0 auto;transition:transform .18s var(--ease)}
details.master-sec[open] > summary .chev{transform:rotate(180deg)}
details.master-sec[open] > summary{border-bottom:1px solid var(--sec-line)}

/* Everything after the summary is the body, so it needs the padding the
   panel used to provide. */
details.master-sec > *:not(summary){margin-left:var(--s4);margin-right:var(--s4)}
details.master-sec > .add-master{margin-top:var(--s4)}
details.master-sec > .m-cards{margin-bottom:var(--s4)}
details.master-sec > .empty{margin-bottom:var(--s4)}