/* Club Confidant 閨物代購 — Shopify theme
   v4 "watercolor atelier": the world expands from the brand artwork —
   two friends on a sun-washed street, pen line + watercolor wash.
   Warm cream paper, warm brown ink, camel/trench tan, deep navy,
   rose-copper interactive ink. Elegant, quiet, boutique. */

:root{
  --cc-accent:#EFCDBC;           /* blush — decorative only: borders, washes; never text */
  --cc-accent-dark:#DFB29E;
  --cc-ink-accent:#A05C41;       /* rose copper — AA text/interactive: 5.1:1 white / 4.8:1 cream */
  --cc-ink-accent-dark:#84492F;
  --cc-navy:#3A4560;             /* the navy trousers — primary dark ink, 9.5:1 on white */
  --cc-navy-dark:#2C374E;
  --cc-camel:#C8A87E;            /* the trench coat — decorative wash */
  --cc-tint:#F9EEE7;             /* blush wash */
  --cc-bg:#FCF7F3;               /* cream paper, sampled from the artwork's ground */
  --cc-line:#EAD9CC;             /* warm hairline */
  --cc-muted:#77675C;            /* warm grey — 5.2:1 white */
  --cc-text:#362A22;             /* warm brown-black ink, from the lockup glyphs */
  --cc-white:#fff;
  --cc-sale:#B14434;
  /* legacy accent tokens (motion.css confetti etc.) re-toned into this world */
  --cc-sky:#93A3C4;              /* washed navy */
  --cc-amber:#D9B475;            /* camel gold */
  --cc-teal:#C4907A;             /* terracotta wash */
  --cc-serif:'Noto Serif TC','Songti TC','PMingLiU',serif;
  --cc-max:1180px;
  --cc-bar:64px;
  --cc-radius-sm:6px;
  --cc-radius-md:10px;
  --cc-radius-lg:16px;
  --cc-radius-pill:999px;
  /* hand-drawn ink frames (operator, 08-14 evening): not pills, not plain squares —
     asymmetric corner pairs read as a pen-drawn rectangle, like the artwork's linework */
  --cc-sketch-sm:255px 8px 225px 10px / 10px 225px 8px 255px;
  --cc-sketch-md:16px 8px 15px 9px / 9px 15px 8px 16px;
  --cc-sketch-lg:22px 10px 20px 12px / 12px 20px 10px 22px;
  --cc-sketch-ink:1.5px solid var(--cc-accent-dark);
  --cc-shadow-sm:0 1px 3px rgba(54,42,34,.07);
  --cc-shadow-md:0 4px 16px rgba(54,42,34,.09),0 1px 3px rgba(54,42,34,.05);
  --cc-shadow-lg:0 18px 44px rgba(54,42,34,.13),0 2px 8px rgba(54,42,34,.06);
}

*{box-sizing:border-box}
html,body{margin:0;padding:0}
body{
  background:var(--cc-bg);color:var(--cc-text);
  /* faint paper grain — the artwork's watercolor paper */
  background-image:
    radial-gradient(rgba(54,42,34,.016) 1px,transparent 1px),
    radial-gradient(rgba(54,42,34,.011) 1px,transparent 1px);
  background-size:22px 22px,34px 34px;
  background-position:0 0,11px 17px;
  font-family:'Noto Sans TC','NotoSansCJKtc','PingFang TC','Microsoft JhengHei',sans-serif;
  font-size:15px;line-height:1.6;-webkit-text-size-adjust:100%;
  padding-bottom:var(--cc-bar);
}
img{max-width:100%;height:auto;display:block}
a{color:inherit;text-decoration:none}
.wrap{max-width:var(--cc-max);margin:0 auto;padding:0 12px}
.visually-hidden{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}

/* ---------- focus ---------- */
:focus-visible{outline:2px solid var(--cc-ink-accent);outline-offset:2px}

/* ---------- header — quiet paper, the script mark carries it ---------- */
.top-header{
  background:var(--cc-bg);
  border-bottom:1px solid var(--cc-line);
  padding:18px 12px 16px;position:relative;
  display:flex;align-items:center;justify-content:center;
}
/* clouds retired with the old sky — keep the hooks inert */
.top-header::before,.top-header::after{content:none}
.top-header .logo img{max-height:52px;width:auto}
@media(max-width:767px){.top-header .logo img{max-height:38px}}

.cart-link{
  position:absolute;right:12px;top:50%;transform:translateY(-50%);
  display:flex;align-items:center;justify-content:center;
  min-width:48px;min-height:48px;color:var(--cc-text);
}
.cart-link svg{width:26px;height:26px}
.cart-link .count{
  position:absolute;top:4px;right:2px;background:var(--cc-ink-accent);color:#fff;
  font-size:12px;font-weight:700;line-height:1;min-width:18px;height:18px;
  border-radius:var(--cc-radius-pill);display:flex;align-items:center;justify-content:center;padding:0 5px;
  box-shadow:var(--cc-shadow-sm);
}
.cart-link .count[hidden]{display:none}

/* ---------- banner ---------- */
.section-banner{background:var(--cc-white);line-height:0}
.section-banner img{width:100%}

/* hero styles live in hero.css — base.css deliberately carries none */

/* ---------- youtube strip ---------- */
.yt-strip{background:var(--cc-white);border-top:1px solid var(--cc-line);text-align:center;padding:10px 12px}
.yt-strip a{display:inline-flex;align-items:center;gap:8px;font-weight:700;min-height:44px}
.yt-strip svg{width:26px;height:18px;flex:0 0 auto}

/* ---------- tabs — a quiet serif register, underline carries the state ---------- */
.section-tabs{
  display:flex;width:100%;margin-top:6px;gap:0;position:relative;
  border-bottom:1px solid var(--cc-line);
}
.section-tabs .tabs{
  flex:1 1 0;background:none;color:var(--cc-muted);cursor:pointer;
  text-align:center;padding:15px 4px 13px;border:0;
  font-family:var(--cc-serif);font-weight:600;letter-spacing:.14em;
  font-size:16px;min-height:48px;transition:color .15s;
  position:relative;border-radius:0;
}
.section-tabs .tabs::after{content:none}
.section-tabs .tabs:hover{color:var(--cc-text)}
@media(max-width:575px){
  .section-tabs .tabs{font-size:14px;letter-spacing:.04em;padding:14px 2px 12px;white-space:nowrap}
}
.section-tabs .tabs.active{background:none;color:var(--cc-text)!important}
.tab-panel{display:none;background:var(--cc-white);padding:20px 4px 30px}
.tab-panel.active{display:block}

/* ---------- 開箱 LIVE panel ---------- */
.video-panel{max-width:640px;margin:0 auto;text-align:center;padding:8px 4px 4px}
.video-embed{
  aspect-ratio:16/9;margin:0 0 18px;background:var(--cc-navy);
  border:var(--cc-sketch-ink);border-radius:var(--cc-sketch-md);
  overflow:hidden;box-shadow:var(--cc-shadow-md);
}
.video-embed iframe{width:100%;height:100%;border:0;display:block}
.yt-cta{
  display:inline-flex;align-items:center;gap:10px;
  background:var(--cc-navy);color:#fff;font-weight:700;letter-spacing:.08em;
  padding:0 26px;min-height:52px;border-radius:var(--cc-sketch-sm);
  box-shadow:0 8px 20px rgba(58,69,96,.28),0 1px 3px rgba(58,69,96,.18);
  transition:background .15s,box-shadow .15s,transform .15s;
}
.yt-cta svg{width:28px;height:20px;flex:0 0 auto}
.yt-cta:hover{background:var(--cc-navy-dark);transform:translateY(-1px);box-shadow:0 10px 24px rgba(58,69,96,.34)}
.yt-cta:active{transform:translateY(1px);box-shadow:0 3px 10px rgba(58,69,96,.24)}
.partner-links{margin-top:22px;padding-top:18px;border-top:1px solid var(--cc-line)}
.partner-note{font-size:14px;color:var(--cc-muted);margin:0 0 12px}
.partner-link{
  display:inline-flex;align-items:center;margin:0 6px 10px;
  border:var(--cc-sketch-ink);background:var(--cc-white);border-radius:var(--cc-sketch-sm);
  padding:10px 18px;font-size:14px;font-weight:600;letter-spacing:.06em;min-height:44px;
  transition:background .15s,border-color .15s,color .15s,box-shadow .15s;
}
.partner-link:hover{
  background:var(--cc-tint);border-color:var(--cc-ink-accent);color:var(--cc-ink-accent-dark);
  box-shadow:var(--cc-shadow-sm);
}

/* ---------- notice ---------- */
.notice{background:var(--cc-tint);border:1.5px solid var(--cc-accent);border-radius:var(--cc-sketch-lg);padding:14px 16px;margin:0 0 16px;font-size:14px}
.notice strong{color:var(--cc-ink-accent)}
.cutoff{font-weight:700}
.cutoff b{color:var(--cc-sale)}

/* ---------- category nav — fine-line pills, like jewellery on the counter ---------- */
.cat-nav{
  display:flex;gap:8px;overflow-x:auto;padding:6px 0 12px;margin-bottom:6px;
  position:sticky;top:0;background:var(--cc-white);z-index:20;
  -webkit-overflow-scrolling:touch;scrollbar-width:none;
  box-shadow:0 6px 12px -8px rgba(54,42,34,.12);
  /* right-edge fade signals more pills off-screen (hidden scrollbar otherwise gives no cue) */
  -webkit-mask-image:linear-gradient(to right,#000 0,#000 calc(100% - 34px),transparent 100%);
  mask-image:linear-gradient(to right,#000 0,#000 calc(100% - 34px),transparent 100%);
}
.cat-nav::-webkit-scrollbar{display:none}
.cat-nav a{
  flex:0 0 auto;border:var(--cc-sketch-ink);background:var(--cc-white);
  border-radius:var(--cc-sketch-sm);
  padding:9px 16px;font-size:14px;font-weight:600;letter-spacing:.06em;white-space:nowrap;min-height:44px;
  display:flex;align-items:center;
  transition:background .15s,border-color .15s,color .15s,box-shadow .15s;
}
.cat-nav a:hover{background:var(--cc-tint);border-color:var(--cc-ink-accent);color:var(--cc-ink-accent-dark)}
.cat-nav a.on{
  background:var(--cc-ink-accent);border-color:var(--cc-ink-accent);color:#fff;
  box-shadow:0 6px 14px rgba(160,92,65,.28);
}
.cat-nav a .n{
  color:var(--cc-muted);font-weight:600;margin-left:8px;font-size:12px;
  font-variant-numeric:tabular-nums;
  transition:color .15s;
}
.cat-nav a:hover .n{color:var(--cc-ink-accent)}
.cat-nav a.on .n{color:rgba(255,255,255,.85);background:none}

/* watercolor category vignette — the full illustration, never cropped */
.cat-art{
  margin:34px auto -14px;max-width:460px;overflow:hidden;
  border:var(--cc-sketch-ink);border-radius:var(--cc-sketch-md);
  box-shadow:var(--cc-shadow-sm);background:var(--cc-white);
}
.cat-art img{width:100%;height:auto;display:block}
@media(max-width:575px){.cat-art{max-width:82%}}

.cat-head{
  display:flex;align-items:baseline;gap:12px;margin:30px 0 12px;position:relative;
  padding-bottom:9px;border-bottom:1px solid var(--cc-line);
}
/* a short rose-copper rule opens each section — the pen line from the artwork */
.cat-head::before{
  content:"";flex:0 0 26px;width:26px;height:2px;border-radius:1px;align-self:center;
  background:var(--cc-ink-accent);opacity:.75;
}
.cat-head h2,.cat-head .coll-title{
  font-family:var(--cc-serif);
  font-size:clamp(1.15rem,1.05rem + 0.5vw,1.45rem);margin:0;font-weight:600;letter-spacing:.1em;
}
.cat-head span{font-size:13px;color:var(--cc-muted)}
/* the old mono kicker is retired; keep the class inert for legacy markup */
.cat-no{display:none}

/* ---------- DENSE LIST (the source's mechanism) — rows framed in pen-drawn ink ---------- */
.cc-list{display:flex;flex-direction:column;gap:10px}
.row{
  display:grid;
  grid-template-columns:72px minmax(0,1fr) auto;
  grid-template-areas:"pic info buy";
  gap:12px;align-items:center;
  padding:12px 14px;background:var(--cc-white);
  border:var(--cc-sketch-ink);border-radius:var(--cc-sketch-md);
  box-shadow:var(--cc-shadow-sm);
  position:relative;
}
/* alternate the pen stroke so the column doesn't read as a rubber stamp */
.row:nth-child(even){border-radius:9px 15px 8px 16px / 16px 8px 15px 9px}
.row.is-out{opacity:.58}
/* thumbs matted like small framed sketches (cream mat + hairline) */
.row .pic{
  grid-area:pic;position:relative;width:72px;height:72px;background:var(--cc-white);
  border:1px solid var(--cc-line);border-radius:8px;box-shadow:inset 0 0 0 3px var(--cc-white),inset 0 0 0 4px var(--cc-tint);
}
.row .pic img{width:100%;height:100%;object-fit:contain;border-radius:7px}
/* CSS 售罄 badge — a quiet ink pill; .sold (v2) and .badge-soldout share it */
.badge-soldout,.row .pic .sold{
  position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);
  background:rgba(54,42,34,.85);color:#fff;
  font-size:12px;font-weight:700;letter-spacing:.12em;line-height:1;white-space:nowrap;
  padding:6px 13px;border-radius:8px 3px 7px 4px / 4px 7px 3px 8px;box-shadow:var(--cc-shadow-sm);
}
.badge-soldout::after,.row .pic .sold::after{content:none}

.row .info{grid-area:info;min-width:0}
.row .name{
  font-size:14px;font-weight:700;line-height:1.4;margin:0 0 2px;
  display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;
}
.row .name button{
  background:none;border:0;padding:0;font:inherit;color:inherit;text-align:left;cursor:pointer;
}
.row .name button:hover{color:var(--cc-ink-accent)}
.row .spec{font-size:12px;color:var(--cc-muted);line-height:1.35;
  display:-webkit-box;-webkit-line-clamp:1;-webkit-box-orient:vertical;overflow:hidden}
.row .prices{display:flex;align-items:baseline;gap:7px;flex-wrap:wrap;margin-top:3px}
.row .price{
  color:var(--cc-ink-accent);font-size:16px;font-weight:800;
  font-variant-numeric:tabular-nums;letter-spacing:-.01em;
}
/* 優惠價 — a fine-line blush pill, tail retired with the balloons */
.row .sale-tag{
  position:relative;color:var(--cc-ink-accent);background:var(--cc-tint);
  font-size:12px;font-weight:700;border:1px solid var(--cc-accent);
  padding:1px 9px;border-radius:8px 3px 7px 4px / 4px 7px 3px 8px;
}
.row .sale-tag::after{content:none}
.row .compare{color:var(--cc-muted);text-decoration:line-through;font-size:12px}
/* The supplier list price on a crawled OEM round. Muted like .compare, but NOT struck
   through: a strikethrough reads as a former price, and this is a reference in another
   currency that was never charged. */
.row .srcprice{color:var(--cc-muted);font-size:12px;white-space:nowrap}
.row .stockline{font-size:12px;color:var(--cc-muted);margin-top:2px}
.row .stockline.low{color:var(--cc-sale);font-weight:700}

.row .buy{grid-area:buy;display:flex;flex-direction:column;align-items:flex-end;gap:6px}
.countbox{
  display:flex;align-items:center;border:var(--cc-sketch-ink);height:44px;
  border-radius:var(--cc-sketch-sm);overflow:hidden;background:var(--cc-white);
}
.countbox button{
  width:44px;height:44px;min-width:44px;min-height:44px;border:0;background:var(--cc-tint);color:var(--cc-ink-accent);
  font-size:20px;font-weight:700;line-height:1;cursor:pointer;font-family:inherit;
  transition:background .12s,color .12s;
}
.countbox button:hover{background:var(--cc-ink-accent);color:#fff}
.countbox button:disabled{opacity:.4;cursor:not-allowed}
.countbox input{
  width:46px;min-width:3ch;height:44px;border:0;text-align:center;font-weight:700;
  /* 16px, not 15: iOS Safari zooms the whole page when a focused input is under 16px, which
     throws the customer out of the layout mid-purchase. Measured at 390px on iPhone 13. */
  font-size:16px;
  font-family:inherit;
  font-variant-numeric:tabular-nums;-moz-appearance:textfield;
}
.countbox input::-webkit-outer-spin-button,.countbox input::-webkit-inner-spin-button{-webkit-appearance:none;margin:0}

/* Sketched button system (operator, 08-14 evening): a pen-drawn outline on paper,
   watercolor wash floods in on hover, press settles it into solid ink.
   Press feedback comes from .m-press (motion.css) + a gentle settle here. */
.btn-add{
  cursor:pointer;background:var(--cc-white);color:var(--cc-ink-accent-dark);font-weight:700;
  font-size:14px;font-family:inherit;padding:0 20px;min-height:44px;min-width:96px;
  letter-spacing:.1em;border:1.5px solid var(--cc-ink-accent);border-radius:var(--cc-sketch-sm);
  box-shadow:0 4px 12px rgba(160,92,65,.14),0 1px 3px rgba(160,92,65,.12);
  transition:background .15s,color .15s,border-color .15s,box-shadow .15s,transform .15s;
}
.btn-add:hover{
  background:linear-gradient(135deg,var(--cc-tint) 0%,var(--cc-accent) 100%);
  color:var(--cc-ink-accent-dark);transform:translateY(-1px);
  box-shadow:0 8px 18px rgba(160,92,65,.24),0 2px 5px rgba(160,92,65,.16);
}
.btn-add.m-press:active,.btn-add:active{
  background:var(--cc-ink-accent);border-color:var(--cc-ink-accent);color:#fff;
  transform:translateY(1px);
  box-shadow:0 2px 8px rgba(160,92,65,.22);
}
.btn-add[disabled]{
  background:var(--cc-white);border-color:var(--cc-line);color:var(--cc-muted);
  cursor:not-allowed;box-shadow:none;letter-spacing:.04em;
}
.row .subtotal{font-size:12px;color:var(--cc-text);font-weight:700;min-height:1.2em}
.row .subtotal[hidden]{visibility:hidden}
.cap-note{font-size:12px;color:var(--cc-sale);margin-top:2px}

@media(max-width:575px){
  .row{grid-template-columns:64px minmax(0,1fr);
       grid-template-areas:"pic info" "buy buy";row-gap:8px}
  .row .pic{width:64px;height:64px}
  .row .pic img{width:100%;height:100%}
  .row .buy{flex-direction:row;align-items:center;justify-content:space-between;width:100%}
  .row .btn-add{flex:1;margin-left:10px}
}

/* ---------- modal (detail without leaving the page) ---------- */
.cc-modal[hidden]{display:none}
.cc-modal{position:fixed;inset:0;z-index:80;display:flex;align-items:flex-end;justify-content:center}
.cc-modal .veil{position:absolute;inset:0;background:rgba(44,55,78,.42)}
.cc-modal .sheet{
  position:relative;background:var(--cc-white);width:100%;max-width:760px;
  max-height:88vh;overflow-y:auto;padding:18px;
  border-radius:var(--cc-radius-lg) var(--cc-radius-lg) 0 0;box-shadow:var(--cc-shadow-lg);
}
@media(min-width:768px){
  .cc-modal{align-items:center}
  .cc-modal .sheet{max-height:82vh;border-radius:var(--cc-sketch-lg);border:var(--cc-sketch-ink)}
}
.cc-modal .close{
  position:sticky;top:0;float:right;margin:-6px -6px 0 0;
  width:44px;height:44px;border:0;background:var(--cc-white);
  font-size:26px;line-height:1;cursor:pointer;color:var(--cc-text);z-index:2;
}
.cc-modal .m-img{
  width:min(260px,60%);margin:0 auto 12px;border-radius:var(--cc-radius-md);
  border:1px solid var(--cc-line);background:var(--cc-white);object-fit:contain;
}
.cc-modal .m-img[hidden]{display:none}
.cc-modal h2{font-family:var(--cc-serif);font-size:18px;font-weight:600;letter-spacing:.04em;margin:0 0 8px;padding-right:44px}
.cc-modal .m-prices{display:flex;align-items:baseline;gap:8px;margin-bottom:12px}
.cc-modal .m-price{color:var(--cc-ink-accent);font-size:22px;font-weight:700}
.cc-modal .m-compare{color:var(--cc-muted);text-decoration:line-through;font-size:14px}
.cc-modal .m-body{border-top:1px solid var(--cc-line);padding-top:12px}
.cc-modal .m-actions{
  position:sticky;bottom:0;background:var(--cc-white);border-top:1px solid var(--cc-line);
  padding:10px 0 0;margin-top:14px;display:flex;gap:10px;align-items:center;
}

/* ---------- spec block (extracted text, replaces raster images) ---------- */
.spec-block{font-size:14px;line-height:1.75}
.spec-block h3{
  font-size:13px;font-weight:700;color:var(--cc-ink-accent);
  margin:16px 0 6px;padding-bottom:4px;border-bottom:1px solid var(--cc-line);
}
.spec-block h3:first-child{margin-top:0}
.spec-block p{margin:0 0 10px}
.spec-block ul{margin:0 0 10px;padding-left:1.2em}
.spec-block dl{display:grid;grid-template-columns:auto 1fr;gap:4px 14px;margin:0 0 10px}
.spec-block dt{font-weight:700;color:var(--cc-muted);white-space:nowrap}
.spec-block dd{margin:0}
.spec-block table{width:100%;border-collapse:collapse;font-size:13px;margin:0 0 10px}
.spec-block th,.spec-block td{border-bottom:1px solid var(--cc-line);padding:5px 6px;text-align:left}
.spec-block th{color:var(--cc-muted);font-weight:700}
.spec-block td:last-child{text-align:right;white-space:nowrap}
.spec-block .fineprint{font-size:12px;color:var(--cc-muted)}
/* description bodies may still embed the legacy raster images with baked-in text —
   the all-text rule hides them everywhere the description renders (PDP + modal) */
.spec-block img{display:none}

/* ---------- watercolor HK pickup map ---------- */
.hk-map{
  max-width:720px;margin:0 auto 20px;padding:6px;
  background:var(--cc-bg);border:var(--cc-sketch-ink);border-radius:var(--cc-sketch-lg);
  box-shadow:var(--cc-shadow-md);
}
.hk-map img{width:100%;height:auto;display:block;border-radius:14px 7px 12px 8px / 8px 12px 7px 14px}

/* ---- map pins: real HTML text over a text-free map (2026-08-17) ----
   The labels used to be baked into hk-map.jpg. They are now positioned here in percentages
   of the image box, which keeps 繁體中文 crisp at any DPR, selectable and translatable, and
   satisfies MOTION-CONTRACT rule 8. Coordinates live in snippets/hk-map.liquid so a pin can
   be nudged without touching CSS. Never bake the labels back into the image. */
.hk-map-stage{position:relative}
.hk-pins{position:absolute;inset:0;pointer-events:none}
.hk-pin{position:absolute;left:var(--x);top:var(--y);width:0;height:0}
.hk-pin-mark{
  position:absolute;left:50%;bottom:0;transform:translateX(-50%);
  width:clamp(13px,1.45vw,19px);height:auto;
  fill:var(--cc-ink-accent);
  filter:drop-shadow(0 1px 1.5px rgba(54,42,34,.28));
}
.hk-pin-eye{fill:var(--cc-bg)}
.hk-pin-label{
  position:absolute;bottom:1px;
  font-family:var(--cc-serif);font-weight:600;
  font-size:clamp(10px,1.1vw,15px);letter-spacing:.02em;
  color:var(--cc-text);white-space:nowrap;
  /* cream halo so a label stays legible wherever it crosses the painted land */
  text-shadow:0 0 3px var(--cc-bg),0 0 5px var(--cc-bg),0 0 8px var(--cc-bg);
}
.hk-pin[data-side="right"] .hk-pin-label{left:calc(50% + 11px)}
.hk-pin[data-side="left"]  .hk-pin-label{right:calc(50% + 11px)}

.hk-map-key{
  display:flex;align-items:center;justify-content:center;gap:7px;
  margin:10px 0 2px;
  font-family:var(--cc-serif);font-size:14px;color:var(--cc-muted);
}
.hk-map-key .hk-pin-mark{position:static;transform:none;width:13px;filter:none}

/* licence credit — required by ODbL (coastline) and the DATA.GOV.HK terms (district data).
   Quiet, but present and legible. Do not hide. */
.hk-map-credit{
  margin:2px 0 0;text-align:center;
  font-size:11px;line-height:1.5;color:var(--cc-muted);
}
.hk-map-credit a{color:var(--cc-muted);text-decoration:underline;text-underline-offset:2px}

/* ---------- branches / about ---------- */
.branch-list{display:grid;grid-template-columns:repeat(2,1fr);gap:12px}
@media(max-width:767px){.branch-list{grid-template-columns:1fr}}
.branch{border:var(--cc-sketch-ink);border-radius:var(--cc-sketch-md);padding:15px 17px;background:var(--cc-white);box-shadow:var(--cc-shadow-sm)}
.branch:nth-child(even){border-radius:9px 15px 8px 16px / 16px 8px 15px 9px}
.branch h3{margin:0 0 5px;font-family:var(--cc-serif);font-weight:600;font-size:15px;letter-spacing:.04em;color:var(--cc-ink-accent)}
.branch p{margin:0 0 3px;font-size:14px}
.branch a{color:var(--cc-ink-accent);font-weight:700;display:inline-flex;align-items:center;min-height:44px}
.about{max-width:860px;margin:0 auto;line-height:1.9}
.about p{margin:0 0 14px}
.about .social a{display:inline-flex;align-items:center;min-height:44px;color:var(--cc-ink-accent);font-weight:700;word-break:break-all}

/* ---------- sticky cart bar ---------- */
.cartbar{
  position:fixed;left:0;right:0;bottom:0;z-index:60;
  background:rgba(252,247,243,.95);-webkit-backdrop-filter:saturate(1.2);backdrop-filter:saturate(1.2);
  border-top:1px solid var(--cc-accent-dark);padding:8px 12px;
  display:flex;align-items:center;justify-content:space-between;gap:12px;
  box-shadow:0 -1px 0 rgba(54,42,34,.03),0 -12px 28px rgba(54,42,34,.07);min-height:var(--cc-bar);
}
.cartbar[hidden]{display:none}
.cartbar .total{font-weight:700;font-size:14px;line-height:1.3}
.cartbar .total span{color:var(--cc-ink-accent);font-size:19px}
.cartbar .total .cut{display:block;font-size:12px;color:var(--cc-muted);font-weight:400}
.btn-checkout{
  background:var(--cc-navy);color:#fff;padding:0 24px;font-weight:700;border:0;cursor:pointer;
  font-family:inherit;font-size:15px;min-height:48px;display:inline-flex;align-items:center;gap:8px;
  letter-spacing:.1em;border-radius:var(--cc-sketch-sm);
  box-shadow:0 8px 20px rgba(58,69,96,.28),0 1px 3px rgba(58,69,96,.18);
  transition:background .15s,box-shadow .15s,transform .15s;
}
.btn-checkout::after{content:"→";font-weight:400;transform:translateX(0);transition:transform .15s}
.btn-checkout:hover{background:var(--cc-navy-dark);transform:translateY(-1px);box-shadow:0 10px 24px rgba(58,69,96,.34)}
.btn-checkout:hover::after{transform:translateX(3px)}
.btn-checkout.m-press:active,.btn-checkout:active{
  transform:translateY(1px);
  box-shadow:0 3px 10px rgba(58,69,96,.24);
}

/* ---------- scene illustrations (the artwork's own world) ---------- */
.panel-scene{max-width:640px;margin:0 auto 18px;padding:0 4px}
.panel-scene img{
  width:100%;height:auto;border-radius:var(--cc-radius-lg);
  border:1px solid var(--cc-line);box-shadow:var(--cc-shadow-md);
}
.empty-scene{max-width:240px;margin:26px auto 6px}
.empty-scene img{width:100%;height:auto;border-radius:50%;border:3px solid var(--cc-tint);box-shadow:var(--cc-shadow-sm)}

/* the balcony railing retired with the street world; hook kept inert */
.iron-divider{display:none}

/* ---------- watercolor wash bridging into the footer ---------- */
.street-strip{line-height:0;margin-top:30px;position:relative}
.street-strip img{width:100%;height:auto;display:block}
.street-strip::before,.street-strip::after{content:none}

/* ---------- footer — the wash settles ---------- */
.bottom-footer{background:linear-gradient(180deg,#F6E7DC 0%,#FBF3EC 100%);border-top:0;margin-top:0;padding:22px 12px 18px;text-align:center}
.bottom-footer .pay{display:flex;justify-content:center;gap:10px;margin-bottom:10px}
.bottom-footer .pay img{height:24px;width:auto}
.bottom-footer-text{font-weight:700;font-size:11pt}
.bottom-footer-text a{display:inline-block;padding:8px 4px}
.bottom-footer-text a:hover{color:var(--cc-ink-accent)}
.bottom-footer .copy{color:var(--cc-muted);font-size:12px;margin-top:8px}

/* ---------- product page ---------- */
.page-wrap{background:var(--cc-white);padding:22px 0 36px;margin-top:2px}
.page-wrap h1{font-family:var(--cc-serif);font-weight:600;letter-spacing:.06em;font-size:21px;margin:0 0 16px}
.rte{line-height:1.9}

.pdp{display:grid;grid-template-columns:1fr 1fr;gap:26px;align-items:start}
@media(max-width:767px){.pdp{grid-template-columns:1fr;gap:16px}}
.pdp .media img{border:1px solid var(--cc-line);margin-bottom:10px}
.pdp .info{position:sticky;top:12px}
@media(max-width:767px){.pdp .info{position:static}}
.pdp .price{color:var(--cc-ink-accent);font-size:24px;font-weight:700}
.pdp .compare{color:var(--cc-muted);text-decoration:line-through;margin-left:8px}
.pdp .buyrow{display:flex;gap:10px;align-items:center;margin:14px 0}

.crumb{font-size:13px;color:var(--cc-muted);margin-bottom:10px}
.crumb a{color:var(--cc-ink-accent);font-weight:700}

/* ---------- cart ---------- */
table.cart{width:100%;border-collapse:collapse}
table.cart th,table.cart td{border-bottom:1px solid var(--cc-line);padding:9px 6px;text-align:left;font-size:14px}
table.cart img{width:56px}
.cart-total{text-align:right;font-size:18px;font-weight:700;margin:14px 0}
.cart-total span{color:var(--cc-ink-accent)}
.pickup-field{margin:16px 0;padding:14px;border:1.5px solid var(--cc-accent);border-radius:var(--cc-sketch-lg);background:var(--cc-tint)}
.pickup-field label{display:block;font-weight:700;margin-bottom:6px}
.pickup-field select{width:100%;padding:12px;font-family:inherit;font-size:15px;border:1px solid var(--cc-line);min-height:48px;background:#fff}
.pickup-field .req{color:var(--cc-sale)}
.empty{text-align:center;padding:36px 0;color:var(--cc-muted)}

/* ── 訂貨意向 form ────────────────────────────────────────────────────────────
   The checkout form had no styling at all. Unstyled, `<label>姓名<input></label>`
   flows inline, so at 390px each label sat beside the PREVIOUS input and a customer
   could reasonably type their email into the name box. Found by screenshotting the
   built page at phone width; it is invisible on a desktop viewport. */
.checkout-form{display:flex;flex-direction:column;gap:14px;margin:18px 0 0}
.checkout-form label{
  display:flex;flex-direction:column;gap:6px;
  font-weight:700;color:var(--cc-ink);
}
.checkout-form input,
.checkout-form select{
  /* 16px is not a style choice: iOS Safari zooms the whole page when a focused input
     is smaller, and the page never zooms back out. */
  font:inherit;font-size:16px;font-weight:400;
  min-height:44px;                    /* the touch-target floor */
  padding:10px 12px;
  border:1px solid var(--cc-line);border-radius:8px;
  background:var(--cc-white);color:var(--cc-ink);
  width:100%;box-sizing:border-box;
}
.checkout-form input:focus-visible,
.checkout-form select:focus-visible{border-color:var(--cc-ink-accent)}
.checkout-form .btn-add{margin-top:4px;min-height:48px}
.checkout-form .stockline{margin-top:2px}
.checkout-form .cap-note{color:var(--cc-ink-accent-dark);font-weight:700}

/* ── product photo lightbox ───────────────────────────────────────────────────
   The thumbnail is a <button> now, so the browser's default button chrome has to go —
   but the matted-sketch frame the .pic class draws must stay exactly as it was. */
.row button.pic{
  padding:0;margin:0;font:inherit;color:inherit;cursor:zoom-in;
  appearance:none;-webkit-appearance:none;display:block;
}
.row button.pic:focus-visible{outline:2px solid var(--cc-ink-accent);outline-offset:3px}
/* How many photos are behind this one. Silent when there is only one. */
.row .pic-count{
  position:absolute;right:-5px;bottom:-5px;min-width:17px;height:17px;
  display:flex;align-items:center;justify-content:center;
  background:var(--cc-ink-accent);color:#fff;
  font-size:10px;font-weight:700;line-height:1;padding:0 4px;
  border-radius:7px 3px 6px 3px / 3px 6px 3px 7px;
}
.row .srclink{margin:3px 0 0}
.row .srclink a{
  font-size:12px;color:var(--cc-muted);text-decoration:underline;
  text-underline-offset:2px;text-decoration-thickness:1px;
}
.row .srclink a:hover,.row .srclink a:focus-visible{color:var(--cc-ink-accent)}

.cc-zoom[hidden]{display:none}
.cc-zoom{position:fixed;inset:0;z-index:90;display:flex;align-items:center;justify-content:center}
.cc-zoom .veil{position:absolute;inset:0;background:rgba(44,55,78,.72);cursor:zoom-out}
.cc-zoom .zoom-sheet{
  position:relative;display:flex;flex-direction:column;align-items:center;gap:10px;
  /* fit-content, not a fixed 900px: a portrait photo left the close button stranded far to the
     right of the frame it was meant to close. The sheet now hugs the figure. */
  width:fit-content;max-width:min(92vw,900px);max-height:92vh;padding:14px;
}
.cc-zoom .zoom-figure{
  margin:0;background:var(--cc-white);border-radius:var(--cc-sketch-lg);
  border:var(--cc-sketch-ink);padding:10px;box-shadow:var(--cc-shadow-sm);
  display:flex;align-items:center;justify-content:center;max-height:74vh;
}
.cc-zoom img{
  display:block;max-width:100%;max-height:70vh;width:auto;height:auto;
  object-fit:contain;border-radius:6px;
}
.cc-zoom .zoom-caption{
  margin:0;color:#fff;font-size:13px;line-height:1.5;text-align:center;
  text-shadow:0 1px 3px rgba(0,0,0,.5);
}
.cc-zoom .zoom-counter{color:rgba(255,255,255,.72);font-variant-numeric:tabular-nums}
/* 44px targets: these are the controls a thumb actually hits. */
.cc-zoom .zoom-close,.cc-zoom .zoom-prev,.cc-zoom .zoom-next{
  min-width:44px;min-height:44px;display:flex;align-items:center;justify-content:center;
  background:rgba(255,255,255,.92);color:var(--cc-ink);border:var(--cc-sketch-ink);
  /* --cc-sketch-sm is a large irregular pill; on a 44px square it reads as a blob.
     This is the badge radius — the theme's shape for small objects. */
  border-radius:8px 3px 7px 4px / 4px 7px 3px 8px;font-size:22px;line-height:1;cursor:pointer;
}
.cc-zoom .zoom-close{position:absolute;top:14px;right:14px;z-index:2}
.cc-zoom .zoom-nav{display:flex;gap:14px}
.cc-zoom .zoom-nav[hidden]{display:none}
.cc-zoom button:focus-visible{outline:2px solid #fff;outline-offset:2px}
@media (max-width:600px){
  .cc-zoom .zoom-sheet{width:100vw;padding:10px}
  .cc-zoom .zoom-figure{max-height:66vh;padding:6px}
  .cc-zoom img{max-height:62vh}
}