/* Gifted Wind: cheeky cartoon sticker scrapbook.
   Layout concept: a pinned paper board. Flexbox only, normal flow,
   small tilts and offset shadows make the scrapbook. */

:root {
  /* Color */
  --color-lime: #76E600;
  --color-mint: #B2EDBA;
  --color-peach: #FFB184;
  --color-yellow: #FFF000;
  --color-aqua: #36D6E5;
  --color-pink: #FF82B4;
  --color-ink: #111111;
  --color-paper: #FFFEF8;
  --color-cork: #C89259;
  --color-white: #FFFFFF;
  --color-grid-line: rgba(54, 214, 229, 0.22);
  --color-ink-soft: rgba(17, 17, 17, 0.72);
  --color-cork-dot: rgba(17, 17, 17, 0.12);

  /* Type */
  --font-display: 'Lilita One', 'Arial Rounded MT Bold', 'Trebuchet MS', sans-serif;
  --font-body: 'Nunito Sans', 'Segoe UI', 'Helvetica Neue', Arial, sans-serif;
  --text-xs: 0.8125rem;
  --text-s: 0.9375rem;
  --text-m: 1.0625rem;
  --text-l: 1.25rem;
  --text-xl: 1.625rem;
  --text-2xl: clamp(1.875rem, 3.6vw, 2.5rem);
  --text-3xl: clamp(2.5rem, 6.4vw, 4.5rem);
  --weight-regular: 400;
  --weight-bold: 700;
  --weight-black: 900;
  --line-tight: 1.1;
  --line-body: 1.6;
  --tracking-label: 0.04em;
  --measure: 62ch;

  /* Spacing */
  --space-3xs: 0.25rem;
  --space-2xs: 0.5rem;
  --space-xs: 0.75rem;
  --space-s: 1rem;
  --space-m: 1.5rem;
  --space-l: 2rem;
  --space-xl: 3rem;
  --space-2xl: 4.5rem;
  --space-3xl: 6rem;
  --gutter: 16px;
  --page-max: 75rem;
  --touch: 2.75rem;

  /* Sizes */
  --size-logo: 2.75rem;
  --size-icon: 1.25rem;
  --size-icon-l: 2.25rem;
  --bar-height: 3px;
  --bar-width: 1.1rem;
  --float-distance: -8px;
  --size-thumb: 5.5rem;
  --size-avatar: 8.5rem;
  --size-pin: 1.75rem;
  --size-sidebar: 16.5rem;
  --size-hero-art: 34rem;
  --size-mascot-xl: 22rem;

  /* Lines, corners, shadows */
  --outline: 3px solid var(--color-ink);
  --outline-thin: 2px solid var(--color-ink);
  --outline-dashed: 2px dashed var(--color-ink);
  --focus-ring: 3px solid var(--color-ink);
  --focus-offset: 3px;
  --radius-s: 0.5rem;
  --radius-m: 1rem;
  --radius-l: 1.5rem;
  --radius-pill: 999px;
  --shadow-offset: 4px 4px 0 var(--color-ink);
  --shadow-offset-l: 6px 6px 0 var(--color-ink);
  --shadow-press: 1px 1px 0 var(--color-ink);
  --shadow-soft: 0 6px 14px rgba(17, 17, 17, 0.14);
  --shadow-sticker: drop-shadow(0 4px 6px rgba(17, 17, 17, 0.22));

  /* Tilts */
  --tilt-left: rotate(-2deg);
  --tilt-right: rotate(1.5deg);
  --tilt-slight: rotate(-0.75deg);
  --tilt-none: rotate(0deg);

  /* Motion */
  --motion-fast: 120ms;
  --motion-medium: 260ms;
  --motion-slow: 4s;
  --ease-bounce: cubic-bezier(0.34, 1.56, 0.64, 1);
}

/* ---------- Base ---------- */

* { box-sizing: border-box; }

[hidden] { display: none !important; }

html { scroll-behavior: smooth; }

body {
  margin: 0;
  background-color: var(--color-paper);
  color: var(--color-ink);
  font-family: var(--font-body);
  font-size: var(--text-m);
  line-height: var(--line-body);
  overflow-x: hidden;
}

img { max-width: 100%; height: auto; display: block; }

h1, h2, h3 {
  font-family: var(--font-display);
  font-weight: var(--weight-regular);
  line-height: var(--line-tight);
  text-wrap: balance;
  margin: 0;
}

h1 { font-size: var(--text-3xl); }
h2 { font-size: var(--text-2xl); }
h3 { font-size: var(--text-xl); }

p { margin: 0; max-width: var(--measure); }

a { color: var(--color-ink); text-underline-offset: 0.2em; text-decoration-thickness: 2px; }
a:hover { text-decoration-thickness: 3px; }

:focus-visible { outline: var(--focus-ring); outline-offset: var(--focus-offset); border-radius: var(--radius-s); }

ul, ol { margin: 0; padding: 0; }

.visually-hidden {
  clip-path: inset(50%);
  height: 1px;
  width: 1px;
  overflow: hidden;
  white-space: nowrap;
  margin: -1px;
}

.skip-link {
  display: inline-flex;
  padding: var(--space-2xs) var(--space-s);
  background-color: var(--color-yellow);
  border: var(--outline);
  border-radius: var(--radius-s);
  font-weight: var(--weight-bold);
  margin-block: var(--space-2xs);
}
.skip-link:not(:focus) { clip-path: inset(50%); height: 1px; width: 1px; overflow: hidden; margin: 0; padding: 0; border: 0; }

.wrap {
  width: 100%;
  max-width: var(--page-max);
  margin-inline: auto;
  padding-left: max(var(--gutter), env(safe-area-inset-left, 0px));
  padding-right: max(var(--gutter), env(safe-area-inset-right, 0px));
}

/* ---------- Demo strip ---------- */

.demo-strip { background-color: var(--color-yellow); border-bottom: var(--outline); font-size: var(--text-xs); font-weight: var(--weight-bold); }
.demo-strip .wrap { display: flex; flex-wrap: wrap; gap: var(--space-2xs); justify-content: center; align-items: center; padding-block: var(--space-3xs); text-align: center; }
.demo-tag {
  display: inline-flex;
  font-family: var(--font-display);
  font-weight: var(--weight-regular);
  letter-spacing: var(--tracking-label);
  text-transform: uppercase;
  background-color: var(--color-ink);
  color: var(--color-yellow);
  padding: 0 var(--space-2xs);
  border-radius: var(--radius-s);
}

/* ---------- Header ---------- */

.site-header {
  position: sticky;
  top: env(safe-area-inset-top, 0px);
  z-index: 10;
  background-color: var(--color-paper);
  border-bottom: var(--outline);
  box-shadow: var(--shadow-soft);
}

.header-inner { display: flex; align-items: center; gap: var(--space-s); padding-block: var(--space-xs); flex-wrap: wrap; }

.brand { display: inline-flex; align-items: center; gap: var(--space-2xs); text-decoration: none; margin-right: auto; }
.brand img { width: var(--size-logo); height: var(--size-logo); filter: var(--shadow-sticker); transition: transform var(--motion-medium) var(--ease-bounce); }
.brand:hover img { transform: var(--tilt-left) scale(1.08); }
.brand-name { font-family: var(--font-display); font-size: var(--text-xl); line-height: 1; }

.site-nav { display: flex; align-items: center; gap: var(--space-s); }
.nav-list { display: flex; list-style: none; gap: var(--space-3xs); align-items: center; }
.nav-link {
  display: inline-flex;
  align-items: center;
  min-height: var(--touch);
  padding: 0 var(--space-xs);
  border-radius: var(--radius-pill);
  border: 2px solid transparent;
  font-weight: var(--weight-bold);
  font-size: var(--text-s);
  text-decoration: none;
}
.nav-link:hover { background-color: var(--color-mint); border-color: var(--color-ink); }
.nav-link[aria-current="page"] { background-color: var(--color-lime); border: var(--outline-thin); text-decoration: underline; text-decoration-thickness: 2px; }

.header-actions { display: flex; align-items: center; gap: var(--space-2xs); }

.nav-toggle { display: none; }

.cart-count {
  display: inline-flex;
  justify-content: center;
  align-items: center;
  min-width: var(--size-icon);
  padding: 0 var(--space-3xs);
  background-color: var(--color-ink);
  color: var(--color-paper);
  border-radius: var(--radius-pill);
  font-size: var(--text-xs);
  line-height: var(--line-body);
}

/* ---------- Buttons ---------- */

.button-primary,
.button-secondary,
.button-quiet {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-2xs);
  min-height: var(--touch);
  padding: var(--space-2xs) var(--space-m);
  border: var(--outline);
  border-radius: var(--radius-m);
  box-shadow: var(--shadow-offset);
  font-family: var(--font-body);
  font-size: var(--text-m);
  font-weight: var(--weight-black);
  color: var(--color-ink);
  text-decoration: none;
  cursor: pointer;
  transition: transform var(--motion-fast) var(--ease-bounce), box-shadow var(--motion-fast) ease;
}
.button-primary { background-color: var(--color-lime); }
.button-secondary { background-color: var(--color-peach); }
.button-quiet { background-color: var(--color-paper); box-shadow: var(--shadow-press); padding: var(--space-3xs) var(--space-s); font-size: var(--text-s); }
.button-primary:hover, .button-secondary:hover, .button-quiet:hover { transform: translate(-2px, -2px); box-shadow: var(--shadow-offset-l); }
.button-primary:active, .button-secondary:active, .button-quiet:active { transform: translate(3px, 3px); box-shadow: var(--shadow-press); }
.button-small { min-height: var(--touch); padding: var(--space-3xs) var(--space-s); font-size: var(--text-s); }

.button-row { display: flex; flex-wrap: wrap; gap: var(--space-s); align-items: center; }

.text-link { font-weight: var(--weight-bold); }

/* ---------- Sections ---------- */

.section { padding-block: var(--space-2xl); }
.section-tight { padding-block: var(--space-xl); }
.section-mint { background-color: var(--color-mint); border-block: var(--outline); }
.section-aqua { background-color: var(--color-aqua); border-block: var(--outline); }
.section-graph {
  background-color: var(--color-paper);
  background-image:
    linear-gradient(var(--color-grid-line) 1px, transparent 1px),
    linear-gradient(90deg, var(--color-grid-line) 1px, transparent 1px);
  background-size: var(--space-m) var(--space-m);
}
.section-cork {
  background-color: var(--color-cork);
  background-image: radial-gradient(var(--color-cork-dot) 1.5px, transparent 1.5px);
  background-size: var(--space-xs) var(--space-xs);
  border-block: var(--outline);
}

.section-head { display: flex; flex-wrap: wrap; gap: var(--space-s); align-items: flex-end; justify-content: space-between; margin-bottom: var(--space-l); }
.section-head-text { display: flex; flex-direction: column; gap: var(--space-2xs); min-width: 0; }
.stack { display: flex; flex-direction: column; gap: var(--space-s); min-width: 0; }
.stack-l { display: flex; flex-direction: column; gap: var(--space-l); min-width: 0; }

.eyebrow { font-family: var(--font-display); font-size: var(--text-m); letter-spacing: var(--tracking-label); text-transform: uppercase; }
.lede { font-size: var(--text-l); }
.fine-print { font-size: var(--text-s); color: var(--color-ink-soft); }

.heading-highlight {
  display: inline-block;
  background-color: var(--color-lime);
  border: var(--outline);
  border-radius: var(--radius-s);
  padding: 0 var(--space-2xs);
  transform: var(--tilt-left);
  box-shadow: var(--shadow-offset);
}

.page-head { padding-block: var(--space-xl) var(--space-l); }
.page-head .wrap { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-l); justify-content: space-between; }
.page-head-text { display: flex; flex-direction: column; gap: var(--space-s); flex: 1 1 28rem; min-width: 0; }
.page-head-art { display: flex; align-items: flex-end; gap: var(--space-2xs); flex: 0 1 18rem; justify-content: center; }
.page-head-art img { filter: var(--shadow-sticker); min-width: 0; flex-shrink: 1; }

/* ---------- Paper surfaces ---------- */

.paper-card {
  display: flex;
  flex-direction: column;
  gap: var(--space-s);
  background-color: var(--color-paper);
  border: var(--outline);
  border-radius: var(--radius-l);
  box-shadow: var(--shadow-offset);
  padding: var(--space-m);
  min-width: 0;
}

.graph-panel {
  display: flex;
  flex-direction: column;
  gap: var(--space-s);
  background-color: var(--color-paper);
  background-image:
    linear-gradient(var(--color-grid-line) 1px, transparent 1px),
    linear-gradient(90deg, var(--color-grid-line) 1px, transparent 1px);
  background-size: var(--space-s) var(--space-s);
  border: var(--outline);
  border-radius: var(--radius-m);
  box-shadow: var(--shadow-offset);
  padding: var(--space-m);
  min-width: 0;
}

.pin { width: var(--size-pin); align-self: center; margin-top: calc(var(--space-l) * -1); margin-bottom: calc(var(--space-2xs) * -1); }
.tape { width: 6rem; align-self: center; margin-top: calc(var(--space-l) * -1); }

/* ---------- Sticky-note badge ---------- */

.note-badge {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2xs);
  width: fit-content;
  max-width: 100%;
  background-color: var(--color-yellow);
  border: var(--outline-thin);
  box-shadow: var(--shadow-soft);
  padding: var(--space-2xs) var(--space-s);
  font-family: var(--font-display);
  font-size: var(--text-m);
  line-height: var(--line-tight);
  transform: var(--tilt-left);
  transition: transform var(--motion-medium) var(--ease-bounce);
}
.note-badge:nth-of-type(even) { transform: var(--tilt-right); }
.note-aqua { background-color: var(--color-aqua); }
.note-pink { background-color: var(--color-pink); }
.note-mint { background-color: var(--color-mint); }
.note-yellow { background-color: var(--color-yellow); }
.note-peach { background-color: var(--color-peach); }
.note-badge:hover { transform: var(--tilt-none) scale(1.04); }

/* A plain-language notice that must not be missed */
.demo-notice {
  display: flex;
  gap: var(--space-xs);
  align-items: flex-start;
  background-color: var(--color-yellow);
  border: var(--outline);
  border-radius: var(--radius-m);
  padding: var(--space-s);
  font-size: var(--text-s);
  font-weight: var(--weight-bold);
}
.demo-notice strong { font-weight: var(--weight-black); }
.demo-notice .demo-tag { flex-shrink: 0; }

/* ---------- Stickers and accents ---------- */

.sticker-word {
  display: inline-flex;
  font-family: var(--font-display);
  font-size: var(--text-xl);
  line-height: 1;
  padding: var(--space-2xs) var(--space-xs);
  background-color: var(--color-yellow);
  border: var(--outline);
  border-radius: var(--radius-m);
  box-shadow: 0 0 0 4px var(--color-white), var(--shadow-soft);
  transform: var(--tilt-left);
  animation: wobble var(--motion-slow) ease-in-out infinite;
}
.sticker-pink { background-color: var(--color-pink); transform: var(--tilt-right); animation-delay: -1.3s; }
.sticker-lime { background-color: var(--color-lime); }
.sticker-aqua { background-color: var(--color-aqua); transform: var(--tilt-right); }

.accent { filter: var(--shadow-sticker); flex-shrink: 0; }
.accent-s { width: 2.25rem; }
.accent-m { width: 3.5rem; }
.accent-l { width: 5rem; }
.accent-float { animation: float var(--motion-slow) ease-in-out infinite; }

@keyframes wobble {
  0%, 100% { rotate: -2deg; }
  50% { rotate: 2deg; }
}
@keyframes float {
  0%, 100% { translate: 0 0; }
  50% { translate: 0 var(--float-distance); }
}
@keyframes bounce-in {
  0% { transform: scale(0.85); }
  60% { transform: scale(1.06); }
  100% { transform: scale(1); }
}

/* ---------- Hero ---------- */

.hero { padding-block: var(--space-xl) var(--space-2xl); }
.hero .wrap { display: flex; align-items: center; gap: var(--space-xl); }
.hero-copy { display: flex; flex-direction: column; gap: var(--space-m); flex: 1 1 50%; min-width: 0; }
.hero-art { flex: 1 1 50%; max-width: var(--size-hero-art); min-width: 0; }

.hero-stage {
  display: flex;
  flex-direction: column;
  gap: var(--space-2xs);
  padding: var(--space-m) var(--space-s);
  transform: var(--tilt-right);
}
.hero-stage-row { display: flex; align-items: flex-end; justify-content: space-between; gap: var(--space-2xs); }
.hero-stage-row.top { align-items: center; }
.hero-mascot { flex: 0 1 46%; min-width: 0; filter: var(--shadow-sticker); }
.hero-poof { flex: 0 1 30%; min-width: 0; align-self: flex-start; margin-left: calc(var(--space-m) * -1); filter: var(--shadow-sticker); }
.hero-jar { flex: 0 1 36%; min-width: 0; margin-left: calc(var(--space-l) * -1); filter: var(--shadow-sticker); }

/* ---------- Product cards ---------- */

.product-grid { display: flex; flex-wrap: wrap; gap: var(--space-m); list-style: none; }
.product-grid > li { display: flex; flex: 0 1 calc((100% - 3 * var(--space-m)) / 4); min-width: 0; }
.product-grid.cols-3 > li { flex-basis: calc((100% - 2 * var(--space-m)) / 3); }

.product-card {
  display: flex;
  flex-direction: column;
  gap: var(--space-xs);
  width: 100%;
  background-color: var(--color-paper);
  border: var(--outline);
  border-radius: var(--radius-l);
  box-shadow: var(--shadow-offset);
  padding: var(--space-s);
  transition: transform var(--motion-medium) var(--ease-bounce), box-shadow var(--motion-medium) ease;
}
.product-grid > li:nth-child(odd) .product-card { transform: var(--tilt-slight); }
.product-card:hover { transform: var(--tilt-none) translateY(-4px); box-shadow: var(--shadow-offset-l); }
.product-art {
  display: flex;
  justify-content: center;
  align-items: center;
  background-color: var(--color-mint);
  background-image:
    linear-gradient(var(--color-grid-line) 1px, transparent 1px),
    linear-gradient(90deg, var(--color-grid-line) 1px, transparent 1px);
  background-size: var(--space-s) var(--space-s);
  border: var(--outline-thin);
  border-radius: var(--radius-m);
  padding: var(--space-s);
  aspect-ratio: 1 / 1;
  max-width: 100%;
}
.product-art img { width: 78%; filter: var(--shadow-sticker); transition: transform var(--motion-medium) var(--ease-bounce); }
.product-card:hover .product-art img { transform: rotate(-4deg) scale(1.05); }
.product-card .badge-row { display: flex; flex-wrap: wrap; gap: var(--space-3xs); justify-content: space-between; align-items: center; }
.product-name { font-size: var(--text-l); }
.product-name a { text-decoration: none; }
.product-name a:hover { text-decoration: underline; }
.product-seller { font-size: var(--text-s); }
.product-blurb { font-size: var(--text-s); color: var(--color-ink-soft); }
.product-foot { display: flex; flex-wrap: wrap; gap: var(--space-2xs); justify-content: space-between; align-items: center; margin-top: auto; padding-top: var(--space-2xs); border-top: var(--outline-dashed); }

.price { display: flex; flex-direction: column; line-height: var(--line-tight); }
.price-amount { font-size: var(--text-l); font-weight: var(--weight-black); font-variant-numeric: tabular-nums; }
.price-label { font-size: var(--text-xs); font-weight: var(--weight-bold); text-transform: uppercase; letter-spacing: var(--tracking-label); }

/* ---------- Badges ---------- */

.category-badge {
  display: inline-flex;
  align-items: center;
  gap: var(--space-3xs);
  padding: var(--space-3xs) var(--space-2xs);
  border: var(--outline-thin);
  border-radius: var(--radius-pill);
  font-size: var(--text-xs);
  font-weight: var(--weight-black);
  line-height: var(--line-tight);
  background-color: var(--color-paper);
}
.category-badge img { width: var(--size-icon); height: var(--size-icon); }
.category-original-gas { background-color: var(--color-mint); }
.category-mega-blast { background-color: var(--color-yellow); }
.category-spicy-edition { background-color: var(--color-pink); }
.category-gift-sets { background-color: var(--color-aqua); }

.demo-badge {
  display: inline-flex;
  width: fit-content;
  align-self: flex-start;
  padding: var(--space-3xs) var(--space-2xs);
  border: var(--outline-dashed);
  border-radius: var(--radius-s);
  font-size: var(--text-xs);
  font-weight: var(--weight-bold);
  line-height: var(--line-tight);
  text-transform: uppercase;
  letter-spacing: var(--tracking-label);
}

/* ---------- Seller cards ---------- */

.seller-grid { display: flex; flex-wrap: wrap; gap: var(--space-m); list-style: none; }
.seller-grid > li { display: flex; flex: 0 1 calc((100% - 2 * var(--space-m)) / 3); min-width: 0; }
.seller-grid.cols-4 > li { flex-basis: calc((100% - 3 * var(--space-m)) / 4); }

.seller-card {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: var(--space-xs);
  width: 100%;
  background-color: var(--color-paper);
  border: var(--outline);
  border-radius: var(--radius-l);
  box-shadow: var(--shadow-offset);
  padding: var(--space-m) var(--space-s);
  transition: transform var(--motion-medium) var(--ease-bounce);
}
.seller-grid > li:nth-child(even) .seller-card { transform: var(--tilt-right); }
.seller-card:hover { transform: var(--tilt-none) translateY(-4px); }
.seller-avatar { display: flex; justify-content: center; align-items: center; aspect-ratio: 1 / 1; max-width: 100%; flex-shrink: 0; width: var(--size-avatar); padding: var(--space-2xs); border: var(--outline); border-radius: var(--radius-pill); background-color: var(--color-mint); }
.seller-avatar img { filter: var(--shadow-sticker); }
.seller-card:hover .seller-avatar img { animation: wobble 0.8s ease-in-out; }
.avatar-yellow { background-color: var(--color-yellow); }
.avatar-aqua { background-color: var(--color-aqua); }
.avatar-mint { background-color: var(--color-mint); }
.avatar-pink { background-color: var(--color-pink); }
.seller-name { font-size: var(--text-xl); }
.seller-line { font-size: var(--text-s); }
.seller-card .button-quiet { margin-top: auto; }
.seller-card .demo-badge { align-self: center; }

/* ---------- Spotlight ---------- */

.spotlight { display: flex; gap: var(--space-xl); align-items: center; }
.spotlight-feature { display: flex; gap: var(--space-m); align-items: center; flex: 1 1 55%; min-width: 0; }
.spotlight-feature .seller-avatar { width: 12rem; flex-shrink: 0; }
.spotlight-side { flex: 1 1 45%; min-width: 0; display: flex; flex-direction: column; gap: var(--space-s); }
.mini-seller-list { display: flex; flex-direction: column; gap: var(--space-xs); list-style: none; }
.mini-seller {
  display: flex;
  align-items: center;
  gap: var(--space-s);
  background-color: var(--color-paper);
  border: var(--outline-thin);
  border-radius: var(--radius-m);
  padding: var(--space-2xs) var(--space-s);
  text-decoration: none;
  min-height: var(--touch);
}
.mini-seller:hover { background-color: var(--color-yellow); }
.mini-seller img { width: 3.25rem; flex-shrink: 0; }
.mini-seller-text { display: flex; flex-direction: column; min-width: 0; }
.mini-seller-name { font-family: var(--font-display); font-size: var(--text-l); line-height: var(--line-tight); }
.mini-seller-line { font-size: var(--text-s); }

/* ---------- Steps and comic strip ---------- */

.step-row, .comic-strip { display: flex; gap: var(--space-m); list-style: none; }
.step-row > li, .comic-strip > li { display: flex; flex: 1 1 0; min-width: 0; }
.comic-panel {
  display: flex;
  flex-direction: column;
  gap: var(--space-xs);
  width: 100%;
  background-color: var(--color-paper);
  border: 4px solid var(--color-ink);
  border-radius: var(--radius-s);
  box-shadow: var(--shadow-offset-l);
  padding: var(--space-m);
}
.comic-strip > li:nth-child(2) .comic-panel { transform: var(--tilt-right); }
.comic-strip > li:nth-child(3) .comic-panel { transform: var(--tilt-slight); }
.comic-art { display: flex; align-items: flex-end; justify-content: center; gap: var(--space-2xs); min-height: 8rem; background-color: var(--color-mint); border: var(--outline-thin); border-radius: var(--radius-s); padding: var(--space-s); }
.comic-art img { max-height: 7rem; width: auto; filter: var(--shadow-sticker); }
.comic-art-yellow { background-color: var(--color-yellow); }
.comic-art-pink { background-color: var(--color-pink); }
.comic-art-aqua { background-color: var(--color-aqua); }
.step-number {
  display: inline-flex;
  justify-content: center;
  align-items: center;
  width: var(--touch);
  height: var(--touch);
  border: var(--outline);
  border-radius: var(--radius-pill);
  background-color: var(--color-lime);
  font-family: var(--font-display);
  font-size: var(--text-l);
  flex-shrink: 0;
}
.panel-title-row { display: flex; align-items: center; gap: var(--space-xs); }
.speech {
  display: inline-flex;
  width: fit-content;
  background-color: var(--color-white);
  border: var(--outline-thin);
  border-radius: var(--radius-l);
  padding: var(--space-3xs) var(--space-xs);
  font-family: var(--font-display);
  font-size: var(--text-s);
  box-shadow: var(--shadow-press);
}

/* ---------- Split panels ---------- */

.split { display: flex; gap: var(--space-xl); align-items: center; }
.split > * { flex: 1 1 0; min-width: 0; }
.split-top { align-items: flex-start; }
.duo { display: flex; gap: var(--space-m); }
.duo > * { flex: 1 1 0; }

.cta-panel {
  display: flex;
  align-items: center;
  gap: var(--space-l);
  background-color: var(--color-peach);
  border: var(--outline);
  border-radius: var(--radius-l);
  box-shadow: var(--shadow-offset-l);
  padding: var(--space-l);
}
.cta-panel-art { display: flex; align-items: flex-end; gap: var(--space-2xs); flex: 0 0 auto; }
.cta-panel-art img { filter: var(--shadow-sticker); }
.cta-panel-text { display: flex; flex-direction: column; gap: var(--space-s); flex: 1 1 auto; min-width: 0; }

/* ---------- Shop ---------- */

.shop-layout { display: flex; gap: var(--space-l); align-items: flex-start; }
.filter-panel {
  flex: 0 0 var(--size-sidebar);
  background-color: var(--color-paper);
  border: var(--outline);
  border-radius: var(--radius-l);
  box-shadow: var(--shadow-offset);
  position: sticky;
  top: calc(env(safe-area-inset-top, 0px) + 6rem);
}
.filter-summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-2xs);
  min-height: var(--touch);
  padding: var(--space-xs) var(--space-m);
  font-family: var(--font-display);
  font-size: var(--text-l);
  cursor: pointer;
  list-style: none;
}
.filter-summary::-webkit-details-marker { display: none; }
.filter-summary-hint { font-family: var(--font-body); font-size: var(--text-s); font-weight: var(--weight-bold); }
.filter-body { display: flex; flex-direction: column; gap: var(--space-m); padding: 0 var(--space-m) var(--space-m); }
.filter-group { display: flex; flex-direction: column; gap: var(--space-2xs); border: 0; margin: 0; padding: 0; min-width: 0; }
.filter-group legend, .field-label { font-weight: var(--weight-black); font-size: var(--text-s); padding: 0; margin-bottom: var(--space-3xs); }
.check-option {
  display: flex;
  align-items: center;
  gap: var(--space-2xs);
  min-height: var(--touch);
  padding: 0 var(--space-xs);
  border: var(--outline-thin);
  border-radius: var(--radius-m);
  background-color: var(--color-paper);
  cursor: pointer;
  font-weight: var(--weight-bold);
  font-size: var(--text-s);
}
.check-option input { width: var(--size-icon); height: var(--size-icon); accent-color: var(--color-ink); margin: 0; flex-shrink: 0; }
.check-option img { width: var(--size-icon); height: var(--size-icon); }
.check-option:has(input:checked) { background-color: var(--color-lime); box-shadow: var(--shadow-press); }
.check-option:has(input:focus-visible) { outline: var(--focus-ring); outline-offset: var(--focus-offset); }
.check-mark { margin-left: auto; font-size: var(--text-xs); font-weight: var(--weight-black); text-transform: uppercase; }
.check-option:not(:has(input:checked)) .check-mark { visibility: hidden; }

.text-input, .select-input, .textarea-input {
  width: 100%;
  min-height: var(--touch);
  padding: var(--space-2xs) var(--space-xs);
  border: var(--outline);
  border-radius: var(--radius-s);
  background-color: var(--color-white);
  color: var(--color-ink);
  font-family: var(--font-body);
  font-size: var(--text-m);
}
.textarea-input { min-height: 7rem; resize: vertical; }
.text-input:focus-visible, .select-input:focus-visible, .textarea-input:focus-visible { outline: var(--focus-ring); outline-offset: var(--focus-offset); background-color: var(--color-yellow); }
.range-input { width: 100%; accent-color: var(--color-ink); min-height: var(--touch); }
.range-value { font-weight: var(--weight-black); font-variant-numeric: tabular-nums; }

.results { display: flex; flex-direction: column; gap: var(--space-m); flex: 1 1 auto; min-width: 0; }
.results-bar { display: flex; flex-wrap: wrap; gap: var(--space-s); align-items: flex-end; justify-content: space-between; }
.search-field { display: flex; flex-direction: column; gap: var(--space-3xs); flex: 1 1 18rem; min-width: 0; }
.sort-field { display: flex; flex-direction: column; gap: var(--space-3xs); flex: 0 1 14rem; }
.results-meta { display: flex; flex-wrap: wrap; gap: var(--space-2xs); align-items: center; }
.results-count { font-weight: var(--weight-black); }
.chip-list { display: flex; flex-wrap: wrap; gap: var(--space-2xs); list-style: none; }
.chip {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2xs);
  min-height: var(--touch);
  padding: 0 var(--space-xs);
  border: var(--outline-thin);
  border-radius: var(--radius-pill);
  background-color: var(--color-lime);
  font-family: var(--font-body);
  font-size: var(--text-s);
  font-weight: var(--weight-bold);
  color: var(--color-ink);
  cursor: pointer;
}
.chip:hover { background-color: var(--color-yellow); }
.chip-x { font-weight: var(--weight-black); }

.empty-state {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: var(--space-s);
  padding: var(--space-xl) var(--space-m);
  border: var(--outline-dashed);
  border-radius: var(--radius-l);
  background-color: var(--color-paper);
}
.empty-state img { width: 9rem; filter: var(--shadow-sticker); }
.empty-state p { max-width: 36ch; }

/* ---------- Product detail ---------- */

.breadcrumbs { font-size: var(--text-s); font-weight: var(--weight-bold); }
.breadcrumbs ol { display: flex; flex-wrap: wrap; gap: var(--space-2xs); list-style: none; align-items: center; }
.breadcrumb-sep { color: var(--color-ink-soft); }

.product-detail { display: flex; gap: var(--space-xl); align-items: flex-start; }
.product-stage { flex: 1 1 45%; min-width: 0; display: flex; flex-direction: column; gap: var(--space-s); }
.product-stage .graph-panel { align-items: center; padding: var(--space-l); transform: var(--tilt-slight); }
.product-stage-art { width: 78%; filter: var(--shadow-sticker); }
.product-stage-stickers { display: flex; justify-content: space-between; width: 100%; align-items: center; }
.product-info { flex: 1 1 55%; min-width: 0; display: flex; flex-direction: column; gap: var(--space-m); }
.product-meta-row { display: flex; flex-wrap: wrap; gap: var(--space-2xs); align-items: center; }
.product-byline { font-size: var(--text-l); font-weight: var(--weight-bold); }
.product-price-row { display: flex; align-items: baseline; gap: var(--space-xs); flex-wrap: wrap; }
.product-price-row .price-amount { font-size: var(--text-2xl); }

.buy-box { display: flex; flex-direction: column; gap: var(--space-m); background-color: var(--color-paper); border: var(--outline); border-radius: var(--radius-l); padding: var(--space-m); box-shadow: var(--shadow-offset); }
.option-list { display: flex; flex-wrap: wrap; gap: var(--space-2xs); }
.option-pill {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2xs);
  min-height: var(--touch);
  padding: 0 var(--space-s);
  border: var(--outline-thin);
  border-radius: var(--radius-pill);
  background-color: var(--color-paper);
  font-weight: var(--weight-bold);
  font-size: var(--text-s);
  cursor: pointer;
}
.option-pill input { accent-color: var(--color-ink); width: var(--size-icon); height: var(--size-icon); margin: 0; }
.option-pill:has(input:checked) { background-color: var(--color-lime); box-shadow: var(--shadow-press); }
.option-pill:has(input:focus-visible) { outline: var(--focus-ring); outline-offset: var(--focus-offset); }
.option-delta { font-weight: var(--weight-regular); }

.buy-row { display: flex; flex-wrap: wrap; gap: var(--space-s); align-items: flex-end; }
.qty { display: flex; flex-direction: column; gap: var(--space-3xs); }
.qty-control { display: inline-flex; align-items: stretch; border: var(--outline); border-radius: var(--radius-m); overflow: hidden; background-color: var(--color-white); }
.qty-button {
  min-width: var(--touch);
  min-height: var(--touch);
  border: 0;
  background-color: var(--color-mint);
  font-family: var(--font-display);
  font-size: var(--text-l);
  color: var(--color-ink);
  cursor: pointer;
}
.qty-button:hover { background-color: var(--color-lime); }
.qty-input {
  width: 3.5rem;
  border: 0;
  border-inline: var(--outline-thin);
  text-align: center;
  font-family: var(--font-body);
  font-size: var(--text-m);
  font-weight: var(--weight-black);
  font-variant-numeric: tabular-nums;
  color: var(--color-ink);
  background-color: var(--color-white);
  -moz-appearance: textfield;
}
.qty-input::-webkit-inner-spin-button, .qty-input::-webkit-outer-spin-button { -webkit-appearance: none; margin: 0; }
.status-message { font-weight: var(--weight-bold); }
.status-message:not(:empty) { display: flex; flex-wrap: wrap; gap: var(--space-2xs); align-items: center; background-color: var(--color-mint); border: var(--outline-thin); border-radius: var(--radius-m); padding: var(--space-xs) var(--space-s); animation: bounce-in var(--motion-medium) var(--ease-bounce); }

.detail-list { display: flex; flex-direction: column; margin: 0; border: var(--outline-thin); border-radius: var(--radius-m); overflow: hidden; }
.detail-item { display: flex; flex-wrap: wrap; gap: var(--space-2xs) var(--space-m); padding: var(--space-xs) var(--space-s); border-top: var(--outline-dashed); background-color: var(--color-paper); }
.detail-item:first-child { border-top: 0; }
.detail-item dt { flex: 0 0 9rem; font-weight: var(--weight-black); }
.detail-item dd { flex: 1 1 14rem; margin: 0; min-width: 0; }
.pending-tag { display: inline-flex; font-size: var(--text-xs); font-weight: var(--weight-black); text-transform: uppercase; letter-spacing: var(--tracking-label); background-color: var(--color-pink); border: var(--outline-thin); border-radius: var(--radius-s); padding: 0 var(--space-2xs); margin-right: var(--space-2xs); }

/* ---------- Seller profile ---------- */

.profile-head { display: flex; gap: var(--space-l); align-items: center; flex-wrap: wrap; }
.profile-head .seller-avatar { width: 13rem; }
.profile-text { display: flex; flex-direction: column; gap: var(--space-s); flex: 1 1 22rem; min-width: 0; }
.back-link { display: inline-flex; align-items: center; gap: var(--space-2xs); min-height: var(--touch); font-weight: var(--weight-black); }
.back-link img { width: 1.75rem; transform: scaleX(-1); }

/* ---------- Forms ---------- */

.form-mockup {
  display: flex;
  flex-direction: column;
  gap: var(--space-m);
  background-color: var(--color-paper);
  border: var(--outline);
  border-radius: var(--radius-l);
  box-shadow: var(--shadow-offset-l);
  padding: var(--space-l);
  min-width: 0;
}
.mockup-head { display: flex; flex-wrap: wrap; gap: var(--space-xs); align-items: center; justify-content: space-between; }
.mockup-label {
  display: inline-flex;
  align-items: center;
  font-family: var(--font-display);
  letter-spacing: var(--tracking-label);
  text-transform: uppercase;
  font-size: var(--text-s);
  background-color: var(--color-pink);
  border: var(--outline-thin);
  border-radius: var(--radius-s);
  padding: var(--space-3xs) var(--space-xs);
  transform: var(--tilt-right);
}
.field { display: flex; flex-direction: column; gap: var(--space-3xs); min-width: 0; }
.field-hint { font-size: var(--text-xs); color: var(--color-ink-soft); }
.field-row { display: flex; gap: var(--space-s); flex-wrap: wrap; }
.field-row > .field { flex: 1 1 14rem; }

/* ---------- FAQ ---------- */

.faq-list { display: flex; flex-direction: column; gap: var(--space-s); }
.faq-item { background-color: var(--color-paper); border: var(--outline); border-radius: var(--radius-m); box-shadow: var(--shadow-offset); }
.faq-item summary {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: var(--space-s);
  min-height: var(--touch);
  padding: var(--space-s) var(--space-m);
  font-family: var(--font-display);
  font-size: var(--text-l);
  line-height: var(--line-tight);
  cursor: pointer;
  list-style: none;
}
.faq-item summary::-webkit-details-marker { display: none; }
.faq-toggle { display: inline-flex; justify-content: center; align-items: center; width: 2rem; height: 2rem; flex-shrink: 0; border: var(--outline-thin); border-radius: var(--radius-pill); background-color: var(--color-lime); font-family: var(--font-body); font-weight: var(--weight-black); }
.faq-item[open] .faq-toggle-open { display: none; }
.faq-item:not([open]) .faq-toggle-close { display: none; }
.faq-answer { display: flex; flex-direction: column; gap: var(--space-xs); padding: 0 var(--space-m) var(--space-m); }

.pending-list { display: flex; flex-direction: column; gap: var(--space-xs); list-style: none; }
.pending-list li { display: flex; flex-wrap: wrap; gap: var(--space-2xs); align-items: baseline; padding: var(--space-xs) var(--space-s); background-color: var(--color-paper); border: var(--outline-thin); border-radius: var(--radius-m); }
.pending-list strong { font-weight: var(--weight-black); }

/* ---------- Cart ---------- */

.cart-layout { display: flex; gap: var(--space-l); align-items: flex-start; }
.cart-lines { display: flex; flex-direction: column; gap: var(--space-s); flex: 1 1 auto; min-width: 0; list-style: none; }
.cart-line { display: flex; gap: var(--space-s); align-items: center; flex-wrap: wrap; background-color: var(--color-paper); border: var(--outline); border-radius: var(--radius-l); padding: var(--space-s); box-shadow: var(--shadow-offset); }
.cart-thumb { width: var(--size-thumb); flex-shrink: 0; background-color: var(--color-mint); border: var(--outline-thin); border-radius: var(--radius-m); padding: var(--space-2xs); }
.cart-line-info { display: flex; flex-direction: column; gap: var(--space-3xs); flex: 1 1 12rem; min-width: 0; }
.cart-line-name { font-family: var(--font-display); font-size: var(--text-l); line-height: var(--line-tight); }
.cart-line-meta { font-size: var(--text-s); }
.cart-line-controls { display: flex; align-items: center; gap: var(--space-s); flex-wrap: wrap; }
.cart-line-total { display: flex; flex-direction: column; align-items: flex-end; min-width: 6rem; }
.cart-summary { flex: 0 0 20rem; display: flex; flex-direction: column; gap: var(--space-s); background-color: var(--color-paper); border: var(--outline); border-radius: var(--radius-l); box-shadow: var(--shadow-offset-l); padding: var(--space-m); }
.summary-row { display: flex; justify-content: space-between; gap: var(--space-s); padding-block: var(--space-2xs); border-bottom: var(--outline-dashed); font-variant-numeric: tabular-nums; }
.summary-row:last-of-type { border-bottom: 0; }
.summary-value { font-weight: var(--weight-black); text-align: right; }
.summary-actions { display: flex; flex-direction: column; gap: var(--space-xs); }
.checkout-preview { display: flex; flex-direction: column; gap: var(--space-m); }
.checkout-statement { font-family: var(--font-display); font-size: var(--text-xl); line-height: var(--line-tight); background-color: var(--color-yellow); border: var(--outline); border-radius: var(--radius-m); padding: var(--space-s) var(--space-m); max-width: none; }

/* ---------- About collage ---------- */

.collage { display: flex; flex-wrap: wrap; gap: var(--space-m); align-items: center; justify-content: center; padding: var(--space-l); }
.collage .note-badge { font-size: var(--text-l); padding: var(--space-s); max-width: 14rem; }
.collage-jar { width: 7rem; filter: var(--shadow-sticker); }
.collage-jar:nth-of-type(2) { transform: rotate(8deg); }
.about-mascot { width: var(--size-mascot-xl); max-width: 100%; filter: var(--shadow-sticker); margin-inline: auto; }

/* ---------- Footer ---------- */

.site-footer { background-color: var(--color-ink); color: var(--color-paper); padding-block: var(--space-xl) var(--space-l); }
.site-footer a { color: var(--color-paper); }
.footer-top { display: flex; flex-wrap: wrap; gap: var(--space-xl); justify-content: space-between; }
.footer-brand { display: flex; gap: var(--space-s); align-items: center; flex: 1 1 18rem; min-width: 0; }
.footer-brand img { width: 5rem; flex-shrink: 0; }
.footer-brand-name { font-family: var(--font-display); font-size: var(--text-xl); line-height: var(--line-tight); }
.footer-links { display: flex; flex-wrap: wrap; gap: var(--space-2xs) var(--space-m); list-style: none; flex: 1 1 24rem; align-content: flex-start; }
.footer-links a { display: inline-flex; align-items: center; min-height: var(--touch); font-weight: var(--weight-bold); }
.footer-links a:focus-visible, .site-footer a:focus-visible { outline-color: var(--color-yellow); }
.footer-note { margin-top: var(--space-l); padding-top: var(--space-s); border-top: 2px dashed var(--color-paper); font-size: var(--text-s); max-width: none; }

/* ---------- Tablet ---------- */

@media (max-width: 64rem) {
  .hero .wrap { flex-direction: column; align-items: stretch; gap: var(--space-l); }
  .hero-art { max-width: 30rem; align-self: center; width: 100%; }
  .product-grid > li, .product-grid.cols-3 > li { flex-basis: calc((100% - var(--space-m)) / 2); }
  .seller-grid > li, .seller-grid.cols-4 > li { flex-basis: calc((100% - var(--space-m)) / 2); }
  .shop-layout { flex-direction: column; align-items: stretch; }
  .filter-panel { flex-basis: auto; position: static; }
  .filter-body { flex-direction: row; flex-wrap: wrap; }
  .filter-body > .filter-group { flex: 1 1 14rem; }
  .filter-body > .filter-reset { flex-basis: 100%; }
  .spotlight, .split { flex-direction: column; align-items: stretch; }
  .product-detail { flex-direction: column; align-items: stretch; }
  .product-stage { max-width: 30rem; align-self: center; width: 100%; }
  .cart-layout { flex-direction: column; align-items: stretch; }
  .cart-summary { flex-basis: auto; }
  .step-row, .comic-strip { flex-wrap: wrap; }
  .step-row > li, .comic-strip > li { flex: 1 1 16rem; }
}

/* ---------- Mobile ---------- */

@media (max-width: 40rem) {
  :root { --text-m: 1rem; --text-l: 1.125rem; --text-xl: 1.375rem; }
  .section { padding-block: var(--space-xl); }
  .js .nav-toggle {
    display: inline-flex;
    align-items: center;
    gap: var(--space-2xs);
    min-height: var(--touch);
    padding: 0 var(--space-s);
    border: var(--outline);
    border-radius: var(--radius-m);
    background-color: var(--color-paper);
    font-family: var(--font-body);
    font-size: var(--text-s);
    font-weight: var(--weight-black);
    color: var(--color-ink);
    cursor: pointer;
  }
  .nav-toggle[aria-expanded="true"] { background-color: var(--color-lime); }
  .nav-toggle-bars { display: flex; flex-direction: column; gap: var(--bar-height); }
  .nav-toggle-bars span { display: block; width: var(--bar-width); height: var(--bar-height); background-color: var(--color-ink); border-radius: var(--radius-pill); }
  .site-nav { flex-basis: 100%; flex-direction: column; align-items: stretch; gap: var(--space-s); padding-bottom: var(--space-xs); }
  .js .site-nav:not(.is-open) { display: none; }
  .nav-list { flex-direction: column; align-items: stretch; }
  .nav-link { min-height: 3rem; font-size: var(--text-m); }
  .header-actions .button-primary { flex: 1 1 auto; }
  .brand-name { font-size: var(--text-l); }
  .header-inner { gap: var(--space-2xs); }
  .brand img { width: var(--size-icon-l); height: var(--size-icon-l); }
  .product-grid > li, .product-grid.cols-3 > li { flex-basis: 100%; }
  .seller-grid > li, .seller-grid.cols-4 > li { flex-basis: 100%; }
  .product-grid > li:nth-child(odd) .product-card,
  .seller-grid > li:nth-child(even) .seller-card,
  .comic-strip > li .comic-panel,
  .hero-stage,
  .product-stage .graph-panel { transform: var(--tilt-none); }
  .comic-strip > li:nth-child(n) .comic-panel { transform: var(--tilt-none); }
  .product-card { flex-direction: row; flex-wrap: wrap; }
  .product-card .product-art { flex: 0 0 7.5rem; aspect-ratio: 1 / 1; padding: var(--space-2xs); }
  .product-card .product-art img { width: 90%; }
  .product-card-body { flex: 1 1 10rem; }
  .product-card .product-foot { flex-basis: 100%; }
  .filter-body { flex-direction: column; }
  .spotlight-feature { flex-direction: column; text-align: center; }
  .cta-panel { flex-direction: column; align-items: stretch; padding: var(--space-m); }
  .cta-panel-art { justify-content: center; }
  .cart-line-total { align-items: flex-start; }
  .cart-line-controls { flex-basis: 100%; justify-content: space-between; }
  .form-mockup { padding: var(--space-m); }
  .duo { flex-direction: column; }
  .detail-item dt { flex-basis: 100%; }
  .page-head-art { flex-basis: 100%; }
  .page-head-art img { max-width: 9rem; }
}

.product-card-body { display: flex; flex-direction: column; gap: var(--space-2xs); min-width: 0; }

/* ---------- Reduced motion ---------- */

@media (prefers-reduced-motion: reduce) {
  * {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
  .sticker-word, .accent-float { animation: none; }
}

/* ---------- Small page-specific pieces ---------- */

.side-mascot { width: 12rem; }
.policy-needs { display: flex; flex-direction: column; gap: var(--space-2xs); padding-left: var(--space-m); }