/* hayati-vapes.co.uk - storefront. Indigo and sky blue, Oswald headings on Open Sans, a mega-menu
   by product line. engine.css (cart, checkout, chat, search, sticky bars) follows this file and
   reads the --teal / --ink / --line tokens, mapped here to this shop's colours. */
@font-face { font-family: 'Open Sans'; font-style: normal; font-weight: 400 700; font-display: swap;
  src: url(/assets/fonts/opensans-latin.woff2) format('woff2'); }
@font-face { font-family: Oswald; font-style: normal; font-weight: 500 700; font-display: swap;
  src: url(/assets/fonts/oswald-latin.woff2) format('woff2'); }

:root {
  --indigo: #221466; --indigo-2: #2f1f8c; --indigo-d: #150c45; --sky: #30abff; --sky-d: #0f7fcf; --sky-l: #e8f5ff;
  --ink: #16113a; --body: #3a384c; --muted: #6a6880; --line: #e4e2ee; --band: #f6f5fb; --paper: #fff; --tile: #f3f2f9;
  --ok: #157a4a; --no: #8a1d2f;
  --font: 'Open Sans', system-ui, -apple-system, 'Segoe UI', Roboto, Arial, sans-serif;
  --head: Oswald, 'Arial Narrow', Arial, sans-serif;
  --r: 10px; --rc: 12px; --gut: 20px;
  /* engine.css tokens */
  --teal: var(--sky); --teal-d: var(--indigo); --teal-l: var(--sky-l); --sale: var(--indigo);
}
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-padding-top: 90px; }
body { margin: 0; background: var(--paper); color: var(--body); font: 400 15px/1.65 var(--font); }
img { max-width: 100%; height: auto; }
a { color: var(--indigo); }
a:hover { color: var(--sky-d); }
h1, h2, h3 { font-family: var(--head); color: var(--ink); font-weight: 600; line-height: 1.15; letter-spacing: .005em; }
h1 { font-size: clamp(28px, 4.2vw, 44px); margin: 0 0 12px; text-transform: uppercase; }
h2 { font-size: clamp(22px, 2.6vw, 30px); margin: 0 0 14px; }
h3 { font-size: 19px; margin: 0 0 8px; }
p { margin: 0 0 14px; }
[hidden] { display: none !important; }
.wrap { width: 100%; max-width: 1240px; margin: 0 auto; padding: 0 var(--gut); }
.arr { display: inline-block; transition: transform .15s; }
a:hover .arr { transform: translateX(3px); }
.eyebrow { margin: 0 0 8px; font: 600 12.5px/1.3 var(--font); text-transform: uppercase; letter-spacing: .12em; color: var(--sky-d); }
.eyebrow--light { color: var(--sky); }

/* ---------------------------------------------------------------- buttons */
.btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-height: 46px; padding: 0 22px;
  border: 2px solid var(--indigo); border-radius: 999px; background: var(--paper); color: var(--indigo);
  font: 700 14px/1 var(--font); letter-spacing: .02em; text-decoration: none; cursor: pointer; transition: background .15s, color .15s, border-color .15s; }
.btn:hover { background: var(--indigo); color: #fff; }
.btn--fill, .btn--buy { background: var(--indigo); color: #fff; }
.btn--fill:hover, .btn--buy:hover { background: var(--indigo-2); border-color: var(--indigo-2); color: #fff; }
.btn--sky { background: var(--sky); border-color: var(--sky); color: var(--indigo-d); }
.btn--sky:hover { background: #57bbff; border-color: #57bbff; color: var(--indigo-d); }
.btn--line { background: transparent; }
.btn--ghost { background: transparent; border-color: rgba(255, 255, 255, .55); color: #fff; }
.btn--ghost:hover { background: #fff; color: var(--indigo); }
.btn--sm { min-height: 38px; padding: 0 16px; font-size: 13px; }
.btn--wide { width: 100%; }
.btn[disabled], .btn:disabled { background: #d9d7e3; border-color: #d9d7e3; color: #6a6880; cursor: not-allowed; }

/* ---------------------------------------------------------------- top of every page */
.warn { background: var(--indigo-d); color: #fff; text-align: center; }
.warn p { margin: 0; padding: 7px var(--gut); font-size: 12.5px; font-weight: 600; letter-spacing: .01em; }
.ann { position: relative; background: var(--sky); color: var(--indigo-d); text-align: center; padding: 8px 44px; font-size: 13.5px; font-weight: 600; }
.ann__x { position: absolute; right: 8px; top: 50%; transform: translateY(-50%); width: 30px; height: 30px; border: 0; background: transparent; color: inherit; font-size: 20px; cursor: pointer; }
.ship { background: var(--band); color: var(--ink); text-align: center; padding: 7px var(--gut); font-size: 13px; border-bottom: 1px solid var(--line); }

.hdr { position: sticky; top: 0; z-index: 40; background: var(--paper); box-shadow: 0 1px 0 var(--line); }
.hdr__in { display: flex; align-items: center; gap: 18px; min-height: 74px; }
.logo { flex: 0 0 auto; line-height: 0; }
.logo img { width: 151px; height: 48px; }
.srch { flex: 1 1 auto; max-width: 520px; display: flex; align-items: center; height: 44px; padding: 0 18px; border: 1.5px solid var(--line);
  border-radius: 999px; background: var(--band); color: var(--muted); font-size: 14px; text-decoration: none; }
.srch:hover { border-color: var(--indigo); color: var(--ink); }
.srch__s { display: none; }
.hdr__act { margin-left: auto; display: flex; align-items: center; gap: 16px; }
.hdr__l { font-size: 13.5px; font-weight: 600; text-decoration: none; color: var(--ink); }
.bag { position: relative; display: inline-flex; align-items: center; height: 44px; padding: 0 18px; border-radius: 999px; background: var(--indigo); color: #fff; font-weight: 700; font-size: 14px; text-decoration: none; }
.bag:hover { background: var(--indigo-2); color: #fff; }
.bag__n { position: absolute; top: -6px; right: -6px; min-width: 22px; height: 22px; padding: 0 6px; border-radius: 11px; background: var(--sky); color: var(--indigo-d); font-size: 12px; font-weight: 800; line-height: 22px; text-align: center; }
.burger { display: none; flex: 0 0 auto; width: 44px; height: 44px; padding: 11px 10px; border: 0; border-radius: 10px; background: var(--band); cursor: pointer; }
.burger span { display: block; height: 2px; margin: 4px 0; background: var(--ink); border-radius: 2px; }

.nav { background: var(--indigo); }
.nav__in { display: flex; align-items: stretch; gap: 2px; min-height: 48px; }
.nav a, .nav summary { display: flex; align-items: center; padding: 0 14px; color: #fff; font: 500 15px/1 var(--head); letter-spacing: .05em; text-transform: uppercase; text-decoration: none; cursor: pointer; list-style: none; }
.nav summary::-webkit-details-marker { display: none; }
.nav summary::after { content: ''; width: 7px; height: 7px; margin-left: 8px; border: solid currentColor; border-width: 0 2px 2px 0; transform: rotate(45deg) translateY(-2px); opacity: .8; }
.nav > .wrap > a:hover, .nav summary:hover, .nav details[open] > summary, .nav a[aria-current] { background: var(--indigo-2); color: #fff; }
.drop { position: relative; display: flex; }
.drop__m { position: absolute; left: 0; top: 100%; z-index: 50; min-width: 240px; padding: 10px; background: var(--paper); border-radius: 0 0 var(--rc) var(--rc); box-shadow: 0 18px 40px -12px rgba(22, 17, 58, .35); }
.drop__m--wide { display: grid; grid-template-columns: repeat(2, minmax(250px, 1fr)); gap: 4px; min-width: 560px; }
.drop__m > a { padding: 10px 12px; border-radius: 8px; color: var(--ink); font: 600 14px/1.3 var(--font); letter-spacing: 0; text-transform: none; }
.drop__m > a:hover { background: var(--band); color: var(--indigo); }
.mi { gap: 12px; height: auto !important; }
.mi img { flex: 0 0 auto; width: 56px; height: 56px; object-fit: contain; background: var(--band); border-radius: 8px; }
.mi span { display: grid; gap: 2px; }
.mi b { font-weight: 700; font-size: 14px; }
.mi small { color: var(--muted); font-size: 12.5px; font-weight: 400; }

.sig { background: var(--sky-l); border-bottom: 1px solid #d4ebfb; }
.sig__g { display: grid; grid-template-columns: repeat(4, 1fr); }
.sig__i { display: grid; gap: 1px; padding: 10px 14px; text-decoration: none; color: var(--ink); border-right: 1px solid #d4ebfb; text-align: center; }
.sig__i:last-child { border-right: 0; }
.sig__i b { font-size: 13.5px; }
.sig__i small { font-size: 12px; color: var(--muted); }

/* ---------------------------------------------------------------- sections */
.sec { padding: 56px 0; }
.sec--band { background: var(--band); }
.sec--tight { padding: 28px 0; }
.sec__head { display: flex; align-items: flex-end; justify-content: space-between; gap: 20px; margin-bottom: 24px; }
.sec__h { margin: 0; text-transform: uppercase; }
.sec__more { font-weight: 700; text-decoration: none; white-space: nowrap; }
.crumb { display: flex; flex-wrap: wrap; gap: 6px; padding: 18px 0 14px; font-size: 13px; color: var(--muted); }
.crumb a { color: var(--muted); text-decoration: none; }
.crumb a:hover { color: var(--indigo); }
.crumb__s { opacity: .6; }

/* hero */
.hero { background: radial-gradient(1200px 500px at 85% 20%, #3a2aa3 0%, rgba(58, 42, 163, 0) 60%), linear-gradient(135deg, var(--indigo-d), var(--indigo)); color: #e6e3fa; overflow: hidden; }
.hero__in { display: grid; grid-template-columns: 1.1fr .9fr; gap: 30px; align-items: center; min-height: 440px; padding-top: 40px; padding-bottom: 40px; }
.hero h1 { color: #fff; font-size: clamp(30px, 4.2vw, 50px); }
.hero__l { font-size: 17px; max-width: 560px; color: #dcd8f6; }
.hero__cta { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 22px; }
.hero__art { position: relative; height: 380px; }
.hero__d { position: absolute; width: 62%; aspect-ratio: 1; object-fit: contain; border-radius: 24px; background: #fff; box-shadow: 0 30px 60px -20px rgba(0, 0, 0, .5); }
.hero__d--1 { right: 0; top: 0; width: 56%; }
.hero__d--2 { left: 0; bottom: 0; width: 50%; }

/* cards */
.grid { display: grid; gap: 18px; }
.grid--4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.card { position: relative; display: flex; flex-direction: column; background: var(--paper); border: 1px solid var(--line); border-radius: var(--rc); overflow: hidden; transition: box-shadow .15s, transform .15s; }
.card:hover { box-shadow: 0 16px 36px -18px rgba(22, 17, 58, .35); transform: translateY(-2px); }
.card__link { display: flex; flex-direction: column; flex: 1 1 auto; padding: 0 0 6px; color: inherit; text-decoration: none; }
.card__img { position: relative; aspect-ratio: 1; background: var(--tile); }
.card__img img { width: 100%; height: 100%; object-fit: contain; mix-blend-mode: multiply; }
.card__k { margin: 12px 14px 2px; font-size: 11.5px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--sky-d); }
.card__t { margin: 4px 14px 4px; font: 600 17px/1.2 var(--head); color: var(--ink); }
.card__d { margin: 0 14px 6px; font-size: 13.5px; line-height: 1.45; color: var(--muted); }
.card__p { margin: auto 14px 0; padding-top: 4px; font-size: 14px; color: var(--muted); }
.card__p b { font-size: 17px; color: var(--indigo); }
.card__p small { font-size: 12px; }
.card__p--no { color: var(--no); font-weight: 700; }
.card__acts { padding: 8px 14px 14px; }
.card__acts .btn { width: 100%; }
.card--no .card__img img { opacity: .55; filter: grayscale(.6); }
.badge { position: absolute; right: 10px; top: 10px; z-index: 2; padding: 4px 10px; border-radius: 999px; font-size: 11.5px; font-weight: 700; letter-spacing: .02em; }
.badge--no { background: var(--ink); color: #fff; }
.badge--soon { background: var(--sky); color: var(--indigo-d); }
.badge--out { background: #fff; color: var(--no); border: 1px solid #e9c9cf; }

/* carousel */
.car { position: relative; }
.car__track { display: grid; grid-auto-flow: column; grid-auto-columns: calc((100% - 54px) / 4); gap: 18px; overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none; padding-bottom: 4px; }
.car__track::-webkit-scrollbar { display: none; }
.car__track > * { scroll-snap-align: start; }
.car__nav { display: flex; gap: 8px; }
.car__b { width: 42px; height: 42px; border: 1.5px solid var(--line); border-radius: 50%; background: var(--paper); color: var(--ink); font-size: 18px; cursor: pointer; }
.car__b:hover { border-color: var(--indigo); }
.car__dots { display: flex; justify-content: center; gap: 6px; margin-top: 14px; }
.car__dots button { width: 8px; height: 8px; padding: 0; border: 0; border-radius: 4px; background: #cfcce0; cursor: pointer; }
.car__dots button.on { width: 22px; background: var(--indigo); }

/* disposables band on the home page */
.ban { display: grid; grid-template-columns: 1fr 1fr; gap: 30px; align-items: center; padding: 34px; border-radius: 18px; background: var(--ink); color: #d9d6ee; }
.ban .sec__h { color: #fff; margin-bottom: 12px; }
.ban .btn--line { border-color: rgba(255, 255, 255, .6); color: #fff; }
.ban .btn--line:hover { background: #fff; color: var(--ink); }
.ban__l { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.ban__l a { display: grid; gap: 2px; padding: 12px 14px; border-radius: 10px; background: rgba(255, 255, 255, .07); color: #fff; text-decoration: none; }
.ban__l a:hover { background: rgba(255, 255, 255, .14); }
.ban__l span { font-size: 12.5px; color: #b9b4dc; }

/* ---------------------------------------------------------------- product page */
.pdp { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 40px; align-items: start; padding-bottom: 36px; }
.pdp__media { position: sticky; top: 140px; }
.pdp__img { position: relative; aspect-ratio: 1; border-radius: 18px; background: var(--tile); overflow: hidden; }
.pdp__img img { width: 100%; height: 100%; object-fit: contain; mix-blend-mode: multiply; }
.pdp--no .pdp__img img { opacity: .6; filter: grayscale(.5); }
.hl { list-style: none; display: grid; grid-template-columns: repeat(2, 1fr); gap: 8px; margin: 14px 0 0; padding: 0; }
.hl li { padding: 10px 12px; border-radius: 10px; background: var(--band); color: var(--ink); font-size: 13.5px; font-weight: 600; text-align: center; }
.buybox h1 { font-size: clamp(26px, 3.2vw, 38px); }
.pdp__lead { font-size: 16px; color: var(--body); }
.pricebox { display: flex; align-items: baseline; gap: 14px; margin: 6px 0 14px; }
.pdp__price { margin: 0; font: 600 32px/1 var(--head); color: var(--indigo); }
.stock { margin: 0; font-size: 13px; font-weight: 700; }
.stock--in { color: var(--ok); }
.stock--out { color: var(--no); }
.pick__h { margin: 16px 0 8px; font-size: 13.5px; color: var(--muted); }
.pick__h b { color: var(--ink); }
.opts { margin: 0; padding: 0; border: 0; }
.opts legend { padding: 0; }
.opts__g { display: flex; flex-wrap: wrap; gap: 8px; }
.opt { position: relative; }
.opt input { position: absolute; opacity: 0; inset: 0; cursor: pointer; }
.opt span { display: inline-flex; align-items: center; min-height: 40px; padding: 0 16px; border: 1.5px solid var(--line); border-radius: 999px; font-size: 13.5px; font-weight: 600; color: var(--ink); background: var(--paper); }
.opt input:checked + span { border-color: var(--indigo); background: var(--indigo); color: #fff; }
.opt input:focus-visible + span { outline: 3px solid var(--sky); outline-offset: 2px; }
.fchips__q { width: 100%; height: 42px; margin-bottom: 8px; padding: 0 14px; border: 1.5px solid var(--line); border-radius: 10px; font: inherit; font-size: 14px; }
.fchips__q:focus { outline: none; border-color: var(--indigo); }
.fchips { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 6px; }
.fchips--many { max-height: 330px; overflow-y: auto; padding: 4px; border: 1px solid var(--line); border-radius: 12px; overscroll-behavior: contain; }
.fchip { position: relative; display: flex; align-items: center; gap: 8px; padding: 5px 8px 5px 5px; border: 1.5px solid var(--line); border-radius: 10px; background: var(--paper); font-size: 13px; font-weight: 600; color: var(--ink); line-height: 1.25; cursor: pointer; }
.fchip input { position: absolute; opacity: 0; inset: 0; cursor: pointer; }
.fchip:has(input:checked) { border-color: var(--indigo); box-shadow: inset 0 0 0 1px var(--indigo); background: var(--sky-l); }
.fchip:has(input:disabled) { opacity: .5; cursor: not-allowed; }
.fchip:has(input:focus-visible) { outline: 3px solid var(--sky); outline-offset: 1px; }
.fchip__im { flex: 0 0 auto; width: 36px; height: 36px; border-radius: 7px; background: var(--tile); overflow: hidden; }
.fchip__im img { width: 100%; height: 100%; object-fit: contain; mix-blend-mode: multiply; }
.picks { display: grid; gap: 8px; }
.pick { position: relative; display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 12px 14px; border: 1.5px solid var(--line); border-radius: 12px; cursor: pointer; }
.pick input { position: absolute; opacity: 0; inset: 0; cursor: pointer; }
.pick:has(input:checked) { border-color: var(--indigo); box-shadow: inset 0 0 0 1px var(--indigo); background: var(--sky-l); }
.pick--out { opacity: .55; }
.pick__n { display: grid; gap: 1px; }
.pick__n b { color: var(--ink); }
.pick__n small { color: var(--muted); font-size: 12.5px; }
.pick__p { font-weight: 700; color: var(--indigo); white-space: nowrap; }
.pick__p em { font-style: normal; color: var(--no); font-size: 13px; }
.packs { margin: 14px 0 0; padding: 0; border: 0; }
.packs legend { padding: 0; }
.packs__g { display: grid; grid-template-columns: repeat(4, 1fr); gap: 6px; }
.pack { position: relative; display: grid; gap: 2px; padding: 9px 10px; border: 1.5px solid var(--line); border-radius: 10px; cursor: pointer; }
.pack input { position: absolute; opacity: 0; inset: 0; cursor: pointer; }
.pack__b { display: grid; }
.pack__b b { font-size: 13.5px; color: var(--ink); }
.pack__b small { font-size: 11.5px; color: var(--indigo); font-weight: 600; line-height: 1.3; }
.pack__p { font-weight: 700; color: var(--ink); font-size: 14px; }
.buy { display: flex; gap: 10px; margin-top: 16px; }
.qty { display: flex; align-items: center; border: 1.5px solid var(--line); border-radius: 999px; overflow: hidden; }
.qty button { width: 42px; height: 50px; border: 0; background: transparent; font-size: 20px; color: var(--ink); cursor: pointer; }
.qty input { width: 40px; height: 50px; border: 0; text-align: center; font: 700 16px var(--font); color: var(--ink); }
.btn--buy { flex: 1 1 auto; min-height: 54px; font-size: 16px; }
.bsig { list-style: none; margin: 14px 0 0; padding: 12px 14px; border-radius: 12px; background: var(--band); font-size: 13px; }
.bsig li + li { margin-top: 4px; }
.bsig a { color: var(--body); text-decoration: none; }
.bsig a:hover { color: var(--indigo); }
.pdp__sib { display: grid; gap: 6px; margin: 16px 0 0; }
.pdp__sib a { font-weight: 700; text-decoration: none; }
.nosale { margin: 10px 0 16px; padding: 16px 18px; border-left: 4px solid var(--no); border-radius: 0 12px 12px 0; background: #fbf1f3; }
.nosale__t { margin-bottom: 6px; font-weight: 800; color: var(--no); }
.nosale p:last-child { margin: 0; }
.instead { margin-top: 20px; }
.instead .card { max-width: 300px; }

.pdp-body { display: grid; grid-template-columns: minmax(0, 1fr) 360px; gap: 44px; padding-top: 10px; padding-bottom: 50px; align-items: start; }
.pdp-body--one { grid-template-columns: minmax(0, 860px); justify-content: center; }
.prose-sec { padding: 26px 0; border-top: 1px solid var(--line); }
.prose-sec:first-child { border-top: 0; padding-top: 6px; }
.prose-sec h2 { font-size: clamp(21px, 2.3vw, 27px); }
.prose-sec ul { padding-left: 20px; }
.prose-sec li { margin: 4px 0; }
.flat { color: var(--body); }
.lines { list-style: none; padding: 0 !important; }
.lines li { padding: 8px 0; border-bottom: 1px solid var(--line); }
.lines span { color: var(--muted); font-size: 13.5px; }
.flist { display: grid; grid-template-columns: 1fr; gap: 4px; }
.flist ul { columns: 3 220px; column-gap: 28px; }
.flist li { break-inside: avoid; }
.flist h3 { margin: 12px 0 6px; font-size: 16px; text-transform: uppercase; letter-spacing: .03em; color: var(--sky-d); }
.flist ul { list-style: none; margin: 0; padding: 0 !important; }
.flist li { padding: 5px 0; border-bottom: 1px dashed var(--line); font-size: 14px; }
.flist a { font-weight: 700; text-decoration: none; }
.flist span { color: var(--muted); font-size: 13px; }
.spec { margin-bottom: 18px; padding: 18px; border: 1px solid var(--line); border-radius: var(--rc); background: var(--paper); }
.spec__h { font-size: 17px; text-transform: uppercase; letter-spacing: .03em; }
.spec table { width: 100%; border-collapse: collapse; font-size: 13.5px; }
.spec th, .spec td { padding: 8px 0; border-bottom: 1px solid var(--line); text-align: left; vertical-align: top; }
.spec th { width: 36%; padding-right: 10px; color: var(--muted); font-weight: 600; }
.spec td { color: var(--ink); }
.spec--ship { margin: 18px 0; }
.pdp-body__side { position: sticky; top: 140px; }

/* FAQ */
.faq { padding: 26px 0; border-top: 1px solid var(--line); }
.faq__l { display: grid; gap: 8px; margin-top: 12px; }
.faq__i { border: 1px solid var(--line); border-radius: 12px; background: var(--paper); }
.faq__i summary { position: relative; padding: 14px 44px 14px 16px; font-weight: 700; color: var(--ink); cursor: pointer; list-style: none; }
.faq__i summary::-webkit-details-marker { display: none; }
.faq__i summary::after { content: '+'; position: absolute; right: 16px; top: 50%; transform: translateY(-50%); font-size: 20px; color: var(--indigo); }
.faq__i[open] summary::after { content: '\2212'; }
.faq__a { padding: 0 16px 6px; }

/* ---------------------------------------------------------------- hubs */
.hub { padding: 6px 0 26px; }
.hub__l { font-size: 16.5px; max-width: 760px; }
.hub__j { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 16px; }
.hub__j a { padding: 8px 14px; border-radius: 999px; border: 1.5px solid var(--c); color: var(--ink); font-size: 13.5px; font-weight: 700; text-decoration: none; }
.hub__j a:hover { background: var(--c); color: #fff; }
.fam { margin: 0 0 30px; padding-left: 16px; border-left: 4px solid var(--c); }
.fam__h { text-transform: uppercase; font-size: 24px; }
.fl { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; }
.fl a { display: grid; gap: 2px; height: 100%; padding: 12px 14px; border: 1px solid var(--line); border-radius: 12px; text-decoration: none; color: var(--body); background: var(--paper); }
.fl a:hover { border-color: var(--indigo); }
.fl__n { font-weight: 700; color: var(--ink); }
.fl__t { font-size: 13.5px; }
.fl__l { font-size: 12px; color: var(--muted); }
.ftiles { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(4, 1fr); gap: 10px; }
.ftiles a { display: grid; gap: 3px; padding: 14px; height: 100%; border-radius: 12px; background: var(--paper); border: 1px solid var(--line); text-decoration: none; }
.ftiles b { color: var(--ink); }
.ftiles span { font-size: 13px; color: var(--muted); }

/* ---------------------------------------------------------------- service pages */
.svc { padding-bottom: 50px; }
.svc h1 { margin-top: 4px; }
.svc__b { max-width: 820px; }
.svc__b h2 { font-size: 22px; margin-top: 26px; }
.ostat { display: grid; gap: 6px; max-width: 520px; }
.ostat .btn { margin-top: 12px; justify-self: start; }
.ostat__out { margin-top: 22px; }
.form-row { font-size: 13.5px; font-weight: 700; color: var(--ink); }
.form-in { height: 48px; padding: 0 14px; border: 1.5px solid var(--line); border-radius: 10px; font: inherit; }
.form-in:focus { outline: none; border-color: var(--indigo); }
.notfound { padding: 70px 0 90px; text-align: center; }
.notfound b { font: 700 90px/1 var(--head); color: var(--sky); }
.notfound h1 { margin: 10px 0 20px; }

/* ---------------------------------------------------------------- footer */
.ftr { background: var(--indigo-d); color: #bdb8de; font-size: 14px; }
.ftr__top { display: grid; grid-template-columns: 1.4fr 1fr 1fr 1fr; gap: 34px; padding: 54px 0 34px; }
.ftr__brand img { width: 151px; height: 48px; }
.ftr__brand p { margin: 14px 0; }
.ftr h3 { color: #fff; font-size: 16px; text-transform: uppercase; letter-spacing: .06em; }
.ftr ul { list-style: none; margin: 0; padding: 0; }
.ftr li { margin: 7px 0; }
.ftr a { color: #dcd8f6; text-decoration: none; }
.ftr a:hover { color: var(--sky); }
.ftr__sl { display: block; margin-bottom: 6px; color: #fff; font-weight: 700; font-size: 13.5px; }
.ftr__sr { display: flex; gap: 8px; }
.ftr__sr input { flex: 1 1 auto; min-width: 0; height: 46px; padding: 0 14px; border: 1px solid rgba(255, 255, 255, .25); border-radius: 999px; background: rgba(255, 255, 255, .08); color: #fff; font: inherit; }
.ftr__sr input::placeholder { color: #a9a3d4; }
.ftr__msg { margin: 8px 0 0; color: #fff; font-size: 13px; }
.ftr__warn { margin: 0; padding: 18px 0; border-top: 1px solid rgba(255, 255, 255, .12); font-size: 13px; }
.ftr__warn b { color: #fff; }
.ftr__legal { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 10px; padding: 14px 0 26px; border-top: 1px solid rgba(255, 255, 255, .12); font-size: 12.5px; color: #9a94c6; }

/* age gate */
.age { display: none; position: fixed; inset: 0; z-index: 200; align-items: center; justify-content: center; padding: 20px; background: rgba(21, 12, 69, .92); }
.age.on { display: flex; }
.age__box { width: 100%; max-width: 420px; padding: 30px 26px; border-radius: 18px; background: #fff; text-align: center; }
.age__box img { width: 151px; height: 48px; margin: 0 auto 10px; display: block; }
.age__box h2 { text-transform: uppercase; }
.age__btns { display: grid; gap: 10px; margin-top: 18px; }

/* ---------------------------------------------------------------- tablet and phone */
@media (max-width: 1080px) {
  .grid--4 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .car__track { grid-auto-columns: calc((100% - 36px) / 3); }
  .pdp-body { grid-template-columns: minmax(0, 1fr); }
  .pdp-body__side { position: static; }
  .fl { grid-template-columns: repeat(2, 1fr); }
  .ftiles { grid-template-columns: repeat(3, 1fr); }
  .nav a, .nav summary { padding: 0 10px; font-size: 14px; }
}
@media (max-width: 860px) {
  :root { --gut: 16px; }
  .burger { display: block; }
  .hdr__in { gap: 10px; min-height: 64px; }
  .logo img { width: 126px; height: 40px; }
  .srch { order: 3; flex: 0 0 auto; height: 40px; padding: 0 12px; font-size: 13px; }
  .srch__l { display: none; }
  .srch__s { display: inline; }
  .warn p { padding: 6px var(--gut); font-size: 11.5px; }
  .hdr__l { display: none; }
  .hdr__act { order: 4; margin-left: 0; }
  .logo { margin-right: auto; }
  .bag { height: 40px; padding: 0 14px; }
  .nav { display: none; max-height: 0; overflow-y: auto; }
  .nav.on { display: block; position: absolute; left: 0; right: 0; top: 100%; box-shadow: 0 20px 40px -10px rgba(0, 0, 0, .4); }
  .nav__in { flex-direction: column; padding: 8px 0 18px; }
  .nav a, .nav summary { min-height: 48px; padding: 0 var(--gut); }
  .drop { display: block; }
  .drop__m, .drop__m--wide { position: static; display: grid; grid-template-columns: 1fr; min-width: 0; margin: 0 10px 8px; border-radius: 12px; box-shadow: none; }
  .sig__g { grid-template-columns: repeat(2, 1fr); }
  .sig__i:nth-child(n+3) { display: none; }
  .sig__i:nth-child(2) { border-right: 0; }
  .sig__i { padding: 7px 6px; }
  .sig__i b { font-size: 12.5px; }
  .sig__i small { font-size: 11.5px; }
  .hero__in { grid-template-columns: 1fr; min-height: 0; }
  .hero__art { height: 230px; }
  .hero__d { width: 46%; }
  .hero__d--2 { width: 42%; }
  .grid--4 { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
  .car__track { grid-auto-columns: 62%; gap: 12px; }
  .pdp { grid-template-columns: minmax(0, 1fr); gap: 18px; }
  .pdp__media { position: static; }
  .pdp__img { max-width: 440px; margin: 0 auto; }
  .packs__g { grid-template-columns: repeat(2, 1fr); }
  .ban { grid-template-columns: 1fr; padding: 22px; }
  .flist ul { columns: 1; }
  .fl { grid-template-columns: 1fr; }
  .ftiles { grid-template-columns: repeat(2, 1fr); }
  .ftr__top { grid-template-columns: 1fr 1fr; }
  .ftr__brand { grid-column: 1 / -1; }
  .sec { padding: 40px 0; }
  .sec__head { flex-wrap: wrap; align-items: flex-start; }
}
@media (max-width: 420px) {
  .card__t { font-size: 15.5px; }
  .card__d { display: none; }
  .fchips { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .hl { grid-template-columns: 1fr 1fr; }
  .ftr__top { grid-template-columns: 1fr; }
}

/* ---------------------------------------------------------------- flavour cards on a line page */
.fgrid { padding: 40px 0 46px; background: var(--band); border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }
.fgrid__head { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: 10px 24px; margin-bottom: 16px; }
.fgrid__opt { margin: 0; font-size: 14px; color: var(--muted); }
.fgrid__opt b { color: var(--ink); }
.fgrid__f { display: flex; flex-wrap: wrap; gap: 8px; margin: 0 0 22px; }
.fgrid__f button { min-height: 38px; padding: 0 15px; border: 1.5px solid var(--c, var(--line)); border-radius: 999px; background: var(--paper); color: var(--ink); font: 700 13px/1 var(--font); cursor: pointer; }
.fgrid__f button:hover { border-color: var(--indigo); }
.fgrid__f button.on { background: var(--indigo); border-color: var(--indigo); color: #fff; }
.fgrid__f .fgrid__ice { border-color: #9fd8ff; background: var(--sky-l); }
.fgrid__f .fgrid__ice.on { background: var(--sky); border-color: var(--sky); color: var(--indigo-d); }
.fgrid__g + .fgrid__g { margin-top: 28px; }
.fgrid__h { display: flex; align-items: center; gap: 10px; margin: 0 0 12px; font-size: 20px; text-transform: uppercase; letter-spacing: .03em; }
.fgrid__h::before { content: ''; width: 10px; height: 22px; border-radius: 3px; background: var(--c); }
.card__d--read { font-size: 13.5px; line-height: 1.5; color: var(--body); }
.card__ice { position: absolute; left: 10px; top: 10px; z-index: 2; padding: 3px 9px; border-radius: 999px; background: var(--sky-l); color: var(--indigo); font-size: 11px; font-weight: 800; letter-spacing: .04em; text-transform: uppercase; }
.card__more { display: block; margin-top: 8px; font-size: 12.5px; font-weight: 700; text-align: center; text-decoration: none; }
.card__more:hover { text-decoration: underline; }
.card[hidden] { display: none !important; }

/* the flavour chart rows carry their photo */
.fl a { grid-template-columns: 84px minmax(0, 1fr); align-items: center; gap: 12px; padding: 10px 12px 10px 10px; }
.fl__im { width: 84px; height: 84px; object-fit: contain; border-radius: 10px; background: var(--tile); mix-blend-mode: multiply; }
.fl__b { display: grid; gap: 2px; }
@media (max-width: 860px) {
  .fgrid { padding: 30px 0 34px; }
  .fgrid__f { flex-wrap: nowrap; overflow-x: auto; margin-right: calc(var(--gut) * -1); padding-right: var(--gut); scrollbar-width: none; }
  .fgrid__f::-webkit-scrollbar { display: none; }
  .fgrid__f button { flex: 0 0 auto; }
}
@media (max-width: 420px) {
  .card--f .card__d--read { display: block; font-size: 12.5px; }
}

/* ---------------------------------------------------------------- mix and match (7 Nov 2026):
   the offer under the pack buttons, over the flavour grid, in the cart and in the added bar */
.packs__mix { margin: 8px 0 0; padding: 8px 12px; border-radius: 10px; background: var(--sky-l); color: var(--indigo-d); font-size: 13px; line-height: 1.45; }
.packs__mix[hidden] { display: none; }
.fgrid__deal { margin: 0 0 16px; padding: 10px 14px; border-radius: 10px; background: var(--indigo); color: #fff; font-size: 14px; line-height: 1.45; }
.fgrid__deal b { margin-right: 6px; color: var(--sky); font-family: var(--head); text-transform: uppercase; letter-spacing: .06em; font-size: 13px; }
.fgrid__deal[hidden] { display: none; }
.cl__mix { margin: 14px 0 0; padding: 12px 14px; border: 1.5px solid #d4ebfb; border-radius: 12px; background: var(--sky-l); color: var(--indigo-d); font-size: 14px; line-height: 1.45; }
.cl__mix b { display: block; margin-bottom: 4px; font-size: 13px; text-transform: uppercase; letter-spacing: .06em; color: var(--sky-d); }
.cl__mix p { margin: 0; }
.cl__mix p + p { margin-top: 4px; }
.added__mix { margin-top: 4px; color: var(--sky) !important; font-weight: 600; }
.added__mix[hidden] { display: none !important; }

/* ---------------------------------------------------------------- what's in the box, set-up steps */
.inbox__l { margin: 10px 0 0; padding: 0; list-style: none; font-size: 14px; }
.inbox__l li { position: relative; padding: 8px 0 8px 22px; border-bottom: 1px solid var(--line); color: var(--ink); }
.inbox__l li:last-child { border-bottom: 0; }
.inbox__l li::before { content: ""; position: absolute; left: 2px; top: 15px; width: 9px; height: 9px; border-radius: 3px; background: var(--sky); }
.steps { margin: 12px 0 14px; padding: 0; list-style: none; counter-reset: st; }
.steps li { position: relative; margin: 0 0 12px; padding: 2px 0 0 46px; min-height: 34px; counter-increment: st; line-height: 1.55; }
.steps li::before { content: counter(st); position: absolute; left: 0; top: 0; width: 32px; height: 32px; border-radius: 50%; background: var(--indigo); color: #fff;
  font: 600 15px/32px var(--head); text-align: center; }
.inbox__s { margin: 8px 0 0; font-size: 13px; color: var(--muted); line-height: 1.45; }
/* multibuy: three buttons (Single, one set, two sets); the phone bar's row hides with them */
.packs .packs__g--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
@media (max-width: 560px) { .packs .packs__g--3 { grid-template-columns: 1fr; } }
.packs[hidden], .sbar__packs[hidden] { display: none !important; }

/* hayati-vapes.co.uk - engine components (cart, checkout, chat, search, phone bar, packs),
   drawn with this store's tokens; overrides for the pill-and-round look follow. */
/* after adding: what went in, and the two next steps */
.added {
  position: fixed; left: 12px; right: 12px; bottom: 12px; z-index: 90;
  max-width: 560px; margin: 0 auto; padding: 14px 48px 14px 16px;
  background: var(--ink); color: #fff; border-radius: 10px;
  box-shadow: 0 12px 34px rgba(0, 0, 0, .28);
  transform: translateY(150%); transition: transform .25s ease;
}
.added.on { transform: none; }
.added__t { display: flex; gap: 10px; align-items: flex-start; margin: 0 0 12px; font-size: 14px; line-height: 1.4; }
.added__t b { display: block; color: #fff; font-size: 15px; }
.added__t span span { display: block; color: #c9cdd2; }
.added__ok {
  flex: 0 0 26px; width: 26px; height: 26px; border-radius: 50%; background: #2e7d4f;
  display: inline-flex; align-items: center; justify-content: center; font-size: 14px;
}
.added__a { display: flex; gap: 10px; }
.added__a .btn { flex: 1 1 0; min-height: 46px; }
.added__a .btn:not(.btn--fill) { background: transparent; color: #fff; border-color: rgba(255, 255, 255, .55); }
.added__a .btn--fill { background: #fff; color: var(--ink); border-color: #fff; }
.added__x {
  position: absolute; top: 2px; right: 2px; width: 44px; height: 44px;
  background: none; border: 0; color: #fff; font-size: 26px; line-height: 1; cursor: pointer;
}

/* phone: Add to cart fixed to the bottom while the real button is out of view */
.sbar { display: none; }
@media (max-width: 900px) {
  .sbar {
    display: flex; position: fixed; left: 0; right: 0; bottom: 0; z-index: 80;
    align-items: center; gap: 12px; padding: 10px var(--gut) calc(10px + env(safe-area-inset-bottom));
    background: var(--paper); border-top: 1px solid var(--line); box-shadow: 0 -6px 20px rgba(0, 0, 0, .08);
  }
  .sbar[hidden], body.has-added .sbar, body.nav-open .sbar { display: none; }
  body.nav-open .chat { display: none; }
  .sbar__t { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; }
  .sbar__t b { font-size: 13.5px; color: var(--ink); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  .sbar__t span { font-size: 15px; font-weight: 700; color: var(--sale); margin-top: 2px; }
  .sbar__t small { font-size: 12.5px; color: var(--muted); }
  .sbar--total .sbar__t span { font-size: 19px; margin-top: 0; }
  /* 16px, or iPhone zooms the whole page when it opens */
  .sbar__sel {
    width: 100%; min-width: 0; height: 40px; padding: 0 8px; font-size: 16px; color: var(--ink);
    background: var(--paper); border: 1px solid var(--ink); border-radius: var(--r);
  }
  .sbar .btn { flex: 0 0 auto; min-height: 48px; padding: 0 22px; font-size: 15px; }
  .sbar--buy { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 8px 12px; align-items: center; }
  .sbar--buy[hidden] { display: none; }
  .sbar__pick { min-width: 0; }
  .sbar__pick b { display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; overflow: hidden; font-size: 13px; line-height: 1.25; color: var(--ink); }
  .sbar__pr { font-size: 16px; font-weight: 700; color: var(--sale); white-space: nowrap; text-align: right; }
  .sbar__packs { display: flex; align-items: center; gap: 8px; min-width: 0; }
  .sbar__pl { font-size: 12px; font-weight: 600; color: var(--muted); }
  .sbar__packs label { display: inline-flex; align-items: center; gap: 3px; min-height: 40px; font-size: 13.5px; font-weight: 600; white-space: nowrap; color: var(--ink); }
  .sbar__packs input { margin: 0; width: 15px; height: 15px; accent-color: var(--ink); }
  body.has-sbar { padding-bottom: 124px; }
  /* the bar carries the total and the button on a phone, so they do not appear twice */
  .cl__sum .btn--buy, .ck__form .btn--buy { display: none; }
}

/* the bag: one block per line, 44px controls, Checkout full width on a phone */
.cls { border-top: 1px solid var(--line); margin-top: 10px; }
.cl {
  display: grid; grid-template-columns: 110px minmax(0, 1fr) auto; gap: 8px 14px;
  padding: 16px 0; border-bottom: 1px solid var(--line); align-items: start;
}
.cl__img { grid-row: span 2; width: 110px; height: 110px; object-fit: contain; background: var(--tile); border-radius: 6px; }
.cl__pk { display: block; margin-top: 3px; font-size: 12.5px; font-weight: 600; color: var(--sale); }
.cl > .cl__q { grid-column: 2 / -1; }
.cl__n { display: block; color: var(--ink); font-size: 15px; }
.cl__m { display: block; color: var(--muted); font-size: 13px; margin: 2px 0 0; }
.cl__q { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.qb {
  width: 44px; height: 44px; border: 1px solid var(--line); border-radius: var(--r);
  background: var(--paper); color: var(--ink); font-size: 18px; cursor: pointer;
}
.qb:hover { border-color: var(--ink); }
.qb__n { min-width: 30px; text-align: center; font-weight: 600; color: var(--ink); }
.cl__rm {
  margin-left: 2px; min-height: 44px; padding: 0 6px; background: none; border: 0;
  font: inherit; font-size: 13.5px; color: var(--body); text-decoration: underline; cursor: pointer;
}
.cl__p { color: var(--ink); font-size: 15px; white-space: nowrap; }
.cl__sum { display: flex; flex-direction: column; align-items: flex-end; gap: 12px; margin-top: 18px; }
.cl__sum p { font-size: 18px; margin: 0; color: var(--ink); }
.cl__sum .cl__ship { font-size: 15px; color: var(--body); }
.cl__sum .cl__tot { font-size: 20px; }
.cl__sum .btn--buy { flex: 0 0 auto; width: 100%; max-width: 360px; }
.cl__more { font-size: 14px; color: var(--ink); text-decoration: underline; padding: 10px 0; }
@media (max-width: 600px) {
  .cl__sum { align-items: stretch; }
  .cl__sum p { text-align: right; }
  .cl__sum .btn--buy { max-width: none; }
  .cl__more { text-align: center; }
}

/* ================================================================ checkout: the order preview */
.ck { display: grid; grid-template-columns: minmax(0, 1fr) 400px; gap: 40px; align-items: start; }
.ck__form { grid-column: 1; grid-row: 1; max-width: 600px; }
.ck__sum {
  grid-column: 2; grid-row: 1; position: sticky; top: 84px;
  background: var(--band); border: 1px solid var(--line); border-radius: var(--rc); padding: 18px;
}
.ck__sh { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; margin-bottom: 12px; }
.ck__sh h2 { font-size: 17px; margin: 0; color: var(--ink); }
.ck__sh h2 span { font-size: 13px; font-weight: 400; color: var(--muted); margin-left: 6px; }
.ck__sh a { font-size: 13.5px; color: var(--ink); text-decoration: underline; }
.ck__ls { display: grid; gap: 12px; padding-bottom: 14px; border-bottom: 1px solid var(--line); }
.ck__l { display: grid; grid-template-columns: 96px minmax(0, 1fr) auto; gap: 8px 12px; align-items: start; }
.ck__l .cl__q { grid-column: 2 / -1; gap: 4px; }
.ck__pi { grid-row: span 2; position: relative; width: 96px; height: 96px; background: #fff; border-radius: 6px; border: 1px solid var(--line); }
.ck__pi img { width: 100%; height: 100%; object-fit: contain; padding: 4px; mix-blend-mode: multiply; }
.ck__q {
  position: absolute; top: -8px; right: -8px; min-width: 22px; height: 22px; padding: 0 6px; border-radius: 11px;
  background: var(--ink); color: #fff; font-size: 12px; line-height: 22px; text-align: center;
}
.ck__n { font-size: 14.5px; color: var(--ink); line-height: 1.35; }
.ck__n small { display: block; font-size: 11px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--muted); }
.ck__lp { font-size: 14.5px; font-weight: 600; color: var(--ink); white-space: nowrap; }
.ck__t { margin: 12px 0 0; display: grid; gap: 6px; }
.ck__t div { display: flex; justify-content: space-between; font-size: 14px; color: var(--body); }
.ck__t dd { margin: 0; color: var(--ink); }
.ck__t .ck__tt { margin-top: 6px; padding-top: 10px; border-top: 1px solid var(--line); font-size: 18px; font-weight: 700; color: var(--ink); }
.ck__free { margin: 10px 0 0; font-size: 13px; color: var(--muted); }
@media (max-width: 900px) {
  .ck { grid-template-columns: minmax(0, 1fr); gap: 18px; }
  .ck__sum { grid-column: 1; grid-row: 1; position: static; }
  .ck__form { grid-column: 1; grid-row: 2; }
}

/* ================================================================ live chat bubble (23 Oct 2026) */
.chat { position: fixed; right: 16px; bottom: 16px; z-index: 85; }
.chat__b {
  position: relative; width: 56px; height: 56px; border-radius: 50%; border: 0; cursor: pointer;
  background: var(--ink); color: #fff; display: inline-flex; align-items: center; justify-content: center;
  box-shadow: 0 8px 24px rgba(0, 0, 0, .25);
}
.chat__n { position: absolute; top: -2px; right: -2px; min-width: 20px; height: 20px; border-radius: 10px; background: var(--sale); color: #fff; font-size: 11px; font-weight: 700; line-height: 20px; }
.chat__p {
  position: absolute; right: 0; bottom: 68px; width: min(360px, calc(100vw - 32px)); height: min(480px, calc(100vh - 140px));
  display: flex; flex-direction: column; background: var(--paper); border: 1px solid var(--line); border-radius: 12px;
  box-shadow: 0 16px 40px rgba(0, 0, 0, .2); overflow: hidden;
}
.chat__p[hidden] { display: none; }
.chat__h { display: flex; justify-content: space-between; align-items: center; padding: 12px 14px; background: var(--ink); color: #fff; }
.chat__h button { width: 36px; height: 36px; border: 0; background: none; color: #fff; font-size: 24px; cursor: pointer; }
.chat__m { flex: 1 1 auto; overflow-y: auto; padding: 12px; display: flex; flex-direction: column; gap: 8px; background: var(--band); }
.chat__msg { max-width: 82%; padding: 9px 12px; border-radius: 12px; font-size: 14px; line-height: 1.45; white-space: pre-wrap; word-wrap: break-word; }
.chat__msg--a { align-self: flex-start; background: #fff; border: 1px solid var(--line); color: var(--ink); }
.chat__msg--v { align-self: flex-end; background: var(--ink); color: #fff; }
.chat__f { display: flex; gap: 8px; padding: 10px; border-top: 1px solid var(--line); }
.chat__f textarea { flex: 1 1 auto; min-height: 44px; max-height: 120px; resize: none; padding: 10px 12px; border: 1px solid var(--line); border-radius: 8px; font: inherit; font-size: 16px; }
.chat__f .btn { flex: 0 0 auto; }
body.has-added .chat { display: none; }
@media (max-width: 900px) {
  body.has-sbar .chat { bottom: 132px; }
  .chat__b { width: 52px; height: 52px; }
}

/* ---------------------------------------------------------------- search
   .srch: the header icon (a plain link to /search/). .sbox: the as-you-type box shop.js opens.
   .srp: the /search/ results page, rendered as HTML by php/inc/search.php. */
.sbox { position: fixed; inset: 0; z-index: 95; display: none; background: rgba(0, 0, 0, .45);
  padding: 70px var(--gut) 20px; }
.sbox.on { display: block; }
body.has-sbox { overflow: hidden; }
.sbox__in { max-width: 680px; margin: 0 auto; background: var(--paper); border-radius: var(--rc);
  box-shadow: 0 18px 50px rgba(0, 0, 0, .25); overflow: hidden; }
.sbox__f { display: flex; align-items: center; border-bottom: 1px solid var(--line); }
.sbox__f input { flex: 1 1 auto; min-width: 0; height: 58px; border: 0; padding: 0 18px; font: inherit;
  font-size: 17px; color: var(--ink); background: transparent; outline: none; }
.sbox__f input::-webkit-search-cancel-button { display: none; }
.sbox__x { flex: 0 0 auto; width: 52px; height: 58px; border: 0; background: none; font-size: 28px;
  line-height: 1; color: var(--muted); cursor: pointer; }
.sbox__r { max-height: calc(100vh - 190px); max-height: calc(100dvh - 190px); overflow-y: auto; }
.sbox__r:empty { display: none; }
.sbox__a { display: flex; align-items: center; gap: 14px; padding: 10px 18px; color: var(--ink);
  border-bottom: 1px solid var(--band); }
.sbox__a:hover, .sbox__a:focus { background: var(--band); text-decoration: none; }
.sbox__a img, .sbox__ic { flex: 0 0 76px; width: 76px; height: 76px; border-radius: var(--r);
  background: var(--tile); object-fit: contain; }
.sbox__a span:not(.sbox__ic) { flex: 1 1 auto; min-width: 0; }
/* a group or guide has no photo: a small grid mark on the tile instead of an empty square */
.sbox__ic, .srp__ic { display: block; background: var(--tile) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%231d1f21' stroke-width='1.6'%3E%3Crect x='4' y='4' width='6.5' height='6.5' rx='1'/%3E%3Crect x='13.5' y='4' width='6.5' height='6.5' rx='1'/%3E%3Crect x='4' y='13.5' width='6.5' height='6.5' rx='1'/%3E%3Crect x='13.5' y='13.5' width='6.5' height='6.5' rx='1'/%3E%3C/svg%3E") center / 22px no-repeat; }
.sbox__a small { display: block; font-size: 11.5px; letter-spacing: .04em; text-transform: uppercase;
  color: var(--muted); }
.sbox__a b { display: block; font-size: 15px; font-weight: 600; white-space: nowrap; overflow: hidden;
  text-overflow: ellipsis; }
.sbox__a em { flex: 0 0 auto; font-style: normal; font-weight: 700; color: var(--sale); font-size: 14px; }
.sbox__all { display: block; padding: 14px 18px; font-weight: 600; color: var(--ink); background: var(--band);
  position: sticky; bottom: 0; border-top: 1px solid var(--line); }
.sbox__none { margin: 0; padding: 18px; color: var(--muted); }
@media (max-width: 640px) {
  .sbox { padding: 0; background: var(--paper); }
  .sbox__in { max-width: none; border-radius: 0; box-shadow: none; height: 100%; display: flex;
    flex-direction: column; }
  .sbox__r { max-height: none; flex: 1 1 auto; }
}

.srp { padding-top: 34px; padding-bottom: 60px; }
.srp__h { font-size: 32px; line-height: 1.15; font-weight: 700; color: var(--ink); margin: 0 0 16px;
  overflow-wrap: anywhere; }
.srp__f { display: flex; gap: 10px; max-width: 620px; margin: 0 0 12px; }
.srp__f input { flex: 1 1 auto; min-width: 0; height: 48px; padding: 0 14px; font: inherit; font-size: 16px;
  color: var(--ink); border: 1px solid var(--ink); border-radius: var(--r); background: var(--paper); }
.srp__f .btn { flex: 0 0 auto; height: 48px; }
.srp__n { color: var(--muted); margin: 0 0 22px; }
.srp__l { list-style: none; margin: 0 0 30px; padding: 0; display: grid;
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 280px), 1fr)); gap: 10px; }
.srp__a { display: flex; align-items: center; gap: 14px; padding: 10px 12px; border: 1px solid var(--line);
  border-radius: var(--rc); color: var(--ink); height: 100%; }
.srp__a:hover { border-color: var(--ink); text-decoration: none; }
.srp__a img, .srp__ic { flex: 0 0 96px; width: 96px; height: 96px; border-radius: var(--r);
  background: var(--tile); object-fit: contain; }
.srp__a span { min-width: 0; }
.srp__a small { display: block; font-size: 11.5px; letter-spacing: .04em; text-transform: uppercase; color: var(--muted); }
.srp__a b { display: block; font-size: 15.5px; font-weight: 600; }
.srp__a em { display: block; font-style: normal; font-size: 13.5px; color: var(--muted); margin-top: 2px; }
@media (max-width: 640px) { .srp__h { font-size: 25px; } .srp { padding-top: 22px; } }
.srp__g { margin-bottom: 10px; }
.srp__more { margin: 40px 0 14px; }

/* ---------------------------------------------------------------- chat: who is writing
   A new visitor opening the chat gives a first name and an email before the first message
   (owner, 24 Oct 2026: no pop-up; the chat asks). It sits where the message box will be. */
.chat__id { padding: 12px 14px 14px; border-top: 1px solid var(--line); background: var(--paper); }
.chat__id[hidden], .chat__f[hidden] { display: none; }
.chat__id p { margin: 0 0 10px; font-size: 13.5px; line-height: 1.45; color: var(--muted); }
.chat__id label { display: block; margin: 0 0 8px; font-size: 12.5px; font-weight: 600; color: var(--ink); }
.chat__id input { display: block; width: 100%; height: 44px; margin-top: 4px; padding: 0 12px; font: inherit; font-size: 16px;
  color: var(--ink); border: 1px solid #c9ccd1; border-radius: 8px; background: var(--paper); }
.chat__id input:focus { outline: 2px solid var(--ink); outline-offset: -1px; border-color: var(--ink); }
.chat__id .btn { width: 100%; height: 46px; margin-top: 4px; }
.chat__err { margin: 0 0 8px; font-size: 13px; color: #c0392b; }

/* ---------------------------------------------------------------- what stands out
/* every control takes the site font too: browsers default form fields to their own */
button, input, select, textarea { font-family: var(--font); }

/* ---------------------------------------------------------------- pack pricing: real radios,
   directly under the flavour or device selector */
.packs { border: 0; margin: 18px 0 0; padding: 0; min-width: 0; }
.packs[hidden], .pack[hidden] { display: none; }
.packs legend { padding: 0; }
.packs__g { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
.pack {
  display: grid; grid-template-columns: auto minmax(0, 1fr) auto; gap: 1px 10px; align-items: center;
  min-height: 56px; padding: 8px 12px; border: 1.5px solid var(--line); border-radius: var(--r); cursor: pointer;
}
.pack:hover { border-color: var(--ink); }
.pack:has(input:checked) { border-color: var(--ink); box-shadow: inset 0 0 0 1px var(--ink); }
.pack input { grid-row: span 2; margin: 0; width: 18px; height: 18px; accent-color: var(--ink); }
.pick input { accent-color: var(--ink); }
.pack__b { display: contents; }
.pack__b b { grid-column: 2; grid-row: 1; font-size: 14.5px; color: var(--ink); }
.pack__b small { grid-column: 2 / -1; grid-row: 2; font-size: 12px; color: var(--sale); font-weight: 600; line-height: 1.3; }
.pack:first-child .pack__b small { color: var(--muted); font-weight: 400; }
.pack__p { grid-column: 3; grid-row: 1; font-size: 14.5px; font-weight: 700; color: var(--ink); white-space: nowrap; }
@media (max-width: 900px) {
  .pack { padding: 8px 10px; column-gap: 8px; }
  .pack__b small { font-size: 11.5px; white-space: nowrap; }
}

/* ---------------------------------------------------------------- the chat: products and files */
.chat__f { align-items: flex-end; gap: 4px; padding: 8px; }
.chat__f textarea { margin: 0 4px; }
.chat__i { flex: 0 0 auto; display: inline-flex; align-items: center; justify-content: center; width: 40px; height: 44px; margin: 0; padding: 0; border: 0; background: none; color: var(--ink); cursor: pointer; }
.chat__i:hover { opacity: .65; }
.chat__msg--img { padding: 4px; }
.chat__msg--img img { display: block; max-width: 100%; max-height: 220px; border-radius: 9px; background: #fff; }
.chat__msg a { color: inherit; text-decoration: underline; word-break: break-word; }
.chat__msg--img a { text-decoration: none; }
.chat__msg--busy { opacity: .6; }
.chat__card { display: grid; grid-template-columns: 84px minmax(0, 1fr); gap: 10px; width: 92%; padding: 8px; background: #fff; border: 1px solid var(--line); border-radius: 12px; color: var(--ink); }
.chat__card.chat__msg--a { align-self: flex-start; }
.chat__card.chat__msg--v { align-self: flex-end; background: #fff; color: var(--ink); }
.chat__pimg img { display: block; width: 84px; height: 84px; object-fit: contain; }
.chat__pb a { display: block; color: var(--ink); text-decoration: none; }
.chat__pb b { display: block; font-size: 14px; line-height: 1.3; }
.chat__pb small { display: block; font-size: 12px; line-height: 1.3; color: var(--muted); }
.chat__pb span { display: block; margin-top: 3px; font-size: 14px; font-weight: 700; color: var(--sale); }
.chat__pb button { width: 100%; min-height: 36px; margin-top: 6px; border: 1px solid var(--ink); border-radius: var(--r); background: var(--ink); color: #fff; font: inherit; font-size: 13px; font-weight: 600; cursor: pointer; }
.chat__pb em { display: block; margin-top: 4px; font-style: normal; font-size: 12.5px; color: var(--muted); }
.chat__pick { position: absolute; inset: 56px 0 0; z-index: 2; display: flex; flex-direction: column; gap: 8px; padding: 10px; background: var(--paper); }
.chat__pick[hidden] { display: none; }
.chat__ph { display: flex; justify-content: space-between; align-items: center; color: var(--ink); }
.chat__ph button { width: 36px; height: 36px; border: 0; background: none; font-size: 24px; color: var(--ink); cursor: pointer; }
.chat__pick input { width: 100%; height: 44px; padding: 0 12px; border: 1px solid var(--line); border-radius: 8px; font: inherit; font-size: 16px; }
.chat__pick > * { flex: 0 0 auto; }
.chat__pick > .chat__pl { flex: 1 1 0; min-height: 0; overflow-y: auto; }
.chat__pl p { margin: 10px 2px; color: var(--muted); }
.chat__pi { display: grid; grid-template-columns: 64px minmax(0, 1fr); gap: 10px; align-items: center; width: 100%; padding: 6px; border: 0; border-bottom: 1px solid #ececec; background: none; font: inherit; text-align: left; cursor: pointer; }
.chat__pi img { display: block; width: 64px; height: 64px; object-fit: contain; }
.chat__pi b { display: block; font-size: 14px; line-height: 1.3; color: var(--ink); }
.chat__pi small { display: block; font-size: 12px; line-height: 1.3; color: var(--muted); }
.chat__pi i { font-style: normal; font-size: 13.5px; font-weight: 700; color: var(--sale); }

/* ---------------------------------------------------------------- delivery options at checkout */
.ck__ship { display: flex; align-items: center; gap: 10px; min-height: 52px; padding: 10px 12px; margin-bottom: 8px; border: 1px solid #dedede; border-radius: 6px; cursor: pointer; }
.ck__ship:has(input:checked) { border-color: var(--ink); box-shadow: inset 0 0 0 1px var(--ink); }
.ck__ship input { flex: 0 0 auto; width: 18px; height: 18px; margin: 0; accent-color: var(--ink); }
.ck__shipn { flex: 1 1 auto; min-width: 0; }
.ck__shipn b { display: block; color: var(--ink); }
.ck__shipn small { display: block; font-size: 12.5px; color: var(--muted); }
.ck__shipp { flex: 0 0 auto; font-weight: 700; color: var(--ink); }

/* ---------------------------------------------------------------- store overrides */
.pack, .ck__ship, .cl__img, .ck__pi, .sbox__a img, .sbox__ic, .srp__a img, .srp__ic, .chat__id input, .chat__pick input, .chat__f textarea { border-radius: 14px; }
.pack { min-height: 60px; border-color: var(--line); }
.pack:has(input:checked) { border-color: var(--teal-d); background: var(--teal-l); box-shadow: inset 0 0 0 1px var(--teal-d); }
.pack input { accent-color: var(--teal-d); }
.pack__b small { color: var(--teal-d); }
.qb { border-radius: 50%; }
.qb:hover { border-color: var(--teal-d); }
.added { border-radius: 22px; }
.added__ok { background: var(--teal); color: var(--ink); }
.chat__b { background: var(--teal); color: var(--ink); box-shadow: 0 10px 28px -6px rgba(66, 191, 176, .75); }
.chat__p { border-radius: 22px; }
.chat__h { background: var(--ink); }
.chat__msg { border-radius: 16px; }
.sbar { backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); background: rgba(255, 255, 255, .95); }
.sbar .btn, .sbar__packs label { border-radius: var(--r); }
.sbar .btn--fill, .sbar .btn--buy { background: var(--teal); border-color: var(--teal); color: var(--ink); }
.ck__sum { border-radius: 22px; background: var(--band); border-color: transparent; }
.ck__q { background: var(--teal); color: var(--ink); }
#cart > h1, #checkout > h1 { font: 800 clamp(30px, 3.4vw, 44px)/1.06 var(--font) !important; letter-spacing: -.03em; color: var(--ink) !important; margin: 0 0 18px; }
#cart, #checkout { padding: 40px 0 80px !important; }
.ck__h { font-size: 18px; font-weight: 700; color: var(--ink); margin: 28px 0 4px; }
.ck__lab { display: block; margin: 14px 0 6px; font-size: 14px; font-weight: 600; color: var(--ink); }
.ck__in { width: 100%; height: 52px; padding: 0 16px; border: 1.5px solid var(--line); border-radius: 14px; font: 16px var(--font); color: var(--ink); background: #fff; }
.ck__in:focus { outline: none; border-color: var(--teal-d); box-shadow: 0 0 0 4px var(--teal-l); }
.ck__in:user-invalid { border-color: #d9534f; }
select.ck__in { -webkit-appearance: none; appearance: none; background: #fff url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12'%3E%3Cpath d='M3 4.5l3 3 3-3' fill='none' stroke='%2314262A' stroke-width='1.6'/%3E%3C/svg%3E") right 16px center / 12px no-repeat; }
.ck__rail.is-under { opacity: .5; }
.ck__ship:has(input:checked) { border-color: var(--teal-d); background: var(--teal-l); box-shadow: inset 0 0 0 1px var(--teal-d); }
.ck__ship input { accent-color: var(--teal-d); }
.ck__form .btn--buy { background: var(--teal); border-color: var(--teal); color: var(--ink); min-height: 56px; font-size: 17px; font-weight: 700; }
.ck__pay { border: 1.5px solid var(--line); border-radius: 18px; padding: 18px; margin: 18px 0; background: var(--band); }
.cl { grid-template-columns: 110px minmax(0, 1fr) auto; }
.cl__img { background: var(--tile); mix-blend-mode: multiply; }
.cl__pk { color: var(--teal-d); }
.cl__sum .btn--buy { background: var(--teal); border-color: var(--teal); color: var(--ink); }
.sbox__a em { color: var(--teal-d); }