/* Sample 2 — JIVORA pre-launch store (dark, bold). Shared styles for index.html, toys.html and product.html.
   Mobile-first; breakpoints 640 / 1024 / 1280 (min-width). Hover effects only on hover-capable devices.
   Motion animates transform and opacity only and is switched off under prefers-reduced-motion.
   Interface visibility: html[data-mode="shop" | "business"] shows elements marked data-for="shop" | "business".
   27 Oct (brief §14): event section, Hot Picks, Price Promise and legal-page styles sit just before REDUCED MOTION. */

/* ===== TOKENS ===== */
:root {
  /* Brief §6 sample-2 palette (proposal — client brand colours not provided): navy #0B1B3F base,
     electric blue #2563EB, amber #F59E0B; lighter tints of each for text on dark */
  --bg: #0B1B3F;
  --bg-2: #0E2149;
  --surface: #132A5A;
  --surface-2: #1A3468;
  --surface-3: #22407A;
  --line: rgba(255, 255, 255, 0.10);
  --line-2: rgba(255, 255, 255, 0.18);
  --text: #F2F5FF;
  --white: #FFFFFF;
  --muted: #AEBBDA;
  --faint: #8695BB;
  --blue: #2563EB;
  --blue-2: #60A5FA;
  --blue-3: #93C5FD;
  --blue-deep: #1D4ED8;
  --blue-wash: rgba(37, 99, 235, 0.22);
  --amber: #F59E0B;
  --amber-2: #FCD34D;
  --amber-wash: rgba(245, 158, 11, 0.14);
  --on-amber: #1A1200;
  --green: #4ADE80;
  --green-wash: rgba(74, 222, 128, 0.14);
  --red: #FCA5A5;
  --photo-bg: #F4F5F8;
  --overlay: rgba(5, 12, 32, 0.74);
  --focus: var(--amber-2);

  /* Toy palette (27 Oct, Shop mode accents only — rings, pills, badges, stickers, tiles).
     Every colour is light enough for navy text on top (6.5:1–11.7:1 with --bg, AA needs 4.5:1) and bright enough as a ring on navy. */
  --toy-pink: #FF7AB6;
  --toy-yellow: #FFD23F;
  --toy-sky: #5CC8FF;
  --toy-green: #5EE08A;
  --toy-purple: #B38CFF;
  --toy-orange: #FF9F43;
  --on-toy: #0B1B3F;
  --hero-warm: linear-gradient(135deg, var(--toy-yellow) 0%, #FFB547 55%, var(--toy-orange) 100%);
  /* Instagram brand gradient (allowed for the Instagram icon only) */
  --ig-gradient: linear-gradient(45deg, #F58529 0%, #DD2A7B 50%, #8134AF 80%, #515BD4 100%);

  --font-head: "Space Grotesk", "Segoe UI", system-ui, sans-serif;
  --font-fun: "Fredoka", "Space Grotesk", "Segoe UI", system-ui, sans-serif;
  --font-body: "DM Sans", "Segoe UI", system-ui, sans-serif;

  /* Type scale 12 / 14 / 16 / 20 / 28 / 40 */
  --fs-12: 0.75rem;
  --fs-13: 0.8125rem;
  --fs-14: 0.875rem;
  --fs-16: 1rem;
  --fs-20: 1.25rem;
  --fs-28: 1.75rem;
  --fs-40: 2.5rem;

  /* Spacing 4 / 8 / 12 / 16 / 24 / 32 / 48 */
  --s-1: 4px;
  --s-2: 8px;
  --s-25: 12px;
  --s-3: 16px;
  --s-4: 24px;
  --s-5: 32px;
  --s-6: 48px;
  --block-y: clamp(28px, 2vw + 20px, 44px);

  --r-sm: 10px;
  --r-md: 16px;
  --r-lg: 22px;
  --r-pill: 999px;

  --shadow-1: 0 10px 30px -12px rgba(0, 0, 0, 0.55);
  --shadow-2: 0 24px 60px -20px rgba(0, 0, 0, 0.7);

  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
  --container: min(100% - 32px, 1320px);
}

/* ===== BASE ===== */
*,
*::before,
*::after {
  box-sizing: border-box;
}

html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
  scroll-padding-top: 16px;
  background: var(--bg);
  color-scheme: dark;
}

body {
  margin: 0;
  font-family: var(--font-body);
  font-size: var(--fs-16);
  line-height: 1.55;
  color: var(--text);
  background: var(--bg);
  -webkit-font-smoothing: antialiased;
}

body.menu-open,
body.has-dialog {
  overflow: hidden;
}

img,
svg {
  display: block;
  max-width: 100%;
}

img {
  height: auto;
}

a {
  color: inherit;
}

button,
input,
select,
textarea {
  font: inherit;
  color: inherit;
}

button {
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}

h1,
h2,
h3 {
  margin: 0;
  font-family: var(--font-head);
  font-weight: 700;
  line-height: 1.15;
  letter-spacing: -0.015em;
}

p {
  margin: 0;
}

ul,
ol {
  margin: 0;
  padding: 0;
  list-style: none;
}

dl,
dd {
  margin: 0;
}

[hidden] {
  display: none !important;
}

:focus-visible {
  outline: 3px solid var(--focus);
  outline-offset: 2px;
  border-radius: 6px;
}

/* Shop mode uses the rounded, friendly display font; Business mode keeps Space Grotesk */
html[data-mode="shop"] {
  --font-head: var(--font-fun);
}

html[data-mode="shop"] h1,
html[data-mode="shop"] h2,
html[data-mode="shop"] h3 {
  font-weight: 600;
  letter-spacing: 0;
}

/* Toy palette helpers: components read var(--tone) */
.tone-pink { --tone: var(--toy-pink); }
.tone-yellow { --tone: var(--toy-yellow); }
.tone-sky { --tone: var(--toy-sky); }
.tone-green { --tone: var(--toy-green); }
.tone-purple { --tone: var(--toy-purple); }

/* Interface switch: show only the active mode's content */
html[data-mode="shop"] [data-for="business"],
html[data-mode="business"] [data-for="shop"] {
  display: none !important;
}

.container {
  width: var(--container);
  margin-inline: auto;
}

.visually-hidden {
  position: absolute !important;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}

.skip-link {
  position: absolute;
  top: 8px;
  left: 8px;
  z-index: 100;
  padding: 10px 16px;
  border-radius: var(--r-sm);
  background: var(--amber);
  color: var(--on-amber);
  font-weight: 700;
  transform: translateY(-160%);
  transition: transform 0.2s var(--ease-out);
}

.skip-link:focus {
  transform: none;
}

.eyebrow {
  font-size: var(--fs-12);
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--blue-2);
}

.eyebrow--amber {
  color: var(--amber-2);
}

.link-btn {
  padding: 0;
  border: 0;
  background: none;
  color: var(--blue-2);
  font-weight: 600;
  text-decoration: underline;
  text-underline-offset: 3px;
}

/* ===== BUTTONS ===== */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--s-2);
  min-height: 48px;
  padding: 0 22px;
  border: 1.5px solid transparent;
  border-radius: var(--r-pill);
  background: transparent;
  font-family: var(--font-head);
  font-size: var(--fs-16);
  font-weight: 600;
  text-decoration: none;
  white-space: nowrap;
  transition: background-color 0.2s, border-color 0.2s, color 0.2s, transform 0.2s var(--ease-out);
}

.btn:active {
  transform: scale(0.97);
}

.btn--primary {
  background: var(--amber);
  color: var(--on-amber);
}

.btn--ghost {
  border-color: var(--line-2);
  color: var(--text);
}

.btn--outline {
  border-color: var(--blue);
  color: var(--text);
}

.btn--added {
  background: var(--green-wash);
  border-color: var(--green);
  color: var(--green);
}

.btn--disabled {
  background: var(--surface-2);
  color: var(--faint);
  cursor: not-allowed;
}

.btn--sm {
  min-height: 44px;
  padding: 0 16px;
  font-size: var(--fs-14);
}

.btn--block {
  width: 100%;
}

.icon-btn {
  position: relative;
  display: inline-grid;
  place-items: center;
  flex: none;
  width: 44px;
  height: 44px;
  padding: 0;
  border: 0;
  border-radius: var(--r-pill);
  background: transparent;
  color: var(--text);
  transition: background-color 0.2s, color 0.2s, opacity 0.2s;
}

.icon-btn--line {
  border: 1.5px solid var(--line-2);
}

.icon-btn--sm {
  width: 44px;
  height: 44px;
  color: var(--muted);
}

.icon-btn:disabled {
  opacity: 0.35;
  cursor: default;
}

.count {
  position: absolute;
  top: 2px;
  right: 0;
  min-width: 18px;
  height: 18px;
  padding: 0 5px;
  border-radius: var(--r-pill);
  background: var(--amber);
  color: var(--on-amber);
  font-size: 11px;
  font-weight: 700;
  line-height: 18px;
  text-align: center;
}

.count.is-empty {
  display: none;
}

.count.is-bump {
  animation: bump 0.45s var(--ease-out);
}

@keyframes bump {
  40% { transform: scale(1.35); }
}

@media (hover: hover) {
  .btn--primary:hover { background: var(--amber-2); }
  .btn--ghost:hover,
  .btn--outline:hover { background: var(--blue-wash); border-color: var(--blue-2); }
  .icon-btn:not(:disabled):hover { background: var(--surface-2); }
  .link-btn:hover { color: var(--text); }
}

/* ===== ANNOUNCEMENT BAR ===== */
.announcement {
  background: linear-gradient(90deg, var(--blue-deep), var(--blue));
  color: var(--white);
  font-size: var(--fs-14);
}

.announcement__text {
  width: var(--container);
  margin-inline: auto;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 4px 10px;
  padding: 8px 0;
  text-align: center;
}

.announcement__dot {
  display: inline-block;
  flex: none;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--amber-2);
  box-shadow: 0 0 0 4px rgba(252, 211, 77, 0.25);
  animation: pulse 2.4s ease-in-out infinite;
}

@keyframes pulse {
  50% { transform: scale(0.7); opacity: 0.6; }
}

.announcement__link {
  font-weight: 700;
  text-underline-offset: 3px;
}

/* ===== HEADER ===== */
.header {
  z-index: 40;
  background: rgba(11, 27, 63, 0.94);
  border-bottom: 1px solid var(--line);
}

.header__inner {
  display: grid;
  grid-template-columns: auto auto minmax(0, 1fr);
  grid-template-areas:
    "menu logo actions"
    "search search search";
  align-items: center;
  gap: 10px 8px;
  padding: 10px 0 12px;
}

.header__menu { grid-area: menu; margin-left: -8px; }
.header .logo { grid-area: logo; }
.header .search { grid-area: search; }
.header .mode-toggle { grid-area: toggle; }
.header__actions { grid-area: actions; }

.logo {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-height: 44px;
  text-decoration: none;
}

.logo__word {
  font-family: var(--font-head);
  font-size: 1.25rem;
  font-weight: 700;
  letter-spacing: 0.06em;
}

.search {
  position: relative;
  display: flex;
}

.search__input {
  width: 100%;
  min-height: 46px;
  padding: 0 52px 0 18px;
  border: 1.5px solid var(--line-2);
  border-radius: var(--r-pill);
  background: var(--surface);
  font-size: var(--fs-16);
}

.search__input::placeholder {
  color: var(--faint);
}

.search__input:focus {
  border-color: var(--blue-2);
  outline: none;
  box-shadow: 0 0 0 3px var(--blue-wash);
}

.search__btn {
  position: absolute;
  top: 1px;
  right: 1px;
  display: grid;
  place-items: center;
  width: 44px;
  height: 44px;
  border: 0;
  border-radius: var(--r-pill);
  background: var(--blue);
  color: var(--white);
}

.header__actions {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 2px;
}

.region {
  min-height: 44px;
  max-width: 104px;
  padding: 0 28px 0 12px;
  border: 1.5px solid var(--line-2);
  border-radius: var(--r-pill);
  background: var(--surface) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24'%3E%3Cpath d='M6 9l6 6 6-6' fill='none' stroke='%23AEBBDA' stroke-width='2.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") no-repeat right 10px center;
  font-size: var(--fs-16);
  font-weight: 600;
  -webkit-appearance: none;
  appearance: none;
  margin-right: 4px;
}

.rfq-btn {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  min-height: 44px;
  padding: 0 12px;
  border: 1.5px solid var(--line-2);
  border-radius: var(--r-pill);
  background: transparent;
  font-weight: 600;
  font-size: var(--fs-14);
}

.rfq-btn .count {
  position: static;
}

.rfq-btn__label {
  display: none;
}

/* Mode toggle: "Shop" | "For Business" */
.mode-toggle {
  position: relative;
  display: grid;
  grid-template-columns: 1fr 1fr;
  padding: 4px;
  border: 1.5px solid var(--line-2);
  border-radius: var(--r-pill);
  background: var(--bg-2);
}

.mode-toggle__thumb {
  position: absolute;
  top: 4px;
  bottom: 4px;
  left: 4px;
  width: calc(50% - 4px);
  border-radius: var(--r-pill);
  background: var(--blue);
  box-shadow: 0 6px 16px -6px rgba(37, 99, 235, 0.8);
  transition: transform 0.32s var(--ease-out), background-color 0.3s;
}

html[data-mode="business"] .mode-toggle__thumb {
  transform: translateX(100%);
  background: var(--amber);
  box-shadow: 0 6px 16px -6px rgba(245, 158, 11, 0.8);
}

.mode-toggle__btn {
  position: relative;
  z-index: 1;
  min-height: 44px;
  padding: 0 14px;
  border: 0;
  border-radius: var(--r-pill);
  background: none;
  color: var(--muted);
  font-family: var(--font-head);
  font-size: var(--fs-14);
  font-weight: 700;
  white-space: nowrap;
  transition: color 0.25s;
}

.mode-toggle__btn[aria-pressed="true"] {
  color: var(--white);
}

html[data-mode="business"] .mode-toggle__btn[aria-pressed="true"] {
  color: var(--on-amber);
}

.mode-toggle--block {
  margin-bottom: var(--s-4);
}

.region--block {
  width: 100%;
  max-width: none;
  margin: 0;
}

/* Category / business nav strip — scrolls sideways inside itself on small screens */
.catnav {
  position: relative;
  border-top: 1px solid var(--line);
}

.catnav__inner {
  display: flex;
  align-items: center;
  gap: var(--s-2);
}

.mode-toggle--mini {
  flex: none;
  padding: 3px;
}

.mode-toggle--mini .mode-toggle__thumb {
  top: 3px;
  bottom: 3px;
  left: 3px;
  width: calc(50% - 3px);
}

.mode-toggle--mini .mode-toggle__btn {
  padding: 0 12px;
  font-size: var(--fs-13);
}

@media (min-width: 1024px) {
  .mode-toggle--mini { display: none; }
}

.catnav__list {
  flex: 1;
  min-width: 0;
  display: flex;
  align-items: center;
  gap: 4px;
  overflow-x: auto;
  scrollbar-width: none;
  padding: 6px 0;
}

.catnav__list::-webkit-scrollbar {
  display: none;
}

.catnav__link {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  min-height: 44px;
  padding: 0 12px;
  border: 0;
  border-radius: var(--r-pill);
  background: none;
  color: var(--muted);
  font-size: var(--fs-14);
  font-weight: 600;
  text-decoration: none;
  white-space: nowrap;
}

.catnav__link.is-active {
  background: var(--surface-2);
  color: var(--text);
}

.catnav__sep {
  flex: none;
  width: 1px;
  height: 22px;
  margin: 0 6px;
  background: var(--line-2);
}

@media (hover: hover) {
  .catnav__link:hover { color: var(--text); background: var(--surface); }
}

.soon-pill {
  display: inline-flex;
  align-items: center;
  padding: 2px 8px;
  border-radius: var(--r-pill);
  background: var(--amber-wash);
  color: var(--amber-2);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

.soon-pill--lg {
  padding: 5px 12px;
  font-size: var(--fs-12);
}

.live-pill {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 2px 9px;
  border-radius: var(--r-pill);
  background: var(--green-wash);
  color: var(--green);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

.live-pill__dot {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--green);
  animation: pulse 2.4s ease-in-out infinite;
}

/* Below 1024px the full toggle and the region select live in the drawer / catnav pill */
.header__inner > .mode-toggle,
.header__actions > .region {
  display: none;
}

@media (min-width: 640px) {
  .rfq-btn__label {
    display: inline;
  }
}

@media (min-width: 1024px) {
  .header {
    position: sticky;
    top: 0;
    -webkit-backdrop-filter: blur(14px);
    backdrop-filter: blur(14px);
  }

  html {
    scroll-padding-top: 140px;
  }

  .header__inner {
    grid-template-columns: auto minmax(0, 1fr) auto auto;
    grid-template-areas: "logo search toggle actions";
    gap: 20px;
    padding: 12px 0;
  }

  .header__menu {
    display: none;
  }

  .header__inner > .mode-toggle {
    display: grid;
    width: 260px;
  }

  .header__actions > .region {
    display: block;
  }

  .search {
    max-width: 560px;
  }
}

/* ===== MOBILE DRAWER ===== */
.drawer {
  position: fixed;
  inset: 0;
  z-index: 80;
}

.drawer__overlay {
  position: absolute;
  inset: 0;
  background: var(--overlay);
  opacity: 0;
  transition: opacity 0.25s;
}

.drawer__panel {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  width: min(88%, 360px);
  overflow-y: auto;
  padding: 12px 20px 32px;
  background: var(--bg-2);
  border-right: 1px solid var(--line);
  transform: translateX(-100%);
  transition: transform 0.28s var(--ease-out);
}

.drawer__panel:focus {
  outline: none;
}

.drawer.is-open .drawer__overlay { opacity: 1; }
.drawer.is-open .drawer__panel { transform: none; }

.drawer__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: var(--s-3);
}

.drawer__title {
  font-family: var(--font-head);
  font-size: var(--fs-20);
  font-weight: 700;
}

.drawer__label {
  margin: var(--s-3) 0 var(--s-2);
  color: var(--faint);
  font-size: var(--fs-12);
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.drawer__list a,
.drawer__list button {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  min-height: 48px;
  padding: 0 4px;
  border: 0;
  border-bottom: 1px solid var(--line);
  background: none;
  font-size: var(--fs-16);
  font-weight: 600;
  text-align: left;
  text-decoration: none;
}

/* ===== BLOCKS (store rows) ===== */
.block {
  padding-block: var(--block-y) 0;
}

.block--tight {
  padding-top: clamp(24px, 1.5vw + 16px, 36px);
}

main > .block:last-child,
main > :last-child {
  padding-bottom: var(--s-6);
}

.block__head {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: var(--s-2) var(--s-3);
  margin-bottom: var(--s-3);
}

.block__head--wrap {
  flex-wrap: wrap;
}

.block__title {
  font-size: clamp(1.25rem, 1rem + 1vw, 1.75rem);
}

.block__title--sm {
  font-size: clamp(1.15rem, 1rem + 0.6vw, 1.5rem);
}

.block__count {
  color: var(--faint);
  font-family: var(--font-body);
  font-size: var(--fs-16);
  font-weight: 500;
}

.block__note {
  color: var(--muted);
  font-size: var(--fs-14);
}

.block__tools {
  display: flex;
  align-items: center;
  gap: var(--s-25);
}

.block__link {
  flex: none;
  min-height: 44px;
  display: inline-flex;
  align-items: center;
  color: var(--blue-2);
  font-weight: 700;
  font-size: var(--fs-14);
  text-underline-offset: 3px;
}

@media (max-width: 639px) {
  .block__head:not(.block__head--wrap) .block__note {
    display: none;
  }
}

/* ===== SHOP HERO (warm gradient panel + side tiles) ===== */
.promo {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--s-25);
  padding-top: var(--s-3);
}

.promo__main {
  position: relative;
  grid-column: 1 / -1;
  overflow: hidden;
  border-radius: var(--r-lg);
  isolation: isolate;
}

.fun-hero {
  display: grid;
  background: var(--hero-warm);
  color: var(--on-toy);
  box-shadow: 0 20px 50px -24px rgba(255, 159, 67, 0.55);
}

.fun-hero__content {
  position: relative;
  z-index: 1;
  display: grid;
  gap: var(--s-25);
  align-content: center;
  padding: var(--s-4) var(--s-4) var(--s-3);
}

.fun-hero__stickers {
  display: flex;
  flex-wrap: wrap;
  gap: var(--s-2);
}

.sticker {
  display: inline-flex;
  align-items: center;
  padding: 5px 14px;
  border: 2.5px solid var(--on-toy);
  border-radius: var(--r-pill);
  color: var(--on-toy);
  font-family: var(--font-fun);
  font-size: var(--fs-14);
  font-weight: 700;
  box-shadow: 3px 3px 0 var(--on-toy);
  transform: rotate(-4deg);
}

.sticker + .sticker {
  transform: rotate(3deg);
}

.sticker--pink { background: var(--toy-pink); }
.sticker--sky { background: var(--toy-sky); }

.promo__title {
  font-size: clamp(2rem, 1.5rem + 2.2vw, 3.25rem);
  line-height: 1.05;
}

.fun-hero .promo__title {
  color: var(--on-toy);
}

.promo__text {
  max-width: 46ch;
  color: var(--muted);
}

.fun-hero .promo__text {
  color: var(--on-toy);
  font-weight: 500;
}

.promo__ctas {
  display: flex;
  flex-wrap: wrap;
  gap: var(--s-2);
  margin-top: var(--s-1);
}

.btn--line-dark {
  border-color: var(--on-toy);
  color: var(--on-toy);
}

.fun-hero__media {
  position: relative;
  padding: 0 var(--s-3) var(--s-3);
}

.fun-hero__img {
  width: 100%;
  aspect-ratio: 16 / 10;
  object-fit: cover;
  border: 3px solid var(--on-toy);
  border-radius: var(--r-lg);
  box-shadow: 6px 6px 0 var(--on-toy);
}

/* Floating SVG stickers */
.float {
  position: absolute;
  z-index: 2;
  pointer-events: none;
  animation: float-y 4.5s ease-in-out infinite;
}

.float path,
.float circle {
  stroke: var(--on-toy);
  stroke-width: 3;
  stroke-linejoin: round;
}

.float .f-thin { stroke-width: 2.5; }
.float .f-pink { fill: var(--toy-pink); }
.float .f-sky { fill: var(--toy-sky); }
.float .f-purple { fill: var(--toy-purple); }
.float .f-yellow { fill: var(--toy-yellow); }
.float .f-white { fill: var(--white); }

.float--star { top: 12px; right: 14px; --rot: 12deg; }
.float--rocket { bottom: 26px; left: 6px; width: 44px; height: 44px; animation-delay: -1.5s; --rot: -8deg; }
.float--sparkle { top: 46%; right: 10px; width: 28px; height: 28px; animation-delay: -3s; --rot: 0deg; }

@keyframes float-y {
  0%, 100% { transform: translateY(0) rotate(var(--rot, 0deg)); }
  50% { transform: translateY(-8px) rotate(calc(var(--rot, 0deg) + 6deg)); }
}

.promo__side {
  position: relative;
  display: flex;
  align-items: flex-end;
  min-height: 150px;
  overflow: hidden;
  border-radius: var(--r-lg);
  background: var(--photo-bg);
  text-decoration: none;
  isolation: isolate;
}

.promo__side img {
  position: absolute;
  inset: 0;
  z-index: -2;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.5s var(--ease-out);
}

.promo__side::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background: linear-gradient(0deg, rgba(11, 27, 63, 0.9) 10%, rgba(11, 27, 63, 0) 70%);
}

.promo__side-text {
  display: grid;
  padding: var(--s-25) var(--s-3);
}

.promo__side-kicker {
  color: var(--amber-2);
  font-size: var(--fs-12);
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.promo__side-title {
  font-family: var(--font-head);
  font-size: clamp(1.05rem, 0.9rem + 0.8vw, 1.25rem);
  font-weight: 700;
  line-height: 1.2;
}

@media (hover: hover) {
  .promo__side:hover img { transform: scale(1.05); }
}

@media (min-width: 640px) {
  .fun-hero { grid-template-columns: 1.1fr 1fr; align-items: center; }
  .fun-hero__content { padding: var(--s-5) var(--s-2) var(--s-5) var(--s-5); }
  .fun-hero__media { padding: var(--s-4) var(--s-5) var(--s-4) var(--s-2); }
  .fun-hero__img { aspect-ratio: 4 / 3.4; }
  .float--rocket { left: auto; right: 46%; bottom: 14px; }
}

@media (min-width: 1024px) {
  .promo {
    grid-template-columns: 2.2fr 1fr;
    grid-template-rows: 1fr 1fr;
    padding-top: var(--s-4);
  }

  .promo__main {
    grid-column: 1;
    grid-row: 1 / 3;
    min-height: 400px;
  }

  .fun-hero__content { padding-left: var(--s-6); }
  .float--star { top: 18px; right: 22px; width: 52px; height: 52px; }
}

/* ===== SEGMENTS ===== */
.segments {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--s-25);
}

.seg__card {
  display: flex;
  flex-direction: column;
  width: 100%;
  height: 100%;
  padding: 0;
  overflow: hidden;
  border: 1px solid var(--line);
  border-radius: var(--r-md);
  background: var(--surface);
  text-align: left;
  text-decoration: none;
  transition: border-color 0.2s, transform 0.25s var(--ease-out);
}

.seg__card--live {
  border-color: rgba(74, 222, 128, 0.45);
}

.seg__media {
  display: block;
  aspect-ratio: 16 / 6;
  overflow: hidden;
  background: var(--photo-bg);
}

.seg__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.5s var(--ease-out);
}

.seg__body {
  display: grid;
  gap: 4px;
  justify-items: start;
  padding: var(--s-25) var(--s-25) var(--s-3);
}

.seg__name {
  font-family: var(--font-head);
  font-size: var(--fs-20);
  font-weight: 700;
}

.seg__blurb {
  color: var(--muted);
  font-size: var(--fs-13);
  line-height: 1.4;
}

.seg__body .soon-pill,
.seg__body .live-pill {
  margin-top: 4px;
}

@media (hover: hover) {
  .seg__card:hover { border-color: var(--blue-2); transform: translateY(-3px); }
  .seg__card:hover .seg__media img { transform: scale(1.05); }
}

@media (min-width: 1024px) {
  .segments {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }
}

/* ===== PRODUCT GRID + RAILS ===== */
.grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--s-25);
}

.rail {
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: max(152px, calc((100% - var(--s-25)) / 2.1));
  gap: var(--s-25);
  overflow-x: auto;
  overscroll-behavior-x: contain;
  scroll-snap-type: x mandatory;
  scrollbar-width: thin;
  scrollbar-color: var(--surface-3) transparent;
  padding-bottom: 10px;
}

.rail > * {
  scroll-snap-align: start;
}

.rail:focus-visible {
  outline-offset: 4px;
}

.rail-nav {
  display: none;
  gap: var(--s-2);
}

@media (min-width: 640px) {
  .grid { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--s-3); }
  .rail { grid-auto-columns: calc((100% - 2 * var(--s-3)) / 3.2); gap: var(--s-3); }
}

@media (min-width: 1024px) {
  .grid { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .rail { grid-auto-columns: calc((100% - 4 * var(--s-3)) / 5); }
  .rail-nav { display: flex; }
}

@media (min-width: 1280px) {
  .grid { gap: 20px; }
}

/* ===== PRODUCT CARD ===== */
.card {
  position: relative;
  container-type: inline-size;
  display: flex;
  flex-direction: column;
  min-width: 0;
  overflow: hidden;
  border: 1px solid var(--line);
  border-radius: var(--r-md);
  background: var(--surface);
  transition: border-color 0.2s, transform 0.25s var(--ease-out), box-shadow 0.25s;
}

.card__media {
  position: relative;
  display: block;
  aspect-ratio: 1;
  overflow: hidden;
  background: var(--photo-bg);
}

.card__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.45s var(--ease-out);
}

.card__badge {
  position: absolute;
  top: 10px;
  left: 10px;
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 3px 9px;
  border-radius: var(--r-pill);
  background: var(--amber);
  color: var(--on-amber);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.03em;
}

.card__badge--seller {
  top: auto;
  bottom: 10px;
  background: rgba(11, 27, 63, 0.88);
  color: var(--text);
}

.card__badge--seller svg {
  color: var(--green);
}

.card__wish {
  position: absolute;
  top: 6px;
  right: 6px;
  z-index: 2;
  display: grid;
  place-items: center;
  width: 44px;
  height: 44px;
  border: 0;
  border-radius: 50%;
  background: rgba(11, 27, 63, 0.72);
  color: var(--white);
  transition: transform 0.2s var(--ease-out), color 0.2s;
}

.card__wish[aria-pressed="true"] {
  color: var(--amber);
}

.card__wish[aria-pressed="true"] path,
.pdp__wish[aria-pressed="true"] path {
  fill: currentColor;
}

.card__wish:active {
  transform: scale(0.88);
}

.card__body {
  display: flex;
  flex: 1;
  flex-direction: column;
  gap: 6px;
  padding: var(--s-25);
}

.card__meta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 4px 8px;
}

.card__seller {
  color: var(--faint);
  font-size: 11px;
  font-weight: 600;
}

.age-tag {
  display: inline-flex;
  padding: 2px 8px;
  border-radius: var(--r-pill);
  background: var(--blue-wash);
  color: var(--blue-3);
  font-size: 11px;
  font-weight: 700;
}

.age-tag--lg {
  padding: 4px 12px;
  font-size: var(--fs-13);
}

.card__name {
  font-family: var(--font-head);
  font-size: var(--fs-16);
  font-weight: 600;
  line-height: 1.3;
}

.card__name a {
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  text-decoration: none;
}

/* Whole card is clickable via the title link */
.card__name a::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
}

.card__desc {
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  color: var(--muted);
  font-size: var(--fs-13);
  line-height: 1.45;
}

.card__foot {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--s-2);
  margin-top: auto;
  padding-top: 4px;
}

.card__price {
  font-family: var(--font-head);
  font-size: var(--fs-20);
  font-weight: 700;
}

.card__add,
.card__body .btn {
  position: relative;
  z-index: 2;
}

.card__add {
  padding: 0 14px;
}

.card__add.is-added {
  background: var(--green);
}

/* Business card */
.card__ws {
  color: var(--muted);
  font-size: var(--fs-13);
}

.card__ws strong {
  color: var(--amber-2);
  font-family: var(--font-head);
  font-size: var(--fs-20);
}

.card__facts {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 6px 8px;
  margin: 2px 0 6px;
  padding: 8px 10px;
  border-radius: var(--r-sm);
  background: var(--bg-2);
  font-size: var(--fs-12);
}

.card__facts dt {
  color: var(--faint);
}

.card__facts dd {
  font-weight: 600;
}

.card--biz .btn {
  margin-top: auto;
}

.card__moq {
  color: var(--muted);
  font-size: var(--fs-13);
}

.card--mini .card__name {
  font-size: var(--fs-14);
}

@media (max-width: 639px) {
  .card__desc { display: none; }
  .card__price { font-size: var(--fs-16); }
  .card__facts { grid-template-columns: 1fr; }
  .card__ws strong { font-size: var(--fs-16); }
}

@media (hover: hover) {
  .card:hover { border-color: var(--line-2); transform: translateY(-3px); box-shadow: var(--shadow-1); }
  .card:hover .card__media img { transform: scale(1.05); }
  .card__wish:hover { color: var(--amber-2); }
}

/* ===== TOOLBAR: chips + sort ===== */
.toolbar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--s-2);
}

.chips {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

.chip {
  min-height: 44px;
  padding: 0 14px;
  border: 1.5px solid var(--line-2);
  border-radius: var(--r-pill);
  background: transparent;
  color: var(--muted);
  font-size: var(--fs-14);
  font-weight: 600;
  transition: background-color 0.2s, color 0.2s, border-color 0.2s;
}

.chip[aria-pressed="true"] {
  border-color: var(--blue);
  background: var(--blue);
  color: var(--white);
}

@media (hover: hover) {
  .chip:not([aria-pressed="true"]):hover { color: var(--text); border-color: var(--blue-2); }
}

.select,
.input {
  min-height: 44px;
  padding: 0 14px;
  border: 1.5px solid var(--line-2);
  border-radius: var(--r-sm);
  background: var(--surface);
  font-size: var(--fs-16);
}

.select {
  padding-right: 36px;
  border-radius: var(--r-pill);
  background: var(--surface) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24'%3E%3Cpath d='M6 9l6 6 6-6' fill='none' stroke='%23AEBBDA' stroke-width='2.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") no-repeat right 14px center;
  -webkit-appearance: none;
  appearance: none;
}

.input:focus,
.select:focus {
  border-color: var(--blue-2);
  outline: none;
  box-shadow: 0 0 0 3px var(--blue-wash);
}

.input[aria-invalid="true"] {
  border-color: var(--red);
}

.input--sm {
  min-height: 44px;
  width: 110px;
}

.search-status,
.empty {
  margin-bottom: var(--s-3);
  color: var(--muted);
}

.empty {
  padding: var(--s-5) 0;
  text-align: center;
}

/* ===== TRUST STRIP ===== */
.trust {
  display: grid;
  gap: var(--s-25);
}

@media (min-width: 640px) {
  .trust { grid-template-columns: 1fr 1fr; }
}

.trust__item {
  display: flex;
  align-items: center;
  gap: var(--s-25);
  padding: var(--s-25);
  border: 1px solid var(--line);
  border-radius: var(--r-md);
  background: var(--bg-2);
}

.trust__item strong {
  display: block;
  font-size: var(--fs-14);
}

.trust__item small {
  display: block;
  color: var(--muted);
  font-size: var(--fs-12);
  line-height: 1.35;
}

.trust__icon {
  display: grid;
  flex: none;
  place-items: center;
  width: 40px;
  height: 40px;
  border-radius: 12px;
  background: var(--blue-wash);
  color: var(--blue-2);
}

@media (min-width: 1024px) {
  .trust { grid-template-columns: repeat(4, 1fr); }
}

/* ===== FORM MESSAGES ===== */
.form-msg {
  flex-basis: 100%;
  font-size: var(--fs-14);
}

.form-msg:empty {
  display: none;
}

.form-msg.is-success { color: var(--green); }
.form-msg.is-error { color: var(--red); }

/* ===== BUSINESS HERO ===== */
.biz-hero {
  padding-top: var(--s-3);
}

.biz-hero__main {
  display: grid;
  gap: var(--s-25);
  align-content: center;
  padding: var(--s-4);
  border-radius: var(--r-lg);
  background:
    radial-gradient(circle at 100% 0%, rgba(245, 158, 11, 0.22), transparent 55%),
    radial-gradient(circle at 0% 100%, rgba(37, 99, 235, 0.28), transparent 55%),
    var(--surface);
  border: 1px solid var(--line);
}

.biz-hero__text-wrap {
  display: grid;
  gap: var(--s-2);
}

.biz-hero__title {
  font-size: clamp(1.75rem, 1.4rem + 1.4vw, 2.25rem);
  max-width: 28ch;
}

.biz-hero__text {
  color: var(--muted);
  max-width: 56ch;
}

@media (min-width: 1024px) {
  .biz-hero {
    padding-top: var(--s-4);
  }

  .biz-hero__main {
    grid-template-columns: minmax(0, 1fr) auto;
    gap: var(--s-5);
    align-items: center;
    padding: var(--s-5) var(--s-6);
  }

  .biz-hero__ctas {
    flex-wrap: nowrap;
    margin-top: 0;
  }
}

/* ===== SERVICES / PLANS ===== */
.services {
  display: grid;
  gap: var(--s-25);
}

.service,
.plan {
  display: flex;
  flex-direction: column;
  gap: var(--s-25);
  padding: var(--s-4);
  border: 1px solid var(--line);
  border-radius: var(--r-md);
  background: var(--surface);
}

.service__icon {
  display: grid;
  place-items: center;
  width: 46px;
  height: 46px;
  border-radius: 14px;
  background: var(--blue-wash);
  color: var(--blue-2);
}

.service__title,
.plan__title {
  font-size: var(--fs-20);
}

.ticks {
  display: grid;
  gap: 8px;
  font-size: var(--fs-14);
  color: var(--muted);
}

.ticks li {
  position: relative;
  padding-left: 24px;
}

.ticks li::before {
  content: "";
  position: absolute;
  top: 0.35em;
  left: 0;
  width: 14px;
  height: 14px;
  border-radius: 50%;
  background: var(--green-wash) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='10' viewBox='0 0 24 24'%3E%3Cpath d='M5 12.5l4.5 4.5L19 7.5' fill='none' stroke='%234ADE80' stroke-width='3.4' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") no-repeat center;
}

.plans {
  display: grid;
  gap: var(--s-25);
}

.plan--featured {
  border-color: rgba(245, 158, 11, 0.55);
  background: linear-gradient(160deg, rgba(245, 158, 11, 0.10), var(--surface) 45%);
}

.plan__tag {
  justify-self: start;
  align-self: flex-start;
  padding: 3px 10px;
  border-radius: var(--r-pill);
  background: var(--amber);
  color: var(--on-amber);
  font-size: var(--fs-12);
  font-weight: 700;
}

.plan__tag--muted {
  background: var(--surface-3);
  color: var(--text);
}

.plan__sub {
  color: var(--muted);
}

.plan .btn {
  margin-top: auto;
}

@media (min-width: 640px) {
  .plans { grid-template-columns: 1fr 1fr; }
}

@media (min-width: 1024px) {
  .services { grid-template-columns: repeat(3, 1fr); }
}

/* ===== ETHICAL MARKETPLACE ===== */
.ethic {
  display: grid;
  gap: var(--s-4);
  padding: var(--s-4);
  border-radius: var(--r-lg);
  border: 1px solid rgba(74, 222, 128, 0.35);
  background: linear-gradient(140deg, rgba(74, 222, 128, 0.08), var(--bg-2) 50%);
}

.ethic__lead {
  display: grid;
  gap: var(--s-2);
}

.ethic__title {
  font-size: clamp(1.35rem, 1.05rem + 1.3vw, 2rem);
}

.ethic__list {
  display: grid;
  gap: var(--s-25);
  color: var(--muted);
  font-size: var(--fs-14);
}

.ethic__list li {
  padding-left: 14px;
  border-left: 2px solid var(--green);
}

.ethic__list strong {
  color: var(--text);
}

@media (min-width: 1024px) {
  .ethic {
    grid-template-columns: 1fr 1.2fr;
    padding: var(--s-5) var(--s-6);
    align-items: center;
  }

  .ethic__list { grid-template-columns: 1fr 1fr; }
}

/* ===== ENQUIRY ===== */
.enquire {
  display: grid;
  gap: var(--s-4);
  padding: var(--s-4);
  border-radius: var(--r-lg);
  border: 1px solid var(--line);
  background: var(--surface);
}

.enquire__text {
  display: grid;
  gap: var(--s-2);
  align-content: start;
}

.enquire__title {
  font-size: clamp(1.35rem, 1.05rem + 1.3vw, 2rem);
}

.enquire__text p:last-child {
  color: var(--muted);
}

.enquire__form,
.quote__form {
  display: grid;
  gap: var(--s-25);
}

.field {
  display: grid;
  gap: 6px;
  min-width: 0;
}

.field label {
  color: var(--muted);
  font-size: var(--fs-13);
  font-weight: 600;
}

.field .input {
  width: 100%;
}

.field__error {
  color: var(--red);
  font-size: var(--fs-13);
}

@media (min-width: 640px) {
  .enquire__form,
  .quote__form { grid-template-columns: 1fr 1fr; }
  .field--wide { grid-column: 1 / -1; }
}

@media (min-width: 1024px) {
  .enquire {
    grid-template-columns: 1fr 1.2fr;
    padding: var(--s-5) var(--s-6);
  }
}

/* ===== FOOTER ===== */
.footer {
  margin-top: var(--s-6);
  border-top: 1px solid var(--line);
  background: var(--bg-2);
  font-size: var(--fs-14);
}

.footer__inner {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--s-4);
  padding: var(--s-5) 0 var(--s-4);
}

.footer__brand {
  grid-column: 1 / -1;
  display: grid;
  gap: var(--s-2);
  align-content: start;
  color: var(--muted);
  max-width: 340px;
}

.footer__heading {
  margin-bottom: var(--s-2);
  font-size: var(--fs-14);
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--faint);
}

.footer__col ul {
  display: grid;
}

.footer__col a,
.footer__col .link-btn,
.footer__col span {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  color: var(--muted);
  text-decoration: none;
  font-weight: 500;
}

.footer__col .link-btn {
  text-decoration: none;
  text-align: left;
}

.footer__bottom {
  display: grid;
  gap: 6px;
  padding: var(--s-3) 0 var(--s-4);
  border-top: 1px solid var(--line);
  color: var(--faint);
  font-size: var(--fs-13);
}

.footer__bottom a {
  color: var(--muted);
}

@media (hover: hover) {
  .footer__col a:hover,
  .footer__col .link-btn:hover { color: var(--text); }
}

@media (min-width: 1024px) {
  .footer__inner { grid-template-columns: 1.6fr 1fr 1fr 1fr; }
  .footer__brand { grid-column: auto; }
}

/* ===== SHEET (cart / wishlist / RFQ) ===== */
dialog {
  color: var(--text);
}

dialog::backdrop {
  background: var(--overlay);
}

.sheet {
  position: fixed;
  inset: 0 0 0 auto;
  width: min(440px, 100%);
  max-width: 100%;
  height: 100%;
  max-height: 100%;
  margin: 0;
  padding: 0;
  border: 0;
  border-left: 1px solid var(--line);
  background: var(--bg-2);
  overflow-y: auto;
}

.sheet[open] {
  animation: sheet-in 0.3s var(--ease-out);
}

@keyframes sheet-in {
  from { transform: translateX(100%); }
}

.sheet__head {
  position: sticky;
  top: 0;
  z-index: 1;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 12px 16px 12px 20px;
  border-bottom: 1px solid var(--line);
  background: var(--bg-2);
}

.sheet__title {
  font-size: var(--fs-20);
}

.sheet__body {
  display: grid;
  gap: var(--s-3);
  padding: var(--s-3) 20px var(--s-5);
}

.sheet__empty {
  color: var(--muted);
}

.sheet__total {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  padding-top: var(--s-25);
  border-top: 1px solid var(--line);
}

.sheet__total strong {
  font-family: var(--font-head);
  font-size: var(--fs-20);
}

.sheet__hint {
  color: var(--muted);
  font-size: var(--fs-13);
}

.prelaunch-note {
  padding: var(--s-25) var(--s-3);
  border: 1px solid rgba(245, 158, 11, 0.45);
  border-radius: var(--r-md);
  background: var(--amber-wash);
}

.prelaunch-note strong {
  color: var(--amber-2);
  font-family: var(--font-head);
}

.prelaunch-note p {
  color: var(--text);
  font-size: var(--fs-14);
}

.lines {
  display: grid;
  gap: var(--s-25);
}

.line {
  display: grid;
  grid-template-columns: 64px minmax(0, 1fr) auto;
  gap: var(--s-25);
  align-items: start;
}

.line__img {
  width: 64px;
  height: 64px;
  border-radius: var(--r-sm);
  object-fit: cover;
  background: var(--photo-bg);
}

.line__info {
  display: grid;
  gap: 6px;
  justify-items: start;
  min-width: 0;
}

.line__name {
  font-weight: 600;
  font-size: var(--fs-14);
  line-height: 1.3;
  text-decoration: none;
}

.line__price {
  color: var(--muted);
  font-size: var(--fs-13);
}

.line__qty {
  display: flex;
  align-items: center;
  gap: 8px;
  color: var(--muted);
  font-size: var(--fs-13);
}

.stepper {
  display: inline-flex;
  align-items: center;
  border: 1.5px solid var(--line-2);
  border-radius: var(--r-pill);
}

.stepper button {
  width: 44px;
  height: 44px;
  border: 0;
  border-radius: 50%;
  background: none;
  font-size: var(--fs-20);
  line-height: 1;
}

.stepper span {
  min-width: 26px;
  text-align: center;
  font-weight: 700;
}

.stepper--lg button {
  width: 46px;
  height: 46px;
}

/* ===== COMING SOON DIALOG ===== */
.soon {
  width: min(520px, 100% - 32px);
  max-height: calc(100% - 32px);
  padding: 0;
  overflow-y: auto;
  border: 1px solid var(--line-2);
  border-radius: var(--r-lg);
  background: var(--bg-2);
  box-shadow: var(--shadow-2);
}

.soon[open] {
  animation: pop-in 0.3s var(--ease-out);
}

@keyframes pop-in {
  from { opacity: 0; transform: translateY(12px) scale(0.97); }
}

.soon__media {
  position: relative;
  aspect-ratio: 16 / 8;
  overflow: hidden;
  background: var(--photo-bg);
}

.soon__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.soon__media .soon-pill {
  position: absolute;
  left: 16px;
  bottom: 14px;
  background: var(--amber);
  color: var(--on-amber);
}

.soon__body {
  display: grid;
  gap: var(--s-25);
  padding: var(--s-4);
}

.soon__title {
  font-size: var(--fs-28);
}

.soon__text {
  color: var(--muted);
}

.soon__close {
  justify-self: start;
  min-height: 44px;
}

.soon__x {
  position: absolute;
  top: 10px;
  right: 10px;
  background: rgba(11, 27, 63, 0.8);
}

/* ===== TOAST ===== */
.toast {
  position: fixed;
  left: 50%;
  bottom: 20px;
  z-index: 120;
  max-width: calc(100% - 32px);
  padding: 12px 18px;
  border-radius: var(--r-pill);
  background: var(--text);
  color: var(--bg);
  font-size: var(--fs-14);
  font-weight: 600;
  box-shadow: var(--shadow-2);
  opacity: 0;
  pointer-events: none;
  transform: translate(-50%, 12px);
  transition: opacity 0.25s, transform 0.3s var(--ease-out);
}

.toast.is-visible {
  opacity: 1;
  transform: translate(-50%, 0);
}

/* ===== PRODUCT PAGE ===== */
.crumbs ol {
  display: flex;
  flex-wrap: wrap;
  gap: 4px 8px;
  padding: var(--s-3) 0 var(--s-25);
  color: var(--faint);
  font-size: var(--fs-13);
}

.crumbs li + li::before {
  content: "/";
  margin-right: 8px;
  color: var(--surface-3);
}

.crumbs a {
  color: var(--muted);
  text-underline-offset: 3px;
}

.crumbs [aria-current] {
  color: var(--text);
}

.pdp {
  display: grid;
  gap: var(--s-4);
}

.gallery {
  display: grid;
  gap: var(--s-25);
  align-content: start;
}

.gallery__main {
  position: relative;
  aspect-ratio: 1;
  overflow: hidden;
  border-radius: var(--r-lg);
  background: var(--photo-bg);
}

.gallery__main img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.gallery__thumbs {
  display: flex;
  gap: var(--s-2);
}

.gallery__thumb {
  width: 76px;
  height: 76px;
  padding: 0;
  overflow: hidden;
  border: 2px solid transparent;
  border-radius: var(--r-sm);
  background: var(--photo-bg);
}

.gallery__thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.gallery__thumb[aria-pressed="true"] {
  border-color: var(--amber);
}

.pdp__info {
  display: grid;
  gap: var(--s-25);
  align-content: start;
}

.pdp__seller {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  color: var(--muted);
  font-size: var(--fs-13);
  font-weight: 600;
}

.pdp__seller svg,
.panel__title svg {
  display: inline-block;
  color: var(--green);
}

.pdp__title {
  font-size: clamp(1.75rem, 1.4rem + 1.4vw, 2.4rem);
}

.pdp__price {
  display: flex;
  align-items: baseline;
  flex-wrap: wrap;
  gap: 6px 10px;
}

.pdp__price strong {
  font-family: var(--font-head);
  font-size: clamp(1.75rem, 1.4rem + 1.4vw, 2.25rem);
}

.pdp__price--biz strong {
  color: var(--amber-2);
}

.pdp__price-label,
.pdp__price-unit {
  color: var(--muted);
  font-size: var(--fs-14);
}

.pdp__rrp {
  color: var(--muted);
  font-size: var(--fs-14);
}

.pdp__short {
  font-size: var(--fs-16);
}

.pdp__actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--s-2);
  margin-top: var(--s-1);
}

.pdp__add {
  flex: 1 1 120px;
}

.pdp__wish[aria-pressed="true"] {
  color: var(--amber);
  border-color: var(--amber);
}

.pdp__wish {
  width: 48px;
  height: 48px;
}

.pdp__note {
  display: flex;
  align-items: center;
  gap: 10px;
  color: var(--muted);
  font-size: var(--fs-13);
}

.pdp-details {
  display: grid;
  gap: var(--s-4);
  padding: var(--s-4);
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  background: var(--bg-2);
}

.pdp-details__text {
  margin-top: var(--s-2);
  color: var(--muted);
}

.spec {
  display: grid;
  border-top: 1px solid var(--line);
}

.spec > div {
  display: flex;
  justify-content: space-between;
  gap: var(--s-3);
  padding: 10px 0;
  border-bottom: 1px solid var(--line);
  font-size: var(--fs-14);
}

.spec dt {
  color: var(--faint);
}

.spec dd {
  text-align: right;
  font-weight: 600;
}

.spec--compact > div {
  padding: 8px 0;
}

.trade {
  display: grid;
  gap: var(--s-25);
}

.panel {
  display: grid;
  gap: var(--s-25);
  align-content: start;
  padding: var(--s-4);
  border: 1px solid var(--line);
  border-radius: var(--r-md);
  background: var(--surface);
}

.panel__title {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: var(--fs-16);
}

.panel__title--gap {
  margin-top: var(--s-2);
}

.panel__text {
  color: var(--muted);
  font-size: var(--fs-14);
}

.panel--seller {
  border-color: rgba(74, 222, 128, 0.35);
}

.table-scroll {
  max-width: 100%;
  overflow-x: auto;
}

.tiers {
  width: 100%;
  min-width: 240px;
  border-collapse: collapse;
  font-size: var(--fs-14);
}

.tiers th {
  padding: 8px 10px;
  color: var(--faint);
  font-weight: 600;
  text-align: left;
  border-bottom: 1px solid var(--line-2);
}

.tiers td {
  padding: 10px;
  border-bottom: 1px solid var(--line);
}

.tiers td:last-child,
.tiers th:last-child {
  text-align: right;
}

.tiers tr.is-active td {
  background: var(--amber-wash);
  color: var(--amber-2);
  font-weight: 700;
}

.quote {
  display: grid;
  gap: var(--s-4);
  padding: var(--s-4);
  border: 1px solid rgba(245, 158, 11, 0.4);
  border-radius: var(--r-lg);
  background: var(--bg-2);
}

.quote__text {
  display: grid;
  gap: var(--s-25);
  align-content: start;
}

.quote__text > p {
  color: var(--muted);
}

.quote__estimate {
  display: grid;
  gap: 2px;
  padding: var(--s-3);
  border-radius: var(--r-md);
  background: var(--surface);
}

.quote__estimate span,
.quote__estimate small {
  color: var(--muted);
  font-size: var(--fs-13);
}

.quote__estimate strong {
  font-family: var(--font-head);
  font-size: var(--fs-28);
  color: var(--amber-2);
}

.buybar {
  position: fixed;
  right: 0;
  bottom: 0;
  left: 0;
  z-index: 30;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--s-25);
  padding: 10px 16px calc(10px + env(safe-area-inset-bottom, 0px));
  border-top: 1px solid var(--line-2);
  background: rgba(14, 33, 73, 0.97);
  box-shadow: 0 -12px 30px -12px rgba(0, 0, 0, 0.6);
}

.buybar__price {
  display: grid;
  min-width: 0;
}

.buybar__name {
  overflow: hidden;
  color: var(--muted);
  font-size: var(--fs-12);
  text-overflow: ellipsis;
  white-space: nowrap;
}

.buybar__price strong {
  font-family: var(--font-head);
  font-size: var(--fs-20);
}

.buybar .btn {
  flex: none;
}

.page-product .footer {
  padding-bottom: 76px;
}

@media (min-width: 1024px) {
  .buybar { display: none; }
  .page-product .footer { padding-bottom: 0; }
}

.not-found {
  display: grid;
  gap: var(--s-3);
  justify-items: start;
  padding: var(--s-6) 0;
}

.not-found__title {
  font-size: clamp(1.75rem, 1.3rem + 2vw, 2.5rem);
}

.not-found p {
  color: var(--muted);
}

@media (min-width: 640px) {
  .trade { grid-template-columns: 1fr 1fr; }
}

@media (min-width: 1024px) {
  .pdp {
    grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr);
    gap: var(--s-6);
    align-items: start;
  }

  .gallery {
    position: sticky;
    top: 150px;
  }

  .pdp-details {
    grid-template-columns: 1.4fr 1fr;
    gap: var(--s-6);
    padding: var(--s-5);
  }

  .trade { grid-template-columns: repeat(4, 1fr); }

  .quote {
    grid-template-columns: 1fr 1.4fr;
    padding: var(--s-5);
  }

  .grid--related { grid-template-columns: repeat(5, minmax(0, 1fr)); }
  .grid--related.grid--biz { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .grid--related.grid--biz > :nth-child(5) { display: none; }
}

/* ===== ENHANCEMENTS 26 OCT (brief §12) ===== */

/* --- E1 Category bubbles (toys.html chips) --- */
.bubbles {
  display: flex;
  gap: 14px;
  overflow-x: auto;
  scrollbar-width: none;
  padding: 4px 2px 2px;
}

.bubbles::-webkit-scrollbar {
  display: none;
}

.bubbles li {
  flex: none;
}

.bubble {
  display: grid;
  justify-items: center;
  align-content: start;
  gap: 6px;
  width: 88px;
  padding: 0;
  border: 0;
  background: none;
}

.bubble__ring {
  display: block;
  width: 70px;
  height: 70px;
  padding: 3px;
  border-radius: 50%;
  background: conic-gradient(from 200deg, var(--amber), var(--amber-2), var(--blue-2), var(--blue), var(--amber));
  transition: transform 0.3s var(--ease-out);
}

.bubble__ring img {
  width: 100%;
  height: 100%;
  border: 3px solid var(--bg);
  border-radius: 50%;
  object-fit: cover;
  background: var(--photo-bg);
}

.bubble__name {
  color: var(--muted);
  font-size: var(--fs-12);
  font-weight: 700;
  line-height: 1.2;
  text-align: center;
}

.bubble[aria-pressed="true"] .bubble__ring {
  transform: scale(1.06);
  box-shadow: 0 0 0 3px var(--amber-wash), 0 8px 22px -8px rgba(245, 158, 11, 0.8);
}

.bubble[aria-pressed="true"] .bubble__name {
  color: var(--amber-2);
}

@media (hover: hover) {
  .bubble:hover .bubble__ring { transform: scale(1.1); }
  .bubble:hover .bubble__name { color: var(--text); }
}

@media (min-width: 1024px) {
  .bubbles { gap: 28px; }
  .bubble { width: 96px; }
  .bubble__ring { width: 84px; height: 84px; }
}

/* --- E3 Product cards: photo crossfade, quick view, heart pop, badges --- */
.card__img-alt {
  position: absolute;
  inset: 0;
  opacity: 0;
  transition: opacity 0.45s ease, transform 0.45s var(--ease-out);
}

.card__badge {
  z-index: 1;
}

.card__badge--gift {
  background: var(--green);
  color: var(--on-amber);
}

.card__badge--new {
  background: var(--blue);
  color: var(--white);
}

.card__qv {
  position: absolute;
  top: calc(100cqw - 54px);
  left: 50%;
  z-index: 3;
  min-height: 40px;
  padding: 0 16px;
  border: 0;
  border-radius: var(--r-pill);
  background: rgba(11, 27, 63, 0.9);
  color: var(--text);
  font-size: var(--fs-13);
  font-weight: 700;
  opacity: 0;
  transform: translate(-50%, 8px);
  transition: opacity 0.25s, transform 0.3s var(--ease-out);
}

.card__qv:focus-visible {
  opacity: 1;
  transform: translate(-50%, 0);
}

@media (hover: hover) {
  .card:hover .card__img-alt { opacity: 1; }
  .card:hover .card__qv { opacity: 1; transform: translate(-50%, 0); }
  .card__qv:hover { background: var(--amber); color: var(--on-amber); }
}

@media (hover: none) and (pointer: coarse) {
  .card__qv { display: none; }
}

.is-pop {
  animation: heart-pop 0.5s var(--ease-out);
}

@keyframes heart-pop {
  30% { transform: scale(1.4); }
  60% { transform: scale(0.9); }
}

/* --- E4 Cart bounce + confetti --- */
.is-bounce {
  animation: cart-bounce 0.6s var(--ease-out);
}

@keyframes cart-bounce {
  25% { transform: translateY(-6px) scale(1.12); }
  50% { transform: translateY(0) scale(0.95); }
  75% { transform: translateY(-2px); }
}

.confetti {
  position: fixed;
  z-index: 130;
  width: 0;
  height: 0;
  pointer-events: none;
}

.confetti i {
  position: absolute;
  top: -5px;
  left: -3px;
  width: 7px;
  height: 10px;
  border-radius: 2px;
  animation: confetti 0.9s var(--ease-out) forwards;
}

@keyframes confetti {
  0% { transform: translate(0, 0) rotate(0); opacity: 1; }
  100% { transform: translate(var(--x), calc(var(--y) + 36px)) rotate(var(--r)); opacity: 0; }
}

.btn:disabled {
  cursor: not-allowed;
}

/* --- E5 Coming-soon segments: blurred preview, sneak peek on hover --- */
.seg__card--soon .seg__media {
  position: relative;
}

.seg__blur {
  filter: blur(9px) saturate(0.85);
  transform: scale(1.12);
}

.seg__card--soon .seg__media .seg__peek {
  position: absolute;
  inset: 0;
  filter: blur(2.5px);
  opacity: 0;
  transform: scale(1.04);
  transition: opacity 0.45s ease;
}

.soon-pill--float {
  position: absolute;
  top: 10px;
  left: 10px;
  background: var(--amber);
  color: var(--on-amber);
}

.seg__soon {
  margin-top: 6px;
}

@media (hover: hover) {
  .seg__card--soon:hover .seg__peek { opacity: 1; }
}

/* --- E2 Gift Finder (bright accent card) --- */
.gift {
  display: grid;
  gap: var(--s-4);
  padding: var(--s-4);
  border-radius: var(--r-lg);
  background:
    radial-gradient(circle at 100% 0%, rgba(255, 255, 255, 0.35), transparent 45%),
    linear-gradient(135deg, var(--amber-2), var(--amber) 60%);
  color: var(--on-amber);
}

.eyebrow--dark {
  color: var(--on-amber);
  opacity: 0.8;
}

.gift__intro {
  display: grid;
  gap: var(--s-2);
  align-content: start;
}

.gift__title {
  font-size: clamp(1.75rem, 1.4rem + 1.2vw, 2.25rem);
}

.gift__progress {
  display: flex;
  gap: 6px;
  margin-top: var(--s-1);
}

.gift__progress li {
  padding: 4px 12px;
  border: 1.5px solid rgba(26, 18, 0, 0.35);
  border-radius: var(--r-pill);
  font-size: var(--fs-12);
  font-weight: 700;
}

.gift__progress li.is-current {
  border-color: var(--on-amber);
  background: rgba(26, 18, 0, 0.1);
}

.gift__progress li.is-done {
  border-color: var(--bg);
  background: var(--bg);
  color: var(--text);
}

.gift__panel {
  display: grid;
  gap: var(--s-25);
  align-content: start;
}

.gift__q {
  font-family: var(--font-head);
  font-size: var(--fs-20);
  font-weight: 700;
}

.gift__chips {
  display: flex;
  flex-wrap: wrap;
  gap: var(--s-2);
}

.gift-chip {
  display: inline-grid;
  justify-items: start;
  min-height: 52px;
  padding: 8px 18px;
  border: 1.5px solid rgba(26, 18, 0, 0.45);
  border-radius: var(--r-md);
  background: rgba(255, 255, 255, 0.25);
  color: var(--on-amber);
  font-family: var(--font-head);
  font-weight: 700;
  text-align: left;
  transition: transform 0.2s var(--ease-out), background-color 0.2s, color 0.2s;
}

.gift-chip small {
  font-family: var(--font-body);
  font-size: var(--fs-12);
  font-weight: 600;
  opacity: 0.85;
}

.gift-chip[aria-pressed="true"] {
  border-color: var(--bg);
  background: var(--bg);
  color: var(--text);
}

.gift-chip:active {
  transform: scale(0.96);
}

.gift .link-btn {
  color: var(--on-amber);
}

.gift :focus-visible {
  outline-color: var(--bg);
}

.gift__nav {
  display: flex;
  align-items: center;
  gap: var(--s-3);
  min-height: 44px;
}

.gift__nav:empty {
  display: none;
}

.btn--dark {
  background: var(--bg);
  color: var(--text);
}

.gift__results {
  margin-top: var(--s-3);
}

.gift__results:empty {
  display: none;
}

.gift__result-head {
  margin-bottom: var(--s-25);
  font-family: var(--font-head);
  font-weight: 600;
}

.gift-in {
  animation: gift-in 0.55s var(--ease-out) both;
  animation-delay: var(--d, 0ms);
}

@keyframes gift-in {
  from { opacity: 0; transform: translateY(18px) scale(0.96); }
}

@media (hover: hover) {
  .gift-chip:not([aria-pressed="true"]):hover { background: rgba(255, 255, 255, 0.5); transform: translateY(-2px); }
}

@media (min-width: 1024px) {
  .gift {
    grid-template-columns: 1fr 1.5fr;
    padding: var(--s-5) var(--s-6);
  }
}

/* --- E8 Business: launch-journey timeline --- */
.journey {
  position: relative;
  display: grid;
  gap: var(--s-3);
}

.journey::before {
  content: "";
  position: absolute;
  top: 20px;
  bottom: 20px;
  left: 19px;
  width: 2px;
  background: linear-gradient(180deg, var(--amber), var(--blue-2));
  transform-origin: top;
}

.journey__step {
  position: relative;
  display: grid;
  grid-template-columns: 40px minmax(0, 1fr);
  column-gap: var(--s-3);
  align-items: center;
}

.journey__dot {
  grid-row: span 2;
  display: grid;
  place-items: center;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background: var(--amber);
  color: var(--on-amber);
  font-family: var(--font-head);
  font-weight: 700;
  box-shadow: 0 0 0 6px var(--bg);
}

.journey__step strong {
  font-family: var(--font-head);
  font-size: var(--fs-16);
}

.journey__step span:last-child {
  color: var(--muted);
  font-size: var(--fs-14);
}

.journey-anim .journey::before {
  transform: scaleY(0);
}

.journey-anim .journey__step {
  opacity: 0;
  transform: translateY(14px) scale(0.96);
}

.journey.is-drawn::before {
  transform: none;
  transition: transform 1.2s var(--ease-out);
}

.journey.is-drawn .journey__step {
  opacity: 1;
  transform: none;
  transition: opacity 0.5s var(--ease-out), transform 0.5s var(--ease-out);
}

.journey.is-drawn .journey__step:nth-child(2) { transition-delay: 0.25s; }
.journey.is-drawn .journey__step:nth-child(3) { transition-delay: 0.5s; }
.journey.is-drawn .journey__step:nth-child(4) { transition-delay: 0.75s; }

@media (min-width: 1024px) {
  .journey {
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: var(--s-4);
  }

  .journey::before {
    top: 20px;
    bottom: auto;
    left: 12.5%;
    right: 12.5%;
    width: auto;
    height: 2px;
    background: linear-gradient(90deg, var(--amber), var(--blue-2));
    transform-origin: left;
  }

  .journey-anim .journey::before {
    transform: scaleX(0);
  }

  .journey-anim .journey.is-drawn::before {
    transform: none;
  }

  .journey__step {
    grid-template-columns: 1fr;
    justify-items: center;
    row-gap: 8px;
    text-align: center;
  }

  .journey__dot {
    grid-row: auto;
  }
}

/* --- Quick view dialog --- */
.qv {
  width: min(880px, 100% - 32px);
  max-height: calc(100% - 32px);
  padding: 0;
  overflow-y: auto;
  border: 1px solid var(--line-2);
  border-radius: var(--r-lg);
  background: var(--bg-2);
  box-shadow: var(--shadow-2);
}

.qv[open] {
  animation: pop-in 0.3s var(--ease-out);
}

.qv [data-qv-body] {
  display: grid;
}

.qv__media {
  position: relative;
  aspect-ratio: 4 / 3;
  overflow: hidden;
  background: var(--photo-bg);
}

.qv__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.qv__info {
  display: grid;
  gap: var(--s-25);
  align-content: start;
  padding: var(--s-4);
}

.qv__thumbs {
  display: flex;
  gap: var(--s-2);
}

.qv__thumbs .gallery__thumb {
  width: 60px;
  height: 60px;
}

.qv__title {
  font-size: clamp(1.35rem, 1.1rem + 1vw, 1.75rem);
}

.qv__price {
  font-family: var(--font-head);
  font-size: var(--fs-28);
  font-weight: 700;
}

.qv__desc {
  color: var(--muted);
}

.qv__actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--s-2);
}

@media (max-width: 639px) {
  .qv {
    width: 100%;
    max-width: 100%;
    height: 100%;
    max-height: 100%;
    margin: 0;
    border: 0;
    border-radius: 0;
  }

  .qv[open] {
    animation: sheet-up 0.3s var(--ease-out);
  }
}

@keyframes sheet-up {
  from { transform: translateY(100%); }
}

@media (min-width: 768px) {
  .qv [data-qv-body] { grid-template-columns: 1fr 1fr; }
  .qv__media { aspect-ratio: auto; min-height: 100%; }
}

/* --- Misc --- */
.block__foot {
  margin-top: var(--s-25);
  color: var(--muted);
  font-size: var(--fs-13);
}

/* ===== DECISIONS 26 OCT (2): categories, mega-menu, listing page, Instagram, social icons ===== */

/* --- "Toys" mega-menu (button sits outside the scrolling catnav list so the panel is not clipped) --- */
.megamenu {
  flex: none;
}

.megamenu__btn {
  color: var(--text);
}

.megamenu__chev {
  transition: transform 0.25s var(--ease-out);
}

.megamenu.is-open .megamenu__btn {
  background: var(--surface-2);
}

.megamenu.is-open .megamenu__chev {
  transform: rotate(180deg);
}

.megamenu__panel {
  position: absolute;
  top: 100%;
  right: 0;
  left: 0;
  z-index: 45;
  max-height: calc(100vh - 160px);
  overflow-y: auto;
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line-2);
  background: var(--bg-2);
  box-shadow: var(--shadow-2);
  opacity: 0;
  visibility: hidden;
  transform: translateY(-6px);
  transition: opacity 0.2s, transform 0.25s var(--ease-out), visibility 0s linear 0.25s;
}

.megamenu.is-open .megamenu__panel {
  opacity: 1;
  visibility: visible;
  transform: none;
  transition: opacity 0.2s, transform 0.25s var(--ease-out), visibility 0s;
}

.megamenu__inner {
  display: grid;
  gap: var(--s-4);
  padding: var(--s-4) 0;
}

.megamenu__grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--s-2);
}

.megamenu__item {
  display: flex;
  align-items: center;
  gap: var(--s-25);
  min-height: 64px;
  padding: 6px 10px 6px 6px;
  border: 1px solid var(--line);
  border-radius: var(--r-md);
  background: var(--surface);
  text-decoration: none;
  transition: border-color 0.2s, background-color 0.2s;
}

.megamenu__item img {
  flex: none;
  width: 48px;
  height: 48px;
  border-radius: 50%;
  object-fit: cover;
  background: var(--photo-bg);
}

.megamenu__item > span {
  display: grid;
  min-width: 0;
}

.megamenu__name {
  font-weight: 700;
  font-size: var(--fs-14);
  line-height: 1.25;
}

.megamenu__count {
  color: var(--faint);
  font-size: var(--fs-12);
}

.megamenu__side {
  display: grid;
  gap: var(--s-2);
  align-content: start;
}

.megamenu__label {
  color: var(--faint);
  font-size: var(--fs-12);
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.megamenu__links {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

.megamenu__links a {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  padding: 0 14px;
  border: 1.5px solid var(--line-2);
  border-radius: var(--r-pill);
  font-size: var(--fs-14);
  font-weight: 600;
  text-decoration: none;
}

.megamenu__all {
  justify-self: start;
  margin-top: var(--s-2);
}

@media (hover: hover) {
  .megamenu__item:hover { border-color: var(--blue-2); background: var(--surface-2); }
  .megamenu__links a:hover { border-color: var(--blue-2); }
}

@media (min-width: 640px) {
  .megamenu__grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

@media (min-width: 1024px) {
  .megamenu__inner { grid-template-columns: minmax(0, 1fr) 240px; gap: var(--s-5); }
  .megamenu__grid { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .megamenu__item img { width: 56px; height: 56px; }
}

@media (min-width: 1280px) {
  .megamenu__grid { grid-template-columns: repeat(5, minmax(0, 1fr)); }
}

/* --- Story bubbles as links (homepage + listing chips) --- */
a.bubble {
  color: inherit;
  text-decoration: none;
}

.bubble[aria-current="page"] .bubble__ring {
  transform: scale(1.06);
  box-shadow: 0 0 0 3px var(--amber-wash), 0 8px 22px -8px rgba(245, 158, 11, 0.8);
}

.bubble[aria-current="page"] .bubble__name {
  color: var(--amber-2);
}

/* --- Social icons (footer + Instagram block) --- */
.social {
  display: flex;
  gap: var(--s-2);
  margin-top: var(--s-2);
}

.social__link {
  display: inline-grid;
  place-items: center;
  width: 44px;
  height: 44px;
  border: 1.5px solid var(--line-2);
  border-radius: 50%;
  color: var(--muted);
  transition: color 0.2s, border-color 0.2s, background-color 0.2s;
}

.social__link--yt {
  position: relative;
  color: var(--faint);
  cursor: default;
}

/* "Coming soon" tooltip on the YouTube icon (hover + keyboard focus; tap focuses it on touch screens) */
.social__link--yt::after {
  content: attr(data-tip);
  position: absolute;
  bottom: calc(100% + 8px);
  left: 50%;
  padding: 5px 10px;
  border-radius: var(--r-sm);
  background: var(--surface-3);
  color: var(--text);
  font-size: var(--fs-12);
  font-weight: 700;
  white-space: nowrap;
  pointer-events: none;
  opacity: 0;
  transform: translate(-50%, 4px);
  transition: opacity 0.2s, transform 0.2s var(--ease-out);
}

.social__link--yt:focus-visible::after,
.social__link--yt:focus::after {
  opacity: 1;
  transform: translate(-50%, 0);
}

@media (hover: hover) {
  .social__link--yt:hover::after { opacity: 1; transform: translate(-50%, 0); }
}

@media (hover: hover) {
  .social__link--ig:hover { color: var(--white); border-color: transparent; background: var(--ig-gradient); }
}

/* --- Instagram block --- */
.insta {
  padding: var(--s-3);
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  background: var(--surface);
}

.insta__head {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  align-items: center;
  gap: var(--s-25) var(--s-3);
  margin-bottom: var(--s-3);
}

.insta__avatar {
  display: grid;
  place-items: center;
  width: 52px;
  height: 52px;
  border-radius: 50%;
  background: var(--ig-gradient);
  color: var(--white);
}

.insta__avatar svg {
  width: 26px;
  height: 26px;
}

.insta__handle {
  color: var(--muted);
  font-weight: 600;
}

.insta__actions {
  grid-column: 1 / -1;
  display: flex;
  align-items: center;
  gap: var(--s-2);
}

.insta__follow svg {
  width: 18px;
  height: 18px;
}

.insta__grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 6px;
}

.insta__tile {
  position: relative;
  display: block;
  aspect-ratio: 1;
  overflow: hidden;
  border-radius: var(--r-sm);
  background: var(--photo-bg);
}

.insta__tile img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.45s var(--ease-out);
}

.insta__overlay {
  position: absolute;
  inset: 0;
  display: grid;
  place-content: center;
  justify-items: center;
  gap: 6px;
  background: rgba(11, 27, 63, 0.62);
  color: var(--white);
  font-size: var(--fs-13);
  font-weight: 700;
  opacity: 0;
  transition: opacity 0.25s;
}

.insta__tile:focus-visible .insta__overlay {
  opacity: 1;
}

@media (hover: hover) {
  .insta__tile:hover .insta__overlay { opacity: 1; }
  .insta__tile:hover img { transform: scale(1.06); }
}

@media (min-width: 640px) {
  .insta { padding: var(--s-4); }
  .insta__head { grid-template-columns: auto minmax(0, 1fr) auto; }
  .insta__actions { grid-column: auto; }
  .insta__grid { gap: var(--s-25); }
}

@media (min-width: 1024px) {
  .insta__grid { grid-template-columns: repeat(6, minmax(0, 1fr)); }
}

/* --- Product card states: sold out, wholesale tiers --- */
.card__badge--soldout {
  background: var(--bg);
  color: var(--text);
}

.card--soldout .card__media img {
  opacity: 0.55;
}

.card .btn--disabled {
  border-color: transparent;
}

.card__tiers {
  color: var(--muted);
  font-size: var(--fs-12);
  font-variant-numeric: tabular-nums;
}

/* --- Listing page (toys.html) --- */
.listing {
  padding-bottom: var(--s-6);
}

.listing__head {
  display: grid;
  gap: 4px;
  margin-bottom: var(--s-3);
}

.listing__title {
  font-size: clamp(1.75rem, 1.3rem + 1.6vw, 2.5rem);
}

.listing__sub {
  color: var(--muted);
}

.listing__cats {
  margin-bottom: var(--s-4);
  padding-bottom: 6px;
}

@media (max-width: 639px) {
  .listing__sort label { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
}

@media (min-width: 1024px) {
  .listing__cats { gap: 18px; }
}

.listing__layout {
  display: grid;
  gap: var(--s-4);
}

.listing__main {
  min-width: 0;
}

.listing__bar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--s-2) var(--s-25);
  margin-bottom: var(--s-25);
}

.listing__count {
  order: 3;
  flex-basis: 100%;
  color: var(--muted);
  font-weight: 600;
}

.listing__sort {
  display: flex;
  align-items: center;
  gap: var(--s-2);
  margin-left: auto;
  color: var(--muted);
  font-size: var(--fs-14);
}

.listing__filter-btn .count {
  position: static;
}

.listing__grid[hidden] {
  display: none;
}

.listing__empty {
  display: grid;
  justify-items: center;
  gap: var(--s-2);
  padding: var(--s-6) var(--s-3);
  border: 1px dashed var(--line-2);
  border-radius: var(--r-lg);
  color: var(--muted);
  text-align: center;
}

.listing__empty-title {
  color: var(--text);
  font-family: var(--font-head);
  font-size: var(--fs-20);
  font-weight: 700;
}

.listing__empty .btn {
  margin-top: var(--s-2);
}

.active-filters {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px var(--s-2);
  margin-bottom: var(--s-3);
}

.active-filters[hidden],
.active-filters:empty {
  display: none;
}

.filter-pill {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  min-height: 44px;
  padding: 0 10px 0 14px;
  border: 1.5px solid var(--blue);
  border-radius: var(--r-pill);
  background: var(--blue-wash);
  font-size: var(--fs-14);
  font-weight: 600;
}

.filter-pill svg {
  width: 14px;
  height: 14px;
}

/* Filters: bottom sheet below 1024px */
.filters-overlay {
  position: fixed;
  inset: 0;
  z-index: 70;
  background: var(--overlay);
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.25s, visibility 0s linear 0.25s;
}

.filters {
  position: fixed;
  right: 0;
  bottom: 0;
  left: 0;
  z-index: 75;
  display: flex;
  flex-direction: column;
  max-height: 86vh;
  border-top: 1px solid var(--line-2);
  border-radius: var(--r-lg) var(--r-lg) 0 0;
  background: var(--bg-2);
  box-shadow: var(--shadow-2);
  visibility: hidden;
  transform: translateY(100%);
  transition: transform 0.3s var(--ease-out), visibility 0s linear 0.3s;
}

.filters:focus {
  outline: none;
}

body.filters-open {
  overflow: hidden;
}

body.filters-open .filters-overlay {
  opacity: 1;
  visibility: visible;
  transition: opacity 0.25s, visibility 0s;
}

body.filters-open .filters {
  visibility: visible;
  transform: none;
  transition: transform 0.3s var(--ease-out), visibility 0s;
}

.filters__head {
  display: flex;
  align-items: center;
  gap: var(--s-2);
  padding: 10px 12px 10px 20px;
  border-bottom: 1px solid var(--line);
}

.filters__title {
  flex: 1;
  font-size: var(--fs-20);
}

.filters__clear-top {
  display: none;
  min-height: 44px;
}

.filters__body {
  flex: 1;
  min-height: 0;
  overflow-y: auto;
  overscroll-behavior: contain;
  padding: 0 20px;
}

.filters__group {
  margin: 0;
  padding: var(--s-3) 0;
  border: 0;
  border-bottom: 1px solid var(--line);
}

.filters__group:last-child {
  border-bottom: 0;
}

.filters__legend {
  padding: 0;
  margin-bottom: 6px;
  font-family: var(--font-head);
  font-size: var(--fs-16);
  font-weight: 700;
}

.filters__input {
  position: absolute;
  opacity: 0;
  pointer-events: none;
}

.filters__option {
  display: flex;
  align-items: center;
  gap: var(--s-25);
  min-height: 44px;
  color: var(--muted);
  font-size: var(--fs-14);
  font-weight: 500;
  cursor: pointer;
}

.filters__mark {
  flex: none;
  display: grid;
  place-items: center;
  width: 20px;
  height: 20px;
  border: 1.5px solid var(--line-2);
  border-radius: 6px;
  background: var(--surface);
  transition: background-color 0.15s, border-color 0.15s;
}

.filters__input[type="radio"] + .filters__option .filters__mark {
  border-radius: 50%;
}

.filters__input:checked + .filters__option {
  color: var(--text);
  font-weight: 700;
}

.filters__input:checked + .filters__option .filters__mark {
  border-color: var(--blue-2);
  background: var(--blue);
  box-shadow: inset 0 0 0 3px var(--bg-2);
}

.filters__input:focus-visible + .filters__option .filters__mark {
  outline: 3px solid var(--focus);
  outline-offset: 2px;
}

.filters__text {
  flex: 1;
  min-width: 0;
}

.filters__n {
  color: var(--faint);
  font-size: var(--fs-12);
  font-variant-numeric: tabular-nums;
}

.filters__foot {
  display: grid;
  grid-template-columns: 1fr 2fr;
  gap: var(--s-2);
  padding: 12px 20px calc(12px + env(safe-area-inset-bottom));
  border-top: 1px solid var(--line);
}

@media (hover: hover) {
  .filters__option:hover { color: var(--text); }
  .filter-pill:hover { background: var(--blue); }
}

@media (min-width: 640px) {
  .filters { left: auto; width: min(440px, 100%); right: 50%; transform: translate(50%, 100%); }
  body.filters-open .filters { transform: translateX(50%); }
}

/* Sidebar from 1024px */
@media (min-width: 1024px) {
  .listing__layout {
    grid-template-columns: 236px minmax(0, 1fr);
    align-items: start;
    gap: var(--s-5);
  }

  .filters-overlay,
  .listing__filter-btn,
  .filters__x,
  .filters__foot {
    display: none;
  }

  .filters {
    position: sticky;
    top: 140px;
    right: auto;
    bottom: auto;
    left: auto;
    z-index: 1;
    width: auto;
    max-height: calc(100vh - 160px);
    border: 1px solid var(--line);
    border-radius: var(--r-md);
    box-shadow: none;
    visibility: visible;
    transform: none;
    transition: none;
  }

  .filters__head {
    padding: 8px 8px 8px 16px;
  }

  .filters__title {
    font-size: var(--fs-16);
  }

  .filters__clear-top {
    display: inline-flex;
    align-items: center;
    font-size: var(--fs-14);
  }

  .filters__body {
    padding: 0 16px;
  }

  .listing__count {
    order: -1;
    flex-basis: auto;
  }

  /* 3 columns next to the sidebar on small desktops, 4 from 1280px */
  .listing__grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

@media (min-width: 1280px) {
  .listing__grid { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}

/* ===== PLAYFUL SHOP MODE (27 Oct — brief §13 C6; reference truetoys.co.uk, ideas only) ===== */

/* --- USP bar: static row from 640px, auto-scrolling marquee on phones --- */
.usp {
  overflow: hidden;
  border-bottom: 1px solid var(--line);
  background: var(--bg-2);
}

.usp__track {
  display: flex;
  width: max-content;
  animation: usp-marquee 22s linear infinite;
}

.usp__list {
  display: flex;
  flex: none;
}

.usp__item {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 8px 18px;
  color: var(--text);
  font-size: var(--fs-13);
  font-weight: 700;
  white-space: nowrap;
}

.usp__icon {
  display: grid;
  place-items: center;
  width: 26px;
  height: 26px;
  border-radius: 50%;
  background: var(--tone);
  color: var(--on-toy);
}

@keyframes usp-marquee {
  to { transform: translateX(-50%); }
}

@media (min-width: 640px) {
  .usp__track { width: auto; justify-content: center; animation: none; }
  .usp__list--clone { display: none; }
  .usp__item { padding: 8px 14px; }
}

@media (prefers-reduced-motion: reduce) {
  .usp { overflow-x: auto; scrollbar-width: none; }
}

/* --- Colour-coded age pills on product cards --- */
.age-tag.age-tag--pink { background: var(--toy-pink); color: var(--on-toy); }
.age-tag.age-tag--yellow { background: var(--toy-yellow); color: var(--on-toy); }
.age-tag.age-tag--sky { background: var(--toy-sky); color: var(--on-toy); }
.age-tag.age-tag--green { background: var(--toy-green); color: var(--on-toy); }

/* --- Popular pick badge in the toy palette --- */
html[data-mode="shop"] .card__badge:not(.card__badge--gift):not(.card__badge--new):not(.card__badge--soldout):not(.card__badge--seller) {
  background: var(--toy-yellow);
  color: var(--on-toy);
}

html[data-mode="shop"] .card__badge--gift { background: var(--toy-green); }
html[data-mode="shop"] .card__badge--new { background: var(--toy-purple); color: var(--on-toy); }

/* --- Coloured rings on the toys.html category chips + mega-menu age links --- */
.bubble[class*="tone-"] .bubble__ring {
  background: var(--tone);
}

.megamenu__links a[class*="tone-"] {
  border-color: var(--tone);
}

/* --- Shop by category: chip tabs + 10 big coloured bubbles --- */
.cat-chips {
  margin-bottom: var(--s-3);
}

@media (max-width: 639px) {
  .cat-chips {
    flex-wrap: nowrap;
    overflow-x: auto;
    scrollbar-width: none;
    padding-bottom: 2px;
  }

  .cat-chips::-webkit-scrollbar { display: none; }
  .cat-chips .chip { flex: none; }
}

.cats {
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: 112px;
  gap: var(--s-3);
  overflow-x: auto;
  overscroll-behavior-x: contain;
  scroll-snap-type: x mandatory;
  scrollbar-width: none;
  padding: 10px 4px 14px;
}

.cats::-webkit-scrollbar {
  display: none;
}

.cats li {
  scroll-snap-align: start;
}

.cat-bubble {
  display: grid;
  justify-items: center;
  gap: 8px;
  text-align: center;
  text-decoration: none;
}

.cat-bubble__ring {
  display: block;
  width: 104px;
  height: 104px;
  padding: 5px;
  border-radius: 50%;
  background: var(--tone);
  transition: transform 0.3s var(--ease-out), box-shadow 0.3s;
}

.cat-bubble__ring img {
  width: 100%;
  height: 100%;
  border: 4px solid var(--bg);
  border-radius: 50%;
  object-fit: cover;
  background: var(--photo-bg);
}

.cat-bubble__label {
  display: inline-block;
  max-width: 100%;
  padding: 4px 10px;
  border-radius: var(--r-pill);
  background: var(--tone);
  color: var(--on-toy);
  font-family: var(--font-fun);
  font-size: var(--fs-13);
  font-weight: 600;
  line-height: 1.2;
}

.cat-bubble__count {
  color: var(--faint);
  font-size: var(--fs-12);
}

.cat-bubble:focus-visible {
  outline: none;
}

.cat-bubble:focus-visible .cat-bubble__ring {
  box-shadow: 0 0 0 4px var(--bg), 0 0 0 7px var(--focus);
}

@media (hover: hover) {
  .cat-bubble:hover .cat-bubble__ring {
    transform: translateY(-6px);
    box-shadow: 0 0 0 6px color-mix(in srgb, var(--tone) 30%, transparent), 0 14px 28px -10px var(--tone);
  }
}

@media (min-width: 1024px) {
  .cats {
    grid-auto-flow: row;
    grid-template-columns: repeat(5, minmax(0, 1fr));
    gap: var(--s-4) var(--s-3);
    overflow: visible;
  }

  .cat-bubble__ring { width: 148px; height: 148px; padding: 6px; }
  .cat-bubble__label { font-size: var(--fs-14); padding: 5px 14px; }
}

/* --- Shop by age: 4 colourful tiles --- */
.age-tiles {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--s-25);
}

.age-tile {
  position: relative;
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: var(--s-2);
  min-height: 150px;
  padding: var(--s-3);
  overflow: hidden;
  border-radius: var(--r-lg);
  background: var(--tone);
  color: var(--on-toy);
  text-decoration: none;
  transition: transform 0.25s var(--ease-out), box-shadow 0.25s;
}

.age-tile__text {
  position: relative;
  z-index: 1;
  display: grid;
  gap: 2px;
}

.age-tile__age {
  font-family: var(--font-fun);
  font-size: clamp(1.9rem, 1.4rem + 2vw, 2.75rem);
  font-weight: 700;
  line-height: 1;
}

.age-tile__age small {
  margin-left: 4px;
  font-size: 0.45em;
}

.age-tile__name {
  font-weight: 700;
  font-size: var(--fs-14);
}

.age-tile__count {
  font-size: var(--fs-12);
  font-weight: 600;
}

.age-tile__photo {
  position: absolute;
  top: -14px;
  right: -14px;
  width: 92px;
  height: 92px;
  overflow: hidden;
  border: 4px solid var(--on-toy);
  border-radius: 50%;
  transform: rotate(8deg);
}

.age-tile__photo img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

@media (hover: hover) {
  .age-tile:hover { transform: translateY(-4px) rotate(-0.5deg); box-shadow: 0 16px 30px -14px var(--tone); }
}

@media (min-width: 1024px) {
  .age-tiles { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--s-3); }
  .age-tile { min-height: 190px; padding: var(--s-4); }
  .age-tile__photo { top: 16px; right: 16px; width: 112px; height: 112px; }
}

/* ===== SCROLL REVEALS (small fade-up, cards and tiles only) ===== */
.reveal-on [data-reveal] {
  opacity: 0;
  transform: translateY(14px);
  transition: opacity 0.5s var(--ease-out) var(--d, 0ms), transform 0.5s var(--ease-out) var(--d, 0ms);
}

.reveal-on [data-reveal].is-in {
  opacity: 1;
  transform: none;
}

/* Keep the hover lift working after the reveal transition */
.reveal-on .card[data-reveal].is-in {
  transition: opacity 0.5s var(--ease-out) var(--d, 0ms), transform 0.25s var(--ease-out), border-color 0.2s, box-shadow 0.25s;
}

/* ===== DECISIONS 27 OCT (brief §14): pre-launch event, Hot Picks, Price Promise, legal pages ===== */

/* --- Event links in the USP bar, catnav and drawer (hidden once the offer has ended) --- */
[data-event-link][hidden] {
  display: none !important;
}

.usp__link {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  color: var(--toy-yellow);
  text-decoration: underline;
  text-decoration-thickness: 2px;
  text-underline-offset: 4px;
}

.catnav__link--offer {
  background: var(--toy-pink);
  color: var(--on-toy);
  font-weight: 700;
}

@media (hover: hover) {
  .catnav__link--offer:hover { background: var(--toy-yellow); color: var(--on-toy); }
  .usp__link:hover { color: var(--white); }
}

/* The extra offer link would push "Apparel" out of view at 1280px: tighten the strip a little below 1440px */
@media (min-width: 1024px) and (max-width: 1439px) {
  .catnav__list .catnav__link { padding: 0 10px; }
}

.drawer__list a.drawer__offer {
  color: var(--toy-yellow);
}

/* --- Event section --- */
.sticker--yellow { background: var(--toy-yellow); }

.event {
  position: relative;
  display: grid;
  gap: var(--s-4);
  padding: var(--s-4) var(--s-3);
  border: 2px solid var(--toy-purple);
  border-radius: var(--r-lg);
  background:
    radial-gradient(120% 90% at 0% 0%, rgba(255, 122, 182, 0.22), transparent 55%),
    radial-gradient(100% 80% at 100% 100%, rgba(92, 200, 255, 0.18), transparent 60%),
    var(--surface);
  box-shadow: 6px 6px 0 rgba(179, 140, 255, 0.35);
}

.event__stickers {
  display: flex;
  flex-wrap: wrap;
  gap: var(--s-2);
  margin-bottom: var(--s-25);
}

.event__title {
  font-family: var(--font-fun);
  font-size: clamp(2rem, 1.4rem + 3vw, 3.25rem);
  line-height: 1.05;
}

.event__amount {
  display: inline-block;
  padding: 0 10px;
  border-radius: 14px;
  background: var(--toy-yellow);
  color: var(--on-toy);
  transform: rotate(-2deg);
}

.event__text {
  max-width: 46ch;
  margin-top: var(--s-25);
  color: var(--muted);
}

.event__clock {
  margin-top: var(--s-4);
}

.event__clock-label,
.event__ended {
  font-family: var(--font-fun);
  font-size: var(--fs-20);
  font-weight: 600;
}

.event__ended {
  margin-top: var(--s-4);
  color: var(--toy-yellow);
  font-size: var(--fs-28);
}

.timer {
  display: flex;
  gap: var(--s-2);
  margin-top: var(--s-2);
}

.timer__unit {
  display: grid;
  justify-items: center;
  flex: 1 1 0;
  max-width: 92px;
  padding: 10px 4px 8px;
  border: 2px solid var(--tone, var(--toy-sky));
  border-radius: var(--r-md);
  background: var(--bg);
}

.timer__unit:nth-child(1) { --tone: var(--toy-pink); }
.timer__unit:nth-child(2) { --tone: var(--toy-yellow); }
.timer__unit:nth-child(3) { --tone: var(--toy-sky); }
.timer__unit:nth-child(4) { --tone: var(--toy-green); }

.timer__num {
  font-family: var(--font-fun);
  font-size: clamp(1.75rem, 1.3rem + 2vw, 2.5rem);
  font-weight: 700;
  line-height: 1;
  font-variant-numeric: tabular-nums;
  color: var(--tone);
}

.timer__lbl {
  margin-top: 4px;
  color: var(--muted);
  font-size: var(--fs-12);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.06em;
}

.event__when {
  margin-top: var(--s-2);
  color: var(--muted);
  font-size: var(--fs-14);
}

.event__points {
  display: grid;
  gap: 6px;
  margin-top: var(--s-3);
  font-size: var(--fs-14);
}

.event__points li {
  position: relative;
  padding-left: 26px;
}

.event__points li::before {
  content: "";
  position: absolute;
  top: 3px;
  left: 0;
  width: 18px;
  height: 18px;
  border-radius: 50%;
  background: var(--toy-green) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24'%3E%3Cpath d='M5 12.5l4.5 4.5L19 7.5' fill='none' stroke='%230B1B3F' stroke-width='3.4' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") no-repeat center;
}

.event__links {
  margin-top: var(--s-3);
  font-size: var(--fs-14);
}

.event__links a {
  color: var(--blue-3);
  text-underline-offset: 3px;
}

.event__panel {
  position: relative;
  display: grid;
  align-content: start;
  gap: var(--s-3);
  min-width: 0;
  padding: var(--s-4) var(--s-3);
  border: 1px solid var(--line-2);
  border-radius: var(--r-lg);
  background: var(--bg);
}

/* Before / after message card (no forms) */
.event__msg {
  display: grid;
  justify-items: center;
  gap: var(--s-25);
  padding: var(--s-4) var(--s-2);
  text-align: center;
}

.event__msg-icon {
  font-size: 2.75rem;
  line-height: 1;
}

.event__msg-title {
  max-width: 24ch;
  font-family: var(--font-fun);
  font-size: clamp(1.35rem, 1.1rem + 1vw, 1.75rem);
  line-height: 1.2;
}

.event__msg-title [data-coupon] {
  color: var(--toy-yellow);
}

.event__msg-text {
  color: var(--muted);
  font-size: var(--fs-14);
}

/* ?preview=event / ?preview=after review badge */
.preview-badge {
  position: absolute;
  top: -14px;
  right: 18px;
  z-index: 1;
  padding: 4px 14px;
  border: 2px solid var(--on-toy);
  border-radius: var(--r-pill);
  background: var(--toy-sky);
  color: var(--on-toy);
  font-size: var(--fs-13);
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.event[data-phase="after"] .event__amount {
  background: var(--surface-3);
  color: var(--text);
}

@media (min-width: 640px) {
  .event { padding: var(--s-5); }
  .event__panel { padding: var(--s-4); }
}

@media (min-width: 1024px) {
  .event {
    grid-template-columns: 1fr minmax(0, 1.05fr);
    align-items: start;
    gap: var(--s-5);
    padding: var(--s-5) var(--s-6);
  }
}

/* Safety banner: empty FORM_ENDPOINT on a real (non-localhost) domain */
.preview-banner {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 12px 16px;
  border: 2px solid var(--on-toy);
  border-radius: var(--r-md);
  background: var(--toy-yellow);
  color: var(--on-toy);
  font-size: var(--fs-14);
  font-weight: 700;
  line-height: 1.35;
}

.preview-banner::before {
  content: "!";
  display: grid;
  flex: none;
  place-items: center;
  width: 24px;
  height: 24px;
  border-radius: 50%;
  background: var(--on-toy);
  color: var(--toy-yellow);
  font-weight: 700;
}

/* "Demo mode — not saved" (shown only while FORM_ENDPOINT is empty) */
.demo-flag {
  justify-self: start;
  padding: 4px 12px;
  border: 1.5px dashed var(--amber-2);
  border-radius: var(--r-pill);
  color: var(--amber-2);
  font-size: var(--fs-13);
  font-weight: 700;
}

.demo-flag--inline {
  justify-self: center;
}

/* Honeypot: out of sight and out of the tab order (not display:none, which some bots skip) */
.hp {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip-path: inset(50%);
  opacity: 0;
  pointer-events: none;
}

/* --- Registration form --- */
.reg {
  display: grid;
  gap: var(--s-3);
}

.reg__progress {
  display: grid;
  gap: 6px;
}

.reg__step-label {
  font-size: var(--fs-13);
  font-weight: 700;
  color: var(--muted);
}

.reg__bar {
  height: 6px;
  overflow: hidden;
  border-radius: var(--r-pill);
  background: var(--surface-2);
}

.reg__bar-fill {
  display: block;
  height: 100%;
  border-radius: inherit;
  background: linear-gradient(90deg, var(--toy-pink), var(--toy-yellow));
  transform: scaleX(0.5);
  transform-origin: left;
  transition: transform 0.35s var(--ease-out);
}

.reg__step {
  display: grid;
  gap: var(--s-3);
  min-width: 0;
  margin: 0;
  padding: 0;
  border: 0;
}

fieldset.field {
  margin: 0;
  padding: 0;
  border: 0;
}

.field__legend {
  margin-bottom: 6px;
  padding: 0;
  color: var(--muted);
  font-size: var(--fs-13);
  font-weight: 600;
}

.field__opt {
  color: var(--faint);
  font-weight: 500;
}

.reg__row {
  display: grid;
  gap: var(--s-3);
}

@media (min-width: 640px) {
  .reg__row { grid-template-columns: auto 1fr; align-items: start; }
}

.select--block {
  width: 100%;
  border-radius: var(--r-sm);
}

/* Segmented UK / India radio */
.seg-radio {
  display: inline-flex;
  justify-self: start;
  padding: 3px;
  border: 1.5px solid var(--line-2);
  border-radius: var(--r-pill);
  background: var(--surface);
}

.seg-radio input,
.pick-chip input,
.consent input {
  position: absolute;
  opacity: 0;
  width: 1px;
  height: 1px;
}

.seg-radio label {
  display: inline-grid;
  place-items: center;
  min-width: 76px;
  min-height: 44px;
  padding: 0 14px;
  border-radius: var(--r-pill);
  color: var(--muted);
  font-size: var(--fs-14);
  font-weight: 700;
  cursor: pointer;
  transition: background-color 0.2s, color 0.2s;
}

.seg-radio input:checked + label {
  background: var(--blue);
  color: var(--white);
}

.seg-radio input:focus-visible + label,
.pick-chip input:focus-visible + label,
.consent input:focus-visible + label::before {
  outline: 3px solid var(--focus);
  outline-offset: 2px;
}

.seg-radio input[aria-invalid="true"] + label {
  color: var(--red);
}

/* Multi-select chips (categories) + single-select chips (age group) */
.pick-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.pick-chip {
  position: relative;
}

.pick-chip label {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  min-height: 44px;
  padding: 0 14px;
  border: 2px solid var(--line-2);
  border-radius: var(--r-pill);
  color: var(--text);
  font-size: var(--fs-14);
  font-weight: 600;
  cursor: pointer;
  transition: background-color 0.2s, border-color 0.2s, color 0.2s;
}

.pick-chip[class*="tone-"] label {
  border-color: var(--tone);
}

.pick-chip input:checked + label {
  border-color: var(--tone, var(--blue-2));
  background: var(--tone, var(--blue-2));
  color: var(--on-toy);
}

.pick-chip input:checked + label::before {
  content: "✓";
  font-weight: 700;
}

@media (hover: hover) {
  .pick-chip input:not(:checked) + label:hover { background: var(--surface-2); }
  .seg-radio input:not(:checked) + label:hover { color: var(--text); }
}

/* Consent checkboxes */
.consent {
  position: relative;
  display: grid;
  gap: 4px;
}

.consent label {
  position: relative;
  display: block;
  min-height: 44px;
  padding: 12px 0 0 36px;
  font-size: var(--fs-14);
  line-height: 1.45;
  cursor: pointer;
}

.consent label::before {
  content: "";
  position: absolute;
  top: 10px;
  left: 0;
  width: 24px;
  height: 24px;
  border: 2px solid var(--line-2);
  border-radius: 7px;
  background: var(--surface);
}

.consent input:checked + label::before {
  border-color: var(--toy-green);
  background: var(--toy-green) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24'%3E%3Cpath d='M5 12.5l4.5 4.5L19 7.5' fill='none' stroke='%230B1B3F' stroke-width='3.4' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") no-repeat center;
}

.consent input[aria-invalid="true"] + label::before {
  border-color: var(--red);
}

.consent a {
  color: var(--blue-3);
  text-underline-offset: 3px;
}

.consent .field__error {
  padding-left: 36px;
}

.reg__actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--s-2);
}

.reg__actions .btn--ghost {
  flex: 0 0 auto;
}

.reg__submit {
  flex: 1 1 200px;
  white-space: normal;
  text-align: center;
  line-height: 1.2;
}

.reg__submit.is-busy {
  opacity: 0.7;
}

/* Success panel */
.reg-done {
  display: grid;
  justify-items: center;
  gap: var(--s-25);
  padding: var(--s-3) 0;
  text-align: center;
}

.reg-done:focus {
  outline: none;
}

.reg-done__icon {
  font-size: 3rem;
  line-height: 1;
}

.reg-done__title {
  font-family: var(--font-fun);
  font-size: clamp(1.75rem, 1.4rem + 1.5vw, 2.25rem);
  color: var(--toy-yellow);
}

.reg-done__text {
  font-size: var(--fs-16);
}

.reg-done__code {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: var(--s-2) var(--s-25);
  padding: var(--s-25) var(--s-3);
  border: 2px dashed var(--toy-yellow);
  border-radius: var(--r-md);
}

.reg-done__code-label {
  color: var(--muted);
  font-size: var(--fs-13);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.06em;
}

.reg-done__code-value {
  font-family: var(--font-fun);
  font-size: var(--fs-28);
  letter-spacing: 0.06em;
  user-select: all;
}

.reg-done__linked {
  max-width: 38ch;
  color: var(--muted);
  font-size: var(--fs-14);
  overflow-wrap: anywhere;
}

.confetti--big i {
  width: 9px;
  height: 13px;
  animation-duration: 1.3s;
}

/* --- Hot Picks 🔥 --- */
.hot {
  position: relative;
  padding: var(--s-4) var(--s-3) var(--s-3);
  border: 2px solid var(--toy-orange);
  border-radius: var(--r-lg);
  background:
    radial-gradient(90% 70% at 100% 0%, rgba(255, 159, 67, 0.28), transparent 60%),
    radial-gradient(70% 60% at 0% 100%, rgba(255, 122, 182, 0.16), transparent 60%),
    var(--bg-2);
}

.hot__flame {
  position: absolute;
  top: -22px;
  right: 18px;
  transform: rotate(12deg);
}

.hot__flame .f-orange { fill: var(--toy-orange); }
.hot__flame .f-yellow { fill: var(--toy-yellow); }

.hot__head {
  padding-right: 56px;
}

.hot__title {
  font-family: var(--font-fun);
  font-size: clamp(1.75rem, 1.3rem + 2vw, 2.5rem);
  line-height: 1.1;
  color: var(--toy-orange);
}

.hot__sub {
  color: var(--muted);
  font-size: var(--fs-14);
}

@media (min-width: 640px) {
  .hot { padding: var(--s-5) var(--s-4) var(--s-4); }
}

/* --- Shop & Save — Price Promise --- */
.promise {
  display: grid;
  gap: var(--s-3);
  align-items: center;
  padding: var(--s-4) var(--s-3);
  border-radius: var(--r-lg);
  background: var(--toy-green);
  color: var(--on-toy);
  box-shadow: 6px 6px 0 rgba(94, 224, 138, 0.3);
}

.promise__icon {
  display: grid;
  place-items: center;
  width: 56px;
  height: 56px;
  border: 2.5px solid var(--on-toy);
  border-radius: 50%;
  background: var(--toy-yellow);
  transform: rotate(-8deg);
}

.promise__kicker {
  font-family: var(--font-fun);
  font-size: var(--fs-14);
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.promise__title {
  font-family: var(--font-fun);
  font-size: clamp(1.25rem, 1rem + 1.2vw, 1.75rem);
  line-height: 1.2;
}

.promise__small {
  margin-top: 6px;
  font-size: var(--fs-14);
}

.promise__small a {
  color: var(--on-toy);
  font-weight: 700;
  text-underline-offset: 3px;
}

.promise__cta {
  justify-self: start;
  white-space: normal;
  text-align: center;
}

@media (min-width: 1024px) {
  .promise {
    grid-template-columns: auto 1fr auto;
    gap: var(--s-4);
    padding: var(--s-4) var(--s-5);
  }
}

/* Price Promise tag on product cards, quick view and product page */
.card__promise,
.pdp__promise {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  color: var(--toy-green);
  font-size: var(--fs-12);
  font-weight: 700;
}

.pdp__promise {
  font-size: var(--fs-14);
}

.pdp__promise a {
  color: var(--blue-3);
  font-weight: 600;
  text-underline-offset: 3px;
}

/* --- Legal pages (terms.html, privacy.html) --- */
.legal {
  max-width: 820px;
  padding-block: var(--block-y);
}

.legal__crumbs {
  margin-bottom: var(--s-3);
  color: var(--muted);
  font-size: var(--fs-14);
}

.legal__crumbs a {
  color: var(--blue-3);
}

.legal__title {
  font-family: var(--font-fun);
  font-size: clamp(2rem, 1.5rem + 2vw, 2.75rem);
  line-height: 1.1;
}

.legal__meta {
  margin-top: var(--s-2);
  color: var(--muted);
  font-size: var(--fs-14);
}

.legal__note {
  margin-top: var(--s-4);
  padding: var(--s-3);
  border: 1.5px dashed var(--amber-2);
  border-radius: var(--r-md);
  color: var(--amber-2);
  font-size: var(--fs-14);
}

.legal__toc {
  display: flex;
  flex-wrap: wrap;
  gap: var(--s-2);
  margin-top: var(--s-4);
}

.legal__toc a {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  padding: 0 16px;
  border: 1.5px solid var(--line-2);
  border-radius: var(--r-pill);
  font-size: var(--fs-14);
  font-weight: 600;
  text-decoration: none;
}

.legal__section {
  margin-top: var(--s-6);
  scroll-margin-top: 24px;
}

.legal__section h2 {
  font-size: var(--fs-28);
  line-height: 1.2;
}

.legal__section h3 {
  margin-top: var(--s-4);
  font-size: var(--fs-20);
}

.legal__section p,
.legal__section li {
  color: var(--muted);
  overflow-wrap: anywhere;
}

.legal__section p {
  margin-top: var(--s-25);
}

.legal__section ul,
.legal__section ol {
  display: grid;
  gap: 6px;
  margin-top: var(--s-25);
  padding-left: 22px;
}

.legal__section ul { list-style: disc; }
.legal__section ol { list-style: decimal; }

.legal__section strong {
  color: var(--text);
}

.legal__section a {
  color: var(--blue-3);
  text-underline-offset: 3px;
}

.legal__table-wrap {
  margin-top: var(--s-25);
  overflow-x: auto;
}

.legal__table {
  width: 100%;
  min-width: 520px;
  border-collapse: collapse;
  font-size: var(--fs-14);
}

.legal__table th,
.legal__table td {
  padding: 10px 12px;
  border-bottom: 1px solid var(--line);
  text-align: left;
  vertical-align: top;
}

.legal__table th {
  color: var(--text);
}

.legal__table td {
  color: var(--muted);
}

@media (hover: hover) {
  .legal__toc a:hover { border-color: var(--blue-2); }
}

/* ===== REDUCED MOTION ===== */
@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }

  *,
  *::before,
  *::after {
    animation: none !important;
    transition: none !important;
  }

  .reveal-on [data-reveal] {
    opacity: 1;
    transform: none;
  }
}