:root {
  --night:#050409; --footer:#191723; --blush:#f4e6e6; --ink:#060606;
  --white:#fff; --muted:#afbac4; --subtle:#554c53; --line:#746b73;
  --peach:#f2b18a; --button:linear-gradient(173deg,#f2b18a 39%,#f9f6f4 165%);
  --space:clamp(20px,7.78vw,112px); --section:clamp(72px,8vw,120px);
  font-family:Inter,"Helvetica Neue",Arial,sans-serif; color:var(--white); background:var(--night);
}
* {box-sizing:border-box}
html {scroll-padding-top:18px}
body {margin:0;font-size:16px;line-height:1.55}
a {color:inherit}
button,select,input,textarea {font:inherit}
button,select,summary {cursor:pointer}
button,a.btn,.bag {touch-action:manipulation}
button {color:inherit}
button:disabled {cursor:default;opacity:.48}
:focus-visible {outline:3px solid #ca622a;outline-offset:3px}
[hidden] {display:none!important}
img {display:block;max-width:100%}
h1,h2,h3,p {margin:0}
h1,h2,h3 {line-height:1.12;text-wrap:balance}
h1 {font-size:clamp(48px,4.45vw,68px);letter-spacing:-.032em}
h2 {font-size:clamp(36px,3.9vw,56px);font-weight:550;letter-spacing:-.045em}
h3 {font-size:clamp(20px,1.65vw,24px);letter-spacing:-.025em}
p {margin-top:12px}
.wrap {max-width:1660px;padding-inline:var(--space);margin-inline:auto}
.skip,.sr {position:absolute;clip-path:inset(50%);width:1px;height:1px;overflow:hidden}
.skip:focus {clip-path:none;width:auto;height:auto;background:white;color:black;z-index:10;padding:12px}
header {background:var(--blush);color:var(--ink);position:relative;z-index:3}
.mast,.nav-inner,.brand,.phone,.location,.nav-actions,.bag,.btn,.section-head,.track-controls,.dialog-head,.total,.product-title {display:flex;align-items:center}
.mast {min-height:56px;justify-content:space-between;gap:18px}
.mast .location,.mast .phone {width:32%;gap:8px;font-size:13px;color:var(--subtle)}
.mast .phone {justify-content:flex-end}
.phone a,.brand,nav a,.nav-actions a,footer a {text-decoration:none}
.brand {gap:7px;font-size:clamp(18px,1.95vw,28px);line-height:1;font-weight:900;text-transform:uppercase;letter-spacing:-.055em;white-space:nowrap}
.brand svg {width:1.15em;height:1.15em;stroke-width:2.8}
.nav-row {border-top:1px solid #d8caca}
.nav-inner {min-height:62px;justify-content:space-between;gap:16px}
nav,.nav-actions {display:flex;align-items:center;gap:clamp(16px,2.25vw,34px);font-weight:550;font-size:14px}
nav a:hover,footer a:hover,.category-links a:hover {text-decoration:underline;text-underline-offset:4px}
.nav-actions {gap:12px}
.nav-actions>a:first-child,.bag {padding:7px 20px;border:1px solid var(--ink);border-radius:3px}
.bag {background:var(--ink);color:white;gap:3px;justify-content:center}
.bag svg {margin-right:4px}
.menu {display:none;background:none;border:0}
.btn,.dark-btn {display:inline-flex;align-items:center;justify-content:center;text-decoration:none;border:0;min-height:48px;padding:12px 25px;font-weight:700}
.btn {text-transform:uppercase;font-size:13px;letter-spacing:.03em}
.peach {background:var(--button);color:var(--ink)}
.outline {border:1px solid currentColor;border-radius:3px;color:white}
.btn,.dark-btn,.bag {transition:transform .25s ease}
.btn:hover,.dark-btn:hover,.bag:hover {transform:translateY(-2px)}
.dark-btn {background:var(--ink);color:white}
.hero {position:relative;isolation:isolate;overflow:hidden;background:#493b36}
.hero>img,.hero::after {position:absolute;inset:0;width:100%;height:100%;object-fit:cover;z-index:-2;object-position:center top}
.hero::after {content:"";z-index:-1;background:linear-gradient(0deg,var(--night),transparent 47%),linear-gradient(90deg,transparent 45%,rgba(5,4,9,.24))}
.hero-layout {min-height:clamp(540px,43.7vw,700px);display:grid;grid-template-columns:57% 43%;align-items:center;padding-bottom:5%}
.hero-heading {padding:32px 0 0;grid-column:2}
.hero-actions,.category-links {display:flex;gap:15px;flex-wrap:wrap}
.hero-actions {margin-top:40px}
.hero-actions a {min-width:148px}
.hero-caption {max-width:430px;margin-left:9%;align-self:end;color:#f0e8e5;font-size:clamp(18px,1.65vw,24px);line-height:1.35}
.category-links {margin-top:14px;font-size:15px}
.category-links a {text-underline-offset:5px}
.story,.questions,.guide {background:radial-gradient(ellipse 12% 35% at 0 53%,#49332a,transparent)}
.story {padding-block:var(--section)}
.split {display:grid;grid-template-columns:1fr 41%;gap:9%;align-items:center}
.split>img {width:100%;height:auto;aspect-ratio:4/5;object-fit:cover;border-radius:5px}
.story p,.guide>p,.questions>p,.guide-grid p,.questions details p {color:var(--muted)}
.split>div>p {max-width:535px;margin-top:25px}
.features,.guide-grid {display:grid;grid-template-columns:1fr 1fr;gap:clamp(20px,4vw,56px);margin-top:38px}
.features svg {color:var(--peach);width:47px;height:47px;margin-bottom:14px}
.features p {font-size:15px}
.catalogue {background:var(--blush);color:var(--ink);padding-block:clamp(64px,7vw,100px);overflow:hidden}
.section-head,.track-controls,.dialog-head,.total,.product-title {justify-content:space-between;gap:16px}
.section-head p,.product p {color:var(--subtle)}
.section-head .btn {min-width:150px}
.product-track {display:grid;grid-auto-flow:column;grid-auto-columns:calc((100% - 64px)/3.4);gap:28px;overflow-x:auto;scroll-snap-type:x proximity;scrollbar-width:thin;scrollbar-color:#a69496 transparent;margin-top:36px;padding:4px 4px 12px}
.product-track.expanded {grid-auto-flow:row;grid-template-columns:repeat(3,minmax(0,1fr));overflow:visible}
.product {position:relative;scroll-snap-align:start;min-width:0;display:flex;flex-direction:column}
.product>img {width:100%;height:auto;aspect-ratio: .9;object-fit:cover;border-radius:5px;background:#897776}
.product-title {align-items:baseline;margin-top:15px}
.product-title h3 {font-size:21px}
.product-title strong {white-space:nowrap}
.product p,.product details,.product form {font-size:14px}
.product p {margin:8px 0 12px}
.product details {margin-top:auto;padding-block:8px}
details>summary {font-weight:600}
.product dl {display:grid;grid-template-columns:auto 1fr;gap:4px 12px}
.product dd {margin:0}
.add {display:flex;gap:8px;margin-top:6px}
.add select,.add button {flex:1;min-width:0;padding:10px 5px;min-height:42px}
.add select {background:transparent;color:var(--ink);border:1px solid var(--line)}
.track-controls {margin-top:22px;font-size:13px;font-variant-numeric:tabular-nums}
.track-controls button {border:1px solid var(--line);background:none;border-radius:50%;width:44px;height:44px;margin-left:10px;font-size:20px}
.guide {padding-block:var(--section) 26px}
.guide-grid {margin-top:44px}
.guide-grid h3 {border-top:2px solid var(--peach);padding-top:18px}
.guide-grid details {margin-top:16px}
.questions {padding:var(--section) var(--space);text-align:center}
.questions>div {max-width:930px;margin:32px auto 0;text-align:left}
.questions details {border:1px solid var(--line);padding:20px 24px;margin:10px 0}
.questions summary {list-style:none;display:flex;justify-content:space-between;gap:18px;font-size:18px}
.questions summary::-webkit-details-marker {display:none}
.questions summary::after {content:'⊕'}
.questions details[open] summary::after {content:'⊖'}
footer {background:var(--footer);padding:65px 0 23px;color:#c1c3cf}
.footer-grid {display:grid;grid-template-columns:1.7fr .65fr .9fr 1.4fr;gap:30px}
footer .brand,footer h3 {color:white}
footer h3 {font-size:17px;margin-bottom:15px}
footer a,footer address {display:block;width:fit-content;margin-bottom:7px;font-style:normal;overflow-wrap:anywhere}
footer .brand {display:inline-flex;font-size:22px}
footer p {margin:10px 0 18px}
footer .btn {font-size:12px;min-height:38px;padding:8px 15px}
.legal {margin-top:34px;font-size:12px}
dialog {max-width:min(690px,100%);width:690px;max-height:92dvh;padding:clamp(18px,3vw,38px);border:0;background:var(--blush);color:var(--ink);overscroll-behavior:contain}
dialog::backdrop {background:#050409c9}
dialog[open] {animation:enter .24s ease-out}
@keyframes enter {from {opacity:0;transform:translateY(12px)}}
.dialog-head {margin-bottom:24px}
.dialog-head h2 {font-size:34px}
.close,.quantity button,.remove,.back {background:none;border:1px solid var(--line);padding:5px 12px}
.close {font-size:23px}
.bag-line {display:grid;grid-template-columns:1fr auto auto;align-items:center;gap:12px;border-bottom:1px solid #cbbec0;padding:13px 0}
.bag-line p {margin:3px 0}
.quantity {display:flex;align-items:center;gap:8px}
.total,#summary {padding:18px 0}
#summary p {margin:3px 0}
.fields {display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}
.fields label,.fields input,.fields textarea,.error {display:block;width:100%}
.fields input,.fields textarea {margin-top:4px;padding:9px;color:var(--ink);background:#fff;border:1px solid var(--line)}
.wide {grid-column:1/-1}
fieldset {margin:18px 0;padding:12px;border:1px solid var(--line)}
fieldset label {white-space:nowrap;margin-right:14px}
.error {color:#872b24}
#order-form>.btn,#confirmed>.btn {margin-top:18px}
.toast {position:fixed;bottom:18px;right:18px;background:var(--ink);color:white;padding:12px 18px;z-index:5;pointer-events:none;opacity:0;transform:translateY(8px);transition:opacity .2s,transform .2s}
.toast.show {opacity:1;transform:none}
.privacy {padding-block:var(--section)}
.privacy>p,.policy-grid article p {color:#c2c9cf}
.policy-grid {display:grid;grid-template-columns:1fr 2.5fr;gap:8%;margin-top:48px}
.policy-grid aside a {display:block;margin:8px 0;text-underline-offset:4px}
.policy-grid section {margin-bottom:34px}
.policy-grid h2 {font-size:28px}
@media(max-width:960px) {
  .mast .location {font-size:11px}
  .hero-layout {grid-template-columns:52% 48%}
  .hero-caption {margin-left:0;max-width:80%}
  .product-track {grid-auto-columns:40%}
  .footer-grid {grid-template-columns:1.4fr 1fr}
  .features {gap:18px}
}
@media(max-width:700px) {
  :root {--space:20px}
  .mast {min-height:53px;gap:5px}
  .mast .location,.mast .phone svg {display:none}
  .mast .phone {width:auto;font-size:12px}
  .nav-inner {min-height:48px}
  .menu {display:block;padding:8px}
  header nav {display:none;position:absolute;top:100%;left:0;right:0;background:var(--blush);padding:16px 20px;box-shadow:0 8px 12px #0003}
  .menu-open nav {display:grid;gap:0}
  nav a {padding:9px}
  .hero-layout {min-height:615px;display:flex;flex-direction:column-reverse;align-items:stretch;justify-content:flex-start;gap:20px;padding-bottom:30px}
  .hero>img {object-position:34% center}
  .hero::after {background:linear-gradient(0deg,var(--night) 0%,#050409ba 36%,transparent 73%)}
  .hero-heading {padding:0}
  .hero-heading h1 {font-size:48px}
  .hero-heading h1 br:first-child {display:none}
  .hero-actions {margin-top:18px;gap:10px}
  .hero-actions a {min-width:0;padding:10px 19px}
  .hero-caption {align-self:start;max-width:360px;font-size:16px}
  .category-links {margin-top:8px}
  .split,.guide-grid,.policy-grid {grid-template-columns:1fr;gap:32px}
  .split>img {aspect-ratio:1.2}
  .section-head {align-items:flex-end}
  .section-head .btn {min-width:0;white-space:nowrap;padding:9px 14px}
  .product-track {grid-auto-columns:83%;gap:15px}
  .product-track.expanded {grid-template-columns:minmax(0,1fr)}
  .questions details {padding:15px}
  .questions summary {font-size:16px}
  .footer-grid {grid-template-columns:1fr 1fr;gap:26px 16px}
  .footer-grid>div:first-child,.footer-grid>div:last-child {grid-column:1/-1}
  .fields {grid-template-columns:minmax(0,1fr)}
  .bag-line {grid-template-columns:1fr auto}
  .remove {justify-self:start}
  .toast {max-width:calc(100% - 36px)}
}
@media(prefers-reduced-motion:reduce) {
  *,*::before,*::after {animation:none!important;transition:none!important;scroll-behavior:auto!important}
  .btn:hover,.dark-btn:hover,.bag:hover {transform:none}
}
