/* =====================================================================
   Marvans Nov 1 look for everything BELOW the home hero and every other public page.
   Sir: Shoji White #F5F4EE pages, Deep Black #0B0B0B text + dark cards, magenta #DF1078 ONLY in the logo star.
   Buttons = the hero's thick-glass pill (light body, thin dark rim, inner grey ring, darker lip bottom-left).
   Cards = deep black glass (like the hero cards) or shoji frosted cards with the same thin rim.
   No burgundy, no pink, no colour glows, no wood, no decorative lines.
   Loads LAST on every public page (end of <body> in builder/layout.html; staff.html skips it in builder/build.py).
   The top bar (nav-shoji.css) and the home hero (#fix) are not touched here.
   To undo: remove the shoji-rest.css line from builder/layout.html and rebuild.
   ===================================================================== */
:root{
  --sj:#F5F4EE; --sj-2:#ECEBE5; --dk:#0B0B0B; --dk-2:#161615;
  --ink-2:#4a4a48; --ink-3:#6b6a66;
  --mag:#0B0B0B; --link:#0B0B0B; --link-dark:#F5F4EE; --focus:#0B0B0B; --burg:#0B0B0B;
  /* the reference glass pill (measured, same as the hero buttons) */
  --gp-bg:#F7F6F1;
  --gp-sh:inset 0 0 0 1px rgba(11,11,11,.42),inset 0 1px 0 1px rgba(11,11,11,.18),inset 0 0 14px 2px rgba(11,11,11,.13),
          inset 0 0 4px 0 rgba(11,11,11,.10),-1.5px 2px 0 -.5px rgba(11,11,11,.72),0 6px 14px -8px rgba(11,11,11,.30);
  --gp-sh-h:inset 0 0 0 1px rgba(11,11,11,.5),inset 0 1px 0 1px rgba(11,11,11,.2),inset 0 0 16px 2px rgba(11,11,11,.15),
          inset 0 0 4px 0 rgba(11,11,11,.12),-1.5px 3px 0 -.5px rgba(11,11,11,.78),0 10px 20px -10px rgba(11,11,11,.35);
  /* the same pill INVERTED (deep black body, shoji rim/ring/lip) for dark sections */
  --gpd-bg:#0B0B0B;
  --gpd-sh:inset 0 0 0 1px rgba(245,244,238,.42),inset 0 1px 0 1px rgba(245,244,238,.18),inset 0 0 14px 2px rgba(245,244,238,.13),
          inset 0 0 4px 0 rgba(245,244,238,.10),-1.5px 2px 0 -.5px rgba(245,244,238,.72),0 6px 14px -8px rgba(0,0,0,.5);
  --gpd-sh-h:inset 0 0 0 1px rgba(245,244,238,.5),inset 0 1px 0 1px rgba(245,244,238,.2),inset 0 0 16px 2px rgba(245,244,238,.15),
          inset 0 0 4px 0 rgba(245,244,238,.12),-1.5px 3px 0 -.5px rgba(245,244,238,.78),0 10px 20px -10px rgba(0,0,0,.6);
  /* deep black glass card = the hero cards (the button recipe inverted, end of nav-shoji.css) */
  --dc-bg:#0B0B0B;
  --dc-sh:inset 0 0 0 1px rgba(245,244,238,.42),inset 0 1px 0 1px rgba(245,244,238,.16),inset 0 0 26px 4px rgba(245,244,238,.11),
          inset 0 0 6px 0 rgba(245,244,238,.10),-2px 3px 0 -1px rgba(245,244,238,.72),0 8px 18px -10px rgba(11,11,11,.35),0 36px 60px -30px rgba(11,11,11,.45);
  --dc-rim:0;
  /* shoji frosted card, thin dark rim */
  --sc-bg:linear-gradient(180deg,rgba(255,255,255,.72) 0%,rgba(247,246,241,.9) 100%);
  --sc-sh:inset 0 1px 0 rgba(255,255,255,.95),0 0 0 1px rgba(11,11,11,.14),0 2px 6px rgba(11,11,11,.05),0 22px 44px -26px rgba(11,11,11,.30);
  --sc-sh-h:inset 0 1px 0 #fff,0 0 0 1px rgba(11,11,11,.22),0 4px 10px rgba(11,11,11,.07),0 30px 56px -28px rgba(11,11,11,.38);
  --spr:cubic-bezier(.34,1.45,.5,1); --ease-o:cubic-bezier(.16,1,.3,1);
}
html body:not(.staff){background:var(--sj)}
html body :focus-visible{outline-color:var(--dk)}
::selection{background:rgba(11,11,11,.85);color:var(--sj)}

/* =========================== BUTTONS =========================== */
/* light thick-glass pill (every button on shoji) */
html body :is(.pill,.hpm-pill,.hgrid-pill,.hgrid-pill-2,.hacc-pill,.hacc-pill-line,.ln-btn,.bk-btn,.rex-btn,.cox-pill,.acx-btn,.abx-btn,.hvisit-pill,.hvisit-pill-line):not(#fix *){
  background:var(--gp-bg) !important;background-image:none !important;color:var(--dk) !important;border-color:transparent !important;
  box-shadow:var(--gp-sh) !important;filter:none !important;text-shadow:none !important;font-weight:600;
  -webkit-backdrop-filter:none !important;backdrop-filter:none !important;translate:none !important;
  transition:transform .45s var(--spr),box-shadow .35s ease !important}
html body :is(.pill,.hpm-pill,.ln-btn,.bk-btn,.cox-pill,.acx-btn,.abx-btn):not(#fix *)::before{display:none !important}
html body :is(.pill,.hpm-pill,.hgrid-pill,.hgrid-pill-2,.ln-btn,.bk-btn,.cox-pill,.acx-btn,.abx-btn,.hvisit-pill,.hvisit-pill-line):not(#fix *)::after{background:none !important;box-shadow:none !important}
html body :is(.pill,.hpm-pill,.hgrid-pill,.hgrid-pill-2,.hacc-pill,.hacc-pill-line,.ln-btn,.bk-btn,.rex-btn,.cox-pill,.acx-btn,.abx-btn,.hvisit-pill,.hvisit-pill-line):not(#fix *) svg{stroke:currentColor}
@media (hover:hover) and (pointer:fine){
  html body :is(.pill,.hpm-pill,.hgrid-pill,.hgrid-pill-2,.hacc-pill,.hacc-pill-line,.ln-btn,.bk-btn,.rex-btn,.cox-pill,.acx-btn,.abx-btn,.hvisit-pill,.hvisit-pill-line):not(#fix *):hover{
    transform:translateY(-2px) scale(1.03);box-shadow:var(--gp-sh-h) !important;filter:none !important}
}
html body :is(.pill,.hpm-pill,.hgrid-pill,.hgrid-pill-2,.hacc-pill,.hacc-pill-line,.ln-btn,.bk-btn,.rex-btn,.cox-pill,.acx-btn,.abx-btn,.hvisit-pill,.hvisit-pill-line):not(#fix *):active{transform:scale(.97);transition-duration:.12s !important}
/* on dark sections: the main button stays the light pill, the second one is the same pill in deep black */
html body #main :is(.tile.dark,.hgrid-dark,.hvisit-card--dark,.sbv-how,.abv-dark,.dk-sec) :is(.pill-line,.hgrid-pill-2,.hacc-pill-line,.hvisit-pill-line,.bk-btn-line){
  background:var(--gpd-bg) !important;color:var(--sj) !important;box-shadow:var(--gpd-sh) !important}
@media (hover:hover) and (pointer:fine){
  html body #main :is(.tile.dark,.hgrid-dark,.hvisit-card--dark,.sbv-how,.abv-dark,.dk-sec) :is(.pill-line,.hgrid-pill-2,.hacc-pill-line,.hvisit-pill-line,.bk-btn-line):hover{box-shadow:var(--gpd-sh-h) !important}
}
html body :focus-visible:is(.pill,.hpm-pill,.hgrid-pill,.hgrid-pill-2,.ln-btn,.bk-btn,.cox-pill,.acx-btn,.abx-btn){outline:2px solid var(--dk) !important;outline-offset:3px}
@media (prefers-reduced-motion:reduce){html body :is(.pill,.hpm-pill,.hgrid-pill,.hgrid-pill-2,.ln-btn,.bk-btn,.cox-pill,.acx-btn,.abx-btn){transition:none !important;transform:none !important}}

/* =========================== HOME: DUO =========================== */
/* the section sits on shoji; its content is one big deep black glass tile (like the hero cards) */
html body .duo-tile{background:var(--sj) !important;padding:clamp(14px,2vw,24px) clamp(12px,2.4vw,32px) 0;color:var(--sj)}
html body .duo-tile::before,html body .duo-tile::after{display:none !important}
html body .duo-tile{position:relative;isolation:isolate}
html body .duo-tile>.tile-copy,html body .duo-tile>.duo-stage,html body .duo-tile>.duo-fine{position:relative;z-index:1}
html body .duo-tile .duo-glass{position:absolute;z-index:0;inset:clamp(14px,2vw,24px) clamp(12px,2.4vw,32px) 0;border-radius:clamp(26px,3vw,40px);
  background:var(--dc-bg);border:var(--dc-rim);box-shadow:var(--dc-sh);pointer-events:none}
html body .duo-tile .tile-copy{padding-top:clamp(30px,4vw,52px)}
html body .duo-tile :is(.duo-h,.duo-sub,.duo-sub span){color:var(--sj) !important;text-shadow:none !important;-webkit-text-fill-color:currentColor}
html body .duo-tile .duo-gray{color:rgba(245,244,238,.66) !important}
html body .duo-tile .duo-fine{color:rgba(245,244,238,.5) !important;padding-bottom:26px}
html body #main .duo-tile .pill-line{background:var(--gpd-bg) !important;color:var(--sj) !important;box-shadow:var(--gpd-sh) !important}
@media (hover:hover) and (pointer:fine){html body #main .duo-tile .pill-line:hover{box-shadow:var(--gpd-sh-h) !important}}
/* the device: graphite stays, everything on its screen in shoji / deep black */
html body .duo3 .d-shadow{background:radial-gradient(closest-side,rgba(0,0,0,.6),transparent)}
html body .duo3 .d-paper{background:
  radial-gradient(70% 34% at 78% 104%,#bdbcb6 0 55%,transparent 75%),
  radial-gradient(95% 40% at 18% 108%,#d3d2cb 0 55%,transparent 76%),
  radial-gradient(85% 30% at 62% 80%,#e3e2db 0 50%,transparent 75%),
  radial-gradient(60% 24% at 30% 66%,#eceae4 0 45%,transparent 72%),
  linear-gradient(180deg,#b4b6bb 0%,#cfd0d0 26%,#e4e2dc 56%,#efeee8 100%) !important}

html body .duo3 .d-cover{background:var(--sj-2) !important}
html body .duo3 :is(.d-w,.d-app,.d-wifi,.d-search){box-shadow:0 calc(.6*var(--mm)) calc(2.4*var(--mm)) rgba(11,11,11,.18)}
html body .duo3 .d-w-photo{background:#0B0B0B}
html body .duo3 .d-w-bat{background:linear-gradient(160deg,#2a2a29,#0B0B0B) !important;box-shadow:inset 0 0 0 .5px rgba(245,244,238,.25),0 calc(.6*var(--mm)) calc(2.4*var(--mm)) rgba(11,11,11,.22)}
html body .duo3 .d-ad{background:linear-gradient(165deg,#2a2a29 0%,#161615 45%,#0B0B0B 100%) !important;box-shadow:inset 0 0 0 .5px rgba(245,244,238,.25),0 calc(.6*var(--mm)) calc(2.4*var(--mm)) rgba(11,11,11,.22)}
html body .duo3 .d-ad em{color:rgba(245,244,238,.62) !important}
html body .duo3 .d-ad i{background:var(--gp-bg) !important;color:var(--dk) !important}
html body .duo3 .d-cal em{color:#0B0B0B !important}

/* =========================== shared: links, eyebrows, sections =========================== */
html body :is(.more,.st-link,.hpm-link,.hhow-link,.hvisit-link,.hexplore-link,.hwhy-link,.stx-more,.bk-link,.bk-crumb a,.cox-link,.cox-more,.cox-s-link,.bag-done-wa a,.abx a:not(.abx-btn)){
  color:var(--dk) !important;text-decoration-color:rgba(11,11,11,0)}
@media (hover:hover){html body :is(.more,.st-link,.hpm-link,.hhow-link,.hvisit-link,.hexplore-link,.hwhy-link,.stx-more,.bk-link,.cox-link,.cox-more,.cox-s-link):hover{text-decoration-color:currentColor}}
html body :is(.more,.hpm-link,.hhow-link,.hvisit-link,.hwhy-link,.stx-more,.cox-link,.cox-more)::after{color:inherit !important}
html body :is(.dark,.dk-sec,.hvisit-card--dark,.pro-tile,.hsy) :is(.more,.hvisit-link,.st-link){color:var(--sj) !important}
html body :is(.t-eyebrow,.hpm-eyebrow,.hvisit-eyebrow,.cox-eyebrow){color:var(--dk) !important;text-shadow:none !important}
html body :is(.hpm-star,.hwhy-star,.hgrid-star,.hvisit-star){fill:currentColor !important}
/* light sections: plain shoji, no blobs or glows */
html body :is(.hpm,.hgrid,.hwhy,.hhow,.hvisit,.tile:not(.dark):not(.duo-tile)){background:var(--sj) !important;color:var(--dk)}
html body :is(.hpm,.hgrid,.hwhy,.hhow,.hvisit)::before{background:none !important}
/* round arrow buttons = small glass pills */
html body :is(.hpm-pad,.hwhy-paddle,.stx-paddle,.acx-paddle,.st-arrow){background:var(--gp-bg) !important;color:var(--dk) !important;box-shadow:var(--gp-sh) !important;
  transition:transform .45s var(--spr),box-shadow .35s ease}
@media (hover:hover) and (pointer:fine){html body :is(.hpm-pad,.hwhy-paddle,.stx-paddle,.acx-paddle,.st-arrow):hover{transform:scale(1.06);box-shadow:var(--gp-sh-h) !important}}
html body :is(.hpm-pad,.hwhy-paddle,.stx-paddle,.acx-paddle,.st-arrow):disabled{opacity:.4}
html body :is(.hpm-pad,.hwhy-paddle,.stx-paddle,.acx-paddle,.st-arrow) svg{stroke:currentColor;color:var(--dk)}

/* =========================== HOME: iPhone 18 Pro tile =========================== */
html body .pro-tile{background:var(--dk) !important;color:var(--sj)}
html body .pro-tile :is(.pro-h,.t-sub){color:var(--sj) !important}
html body .pro-phone{filter:drop-shadow(0 3cqw 4cqw rgba(0,0,0,.7)) !important}
html body .pro-run{stroke:rgba(245,244,238,.9) !important}
html body .pro-tag b{background:none !important;border:0 !important;box-shadow:none !important;padding:0 !important;color:rgba(245,244,238,.78);font-weight:600}
html body .pro-tag i{display:none !important}

/* =========================== HOME: promise =========================== */
html body .hpm{--hpm-bur:#0B0B0B}
html body .hpm-shine{background:linear-gradient(100deg,#0B0B0B 0 38%,#8d8b84 50%,#0B0B0B 62% 100%) !important;-webkit-background-clip:text !important;background-clip:text !important}
html body .hpm-card.hpm-bur{--hpm-bg:var(--dc-bg);--hpm-bur:#F5F4EE}
html body .hpm-card.hpm-wine{--hpm-bg:linear-gradient(135deg,#3b3b3a 0%,#1d1d1c 55%,#0B0B0B 100%);--hpm-bur:#F5F4EE}
html body .hpm-card.hpm-graphite{--hpm-bur:#F5F4EE}
html body .hpm-face{border:0 !important;outline:0 !important}
html body .hpm-card.hpm-bur .hpm-face{background:var(--dc-bg) !important;box-shadow:var(--dc-sh) !important}
html body .hpm-card:is(.hpm-wine,.hpm-graphite) .hpm-face{box-shadow:inset 0 0 0 1px rgba(245,244,238,.3),inset 0 0 20px 3px rgba(245,244,238,.08),-2px 3px 0 -1px rgba(245,244,238,.55),0 22px 44px -26px rgba(11,11,11,.5) !important}
html body .hpm-card:is(.hpm-ti,.hpm-silver) .hpm-face{box-shadow:inset 0 0 0 1px rgba(11,11,11,.36),inset 0 0 20px 3px rgba(11,11,11,.08),-2px 3px 0 -1px rgba(11,11,11,.6),0 22px 44px -26px rgba(11,11,11,.4) !important}
html body .hpm-dot i{background:rgba(11,11,11,.3) !important}
html body .hpm-dot[aria-current="true"] i,html body .hpm-dot[aria-selected="true"] i{background:var(--dk) !important}

/* =========================== HOME: repair tiles =========================== */
html body .hgrid-tile{border-radius:28px !important;box-shadow:var(--sc-sh) !important}
html body .hgrid-light{background:#FBFAF6 !important;background-image:none !important;color:var(--dk)}
html body .hgrid-dark{background:var(--dc-bg) !important;color:var(--sj);box-shadow:var(--dc-sh) !important}
html body .hgrid-tile::after,html body .hgrid-tile::before{background:none !important;box-shadow:none !important}
html body .hgrid-pic::before{background:none !important}
html body .hgrid-light .hgrid-callout{color:var(--ink-3) !important}
html body .hgrid{gap:16px;padding:16px 16px 0}
@media (max-width:734px){html body .hgrid{gap:12px;padding:12px 12px 0}html body .hgrid-tile{border-radius:22px !important}}

/* =========================== HOME: why =========================== */
html body .hwhy :is(.hwhy-h){color:var(--dk) !important}
html body .hwhy-card{background:var(--dc-bg) !important;box-shadow:var(--dc-sh) !important;border:0 !important}
html body .hwhy-card::before,html body .hwhy-card::after{background:none !important;box-shadow:none !important}
@media (hover:hover){html body .hwhy-card:hover{box-shadow:var(--dc-sh) !important;transform:translateY(-4px)}}
html body .hwhy-card :is(.hwhy-title){color:var(--sj) !important}
html body .hwhy-card .hwhy-label{color:rgba(245,244,238,.6) !important}
html body .hwhy-card .hwhy-body{color:rgba(245,244,238,.74) !important}
html body .hwhy-ic{background:var(--gp-bg) !important;box-shadow:var(--gp-sh) !important}
html body .hwhy-ic::after{display:none !important}
html body .hwhy-ic svg{stroke:var(--dk) !important;filter:none !important}
html body .hwhy-scroller:focus-visible{outline-color:var(--dk) !important}

/* =========================== HOME: how it works =========================== */
html body .hhow{--hhow-bur:#0B0B0B}
html body .hhow :is(.hhow-h,.hhow-sub){color:var(--dk)}
html body .hhow-card{background:var(--dc-bg) !important;box-shadow:var(--dc-sh) !important}
@media (hover:hover){html body .hhow-card:hover{box-shadow:var(--dc-sh) !important}}
html body .hhow-card .hhow-n{background:var(--gp-bg) !important;color:var(--dk) !important;box-shadow:var(--gp-sh) !important}
html body .hhow-card .hhow-p{color:rgba(245,244,238,.7) !important}

/* =========================== HOME: visit =========================== */
html body .hvisit{--hvisit-bur:#0B0B0B}
html body .hvisit-card{border:0 !important}
html body .hvisit-card--dark{background:var(--dc-bg) !important;box-shadow:var(--dc-sh) !important;--hvisit-line:rgba(245,244,238,.16)}
html body .hvisit-card--dark :is(.hvisit-label,.hvisit-body){color:rgba(245,244,238,.66) !important}
html body .hvisit-card--dark :is(.hvisit-title,.hvisit-tel,.hvisit-hours,.hvisit-hours *,.hvisit-facts li){color:var(--sj) !important}
html body .hvisit-dot{background:rgba(245,244,238,.7) !important;box-shadow:none !important}
html body .hvisit-photo{box-shadow:var(--dc-sh)}
html body .pro-word{filter:none !important}
html body .hvisit-open{color:var(--sj) !important;background:rgba(245,244,238,.12) !important;box-shadow:none !important}
html body .hvisit-row.today{background:rgba(245,244,238,.10) !important;box-shadow:inset 0 0 0 1px rgba(245,244,238,.28) !important}
/* phone dock: shoji glass bar, buttons = the glass pills */
html body .dock{background:rgba(245,244,238,.78) !important;box-shadow:inset 0 1px 0 #fff,0 0 0 1px rgba(11,11,11,.14),0 14px 30px -12px rgba(11,11,11,.35) !important}
html body .dock::before,html body .dock::after{display:none !important}

/* =========================== FOOTER (every public page) =========================== */
html body .foot{background:var(--dk) !important;color:rgba(245,244,238,.62) !important;--line:rgba(245,244,238,.12)}
html body .foot :is(.foot-cols h3,.crumbs,.crumbs span){color:var(--sj) !important}
html body .foot :is(.foot-cols a,.foot-cols p,.foot-base,.foot-base a,.foot-note){color:rgba(245,244,238,.62) !important}
@media (hover:hover){html body .foot :is(.foot-cols a,.foot-base a):hover{color:var(--sj) !important}}
html body .foot :is(.foot-note,.foot-cols,.foot-base nav a){border-color:rgba(245,244,238,.12) !important}
html body .foot a:focus-visible{outline:2px solid var(--sj) !important;outline-offset:2px}

/* =====================================================================
   Nov 1 (later) - THE OTHER PAGES match the finished home page (Sir):
   deep black #0B0B0B sections, shoji #F5F4EE text, clear CRYSTAL glass panels (dome of light from the top,
   deep-black rim, glossy top lip, light lip bottom-left), crystal pills that pop up, small cards with
   subtle black/shoji textures. Magenta only in the logo star. Every section fills the screen.
   Scope P = the public inner pages (body classes). Home and staff.html are not touched.
   ===================================================================== */
html body:is(.about,.repairs,.storepage,.book,.contact,.accessories),html body .bag{
  --k:#0B0B0B; --s:#F5F4EE; --s2:rgba(245,244,238,.72); --s3:rgba(245,244,238,.56);
  /* big panel: the home .pro-tile::before / .duo-glass recipe */
  --dome:radial-gradient(60% 38% at 50% 0%,rgba(255,255,255,.18) 0%,rgba(255,255,255,.06) 45%,rgba(255,255,255,0) 75%),
         linear-gradient(180deg,rgba(255,255,255,.07) 0%,rgba(255,255,255,.02) 55%,rgba(255,255,255,.05) 100%);
  --dome-sh:inset 0 0 0 1.5px rgba(11,11,11,.9),inset 0 2.5px 0 0 rgba(255,255,255,.6),inset 2px 0 0 0 rgba(255,255,255,.22),
         inset -2px 0 0 0 rgba(255,255,255,.22),inset 0 0 0 3px rgba(11,11,11,.14),inset 0 0 40px 6px rgba(255,255,255,.05),
         -2.5px 3.5px 0 -1px rgba(245,244,238,.3),0 30px 60px -30px rgba(0,0,0,.8);
  /* clear crystal card (a smaller panel inside a section) */
  --cr:linear-gradient(180deg,rgba(255,255,255,.11) 0%,rgba(255,255,255,.035) 50%,rgba(255,255,255,.07) 100%);
  --cr-sh:inset 0 0 0 1.5px rgba(11,11,11,.85),inset 0 2.5px 0 0 rgba(255,255,255,.6),inset 2px 0 0 0 rgba(255,255,255,.26),
         inset 0 -2px 0 0 rgba(255,255,255,.16),inset 0 0 22px 3px rgba(255,255,255,.06),
         -2.5px 3.5px 0 -1px rgba(245,244,238,.3),0 26px 50px -24px rgba(0,0,0,.85);
  /* crystal pill: the home .duo-tile .pill recipe */
  --pl:linear-gradient(180deg,rgba(255,255,255,.16) 0%,rgba(255,255,255,.05) 50%,rgba(255,255,255,.10) 100%);
  --pl-h:linear-gradient(180deg,rgba(255,255,255,.22) 0%,rgba(255,255,255,.08) 50%,rgba(255,255,255,.13) 100%);
  --pl-sh:inset 0 0 0 1.5px rgba(11,11,11,.85),inset 0 2.5px 0 0 rgba(255,255,255,.6),inset 2px 0 0 0 rgba(255,255,255,.3),
         inset 0 -2px 0 0 rgba(255,255,255,.2),inset 0 0 14px 2px rgba(255,255,255,.08),-2px 3px 0 -1px rgba(245,244,238,.35),0 8px 18px -10px rgba(0,0,0,.6);
  --pl-sh-h:inset 0 0 0 1.5px rgba(11,11,11,.85),inset 0 2.5px 0 0 rgba(255,255,255,.85),inset 2px 0 0 0 rgba(255,255,255,.45),
         inset 0 -2px 0 0 rgba(255,255,255,.3),inset 0 0 18px 3px rgba(255,255,255,.14),-2px 3px 0 -1px rgba(245,244,238,.5),
         0 18px 30px -12px rgba(0,0,0,.75),0 0 26px -6px rgba(245,244,238,.25);
  --spring:cubic-bezier(.34,1.56,.64,1);
  /* textured small card (the home .hpm-card recipe): grain + top light + floor, then one pattern */
  --tx-grain:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='g'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 1 0 0 0 0 1 0 0 0 0 1 0 0 0 .07 0'/%3E%3C/filter%3E%3Crect width='160' height='160' filter='url(%23g)'/%3E%3C/svg%3E");
  --tx-light:radial-gradient(70% 45% at 25% 0%,rgba(255,255,255,.16) 0%,rgba(255,255,255,0) 70%);
  --tx-floor:linear-gradient(180deg,rgba(11,11,11,0) 55%,rgba(11,11,11,.55) 100%);
  --tx-carbon:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12'%3E%3Cdefs%3E%3ClinearGradient id='a' x1='0' y1='0' x2='0' y2='1'%3E%3Cstop offset='0' stop-color='%23262625'/%3E%3Cstop offset='.5' stop-color='%23101010'/%3E%3Cstop offset='1' stop-color='%23202020'/%3E%3C/linearGradient%3E%3ClinearGradient id='b' x1='0' y1='0' x2='1' y2='0'%3E%3Cstop offset='0' stop-color='%23262625'/%3E%3Cstop offset='.5' stop-color='%23101010'/%3E%3Cstop offset='1' stop-color='%23202020'/%3E%3C/linearGradient%3E%3C/defs%3E%3Crect width='6' height='6' fill='url(%23a)'/%3E%3Crect x='6' y='6' width='6' height='6' fill='url(%23a)'/%3E%3Crect x='6' width='6' height='6' fill='url(%23b)'/%3E%3Crect y='6' width='6' height='6' fill='url(%23b)'/%3E%3C/svg%3E") 0 0/12px 12px;
  --tx-brushed:repeating-linear-gradient(0deg,rgba(255,255,255,.035) 0 1px,rgba(0,0,0,.05) 1px 2px,rgba(255,255,255,0) 2px 3px),linear-gradient(90deg,#141413,#1d1d1c 30%,#121211 60%,#1a1a19);
  --tx-honey:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='28' height='48.5'%3E%3Cpath d='M14 0l14 8.08v16.17L14 32.33 0 24.25V8.08zM14 32.33v16.17M0 48.5' fill='none' stroke='%23F5F4EE' stroke-opacity='.07' stroke-width='1'/%3E%3C/svg%3E") 0 0/28px 48.5px;
  --tx-knurl:repeating-linear-gradient(45deg,rgba(245,244,238,.05) 0 1px,transparent 1px 7px),repeating-linear-gradient(-45deg,rgba(245,244,238,.05) 0 1px,transparent 1px 7px);
  --tx-dots:radial-gradient(circle at 50% 50%,rgba(245,244,238,.10) 0 1px,transparent 1.4px) 0 0/8px 8px;
  --tx-sh:inset 0 0 0 1.5px rgba(11,11,11,.9),inset 0 2.5px 0 0 rgba(255,255,255,.5),inset 2px 0 0 0 rgba(255,255,255,.2),
         inset 0 -2px 0 0 rgba(255,255,255,.14),inset 0 0 0 3px rgba(245,244,238,.06),inset 0 0 26px 4px rgba(245,244,238,.05),
         -2.5px 3.5px 0 -1px rgba(245,244,238,.3),0 26px 50px -24px rgba(0,0,0,.8);
  --pan-y:clamp(14px,2vw,24px); --pan-x:clamp(10px,2.4vw,32px);
  background:#0B0B0B !important;color:#F5F4EE}
html body:is(.about,.repairs,.storepage,.book,.contact,.accessories) #main{background:#0B0B0B !important}
html body:is(.about,.repairs,.storepage,.book,.contact,.accessories) .stx{
  --stx-ink:#F5F4EE;--stx-ink-2:rgba(245,244,238,.72);--stx-eye:rgba(245,244,238,.72);--stx-bg:#0B0B0B;--stx-card:transparent;
  --stx-track:rgba(245,244,238,.16);--stx-bur:#F5F4EE;--stx-link:#F5F4EE;--stx-link-h:#F5F4EE;--stx-shadow:none;--stx-shadow-h:none;
  background:#0B0B0B !important;color:#F5F4EE}
@media (max-width:734px){html body:is(.about,.repairs,.storepage,.book,.contact,.accessories) .stx{--stx-edge:30px}}
/* the white "page name" strip under the top bar: home has none, so these pages don't either
   (its links are all in the page; the top bar keeps the bag + WhatsApp) */
html body:is(.about,.repairs,.storepage,.book,.contact,.accessories) .localnav{display:none !important}
/* stars next to headings = shoji (the only magenta star is the one in the logo) */
html body:is(.about,.repairs,.storepage,.book,.contact,.accessories) :is(.stx-h1-star,.stx-star-ic){fill:#F5F4EE !important;color:#F5F4EE}
html body:is(.about,.repairs,.storepage,.book,.contact,.accessories) .stx-starred::after{background:#F5F4EE !important;-webkit-mask:var(--stx-star) center/contain no-repeat;mask:var(--stx-star) center/contain no-repeat}
/* text */
html body:is(.about,.repairs,.storepage,.book,.contact,.accessories) .stx :is(.stx-h1,.stx-h2,.stx-h2 b,.stx-tagline,.stx-htitle){color:#F5F4EE !important;-webkit-text-fill-color:#F5F4EE;text-shadow:none !important}
html body:is(.about,.repairs,.storepage,.book,.contact,.accessories) .stx .stx-h2 span{color:rgba(245,244,238,.6) !important;-webkit-text-fill-color:rgba(245,244,238,.6)}
html body:is(.about,.repairs,.storepage,.book,.contact,.accessories) .stx :is(.stx-more,a.stx-more){color:#F5F4EE !important}
html body:is(.about,.repairs,.storepage,.book,.contact,.accessories) .stx .stx-hl{color:#F5F4EE !important;font-weight:600}
html body:is(.about,.repairs,.storepage,.book,.contact,.accessories) .stx .stx-hicon svg{stroke:#F5F4EE !important}
/* crystal pill buttons that pop up (the home .duo-tile .pill recipe) */
html body:is(.about,.repairs,.storepage,.book,.contact,.accessories) #main :is(.pill,.pill-line,.abv-btn){
  color:#F5F4EE !important;background:var(--pl) !important;border:0 !important;text-shadow:none !important;filter:none !important;
  -webkit-backdrop-filter:blur(12px) saturate(160%);backdrop-filter:blur(12px) saturate(160%);
  box-shadow:var(--pl-sh) !important;transition:transform .55s var(--spring),box-shadow .4s ease,background .4s ease !important}
html body:is(.about,.repairs,.storepage,.book,.contact,.accessories) #main :is(.pill,.pill-line,.abv-btn)::before,
html body:is(.about,.repairs,.storepage,.book,.contact,.accessories) #main :is(.pill,.pill-line,.abv-btn)::after{display:none !important}
@media (hover:hover) and (pointer:fine){
  html body:is(.about,.repairs,.storepage,.book,.contact,.accessories) #main :is(.pill,.pill-line,.abv-btn):hover{
    transform:translateY(-6px) scale(1.07) !important;background:var(--pl-h) !important;box-shadow:var(--pl-sh-h) !important}}
html body:is(.about,.repairs,.storepage,.book,.contact,.accessories) #main :is(.pill,.pill-line,.abv-btn):active{transform:translateY(-1px) scale(.97) !important;transition-duration:.15s !important}
html body:is(.about,.repairs,.storepage,.book,.contact,.accessories) #main :is(.pill,.pill-line,.abv-btn):focus-visible{outline:2px solid #F5F4EE !important;outline-offset:3px}
/* a full-screen section: fills the screen, content centred, one big crystal dome panel behind it.
   --fs:1 also tells js/fit-snap.js to glide to it. */

/* ---------------------------------- ABOUT ---------------------------------- */
html body.about .abv > :is(section){--fs:1;position:relative;isolation:isolate;min-height:100svh;box-sizing:border-box;
  display:flex !important;flex-direction:column;justify-content:center;margin:0 !important;
  padding:clamp(96px,11vh,120px) 0 clamp(56px,8vh,90px) !important;background:#0B0B0B !important;color:#F5F4EE}
html body.about .abv > section::before{content:"";position:absolute;z-index:-1;pointer-events:none;
  inset:var(--pan-y) var(--pan-x);border-radius:clamp(26px,3vw,40px);background:var(--dome);box-shadow:var(--dome-sh)}
html body.about .abv > section::after{display:none !important}
/* headings centred, bigger, like the home headlines */
html body.about .abv .stx-shelf-head{text-align:center;margin:0 var(--stx-edge) clamp(26px,4vh,44px);padding:0;max-width:none}
html body.about .abv .stx-h2{font-size:clamp(30px,4vw,56px);line-height:1.08;letter-spacing:-.02em}
html body.about .abv .stx-h2 span{display:block;margin-top:.35em;font-size:.42em;line-height:1.3;letter-spacing:0;font-weight:500}
/* 1 - hero: headline + shop photo side by side (stacked on phones) */
html body.about .abv > .stx-hero{display:grid !important;grid-template-columns:minmax(0,1fr) minmax(0,1.05fr);align-items:center;gap:clamp(28px,5vw,72px);
  padding-left:var(--stx-edge) !important;padding-right:var(--stx-edge) !important}
html body.about .abv .stx-hero-l{padding:0 !important;max-width:none}
html body.about .abv .stx-h1{font-size:clamp(46px,6.4vw,92px);line-height:1;letter-spacing:-.03em}
html body.about .abv .stx-tagline{margin-top:22px;font-size:clamp(19px,1.8vw,26px);line-height:1.3;font-weight:500;color:rgba(245,244,238,.78) !important;-webkit-text-fill-color:rgba(245,244,238,.78);max-width:20em}
html body.about .abv .abv-hero-pills{flex-direction:row;align-items:center;flex-wrap:wrap;gap:14px;margin-top:34px}
html body.about .abv .abv-hero-pills li{font-size:17px;line-height:1}
html body.about .abv .abv-btn{display:inline-flex;align-items:center;min-height:48px;padding:0 26px;border-radius:999px;font-size:17px;font-weight:600;text-decoration:none;margin:0 !important}
html body.about .abv .abv-photo{margin:0 !important;min-width:0}
html body.about .abv .abv-photo img{width:100%;height:min(62svh,620px);max-height:none;object-fit:cover;object-position:50% 40%;border-radius:clamp(20px,2vw,28px);
  box-shadow:inset 0 0 0 1.5px rgba(11,11,11,.85),-2.5px 3.5px 0 -1px rgba(245,244,238,.3),0 0 0 1.5px rgba(11,11,11,.9),0 0 0 3px rgba(245,244,238,.16),0 30px 60px -28px rgba(0,0,0,.9) !important}
html body.about .abv .abv-photo figcaption{margin-top:14px;font-size:14px;color:rgba(245,244,238,.62)}
/* 2 - numbers: four textured cards */
html body.about .abv .abv-stats{grid-template-columns:repeat(4,minmax(0,1fr));gap:clamp(12px,1.6vw,22px)}
html body.about .abv .abv-stats li{border:0 !important;padding:clamp(22px,2.4vw,34px);border-radius:24px;min-height:clamp(180px,30vh,280px);justify-content:flex-end;box-shadow:var(--tx-sh)}
html body.about .abv .abv-stats li:nth-child(1){background:var(--tx-grain),var(--tx-light),var(--tx-floor),var(--tx-carbon),#121211}
html body.about .abv .abv-stats li:nth-child(2){background:var(--tx-grain),var(--tx-light),var(--tx-floor),var(--tx-brushed)}
html body.about .abv .abv-stats li:nth-child(3){background:var(--tx-grain),var(--tx-light),var(--tx-floor),var(--tx-honey),#121211}
html body.about .abv .abv-stats li:nth-child(4){background:var(--tx-grain),var(--tx-light),var(--tx-floor),var(--tx-knurl),#121211}
html body.about .abv .abv-stats b{font-size:clamp(44px,5vw,72px);line-height:1;letter-spacing:-.03em;
  background:linear-gradient(180deg,#fff 0%,#F5F4EE 50%,#bdbcb6 100%);-webkit-background-clip:text;background-clip:text;color:transparent;-webkit-text-fill-color:transparent}
html body.about .abv .abv-stats span{color:rgba(245,244,238,.72);font-size:16px;line-height:22px}
/* 3 - story: text left, four textured fact cards right */
html body.about .abv .abv-cols{margin-top:0;align-items:center}
html body.about .abv .abv-lead p{color:rgba(245,244,238,.74) !important;font-size:clamp(17px,1.45vw,21px);line-height:1.5}
html body.about .abv .abv-lead b,html body.about .abv .abv-facts b{color:#F5F4EE !important}
html body.about .abv .abv-facts li{background:none;border-radius:20px;box-shadow:var(--tx-sh) !important;color:rgba(245,244,238,.72) !important;border:0 !important;
  -webkit-backdrop-filter:none !important;backdrop-filter:none !important}
html body.about .abv .abv-facts li:nth-child(1){background:var(--tx-grain),var(--tx-light),var(--tx-floor),var(--tx-dots),#121211 !important}
html body.about .abv .abv-facts li:nth-child(2){background:var(--tx-grain),var(--tx-light),var(--tx-floor),var(--tx-carbon),#121211 !important}
html body.about .abv .abv-facts li:nth-child(3){background:var(--tx-grain),var(--tx-light),var(--tx-floor),var(--tx-brushed) !important}
html body.about .abv .abv-facts li:nth-child(4){background:var(--tx-grain),var(--tx-light),var(--tx-floor),var(--tx-honey),#121211 !important}
/* 4 - what we fix: two clear crystal cards */
html body.about .abv .abv-card{background:var(--cr) !important;box-shadow:var(--cr-sh) !important;border:0 !important;color:#F5F4EE;
  -webkit-backdrop-filter:blur(14px) saturate(150%);backdrop-filter:blur(14px) saturate(150%)}
html body.about .abv .abv-card::before,html body.about .abv .abv-card::after{display:none !important}
html body.about .abv .abv-card h3{color:#F5F4EE !important}
html body.about .abv .abv-eye{color:rgba(245,244,238,.6) !important}
html body.about .abv .abv-list li{color:rgba(245,244,238,.76) !important}
html body.about .abv .abv-list li::before{background:#F5F4EE !important;box-shadow:none !important}
/* 5 - how we work: four textured cards */
html body.about .abv .stx-diff-grid .stx-half{border-radius:24px;box-shadow:var(--tx-sh) !important;border:0 !important;min-height:clamp(200px,32vh,300px);
  -webkit-backdrop-filter:none !important;backdrop-filter:none !important}
html body.about .abv .stx-diff-grid li:nth-child(1) .stx-half{background:var(--tx-grain),var(--tx-light),var(--tx-floor),var(--tx-brushed) !important}
html body.about .abv .stx-diff-grid li:nth-child(2) .stx-half{background:var(--tx-grain),var(--tx-light),var(--tx-floor),var(--tx-knurl),#121211 !important}
html body.about .abv .stx-diff-grid li:nth-child(3) .stx-half{background:var(--tx-grain),var(--tx-light),var(--tx-floor),var(--tx-dots),#121211 !important}
html body.about .abv .stx-diff-grid li:nth-child(4) .stx-half{background:var(--tx-grain),var(--tx-light),var(--tx-floor),var(--tx-carbon),#121211 !important}
html body.about .abv .stx-diff-grid .stx-htitle{color:rgba(245,244,238,.78) !important;-webkit-text-fill-color:rgba(245,244,238,.78);font-size:clamp(17px,1.4vw,20px);line-height:1.35}
html body.about .abv .stx-diff-grid .stx-hl{-webkit-text-fill-color:#F5F4EE}
/* 6 - one shop, one name: centred logo (magenta star) + words */
html body.about .abv .abv-tm-in{flex-direction:column;align-items:center;text-align:center;gap:clamp(24px,4vh,40px)}
html body.about .abv .abv-tm-logo{width:clamp(220px,30vw,420px)}
html body.about .abv .abv-tm h2{font-size:clamp(30px,4vw,56px);line-height:1.08;letter-spacing:-.02em;color:#F5F4EE}
html body.about .abv .abv-tm p{margin:14px auto 0;color:rgba(245,244,238,.72);font-size:clamp(17px,1.4vw,20px);line-height:1.5}
/* 7 - visit: three textured cards */
html body.about .abv .abv-three .abv-small{border-radius:24px;box-shadow:var(--tx-sh) !important;-webkit-backdrop-filter:none !important;backdrop-filter:none !important}
html body.about .abv .abv-three .abv-small:nth-child(1){background:var(--tx-grain),var(--tx-light),var(--tx-floor),var(--tx-honey),#121211 !important}
html body.about .abv .abv-three .abv-small:nth-child(2){background:var(--tx-grain),var(--tx-light),var(--tx-floor),var(--tx-brushed) !important}
html body.about .abv .abv-three .abv-small:nth-child(3){background:var(--tx-grain),var(--tx-light),var(--tx-floor),var(--tx-carbon),#121211 !important}
html body.about .abv .abv-small p{color:rgba(245,244,238,.72) !important}
html body.about .abv .abv-small .abv-big{color:#F5F4EE !important}
html body.about .abv .abv-tel{color:inherit !important}
html body.about .abv .abv-hours dt{color:rgba(245,244,238,.72)}
html body.about .abv .abv-hours dd{color:#F5F4EE}
html body.about .abv .abv-hours .today{background:rgba(245,244,238,.08) !important;box-shadow:inset 0 0 0 1px rgba(245,244,238,.26) !important}
html body.about .abv .abv-social a{background:var(--pl) !important;color:#F5F4EE !important;box-shadow:var(--pl-sh) !important;transition:transform .55s var(--spring),box-shadow .4s ease}
@media (hover:hover) and (pointer:fine){html body.about .abv .abv-social a:hover{transform:translateY(-4px) scale(1.08);box-shadow:var(--pl-sh-h) !important;background:var(--pl-h) !important}}
@media (max-width:1068px){
  html body.about .abv .abv-stats{grid-template-columns:repeat(2,minmax(0,1fr))}
  html body.about .abv .abv-stats li{min-height:160px}
}
@media (max-width:833px){
  html body.about .abv > .stx-hero{grid-template-columns:minmax(0,1fr);align-content:center}
  html body.about .abv .abv-photo img{height:min(40svh,420px)}
}
@media (max-width:734px){
  html body.about .abv > section{padding:92px 0 52px !important}
  html body.about .abv .stx-h1{font-size:44px}
  html body.about .abv .abv-hero-pills{margin-top:24px;gap:10px}
  html body.about .abv .abv-btn{min-height:44px;padding:0 20px;font-size:16px}
  html body.about .abv .abv-stats{gap:10px}
  html body.about .abv .abv-stats li{min-height:140px;padding:18px;border-radius:20px}
  html body.about .abv .abv-stats b{font-size:38px}
  html body.about .abv .abv-stats span{font-size:14px;line-height:19px}
  html body.about .abv .stx-diff-grid .stx-half{min-height:0}
  html body.about .abv .abv-card{padding:24px}
}
html body.about .abv .stx-h1{display:block}
html body.about .abv .stx-h1-star{display:inline-block;vertical-align:top;margin:.08em 0 0 .06em;width:.2em;height:.2em}
html body.about .abv .abv-stats li{min-height:clamp(200px,38vh,340px)}
html body.about .abv .abv-card .abv-btn{margin-top:30px !important}
@media (max-width:734px){html body.about .abv .abv-stats li{min-height:150px}}

/* ------------------- REPAIRS + STORE (same .stx base) ------------------- */
/* full-screen blocks, each on one big crystal dome panel */
html body:is(.repairs,.storepage) .stx > :is(.stx-top,section){--fs:1;position:relative;isolation:isolate;min-height:100svh;box-sizing:border-box;
  display:flex !important;flex-direction:column;justify-content:center;margin:0 !important;
  padding:clamp(96px,11vh,120px) 0 clamp(56px,8vh,90px) !important;background:#0B0B0B !important;color:#F5F4EE}
html body:is(.repairs,.storepage) .stx > :is(.stx-top,section)::before{content:"";position:absolute;z-index:-1;pointer-events:none;
  inset:var(--pan-y) var(--pan-x);border-radius:clamp(26px,3vw,40px);background:var(--dome);box-shadow:var(--dome-sh)}
html body:is(.repairs,.storepage) .stx > :is(.stx-top,section)::after{display:none !important}
/* the long "All repairs / All accessories" grid: starts at the top, grows as long as it needs */
html body:is(.repairs,.storepage) .stx > .stx-grid-sec{justify-content:flex-start;padding-top:clamp(70px,9vh,100px) !important}
html body:is(.repairs,.storepage) .stx .stx-top .stx-hero{padding-top:0 !important}
html body:is(.repairs,.storepage) .stx .stx-hero-l{padding:0 0 24px !important}
html body:is(.repairs,.storepage) .stx .stx-hero-r{padding:8px 0 24px !important}
html body:is(.repairs,.storepage) .stx .stx-h1{font-size:clamp(46px,6.4vw,92px);line-height:1;letter-spacing:-.03em}
html body:is(.repairs,.storepage) .stx .stx-tagline{font-size:clamp(19px,1.8vw,26px);line-height:1.3;font-weight:500}
html body:is(.repairs,.storepage) .stx .stx-shelf-head{padding:0;margin-bottom:clamp(18px,3vh,32px)}
html body:is(.repairs,.storepage) .stx .stx-h2{font-size:clamp(28px,3.2vw,44px);line-height:1.1;letter-spacing:-.015em}
html body:is(.repairs,.storepage) .stx .stx-h2-big{font-size:clamp(32px,4vw,56px)}
/* round category pictures = shoji photo tiles with a crystal rim (real part / product photos sit on white) */
html body:is(.repairs,.storepage) .stx .stx-cat-img{background:#F5F4EE !important;border-radius:50%;overflow:hidden;
  box-shadow:inset 0 0 0 1.5px rgba(11,11,11,.85),0 0 0 1.5px rgba(11,11,11,.9),0 0 0 3px rgba(245,244,238,.18),-2px 3px 0 -1px rgba(245,244,238,.3),0 14px 26px -14px rgba(0,0,0,.9) !important}
html body:is(.repairs,.storepage) .stx .stx-cat-img img{mix-blend-mode:multiply}
html body:is(.repairs,.storepage) .stx .stx-cat-t{color:#F5F4EE !important}
html body:is(.repairs,.storepage) .stx .stx-cat{transition:transform .55s var(--spring)}
@media (hover:hover) and (pointer:fine){html body:is(.repairs,.storepage) .stx .stx-cat:hover{transform:translateY(-6px) scale(1.05)}}
/* arrows = small crystal pills */
html body:is(.repairs,.storepage) .stx .stx-paddle{background:var(--pl) !important;color:#F5F4EE !important;box-shadow:var(--pl-sh) !important;border:0 !important;
  -webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px);transition:transform .55s var(--spring),opacity .3s ease,box-shadow .4s ease !important}
html body:is(.repairs,.storepage) .stx .stx-paddle svg{stroke:#F5F4EE !important;fill:none}
html body:is(.repairs,.storepage) .stx .stx-paddle:disabled{opacity:.3 !important}
@media (hover:hover) and (pointer:fine){html body:is(.repairs,.storepage) .stx .stx-paddle:not(:disabled):hover{transform:scale(1.1);box-shadow:var(--pl-sh-h) !important}}
/* product / repair cards = clear crystal glass, shoji text, photo on a shoji panel */
html body:is(.repairs,.storepage) .stx .st-card{background:var(--cr) !important;box-shadow:var(--cr-sh) !important;border:0 !important;color:#F5F4EE !important;
  -webkit-backdrop-filter:blur(14px) saturate(150%) !important;backdrop-filter:blur(14px) saturate(150%) !important}
html body:is(.repairs,.storepage) .stx .st-card::before,html body:is(.repairs,.storepage) .stx .st-card::after{display:none !important}
html body:is(.repairs,.storepage) .stx .st-card :is(h3,.st-price,.st-name){color:#F5F4EE !important;-webkit-text-fill-color:#F5F4EE}
html body:is(.repairs,.storepage) .stx .st-card :is(.st-eye,.rpx-notice,.st-sub,.st-desc,p){color:rgba(245,244,238,.7) !important}
html body:is(.repairs,.storepage) .stx .st-card .st-price{color:#F5F4EE !important;font-weight:600}
html body:is(.repairs,.storepage) .stx .st-pimg{background:#F5F4EE !important;border-radius:18px !important;
  box-shadow:inset 0 0 0 1.5px rgba(11,11,11,.85),0 0 0 1px rgba(245,244,238,.12) !important}
html body:is(.repairs,.storepage) .stx .st-pimg img{mix-blend-mode:multiply}
/* brand / device headings in the grid: no lines, shoji, small shoji dot */
html body:is(.repairs,.storepage) #pgrid .rpx-brand{border-top:0 !important;color:#F5F4EE !important}
html body:is(.repairs,.storepage) #pgrid .rpx-group{color:#F5F4EE !important}
html body:is(.repairs,.storepage) #pgrid .rpx-group span::before{background:#F5F4EE !important}
html body:is(.repairs,.storepage) #pgrid .rpx-group small{color:rgba(245,244,238,.6) !important}
/* filter chips = crystal pills; the chosen one = solid shoji with deep black text */
html body:is(.repairs,.storepage) .stx :is(.st-chip,.stx-tab){color:#F5F4EE !important;background:var(--pl) !important;border:0 !important;box-shadow:var(--pl-sh) !important;
  transition:transform .55s var(--spring),box-shadow .4s ease,background .3s ease,color .3s ease !important}
html body:is(.repairs,.storepage) .stx :is(.st-chip,.stx-tab)::before,html body:is(.repairs,.storepage) .stx :is(.st-chip,.stx-tab)::after{display:none !important}
html body:is(.repairs,.storepage) .stx :is(.st-chip,.stx-tab):is([aria-pressed="true"],.on,.is-on,[aria-selected="true"]){background:#F5F4EE !important;color:#0B0B0B !important;
  box-shadow:inset 0 0 0 1.5px rgba(11,11,11,.85),inset 0 2px 0 0 #fff,-2px 3px 0 -1px rgba(245,244,238,.35),0 8px 18px -10px rgba(0,0,0,.6) !important}
@media (hover:hover) and (pointer:fine){html body:is(.repairs,.storepage) .stx :is(.st-chip,.stx-tab):hover{transform:translateY(-3px) scale(1.05)}}
/* model / search fields = dark crystal, shoji text */
html body:is(.repairs,.storepage) .stx .stx-flabel{color:rgba(245,244,238,.72) !important}
html body:is(.repairs,.storepage) .stx :is(.stx-field select,.stx-field input){color:#F5F4EE !important;opacity:1 !important;border:0 !important;
  background-color:rgba(255,255,255,.06) !important;
  box-shadow:inset 0 0 0 1.5px rgba(11,11,11,.85),inset 0 0 0 2.5px rgba(245,244,238,.16),inset 0 2px 0 0 rgba(255,255,255,.18),-2px 3px 0 -1px rgba(245,244,238,.22) !important}
html body:is(.repairs,.storepage) .stx .stx-field select{background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M7 10l5 5 5-5' fill='none' stroke='%23F5F4EE' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") !important;background-repeat:no-repeat !important;background-position:right 14px center !important;background-size:18px !important}
html body:is(.repairs,.storepage) .stx .stx-field select:disabled{opacity:.55 !important}
html body:is(.repairs,.storepage) .stx .stx-field select option{background:#0B0B0B;color:#F5F4EE}
html body:is(.repairs,.storepage) .stx .stx-field input::placeholder{color:rgba(245,244,238,.5) !important}
html body:is(.repairs,.storepage) .stx .stx-field svg{stroke:rgba(245,244,238,.7) !important;fill:none !important}
html body:is(.repairs,.storepage) .stx :is(.stx-field select,.stx-field input):focus-visible{outline:2px solid #F5F4EE !important;outline-offset:2px}
html body:is(.repairs,.storepage) .stx :is(.stx-count,.stx-noscript){color:rgba(245,244,238,.7) !important}
html body:is(.repairs,.storepage) .stx .stx-clear{color:#F5F4EE !important;background:none !important}
/* how it works / difference: textured cards, a different texture each */
html body:is(.repairs,.storepage) .stx .stx-diff-grid .stx-half{border-radius:24px;box-shadow:var(--tx-sh) !important;border:0 !important;min-height:clamp(200px,30vh,280px);
  -webkit-backdrop-filter:none !important;backdrop-filter:none !important;color:#F5F4EE !important}
html body:is(.repairs,.storepage) .stx .stx-diff-grid li:nth-child(1) .stx-half{background:var(--tx-grain),var(--tx-light),var(--tx-floor),var(--tx-carbon),#121211 !important}
html body:is(.repairs,.storepage) .stx .stx-diff-grid li:nth-child(2) .stx-half{background:var(--tx-grain),var(--tx-light),var(--tx-floor),var(--tx-brushed) !important}
html body:is(.repairs,.storepage) .stx .stx-diff-grid li:nth-child(3) .stx-half{background:var(--tx-grain),var(--tx-light),var(--tx-floor),var(--tx-honey),#121211 !important}
html body:is(.repairs,.storepage) .stx .stx-diff-grid li:nth-child(4) .stx-half{background:var(--tx-grain),var(--tx-light),var(--tx-floor),var(--tx-knurl),#121211 !important}
html body:is(.repairs,.storepage) .stx > section:last-of-type .stx-diff-grid li:nth-child(1) .stx-half{background:var(--tx-grain),var(--tx-light),var(--tx-floor),var(--tx-dots),#121211 !important}
html body:is(.repairs,.storepage) .stx > section:last-of-type .stx-diff-grid li:nth-child(3) .stx-half{background:var(--tx-grain),var(--tx-light),var(--tx-floor),var(--tx-carbon),#121211 !important}
html body:is(.repairs,.storepage) .stx .stx-diff-grid .stx-htitle{color:rgba(245,244,238,.78) !important;-webkit-text-fill-color:rgba(245,244,238,.78);font-size:clamp(17px,1.4vw,20px);line-height:1.35}
html body:is(.repairs,.storepage) .stx .stx-diff-grid .stx-hl{-webkit-text-fill-color:#F5F4EE}
html body:is(.repairs,.storepage) .stx .stx-half-link{transition:transform .55s var(--spring) !important}
@media (hover:hover) and (pointer:fine){html body:is(.repairs,.storepage) .stx .stx-half-link:hover{transform:translateY(-6px)}}
/* repairs: questions & answers as crystal cards; the photo credit line lives in the footer only */

html body.repairs .rpx-credit{display:none !important}
@media (max-width:734px){
  html body:is(.repairs,.storepage) .stx > :is(.stx-top,section){padding:92px 0 52px !important}
  html body:is(.repairs,.storepage) .stx .stx-h1{font-size:44px}
  html body:is(.repairs,.storepage) .stx .stx-diff-grid .stx-half{min-height:0}
}
/* no grey track box behind the chip rows - just the pills */
html body:is(.repairs,.storepage) .stx .stx-tabs{background:none !important;box-shadow:none !important;border:0 !important;-webkit-backdrop-filter:none !important;backdrop-filter:none !important;gap:8px;padding:6px 4px 10px}
html body:is(.repairs,.storepage) .stx .stx-tabs::before,html body:is(.repairs,.storepage) .stx .stx-tabs::after{display:none !important}
html body:is(.repairs,.storepage) .stx .stx-h2-big{font-size:clamp(30px,3.4vw,48px)}
html body:is(.repairs,.storepage) .stx .stx-tabs{height:auto !important;min-height:44px;overflow-x:auto;scrollbar-width:none}

/* ------------------- FOOTER (every public page): deep black, the fine print + links on one crystal dome panel ------------------- */
html body:not(.staff) .foot{background:#0B0B0B !important;position:relative;isolation:isolate;border:0 !important;
  padding:clamp(34px,5vw,64px) clamp(10px,2.4vw,32px) clamp(14px,2vw,24px) !important}
html body:not(.staff) .foot::before{content:"";position:absolute;z-index:-1;pointer-events:none;inset:clamp(10px,1.4vw,18px) clamp(10px,2.4vw,32px) clamp(14px,2vw,24px);
  border-radius:clamp(26px,3vw,40px);
  background:radial-gradient(60% 38% at 50% 0%,rgba(255,255,255,.14) 0%,rgba(255,255,255,.05) 45%,rgba(255,255,255,0) 75%),
             linear-gradient(180deg,rgba(255,255,255,.06) 0%,rgba(255,255,255,.02) 55%,rgba(255,255,255,.04) 100%);
  box-shadow:inset 0 0 0 1.5px rgba(11,11,11,.9),inset 0 2.5px 0 0 rgba(255,255,255,.55),inset 2px 0 0 0 rgba(255,255,255,.2),inset -2px 0 0 0 rgba(255,255,255,.2),
             inset 0 0 0 3px rgba(11,11,11,.14),inset 0 0 40px 6px rgba(255,255,255,.04),-2.5px 3.5px 0 -1px rgba(245,244,238,.3),0 30px 60px -30px rgba(0,0,0,.8)}
html body:not(.staff) .foot .foot-in{padding-top:clamp(24px,3vw,40px)}
html body:not(.staff) .foot :is(.foot-note,.foot-cols,.foot-base,.foot-base nav a,.crumbs){border-color:transparent !important}
html body:not(.staff) .foot .foot-cols h3{color:#F5F4EE !important;font-weight:600}
html body:not(.staff) .foot :is(.foot-cols a,.foot-cols p,.foot-base,.foot-base a,.foot-note){color:rgba(245,244,238,.66) !important}
html body:not(.staff) .foot .foot-note{color:rgba(245,244,238,.5) !important}
html body:not(.staff) .foot :is(.foot-cols a,.foot-base a){transition:color .25s ease}
@media (hover:hover){html body:not(.staff) .foot :is(.foot-cols a,.foot-base a):hover{color:#F5F4EE !important}}
@media (max-width:734px){html body:not(.staff) .foot .foot-in{padding-left:14px;padding-right:14px}}

/* ------------------- ABOUT stacking (Sir, Nov 1): the current section stays, the next slides up over it ------------------- */
/* js/stack.js sets --stk-top (0, or negative for a section taller than the screen so all of it scrolls past first)
   and --cover (0..1, how far the next section has covered this one). Reduced motion: js removes .stack-on. */
html body.about .abv.stack-on{overflow:visible !important}
html body.about .abv.stack-on > section{position:sticky !important;top:var(--stk-top,0px);
  border-radius:clamp(28px,3.2vw,44px) clamp(28px,3.2vw,44px) 0 0;
  box-shadow:0 -24px 50px -10px rgba(0,0,0,.85),0 -2px 0 0 rgba(245,244,238,.06);
  transform-origin:50% 0%;
  transform:scale(calc(1 - .06 * var(--cover,0)));will-change:transform}
html body.about .abv.stack-on > section:first-child{border-radius:0;box-shadow:none}
html body.about .abv.stack-on > section:nth-child(1){z-index:1}
html body.about .abv.stack-on > section:nth-child(2){z-index:2}
html body.about .abv.stack-on > section:nth-child(3){z-index:3}
html body.about .abv.stack-on > section:nth-child(4){z-index:4}
html body.about .abv.stack-on > section:nth-child(5){z-index:5}
html body.about .abv.stack-on > section:nth-child(6){z-index:6}
html body.about .abv.stack-on > section:nth-child(7){z-index:7}
/* the covered section darkens (an overlay's opacity only) */
html body.about .abv.stack-on > section::after{display:block !important;content:"";position:absolute;inset:0;z-index:5;pointer-events:none;
  border-radius:inherit;background:#0B0B0B;opacity:calc(.6 * var(--cover,0))}
/* the footer slides over the last one too */
html body.about .foot{z-index:8}
/* the top bar stays on screen like on home (the white page-name strip that used to stick is gone) */
html body:is(.about,.repairs,.storepage,.book,.contact,.accessories) .gnav{position:sticky;top:0;margin-bottom:-76px;z-index:70}
html body:is(.about,.repairs,.storepage,.book,.contact,.accessories).menu-open .gnav{position:fixed}

/* ------------------- STORE ------------------- */
/* headline star sits right after the word (h1 wraps to two lines) */
html body:is(.repairs,.storepage) .stx .stx-h1{display:block}
html body:is(.repairs,.storepage) .stx .stx-h1-star{display:inline-block;vertical-align:top;margin:.08em 0 0 .06em;width:.2em;height:.2em}
/* "why buy here" band: four textured cards, no divider lines */
html body.storepage .sbv-band .sbv-stats{gap:clamp(12px,1.6vw,22px)}
html body.storepage .sbv-band .sbv-stats li{border:0 !important;padding:clamp(22px,2.4vw,34px);border-radius:24px;min-height:clamp(200px,34vh,320px);justify-content:flex-end;box-shadow:var(--tx-sh)}
html body.storepage .sbv-band .sbv-stats li:nth-child(1){background:var(--tx-grain),var(--tx-light),var(--tx-floor),var(--tx-honey),#121211}
html body.storepage .sbv-band .sbv-stats li:nth-child(2){background:var(--tx-grain),var(--tx-light),var(--tx-floor),var(--tx-carbon),#121211}
html body.storepage .sbv-band .sbv-stats li:nth-child(3){background:var(--tx-grain),var(--tx-light),var(--tx-floor),var(--tx-knurl),#121211}
html body.storepage .sbv-band .sbv-stats li:nth-child(4){background:var(--tx-grain),var(--tx-light),var(--tx-floor),var(--tx-brushed)}
html body.storepage .sbv-band .sbv-stats b{font-size:clamp(28px,2.8vw,40px);line-height:1.05;
  background:linear-gradient(180deg,#fff 0%,#F5F4EE 50%,#bdbcb6 100%);-webkit-background-clip:text;background-clip:text;color:transparent;-webkit-text-fill-color:transparent}
html body.storepage .sbv-band .sbv-stats span{color:rgba(245,244,238,.72)}
/* how reserving works (a rail of .stx-half cards) + difference: textured cards */

html body.storepage :is(.sbv-diff,.sbv-how,.sbv-band){background:#0B0B0B !important}
/* products without a photo yet: a carbon tile with the Marvans logo star (magenta + shoji) and "Coming soon" */
html body:is(.repairs,.storepage) .stx .stx-noimg .st-pimg{background:var(--tx-grain),var(--tx-light),var(--tx-carbon),#121211 !important}
html body:is(.repairs,.storepage) .stx .stx-noimg .st-pimg img{content:url(../img/logo-star-shoji.svg);mix-blend-mode:normal;width:46px;height:46px}
html body:is(.repairs,.storepage) .stx .stx-noimg .st-pimg::after{color:rgba(245,244,238,.72) !important}
/* size / type choices on a card (20W / 35W ...) */
html body.storepage .stx .st-var{color:#F5F4EE !important;background:var(--pl) !important;border:0 !important;box-shadow:var(--pl-sh) !important}
html body.storepage .stx .st-var[aria-pressed="true"]{background:#F5F4EE !important;color:#0B0B0B !important;
  box-shadow:inset 0 0 0 1.5px rgba(11,11,11,.85),inset 0 2px 0 0 #fff,-2px 3px 0 -1px rgba(245,244,238,.35) !important}
/* the page's own fine print (how reserving + photo credit) stays, in shoji */
html body.storepage .stx-fine{color:rgba(245,244,238,.55) !important;padding-top:28px}
html body.storepage .stx-fine a{color:rgba(245,244,238,.75) !important}
html body:not(.staff) .foot .crumbs img{content:url(../img/logo-star-shoji.svg)}   /* the footer star = the logo star (magenta + shoji) */
/* the bag drawer: deep black frosted glass with the crystal rim, shoji text, dark crystal fields */
html body .bag{background:linear-gradient(180deg,rgba(28,28,27,.92) 0%,rgba(11,11,11,.94) 100%) !important;color:#F5F4EE !important;
  -webkit-backdrop-filter:blur(24px) saturate(140%) !important;backdrop-filter:blur(24px) saturate(140%) !important;border:0 !important;
  box-shadow:inset 0 0 0 1.5px rgba(11,11,11,.9),inset 0 2.5px 0 0 rgba(255,255,255,.45),inset 2px 0 0 0 rgba(255,255,255,.18),-30px 0 60px -20px rgba(0,0,0,.85) !important}
html body .bag::before,html body .bag::after{display:none !important}
html body .bag :is(h2,h3,.bi-t b,.bag-done-h,.bag-done-num b,label.field>span){color:#F5F4EE !important}
html body .bag :is(p,.bi-t span,.bag-empty,.t-small,.stx-bag-pickup,.bag-done-p,.bag-done-eye,.bag-done-num,.bag-done-items li){color:rgba(245,244,238,.7) !important}
html body .bag .bi-v{color:#F5F4EE !important;font-style:normal;font-weight:600}
html body .bag .bag-list li{border-color:rgba(245,244,238,.1) !important}
html body .bag .bag-list img{background:#F5F4EE;border-radius:12px}
html body .bag :is(.bag-head,.bag-foot){border-color:rgba(245,244,238,.1) !important;background:transparent !important}
html body .bag .text-in{color:#F5F4EE !important;background:rgba(255,255,255,.06) !important;border:0 !important;
  box-shadow:inset 0 0 0 1.5px rgba(11,11,11,.85),inset 0 0 0 2.5px rgba(245,244,238,.16),inset 0 2px 0 0 rgba(255,255,255,.16) !important}
html body .bag .text-in::placeholder{color:rgba(245,244,238,.45) !important}
html body .bag .text-in:focus-visible{outline:2px solid #F5F4EE !important;outline-offset:2px}
html body .bag :is(.bag-x,.qty,.qty button){color:#F5F4EE !important;background:var(--pl) !important;border:0 !important;box-shadow:var(--pl-sh) !important}
html body .bag .qty button{box-shadow:none !important;background:none !important}
html body .bag .qty output{color:#F5F4EE !important}
html body .bag .bag-x svg{stroke:#F5F4EE !important}
html body .bag :is(.bag-send,.pill){color:#F5F4EE !important;background:var(--pl) !important;border:0 !important;box-shadow:var(--pl-sh) !important;
  transition:transform .55s var(--spring),box-shadow .4s ease !important}
html body .bag :is(.bag-send,.pill)::before,html body .bag :is(.bag-send,.pill)::after{display:none !important}
html body .bag .bag-send svg{stroke:#F5F4EE !important}
@media (hover:hover) and (pointer:fine){html body .bag .bag-send:not(.off):hover{transform:translateY(-6px) scale(1.04) !important;box-shadow:var(--pl-sh-h) !important}}
html body .bag .bag-error{color:#F5F4EE !important;background:rgba(245,244,238,.08);border-radius:12px;padding:10px 12px}
html body .bag .bag-done-ic{border-radius:50%;padding:8px;background:var(--pl) !important;box-shadow:var(--pl-sh) !important;color:#F5F4EE !important}
html body .bag .bag-done-ic svg{stroke:#F5F4EE !important}
html body .bag-scrim{background:rgba(0,0,0,.55) !important}

/* ---------------------------------- BOOK (booking form) ---------------------------------- */
/* one full-screen block on a crystal dome panel; numbered steps = clear crystal cards */
html body.book .bk{--fs:1;position:relative;isolation:isolate;min-height:100svh;box-sizing:border-box;background:#0B0B0B !important;background-image:none !important;color:#F5F4EE;
  padding:clamp(100px,12vh,124px) clamp(30px,6vw,96px) clamp(60px,8vh,96px) !important}
html body.book .bk::before{content:"";position:absolute;z-index:-1;pointer-events:none;inset:var(--pan-y) var(--pan-x);border-radius:clamp(26px,3vw,40px);background:var(--dome) !important;box-shadow:var(--dome-sh) !important}
html body.book .bk::after{display:none !important}
html body.book :is(.bk-h1,.bk-sh,.bk-sum-h,.bk-done-h,.bk-sum-total,.bk-sum-total *,.bk-sum-list dd,.bk-done-num b){color:#F5F4EE !important;-webkit-text-fill-color:#F5F4EE}
html body.book .bk-h1{font-size:clamp(40px,5vw,72px);line-height:1.02;letter-spacing:-.03em}
html body.book :is(.bk-small,.bk-fine,.bk-body,.bk-sum-list dt,.bk-sum-box p,.bk-done-eye,.bk-done-num,.bk-crumb,.bk-crumb span){color:rgba(245,244,238,.68) !important}
html body.book :is(.bk-crumb a,.bk-link){color:#F5F4EE !important}
html body.book :is(.bk-step,.bk-sum-box,.bk-done){background:var(--cr) !important;box-shadow:var(--cr-sh) !important;border:0 !important;border-radius:24px !important;
  -webkit-backdrop-filter:blur(14px) saturate(150%);backdrop-filter:blur(14px) saturate(150%)}
html body.book .bk-sum-box.bk-where{background:var(--tx-grain),var(--tx-light),var(--tx-floor),var(--tx-honey),#121211 !important;box-shadow:var(--tx-sh) !important}
html body.book :is(.bk-sum-list,.bk-sum-total,.bk-sum-perks,.bk-sum-box hr){border-color:rgba(245,244,238,.12) !important}
html body.book .bk-sum-perks li{color:rgba(245,244,238,.8) !important}
html body.book .bk-sum-perks svg{stroke:#F5F4EE !important}
/* step numbers: small crystal discs; done = solid shoji */
html body.book .bk-n{background:var(--pl) !important;color:#F5F4EE !important;box-shadow:var(--pl-sh) !important}
html body.book :is(.bk-step:has(:checked),.bk-step.is-done) .bk-n{background:#F5F4EE !important;color:#0B0B0B !important}
/* device tiles: textured, picked = shoji */
html body.book .bk-dev{background:var(--tx-grain),var(--tx-light),var(--tx-dots),#121211 !important;border:0 !important;color:rgba(245,244,238,.8) !important;
  box-shadow:inset 0 0 0 1.5px rgba(11,11,11,.9),inset 0 2px 0 0 rgba(255,255,255,.35),inset 0 0 0 2.5px rgba(245,244,238,.08),-2px 3px 0 -1px rgba(245,244,238,.25) !important;
  transition:transform .55s var(--spring),background .3s ease,color .3s ease !important}
html body.book .bk-dev:nth-child(even){background:var(--tx-grain),var(--tx-light),var(--tx-knurl),#121211 !important}
html body.book .bk-dev svg{stroke:currentColor !important}
@media (hover:hover) and (pointer:fine){html body.book .bk-dev:hover{transform:translateY(-4px) scale(1.04)}}
html body.book .bk-dev:has(input:checked){background:#F5F4EE !important;color:#0B0B0B !important;box-shadow:inset 0 0 0 1.5px rgba(11,11,11,.85),inset 0 2px 0 0 #fff,-2px 3px 0 -1px rgba(245,244,238,.35),0 10px 20px -10px rgba(0,0,0,.7) !important}
html body.book .bk-dev:has(input:focus-visible),html body.book .bk-chip:has(input:focus-visible) span{outline:2px solid #F5F4EE;outline-offset:3px}
/* problem chips: crystal pills, picked = shoji */
html body.book .bk-chip span{background:var(--pl) !important;color:#F5F4EE !important;border:0 !important;box-shadow:var(--pl-sh) !important;transition:transform .55s var(--spring),background .3s ease,color .3s ease !important}
@media (hover:hover) and (pointer:fine){html body.book .bk-chip:hover span{transform:translateY(-3px) scale(1.05)}}
html body.book .bk-chip input:checked + span{background:#F5F4EE !important;color:#0B0B0B !important;box-shadow:inset 0 0 0 1.5px rgba(11,11,11,.85),inset 0 2px 0 0 #fff,-2px 3px 0 -1px rgba(245,244,238,.35) !important}
html body.book :is(.bk-devices,.bk-chips):has([aria-invalid="true"]) :is(.bk-dev,.bk-chip span){box-shadow:inset 0 0 0 2px #F5F4EE !important}
/* fields: dark crystal, shoji text and labels */
html body.book .bk-field :is(input,select,textarea){color:#F5F4EE !important;background-color:rgba(255,255,255,.06) !important;border:0 !important;
  box-shadow:inset 0 0 0 1.5px rgba(11,11,11,.85),inset 0 0 0 2.5px rgba(245,244,238,.16),inset 0 2px 0 0 rgba(255,255,255,.16),-2px 3px 0 -1px rgba(245,244,238,.2) !important;color-scheme:dark}
html body.book .bk-field select{background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3E%3Cpath d='M5 8l5 5 5-5' fill='none' stroke='%23F5F4EE' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") !important;background-repeat:no-repeat !important;background-position:right 14px center !important;background-size:18px !important}
html body.book .bk-field select option{background:#0B0B0B;color:#F5F4EE}
html body.book .bk-field :is(input,select,textarea):disabled{opacity:.55}
html body.book .bk-field :is(input,select,textarea):focus-visible{outline:2px solid #F5F4EE !important;outline-offset:2px}
html body.book .bk-field label{color:rgba(245,244,238,.62) !important}
html body.book .bk-field :is(input,textarea)::placeholder{color:rgba(245,244,238,.45) !important}
html body.book :is(.bk-error,[aria-invalid="true"] ~ .bk-err){color:#F5F4EE !important}
html body.book .bk-error{background:rgba(245,244,238,.08) !important;border:0 !important;border-radius:12px}
/* Send booking + done buttons: crystal pills that pop up (outside #main on phones: the bottom bar) */
html body.book :is(.bk-btn,.bk-btn-line){color:#F5F4EE !important;background:var(--pl) !important;border:0 !important;box-shadow:var(--pl-sh) !important;text-shadow:none !important;
  -webkit-backdrop-filter:blur(12px) saturate(160%);backdrop-filter:blur(12px) saturate(160%);transition:transform .55s var(--spring),box-shadow .4s ease,background .4s ease !important}
html body.book :is(.bk-btn,.bk-btn-line)::before,html body.book :is(.bk-btn,.bk-btn-line)::after{display:none !important}
html body.book .bk-btn svg{stroke:#F5F4EE !important}
@media (hover:hover) and (pointer:fine){html body.book :is(.bk-btn,.bk-btn-line):hover{transform:translateY(-6px) scale(1.07) !important;background:var(--pl-h) !important;box-shadow:var(--pl-sh-h) !important}}
html body.book :is(.bk-btn,.bk-btn-line):active{transform:translateY(-1px) scale(.97) !important}
html body.book .bk-bar{background:rgba(11,11,11,.82) !important;-webkit-backdrop-filter:blur(20px);backdrop-filter:blur(20px);border:0 !important;box-shadow:0 -1px 0 rgba(245,244,238,.1),0 -20px 40px -20px rgba(0,0,0,.8) !important}
html body.book .bk-done-ic{border-radius:50%;padding:8px;background:var(--pl) !important;box-shadow:var(--pl-sh) !important;color:#F5F4EE !important}
html body.book .bk-done-ic svg{stroke:#F5F4EE !important}
html body.book .bk-sum{top:96px}
@media (max-width:734px){html body.book .bk{padding:96px 24px 110px !important}}
html body.book .bk-n{-webkit-text-fill-color:currentColor !important}
/* beat the older light-pill rule (it carries an id in :not(#fix *)) */
html body.book:not(#_) :is(.bk-btn,.bk-btn-line){color:#F5F4EE !important;background:var(--pl) !important;box-shadow:var(--pl-sh) !important}
@media (hover:hover) and (pointer:fine){html body.book:not(#_) :is(.bk-btn,.bk-btn-line):hover{transform:translateY(-6px) scale(1.07) !important;background:var(--pl-h) !important;box-shadow:var(--pl-sh-h) !important}}

/* ---------------------------------- CONTACT ---------------------------------- */
html body.contact .cox{background:#0B0B0B !important;background-image:none !important;color:#F5F4EE}
html body.contact .cox::before,html body.contact .cox::after{display:none !important}
html body.contact .cox > section{--fs:1;position:relative;isolation:isolate;min-height:100svh;box-sizing:border-box;margin:0 !important;
  display:flex !important;flex-direction:column;justify-content:center;background:#0B0B0B !important;
  padding:clamp(100px,12vh,124px) 0 clamp(60px,8vh,96px) !important;border:0 !important}
html body.contact .cox > section::before{content:"";position:absolute;z-index:-1;pointer-events:none;inset:var(--pan-y) var(--pan-x);border-radius:clamp(26px,3vw,40px);background:var(--dome);box-shadow:var(--dome-sh)}
html body.contact .cox > section::after{display:none !important}
html body.contact .cox :is(.cox-h1,.cox-h2,.cox-store-name,.cox-card-h,.cox-sum-h,.cox-box-h,.cox-tout,.cox-legend,.cox-preview-h,.cox-hours dd,.cox-row.today *){color:#F5F4EE !important;-webkit-text-fill-color:#F5F4EE}
html body.contact .cox :is(.cox-h1,.cox-store-name){font-size:clamp(40px,5.4vw,80px);line-height:1.02;letter-spacing:-.03em}
html body.contact .cox .cox-h2{font-size:clamp(32px,4vw,56px);line-height:1.06;letter-spacing:-.02em}
html body.contact .cox :is(.cox-lead,.cox-facts,.cox-card-p,.cox-body,.cox-foot,.cox-status,.cox-eyebrow,.cox-soft,.cox-addr,.cox-hours dt,.cox-sub,p){color:rgba(245,244,238,.7) !important}
html body.contact .cox :is(.cox-link,.cox-more,.cox-s-link){color:#F5F4EE !important}
html body.contact .cox .cox-star{color:#F5F4EE !important;fill:#F5F4EE !important}
html body.contact .cox hr{display:none}
/* buttons: crystal pills that pop up */
html body.contact:not(#_) .cox .cox-pill{color:#F5F4EE !important;background:var(--pl) !important;border:0 !important;box-shadow:var(--pl-sh) !important;
  -webkit-backdrop-filter:blur(12px) saturate(160%);backdrop-filter:blur(12px) saturate(160%);transition:transform .55s var(--spring),box-shadow .4s ease,background .4s ease !important}
html body.contact .cox .cox-pill svg{stroke:#F5F4EE !important;fill:none}
@media (hover:hover) and (pointer:fine){html body.contact:not(#_) .cox .cox-pill:hover{transform:translateY(-6px) scale(1.07) !important;background:var(--pl-h) !important;box-shadow:var(--pl-sh-h) !important}}
html body.contact:not(#_) .cox .cox-pill:active{transform:translateY(-1px) scale(.97) !important}
/* "what do you need" cards: textured, each different */
html body.contact .cox .cox-card{border:0 !important;border-radius:24px !important;box-shadow:var(--tx-sh) !important;color:#F5F4EE;transition:transform .55s var(--spring) !important}
html body.contact .cox .cox-card:nth-child(1){background:var(--tx-grain),var(--tx-light),var(--tx-floor),var(--tx-carbon),#121211 !important}
html body.contact .cox .cox-card:nth-child(2){background:var(--tx-grain),var(--tx-light),var(--tx-floor),var(--tx-brushed) !important}
html body.contact .cox .cox-card:nth-child(3){background:var(--tx-grain),var(--tx-light),var(--tx-floor),var(--tx-honey),#121211 !important}
html body.contact .cox .cox-card svg{stroke:#F5F4EE !important}
@media (hover:hover) and (pointer:fine){html body.contact .cox .cox-card:hover{transform:translateY(-6px)}}
/* message builder: tiles = crystal, picked = shoji; field + preview dark crystal */
html body.contact .cox .cox-tile span{background:var(--pl) !important;color:#F5F4EE !important;border:0 !important;padding:15px !important;
  box-shadow:var(--pl-sh) !important;transition:transform .55s var(--spring),background .3s ease,color .3s ease !important}
@media (hover:hover) and (pointer:fine){html body.contact .cox .cox-tile:hover span{transform:translateY(-3px) scale(1.03)}}
html body.contact .cox .cox-tile input:checked+span{background:#F5F4EE !important;color:#0B0B0B !important;
  box-shadow:inset 0 0 0 1.5px rgba(11,11,11,.85),inset 0 2px 0 0 #fff,-2px 3px 0 -1px rgba(245,244,238,.35) !important}
html body.contact .cox .cox-tile input:focus-visible+span{outline:2px solid #F5F4EE;outline-offset:3px}
html body.contact .cox .cox-input{color:#F5F4EE !important;background:rgba(255,255,255,.06) !important;border:0 !important;
  box-shadow:inset 0 0 0 1.5px rgba(11,11,11,.85),inset 0 0 0 2.5px rgba(245,244,238,.16),inset 0 2px 0 0 rgba(255,255,255,.16),-2px 3px 0 -1px rgba(245,244,238,.2) !important}
html body.contact .cox .cox-input::placeholder{color:rgba(245,244,238,.45) !important}
html body.contact .cox .cox-input:focus-visible{outline:2px solid #F5F4EE !important;outline-offset:2px}
html body.contact .cox :is(.cox-preview,.cox-box){background:var(--cr) !important;box-shadow:var(--cr-sh) !important;border:0 !important;border-radius:24px !important}
html body.contact .cox .cox-preview #wa-text{color:#F5F4EE !important}
html body.contact .cox .cox-box-in > div{border-color:rgba(245,244,238,.1) !important}
html body.contact .cox .cox-box *{border-color:rgba(245,244,238,.1) !important}
/* visit: three textured cards + a dark map */
html body.contact .cox .cox-sum{padding:24px;border-radius:24px;box-shadow:var(--tx-sh)}
html body.contact .cox .cox-sum-addr{background:var(--tx-grain),var(--tx-light),var(--tx-floor),var(--tx-dots),#121211}
html body.contact .cox .cox-sum-hours{background:var(--tx-grain),var(--tx-light),var(--tx-floor),var(--tx-knurl),#121211}
html body.contact .cox .cox-sum-talk{background:var(--tx-grain),var(--tx-light),var(--tx-floor),var(--tx-carbon),#121211}
html body.contact .cox .cox-summary{gap:clamp(12px,1.6vw,20px) !important;border:0 !important}
html body.contact .cox .cox-row.today{background:rgba(245,244,238,.08);box-shadow:inset 0 0 0 1px rgba(245,244,238,.24);border-radius:10px}
html body.contact .cox .cox-map{background:#121211 !important;border-radius:24px !important;box-shadow:inset 0 0 0 1.5px rgba(11,11,11,.85),0 0 0 1.5px rgba(11,11,11,.9),0 0 0 3px rgba(245,244,238,.16),0 30px 60px -28px rgba(0,0,0,.9)}
html body.contact .cox .cox-map iframe{filter:grayscale(1) invert(.92) contrast(.9) brightness(.95)}
@media (max-width:734px){html body.contact .cox > section{padding:96px 0 56px !important}html body.contact .cox .cox-box{margin-left:0;margin-right:0}}
html body.contact .cox .cox-store-head{border-top:0 !important;padding-top:0}

/* ---------------------------------- ACCESSORIES (older page, same look) ---------------------------------- */
html body.accessories .acx{background:#0B0B0B !important;color:#F5F4EE}
html body.accessories .acx > :is(.acx-top,section){--fs:1;position:relative;isolation:isolate;min-height:100svh;box-sizing:border-box;margin:0 !important;
  display:flex !important;flex-direction:column;justify-content:center;background:#0B0B0B !important;background-image:none !important;
  padding:clamp(100px,12vh,124px) 0 clamp(60px,8vh,96px) !important;border:0 !important}
html body.accessories .acx > :is(.acx-top,section)::before{content:"";position:absolute;z-index:-1;pointer-events:none;inset:var(--pan-y) var(--pan-x);border-radius:clamp(26px,3vw,40px);background:var(--dome) !important;box-shadow:var(--dome-sh) !important}
html body.accessories .acx > :is(.acx-top,section)::after{display:none !important}
html body.accessories .acx :is(.acx-h,.acx-card-h,.acx-media-h,.acx-icard-h,.acx-col-t,.acx-chap-t,h1,h2,h3){color:#F5F4EE !important;-webkit-text-fill-color:#F5F4EE}
html body.accessories .acx :is(.acx-sub,.acx-lead,.acx-card-p,.acx-media-p,.acx-icard-p,.acx-muted,.acx-note,.acx-eye,.acx-badge,.acx-credit,p,li){color:rgba(245,244,238,.72) !important}

html body.accessories .acx :is(.acx-link,.acx-link::before,.acx-link::after,.acx-all){color:#F5F4EE !important}
html body.accessories .acx :is(.acx-star,.acx-star *){fill:#F5F4EE !important;color:#F5F4EE !important}
html body.accessories .acx :is(.acx-card,.acx-media){background:var(--cr) !important;box-shadow:var(--cr-sh) !important;border:0 !important;border-radius:24px !important}
html body.accessories .acx :is(.acx-card-pic,.acx-media-pic,.acx-chap-ic){background:#F5F4EE !important}
html body.accessories .acx :is(.acx-card-pic,.acx-media-pic,.acx-chap-ic) img{mix-blend-mode:multiply}
html body.accessories .acx .acx-icard{border:0 !important;border-radius:24px !important;box-shadow:var(--tx-sh) !important;background:var(--tx-grain),var(--tx-light),var(--tx-floor),var(--tx-carbon),#121211 !important}
html body.accessories .acx .acx-icard:nth-child(2n){background:var(--tx-grain),var(--tx-light),var(--tx-floor),var(--tx-brushed) !important}
html body.accessories .acx .acx-icard:nth-child(3n){background:var(--tx-grain),var(--tx-light),var(--tx-floor),var(--tx-honey),#121211 !important}
html body.accessories .acx .acx-icard svg{stroke:#F5F4EE !important}
html body.accessories .acx :is(.acx-round,.acx-plus,.acx-paddle,.acx-chap-paddle){background:var(--pl) !important;color:#F5F4EE !important;box-shadow:var(--pl-sh) !important;border:0 !important}
html body.accessories .acx :is(.acx-round,.acx-plus,.acx-paddle,.acx-chap-paddle) svg{stroke:#F5F4EE !important;fill:none}
html body.accessories:not(#_) .acx :is(.acx-btn,.pill){color:#F5F4EE !important;background:var(--pl) !important;border:0 !important;box-shadow:var(--pl-sh) !important;transition:transform .55s var(--spring),box-shadow .4s ease !important}
@media (hover:hover) and (pointer:fine){html body.accessories:not(#_) .acx :is(.acx-btn,.pill):hover{transform:translateY(-6px) scale(1.07) !important;box-shadow:var(--pl-sh-h) !important}}
html body.accessories .acx :is(.acx-tabs,.acx-tabs-row){background:none !important;box-shadow:none !important;border:0 !important}

html body.accessories .acx *{border-color:rgba(245,244,238,.1)}
html body.accessories .acx > :is(.acx-top,section) > *{min-width:0;max-width:100%}html body.accessories .acx .acx-chap{overflow-x:clip}
html body.accessories .acx .acx-tabs{max-width:100%;overflow-x:auto;scrollbar-width:none}
html body.accessories .acx .acx-tab{color:#F5F4EE !important;position:relative;z-index:1}html body.accessories .acx .acx-tab[aria-pressed="true"]{color:#0B0B0B !important}

/* (Sir, Nov 3 "deep search spacings, iPhone and computer") measured fixes:
   - store choice chips (20W / USB-C ...) are 24px tall: on touch screens give them a 42px tap area without changing their look
   - product / repair card titles: no single word left alone on the last line
   - small paragraphs: no lone word on the last line (e.g. "... 3 / PM")
   - phone menu: the address line sat right on "Contact" (0px gap) */
@media (pointer:coarse){html body .st-var{position:relative}html body .st-var::after{content:"";position:absolute;inset:-9px -3px}}
html body .st-prod h3{text-wrap:balance}
html body :is(p,li){text-wrap:pretty}
html body .menu .menu-foot{margin-top:14px}