/* ==========================================================================
   Propel — the brand layer.

   One design language across every demo. It loads LAST, after each page's own
   <style> block, and works in three passes:

     1. It re-points the page-local CSS variables at brand tokens. The pages
        grew up in two lineages with different names for the same thing
        (--berry vs --bottle, --surface vs --paper), so both families are
        mapped. This is what makes a palette change land on all of them at
        once, including inside inline style="" that reads a token.
     2. It restates the geometry and the type — hairlines instead of drop
        shadows, 2–4px radii instead of 18–26px, an editorial display serif,
        uppercase tracked micro-labels.
     3. It re-lays-out the page above the phone: the customer demos open up to
        iPad and desktop widths, and the admin consoles turn their phone tab
        bar into a desktop side rail.

   Dark is a token swap on html[data-theme="dark"], set by propel-brand.js
   before first paint. propel-ux.css hardcodes its colours (it deliberately
   reads no page token), so its components are restated here for dark.

   Nothing here is per-vertical. If a rule needs to know which shop it is on,
   it belongs in that page, not in this file.
   ========================================================================== */

/* ------------------------------------------------------------------ tokens */
:root{
  --pb-ground:#F4F3EF;
  --pb-surface:#FFFFFF;
  --pb-surface-2:#FAF9F5;
  --pb-surface-3:#EDEBE4;
  --pb-ink:#0C0C0D;
  --pb-ink-2:#55554D;
  /* 4.6:1 on paper. The old #8B8B83 was 3.4:1, and this token carries most
     of the small print in the whole system — every .panel-s, .tiny, .sec-s. */
  --pb-ink-3:#6E6E67;
  --pb-line:#E4E2DB;
  --pb-line-2:#CFCDC4;
  --pb-accent:#0E3B2E;
  --pb-accent-deep:#0A2B21;
  --pb-accent-soft:#E7EEEA;
  --pb-rust:#B04A26;        /* 4.7:1 on paper; used for text, not only fills */
  --pb-rust-soft:#F7EBE5;
  --pb-ok:#1F6D4A;
  --pb-warn:#8A5E12;        /* amber that still reads as amber at 11px */
  --pb-bad:#A32E22;
  /* the primary action is near-black, not a brand hue — the reference brands
     all do this, and it keeps colour for meaning rather than for chrome */
  --pb-solid:#111111;
  --pb-solid-ink:#FFFFFF;
  /* The masthead plate is the one surface that does NOT invert. It is the
     brand's black card, and in dark mode --pb-ink is an off-white, so reading
     the plate off it would turn it into a white slab. */
  --pb-plate:#101010;
  --pb-on-accent:#FFFFFF;

  --pb-r:3px;          /* the only radius that matters */
  --pb-r-lg:5px;
  --pb-hair:1px solid var(--pb-line);
  --pb-shadow:0 1px 2px rgba(12,12,13,.05);
  --pb-shadow-lg:0 12px 40px rgba(12,12,13,.14);

  /* One face for every demo: Fraunces for Latin, Noto Serif HK for Chinese.
     --pb-sans keeps its name so nothing that reads it has to change, but it
     is the same serif — one elegant face throughout. */
  --pb-sans:'Fraunces','Noto Serif HK','Songti TC','PMingLiU',Georgia,serif;
  --pb-serif:'Fraunces','Noto Serif HK','Songti TC','PMingLiU',Georgia,serif;

  --pb-page:1180px;    /* the widest the content ever gets */
  --pb-read:640px;     /* a single column of prose or a form */
  --pb-rail:236px;     /* the admin side rail */
  --pb-scale:1;        /* text size, set from personal settings */
}

html[data-theme="dark"]{
  --pb-ground:#0B0C0B;
  --pb-surface:#141614;
  --pb-surface-2:#1A1C19;
  --pb-surface-3:#22251F;
  --pb-ink:#F2F1EC;
  --pb-ink-2:#AFB0A8;
  --pb-ink-3:#8E8F87;      /* 5.0:1 on the dark surface; #7B7C75 was 4.3 */
  --pb-line:#282B26;
  --pb-line-2:#3B3F38;
  --pb-accent:#8FC7A9;
  --pb-accent-deep:#A9D8BF;
  --pb-accent-soft:#182420;
  --pb-rust:#E4794F;
  --pb-rust-soft:#2A1A13;
  --pb-ok:#5FBF8B;
  --pb-warn:#D9A548;
  --pb-bad:#E4685A;
  --pb-solid:#F2F1EC;
  --pb-solid-ink:#0B0C0B;
  --pb-plate:#000000;
  --pb-on-accent:#0B0C0B;
  --pb-shadow:0 1px 2px rgba(0,0,0,.5);
  --pb-shadow-lg:0 14px 44px rgba(0,0,0,.62);
  color-scheme:dark;
}

/* ----------------------------------------------- pass 1: re-point the pages
   Both lineages, on :root so a page's own :root loses on load order but any
   inline style="color:var(--muted)" still resolves. */
:root{
  /* retail / model lineage */
  --ground:var(--pb-ground);
  --surface:var(--pb-surface);
  --ink:var(--pb-ink);
  --muted:var(--pb-ink-2);
  --berry:var(--pb-accent);
  --berry-deep:var(--pb-accent-deep);
  --orchid:var(--pb-rust);
  --gold:var(--pb-rust);
  --amber:var(--pb-warn);
  --green:var(--pb-ok);
  --line:var(--pb-line);
  --shadow:var(--pb-shadow);
  --glass:var(--pb-surface);
  --glass-edge:var(--pb-line);
  --glass-lift:var(--pb-shadow);
  /* haircut lineage */
  --stone:var(--pb-ground);
  --paper:var(--pb-surface);
  --sub:var(--pb-ink-2);
  --bottle:var(--pb-accent);
  --bottle-deep:var(--pb-accent-deep);
  --brick:var(--pb-rust);
  --brick-deep:var(--pb-rust);
  --brass:var(--pb-rust);
  --shadow-lg:var(--pb-shadow-lg);
  /* sport shopfront lineage */
  --paper-2:var(--pb-surface-2);
  --paper-3:var(--pb-surface-3);
  --ink-2:var(--pb-ink-2);
  --ink-3:var(--pb-ink-3);
  --hair:var(--pb-line);
  --white:var(--pb-surface);
  --black:var(--pb-ink);
  --go:var(--pb-ok);
  --warn:var(--pb-warn);
}

/* ------------------------------------------------- pass 2: type + geometry */
html{ -webkit-text-size-adjust:100%; }
html{ background:var(--pb-ground) !important; background-image:none !important; }
body{
  background:var(--pb-ground) !important;
  background-image:none !important;
  color:var(--pb-ink);
  font-family:var(--pb-sans) !important;
  font-size:calc(15px * var(--pb-scale));
  line-height:1.55;
  letter-spacing:-0.006em;
}
.display,h1,h2,h3{
  font-family:var(--pb-serif) !important;
  font-weight:600;
  letter-spacing:-0.018em;
  line-height:1.08;
}
/* The micro-label above a section is the reference brands' signature: tiny,
   uppercase, widely tracked, and never competing with the heading under it. */
.section-label,.sec-s,.panel-s,.drawer-section-label,.caps,.kpi-label,
.bar-label,.chart-label,.tiny,.mo-lbl,.hm-lbl{
  text-transform:uppercase;
  letter-spacing:.14em !important;
  font-size:calc(9.5px * var(--pb-scale)) !important;
  font-weight:600 !important;
  color:var(--pb-ink-3) !important;
}
.sec-t,.panel-t,.panel-title,.drill-t,.i-name,.confirm-title,.shop-name,
.drawer-shop-name,.ms-hero h2{
  font-family:var(--pb-serif) !important;
  font-weight:600 !important;
  letter-spacing:-0.02em !important;
}
.muted,.tiny,.sub{ color:var(--pb-ink-2); }

/* .field is two different things depending on which page you are on: a form
   row on the Haircut pages, and the fixed full-screen blur layer behind the
   retail pages (three colour blobs in <i> children). So it is never styled as
   a box here, and the blobs are switched off by targeting the children — the
   new ground is a flat paper tone, not a wash. */
.field > i{ display:none !important; }

/* every surface is a hairline box, not a floating card */
.card,.panel,.summary-card,.shop-card,.kpi,.kpi-card,.stat-box,.list-card,
.memcard,.rate-card,.due-card,.ord,.todo,.set-row,.drill,.sheet-h,
.service-card,.market,.spec,.qr,.guide,.hold,.statebar,.chip-summary,
.search-input,.form-block > .field input,.form-block > .field textarea{
  background:var(--pb-surface) !important;
  border:var(--pb-hair) !important;
  border-radius:var(--pb-r) !important;
  box-shadow:none !important;
}
.card,.service-card,.list-card,.ord{ overflow:hidden; }
/* .memcard ships as white ink on a purple gradient. The sweep above flattens
   it to a plain surface but says nothing about colour, so the #fff ink stayed
   and the card rendered as a blank white box on the Model 我的 screen. Ink has
   to travel with the surface it sits on. */
.memcard{ color:var(--pb-ink) !important; }
.memcard .mn{ color:var(--pb-ink) !important; }
.memcard .mt,.memcard .ms{ color:var(--pb-ink-2) !important; opacity:1 !important; }

.glass,.glass::before{
  -webkit-backdrop-filter:none !important;
  backdrop-filter:none !important;
}
.glass{ background:var(--pb-surface) !important; border-color:var(--pb-line) !important; }
.glass::before,.glass::after{
  background:none !important;
  border:none !important;
  box-shadow:none !important;
}

/* --------------------------------------------------------------- controls */
.cta-btn,.btn,button.cd,button.act,.cta,.row-btn,.tool-btn,.mini-action,.px-sheet-cta,
.hold-btn,.edit-btn,.market-go,.applink,.drill-x{
  border-radius:var(--pb-r) !important;
  font-family:var(--pb-sans) !important;
  font-weight:600 !important;
  letter-spacing:.01em;
}
/* the one loud button on a screen: a black slab with an uppercase label */
.cta-btn,.cta-btn:not(:disabled),.btn:not(.ghost):not(.sec),button.act.pri,button.cd.pri,
.px-sheet-cta,.ms-cta,.px-fab,.service-book,.buybar .cta-btn{
  background:var(--pb-solid) !important;
  color:var(--pb-solid-ink) !important;
  border:1px solid var(--pb-solid) !important;
  text-transform:uppercase;
  letter-spacing:.09em !important;
  font-size:calc(11.5px * var(--pb-scale)) !important;
  font-weight:700 !important;
  padding:15px 20px !important;
  background-image:none !important;
}
/* …except the ones that live inside a row, which keep a row's height */
.service-book,.row-btn,.mini-action,button.act,button.cd{
  padding:9px 14px !important;
  font-size:calc(10.5px * var(--pb-scale)) !important;
  letter-spacing:.06em !important;
}
/* Tag-qualified on purpose: .cd is a secondary BUTTON in the consoles and a
   countdown CHIP on a Model product tile, and .act is the same story. A
   class-only selector turned the chip transparent and lost its label. */
.cta-btn.ghost,.btn.ghost,button.act:not(.pri),button.cd:not(.pri),.btn-ghost{
  background:transparent !important;
  color:var(--pb-ink) !important;
  border:1px solid var(--pb-line-2) !important;
  background-image:none !important;
}
.cta-btn:disabled,.btn:disabled{ opacity:.34 !important; }
.icon-btn,.burger,.hero-back,.like,.px-sheet-close{
  background:var(--pb-surface) !important;
  border:var(--pb-hair) !important;
  border-radius:var(--pb-r) !important;
  color:var(--pb-ink) !important;
}
/* Two different things wear a chip. An OUTLINED one is a control — a size, a
   category, a date — and it gets the brand's outline. A FILLED one is a status
   badge, and its colour carries the meaning: 今日新鮮 is green, 餘 4 磚 is
   amber, 減價 is rust. So the colours here are wrapped in :where(), which has
   no specificity at all: a page that has already said what its own badge
   looks like keeps saying it, and only chips nobody styled fall back to this.
   Forcing them flat is what turned every status badge into an unreadable
   grey-on-green rectangle. */
.pill,.tag,.badge,.szchip,.dchip,.chip-opt,.tag-pill,.ref-pill,.date-pill,
.block-chip,.demo-chip,.bk-tag,.cat,.opt,.size{
  border-radius:var(--pb-r) !important;
  font-weight:600;
  letter-spacing:.02em;
}
:where(.pill,.szchip,.dchip,.chip-opt,.ref-pill,.date-pill,.cat,.opt,.size){
  border:1px solid var(--pb-line-2);
  background:var(--pb-surface);
  color:var(--pb-ink-2);
}
/* An "on" control is filled with ink and its text is the ground. The pages
   write `background:var(--ink); color:#fff`, which is right in light and
   invisible in dark, where --ink IS the near-white. Both halves are stated
   here, and the descendants too: several of these chips hold their own
   <span>s with their own colours, and colouring only the box leaves the label
   the shade it was on the old background. */
.opt.on,.opt.active,.size.on,.size.active,.szchip.on,.dchip.on,.dchip.active,
.chip-opt.on,.chip-opt.active,.cat.on,.cat.active,.pill.on,
.slot.on,.slot.active,.time-slot.selected,.time-slot.active,
.pay-opt.on,.pay-opt.active,.pk-tab.on,.tabs .st.on,
.tabs button.active,.tabs > .active,.rail button.on,.viewswitch.on,
.date-pill.active,.sortsel option:checked{
  background:var(--pb-ink) !important;
  border-color:var(--pb-ink) !important;
  color:var(--pb-ground) !important;
}
.opt.on *,.opt.active *,.size.on *,.size.active *,.cat.on *,.cat.active *,
.chip-opt.on *,.chip-opt.active *,.slot.on *,.slot.active *,
.pay-opt.on *,.pay-opt.active *,.tabs button.active *,.tabs > .active *,
.time-slot.selected *,.time-slot.active *,.rail button.on *{
  color:var(--pb-ground) !important;
}
input,select,textarea{
  font-family:var(--pb-sans) !important;
  background:var(--pb-surface) !important;
  color:var(--pb-ink) !important;
  border-color:var(--pb-line-2) !important;
  border-radius:var(--pb-r) !important;
}
input::placeholder,textarea::placeholder{ color:var(--pb-ink-3) !important; }
*:focus-visible{ outline:2px solid var(--pb-accent) !important; outline-offset:2px; }

/* the top bar reads as a masthead: hairline under it, nothing else.
   Only .topbar — .hd is a per-view heading inside the consoles, and .bar in
   the Model console is one of the seat bars in a capacity meter. */
.topbar{
  background:var(--pb-surface) !important;
  border-bottom:var(--pb-hair) !important;
  box-shadow:none !important;
}
.hd h2{
  font-family:var(--pb-serif) !important;
  font-weight:600 !important;
  letter-spacing:-0.02em;
}
.topbar-title{
  min-width:0;
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
  font-family:var(--pb-serif) !important;
  font-weight:600 !important;
  font-size:calc(17px * var(--pb-scale)) !important;
  letter-spacing:-0.01em !important;
}
.lang-toggle{
  background:transparent !important;
  border:1px solid var(--pb-line-2) !important;
  border-radius:var(--pb-r) !important;
  padding:2px !important;
}
.lang-toggle button{
  border-radius:2px !important;
  font-weight:700 !important;
  font-size:calc(10.5px * var(--pb-scale)) !important;
  letter-spacing:.06em;
  color:var(--pb-ink-3) !important;
}
.lang-toggle button.active{
  background:var(--pb-ink) !important;
  color:var(--pb-ground) !important;
}

/* The lead KPI on a console's 今日 screen is a filled tile, and its white
   label lost to the uppercase micro-label rule above. Ink fill, white type. */
.kpi.act::before{ background:var(--pb-ink) !important; }
.kpi.act,.kpi.act *{ color:#FFFFFF !important; }
.kpi.act .k,.kpi.act .s,.kpi.act .go,.kpi.act .caps{ color:rgba(255,255,255,.74) !important; }

/* the shop mark, the tick and the avatar were all the same blue-to-pink
   gradient; flat ink reads as a mark rather than as decoration */
/* .spark is the CONTAINER of a sparkline, not a mark — filling it made the
   whole chart a black slab. Only the bars inside it are painted. */
.shop-logo,.check-circle,.avatar-dot,.avatar,.chart-bar,.bar-fill,.spark div,
.condbar i,.due-ring{
  background:var(--pb-ink) !important;
  background-image:none !important;
  box-shadow:none !important;
}
.shop-logo svg,.check-circle svg{ stroke:var(--pb-ground) !important; }
/* an icon button's glyph is drawn with a literal stroke colour in the markup,
   which disappears against a dark surface */
.icon-btn svg,.burger svg,.hero-back svg,.drawer-head svg{
  stroke:currentColor !important;
}
.px-fab{
  border-radius:var(--pb-r) !important;
  box-shadow:var(--pb-shadow-lg) !important;
  padding:15px 22px !important;
  text-transform:uppercase; letter-spacing:.08em; font-size:11.5px !important;
}
/* the procedural product artwork is drawn in the old palette. Muting it lets
   the photography-shaped tiles sit in a neutral page instead of tinting it —
   a real shop drops its own IG photo in here and this stops applying. */
.svc-art,.card .shot,.card .th,.i-social,.hero-art,.hd .th,
.ord .th,.hold .th,.drill .th{ filter:saturate(.4) contrast(1.03); }
/* The gallery tiles are a procedural blue-to-purple wash from the old palette
   and there is no garment colour in them worth keeping, so they go nearly
   monochrome — which is also what a real shop's photographs will replace. */
.px-shot{ filter:grayscale(.82) contrast(1.06); }

/* the sticky footer under a form faded to a literal lilac.

   The padding is the iPhone fix: every one of these is pinned to the bottom of
   the window, and on any iPhone with a home indicator (X and later — which is
   most of them) the bottom ~34px of the window is under that indicator. A bar
   that stops at bottom:0 puts its button there, where a tap is swallowed by
   the system gesture. env(safe-area-inset-bottom) is 0 on every other device,
   so this costs nothing anywhere else.

   It only works because the pages ship <meta name="viewport" …
   viewport-fit=cover>; without that, iOS letterboxes the page and env()
   reports 0 even on a notched phone. */
.sticky-cta,.buybar,.savebar,.holdline{
  background:var(--pb-ground) !important;
  background-image:none !important;
  border-top:var(--pb-hair);
  -webkit-backdrop-filter:none !important; backdrop-filter:none !important;
  padding-bottom:calc(10px + env(safe-area-inset-bottom)) !important;
}

/* the cover art was three blurred lights; the brand look is a flat field with
   the shop name set large over it, so the lights are turned off rather than
   restyled */
.cover::before,.cover::after{ display:none !important; }
.hero,.ms-hero{
  background:var(--pb-surface-3) !important;
  border-bottom:var(--pb-hair);
  opacity:1 !important;
}
/* The cover becomes the masthead plate: near-black in BOTH themes, with
   everything on it in white. The retail covers carry the shop name and its
   @handle, the Haircut one holds only the DEMO chip, and both read as a
   deliberate plate rather than a band of tone waiting for a photograph.
   Contents are forced white because the pages set ink text on what used to be
   a pale wash. */
.cover{ background:var(--pb-plate) !important; }
.cover *{ color:#FFFFFF !important; }
.cover .eyebrow,.cover .ig,.cover .shop-meta{ color:rgba(255,255,255,.7) !important; }
/* The DEMO label has to read on the ink plate, on paper, and in dark, and it
   sat under the sticky top bar on a wide window. One rust chip, pinned to the
   bottom of the plate, solves all four. */
.cover .demo-tag,.demo-chip,.demo{
  background:var(--pb-rust) !important;
  border:none !important;
  color:#FFFFFF !important;
  border-radius:var(--pb-r) !important;
  letter-spacing:.14em !important;
  font-weight:700 !important;
}
.cover .demo-tag{ top:auto !important; bottom:12px !important; right:14px !important; }
/* Haircut lifts its shop card 30px up over the bottom of the plate, which put
   the chip behind the card with only a sliver of rust showing. Where a card
   follows the plate, the chip sits above the part the card covers. */
.cover:has(+ .shop-card) .demo-tag{ bottom:42px !important; }

/* -------------------------------------------------- theme + settings chrome
   Injected by propel-brand.js, so the markup for these lives nowhere else. */
.pb-chrome{ display:flex; align-items:center; gap:5px; flex-shrink:0; }
@media (max-width:400px){
  .pb-ico{ width:29px; height:29px; }
  .pb-ico svg{ width:13px; height:13px; }
}
.pb-ico{
  width:32px; height:32px; flex:none;
  display:inline-flex; align-items:center; justify-content:center;
  background:var(--pb-surface); color:var(--pb-ink);
  border:1px solid var(--pb-line-2); border-radius:var(--pb-r);
  font-size:14px; line-height:1; cursor:pointer; padding:0;
}
.pb-ico:hover{ border-color:var(--pb-ink); }
.pb-ico svg{ width:15px; height:15px; }

.pb-panel{
  position:fixed; inset:0; z-index:600; display:none;
  background:var(--pb-ground);
  overflow-y:auto; -webkit-overflow-scrolling:touch;
}
.pb-panel.open{ display:block; }
.pb-panel-in{ max-width:var(--pb-read); margin:0 auto; padding:0 18px 64px; }
.pb-panel-bar{
  position:sticky; top:0; z-index:2;
  background:var(--pb-ground); border-bottom:var(--pb-hair);
  display:flex; align-items:center; gap:12px; padding:14px 0;
  margin-bottom:26px;
}
.pb-panel-bar h2{ flex:1; margin:0; font-size:calc(22px * var(--pb-scale)); }
.pb-sec{ margin-bottom:32px; }
.pb-sec > h3{
  margin:0 0 4px; font-family:var(--pb-sans) !important;
  text-transform:uppercase; letter-spacing:.14em;
  font-size:calc(9.5px * var(--pb-scale)); font-weight:600; color:var(--pb-ink-3);
}
.pb-sec > p{ margin:0 0 14px; color:var(--pb-ink-2); font-size:calc(12.5px * var(--pb-scale)); }
.pb-field{ display:block; margin-bottom:12px; }
.pb-field > span{
  display:block; margin-bottom:5px;
  font-size:calc(11px * var(--pb-scale)); font-weight:600; color:var(--pb-ink-2);
}
.pb-field input,.pb-field select,.pb-field textarea{
  width:100%; padding:12px 13px; font-size:calc(14px * var(--pb-scale));
  border:1px solid var(--pb-line-2); background:var(--pb-surface);
}
.pb-row{
  display:flex; align-items:center; gap:14px;
  padding:14px 0; border-bottom:var(--pb-hair);
}
.pb-row:last-child{ border-bottom:none; }
.pb-row-main{ flex:1; min-width:0; }
.pb-row-main b{ display:block; font-weight:600; font-size:calc(14px * var(--pb-scale)); }
.pb-row-main span{ display:block; color:var(--pb-ink-2); font-size:calc(12px * var(--pb-scale)); }
.pb-seg{ display:inline-flex; border:1px solid var(--pb-line-2); border-radius:var(--pb-r); padding:2px; flex:none; }
.pb-seg button{
  border:none; background:none; padding:7px 12px; border-radius:2px;
  font:inherit; font-size:calc(11px * var(--pb-scale)); font-weight:700;
  letter-spacing:.05em; color:var(--pb-ink-3); cursor:pointer;
}
.pb-seg button.on{ background:var(--pb-ink); color:var(--pb-ground); }
.pb-sw{
  width:46px; height:26px; flex:none; padding:0; cursor:pointer;
  border:1px solid var(--pb-line-2); border-radius:26px;
  background:var(--pb-surface-3); position:relative; transition:background .18s ease;
}
.pb-sw::after{
  content:''; position:absolute; top:2px; left:2px;
  width:20px; height:20px; border-radius:50%;
  background:var(--pb-surface); border:1px solid var(--pb-line-2);
  transition:transform .18s ease;
}
.pb-sw[aria-checked="true"]{ background:var(--pb-ink); border-color:var(--pb-ink); }
.pb-sw[aria-checked="true"]::after{ transform:translateX(20px); }
.pb-note{
  margin-top:8px; padding:12px 14px;
  background:var(--pb-surface-2); border:var(--pb-hair);
  color:var(--pb-ink-2); font-size:calc(12px * var(--pb-scale)); line-height:1.6;
}
.pb-save{
  position:sticky; bottom:0; padding:14px 0;
  background:linear-gradient(to top,var(--pb-ground) 62%,transparent);
}
.pb-save button{
  width:100%; padding:16px; border:1px solid var(--pb-solid);
  background:var(--pb-solid); color:var(--pb-solid-ink);
  font:inherit; font-weight:700; text-transform:uppercase; letter-spacing:.09em;
  font-size:calc(11.5px * var(--pb-scale)); border-radius:var(--pb-r); cursor:pointer;
}

/* ---------------------------------------- propel-ux.css, restated for dark
   That file writes literal colours on purpose, so these are the only rules
   that can follow the theme. Kept to the surfaces a customer actually sees. */
html[data-theme="dark"] .px-sheet,
html[data-theme="dark"] .px-toast,
html[data-theme="dark"] .px-ins,
html[data-theme="dark"] .px-insights,
html[data-theme="dark"] .px-review,
html[data-theme="dark"] .px-shot,
html[data-theme="dark"] .rc,
html[data-theme="dark"] .ac,
html[data-theme="dark"] .wl-row,
html[data-theme="dark"] .sc-row,
html[data-theme="dark"] .sc-chip,
html[data-theme="dark"] .pay-m,
html[data-theme="dark"] .pk-track,
html[data-theme="dark"] .nb-f,
html[data-theme="dark"] .qf,
html[data-theme="dark"] .pe-row,
html[data-theme="dark"] .ow-row,
html[data-theme="dark"] .hm-c{
  background:var(--pb-surface) !important;
  color:var(--pb-ink) !important;
  border-color:var(--pb-line) !important;
}
html[data-theme="dark"] .px-scrim{ background:rgba(0,0,0,.62); }
html[data-theme="dark"] .sc-chip.on{ background:var(--pb-ink) !important; color:var(--pb-surface) !important; }
html[data-theme="dark"] .sc-chip b,
html[data-theme="dark"] .sc-lane-h span:first-child{ color:inherit; }
html[data-theme="dark"] .sc-lane-h{ color:var(--pb-ink-2, var(--pb-ink)); }
html[data-theme="dark"] .px-ripple.on-light{
  background:radial-gradient(circle,rgba(255,255,255,.22) 0%,rgba(255,255,255,.08) 60%,transparent 70%);
}
.px-sheet{ border-radius:var(--pb-r-lg) var(--pb-r-lg) 0 0 !important; }

/* =========================================================== pass 3: layout

   The customer pages were written at max-width:440px and stay mobile-first —
   the phone is still the case that has to be right, because that is what a
   prospect opens from WhatsApp. Above 720px the page stops pretending to be a
   phone: the column widens, product grids gain columns, and at 960px the
   bottom tab bar becomes a masthead nav, because a fixed pill floating at the
   bottom of a 1440px window reads as a broken phone site.

   Admin is the other way round. Its natural home is a laptop, so from 1024px
   the tab bar becomes a fixed left rail and the views run wide; below that it
   keeps exactly the phone layout it already had.
   ========================================================================= */

body.pb-customer{ max-width:none !important; }
body.pb-customer .app,
body.pb-customer > .screen,
body.pb-customer > .topbar{ width:100%; }

@media (min-width:720px){
  body.pb-customer .screen,
  body.pb-customer .app{ max-width:var(--pb-page); margin-left:auto; margin-right:auto; }
  body.pb-customer .grid{ grid-template-columns:repeat(3,minmax(0,1fr)) !important; gap:18px !important; padding:0 20px; }
  body.pb-customer .service-list,
  body.pb-customer .time-grid{ max-width:var(--pb-read); margin-left:auto; margin-right:auto; }
  body.pb-customer .hero{ height:auto; min-height:280px; }
  body.pb-customer .cover{ min-height:200px; }
  /* .sticky-cta is position:sticky on the Haircut pages and position:fixed on
     the shops. left:50% + translateX only centres the fixed one — on a sticky
     element it walks the bar off the left edge, because there is no
     containing block to be 50% of. Centre by margin, which is right for both. */
  body.pb-customer .sticky-cta,
  body.pb-customer .buybar{
    max-width:var(--pb-page);
    margin-left:auto !important; margin-right:auto !important;
  }
  body.pb-customer .buybar{ left:0 !important; right:0 !important; transform:none !important; }
}
@media (min-width:960px){
  body.pb-customer{ padding-bottom:0 !important; }
  body.pb-customer .grid{ grid-template-columns:repeat(4,minmax(0,1fr)) !important; }
  /* The tab bar is the last node in the body, so making it sticky would pin
     it to the BOTTOM of the document — sticky follows document order. It stays
     fixed, moves to the top, and the page's own sticky topbar drops below it,
     giving a two-row masthead: sections on top, the screen's own title under. */
  body.pb-customer{ padding-top:54px; }
  /* The nav is fixed across the top, so the page's own bar has nothing left to
     stick to. It must go static: `position:sticky; top:54px` holds the element
     54px down the viewport while the flow still reserves its box at the top,
     which puts the bar on top of whatever follows it before you scroll. */
  body.pb-customer .topbar{ position:static !important; top:auto !important; }
  body.pb-customer .tabbar{
    position:fixed !important; top:0 !important; bottom:auto !important;
    height:54px; align-items:stretch;
    left:auto !important; right:auto !important;
    transform:none !important;
    width:100% !important; max-width:none !important;
    margin:0 !important; padding:0 !important;
    border-radius:0 !important;
    border:none !important; border-bottom:var(--pb-hair) !important;
    background:var(--pb-surface) !important;
    display:flex; justify-content:center; gap:6px;
    z-index:40;
  }
  body.pb-customer .tabbar > button{
    flex:none !important;
    flex-direction:row !important;
    gap:8px !important;
    padding:16px 18px !important;
    font-size:calc(11px * var(--pb-scale)) !important;
    text-transform:uppercase; letter-spacing:.1em; font-weight:700;
    border-radius:0 !important;
    background:none !important;
    border-bottom:2px solid transparent !important;
    color:var(--pb-ink-2) !important;
  }
  body.pb-customer .tabbar > button.on,
  body.pb-customer .tabbar > button.active{
    color:var(--pb-ink) !important;
    border-bottom-color:var(--pb-ink) !important;
    background:none !important;
  }
  body.pb-customer .tabbar > button{ align-items:center !important; }
}
@media (min-width:1080px){
  /* the reading column inside a wide page: a form should not stretch to
     1180px just because the window does */
  body.pb-customer .confirm-wrap,
  body.pb-customer .form-block,
  body.pb-customer .summary-card,
  body.pb-customer .panel{ max-width:var(--pb-read); margin-left:auto; margin-right:auto; }
}

/* ------------------------------------------------------------------- admin */
@media (min-width:1024px){
  body.pb-admin{ max-width:none !important; }
  body.pb-admin.pb-rail{ padding-bottom:0 !important; }
  body.pb-admin.pb-rail .tabbar{
    position:fixed !important;
    left:0 !important; top:0; bottom:0;
    transform:none !important;
    width:var(--pb-rail) !important; max-width:none !important;
    /* svh is the window you can actually see; on an iPad in Safari 100vh is
       the window with the toolbar hidden, which pushes the bottom of the rail
       out of reach. The 100vh line stays as the fallback. */
    height:100vh;
    height:100svh;
    flex-direction:column !important;
    justify-content:flex-start !important;
    align-items:stretch !important;
    gap:2px;
    margin:0 !important;
    padding:74px 12px 20px !important;
    border:none !important; border-right:var(--pb-hair) !important;
    border-radius:0 !important;
    background:var(--pb-surface) !important;
    overflow-y:auto;
    z-index:45;
  }
  body.pb-admin.pb-rail .tabbar > button{
    flex:none !important;
    flex-direction:row !important;
    align-items:center !important;
    justify-content:flex-start !important;
    gap:11px !important;
    width:100%;
    padding:11px 12px !important;
    font-size:calc(12.5px * var(--pb-scale)) !important;
    font-weight:600 !important;
    border-radius:var(--pb-r) !important;
    background:none !important;
    color:var(--pb-ink-2) !important;
    text-align:left;
  }
  body.pb-admin.pb-rail .tabbar > button .ic,
  body.pb-admin.pb-rail .tabbar > button .ti{ font-size:15px !important; }
  body.pb-admin.pb-rail .tabbar > button.on,
  body.pb-admin.pb-rail .tabbar > button.active{
    background:var(--pb-surface-3) !important;
    color:var(--pb-ink) !important;
  }
  body.pb-admin.pb-rail .topbar{
    position:fixed; top:0; left:0; right:0; z-index:46;
    background:var(--pb-surface) !important;
  }
  body.pb-admin.pb-rail .view{
    margin-left:var(--pb-rail);
    padding-top:70px;
  }
  body.pb-admin.pb-rail .view > *{ max-width:var(--pb-page); margin-left:auto; margin-right:auto; }
  body.pb-admin.pb-rail .savebar,
  body.pb-admin.pb-rail .holdline{ left:var(--pb-rail) !important; }
  /* the burger and the phone drawer are the rail's job now */
  body.pb-admin.pb-rail .burger{ display:none !important; }
  body.pb-admin.pb-rail .kpis,
  body.pb-admin.pb-rail .kpi-grid{ grid-template-columns:repeat(4,minmax(0,1fr)) !important; }
  body.pb-admin.pb-rail .f2{ grid-template-columns:repeat(4,minmax(0,1fr)) !important; }
}
@media (min-width:1024px) and (max-width:1279px){
  body.pb-admin.pb-rail .kpis,
  body.pb-admin.pb-rail .kpi-grid{ grid-template-columns:repeat(2,minmax(0,1fr)) !important; }
  body.pb-admin.pb-rail .f2{ grid-template-columns:repeat(2,minmax(0,1fr)) !important; }
}

/* ------------------------------------------------------------- the tab bar
   Stated in full rather than retoned, for two reasons: the Haircut pages have
   a tab bar for the first time and ship no styles for one, and the three that
   do had each drawn their own floating pill. One bar, one design, every demo.

   On the phone it is a hairline strip across the bottom — a thumb's reach from
   anywhere, which is the whole point of putting it there. */
.tabbar{
  position:fixed !important;
  left:0 !important; right:0 !important; bottom:0 !important;
  top:auto !important;
  width:auto !important; max-width:none !important;
  transform:none !important;
  margin:0 !important; padding:0 !important;
  display:flex !important;
  align-items:stretch;
  z-index:50;
  border-radius:0 !important;
  border:none !important; border-top:var(--pb-hair) !important;
  background:var(--pb-surface) !important;
  box-shadow:none !important;
  padding-bottom:env(safe-area-inset-bottom) !important;
}
.tabbar > button{
  flex:1 1 0 !important;
  min-width:0;
  display:flex !important;
  flex-direction:column !important;
  align-items:center !important;
  justify-content:center !important;
  gap:4px !important;
  padding:9px 2px 10px !important;
  border:none !important; border-radius:0 !important;
  background:none !important;
  color:var(--pb-ink-3) !important;
  font-family:var(--pb-sans) !important;
  font-size:calc(9.5px * var(--pb-scale)) !important;
  font-weight:600 !important;
  letter-spacing:.02em !important;
  line-height:1.2;
  box-shadow:none !important;
  position:relative;
}
.tabbar > button .ic,.tabbar > button .ti{ font-size:15px !important; line-height:1 !important; }
.tabbar > button.on,.tabbar > button.active{
  background:none !important;
  color:var(--pb-ink) !important;
  box-shadow:inset 0 2px 0 var(--pb-ink) !important;
}
/* the pages set their own bottom padding for a floating pill; the strip is a
   different height, and content must clear it on every one of them */
body.pb-customer,body.pb-admin{
  padding-bottom:calc(72px + env(safe-area-inset-bottom)) !important;
}
/* The Haircut drawer's scrim was sized to the 440px phone column and centred
   with translateX(-50%), which on a wide window leaves it floating in the
   middle of the page with a visible edge. It spans the window instead. */
.drawer-overlay{ left:0 !important; right:0 !important; width:100% !important;
  max-width:none !important; transform:none !important; }
/* …except in the Haircut console's 電腦版, where the same element is the
   permanent 264px sidebar and is never closed (pointer-events:auto). Stretched
   to the whole window it became an invisible layer over the console, and every
   click — 登入 included — landed on it instead. Below 821px that console goes
   back to the slide-out drawer, which is shut and click-through until opened. */
@media (min-width:821px){
  body.viewdesk .drawer-overlay{ right:auto !important; width:264px !important; max-width:264px !important; }
}
.drawer,.drawer-panel{ background:var(--pb-surface) !important; border-right:var(--pb-hair); }
.ditem,.drawer-item{
  border-radius:var(--pb-r) !important;
  color:var(--pb-ink) !important;
  font-weight:600;
}
.ditem.on{ background:var(--pb-surface-3) !important; }

@media print{ .tabbar,.pb-chrome,.pb-panel{ display:none !important; } }
@media (prefers-reduced-motion:reduce){
  .pb-sw::after{ transition:none; }
}

/* ==========================================================================
   The shop chrome — the search box, the filter button and the filter sheet
   drawn by propel-shop.js. It lives here rather than in that file because
   every rule below is a token away from the rest of the brand.
   ========================================================================== */
#shopBar{
  display:flex; gap:8px; align-items:stretch;
  padding:10px 12px 4px;
}
.ps-search{
  flex:1; min-width:0; position:relative;
  display:flex; align-items:center;
  border:1px solid var(--pb-line-2); border-radius:var(--pb-r);
  background:var(--pb-surface);
}
.ps-search:focus-within{ border-color:var(--pb-ink); }
.ps-mag{ display:flex; padding:0 8px 0 11px; color:var(--pb-ink-3); }
.ps-mag svg{ width:15px; height:15px; }
.ps-search input{
  flex:1; min-width:0;
  border:none !important; background:none !important;
  padding:11px 4px; font-size:calc(13.5px * var(--pb-scale));
  font-family:var(--pb-sans);
}
.ps-search input:focus{ outline:none !important; }
.ps-search input::-webkit-search-cancel-button{ display:none; }
.ps-x{
  border:none; background:none; padding:0 11px;
  font-size:13px; color:var(--pb-ink-3); cursor:pointer;
}
.ps-filter{
  flex:none; display:inline-flex; align-items:center; gap:7px;
  padding:0 14px; cursor:pointer;
  border:1px solid var(--pb-line-2); border-radius:var(--pb-r);
  background:var(--pb-surface); color:var(--pb-ink);
  font-family:var(--pb-sans); font-weight:700;
  font-size:calc(11.5px * var(--pb-scale));
  text-transform:uppercase; letter-spacing:.08em;
}
.ps-filter:hover{ border-color:var(--pb-ink); }
.ps-filter.on{ background:var(--pb-ink); border-color:var(--pb-ink); color:var(--pb-ground); }
.ps-filter b{
  min-width:17px; height:17px; border-radius:9px;
  display:inline-flex; align-items:center; justify-content:center;
  background:var(--pb-rust); color:#fff; font-size:9.5px;
}
.ps-fi{ display:flex; }
.ps-fi svg{ width:15px; height:15px; }

.ps-panel{
  position:fixed; inset:0; z-index:620; display:none;
  background:var(--pb-ground); overflow-y:auto; -webkit-overflow-scrolling:touch;
}
.ps-panel.open{ display:block; }
.ps-in{ max-width:var(--pb-read); margin:0 auto; padding:0 18px 92px; }
.ps-bar{
  position:sticky; top:0; z-index:2; background:var(--pb-ground);
  border-bottom:var(--pb-hair);
  display:flex; align-items:center; gap:12px; padding:14px 0; margin-bottom:20px;
}
.ps-bar h2{ flex:1; margin:0; font-size:calc(21px * var(--pb-scale)); }
.ps-sec{ padding:16px 0; border-bottom:var(--pb-hair); }
.ps-sec h3{
  margin:0 0 11px; font-family:var(--pb-sans) !important;
  text-transform:uppercase; letter-spacing:.14em;
  font-size:calc(9.5px * var(--pb-scale)); font-weight:600; color:var(--pb-ink-3);
}
.ps-sec h3 i{
  font-style:normal; color:var(--pb-ground); background:var(--pb-ink);
  border-radius:8px; padding:1px 6px; margin-left:5px; letter-spacing:0;
}
.ps-opts{ display:flex; flex-wrap:wrap; gap:7px; }
.ps-opt{
  border:1px solid var(--pb-line-2); border-radius:var(--pb-r);
  background:var(--pb-surface); color:var(--pb-ink);
  padding:9px 12px; cursor:pointer;
  font-family:var(--pb-sans); font-size:calc(12.5px * var(--pb-scale)); font-weight:600;
}
.ps-opt small{ color:var(--pb-ink-3); font-weight:500; margin-left:4px; }
.ps-opt:hover{ border-color:var(--pb-ink); }
.ps-opt.on{ background:var(--pb-ink); border-color:var(--pb-ink); color:var(--pb-ground); }
.ps-opt.on small{ color:rgba(255,255,255,.6); }
html[data-theme="dark"] .ps-opt.on small{ color:rgba(0,0,0,.5); }
.ps-foot{
  position:fixed; left:0; right:0; bottom:0; z-index:3;
  display:flex; gap:9px; align-items:center;
  padding:12px 18px calc(12px + env(safe-area-inset-bottom));
  background:var(--pb-surface); border-top:var(--pb-hair);
}
.ps-foot > *{ max-width:var(--pb-read); }
.ps-reset{
  flex:none; padding:15px 16px; cursor:pointer;
  border:1px solid var(--pb-line-2); border-radius:var(--pb-r);
  background:none; color:var(--pb-ink);
  font-family:var(--pb-sans); font-weight:600; font-size:calc(12px * var(--pb-scale));
}
.ps-apply{
  flex:1; padding:16px; cursor:pointer;
  border:1px solid var(--pb-solid); border-radius:var(--pb-r);
  background:var(--pb-solid); color:var(--pb-solid-ink);
  font-family:var(--pb-sans); font-weight:700;
  text-transform:uppercase; letter-spacing:.09em; font-size:calc(11.5px * var(--pb-scale));
}
@media (min-width:720px){
  #shopBar{ max-width:var(--pb-page); margin:0 auto; padding:16px 20px 6px; }
}

/* ==========================================================================
   Hover. A phone has no hover, so none of this is allowed to be the only way
   to reach anything — every quick action below has a full-size equivalent on
   the product page. The whole block is behind (hover:hover) so a touch device
   never gets a sticky :hover state left behind after a tap.
   ========================================================================== */
@media (hover:hover) and (pointer:fine){
  .card,.service-card,.list-card,.ord,.st,.memcard,.todo{
    transition:border-color .16s ease, box-shadow .18s ease, transform .18s ease;
  }
  .card:hover,.service-card:hover,.list-card:hover,.st:hover{
    border-color:var(--pb-line-2) !important;
    box-shadow:0 6px 24px rgba(12,12,13,.08) !important;
  }
  html[data-theme="dark"] .card:hover,
  html[data-theme="dark"] .service-card:hover,
  html[data-theme="dark"] .list-card:hover,
  html[data-theme="dark"] .st:hover{ box-shadow:0 6px 24px rgba(0,0,0,.5) !important; }

  /* the artwork breathes rather than jumps — 1.03 is enough to read as a
     response and small enough not to soften the drawing */
  .card .shot,.service-card .svc-art,.card .th{ overflow:hidden; }
  .card .shot > *,.card .shot svg{ transition:transform .38s cubic-bezier(.2,.7,.3,1); }
  .card:hover .shot > *,.card:hover .shot svg{ transform:scale(1.035); }

  /* the save heart is quiet until the tile is under the cursor */
  .card .like{ opacity:.55; transition:opacity .15s ease, color .15s ease; }
  .card:hover .like,.card .like.on{ opacity:1; }

  /* quick add: the size chips ride up over the bottom of the artwork. Hidden
     from assistive tech and from the keyboard while off-screen, because a
     focus stop you cannot see is worse than no shortcut at all. */
  .card .quick{
    position:absolute; left:6px; right:6px; bottom:6px; z-index:3;
    display:flex; gap:4px; flex-wrap:wrap;
    padding:6px; border-radius:var(--pb-r);
    background:var(--pb-surface); border:var(--pb-hair);
    opacity:0; transform:translateY(6px);
    transition:opacity .16s ease, transform .2s ease;
    pointer-events:none;
  }
  .card:hover .quick,.card:focus-within .quick{ opacity:1; transform:none; pointer-events:auto; }
  .card .quick button{
    flex:1 1 auto; min-width:30px; min-height:30px; padding:7px 4px; cursor:pointer;
    border:1px solid var(--pb-line-2); border-radius:2px;
    background:var(--pb-surface); color:var(--pb-ink);
    font-family:var(--pb-sans); font-size:calc(10.5px * var(--pb-scale)); font-weight:700;
  }
  .card .quick button:hover{ background:var(--pb-ink); border-color:var(--pb-ink); color:var(--pb-ground); }
  .card .quick button:disabled{ opacity:.34; cursor:default; }
  .card .quick .qk-lbl{
    flex:1 1 100%; text-align:center; color:var(--pb-ink-3);
    font-size:calc(9px * var(--pb-scale)); text-transform:uppercase; letter-spacing:.1em;
  }

  .pill:hover,.tag:hover,.cat:hover,.szchip:hover,.opt:hover,.size:hover{ border-color:var(--pb-ink); }
  .cta-btn:hover:not(:disabled),.btn:hover:not(:disabled),.ps-apply:hover,.pb-save button:hover{ opacity:.88; }
  .tabbar > button:hover{ color:var(--pb-ink) !important; }
  .ditem:hover,.drawer-item:hover{ background:var(--pb-surface-3) !important; }
  .mrow:hover .v{ color:var(--pb-ink); }
  /* the shop name in the bar is a link home, so it should look like one */
  .pb-home:hover{ text-decoration:underline; text-underline-offset:3px; }
}
/* the quick strip never exists on touch, so it cannot be tabbed to there */
@media not all and (hover:hover){ .card .quick{ display:none; } }

/* the logo / shop name in the top bar goes home */
.pb-home{
  background:none; border:none; padding:0; margin:0;
  font:inherit; color:inherit; text-align:left; cursor:pointer;
  min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap;
}


/* ==========================================================================
   Tap targets. Anything a thumb has to hit gets 32px of height, and 34 where
   there is room — measured at 360px because that is the narrowest phone this
   is sent to, and several controls were landing at 24-26px there.
   ========================================================================== */
@media (max-width:719px){
  .lang-toggle button{ min-height:32px; padding:6px 11px !important; }
  .pb-ico{ min-width:32px; min-height:32px; }
  /* A tap target is something you TAP. .pill is a status badge — 已取消,
     已完成, 等緊到貨 — and nobody has ever tapped one; padding it to 34px
     turned every badge on the Model 我的 screen into a tall empty box with
     its label stranded at the top. Same story for the bare .cd and .act:
     they are buttons in the consoles and CHIPS on a Model product tile, so
     they are tag-qualified here exactly as they are further up this file. */
  .cat,.szchip,.dchip,.chip-opt,.tabs button,.st-tabs button,
  .tabs > button,.sortsel,.clearfilt,.market-go,.edit-btn,.hold-btn,
  button.act,button.cd,.row-btn,.mini-action,.drill-x,.qf{
    min-height:34px;
  }
  .market-go{ min-width:56px; }
  .sw{ min-height:30px; }
  /* the FAQ rows on the Haircut shop tab are buttons, and a 20px row is not
     a target — the padding is what makes the whole row hittable */
  button.summary-row{ min-height:38px; padding:9px 0 !important; }
  .qty button{ min-width:36px; min-height:38px; }
  .qty.small button{ min-width:30px; min-height:30px; }
}
/* the shop name is a link home; give it something to hit at any width */
.pb-home{ min-height:32px; min-width:44px; display:inline-flex; align-items:center; }

/* ==========================================================================
   Contrast repairs. Every rule below fixes a real pair measured on the page —
   the ratio is quoted so the next person can tell whether their change breaks
   it again. tests/contrast.js is what found them and what will find the next.
   ========================================================================== */

/* A status badge filled with a themed colour keeps a literal white label,
   which inverts to unreadable in dark where the fills go pale. In dark the
   label takes the ground instead. */
/* Status badges are FILLED, and each fill is a different lightness, so one
   blanket foreground cannot serve them. Each variant states its own pair
   here. In dark the fills go pale, so the label goes dark with them; the two
   near-black fills (.one, .out) keep a white label in both themes. */
.tag.sale,.tag.pre,.tag.hold,.tag.new,.tag.fresh,.tag.low,
.tag.green,.tag.berry,.tag.amber,.tag.gold,.tb.go{ color:#FFFFFF !important; }
html[data-theme="dark"] .tag.sale,
html[data-theme="dark"] .tag.pre,
html[data-theme="dark"] .tag.hold,
html[data-theme="dark"] .tag.new,
html[data-theme="dark"] .tag.fresh,
html[data-theme="dark"] .tag.low,
html[data-theme="dark"] .tag.green,
html[data-theme="dark"] .tag.berry,
html[data-theme="dark"] .tag.amber,
html[data-theme="dark"] .tag.gold,
html[data-theme="dark"] .tb.go,
html[data-theme="dark"] .badge.open,
html[data-theme="dark"] .demo-tag,
html[data-theme="dark"] .demo-chip,
html[data-theme="dark"] .demo{ color:var(--pb-on-accent) !important; }
/* the two dark fills, restated so they survive the theme rather than the
   literal rgba(26,28,46,.82) they were written as */
.tag.one,.tag.out{ background:var(--pb-plate) !important; color:#FFFFFF !important; }
.tag.muted{ background:var(--pb-surface-3) !important; color:var(--pb-ink) !important;
  border:1px solid var(--pb-line-2); }

/* An outlined status pill in dark: a tinted ground with the accent as text,
   rather than the accent as a fill under a literal white label. */
html[data-theme="dark"] .pill.green{ background:var(--pb-accent-soft) !important; color:var(--pb-ok) !important; }
html[data-theme="dark"] .pill.gold,
html[data-theme="dark"] .pill.amber{ background:var(--pb-rust-soft) !important; color:var(--pb-warn) !important; }
html[data-theme="dark"] .pill.pending,
html[data-theme="dark"] .mini.warn,
html[data-theme="dark"] .pill.warn{ color:var(--pb-bad) !important; }

/* The category rail was painted with literal translucent white, which is a
   white pill in dark mode carrying grey text. */
.cat{ background:var(--pb-surface) !important; border:1px solid var(--pb-line-2) !important;
  color:var(--pb-ink-2) !important; }
.cat.active,.cat.on{ background:var(--pb-ink) !important; color:var(--pb-ground) !important; }

/* Literals left over from the old palette, on the Haircut pages and inside
   propel-ux.css: a chevron, a section heading, a "see all", the step labels
   and the review stars. */
.svc-chevron{ color:var(--pb-ink-3) !important; }
.px-sec-head h3{ color:var(--pb-ink) !important; }
.px-sec-head .more,.px-step-labels span.at,.px-steps .px-step.at i{ color:var(--pb-accent) !important; }
.px-review .stars,.rate-stars{ color:var(--pb-rust) !important; }
html[data-theme="dark"] .px-sec-head .more,
html[data-theme="dark"] .px-step-labels span.at{ color:var(--pb-accent-deep) !important; }

/* The desktop/mobile switch and the analytics rank pill were painted with
   literal near-white, so in dark they were light-on-light. */
.viewswitch{
  background:var(--pb-surface) !important;
  border:var(--pb-hair) !important;
  color:var(--pb-ink) !important;
}
.rank .rn,.rn{
  background:var(--pb-surface-3) !important;
  color:var(--pb-ink) !important;
}

/* propel-ux.css writes literal ink on its review and insight cards — 1.1:1
   against a dark surface. */
html[data-theme="dark"] .px-review .body,
html[data-theme="dark"] .px-review .who,
html[data-theme="dark"] .px-ins-body,
html[data-theme="dark"] .px-ins-title,
html[data-theme="dark"] .px-sheet-title,
html[data-theme="dark"] .px-sheet-desc{ color:var(--pb-ink) !important; }

/* A caption sitting directly on artwork cannot rely on the artwork being
   dark — the tiles are pale now. It gets its own scrim. */
.px-shot-cap{
  background:linear-gradient(to top, rgba(0,0,0,.72), rgba(0,0,0,0)) !important;
  color:#FFFFFF !important;
  padding:18px 10px 8px !important;
  text-shadow:0 1px 2px rgba(0,0,0,.5);
}

/* WhatsApp green is a brand colour, and white on #25D366 is 2:1. Its own
   darker green is 4.6:1 and still unmistakably WhatsApp. */
.wa,.btn-wa,.px-wa{ background:#0F7C68 !important; color:#FFFFFF !important; }

/* "not set" placeholders were a literal pale blue-grey left over from the old
   palette */
.prof-m span[style],#pView span[style]{ color:var(--pb-ink-3) !important; }

/* --- the last of the literal pairs, each measured on the page -------------

   Everything here was written as a literal colour on one side and a token on
   the other, so one theme looked right and the other collapsed. */

/* filter/period tab strips: the pages call the selected one .active on some
   pages and .on on others, and neither carried a themed background */
.tabs button,.per button{
  background:var(--pb-surface) !important;
  border:1px solid var(--pb-line-2) !important;
  color:var(--pb-ink-2) !important;
  background-image:none !important;
}
.tabs button.active,.tabs button.on,.per button.on,.per button.active{
  background:var(--pb-ink) !important;
  border-color:var(--pb-ink) !important;
  color:var(--pb-ground) !important;
}

/* the console's publish button is the screen's one loud action */
.cta{
  background:var(--pb-solid) !important; background-image:none !important;
  color:var(--pb-solid-ink) !important;
  border:1px solid var(--pb-solid) !important;
  border-radius:var(--pb-r) !important;
  text-transform:uppercase; letter-spacing:.09em; font-weight:700 !important;
}

/* the countdown chip that sits on a product tile, and the keep-days chip */
span.cd,.pic .cd{ background:var(--pb-plate) !important; color:#FFFFFF !important; }
.szchip{ background:var(--pb-surface-3) !important; color:var(--pb-ink) !important; }

/* the lead KPI tile: a plate in both themes, like the masthead, so its white
   label is right in both rather than only in light */
.kpi.act::before{ background:var(--pb-plate) !important; }
.kpi.act,.kpi.act *{ color:#FFFFFF !important; }
.kpi.act .k,.kpi.act .s,.kpi.act .go,.kpi.act .caps{ color:rgba(255,255,255,.74) !important; }

/* 今日營業中 is an outlined status, not a fill */
.badge.open{ background:var(--pb-accent-soft) !important; color:var(--pb-accent) !important; }
html[data-theme="dark"] .badge.open{ color:var(--pb-ok) !important; }
.badge.chair{ background:var(--pb-surface-3) !important; color:var(--pb-ink-2) !important; }

/* the booking step labels: only the current one was themed */
.px-step-labels span{ color:var(--pb-ink-3) !important; }
.px-step-labels span.at{ color:var(--pb-accent) !important; }
html[data-theme="dark"] .px-step-labels span.at{ color:var(--pb-accent-deep) !important; }

/* ==========================================================================
   客戶 (CRM) — the customer tab drawn by propel-crm.js.
   ========================================================================== */
.crm-kpis{
  display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:9px; margin-bottom:14px;
}
@media (min-width:720px){ .crm-kpis{ grid-template-columns:repeat(4,minmax(0,1fr)); } }
.crm-kpi{ border:var(--pb-hair); background:var(--pb-surface); border-radius:var(--pb-r); padding:12px 13px; }
.crm-kpi .k{ font-size:calc(9.5px * var(--pb-scale)); font-weight:600; letter-spacing:.12em;
  text-transform:uppercase; color:var(--pb-ink-3); }
.crm-kpi .n{ font-family:var(--pb-serif); font-size:calc(25px * var(--pb-scale)); line-height:1.1; margin-top:5px; }
.crm-kpi .s{ font-size:calc(10.5px * var(--pb-scale)); color:var(--pb-ink-2); margin-top:4px; }

/* the split, as one line you can read without reading a number */
.crm-bar{ display:flex; height:10px; border-radius:2px; overflow:hidden; background:var(--pb-surface-3); }
.crm-bar i{ display:block; }
.crm-bar .nw,.crm-legend .nw{ background:var(--pb-rust); }
.crm-bar .rt,.crm-legend .rt{ background:var(--pb-accent); }
.crm-legend{ display:flex; gap:14px; margin-top:7px; font-size:calc(10.5px * var(--pb-scale)); color:var(--pb-ink-2); }
.crm-legend span{ display:inline-flex; align-items:center; gap:5px; }
.crm-legend i{ width:9px; height:9px; border-radius:2px; display:block; }
.crm-note{ margin-top:10px; padding:11px 13px; background:var(--pb-surface-2); border:var(--pb-hair);
  font-size:calc(11.5px * var(--pb-scale)); line-height:1.6; color:var(--pb-ink-2); }
.crm-rows{ margin-top:10px; }
.crm-chase{ display:flex; flex-wrap:wrap; gap:7px; margin-top:11px; }
.crm-chase button{
  flex:1 1 150px; text-align:left; cursor:pointer; padding:10px 12px;
  border:1px solid var(--pb-line-2); border-radius:var(--pb-r); background:var(--pb-surface);
  font-family:var(--pb-sans); font-size:calc(12px * var(--pb-scale)); font-weight:700; color:var(--pb-ink);
}
.crm-chase button small{ display:block; font-weight:500; color:var(--pb-ink-2); margin-top:3px;
  font-size:calc(10px * var(--pb-scale)); }
.crm-chase button:hover{ border-color:var(--pb-ink); }

.crm-search input{ width:100%; padding:11px 13px; margin-bottom:9px;
  border:1px solid var(--pb-line-2); border-radius:var(--pb-r); background:var(--pb-surface);
  font-family:var(--pb-sans); font-size:calc(13px * var(--pb-scale)); }
.crm-sorts{ display:flex; flex-wrap:wrap; gap:6px; margin-bottom:11px; }
.crm-sorts button{
  padding:8px 11px; cursor:pointer; border:1px solid var(--pb-line-2); border-radius:var(--pb-r);
  background:var(--pb-surface); color:var(--pb-ink-2);
  font-family:var(--pb-sans); font-size:calc(11.5px * var(--pb-scale)); font-weight:600; min-height:34px;
}
.crm-sorts button.on{ background:var(--pb-ink); border-color:var(--pb-ink); color:var(--pb-ground); }

.crm-row{
  display:flex; align-items:center; gap:11px; width:100%; text-align:left; cursor:pointer;
  padding:11px 12px; margin-bottom:7px;
  border:var(--pb-hair); border-radius:var(--pb-r); background:var(--pb-surface);
  font-family:var(--pb-sans); color:var(--pb-ink);
}
.crm-row:hover{ border-color:var(--pb-ink); }
.crm-row.lapse{ border-left:3px solid var(--pb-warn); }
.av{
  width:34px; height:34px; flex:none; border-radius:50%;
  display:flex; align-items:center; justify-content:center;
  background:var(--pb-ink); color:var(--pb-ground);
  font-weight:700; font-size:calc(14px * var(--pb-scale));
}
.av.lg{ width:52px; height:52px; font-size:calc(21px * var(--pb-scale)); }
.crm-row .cm{ flex:1; min-width:0; }
.cn{ display:flex; align-items:center; gap:7px; font-weight:700; font-size:calc(13.5px * var(--pb-scale)); }
.cs{ color:var(--pb-ink-2); font-size:calc(11px * var(--pb-scale)); margin-top:3px; }
.crm-row .cv{ text-align:right; font-weight:700; font-size:calc(13.5px * var(--pb-scale)); flex:none; }
.crm-row .cv small{ display:block; font-weight:500; color:var(--pb-ink-3);
  font-size:calc(9.5px * var(--pb-scale)); text-transform:uppercase; letter-spacing:.1em; }
.tier{
  font-size:calc(9px * var(--pb-scale)); font-weight:700; letter-spacing:.08em;
  padding:2px 6px; border-radius:2px; text-transform:uppercase;
  background:var(--pb-surface-3); color:var(--pb-ink-2);
}
.tier.vip{ background:var(--pb-ink); color:var(--pb-ground); }
.tier.regular{ background:var(--pb-accent-soft); color:var(--pb-accent); }
html[data-theme="dark"] .tier.regular{ color:var(--pb-ok); }
.tier.new{ background:var(--pb-rust-soft); color:var(--pb-rust); }

.crm-one-h{ margin-bottom:12px; }
.crm-back{ border:none; background:none; padding:6px 0; cursor:pointer;
  font-family:var(--pb-sans); font-weight:700; color:var(--pb-ink-2);
  font-size:calc(12px * var(--pb-scale)); min-height:32px; }
.crm-back:hover{ color:var(--pb-ink); }
.crm-hero{ display:flex; gap:14px; align-items:center; margin-bottom:16px; }
.crm-hero .cn{ font-family:var(--pb-serif); font-size:calc(21px * var(--pb-scale)); font-weight:600; }
.crm-flag{ padding:11px 13px; margin-bottom:14px;
  border-left:3px solid var(--pb-warn); background:var(--pb-surface-2);
  font-size:calc(12px * var(--pb-scale)); color:var(--pb-ink); line-height:1.6; }
.crm-sec{ margin-bottom:18px; }
.crm-sec h4{ margin:0 0 9px; font-family:var(--pb-sans); text-transform:uppercase;
  letter-spacing:.14em; font-size:calc(9.5px * var(--pb-scale)); font-weight:600; color:var(--pb-ink-3); }
.crm-taste{ display:flex; flex-wrap:wrap; gap:7px; }
.crm-taste span{ padding:7px 11px; border:1px solid var(--pb-line-2); border-radius:var(--pb-r);
  font-size:calc(11.5px * var(--pb-scale)); color:var(--pb-ink); }
.crm-taste b{ margin-left:6px; color:var(--pb-ink-3); }
.crm-ord{ border:var(--pb-hair); border-radius:var(--pb-r); padding:11px 12px; margin-bottom:7px;
  background:var(--pb-surface); }
.crm-ord .oh{ display:flex; justify-content:space-between; font-weight:700;
  font-size:calc(12.5px * var(--pb-scale)); }
.crm-ord .ob{ margin-top:5px; font-size:calc(11.5px * var(--pb-scale)); color:var(--pb-ink); line-height:1.5; }
.crm-ord .os{ margin-top:4px; font-size:calc(10.5px * var(--pb-scale)); color:var(--pb-ink-3); }
.crm-wa{
  display:block; text-align:center; text-decoration:none; padding:15px;
  border-radius:var(--pb-r); background:#0F7C68; color:#FFFFFF;
  font-weight:700; text-transform:uppercase; letter-spacing:.08em;
  font-size:calc(11.5px * var(--pb-scale));
}

/* size mix, on the Closet console's 營業數據 screen: stock share against sales
   share, per size, with only the gaps big enough to change an order called out */
.mix{ display:grid; grid-template-columns:34px 1fr 38px 1fr 38px; gap:7px; align-items:center;
  padding:7px 0; border-bottom:var(--pb-hair); font-size:calc(11px * var(--pb-scale)); }
.mix:last-child{ border-bottom:none; }
.mix .mk{ font-weight:700; }
.mix .mb{ height:8px; border-radius:2px; background:var(--pb-surface-3); overflow:hidden; }
.mix .mb i{ display:block; height:100%; }
.mix .mb .st{ background:var(--pb-ink-3); }
.mix .mb .sd{ background:var(--pb-ink); }
.mix .mn{ text-align:right; color:var(--pb-ink-2); }
.mix .mv{ grid-column:1/-1; color:var(--pb-ink-2); font-size:calc(10.5px * var(--pb-scale)); }
.mix.under .mv{ color:var(--pb-ok); }
.mix.over .mv{ color:var(--pb-warn); }

/* the note on a weather-held booking in 我的 */
.bk-hold-note{
  flex:1 1 100%;
  padding:9px 11px; margin-bottom:7px;
  border-left:3px solid var(--pb-warn);
  background:var(--pb-surface-2);
  font-size:calc(11.5px * var(--pb-scale)); line-height:1.6; color:var(--pb-ink-2);
}

/* ==========================================================================
   Top-bar navigation
   --------------------------------------------------------------------------
   The section tabs used to float in a bar pinned to the bottom of the screen.
   They now sit in the top bar, on the same row as the menu button and the
   language switch, and the drawer behind ☰ carries the same sections again
   plus 關於本店 and the settings.

   The tab strip is the same <nav class="tabbar"> the page already had — it is
   moved, not rebuilt — so every button id, badge and active-state line in the
   page's own script keeps working untouched.
   ========================================================================== */
.topbar.pb-topnav{ gap:5px; padding-left:8px; padding-right:8px; }
/* Model ships no .icon-btn rule of its own — without a floor the ☰ this file
   adds collapses to the size of the glyph, well under a thumb's worth. */
.topbar.pb-topnav .icon-btn{
  min-width:36px; min-height:36px; flex:none;
  display:inline-flex; align-items:center; justify-content:center;
  font-size:16px; line-height:1; }

/* The unified .tabbar rules above set every layout property with !important —
   they had to, because the four pages each shipped their own floating pill and
   the only way to land one design on all of them was to outrank each. Moving
   the strip into the top bar has to outrank that in turn, so these repeat the
   !important with a heavier selector rather than quietly losing to it. */
.topbar.pb-topnav .tabbar{
  position:static !important; transform:none !important;
  top:auto !important; bottom:auto !important; left:auto !important; right:auto !important;
  width:auto !important; max-width:none !important; height:auto !important;
  flex:1 1 auto !important; min-width:0;
  display:flex !important; align-items:center !important; justify-content:flex-start !important;
  gap:1px !important; padding:0 !important; padding-bottom:0 !important; margin:0 !important;
  background:none !important; box-shadow:none !important;
  border:none !important; border-top:none !important; border-bottom:none !important;
  border-radius:0 !important; backdrop-filter:none !important; z-index:auto !important;
  overflow-x:auto; overflow-y:hidden; scrollbar-width:none; -ms-overflow-style:none;
  /* the strip scrolls rather than wraps: five Chinese labels plus a badge do
     not fit a 320px phone, and a wrapped second row would push the page down */
  -webkit-overflow-scrolling:touch;
}

/* The wide-screen variant moved the strip to a fixed bar across the very top
   and pushed the page down 54px to clear it. With the tabs inside the bar
   there is nothing to clear, and the bar itself must stay stuck to the top. */
body.pb-topnav-on.pb-customer{ padding-top:0 !important; }
body.pb-topnav-on.pb-customer .topbar{ position:sticky !important; top:0 !important; }
.topbar.pb-topnav .tabbar::-webkit-scrollbar{ display:none; }

.topbar.pb-topnav .tabbar button{
  flex:0 0 auto; position:relative;
  display:flex; flex-direction:row; align-items:center; gap:3px;
  padding:6px 7px !important; border-radius:10px !important;
  font-size:11px; font-weight:700; line-height:1.15; white-space:nowrap;
  height:auto !important; min-width:0 !important; width:auto !important;
}
.topbar.pb-topnav .tabbar button .ti,
.topbar.pb-topnav .tabbar button .ic{ font-size:12.5px; line-height:1; }
.topbar.pb-topnav .tabbar button .pip,
.topbar.pb-topnav .tabbar button .cartn,
.topbar.pb-topnav .tabbar button .bdg{
  position:static; min-width:14px; height:14px; padding:0 3px; border-radius:7px;
  font-size:9px; font-weight:800; line-height:14px; text-align:center;
}
/* The page keeps its own colour for the selected tab; only the shape changes. */
.topbar.pb-topnav .tabbar button.on,
.topbar.pb-topnav .tabbar button.active{ border-radius:10px; }

/* Nothing is pinned to the bottom any more, so the tall reserve the pages kept
   for the old floating bar becomes dead space at the end of every screen. */
body.pb-topnav-on .app{ padding-bottom:26px; }

/* ------------------------------------------------------------------ drawer */
.pb-scrim{ position:fixed; inset:0; z-index:90; background:rgba(12,12,14,.42);
  opacity:0; pointer-events:none; transition:opacity .18s ease; }
.pb-scrim.on{ opacity:1; pointer-events:auto; }

.pb-drawer{ position:fixed; z-index:91; top:0; left:0; bottom:0;
  width:min(302px, 84vw); display:flex; flex-direction:column;
  background:var(--pb-surface, #fff); color:var(--pb-ink, #16181d);
  box-shadow:0 0 34px rgba(0,0,0,.24);
  /* Hidden as well as slid away: a drawer parked at translateX(-100%) still
     reports a box 302px off the left edge, which is a real left-overflow to
     anything measuring the page — and its rows stay tabbable. */
  transform:translateX(-100%); visibility:hidden;
  transition:transform .2s ease, visibility 0s linear .2s;
  overflow-y:auto; -webkit-overflow-scrolling:touch;
  padding-bottom:calc(16px + env(safe-area-inset-bottom)); }
.pb-drawer.on{ transform:none; visibility:visible; transition:transform .2s ease, visibility 0s; }
@media (prefers-reduced-motion:reduce){
  .pb-drawer, .pb-scrim{ transition:none; }
}

.pb-drawer-head{ display:flex; align-items:flex-start; gap:10px;
  padding:15px 14px 12px; border-bottom:1px solid var(--pb-hair, rgba(0,0,0,.09)); }
.pb-drawer-head b{ display:block; font-size:15px; font-weight:800; line-height:1.25; }
.pb-drawer-head span{ display:block; font-size:11px; margin-top:2px;
  color:var(--pb-muted, #6b7280); line-height:1.4; }
.pb-drawer-x{ margin-left:auto; flex:none; width:30px; height:30px; border:none;
  border-radius:9px; background:var(--pb-sunk, rgba(0,0,0,.05));
  color:inherit; font-size:15px; line-height:1; cursor:pointer; }

.pb-drawer-label{ padding:13px 15px 5px; font-size:9.5px; font-weight:800;
  letter-spacing:.14em; text-transform:uppercase; color:var(--pb-muted, #6b7280); }

.pb-drawer .pb-nav-item{ display:flex; align-items:center; gap:9px; width:100%;
  border:none; background:none; font-family:inherit; text-align:left; cursor:pointer;
  padding:11px 15px; font-size:13.5px; font-weight:600; color:inherit; }
.pb-drawer .pb-nav-item .pb-nav-ico{ font-size:15px; line-height:1; width:19px; flex:none; }
.pb-drawer .pb-nav-item:hover{ background:var(--pb-sunk, rgba(0,0,0,.045)); }
.pb-drawer .pb-nav-item.on{ background:var(--pb-sunk, rgba(0,0,0,.06)); }
.pb-drawer .pb-nav-item.on .pb-nav-ico{ transform:none; }
.pb-drawer .pb-nav-item .pb-nav-pip{ margin-left:auto; min-width:17px; padding:0 5px;
  border-radius:9px; background:var(--pb-accent, #b4553a); color:#fff;
  font-size:9.5px; font-weight:800; line-height:17px; text-align:center; }
.pb-drawer-rule{ height:1px; margin:7px 15px;
  background:var(--pb-hair, rgba(0,0,0,.09)); }

.pb-drawer .pb-lang-row{ display:flex; align-items:center; gap:9px; padding:9px 15px 13px; }
.pb-drawer .pb-lang-row > span{ font-size:13.5px; font-weight:600; }
.pb-drawer .pb-lang-row .pb-lang-btns{ margin-left:auto; display:flex; gap:3px;
  background:var(--pb-sunk, rgba(0,0,0,.06)); border-radius:9px; padding:2px; }
.pb-drawer .pb-lang-row button{ border:none; background:none; font-family:inherit;
  font-size:11.5px; font-weight:700; padding:4px 9px; border-radius:7px;
  color:inherit; cursor:pointer; }
.pb-drawer .pb-lang-row button.on{ background:var(--pb-surface, #fff);
  box-shadow:0 1px 3px rgba(0,0,0,.14); }

:root[data-theme="dark"] .pb-drawer{ background:#1b1f24; color:#e6e9ea; }
:root[data-theme="dark"] .pb-drawer-head{ border-bottom-color:rgba(255,255,255,.12); }
:root[data-theme="dark"] .pb-drawer-rule{ background:rgba(255,255,255,.12); }
:root[data-theme="dark"] .pb-drawer .pb-nav-item:hover,
:root[data-theme="dark"] .pb-drawer .pb-nav-item.on{ background:rgba(255,255,255,.07); }
:root[data-theme="dark"] .pb-drawer-x,
:root[data-theme="dark"] .pb-drawer .pb-lang-row .pb-lang-btns{ background:rgba(255,255,255,.09); }
:root[data-theme="dark"] .pb-drawer .pb-lang-row button.on{ background:#2b3138; }

/* ==========================================================================
   SF self-pickup picker (propel-sf.js)
   The address box is the field that goes wrong most often on a courier order,
   so it gets a district → point pair and a search above it. Typing into the
   box underneath still works — a point that is not on the list never blocks
   the order.
   ========================================================================== */
.sf-pick{ display:flex; flex-direction:column; gap:7px; margin-bottom:9px; }
.sf-pick[hidden]{ display:none !important; }
.sf-row{ display:flex; gap:7px; }
.sf-row.sf-two > *{ flex:1 1 0; min-width:0; }

.sf-pick .sf-q,
.sf-pick select{
  width:100%; min-width:0; box-sizing:border-box;
  font-family:inherit; font-size:13.5px; line-height:1.3;
  padding:10px 11px; min-height:42px;
  border:1px solid var(--pb-hair, rgba(0,0,0,.16)); border-radius:10px;
  background:var(--pb-surface, #fff); color:var(--pb-ink, #16181d);
  -webkit-appearance:none; appearance:none;
}
.sf-pick select{
  background-image:linear-gradient(45deg,transparent 50%,currentColor 50%),
                   linear-gradient(135deg,currentColor 50%,transparent 50%);
  background-position:calc(100% - 15px) 50%, calc(100% - 10px) 50%;
  background-size:5px 5px, 5px 5px; background-repeat:no-repeat;
  padding-right:28px;
}
.sf-pick select:disabled{ opacity:.55; }
.sf-pick .sf-q:focus, .sf-pick select:focus{
  outline:2px solid var(--pb-accent, #b4553a); outline-offset:1px; }

.sf-pick .sf-hits{
  display:flex; flex-direction:column; gap:1px; max-height:230px; overflow-y:auto;
  border:1px solid var(--pb-hair, rgba(0,0,0,.16)); border-radius:10px;
  background:var(--pb-surface, #fff); }
.sf-pick .sf-hit{
  display:flex; flex-direction:column; gap:2px; width:100%;
  text-align:left; border:none; background:none; font-family:inherit; cursor:pointer;
  padding:9px 11px; color:inherit;
  border-bottom:1px solid var(--pb-hair, rgba(0,0,0,.08)); }
.sf-pick .sf-hit:last-child{ border-bottom:none; }
.sf-pick .sf-hit:hover{ background:var(--pb-sunk, rgba(0,0,0,.05)); }
.sf-pick .sf-hit b{ font-size:13px; font-weight:700; }
.sf-pick .sf-hit span{ font-size:10.5px; color:var(--pb-muted, #6b7280); }
.sf-pick .sf-hit em{ font-size:11px; font-style:normal; color:var(--pb-muted, #6b7280);
  line-height:1.4; }
.sf-pick .sf-none{ padding:10px 11px; font-size:12px; color:var(--pb-muted, #6b7280); }
.sf-pick .sf-note{ margin:0; font-size:11px; line-height:1.5;
  color:var(--pb-muted, #6b7280); }

:root[data-theme="dark"] .sf-pick .sf-q,
:root[data-theme="dark"] .sf-pick select,
:root[data-theme="dark"] .sf-pick .sf-hits{
  background:#1b2023; color:#e4e8ea; border-color:rgba(255,255,255,.16); }
:root[data-theme="dark"] .sf-pick .sf-hit{ border-bottom-color:rgba(255,255,255,.09); }
:root[data-theme="dark"] .sf-pick .sf-hit:hover{ background:rgba(255,255,255,.07); }
.sf-pick .sf-tag{ display:inline-block; margin-left:5px; padding:1px 5px; border-radius:5px;
  font-style:normal; font-size:9.5px; font-weight:700; letter-spacing:.04em;
  background:var(--pb-sunk, rgba(0,0,0,.08)); color:var(--pb-muted, #6b7280); }
:root[data-theme="dark"] .sf-pick .sf-tag{ background:rgba(255,255,255,.12); }

/* --------------------------------------------------------------------------
   Top-bar navigation, corrections
   The shared strip above was drawn for a bar pinned to the BOTTOM of the
   screen. Three of its decisions are wrong once the same markup sits at the
   top, and each is stated with !important there, so each has to be answered.
   -------------------------------------------------------------------------- */

/* 1. The active indicator is `inset 0 2px 0` — a line along the tab's TOP
      edge. Under a bottom bar that line sits against the content and reads as
      "you are here". At the top it lands under the bar's own edge and reads as
      a stray outline, and above 1024px a second indicator (border-bottom) is
      added, so the two together draw what looks like a box around the tab.
      In the top bar the selected tab is a filled pill, which is what these
      pages drew for themselves before the strip moved. */
.topbar.pb-topnav .tabbar > button.on,
.topbar.pb-topnav .tabbar > button.active{
  box-shadow:none !important;
  border-bottom-color:transparent !important;
  background:var(--pb-surface-3, rgba(0,0,0,.07)) !important;
  border-radius:10px !important;
}

/* 2. Above 1024px the wide-screen rule uppercases the labels and adds .1em of
      tracking. Chinese has no case, so the uppercase does nothing, and the
      tracking pulls 購物車 apart into three floating characters. */
.topbar.pb-topnav .tabbar > button{
  text-transform:none !important;
  letter-spacing:.01em !important;
  border-bottom:none !important;
}

/* 3. Every customer page reserved 72px at its foot to clear the floating bar.
      Nothing is pinned to the bottom any more, so that is 72px of dead space
      under the last row of every screen. */
body.pb-topnav-on.pb-customer{ padding-bottom:0 !important; }

/* In dark the surface token the pill borrows sits ~0.01 luminance from the bar
   behind it — technically a fill, visually nothing, so the selected tab reads
   as unselected. A translucent white lifts it clear of whatever the bar is
   without needing a token per page. Written for all three theme states: the
   stamped choice, and the unstamped default where only the OS setting says
   which one the viewer is in. */
@media (prefers-color-scheme:dark){
  :root:not([data-theme="light"]) .topbar.pb-topnav .tabbar > button.on,
  :root:not([data-theme="light"]) .topbar.pb-topnav .tabbar > button.active{
    background:rgba(255,255,255,.13) !important;
  }
}
:root[data-theme="dark"] .topbar.pb-topnav .tabbar > button.on,
:root[data-theme="dark"] .topbar.pb-topnav .tabbar > button.active{
  background:rgba(255,255,255,.13) !important;
}

/* =================================================================== showcase
   propel-showcase.js: the hero banner, the hashtag band, the photo reel and
   the end block (WhatsApp card, payment methods, footer) on the three shop
   fronts. The hero is a dark plate with gold in BOTH themes, like the cover
   it replaces, so its colours are literal; the gold band and the WhatsApp card
   keep their fill in dark mode too and so carry their own dark ink. Only the
   payment row and the footer follow the theme tokens.

   Both moving bands pause under a pointer or a finger and stop under
   prefers-reduced-motion, when they scroll by hand instead. */
:root{
  --pbs-gold:#E2B54E;
  --pbs-gold-hi:#FFF0C2;
  --pbs-gold-lo:#B98A2C;
  --pbs-band:#D2A93F;
  --pbs-card:#EDC54E;
  --pbs-gold-ink:#1C1606;
  --pbs-plate:#12100D;
}

/* -------------------------------------------------------- campaign hero
   A carousel of slides (the Closet). Each slide is one photo on its own
   studio colour (--camp-bg), one line and one button on the photo's clear
   side; on a phone the photo sits on top and fades into that colour, with
   the words under it. Slides switch to the right. */
.pbs-camp{ position:relative; overflow:hidden; isolation:isolate; height:580px; background:#111; }
.pbs-slides{ position:absolute; inset:0; }
.pbs-slide{ position:absolute; inset:0; visibility:hidden; opacity:0; background:var(--camp-bg, #FEDE62);
  color:#141414; touch-action:pan-y; user-select:none; -webkit-user-select:none; }
.pbs-slide.on{ visibility:visible; opacity:1; z-index:1; }
.pbs-camp-ph{ position:absolute; left:0; right:0; top:0; height:68%;
  -webkit-mask-image:linear-gradient(180deg, #000 78%, transparent);
          mask-image:linear-gradient(180deg, #000 78%, transparent); }
.pbs-camp-ph img{ width:100%; height:100%; object-fit:cover; object-position:var(--ph-pos, 50% 50%); display:block;
  -webkit-user-drag:none; pointer-events:none; }
.pbs-camp-cp{ position:absolute; left:22px; right:22px; bottom:30px; z-index:1; }
.pbs-camp-k{ font-family:var(--pb-sans, system-ui); font-size:12px; font-weight:800; letter-spacing:.22em;
  color:inherit; margin-bottom:8px; }
.pbs-camp-h{ font-family:'Noto Sans HK', var(--pb-sans, system-ui); font-weight:900; font-size:clamp(28px, 8.2vw, 38px);
  line-height:1.14; letter-spacing:.01em; color:inherit; word-break:keep-all; text-wrap:balance; }
/* The button: a solid block with a long arrow, and an outline offset behind
   it that it presses down into — the shape a Hong Kong shopper knows from
   the big sportswear stores. Black on a light colour, white on a strong one. */
.pbs-camp-btn{ position:relative; display:inline-flex; align-items:center; justify-content:space-between;
  gap:36px; min-width:230px; margin:20px 6px 6px 0; padding:17px 22px; border:none; border-radius:0; cursor:pointer;
  background:#111; color:#fff; font-family:'Noto Sans HK', var(--pb-sans, system-ui); font-size:16px; font-weight:800;
  letter-spacing:.14em; text-align:left; transition:transform .16s cubic-bezier(.16,1,.3,1); }
.pbs-camp-btn::after{ content:''; position:absolute; inset:0; z-index:-1; border:1.5px solid #111;
  transform:translate(5px, 5px); transition:transform .16s cubic-bezier(.16,1,.3,1); pointer-events:none; }
.pbs-camp-arrow{ width:34px; height:14px; flex:none; transition:transform .25s cubic-bezier(.16,1,.3,1); }
.pbs-camp-btn:hover .pbs-camp-arrow{ transform:translateX(5px); }
.pbs-camp-btn:active{ transform:translate(5px, 5px); }
.pbs-camp-btn:active::after{ transform:translate(0, 0); }
.pbs-camp-btn:focus-visible{ outline:3px solid currentColor; outline-offset:4px; }
.pbs-ink-light{ color:#fff; }
.pbs-ink-light .pbs-camp-btn{ background:#fff; color:#111; }
.pbs-ink-light .pbs-camp-btn::after{ border-color:#fff; }
.pbs-ink-light .pbs-camp-btn:focus-visible{ outline-color:#fff; }

/* arrows and dots: white on a dark glass pill, so they read on every colour */
.pbs-arrow{ position:absolute; z-index:3; top:34%; transform:translateY(-50%); width:44px; height:44px; border-radius:50%;
  border:none; cursor:pointer; display:grid; place-items:center; color:#fff;
  background:rgba(17,17,17,.32); -webkit-backdrop-filter:blur(6px); backdrop-filter:blur(6px);
  transition:background-color .2s ease, transform .16s cubic-bezier(.16,1,.3,1); }
.pbs-arrow svg{ width:22px; height:22px; }
.pbs-arrow:hover{ background:rgba(17,17,17,.55); }
.pbs-arrow:active{ transform:translateY(-50%) scale(.92); }
.pbs-arrow:focus-visible{ outline:3px solid #fff; outline-offset:2px; }
.pbs-prev{ left:10px; } .pbs-next{ right:10px; }
.pbs-dots{ position:absolute; z-index:3; left:50%; top:calc(68% - 44px); transform:translateX(-50%);
  display:flex; align-items:center; gap:2px; padding:2px 8px; border-radius:999px;
  background:rgba(17,17,17,.32); -webkit-backdrop-filter:blur(6px); backdrop-filter:blur(6px); }
.pbs-dot{ width:30px; height:30px; padding:0; border:none; background:none; cursor:pointer; display:grid; place-items:center; }
.pbs-dot i{ position:relative; display:block; width:8px; height:8px; border-radius:999px; overflow:hidden;
  background:rgba(255,255,255,.55); transition:width .3s cubic-bezier(.16,1,.3,1), background-color .2s ease; }
.pbs-dot.on i{ width:26px; background:rgba(255,255,255,.55); }
.pbs-dot.on i::after{ content:''; position:absolute; inset:0; background:#fff; transform-origin:0 50%; }
.pbs-dot:focus-visible{ outline:2px solid #fff; outline-offset:-2px; border-radius:999px; }
/* the active dot fills over the time the slide is shown */
.pbs-playing .pbs-dot.on i::after{ animation:pbs-fill 6s linear both; }
@keyframes pbs-fill{ from{ transform:scaleX(0); } to{ transform:scaleX(1); } }

/* switching: the new slide comes in from the right, the old one leaves to
   the left a little faster; its words rise in after the photo */
.pbs-in-r{ animation:pbs-in-r .62s cubic-bezier(.16,1,.3,1) both; }
.pbs-in-l{ animation:pbs-in-l .62s cubic-bezier(.16,1,.3,1) both; }
.pbs-out-l{ visibility:visible; z-index:0; animation:pbs-out-l .45s cubic-bezier(.4,0,1,1) both; }
.pbs-out-r{ visibility:visible; z-index:0; animation:pbs-out-r .45s cubic-bezier(.4,0,1,1) both; }
@keyframes pbs-in-r{ from{ opacity:0; transform:translateX(9%); } to{ opacity:1; transform:none; } }
@keyframes pbs-in-l{ from{ opacity:0; transform:translateX(-9%); } to{ opacity:1; transform:none; } }
@keyframes pbs-out-l{ from{ opacity:1; transform:none; } to{ opacity:0; transform:translateX(-6%); } }
@keyframes pbs-out-r{ from{ opacity:1; transform:none; } to{ opacity:0; transform:translateX(6%); } }
.pbs-in-r .pbs-camp-k, .pbs-in-l .pbs-camp-k{ animation:pbs-rise .5s .18s cubic-bezier(.16,1,.3,1) both; }
.pbs-in-r .pbs-camp-h, .pbs-in-l .pbs-camp-h{ animation:pbs-rise .55s .26s cubic-bezier(.16,1,.3,1) both; }
.pbs-in-r .pbs-camp-btn, .pbs-in-l .pbs-camp-btn{ animation:pbs-rise .55s .36s cubic-bezier(.16,1,.3,1) both; }
@keyframes pbs-rise{ from{ opacity:0; transform:translateY(14px); } to{ opacity:1; transform:none; } }

@media (min-width:821px){
  /* the photos are 16:9 with the model to one side; at half the width tall
     the whole of the model shows and the other side is clear colour */
  .pbs-camp{ height:auto; aspect-ratio:2 / 1; max-height:640px; min-height:420px; }
  .pbs-camp-ph{ inset:0; height:auto; -webkit-mask-image:none; mask-image:none; }
  .pbs-camp-ph img{ object-position:var(--desk-pos, 50% 50%); }
  .pbs-camp-cp{ top:50%; bottom:auto; transform:translateY(-50%); width:38%; }
  .pbs-side-right .pbs-camp-cp{ left:auto; right:6%; }
  .pbs-side-left .pbs-camp-cp{ left:6%; right:auto; }
  .pbs-camp-k{ font-size:14px; margin-bottom:14px; }
  .pbs-camp-h{ font-size:clamp(34px, 3.4vw, 54px); }
  .pbs-camp-btn{ margin-top:30px; }
  .pbs-arrow{ top:50%; width:48px; height:48px; }
  .pbs-prev{ left:16px; } .pbs-next{ right:16px; }
  .pbs-dots{ top:auto; bottom:18px; }
}
@media (prefers-reduced-motion: reduce){
  .pbs-camp-btn, .pbs-camp-btn::after, .pbs-camp-arrow, .pbs-arrow, .pbs-dot i{ transition:none; }
  .pbs-in-r, .pbs-in-l, .pbs-out-l, .pbs-out-r,
  .pbs-in-r *, .pbs-in-l *{ animation:none !important; }
  .pbs-out-l, .pbs-out-r{ visibility:hidden; }
}
/* the campaign keeps its own colours in dark mode: they are photographs */
html[data-theme="dark"] .pbs-slide{ background:var(--camp-bg, #FEDE62); }
html[data-theme="dark"] .pbs-slide.pbs-ink-dark{ color:#141414; }
.pbs-foot .pbs-foot-ig{ margin-top:0; color:var(--pb-ink-2, #4A4A4A); }

/* ------------------------------------------------------------------ hero */
.pbs-hero{ position:relative; overflow:hidden; isolation:isolate;
  background:var(--pbs-plate); color:#F4EBD7; }
.pbs-hero::before{ content:''; position:absolute; inset:0; z-index:-1; pointer-events:none;
  background:
    radial-gradient(circle at 16% 30%, rgba(226,181,78,.20), transparent 40%),
    radial-gradient(circle at 78% 88%, rgba(226,181,78,.12), transparent 42%); }
.pbs-art{ display:grid; grid-template-columns:minmax(0,1.35fr) minmax(0,1fr);
  /* minmax(0,…): a bare 1fr row grows to the photo's own height, which made
     the art 500px tall on a phone and cut the third photo off */
  grid-template-rows:minmax(0,1fr) minmax(0,1fr);
  gap:5px; height:clamp(110px, 30vw, 150px); overflow:hidden;
  border-bottom:3px solid var(--pbs-gold); border-radius:0 0 50% 50% / 0 0 30px 30px; }
.pbs-art img{ width:100%; height:100%; object-fit:cover; display:block; min-width:0; min-height:0; }
.pbs-art img:first-child{ grid-row:1 / span 2; }
.pbs-copy{ padding:18px 18px 22px; text-align:center; }
.pbs-mark{ display:inline-flex; align-items:center; gap:10px; }
.pbs-mark-ic{ width:44px; height:44px; padding:9px; border-radius:50%; flex:none;
  border:1.6px solid var(--pbs-gold); stroke:var(--pbs-gold); fill:none; stroke-width:1.7;
  stroke-linecap:round; stroke-linejoin:round; }
.pbs-mark-t{ display:flex; flex-direction:column; align-items:flex-start; line-height:1; text-align:left; }
.pbs-mark-t b{ font-family:var(--pb-serif); font-size:22px; font-weight:800; color:#F6E3A8; font-style:italic; }
.pbs-mark-t i{ font-family:var(--pb-serif); font-size:13px; color:var(--pbs-gold); margin-top:3px; letter-spacing:.06em; }
.pbs-kicker{ margin-top:14px; font-size:11.5px; letter-spacing:.18em; color:rgba(244,235,215,.78); }
.pbs-ig{ margin-top:4px; font-size:12px; font-weight:700; letter-spacing:.06em; color:var(--pbs-gold); }
.pbs-ig:empty{ display:none; }
.pbs-slogan{ font-family:var(--pb-serif); font-weight:800; line-height:1.14; letter-spacing:.02em;
  font-size:clamp(30px, 8.6vw, 50px); margin:10px 0 8px; color:#EBC86A; }
@supports ((-webkit-background-clip:text) or (background-clip:text)){
  .pbs-slogan{ background:linear-gradient(180deg, var(--pbs-gold-hi) 0%, var(--pbs-gold) 48%, var(--pbs-gold-lo) 100%);
    -webkit-background-clip:text; background-clip:text; -webkit-text-fill-color:transparent; }
}
.pbs-sub{ display:flex; align-items:center; justify-content:center; gap:12px;
  font-family:var(--pb-serif); font-size:16px; letter-spacing:.18em; color:#F4EBD7; }
.pbs-sub i{ display:block; flex:0 1 52px; height:1px; background:linear-gradient(90deg, transparent, var(--pbs-gold)); }
.pbs-sub i:last-child{ background:linear-gradient(270deg, transparent, var(--pbs-gold)); }
.pbs-lede{ margin:14px auto 0; max-width:34em; font-size:13.5px; line-height:1.8; color:rgba(244,235,215,.88); }
.pbs-feats{ list-style:none; margin:20px 0 0; padding:0; display:grid; grid-template-columns:repeat(4, minmax(0,1fr)); }
.pbs-feats li{ display:flex; flex-direction:column; align-items:center; gap:8px; padding:0 4px;
  font-size:11.5px; font-weight:600; line-height:1.35; color:#F4EBD7; text-align:center;
  border-left:1px solid rgba(226,181,78,.35); }
.pbs-feats li:first-child{ border-left:none; }
.pbs-ic{ width:30px; height:30px; stroke:var(--pbs-gold); fill:none; stroke-width:1.6;
  stroke-linecap:round; stroke-linejoin:round; }
.pbs-hero .pbs-demo{ position:absolute; top:12px; right:12px; z-index:2; margin:0 !important; }
@media (min-width:720px){
  /* Left to itself the art grew to the photos' own height — 730px on a
     laptop — and pushed the shop below the fold. contain:size takes the
     photos out of the sum, so the banner is as tall as its words need and
     never less than the minimum; a fixed height clipped the longer English. */
  .pbs-hero{ display:grid; grid-template-columns:minmax(0,1.15fr) minmax(0,1fr); align-items:stretch;
    min-height:clamp(300px, 27vw, 360px); }
  .pbs-art{ order:2; height:auto; contain:size; border-bottom:none; border-left:3px solid var(--pbs-gold);
    border-radius:50% 0 0 50% / 50% 0 0 50%; }
  .pbs-copy{ order:1; text-align:left; padding:20px 30px; align-self:center; }
  .pbs-kicker{ margin-top:10px; }
  .pbs-slogan{ font-size:clamp(30px, 3.4vw, 44px); margin:6px 0 4px; }
  .pbs-lede{ margin-top:8px; font-size:13px; line-height:1.7; }
  .pbs-feats{ margin-top:14px; }
  .pbs-ic{ width:24px; height:24px; }
  .pbs-sub{ justify-content:flex-start; }
  .pbs-sub i:first-child{ display:none; }
  .pbs-lede{ margin-left:0; }
  .pbs-feats{ max-width:520px; }
  .pbs-feats li{ align-items:flex-start; text-align:left; padding:0 12px; }
  .pbs-feats li:first-child{ padding-left:0; }
}

/* ------------------------------------------------- the two moving bands */
.pbs-tags,.pbs-reel-view{ overflow-x:auto; overflow-y:hidden; scrollbar-width:none; -webkit-overflow-scrolling:touch; }
.pbs-tags::-webkit-scrollbar,.pbs-reel-view::-webkit-scrollbar{ display:none; }
.pbs-track,.pbs-reel-track{ display:flex; width:max-content; will-change:transform; }
.pbs-group{ display:flex; flex:none; align-items:center; }
@keyframes pbs-slide{ from{ transform:translateX(0); } to{ transform:translateX(-50%); } }
.pbs-track{ animation:pbs-slide 46s linear infinite; }
.pbs-reel-track{ animation:pbs-slide 70s linear infinite; }
.pbs-tags:hover .pbs-track,.pbs-tags:active .pbs-track,
.pbs-reel-view:hover .pbs-reel-track,.pbs-reel-view:active .pbs-reel-track,
.pbs-reel-view:focus-within .pbs-reel-track{ animation-play-state:paused; }

.pbs-tags{ background:var(--pbs-band); color:var(--pbs-gold-ink); padding:13px 0; }
.pbs-tags span{ font-weight:800; font-size:14px; letter-spacing:.07em; white-space:nowrap; padding:0 10px; }
.pbs-tags em{ font-style:normal; font-weight:800; opacity:.7; }

.pbs-reel{ padding:30px 0 6px; }
.pbs-sec-h{ padding:0 var(--gut, 16px) 14px; }
.pbs-kick{ display:flex; align-items:center; gap:10px; font-size:11px; font-weight:800;
  letter-spacing:.28em; color:var(--pb-rust); }
.pbs-kick i{ display:block; width:28px; height:2px; background:var(--pb-rust); }
.pbs-sec-t{ margin:8px 0 0 !important; font-size:clamp(26px, 7vw, 36px) !important; font-weight:800 !important;
  line-height:1.15 !important; color:var(--pb-ink); }
.pbs-reel-view{ padding:4px 0 16px; }
.pbs-reel-track .pbs-group{ gap:12px; padding-right:12px; }
.pbs-reel-track .pbs-group:first-child{ padding-left:var(--gut, 16px); }
.pbs-card{ position:relative; flex:none; width:168px; height:214px; padding:0; border:none; cursor:pointer;
  border-radius:16px; overflow:hidden; background:var(--pb-surface-3);
  box-shadow:0 8px 22px rgba(12,12,13,.14); transition:transform .25s ease; }
.pbs-card:hover{ transform:translateY(-3px); }
.pbs-card img{ width:100%; height:100%; object-fit:cover; display:block; }
.pbs-cap{ position:absolute; left:0; right:0; bottom:0; padding:9px 10px 10px; text-align:left;
  display:flex; flex-direction:column; gap:2px;
  /* a solid strip, not a fade: a white product shot under a fade left the
     caption's first line white on white */
  background-color:rgba(14,11,6,.84); color:#FFF8E6;
  font-size:12.5px; font-weight:700; line-height:1.3; }
.pbs-cap b{ color:#F6D57A; font-size:13px; }
@media (min-width:720px){ .pbs-card{ width:208px; height:262px; } }

/* -------------------------------------------------------- the end block */
.pbs-end{ padding:26px var(--gut, 16px) 0; }
.pbs-cta{ background:var(--pbs-card); color:var(--pbs-gold-ink); border-radius:24px;
  padding:30px 20px 28px; text-align:center; }
.pbs-cta-t{ margin:0 !important; font-size:clamp(18px, 5.1vw, 32px) !important; font-weight:800 !important;
  line-height:1.3 !important; color:var(--pbs-gold-ink) !important; letter-spacing:.01em !important; }
.pbs-cta-t i{ font-style:normal; font-weight:400; opacity:.55; margin:0 2px; }
/* each phrase stays whole; a line may only break between them */
.pbs-cta-t span{ white-space:nowrap; }
.pbs-cta-b{ margin:14px auto 22px; max-width:34em; font-size:14px; line-height:1.8; color:var(--pbs-gold-ink); }
.pbs-wa{ display:inline-flex; align-items:center; gap:9px; min-height:52px; padding:0 26px;
  background:#FFFFFF; color:#14110A !important; border-radius:999px; text-decoration:none;
  font-size:16px; font-weight:800; box-shadow:0 6px 18px rgba(60,44,6,.18); }
.pbs-wa .num{ font-variant-numeric:tabular-nums; }
.pbs-wa-ic{ width:24px; height:24px; flex:none; }

.pbs-pay{ display:flex; flex-wrap:wrap; gap:8px; justify-content:center; margin:22px 0 4px;
  padding:14px 0; border-top:1px solid var(--pb-line); border-bottom:1px solid var(--pb-line); }
.pbs-paychip{ display:inline-flex; align-items:center; gap:7px; padding:6px 10px; border-radius:10px;
  background:var(--pb-surface-2, var(--pb-surface)); border:1px solid var(--pb-line);
  font-size:12px; font-weight:700; color:var(--pb-ink); }
.pbs-paychip img{ height:24px; width:auto; flex:none; display:block; }
.pbs-paychip svg{ width:20px; height:20px; flex:none; display:block; }

.pbs-foot{ padding:24px 0 28px; color:var(--pb-ink); }
.pbs-foot-brand{ display:flex; align-items:center; justify-content:space-between; gap:14px; flex-wrap:wrap; }
.pbs-mark-sm .pbs-mark-ic{ width:40px; height:40px; padding:8px; border-color:var(--pb-ink); stroke:var(--pb-ink); }
.pbs-mark-sm .pbs-mark-t b{ color:var(--pb-ink); font-size:20px; }
.pbs-mark-sm .pbs-mark-t i{ color:var(--pb-ink-2); }
.pbs-social{ display:flex; gap:10px; }
.pbs-soc{ width:40px; height:40px; padding:0; border:none; background:none; border-radius:50%; cursor:pointer; }
.pbs-soc svg{ width:40px; height:40px; display:block; }
.pbs-cols{ display:grid; grid-template-columns:repeat(3, minmax(0,1fr)); gap:16px 12px; margin-top:22px; }
.pbs-col-t{ margin:0 0 8px !important; font-size:15px !important; font-weight:800 !important; color:var(--pb-ink); line-height:1.3 !important; }
.pbs-link{ display:block; width:100%; text-align:left; border:none; background:none; padding:6px 0;
  min-height:30px; font-family:inherit; font-size:13px; line-height:1.4; color:var(--pb-ink-2); cursor:pointer; }
.pbs-link:hover{ color:var(--pb-ink); text-decoration:underline; }
.pbs-copy-line{ margin-top:22px; padding-top:16px; border-top:1px solid var(--pb-line);
  text-align:center; font-size:11.5px; line-height:1.7; color:var(--pb-ink-2); }
@media (min-width:720px){
  .pbs-end{ padding-top:36px; }
  .pbs-cta{ padding:44px 32px 40px; }
  .pbs-foot{ display:grid; grid-template-columns:minmax(0,1fr) minmax(0,2.4fr); gap:20px 30px; align-items:start; }
  .pbs-foot-brand{ flex-direction:column; align-items:flex-start; }
  .pbs-cols{ margin-top:0; }
  .pbs-copy-line{ grid-column:1 / -1; }
}

/* a policy opened from the footer, in the shared bottom sheet */
.pbs-policy{ padding:8px 20px 18px; }
.pbs-policy-t{ margin:6px 0 12px !important; font-size:19px !important; }
.pbs-policy ul{ margin:0; padding-left:18px; }
.pbs-policy li{ font-size:13.5px; line-height:1.75; margin-bottom:6px; }
/* the shop's name stays the page's h1 for screen readers; the banner shows it */
.pbs-h1{ position:absolute !important; width:1px; height:1px; margin:-1px; padding:0; overflow:hidden;
  clip:rect(0 0 0 0); white-space:nowrap; border:0; }