/* Lab-only polish (2026-10-14) for the main site pages; copied to lab/site/assets/lab-polish.css by tools/build-lab.js.
   Classes come from tools/lab-polish.js (tagged by computed style). Staging/prod never load this. */
:root{--lp-lift:0 1px 2px rgba(43,50,41,.05),0 14px 32px -20px rgba(43,50,41,.38);--lp-lift-2:0 2px 4px rgba(43,50,41,.06),0 26px 46px -22px rgba(43,50,41,.5);--lp-ease:cubic-bezier(.2,.7,.2,1)}

/* 1. hairline grids → separate lifted cards */
body .lp-hgrid.lp-hgrid.lp-hgrid{gap:18px!important;background:transparent!important;border:0!important;box-shadow:none!important;overflow:visible!important}
body .lp-card.lp-card.lp-card{border:1px solid rgba(205,194,180,.8)!important;box-shadow:var(--lp-lift);transition:transform .28s var(--lp-ease),box-shadow .28s var(--lp-ease),border-color .2s,background-color .2s;position:relative}
.lp-card.lp-link{cursor:pointer}
body .lp-card.lp-link.lp-link:hover,body .lp-box.lp-link.lp-link:hover{box-shadow:var(--lp-lift-2);border-color:#A9B8A0!important}
.lp-card:not(.lp-link):hover{box-shadow:var(--lp-lift-2)}

/* 1b. rows in list boxes that hold one link */
.lp-row{cursor:pointer;transition:background-color .2s,box-shadow .2s}
.lp-row:hover{background-color:#FAF7F2!important;box-shadow:inset 3px 0 0 #4C5B48}
.lp-row:hover a[style*="border-bottom"],.lp-link:hover a[style*="border-bottom"]{color:#4C5B48!important;border-color:#4C5B48!important}

h2.lp-lh,h3.lp-lh,h4.lp-lh{line-height:1.22!important}

/* 2. standalone boxes */
body .lp-box.lp-box.lp-box{border-color:rgba(205,194,180,.85)!important;box-shadow:var(--lp-lift);transition:transform .28s var(--lp-ease),box-shadow .28s var(--lp-ease),border-color .2s}
.lp-box.lp-link:hover{box-shadow:var(--lp-lift-2)}

/* 3. pill buttons: outline pills fill on hover; filled pills get depth */
.lp-ghost{transition:background-color .2s,border-color .2s,color .2s,box-shadow .2s,transform .2s var(--lp-ease)!important}
.lp-ghost:hover{background:#4C5B48!important;border-color:#4C5B48!important;color:#F7F3ED!important;box-shadow:0 12px 24px -12px rgba(43,50,41,.7)}
.lp-ghost.lp-light:hover{background:#F7F3ED!important;border-color:#F7F3ED!important;color:#2B3229!important;box-shadow:0 12px 24px -12px rgba(0,0,0,.5)}
/* on a dark green band (lab-polish.js 8b): the home page's Book band hover everywhere (user, 2026-10-24) */
.lp-onband.lp-pill.lp-pillL:hover{background:#fff!important;color:#2B3229!important;transform:none}
.lp-onband.lp-ghost.lp-light:hover{background:transparent!important;border-color:#F1EFE7!important;color:#F1EFE7!important;transform:none}
.lp-pill{box-shadow:0 1px 0 rgba(255,255,255,.12) inset,0 10px 22px -14px rgba(43,50,41,.75);transition:background-color .2s,color .2s,box-shadow .2s,transform .2s var(--lp-ease)!important}
.lp-pill:not(.lp-pillL):hover{background:#2B3229!important;color:#F7F3ED!important}
.lp-pill.lp-pillL:hover{background:#2B3229!important;color:#F7F3ED!important}
.lp-pill:hover{box-shadow:0 1px 0 rgba(255,255,255,.1) inset,0 14px 26px -12px rgba(43,50,41,.85)}
header .lp-pill,header .lp-ghost{transform:none!important}

/* 4. FAQ questions, small text links, lists */
details>summary{transition:color .2s}
details>summary:hover{color:#4C5B48!important}

details>summary>span:last-child{display:inline-block;transition:color .2s}
a[href^="#"][style*="border-top"]{transition:color .2s,padding-left .25s var(--lp-ease)}
a[href^="#"][style*="border-top"]:hover{color:#4C5B48!important;padding-left:6px!important}
h3>a{transition:color .2s}h3>a:hover{color:#4C5B48}
main a[style="color:#2B3229"],section a[style="color:#2B3229"],main a[style="color: rgb(43, 50, 41);"],section a[style="color: rgb(43, 50, 41);"]{transition:color .2s;text-decoration-color:transparent}main a[style="color:#2B3229"]:hover,section a[style="color:#2B3229"]:hover,main a[style="color: rgb(43, 50, 41);"]:hover,section a[style="color: rgb(43, 50, 41);"]:hover{color:#4C5B48!important;text-decoration:underline;text-decoration-color:#4C5B48;text-underline-offset:3px}
/* the header menu keeps its own look: never an underline from this file */
header nav a,header nav a:hover{text-decoration:none!important}
.fine a,p a[href^="tel:"],p a[href^="mailto:"]{transition:color .2s}.fine a:hover,p a[href^="tel:"]:hover,p a[href^="mailto:"]:hover{color:#4C5B48}

/* 5. shop + blog cards (class-based pages) */
.card{box-shadow:var(--lp-lift)}
.card:hover{box-shadow:var(--lp-lift-2)}
.card-in{box-shadow:var(--lp-lift)}
.filters button{transition:background-color .2s,border-color .2s,color .2s,box-shadow .2s!important}
.filters button:not(.on):hover{background:#fff!important;border-color:#4C5B48!important;color:#4C5B48!important;box-shadow:0 10px 20px -14px rgba(43,50,41,.5)}
.qty button{transition:background-color .2s,color .2s}.qty button:hover{background:#E6DED3;color:#2B3229}
button[data-v]{transition:background-color .2s,color .2s,box-shadow .2s}button[data-v]:not(.on):hover{background:#fff!important;color:#4C5B48!important;box-shadow:0 6px 14px -10px rgba(43,50,41,.5)}
.pcard:hover{box-shadow:0 26px 46px -22px rgba(43,50,41,.5)}

/* 5b. info blocks: icon chips, maps + phone + email links, subtle hover */
span.lp-ico{display:inline-flex!important;align-items:center;gap:6px;align-self:flex-start;transition:transform .25s var(--lp-ease),box-shadow .25s var(--lp-ease)}
span.lp-ico svg{width:12px;height:12px;flex:none;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round;margin-left:-2px;transition:transform .35s var(--lp-ease)}

.lp-info a.lp-map{color:inherit;text-decoration:none;border-bottom:1px solid rgba(198,187,173,.9);transition:color .2s,border-color .2s}
.lp-info a.lp-map::after{content:"↗";display:inline-block;margin-left:6px;font-size:.85em;opacity:0;transition:opacity .2s}
.lp-info a.lp-map:hover{color:#4C5B48;border-color:#4C5B48}
.lp-info a.lp-map:hover::after{opacity:1}
a.lp-ilink{display:inline-flex;align-items:center;gap:7px;transition:color .2s,border-color .2s}
a.lp-ilink svg{width:14px;height:14px;flex:none;fill:none;stroke:currentColor;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round;opacity:.75;transition:transform .25s var(--lp-ease),opacity .2s}
a.lp-ilink:hover{color:#4C5B48!important;border-color:#4C5B48!important}
a.lp-ilink:hover svg{opacity:1}
a.lp-ilink.lp-onDark:hover,.lp-info a.lp-map.lp-onDark:hover{color:#FFFFFF!important;border-color:#FFFFFF!important}
@media (prefers-reduced-motion:reduce){span.lp-ico,span.lp-ico svg,a.lp-ilink svg{transition:none!important}}

/* 5c. the desktop phone card (a tel: link does nothing on most computers) */
.lp-phone{position:fixed;z-index:9500;width:300px;box-sizing:border-box;padding:20px 20px 18px;border-radius:18px;background:linear-gradient(180deg,#FFFFFF,#FBF8F3);border:1px solid rgba(205,194,180,.85);box-shadow:0 2px 4px rgba(43,50,41,.08),0 30px 60px -24px rgba(43,50,41,.55);font-family:Karla,system-ui,sans-serif;font-weight:300;color:#3F463C;animation:lpin .28s var(--lp-ease) both}
@keyframes lpin{from{opacity:0}to{opacity:1}}
/* the card as a blind (client, 2026-10-15): a clipping window under the phone button; the card slides down out of it and
   back up into it (transform only). The button stays filled while its blind is down. */
.lp-blind{position:absolute;z-index:1;overflow:hidden;padding:0 48px 80px;box-sizing:border-box;pointer-events:none;margin:0!important}
.lp-tel-host{position:relative}
.lp-blind .lp-phone{position:relative;z-index:auto;animation:none;pointer-events:auto;border-radius:10px 10px 18px 18px;transform:translateY(calc(-100% - 2px));transition:transform .44s cubic-bezier(.22,.61,.36,1);will-change:transform;backface-visibility:hidden}
.lp-blind.open .lp-phone{transform:translateY(0)}
.lp-blind.closing .lp-phone{transition:transform .3s cubic-bezier(.55,0,.4,1)}
/* opening upward (no room below the button): the window sits above the button and the card rises out of it */
.lp-blind.up{padding:80px 48px 0}
.lp-blind.up .lp-phone{transform:translateY(calc(100% + 2px))}
.lp-blind.up.open .lp-phone{transform:translateY(0)}
.lp-blind.up .lp-phone::before{top:auto;bottom:0;background:linear-gradient(0deg,rgba(43,50,41,.10) 0,rgba(43,50,41,.10) var(--half,0px),rgba(43,50,41,0) calc(var(--half,0px) + 16px))}
/* shading where the card meets the button: one even shade over the card's top (so the bits beside the pill's rounded
   ends are shaded like the rest, no edge), fading out below the button; clipped to the card's shape; plus the button's
   own soft shadow, which follows the pill onto the card */
.lp-blind .lp-phone{overflow:hidden}
.lp-blind .lp-phone::before{content:"";position:absolute;left:0;right:0;top:0;height:calc(var(--half,0px) + 16px);background:linear-gradient(180deg,rgba(43,50,41,.10) 0,rgba(43,50,41,.10) var(--half,0px),rgba(43,50,41,0) calc(var(--half,0px) + 16px));pointer-events:none}
a.lp-tel-open.lp-tel-open{position:relative;z-index:2;background:#4C5B48!important;color:#F7F3ED!important;border-color:#4C5B48!important;box-shadow:0 5px 12px -5px rgba(43,50,41,.38)!important}
@media (prefers-reduced-motion:reduce){.lp-blind .lp-phone{transition:none}}
.lp-phone .k{display:block;font-size:10.5px;letter-spacing:.22em;text-transform:uppercase;color:#4F5748;margin:0 0 6px}
.lp-phone b{display:block;font-family:Newsreader,Georgia,serif;font-weight:300;font-size:32px;letter-spacing:-.01em;color:#2B3229;line-height:1.1;margin:0 0 8px;user-select:all}
.lp-phone p{font-size:13.5px;line-height:1.5;margin:0 0 14px;color:#665F52}
.lp-phone .acts{display:flex;flex-direction:column;gap:8px}
.lp-phone .acts>*{appearance:none;display:flex;align-items:center;justify-content:center;gap:8px;font:inherit;font-size:14px;font-weight:400;padding:11px 16px;border-radius:999px;cursor:pointer;text-decoration:none;transition:background-color .2s,color .2s,border-color .2s,box-shadow .2s,transform .2s var(--lp-ease)}
.lp-phone .acts svg{width:16px;height:16px;fill:none;stroke:currentColor;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round}
.lp-phone .cp{border:0;background:#4C5B48;color:#F7F3ED;box-shadow:0 10px 20px -12px rgba(43,50,41,.75)}
.lp-phone .cp:hover{background:#2B3229}
.lp-phone .cp.ok{background:#2B3229}
/* Call, Message, WhatsApp: three equal tiles under Copy number (client, 2026-10-15) */
.lp-phone .ways{display:grid;grid-template-columns:repeat(3,1fr);gap:8px;padding:0;border-radius:0;cursor:default}
.lp-phone .way{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:5px;padding:10px 4px 9px;border-radius:14px;border:1px solid #B3A797;color:#2B3229;background:rgba(255,255,255,.6);font-size:13px;font-weight:400;text-decoration:none;cursor:pointer;transition:background-color .2s,color .2s,border-color .2s,box-shadow .2s,transform .2s var(--lp-ease)}
.lp-phone .way svg{width:18px;height:18px;fill:none;stroke:currentColor;stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round}
.lp-phone .way:hover,.lp-phone .way:focus-visible{border-color:#4C5B48;color:#F7F3ED;background:#4C5B48;box-shadow:0 10px 20px -14px rgba(43,50,41,.6);transform:translateY(-1px)}
.lp-phone .way:active{transform:scale(.97)}
.lp-phone .x{position:absolute;top:10px;right:10px;appearance:none;border:0;background:transparent;width:30px;height:30px;border-radius:999px;font-size:20px;line-height:1;display:inline-flex;align-items:center;justify-content:center;padding:0;--xs:16px;color:#4F5748;cursor:pointer;transition:background-color .2s,color .2s}
.lp-phone .x:hover{background:#F4EEE6;color:#2B3229}

/* 5d. one clear hover for every remaining link and button (tagged by lab-polish.js) */
.lp-tl,.lp-tlL,.lp-bl,.lp-blL,.lp-ib{transition:color .18s,background-color .18s,border-color .18s,text-decoration-color .18s,box-shadow .18s,transform .2s var(--lp-ease)}
a.lp-tl:hover,button.lp-tl:hover,summary.lp-tl:hover{color:#4C5B48!important;border-bottom-color:#4C5B48!important;text-decoration:underline!important;text-decoration-color:#4C5B48!important;text-underline-offset:4px;text-decoration-thickness:1px}
a.lp-tl[style*="border-bottom"]:hover{text-decoration:none!important}
.lp-tl.lp-tlG:hover{color:#2B3229!important;border-bottom-color:#2B3229!important;text-decoration-color:#2B3229!important}
.lp-tlL:hover{color:#FFFFFF!important;border-bottom-color:#FFFFFF!important;text-decoration:underline!important;text-decoration-color:#FFFFFF!important;text-underline-offset:4px}
.lp-tlL[style*="border-bottom"]:hover{text-decoration:none!important}
summary.lp-tl:hover{text-decoration:none!important}
.lp-bl:hover :not([style*="0.24em"]):not(svg):not(path):not(img){color:#4C5B48!important}
.lp-bl:hover{color:#4C5B48!important}
.lp-blL:hover,.lp-blL:hover *{color:#FFFFFF!important}
.lp-ib:hover{background-color:#4C5B48!important;color:#F7F3ED!important;box-shadow:0 8px 16px -10px rgba(43,50,41,.7)}
.lp-ib:hover svg{stroke:currentColor}
/* header account + bag: no cream-on-green swap (the icon went cream before the green disc arrived and vanished into the header); a soft disc, the icon stays dark */
.shopctl a.lp-ib:hover,.shopctl button.lp-ib:hover{background-color:rgba(76,91,72,.16)!important;color:#2B3229!important;box-shadow:none}
.floatbook{transition:background-color .2s,color .2s,box-shadow .2s,opacity .3s,transform .3s!important}
/* while it flies onto (or off) the page's own Book button, assets/nav.js moves it frame by frame: no easing on top, or
   every frame lags .3s behind and the flight speeds up and drags (user, 2026-10-22: "floats out and floats in at a very
   weird speed") */
.floatbook.docking{transition:background-color .2s,color .2s!important}
.floatbook:not(.ongreen):hover{background:#2B3229!important;color:#F7F3ED!important}
.floatbook.ongreen:hover{background:#FFFFFF!important;color:#2B3229!important}
footer .lp-tl:hover{color:#4C5B48!important}

/* 6. photos, video tiles and dark green panels */
.lp-dark{box-shadow:0 2px 4px rgba(43,50,41,.08),0 30px 56px -28px rgba(43,50,41,.6)}
body .lp-media.lp-media.lp-media{box-shadow:0 2px 4px rgba(43,50,41,.06),0 22px 44px -24px rgba(43,50,41,.5)}
img.lp-media,video.lp-media{object-fit:cover}
.lp-box img,.lp-box video,.lp-box iframe{border-radius:12px}

/* 7. phones: tighter gaps, no hover lift on touch */
@media (max-width:960px){body .lp-hgrid.lp-hgrid.lp-hgrid{gap:12px!important}}
/* iPhone (2026-10-23): cards that follow cards sit one gap apart, 16px, wherever they stack: inside a card grid, a
   column of nothing but cards and card grids, and two stacked columns that meet card to card (were 12, 28 and 36) */
@media (max-width:600px){
  body .lp-hgrid.lp-hgrid.lp-hgrid{gap:16px!important}
  body div:has(> .lp-hgrid, > .lp-box):not(:has(> :not(.lp-box, .lp-hgrid, .lp-card, style, script))){gap:16px!important}
  body div[style*="grid-template-columns"]:has(> div:first-child > .lp-box:last-child):has(> .lp-box:last-child){row-gap:16px!important}
}
@media (hover:none){.lp-card:hover,.lp-box:hover,.lp-pill:hover,.lp-ghost:hover{transform:none}}
@media (prefers-reduced-motion:reduce){.lp-card,.lp-box,.lp-pill,.lp-ghost{transition:none!important}}
/* Lift (toned down) without blur: liftable elements stay on their own layer (will-change), so text is drawn once and never snaps when the hover starts or ends. */
body .lp-card.lp-link,body .lp-box.lp-link,.lp-ghost,.lp-pill{will-change:transform;backface-visibility:hidden}
body .lp-card.lp-link.lp-link:hover,body .lp-box.lp-link.lp-link:hover{transform:translateY(-2px)}
.lp-ghost:hover,.lp-pill:hover{transform:translateY(-1px)}
header .lp-pill:hover,header .lp-ghost:hover{transform:none}
.lp-card.lp-link,.lp-box.lp-link{transition:transform .26s cubic-bezier(.2,.7,.2,1),box-shadow .26s ease,border-color .2s!important}
body .lp-card.lp-link.lp-link:hover,body .lp-box.lp-link.lp-link:hover{border-color:#4C5B48!important}
/* Smooth hovers: only transform and opacity animate. The deeper hover shadow lives on ::after and fades in, so nothing re-paints a shadow every frame. */
:root{--lp-ease:cubic-bezier(.22,.61,.36,1)}
body .lp-card.lp-card.lp-card,body .lp-box.lp-box.lp-box{transition:transform .28s cubic-bezier(.22,.61,.36,1),border-color .28s ease!important}
body .lp-card.lp-card.lp-card:hover,body .lp-box.lp-box.lp-box:hover{box-shadow:var(--lp-lift)}
.lp-card::after,.lp-box::after{content:"";position:absolute;inset:-1px;border-radius:inherit;box-shadow:var(--lp-lift-2);opacity:0;transition:opacity .28s cubic-bezier(.22,.61,.36,1);pointer-events:none;z-index:-1}
.lp-card,.lp-box{isolation:isolate}
/* only cards you can click glow on hover (2026-10-22: a static box glowing reads as a link) */
.lp-card.lp-link:hover::after,.lp-box.lp-link:hover::after{opacity:1}
/* print: no hover layers (Firefox paged the invisible shadow layer of the receipt's summary box onto a blank second page) */
@media print{.lp-card::before,.lp-card::after,.lp-box::before,.lp-box::after,.lp-btnfx::before,.lp-btnfx::after{display:none!important}}
.lp-ghost,.lp-pill{transition:transform .28s cubic-bezier(.22,.61,.36,1),background-color .28s ease,border-color .28s ease,color .28s ease!important}
.lp-ghost:hover,.lp-pill:hover{box-shadow:none}
/* Buttons never underline: not the button, not a link or text inside it. */
.lp-pill,.lp-ghost,.lp-pill *,.lp-ghost *,button,button *,.lp-ib,.lp-ib *,.sqb-btn,.sqb-btn *,.lp-card.lp-link a,.lp-box.lp-link a,.lp-row a{text-decoration:none!important}
.lp-pill:hover,.lp-ghost:hover,.lp-pill:hover *,.lp-ghost:hover *{text-decoration:none!important}
/* Header Book pill on the generated pages: the same hover the home page's pill has by design (.scp0:hover = #2B3229). */
header a[href="/book"]:not([class*="scp"]){transition:background-color .25s ease}
header a[href="/book"]:not([class*="scp"]):hover{background:#2B3229!important}
/* Site-wide (html.lp-fx, set by lab-polish.js; tried on the home page first): every pill button keeps its own hover and gains a soft
   offset glow in a theme colour (sage on parchment, warm cream on the green band), plus a slight press on click.
   The glow lives on ::after and only fades in (opacity), so nothing re-paints, not even inside the frosted header.
   On parchment (green and outline pills alike) the glow is the brand green, as strong as the cream glow on the green band
   (2026-10-21: the old sage and warm-white glows were near the parchment's own colour and barely showed). */
:root{--fx-glow:rgba(62,86,54,.8);--fx-glow-l:#EADFC8}
html.lp-fx .lp-btnfx.lp-btnfx{position:relative;will-change:transform;backface-visibility:hidden;transition:background-color .25s ease,color .25s ease,border-color .25s ease,transform .2s cubic-bezier(.22,.61,.36,1)!important}
html.lp-fx .lp-btnfx.lp-btnfx::after{content:"";position:absolute;inset:0;border-radius:inherit;pointer-events:none;box-shadow:-3px 5px 12px -6px rgba(43,50,41,.38),5px 5px 30px -10px var(--fx-glow),2px 3px 14px -6px rgba(62,86,54,.5);opacity:0;transition:opacity .45s ease;will-change:opacity}
html.lp-fx .lp-btnfx.fx-l::after,html.lp-fx .lp-btnfx.fx-ol::after{box-shadow:-3px 6px 14px -6px rgba(20,26,19,.5),7px 5px 56px -14px var(--fx-glow-l)}
html.lp-fx .lp-btnfx.lp-btnfx:hover::after{opacity:1}
html.lp-fx .lp-btnfx.lp-btnfx:active{transform:scale(.97)!important}
/* A small resting shadow under every pill button that changes phase on hover. Both phases are layers aligned exactly
   with the button (no layer moves, so the rim stays even); the offset is inside each shadow. Rest = ::before, falls
   bottom-right; hover = part of ::after, falls bottom-left. Hover crossfades them (opacity only, smooth). */
html.lp-fx .lp-btnfx.lp-btnfx::before{content:"";position:absolute;inset:0;z-index:-1;border-radius:inherit;pointer-events:none;box-shadow:3px 4px 10px -5px rgba(43,50,41,.45);opacity:1;transition:opacity .45s ease;will-change:opacity}
html.lp-fx .lp-btnfx.fx-l::before,html.lp-fx .lp-btnfx.fx-ol::before{box-shadow:3px 5px 12px -5px rgba(20,26,19,.55)}
html.lp-fx .lp-btnfx.lp-btnfx:hover::before{opacity:0}
html.lp-fx .lp-btnfx.lp-btnfx:active::before{opacity:.6}
@media (prefers-reduced-motion:reduce){html.lp-fx .lp-btnfx.lp-btnfx::before{transition:none}}
/* the phase shadow replaces any fixed drop shadow the button had from this file, so there is never a double shadow */
html.lp-fx .lp-btnfx.lp-btnfx,html.lp-fx .lp-btnfx.lp-btnfx:hover{box-shadow:none!important}
/* links that already carry an underline (a bottom border) never get a second one: their own line just takes the hover colour */
html body a.lp-tlB.lp-tlB:hover,html body a.lp-tlB.lp-tlB:hover *,html body .lp-info a.lp-map.lp-map:hover,html body .lp-info a.lp-map.lp-map:hover *{text-decoration:none!important}
.lp-tl.lp-tlB:hover{border-bottom-color:#4C5B48!important}.lp-tlL.lp-tlB:hover{border-bottom-color:#FFFFFF!important}
/* a frame tightly wrapping a picture takes the picture's rounded corners and its shadow, so outline and photo match */
body .lp-mframe.lp-mframe{overflow:hidden;box-shadow:0 2px 4px rgba(43,50,41,.06),0 22px 44px -24px rgba(43,50,41,.5)}
body .lp-media.lp-inframe.lp-inframe{box-shadow:none;border-radius:inherit!important}
/* corners: only elements that were square get our radius (lab-polish.js sets data-lp-r); designed corners are kept */


body .lp-card.lp-card.lp-card[data-lp-r="square"]{border-radius:18px!important}
body .lp-box.lp-box.lp-box[data-lp-r="square"]{border-radius:18px!important}
body .lp-media.lp-media.lp-media[data-lp-r="square"]{border-radius:16px!important}
body .lp-mframe.lp-mframe[data-lp-r="square"]{border-radius:16px!important}
@media (max-width:960px){body .lp-card.lp-card.lp-card[data-lp-r="square"],body .lp-box.lp-box.lp-box[data-lp-r="square"]{border-radius:16px!important}}

/* Home hero = the lounge photo (build-lab.js 3c). Desktop: the photo takes half the width and the hero fills the first
   screen (capped), so the room reads at a glance; phones keep the design's stacked layout. */
#top:has(.lp-hero) > div:last-child{background:#C9BCAB!important}
@media (min-width:961px){
  #top:has(.lp-hero){grid-template-columns:1fr 1fr!important;min-height:min(calc(100svh - var(--hdrh, 76px)), 960px)!important}
  #top:has(.lp-hero) > div:first-child{padding-right:48px!important}
}
@media (max-width:960px){
  #top:has(.lp-hero) > div:last-child{min-height:min(110vw, 560px)!important;aspect-ratio:auto}
}
/* The photo emerges out of the page (client idea, 2026-10-14): no divider line; from the text side a soft blur fades in
   (::before, backdrop blur under an eased mask) and over it the page's own parchment (::after: the body's fixed radial
   gradient, so it is the exact colour behind the text) fades out. Desktop: from the left edge; phones: from the top.
   html.lp-nofade (?fade=off) turns it off to compare. */
#top:has(.lp-hero) > div:last-child{border-left:0!important;isolation:isolate}
@media (min-width:961px){
  /* the photo starts under the text column's right margin, so the fade happens in empty space and the mirror stays */
  #top:has(.lp-hero) > div:first-child{position:relative;z-index:3}
  #top:has(.lp-hero) > div:last-child{margin-left:-11vw!important}
}
#top:has(.lp-hero) > div:last-child::before,
#top:has(.lp-hero) > div:last-child::after{content:"";position:absolute;inset:0;z-index:2;pointer-events:none}
#top:has(.lp-hero) > div:last-child::before{
  -webkit-backdrop-filter:blur(22px) saturate(1.05);backdrop-filter:blur(22px) saturate(1.05);
  -webkit-mask-image:linear-gradient(to right,#000 0%,rgba(0,0,0,.9) 9%,rgba(0,0,0,.66) 18%,rgba(0,0,0,.38) 27%,rgba(0,0,0,.16) 36%,rgba(0,0,0,.04) 44%,transparent 50%);
          mask-image:linear-gradient(to right,#000 0%,rgba(0,0,0,.9) 9%,rgba(0,0,0,.66) 18%,rgba(0,0,0,.38) 27%,rgba(0,0,0,.16) 36%,rgba(0,0,0,.04) 44%,transparent 50%)}
#top:has(.lp-hero) > div:last-child::after{
  background:radial-gradient(96% 84% at 50% 22%,#e6ded3 0%,#d9cfc3 48%,#c6bbad 100%) fixed;
  -webkit-mask-image:linear-gradient(to right,#000 0%,rgba(0,0,0,.9) 8%,rgba(0,0,0,.62) 15%,rgba(0,0,0,.3) 22%,rgba(0,0,0,.1) 29%,transparent 36%);
          mask-image:linear-gradient(to right,#000 0%,rgba(0,0,0,.9) 8%,rgba(0,0,0,.62) 15%,rgba(0,0,0,.3) 22%,rgba(0,0,0,.1) 29%,transparent 36%)}
@media (max-width:960px){
  #top:has(.lp-hero) > div:last-child{border-top:0!important}
  #top:has(.lp-hero) > div:last-child::before{
    -webkit-mask-image:linear-gradient(to bottom,#000 0%,rgba(0,0,0,.7) 12%,rgba(0,0,0,.3) 24%,transparent 36%);
            mask-image:linear-gradient(to bottom,#000 0%,rgba(0,0,0,.7) 12%,rgba(0,0,0,.3) 24%,transparent 36%)}
  #top:has(.lp-hero) > div:last-child::after{
    -webkit-mask-image:linear-gradient(to bottom,#000 0%,rgba(0,0,0,.6) 9%,rgba(0,0,0,.22) 18%,transparent 27%);
            mask-image:linear-gradient(to bottom,#000 0%,rgba(0,0,0,.6) 9%,rgba(0,0,0,.22) 18%,transparent 27%)}
}
html.lp-nofade #top:has(.lp-hero) > div:last-child::before,
html.lp-nofade #top:has(.lp-hero) > div:last-child::after{display:none}
html.lp-nofade #top:has(.lp-hero) > div:last-child{border-left:1px solid #CDC2B4!important}
/* iPhone (user, 2026-10-23): no fade; the photo starts cleanly under the buttons */
@media (max-width:600px){#top:has(.lp-hero) > div:last-child::before,#top:has(.lp-hero) > div:last-child::after{display:none}
  /* the photo's top edge is the pale ceiling, which read as a light strip under the buttons: zoomed in 9% from the
     bottom so the photo starts at the beams (about 40px of ceiling and 18px each side cropped) */
  #top img.lp-hero{transform:scale(1.09);transform-origin:50% 100%}}
/* Phones only (iPhone pass, 2026-10-23; changes stay phone-only until the user says otherwise): one line in a tinted
   band across the foot of the lounge photo (build-lab.js 3c). Wider screens never show it. */
.lp-hero-band{display:none}
@media (max-width:600px){
  #top .lp-hero-line{display:none!important}   /* the band carries it on phones */
  #top .lp-hero-band{display:block;position:absolute;left:0;right:0;bottom:0;z-index:3;padding:15px 22px 16px;
    background:rgba(43,50,41,.58);-webkit-backdrop-filter:blur(8px) saturate(1.1);backdrop-filter:blur(8px) saturate(1.1);
    color:#F7F3ED;font-family:Newsreader,Georgia,serif;font-style:italic;font-weight:300;font-size:18px;line-height:1.35;
    letter-spacing:-0.005em;text-align:center;text-wrap:balance}
}

/* Home hero: booking is the primary call to action (build-lab.js 3d). The arrow slides on hover; on phones the
   booking button spans the row so it is the first thing a thumb finds. */
.lp-cta .lp-cta-arr{display:inline-block;transition:transform .35s cubic-bezier(.22,.61,.36,1)}
.lp-cta:hover .lp-cta-arr,.lp-cta:focus-visible .lp-cta-arr{transform:translateX(4px)}
@media (max-width:960px){
  #top .lp-cta{width:100%;max-width:460px;justify-content:center;padding:19px 24px!important}
  #top .lp-cta + a{width:100%;max-width:460px;text-align:center}
}
/* iPhone (2026-10-23): Book a service, Book a conversation and Help me choose stacked, full width, one height */
@media (max-width:600px){
  #top div:has(> .lp-cta){display:grid!important;grid-template-columns:1fr;gap:12px!important;width:100%}
  #top div:has(> .lp-cta) > a{display:flex!important;align-items:center;justify-content:center;max-width:none;height:56px;box-sizing:border-box;padding-top:0!important;padding-bottom:0!important}
  #top .hmc-wrap a.hmc-btn{height:56px;box-sizing:border-box}
}
@media (prefers-reduced-motion:reduce){.lp-cta .lp-cta-arr{transition:none}}
/* Hero buttons on one grid (client, 2026-10-15): both rows share two equal columns, every button fills its cell, so the
   edges line up; the filled, taller "Book an appointment" stays the one primary, the three outline buttons share a size. */
@media (min-width:961px){
  #top div:has(> .lp-cta){display:grid!important;grid-template-columns:repeat(2,minmax(0,1fr));gap:14px!important;max-width:540px;width:100%}
  #top div:has(> .lp-cta) > a{width:100%;box-sizing:border-box;justify-content:center;text-align:center;padding-left:18px!important;padding-right:18px!important;white-space:nowrap}
  #top div:has(> .lp-cta) > a:not(.lp-cta){padding-top:16px!important;padding-bottom:16px!important;align-self:center}
}
/* Help me choose sits one button gap under the book buttons (user, 2026-10-23: the hero's 30px paragraph gap set it apart
   from the group): 14px on wider screens, 12px on the iPhone stack, measured from the taller button */
#top div:has(> .lp-cta) + .hmc-wrap{margin-top:-16px!important}
@media (max-width:600px){#top div:has(> .lp-cta) + .hmc-wrap{margin-top:-18px!important}}

/* /book on phones (build-lab.js 3g): stacked hero and "What is on your mind?" header without the desktop column gaps,
   so the first booking card comes up sooner */
@media (max-width:960px){
  #top:has(> div > div > div > h1) > div > div[style*="grid-template-columns"],
  #pick > div > div[style*="5fr 7fr"]{gap:14px!important}
  #pick > div > div[style*="5fr 7fr"] p{font-size:16px!important}
}

/* Home "The people": with a tile removed the last row is centred (flex instead of the 3-column grid) */
#faces div:has(> figure){display:flex!important;flex-wrap:wrap;justify-content:center}
#faces div:has(> figure) > figure{flex:0 0 calc((100% - 56px) / 3)}
@media (max-width:960px){#faces div:has(> figure) > figure{flex-basis:100%}}

/* /book: Where / Hours / Reach us as three compact lines under the headline, chip beside the text */
#top .lp-bookinfo > div{display:contents!important}
#top .lp-bookinfo > div > span:first-child{justify-self:start}
/* no pills here (client, 2026-10-15): just a small green icon beside each line; Reach us needs none (its lines have their own) */
#top .lp-bookinfo > div > span.lp-ico{background:none!important;box-shadow:none!important;padding:0!important;border:0!important;min-height:0!important;width:18px;display:inline-flex!important;align-items:center;align-self:start;margin-top:3px;color:#4C5B48!important}
#top .lp-bookinfo > div > span.lp-ico > span{position:absolute!important;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
#top .lp-bookinfo svg{stroke-width:1.6!important}
#top .lp-bookinfo > div > span.lp-ico svg{width:17px!important;height:17px!important;margin:0!important;stroke:#4C5B48!important}
#top .lp-bookinfo > div:last-child > span.lp-ico svg{visibility:hidden}
/* the phone and email icons hang in the icon column, so every line's text starts at the same place */
#top .lp-bookinfo > div:last-child > span:last-child a.lp-ilink{position:relative}
#top .lp-bookinfo > div:last-child > span:last-child a.lp-ilink svg{position:absolute;left:-30px;top:50%;transform:translateY(-50%);width:17px!important;height:17px!important;margin:0!important;stroke:#4C5B48!important}
/* /book hero on phones: headline, then the lede and buttons, then Where / Hours / Reach us (build-lab.js 3g) */
@media (max-width:960px){
  #top .lp-bh-left{display:contents}
  #top .lp-bh-left > h1{order:0}
  #top .lp-bh-right{order:1}
  #top .lp-bookinfo{order:2;margin-top:6px!important;gap:12px 12px!important;grid-template-columns:18px minmax(0,1fr)!important;min-width:0}
  #top div:has(> .lp-bh-left){grid-template-columns:minmax(0,1fr)!important}
  #top .lp-bh-right{min-width:0}
}

/* Home hero headline (user, 2026-10-22): always the two lines "We don't do consultations." / "We have conversations.",
   the type shrinks with the column (line one is ~10.9 em wide) and only wraps further below 30px. */
#top:has(img.lp-hero) div:has(> h1){container-type:inline-size}
#top:has(img.lp-hero) h1[style]{font-size:clamp(30px,8.9cqi,66px)!important}
@media (max-width:960px){#top:has(img.lp-hero) h1[style]{font-size:clamp(30px,8.9cqi,48px)!important}}

/* Cards and boxes (2026-10-22): the hover glow is drawn by ::after, which needs the card itself positioned, or it
   spreads over the nearest positioned ancestor (a sticky column lit up whole). Inline position (sticky) still wins.
   A tinted strip at the top or foot of a rounded box follows its corners instead of poking out square. */
.lp-card,.lp-box{position:relative}
.lp-card>div:first-child,.lp-box>div:first-child{border-top-left-radius:inherit;border-top-right-radius:inherit}
.lp-card>div:last-child,.lp-box>div:last-child{border-bottom-left-radius:inherit;border-bottom-right-radius:inherit}

/* Heading | price box sections where the left column is taller (lab-polish.js even()): the box runs to the same height,
   its rows share the extra space, so the two columns end on one line */
@media (min-width:961px){
  .lp-even{align-items:stretch!important}
  .lp-even>.lp-box{display:flex!important;flex-direction:column}
  .lp-even>.lp-box>*{flex:1 1 auto}
}

/* An empty video slot (no file yet: the design's room and people videos) sat on top of its photo, so a right-click
   offered loop / mute / speed (user, 2026-10-23). Hidden until the runtime gives it a source. */
video:not([src]),video[src=""]{display:none!important}

/* About (2026-10-25, user): the photo runs the full height of the top section, from the top of the heading to the foot of
   the At a glance card, instead of stopping short at 4:5. Desktop only; phones keep the stacked layout. */
@media (min-width:961px){
  #top:has(img[src="/images/trish/trish-chin.jpg"]) div[style*="7fr 5fr"]{align-items:stretch!important}
  #top:has(img[src="/images/trish/trish-chin.jpg"]) div[style*="aspect-ratio"]:has(> img){aspect-ratio:auto!important}
}

/* Results (2026-10-25, user): every other treatment section sits on a slightly lighter band, so one ends and the next begins
   at a glance; the hairlines between them stay. All widths. */
body:has(#hair-removal):has(#spots-and-moles) section[id]:nth-of-type(odd){background:rgba(247,243,237,.55)}

/* Home, "Who you'll meet" (2026-10-25, user): the photo runs from the top of the heading to the foot of the numbers row,
   instead of a fixed 520px box centred on the text. The top margin is the eyebrow chip and its gap above the heading. */
@media (min-width:961px){
  #about > div:has(> .lp-mframe){align-items:stretch!important}
  #about > div > .lp-mframe{height:auto!important;margin-top:49px}
}

/* Cart drawer (2026-10-25, user: the underline on hover looked ugly): no underline. − and + light up as a soft round button
   and the stepper's outline turns green; Remove turns brick red on a soft pill (its padding is there at rest, so nothing moves). */
#nslc-drawer .q button:hover,#nslc-drawer .q button:focus-visible{text-decoration:none!important;background:#EEE7DC!important;color:#2B3229!important;border-radius:999px;outline:0}
#nslc-drawer .q button{transition:background-color .18s,color .18s,transform .15s}
#nslc-drawer .q button:active{transform:scale(.9)}
#nslc-drawer .q{transition:border-color .18s}
#nslc-drawer .q:has(button:hover),#nslc-drawer .q:has(button:focus-visible){border-color:#4C5B48}
#nslc-drawer .rm{text-decoration:none!important;padding:6px 12px;border-radius:999px;transition:background-color .18s,color .18s}
#nslc-drawer .qr .rm{margin-left:0}
#nslc-drawer .it.tr .rm{margin-left:-12px}
#nslc-drawer .rm:hover,#nslc-drawer .rm:focus-visible{text-decoration:none!important;color:#8A3B2E!important;background:#F9EDEA;outline:0}