/* scaled copy of chrome.css (inc/scale.php) -- edit the original */
/* chrome.css
 * Top bar, header, mega menu, mobile drawer and footer. Loaded on every page.
 * Generated from the approved homepage design; edit here, not in source-index.html. */
/* ---------- Top bar ---------- */
.topbar{background:var(--forest-deep);color:var(--on-dark-muted);font-size:var(--s-xs);position:relative;z-index:41}
.topbar .wrap{display:flex;justify-content:space-between;gap:1rem;padding-block:.5rem;flex-wrap:wrap}
.topbar b{color:var(--on-dark);font-weight:600}
.topbar .it{display:inline-flex;align-items:center;gap:.45rem;color:inherit;text-decoration:none;transition:color .2s}
a.it:hover{color:var(--leaf)}
.topbar .it svg.lucide{color:var(--leaf);width:15px;height:15px}
.topbar .row{display:flex;align-items:center;gap:1.4rem;flex-wrap:wrap}
.tb-social{display:flex;gap:.15rem;margin-left:-.4rem}
.tb-social a{display:grid;place-items:center;width:28px;height:28px;border-radius:50%;color:var(--on-dark-muted);transition:background .2s,color .2s}
.tb-social a:hover{background:rgba(255,255,255,.12);color:var(--leaf)}
.tb-social svg.lucide{width:15px;height:15px}
.skip{position:absolute;left:1rem;top:-4rem;z-index:100;padding:.6rem 1rem;border-radius:999px;background:var(--forest);color:#fff;text-decoration:none;font-weight:600}
.skip:focus{top:1rem}

/* ---------- Header ---------- */
header.site{position:sticky;top:env(safe-area-inset-top,0px);z-index:40;color:var(--ink);transition:background .3s,color .3s,box-shadow .3s}
header.site .bar{height:var(--hh);display:flex;align-items:center;gap:1.5rem}
header.site[data-state="solid"]{background:rgba(243,246,241,.92);backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);box-shadow:0 1px 0 var(--line)}
header.site[data-state="solid"].menu-open{background:var(--surface)}
header.site[data-state="top"]{color:#fff;background:linear-gradient(180deg,rgba(6,28,18,.5),rgba(6,28,18,0))}
.logo{display:block;position:relative;flex:none}
.logo img{height:46px;width:auto;transition:opacity .3s}
.logo .l-light{position:absolute;inset:0;opacity:0}
header.site[data-state="top"] .logo .l-dark{opacity:0}
header.site[data-state="top"] .logo .l-light{opacity:1}
nav.primary{margin-left:auto;height:100%}
nav.primary>ul{display:flex;height:100%;gap:.1rem}
nav.primary li{display:flex}
.nav-trigger{position:relative;display:flex;align-items:center;gap:.35rem;background:none;border:0;padding:0 .75rem;font-size:var(--s-sm);font-weight:500;cursor:pointer;height:100%;white-space:nowrap}
.nav-trigger svg.lucide{width:14px;height:14px;transition:transform .25s;opacity:.7}
.nav-trigger::after{content:"";position:absolute;left:.75rem;right:.75rem;bottom:18px;height:2px;border-radius:2px;background:var(--grad-brand);transform:scaleX(0);transform-origin:left;transition:transform .3s var(--ease)}
header.site[data-state="top"] .nav-trigger::after{background:currentColor}
.nav-trigger:hover::after,.nav-trigger[aria-expanded="true"]::after{transform:scaleX(1)}
.nav-trigger[aria-expanded="true"] svg.lucide{transform:rotate(180deg)}
header.site[data-state="solid"] .nav-trigger[aria-expanded="true"]{color:var(--forest)}
.actions{display:flex;align-items:center;gap:1rem;flex:none}
.phone{font-size:var(--s-sm);font-weight:600;text-decoration:none;display:flex;align-items:center;gap:.45rem}
.burger{display:none;align-items:center;gap:.5rem;background:none;border:1.5px solid currentColor;border-radius:999px;padding:.55rem 1rem;font-weight:600;font-size:var(--s-sm);cursor:pointer}

/* ---------- Mega menu ---------- */
.mega-panel{position:absolute;left:0;right:0;top:100%;background:var(--surface);color:var(--ink);border-top:1px solid var(--line);box-shadow:0 40px 60px -30px rgba(8,40,26,.35);visibility:hidden;opacity:0;transform:translateY(-8px);pointer-events:none;transition:opacity .22s ease,transform .22s ease,visibility 0s linear .22s}
.mega-panel.open{visibility:visible;opacity:1;transform:none;pointer-events:auto;transition:opacity .22s ease,transform .22s ease}
/* a panel never runs below the window: it scrolls inside instead (short laptop screens) */
.mega-scroll{max-height:calc(calc(100 * var(--dv-vh,1vh)) - var(--hh) - 8px);max-height:calc(calc(100 * var(--dv-dvh,1dvh)) - var(--hh) - 8px);overflow-y:auto;overscroll-behavior:contain}
/* IDEL: the programme beside the 13 tests (two columns of tests) */
.mega-idel .cols{grid-template-columns:minmax(0,.85fr) minmax(0,2fr)}
.mega-idel .col.wide{grid-column:auto}
/* Conditions and About: three and two even columns */
.mega-conditions .cols{grid-template-columns:repeat(3,minmax(0,1fr))}
.mega-about .cols{grid-template-columns:repeat(2,minmax(0,1fr))}
.mega-treatments .cols{grid-template-columns:repeat(4,minmax(0,1fr))}
.mega-learn .cols{grid-template-columns:minmax(0,.8fr) minmax(0,1.2fr) minmax(0,1fr)}
.mega-inner{display:grid;grid-template-columns:300px minmax(0,1fr) 270px;gap:clamp(1.5rem,calc(3 * var(--dv-vw,1vw)),3rem);padding-block:2.2rem 2.4rem}
.mega-inner.no-tiles{grid-template-columns:300px minmax(0,1fr)}
.mega-inner.cards-layout{grid-template-columns:230px minmax(0,1fr)}
.feature{display:flex;flex-direction:column;gap:.7rem;text-decoration:none;min-width:0}
.feature .img{border-radius:14px;overflow:hidden;aspect-ratio:4/3;background:var(--paper);position:relative}
.feature .img img{width:100%;height:100%;object-fit:cover;transition:transform .7s var(--ease)}
.feature:hover .img img{transform:scale(1.06)}
.feature .k{display:inline-flex;align-items:center;gap:.4rem;font-family:var(--f-mono);font-size:.7rem;letter-spacing:.1em;text-transform:uppercase;color:var(--plum)}
.feature h4{font-size:1.5rem}
.feature p{font-size:var(--s-sm);color:var(--muted);line-height:1.5}
.feature .go{display:inline-flex;align-items:center;gap:.35rem;font-size:var(--s-sm);font-weight:600;color:var(--forest)}
.feature.bookset .img{display:flex;gap:14px;align-items:center;justify-content:center;padding:18px;background:radial-gradient(70% 70% at 50% 60%,rgba(181,211,90,.35),transparent 70%),linear-gradient(160deg,#e3f0de,#f1e4ef)}
.feature.bookset .img img{width:auto;height:86%;max-width:44%;object-fit:contain;border-radius:3px 6px 6px 3px;box-shadow:0 16px 26px -12px rgba(0,0,0,.45);transition:transform .5s var(--ease)}
.feature.bookset .img img:first-child{transform:rotate(-5deg)}
.feature.bookset .img img:last-child{transform:rotate(4deg) translateY(6px)}
.feature.bookset:hover .img img:first-child{transform:rotate(-2deg) translateY(-6px)}
.feature.bookset:hover .img img:last-child{transform:rotate(1deg) translateY(-2px)}
.cols{display:grid;grid-template-columns:repeat(auto-fit,minmax(170px,1fr));gap:1.8rem 2rem;align-content:start;min-width:0}
.col.wide{grid-column:span 2}
.col h5{display:flex;align-items:center;gap:.5rem;font-family:var(--f-mono);font-size:.7rem;font-weight:500;letter-spacing:.1em;text-transform:uppercase;color:var(--muted);margin:0 0 .8rem;padding-bottom:.6rem;border-bottom:1px solid var(--line)}
.col h5 svg.lucide{width:15px;height:15px;color:var(--plum)}
.col ul{display:flex;flex-direction:column;gap:.1rem}
.col.wide ul{display:grid;grid-template-columns:1fr 1fr;column-gap:1.4rem}
.col a{display:flex;align-items:center;gap:.6rem;text-decoration:none;font-size:var(--s-sm);padding:.32rem .4rem;margin-inline:-.4rem;border-radius:8px;color:var(--ink);transition:background .2s,color .2s}
.col a .li{width:26px;height:26px;border-radius:8px;background:var(--mint);display:grid;place-items:center;color:var(--forest);flex:none;transition:background .2s,color .2s}
.col a .li svg.lucide{width:14px;height:14px}
.col a .tx{flex:1;min-width:0}
.col a small{display:block;color:var(--muted);font-size:.78rem;line-height:1.3}
.col a .tag{font-family:var(--f-mono);font-size:.6rem;letter-spacing:.06em;text-transform:uppercase;color:var(--plum);border:1px solid currentColor;border-radius:999px;padding:.05rem .45rem;white-space:nowrap}
.col a .tag.is-under{display:table;margin-top:.3rem}
.col a:hover{background:var(--paper);color:var(--forest)}
.col a:hover .li{background:var(--forest);color:#fff}
.tiles{display:flex;flex-direction:column;gap:.6rem;min-width:0}
.tiles h5{font-family:var(--f-mono);font-size:.7rem;font-weight:500;letter-spacing:.1em;text-transform:uppercase;color:var(--muted);margin:0 0 .2rem;padding-bottom:.6rem;border-bottom:1px solid var(--line)}
.tile{display:grid;grid-template-columns:78px 1fr;gap:.9rem;align-items:center;text-decoration:none;padding:.4rem;margin-inline:-.4rem;border-radius:12px;transition:background .2s}
.tile:hover{background:var(--paper)}
.tile img{width:78px;height:60px;object-fit:cover;border-radius:10px}
.tile b{display:block;font-weight:600;font-size:var(--s-sm)}
.tile span{font-size:.8rem;color:var(--muted);line-height:1.35}
.cards{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:1.2rem;min-width:0}
.card{display:flex;flex-direction:column;gap:.5rem;text-decoration:none}
.card .img{border-radius:14px;overflow:hidden;aspect-ratio:4/3}
.card .img img{width:100%;height:100%;object-fit:cover;transition:transform .7s var(--ease)}
.card:hover .img img{transform:scale(1.07)}
.card b{font-family:var(--f-display);font-weight:500;font-size:1.2rem;letter-spacing:-.02em}
.card span{font-size:.82rem;color:var(--muted);line-height:1.4}
.mega-foot{background:linear-gradient(90deg,var(--mint),var(--lilac));border-top:1px solid var(--line)}
.mega-foot .wrap{display:flex;justify-content:space-between;align-items:center;gap:1rem;padding-block:.9rem;font-size:var(--s-sm);flex-wrap:wrap}
.mega-foot .quick{display:flex;gap:1.6rem;flex-wrap:wrap;color:var(--muted)}
.mega-foot .quick span{display:inline-flex;align-items:center;gap:.4rem}
.mega-foot .quick svg.lucide{color:var(--forest)}
.mega-foot .quick b{color:var(--ink);font-weight:600}
.mega-foot a{display:inline-flex;align-items:center;gap:.35rem;font-weight:600;color:var(--plum);text-decoration:none}
.scrim{position:fixed;inset:0;background:rgba(8,30,20,.38);backdrop-filter:blur(3px);-webkit-backdrop-filter:blur(3px);z-index:35;opacity:0;visibility:hidden;transition:opacity .25s,visibility 0s linear .25s}
.scrim.on{opacity:1;visibility:visible;transition:opacity .25s}

/* ---------- Mobile drawer ---------- */
.drawer{position:fixed;top:0;right:0;bottom:0;width:min(440px,100%);background:var(--paper);z-index:50;transform:translateX(100%);transition:transform .35s var(--ease),visibility 0s linear .35s;display:flex;flex-direction:column;visibility:hidden;padding-top:env(safe-area-inset-top,0px);padding-bottom:env(safe-area-inset-bottom,0px)}
.drawer.open{transform:none;visibility:visible;transition:transform .35s var(--ease)}
.drawer-head{display:flex;justify-content:space-between;align-items:center;padding:1rem 20px;border-bottom:1px solid var(--line)}
.drawer-head img{height:38px;width:auto}
.drawer-close{display:inline-flex;align-items:center;gap:.3rem;background:none;border:1.5px solid var(--ink);border-radius:999px;padding:.45rem .9rem;font-weight:600;font-size:var(--s-sm);cursor:pointer}
.drawer-scroll{flex:1;overflow-y:auto;overscroll-behavior:contain}
.drawer-body{padding:.5rem 20px .5rem}
.drawer details{border-bottom:1px solid var(--line)}
.drawer summary{list-style:none;display:flex;align-items:center;gap:.8rem;padding:1rem 0;font-family:var(--f-display);font-size:1.45rem;font-weight:500;letter-spacing:-.03em;cursor:pointer}
.drawer summary::-webkit-details-marker{display:none}
.drawer summary .si{width:38px;height:38px;border-radius:12px;background:var(--mint);color:var(--forest);display:grid;place-items:center;font-size:1.1rem}
.drawer summary .pm{margin-left:auto;color:var(--forest);transition:transform .25s}
.drawer details[open] summary .pm{transform:rotate(45deg)}
.drawer .d-feature{display:grid;grid-template-columns:96px 1fr;gap:.9rem;align-items:center;background:var(--surface);border:1px solid var(--line);border-radius:14px;padding:.6rem;text-decoration:none;margin-bottom:1rem}
.drawer .d-feature img{width:96px;height:72px;object-fit:cover;border-radius:10px}
.drawer .d-feature b{display:block;font-size:var(--s-sm)}
.drawer .d-feature span{font-size:.8rem;color:var(--muted)}
.drawer .d-group{margin-bottom:1rem}
.drawer .d-group h5{font-family:var(--f-mono);font-size:.68rem;font-weight:500;letter-spacing:.1em;text-transform:uppercase;color:var(--muted);margin:0 0 .4rem}
.drawer .d-group ul{display:grid;grid-template-columns:1fr;gap:.1rem}
.drawer .d-group.wide ul{grid-template-columns:1fr 1fr;column-gap:.8rem}
.drawer .d-group a{display:flex;align-items:center;gap:.55rem;text-decoration:none;font-size:var(--s-sm);padding:.42rem 0;line-height:1.3}
.drawer .d-group a svg.lucide{flex:none;width:16px;height:16px;color:var(--forest)}
.drawer .d-feature span svg.lucide{width:14px;height:14px;vertical-align:-2px;margin-left:.25rem}
.drawer .d-all{display:flex;align-items:center;justify-content:space-between;gap:.5rem;margin:0 0 1.1rem;padding:.75rem 1rem;border-radius:12px;background:var(--mint);color:var(--forest);font-weight:600;font-size:var(--s-sm);text-decoration:none}
.drawer-quick{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:.4rem;padding:.8rem 20px}
.drawer-quick a{display:flex;flex-direction:column;align-items:center;gap:.3rem;padding:.55rem .3rem;border-radius:12px;background:var(--surface);border:1px solid var(--line);font-size:.78rem;font-weight:600;text-align:center;text-decoration:none;color:var(--ink)}
.drawer-quick svg.lucide{width:18px;height:18px;color:var(--plum)}
.drawer-cta{display:flex;flex-direction:column;gap:.7rem;padding:1rem 20px 1.2rem;border-top:1px solid var(--line);background:var(--surface)}
.drawer-cta .btn{width:100%}
.d-social{display:flex;justify-content:center;gap:.5rem;padding:.4rem 20px 1.4rem}
.d-social a{display:grid;place-items:center;width:40px;height:40px;border-radius:50%;border:1px solid var(--line);color:var(--forest)}
.d-social svg.lucide{width:18px;height:18px}


/* ---------- Footer ---------- */
footer.site-foot{background:radial-gradient(60% 80% at 100% 0%,rgba(139,44,121,.22),transparent 60%),var(--forest-deep);color:var(--on-dark-muted);padding-block:clamp(3.5rem,calc(6 * var(--dv-vw,1vw)),4.8rem) 1.6rem;font-size:var(--s-sm);overflow:hidden}
.f-grid{display:grid;grid-template-columns:minmax(0,1.35fr) repeat(3,minmax(0,.85fr)) minmax(0,1.35fr);gap:clamp(1.5rem,calc(3 * var(--dv-vw,1vw)),2.6rem)}
.f-grid h4{font-family:var(--f-mono);font-size:.72rem;letter-spacing:.1em;text-transform:uppercase;color:var(--leaf);font-weight:500;margin:0 0 1rem}
.f-grid ul{display:flex;flex-direction:column;gap:.65rem}
.f-grid a{text-decoration:none;color:var(--on-dark);transition:color .2s}
.f-grid a:hover{color:var(--leaf)}
.f-grid .ci{display:flex;gap:.6rem;align-items:flex-start;color:var(--on-dark);line-height:1.45}
.f-grid .ci svg.lucide{flex:none;width:17px;height:17px;color:var(--leaf);margin-top:.18rem}
.f-grid .ci small{color:var(--on-dark-muted);font-size:.78rem}
.f-logo img{height:50px;width:auto}
.f-brand p{margin-top:1rem;max-width:34ch;line-height:1.55}
.socials{display:flex;gap:.5rem;margin-top:1.3rem}
.socials a{width:40px;height:40px;border-radius:50%;border:1px solid rgba(255,255,255,.2);display:grid;place-items:center;color:var(--on-dark);transition:background .2s,color .2s,border-color .2s}
.socials a:hover{background:var(--leaf);border-color:var(--leaf);color:var(--forest-deep)}
.socials svg.lucide{width:18px;height:18px}
.f-net{margin-top:clamp(2.5rem,calc(5 * var(--dv-vw,1vw)),3.5rem);padding:1.2rem 0;border-top:1px solid rgba(242,246,240,.15);display:flex;align-items:center;gap:1rem 2rem;flex-wrap:wrap}
.f-net-h{display:inline-flex;align-items:center;gap:.5rem;font-family:var(--f-mono);font-size:.72rem;letter-spacing:.1em;text-transform:uppercase;color:var(--leaf)}
.f-net-h svg.lucide{width:16px;height:16px}
.f-net ul{display:flex;flex-wrap:wrap;gap:.45rem}
.f-net a{display:inline-flex;align-items:center;gap:.3rem;padding:.4rem .85rem;border-radius:999px;border:1px solid rgba(242,246,240,.18);color:var(--on-dark);font-size:.82rem;text-decoration:none;transition:background .2s,color .2s,border-color .2s}
.f-net a:hover{background:var(--leaf);border-color:var(--leaf);color:var(--forest-deep)}
.f-net a svg.lucide{width:13px;height:13px;opacity:.7}
.f-bottom{padding-top:1.2rem;border-top:1px solid rgba(242,246,240,.15);display:flex;justify-content:space-between;align-items:center;gap:1rem;flex-wrap:wrap;font-size:var(--s-xs)}
.f-top{display:inline-flex;align-items:center;gap:.4rem;color:var(--on-dark);text-decoration:none}
.f-top:hover{color:var(--leaf)}
.f-top svg.lucide{width:15px;height:15px}

/* ---------- Responsive: chrome ---------- */
@media (max-width:1280px) and (max-width:1120.98px),(max-width:1280px) and (min-width:1400px),(max-width:1280px) and (hover:none),(max-width:1280px) and (pointer:coarse),(max-width:1280px) and (pointer:none){.mega-inner{grid-template-columns:240px minmax(0,1fr) 230px}.mega-inner.no-tiles{grid-template-columns:240px minmax(0,1fr)}}
@media (max-width:1120px) and (max-width:1120.98px),(max-width:1120px) and (min-width:1400px),(max-width:1120px) and (hover:none),(max-width:1120px) and (pointer:coarse),(max-width:1120px) and (pointer:none){
  nav.primary,header.site .actions .btn-primary{display:none}
  .burger{display:inline-flex}
  .actions{margin-left:auto}
  .mega-panel{display:none}
}
@media (max-width:1180px) and (max-width:1120.98px),(max-width:1180px) and (min-width:1400px),(max-width:1180px) and (hover:none),(max-width:1180px) and (pointer:coarse),(max-width:1180px) and (pointer:none){.f-grid{grid-template-columns:repeat(3,minmax(0,1fr))}.f-brand,.f-visit{grid-column:span 3}.f-visit ul{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:.8rem 2rem}}
@media (max-width:1020px) and (max-width:1120.98px),(max-width:1020px) and (min-width:1400px),(max-width:1020px) and (hover:none),(max-width:1020px) and (pointer:coarse),(max-width:1020px) and (pointer:none){.topbar .hide-md{display:none}}
@media (max-width:760px) and (max-width:1120.98px),(max-width:760px) and (min-width:1400px),(max-width:760px) and (hover:none),(max-width:760px) and (pointer:coarse),(max-width:760px) and (pointer:none){
  :root{--hh:68px}
  .logo img{height:38px}
  .topbar .hide-sm{display:none}
  .topbar .wrap{justify-content:center}
}
@media (max-width:620px) and (max-width:1120.98px),(max-width:620px) and (min-width:1400px),(max-width:620px) and (hover:none),(max-width:620px) and (pointer:coarse),(max-width:620px) and (pointer:none){
  .f-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
  .f-brand,.f-visit{grid-column:span 2}
  .f-visit ul{grid-template-columns:1fr}
  .f-bottom{flex-direction:column;align-items:flex-start}
}
@media (max-width:520px) and (max-width:1120.98px),(max-width:520px) and (min-width:1400px),(max-width:520px) and (hover:none),(max-width:520px) and (pointer:coarse),(max-width:520px) and (pointer:none){
  .burger span{display:none}
}
/* header icon links (shop: account, basket with its count) */
.hdr-ic{position:relative;display:inline-grid;place-items:center;width:42px;height:42px;border-radius:50%;color:inherit;text-decoration:none;border:1.5px solid transparent;transition:border-color .25s,background .25s}
.hdr-ic:hover{border-color:currentColor}
.hdr-ic svg.lucide{width:20px;height:20px}
.hdr-ic b{position:absolute;top:2px;right:0;min-width:18px;height:18px;padding:0 5px;border-radius:999px;background:var(--plum);color:#fff;font:600 .68rem/18px var(--f-body);text-align:center}
@media (max-width:560px) and (max-width:1120.98px),(max-width:560px) and (min-width:1400px),(max-width:560px) and (hover:none),(max-width:560px) and (pointer:coarse),(max-width:560px) and (pointer:none){.actions{gap:.35rem}.hdr-ic{width:38px;height:38px}}

/* ---------- Search: header button, dialog and the search form (every page) ---------- */
.hs-btn{display:inline-flex;align-items:center;gap:.5rem;height:42px;padding:0 .55rem 0 .9rem;border-radius:999px;border:1.5px solid currentColor;background:transparent;color:inherit;font-size:var(--s-sm);font-weight:600;cursor:pointer;opacity:.92;transition:background .25s,color .25s,opacity .25s}
.hs-btn:hover{opacity:1;background:rgba(127,127,127,.12)}
.hs-btn svg.lucide{width:18px;height:18px}
.hs-btn kbd{display:inline-grid;place-items:center;min-width:22px;height:22px;border-radius:6px;border:1px solid currentColor;font:500 .72rem/1 var(--f-mono);opacity:.6}
@media (max-width:1999px) and (max-width:1120.98px),(max-width:1999px) and (min-width:1400px),(max-width:1999px) and (hover:none),(max-width:1999px) and (pointer:coarse),(max-width:1999px) and (pointer:none),(min-width:1121px) and (max-width:1399.98px) and (hover:hover) and (pointer:fine){.hs-btn span,.hs-btn kbd{display:none}.hs-btn{width:42px;padding:0;justify-content:center;border-color:transparent}.hs-btn:hover{border-color:currentColor}}
@media (max-width:560px) and (max-width:1120.98px),(max-width:560px) and (min-width:1400px),(max-width:560px) and (hover:none),(max-width:560px) and (pointer:coarse),(max-width:560px) and (pointer:none){.hs-btn{width:38px;height:38px}}

.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}
kbd{font-family:var(--f-mono);font-size:.78em;padding:.1em .45em;border-radius:6px;border:1px solid var(--line);background:var(--surface);color:var(--ink)}

/* the form: icon, field, button; suggestions drop below */
.sf{position:relative;display:flex;align-items:center;gap:.35rem;width:100%;max-width:40rem;padding:.4rem .4rem .4rem 1.1rem;border-radius:999px;background:var(--surface);border:1.5px solid var(--line);color:var(--ink);box-shadow:0 18px 40px -26px rgba(8,47,32,.5);transition:border-color .25s,box-shadow .25s}
.sf:focus-within{border-color:var(--forest);box-shadow:0 0 0 4px rgba(13,91,59,.14),0 18px 40px -26px rgba(8,47,32,.5)}
.sf-ic{display:grid;place-items:center;color:var(--forest)}
.sf-ic svg.lucide{width:20px;height:20px}
.sf input[type="search"]{flex:1;min-width:0;height:48px;border:0;background:transparent;font:inherit;font-size:1.02rem;color:var(--ink);outline:none;-webkit-appearance:none;appearance:none}
.sf input::placeholder{color:var(--soft)}
.sf input::-webkit-search-cancel-button{cursor:pointer}
.sf-go{flex:none;display:inline-flex;align-items:center;gap:.45rem;height:48px;padding:0 1.3rem;border:0;border-radius:999px;background:linear-gradient(135deg,#9b3388,#6a1d5b);color:#fff;font-weight:600;font-size:var(--s-sm);cursor:pointer;transition:transform .25s var(--ease),box-shadow .25s}
.sf-go:hover{transform:translateY(-1px);box-shadow:0 12px 24px -12px rgba(139,44,121,.8)}
.sf-go svg.lucide{width:17px;height:17px}
.sf.busy .sf-ic{animation:blink 1s infinite}
@media (max-width:520px) and (max-width:1120.98px),(max-width:520px) and (min-width:1400px),(max-width:520px) and (hover:none),(max-width:520px) and (pointer:coarse),(max-width:520px) and (pointer:none){.sf{padding-left:.85rem}.sf-go span{display:none}.sf-go{width:48px;padding:0;justify-content:center}}
.sf-list{position:absolute;left:0;right:0;top:calc(100% + .5rem);z-index:40;max-height:min(calc(70 * var(--dv-vh,1vh)),30rem);overflow:auto;padding:.4rem;border-radius:20px;background:var(--surface);border:1px solid var(--line);box-shadow:0 30px 60px -24px rgba(8,47,32,.45);text-align:left}
.sf-item{display:flex;align-items:center;gap:.8rem;padding:.55rem .7rem;border-radius:14px;text-decoration:none;color:var(--ink)}
.sf-item:hover,.sf-item.on{background:var(--mint)}
.sf-pic{flex:none;width:42px;height:42px;border-radius:11px;overflow:hidden;display:grid;place-items:center;background:var(--paper);color:var(--forest)}
.sf-pic img{width:100%;height:100%;object-fit:cover}
.sf-pic svg.lucide{width:19px;height:19px}
.sf-t{display:flex;flex-direction:column;min-width:0}
.sf-t b{font-weight:600;font-size:.95rem;line-height:1.3;overflow:hidden;text-overflow:ellipsis;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical}
.sf-t small{font-family:var(--f-mono);font-size:.7rem;letter-spacing:.06em;text-transform:uppercase;color:var(--muted);margin-top:.15rem}
.sf mark,.sr mark{background:rgba(181,211,90,.45);color:inherit;border-radius:3px;padding:0 .1em}
.sf-all{justify-content:center;margin-top:.25rem;border-top:1px solid var(--line);border-radius:0 0 14px 14px;color:var(--forest);font-weight:600;font-size:var(--s-sm)}
.sf-all svg.lucide{width:16px;height:16px}
.sf-none{display:flex;align-items:center;gap:.6rem;padding:.9rem;font-size:var(--s-sm);color:var(--muted)}
.sf-none svg.lucide{width:18px;height:18px;flex:none}

/* the dialog */
dialog.sx{width:min(46rem,calc(calc(100 * var(--dv-vw,1vw)) - 32px));max-height:calc(calc(100 * var(--dv-vh,1vh)) - 32px);margin:clamp(16px,calc(10 * var(--dv-vh,1vh)),7rem) auto auto;padding:0;border:0;border-radius:28px;background:var(--surface);color:var(--ink);box-shadow:0 50px 100px -30px rgba(6,29,20,.6);overflow:visible}
dialog.sx::backdrop{background:rgba(6,29,20,.55);backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px)}
dialog.sx[open]{animation:rise .35s var(--ease) both}
.sx-in{padding:clamp(1rem,calc(3 * var(--dv-vw,1vw)),1.6rem)}
.sx .sf{max-width:none;box-shadow:none}
.sx .sf-list{position:static;margin-top:.8rem;box-shadow:none;max-height:min(calc(55 * var(--dv-vh,1vh)),26rem)}
.sx .sf-list:not([hidden]) ~ .sx-idle{display:none}
.sx-h{display:flex;align-items:center;gap:.45rem;margin:1.3rem 0 .6rem;font-family:var(--f-mono);font-size:.72rem;letter-spacing:.1em;text-transform:uppercase;color:var(--muted)}
.sx-h svg.lucide{width:14px;height:14px;color:var(--forest)}
.sx-pop,.sx-go{display:flex;flex-wrap:wrap;gap:.45rem}
.sx-pop a,.sx-go a{display:inline-flex;align-items:center;gap:.4rem;padding:.45rem .9rem;border-radius:999px;border:1px solid var(--line);background:var(--paper);font-size:var(--s-sm);color:var(--ink);text-decoration:none;transition:background .25s,color .25s,border-color .25s}
.sx-pop a:hover,.sx-go a:hover{background:var(--forest);border-color:var(--forest);color:#fff}
.sx-go svg.lucide,.sx-pop svg.lucide{width:15px;height:15px}
.sx-keys{display:flex;flex-wrap:wrap;gap:1.2rem;margin-top:1.3rem;padding-top:1rem;border-top:1px solid var(--line);font-size:.75rem;color:var(--muted)}
.sx-keys kbd{margin-right:.2rem}
@media (max-width:560px) and (max-width:1120.98px),(max-width:560px) and (min-width:1400px),(max-width:560px) and (hover:none),(max-width:560px) and (pointer:coarse),(max-width:560px) and (pointer:none){.sx-keys{display:none}dialog.sx{margin-top:16px}}
/* six menus, search, account, basket and the booking button share the bar: tighter between 1121 and 1600px */
@media (min-width:1121px) and (max-width:1600px) and (max-width:1120.98px),(min-width:1121px) and (max-width:1600px) and (min-width:1400px),(min-width:1121px) and (max-width:1600px) and (hover:none),(min-width:1121px) and (max-width:1600px) and (pointer:coarse),(min-width:1121px) and (max-width:1600px) and (pointer:none),(min-width:1121px) and (max-width:1399.98px) and (hover:hover) and (pointer:fine){
  header.site .bar{gap:1rem}
  .actions{gap:.45rem}
  .nav-trigger{padding:0 .55rem}
  .nav-trigger::after{left:.55rem;right:.55rem}
  header.site .actions .btn-primary{padding:.85em 1.15em}
}
/* narrower desktops: the booking button keeps its icon only, the menu labels sit closer */
@media (min-width:1121px) and (max-width:1360px) and (max-width:1120.98px),(min-width:1121px) and (max-width:1360px) and (min-width:1400px),(min-width:1121px) and (max-width:1360px) and (hover:none),(min-width:1121px) and (max-width:1360px) and (pointer:coarse),(min-width:1121px) and (max-width:1360px) and (pointer:none){
  header.site .actions .btn-primary{width:44px;height:44px;padding:0;border-radius:50%}
  header.site .actions .btn-primary .bk-l{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0,0,0,0)}
}
@media (min-width:1121px) and (max-width:1240px) and (max-width:1120.98px),(min-width:1121px) and (max-width:1240px) and (min-width:1400px),(min-width:1121px) and (max-width:1240px) and (hover:none),(min-width:1121px) and (max-width:1240px) and (pointer:coarse),(min-width:1121px) and (max-width:1240px) and (pointer:none){
  .nav-trigger{padding:0 .38rem;font-size:.875rem}
  .nav-trigger::after{left:.38rem;right:.38rem}
  .logo img{height:40px}
}
/* the smallest phones (320-380px): logo, search, account, basket and menu still fit on one line */
@media (max-width:380px) and (max-width:1120.98px),(max-width:380px) and (min-width:1400px),(max-width:380px) and (hover:none),(max-width:380px) and (pointer:coarse),(max-width:380px) and (pointer:none){
  header.site .bar{gap:.5rem}
  .logo img{height:32px}
  .actions{gap:.1rem}
  .hdr-ic,.hs-btn{width:34px;height:34px}
  .burger{padding:.45rem .6rem}
}