/* ===== a2zToyStore invsys shop CSS =====
/* @version 2026-08-24l — mobile CSS true root-cause fix
   2026-08-24g: .wrap{} missing brace fix; header one row; mobbar bottom.
   2026-08-24i: .hsearch.open global display:flex!important (mobile search);
   replaced hardcode #0b0e12 with var(--bg)/var(--surface).
   COCO FIX 24i: .catdrawer base clean (slide-in via transform). */

/* mobile search expand (must be last-ish; not inside comment) */
@media (max-width:760px){
  .hsearch.open{ display:flex !important; position:fixed; top:56px; left:0; right:0; z-index:9999; background:var(--surface); padding:8px 10px; box-shadow:0 6px 20px rgba(0,0,0,.25); }
  .hsearch.open input{ flex:1; border:1px solid var(--line); border-radius:10px; padding:10px; background:var(--surface); color:var(--ink); }
  .hsearch.open button{ background:var(--primary); color:var(--surface); border:none; border-radius:10px; padding:0 16px; margin-left:6px; }
}

.catdrawer{ display:flex; flex-direction:column; position:fixed; top:0; left:0; height:100%; width:80%; max-width:320px; background:var(--bg); box-shadow:4px 0 24px rgba(0,0,0,.5); transform:translateX(-100%); transition:transform .25s; z-index:520; }
/* ============================================================
   shop.css  —  a2zToyStore invsys shop
   @version  2026-08-24n  (mobile CSS TRUE root-cause fix + pay-opt flex fix + required-field markers)
   @changelog
     2026-08-24g  TRUE ROOT CAUSE: .wrap{ padding:10px; } missing
                 closing brace nested ALL subsequent rules inside
                 .wrap -> browser ignored .sitehead/.mobbar/.foot/
                 .buybar/catdrawer. FIX: added }. Forced header
                 logo+icons single row, mobbar fixed bottom:0,
                 body padding-bottom:64px, carousel clip fix.
     2026-08-24f  (superseded) nested @media flatten attempt.
   ============================================================ */
/* COCO FIX 2026-08-24g: carousel clip + bottom-nav spacing */
@media (max-width:760px){
  body{ padding-bottom:64px; }
  .pcar-slide{ min-width:46%; }
  .rollrow, .hotrow, .carousel{ overflow:hidden; }
  .pcard .pnm{ overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
  .prod-grid .pcard:last-child{ margin-right:8px; }
}
/* COCO FIX 2026-08-24g: header logo+icons single row on mobile + keep mobbar at bottom */
.headrow{ flex-wrap:nowrap !important; gap:8px !important; }
.sitehead .logo, .sitehead h1{ flex:0 1 auto; min-width:0; }
.headlinks{ flex:1 1 auto; justify-content:flex-end; gap:6px !important; }
.headlinks a, .headlinks button{ font-size:13px; }
@media (max-width:760px){
  .headrow{ flex-wrap:nowrap; gap:6px; padding:6px 8px; }
  .hsearch{ display:none; }
  .sitehead .logo{ font-size:15px; }
  .headlinks{ gap:4px; }
}
/* COCO FIX 2026-08-24: mobile header overflow fix (login/theme were off-screen) */
@media (max-width:760px){
  .sitehead{ overflow:hidden; }
  .headrow{ flex-wrap:wrap; max-width:100%; }
  .hsearch:not(.open){ display:none; }
  .hsearchicon{ display:inline-flex !important; }
  .headlinks{ margin-left:auto; gap:10px; }
  .headlinks a, .headlinks button{ font-size:13px; }
}

/* COCO FIX 2026-08-23: search results grid = 4 cols desktop, 2 cols narrow */
.wrap.search-page .prod-grid{ grid-template-columns:repeat(4,1fr); }
@media (max-width:760px){ .wrap.search-page .prod-grid{ grid-template-columns:1fr 1fr; } }
.catdrawer.open{ display:block !important; transform:translateX(0) !important; }
/* Shop storefront styles (extends inventory style.css variables) */
body{max-width:1100px;margin:0 auto;padding:0 14px}
.shopnav{margin:14px 0;border-radius:12px;box-shadow:none;background:var(--surface)}
.shopnav .brand{font-weight:700}
.brandlogo{display:flex;align-items:center;font-weight:800;font-size:19px;letter-spacing:-.5px;text-decoration:none;line-height:1}
.brandlogo .lg-a2z{color:var(--ink)}
.brandlogo .lg-toy{color:#e23b3b}
.brandlogo .lg-store{color:#2f9bd6}
.brandlogo .lg-dom{color:var(--mut);font-size:13px;font-weight:700;margin-left:1px}
.brandlogo img{height:40px;width:auto;display:block}
.brandlogo .lg-img{height:36px;width:auto;display:block;max-width:160px}
.topcats{display:flex;gap:8px;overflow-x:auto;margin:10px 0;padding-bottom:4px}
.topcats a{padding:6px 14px;border:1px solid var(--line);border-radius:20px;background:var(--surface);text-decoration:none;color:var(--ink);white-space:nowrap;font-size:14px}
.topcats a.sel{background:var(--primary);color:var(--surface);border-color:var(--primary)}
.prod-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(180px,1fr));gap:16px;margin-top:16px}
.pcard{background:var(--surface);border:1px solid var(--line);border-radius:12px;overflow:hidden;display:flex;flex-direction:column;position:relative}
.pcard img{width:100%;height:180px;object-fit:cover;background:var(--surface-2)}
.pcard .body{padding:10px 12px;flex:1;display:flex;flex-direction:column;gap:4px}
.pcard .nm{font-weight:600;font-size:14px;color:var(--ink)}
.pcard .br{font-size:12px;color:var(--mut)}
.pcard .pr{font-weight:700;color:var(--primary);margin-top:auto}
.pcard a{text-decoration:none;color:inherit}
/* desktop hover + */
.pcard .addbtn{position:absolute;top:8px;right:8px;width:38px;height:38px;border-radius:50%;background:var(--primary);color:var(--surface);border:none;font-size:20px;font-weight:700;cursor:pointer;opacity:0;transition:opacity .15s;box-shadow:0 2px 6px rgba(0,0,0,.2)}
.pcard:hover .addbtn{opacity:1}
/* ===== Home: top bar, banner, roll rows, promo strip ===== */
.topbar{display:flex;gap:10px;align-items:center;margin:12px 0}
.catdd{padding:10px;border-radius:10px;border:1px solid var(--line);background:var(--surface);max-width:200px}
.searchbar input{padding:10px;border:1px solid var(--line,var(--line));border-radius:8px;background:var(--surface)}
.banner{position:relative;border-radius:14px;overflow:hidden;margin:8px 0 4px;box-shadow:0 4px 16px rgba(0,0,0,.08);min-height:260px;background:#1d4ed8}
.banner img{width:100%;height:260px;object-fit:cover;display:block;background:#1d4ed8}
.banner .bcap{position:absolute;left:24px;bottom:22px;color:var(--surface);text-shadow:0 2px 8px rgba(0,0,0,.5)}
.banner .bt{font-size:1.7rem;font-weight:800}
.banner .bs{font-size:1rem;opacity:.95}
.bdots{position:absolute;right:16px;bottom:14px;display:flex;gap:7px}
.bdots .dot{width:10px;height:10px;border-radius:50%;background:rgba(255,255,255,.5);cursor:pointer}
.bdots .dot.on{background:var(--surface);width:22px;border-radius:5px}
.sec{margin:22px 0 10px;font-size:1.25rem}
.rollrow{overflow:hidden;position:relative}
.rollinner{display:flex;gap:14px;transition:transform .6s ease;will-change:transform;padding:4px 0}
.rcard{flex:0 0 168px;background:var(--surface);border:1px solid var(--line);border-radius:12px;overflow:hidden;position:relative;display:flex;flex-direction:column}
.rcard img{width:100%;height:150px;object-fit:cover;background:var(--surface-2)}
.rcard .rbody{padding:8px 10px 46px;flex:1;display:flex;flex-direction:column;gap:3px}
.rcard .rnm{font-weight:600;font-size:13.5px;line-height:1.2;height:32px;overflow:hidden}
.rcard .rpr{font-weight:700;color:var(--primary);margin-top:auto}
.rcard a{text-decoration:none;color:inherit}
.rcard .rquick{position:absolute;left:0;right:0;bottom:0;opacity:0;transform:translateY(8px);transition:opacity .15s,transform .15s}
.rcard:hover .rquick{opacity:1;transform:translateY(0)}
.rcard .radd{width:100%;border:none;background:var(--primary);color:var(--surface);padding:9px;font-weight:700;cursor:pointer}
.promostrip{display:flex;gap:12px;margin:22px 0 8px}
.promo{flex:1;background:linear-gradient(135deg,#fff7ed,#ffedd5);border:1px solid #fed7aa;border-radius:12px;padding:12px 14px;display:flex;flex-direction:column;gap:2px}
.promo .pc{font-weight:800;color:#c2410c}
.promo .pl{font-size:13px;color:#7c2d12}

/* ===== Product detail ===== */
.pdetail{display:flex;gap:30px;margin-top:14px;align-items:flex-start}
.pgallery{position:relative;flex:0 0 420px;max-width:46%}
.pgallery img{width:100%;height:auto;max-height:520px;object-fit:contain;background:var(--surface-2);border:1px solid var(--line);border-radius:14px;cursor:zoom-in}
#pimg{cursor:zoom-in}
#pimg.zoom{cursor:zoom-out}
#pimg.zoom + #magnify{display:block}
#pimg.zoom{opacity:.35}
#pimg{transition:opacity .1s}
#pimg.zoom{cursor:zoom-out}
.muted{color:var(--mut);font-size:13px}
.eta{display:inline-block;background:#fff7ed;color:#c2410c;font-weight:700;border:1px solid #fed7aa;border-radius:8px;padding:4px 10px;margin-bottom:8px;font-size:14px}
.pdesc{line-height:1.6;color:var(--ink)}
.tags{margin:12px 0;display:flex;gap:8px;flex-wrap:wrap;align-items:center}
.taglbl{font-size:13px;color:var(--mut)}
.tagpill{background:var(--chip);color:var(--primary);border:1px solid var(--primary);border-radius:20px;padding:4px 12px;font-size:13px;text-decoration:none;font-weight:600}
.tagpill:hover{background:var(--primary);color:var(--surface)}
@media (max-width:760px){
  .pdetail{flex-direction:column}
  .pgallery{flex:none;max-width:100%;width:100%}
}
@media (max-width:640px){
  .prod-grid{grid-template-columns:1fr 1fr;gap:10px}
  .pcard img{height:130px}
  .pcard .addbtn{opacity:.85;top:6px;right:6px;width:34px;height:34px;font-size:18px}
  .pcard .nm{font-size:12.5px}
  .topcats a{padding:5px 11px;font-size:13px}
}
.btn-buy{background:var(--primary);color:var(--surface);border:none;padding:10px 18px;border-radius:9px;font-weight:600;cursor:pointer;font-size:15px}
.btn-ghost{background:var(--surface);border:1px solid var(--line);padding:9px 16px;border-radius:9px;cursor:pointer;color:var(--ink)}
.cart-row{display:flex;gap:12px;align-items:center;background:var(--surface);border:1px solid var(--line);border-radius:10px;padding:10px;margin-bottom:10px}
.cart-row img{width:64px;height:64px;object-fit:cover;border-radius:8px}
.summary{background:var(--surface);border:1px solid var(--line);border-radius:12px;padding:16px;max-width:360px}
.form-lab{display:block;margin:10px 0}
.form-lab input,.form-lab textarea,.form-lab select{width:100%;padding:9px;border:1px solid var(--line,var(--line));border-radius:8px;background:var(--surface);margin-top:4px}
.captcha-box{display:flex;align-items:center;gap:10px;background:var(--surface-2);border:1px solid var(--line);border-radius:8px;padding:8px 12px;width:max-content}
.pay-opt{border:1px solid var(--line);border-radius:10px;padding:12px;margin:8px 0;cursor:pointer;display:block;position:relative}
.pay-opt input[type=radio]{position:absolute;opacity:0;width:1px;height:1px;margin:0}
.opt-txt{display:inline;vertical-align:middle}
.pay-opt.sel{border-color:var(--primary);background:var(--surface-2);color:var(--ink);box-shadow:0 0 0 1px var(--primary) inset}
.pay-opt:focus-within{border-color:var(--primary)}
.req{color:#d23b3b;font-weight:700;margin-left:2px}
.fielderr{color:#d23b3b;font-size:12px;display:block;margin-top:3px;min-height:14px}
.muted{color:var(--mut);font-size:13px}
.rel{display:flex;gap:10px;flex-wrap:wrap;margin:10px 0}
.relcard{width:150px;background:var(--surface);border:1px solid var(--line);border-radius:10px;overflow:hidden}
.relcard img{width:100%;height:90px;object-fit:cover}
.relcard .b{font-size:12px;padding:6px 8px}
.qty{width:64px;padding:8px;border:1px solid var(--line,var(--line));border-radius:7px;background:var(--surface)}
.dep{display:flex;gap:8px;flex-wrap:wrap}
.dep select{flex:1;min-width:140px;padding:9px;border:1px solid var(--line);border-radius:8px;background:var(--surface)}
.sharebar{display:flex;gap:6px;align-items:center;flex-wrap:wrap;margin:12px 0}
.sharelbl{font-size:13px;color:var(--mut)}
.sbtn{display:inline-flex;align-items:center;justify-content:center;width:34px;height:34px;border-radius:8px;border:1px solid var(--line);background:var(--surface);color:#222;font-weight:700;text-decoration:none;cursor:pointer;font-size:13px}
.sbtn.fb{background:#1877f2;color:var(--surface);border-color:#1877f2}
.sbtn.th{ background:#ffffff !important; color:#000000 !important; }
.sbtn.ig{background:#e1306c;color:var(--surface);border-color:#e1306c}
.sbtn.wa{background:#25d366;color:var(--surface);border-color:#25d366}
.sbtn.cp{background:#eee}
.toast{position:fixed;left:50%;bottom:24px;transform:translateX(-50%) translateY(20px);background:#1d8a4f;color:var(--surface);padding:12px 14px;border-radius:10px;font-weight:600;opacity:0;pointer-events:none;transition:opacity .2s,transform .2s;z-index:999;box-shadow:0 4px 14px rgba(0,0,0,.25);display:flex;align-items:center;gap:10px;max-width:92vw}
.toast.show{opacity:1;transform:translateX(-50%) translateY(0);pointer-events:auto}
.toast span{flex:1}
.toast .tl{color:var(--surface);text-decoration:underline;font-size:13px;font-weight:600;white-space:nowrap}
.toast .tx{background:rgba(0,0,0,.28);border:none;color:var(--surface);font-size:14px;cursor:pointer;line-height:1;opacity:.9;width:24px;height:24px;border-radius:50%;display:flex;align-items:center;justify-content:center;flex:0 0 auto}
.toast .tx:hover{opacity:1;background:rgba(0,0,0,.45)}
#cartbadge{font-weight:700}
.chatwidget{}
#chatwidget{position:fixed;right:18px;bottom:124px;z-index:900; touch-action:none; cursor:grab;}
#chatwidget.dragging{cursor:grabbing;}
#chatopen{width:54px;height:54px;border-radius:50%;border:none;background:var(--primary);color:var(--surface);font-size:24px;cursor:pointer;box-shadow:0 4px 14px rgba(0,0,0,.3)}
@media (min-width:761px){ #chatwidget{ bottom:18px; } }
#chatpanel{width:300px;max-width:92vw;height:380px;background:var(--surface);border:1px solid var(--line);border-radius:12px;display:flex;flex-direction:column;box-shadow:0 8px 30px rgba(0,0,0,.25);overflow:hidden;margin-bottom:8px}
#chathead{background:var(--primary);color:var(--surface);padding:10px;font-weight:600}
#chatlog{flex:1;overflow:auto;padding:10px;font-size:14px}
#chatlog .cme{background:#e6f0ff;text-align:right;padding:6px 9px;border-radius:10px;margin:5px 0;display:inline-block;float:right;clear:both;max-width:85%}
#chatlog .cbot{background:#f0f4f9;padding:6px 9px;border-radius:10px;margin:5px 0;clear:both;max-width:90%}
#chatinput{display:flex;border-top:1px solid var(--line)}
#chatinput input{flex:1;border:none;padding:10px;outline:none}
#chatinput button{background:var(--primary);color:var(--surface);border:none;padding:0 14px;cursor:pointer}
.pagebody{line-height:1.6}.pagebody ul{margin-left:18px}

/* ===== Sticky header (logo + search + login + cart) ===== */
.sitehead{position:sticky;top:0;z-index:200;background:var(--surface);border-bottom:1px solid var(--line);transition:transform .25s ease}
.sitehead.stuck{box-shadow:0 2px 10px rgba(0,0,0,.08)}
.headrow{display:flex;align-items:center;gap:16px;max-width:1100px;margin:0 auto;padding:10px 14px}
.brandlogo img{height:42px;width:auto;display:block}
.hsearch{flex:1;display:flex;max-width:520px;position:relative}
.hsearch input{flex:1;border:1px solid var(--line);border-right:none;border-radius:10px 0 0 10px;padding:10px 12px;outline:none}
.hsearch button{border:1px solid var(--primary);background:var(--primary);color:var(--surface);border-radius:0 10px 10px 0;padding:0 16px;cursor:pointer;font-size:16px}
.headlinks{display:flex;align-items:center;gap:14px;margin-left:auto}
.headlinks a{color:var(--ink);text-decoration:none;font-size:14px;white-space:nowrap}
.cartbtn{background:var(--surface);border:none;color:var(--primary);border-radius:10px;padding:9px 14px;font-weight:700;cursor:pointer;font-size:14px}
.cartbtn #cartbadge{color:var(--primary)}

/* ===== Category bar (light blue, scroll + arrows, hover flyout) ===== */
.catbar{background:#eaf4fb;border-bottom:1px solid #cfe4f3;position:sticky;top:62px;z-index:190}
/* desktop: keep the category bar a SLIM single row (horizontal scroll, no wrap) */
@media (min-width:761px){
  /* desktop: hide the horizontal category bar; categories live in the hamburger accordion */
  .catbar{ display:none; }
  .catwrap{ max-width:1100px; }
  .catrow{ flex-wrap:nowrap; overflow-x:auto; padding:5px 6px; scrollbar-width:thin; }
  .catrow::-webkit-scrollbar{ height:5px; }
  .catrow::-webkit-scrollbar-thumb{ background:#b9d6ea; border-radius:3px; }
  .catitem{ padding:5px 12px; font-size:13px; white-space:nowrap; }
  .carrow{ height:28px; width:26px; }
  /* desktop: single inline search only — hide the togggle-icon (mobile only) */
  .hsearchicon{ display:none; }
}
.catwrap{display:flex;align-items:center;max-width:1100px;margin:0 auto;position:relative}
.catrow{display:flex;gap:4px;overflow-x:auto;scroll-behavior:smooth;padding:8px 6px;flex:1}
.catrow::-webkit-scrollbar{display:none}
.catitem{position:relative;padding:8px 14px;white-space:nowrap;font-size:14px;font-weight:600;color:#0c4a73;cursor:pointer;border-radius:8px}
.catitem:hover{background:#d4e9f7;color:#08344f}
.carrow{width:30px;height:34px;border:none;background:#d4e9f7;color:#0c4a73;font-size:20px;cursor:pointer;border-radius:6px;flex:none}
.carrow.left{margin-left:4px}.carrow.right{margin-right:4px}
.catfly{display:none;position:absolute;top:100%;left:0;background:var(--surface);border:1px solid var(--line);border-radius:10px;box-shadow:0 8px 28px rgba(0,0,0,.16);padding:10px;gap:18px;z-index:300;max-width:90vw}
.catcol{min-width:170px}
.cath{font-weight:700;color:var(--primary);margin-bottom:6px;font-size:14px}
.catsub{display:none;margin-top:4px}
.catcol:hover .catsub{display:block}
.catl3{display:block;padding:4px 8px;color:var(--ink);text-decoration:none;font-size:13px;border-radius:6px}
.catl3:hover{background:#eaf4fb;color:var(--primary)}

/* ===== Roll-row product cards (home highlight / pre-order) ===== */
.rollrow{position:relative;display:flex;align-items:stretch}
.rollscroll{position:relative;overflow-x:auto;overflow-y:hidden;scroll-behavior:smooth;-webkit-overflow-scrolling:touch;flex:1;min-width:0}
.rollscroll::-webkit-scrollbar{display:none}
.rollscroll{ -ms-overflow-style:none; scrollbar-width:none; }
.rollinner{display:flex;flex-wrap:nowrap;gap:12px;padding:4px 2px}
.rarrow{position:relative;flex:0 0 30px;width:30px;border:none;background:var(--primary);color:var(--surface);font-size:22px;cursor:pointer;border-radius:8px;z-index:6;opacity:.92;box-shadow:0 2px 8px rgba(0,0,0,.2);align-self:center}
.rarrow.left{margin-right:4px}.rarrow.right{margin-left:4px}
.rcard{position:relative;flex:0 0 auto;width:160px;background:var(--surface);border:1px solid var(--line);border-radius:12px;overflow:hidden}
.rcard > a{display:block;text-decoration:none;color:inherit}
.rcard img{width:100%;height:160px;object-fit:cover;display:block;background:var(--surface-2)}
.rbody{padding:8px 10px}
.rnm{font-size:13px;font-weight:600;line-height:1.2;height:32px;overflow:hidden}
.rpr{font-size:14px;font-weight:700;color:var(--primary);margin-top:2px}
.rquick{position:absolute;left:8px;right:8px;bottom:60px;z-index:5}
.radd{width:100%;background:var(--primary);color:var(--surface);border:none;border-radius:9px;padding:8px 0;font-weight:700;font-size:13px;cursor:pointer;box-shadow:0 2px 8px rgba(0,0,0,.18)}
.radd:hover{filter:brightness(1.05)}

/* ===== Brand / series tiles ===== */
.tilegrid{display:flex;gap:12px;flex-wrap:wrap;margin:10px 0}
.tile{width:104px;background:var(--surface);border:1px solid var(--line);border-radius:12px;padding:10px 6px;text-align:center;text-decoration:none;color:var(--ink);display:flex;flex-direction:column;align-items:center;gap:6px}
.tile img{width:48px;height:48px;object-fit:contain;border-radius:8px;background:var(--surface-2)}
.tileic{width:48px;height:48px;border-radius:50%;background:var(--primary);color:var(--surface);display:flex;align-items:center;justify-content:center;font-weight:800;font-size:20px}
.tile .tl{font-size:12px;font-weight:600;line-height:1.2;height:28px;overflow:hidden}
.tile .tc{font-size:11px;font-weight:700;color:var(--surface);background:var(--primary);border-radius:999px;padding:1px 8px}
body.light .tile .tc{color:#0b3d91;background:#dcebff;border:1px solid var(--primary)}
body.dark .tile .tc{color:var(--surface);background:var(--primary)}


/* ===== Loyalty / shipping slogan ===== */
.loyaltyslogan{display:flex;gap:14px;margin:22px 0;flex-wrap:wrap}
.ls{flex:1;min-width:220px;background:linear-gradient(135deg,#eaf4fb,var(--surface-2));border:1px solid #cfe4f3;border-radius:12px;padding:14px;display:flex;gap:12px;align-items:flex-start}
.lsi{font-size:26px}
.ls b{font-size:15px}
.ls .muted{font-size:13px}

/* ===== Cart drawer ===== */
.cartdrawer{position:fixed;top:0;right:0;height:100%;width:340px;max-width:90vw;background:var(--surface);color:var(--ink);box-shadow:-6px 0 24px rgba(0,0,0,.4);transform:translateX(100%);transition:transform .25s;z-index:500;display:flex;flex-direction:column}
.cartdrawer.open{transform:translateX(0)}
.cdhead{display:flex;justify-content:space-between;align-items:center;padding:14px 16px;border-bottom:1px solid var(--line);font-weight:700}
.cdclose{background:rgba(0,0,0,.28);border:none;font-size:18px;cursor:pointer;line-height:1;color:var(--surface);border-radius:50%;width:30px;height:30px;display:flex;align-items:center;justify-content:center}
.cdclose:hover{background:rgba(0,0,0,.45)}
.cdbody{flex:1;overflow:auto;padding:10px 14px}
.cdfoot{padding:12px 14px;border-top:1px solid var(--line)}
.cdoverlay{position:fixed;inset:0;background:rgba(0,0,0,.3);opacity:0;pointer-events:none;transition:opacity .25s;z-index:490}
.cdoverlay.open{opacity:1;pointer-events:auto}
.cdrow{display:flex;gap:10px;align-items:center;padding:8px 0;border-bottom:1px solid var(--line)}
.cdrow img{width:46px;height:46px;object-fit:cover;border-radius:8px;background:var(--chip)}
.cdrow .cdi{flex:1;min-width:0}
.cdstepper{display:flex;align-items:center;gap:8px;margin-top:4px}
.cdstepper button{width:24px;height:24px;border-radius:6px;border:1px solid var(--line);background:var(--chip);color:var(--ink);font-weight:700;font-size:14px;cursor:pointer;line-height:1;display:flex;align-items:center;justify-content:center}
.cdstepper .q{font-size:13px;font-weight:700;min-width:16px;text-align:center}
.cdn{font-size:13px;font-weight:600}
.cdp{font-size:12px;color:var(--mut)}
.cdtotal{padding:10px 0;font-weight:700}
@media (max-width:760px){ .catbar{top:0} .catfly{flex-direction:column !important;gap:6px} }

/* ===== Mobile (max-width:760px): dark theme + gold (Batcomputer Night Eye) accent ===== */
/* invsys shop.css v4.4.1 — Design Token centralise (Edward 2026-08-23): Light=default, Dark via prefers-color-scheme. All colors/sizes use var(--token). */
:root{  --card:var(--surface); --acc:var(--primary); --acc2:var(--primary-2); --warn:#c2410c; --danger:#c2410c;
  --card:var(--surface); --acc:var(--primary); --acc2:var(--primary-2);

  /* color — LIGHT (default) */
  --bg:#f4f6f9; --surface:#ffffff; --surface-2:#eef3f8;
  --ink:#1c2530; --title:#1c2530; --subtitle:#5d6b7a; --mut:#5d6b7a;
  --line:#dde3ea; --chip:#eef3f8;
  --primary:#1d6fd6; --primary-ink:#ffffff; --primary-2:#2f86e8;
  --member:#d4af37;
  --success:#16a34a; --warning:#ea580c; --danger:#dc2626; --info:#2563eb;
  --fs-display:28px; --fs-h1:24px; --fs-h2:20px; --fs-h3:17px;
  --fs-body:15px; --fs-sub:13px; --fs-sm:12px; --fs-xs:11px;
  --sp-1:4px; --sp-2:8px; --sp-3:12px; --sp-4:16px; --sp-5:20px; --sp-6:24px; --sp-8:32px;
  --r-sm:6px; --r-md:9px; --r-lg:14px; --r-pill:999px;
  --sh-sm:0 2px 8px rgba(0,0,0,.08); --sh-md:0 4px 16px rgba(0,0,0,.12);
  --sh-lg:0 8px 30px rgba(0,0,0,.18); --sh-nav:0 -4px 16px rgba(0,0,0,.12);
  --z-base:1; --z-nav:60; --z-drawer:200; --z-overlay:300; --z-modal:400; --z-toast:500; --z-splash:900;
}
@media (prefers-color-scheme: dark){
  :root{
    --bg:#0e1116; --surface:#171b22; --surface-2:#1f2730;
    --ink:#ffffff; --title:#d4af37; --subtitle:#e8c86a; --mut:#9aa6b2;
    --line:#2a313c; --chip:#1f2730;
    --primary:#d4af37; --primary-ink:#000000; --primary-2:#9c7d22;
    --member:#d4af37;
    --success:#16a34a; --warning:#ea580c; --danger:#dc2626; --info:#2563eb;
  }
}
  .wrap{ padding:10px; }
  /* top bar */
  .sitehead{ background:var(--bg); border-bottom:1px solid var(--line); }
  .sitehead.stuck{ box-shadow:0 2px 12px rgba(0,0,0,.5); }
  .headrow{ padding:8px 10px; gap:10px; }
  .brandlogo img{ height:34px; }
  .hsearch{ display:none; }            /* hidden until toggled */
  .hsearch.open{ display:flex !important; position:fixed; top:56px; left:0; right:0; z-index:9999; background:var(--surface); padding:8px 10px; box-shadow:0 6px 20px rgba(0,0,0,.25); }
  .headlinks{ gap:10px; }
  .headlinks a{ font-size:13px; }
  .cartbtn{ border-color:var(--primary); color:var(--primary); }
  .cartbtn #cartbadge{ color:var(--primary); }
  /* hamburger */
  .hamburg{ display:inline-flex; flex-direction:column; justify-content:center; gap:4px; width:34px; height:34px; border:none; background:none; cursor:pointer; padding:0; }
  .hamburg span{ display:block; height:2px; background:var(--primary); border-radius:2px; }
  .hsearchicon{ display:inline-flex; align-items:center; justify-content:center; width:34px; height:34px; border:none; border-radius:9px; background:var(--surface); color:var(--ink); font-size:16px; cursor:pointer; }
  /* category bar hidden on mobile (use drawer) */
  .catbar{ display:none; }
  /* banner */
  .bcap{ padding:10px 12px; }
  .bt{ font-size:18px; } .bs{ font-size:12px; }
  /* brand tiles -> horizontal strip */
  .tilegrid{ flex-wrap:nowrap; overflow-x:auto; padding-bottom:6px; -webkit-overflow-scrolling:touch; }
  .tilegrid::-webkit-scrollbar{ display:none; }
  .tile{ flex:0 0 auto; width:84px; }
  .tile img,.tileic{ width:42px; height:42px; }
  .tile .tl{ height:auto; }
  /* sections */
  .sec{ font-size:17px; margin:16px 0 8px; }
  /* roll rows: quick-add always visible; pinned bottom of photo (no hover on mobile) */
  .rcard .rquick{ opacity:1; }
  /* loyalty slogan -> stacked */
  .loyaltyslogan{ flex-direction:column; gap:10px; }
  /* promo strip */
  .promostrip{ flex-wrap:wrap; gap:8px; }
  .promo{ flex:1 1 100%; }
  /* product grid (catalog) */
  .prod-grid{ grid-template-columns:1fr 1fr; gap:10px; }
  .pcard img{ height:130px; }
  /* footer + chatbot */
  .foot{ background:var(--bg); border-top:1px solid var(--line); color:var(--mut); }
  .foot a{ color:var(--primary-2); }
  #chatwidget{ right:14px; bottom:132px; }  /* float above the buy bar + bottom nav */
  #chatopen{ width:50px; height:50px; }
  /* ===== slide-in category drawer ===== */
  
  
  .cdrh{ display:flex; justify-content:space-between; align-items:center; padding:14px 16px; border-bottom:1px solid var(--line); color:var(--primary); font-weight:700; }
  .cdrh button{ background:none; border:none; color:var(--ink); font-size:18px; cursor:pointer; }
  .cdrb{ flex:1; overflow:auto; padding:8px 12px; }
  .cdl1{ padding:12px 8px; border-bottom:1px solid var(--line); color:var(--ink); font-weight:600; cursor:pointer; display:flex; justify-content:space-between; align-items:center; }
  .cdl1 .ar{ color:var(--primary); }
  .cdl2{ padding:10px 8px 10px 18px; border-bottom:1px solid var(--line); color:var(--mut); cursor:pointer; display:flex; justify-content:space-between; }
  .cdl2 .ar{ color:var(--primary); }
  .cdl3{ padding:9px 8px 9px 28px; color:var(--mut); }
  .cdl3 a{ color:var(--ink); text-decoration:none; display:block; }
  .cdhidden{ display:none; }
  /* ===== mobile bottom bar ===== */
  .mobbar{ display:flex; position:fixed; bottom:0; left:0; right:0; background:var(--bg); border-top:1px solid var(--line); z-index:450; }
  .mobbar a,.mobbar button{ flex:1; background:none; border:none; color:var(--ink); text-align:center; padding:5px 2px; font-size:11px; text-decoration:none; cursor:pointer; display:flex; flex-direction:column; align-items:center; gap:2px; }
  .mobbar .mi{ font-size:20px; }
  .mobbar .mk{ color:var(--primary-2); }
  body{ padding-bottom:56px; }
  .cartdrawer{ z-index:560; }
/* ===== Search autocomplete dropdown ===== */
.suggest{display:none;position:absolute;top:100%;left:0;right:0;background:var(--surface);border:1px solid var(--line);border-radius:0 0 10px 10px;box-shadow:0 8px 20px rgba(0,0,0,.18);z-index:240;max-height:60vh;overflow:auto}
.suggest .sug{display:flex;align-items:center;gap:10px;padding:9px 12px;color:var(--ink);text-decoration:none;font-size:14px;border-bottom:1px solid var(--line)}
.suggest .sug:last-child{border-bottom:none}
.suggest .sug img{width:38px;height:38px;object-fit:cover;border-radius:6px;background:var(--surface-2);flex:0 0 auto}
.suggest .sug .sp{margin-left:auto;color:var(--primary);font-weight:700}
.suggest .sug.term{font-weight:600}
.suggest .sug.empty{padding:12px;color:var(--mut)}
.suggest .sug:hover{background:var(--chip)}
/* ===== Product card grid (search results / catalog) ===== */
.pcard{position:relative;background:var(--surface);border:1px solid var(--line);border-radius:12px;overflow:hidden;display:flex;flex-direction:column}
.pcard > a{display:block;text-decoration:none;color:inherit}
.pcard img{width:100%;height:170px;object-fit:cover;background:var(--surface-2);display:block}
/* COCO v4.8.36: product card image carousel (hover arrows + swipe) */
.pimgs{position:relative;display:flex;overflow-x:auto;scroll-snap-type:x mandatory;-webkit-overflow-scrolling:touch;scrollbar-width:none;}
.pimgs::-webkit-scrollbar{display:none;}
.pimg{flex:0 0 100%;scroll-snap-align:center;}
.pimg img{width:100%;height:170px;object-fit:cover;background:var(--surface-2);display:block;}
.pimg-nav{position:absolute;top:0;height:100%;width:30%;border:0;background:rgba(0,0,0,0);color:#fff;font-size:2rem;cursor:pointer;opacity:0;transition:opacity .15s;display:flex;align-items:center;justify-content:center;text-shadow:0 1px 4px rgba(0,0,0,.6);z-index:3;}

.pimg-prev{left:0;justify-content:flex-start;padding-left:8px;}
.pimg-next{right:0;justify-content:flex-end;padding-right:8px;}
.pimg-prev:before{content:'\2039';}
.pimg-next:before{content:'\203A';}
.pcard:hover .pimg-nav{opacity:.85;}
.pimg-nav:hover{opacity:1;background:rgba(0,0,0,.18);}
@media (hover:none){ .pimg-nav{opacity:.7;} }

.pcard .pnm{font-size:14px;font-weight:600;line-height:1.25;padding:8px 10px 2px;min-height:38px}
.pcard .ppre{font-size:11px;color:#b45309;font-weight:700;padding:0 10px}
.pcard .ppr{font-size:15px;font-weight:700;color:var(--primary);padding:2px 10px 10px}
.pcard .pcquick{ margin:auto 10px 10px; z-index:5; }
.pcard .pcquick .radd{width:100%;background:var(--primary);color:var(--surface);border:none;border-radius:9px;padding:8px 0;font-weight:700;font-size:13px;cursor:pointer;box-shadow:0 2px 8px rgba(0,0,0,.18)}
/* inline +/- stepper under the Add button */
.pcard .pstep{ display:flex; align-items:center; justify-content:center; gap:10px; margin:0 10px 10px; z-index:5; }
.pcard .pstep .q{ min-width:20px; text-align:center; font-weight:700; font-size:14px; color:var(--ink); }
.pcard .pstep button{ width:30px; height:30px; border-radius:8px; border:1px solid var(--line); background:var(--chip); color:var(--ink); font-weight:700; font-size:17px; cursor:pointer; line-height:1; display:flex; align-items:center; justify-content:center; }
.pcard .pstep button.inc{ background:var(--primary); color:var(--surface); border-color:var(--primary); }
.pcard .pstep button.dec:hover, .pcard .pstep button.inc:hover{ filter:brightness(1.06); }
.searchres{margin-top:6px}

/* ===== LIGHT mobile theme (body.light) — optional, toggled via ?theme=light ===== */
@media (max-width:760px){
  body.light .sitehead{ background:var(--surface); border-bottom:1px solid var(--line); }
  body.light .sitehead.stuck{ box-shadow:0 2px 10px rgba(0,0,0,.08); }
  body.light .hamburg span{ background:var(--primary); }
  body.light .hsearchicon{ border:none; background:var(--surface); color:var(--ink); }
  /* search results page (mobile): 2-up grid, hide home promo sections */
  @media (max-width:760px){
    .wrap.search-page .banner, .wrap.search-page .tilegrid, .wrap.search-page .rollrow,
    .wrap.search-page .loyaltyslogan, .wrap.search-page .promostrip, .wrap.search-page > .sec{ display:none; }
    .wrap.search-page .searchres{ display:block; }
    .wrap.search-page .prod-grid{ display:grid; grid-template-columns:1fr 1fr; gap:10px; }
    .wrap.search-page .pcard{ flex-direction:column; }
    .wrap.search-page .pcard img{ width:100%; height:auto; aspect-ratio:1/1; object-fit:cover; display:block; }
    .wrap.search-page .pcard .pnm{ font-size:12px; min-height:30px; }
    .wrap.search-page .pcard .ppr{ font-size:13px; padding:2px 10px 8px; }
  }
  body.light .cartbtn{ border-color:var(--primary); color:var(--primary); }
  body.light .catdrawer, body.light .cdrh, body.light .cdl1, body.light .cdl2{ background:var(--surface); }
  body.light .cdrh{ color:var(--primary); border-bottom:1px solid var(--line); }
  body.light .cdl1, body.light .cdl2, body.light .cdl3{ color:var(--ink); border-bottom:1px solid var(--line); }
  body.light .cdl1 .ar, body.light .cdl2 .ar{ color:var(--primary); }
  body.light .catdrawer{ box-shadow:4px 0 24px rgba(0,0,0,.12); }
  body.light .foot{ background:var(--surface); border-top:1px solid var(--line); color:var(--mut); }
  body.light .foot a{ color:var(--primary-2); }
  body.light .mobbar{ background:var(--surface); border-top:1px solid var(--line); }
  body.light .mobbar a, body.light .mobbar button{ color:var(--ink); }
  body.light .mobbar .mk{ color:var(--primary-2); }
  body.light .tile{ background:var(--surface); border-color:var(--line); }
  body.light .ls{ background:var(--surface-2); border-color:#dbe6f2; }
  body.light .promo{ background:var(--surface); border:1px solid var(--line); }
  body.light .toast{ background:var(--primary); }
  body.light #chatopen{ background:var(--primary); }
  body.light #chatpanel{ border-color:var(--line); }
}

/* ===== Search filter sidebar ===== */
.search-layout{ display:flex; gap:18px; align-items:flex-start; }
.filters{ width:220px; flex:0 0 220px; background:var(--surface); border:1px solid var(--line); border-radius:12px; padding:14px; position:sticky; top:84px; max-height:calc(100vh - 100px); overflow:auto; }
.filters-head{ font-weight:700; display:flex; justify-content:space-between; align-items:center; margin-bottom:8px; }
.fclose{ display:none; background:none; border:none; font-size:18px; cursor:pointer; color:var(--ink); }
.fsec{ margin:12px 0; border-top:1px solid var(--line); padding-top:10px; }
.ftitle{ font-weight:600; font-size:13px; margin-bottom:6px; color:var(--mut); }
.fopt{ display:flex; align-items:center; gap:7px; font-size:13px; padding:3px 0; cursor:pointer; }
.fprice{ display:flex; gap:6px; align-items:center; font-size:13px; }
.fprice input{ width:70px; border:1px solid var(--line); border-radius:7px; padding:6px 8px; background:var(--bg); color:var(--ink); }
.fapply{ width:100%; margin-top:10px; background:var(--primary); color:var(--surface); border:none; border-radius:9px; padding:9px 0; font-weight:700; cursor:pointer; }
.results{ flex:1 1 auto; min-width:0; }
.results-bar{ display:flex; align-items:center; gap:12px; flex-wrap:wrap; }
.results-bar .sec{ margin:0; }
.fbtn{ display:none; background:var(--chip); border:1px solid var(--line); border-radius:8px; padding:7px 12px; cursor:pointer; color:var(--ink); font-weight:600; }
.fsort{ margin-left:auto; border:1px solid var(--line); border-radius:8px; padding:7px 10px; background:var(--bg); color:var(--ink); }
@media (max-width:760px){
  .search-layout{ display:block; }
  .filters{ position:fixed; top:0; left:0; bottom:0; width:80%; max-width:300px; border-radius:0; z-index:580; transform:translateX(-105%); transition:transform .25s ease; max-height:none; overflow:auto; }
  .filters.open{ transform:translateX(0); box-shadow:0 0 40px rgba(0,0,0,.4); }
  .fclose{ display:block; }
  .fbtn{ display:inline-block; }
}

/* ===== Theme toggle button ===== */
.themebtn{ background:var(--chip); border:1px solid var(--line); border-radius:9px; width:38px; height:38px; font-size:18px; cursor:pointer; color:var(--ink); display:inline-flex; align-items:center; justify-content:center; }
/* explicit dark theme (default) so the JS class toggle is authoritative */
body.dark{  --card:var(--surface); --acc:var(--primary); --acc2:var(--primary-2);
 --bg:#0e1116; --surface:#171b22; --surface-2:#1f2730; --ink:#eef2f6; --title:#d4af37; --subtitle:#e8c86a; --mut:#9aa6b2; --line:#2a313c; --chip:#1f2730; --primary:#d4af37; --primary-2:#9c7d22; --member:#d4af37; background:var(--bg); }
/* explicit light tokens so OS-dark users clicking toggle to light get light (not stuck gold) */
body.light{  --card:var(--surface); --acc:var(--primary); --acc2:var(--primary-2);
 --bg:#f4f6f9; --surface:#ffffff; --surface-2:#eef3f8; --ink:#1c2530; --title:#1c2530; --subtitle:#5d6b7a; --mut:#5d6b7a; --line:#dde3ea; --chip:#eef3f8; --primary:#1d6fd6; --primary-2:#2f86e8; --member:#d4af37; }

/* logo: keep original colored logo in dark theme (no filter) — brand colors preserved */
/* (a gold-only variant can be dropped in later as logo-gold.png if desired) */
/* day/light mode always uses the ORIGINAL logo.png (black text on light bg reads clearly) */
body.light .brandlogo img{ content:url(logo.png); }

/* product page gallery thumbnails */
.pgalthumbs{ display:flex; gap:8px; flex-wrap:wrap; margin-top:10px; }
.pgalthumb{ width:56px; height:56px; object-fit:cover; border-radius:8px; border:2px solid var(--line); cursor:pointer; background:var(--chip); }
.pgalthumb.sel{ border-color:var(--primary); }

/* ===== Product page: McFarlane-style swipeable carousel ===== */
.pgallery{ position:relative; }
.pcar{ display:flex; overflow-x:auto; scroll-snap-type:x mandatory; -webkit-overflow-scrolling:touch; gap:0; border-radius:12px; background:var(--chip); }
.pcar::-webkit-scrollbar{ display:none; }
.pcar-slide{ flex:0 0 100%; scroll-snap-align:center; display:flex; align-items:center; justify-content:center; }
.pcar-slide img{ width:100%; height:auto; max-height:420px; object-fit:contain; display:block; }
.pcarnav{ position:absolute; top:50%; transform:translateY(-50%); background:rgba(0,0,0,.45); color:var(--surface); border:none; width:34px; height:34px; border-radius:50%; font-size:20px; line-height:1; cursor:pointer; z-index:3; }
.pc-prev{ left:8px; } .pc-next{ right:8px; }
.pcardots{ display:flex; gap:6px; justify-content:center; margin-top:8px; }
.pcar-count{ text-align:center; font-size:12px; color:#9aa0a6; margin-top:4px; }
.pcdot{ width:7px; height:7px; border-radius:50%; background:var(--line); cursor:pointer; }
.pcdot.on{ background:var(--primary); }
#pzoom{ position:fixed; inset:0; background:rgba(0,0,0,.9); display:none; align-items:center; justify-content:center; z-index:9999; }
#pzoom.show{ display:flex; }
#pzoom img{ max-width:94%; max-height:94%; }
/* ===== Description: feature list + read more ===== */
.pdesc{ margin:14px 0; }
.pdesc-in p{ margin:0 0 8px; line-height:1.5; }
.pdesc ul.pfeat{ margin:8px 0; padding-left:18px; }
.pdesc ul.pfeat li{ margin:0 0 5px; line-height:1.45; }
.pdesc ul:not(.pfeat){ margin:8px 0; padding-left:18px; list-style:disc; }
.pdesc ul:not(.pfeat) li{ margin:0 0 5px; line-height:1.45; }
.pdesc .feat-h{ font-weight:700; color:var(--primary); margin:12px 0 4px; font-size:14px; }
.pdesc[data-long="1"] .pdesc-in{ max-height:140px; overflow:hidden; -webkit-mask-image:linear-gradient(180deg,#000 70%,transparent); mask-image:linear-gradient(180deg,#000 70%,transparent); }
.pdesc[data-long="1"].open .pdesc-in{ max-height:none; -webkit-mask-image:none; mask-image:none; }
.readmore{ margin-top:6px; background:none; border:none; color:var(--primary); font-weight:700; cursor:pointer; padding:4px 0; font-size:14px; }

/* ===== Filtered results grid (used by product.php related + index) ===== */
.pgrid{ display:grid; grid-template-columns:repeat(auto-fill,minmax(140px,1fr)); gap:12px; margin:10px 0 18px; }
.pcard{ background:var(--surface); border:1px solid var(--line); border-radius:12px; overflow:hidden; display:flex; flex-direction:column; }
.pcard a{ display:block; text-decoration:none; color:inherit; }
.pcard img{ width:100%; aspect-ratio:1/1; object-fit:cover; background:var(--surface-2); }
body.dark .pcard img{ background:#11171f; }
.pbody{ padding:8px 9px; }
.pnm{ font-size:13px; line-height:1.3; min-height:34px; }
.ppr{ font-weight:700; color:var(--primary); margin-top:4px; font-size:14px; }
.pquick{ padding:0 9px 9px; }
.padd{ width:100%; padding:7px 0; border:none; border-radius:8px; background:var(--primary); color:var(--surface); font-weight:700; font-size:13px; cursor:pointer; }
.padd:active{ transform:scale(.98); }

/* eye-catching stock badges (corner ribbon on card image) */
.stbadge{ position:absolute; top:8px; left:8px; z-index:5; font-size:11px; font-weight:800;
  padding:5px 9px; border-radius:8px; color:var(--surface); line-height:1; box-shadow:0 2px 8px rgba(0,0,0,.35);
  backdrop-filter:saturate(1.2); white-space:nowrap; }
.stbadge.in{ background:var(--success); }
.stbadge.out{ background:var(--danger); animation:pulseRed 1.4s ease-in-out infinite; }
.stbadge.low{ background:var(--warning); }
.stbadge.pre{ background:var(--info); }
@keyframes pulseRed{ 0%,100%{ box-shadow:0 2px 8px rgba(0,0,0,.35);} 50%{ box-shadow:0 2px 14px rgba(220,38,38,.85);} }
/* rcard already positions image; ensure badge sits over it */
.rcard{ position:relative; }

/* login form fields (clean, Popcultcha-style single-line) */
.fld{ display:block; margin:10px 0; font-weight:600; font-size:13px; color:var(--ink); }
.fld input{ display:block; width:100%; box-sizing:border-box; margin-top:5px; padding:11px 12px; border:1px solid var(--line); border-radius:10px; background:var(--bg); color:var(--ink); font-size:15px; outline:none; }
.fld input:focus{ border-color:var(--primary); }
.rcount{ color:var(--muted); font-weight:600; font-size:14px; }

/* placeholder when a product has no image yet (enrichment pending) */
.nophoto{ width:100%; aspect-ratio:1/1; display:flex; align-items:center; justify-content:center;
  background:repeating-linear-gradient(45deg,#f1f5f9,#f1f5f9 10px,#e8eef5 10px,#e8eef5 20px);
  color:#94a3b8; font-size:13px; font-weight:600; }

/* ===== desktop: catdrawer is MOBILE slide-in only — keep hidden on desktop =====
   Its off-screen transform lives inside the max-width:760px block, so without this
   it renders as a static full-height left column that overlays/blanks the main content. */
@media (min-width:761px){ .catdrawer{ display:none !important; } .mobbar{ display:none; } }

/* ===== Sticky mobile buy bar (above mobbar, avoids chat button) ===== */
.buybar{ display:none; }
@media (max-width:760px){
  .buybar{
    display:flex; align-items:center; gap:10px;
    position:fixed; left:0; right:0; bottom:56px; z-index:60;
    background:var(--surface); border-top:1px solid var(--line);
    padding:8px 12px; box-shadow:0 -4px 16px rgba(0,0,0,.35);
  }
  .buybar .bb-price{ font-size:1.25rem; font-weight:800; color:var(--primary); flex:1; }
  .buybar .bb-btn{
    background:var(--member); color:var(--primary-ink); border:none; border-radius:10px;
    padding:12px 22px; font-size:1rem; font-weight:800; cursor:pointer;
  }
  .buybar .bb-btn:active{ transform:scale(.97); }
  /* keep content above the buybar so last line isn't hidden */
  body.has-buybar{ padding-bottom:120px; }
}

/* COCO FIX 2026-08-24i: mobile search expand (must be last to win over display:none) */
@media (max-width:760px){
  .hsearch.open{ display:flex !important; position:fixed; top:56px; left:0; right:0; z-index:9999; background:var(--surface); padding:8px 10px; box-shadow:0 6px 20px rgba(0,0,0,.25); }
  .hsearch.open input{ flex:1; border:1px solid var(--line); border-radius:10px; padding:10px; background:var(--surface); color:var(--ink); }
  .hsearch.open button{ background:var(--primary); color:var(--surface); border:none; border-radius:10px; padding:0 16px; margin-left:6px; }
}

/* COCO FIX 2026-08-24i: .hsearch.open must show regardless of media/color (last rule wins) */
.hsearch.open{ display:flex !important; position:fixed; top:56px; left:0; right:0; z-index:9999; background:var(--surface); padding:8px 10px; box-shadow:0 6px 20px rgba(0,0,0,.25); }
.hsearch.open input{ flex:1; border:1px solid var(--line); border-radius:10px; padding:10px; background:var(--surface); color:var(--ink); }
.hsearch.open button{ background:var(--primary); color:var(--surface); border:none; border-radius:10px; padding:0 16px; margin-left:6px; }

/* COCO 24k: desktop (>=761) explicit rules */
@media (min-width:761px){
  .catdrawer{ display:none !important; }
  .mobbar{ display:none; }
  .hsearch{ display:flex !important; flex:1; max-width:520px; position:relative; }
  .hsearchicon{ display:none !important; }
}

/* ===== Member price display (A): original price strikethrough + member special price ===== */
.pr .was, .bb-price .was, .ppr .was{ text-decoration:line-through; color:var(--mut); font-weight:400; margin-right:6px; font-size:0.85em; }
.pr .mem-price, .bb-price .mem-price, .ppr .mem-price{ color:var(--primary); font-weight:800; }
.pr .mem-badge, .bb-price .mem-badge{ display:inline-block; margin-left:6px; padding:2px 8px; border-radius:999px; background:var(--primary); color:var(--surface); font-size:12px; font-weight:700; vertical-align:middle; }

/* ===== Gallery frame now reuses .pcard (sync with catalog) — give it rollrow width ===== */
.rollinner .pcard{ flex:0 0 168px; width:168px; }
.rollscroll .pcard{ flex:0 0 168px; }

/* v4.8.38 logout link (account page) */
.logout-link{display:inline-block;margin:.2rem 0 .6rem;padding:.45rem .9rem;border:1px solid var(--line,#ddd);border-radius:10px;color:var(--danger,#c0392b);font-weight:600;text-decoration:none;background:var(--surface,#fff);}
.logout-link:hover{background:var(--danger,#c0392b);color:#fff;border-color:var(--danger,#c0392b);}
/* v4.8.39 login page theme toggle button (no inline) */
.login-themebtn{position:fixed;top:12px;right:12px;z-index:50;width:40px;height:40px;border-radius:50%;border:1px solid var(--line,#ddd);background:var(--surface,#fff);font-size:18px;cursor:pointer;}
/* v4.8.43 chat close btn (no inline) */
.chat-close{float:right;background:none;border:none;color:var(--primary-ink,#fff);cursor:pointer;font-size:18px;}

/* v4.8.49 C类 預訂尾款 UI (10日期限顯示 + WhatsApp copy) */
.wa-box{margin:10px 0;padding:12px;border:1px dashed #c9a227;border-radius:10px;background:rgba(201,162,39,.06);}
.wa-box b{display:block;margin-bottom:6px;color:var(--primary-ink,#222);}
.wa-copy{width:100%;height:60px;margin-top:4px;padding:8px;border:1px solid #ccc;border-radius:6px;font-size:13px;resize:vertical;}
.amt.warn{color:#c0392b;font-weight:600;}