/* =========================================================================
   Devland Spaza: theme styles

   Palette: the Devland logo only.
     red      #ED1E24  the container, big fills (never behind small text)
     red UI   #D7141A  buttons, red boards with text (white 5.1:1)
     blue     #005887  the sky, page heads, links (white 7.7:1)
     green    #006A3E  the flag; "in your quote", success (white 6.7:1)
     yellow   #FFF300  shelf tickets, highlights; always with ink text
     ink      #111111  text, footer; galvanised #ECEEED and white grounds
   Type: Big Shoulders Display (signwriter caps), Hanken Grotesk (text).
   Shapes: square-cut. Tickets carry a clipped corner; boards end on a
   shelf-edge strip; the till slip has torn edges.
   ========================================================================= */

@font-face { font-family: "Big Shoulders Display"; src: url("../fonts/big-shoulders.woff2") format("woff2"); font-weight: 100 900; font-display: swap; }
@font-face { font-family: "Hanken Grotesk"; src: url("../fonts/hanken-grotesk.woff2") format("woff2"); font-weight: 100 900; font-display: swap; }

:root {
	--red: #ed1e24;
	--red-ui: #d7141a;
	--red-dk: #b01015;
	--red-on-ink: #ff8a8d;
	--blue: #005887;
	--blue-dk: #00466c;
	--blue-ink: #003451;
	--blue-soft: #cfe0ea;
	--green: #006a3e;
	--green-dk: #00532f;
	--green-soft: #e1f0e8;
	--yellow: #fff300;
	--ink: #111111;
	--ink-2: #1b1d1c;
	--ink-3: #2a2d2c;
	--on-ink: #ffffff;
	--on-ink-2: #b9c0bd;
	--steel: #eceeed;
	--steel-2: #dfe3e1;
	--line: #d0d6d3;
	--line-2: #a9b1ae;
	--muted: #4b5250;
	--white: #ffffff;

	--fd: "Big Shoulders Display", "Arial Narrow", ui-sans-serif, sans-serif;
	--fb: "Hanken Grotesk", ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif;
	--wrap: 1320px;
	--gut: clamp(18px, 4vw, 44px);
	--sec: clamp(64px, 8vw, 120px);
	--hdr: 64px;
	--top: 0px;
	--ease: cubic-bezier(.2, .7, .1, 1);
	--ease-io: cubic-bezier(.7, 0, .2, 1);
	--r: 2px;
}
@media (min-width: 960px) { :root { --hdr: 76px; } }

/* ---------- Base ---------- */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; overflow-x: clip; scroll-padding-top: calc(var(--hdr) + 16px); }
html.is-locked { overflow: hidden; }
body.dvs { margin: 0; font-family: var(--fb); font-size: 16px; line-height: 1.6; color: var(--ink); background: var(--white); overflow-x: clip; -webkit-font-smoothing: antialiased; font-variant-numeric: lining-nums; caret-color: var(--red-ui); }
@media (min-width: 960px) { body.dvs { font-size: 17px; } }
body.admin-bar { --top: 32px; }
@media (max-width: 782px) { body.admin-bar { --top: 46px; } }
:where(.dvs) img, :where(.dvs) svg, :where(.dvs) video, :where(.dvs) canvas { max-width: 100%; }
:where(.dvs) img { height: auto; }
:where(.dvs) a { color: var(--blue); text-decoration-thickness: 1px; text-underline-offset: .2em; }
:where(.dvs) a:hover { color: var(--red-ui); }
:where(.dvs) button, :where(.dvs) input, :where(.dvs) select, :where(.dvs) textarea { font: inherit; color: inherit; }
:where(.dvs) button { cursor: pointer; }
.dvs :focus-visible { outline: 3px solid var(--blue); outline-offset: 2px; }
.dvs .on-dark :focus-visible, .hdr.is-over :focus-visible, .phead :focus-visible, .hero :focus-visible, .shop :focus-visible, .ftr :focus-visible, .mnav :focus-visible, .sec--ink :focus-visible, .sband :focus-visible { outline-color: var(--yellow); }
::selection { background: var(--yellow); color: var(--ink); }
html { scrollbar-color: var(--ink-3) var(--steel); }
::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-track { background: var(--steel); }
::-webkit-scrollbar-thumb { background: var(--ink-3); }
[hidden] { display: none !important; }
.sr, .screen-reader-text { position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
.skip { position: fixed; left: 12px; top: -80px; z-index: 999; padding: 10px 16px; background: var(--yellow); color: var(--ink) !important; font-weight: 800; text-decoration: none; }
.skip:focus { top: calc(var(--top) + 10px); }
.hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.wrap { width: 100%; max-width: calc(var(--wrap) + 2 * var(--gut)); margin: 0 auto; padding: 0 var(--gut); }
.ic { width: 20px; height: 20px; flex: none; display: inline-block; vertical-align: middle; }
.main { display: block; }
.note { color: var(--muted); font-size: 15px; }
.lead { font-size: clamp(1.06rem, 1.4vw, 1.25rem); line-height: 1.55; max-width: 60ch; }

/* ---------- Type ---------- */
:where(.dvs) :where(h1, h2, h3, h4) { margin: 0 0 .5em; line-height: .98; }
.h-xl, .h-l, .phead__title, .sent__title, .form__title, .shelves__z, .faq__g, .serve__list h3, .scard__name, .prod__name, .qd__title, .mnav__list a { font-family: var(--fd); font-weight: 850; text-transform: uppercase; letter-spacing: .005em; text-wrap: balance; }
.h-xl { font-size: clamp(2.5rem, 5.4vw, 4.6rem); line-height: .94; }
.h-l { font-size: clamp(1.9rem, 3.2vw, 2.7rem); line-height: .96; }
.h-xl em, .h-l em, .phead__title em { font-style: normal; color: var(--red-ui); }
.sec--ink .h-xl em, .sec--ink .h-l em, .phead__title em, .sband .h-xl em { color: var(--yellow); }
.entry { max-width: 72ch; }
.entry h2 { font-family: var(--fd); font-weight: 850; text-transform: uppercase; font-size: clamp(1.6rem, 2.6vw, 2.1rem); margin: 1.6em 0 .4em; line-height: 1; }
.entry h3 { font-weight: 800; font-size: 1.2rem; margin: 1.4em 0 .3em; }
.entry p, .entry ul, .entry ol { margin: 0 0 1em; }
.entry > :first-child { margin-top: 0; }

/* Shelf ticket */
.ticket { display: inline-flex; align-items: center; min-height: 26px; padding: 2px 10px 2px 9px; background: var(--yellow); color: var(--ink); font-family: var(--fb); font-size: 13px; font-weight: 800; line-height: 1.2; letter-spacing: .02em; text-transform: uppercase; white-space: nowrap; clip-path: polygon(0 0, 100% 0, 100% 100%, 8px 100%, 0 calc(100% - 8px)); }
.ticket--lg { min-height: 36px; padding: 4px 16px 4px 14px; font-size: 16px; clip-path: polygon(0 0, 100% 0, 100% 100%, 11px 100%, 0 calc(100% - 11px)); }

/* ---------- Buttons ---------- */
.btn { --b: var(--red-ui); --t: var(--white); --bd: var(--b); position: relative; display: inline-flex; align-items: center; justify-content: center; gap: 10px; min-height: 48px; padding: 10px 22px; border: 2px solid var(--bd); border-radius: var(--r); background: var(--b); color: var(--t) !important; font-family: var(--fd); font-size: 1.15rem; font-weight: 800; letter-spacing: .03em; line-height: 1; text-transform: uppercase; text-decoration: none; white-space: nowrap; transition: background-color .2s, border-color .2s, color .2s, transform .15s var(--ease); -webkit-tap-highlight-color: transparent; }
.btn .ic { width: 20px; height: 20px; transition: transform .25s var(--ease); }
.btn:hover { --b: var(--red-dk); color: var(--t); }
.btn:hover .ic:last-child:not(:first-child) { transform: translateX(3px); }
.btn:active { transform: translateY(1px) scale(.99); }
.btn[disabled] { opacity: .55; cursor: not-allowed; }
.btn--lg { min-height: 56px; padding: 12px 28px; font-size: 1.3rem; }
.btn--block { width: 100%; }
.btn--ink { --b: var(--ink); }
.btn--ink:hover { --b: var(--ink-3); }
.btn--white { --b: var(--white); --t: var(--ink); }
.btn--white:hover { --b: var(--yellow); --t: var(--ink); }
.btn--yellow { --b: var(--yellow); --t: var(--ink); }
.btn--yellow:hover { --b: var(--white); --t: var(--ink); }
.btn--green { --b: var(--green); }
.btn--green:hover { --b: var(--green-dk); }
.btn--line { --b: transparent; --t: var(--ink); --bd: var(--ink); }
.btn--line:hover { --b: var(--ink); --t: var(--white); --bd: var(--ink); }
.btn--line-light { --b: transparent; --t: var(--white); --bd: rgba(255, 255, 255, .7); }
.btn--line-light:hover { --b: var(--white); --t: var(--ink); --bd: var(--white); }
.btn--text { --b: transparent; --bd: transparent; --t: var(--ink); min-height: 40px; padding: 6px 4px; font-family: var(--fb); font-size: 15px; font-weight: 700; text-transform: none; letter-spacing: 0; }
.btn--text:hover { --b: transparent; --t: var(--red-ui); }
.btn.is-busy { color: transparent !important; }
.btn.is-busy::after { content: ""; position: absolute; width: 22px; height: 22px; border: 3px solid currentColor; border-color: var(--white) var(--white) transparent; border-radius: 50%; animation: dvs-spin .7s linear infinite; }
@keyframes dvs-spin { to { transform: rotate(360deg); } }
.rnd { display: inline-grid; place-items: center; width: 48px; height: 48px; border: 2px solid var(--ink); background: var(--white); color: var(--ink); border-radius: var(--r); transition: background-color .2s, color .2s; }
.rnd:hover { background: var(--ink); color: var(--white); }
.rnd[disabled] { opacity: .3; cursor: default; }

/* Chips */
.chips { display: flex; flex-wrap: wrap; gap: 8px; }
.chip { position: relative; display: inline-flex; cursor: pointer; }
.chip input { position: absolute; opacity: 0; inset: 0; margin: 0; cursor: pointer; }
.chip > span, .chip--btn, .chip--link { display: inline-flex; align-items: center; gap: 6px; min-height: 42px; padding: 8px 14px; border: 1.5px solid var(--line-2); border-radius: var(--r); background: var(--white); color: var(--ink); font-size: 15px; font-weight: 700; line-height: 1.2; text-decoration: none; transition: border-color .15s, background-color .15s, color .15s; }
.chip--btn, .chip--link { cursor: pointer; }
.chip > span small, .chip--btn small { font-weight: 600; color: var(--muted); }
.chip:hover > span, .chip--btn:hover, .chip--link:hover { border-color: var(--ink); color: var(--ink); }
.chip input:checked + span, .chip--btn.is-on { border-color: var(--ink); background: var(--ink); color: var(--white); }
.chip input:checked + span small, .chip--btn.is-on small { color: var(--on-ink-2); }
.chip input:focus-visible + span { outline: 3px solid var(--blue); outline-offset: 2px; }
.chip--pack > span { flex-direction: column; align-items: flex-start; gap: 0; min-height: 52px; padding: 7px 14px; }
.chip--pack b { font-size: 15px; }
.chip--pack small { font-size: 13px; }

/* Quantity */
.qty { display: inline-flex; align-items: stretch; height: 52px; border: 2px solid var(--ink); border-radius: var(--r); background: var(--white); }
.qty button { width: 44px; border: 0; background: transparent; color: var(--ink); display: grid; place-items: center; font-size: 20px; font-weight: 700; }
.qty button:hover { background: var(--steel); }
.qty input { width: 64px; border: 0; border-left: 1px solid var(--line); border-right: 1px solid var(--line); text-align: center; font-weight: 800; font-size: 18px; -moz-appearance: textfield; background: var(--white); }
.qty input::-webkit-outer-spin-button, .qty input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
.qty--s { height: 38px; border-width: 1.5px; }
.qty--s button { width: 34px; font-size: 17px; }
.qty--s input { width: 46px; font-size: 15px; }

/* ---------- Header ---------- */
.hdr { position: fixed; top: var(--top); left: 0; right: 0; z-index: 60; height: var(--hdr); color: var(--ink); background: var(--white); border-bottom: 1px solid var(--line); transition: background-color .3s, border-color .3s, color .3s, transform .35s var(--ease); }
.hdr.is-over { background: transparent; border-color: transparent; color: var(--white); }
.hdr.is-over .hdr__count.is-zero { background: rgba(17, 17, 17, .18); }
.hdr__in { height: 100%; display: flex; align-items: center; gap: 18px; }
.hdr__logo { display: block; flex: none; margin-right: auto; }
.hdr__logo img { display: block; width: auto; height: 40px; }
@media (min-width: 960px) { .hdr__logo img { height: 50px; } }
.hdr__nav { display: none; }
@media (min-width: 1080px) {
	.hdr__nav { display: block; margin-right: 8px; }
	.nav { display: flex; gap: clamp(14px, 2vw, 30px); margin: 0; padding: 0; list-style: none; }
	.nav a { position: relative; display: block; padding: 8px 0; color: inherit !important; font-family: var(--fd); font-weight: 800; font-size: 1.2rem; letter-spacing: .03em; text-transform: uppercase; text-decoration: none; }
	.nav a::after { content: ""; position: absolute; left: 0; right: 0; bottom: 2px; height: 3px; background: var(--red); transform: scaleX(0); transform-origin: left; transition: transform .3s var(--ease); }
	.hdr.is-over .nav a::after { background: var(--yellow); }
	.nav a:hover::after, .nav .current-menu-item > a::after, .nav .current_page_item > a::after { transform: scaleX(1); }
}
.hdr__acts { display: flex; align-items: center; gap: 8px; }
.hdr__btn { display: grid; place-items: center; width: 44px; height: 44px; border: 0; border-radius: var(--r); background: transparent; color: inherit; }
.hdr__btn:hover { background: rgba(127, 127, 127, .14); }
.hdr__menu { display: grid; }
@media (min-width: 1080px) { .hdr__menu { display: none; } }
.hdr__quote { display: inline-flex; align-items: center; gap: 8px; height: 44px; padding: 0 6px 0 12px; background: var(--yellow); color: var(--ink) !important; font-family: var(--fd); font-weight: 850; font-size: 1.15rem; text-transform: uppercase; letter-spacing: .03em; text-decoration: none; clip-path: polygon(0 0, 100% 0, 100% 100%, 10px 100%, 0 calc(100% - 10px)); transition: background-color .2s; }
.hdr__quote:hover { background: var(--white); }
.hdr.is-solid .hdr__quote:hover { background: var(--ink); color: var(--white) !important; }
.hdr__quote-t { display: none; }
@media (min-width: 560px) { .hdr__quote-t { display: inline; } }
.hdr__count { display: inline-grid; place-items: center; min-width: 30px; height: 30px; padding: 0 6px; background: var(--ink); color: var(--white); font-family: var(--fb); font-size: 14px; font-weight: 800; }
.hdr__count.is-zero { background: rgba(17, 17, 17, .18); color: var(--ink); }
.hdr__count.is-bump { animation: dvs-bump .6s var(--ease); }
@keyframes dvs-bump { 0% { transform: scale(1); } 30% { transform: scale(1.45) rotate(-6deg); background: var(--red-ui); } 100% { transform: scale(1); } }

/* Mobile menu */
.mnav { position: fixed; inset: 0; z-index: 80; background: var(--ink); color: var(--white); opacity: 0; transition: opacity .3s; overflow-y: auto; }
.mnav.is-open { opacity: 1; }
.mnav__bars { position: absolute; inset: 0; background-image: linear-gradient(90deg, rgba(255, 255, 255, .05) 2px, transparent 2px); background-size: 64px 100%; pointer-events: none; }
.mnav__in { position: relative; min-height: 100%; display: flex; flex-direction: column; padding: calc(var(--top) + 12px) var(--gut) 32px; }
.mnav__top { display: flex; align-items: center; justify-content: space-between; height: 52px; }
.mnav__label { font-family: var(--fd); font-weight: 800; text-transform: uppercase; letter-spacing: .1em; color: var(--on-ink-2); }
.mnav__list { list-style: none; margin: 24px 0 auto; padding: 0; }
.mnav__list li { border-bottom: 1px solid rgba(255, 255, 255, .14); opacity: 0; transform: translateY(14px); transition: opacity .4s, transform .5s var(--ease); }
.mnav.is-open .mnav__list li { opacity: 1; transform: none; }
.mnav.is-open .mnav__list li:nth-child(2) { transition-delay: .04s; }
.mnav.is-open .mnav__list li:nth-child(3) { transition-delay: .08s; }
.mnav.is-open .mnav__list li:nth-child(4) { transition-delay: .12s; }
.mnav.is-open .mnav__list li:nth-child(5) { transition-delay: .16s; }
.mnav.is-open .mnav__list li:nth-child(6) { transition-delay: .2s; }
.mnav__list a { display: block; padding: 14px 0; color: var(--white) !important; font-size: clamp(2.4rem, 11vw, 3.6rem); line-height: 1; text-decoration: none; }
.mnav__list a:hover { color: var(--yellow) !important; }
.mnav__foot { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 32px; }

/* Search */
.srch { position: fixed; inset: 0; z-index: 110; background: rgba(17, 17, 17, .72); opacity: 0; transition: opacity .25s; }
.srch.is-open { opacity: 1; }
.srch__in { margin-top: calc(var(--top) + 12px); padding-top: 16px; padding-bottom: 16px; background: var(--white); max-height: calc(100vh - var(--top) - 24px); overflow-y: auto; transform: translateY(-12px); transition: transform .35s var(--ease); }
.srch.is-open .srch__in { transform: none; }
.srch__form { display: flex; align-items: center; gap: 12px; border-bottom: 3px solid var(--ink); }
.srch__ic { width: 26px; height: 26px; }
.srch__q { flex: 1; min-width: 0; height: 64px; border: 0; background: transparent; font-family: var(--fd); font-size: clamp(1.6rem, 4vw, 2.4rem); font-weight: 800; text-transform: uppercase; outline: none; }
.srch__q::placeholder { color: var(--line-2); }
.srch__note { margin: 10px 0 6px; color: var(--muted); font-size: 14px; }
.srch__res, .slip__found { list-style: none; margin: 0; padding: 0; }
.srch__res.is-busy, .slip__found.is-busy { opacity: .5; }
.find__row { display: grid; grid-template-columns: 56px minmax(0, 1fr) auto; grid-template-rows: auto auto; gap: 0 12px; align-items: center; padding: 8px 0; border-bottom: 1px solid var(--line); }
.find__row canvas { grid-row: 1 / 3; width: 56px; height: 64px; background: var(--steel); }
.find__t { font-weight: 700; color: var(--ink) !important; text-decoration: none; line-height: 1.3; }
.find__t:hover { text-decoration: underline; }
.find__s { grid-column: 2; color: var(--muted); font-size: 13px; }
.find__add { grid-row: 1 / 3; grid-column: 3; min-height: 40px; padding: 6px 14px; border: 2px solid var(--ink); background: var(--white); font-weight: 800; border-radius: var(--r); }
.find__add:hover { background: var(--ink); color: var(--white); }
.find__none { padding: 12px 0; color: var(--muted); }

/* Quote drawer */
.qd { position: fixed; inset: 0; z-index: 110; }
.qd__scrim { position: absolute; inset: 0; background: rgba(17, 17, 17, .6); opacity: 0; transition: opacity .3s; }
.qd.is-open .qd__scrim { opacity: 1; }
.qd__panel { position: absolute; top: var(--top); right: 0; bottom: 0; width: min(440px, 100%); display: flex; flex-direction: column; background: var(--steel); transform: translateX(100%); transition: transform .45s var(--ease); }
.qd.is-open .qd__panel { transform: none; }
.qd__head { display: flex; align-items: center; justify-content: space-between; padding: 14px 20px; background: var(--ink); color: var(--white); }
.qd__title { margin: 0 !important; font-size: 1.8rem; }
.qd__slip { flex: 1; overflow-y: auto; margin: 18px 18px 0; }
.qd__foot { padding: 16px 18px 20px; }

/* Toasts and flyers */
.toasts { position: fixed; left: 50%; bottom: 18px; z-index: 120; display: flex; flex-direction: column; gap: 8px; width: min(460px, calc(100% - 24px)); transform: translateX(-50%); pointer-events: none; }
.toast { display: flex; align-items: center; gap: 12px; padding: 10px 12px; background: var(--ink); color: var(--white); box-shadow: 0 18px 40px -18px rgba(0, 0, 0, .6); pointer-events: auto; opacity: 0; transform: translateY(14px); transition: opacity .3s, transform .4s var(--ease); }
.toast.is-in { opacity: 1; transform: none; }
.toast__pack { width: 40px; height: 47px; flex: none; background: var(--white); }
.toast__t { flex: 1; font-size: 15px; font-weight: 600; line-height: 1.35; }
.toast__undo { min-height: 40px; padding: 4px 12px; border: 1.5px solid var(--yellow); background: transparent; color: var(--yellow); font-weight: 800; border-radius: var(--r); }
.toast__undo:hover { background: var(--yellow); color: var(--ink); }
.flyer { position: fixed; z-index: 121; pointer-events: none; object-fit: contain; }

/* ---------- Page head: a painted board ---------- */
.phead { --pb: var(--blue); --pt: var(--white); --pm: var(--blue-soft); position: relative; padding: calc(var(--hdr) + clamp(36px, 6vw, 80px)) 0 clamp(44px, 6vw, 84px); background: var(--pb); color: var(--pt); overflow: hidden; }
.phead::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 12px; background: var(--red); box-shadow: 0 -4px 0 var(--yellow); }
.phead--red { --pb: var(--red-ui); --pm: #ffe0e0; }
.phead--red::after { background: var(--ink); }
.phead--ink { --pb: var(--ink); --pm: var(--on-ink-2); }
.phead--green { --pb: var(--green); --pm: #d5ebdf; }
.phead__ribs { position: absolute; top: 0; right: 0; bottom: 12px; width: min(46%, 640px); background-image: linear-gradient(90deg, rgba(255, 255, 255, .07) 0 34%, rgba(0, 0, 0, .08) 34% 50%, transparent 50% 84%, rgba(0, 0, 0, .08) 84%); background-size: 46px 100%; -webkit-mask-image: linear-gradient(90deg, transparent, #000 40%); mask-image: linear-gradient(90deg, transparent, #000 40%); pointer-events: none; }
.phead__in { position: relative; display: grid; gap: 28px; align-items: end; }
@media (min-width: 900px) { .phead__in { grid-template-columns: minmax(0, 1fr) auto; } }
.phead__title { margin: 0 0 .25em !important; font-size: clamp(2.9rem, 7.6vw, 6rem); line-height: .9; max-width: 15ch; }
.phead__lead { margin: 0; max-width: 58ch; color: var(--pm); font-size: clamp(1.05rem, 1.5vw, 1.25rem); }
.phead__acts { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; margin-top: 26px; }
.phead__out { flex-basis: 100%; margin: 4px 0 0; color: var(--pm); font-weight: 600; }

/* ---------- Sections ---------- */
.sec { padding: var(--sec) 0; }
.sec--paper { background: var(--steel); }
.sec--ink { background: var(--ink); color: var(--white); }
.sec--ink .lead, .sec--ink p { color: var(--on-ink-2); }
.pcontent { padding: 0 0 var(--sec); }
.pcontent__in { padding-top: var(--sec); }
.canvas { min-height: 40vh; padding-top: var(--hdr); }
.note-box { margin: 24px 0; padding: 20px 22px; background: var(--steel); border-left: 0; }

/* Motion: reveals (only once JS is running, content visible otherwise) */
.js .will-in[data-rise] { clip-path: inset(0 0 100% 0); transform: translateY(30px); transition: clip-path .9s var(--ease), transform .9s var(--ease); }
.js .will-in[data-rise].is-in { clip-path: inset(0 0 -10% 0); transform: none; }
.js .pgrid.will-in > *, .js .book__rail.will-in > *, .js .serve__list.will-in > *, .js .sgrid.will-in > *, .js .faq__group.will-in .qa { opacity: 0; transform: translateY(22px); transition: opacity .6s, transform .7s var(--ease); }
.js .pgrid.is-in > *, .js .book__rail.is-in > *, .js .serve__list.is-in > *, .js .sgrid.is-in > *, .js .faq__group.is-in .qa { opacity: 1; transform: none; }
.js .is-in > *:nth-child(2), .js .faq__group.is-in .qa:nth-child(2) { transition-delay: .05s; }
.js .is-in > *:nth-child(3), .js .faq__group.is-in .qa:nth-child(3) { transition-delay: .1s; }
.js .is-in > *:nth-child(4), .js .faq__group.is-in .qa:nth-child(4) { transition-delay: .15s; }
.js .is-in > *:nth-child(5), .js .faq__group.is-in .qa:nth-child(5) { transition-delay: .2s; }
.js .is-in > *:nth-child(6), .js .faq__group.is-in .qa:nth-child(6) { transition-delay: .25s; }
.js .is-in > *:nth-child(n+7) { transition-delay: .3s; }

/* ---------- Home: how pricing works ---------- */
.how { padding: var(--sec) 0; background: var(--steel); overflow: hidden; }
.how__in { display: grid; gap: clamp(36px, 6vw, 90px); align-items: center; }
@media (min-width: 960px) { .how__in { grid-template-columns: minmax(0, 1fr) minmax(0, 480px); } }
.how__note { margin: 0 0 24px; font-weight: 600; color: var(--green); }

/* The till slip */
.slip { position: relative; padding: 26px 22px 30px; background: var(--white); color: var(--ink); font-family: var(--fb); -webkit-mask: radial-gradient(circle at 7px 0, transparent 6px, #000 6.5px) -7px 0 / 14px 51% repeat-x, radial-gradient(circle at 7px 100%, transparent 6px, #000 6.5px) -7px 100% / 14px 51% repeat-x; mask: radial-gradient(circle at 7px 0, transparent 6px, #000 6.5px) -7px 0 / 14px 51% repeat-x, radial-gradient(circle at 7px 100%, transparent 6px, #000 6.5px) -7px 100% / 14px 51% repeat-x; }
.slip__head { display: flex; justify-content: space-between; gap: 12px; margin: 0 0 14px; padding-bottom: 12px; border-bottom: 2px dashed var(--line-2); font-family: var(--fd); font-weight: 850; font-size: 1.3rem; letter-spacing: .04em; text-transform: uppercase; }
.slip__steps { list-style: none; margin: 0; padding: 0; counter-reset: s; }
.slip__steps li { position: relative; display: grid; grid-template-columns: 1fr auto; gap: 2px 14px; padding: 12px 0; border-bottom: 1px dashed var(--line); counter-increment: s; }
.slip__steps b { font-family: var(--fd); font-weight: 850; font-size: 1.35rem; text-transform: uppercase; line-height: 1; }
.slip__steps b::before { content: counter(s) " × "; color: var(--red-ui); }
.slip__steps span { grid-column: 1; color: var(--muted); font-size: 15px; line-height: 1.45; }
.slip__steps i { grid-column: 2; grid-row: 1; font-style: normal; font-size: 12px; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; color: var(--muted); }
.slip__steps li:last-child i { color: var(--green); }
.slip__total { display: flex; justify-content: space-between; gap: 12px; margin: 16px 0 0; font-family: var(--fd); font-weight: 900; font-size: 1.5rem; text-transform: uppercase; }
.slip__total span:last-child { color: var(--red-ui); }
.slip__bar { height: 46px; margin: 18px 0 0; background: repeating-linear-gradient(90deg, var(--ink) 0 2px, transparent 2px 4px, var(--ink) 4px 5px, transparent 5px 9px, var(--ink) 9px 12px, transparent 12px 14px); }
.how__slip { transform: rotate(-1.6deg); box-shadow: 0 30px 60px -36px rgba(0, 0, 0, .45); }
.js .slip--print.will-in .slip__steps li, .js .slip--print.will-in .slip__total, .js .slip--print.will-in .slip__bar { opacity: 0; transform: translateY(-8px); clip-path: inset(0 0 100% 0); transition: opacity .3s, transform .5s var(--ease), clip-path .5s var(--ease); }
.js .slip--print.is-in .slip__steps li, .js .slip--print.is-in .slip__total, .js .slip--print.is-in .slip__bar { opacity: 1; transform: none; clip-path: inset(0); }
.js .slip--print.is-in .slip__steps li:nth-child(1) { transition-delay: .15s; }
.js .slip--print.is-in .slip__steps li:nth-child(2) { transition-delay: .45s; }
.js .slip--print.is-in .slip__steps li:nth-child(3) { transition-delay: .75s; }
.js .slip--print.is-in .slip__steps li:nth-child(4) { transition-delay: 1.05s; }
.js .slip--print.is-in .slip__total { transition-delay: 1.4s; }
.js .slip--print.is-in .slip__bar { transition-delay: 1.6s; }

/* Slip lines (drawer, quote page, tracking) */
.slip__lines { list-style: none; margin: 0; padding: 0; }
.slip__line { display: grid; grid-template-columns: 48px minmax(0, 1fr) auto; gap: 10px; align-items: center; padding: 10px 0; border-bottom: 1px dashed var(--line); }
.slip__pack { width: 48px; height: 56px; background: var(--steel); }
.slip__n { display: flex; flex-direction: column; min-width: 0; font-weight: 700; line-height: 1.3; }
.slip__n small { font-weight: 600; color: var(--muted); font-size: 13px; }
.slip__q { font-weight: 800; }
.slip__lines--read .slip__line { grid-template-columns: 56px minmax(0, 1fr); }
.slip__empty { padding: 18px 0 6px; color: var(--muted); }
.slip__line--edit { grid-template-columns: 64px minmax(0, 1fr) 40px; align-items: start; padding: 14px 0; }
.slip__line--edit .slip__pack { width: 64px; height: 76px; }
.slip__body { display: flex; flex-direction: column; gap: 8px; min-width: 0; }
.slip__name { color: var(--ink) !important; font-weight: 800; line-height: 1.25; text-decoration: none; }
.slip__name:hover { text-decoration: underline; }
.slip__ctl { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.slip__packsel { min-height: 38px; max-width: 100%; padding: 4px 30px 4px 10px; border: 1.5px solid var(--line-2); border-radius: var(--r); background: var(--white); font-size: 14px; font-weight: 600; }
.slip__note { width: 100%; min-height: 36px; padding: 4px 10px; border: 0; border-bottom: 1.5px dashed var(--line-2); background: transparent; font-size: 14px; }
.slip__note:focus { outline: none; border-bottom-color: var(--blue); }
.slip__rm { display: grid; place-items: center; width: 40px; height: 40px; border: 0; background: transparent; color: var(--muted); border-radius: var(--r); }
.slip__rm:hover { background: var(--red-ui); color: var(--white); }
.slip__find { margin-top: 18px; padding-top: 16px; border-top: 2px dashed var(--line-2); }
.slip__find-l { display: block; margin-bottom: 8px; font-weight: 800; font-size: 14px; letter-spacing: .04em; text-transform: uppercase; }
.slip__find-in { display: flex; align-items: center; gap: 8px; padding: 0 12px; border: 1.5px solid var(--line-2); border-radius: var(--r); }
.slip__find-in input { flex: 1; min-width: 0; height: 46px; border: 0; background: transparent; outline: none; }
.slip__find-in:focus-within { border-color: var(--blue); }
.slip__sponsor { margin: 16px 0 0; padding: 10px 12px; background: var(--yellow); font-size: 13px; font-weight: 800; text-transform: uppercase; letter-spacing: .03em; }

/* ---------- Product cards ---------- */
.pgrid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
@media (min-width: 640px) { .pgrid { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; } }
@media (min-width: 1000px) { .pgrid { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
@media (min-width: 1280px) { .pgrid { grid-template-columns: repeat(5, minmax(0, 1fr)); } }
.pcard { position: relative; display: flex; flex-direction: column; background: var(--white); border: 1.5px solid var(--line); transition: border-color .25s; }
.pcard:hover { border-color: var(--ink); }
.pcard__img { position: relative; display: block; background: var(--steel); aspect-ratio: 6 / 7; overflow: hidden; }
.pcard__img::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 9px; background: var(--steel-2); box-shadow: 0 -4px 0 var(--red-ui); }
.pcard__canvas { position: absolute; inset: 0; width: 100%; height: 100%; transition: transform .45s var(--ease); }
.pcard:hover .pcard__canvas { transform: translateY(-6px) rotate(-1.5deg); }
.pcard__body { flex: 1; padding: 12px 12px 58px; }
.pcard__name { margin: 0 0 8px !important; font-family: var(--fb) !important; font-size: 15px; font-weight: 750; line-height: 1.3; text-transform: none !important; letter-spacing: 0 !important; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
.pcard__name a { color: var(--ink) !important; text-decoration: none; }
.pcard__name a::after { content: ""; position: absolute; inset: 0; }
.pcard__meta { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; margin: 0; }
.pcard__packs { color: var(--muted); font-size: 13px; font-weight: 600; }
.pcard__feat { padding: 1px 8px; background: var(--red-ui); color: var(--white); font-size: 11px; font-weight: 800; letter-spacing: .06em; text-transform: uppercase; }
.pcard__add { position: absolute; right: 10px; bottom: 10px; z-index: 2; display: inline-flex; align-items: center; gap: 6px; min-height: 40px; padding: 4px 12px 4px 8px; border: 0; border-radius: var(--r); background: var(--ink); color: var(--white); font-family: var(--fd); font-weight: 850; font-size: 1.05rem; text-transform: uppercase; letter-spacing: .03em; transition: background-color .2s, transform .15s; }
.pcard__add .ic { width: 18px; height: 18px; }
.pcard__add:hover { background: var(--red-ui); }
.pcard__add:active { transform: scale(.96); }
.pcard__add.is-done { background: var(--green); }

/* Shelves page */
.shop__search { display: flex; align-items: center; gap: 10px; margin-bottom: 26px; padding: 6px 6px 6px 16px; border: 2px solid var(--ink); background: var(--white); }
.shop__search input { flex: 1; min-width: 0; height: 48px; border: 0; background: transparent; font-size: 17px; outline: none; }
.shop__zones { margin: 0 0 30px; }
.shop__count { color: var(--muted); font-weight: 700; margin-bottom: 18px; }
.shelves__head { margin-bottom: 32px; }
.shelves__zone { margin: 0 0 46px; scroll-margin-top: calc(var(--hdr) + 20px); }
.shelves__z { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 14px; margin: 0 0 16px !important; padding-bottom: 10px; border-bottom: 4px solid var(--red-ui); font-size: clamp(1.9rem, 3vw, 2.5rem); }
.shelves__z span { font-family: var(--fb); font-size: 15px; font-weight: 600; text-transform: none; letter-spacing: 0; color: var(--muted); }
.nav-links { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 34px; }
.nav-links .page-numbers { display: inline-grid; place-items: center; min-width: 44px; height: 44px; padding: 0 12px; border: 1.5px solid var(--line-2); color: var(--ink); font-weight: 700; text-decoration: none; }
.nav-links .page-numbers.current, .nav-links a.page-numbers:hover { background: var(--ink); border-color: var(--ink); color: var(--white); }

/* ---------- Single product ---------- */
.prod { position: relative; padding: calc(var(--hdr) + 32px) 0 var(--sec); background: var(--steel); }
.prod__in { display: grid; gap: 30px; }
@media (min-width: 960px) { .prod__in { grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr); gap: 60px; align-items: start; } .prod__view { position: sticky; top: calc(var(--top) + var(--hdr) + 20px); } }
.prod__where { margin: 0 0 8px; color: var(--muted); font-weight: 800; font-size: 13px; letter-spacing: .08em; text-transform: uppercase; }
.prod__name { font-size: clamp(2.4rem, 5vw, 4rem); line-height: .9; margin: 0 0 .3em !important; }
.prod__meta { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; margin: 0 0 24px; }
.prod__buy { padding: 22px; background: var(--white); }
.prod__packs { margin: 0 0 16px; padding: 0; border: 0; }
.prod__packs legend { margin-bottom: 8px; font-weight: 800; font-size: 13px; letter-spacing: .08em; text-transform: uppercase; }
.prod__facts { margin: 20px 0; padding: 0 0 0 18px; color: var(--muted); }
.prod__facts code { background: var(--white); padding: 1px 6px; color: var(--ink); }
.prod__desc { margin-top: 20px; }

/* ---------- Quote page ---------- */
.qpage__in { display: grid; gap: 36px; }
@media (min-width: 1000px) { .qpage__in { grid-template-columns: minmax(0, 1fr) minmax(0, 520px); gap: 56px; align-items: start; } .qpage__list { position: sticky; top: calc(var(--top) + var(--hdr) + 20px); } }
.qpage__list .slip { box-shadow: 0 24px 50px -34px rgba(0, 0, 0, .4); }
.qpage { background: var(--steel); }
.qpage__tools { display: flex; flex-wrap: wrap; gap: 6px 14px; margin-top: 12px; }
.qpage__send { background: var(--white); padding: clamp(22px, 3vw, 36px); }

/* Forms */
.form { display: flex; flex-direction: column; gap: 16px; }
.form__title { margin: 0 0 4px !important; font-size: clamp(1.9rem, 3vw, 2.5rem); }
.form__row { display: grid; gap: 16px; }
@media (min-width: 620px) { .form__row { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.fld { display: flex; flex-direction: column; gap: 6px; margin: 0; padding: 0; border: 0; min-width: 0; }
.fld > label, .fld > legend { font-weight: 800; font-size: 14px; }
.fld > legend { margin-bottom: 6px; }
.fld input:not([type=checkbox]):not([type=radio]), .fld select, .fld textarea { width: 100%; min-height: 50px; padding: 10px 14px; border: 1.5px solid var(--line-2); border-radius: var(--r); background: var(--white); color: var(--ink); font-size: 16px; transition: border-color .15s, box-shadow .15s; }
.fld textarea { min-height: 96px; resize: vertical; }
.fld input:focus, .fld select:focus, .fld textarea:focus { outline: none; border-color: var(--blue); box-shadow: 0 0 0 3px rgba(0, 88, 135, .2); }
.fld.is-err input, .fld.is-err select, .fld.is-err textarea { border-color: var(--red-ui); }
.fld__err { margin: 0; color: var(--red-ui); font-size: 14px; font-weight: 700; }
.fld__link { align-self: flex-start; display: inline-flex; align-items: center; gap: 6px; padding: 4px 0; border: 0; background: none; color: var(--blue); font-weight: 700; font-size: 14px; }
.fld__link .ic { width: 16px; height: 16px; }
.fld__note { margin: 0; color: var(--green); font-size: 14px; font-weight: 700; min-height: 1px; }
.form__msg { padding: 14px 16px; background: #ffecec; color: var(--red-dk); font-weight: 700; }
.form__msg ul { margin: 6px 0 0; padding-left: 18px; font-weight: 600; }
.form__fine { margin: 0; color: var(--muted); font-size: 13px; }
.form__done { padding: 30px; background: var(--white); outline: none; }

/* Sent stamp */
.sent { padding: 6px 0; outline: none; }
.sent__stamp { display: inline-flex; flex-direction: column; align-items: flex-start; margin: 0 0 18px; padding: 8px 16px 10px; border: 4px solid var(--red-ui); color: var(--red-ui); transform: rotate(-4deg); }
.sent__stamp span { font-family: var(--fd); font-weight: 900; font-size: 2.6rem; line-height: .9; text-transform: uppercase; }
.sent__stamp b { font-size: 1.1rem; letter-spacing: .06em; }
.js .sent:not([hidden]) .sent__stamp, .js .form__done .sent__stamp, .js .track__res .sent__stamp { animation: dvs-stamp .5s var(--ease) both; }
@keyframes dvs-stamp { 0% { transform: rotate(-12deg) scale(1.6); opacity: 0; } 100% { transform: rotate(-4deg) scale(1); opacity: 1; } }
.sent__title { font-size: clamp(1.9rem, 3.4vw, 2.6rem); margin: 0 0 .3em !important; }
.sent__acts { display: flex; flex-wrap: wrap; gap: 10px; margin: 20px 0 10px; }
.sent__phone { color: var(--muted); }

/* Track */
.track__in { max-width: 900px; }
.track__form { margin-bottom: 30px; }
.track__form .btn { align-self: flex-start; }
.steps { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 4px; list-style: none; margin: 24px 0 30px; padding: 0; counter-reset: st; }
.steps__s { position: relative; padding-top: 18px; color: var(--muted); font-size: 13px; font-weight: 700; line-height: 1.3; }
.steps__s::before { content: ""; position: absolute; left: 0; right: 0; top: 0; height: 8px; background: var(--line); }
.steps__s.is-done::before { background: var(--green); }
.steps__s.is-now { color: var(--ink); }
.steps__s.is-now::before { background: var(--red-ui); }

/* ---------- Stores ---------- */
.stores__filter { margin-bottom: 26px; }
.sgrid { display: grid; gap: 14px; grid-template-columns: minmax(0, 1fr); }
@media (min-width: 640px) { .sgrid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1040px) { .sgrid { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.scard { position: relative; display: flex; flex-direction: column; gap: 6px; padding: 20px 20px 16px; background: var(--white); border: 1.5px solid var(--line); }
.scard.is-near { border-color: var(--ink); background: #fffde0; }
.scard.is-mine::after { content: "Your store"; position: absolute; top: 14px; right: 14px; padding: 2px 8px; background: var(--green); color: var(--white); font-size: 11px; font-weight: 800; letter-spacing: .06em; text-transform: uppercase; }
.scard__brand { margin: 0; color: var(--muted); font-size: 12px; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; }
.scard__name { margin: 0 !important; font-size: 2rem; line-height: .95; }
.scard__addr { font-style: normal; color: var(--ink); }
.scard__note { margin: 0; color: var(--muted); font-size: 14px; }
.scard__hours { list-style: none; margin: 4px 0 0; padding: 0; color: var(--muted); font-size: 14px; }
.scard__km { margin: 4px 0 0; font-weight: 800; color: var(--green); }
.scard__acts { display: flex; flex-wrap: wrap; gap: 4px 14px; margin-top: auto; padding-top: 10px; border-top: 1px dashed var(--line); }
.scard__a { display: inline-flex; align-items: center; gap: 6px; min-height: 40px; padding: 0; border: 0; background: none; color: var(--blue) !important; font-size: 14px; font-weight: 700; text-decoration: none; }
.scard__a .ic { width: 17px; height: 17px; }
.scard__a:hover { color: var(--red-ui) !important; }

/* ---------- About ---------- */
.about__in { display: grid; gap: 36px; align-items: center; }
@media (min-width: 960px) { .about__in { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 64px; } }
.about__photo { margin: 0; }
.about__photo img { width: 100%; aspect-ratio: 3 / 2; object-fit: cover; }
.serve__list { list-style: none; margin: 30px 0 0; padding: 0; border-top: 2px solid var(--ink); }
.serve__list li { display: grid; gap: 4px 30px; padding: 22px 0; border-bottom: 1px solid var(--line-2); }
@media (min-width: 800px) { .serve__list li { grid-template-columns: minmax(0, 1fr) minmax(0, 1.2fr); align-items: baseline; } }
.serve__list h3 { margin: 0 !important; font-size: clamp(2rem, 4vw, 3.2rem); line-height: .92; }
.serve__list p { margin: 0; color: var(--muted); font-size: 1.1rem; }
.why__in { display: grid; gap: 30px; }
@media (min-width: 960px) { .why__in { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 64px; } }
.why__copy p { margin-bottom: 1.2em; }
.photos__in { display: grid; gap: 14px; grid-template-columns: minmax(0, 1fr); }
@media (min-width: 760px) { .photos__in { grid-template-columns: 1.4fr 1fr 1fr; } }
.photos__in figure { margin: 0; }
.photos__in img { width: 100%; height: 100%; aspect-ratio: 4 / 3; object-fit: cover; }

/* ---------- Contact ---------- */
.contact__in { display: grid; gap: 40px; }
@media (min-width: 960px) { .contact__in { grid-template-columns: minmax(0, 1fr) minmax(0, 600px); gap: 64px; align-items: start; } }
.contact__addr { display: flex; flex-direction: column; font-style: normal; font-size: 1.15rem; font-weight: 600; margin-bottom: 18px; }
.contact__list { list-style: none; margin: 0 0 22px; padding: 0; }
.contact__list li { display: flex; align-items: center; gap: 10px; padding: 8px 0; font-weight: 700; }
.contact__list .ic { color: var(--red-ui); }
.contact__h { font-weight: 800; font-size: 1rem; text-transform: uppercase; letter-spacing: .06em; margin: 24px 0 8px !important; }
.contact__hours { list-style: none; margin: 0 0 8px; padding: 0; }
.contact__more { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 24px; }
.contact__form { padding: clamp(22px, 3vw, 34px); background: var(--steel); }

/* ---------- FAQ ---------- */
.faq__in { display: grid; gap: 50px; max-width: 980px; }
.faq__g { font-size: clamp(2rem, 3.6vw, 2.8rem); margin: 0 0 14px !important; }
.faq__list { border-top: 2px solid var(--ink); }
.qa { border-bottom: 1px solid var(--line-2); }
.qa__q { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 18px 0; cursor: pointer; list-style: none; font-weight: 800; font-size: 1.12rem; }
.qa__q::-webkit-details-marker { display: none; }
.qa__ic { transition: transform .3s var(--ease); color: var(--red-ui); }
.qa[open] .qa__ic { transform: rotate(45deg); }
.qa__a { padding: 0 0 18px; color: var(--muted); max-width: 70ch; }
.qa__a p { margin: 0; }

/* ---------- Generic lists ---------- */
.plist { display: grid; gap: 0; border-top: 2px solid var(--ink); }
.plist__item { padding: 22px 0; border-bottom: 1px solid var(--line); }
.plist__date { margin: 0 0 4px; color: var(--muted); font-size: 14px; }
.plist__t { margin: 0 0 6px !important; font-family: var(--fd); font-weight: 850; text-transform: uppercase; font-size: 2rem; }
.plist__t a { color: var(--ink); text-decoration: none; }

/* ---------- Footer ---------- */
.ftr { position: relative; background: var(--ink); color: var(--on-ink-2); font-size: 15px; line-height: 1.55; }
.ftr__edge { height: 10px; background: var(--red); box-shadow: inset 0 -3px 0 var(--yellow); }
.ftr__main { display: grid; gap: 40px 32px; grid-template-columns: repeat(2, minmax(0, 1fr)); padding-top: 56px; padding-bottom: 44px; }
.ftr__brand, .ftr__hq { grid-column: 1 / -1; }
@media (min-width: 760px) { .ftr__main { grid-template-columns: repeat(3, minmax(0, 1fr)); } .ftr__hq { grid-column: auto; } }
@media (min-width: 1100px) { .ftr__main { grid-template-columns: minmax(0, 1.5fr) minmax(0, .8fr) minmax(0, .8fr) minmax(0, 1.15fr); gap: 32px 48px; } .ftr__brand { grid-column: auto; } }
.ftr__logo { display: inline-block; }
.ftr__logo__img, .ftr__logo img { display: block; width: 150px; height: auto; }
.ftr__tag { margin: 18px 0 0; color: var(--white); font-family: var(--fd); font-weight: 850; font-size: 1.75rem; line-height: 1; letter-spacing: .01em; text-transform: uppercase; }
.ftr__about { max-width: 40ch; margin: 10px 0 20px; }
.ftr__go { display: inline-flex; align-items: center; gap: 10px; min-height: 48px; padding: 0 16px; background: var(--yellow); color: var(--ink) !important; font-family: var(--fd); font-weight: 850; font-size: 1.15rem; letter-spacing: .03em; text-transform: uppercase; text-decoration: none; clip-path: polygon(0 0, 100% 0, 100% 100%, 12px 100%, 0 calc(100% - 12px)); transition: background-color .2s; }
.ftr__go .ic { width: 20px; height: 20px; }
.ftr__go .ic:last-child { transition: transform .3s var(--ease); }
.ftr__go:hover { background: var(--white); }
.ftr__go:hover .ic:last-child { transform: translateX(3px); }
.ftr__h { margin: 0 0 14px !important; color: var(--white); font-family: var(--fb) !important; font-size: 12px !important; font-weight: 800; letter-spacing: .14em; text-transform: uppercase; }
.ftr__links { list-style: none; margin: 0; padding: 0; }
.ftr__links li { margin: 0; }
.ftr__links a { display: inline-block; padding: 5px 0; color: var(--on-ink-2) !important; font-size: 15px; font-weight: 600; text-decoration: none; transition: color .2s; }
.ftr__links a:hover, .ftr__links .current-menu-item > a { color: var(--white) !important; text-decoration: underline; text-decoration-color: var(--yellow); text-decoration-thickness: 2px; text-underline-offset: 5px; }
.ftr__addr { display: flex; flex-direction: column; margin: 0 0 12px; font-style: normal; color: var(--white); }
.ftr__contact { list-style: none; margin: 0 0 16px; padding: 0; }
.ftr__contact a { display: inline-flex; align-items: center; gap: 8px; padding: 3px 0; color: var(--on-ink-2) !important; font-weight: 600; text-decoration: none; }
.ftr__contact a:hover { color: var(--white) !important; }
.ftr__contact .ic { width: 16px; height: 16px; color: var(--yellow); }
.ftr__hours { margin: 0; padding: 12px 0 0; border-top: 1px solid rgba(255, 255, 255, .14); font-size: 14px; }
.ftr__hours div { display: flex; justify-content: space-between; gap: 16px; padding: 2px 0; max-width: 300px; }
.ftr__hours dt { color: var(--on-ink-2); }
.ftr__hours dd { margin: 0; color: var(--white); font-variant-numeric: tabular-nums; }
.ftr__depts { display: flex; flex-wrap: wrap; align-items: baseline; gap: 10px 22px; padding-top: 20px; padding-bottom: 20px; border-top: 1px solid rgba(255, 255, 255, .14); }
.ftr__depts .ftr__h { margin: 0 !important; color: var(--on-ink-2); }
.ftr__depts ul { display: flex; flex-wrap: wrap; gap: 6px 20px; margin: 0; padding: 0; list-style: none; }
.ftr__depts a { color: var(--white) !important; font-weight: 600; font-size: 14px; text-decoration: none; }
.ftr__depts a small { color: var(--on-ink-2); font-size: 12px; font-weight: 700; }
.ftr__depts a:hover { color: var(--yellow) !important; }
.ftr__base { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 24px; padding-top: 18px; padding-bottom: calc(22px + env(safe-area-inset-bottom)); border-top: 1px solid rgba(255, 255, 255, .14); font-size: 13px; }
.ftr__base p { margin: 0; }
.ftr__copy { flex: 1 1 320px; }
.ftr__legal { display: flex; gap: 18px; list-style: none; margin: 0; padding: 0; }
.ftr__legal a, .ftr__credit a { color: var(--white) !important; text-underline-offset: 3px; }
.ftr__legal a:hover, .ftr__credit a:hover { color: var(--yellow) !important; }
.ftr__social { display: flex; gap: 4px; list-style: none; margin: 0; padding: 0; }
.ftr__social a { display: grid; place-items: center; width: 38px; height: 38px; color: var(--white) !important; background: rgba(255, 255, 255, .08); transition: background-color .2s, color .2s; }
.ftr__social a:hover { background: var(--yellow); color: var(--ink) !important; }
.ftr__social .ic { width: 18px; height: 18px; }
.ftr__credit { flex-basis: 100%; }
@media (min-width: 1100px) { .ftr__credit { flex-basis: auto; margin-left: auto !important; } }

/* ---------- No-JS / no-WebGL fallbacks ---------- */
html:not(.js) .shop__load { display: none; }
.is-shot .hdr, .is-shot .hero__copy, .is-shot .hero__go, .is-shot .shop__ui, .is-shot .shop__load, .is-shot #wpadminbar { display: none !important; }

/* ---------- Reduced motion ---------- */
@media (prefers-reduced-motion: reduce) {
	*, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; transition-delay: 0s !important; scroll-behavior: auto !important; }
}

/* ---------- Print: the quote list ---------- */
@media print {
	.hdr, .ftr, .mnav, .srch, .qd, .toasts, .phead, .qpage__send, .qpage__tools, .slip__find, .slip__rm, .pcontent, #wpadminbar { display: none !important; }
	.qpage { background: none; padding: 0; }
	.slip { -webkit-mask: none; mask: none; box-shadow: none !important; }
	.slip__packsel, .slip__note { border: 0; -webkit-appearance: none; appearance: none; }
}

/* ---------- Isometric drawings (the shop model), from the anatomy kit ---------- */
.iso{
  --anatomy-page:#0b0b0b;--anatomy-card:#131313;--anatomy-text:#a3a3a3;--anatomy-strong:#e6e6e6;--anatomy-muted:#6e6e6e;
  --anatomy-paper:#131313;--anatomy-face:#1b1b1b;--anatomy-top:#1c1c1c;
  --anatomy-shade-0:#0f0f0f;--anatomy-shade-1:#121212;--anatomy-shade-2:#151515;--anatomy-shade-3:#181818;
  --anatomy-lit-top:#262626;--anatomy-lit-shade:#1d1d1d;
  --anatomy-hi:#d4d4d4;--anatomy-mid:#6a6a6a;--anatomy-lo:#3e3e3e;--anatomy-faint:#2a2a2a;--anatomy-lit:#ffffff;
  --anatomy-halo:#050505;--anatomy-halo-opacity:.9;--anatomy-dot:#e6e6e6;
  --anatomy-red:#ff6b6b;--anatomy-green:#6be0a0;--anatomy-blue:#6b9bff;
  --anatomy-weight:.6px;--anatomy-ease:cubic-bezier(.32,.72,0,1);
  --anatomy-mono:ui-monospace,"SF Mono",Menlo,Consolas,monospace;
  --anatomy-lift:inset 0 1px 0 0 #ffffff0a,inset 0 0 0 1px #ffffff06,0 0 0 1px #00000026,0 1px 1px -.5px #00000014,0 3px 3px -1.5px #00000014,0 6px 6px -3px #00000014,0 12px 12px -6px #00000014;
}
.iso[data-theme="light"]{
  --anatomy-page:#f2f2ef;--anatomy-card:#fbfbfa;--anatomy-text:#57575a;--anatomy-strong:#18181a;--anatomy-muted:#8c8c90;
  --anatomy-paper:#fbfbfa;--anatomy-face:#ffffff;--anatomy-top:#ffffff;
  --anatomy-shade-0:#dcdcd9;--anatomy-shade-1:#e5e5e2;--anatomy-shade-2:#ededea;--anatomy-shade-3:#f4f4f1;
  --anatomy-lit-top:#ffffff;--anatomy-lit-shade:#eeeeeb;
  --anatomy-hi:#26262a;--anatomy-mid:#8a8a8f;--anatomy-lo:#b4b4b8;--anatomy-faint:#d4d4d6;--anatomy-lit:#000000;
  --anatomy-halo:#8a8a80;--anatomy-halo-opacity:.32;--anatomy-dot:#3a3a3e;
  --anatomy-red:#e5484d;--anatomy-green:#30a46c;--anatomy-blue:#3e63dd;
  --anatomy-lift:inset 0 1px 0 0 #ffffff,0 0 0 1px #0000000f,0 1px 1px -.5px #0000000a,0 3px 3px -1.5px #0000000a,0 6px 6px -3px #0000000a,0 12px 12px -6px #0000000a;
}
.iso-svg{display:block;width:100%;height:auto;overflow:visible}
.iso-svg path,.iso-svg circle{vector-effect:non-scaling-stroke}
.iso-fill{fill:var(--anatomy-paper);stroke:none}
.iso-solid[data-lit]>.iso-fill{fill:var(--anatomy-face)}
.iso-shade,.iso-top{stroke:none}
.iso-shade[data-shade="0"]{fill:var(--anatomy-shade-0)}
.iso-shade[data-shade="1"]{fill:var(--anatomy-shade-1)}
.iso-shade[data-shade="2"]{fill:var(--anatomy-shade-2)}
.iso-shade[data-shade="3"]{fill:var(--anatomy-shade-3)}
.iso-top{fill:var(--anatomy-top)}
.iso-solid[data-lit]>.iso-top{fill:var(--anatomy-lit-top)}
.iso-solid[data-lit]>.iso-shade{fill:var(--anatomy-lit-shade)}
.iso-solid[data-seamless]>.iso-shade,.iso-solid[data-seamless]>.iso-top{stroke-width:.4;stroke-linejoin:round}
.iso-solid[data-seamless]>.iso-shade[data-shade="0"]{stroke:var(--anatomy-shade-0)}
.iso-solid[data-seamless]>.iso-shade[data-shade="1"]{stroke:var(--anatomy-shade-1)}
.iso-solid[data-seamless]>.iso-shade[data-shade="2"]{stroke:var(--anatomy-shade-2)}
.iso-solid[data-seamless]>.iso-shade[data-shade="3"]{stroke:var(--anatomy-shade-3)}
.iso-solid[data-seamless]>.iso-top{stroke:var(--anatomy-top)}
.iso-solid[data-seamless][data-lit]>.iso-top{stroke:var(--anatomy-lit-top)}
.iso-solid[data-seamless][data-lit]>.iso-shade{stroke:var(--anatomy-lit-shade)}
.iso-solid[data-lit]>.iso-edge{stroke:var(--anatomy-lit)}
.iso-halo{fill:var(--anatomy-halo);stroke:none;filter:blur(9px);opacity:var(--anatomy-halo-opacity);transform:translateY(3px)}
.iso-line{fill:none;stroke:var(--anatomy-lo);stroke-width:var(--anatomy-weight);stroke-linecap:round;stroke-linejoin:round}
.iso-line[data-tone="hi"]{stroke:var(--anatomy-hi)}
.iso-line[data-tone="mid"]{stroke:var(--anatomy-mid)}
.iso-line[data-tone="lo"]{stroke:var(--anatomy-lo)}
.iso-line[data-tone="faint"]{stroke:var(--anatomy-faint)}
.iso-line[data-tone="lit"]{stroke:var(--anatomy-lit)}
.iso-line[data-tone="red"]{stroke:var(--anatomy-red)}
.iso-line[data-tone="green"]{stroke:var(--anatomy-green)}
.iso-line[data-tone="blue"]{stroke:var(--anatomy-blue)}
.iso-line[data-dotted]{stroke-dasharray:.01 3.5;stroke-width:1}
.iso-line[data-dashed]{stroke-dasharray:3 3}
.iso-line[data-flow]{stroke-dasharray:2 6}
.iso-wire-end{fill:var(--anatomy-paper);stroke:var(--anatomy-lo);stroke-width:var(--anatomy-weight)}
.iso-wire[data-tone="hi"] .iso-wire-end{stroke:var(--anatomy-hi)}
.iso-wire[data-tone="mid"] .iso-wire-end{stroke:var(--anatomy-mid)}
.iso-wire[data-tone="faint"] .iso-wire-end{stroke:var(--anatomy-faint)}
.iso-wire[data-tone="lit"] .iso-wire-end{stroke:var(--anatomy-lit)}
.iso-dots circle{fill:var(--anatomy-dot);stroke:none;opacity:.32}
.iso-dots[data-tone="hi"] circle{opacity:.85}
.iso-dots[data-tone="mid"] circle{opacity:.45}
.iso-dots[data-tone="lo"] circle{opacity:.22}
.iso-dots[data-tone="faint"] circle{opacity:.12}
.iso-face-text{fill:var(--anatomy-mid);font-family:var(--anatomy-mono);letter-spacing:.04em}
.iso-face-text[data-tone="hi"]{fill:var(--anatomy-hi)}
.iso-face-text[data-tone="lo"]{fill:var(--anatomy-lo)}
.iso-face-text[data-tone="faint"]{fill:var(--anatomy-faint)}
.tb-body{fill:var(--anatomy-shade-2);stroke:none}
.tb-shine{fill:var(--anatomy-top);stroke:none}
.tb-shade{fill:var(--anatomy-shade-0);stroke:none}
.tb-ring{fill:none;stroke:var(--anatomy-lo);stroke-width:.45;stroke-linecap:butt;stroke-linejoin:round}
.tb-ring[data-tone="mid"]{stroke:var(--anatomy-mid)}
.tb-ring[data-tone="faint"]{stroke:var(--anatomy-faint)}
.tb-ring[data-tone="hi"]{stroke:var(--anatomy-hi)}
@keyframes iso-flow{to{stroke-dashoffset:-32}}
@keyframes iso-pulse{0%,100%{opacity:.18}12%{opacity:1}40%{opacity:.18}}
.iso-line[data-flow]{animation:iso-flow 1600ms linear infinite}
.iso-dots circle[data-pulse]{animation:iso-pulse 1600ms steps(1,end) infinite;animation-delay:var(--pulse-at,0ms)}
.iso-figure{margin:32px 0 36px}
.iso-plate{position:relative;padding:52px 24px;border-radius:0;background:var(--anatomy-card);box-shadow:0 0 0 1px var(--anatomy-mid);--anatomy-paper:var(--anatomy-card)}
.iso-plate-corners{position:absolute;inset:18px 20px;pointer-events:none}
.iso-plate-corner{position:absolute;color:var(--anatomy-muted);font-family:var(--anatomy-mono);font-size:10.5px;line-height:1;letter-spacing:.04em;white-space:nowrap}
.iso-plate-corner[data-corner="fig"]{top:0;left:0;color:var(--anatomy-text)}
.iso-plate-corner[data-corner="title"]{top:0;right:0;text-transform:uppercase;letter-spacing:.1em}
.iso-plate-corner[data-corner="hint"]{bottom:0;left:0;text-transform:uppercase;letter-spacing:.1em}
.iso-plate-corner[data-corner="readout"]{right:0;bottom:0;color:var(--anatomy-text);font-variant-numeric:tabular-nums}
.iso-plate .iso-svg{margin:0 auto}
.iso-legend{display:grid;gap:8px;margin-top:12px;color:var(--anatomy-muted);font-size:13px;line-height:1.55}
.iso-keys{display:flex;flex-wrap:wrap;gap:6px 18px}
.iso-key{display:inline-flex;align-items:center;gap:7px}
.iso-swatch{width:16px;height:10px;flex:none;overflow:visible}
.iso-swatch path{fill:none;stroke:var(--anatomy-hi);stroke-width:1;vector-effect:non-scaling-stroke;stroke-linejoin:round;stroke-linecap:round}
.iso-swatch[data-mark="raised"] path,.iso-swatch[data-mark="flat"] path{stroke:var(--anatomy-mid)}
.iso-swatch[data-mark="lit"] path{stroke:var(--anatomy-lit)}
.iso-swatch[data-mark="dim"] path{stroke:var(--anatomy-lo)}
.iso-swatch[data-mark="dotted"] path{stroke-dasharray:.01 3;stroke-width:1.4}
.iso-swatch[data-mark="dashed"] path{stroke-dasharray:3 2.5}
.iso-swatch[data-mark="red"] path{stroke:var(--anatomy-red)}
.iso-swatch[data-mark="green"] path{stroke:var(--anatomy-green)}
.iso-swatch[data-mark="blue"] path{stroke:var(--anatomy-blue)}
.iso-swatch-crease{stroke:var(--anatomy-lo)!important}
@media (max-width:560px){.iso-plate{padding:48px 12px 70px}.iso-plate-corner[data-corner="hint"]{bottom:18px}}
@media (prefers-reduced-motion:reduce){.iso-line[data-flow],.iso-dots circle[data-pulse]{animation:none}}

/* =========================================================================
   v2: the walk-in shop
   ========================================================================= */

/* ---------- Home hero: the shop at blue hour ---------- */
.hero { position: relative; height: calc(100svh - var(--top)); min-height: 600px; background: #06253a; color: var(--white); overflow: hidden; isolation: isolate; }
.hero .shop { position: absolute; inset: 0; }
.hero::after { content: ""; position: absolute; inset: 0; z-index: 3; pointer-events: none; background: linear-gradient(90deg, rgba(3, 14, 22, .72) 0%, rgba(3, 14, 22, .38) 32%, transparent 55%); transition: opacity .6s; }
@media (max-width: 899px) { .hero::after { background: linear-gradient(180deg, rgba(3, 14, 22, .7) 0%, transparent 42%, transparent 70%, rgba(3, 14, 22, .7) 100%); } }
.hero.is-entering::after, .in-shop .hero::after { opacity: 0; }
.hero__copy { position: absolute; z-index: 4; left: 0; right: 0; top: calc(var(--hdr) + 22px); pointer-events: none; transition: opacity .5s, transform .8s var(--ease); }
.hero__copy a, .hero__copy button { pointer-events: auto; }
.hero__title { margin: 0 0 .32em !important; font-family: var(--fd); font-weight: 900; font-size: clamp(3.1rem, 12.4vw, 6.4rem); line-height: .86; text-transform: uppercase; letter-spacing: .005em; }
.hero__line { display: block; overflow: hidden; padding-bottom: .04em; }
.hero__line > span { display: inline-block; }
.hero__line--y { color: var(--yellow); }
.js .hero__line > span { transform: translateY(108%); animation: dvs-rise 1s var(--ease) forwards; }
.js .hero__line:nth-child(2) > span { animation-delay: .08s; }
.js .hero__line:nth-child(3) > span { animation-delay: .2s; }
.js .hero__line:nth-child(4) > span { animation-delay: .28s; }
@keyframes dvs-rise { to { transform: none; } }
.hero__lead { max-width: 36ch; margin: 0 0 24px; color: var(--blue-soft); font-size: clamp(1rem, 1.35vw, 1.2rem); }
.js .hero__lead, .js .hero__acts { opacity: 0; transform: translateY(14px); animation: dvs-in .9s var(--ease) .45s forwards; }
.js .hero__acts { animation-delay: .55s; }
@keyframes dvs-in { to { opacity: 1; transform: none; } }
.hero__acts { display: flex; flex-wrap: wrap; gap: 10px; }
.btn--xl { min-height: 62px; padding: 14px 30px; font-size: 1.45rem; }
.btn--xl .ic { width: 24px; height: 24px; }
.hero__go { position: absolute; z-index: 4; left: 0; right: 0; bottom: 22px; display: flex; align-items: center; gap: 14px; transition: opacity .5s, transform .8s var(--ease); }
.hero__go-t { flex: none; margin: 0; color: var(--blue-soft); font-size: 13px; font-weight: 800; letter-spacing: .1em; text-transform: uppercase; }
.hero__go-list { display: flex; gap: 6px; margin: 0; padding: 0; list-style: none; overflow-x: auto; scrollbar-width: none; }
.hero__go-list::-webkit-scrollbar { display: none; }
.hero__go-list a { display: inline-flex; align-items: center; min-height: 40px; padding: 4px 14px; background: rgba(6, 20, 30, .62); border: 1px solid rgba(255, 255, 255, .22); color: var(--white) !important; font-family: var(--fd); font-weight: 800; font-size: 1.1rem; letter-spacing: .03em; text-transform: uppercase; white-space: nowrap; text-decoration: none; transition: background-color .2s, color .2s, border-color .2s; }
.hero__go-list a:hover { background: var(--yellow); border-color: var(--yellow); color: var(--ink) !important; }
@media (max-width: 899px) {
	.hero__lead { display: none; }
	.hero__acts { position: absolute; left: var(--gut); right: var(--gut); bottom: 0; }
	.hero__copy { bottom: 84px; }
	.hero__acts .btn { flex: 1; }
	.hero__go { bottom: 16px; padding-right: 0; }
	.hero__go-t { display: none; }
}
@media (min-width: 900px) {
	.hero__copy { top: 50%; transform: translateY(-46%); }
	.hero__copy > * { max-width: 600px; }
}
.hero.is-entering .hero__copy, .hero.is-entering .hero__go, .in-shop .hero__copy, .in-shop .hero__go { opacity: 0; transform: translateY(20px); pointer-events: none; }
.in-shop .hdr { transform: translateY(-110%); }

/* ---------- The shop (3D) ---------- */
.shop { position: relative; width: 100%; height: 100%; background: #06253a; overflow: hidden; touch-action: pan-y; -webkit-user-select: none; user-select: none; }
.shop.is-inside { touch-action: none; }
.shop__poster { position: absolute; inset: 0; z-index: 0; transition: opacity .9s .15s; }
.shop__poster img { width: 100%; height: 100%; object-fit: cover; }
.shop__canvas { position: absolute; inset: 0; z-index: 1; width: 100% !important; height: 100% !important; display: block; outline: none; }
.shop.is-ready .shop__poster { opacity: 0; }
.shop.is-static .shop__canvas { display: none; }
.shop__vignette { position: absolute; inset: 0; z-index: 2; pointer-events: none; background: radial-gradient(120% 90% at 55% 45%, transparent 55%, rgba(3, 12, 18, .5) 100%); }
.shop__load { position: absolute; left: 0; right: 0; bottom: 0; z-index: 3; height: 3px; overflow: hidden; transition: opacity .4s; }
.shop__load-bar i { position: absolute; inset: 0; background: var(--yellow); transform-origin: left; animation: dvs-load 1.4s var(--ease-io) infinite; }
@keyframes dvs-load { 0% { transform: scaleX(0); } 70% { transform: scaleX(1); opacity: 1; } 100% { transform: scaleX(1); opacity: 0; } }
.shop.is-ready .shop__load, .shop.is-static .shop__load { opacity: 0; }
.shop.is-full { position: fixed !important; inset: 0; z-index: 95; height: 100svh; }
.shop__noscript { position: absolute; left: var(--gut); bottom: 20px; z-index: 5; }
.shop__noscript a { color: var(--white); font-weight: 800; }

/* In-shop interface: ink panels on top of the 3D. */
.shop__ui { position: absolute; inset: 0; z-index: 6; pointer-events: none; opacity: 0; transition: opacity .5s .1s; }
.shop__ui.is-on { opacity: 1; }
.shop__ui > * { pointer-events: auto; }
.shop__bar { position: absolute; top: calc(10px + env(safe-area-inset-top)); left: 10px; right: 10px; display: flex; align-items: center; gap: 8px; pointer-events: none; }
.shop__bar > * { pointer-events: auto; }
.shop__leave, .shop__brand, .shop__find, .shop__quote, .shop__depts, .shop__ov, .shop__allbtn, .shop__shelf, .shop__hint { background: rgba(14, 16, 16, .82); -webkit-backdrop-filter: blur(12px) saturate(1.1); backdrop-filter: blur(12px) saturate(1.1); color: var(--white); }
.shop__leave { display: inline-flex; align-items: center; gap: 8px; height: 46px; padding: 0 14px; border: 0; font-family: var(--fd); font-weight: 800; font-size: 1.1rem; text-transform: uppercase; letter-spacing: .03em; }
.shop__leave:hover { background: var(--white); color: var(--ink); }
.shop__brand { display: grid; place-items: center; height: 46px; padding: 0 12px; }
.shop__logo__img, .shop__brand img { display: block; height: 34px; width: auto; }
.shop__find { position: relative; flex: 1; max-width: 420px; display: flex; align-items: center; gap: 8px; height: 46px; padding: 0 12px; margin-right: auto; }
.shop__find input { flex: 1; min-width: 0; height: 100%; border: 0; background: transparent; color: var(--white); font-size: 16px; outline: none; }
.shop__find input::placeholder { color: rgba(255, 255, 255, .55); }
.shop__find-res { position: absolute; left: 0; right: 0; top: calc(100% + 6px); margin: 0; padding: 6px; list-style: none; background: var(--white); color: var(--ink); box-shadow: 0 20px 50px -20px rgba(0, 0, 0, .6); }
.shop__find-hit { display: flex; align-items: center; gap: 10px; width: 100%; padding: 6px 8px; border: 0; background: transparent; text-align: left; font-weight: 700; font-size: 14px; line-height: 1.3; }
.shop__find-hit:hover, .shop__find-hit:focus-visible { background: var(--steel); }
.shop__find-hit img, .shop__find-hit canvas { flex: none; width: 40px; height: 44px; object-fit: contain; background: var(--steel); }
.shop__find-none { padding: 10px; font-size: 14px; color: var(--muted); }
.shop__quote { display: inline-flex; align-items: center; gap: 8px; height: 46px; padding: 0 8px 0 12px; color: var(--white) !important; font-family: var(--fd); font-weight: 850; font-size: 1.1rem; text-transform: uppercase; text-decoration: none; letter-spacing: .03em; }
.shop__quote .hdr__count { background: var(--yellow); color: var(--ink); }
.shop__quote .hdr__count.is-zero { background: rgba(255, 255, 255, .16); color: var(--white); }
.shop__quote-t { display: none; }
@media (min-width: 620px) { .shop__quote-t { display: inline; } }
.shop__nav { position: absolute; left: 50%; bottom: calc(14px + env(safe-area-inset-bottom)); display: flex; flex-direction: column; align-items: center; gap: 8px; width: max-content; max-width: calc(100% - 20px); transform: translateX(-50%); pointer-events: none; }
.shop__nav > * { pointer-events: auto; }
.shop__depts { display: flex; gap: 2px; max-width: 100%; padding: 4px; overflow-x: auto; scrollbar-width: none; }
.shop__depts::-webkit-scrollbar { display: none; }
.shop__dept { display: inline-flex; align-items: baseline; gap: 6px; flex: none; min-height: 42px; padding: 8px 12px; border: 0; background: transparent; color: var(--white); font-family: var(--fd); font-weight: 800; font-size: 1.08rem; letter-spacing: .03em; text-transform: uppercase; white-space: nowrap; transition: background-color .2s, color .2s; }
.shop__dept small { font-family: var(--fb); font-size: 11px; font-weight: 800; opacity: .6; }
.shop__dept:hover { background: rgba(255, 255, 255, .12); }
.shop__dept[aria-pressed="true"] { background: var(--yellow); color: var(--ink); }
/* Whole shop / All items */
.shop__ov, .shop__allbtn { position: absolute; top: calc(66px + env(safe-area-inset-top)); display: inline-flex; align-items: center; gap: 8px; height: 42px; padding: 0 14px; border: 0; font-family: var(--fd); font-weight: 800; font-size: 1.05rem; letter-spacing: .03em; text-transform: uppercase; transition: background-color .2s, color .2s, opacity .3s, transform .4s var(--ease); }
.shop__ov { left: 10px; opacity: 0; transform: translateY(-6px); pointer-events: none; }
.shop.is-shelf .shop__ov { opacity: 1; transform: none; pointer-events: auto; }
.shop__allbtn { right: 10px; }
.shop__allbtn small { font-family: var(--fb); font-size: 11px; font-weight: 800; opacity: .65; }
.shop__ov:hover, .shop__allbtn:hover, .shop__allbtn[aria-expanded="true"] { background: var(--white); color: var(--ink); }

/* Department pins over the overview: shelf tickets on a stem */
.shop__pins { position: absolute; inset: 0; pointer-events: none !important; }
.shop__pin { position: absolute; left: 0; top: 0; display: inline-flex; align-items: baseline; gap: 6px; padding: 6px 10px 7px 14px; border: 0; background: var(--yellow); color: var(--ink); font-family: var(--fd); font-weight: 850; font-size: 1.05rem; letter-spacing: .03em; text-transform: uppercase; white-space: nowrap; clip-path: polygon(0 0, 100% 0, 100% 100%, 9px 100%, 0 calc(100% - 9px)); opacity: 0; pointer-events: none; transition: opacity .25s, background-color .2s, color .2s; will-change: transform; }
.shop__pin small { font-family: var(--fb); font-size: 11px; font-weight: 800; opacity: .7; }
.shop__pin.is-on { opacity: 1; pointer-events: auto; cursor: pointer; }
.shop__pin:hover, .shop__pin:focus-visible { background: var(--ink); color: var(--white); }
.shop__pin::after { content: ""; position: absolute; left: 50%; top: 100%; width: 2px; height: 0; background: var(--yellow); }
.shop.is-shelf .shop__pin, .shop.is-all .shop__pin { opacity: 0; pointer-events: none; }

/* Shelf bar: where you are, and the arrows along */
.shop__shelf { display: flex; align-items: stretch; gap: 2px; padding: 4px; min-width: min(420px, 100%); }
.shop__shelf[hidden] { display: none; }
.shop__step { flex: none; display: grid; place-items: center; width: 52px; min-height: 52px; border: 0; background: transparent; color: var(--white); transition: background-color .2s, color .2s; }
.shop__step svg { width: 22px; height: 22px; }
.shop__step:hover { background: rgba(255, 255, 255, .14); }
.shop__step.is-next { background: var(--yellow); color: var(--ink); }
.shop__shelf-t { flex: 1; min-width: 0; margin: 0; padding: 4px 10px; display: flex; flex-direction: column; justify-content: center; text-align: center; line-height: 1.1; }
.shop__shelf-t b { font-family: var(--fd); font-weight: 850; font-size: 1.35rem; letter-spacing: .03em; text-transform: uppercase; color: var(--white); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.shop__shelf-t small { margin-top: 3px; font-size: 12px; font-weight: 700; color: var(--on-ink-2); }

/* All items */
.shop__all { position: absolute; top: 0; right: 0; bottom: 0; z-index: 30; display: flex; flex-direction: column; width: min(460px, 100%); background: var(--white); color: var(--ink); box-shadow: -30px 0 60px -30px rgba(0, 0, 0, .55); transform: translateX(104%); transition: transform .38s var(--ease); }
.shop__all.is-open { transform: none; }
.shop__all-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: calc(14px + env(safe-area-inset-top)) 14px 10px 20px; border-bottom: 3px solid var(--red-ui); }
.shop__all-head h2 { margin: 0; font-family: var(--fd); font-weight: 900; font-size: clamp(1.6rem, 4vw, 2.1rem); line-height: 1; text-transform: uppercase; }
.shop__all-x { display: grid; place-items: center; width: 44px; height: 44px; border: 0; background: var(--steel); color: var(--ink); }
.shop__all-x:hover { background: var(--ink); color: var(--white); }
.shop__all-tools { display: flex; align-items: center; gap: 8px; margin: 12px 14px 0 20px; padding: 0 12px; border: 2px solid var(--ink); }
.shop__all-tools input { flex: 1; min-width: 0; height: 44px; border: 0; background: transparent; font-size: 16px; outline: none; }
.shop__all-jump { display: flex; gap: 6px; padding: 12px 14px 12px 20px; overflow-x: auto; scrollbar-width: none; border-bottom: 1px solid var(--line); }
.shop__all-jump::-webkit-scrollbar { display: none; }
.shop__all-jump button { flex: none; padding: 6px 10px; border: 1px solid var(--line); background: var(--white); color: var(--ink); font-size: 13px; font-weight: 700; white-space: nowrap; }
.shop__all-jump button:hover { border-color: var(--ink); }
.shop__all-body { flex: 1; min-height: 0; overflow-y: auto; overscroll-behavior: contain; padding: 4px 14px 18px 20px; }
.all__z h3 { position: sticky; top: 0; z-index: 1; display: flex; align-items: baseline; justify-content: space-between; margin: 0; padding: 14px 0 8px; background: var(--white); font-family: var(--fd); font-weight: 850; font-size: 1.3rem; letter-spacing: .03em; text-transform: uppercase; border-bottom: 2px solid var(--ink); }
.all__z h3 small { font-family: var(--fb); font-size: 12px; color: var(--muted); }
.all__z ul { margin: 0; padding: 0; list-style: none; }
.all__row { display: grid; grid-template-columns: 48px minmax(0, 1fr) auto auto; align-items: center; gap: 10px; padding: 8px 0; border-bottom: 1px solid var(--line); }
.all__img { display: grid; place-items: center; width: 48px; height: 52px; background: var(--steel); }
.all__img img, .all__img canvas { display: block; max-width: 44px; max-height: 48px; object-fit: contain; }
.all__t { min-width: 0; display: flex; flex-direction: column; line-height: 1.25; }
.all__t b { font-size: 14px; font-weight: 750; }
.all__t small { margin-top: 2px; font-size: 12px; color: var(--muted); }
.all__row.is-in .all__t small::after { content: " · in your quote"; color: var(--green); font-weight: 800; }
.all__show { padding: 8px 6px; border: 0; background: transparent; color: var(--blue); font-size: 13px; font-weight: 800; text-decoration: underline; text-underline-offset: 3px; white-space: nowrap; }
.all__show:hover { color: var(--ink); }
.all__add { display: inline-flex; align-items: center; gap: 4px; min-height: 40px; padding: 0 12px 0 9px; border: 0; background: var(--ink); color: var(--white); font-family: var(--fd); font-weight: 850; font-size: 1.02rem; letter-spacing: .03em; text-transform: uppercase; transition: background-color .2s; }
.all__add:hover { background: var(--red-ui); }
.all__row.is-in .all__add { background: var(--green); }
.shop__all-foot { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 12px 14px calc(12px + env(safe-area-inset-bottom)) 20px; border-top: 1px solid var(--line); background: var(--steel); }
.shop__all-foot p { margin: 0; font-size: 14px; font-weight: 700; }
@media (max-width: 760px) {
	.shop__nav { left: 10px; right: 10px; width: auto; max-width: none; transform: none; bottom: calc(10px + env(safe-area-inset-bottom)); align-items: stretch; }
	.shop__shelf { min-width: 0; }
	.shop__ov span { display: none; }
	.shop__pin { gap: 4px; padding: 4px 7px 5px 10px; font-size: .86rem; clip-path: polygon(0 0, 100% 0, 100% 100%, 6px 100%, 0 calc(100% - 6px)); }
	.shop__pin small { display: none; }
	.shop__ov, .shop__allbtn { top: calc(62px + env(safe-area-inset-top)); padding: 0 12px; }
	.all__show { font-size: 12px; padding: 8px 2px; }
	.all__row { gap: 8px; }
}
.shop__hint { position: absolute; left: 50%; top: 50%; width: min(360px, calc(100% - 40px)); padding: 22px 24px; transform: translate(-50%, -46%); opacity: 0; transition: opacity .35s, transform .5s var(--ease); }
.shop__hint.is-on { opacity: 1; transform: translate(-50%, -50%); }
.shop__hint ul { margin: 0 0 16px; padding: 0; list-style: none; }
.shop__hint li { padding: 8px 0; border-bottom: 1px solid rgba(255, 255, 255, .16); color: var(--on-ink-2); }
.shop__hint b { color: var(--white); font-family: var(--fd); font-weight: 850; font-size: 1.2rem; letter-spacing: .02em; text-transform: uppercase; }
.shop__tip { position: absolute; left: 0; top: 0; z-index: 7; max-width: 280px; padding: 6px 10px; background: var(--ink); color: var(--white); font-size: 14px; font-weight: 700; line-height: 1.3; pointer-events: none; }

/* ---------- Inspect: the pack in your hands ---------- */
.insp { position: absolute; inset: 0; z-index: 20; display: grid; place-items: center; padding: 18px; background: rgba(4, 16, 24, .58); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); opacity: 0; transition: opacity .35s; }
.insp.is-open { opacity: 1; }
.insp__card { position: relative; display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr); width: min(1120px, 100%); height: min(700px, 100%); background: var(--white); color: var(--ink); box-shadow: 0 40px 90px -40px rgba(0, 0, 0, .8); transform: translateY(20px) scale(.97); transition: transform .5s var(--ease); overflow: hidden; }
.insp.is-open .insp__card { transform: none; }
.insp__view { position: relative; background: radial-gradient(70% 60% at 50% 40%, #ffffff 0%, var(--steel) 70%); }
.insp__canvas { position: absolute; inset: 0; width: 100% !important; height: 100% !important; touch-action: none; cursor: grab; }
.insp__canvas:active { cursor: grabbing; }
.insp__photo { position: absolute; inset: 40px 40px 90px; width: calc(100% - 80px); height: calc(100% - 130px); object-fit: contain; }
.insp__thumbs { position: absolute; left: 16px; bottom: 16px; display: flex; gap: 6px; }
.insp__thumb { display: grid; place-items: center; width: 56px; height: 56px; padding: 4px; border: 1.5px solid var(--line-2); background: var(--white); }
.insp__thumb img { width: 100%; height: 100%; object-fit: contain; }
.insp__thumb--3d span { font-family: var(--fd); font-weight: 900; font-size: 1.2rem; }
.insp__thumb[aria-pressed="true"] { border-color: var(--ink); box-shadow: inset 0 0 0 1.5px var(--ink); }
.insp__help { position: absolute; right: 16px; bottom: 20px; margin: 0; color: var(--muted); font-size: 13px; font-weight: 600; }
.insp__info { position: relative; overflow-y: auto; padding: 34px 34px 28px; }
.insp__close { position: absolute; top: 14px; right: 14px; display: grid; place-items: center; width: 44px; height: 44px; border: 0; background: var(--steel); }
.insp__close:hover { background: var(--ink); color: var(--white); }
.insp__zone { margin: 0 0 6px; color: var(--red-ui); font-size: 13px; font-weight: 800; letter-spacing: .1em; text-transform: uppercase; }
.insp__name { margin: 0 48px .3em 0 !important; font-family: var(--fd); font-weight: 900; font-size: clamp(2rem, 3.2vw, 2.9rem); line-height: .92; text-transform: uppercase; }
.insp__meta { margin: 0 0 22px; }
.insp__packs { margin: 0 0 16px; padding: 0; border: 0; }
.insp__packs legend { margin-bottom: 8px; font-size: 12px; font-weight: 800; letter-spacing: .1em; text-transform: uppercase; color: var(--muted); }
.insp__row { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; }
.insp__add { flex: 1; min-width: 200px; }
.insp__add.is-done { --b: var(--green); }
.insp__note { margin: 14px 0 0; color: var(--muted); font-size: 14px; }
.insp__same { margin-top: 26px; padding-top: 18px; border-top: 1px solid var(--line); }
.insp__same h3 { margin: 0 0 10px !important; font-size: 12px; font-weight: 800; letter-spacing: .1em; text-transform: uppercase; color: var(--muted); }
.insp__same ul { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 8px; margin: 0; padding: 0; list-style: none; }
.insp__other { display: flex; flex-direction: column; gap: 6px; width: 100%; padding: 6px; border: 1.5px solid var(--line); background: var(--white); text-align: left; font-size: 12px; font-weight: 700; line-height: 1.25; }
.insp__other img, .insp__other canvas { width: 100%; height: 70px; object-fit: contain; background: var(--steel); }
.insp__other span { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.insp__other:hover { border-color: var(--ink); }
@media (max-width: 860px) {
	.insp { padding: 0; place-items: stretch; }
	.insp__card { grid-template-columns: minmax(0, 1fr); grid-template-rows: 44svh minmax(0, 1fr); height: 100%; }
	.insp__info { padding: 22px var(--gut) 28px; }
	.insp__close { top: auto; bottom: calc(100% + 12px); right: 12px; background: var(--white); box-shadow: 0 6px 20px -8px rgba(0, 0, 0, .5); }
	.insp__help { display: none; }
	.insp__same ul { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

/* ---------- The spaza page: the shop is the page ---------- */
.slot-spaza .hdr, .slot-spaza .ftr { display: none; }
html:has(.slot-spaza) { overflow: hidden; }
.spz .shop { height: calc(100svh - var(--top)); }

/* ---------- Home: the rail of packs on a shelf ---------- */
.rail { padding: var(--sec) 0 calc(var(--sec) * .7); overflow: hidden; background: var(--white); }
.rail__head { display: grid; gap: 12px 40px; margin-bottom: 36px; }
@media (min-width: 960px) { .rail__head { grid-template-columns: minmax(0, 1fr) minmax(0, 460px); align-items: end; } .rail__head .lead { margin: 0; } }
.rail__track { overflow-x: auto; scrollbar-width: none; cursor: grab; outline: none; }
.rail__track::-webkit-scrollbar { display: none; }
.rail__track.is-drag { cursor: grabbing; }
.rail__row { display: flex; width: max-content; padding: 20px 0 6px; }
.rail__item { position: relative; flex: none; width: 210px; padding: 0 14px; }
@media (max-width: 640px) { .rail__item { width: 160px; padding: 0 10px; } }
.rail__img { position: relative; display: block; height: 230px; margin: 0 -14px; padding: 0 22px; }
.rail__img::after { content: ""; position: absolute; left: 0; right: 0; bottom: -14px; height: 14px; background: var(--steel-2); box-shadow: 0 -5px 0 var(--red-ui), 0 10px 18px -12px rgba(0, 0, 0, .4); }
.rail__img::before { content: ""; position: absolute; left: 22%; right: 22%; bottom: -2px; height: 14px; border-radius: 50%; background: rgba(17, 17, 17, .22); filter: blur(5px); transition: transform .5s var(--ease), opacity .5s; }
.rail__img img, .rail__img canvas { position: relative; z-index: 1; display: block; width: 100%; height: 100%; object-fit: contain; object-position: center bottom; transition: transform .55s var(--ease); }
.rail__item:hover .rail__img img, .rail__item:hover .rail__img canvas { transform: translateY(-14px) rotate(-2.5deg); }
.rail__item:hover .rail__img::before { transform: scale(.75); opacity: .6; }
@media (max-width: 640px) { .rail__img { height: 170px; margin: 0 -10px; padding: 0 16px; } }
.rail__name { margin: 26px 0 6px !important; font-family: var(--fb) !important; font-size: 15px; font-weight: 750; line-height: 1.3; text-transform: none !important; letter-spacing: 0 !important; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.rail__name a { color: var(--ink) !important; text-decoration: none; }
.rail__meta { margin: 0; }
.rail__add { position: absolute; top: 4px; right: 10px; z-index: 2; display: grid; place-items: center; width: 40px; height: 40px; border: 0; background: var(--ink); color: var(--white); opacity: 0; transform: translateY(6px); transition: opacity .25s, transform .3s var(--ease), background-color .2s; }
.rail__item:hover .rail__add, .rail__add:focus-visible { opacity: 1; transform: none; }
@media (hover: none) { .rail__add { opacity: 1; transform: none; } }
.rail__add:hover { background: var(--red-ui); }
.rail__add.is-done { background: var(--green); opacity: 1; }

/* ---------- Home: find your way (the shop model) ---------- */
.find { background: var(--white); border-top: 1px solid var(--line); }
.find__in { display: grid; gap: 30px; align-items: center; }
@media (min-width: 1040px) { .find__in { grid-template-columns: minmax(0, 0.8fr) minmax(0, 1.3fr); gap: 40px; } }
.find__list { margin: 26px 0 0; padding: 0; list-style: none; border-top: 2px solid var(--ink); }
.find__dept { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 2px 16px; padding: 12px 0; border-bottom: 1px solid var(--line); color: var(--ink) !important; text-decoration: none; transition: padding .3s var(--ease); }
.find__name { font-family: var(--fd); font-weight: 850; font-size: 1.6rem; line-height: 1; text-transform: uppercase; letter-spacing: .01em; transition: color .2s; }
.find__d { grid-column: 1; color: var(--muted); font-size: 14px; }
.find__n { grid-column: 2; grid-row: 1 / 3; align-self: center; font-size: 13px; font-weight: 800; color: var(--muted); }
.find__dept:hover, .find__dept.is-on { padding-left: 10px; }
.find__dept:hover .find__name, .find__dept.is-on .find__name { color: var(--red-ui); }
.find__fig { margin: 0; }
.find__cap { display: flex; justify-content: space-between; gap: 10px; margin-top: 4px; color: var(--muted); font-size: 13px; font-weight: 700; }
.find__cap span:first-child { color: var(--ink); }
.map.iso { --anatomy-page: #fff; --anatomy-card: #fff; --anatomy-paper: #fff; --anatomy-red: #d7141a; }
.map .map__hot { fill: transparent; cursor: pointer; }
.map .map__route { display: none; stroke: var(--red-ui); stroke-width: 1.6px; stroke-dasharray: 2 5; animation: iso-flow 1.4s linear infinite; }
.map .map__route.is-on { display: inline; }
.map [data-packs] { transition: transform .6s var(--ease); }
.map [data-packs].is-on .iso-top { fill: var(--yellow); }
.map [data-packs].is-on .iso-shade { fill: #e2d600; }
.map [data-puck] { transition: transform 1.1s var(--ease); }

/* ---------- Product page: the pack on a turntable ---------- */
.prod__view { position: relative; }
.prod__tt { position: relative; aspect-ratio: 1 / 1.02; background: radial-gradient(70% 60% at 50% 40%, #ffffff 0%, #e2e5e4 75%); }
.prod__canvas { position: absolute; inset: 0; width: 100% !important; height: 100% !important; touch-action: none; cursor: grab; }
.prod__photo { position: absolute; inset: 8%; width: 84%; height: 84%; object-fit: contain; }
.no-webgl .prod__photo { display: block !important; }
.no-webgl .prod__canvas, .no-webgl .prod__views { display: none; }
.prod__flat { position: absolute; inset: 8%; width: 84%; height: 84%; display: none; }
.no-webgl .prod__flat { display: block; }
.prod__views { display: flex; gap: 6px; margin-top: 10px; }
.prod__help { margin: 8px 0 0; color: var(--muted); font-size: 13px; }

/* Product cards: photos when the product has one. */
.pcard__photo { position: absolute; inset: 8% 10% 12%; width: 80%; height: 80%; object-fit: contain; object-position: center bottom; transition: transform .45s var(--ease); }
.pcard:hover .pcard__photo { transform: translateY(-6px) rotate(-1.5deg); }

/* Page transitions between pages of the site. */
@view-transition { navigation: auto; }
::view-transition-old(root) { animation: dvs-vt-out .28s var(--ease-io) both; }
::view-transition-new(root) { animation: dvs-vt-in .42s var(--ease) both; }
@keyframes dvs-vt-out { to { opacity: 0; transform: translateY(-8px); } }
@keyframes dvs-vt-in { from { opacity: 0; transform: translateY(12px); } }
@media (prefers-reduced-motion: reduce) { ::view-transition-old(root), ::view-transition-new(root) { animation: none; } }
@media (max-width: 1039px) {
	.find__fig { order: -1; overflow: hidden; margin: 0 calc(-1 * var(--gut)); padding: 0 var(--gut); }
	.find__fig .map svg { width: 124%; margin: -6% -12% -4%; }
}
@media (max-width: 620px) {
	.shop__leave { padding: 0 12px; }
	.shop__leave span { display: none; }
	.shop__bar { gap: 6px; }
}
@media (max-width: 860px) {
	.insp__info { position: static; }
	.insp__close { top: 12px; bottom: auto; right: 12px; z-index: 3; background: var(--white); }
}
.shop-embed { position: relative; min-height: 420px; overflow: hidden; }
.shop-embed .shop { position: absolute; inset: 0; }
.shop-embed__go { position: absolute; z-index: 5; left: 50%; bottom: 24px; transform: translateX(-50%); }
.in-shop .shop-embed__go { opacity: 0; pointer-events: none; }
.chip--link > span { min-height: 0; padding: 0; border: 0; background: none; }