/* Generated by design-system/build_store.py. Edit the design system, not this file. */
:root {
  --ink: #121214;
  --ink-soft: #4A4C55;
  --ink-muted: #62656F;
  --paper: #FFFFFF;
  --tile: #F4F5F7;
  --stone: #EEEFEA;
  --hairline: #E3E4E8;
  --control-line: #8C8F9A;
  --indigo: #344C7A;
  --indigo-deep: #1C2A45;
  --on-indigo: #FFFFFF;
  --on-indigo-soft: #CDD6E6;
  --heat-straw: #EBD49A;
  --heat-bronze: #B8733F;
  --heat-plum: #7A2F95;
  --heat-blue: #2F5597;
  --signal: #C8000E;
  --on-signal: #FFFFFF;
  --ok: #1B5E33;
  --ok-tint: #E1EFE5;
  --wait: #6E4600;
  --wait-tint: #F6EAD0;
  --shadow-float: 0 12px 32px rgba(18, 18, 20, 0.12);
  --shadow-sheet: 0 24px 64px rgba(18, 18, 20, 0.24);
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-6: 24px;
  --space-8: 32px;
  --space-12: 48px;
  --space-16: 64px;
  --space-24: 96px;
  --space-32: 128px;
  --radius-sm: 12px;
  --radius-tile: 20px;
  --radius-panel: 28px;
  --radius-pill: 9999px;
  --font-display: Cormorant, "Iowan Old Style", Georgia, serif;
  --font-sans: Outfit, "Century Gothic", "Segoe UI", sans-serif;
}

/* Store components. Every value comes from tokens.css. */

.pz-eyebrow { font: 500 12px/1.35 var(--font-sans); letter-spacing: .14em; text-transform: uppercase; }
.pz-serif { font-family: var(--font-display); font-weight: 500; }
.pz-serif em { font-style: italic; }

/* Button */
.pz-btn {
  display: inline-flex; align-items: center; justify-content: center; gap: var(--space-2);
  min-height: 48px; padding: 0 var(--space-6); border: 1px solid transparent; border-radius: var(--radius-pill);
  font: 500 15px/1 var(--font-sans); color: var(--paper); background: var(--ink); text-decoration: none; cursor: pointer;
  transition: background-color .18s ease, color .18s ease, border-color .18s ease, transform .18s ease;
}
.pz-btn:hover { background: var(--indigo); }
.pz-btn:active { transform: scale(.98); }
.pz-btn svg { width: 18px; height: 18px; flex: none; }
.pz-btn--straw { color: var(--ink); background: var(--heat-straw); }
.pz-btn--straw:hover { color: var(--paper); background: var(--ink); }
.pz-btn--ghost { color: var(--ink); background: transparent; border-color: var(--control-line); }
.pz-btn--ghost:hover { color: var(--paper); background: var(--ink); border-color: var(--ink); }
.pz-btn--block { width: 100%; }
.pz-btn[disabled] { opacity: .45; cursor: not-allowed; }

/* Round button: the cart button on a tile, and header icons */
.pz-round {
  position: relative; display: inline-grid; place-items: center; width: 44px; height: 44px; padding: 0; flex: none;
  border: 0; border-radius: var(--radius-pill); color: var(--paper); background: var(--ink); cursor: pointer;
  transition: background-color .18s ease, transform .18s ease;
}
.pz-round:hover { background: var(--indigo); transform: scale(1.06); }
.pz-round svg { width: 18px; height: 18px; }
.pz-round--quiet { color: var(--ink); background: transparent; }
.pz-round--quiet:hover { color: var(--ink); background: var(--tile); transform: none; }
.pz-round__count {
  position: absolute; top: 2px; right: 0; min-width: 18px; height: 18px; padding: 0 5px; border-radius: var(--radius-pill);
  font: 600 11px/18px var(--font-sans); text-align: center; color: var(--on-signal); background: var(--signal);
}

/* Filter pill: The Shop's rounded tags */
.pz-pill {
  display: inline-flex; align-items: center; min-height: 36px; padding: 0 14px; border: 0; border-radius: var(--radius-pill);
  font: 400 14px/1 var(--font-sans); color: var(--ink); background: var(--tile); cursor: pointer;
  transition: background-color .15s ease, color .15s ease;
}
.pz-pill:hover { background: var(--hairline); }
.pz-pill[aria-pressed="true"] { color: var(--paper); background: var(--ink); }
.pz-pill__n { margin-left: 6px; font-size: 12px; opacity: .65; font-variant-numeric: tabular-nums; }
.pz-pills { display: flex; flex-wrap: wrap; gap: var(--space-2); }

/* Status pill */
.pz-status {
  display: inline-flex; align-items: center; height: 26px; padding: 0 10px; border-radius: var(--radius-pill);
  font: 500 12px/1 var(--font-sans); white-space: nowrap;
}
.pz-status--stock { color: var(--ok); background: var(--ok-tint); }
.pz-status--wait { color: var(--wait); background: var(--wait-tint); }
.pz-status--best { color: var(--paper); background: var(--ink); }
.pz-status--sale { color: var(--on-signal); background: var(--signal); }

/* Product card: wellina's tile, The Shop's status pills */
.pz-card {
  position: relative; display: flex; flex-direction: column; min-width: 0; padding: var(--space-3) var(--space-4) var(--space-4);
  border-radius: var(--radius-tile); background: var(--tile); isolation: isolate;
}
.pz-card__badges { position: absolute; z-index: 2; top: var(--space-3); left: var(--space-3); display: flex; flex-wrap: wrap; gap: var(--space-1); }
.pz-card__stage { position: relative; display: grid; place-items: center; aspect-ratio: 1 / .92; margin-top: var(--space-6); }
.pz-card__stage::after {
  content: ""; position: absolute; z-index: -1; left: 16%; right: 16%; bottom: 3%; height: 11%;
  background: radial-gradient(closest-side, rgba(18, 18, 20, .2), rgba(18, 18, 20, .07) 55%, rgba(18, 18, 20, 0));
}
.pz-card__img {
  width: 84%; height: 92%; object-fit: contain; mix-blend-mode: multiply;
  transition: transform .45s cubic-bezier(.2, .7, .2, 1);
}
.pz-card:hover .pz-card__img { transform: translateY(-6px) scale(1.03); }
.pz-card__meta { display: flex; flex-direction: column; flex: 1; gap: 2px; margin-top: var(--space-3); padding-right: 52px; }
.pz-card__type { font: 400 12px/1.35 var(--font-sans); color: var(--ink-muted); }
.pz-card__title {
  display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; overflow: hidden;
  margin: 0; font: 500 14px/1.4 var(--font-sans); color: var(--ink); text-decoration: none;
}
.pz-card__title::before { content: ""; position: absolute; inset: 0; border-radius: var(--radius-tile); }
.pz-card__title:focus-visible { outline: none; }
.pz-card__title:focus-visible::before { outline: 2px solid var(--indigo); outline-offset: 2px; }
.pz-card__price { margin-top: var(--space-1); font: 500 16px/1.3 var(--font-sans); font-variant-numeric: tabular-nums; color: var(--ink); }
.pz-card__was { margin-left: 6px; font-size: 13px; font-weight: 400; color: var(--ink-muted); text-decoration: line-through; }
.pz-card__add { position: absolute; z-index: 2; right: var(--space-3); bottom: var(--space-3); }

/* Category circle: Minimog's quick picks */
.pz-cat { display: grid; justify-items: center; gap: var(--space-3); width: 100%; padding: 0; border: 0; color: var(--ink); background: none; text-decoration: none; cursor: pointer; }
.pz-cat__disc { display: grid; place-items: center; width: 100%; max-width: 148px; aspect-ratio: 1; overflow: hidden; border-radius: var(--radius-pill); background: var(--tile); transition: background-color .2s ease; }
.pz-cat:hover .pz-cat__disc { background: var(--stone); }
.pz-cat__disc img { width: 70%; height: 70%; object-fit: contain; mix-blend-mode: multiply; transition: transform .35s cubic-bezier(.2, .7, .2, 1); }
.pz-cat:hover .pz-cat__disc img { transform: scale(1.07); }
.pz-cat__name { font: 500 14px/1.3 var(--font-sans); text-align: center; }
.pz-cat__n { display: block; font-size: 12px; font-weight: 400; color: var(--ink-muted); }

/* Announcement bar */
.pz-announce { color: var(--on-indigo); background: var(--indigo-deep); font: 400 13px/1.3 var(--font-sans); }
.pz-announce__row { display: flex; align-items: center; justify-content: space-between; gap: var(--space-6); max-width: 1440px; min-height: 38px; margin: 0 auto; padding: 0 var(--space-8); }
.pz-announce__mid { color: var(--on-indigo-soft); }

/* Header: floats over the hero */
.pz-nav {
  display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: var(--space-4); min-height: 92px;
  padding: 6px var(--space-3) 6px var(--space-6); border-radius: var(--radius-pill); background: var(--paper); box-shadow: var(--shadow-float);
}
.pz-nav__links { display: flex; gap: var(--space-1); justify-self: start; }
.pz-nav__link { padding: 10px 12px; border: 0; border-radius: var(--radius-pill); font: 400 14px/1 var(--font-sans); color: var(--ink); background: none; text-decoration: none; cursor: pointer; }
.pz-nav__link:hover { background: var(--tile); }
.pz-nav__link[aria-current="page"] { font-weight: 500; }
.pz-nav__logo { display: block; }
.pz-nav__logo img { display: block; height: 80px; width: auto; }
.pz-nav__tools { display: flex; align-items: center; gap: var(--space-1); justify-self: end; }

/* Filter group: The Shop's sidebar */
.pz-filter { padding: var(--space-6) 0; border-bottom: 1px solid var(--hairline); }
.pz-filter:first-child { padding-top: 0; }
.pz-filter:last-child { border-bottom: 0; }
.pz-filter__title { margin: 0 0 var(--space-3); font: 500 14px/1.3 var(--font-sans); color: var(--ink); }

/* Trust strip */
.pz-trust { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--space-6); }
.pz-trust__item { display: grid; align-content: start; gap: var(--space-2); min-width: 0; }
.pz-trust__item svg { width: 24px; height: 24px; color: var(--indigo); }
.pz-trust__title { margin: 0; font: 500 16px/1.3 var(--font-sans); color: var(--ink); }
.pz-trust__text { margin: 0; font: 400 14px/1.45 var(--font-sans); color: var(--ink-soft); }

/* Weld bead: the signature. Rippled like a stacked TIG bead, coloured by heat tint. */
.pz-bead {
  display: block; height: 14px; border-radius: var(--radius-pill);
  background: linear-gradient(90deg, var(--heat-straw) 0 22%, var(--heat-bronze) 46%, var(--heat-plum) 72%, var(--heat-blue) 100%);
  -webkit-mask: radial-gradient(circle at 0 50%, #0000 6px, #000 6.6px) 0 0 / 11px 100% repeat-x;
  mask: radial-gradient(circle at 0 50%, #0000 6px, #000 6.6px) 0 0 / 11px 100% repeat-x;
}

/* Footer: HIKONE's four columns */
.pz-footer { color: var(--ink); background: var(--stone); }
.pz-footer__grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--space-8); }
.pz-footer__col { min-width: 0; }
.pz-footer__head { margin: 0 0 var(--space-3); font: 500 12px/1.35 var(--font-sans); letter-spacing: .14em; text-transform: uppercase; }
.pz-footer__list { display: grid; gap: var(--space-2); margin: 0; padding: 0; list-style: none; font: 400 14px/1.45 var(--font-sans); color: var(--ink-soft); }
.pz-footer__list a, .pz-footer__list button { padding: 0; border: 0; font: inherit; color: inherit; background: none; text-decoration: none; cursor: pointer; }
.pz-footer__list a:hover, .pz-footer__list button:hover { color: var(--indigo); }

/* Quote line and field: the quote drawer */
.pz-line { display: grid; grid-template-columns: 64px minmax(0, 1fr) auto; gap: var(--space-3); align-items: start; padding: var(--space-3) 0; border-bottom: 1px solid var(--hairline); }
.pz-line__thumb { display: grid; place-items: center; width: 64px; height: 64px; border-radius: var(--radius-sm); background: var(--tile); }
.pz-line__thumb img { width: 80%; height: 80%; object-fit: contain; mix-blend-mode: multiply; }
.pz-line__title { margin: 0; font: 500 14px/1.35 var(--font-sans); }
.pz-line__sub { margin: 2px 0 0; font: 400 12px/1.35 var(--font-sans); color: var(--ink-muted); }
.pz-line__price { font: 500 14px/1.35 var(--font-sans); font-variant-numeric: tabular-nums; white-space: nowrap; }
.pz-qty { display: inline-flex; align-items: center; margin-top: var(--space-2); border-radius: var(--radius-pill); background: var(--tile); }
.pz-qty button { width: 32px; height: 32px; border: 0; border-radius: var(--radius-pill); font: 500 16px/1 var(--font-sans); color: var(--ink); background: none; cursor: pointer; }
.pz-qty button:hover { background: var(--hairline); }
.pz-qty span { min-width: 24px; text-align: center; font: 500 13px/1 var(--font-sans); font-variant-numeric: tabular-nums; }
.pz-field { display: grid; gap: var(--space-1); font: 500 13px/1.3 var(--font-sans); color: var(--ink); }
.pz-field input, .pz-field select, .pz-field textarea {
  width: 100%; min-height: 46px; padding: 10px 14px; border: 1px solid var(--control-line); border-radius: var(--radius-sm);
  font: 400 15px/1.3 var(--font-sans); color: var(--ink); background: var(--paper);
}

.pz-btn:focus-visible, .pz-round:focus-visible, .pz-pill:focus-visible, .pz-cat:focus-visible, .pz-nav__link:focus-visible,
.pz-qty button:focus-visible, .pz-field input:focus-visible, .pz-field select:focus-visible,
.pz-field textarea:focus-visible, .pz-footer__list a:focus-visible, .pz-footer__list button:focus-visible, .pz-nav__logo:focus-visible {
  outline: 2px solid var(--indigo); outline-offset: 2px;
}

@media (prefers-reduced-motion: reduce) {
  .pz-card__img, .pz-cat__disc img, .pz-round, .pz-btn { transition: none; }
  .pz-card:hover .pz-card__img, .pz-cat:hover .pz-cat__disc img, .pz-round:hover { transform: none; }
}

/* Storefront layout. Components live in project/components/bundle.css. */
*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }
body { margin: 0; font: 400 16px/1.5 var(--font-sans); color: var(--ink); background: var(--paper); -webkit-font-smoothing: antialiased; }
body.is-locked { overflow: hidden; }
img { max-width: 100%; }
h1, h2, h3, p { margin: 0; }
button, input, select, textarea { font-family: inherit; }
[hidden] { display: none !important; }
.wrap { width: 100%; max-width: 1440px; margin-inline: auto; padding-inline: var(--space-8); }
.skip { position: absolute; left: var(--space-4); top: -64px; z-index: 50; padding: var(--space-3) var(--space-4); border-radius: var(--radius-sm); color: var(--paper); background: var(--ink); }
.skip:focus { top: var(--space-2); }
.t-xl { font: 500 clamp(52px, 7.4vw, 112px)/.98 var(--font-display); letter-spacing: -.02em; text-wrap: balance; }
.t-lg { font: 500 clamp(40px, 4.6vw, 64px)/1.04 var(--font-display); letter-spacing: -.015em; text-wrap: balance; }
.t-md { font: 500 clamp(32px, 3vw, 40px)/1.1 var(--font-display); letter-spacing: -.01em; }
.t-xl em, .t-lg em, .t-md em { font-style: italic; }
.t-xl, .t-lg, .t-md, .masthead__title, .bar h2, .drawer__head h2, .reach__list li { font-variant-numeric: lining-nums; }
.lede { max-width: 46ch; font-size: 18px; line-height: 1.55; }

/* Top of page */
.top { position: absolute; z-index: 20; top: 54px; left: 0; right: 0; }
.top--solid { position: relative; top: 0; padding-top: var(--space-4); }
.pz-nav__menu { display: none; }
.pz-nav__links a { white-space: nowrap; }

/* Hero: wellina's split */
.hero { position: relative; display: grid; grid-template-columns: 1fr 1fr; min-height: clamp(640px, 84vh, 860px); }
.hero__copy { display: flex; flex-direction: column; justify-content: flex-end; align-items: flex-start; gap: var(--space-6); padding: 176px clamp(32px, 5vw, 80px) 104px; color: var(--on-indigo); background: var(--indigo-deep); }
.hero__copy .pz-eyebrow { color: var(--on-indigo-soft); }
.hero__copy .lede { color: var(--on-indigo-soft); }
.hero__bead { width: min(240px, 60%); }
.hero__stage { position: relative; display: grid; place-items: center; padding: 164px 56px 120px; overflow: hidden; background: var(--stone); }
.hero__machine { position: relative; display: grid; place-items: center; width: 100%; height: 100%; min-height: 0; isolation: isolate; }
.hero__machine::after { content: ""; position: absolute; z-index: -1; left: 14%; right: 14%; bottom: 0; height: 9%; background: radial-gradient(closest-side, rgba(18, 18, 20, .26), rgba(18, 18, 20, .08) 60%, rgba(18, 18, 20, 0)); }
.hero__img { width: 100%; height: 100%; max-height: 520px; object-fit: contain; mix-blend-mode: multiply; animation: rise .6s cubic-bezier(.2, .7, .2, 1) both; }
.hero__bar { position: absolute; left: 56px; right: 56px; bottom: 60px; display: flex; align-items: center; justify-content: space-between; gap: var(--space-4); }
.hero__name { min-width: 0; color: var(--ink); text-decoration: none; font-size: 14px; line-height: 1.35; }
.hero__name strong { display: block; font-weight: 500; }
.hero__name span { font-variant-numeric: tabular-nums; color: var(--ink-soft); }
.hero__ctrl { display: flex; align-items: center; gap: var(--space-2); flex: none; font-size: 13px; font-variant-numeric: tabular-nums; }
.hero__ctrl .pz-round { width: 40px; height: 40px; color: var(--ink); background: var(--paper); }
.hero__ctrl .pz-round:hover { color: var(--paper); background: var(--ink); }
@keyframes rise { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: none; } }

/* The white sheet that overlaps the hero */
.sheet { position: relative; z-index: 2; margin-top: calc(var(--radius-panel) * -1); padding-top: var(--space-24); border-radius: var(--radius-panel) var(--radius-panel) 0 0; background: var(--paper); }
.section { padding-bottom: var(--space-32); }
.head { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: var(--space-6); margin-bottom: var(--space-12); }
.head p { margin-top: var(--space-2); color: var(--ink-soft); }
.head--centre { flex-direction: column; align-items: center; text-align: center; }
.cats { display: grid; grid-template-columns: repeat(8, minmax(0, 1fr)); gap: var(--space-6); }

/* Machine rail */
.rail { display: grid; grid-auto-flow: column; grid-auto-columns: calc((100% - var(--space-6) * 3) / 4); gap: var(--space-6); overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none; padding-bottom: 2px; }
.rail::-webkit-scrollbar { display: none; }
.rail > * { scroll-snap-align: start; }
.rail__ctrl { display: flex; justify-content: flex-end; gap: var(--space-2); margin-top: var(--space-6); }
.rail__ctrl .pz-round { color: var(--ink); background: var(--paper); box-shadow: inset 0 0 0 1px var(--control-line); }
.rail__ctrl .pz-round:hover { color: var(--paper); background: var(--ink); box-shadow: none; }

/* Departments */
.depts { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--space-6); }
.dept { position: relative; display: flex; flex-direction: column; justify-content: space-between; min-height: 460px; padding: var(--space-8); overflow: hidden; border-radius: var(--radius-panel); color: var(--ink); background: var(--tile); text-decoration: none; isolation: isolate; }
.dept img { position: absolute; z-index: -1; right: -6%; bottom: -4%; width: 78%; height: 72%; object-fit: contain; object-position: right bottom; mix-blend-mode: multiply; transition: transform .5s cubic-bezier(.2, .7, .2, 1); }
.dept:hover img { transform: translateY(-8px); }
.dept__link { align-self: flex-start; font-size: 14px; text-decoration: underline; text-underline-offset: 4px; }
.dept p { margin-top: var(--space-2); max-width: 26ch; color: var(--ink-soft); font-size: 14px; }

/* Delivery */
.reach { display: grid; grid-template-columns: 5fr 7fr; gap: var(--space-12); padding-block: var(--space-24); border-block: 1px solid var(--hairline); }
.reach__list { display: grid; margin: 0; padding: 0; list-style: none; }
.reach__list li { display: flex; align-items: baseline; justify-content: space-between; gap: var(--space-6); padding-block: var(--space-3); border-bottom: 1px solid var(--hairline); font: 500 clamp(32px, 3.4vw, 46px)/1.1 var(--font-display); }
.reach__list li:last-child { border-bottom: 0; }
.reach__list span { flex: none; font: 400 13px/1.3 var(--font-sans); color: var(--ink-muted); }
.trustband { padding-block: var(--space-16) var(--space-32); }

/* Catalog */
.masthead { padding-block: var(--space-16) var(--space-12); text-align: center; }
.masthead__title { font: 500 clamp(76px, 15vw, 216px)/.9 var(--font-display); letter-spacing: -.03em; }
.masthead__title em { font-style: italic; }
.masthead .pz-bead { width: min(240px, 50%); margin: var(--space-6) auto 0; }
.bar { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--space-4); padding-bottom: var(--space-6); }
.bar h2 { font: 500 clamp(28px, 2.6vw, 34px)/1.1 var(--font-display); }
.bar__tools { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-3); }
.bar__count { font-size: 14px; color: var(--ink-soft); font-variant-numeric: tabular-nums; }
.select { min-height: 40px; padding: 0 var(--space-4); border: 0; border-radius: var(--radius-pill); font-size: 14px; color: var(--ink); background: var(--tile); cursor: pointer; }
.shop { display: grid; grid-template-columns: 280px minmax(0, 1fr); gap: var(--space-12); align-items: start; padding-bottom: var(--space-32); }
.shop__side { position: sticky; top: var(--space-4); max-height: calc(100vh - var(--space-8)); overflow-y: auto; padding-right: var(--space-2); scrollbar-width: thin; }
.search { position: relative; margin-bottom: var(--space-6); }
.search svg { position: absolute; left: 14px; top: 13px; width: 18px; height: 18px; color: var(--ink-muted); }
.search input { width: 100%; height: 44px; padding: 0 var(--space-4) 0 40px; border: 1px solid var(--control-line); border-radius: var(--radius-pill); font-size: 15px; background: var(--paper); }
.search input:focus-visible { outline: 2px solid var(--indigo); outline-offset: 2px; }
.grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--space-6); }
.more { display: flex; flex-direction: column; align-items: center; gap: var(--space-3); margin-top: var(--space-12); font-size: 14px; color: var(--ink-soft); }
.empty { padding: var(--space-16) var(--space-6); border-radius: var(--radius-tile); text-align: center; background: var(--tile); }
.empty p { margin: var(--space-2) 0 var(--space-6); color: var(--ink-soft); }
.side-toggle { display: none; }
.pz-card--ghost { min-height: 340px; animation: pulse 1.4s ease-in-out infinite alternate; }
@keyframes pulse { from { opacity: .55; } to { opacity: 1; } }
.pz-card__img--framed { mix-blend-mode: normal; border-radius: var(--radius-sm); }

/* Footer */
.foot { padding-block: var(--space-24) var(--space-8); }
.foot__sign { display: grid; grid-template-columns: 1fr auto; align-items: end; gap: var(--space-8); padding-bottom: var(--space-16); }
.foot__sign h2 { font: 500 clamp(44px, 6vw, 84px)/1 var(--font-display); letter-spacing: -.02em; }
.foot__sign h2 em { font-style: italic; }
.foot__logo { display: inline-block; justify-self: start; padding: var(--space-3) var(--space-4); border-radius: var(--radius-tile); background: var(--paper); }
.foot__logo img { display: block; height: 120px; width: auto; }
.foot__base { display: flex; flex-wrap: wrap; justify-content: space-between; gap: var(--space-3); margin-top: var(--space-16); padding-top: var(--space-6); border-top: 1px solid var(--control-line); font-size: 13px; color: var(--ink-soft); }

/* Dialogs */
dialog { color: var(--ink); }
dialog::backdrop { background: rgba(35, 8, 47, .45); }
.drawer { position: fixed; inset: 0 0 0 auto; width: min(460px, 100%); max-width: 100%; height: 100dvh; max-height: 100dvh; margin: 0; padding: 0; border: 0; background: var(--paper); box-shadow: var(--shadow-sheet); }
.drawer[open] { display: flex; flex-direction: column; animation: slide .28s cubic-bezier(.2, .7, .2, 1); }
@keyframes slide { from { transform: translateX(40px); opacity: 0; } to { transform: none; opacity: 1; } }
.drawer__head { display: flex; align-items: center; justify-content: space-between; padding: var(--space-4) var(--space-3) var(--space-3) var(--space-6); }
.drawer__head h2 { font: 500 30px/1.15 var(--font-display); }
.drawer__body { flex: 1; min-height: 0; overflow-y: auto; padding: 0 var(--space-6) var(--space-6); }
.drawer__foot { padding: var(--space-4) var(--space-6) var(--space-6); border-top: 1px solid var(--hairline); }
.total { display: flex; justify-content: space-between; align-items: baseline; margin-bottom: var(--space-1); font-weight: 500; font-variant-numeric: tabular-nums; }
.total strong { font-size: 20px; font-weight: 500; }
.small { font-size: 13px; line-height: 1.45; color: var(--ink-muted); }
.form { display: grid; gap: var(--space-3); margin-top: var(--space-6); }
.form__two { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-3); }
.line-remove { padding: 0; border: 0; font-size: 12px; color: var(--ink-muted); background: none; text-decoration: underline; cursor: pointer; margin-left: var(--space-2); }
.sent { display: grid; gap: var(--space-3); padding-block: var(--space-6); }
.sent__ref { font-weight: 500; font-variant-numeric: tabular-nums; user-select: all; }

.pdp { width: min(1120px, calc(100% - 32px)); max-width: none; max-height: calc(100dvh - 32px); padding: 0; border: 0; border-radius: var(--radius-panel); background: var(--paper); box-shadow: var(--shadow-sheet); }
.pdp__close { position: absolute; z-index: 3; top: var(--space-3); right: var(--space-3); color: var(--ink); background: var(--paper); box-shadow: inset 0 0 0 1px var(--hairline); }
.pdp__close:hover { color: var(--paper); }
.pdp__grid { display: grid; grid-template-columns: 1fr 1fr; }
.pdp__media { display: flex; flex-direction: column; gap: var(--space-3); padding: var(--space-6); background: var(--tile); }
.pdp__main { display: grid; place-items: center; aspect-ratio: 1; }
.pdp__main img { width: 100%; height: 100%; object-fit: contain; mix-blend-mode: multiply; }
.pdp__thumbs { display: flex; gap: var(--space-2); overflow-x: auto; }
.pdp__thumbs button { flex: none; width: 64px; height: 64px; padding: 6px; border: 1px solid transparent; border-radius: var(--radius-sm); background: var(--paper); cursor: pointer; }
.pdp__thumbs button[aria-pressed="true"] { border-color: var(--ink); }
.pdp__thumbs img { width: 100%; height: 100%; object-fit: contain; }
.pdp__info { display: flex; flex-direction: column; gap: var(--space-4); min-width: 0; padding: var(--space-12) var(--space-8) var(--space-8); }
.pdp__badges { display: flex; flex-wrap: wrap; gap: var(--space-1); }
.pdp__price { font-size: 24px; font-weight: 500; font-variant-numeric: tabular-nums; }
.pdp__buy { display: flex; align-items: center; gap: var(--space-3); }
.pdp__buy .pz-qty { margin: 0; }
.pdp__buy .pz-qty button { width: 44px; height: 44px; }
.pdp__buy .pz-btn { flex: 1; }
.pdp__list { margin: 0; padding-left: 18px; font-size: 14px; color: var(--ink-soft); }
.pdp__list li { margin-bottom: var(--space-1); }
.pdp details { border-top: 1px solid var(--hairline); padding-block: var(--space-3); }
.pdp summary { font-weight: 500; font-size: 15px; cursor: pointer; }
.pdp summary:focus-visible { outline: 2px solid var(--indigo); outline-offset: 2px; }
.specs { width: 100%; margin-top: var(--space-3); border-collapse: collapse; font-size: 14px; }
.specs th, .specs td { padding: var(--space-2) 0; border-bottom: 1px solid var(--hairline); text-align: left; vertical-align: top; }
.specs th { width: 42%; padding-right: var(--space-3); font-weight: 400; color: var(--ink-muted); }
.specs td { overflow-wrap: anywhere; }

.menu { position: fixed; inset: 0 auto 0 0; width: min(320px, 86%); height: 100dvh; max-height: 100dvh; margin: 0; padding: var(--space-6); border: 0; background: var(--paper); }
.menu ul { display: grid; gap: var(--space-1); margin: var(--space-12) 0 0; padding: 0; list-style: none; }
.menu a { display: block; padding-block: var(--space-2); font: 500 30px/1.15 var(--font-display); color: var(--ink); text-decoration: none; }

@media (min-width: 1600px) { .grid { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
@media (max-width: 1180px) {
  .wrap { padding-inline: var(--space-6); }
  .cats { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .rail { grid-auto-columns: calc((100% - var(--space-6) * 2) / 3); }
  .section { padding-bottom: var(--space-24); }
  .grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .shop { grid-template-columns: 240px minmax(0, 1fr); gap: var(--space-8); }
  .pz-footer__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .pz-trust { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 860px) {
  .wrap { padding-inline: max(16px, env(safe-area-inset-left, 0px)) max(16px, env(safe-area-inset-right, 0px)); }
  .pz-announce__row { justify-content: center; padding-inline: var(--space-4); text-align: center; }
  .pz-announce__row > :not(:first-child) { display: none; }
  .top { top: 46px; }
  .pz-nav { grid-template-columns: auto 1fr auto; padding-left: var(--space-1); min-height: 76px; }
  .pz-nav__links { display: none; }
  .pz-nav__menu { display: inline-grid; }
  .pz-nav__logo { justify-self: start; }
  .pz-nav__logo img { height: 66px; }
  .hero { grid-template-columns: 1fr; min-height: 0; }
  .hero__copy { padding: 152px var(--space-4) var(--space-12); }
  .hero__stage { height: 440px; padding: var(--space-8) var(--space-6) 96px; }
  .hero__bar { left: var(--space-4); right: var(--space-4); bottom: 44px; }
  .sheet { padding-top: var(--space-16); }
  .section { padding-bottom: var(--space-16); }
  .head { margin-bottom: var(--space-6); }
  .cats { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--space-4) var(--space-3); }
  .pz-cat__name { font-size: 13px; }
  .rail { grid-auto-columns: 62%; gap: var(--space-3); }
  .depts { grid-template-columns: 1fr; }
  .dept { min-height: 340px; padding: var(--space-6); }
  .reach { grid-template-columns: 1fr; gap: var(--space-6); padding-block: var(--space-16); }
  .trustband { padding-block: var(--space-12) var(--space-16); }
  .shop { display: block; padding-bottom: var(--space-16); }
  .shop__side { position: static; max-height: none; display: none; margin-bottom: var(--space-6); padding: var(--space-4); border-radius: var(--radius-tile); background: var(--tile); }
  .shop__side .pz-pill { background: var(--paper); }
  .shop__side .pz-pill[aria-pressed="true"] { background: var(--ink); }
  .shop__side.is-open { display: block; }
  .side-toggle { display: inline-flex; }
  .grid { gap: var(--space-3); }
  .pz-card { padding-inline: var(--space-3); }
  .pz-card__meta { padding-right: 0; padding-bottom: 44px; }
  .pz-card__title { font-size: 13.5px; }
  .pz-card__stage { margin-top: var(--space-8); }
  .pz-card__add { width: 40px; height: 40px; }
  .masthead { padding-block: var(--space-12) var(--space-6); }
  .foot { padding-block: var(--space-16) var(--space-6); }
  .foot__sign { grid-template-columns: 1fr; padding-bottom: var(--space-12); }
  .foot__base { margin-top: var(--space-12); }
  .pdp { width: 100%; max-height: 100dvh; height: 100dvh; border-radius: 0; }
  .pdp__grid { grid-template-columns: 1fr; }
  .pdp__media { padding: var(--space-4); }
  .pdp__main { aspect-ratio: 4 / 3; }
  .pdp__info { padding: var(--space-6) var(--space-4); }
  .form__two { grid-template-columns: 1fr; }
}
@media (max-width: 420px) {
  .pz-trust, .pz-footer__grid { gap: var(--space-6) var(--space-4); }
  .pz-trust { grid-template-columns: 1fr; }
}
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .hero__img, .drawer[open], .pz-card--ghost { animation: none; }
  .dept img { transition: none; }
}

/* ProCraft's logo is wide, so it sits shorter than the square Indigo mark did. */
.pz-nav__logo img { height: 52px; }
.foot__logo img { height: 64px; }
@media (max-width: 640px) { .pz-nav__logo img { height: 40px; } }