/* Hallmark · shape: Feature Stack · genre: playful · theme: Hum (deal 3/3, seed playful-beautiful-single-page-printing-803e·669ba381·2026-10-31·r0) · job: buy · draw: 5a8413
 * hero: Counter · nav: floating solid pill · footer: mast · imagery: generated product stand-ins, 5 · signature: live personalised keyring
 * axes: light/rounded-sans/chromatic-yellow · posture: full-palette · contrast: pass · fold: pending · v2.0.0 */
/* Hallmark · pre-emit critique: P4 H4 E4 S4 R4 V4 · weakest: E, kept the hero to one offer and one clear buying path */
/* Hallmark · answered F4 · only .btn-primary is filled; filters and purchase controls are outlined or typographic */
/* Hallmark · answered F15 · below-hero section grids share --gap-columns; component and stacked-row gaps are independent */
/* Hallmark · waive 44a · screenshot shows balanced space around the offer · overlapping floating nav makes the content-box probe count differ */
/* Hallmark · hero-review: fix · 3 findings · 2 resolved, 1 material gap */
/* Hallmark · finish-review: fix · 6 findings · 5 resolved, 1 partial */
@import url("./tokens.css");
@import url("./base.css");

:root {
  --header-height: 88px;
  --color-nav: oklch(89% 0.055 240);
  --color-nav-ink: oklch(20% 0.014 255);
  --color-footer: oklch(22% 0.022 255);
  --color-footer-ink: oklch(97% 0.012 95);
  --color-blue-soft: oklch(89% 0.055 240);
  --color-coral-soft: oklch(91% 0.055 22);
  --color-mint-soft: oklch(91% 0.055 152);
  --color-backdrop: oklch(20% 0.014 255 / 0.42);
  --grain: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180' viewBox='0 0 180 180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.035'/%3E%3C/svg%3E");
  --hero-min: calc(100dvh - var(--header-height));
}

html { scroll-behavior: smooth; }
body { background-image: var(--grain); font-weight: 500; }
strong { font-weight: 600; }

.skip-link {
  position: absolute;
  inset-inline-start: var(--space-md);
  transform: translateY(-150%);
  z-index: var(--z-toast);
  padding: var(--space-xs) var(--space-md);
  border-radius: var(--radius-input);
  background: var(--color-ink);
  color: var(--color-paper);
}
.skip-link:focus-visible { transform: translateY(var(--space-md)); }

.site-header { position: relative; z-index: var(--z-sticky-nav); padding-block: var(--space-md); }
.nav-shell {
  min-height: 56px;
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
  align-items: center;
  gap: var(--space-lg);
  width: min(calc(100% - (var(--gutter) * 2)), 1320px);
  padding-inline: var(--space-lg);
  border-radius: var(--radius-pill);
  background: var(--color-nav);
  color: var(--color-nav-ink);
  box-shadow: 0 10px 24px -18px var(--color-ink);
}
.brand { width: 154px; min-width: 0; }
.brand img { width: 100%; }
.nav-links { display: flex; align-items: center; gap: var(--space-lg); }
.nav-links a, .text-link { font-size: var(--text-sm); font-weight: 600; text-decoration: none; white-space: nowrap; }
.nav-links a:hover, .nav-links a:focus-visible { color: var(--color-accent); }
.bag-button, .menu-button {
  justify-self: end;
  min-height: 44px;
  border: 0;
  border-radius: var(--radius-pill);
  background: var(--color-paper);
  color: var(--color-ink);
  cursor: pointer;
}
.bag-button { display: inline-flex; align-items: center; gap: var(--space-xs); padding-inline: var(--space-md); }
.bag-count { min-width: 1.5em; text-align: center; border-radius: var(--radius-pill); background: var(--color-accent); }
.menu-button { display: none; width: 44px; place-items: center; padding: 0; }
.bag-button:hover, .menu-button:hover { background: var(--color-paper-2); }
.bag-button:active, .menu-button:active { transform: translateY(1px); }
.bag-button:disabled, .menu-button:disabled { opacity: .55; cursor: not-allowed; }
.nav-shell :focus-visible { outline-color: var(--color-focus); }

.hero { margin-top: calc(-1 * var(--header-height)); padding-top: var(--header-height); }
.counter-grid {
  min-height: var(--hero-min);
  display: grid;
  grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
  align-items: center;
  gap: var(--space-3xl);
  padding-block: var(--space-xl) var(--space-2xl);
}
.lead-copy { align-self: center; }
.lead-copy, .hero-offer { translate: 0 calc(-1 * var(--space-lg)); }
.lead-copy h1 { max-width: 9ch; }
.lead-copy .lead { margin-top: var(--space-lg); max-width: 34ch; }
.hero-actions { display: flex; align-items: center; gap: var(--space-lg); margin-top: var(--space-xl); }

.btn {
  --edge: 5px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 50px;
  padding-inline: var(--space-lg);
  border: 0;
  border-radius: var(--radius-stock);
  background: transparent;
  color: var(--color-ink);
  font-weight: 600;
  line-height: 1;
  text-decoration: none;
  white-space: nowrap;
  cursor: pointer;
  box-shadow: inset 0 0 0 1px var(--color-rule), 0 var(--edge) 0 var(--color-edge);
  transition: transform var(--dur-micro) var(--ease-snap), box-shadow var(--dur-micro) var(--ease-snap), background-color var(--dur-short) var(--ease-out);
}
.btn-primary { background: var(--color-accent); color: var(--color-accent-ink); box-shadow: 0 var(--edge) 0 var(--color-accent-deep); transition-timing-function: var(--ease-spring); }
.btn:hover { --edge: 7px; transform: translateY(-2px); }
.btn:active { --edge: 1px; transform: translateY(4px); }
.btn:disabled, .btn[aria-disabled="true"] { opacity: .55; cursor: not-allowed; transform: none; }
.btn[aria-busy="true"] { cursor: progress; }
.text-link { color: var(--color-accent-2); text-decoration: underline; text-underline-offset: .22em; }
.text-link:hover { color: var(--color-ink); }

.hero-offer { min-width: 0; filter: var(--shadow-paper); }
.hero-photo { min-height: min(62dvh, 610px); margin: 0; border-radius: var(--radius-card) var(--radius-card) 0 0; }
.hero-photo > img { outline: 1px solid color-mix(in oklab, var(--color-ink) 10%, transparent); outline-offset: -1px; }
.offer-strip {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-lg);
  padding: var(--space-lg);
  border-radius: 0 0 var(--radius-card) var(--radius-card);
  background: var(--color-card);
}
.offer-name { font-size: var(--text-title); }
.offer-strip p { margin-top: var(--space-xs); color: var(--color-ink-2); }
.offer-buy { display: flex; align-items: center; gap: var(--space-md); }
.price { font-size: var(--text-title); font-weight: 600; }
.price { font-variant-numeric: tabular-nums; }
.add-button {
  min-height: 48px;
  padding-inline: var(--space-md);
  border: 1px solid var(--color-ink);
  border-radius: var(--radius-input);
  background: transparent;
  color: var(--color-ink);
  font-weight: 600;
  white-space: nowrap;
  cursor: pointer;
  transition: background-color var(--dur-short) var(--ease-out), transform var(--dur-micro) var(--ease-out);
}
.add-button:hover { background: var(--color-paper-2); }
.add-button:active { transform: translateY(1px); }
.add-button:disabled, .add-button[aria-disabled="true"] { opacity: .55; cursor: not-allowed; transform: none; }

.js [data-reveal] { opacity: 0; transform: translateY(8px); transition: opacity var(--dur-long) var(--ease-out), transform var(--dur-long) var(--ease-out); transition-delay: calc(var(--i, 0) * 80ms); }
.js [data-reveal].is-in { opacity: 1; transform: none; }

.promise-band {
  position: relative;
  padding-block: var(--space-xl);
  background: var(--color-blue-soft);
  color: var(--color-ink);
  clip-path: polygon(0 3%, 14% 0, 29% 3%, 46% 0, 63% 3%, 81% 0, 100% 3%, 100% 97%, 84% 100%, 66% 97%, 48% 100%, 31% 97%, 15% 100%, 0 97%);
}
.promise-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--gap-columns); }
.promise-grid p { padding-inline-start: var(--space-lg); border-inline-start: 1px solid color-mix(in oklab, var(--color-ink) 28%, transparent); }
.promise-grid p:first-child { padding-inline-start: 0; border-inline-start: 0; }
.promise-grid strong { display: block; }

.feature-section {
  display: grid;
  grid-template-columns: minmax(0, 4fr) minmax(0, 8fr);
  align-items: center;
  gap: var(--gap-columns);
  padding-block: var(--section-gap);
}
.feature-copy .lead { margin-top: var(--space-lg); }
.feature-link { display: inline-flex; align-items: center; min-height: 44px; margin-top: var(--space-lg); }
.feature-photo { min-height: 580px; margin: 0; border-radius: var(--radius-card); filter: var(--shadow-paper); }

.shop-section { padding-block: var(--section-gap); background: var(--color-paper-2); }
.section-heading { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); align-items: end; gap: var(--gap-columns); }
.section-heading .lead { justify-self: end; max-width: 34ch; }
.filter-row { display: flex; gap: var(--space-xs); margin-top: var(--space-2xl); overflow-x: auto; padding-block: var(--space-xs); scrollbar-width: thin; }
.filter-button {
  min-height: 44px;
  padding-inline: var(--space-md);
  border: 1px solid var(--color-muted);
  border-radius: var(--radius-pill);
  background: transparent;
  color: var(--color-ink);
  white-space: nowrap;
  cursor: pointer;
  transition: background-color var(--dur-short) var(--ease-out), color var(--dur-short) var(--ease-out), transform var(--dur-micro) var(--ease-out);
}
.filter-button:hover { background: var(--color-card); }
.filter-button:active { transform: translateY(1px); }
.filter-button[aria-pressed="true"] { background: var(--color-paper-3); color: var(--color-ink); border-color: var(--color-ink); font-weight: 600; }
.filter-button:disabled { opacity: .55; cursor: not-allowed; transform: none; }

.product-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--space-2xl) var(--gap-columns); margin-top: var(--space-xl); }
.product-card { display: grid; grid-template-rows: auto 1fr auto; min-width: 0; gap: var(--space-md); }
.product-card[hidden] { display: none; }
.product-card-type { min-height: 260px; grid-template-rows: 1fr auto; align-content: end; padding: var(--space-lg); border-radius: var(--radius-card); background: var(--color-card); box-shadow: var(--shadow-card); }
.product-card-type figure { display: none; }
.product-card-type .product-info { align-self: end; }
.product-card-type .product-info p { display: none; }
.product-card figure { position: relative; aspect-ratio: 16 / 9; min-height: 200px; margin: 0; border-radius: var(--radius-card); background: var(--color-paper-3); filter: var(--shadow-paper); }
.product-card figure > img { transition: filter var(--dur-short) var(--ease-out); }
.product-card:focus-within figure > img { filter: saturate(1.12) brightness(1.05); }
.product-info { display: flex; align-items: start; justify-content: space-between; gap: var(--space-md); }
.product-info h3 { font-size: var(--text-title); }
.product-info p { margin-top: var(--space-xs); color: var(--color-ink-2); }
.product-price, .custom-price { flex-shrink: 0; font-size: var(--text-title); font-weight: 600; font-variant-numeric: tabular-nums; }
.product-add {
  justify-self: start;
  min-height: 44px;
  padding-inline: 0;
  border: 0;
  border-bottom: 1px solid var(--color-ink);
  background: transparent;
  color: var(--color-ink);
  font-weight: 600;
  cursor: pointer;
  transition: color var(--dur-short) var(--ease-out), transform var(--dur-micro) var(--ease-out);
}
.product-add:hover { color: var(--color-accent-2); }
.product-add:active { transform: translateY(1px); }
.product-add:disabled { opacity: .55; cursor: not-allowed; transform: none; }
.crop-left > img { object-position: 18% 50%; }
.crop-centre > img { object-position: 50% 50%; }
.crop-right > img { object-position: 83% 50%; }
.crop-top > img { object-position: 62% 18%; }
.crop-bottom > img { object-position: 50% 80%; }

.lithophane-section {
  display: grid;
  grid-template-columns: minmax(0, 7fr) minmax(0, 5fr);
  align-items: center;
  gap: var(--gap-columns);
  padding-block: var(--section-gap-l);
}
.lithophane-photo { min-height: 640px; margin: 0; border-radius: var(--radius-card); filter: var(--shadow-paper); }
.lithophane-copy .lead { margin-top: var(--space-lg); }
.upload-control {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 50px;
  margin-top: var(--space-xl);
  padding-inline: var(--space-lg);
  border: 1px solid var(--color-ink);
  border-radius: var(--radius-input);
  font-weight: 600;
  cursor: pointer;
  transition: background-color var(--dur-short) var(--ease-out), transform var(--dur-micro) var(--ease-out);
}
.upload-control:hover { background: var(--color-paper-2); }
.upload-control:active { transform: translateY(1px); }
.upload-control input { position: absolute; width: 1px; height: 1px; opacity: 0; }
.upload-control:has(input:focus-visible) { outline: 2px solid var(--color-focus); outline-offset: 2px; }
.upload-help, .field-help { min-height: 1lh; margin-top: var(--space-xs); color: var(--color-muted); font-size: var(--text-sm); }

.custom-section { padding-block: var(--section-gap-s); background: var(--color-mint-soft); }
.custom-grid { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); align-items: center; gap: var(--gap-columns); }
.custom-preview-wrap { display: grid; gap: var(--space-lg); justify-items: center; }
.custom-preview-wrap p { color: var(--color-ink-2); text-align: center; }
.keyring-preview {
  --keyring-base: var(--color-mint);
  --keyring-letters: var(--color-accent-3);
  position: relative;
  width: min(100%, 560px);
  min-height: 230px;
  display: grid;
  place-items: center;
  padding: var(--space-xl) var(--space-2xl);
  border: 12px solid var(--keyring-base);
  border-radius: var(--radius-card);
  background: var(--keyring-base);
  color: var(--color-ink);
  -webkit-text-fill-color: var(--keyring-letters);
  -webkit-text-stroke: 2px var(--color-ink);
  paint-order: stroke fill;
  box-shadow: 0 16px 0 var(--color-mint-deep), var(--shadow-card);
  font-size: clamp(3rem, 8vw, 6.5rem);
  font-weight: 600;
  line-height: 1;
  letter-spacing: var(--tracking-display);
  text-transform: uppercase;
  overflow-wrap: break-word;
  min-width: 0;
}
.keyring-preview::after { content: ""; position: absolute; inset: var(--space-sm); border: 2px solid color-mix(in oklab, var(--color-ink) 10%, transparent); border-radius: var(--radius-stock); pointer-events: none; }
.keyring-hole { position: absolute; inset-inline-start: var(--space-lg); width: 34px; aspect-ratio: 1; border-radius: var(--radius-pill); background: var(--color-paper); box-shadow: inset 0 0 0 4px var(--color-edge); }
.custom-form { padding: var(--space-xl); border-radius: var(--radius-card); background: var(--color-card); filter: var(--shadow-paper); }
.field-group { margin-top: var(--space-xl); }
.field-group label, .colour-options legend { display: block; margin-bottom: var(--space-xs); font-weight: 600; }
.field-group label span { color: var(--color-muted); font-size: var(--text-sm); font-weight: 500; }
.input {
  width: 100%;
  min-height: 50px;
  padding-inline: var(--space-md);
  border: 1px solid var(--color-muted);
  border-radius: var(--radius-input);
  outline: 2px solid transparent;
  outline-offset: -3px;
  background: var(--color-paper);
  color: var(--color-ink);
}
.input:hover { background: var(--color-paper-2); }
.input:focus-visible { outline-color: var(--color-focus); }
.input[aria-invalid="true"] { border-color: var(--color-error); }
.input:disabled { opacity: .55; cursor: not-allowed; }
.colour-options { margin: var(--space-lg) 0 0; padding: 0; border: 0; }
.swatches { display: flex; flex-wrap: wrap; gap: var(--space-xs); }
.swatches input { position: absolute; width: 1px; height: 1px; opacity: 0; }
.swatches label {
  min-height: 44px;
  display: inline-flex;
  align-items: center;
  gap: var(--space-xs);
  padding-inline: var(--space-sm);
  border: 1px solid var(--color-rule);
  border-radius: var(--radius-pill);
  cursor: pointer;
}
.swatches label::before { content: ""; width: 20px; aspect-ratio: 1; border-radius: var(--radius-pill); background: var(--swatch); box-shadow: inset 0 0 0 1px color-mix(in oklab, var(--color-ink) 18%, transparent); }
.swatches label[data-colour="mint"] { --swatch: var(--color-mint); }
.swatches label[data-colour="blue"] { --swatch: var(--color-accent-2); }
.swatches label[data-colour="yellow"] { --swatch: var(--color-accent); }
.swatches label[data-colour="coral"] { --swatch: var(--color-accent-3); }
.swatches label[data-colour="paper"] { --swatch: var(--color-paper); }
.swatches input:checked + label { background: var(--color-ink); color: var(--color-paper); border-color: var(--color-ink); }
.swatches input:focus-visible + label { outline: 2px solid var(--color-focus); outline-offset: 2px; }
.swatches input:disabled + label { opacity: .55; cursor: not-allowed; }
.custom-buy { display: flex; align-items: center; justify-content: space-between; gap: var(--space-md); margin-top: var(--space-xl); }

.details-section { display: grid; grid-template-columns: minmax(0, 4fr) minmax(0, 8fr); gap: var(--gap-columns); padding-block: var(--section-gap); }
.detail-rows { margin: 0; }
.detail-rows div { display: grid; grid-template-columns: minmax(0, 3fr) minmax(0, 7fr); gap: var(--gap-columns); padding-block: var(--space-lg); border-top: 1px solid var(--color-rule); }
.detail-rows div:last-child { border-bottom: 1px solid var(--color-rule); }
.detail-rows dt { font-weight: 600; }
.detail-rows dd { margin: 0; color: var(--color-ink-2); }

.site-footer { padding-block: var(--section-gap-s) var(--space-2xl); background: var(--color-footer); color: var(--color-footer-ink); }
.footer-mast { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: end; gap: var(--gap-columns); }
.footer-mast > img { width: min(440px, 70%); height: auto; filter: invert(1); grid-column: 1 / -1; }
.footer-mast > p { max-width: 36ch; }
.footer-mast nav { display: flex; gap: var(--space-lg); }
.footer-mast nav a { font-size: var(--text-sm); font-weight: 500; white-space: nowrap; }
.prototype-note { grid-column: 1 / -1; padding-top: var(--space-lg); border-top: 1px solid color-mix(in oklab, var(--color-paper) 24%, transparent); color: var(--color-paper-3); font-size: var(--text-sm); }

.bag-dialog {
  position: fixed;
  inset: 0;
  width: min(calc(100% - (var(--space-xl) * 2)), 560px);
  max-height: min(80dvh, 680px);
  margin: auto;
  padding: var(--space-xl);
  border: 0;
  border-radius: var(--radius-card);
  background: var(--color-card);
  color: var(--color-ink);
  box-shadow: var(--shadow-card);
}
.bag-dialog::backdrop { background: var(--color-backdrop); }
.dialog-head { display: flex; align-items: center; justify-content: space-between; gap: var(--space-lg); }
.dialog-close { min-height: 44px; padding-inline: var(--space-md); border: 1px solid var(--color-ink); border-radius: var(--radius-input); background: transparent; color: var(--color-ink); cursor: pointer; }
.dialog-close:hover { background: var(--color-paper-2); }
.dialog-close:active { transform: translateY(1px); }
.dialog-close:disabled { opacity: .55; cursor: not-allowed; }
.bag-items { display: grid; gap: var(--space-sm); margin: var(--space-xl) 0; padding: 0; list-style: none; }
.bag-items li { display: flex; justify-content: space-between; gap: var(--space-lg); padding-block: var(--space-sm); border-bottom: 1px solid var(--color-rule); }
.bag-total { display: flex; justify-content: space-between; gap: var(--space-lg); font-size: var(--text-lead); }
.dialog-note { margin-top: var(--space-lg); color: var(--color-muted); }

@media (max-width: 60rem) {
  :root { --header-height: 80px; }
  .nav-shell { width: calc(100% - (var(--gutter) * 2)); grid-template-columns: minmax(0, 1fr) auto auto; }
  .nav-links { position: absolute; inset: calc(100% + var(--space-xs)) var(--gutter) auto; display: none; padding: var(--space-md); border-radius: var(--radius-stock); background: var(--color-nav); box-shadow: var(--shadow-card); }
  .nav-links.is-open { display: grid; gap: var(--space-xs); }
  .nav-links a { min-height: 44px; display: flex; align-items: center; padding-inline: var(--space-sm); }
  .menu-button { display: grid; }
  .counter-grid { min-height: auto; grid-template-columns: minmax(0, 1fr); gap: var(--space-xl); padding-block: var(--space-2xl); }
  .lead-copy h1 { max-width: 12ch; }
  .lead-copy, .hero-offer { translate: none; }
  .hero-photo { min-height: 480px; }
  .feature-section, .lithophane-section, .custom-grid, .details-section { grid-template-columns: minmax(0, 1fr); gap: var(--space-xl); }
  .feature-photo, .lithophane-photo { min-height: 520px; }
  .product-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .details-section h2 { margin-bottom: var(--space-lg); }
}

@media (max-width: 40rem) {
  .site-header { padding-block: var(--space-sm); }
  .nav-shell { width: calc(100% - (var(--gutter) * 2)); padding-inline: var(--space-sm); gap: var(--space-xs); }
  .brand { width: 112px; }
  .bag-button { font-size: var(--text-sm); padding-inline: var(--space-sm); }
  .bag-button svg { display: none; }
  .counter-grid { padding-block: var(--space-xl) var(--space-2xl); }
  .hero-actions, .offer-strip, .offer-buy { align-items: stretch; }
  .hero-actions { flex-direction: column; }
  .text-link { min-height: 44px; display: inline-flex; align-items: center; }
  .hero-photo { min-height: 360px; }
  .offer-strip { flex-direction: column; }
  .offer-buy { width: 100%; justify-content: space-between; align-items: center; }
  .promise-grid, .section-heading, .product-grid, .detail-rows div, .footer-mast { grid-template-columns: minmax(0, 1fr); }
  .filter-row { flex-wrap: wrap; overflow-x: visible; }
  .promise-grid { gap: var(--space-lg); }
  .promise-grid p, .promise-grid p:first-child { padding-inline-start: 0; padding-top: var(--space-md); border-inline-start: 0; border-top: 1px solid color-mix(in oklab, var(--color-ink) 28%, transparent); }
  .promise-grid p:first-child { padding-top: 0; border-top: 0; }
  .section-heading .lead { justify-self: start; margin-top: var(--space-lg); }
  .feature-photo, .lithophane-photo { min-height: 360px; }
  .product-card figure { min-height: 200px; }
  .keyring-preview { min-height: 180px; padding-inline: var(--space-xl); border-width: 8px; box-shadow: 0 10px 0 var(--color-mint-deep), var(--shadow-card); }
  .keyring-hole { width: 26px; inset-inline-start: var(--space-sm); }
  .custom-form, .bag-dialog { padding: var(--space-lg); }
  .custom-buy { align-items: center; }
  .footer-mast nav { flex-wrap: wrap; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .btn, .add-button, .bag-button, .menu-button, .filter-button, .product-add, .upload-control, .dialog-close, .js [data-reveal] { transition: none; }
  .js [data-reveal] { opacity: 1; transform: none; }
}