/* =====================================================================
   Marvans own look + LIQUID GLASS + GLASSMORPHISM (Oct 31, 2026).
   Sir: "Start doing liquid glass and glass morphism in Marvans too, now I don't want it like Apple."
   Loads in <head> after dialed.css on every public page (staff.html skips it: builder/build.py).
   Every selector starts with ":root" so it beats the page css files that load later in <body> and css/pop.css.

   1. Type (Nov 1): Apple-style system font stack (SF Pro on Apple devices, Inter from Google Fonts elsewhere).
   2. No Apple blue: links + focus rings are burgundy (#800020) on light, soft rose on black.
   3. Light behind the glass: soft burgundy + silver blobs behind the white/grey sections, so frost and lensing show.
   4. GLASSMORPHISM (all browsers): cards and panels are frosted (backdrop blur + see-through white + thin silver edge).
   5. LIQUID GLASS: top bar, local bar, carousel controls, main buttons, phone dock and bag drawer.
      - all browsers: clear centre, bright specular line on the top edge, thin silver rim, springy hover/press.
      - Chromium only (html.lg, set by js/liquid.js): a lens layer bends what is behind at the edges
        (backdrop-filter:url(#mv-lens), the SVG filter sits at the top of <body> in builder/layout.html).
      - Safari / Firefox: plain frosted glass. Reduced transparency: solid. Reduced motion: no springs.
   To undo: remove the liquid.css + liquid.js lines and the <svg class="lg-defs"> block from builder/layout.html, rebuild.
   ===================================================================== */
@property --lg-a{syntax:'<angle>';inherits:true;initial-value:135deg}

/* ---------- 0. tokens ---------- */
:root{
  /* (Sir, Nov 1) Apple-style type: the system font, so Apple devices show SF Pro (never self-hosted); Inter (Google Fonts) elsewhere */
  --font:-apple-system,BlinkMacSystemFont,"SF Pro Text","SF Pro Display",system-ui,"Inter","Segoe UI",Roboto,sans-serif;
  --font-display:-apple-system,BlinkMacSystemFont,"SF Pro Display","SF Pro Text",system-ui,"Inter","Segoe UI",Roboto,sans-serif;
  --link:#800020; --link-dark:#F2B8C6; --focus:#800020;
  /* liquid glass */
  --lq-rim:linear-gradient(var(--lg-a),rgba(255,255,255,1) 0%,rgba(196,200,210,.75) 18%,rgba(255,255,255,.35) 42%,rgba(150,156,168,.45) 72%,rgba(255,255,255,.9) 100%);
  --lq-rim-dark:linear-gradient(var(--lg-a),rgba(255,255,255,.55) 0%,rgba(255,255,255,.14) 30%,rgba(255,255,255,.05) 60%,rgba(255,255,255,.28) 100%);
  --lq-spec:inset 0 1px 0 rgba(255,255,255,.95),inset 0 -1px 1px rgba(255,255,255,.35),inset 0 8px 14px -10px rgba(255,255,255,.9);
  --lq-spec-dark:inset 0 1px 0 rgba(255,255,255,.28),inset 0 -1px 0 rgba(255,255,255,.06),inset 0 10px 18px -14px rgba(255,255,255,.35);
  --lq-ease:cubic-bezier(.34,1.45,.5,1);
  /* glassmorphism */
  --fr-fill:linear-gradient(160deg,rgba(255,255,255,.78),rgba(255,255,255,.5));
  --fr-blur:blur(16px) saturate(160%);
  --fr-shadow:inset 0 1px 0 rgba(255,255,255,.95),inset 0 0 40px rgba(255,255,255,.35),0 1px 2px rgba(40,0,10,.05),0 20px 44px -24px rgba(60,0,16,.28);
  --fr-shadow-h:inset 0 1px 0 #fff,inset 0 0 40px rgba(255,255,255,.4),0 2px 4px rgba(40,0,10,.06),0 30px 60px -26px rgba(128,0,32,.38);
  /* light behind the glass: one 1400px tile of soft blobs, repeated down the page */
  --blobs:radial-gradient(30% 22% at 8% 14%,rgba(128,0,32,.11),rgba(128,0,32,0) 70%),
          radial-gradient(28% 20% at 94% 36%,rgba(150,158,176,.26),rgba(150,158,176,0) 70%),
          radial-gradient(34% 22% at 78% 74%,rgba(128,0,32,.08),rgba(128,0,32,0) 70%),
          radial-gradient(26% 18% at 18% 88%,rgba(176,182,196,.24),rgba(176,182,196,0) 70%);
}

/* ---------- 1. Marvans type ---------- */
:root body{font-family:var(--font);letter-spacing:-.01em;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}
:root body :is(h1,h2,h3,.t-hero,.t-h1,.t-h2,.t-h3,.mfx-q,.mfx-a,.hpm-v,.hsy-h,.stx-htitle,.hvisit-tel,.bag-head h2,.foot-cols h3){
  font-family:var(--font-display);font-optical-sizing:auto}
/* big headings: bolder, tighter, a little more character than before */
:root body :is(.t-hero,.mfx-a,.stx-h1,.acx-h1,.cox-h1,.duo-h,.pro-h,.hsy-h,.hgrid-title,.acx-h2,.cox-h2,.rpx-brand,.hpm-v){
  font-weight:700;letter-spacing:-.028em;line-height:1.05}
:root body :is(h2,h3,.t-h1,.t-h2,.t-h3,.bk-h1,.bk-done-h,.hwhy-title,.hhow-t,.hvisit-title,.acx-card-h,.acx-icard-h,.stx-htitle){font-weight:600;letter-spacing:-.022em}

:root body .foot-cols h3{font-weight:700;letter-spacing:.02em}
/* small labels / eyebrows */
:root body :is(.t-eyebrow,.hpm-eyebrow,.hvisit-eyebrow,.cox-eyebrow){font-family:var(--font);font-weight:600;letter-spacing:-.005em}
/* buttons: semibold */
:root body :is(.pill,.hpm-pill,.hgrid-pill,.hgrid-pill-2,.ln-btn,.bk-btn,.cox-pill,.acx-btn,.abx-btn,.st-add){font-weight:600;letter-spacing:-.01em}

/* ---------- 2. links: burgundy, not Apple blue ---------- */
:root body .mfx-fine a{color:var(--link)}
:root 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)){
  text-decoration:underline;text-decoration-color:rgba(128,0,32,0);text-decoration-thickness:1.5px;text-underline-offset:4px;
  transition:text-decoration-color .25s ease,color .2s ease}
@media (hover:hover){
  :root 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)):hover{text-decoration-color:currentColor}
}
:root body .text-in:focus{box-shadow:0 0 0 3px rgba(128,0,32,.18)}
:root body .bk-field :is(input,select,textarea):focus{box-shadow:0 0 0 3px rgba(128,0,32,.14)}

/* ---------- 3. light behind the glass ---------- */
:root body :is(.stx,.bk,.cox,.acx-groups,.acx-index,.hpm,.hvisit){background:var(--blobs) 0 0/100% 1400px repeat-y,#f5f5f7}
:root body :is(.acx-ways,.hgrid){background:var(--blobs) 0 400px/100% 1400px repeat-y,#fff}
:root body .hwhy{background:radial-gradient(40% 46% at 18% 62%,rgba(128,0,32,.08),rgba(128,0,32,0) 70%),radial-gradient(32% 40% at 86% 30%,rgba(160,166,182,.24),rgba(160,166,182,0) 70%),#fff}
:root body .hhow{background:radial-gradient(40% 46% at 82% 60%,rgba(128,0,32,.08),rgba(128,0,32,0) 70%),radial-gradient(30% 40% at 14% 34%,rgba(160,166,182,.24),rgba(160,166,182,0) 70%),#fff}
/* hero: burgundy light under the stage + a little light behind the controls and the buttons so the lens has something to bend */
:root body .mfx{background:
  radial-gradient(52% 40% at 50% 60%,rgba(128,0,32,.07),rgba(128,0,32,0) 70%),
  radial-gradient(16% 10% at 50% 92%,rgba(140,148,166,.32),rgba(140,148,166,0) 72%),
  radial-gradient(14% 11% at 84% 92%,rgba(128,0,32,.16),rgba(128,0,32,0) 72%),#fff}
:root body .duo-tile{background:radial-gradient(50% 36% at 50% 88%,rgba(128,0,32,.09),rgba(128,0,32,0) 70%),radial-gradient(30% 30% at 12% 20%,rgba(160,166,182,.2),rgba(160,166,182,0) 70%),#F6F5F8}

/* ---------- 4. GLASSMORPHISM: cards + panels ---------- */
:root body :is(.st-card,.stx-card,.stx-half,.acx-card,.acx-icard,.cox-card,.cox-box,.cox-preview,.abv-facts li,.bk-step,.bk-sum-box,.bk-done,.st-strip,.st-steps li,.hpm-face,.hvisit-card--split,.mfx-card){
  background:var(--fr-fill);-webkit-backdrop-filter:var(--fr-blur);backdrop-filter:var(--fr-blur);box-shadow:var(--fr-shadow)}
:root body #pgrid .st-card,:root body #st-latest .st-card{background:var(--fr-fill)}
@media (hover:hover){
  :root body :is(.st-card,.stx-card,.stx-half,.acx-card,.acx-icard,.cox-card,.st-steps li):hover{box-shadow:var(--fr-shadow-h)}
}
/* a thin silver edge on cards that did not have one yet (dialed.css already gives most cards a ::after edge) */
:root body :is(.st-card,.hpm-face,.mfx-card){border:1px solid rgba(255,255,255,.85);outline:1px solid rgba(150,156,170,.22);outline-offset:-1px}
/* the store "difference" cards sit on black: keep them solid white so they don't turn grey */

/* dark cards stay obsidian, now frosted dark glass */
:root body :is(.hwhy-card,.hhow-card,.hvisit-card--dark,.abv-dark){
  -webkit-backdrop-filter:blur(14px) saturate(140%);backdrop-filter:blur(14px) saturate(140%)}
/* option tiles in the booking form: small frosted chips */
:root body .bk-dev:not(:has(input:checked)){background:linear-gradient(180deg,rgba(255,255,255,.8),rgba(255,255,255,.55));-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px)}

/* ---------- 5. LIQUID GLASS ---------- */
/* shared parts: rim (::before) + lens (::after, Chromium) */
:root body :is(.localnav,.mfx-nav,.dock,.bag,:is(.mfx-buy,.duo-tile .ctas) .pill,.hpm-pill,.ln-btn){isolation:isolate}
:root body :is(.mfx-nav,:is(.mfx-buy,.duo-tile .ctas) .pill,.hpm-pill,.ln-btn){position:relative}
:root body :is(.localnav,.mfx-nav,.dock,.bag,:is(.mfx-buy,.duo-tile .ctas) .pill,.hpm-pill)::before{
  content:"";position:absolute;inset:0;border-radius:inherit;padding:1px;pointer-events:none;z-index:3;
  background:var(--lq-rim);
  -webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);-webkit-mask-composite:xor;mask-composite:exclude}
:root body .localnav::before{border-radius:0;padding:0 0 1px}
:root body .bag::before{border-radius:0;padding:0 0 0 1px}
html.lg body :is(.localnav,.mfx-nav,.dock,.bag,:is(.mfx-buy,.duo-tile .ctas) .pill)::after{
  content:"";position:absolute;inset:0;z-index:-1;border-radius:inherit;pointer-events:none;
  -webkit-backdrop-filter:url(#mv-lens) blur(1.5px) saturate(150%) brightness(1.03);
  backdrop-filter:url(#mv-lens) blur(1.5px) saturate(150%) brightness(1.03)}
/* coloured glass keeps its colour: no extra saturation under burgundy pills / the obsidian bar */
html.lg body :is(.gnav,:is(.mfx-buy,.duo-tile .ctas) .pill:not(.pill-line))::after{-webkit-backdrop-filter:url(#mv-lens) blur(1px);backdrop-filter:url(#mv-lens) blur(1px)}
/* with the lens on, the parent must not blur itself (that would hide the page from the lens) */
html.lg body :is(.localnav,.mfx-nav,.dock,.bag){-webkit-backdrop-filter:none;backdrop-filter:none}

/* top bar: see css/nav-glass.css */

/* local bar (inner pages): clear white liquid glass */
:root body .localnav{--lg-a:180deg;background:linear-gradient(180deg,rgba(255,255,255,.62),rgba(255,255,255,.46));
  box-shadow:inset 0 1px 0 rgba(255,255,255,.95),0 10px 28px -20px rgba(60,0,16,.35);border-bottom-color:transparent}

/* carousel controls: one liquid glass pill holding the arrows, dots and pause */
:root body .mfx-nav{gap:6px;padding:5px 6px;border-radius:999px;
  background:linear-gradient(180deg,rgba(255,255,255,.55),rgba(255,255,255,.22));
  box-shadow:var(--lq-spec),0 1px 2px rgba(0,0,0,.05),0 14px 30px -16px rgba(60,0,16,.35);
  transition:--lg-a .6s ease,transform .5s var(--lq-ease),box-shadow .4s ease}
:root body .mfx-nav .mfx-pad{background:linear-gradient(180deg,rgba(255,255,255,.95),rgba(255,255,255,.55));color:#3a0010;
  box-shadow:inset 0 1px 0 #fff,inset 0 -1px 1px rgba(0,0,0,.06),0 0 0 1px rgba(150,156,170,.28),0 4px 10px -6px rgba(60,0,16,.4);
  transition:transform .4s var(--lq-ease),background-color .2s ease,box-shadow .3s ease}
@media (hover:hover) and (pointer:fine){
  :root body .mfx-nav:hover{--lg-a:170deg}
  :root body .mfx-nav .mfx-pad:hover{background:linear-gradient(180deg,#fff,rgba(255,255,255,.75));color:#800020;transform:scale(1.08)}
}
:root body .mfx-nav .mfx-pad:active{transform:scale(.9);transition-duration:.12s}
:root body .mfx-dot i{background:rgba(58,0,16,.32)}
:root body .mfx-dot[aria-current="true"] i{background:rgba(58,0,16,.14)}

/* main buttons: liquid glass pills */
:root body :is(:is(.mfx-buy,.duo-tile .ctas) .pill,.hpm-pill,.ln-btn){
  transition:--lg-a .6s ease,transform .5s var(--lq-ease),box-shadow .35s ease,background-color .25s ease,color .2s ease}
/* filled = burgundy glass (a little see-through, glossy band, bright top edge) */
:root body :is(:is(.mfx-buy,.duo-tile .ctas) .pill:not(.pill-line),.hpm-pill,.ln-btn){
  background:linear-gradient(-72deg,rgba(255,255,255,.06) 20%,rgba(255,255,255,.26) 48%,rgba(255,255,255,.06) 76%),
             linear-gradient(180deg,rgba(142,8,42,.92),rgba(128,0,32,.9) 55%,rgba(98,0,24,.94));
  border-color:transparent;color:#fff;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.6),inset 0 -1px 1px rgba(255,255,255,.18),inset 0 10px 16px -12px rgba(255,255,255,.55),
             0 2px 4px rgba(80,0,20,.18),0 12px 26px -12px rgba(128,0,32,.7)}
/* outline = clear glass with burgundy words */
:root body :is(.mfx-buy,.duo-tile .ctas) .pill.pill-line{
  background:linear-gradient(-72deg,rgba(255,255,255,.2) 20%,rgba(255,255,255,.7) 48%,rgba(255,255,255,.2) 76%),rgba(255,255,255,.28);
  border-color:transparent;color:#800020;
  box-shadow:var(--lq-spec),0 1px 2px rgba(0,0,0,.05),0 12px 26px -14px rgba(60,0,16,.4)}
@media (hover:hover) and (pointer:fine){
  :root body :is(:is(.mfx-buy,.duo-tile .ctas) .pill,.hpm-pill,.ln-btn):hover{--lg-a:165deg;transform:translateY(-1px) scale(1.035);filter:none}
  :root body :is(:is(.mfx-buy,.duo-tile .ctas) .pill:not(.pill-line),.hpm-pill,.ln-btn):hover{
    box-shadow:inset 0 1px 0 rgba(255,255,255,.7),inset 0 -1px 1px rgba(255,255,255,.2),inset 0 10px 16px -12px rgba(255,255,255,.6),
               0 3px 6px rgba(80,0,20,.2),0 18px 34px -12px rgba(128,0,32,.75)}
  :root body :is(.mfx-buy,.duo-tile .ctas) .pill.pill-line:hover{background:linear-gradient(-72deg,rgba(255,255,255,.3) 20%,rgba(255,255,255,.85) 48%,rgba(255,255,255,.3) 76%),rgba(255,255,255,.4);color:#5E0018}
}
:root body :is(:is(.mfx-buy,.duo-tile .ctas) .pill,.hpm-pill,.ln-btn):active{transform:scale(.96);transition-duration:.12s}
:root body .ln-btn{box-shadow:inset 0 1px 0 rgba(255,255,255,.55),0 6px 14px -8px rgba(128,0,32,.7)}

/* every other pill on the site: same liquid finish, no lens (cheaper) */
:root body :is(.pill:not(.pill-line):not(:is(.mfx-buy,.duo-tile .ctas) .pill),.hgrid-pill:not(.hgrid-pill-2),.bk-btn:not(.bk-btn-line),.cox-pill,.acx-btn,.abx-btn),
:root body #pgrid .st-add:not(.added),:root body #st-latest .st-add:not(.added),:root body #bag-send{
  background-image:linear-gradient(-72deg,rgba(255,255,255,.05) 20%,rgba(255,255,255,.22) 48%,rgba(255,255,255,.05) 76%),linear-gradient(180deg,rgba(255,255,255,.12),rgba(0,0,0,.08));
  box-shadow:inset 0 1px 0 rgba(255,255,255,.55),inset 0 -1px 1px rgba(255,255,255,.14),0 10px 22px -12px rgba(128,0,32,.65)}
:root body :is(.mfx,.duo-tile,.hpm,.stx,.acx,.cox,.bk) :is(.pill-line,.bk-btn-line):not(:is(.mfx-buy,.duo-tile .ctas) .pill){
  background:linear-gradient(-72deg,rgba(255,255,255,.3) 20%,rgba(255,255,255,.8) 48%,rgba(255,255,255,.3) 76%),rgba(255,255,255,.4);
  -webkit-backdrop-filter:blur(10px) saturate(160%);backdrop-filter:blur(10px) saturate(160%);
  box-shadow:var(--lq-spec),0 0 0 1px rgba(128,0,32,.35),0 10px 22px -14px rgba(60,0,16,.4)}

/* phone dock: liquid glass */
:root body .dock{background:linear-gradient(180deg,rgba(255,255,255,.6),rgba(255,255,255,.34));border-color:transparent;
  box-shadow:var(--lq-spec),0 1px 2px rgba(0,0,0,.06),0 16px 36px -10px rgba(60,0,16,.35)}

/* bag drawer: a sheet of liquid glass */
:root body .bag{--lg-a:120deg;background:linear-gradient(160deg,rgba(255,255,255,.88),rgba(255,255,255,.74));
  box-shadow:inset 1px 0 0 rgba(255,255,255,.95),inset 18px 0 30px -24px rgba(255,255,255,.9),-24px 0 60px rgba(60,0,16,.18)}
html.lg body .bag{background:linear-gradient(160deg,rgba(255,255,255,.8),rgba(255,255,255,.62))}
:root body .bag .bag-x{background:linear-gradient(180deg,#fff,rgba(255,255,255,.6));box-shadow:inset 0 1px 0 #fff,0 0 0 1px rgba(150,156,170,.3),0 4px 10px -6px rgba(60,0,16,.4)}
:root body .bag-list li{border-bottom-color:rgba(128,0,32,.1)}

/* ---------- 6. accessibility ---------- */
@media (prefers-reduced-transparency:reduce){
  :root body :is(.st-card,.stx-card,.stx-half,.acx-card,.acx-icard,.cox-card,.cox-box,.cox-preview,.abv-facts li,.bk-step,.bk-sum-box,.bk-done,.st-strip,.st-steps li,.hpm-face,.hvisit-card--split,.mfx-card,.mfx-nav,.localnav,.dock,.bag,.bk-dev){
    background:#fff!important;-webkit-backdrop-filter:none!important;backdrop-filter:none!important}
  :root body :is(.localnav,.mfx-nav,.dock,.bag,:is(.mfx-buy,.duo-tile .ctas) .pill)::after{content:none!important}
}
@media (prefers-reduced-motion:reduce){
  :root body :is(.mfx-nav,.mfx-nav .mfx-pad,:is(.mfx-buy,.duo-tile .ctas) .pill,.hpm-pill,.ln-btn){transition:none}
  :root body :is(.mfx-nav .mfx-pad,:is(.mfx-buy,.duo-tile .ctas) .pill,.hpm-pill,.ln-btn):is(:hover,:active){transform:none}
}