:root {
  --open: 0;
  --tilt-x: 0deg;
  --tilt-y: 0deg;
  --coral: #fa5d55;
  --coral-deep: #ef3f38;
  --ink: #080909;
  --muted: #65686f;
  --line: rgba(8, 9, 9, 0.1);
  --aqua: #71ddd3;
  --paper: #ffffff;
  --nav-h: 78px;
  --section-gap: clamp(10px, 1.4vw, 16px);
}

* {
  box-sizing: border-box;
}

html {
  scroll-behavior: smooth;
  scroll-padding-top: 90px;
}

body {
  margin: 0;
  color: var(--ink);
  background: #ffffff;
  font-family:
    Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI",
    sans-serif;
  overflow-x: hidden;
}

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

a {
  color: inherit;
  text-decoration: none;
}

/* ===== Main navigation ===== */
.site-header {
  position: sticky;
  top: 0;
  z-index: 30;
  background: #ffffff;
  border-bottom: 1px solid rgba(0, 0, 0, 0.08);
  box-shadow: 0 2px 18px rgba(0, 0, 0, 0.06);
}

.site-header-inner {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: clamp(24px, 4vw, 64px);
  padding: clamp(16px, 1.8vw, 24px) clamp(28px, 5vw, 72px);
}

.brand {
  display: inline-flex;
  align-items: center;
  flex: 0 0 auto;
}

.brand img {
  height: clamp(14px, 1.45vw, 19px);
  width: auto;
}

.brand-strip {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-wrap: wrap;
  gap: clamp(28px, 6vw, 72px);
  padding: clamp(2px, 0.4vw, 6px) clamp(28px, 5vw, 72px);
  background: #f3f3f3;
  border-top: 1px solid rgba(0, 0, 0, 0.06);
}

.brand-strip a,
.brand-strip-logo {
  display: inline-flex;
  align-items: center;
  transition: opacity 0.2s ease;
}

.brand-strip a:hover {
  opacity: 1;
}

.brand-strip img {
  height: clamp(24px, 2.4vw, 34px);
  width: auto;
  opacity: 0.7;
}

/* minicar art is more compact than minitone — size it up to match presence */
.brand-strip img[src*="mini-car-logo"] {
  height: clamp(56px, 5.6vw, 80px);
}

/* minimint art includes trading cards above the wordmark, so size it a touch
   taller than the base rule to make the wordmark letters match minitone's,
   and give it full opacity so the cards stay legible */
.brand-strip img[src*="minimint-logo"] {
  height: clamp(23px, 2.3vw, 32px);
  opacity: 1;
}

.brand-strip a:hover img {
  opacity: 1;
}

.site-nav {
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  display: flex;
  align-items: center;
  justify-content: center;
  gap: clamp(22px, 2.6vw, 48px);
  color: #1a1a1a;
  font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  font-size: clamp(0.76rem, 0.85vw, 0.88rem);
  font-weight: 600;
  letter-spacing: 0.16em;
}

.site-nav a {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 8px 0;
  text-transform: uppercase;
  white-space: nowrap;
  transition: color 0.15s ease;
}

.site-nav a:hover {
  color: var(--coral);
}

.site-nav .caret {
  font-size: 0.7em;
  opacity: 0.8;
}

.shop-toggle {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 8px 0;
  border: 0;
  background: none;
  color: inherit;
  font: inherit;
  font-weight: 600;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  cursor: pointer;
  transition: color 0.15s ease;
}

.shop-toggle:hover,
.shop-toggle[aria-expanded="true"] {
  color: var(--coral);
}

/* ===== NEW dropdown (full-width) ===== */
.mega-inner.new-mega-inner {
  display: block;
  text-align: center;
}

.new-mega-eyebrow {
  margin: 0 0 clamp(20px, 2.4vw, 30px);
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--coral);
}

.new-drops {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: clamp(20px, 3vw, 48px);
}

.new-drop {
  display: grid;
  gap: 14px;
  width: 150px;
  text-decoration: none;
  color: var(--ink);
}

.new-drop-media {
  display: grid;
  place-items: center;
  height: 150px;
  overflow: hidden;
}

.new-drop-media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.35s ease;
}

.new-drop:hover .new-drop-media img {
  transform: scale(1.06);
}

.new-drop-name {
  font-size: 1rem;
  font-weight: 600;
  letter-spacing: 0.02em;
}

.new-drop:hover .new-drop-name {
  color: var(--coral);
}

/* NEW menu — items float across from left to right on open */
.new-marquee {
  overflow: hidden;
  width: 100%;
  padding: 6px 0;
  /* No edge fade — cards stay sharp to the ends (removed the mask-image
     gradient that used to fade the first/last 7%). To restore the fade, add
     back: mask-image: linear-gradient(90deg, transparent, #000 7%, #000 93%, transparent); */
}

.new-marquee-track {
  display: flex;
  align-items: center;
  width: max-content;
  animation: new-marquee-float 20s linear infinite;
}

.new-marquee-track .new-drop {
  margin: 0 clamp(14px, 1.8vw, 30px);
}

/* Product photos have dark backgrounds, so frame each as a dark rounded tile —
   the photo's own background blends into the tile for a clean, uniform look. */
/* Card-shaped tiles (5:7) so the portrait trading cards fill edge-to-edge with
   no top/bottom crop. `height:auto` overrides the base square height:150px. */
.new-marquee-track .new-drop-media {
  width: 150px;
  aspect-ratio: 5 / 7;
  height: auto;
  padding: 10px;
  border-radius: 14px;
  background: #0d0d0d;
}

.new-marquee-track .new-drop-media img {
  border-radius: 6px;
}

/* The drift car is the one landscape product; `cover` would slice its front/rear
   off in a portrait tile, so show it whole — its dark studio background blends
   into the dark tile so there's no visible letterboxing. */
.new-marquee-track .new-drop-media img[src*="mini-car-drift"] {
  object-fit: contain;
}

/* The track holds 4 identical sets. Shifting left by exactly one set (25% of
   the track) lands set 2 where set 1 was — a seamless, gap-free right-to-left
   loop. 4 sets keep the viewport covered for the whole cycle. */
@keyframes new-marquee-float {
  from { transform: translateX(0); }
  to { transform: translateX(-25%); }
}

.new-marquee:hover .new-marquee-track {
  animation-play-state: paused;
}

@media (prefers-reduced-motion: reduce) {
  .new-marquee-track {
    animation: none;
  }
}

/* ===== Categories mega-menu ===== */
.mega-menu {
  position: absolute;
  left: 0;
  right: 0;
  top: 100%;
  z-index: 25;
  background: #fff;
  color: var(--ink);
  border-top: 1px solid rgba(0, 0, 0, 0.08);
  box-shadow: 0 24px 40px rgba(0, 0, 0, 0.18);
}

.mega-menu[hidden] {
  display: none;
}

.mega-inner {
  display: grid;
  grid-template-columns: minmax(250px, 310px) 1fr;
  gap: clamp(28px, 4vw, 56px);
  width: min(1240px, 100%);
  margin: 0 auto;
  padding: clamp(28px, 4vw, 44px) clamp(18px, 5vw, 60px);
}

.mega-cats {
  display: grid;
  align-content: start;
  gap: 22px;
  margin: 0;
  padding: 0 clamp(20px, 2vw, 32px) 0 0;
  border-right: 1px solid rgba(0, 0, 0, 0.1);
}

.mega-cat-group {
  display: grid;
  gap: 8px;
}

.mega-cat-group h3 {
  margin: 0 0 2px;
  color: #0d0d0d;
  font-size: 0.78rem;
  font-weight: 800;
  letter-spacing: 0;
  text-transform: uppercase;
}

.mega-cats a {
  color: #1a1a1a;
  font-size: 0.94rem;
  font-weight: 500;
  line-height: 1.35;
  transition: color 0.15s ease;
}

.mega-cats a:hover {
  color: var(--coral);
}

.mega-cards {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: clamp(16px, 2vw, 28px);
}

.mega-category-cards {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

.mega-card {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.mega-card > a:first-child {
  display: block;
  aspect-ratio: 1 / 1;
  overflow: hidden;
  border-radius: 10px;
  background: #0a0a0a;
}

.mega-card img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.25s ease;
}

.mega-card:hover img {
  transform: scale(1.04);
}

.mega-card h4 {
  margin: 0;
  font-size: 1rem;
  font-weight: 700;
}

.mega-shop-now {
  color: #1a1a1a;
  font-size: 0.9rem;
  font-weight: 600;
  text-decoration: underline;
  text-underline-offset: 3px;
}

.mega-shop-now:hover {
  color: var(--coral);
}

.site-actions {
  position: relative;
  display: flex;
  align-items: center;
  gap: clamp(18px, 2vw, 30px);
  flex: 0 0 auto;
  color: #1a1a1a;
}

.site-actions.is-searching .action-icon {
  opacity: 0;
  pointer-events: none;
}

.action-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  position: relative;
  padding: 0;
  border: 0;
  background: none;
  color: #1a1a1a;
  cursor: pointer;
  transition: color 0.15s ease;
}

.action-icon:hover {
  color: var(--coral);
}

.header-search-inline {
  --search-open-width: 320px;
  display: none;
  grid-template-columns: minmax(0, 1fr) 36px 32px;
  align-items: center;
  width: 0;
  max-width: 0;
  min-width: 0;
  height: 40px;
  overflow: hidden;
  border: 1px solid transparent;
  border-radius: 999px;
  background: #ffffff;
  opacity: 0;
  pointer-events: none;
  transform-origin: right center;
  transition:
    width 0.22s ease,
    max-width 0.22s ease,
    border-color 0.16s ease,
    box-shadow 0.16s ease,
    opacity 0.12s ease;
}

.header-search-inline.is-open {
  display: grid;
  position: absolute;
  top: 50%;
  right: 0;
  transform: translateY(-50%);
  z-index: 5;
  width: var(--search-open-width);
  max-width: var(--search-open-width);
  border-color: rgba(8, 9, 9, 0.18);
  box-shadow: 0 10px 24px rgba(0, 0, 0, 0.08);
  opacity: 1;
  pointer-events: auto;
}

.header-search-inline:focus-within {
  border-color: rgba(250, 93, 85, 0.85);
  box-shadow: 0 0 0 3px rgba(250, 93, 85, 0.14);
}

.header-search-inline input {
  width: 100%;
  min-width: 0;
  height: 100%;
  padding: 0 0 0 16px;
  border: 0;
  background: transparent;
  color: var(--ink);
  font: inherit;
  font-size: 0.92rem;
  outline: none;
}

.header-search-inline input::placeholder {
  color: #6b6e76;
}

.header-search-inline button {
  display: grid;
  place-items: center;
  width: 100%;
  height: 100%;
  border: 0;
  background: transparent;
  color: #1a1a1a;
  cursor: pointer;
  transition: color 0.15s ease;
}

.header-search-inline button:hover {
  color: var(--coral);
}

.header-search-inline button:disabled,
.header-search-inline input:disabled {
  cursor: default;
}

.bag-count {
  position: absolute;
  top: -7px;
  right: -9px;
  min-width: 16px;
  height: 16px;
  display: grid;
  place-items: center;
  padding: 0 4px;
  border-radius: 999px;
  background: var(--coral);
  color: #fff;
  font-size: 0.66rem;
  font-weight: 800;
  line-height: 1;
}

.shop-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 42px;
  min-width: 120px;
  padding: 0 22px;
  border-radius: 6px;
  background: var(--ink);
  color: #fff;
  font-weight: 780;
  font-size: 0.86rem;
  box-shadow: 0 2px 12px rgba(8, 9, 9, 0.3);
}

/* ===== Hero carousel ===== */
.hero-slider {
  position: relative;
  width: 100%;
  overflow: hidden;
  isolation: isolate;
  background: #050505;
}

.slides {
  position: relative;
  width: 100%;
  height: clamp(480px, calc(80vh - var(--nav-h)), 640px);
  min-height: 480px;
}

.slide {
  position: absolute;
  inset: 0;
  display: grid;
  grid-template-columns: 1fr;
  place-items: center;
  padding: clamp(56px, 7vw, 96px) clamp(24px, 7vw, 110px);
  overflow: hidden;
  background: #050505;
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.35s ease;
}

.slide::before,
.slide::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
}

.slide::before {
  z-index: 1;
  background:
    linear-gradient(90deg, rgba(0, 0, 0, 0.56), rgba(0, 0, 0, 0.14) 50%, rgba(0, 0, 0, 0.56)),
    linear-gradient(180deg, rgba(0, 0, 0, 0.52), rgba(0, 0, 0, 0.32) 42%, rgba(0, 0, 0, 0.82));
}

.slide::after {
  z-index: 2;
  background:
    linear-gradient(180deg, rgba(0, 0, 0, 0.2), transparent 32%, rgba(0, 0, 0, 0.7));
  opacity: 0.9;
}

.slide.is-active {
  opacity: 1;
  visibility: visible;
}

.slide-bg {
  position: absolute;
  inset: 0;
  z-index: 0;
  width: 100%;
  height: 100%;
  max-width: none;
  object-fit: cover;
  object-position: center;
  filter: saturate(1.05) brightness(0.56);
  transform: none;
}

.slide-media {
  position: absolute;
  inset: 0;
  z-index: 3;
  display: grid;
  place-items: center;
  min-height: 0;
  pointer-events: none;
}

.slide-media::before {
  content: "";
  position: absolute;
  top: 39%;
  left: 50%;
  width: min(34vw, 480px);
  height: min(34vw, 480px);
  border-radius: 50%;
  background:
    radial-gradient(circle, rgba(255, 255, 255, 0.18), rgba(250, 93, 85, 0.12) 34%, transparent 68%);
  filter: blur(18px);
  opacity: 0.5;
  transform: translate(-50%, -50%);
}

.slide-media::after {
  content: "";
  position: absolute;
  left: 50%;
  bottom: clamp(48px, 8vh, 92px);
  width: min(26vw, 360px);
  height: 44px;
  border-radius: 50%;
  background: rgba(0, 0, 0, 0.72);
  filter: blur(22px);
  transform: translateX(-50%);
}

.slide-product {
  position: absolute;
  top: 38%;
  left: 50%;
  z-index: 1;
  width: min(26vw, 350px);
  max-height: clamp(300px, 54vh, 535px);
  max-width: 100%;
  object-fit: contain;
  opacity: 0.88;
  transform: translate(-50%, -50%);
  -webkit-mask-image: radial-gradient(ellipse 63% 66% at 50% 52%, #000 66%, rgba(0, 0, 0, 0.86) 78%, transparent 96%);
  mask-image: radial-gradient(ellipse 63% 66% at 50% 52%, #000 66%, rgba(0, 0, 0, 0.86) 78%, transparent 96%);
  filter:
    drop-shadow(0 36px 54px rgba(0, 0, 0, 0.68))
    drop-shadow(0 0 28px rgba(255, 255, 255, 0.08));
}

.slide-product-tile {
  width: min(34vw, 420px);
  max-height: clamp(280px, 44vh, 430px);
  border-radius: 8px;
  object-fit: cover;
  opacity: 0.9;
  -webkit-mask-image: none;
  mask-image: none;
  box-shadow:
    0 34px 72px rgba(0, 0, 0, 0.62),
    0 0 0 1px rgba(255, 255, 255, 0.12);
  filter: saturate(1.03) contrast(1.03);
}

.slide-caption {
  position: relative;
  z-index: 4;
  justify-self: center;
  align-self: center;
  width: min(100%, 760px);
  max-width: 760px;
  color: #fff;
  text-align: center;
  transform: translateY(clamp(92px, 17vh, 132px));
}

.slide-caption h2 {
  margin: 4px 0 6px;
  font-family: Montserrat, ui-sans-serif, system-ui, sans-serif;
  font-size: clamp(1.85rem, 2.8vw, 2.9rem);
  line-height: 1;
  font-weight: 800;
  text-transform: uppercase;
  text-wrap: balance;
  text-shadow: 0 4px 12px rgba(0, 0, 0, 0.42);
}

.slide-caption .slide-sub {
  max-width: 36rem;
  margin: 0 auto 16px;
  font-family: Montserrat, ui-sans-serif, system-ui, sans-serif;
  color: rgba(255, 255, 255, 0.78);
  font-size: clamp(0.9rem, 1.12vw, 1.04rem);
  line-height: 1.5;
}

.eyebrow,
.section-kicker {
  margin: 0 0 12px;
  color: var(--coral-deep);
  font-size: 0.76rem;
  font-weight: 850;
  text-transform: uppercase;
  letter-spacing: 0.08em;
}

.slide-caption .eyebrow {
  margin-bottom: 4px;
  font-family: Montserrat, ui-sans-serif, system-ui, sans-serif;
  color: #ff7b70;
}

.hero-button {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 164px;
  min-height: 54px;
  padding: 0 34px;
  border-radius: 6px;
  /* Default is the on-dark variant (hero slides, promo banner): white button,
     matching .shop-feature-button. Light-background uses are overridden below. */
  background: #fff;
  color: var(--ink);
  font-weight: 600;
  font-size: 0.9rem;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  box-shadow: 0 2px 12px rgba(8, 9, 9, 0.3);
  transition:
    transform 0.25s cubic-bezier(0.22, 1, 0.36, 1),
    background 0.25s ease,
    color 0.25s ease,
    box-shadow 0.25s ease;
}

.hero-button:hover {
  transform: translateY(-2px);
  background: var(--ink);
  color: #fff;
  box-shadow: 0 8px 22px rgba(8, 9, 9, 0.36);
}

.hero-button:active {
  transform: translateY(-1px);
}

.hero-button:focus-visible {
  outline: 2px solid #fff;
  outline-offset: 3px;
}

/* On-light variant: checkout + empty-state CTAs go solid black, matching the
   "Add to bag" (.product-button) treatment. Hover inverts to white. */
.cart-checkout,
.mini-cart-checkout,
.empty-actions .hero-button {
  background: var(--ink);
  color: #fff;
}

.cart-checkout:hover,
.mini-cart-checkout:hover,
.empty-actions .hero-button:hover {
  background: #24201f;
  color: #fff;
}

.cart-checkout:focus-visible,
.mini-cart-checkout:focus-visible,
.empty-actions .hero-button:focus-visible {
  outline-color: var(--ink);
}

@media (prefers-reduced-motion: reduce) {
  .hero-button {
    transition: none;
  }
}

/* ===== Promo photo banner ===== */
.promo-banner {
  position: relative;
  display: grid;
  place-items: center;
  width: 100%;
  min-height: clamp(320px, 46vh, 460px);
  padding: clamp(48px, 7vw, 96px) clamp(24px, 7vw, 110px);
  overflow: hidden;
  isolation: isolate;
  border-top: var(--section-gap) solid #fff;
  background: #050505;
  text-align: center;
}

.promo-bg {
  position: absolute;
  inset: 0;
  z-index: 0;
  width: 100%;
  height: 100%;
  max-width: none;
  object-fit: cover;
  object-position: center;
  filter: saturate(1.05) brightness(0.5);
}

.promo-banner::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  background: linear-gradient(180deg, rgba(0, 0, 0, 0.46), rgba(0, 0, 0, 0.2) 40%, rgba(0, 0, 0, 0.78));
}

.promo-content {
  position: relative;
  z-index: 2;
  width: min(100%, 640px);
  color: #fff;
}

.promo-content .eyebrow {
  color: #ff7b70;
}

.promo-content h2 {
  margin: 6px 0 12px;
  font-size: clamp(1.6rem, 2.6vw, 2.5rem);
  line-height: 1.06;
  font-weight: 800;
  text-transform: uppercase;
  text-wrap: balance;
  text-shadow: 0 4px 12px rgba(0, 0, 0, 0.42);
}

.promo-sub {
  max-width: 34rem;
  margin: 0 auto 24px;
  color: rgba(255, 255, 255, 0.8);
  font-size: clamp(0.92rem, 1.1vw, 1.05rem);
  line-height: 1.55;
}

/* ===== Cars shop feature banner ===== */
.shop-feature {
  position: relative;
  display: flex;
  align-items: center;
  width: 100%;
  min-height: clamp(300px, 38vh, 380px);
  padding: clamp(32px, 6vw, 72px) clamp(28px, 8vw, 110px);
  overflow: hidden;
  isolation: isolate;
  border-top: var(--section-gap) solid #fff;
  background: #0a0a0b;
}

.shop-feature-bg {
  position: absolute;
  inset: 0;
  z-index: 0;
  width: 100%;
  height: 100%;
  max-width: none;
  object-fit: contain;
  object-position: 94% center;
}

.shop-feature::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  background: linear-gradient(90deg, rgba(5, 5, 6, 0.92) 0%, rgba(5, 5, 6, 0.7) 34%, rgba(5, 5, 6, 0.18) 64%, rgba(5, 5, 6, 0.04) 100%);
}

.shop-feature-content {
  position: relative;
  z-index: 2;
  max-width: 460px;
  color: #fff;
}

.shop-feature-title {
  margin: 0 0 10px;
  font-size: clamp(2.2rem, 5vw, 3.8rem);
  line-height: 0.98;
  font-weight: 800;
  text-transform: uppercase;
  text-shadow: 0 4px 14px rgba(0, 0, 0, 0.5);
}

.shop-feature-sub {
  max-width: 30rem;
  margin: 0 0 22px;
  color: rgba(255, 255, 255, 0.82);
  font-size: clamp(0.92rem, 1.1vw, 1.05rem);
  line-height: 1.5;
}

.shop-feature-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 150px;
  min-height: 50px;
  padding: 0 26px;
  border-radius: 6px;
  background: #fff;
  color: var(--ink);
  font-weight: 700;
  letter-spacing: 0.03em;
  transition: transform 0.2s ease, box-shadow 0.2s ease, background 0.2s ease, color 0.2s ease;
}

.shop-feature-button:hover {
  transform: translateY(-2px);
  background: var(--ink);
  color: #fff;
  box-shadow: 0 8px 22px rgba(8, 9, 9, 0.36);
}

.shop-feature-button:focus-visible {
  outline: 2px solid #fff;
  outline-offset: 3px;
}

@media (max-width: 680px) {
  .shop-feature {
    align-items: flex-end;
    min-height: clamp(360px, 60vh, 460px);
  }

  .shop-feature::after {
    background: linear-gradient(180deg, rgba(5, 5, 6, 0.2) 0%, rgba(5, 5, 6, 0.5) 45%, rgba(5, 5, 6, 0.92) 100%);
  }

  .shop-feature-content {
    max-width: 100%;
  }
}

/* ===== Recent releases ===== */
.recent-releases {
  padding: clamp(42px, 6vw, 76px) clamp(20px, 6vw, 88px);
  border-top: var(--section-gap) solid #fff;
  background: #ffffff;
}

.recent-header {
  display: grid;
  place-items: center;
  max-width: 1280px;
  margin: 0 auto clamp(26px, 4vw, 46px);
  text-align: center;
}

.recent-header h2 {
  margin: 0;
  color: #121820;
  font-size: clamp(1.25rem, 2.1vw, 2.1rem);
  line-height: 1;
  font-weight: 900;
  text-transform: uppercase;
  letter-spacing: 0.02em;
}

.recent-view-all {
  flex: 0 0 auto;
  padding-bottom: 5px;
  color: var(--ink);
  font-size: 0.82rem;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  text-decoration: underline;
  text-underline-offset: 4px;
  transition: color 0.15s ease;
}

.recent-view-all:hover {
  color: var(--coral);
}

.recent-grid {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

/* Arrows */
.slider-arrow {
  position: absolute;
  top: 50%;
  z-index: 6;
  display: grid;
  place-items: center;
  width: clamp(40px, 4vw, 56px);
  height: clamp(56px, 8vh, 84px);
  border: 0;
  color: #fff;
  font-size: clamp(1.6rem, 3vw, 2.4rem);
  line-height: 1;
  cursor: pointer;
  background: rgba(0, 0, 0, 0.42);
  transform: translateY(-50%);
  transition: background 0.15s ease;
}

.slider-arrow:hover {
  background: rgba(0, 0, 0, 0.7);
}

.slider-prev {
  left: 0;
  border-radius: 0 8px 8px 0;
}

.slider-next {
  right: 0;
  border-radius: 8px 0 0 8px;
}

/* Pagination dots — hidden; navigation is via the prev/next arrows only.
   To restore the dots, set display back to flex. */
.slider-dots {
  position: absolute;
  left: 50%;
  bottom: clamp(14px, 2.5vh, 26px);
  z-index: 6;
  display: none;
  gap: 10px;
  transform: translateX(-50%);
}

.slider-dots button {
  width: 30px;
  height: 7px;
  padding: 0;
  border: 0;
  border-radius: 999px;
  cursor: pointer;
  background: rgba(255, 255, 255, 0.35);
  transition: background 0.15s ease, width 0.15s ease;
}

.slider-dots button.is-active {
  width: 42px;
  background: #fff;
}

.jar {
  width: 100%;
  height: 100%;
  position: relative;
}

.cap-shadow {
  width: 74%;
  height: 15px;
  position: absolute;
  top: 16%;
  left: 50%;
  z-index: 3;
  border-radius: 50%;
  background: rgba(0, 0, 0, 0.2);
  filter: blur(8px);
  opacity: calc(0.45 - (var(--open) * 0.25));
  transform: translateX(-50%);
}

.cap {
  width: 80%;
  height: 16%;
  min-height: 58px;
  position: absolute;
  top: 0;
  left: 50%;
  z-index: 8;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 2px;
  overflow: hidden;
  border: 1px solid rgba(255, 255, 255, 0.14);
  border-radius: 46% 46% 12% 12% / 70% 70% 16% 16%;
  color: rgba(255, 255, 255, 0.86);
  background:
    radial-gradient(120% 90% at 50% 0, rgba(255, 255, 255, 0.22), transparent 42%),
    linear-gradient(90deg, #070707, #2a2a2a 34%, #121212 66%, #030303),
    #111;
  box-shadow:
    0 20px 30px rgba(0, 0, 0, 0.22),
    inset 0 1px 0 rgba(255, 255, 255, 0.3),
    inset 0 -14px 22px rgba(0, 0, 0, 0.4);
  transform-origin: 84% 92%;
  transform:
    translateX(-50%)
    translateY(calc(var(--open) * -68px))
    translateX(calc(var(--open) * 55px))
    rotate(calc(var(--open) * 18deg));
}

.cap::before,
.base::before {
  content: "";
  position: absolute;
  inset: 12% 5%;
  border-radius: inherit;
  background:
    linear-gradient(135deg, rgba(255, 255, 255, 0.08), transparent 36%),
    repeating-linear-gradient(
      45deg,
      rgba(255, 255, 255, 0.025) 0 2px,
      transparent 2px 6px
    );
  pointer-events: none;
}

.cap span {
  position: relative;
  font-size: clamp(0.95rem, 2vw, 1.5rem);
  font-weight: 360;
  letter-spacing: 0.16em;
}

.cap small {
  position: relative;
  font-size: clamp(0.42rem, 0.75vw, 0.6rem);
  letter-spacing: 0.22em;
  color: rgba(255, 255, 255, 0.78);
}

.glass-back,
.glass-front {
  width: 80%;
  position: absolute;
  left: 50%;
  top: 12%;
  bottom: 11%;
  border-radius: 50% / 7%;
  transform: translateX(-50%);
}

.glass-back {
  z-index: 1;
  border: 1px solid rgba(255, 255, 255, 0.45);
  background:
    linear-gradient(
      90deg,
      rgba(20, 24, 28, 0.28) 0 2%,
      rgba(255, 255, 255, 0.14) 12%,
      rgba(255, 255, 255, 0.03) 50%,
      rgba(255, 255, 255, 0.14) 88%,
      rgba(20, 24, 28, 0.28) 98% 100%
    ),
    rgba(222, 234, 240, 0.05);
  box-shadow:
    inset 0 0 18px rgba(255, 255, 255, 0.06),
    0 22px 32px rgba(0, 0, 0, 0.14);
}

.glass-back::before,
.glass-back::after,
.glass-front::before,
.glass-front::after {
  content: "";
  position: absolute;
  pointer-events: none;
}

.glass-back::before {
  left: 6%;
  right: 6%;
  top: -3px;
  height: 14px;
  border: 1px solid rgba(255, 255, 255, 0.5);
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.12);
}

.glass-back::after {
  left: 7%;
  right: 7%;
  bottom: -2px;
  height: 14px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.08);
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.22);
}

.glass-front {
  z-index: 5;
  overflow: hidden;
  background: linear-gradient(
    90deg,
    rgba(255, 255, 255, 0.26) 0 4%,
    transparent 12% 86%,
    rgba(255, 255, 255, 0.2) 96% 100%
  );
  opacity: calc(0.82 - (var(--open) * 0.12));
}

.glass-front::before,
.glass-front::after {
  top: 6%;
  bottom: 6%;
  border-radius: 999px;
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.42), rgba(255, 255, 255, 0.04) 78%);
}

.glass-front::before {
  width: 6%;
  left: 14%;
  opacity: 0.85;
}

.glass-front::after {
  width: 3%;
  right: 18%;
  opacity: 0.5;
}

.guitar-lift {
  width: 72%;
  position: absolute;
  left: 50%;
  bottom: 8%;
  z-index: 4;
  display: grid;
  place-items: end center;
  transform:
    translateX(-50%)
    translateY(calc(var(--open) * -48%))
    scale(calc(0.98 + (var(--open) * 0.11)));
  transform-origin: 50% 84%;
  filter:
    drop-shadow(0 14px 12px rgba(0, 0, 0, 0.28))
    saturate(calc(1 + (var(--open) * 0.08)));
}

.guitar-lift img {
  width: 100%;
  height: auto;
  max-width: 100%;
}

.base {
  width: 80%;
  height: 15%;
  min-height: 58px;
  position: absolute;
  left: 50%;
  bottom: 0;
  z-index: 7;
  border: 1px solid rgba(255, 255, 255, 0.11);
  border-radius: 12% 12% 46% 46% / 18% 18% 80% 80%;
  background:
    linear-gradient(90deg, #030303, #202020 28%, #0b0b0b 68%, #010101),
    #070707;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.24),
    0 20px 34px rgba(0, 0, 0, 0.18);
  transform: translateX(-50%);
}

.base::after {
  content: "WHITE STRAT";
  position: absolute;
  left: 50%;
  bottom: 31%;
  color: rgba(255, 255, 255, 0.66);
  font-size: clamp(0.58rem, 1vw, 0.86rem);
  font-weight: 620;
  transform: translateX(-50%);
}

.spec-strip {
  display: none;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 1px;
  margin: 0 clamp(18px, 4vw, 52px) clamp(18px, 2.6vw, 34px);
  overflow: hidden;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--line);
}

.spec-strip div {
  display: grid;
  gap: 4px;
  padding: clamp(12px, 1.7vw, 18px);
  background: rgba(255, 255, 255, 0.76);
}

.spec-strip strong {
  font-size: clamp(0.9rem, 1.2vw, 1.12rem);
}

.spec-strip span {
  color: var(--muted);
  font-size: 0.8rem;
}

.details {
  position: relative;
  overflow: hidden;
  isolation: isolate;
  border-top: var(--section-gap) solid #fff;
  color: white;
  background: #050505;
}

.details::before,
.details::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
}

.details::before {
  z-index: 0;
  background-image: url("assets/guitar-cutout.png");
  background-position: right 8% top 45%;
  background-size: min(42vw, 520px) auto;
  background-repeat: no-repeat;
  opacity: 0.22;
  filter: blur(18px) saturate(0.9) brightness(0.7);
  transform: scale(1.12);
}

.details::after {
  z-index: 1;
  background:
    radial-gradient(circle at 78% 34%, rgba(113, 221, 211, 0.16), transparent 0 24rem),
    radial-gradient(circle at 12% 14%, rgba(250, 93, 85, 0.18), transparent 0 18rem),
    linear-gradient(90deg, rgba(5, 5, 5, 0.98), rgba(5, 5, 5, 0.84) 58%, rgba(5, 5, 5, 0.96));
}

.details-inner {
  position: relative;
  z-index: 2;
  width: min(1120px, calc(100% - 40px));
  margin: 0 auto;
  padding: clamp(48px, 6vw, 88px) 0;
}

.details h2,
.contact-panel h2 {
  max-width: 840px;
  margin: 0;
  font-size: clamp(2rem, 5vw, 4.8rem);
  line-height: 1;
}

.details-inner > p {
  max-width: 640px;
  margin: 24px 0 0;
  color: rgba(255, 255, 255, 0.72);
  font-size: clamp(1rem, 1.6vw, 1.22rem);
  line-height: 1.7;
}

.detail-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 14px;
  margin-top: clamp(36px, 6vw, 72px);
}

.detail-grid article {
  min-height: 210px;
  padding: clamp(20px, 2.6vw, 30px);
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.055);
}

.detail-grid span {
  color: var(--aqua);
  font-weight: 820;
}

.detail-grid h3 {
  margin: 44px 0 12px;
  font-size: clamp(1.1rem, 2vw, 1.45rem);
}

.detail-grid p {
  margin: 0;
  color: rgba(255, 255, 255, 0.7);
  line-height: 1.55;
}

.display-showcase {
  display: grid;
  grid-template-columns: 1fr 1fr;
  align-items: center;
  gap: clamp(28px, 5vw, 72px);
  margin-top: clamp(48px, 7vw, 96px);
  padding: clamp(28px, 4vw, 52px);
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: 16px;
  background:
    radial-gradient(circle at 78% 40%, rgba(146, 221, 216, 0.12), transparent 60%),
    rgba(255, 255, 255, 0.04);
}

.showcase-copy .section-kicker {
  color: var(--aqua);
}

.showcase-copy h3 {
  margin: 0 0 14px;
  font-size: clamp(1.5rem, 2.6vw, 2.2rem);
  line-height: 1.1;
}

.showcase-copy p {
  margin: 0;
  max-width: 460px;
  color: rgba(255, 255, 255, 0.72);
  font-size: clamp(0.98rem, 1.3vw, 1.12rem);
  line-height: 1.65;
}

.showcase-image {
  margin: 0;
  display: grid;
  justify-items: center;
  gap: 14px;
}

.showcase-image img {
  width: 100%;
  max-width: 360px;
  height: auto;
  border-radius: 14px;
  filter: drop-shadow(0 26px 40px rgba(0, 0, 0, 0.45));
}

.showcase-image figcaption {
  color: rgba(255, 255, 255, 0.72);
  font-size: 0.82rem;
  text-align: center;
}

.collection-hero {
  position: relative;
  isolation: isolate;
  min-height: clamp(300px, 34vh, 380px);
  display: grid;
  grid-template-columns: minmax(0, 0.9fr) minmax(240px, 0.58fr);
  align-items: center;
  gap: clamp(22px, 5vw, 68px);
  overflow: hidden;
  padding: clamp(40px, 6vw, 76px) clamp(28px, 8vw, 118px);
  color: #fff;
  background: #050505;
}

.collection-hero::before,
.collection-hero::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
}

.collection-hero::before {
  z-index: -1;
  background:
    radial-gradient(circle at 74% 48%, rgba(255, 255, 255, 0.14), transparent 0 22rem),
    radial-gradient(circle at 12% 22%, rgba(250, 93, 85, 0.2), transparent 0 20rem),
    linear-gradient(90deg, rgba(0, 0, 0, 0.9), rgba(0, 0, 0, 0.58) 50%, rgba(0, 0, 0, 0.8));
}

.collection-hero::after {
  z-index: -1;
  background:
    linear-gradient(180deg, transparent 44%, rgba(0, 0, 0, 0.62)),
    repeating-linear-gradient(
      90deg,
      rgba(255, 255, 255, 0.03) 0 1px,
      transparent 1px 86px
    );
  opacity: 0.5;
}

.collection-hero-bg {
  position: absolute;
  inset: -12%;
  z-index: -2;
  width: 124%;
  height: 124%;
  max-width: none;
  object-fit: cover;
  object-position: center;
  filter: blur(28px) saturate(1.02) brightness(0.46);
  transform: scale(1.04);
}

.collection-hero-copy {
  width: min(100%, 620px);
  max-width: 620px;
}

.collection-hero-copy h1 {
  margin: 0 0 14px;
  font-size: clamp(2.6rem, 6vw, 5rem);
  line-height: 0.96;
}

.collection-hero-copy p:last-child {
  max-width: 34rem;
  margin: 0;
  color: rgba(255, 255, 255, 0.78);
  font-size: clamp(1rem, 1.5vw, 1.28rem);
  line-height: 1.55;
  text-wrap: balance;
}

.collection-hero-media {
  display: grid;
  place-items: center;
  min-height: clamp(190px, 26vh, 300px);
}

.collection-hero-media img {
  width: min(22vw, 260px);
  max-height: clamp(200px, 32vh, 320px);
  object-fit: contain;
  -webkit-mask-image: radial-gradient(ellipse 64% 66% at 50% 52%, #000 68%, rgba(0, 0, 0, 0.86) 80%, transparent 96%);
  mask-image: radial-gradient(ellipse 64% 66% at 50% 52%, #000 68%, rgba(0, 0, 0, 0.86) 80%, transparent 96%);
  filter: drop-shadow(0 36px 58px rgba(0, 0, 0, 0.68));
}

.collection-shell {
  padding: clamp(42px, 6vw, 80px) clamp(20px, 6vw, 88px);
  background: #f6f6f4;
}

.collection-toolbar {
  display: flex;
  align-items: end;
  justify-content: space-between;
  gap: 24px;
  max-width: 1280px;
  margin: 0 auto clamp(24px, 4vw, 44px);
}

.collection-toolbar h1,
.collection-toolbar h2 {
  margin: 0;
  font-size: clamp(2rem, 4vw, 4rem);
  line-height: 1;
}

.collection-count {
  flex: 0 0 auto;
  margin-left: auto;
  color: var(--muted);
  font-size: 0.92rem;
  font-weight: 750;
  text-transform: uppercase;
  letter-spacing: 0.06em;
}

/* About page */
.about-shell { max-width: 760px; margin: 0 auto; }
.about-prose { font-size: 1.02rem; line-height: 1.6; color: #374151; }
.about-lead { font-size: 1.2rem; line-height: 1.5; color: #111; margin: 0 0 8px; }
.about-prose h2 { font-size: 1.3rem; color: #111; margin: 32px 0 10px; letter-spacing: -0.01em; }
.about-lines { list-style: none; padding: 0; margin: 12px 0 0; display: grid; gap: 12px; }
.about-lines li { padding-left: 16px; border-left: 2px solid rgba(0, 0, 0, 0.1); }
.about-lines strong { color: #111; }
.about-cta { margin-top: 36px; }

/* 404 page */
.notfound {
  max-width: 640px;
  margin: 0 auto;
  padding: clamp(48px, 10vw, 120px) 24px;
  text-align: center;
}
.notfound-code {
  font-size: clamp(4rem, 16vw, 9rem);
  font-weight: 800;
  line-height: 0.9;
  letter-spacing: -0.04em;
  margin: 0;
  color: #111;
}
.notfound h1 { font-size: clamp(1.4rem, 4vw, 2.2rem); margin: 12px 0 10px; letter-spacing: -0.01em; }
.notfound-lead { color: #6b7280; font-size: 1.02rem; line-height: 1.5; margin: 0 auto 28px; max-width: 460px; }
.notfound-actions { display: flex; flex-wrap: wrap; gap: 12px; justify-content: center; margin-bottom: 40px; }
.notfound-cats { display: flex; flex-wrap: wrap; gap: 8px 22px; justify-content: center; }
.notfound-cats a {
  color: #374151; text-decoration: none; font-weight: 650; font-size: 0.92rem;
  text-transform: uppercase; letter-spacing: 0.05em; border-bottom: 1px solid transparent;
}
.notfound-cats a:hover { border-bottom-color: currentColor; }

/* Sort dropdown injected into the toolbar by store.js */
.collection-toolbar { flex-wrap: wrap; }
.collection-sort { display: inline-flex; align-items: center; gap: 8px; flex: 0 0 auto; }
.collection-sort-label {
  font-size: 0.8rem; font-weight: 700; text-transform: uppercase;
  letter-spacing: 0.05em; color: var(--muted);
}
/* Clean pill select: custom chevron, ink-coloured text (no iOS blue), matches
   the rounded filter chips below it. */
.collection-sort select {
  font: inherit; font-size: 0.9rem; font-weight: 650;
  padding: 9px 36px 9px 15px;
  border: 1px solid rgba(0, 0, 0, 0.16); border-radius: 999px;
  background-color: #fff;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%23111' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 14px center;
  color: var(--ink);
  -webkit-appearance: none; -moz-appearance: none; appearance: none;
  cursor: pointer;
}

.product-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: clamp(16px, 2vw, 26px);
  align-items: start; /* cards size to their content — no big gap under short titles */
  max-width: 1280px;
  margin: 0 auto;
}

/* Loading skeletons — shown in place of a blank grid / "Coming Soon" flash
   while the first product fetch is in flight. */
.skeleton-card {
  border: 1px solid rgba(8, 9, 9, 0.08);
  border-radius: 8px;
  background: #fff;
  overflow: hidden;
}

.skeleton-card::before,
.skeleton-card::after {
  content: "";
  display: block;
  background: linear-gradient(100deg, #ececec 30%, #f6f6f6 50%, #ececec 70%);
  background-size: 200% 100%;
  animation: skeleton-shimmer 1.3s ease-in-out infinite;
}

.skeleton-card::before {
  aspect-ratio: 1 / 1;
}

.skeleton-card::after {
  height: 14px;
  margin: 16px 16px 22px;
  border-radius: 4px;
}

@keyframes skeleton-shimmer {
  0% { background-position: 200% 0; }
  100% { background-position: -200% 0; }
}

@media (prefers-reduced-motion: reduce) {
  .skeleton-card::before,
  .skeleton-card::after {
    animation: none;
  }
}

.product-card {
  position: relative;
  display: flex;
  flex-direction: column;
  min-height: 100%;
  overflow: hidden;
  border: 1px solid rgba(8, 9, 9, 0.1);
  border-radius: 8px;
  background: #fff;
  transition:
    transform 0.25s cubic-bezier(0.22, 1, 0.36, 1),
    box-shadow 0.25s ease,
    border-color 0.25s ease;
}

.product-card:hover {
  transform: translateY(-4px);
  border-color: rgba(8, 9, 9, 0.18);
  box-shadow: 0 18px 36px rgba(0, 0, 0, 0.1);
}

.product-info h3 a {
  color: inherit;
  text-decoration: none;
  transition: color 0.18s ease;
}

.product-info h3 a:hover {
  color: var(--coral);
}

.product-image {
  position: relative;
  aspect-ratio: 1 / 1.08;
  overflow: hidden;
  background: #fff;
}

/* Pin the image to fill the frame with a DEFINITE size (inset:0), so a tall
   portrait card can't overflow and get its top/bottom clipped. Padding lives on
   the image (border-box) for breathing room; object-fit:contain then shows the
   WHOLE product, centered, at the frame's height — no cutoff, no taller cards. */
.product-image img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  padding: clamp(14px, 1.8vw, 22px);
  box-sizing: border-box;
  object-fit: contain;
  transition: transform 0.22s ease;
  filter: drop-shadow(0 22px 28px rgba(0, 0, 0, 0.48));
}

.product-card:hover .product-image img {
  transform: scale(1.035);
}

.product-info {
  display: flex;
  flex: 1 1 auto;
  flex-direction: column;
  gap: 10px;
  padding: clamp(18px, 2vw, 24px);
}

.product-tag {
  margin: 0;
  color: var(--coral-deep);
  font-size: 0.72rem;
  font-weight: 850;
  text-transform: uppercase;
  letter-spacing: 0.08em;
}

.product-info h3 {
  margin: 0;
  font-size: clamp(1.18rem, 1.7vw, 1.55rem);
  line-height: 1.08;
}

.product-info p:not(.product-tag) {
  margin: 0;
  color: var(--muted);
  font-size: 0.95rem;
  line-height: 1.5;
  /* Long descriptions stay tidy in the grid; the product page shows all of it. */
  display: -webkit-box;
  -webkit-line-clamp: 3;
  line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.product-buy {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  margin-top: auto;
  padding-top: 12px;
}

.product-buy span {
  font-weight: 850;
}

.product-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 40px;
  padding: 0 16px;
  border-radius: 6px;
  background: var(--ink);
  color: #fff;
  font-size: 0.82rem;
  font-weight: 820;
  text-transform: uppercase;
  letter-spacing: 0.03em;
  transition: background 0.15s ease;
}

.product-button:hover {
  background: #24201f;
}

.collection-feature {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: clamp(24px, 5vw, 80px);
  padding: clamp(44px, 7vw, 86px) clamp(24px, 8vw, 110px);
  color: #fff;
  background:
    radial-gradient(circle at 82% 48%, rgba(113, 221, 211, 0.12), transparent 0 24rem),
    #050505;
}

.collection-feature h2 {
  max-width: 760px;
  margin: 0;
  font-size: clamp(2rem, 4.8vw, 4.6rem);
  line-height: 1;
}

.coming-soon-hero {
  min-height: clamp(340px, 46vh, 500px);
  display: grid;
  place-items: center;
  padding: clamp(42px, 6vw, 72px) clamp(28px, 8vw, 118px);
  border-top: var(--section-gap) solid #fff;
  color: #fff;
  text-align: center;
  background:
    radial-gradient(circle at 78% 50%, rgba(255, 255, 255, 0.1), transparent 0 24rem),
    radial-gradient(circle at 14% 24%, rgba(250, 93, 85, 0.2), transparent 0 20rem),
    #050505;
}

.coming-soon-copy {
  max-width: 720px;
  margin-inline: auto;
}

.coming-soon-copy h1 {
  margin: 0;
  font-size: clamp(2.7rem, 7vw, 6rem);
  line-height: 0.94;
}

.coming-soon-copy p:not(.eyebrow) {
  margin: 0 0 28px;
  color: rgba(255, 255, 255, 0.78);
  font-size: clamp(1.12rem, 1.7vw, 1.5rem);
}

/* ============================================================
   Trading cards (collectibles page)
   Modeled on how card marketplaces (TCGplayer, eBay, COMC) lay out
   singles: portrait 5:7 card images on a light "showcase" panel, a
   grade slab badge, set/number kicker, rarity + condition chips, and
   a denser grid than the toy product cards.
   ============================================================ */
.cards-intro {
  padding: clamp(40px, 6vw, 76px) clamp(20px, 6vw, 88px);
  border-top: var(--section-gap) solid #fff;
  color: #fff;
  background:
    radial-gradient(circle at 88% 12%, rgba(113, 221, 211, 0.18), transparent 0 22rem),
    radial-gradient(circle at 6% 92%, rgba(250, 93, 85, 0.22), transparent 0 20rem),
    #0b0c0e;
}

.cards-intro-inner {
  max-width: 1280px;
  margin: 0 auto;
}

.cards-intro .eyebrow {
  color: var(--aqua);
}

.cards-intro h1 {
  margin: 0 0 14px;
  font-size: clamp(2.2rem, 4.5vw, 3.6rem);
  line-height: 1;
}

.cards-intro p {
  max-width: 640px;
  margin: 0;
  color: rgba(255, 255, 255, 0.74);
  font-size: clamp(1rem, 1.5vw, 1.2rem);
  line-height: 1.6;
}

/* Trading Cards section intro (moved out of the Collectibles hero). */
.tcg-section-lead {
  max-width: 760px;
  margin: -0.75rem 0 clamp(22px, 3vw, 32px);
  color: var(--muted);
  font-size: 1rem;
  line-height: 1.6;
}
.tcg-section-lead strong { color: var(--ink); font-weight: 800; }
.tcg-section-lead a { color: var(--ink); text-underline-offset: 2px; }

.tcg-filters {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  max-width: 1280px;
  margin: 0 auto clamp(22px, 3vw, 34px);
}

.tcg-chip {
  padding: 9px 18px;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: #fff;
  color: var(--ink);
  font-size: 0.86rem;
  font-weight: 750;
  cursor: pointer;
  transition: background 0.15s ease, color 0.15s ease, border-color 0.15s ease;
}

.tcg-chip:hover {
  border-color: rgba(8, 9, 9, 0.3);
}

.tcg-chip.is-active {
  background: var(--ink);
  border-color: var(--ink);
  color: #fff;
}

/* ===== Grid view switcher (1 / 2 / 4 columns, remembered per device) ===== */
.grid-view-bar {
  display: flex;
  justify-content: flex-end;
  align-items: center;
  gap: 9px;
  max-width: 1280px;
  margin: 0 auto clamp(12px, 2vw, 18px);
  padding: 0 clamp(20px, 5vw, 24px);
}
.grid-view-label {
  font-size: 0.76rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--muted);
}
.grid-view-toggle { display: inline-flex; gap: 5px; }
.grid-view-btn {
  width: 34px;
  height: 34px;
  display: grid;
  place-items: center;
  border: 1px solid var(--line);
  background: #fff;
  border-radius: 8px;
  color: #a6a9af;
  cursor: pointer;
  transition: color 0.15s ease, border-color 0.15s ease;
}
.grid-view-btn:hover { color: var(--ink); }
.grid-view-btn.is-active { color: var(--ink); border-color: rgba(8, 9, 9, 0.5); }
.grid-view-btn svg { width: 15px; height: 15px; fill: currentColor; }
/* Phones only offer 1 / 2 columns (4-up is too small on a narrow screen). */
@media (max-width: 640px) {
  .grid-view-btn[data-cols-set="4"] { display: none; }
}
/* Column overrides — beat the base grid rules via the attribute's specificity. */
.product-grid[data-cols="1"], .tcg-grid[data-cols="1"] { grid-template-columns: minmax(0, 1fr); }
.product-grid[data-cols="2"], .tcg-grid[data-cols="2"] { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.product-grid[data-cols="4"], .tcg-grid[data-cols="4"] { grid-template-columns: repeat(4, minmax(0, 1fr)); }
/* Cap phones to 2 columns max (a "4" choice shows as 2 there). */
@media (max-width: 640px) {
  .product-grid[data-cols="4"], .tcg-grid[data-cols="4"] { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

.tcg-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(210px, 1fr));
  gap: clamp(14px, 1.8vw, 24px);
  align-items: start; /* cards size to their content — no big gap under short titles */
  max-width: 1280px;
  margin: 0 auto;
}

.tcg-card {
  position: relative;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  border: 1px solid var(--line);
  border-radius: 12px;
  background: #fff;
  transition:
    transform 0.25s cubic-bezier(0.22, 1, 0.36, 1),
    box-shadow 0.25s ease,
    border-color 0.25s ease;
}

.tcg-card[hidden] {
  display: none;
}

.tcg-card:hover {
  transform: translateY(-4px);
  border-color: rgba(8, 9, 9, 0.18);
  box-shadow: 0 18px 38px rgba(0, 0, 0, 0.12);
}

.tcg-media {
  position: relative;
  display: grid;
  place-items: center;
  aspect-ratio: 5 / 7;            /* real card proportions (2.5" x 3.5") */
  padding: clamp(16px, 2vw, 26px);
  background:
    radial-gradient(circle at 50% 28%, rgba(255, 255, 255, 0.95), transparent 60%),
    linear-gradient(160deg, #eef1f6 0%, #e2e6ee 100%);
}

.tcg-media img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  border-radius: 8px;
  filter: drop-shadow(0 12px 22px rgba(15, 23, 42, 0.28));
  transition: transform 0.22s ease;
}

.tcg-card:hover .tcg-media img {
  transform: translateY(-3px) scale(1.02);
}

/* Back-of-card reveal on hover (only when a back photo exists) */
.tcg-back {
  position: absolute;
  inset: clamp(16px, 2vw, 26px);
  width: auto;
  height: auto;
  object-fit: contain;
  opacity: 0;
  transition: opacity 0.28s ease;
  pointer-events: none;
}
.tcg-card:hover .tcg-back { opacity: 1; }
.tcg-media.has-back::after {
  content: "Hover for back";
  position: absolute;
  bottom: 8px;
  left: 50%;
  transform: translateX(-50%);
  padding: 3px 9px;
  border-radius: 999px;
  background: rgba(8, 9, 9, 0.62);
  color: #fff;
  font-size: 0.64rem;
  font-weight: 700;
  letter-spacing: 0.02em;
  transition: opacity 0.2s ease;
  pointer-events: none;
}
.tcg-media.has-back:hover::after { opacity: 0; }

.tcg-grade {
  position: absolute;
  bottom: 10px;
  right: 10px;
  z-index: 2;
  padding: 5px 10px;
  border-radius: 6px;
  font-size: 0.72rem;
  font-weight: 850;
  letter-spacing: 0.04em;
  color: #fff;
  background: #111;
  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.22);
}

.tcg-grade.is-psa {
  background: #c8102e;            /* PSA red */
}

.tcg-grade.is-bgs {
  background: #0b2c5c;            /* Beckett navy */
}

.tcg-card .wishlist-heart {
  top: 10px;
  left: 10px;
  right: auto;
}

.tcg-body {
  display: flex;
  flex: 1 1 auto;
  flex-direction: column;
  gap: 8px;
  padding: clamp(14px, 1.4vw, 18px);
}

.tcg-set {
  margin: 0;
  color: var(--muted);
  font-size: 0.74rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

.tcg-body h3 {
  margin: 0;
  font-size: clamp(1.04rem, 1.3vw, 1.22rem);
  line-height: 1.12;
}

.tcg-body h3 a {
  color: inherit;
  text-decoration: none;
  transition: color 0.15s ease;
}

.tcg-body h3 a:hover {
  color: var(--coral);
}

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

.tcg-tag {
  padding: 3px 9px;
  border-radius: 999px;
  background: #f1f2f4;
  color: #44474d;
  font-size: 0.7rem;
  font-weight: 750;
}

.tcg-tag.is-rc {
  background: #fde7e6;
  color: var(--coral-deep);
}

.tcg-tag.is-rare {
  background: #def6f2;
  color: #0f766e;
}

.tcg-buy {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  margin-top: auto;
  padding-top: 10px;
}

.tcg-price {
  font-size: 1.05rem;
  font-weight: 850;
}

.tcg-buy .product-button {
  min-height: 36px;
  padding: 0 13px;
  font-size: 0.74rem;
  white-space: nowrap;
}

.tcg-empty {
  max-width: 1280px;
  margin: clamp(24px, 4vw, 40px) auto 0;
  color: var(--muted);
  font-size: 1rem;
  font-weight: 600;
}

@media (max-width: 560px) {
  .tcg-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 12px;
  }

  .tcg-body {
    padding: 12px;
    gap: 7px;
  }

  .tcg-buy {
    flex-direction: column;
    align-items: stretch;
    gap: 8px;
  }

  .tcg-buy .product-button {
    width: 100%;
  }
}

.seo-topic-section {
  padding: clamp(42px, 7vw, 86px) clamp(22px, 8vw, 110px);
  background: #fff;
}

.seo-topic-inner {
  display: grid;
  grid-template-columns: minmax(0, 0.72fr) minmax(280px, 1fr);
  gap: clamp(28px, 6vw, 86px);
  width: min(1160px, 100%);
  margin: 0 auto;
}

.seo-topic-copy h2 {
  margin: 0 0 18px;
  font-size: clamp(2rem, 4.4vw, 4.2rem);
  line-height: 1;
}

.seo-topic-copy p {
  margin: 0;
  color: var(--muted);
  font-size: clamp(1rem, 1.35vw, 1.14rem);
  line-height: 1.7;
}

.topic-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 14px;
}

.topic-card {
  display: grid;
  gap: 8px;
  min-height: 150px;
  align-content: start;
  padding: clamp(18px, 2.6vw, 28px);
  border: 1px solid rgba(8, 9, 9, 0.12);
  border-radius: 8px;
  background: #f6f6f4;
}

.topic-card h3 {
  margin: 0;
  font-size: 1rem;
}

.topic-card p {
  margin: 0;
  color: var(--muted);
  line-height: 1.55;
}

.support-hero {
  padding: clamp(34px, 4vw, 56px) clamp(22px, 6vw, 72px);
  border-top: var(--section-gap) solid #fff;
  background: #f6f6f4;
}

.support-hero h1 {
  max-width: 920px;
  margin: 0 0 10px;
  color: var(--ink);
  font-size: clamp(2.2rem, 4vw, 3.4rem);
  line-height: 1;
  letter-spacing: -0.01em;
}

.support-hero > p:last-child {
  max-width: 620px;
  margin: 0;
  color: var(--muted);
  font-size: clamp(1rem, 1.5vw, 1.22rem);
  line-height: 1.55;
}

.support-shell {
  width: min(960px, calc(100% - 40px));
  margin: 0 auto;
  padding: clamp(34px, 6vw, 72px) 0;
}

.utility-hero {
  display: grid;
  align-items: center;
  justify-items: center;
  text-align: center;
  padding: clamp(32px, 4.5vw, 52px) clamp(24px, 8vw, 110px) clamp(22px, 3vw, 32px);
  border-top: var(--section-gap) solid #fff;
  background: #f6f6f4;
}
.utility-hero > div { max-width: 720px; }

.utility-hero h1 {
  max-width: 920px;
  margin: 0 0 8px;
  color: var(--ink);
  font-size: clamp(1.9rem, 3.4vw, 2.9rem);
  line-height: 1.05;
}

.utility-hero p:not(.eyebrow) {
  max-width: 620px;
  margin: 0;
  color: var(--muted);
  font-size: clamp(0.98rem, 1.2vw, 1.08rem);
  line-height: 1.55;
}

.utility-shell {
  padding: clamp(28px, 4vw, 48px) clamp(22px, 8vw, 110px) clamp(42px, 7vw, 82px);
  background: #fff;
}

.search-panel,
.empty-panel {
  width: min(760px, 100%);
  margin: 0 auto;
}

.search-panel {
  display: flex;
  border: 1px solid rgba(8, 9, 9, 0.18);
  background: #fff;
}

.search-panel input {
  flex: 1 1 auto;
  min-width: 0;
  min-height: 56px;
  padding: 0 18px;
  border: 0;
  color: var(--ink);
  font: inherit;
  font-size: 1rem;
}

.search-panel input:focus {
  outline: none;
  background: #f6f6f4;
  box-shadow: inset 0 0 0 2px var(--ink);
}

.search-panel button {
  flex: 0 0 auto;
  min-height: 56px;
  padding: 0 clamp(22px, 4vw, 42px);
  border: 0;
  background: var(--ink);
  color: #fff;
  font: inherit;
  font-weight: 820;
  text-transform: uppercase;
  cursor: pointer;
}

.utility-link-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 12px;
  width: min(900px, 100%);
  margin: clamp(24px, 4vw, 40px) auto 0;
}
/* The `display: grid` above beats the `hidden` attribute's default, so search.js
   couldn't hide the category cards when showing results. Make hidden win. */
.utility-link-grid[hidden] { display: none; }

.utility-link {
  display: grid;
  gap: 6px;
  min-height: 112px;
  align-content: center;
  padding: 18px;
  border: 1px solid rgba(8, 9, 9, 0.12);
  border-radius: 8px;
  background: #f6f6f4;
  transition: border-color 0.15s ease, transform 0.15s ease;
}

.utility-link:hover {
  border-color: rgba(250, 93, 85, 0.7);
  transform: translateY(-2px);
}

.utility-link strong {
  font-size: 1rem;
}

.utility-link span {
  color: var(--muted);
  font-size: 0.88rem;
  line-height: 1.4;
}

.empty-panel {
  display: grid;
  justify-items: center;
  gap: 16px;
  padding: clamp(34px, 6vw, 56px);
  border: 1px solid rgba(8, 9, 9, 0.12);
  border-radius: 8px;
  text-align: center;
  background: #f6f6f4;
}

.empty-panel h2 {
  margin: 0;
  font-size: clamp(2rem, 4vw, 3.5rem);
  line-height: 1;
}

.empty-panel p {
  max-width: 34rem;
  margin: 0;
  color: var(--muted);
  line-height: 1.6;
}

.empty-panel.is-cart {
  gap: 14px;
  padding: clamp(44px, 7vw, 72px) clamp(28px, 6vw, 56px);
  background: #fff;
  border-radius: 16px;
}

.cart-empty-icon {
  display: grid;
  place-items: center;
  width: 72px;
  height: 72px;
  margin-bottom: 4px;
  border-radius: 999px;
  color: var(--coral-deep);
  background: rgba(250, 93, 85, 0.1);
}

.empty-panel.is-cart h2 {
  font-size: clamp(1.75rem, 3.4vw, 2.6rem);
}

.empty-actions {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 12px;
  margin-top: 6px;
}

.secondary-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 50px;
  padding: 0 22px;
  border: 1px solid rgba(8, 9, 9, 0.22);
  border-radius: 4px;
  color: var(--ink);
  font-weight: 820;
  text-transform: uppercase;
}

.account-shell {
  min-height: clamp(500px, 72vh, 680px);
  display: grid;
  place-items: center;
}

.account-card {
  display: grid;
  gap: 16px;
  width: min(560px, 100%);
  margin: 0 auto;
  padding: 0;
  border: 0;
  border-radius: 0;
  background: transparent;
}

.account-card h1 {
  margin: 0 0 8px;
  color: var(--ink);
  font-size: clamp(2rem, 3.8vw, 2.55rem);
  line-height: 1.05;
  letter-spacing: 0.03em;
  text-align: center;
  text-transform: uppercase;
}

.account-input {
  display: flex;
  align-items: center;
  min-height: 58px;
  border: 1px solid rgba(8, 9, 9, 0.2);
  background: #fff;
}

.account-input {
  overflow: hidden;
}

.account-input-icon {
  display: grid;
  place-items: center;
  flex: 0 0 64px;
  height: 58px;
  border-right: 1px solid rgba(8, 9, 9, 0.12);
  color: var(--ink);
}

.account-input input {
  flex: 1 1 auto;
  min-width: 0;
  height: 58px;
  padding: 0 22px;
  border: 0;
  color: var(--ink);
  background: transparent;
  font: inherit;
  font-size: 1rem;
}

.account-input input::placeholder {
  color: #6b6e76;
}

.account-input:focus-within {
  outline: none;
  border-color: rgba(8, 9, 9, 0.42);
  box-shadow: 0 0 0 3px rgba(8, 9, 9, 0.08);
}

.account-actions {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
  margin-top: 24px;
}

.account-submit,
.account-create {
  /* Center content for both: <button> centers by default, but the <a>
     styled with the same class would otherwise left-align its text. */
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  text-decoration: none;
  padding: 0 18px;
  min-height: 58px;
  border: 1px solid var(--ink);
  border-radius: 6px;
  font: inherit;
  font-weight: 820;
  letter-spacing: 0.02em;
  text-transform: uppercase;
  cursor: pointer;
  transition: background 0.15s ease, color 0.15s ease, transform 0.15s ease;
}

.account-submit {
  background: var(--ink);
  color: #fff;
}

.account-create {
  background: #fff;
  color: var(--ink);
}

.account-submit:hover {
  background: #24201f;
  border-color: #24201f;
  color: #fff;
  transform: translateY(-1px);
}

.account-create:hover {
  background: var(--ink);
  border-color: var(--ink);
  color: #fff;
  transform: translateY(-1px);
}

.account-submit:disabled,
.account-create:disabled {
  cursor: wait;
  opacity: 0.72;
  transform: none;
}

/* ---- Account: personalize (display name + password) ---- */
.account-details {
  display: grid;
  gap: 18px;
  padding: 22px;
  border: 1px solid rgba(8, 9, 9, 0.14);
  border-radius: 10px;
  background: #fff;
}
.account-subhead {
  margin: 0;
  font-size: 0.82rem;
  font-weight: 820;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--ink);
}
.account-field { display: grid; gap: 6px; }
.account-field > label {
  font-size: 0.9rem;
  font-weight: 700;
  color: var(--ink);
}
.account-field-row { display: flex; gap: 10px; align-items: stretch; }
.account-field-row input {
  flex: 1 1 auto;
  min-width: 0;
  height: 46px;
  padding: 0 14px;
  border: 1px solid rgba(8, 9, 9, 0.2);
  border-radius: 6px;
  font: inherit;
  color: var(--ink);
  background: #fff;
}
.account-field-row input:focus-visible {
  outline: 2px solid var(--ink);
  outline-offset: 1px;
}
.account-mini-btn {
  flex: 0 0 auto;
  padding: 0 18px;
  height: 46px;
  border: 1px solid var(--ink);
  border-radius: 6px;
  background: var(--ink);
  color: #fff;
  font: inherit;
  font-weight: 800;
  letter-spacing: 0.02em;
  text-transform: uppercase;
  cursor: pointer;
  transition: background 0.15s ease, transform 0.15s ease;
}
.account-mini-btn:hover { background: #24201f; transform: translateY(-1px); }
.account-mini-btn:disabled { cursor: wait; opacity: 0.7; transform: none; }
.account-field-hint { margin: 0; font-size: 0.8rem; color: #6b6b6b; }
.account-details-status { margin: 0; font-size: 0.88rem; min-height: 1.2em; }
.account-details-status.is-success { color: #15803d; }
.account-details-status.is-error { color: #b3261e; }

/* ---- Signed-in account dashboard (sidebar + content layout) ---- */
/* The login form stays narrow (560px); the signed-in dashboard needs room for
   its sidebar + content, so widen just that card. */
.account-card[data-account-loggedin] { width: min(900px, 100%); }
.account-dash-title {
  margin: 0 0 24px;
  font-size: clamp(1.7rem, 3vw, 2.1rem);
  letter-spacing: 0.02em;
  text-transform: uppercase;
}
.account-dash {
  display: grid;
  grid-template-columns: 244px 1fr;
  gap: 34px;
  align-items: start;
  text-align: left;
}
.account-sidebar {
  display: flex;
  flex-direction: column;
  gap: 4px;
  position: sticky;
  top: 24px;
}
.account-user {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 16px;
  margin-bottom: 10px;
  border: 1px solid rgba(8, 9, 9, 0.14);
  border-radius: 10px;
}
.account-avatar {
  flex: 0 0 auto;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  background: var(--ink);
  color: #fff;
}
.account-user-meta { display: grid; gap: 2px; min-width: 0; }
.account-user-label {
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: #6b6b6b;
}
.account-user-meta b {
  font-size: 0.9rem;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.account-nav { display: flex; flex-direction: column; gap: 2px; }
.account-nav-link {
  display: block;
  width: 100%;
  text-align: left;
  text-decoration: none;
  padding: 12px 14px;
  border: 0;
  border-radius: 8px;
  background: transparent;
  color: var(--ink);
  font: inherit;
  font-weight: 700;
  font-size: 0.95rem;
  cursor: pointer;
  transition: background 0.15s ease, color 0.15s ease;
}
.account-nav-link:hover { background: #f2f1ef; }
.account-nav-link.is-active { background: var(--ink); color: #fff; }
.account-create.account-signout {
  width: 100%;
  min-height: 48px;
  margin-top: 14px;
}
.account-content { min-width: 0; }
.account-section { display: block; }
.account-section[hidden] { display: none; }

@media (max-width: 760px) {
  .account-dash { grid-template-columns: 1fr; gap: 22px; }
  .account-sidebar { position: static; }
  .account-nav { flex-direction: row; flex-wrap: wrap; }
  .account-nav-link { width: auto; }
  .account-create.account-signout { max-width: 220px; }
}

/* On phones the Account settings fields (input + Save/Update button side by
   side) are too wide for the narrow column — the button was pushed off the
   right edge. Stack them: full-width input with the button on its own line
   below. To undo, delete this block. */
@media (max-width: 560px) {
  .account-field-row { flex-direction: column; align-items: stretch; }
  .account-field-row .account-mini-btn { width: 100%; }
}

.account-divider {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  gap: 10px;
  width: min(200px, 100%);
  margin: 22px auto 0;
  color: var(--ink);
  font-size: 0.95rem;
}

.account-divider span {
  height: 1px;
  background: rgba(8, 9, 9, 0.28);
}

.account-divider em {
  font-style: normal;
}

.account-socials {
  display: flex;
  justify-content: center;
  gap: 16px;
}

.account-social {
  display: grid;
  place-items: center;
  width: 50px;
  height: 50px;
  border: 1px solid rgba(8, 9, 9, 0.1);
  border-radius: 50%;
  background: #fff;
  color: var(--ink);
  font: inherit;
  font-size: 1.25rem;
  font-weight: 900;
  cursor: pointer;
  transition: transform 0.15s ease, border-color 0.15s ease;
}

.account-social:hover {
  border-color: rgba(8, 9, 9, 0.35);
  transform: translateY(-1px);
}

.account-social-google {
  color: var(--coral);
}

.account-social-facebook {
  background: #1877f2;
  color: #fff;
}

.account-terms {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  margin-top: 14px;
  padding: 12px 14px;
  border: 1px solid rgba(8, 9, 9, 0.14);
  border-radius: 8px;
  background: #fafafa;
  color: var(--ink);
  font-size: 0.85rem;
  line-height: 1.45;
  cursor: pointer;
}

.account-terms input {
  flex: 0 0 auto;
  width: 18px;
  height: 18px;
  margin-top: 0.05em;
  accent-color: var(--ink);
  cursor: pointer;
}

.account-terms a {
  color: var(--ink);
  text-decoration: underline;
  text-underline-offset: 2px;
}

.account-status {
  min-height: 1.35em;
  margin: 0;
  color: var(--muted);
  font-size: 0.9rem;
  line-height: 1.45;
}

.account-status.is-success {
  color: #0d7a3f;
}

.account-status.is-error {
  color: #b3261e;
}

.cart-summary {
  width: min(420px, 100%);
  margin-top: 12px;
  padding-top: 16px;
  border-top: 1px solid rgba(8, 9, 9, 0.14);
}

.cart-summary div {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  color: var(--ink);
  font-weight: 760;
}

.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

/* Utility: toggled by JS (account/wishlist panels, etc.). Must win over
   component display rules like .account-card { display: grid }. */
.hidden {
  display: none !important;
}

/* Maintenance banner — injected at the top of <body> by customer.js when
   store_settings.maintenance is 'on'. */
.maintenance-banner {
  position: relative;
  z-index: 40;
  padding: 11px 18px;
  background: #ffb020;
  color: #1a1400;
  text-align: center;
  font-size: 0.92rem;
  font-weight: 650;
  line-height: 1.4;
}

/* Product-page trust signals (product.js / card.js) */
.pdp-trust {
  list-style: none;
  margin: 16px 0 0;
  padding: 16px 0 0;
  border-top: 1px solid rgba(0, 0, 0, 0.08);
  display: grid;
  gap: 9px;
}
.pdp-trust li {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 0.9rem;
  color: #374151;
}
.pdp-trust-ic { font-size: 1rem; line-height: 1; width: 20px; text-align: center; flex: none; }

/* Storefront search results (search.js) */
.search-status { margin: 8px 0 20px; color: #6b7280; font-size: 0.95rem; }
.search-results { margin-bottom: 32px; }
.search-results[hidden] { display: none; }

/* Product-page rails — "You may also like" + "Recently viewed" (related.js) */
.pdp-rails { max-width: 1200px; margin: 8px auto 0; padding: 0 clamp(16px, 5vw, 48px); }
.pdp-rail { margin: 40px 0; }
.rail-title { font-size: 1.15rem; font-weight: 700; letter-spacing: -0.01em; margin: 0 0 16px; }
.rail-track {
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: minmax(150px, 1fr);
  gap: 16px;
  overflow-x: auto;
  scroll-snap-type: x proximity;
  padding-bottom: 6px;
  -webkit-overflow-scrolling: touch;
}
@media (min-width: 720px) {
  /* On wider screens show a tidy row that wraps instead of scrolling. */
  .rail-track { grid-auto-flow: row; grid-template-columns: repeat(auto-fill, minmax(160px, 1fr)); grid-auto-columns: auto; overflow: visible; }
}
.rail-card { display: flex; flex-direction: column; gap: 8px; text-decoration: none; color: inherit; scroll-snap-align: start; }
.rail-media {
  display: block; aspect-ratio: 1 / 1; border-radius: 12px; overflow: hidden;
  background: #f4f4f5; border: 1px solid rgba(0,0,0,0.06);
}
.rail-media img { width: 100%; height: 100%; object-fit: cover; transition: transform 0.35s ease; }
.rail-card:hover .rail-media img { transform: scale(1.04); }
.rail-name { font-size: 0.9rem; font-weight: 600; line-height: 1.3; overflow: hidden; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; }
.rail-price { font-size: 0.9rem; font-weight: 700; color: #111; }

/* Announcement bar — marketing/notice banner, dismissible, injected by
   customer.js when store_settings.announcement_on is 'on'. */
.announcement-banner {
  position: relative;
  z-index: 40;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 14px;
  padding: 10px 44px;
  background: #111;
  color: #fff;
  text-align: center;
  font-size: 0.9rem;
  font-weight: 600;
  line-height: 1.4;
}
.announcement-close {
  position: absolute;
  right: 12px;
  top: 50%;
  transform: translateY(-50%);
  background: transparent;
  border: 0;
  color: inherit;
  font-size: 1.35rem;
  line-height: 1;
  cursor: pointer;
  opacity: 0.7;
  padding: 2px 6px;
}
.announcement-close:hover { opacity: 1; }

.support-item {
  display: grid;
  grid-template-columns: minmax(180px, 260px) 1fr;
  gap: clamp(18px, 4vw, 52px);
  padding: clamp(22px, 3.6vw, 34px) 0;
  border-top: 1px solid rgba(8, 9, 9, 0.12);
}

.support-item:last-child {
  border-bottom: 1px solid rgba(8, 9, 9, 0.12);
}

.support-item h2 {
  grid-column: 1;
  margin: 0;
  font-size: clamp(1.25rem, 2vw, 1.7rem);
  line-height: 1.08;
}

.support-item p {
  grid-column: 2;
  margin: 0;
  color: var(--muted);
  font-size: 1rem;
  line-height: 1.65;
}

.support-item p + p {
  margin-top: 14px;
}

/* Centered legal hero (LEGO-style) — scoped to privacy.html via modifier */
.support-hero--center {
  text-align: center;
}

.support-hero--center h1,
.support-hero--center > p:last-child {
  margin-left: auto;
  margin-right: auto;
}

/* Legal accordion (LEGO-style dropdowns) — native <details>/<summary> */
.legal-accordion .legal-item,
.cms-page-shell .legal-item {
  border-top: 1px solid rgba(8, 9, 9, 0.12);
}

.legal-accordion .legal-item:last-child,
.cms-page-shell .legal-item:last-child {
  border-bottom: 1px solid rgba(8, 9, 9, 0.12);
}

/* CMS pages (page.html?slug=…) reuse the utility-shell + about-prose look;
   this keeps a comfortable reading width for pure-prose pages. */
.cms-page-shell .about-prose { max-width: 820px; }

/* ---- CMS design blocks (inserted from the admin editor's "Block" menu) ----
   On-brand components the owner can drop into a page: buttons, callouts,
   columns, feature rows, cards, dividers. Styled to match the storefront. */
.cms-btn {
  display: inline-flex; align-items: center; justify-content: center;
  min-height: 50px; padding: 0 30px; margin: 6px 0;
  border-radius: 6px; background: var(--cms-accent, var(--coral)); color: #fff;
  font-weight: 600; font-size: 0.9rem; text-transform: uppercase; letter-spacing: 0.08em;
  text-decoration: none; box-shadow: 0 2px 12px rgba(8, 9, 9, 0.18);
  transition: transform 0.2s ease, filter 0.2s ease;
}
.cms-btn:hover { transform: translateY(-1px); filter: brightness(0.92); }

/* Themed content links pick up the page's accent colour (if set). */
.cms-page-shell .about-prose a:not(.cms-btn) { color: var(--cms-accent, #1d4ed8); }

.cms-callout {
  margin: 20px 0; padding: 18px 22px; border-radius: 12px;
  background: rgba(113, 221, 211, 0.12); border-left: 4px solid var(--aqua);
}
.cms-callout > :first-child { margin-top: 0; }
.cms-callout > :last-child { margin-bottom: 0; }

.cms-lead { font-size: 1.2rem; line-height: 1.5; color: var(--ink); margin: 0 0 16px; }

.cms-cols { display: grid; grid-template-columns: 1fr 1fr; gap: 28px; margin: 20px 0; }

.cms-feature { display: grid; grid-template-columns: 200px 1fr; gap: 22px; align-items: center; margin: 24px 0; }
.cms-feature-img { width: 100%; height: auto; border-radius: 12px; }

.cms-card {
  padding: 22px 24px; border: 1px solid var(--line); border-radius: 14px;
  box-shadow: 0 1px 3px rgba(8, 9, 9, 0.05); margin: 18px 0;
}
.cms-card > :first-child { margin-top: 0; }
.cms-card > :last-child { margin-bottom: 0; }

.cms-divider { height: 1px; background: var(--line); margin: 28px 0; }

@media (max-width: 640px) {
  .cms-cols, .cms-feature { grid-template-columns: 1fr; }
}

/* Full-width promo banner */
.cms-banner {
  margin: 28px 0; padding: clamp(28px, 5vw, 52px) clamp(24px, 5vw, 44px);
  border-radius: 18px; text-align: center; color: #fff;
  background: linear-gradient(135deg, var(--coral), var(--coral-deep));
  box-shadow: 0 10px 30px rgba(239, 63, 56, 0.25);
}
.cms-banner h2 { color: #fff; margin: 0 0 10px; font-size: clamp(1.5rem, 3vw, 2.1rem); }
.cms-banner p { color: rgba(255, 255, 255, 0.92); margin: 0 auto 18px; max-width: 560px; }
.cms-banner .cms-btn { background: #fff; color: var(--ink); box-shadow: none; }
.cms-banner .cms-btn:hover { background: #f2f2f2; }

/* Light button variant (for use on dark/colored backgrounds) */
.cms-btn.cms-btn-light { background: #fff; color: var(--ink); box-shadow: 0 2px 12px rgba(8, 9, 9, 0.18); }
.cms-btn.cms-btn-light:hover { background: #f2f2f2; }

/* Quote / testimonial */
.cms-quote {
  margin: 24px 0; padding: 8px 0 8px 24px; border-left: 4px solid var(--coral);
  font-size: 1.25rem; line-height: 1.5; color: var(--ink); font-style: italic;
}
.cms-quote p { margin: 0 0 8px; }
.cms-quote .cms-quote-by { font-size: 0.95rem; font-style: normal; color: var(--muted); }

/* Vertical spacer */
.cms-spacer { height: 40px; }

/* ---- Blog index (blog.html) + post cover ---- */
.blog-list { display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: 28px; }
.blog-empty { grid-column: 1 / -1; }
.blog-card {
  display: flex; flex-direction: column; text-decoration: none; color: inherit;
  border: 1px solid var(--line); border-radius: 16px; overflow: hidden; background: #fff;
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}
.blog-card:hover { transform: translateY(-3px); box-shadow: 0 14px 34px rgba(8, 9, 9, 0.1); }
.blog-card-media { display: block; aspect-ratio: 16 / 10; background: #f4f5f7; }
.blog-card-media img { width: 100%; height: 100%; object-fit: cover; }
.blog-card-body { padding: 20px 22px 24px; display: flex; flex-direction: column; gap: 8px; }
.blog-card-date { font-size: 0.82rem; font-weight: 700; letter-spacing: 0.03em; text-transform: uppercase; color: var(--coral); }
.blog-card-body h2 { margin: 0; font-size: 1.25rem; line-height: 1.2; }
.blog-card-body p { margin: 0; color: var(--muted); line-height: 1.55; }
.blog-card-more { margin-top: 4px; font-weight: 600; color: var(--ink); }
.post-cover { width: 100%; height: auto; border-radius: 14px; margin: 0 0 24px; display: block; }

/* Forgot-password link on the account login form */
.account-forgot { margin: 12px 0 0; font-size: 0.92rem; }
.account-forgot a { color: var(--muted); text-decoration: underline; }
.account-forgot a:hover { color: var(--ink); }

/* ---- Sold-out cards: keep visible, dim + badge ---- */
.product-card .product-image, .tcg-card .tcg-media { position: relative; }
.product-card.is-soldout .product-image img,
.tcg-card.is-soldout .tcg-media img { opacity: 0.5; filter: grayscale(0.25); }
/* Sold-out badge: diagonal grey corner ribbon (was a black top-left pill),
   matching the product-page .pdp-ribbon look. The image container clips it —
   .product-image already has overflow:hidden; .tcg-media gets it when sold out. */
.product-soldout {
  position: absolute; top: 15px; right: -46px; z-index: 2;
  width: 150px; padding: 5px 0;
  transform: rotate(45deg);
  background: #dcdfe6; color: #4a4f5c;
  text-align: center;
  font-size: 0.6rem; font-weight: 800; text-transform: uppercase; letter-spacing: 0.12em;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.14); pointer-events: none;
}
.tcg-card.is-soldout .tcg-media { overflow: hidden; }

/* Sold-out cards: the diagonal "Sold out" ribbon owns the top-right corner.
   Move "Save" to the top-left so it stays clear of the ribbon. The grade badge
   already lives in the bottom-right for every card, so nothing overlaps. */
.tcg-card.is-soldout .wishlist-heart { right: auto; left: 10px; }
.product-card.is-soldout .wishlist-heart { right: auto; left: 12px; }

.legal-item > summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  padding: clamp(18px, 3vw, 28px) 4px;
  cursor: pointer;
  list-style: none;
}

/* Hide the default disclosure triangle across browsers */
.legal-item > summary::-webkit-details-marker {
  display: none;
}

.legal-item > summary h2 {
  margin: 0;
  font-size: clamp(1.25rem, 2vw, 1.7rem);
  line-height: 1.08;
}

/* Chevron on the right, rotates when open */
.legal-item > summary::after {
  content: "";
  flex: 0 0 auto;
  width: 14px;
  height: 14px;
  border-right: 2px solid var(--ink);
  border-bottom: 2px solid var(--ink);
  transform: rotate(45deg);
  transform-origin: center;
  transition: transform 0.2s ease;
  margin-right: 6px;
}

.legal-item[open] > summary::after {
  transform: rotate(-135deg);
}

.legal-item > summary:hover h2 {
  opacity: 0.7;
}

.legal-item-body {
  padding: 0 4px clamp(20px, 3vw, 30px);
}

.legal-item-body p {
  margin: 0;
  max-width: 760px;
  color: var(--muted);
  font-size: 1rem;
  line-height: 1.65;
}

.legal-item-body p + p {
  margin-top: 14px;
}

/* Legal breadcrumb (LEGO-style) — connects each legal page up to Home/Legal */
.legal-breadcrumb {
  padding: clamp(16px, 2.4vw, 24px) clamp(22px, 6vw, 72px) 0;
  background: #fff;
}

.legal-breadcrumb ol {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px 8px;
  margin: 0;
  padding: 0;
  list-style: none;
  font-size: 0.82rem;
  letter-spacing: 0.01em;
}

.legal-breadcrumb li {
  display: flex;
  align-items: center;
}

.legal-breadcrumb a {
  color: var(--muted);
  text-decoration: none;
}

.legal-breadcrumb a:hover {
  color: var(--ink);
  text-decoration: underline;
}

.legal-breadcrumb .crumb-sep {
  color: rgba(8, 9, 9, 0.35);
}

.legal-breadcrumb [aria-current="page"] {
  color: var(--ink);
  font-weight: 600;
}

.contact-panel {
  min-height: 38vh;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 30px;
  padding: clamp(50px, 7vw, 90px) clamp(22px, 8vw, 110px);
  background: var(--paper);
}

.shop-button-dark {
  background: var(--ink);
  box-shadow: 0 14px 32px rgba(8, 9, 9, 0.18);
}

/* ===== Footer ===== */
.site-footer {
  border-top: var(--section-gap) solid #fff;
  background: #000;
  color: #fff;
  padding: clamp(24px, 3.8vw, 42px) clamp(20px, 6vw, 90px) clamp(22px, 3vw, 34px);
}

.footer-newsletter {
  display: flex;
  flex-direction: column;
  max-width: 560px;
  margin: 0 auto clamp(22px, 3.4vw, 34px);
  text-align: center;
}

.footer-newsletter h2 {
  order: 1;
}

.footer-newsletter .social-icons {
  order: 2;
}

.footer-newsletter .newsletter-form {
  order: 3;
}

.footer-newsletter .newsletter-fine {
  order: 4;
}

.footer-newsletter h2 {
  margin: 0 0 10px;
  font-size: clamp(1.3rem, 2.45vw, 2rem);
  font-weight: 800;
  letter-spacing: 0.01em;
  text-align: center;
}

.newsletter-form {
  width: 100%;
}

.newsletter-hidden {
  display: none;
}

.newsletter-form-row {
  display: flex;
  width: 100%;
  border: 1px solid rgba(255, 255, 255, 0.5);
}

.newsletter-form-row input {
  flex: 1 1 auto;
  min-width: 0;
  padding: 10px 13px;
  border: 0;
  background: rgba(255, 255, 255, 0.08);
  color: #fff;
  font: inherit;
  font-size: 0.92rem;
}

.newsletter-form-row input::placeholder {
  color: rgba(255, 255, 255, 0.6);
}

.newsletter-form-row input:focus {
  outline: none;
  background: rgba(255, 255, 255, 0.14);
  box-shadow: inset 0 0 0 2px rgba(255, 255, 255, 0.75);
}

.newsletter-form-row button {
  flex: 0 0 auto;
  padding: 0 clamp(20px, 2.6vw, 34px);
  border: 0;
  background: #fff;
  color: #000;
  font: inherit;
  font-weight: 800;
  font-size: 0.94rem;
  cursor: pointer;
}

.newsletter-form-row button:hover {
  background: #dcdcdc;
  color: #000;
}

.newsletter-form-row button:disabled {
  cursor: wait;
  opacity: 0.72;
}

.newsletter-status {
  min-height: 1.2em;
  margin: 8px 0 0;
  color: rgba(255, 255, 255, 0.82);
  font-size: 0.78rem;
  line-height: 1.35;
  text-align: center;
}

.newsletter-status.is-success {
  color: #8dffb1;
}

.newsletter-status.is-error {
  color: #ff9b96;
}

.newsletter-fine {
  margin: 10px 0 0;
  color: rgba(255, 255, 255, 0.85);
  font-size: 0.78rem;
  line-height: 1.42;
  text-align: center;
}

.newsletter-fine a {
  text-decoration: underline;
  text-underline-offset: 2px;
}

.footer-columns {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: clamp(28px, 4vw, 48px);
  max-width: 520px;
  margin: 0 auto;
  justify-items: center;
  text-align: center;
}

.footer-col {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 14px;
}

.footer-col h3 {
  margin: 0 0 4px;
  font-size: 1rem;
  font-weight: 700;
}

.footer-col a {
  color: rgba(255, 255, 255, 0.85);
  font-size: 0.96rem;
  transition: color 0.15s ease;
}

.footer-col a:hover {
  color: var(--coral);
}

.footer-shipto-label,
.footer-pay-label {
  margin: 10px 0 0;
  font-size: 0.96rem;
  font-weight: 700;
}

.footer-shipto {
  padding: 11px 12px;
  border: 1px solid rgba(255, 255, 255, 0.45);
  border-radius: 4px;
  background: #fff;
  color: #111;
  font: inherit;
  font-size: 0.95rem;
}

.footer-pay {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.footer-pay span {
  display: inline-flex;
  align-items: center;
  padding: 5px 8px;
  border-radius: 4px;
  background: #fff;
  color: #1a1f71;
  font-size: 0.62rem;
  font-weight: 800;
  letter-spacing: 0.02em;
}

.social-icons {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 9px;
  margin: 2px 0 13px;
}

.social-icon {
  display: grid;
  place-items: center;
  width: 30px;
  height: 30px;
  border-radius: 50%;
  color: #fff;
  background: var(--brand, #333);
  transition: transform 0.15s ease, filter 0.15s ease;
}

.social-icon.social-ig {
  background: radial-gradient(circle at 30% 107%, #fdf497 0%, #fd5949 45%, #d6249f 60%, #285aeb 90%);
}

.social-icon:hover {
  transform: translateY(-2px);
  filter: brightness(1.1);
}

.footer-bottom {
  max-width: 1280px;
  margin: clamp(24px, 4vw, 38px) auto 0;
  padding-top: 14px;
  border-top: 1px solid rgba(255, 255, 255, 0.18);
  text-align: center;
  color: rgba(255, 255, 255, 0.75);
  font-size: 0.72rem;
  line-height: 1.45;
}

.footer-legal {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 6px clamp(12px, 2vw, 20px);
  margin: 0 0 10px;
}

.footer-legal a {
  color: rgba(255, 255, 255, 0.86);
  font-size: 0.74rem;
  transition: color 0.15s ease;
}

.footer-legal a:hover {
  color: var(--coral);
}

.footer-bottom p {
  margin: 1px 0;
}

@media (max-width: 900px) {
  .site-nav {
    display: none;
  }

  .site-header-inner {
    justify-content: space-between;
  }

  .header-search-inline.is-open {
    --search-open-width: 260px;
  }

  .site-nav {
    display: flex;
  }

  .mega-inner {
    grid-template-columns: 1fr;
    gap: 24px;
  }

  .mega-cats {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    padding: 0 0 20px;
    border-right: 0;
    border-bottom: 1px solid rgba(0, 0, 0, 0.1);
  }

  .mega-cards {
    grid-template-columns: repeat(2, 1fr);
  }

  .footer-columns {
    grid-template-columns: repeat(2, 1fr);
    row-gap: 36px;
  }

  .utility-link-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .seo-topic-inner {
    grid-template-columns: 1fr;
  }

  .collection-hero {
    grid-template-columns: 1fr;
    justify-items: center;
    gap: 24px;
    text-align: center;
  }

  .collection-hero-copy p:last-child {
    margin-inline: auto;
  }

  .collection-hero-media {
    width: 100%;
    min-height: clamp(210px, 28vh, 300px);
  }

  .collection-hero-media img {
    width: min(46vw, 300px);
    max-height: 300px;
  }

  .product-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .recent-header {
    place-items: center;
  }

  .collection-feature {
    align-items: flex-start;
    flex-direction: column;
  }

  .coming-soon-hero {
    grid-template-columns: 1fr;
    justify-items: center;
    text-align: center;
  }

  .slide {
    grid-template-columns: 1fr;
    align-content: center;
    justify-items: center;
    gap: clamp(18px, 3vh, 30px);
    padding: clamp(48px, 8vw, 68px) 24px clamp(54px, 8vw, 76px);
    text-align: center;
  }

  .slide::before {
    background:
      linear-gradient(90deg, rgba(0, 0, 0, 0.56), rgba(0, 0, 0, 0.16) 50%, rgba(0, 0, 0, 0.56)),
      linear-gradient(180deg, rgba(0, 0, 0, 0.58), rgba(0, 0, 0, 0.34) 48%, rgba(0, 0, 0, 0.84));
  }

  .slide-media {
    width: 100%;
    min-height: clamp(240px, 36vh, 360px);
  }

  .slide-media::before {
    top: 39%;
    left: 50%;
    width: min(56vw, 360px);
    height: min(56vw, 360px);
    transform: translate(-50%, -50%);
  }

  .slide-media::after {
    left: 50%;
    bottom: 86px;
    width: min(48vw, 300px);
    transform: translateX(-50%);
  }

  .slide-product {
    top: 38%;
    left: 50%;
    width: min(42vw, 300px);
    max-height: clamp(260px, 42vh, 390px);
    transform: translate(-50%, -50%);
  }

  .slide-product-tile {
    width: min(56vw, 340px);
    max-height: clamp(240px, 36vh, 340px);
  }

  .slide-caption {
    width: min(100%, 600px);
    max-width: 600px;
    transform: translateY(clamp(72px, 13vh, 108px));
  }

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

  .display-showcase {
    grid-template-columns: 1fr;
    text-align: center;
  }

  .showcase-copy p {
    margin-inline: auto;
  }

  .contact-panel {
    align-items: flex-start;
    flex-direction: column;
  }

}

@media (max-width: 560px) {
  .site-header-inner {
    min-height: 48px;
    gap: 6px;
    padding: 8px 14px;
    /* Pop Mart-style row: search alone on the left (absolute), logo centered
       (absolute), and profile + cart + hamburger clustered on the right.
       Spacing is kept tight so the right cluster never runs into the centered
       logo on narrow phones (~360px). */
    justify-content: flex-end;
  }

  /* Logo pinned to the TRUE middle of the header bar (absolute, so it's dead
     centre regardless of the icon clusters on either side). To keep it from
     crowding the right, the action icons on both sides are trimmed a little
     (see .action-icon svg / hamburger below). */
  .brand {
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    margin: 0;
  }

  /* Trim the icons on both sides so the centred wordmark has breathing room.
     Tap targets stay ~42px via the .action-icon::after overlay below, so
     shrinking the glyphs doesn't hurt usability. */
  .action-icon svg { width: 19px; height: 19px; }

  .brand img {
    height: 15px;
  }

  /* Collapse the primary nav to a single ☰ that opens the Categories menu.
     Reuses the existing #shopToggle button + its JS — no markup change needed.
     order:3 puts the ☰ at the far right, after the profile + cart icons. */
  .site-nav {
    order: 3;
    display: flex;
    position: static;
    left: auto;
    transform: none;
    gap: 0;
  }

  /* The NEW dropdown folds away on phones; new drops are surfaced on the homepage. */
  .new-toggle {
    display: none;
  }

  /* CATEGORIES button → hamburger icon. font-size:0 hides the text but keeps
     "CATEGORIES" as the button's accessible name for screen readers. */
  .shop-toggle {
    min-width: 40px;
    min-height: 44px;
    justify-content: center;
    font-size: 0;
    letter-spacing: 0;
  }

  .shop-toggle::before {
    content: "\2630"; /* ☰ */
    font-size: 1.2rem;
    line-height: 1;
  }

  /* The categories menu drops below the sticky header (~76px tall). Its content
     (all categories + cards) can be taller than a phone screen, and because it's
     absolutely positioned it doesn't add to the page's own scroll — so the bottom
     was unreachable. Cap it to the space under the header and let it scroll inside.
     dvh tracks the real visible height as the mobile browser bar shows/hides. */
  .mega-menu {
    max-height: calc(100vh - 76px);
    max-height: calc(100dvh - 76px);
    overflow-y: auto;
    overscroll-behavior: contain; /* don't scroll the page behind at the ends */
    -webkit-overflow-scrolling: touch;
  }

  /* Profile + cart sit in the normal flex flow so they cluster on the right,
     just to the left of the hamburger (which is order:3). */
  .site-actions {
    position: static;
    order: 2;
    gap: 8px;
    transform: none;
    margin-right: 4px; /* small gap before the hamburger */
  }

  /* Shrink the brand-strip logo row on phones so the header stack (banner + nav +
     strip) doesn't push the hero down. The minicar logo's 56px minimum drives the
     row height, so cap all three smaller here and tighten the padding. */
  .brand-strip {
    padding: 3px 16px;
    gap: clamp(18px, 5vw, 40px);
  }
  .brand-strip img { height: 30px; }
  .brand-strip img[src*="mini-car-logo"] { height: 54px; }
  .brand-strip img[src*="minimint-logo"] { height: 25px; }

  /* Wishlist icon is hidden on mobile to keep the row clean. Match by SUBSTRING,
     because customer.js rewrites the link when signed in
     (account.html?next=wishlist → wishlist.html) — an exact match would miss the
     logged-in form and the icon would reappear. */
  .site-actions a[href*="wishlist"] {
    display: none;
  }

  /* Search icon pulled out to the far LEFT, independent of the right cluster
     (Pop Mart layout). Positioned against .site-header-inner (position:relative).
     Substring match covers both the raw search.html and Netlify's pretty /search. */
  .site-actions a[href*="search"] {
    position: absolute;
    left: 14px;
    top: 50%;
    transform: translateY(-50%);
  }

  /* Bigger touch targets without changing layout or the cart-badge position:
     a transparent overlay expands each icon's tappable area to ~42px. */
  .action-icon::after {
    content: "";
    position: absolute;
    inset: -10px;
  }

  /* In the 2-column product grid, price + button are too tight side-by-side;
     stack them so the "Add to bag" button gets a full-width, easy tap target. */
  .product-buy {
    flex-direction: column;
    align-items: stretch;
    gap: 10px;
  }

  .product-buy .product-button {
    width: 100%;
  }

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

  /* Footer link columns collapse into tap-to-open accordions on phones
     (Pop Mart style). JS toggles .is-open; the design is otherwise unchanged. */
  .footer-col h3 { cursor: pointer; }
  .footer-col h3::after {
    content: "+";
    display: inline-block;
    margin-left: 10px;
    font-weight: 400;
    color: rgba(255, 255, 255, 0.7);
  }
  .footer-col.is-open h3::after { content: "\2013"; }
  .footer-col a { display: none; }
  .footer-col.is-open a { display: block; }

  .utility-hero {
    padding: 30px 24px 22px;
    text-align: center;
  }

  .utility-hero h1 {
    max-width: 100%;
    margin-inline: auto;
    font-size: clamp(1.8rem, 8vw, 2.4rem);
    line-height: 1.05;
    text-wrap: balance;
  }

  .utility-hero p:not(.eyebrow) {
    max-width: 30ch;
    margin-inline: auto;
  }

  .utility-shell {
    padding: 34px 24px 52px;
  }

  .search-panel {
    flex-direction: column;
  }

  .search-panel input,
  .search-panel button {
    min-height: 50px;
    text-align: center;
  }

  .site-actions.is-searching {
    gap: 10px;
  }

  .site-actions.is-searching .action-icon:not(.search-trigger) {
    display: none;
  }

  .header-search-inline.is-open {
    --search-open-width: 230px;
  }

  .utility-link-grid {
    grid-template-columns: 1fr;
  }

  .seo-topic-section {
    width: 100%;
    max-width: 100vw;
    padding: 34px 24px 52px;
    overflow-x: hidden;
  }

  .seo-topic-inner,
  .seo-topic-copy,
  .topic-grid {
    width: min(100%, calc(100vw - 80px));
    max-width: calc(100vw - 80px);
    margin-inline: auto;
  }

  .topic-card {
    width: 100%;
    max-width: calc(100vw - 80px);
  }

  .seo-topic-copy {
    text-align: center;
  }

  .seo-topic-copy h2 {
    max-width: 11ch;
    margin-inline: auto;
    font-size: clamp(1.9rem, 8.8vw, 2.35rem);
    text-wrap: balance;
    overflow-wrap: break-word;
  }

  .seo-topic-copy p {
    max-width: 25ch;
    margin-inline: auto;
  }

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

  .topic-card {
    min-width: 0;
  }

  .topic-card p {
    overflow-wrap: break-word;
  }

  .coming-soon-copy {
    width: min(100%, calc(100vw - 56px));
    max-width: calc(100vw - 56px);
    margin-inline: auto;
    text-align: center;
  }

  .coming-soon-copy p:not(.eyebrow) {
    max-width: 23ch;
    margin-inline: auto;
  }

  .empty-actions {
    width: 100%;
  }

  .empty-panel {
    width: min(100%, calc(100vw - 48px));
    max-width: calc(100vw - 48px);
    padding: 30px 18px;
    overflow: hidden;
  }

  .empty-panel h2 {
    max-width: 12ch;
    font-size: clamp(1.85rem, 8.5vw, 2.35rem);
    text-wrap: balance;
  }

  .empty-panel p {
    max-width: 28ch;
  }

  .empty-actions .hero-button,
  .empty-actions .secondary-button {
    width: 100%;
    min-width: 0;
  }

  .account-card {
    width: min(100%, calc(100vw - 48px));
    max-width: calc(100vw - 48px);
    overflow: hidden;
  }

  .account-submit {
    width: 100%;
  }

  .cart-summary {
    max-width: 100%;
  }

  .cart-summary div {
    gap: 12px;
  }

  .mega-cats {
    grid-template-columns: 1fr;
  }

  .mega-category-cards {
    grid-template-columns: 1fr;
  }

  .collection-hero {
    min-height: 500px;
    padding: 36px 20px 44px;
  }

  .collection-hero-copy {
    width: min(100%, 18rem);
  }

  .collection-hero-copy h1 {
    font-size: clamp(2.75rem, 14vw, 3.7rem);
  }

  .collection-hero-copy p:last-child {
    max-width: 100%;
    margin-inline: auto;
    font-size: 0.94rem;
    overflow-wrap: break-word;
  }

  .collection-hero-media {
    min-height: 210px;
  }

  .collection-hero-media img {
    width: min(68vw, 260px);
    max-height: 260px;
  }

  /* Title on its own row, then a single clean control row: count on the
     left, Sort pill on the right. */
  .collection-toolbar {
    flex-direction: row;
    flex-wrap: wrap;
    align-items: center;
    row-gap: 14px;
    margin-bottom: clamp(18px, 4vw, 28px);
  }
  .collection-toolbar > div:first-child { flex: 1 1 100%; }
  .collection-toolbar .collection-count { margin-left: 0; font-weight: 700; }
  .collection-toolbar .collection-sort { margin-left: auto; }

  .collection-toolbar h1,
  .collection-toolbar h2 {
    max-width: 11ch;
    font-size: clamp(2rem, 9vw, 2.65rem);
    line-height: 1.04;
    text-wrap: balance;
  }

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

  .product-buy {
    align-items: stretch;
    flex-direction: column;
  }

  .product-button {
    width: 100%;
  }

  .collection-feature h2 {
    font-size: 1.9rem;
    line-height: 1.08;
    text-wrap: balance;
  }

  .coming-soon-hero {
    min-height: 440px;
    padding: 36px 24px 48px;
  }

  .coming-soon-copy h1 {
    max-width: 100%;
    margin-inline: auto;
    font-size: clamp(2.3rem, 10vw, 3rem);
    line-height: 0.98;
    text-wrap: balance;
  }

  .newsletter-form-row {
    flex-direction: column;
  }

  .newsletter-form-row input {
    min-height: 46px;
    text-align: center;
  }

  .newsletter-form-row button {
    min-height: 46px;
  }

  .support-item {
    grid-template-columns: 1fr;
    gap: 10px;
  }

  .support-item h2,
  .support-item p {
    grid-column: 1;
  }

  .support-shell {
    width: calc(100% - 64px);
  }

  .support-hero h1 {
    max-width: 8ch;
    font-size: clamp(2.4rem, 12vw, 3rem);
    line-height: 1;
    text-wrap: balance;
  }

  .support-hero > p:last-child {
    max-width: 28ch;
  }

  .newsletter-form button {
    padding: 0 22px;
  }

  .hero-slider,
  .slides {
    width: 100vw;
    max-width: 100vw;
  }

  .slides {
    height: clamp(500px, calc(70svh - var(--nav-h)), 580px);
    min-height: 500px;
  }

  .slide {
    gap: 18px;
    padding: 44px 20px 70px;
  }

  .slide-bg {
    inset: 0;
    width: 100%;
    height: 100%;
    filter: saturate(1.04) brightness(0.5);
  }

  .slide-caption h2 {
    max-width: 7.6ch;
    margin-inline: auto;
    font-size: clamp(2rem, 10vw, 2.65rem);
    line-height: 0.98;
    text-wrap: balance;
  }

  .slide-caption .slide-sub {
    max-width: min(30ch, calc(100vw - 48px));
    margin-bottom: 20px;
    font-size: 0.98rem;
    overflow-wrap: break-word;
  }

  .slide-media {
    min-height: 270px;
  }

  .slide-media::before {
    top: 36%;
    left: 50%;
    right: auto;
    width: min(70vw, 300px);
    height: min(70vw, 300px);
    opacity: 0.38;
    transform: translate(-50%, -50%);
  }

  .slide-media::after {
    left: 50%;
    right: auto;
    bottom: 130px;
    width: min(58vw, 240px);
    opacity: 0.72;
    transform: translateX(-50%);
  }

  .slide-product {
    top: 36%;
    left: 50%;
    right: auto;
    width: min(58vw, 230px);
    max-height: 300px;
    opacity: 0.5;
    transform: translate(-50%, -50%);
  }

  .slide-product-tile {
    width: min(68vw, 250px);
    max-height: 250px;
    opacity: 0.58;
  }

  .details h2,
  .contact-panel h2 {
    max-width: 20ch;
    font-size: 1.75rem;
    line-height: 1.12;
    text-wrap: balance;
  }

  .hero-button {
    min-width: 150px;
    min-height: 48px;
  }

  .spec-strip {
    display: none;
  }
}

@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }

  .web-card,
  .product-stage,
  .cap,
  .guitar-lift,
  .hero-ring,
  .hero-copy {
    transition: none;
  }
}

/* ===== Product detail (PDP) — Mattel Creations style ===== */
.pdp {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 0.95fr);
  gap: clamp(28px, 4.5vw, 84px);
  width: min(1200px, 100%);
  margin: 0 auto;
  padding: clamp(20px, 3.5vw, 52px) clamp(20px, 6vw, 76px) clamp(52px, 7vw, 104px);
}

.pdp-gallery {
  display: block;
}

.pdp-thumbs {
  display: flex;
  flex-direction: column;
  gap: 12px;
  order: -1;
}

.pdp-thumb {
  width: 74px;
  height: 74px;
  display: grid;
  place-items: center;
  padding: 8px;
  background: #f4f4f4;
  border: 1px solid transparent;
  border-radius: 4px;
  cursor: pointer;
  transition: border-color 0.15s ease;
}

.pdp-thumb.is-active {
  border-color: var(--ink);
}

.pdp-thumb:hover {
  border-color: rgba(8, 9, 9, 0.4);
}

.pdp-thumb img {
  max-width: 100%;
  max-height: 100%;
  object-fit: contain;
}

.pdp-stage {
  position: relative;
  aspect-ratio: 1 / 1;
  background: #f4f4f4;
  border-radius: 6px;
  overflow: hidden;
}

/* Absolutely fill the stage so the box has a DEFINITE height — otherwise the
   image's max-height:100% doesn't resolve against the aspect-ratio stage and a
   tall (portrait) card overflows and gets clipped. Padding lives here so the
   contained image keeps breathing room inside the frame. */
.pdp-main {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: clamp(28px, 5vw, 80px);
}

.pdp-main img {
  max-width: 100%;
  max-height: 100%;
  width: auto;
  height: auto;
  object-fit: contain;
}

/* Sold-out product detail: dim + desaturate the main image, matching the
   sold-out treatment on the category/grid cards. */
.pdp-stage.is-soldout .pdp-main img {
  opacity: 0.5;
  filter: grayscale(0.3);
}

.pdp-badge {
  position: absolute;
  z-index: 5; /* sit ABOVE the product image (.pdp-main paints after it in DOM) */
  bottom: 16px;
  right: 16px; /* bottom-right corner, matching the grade badge on the grid cards */
  padding: 7px 13px;
  background: var(--ink);
  color: #fff;
  font-size: 0.62rem;
  font-weight: 800;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  border-radius: 999px;
}

/* Diagonal "Sold out" ribbon across the top-right corner of the image.
   The stage is position:relative + overflow:hidden, so the band's ends clip
   to a clean corner banner. */
.pdp-ribbon {
  position: absolute;
  top: 24px;
  right: -58px;
  z-index: 4;
  width: 200px;
  padding: 7px 0;
  transform: rotate(45deg);
  background: #dcdfe6;
  color: #4a4f5c;
  text-align: center;
  font-size: 0.72rem;
  font-weight: 800;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.14);
  pointer-events: none;
}

.pdp-info {
  align-self: start;
  position: sticky;
  top: clamp(16px, 4vw, 40px);
  max-width: 32rem;
}

.pdp-breadcrumb {
  grid-column: 1 / -1; /* full-width row at the top, above the image */
  margin: 0 0 clamp(14px, 2.5vw, 20px);
  font-size: 0.8rem;
  font-weight: 600;
  color: var(--muted);
}

.pdp-breadcrumb a:hover {
  color: var(--coral);
}

.pdp-eyebrow {
  margin: 0 0 12px;
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--muted);
}

.pdp-title {
  margin: 0 0 18px;
  font-family: Montserrat, Inter, ui-sans-serif, system-ui, sans-serif;
  font-size: clamp(2rem, 3.4vw, 3rem);
  font-weight: 800;
  line-height: 1.05;
  letter-spacing: -0.01em;
  text-transform: uppercase;
  /* Let long names (e.g. graded trading cards) wrap instead of clipping off
     the edge; short names still sit on one line. */
  overflow-wrap: anywhere;
}

/* Trading-card names are far longer than guitar names, so let the card
   detail title wrap instead of overflowing, and ease the size down. */
[data-card-detail] .pdp-title {
  white-space: normal;
  overflow-wrap: anywhere;
  font-size: clamp(1.5rem, 2.6vw, 2.25rem);
  line-height: 1.08;
}

.pdp-priceline {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 8px 18px;
  margin: 0 0 26px;
}

.pdp-price {
  font-size: 1.6rem;
  font-weight: 800;
}

.pdp-avail {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 0.82rem;
  font-weight: 600;
  color: var(--muted);
}

.pdp-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: #1ea672;
}

.pdp-desc {
  margin: 0 0 28px;
  color: #3a3c41;
  line-height: 1.65;
  white-space: pre-line; /* render staff-entered paragraph breaks */
}

.pdp-actions {
  display: flex;
  align-items: center;
  gap: 12px;
}

/* The Save button lives in the action row here (not floating on the image like
   the grid cards), so override the absolute positioning it inherits from
   .wishlist-heart — otherwise it flies to the top-right of the info column and
   looks like it's missing. Compound selector so it beats the later
   .wishlist-heart rule regardless of source order. */
.wishlist-heart.pdp-wish {
  position: static;
  top: auto;
  right: auto;
  align-self: stretch;
  padding-inline: 16px;
}

.qty-stepper {
  display: inline-flex;
  align-items: center;
  border: 1px solid rgba(8, 9, 9, 0.22);
  border-radius: 6px;
  overflow: hidden;
}

.qty-stepper button {
  width: 46px;
  height: 56px;
  border: 0;
  background: #fff;
  font-size: 1.2rem;
  color: var(--ink);
  cursor: pointer;
  transition: background 0.15s ease;
}

.qty-stepper button:hover {
  background: #f1f1f2;
}

.qty-stepper input {
  width: 46px;
  height: 56px;
  border: 0; /* no inner divider box around the number — one clean stepper */
  background: none;
  text-align: center;
  font: inherit;
  font-weight: 700;
  -moz-appearance: textfield;
}

.qty-stepper input::-webkit-outer-spin-button,
.qty-stepper input::-webkit-inner-spin-button {
  -webkit-appearance: none;
  margin: 0;
}

.qty-stepper.is-sm button {
  width: 34px;
  height: 40px;
  font-size: 1rem;
}

.qty-stepper.is-sm input {
  width: 38px;
  height: 40px;
}

.pdp-add {
  flex: 1 1 auto;
  min-width: 200px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: 56px;
  padding: 0 28px;
  border: 0;
  border-radius: 6px;
  background: var(--ink);
  color: #fff;
  font-family: Montserrat, Inter, ui-sans-serif, system-ui, sans-serif;
  font-size: 0.92rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  cursor: pointer;
  transition: background 0.18s ease, transform 0.18s ease;
}

.pdp-add:hover {
  background: #24201f;
  transform: translateY(-1px);
}

.pdp-add:active {
  transform: translateY(0);
}

.pdp-add.is-added {
  background: #1ea672;
}

/* ===== Tactile press feedback =====
   Buttons had hover states but nothing on click/tap. Phones have no :hover,
   so tapping a button (e.g. "Add to bag") felt dead. This gives every button
   and CTA a quick "press-in" that ALSO fires on touch, so taps feel responsive
   like other sites. To undo: delete this block. */
.hero-button,
.product-button,
.secondary-button,
.pdp-add,
.wishlist-heart,
.wishlist-remove,
.pdp-restock-btn,
.pdp-review-submit,
.header-search-submit,
.cookie-btn,
.cart-remove,
.qty-stepper button {
  -webkit-tap-highlight-color: transparent; /* kill the grey iOS/Android tap flash */
  touch-action: manipulation;               /* remove the 300ms mobile tap delay */
  transition-property: background, color, border-color, box-shadow, transform;
  transition-duration: 0.15s;
  transition-timing-function: ease;
}

.hero-button:active,
.product-button:active,
.secondary-button:active,
.pdp-add:active,
.wishlist-heart:active,
.wishlist-remove:active,
.pdp-restock-btn:active,
.pdp-review-submit:active,
.header-search-submit:active,
.cookie-btn:active,
.cart-remove:active,
.qty-stepper button:active {
  transform: scale(0.95);
}

.pdp-note {
  margin: 16px 0 32px;
  font-size: 0.82rem;
  color: var(--muted);
}

/* "Email me when it's back" — shown on sold-out product pages. */
.pdp-restock {
  margin: 18px 0 4px;
  padding: 16px;
  border: 1px solid var(--line);
  border-radius: 12px;
  background: var(--surface, #fafafa);
}
.pdp-restock-lead {
  margin: 0 0 10px;
  font-size: 0.9rem;
  font-weight: 600;
}
.pdp-restock-row {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
}
.pdp-restock-row input {
  flex: 1 1 200px;
  min-width: 0;
  padding: 10px 12px;
  font-size: 0.9rem;
  border: 1px solid var(--line);
  border-radius: 8px;
}
.pdp-restock-btn {
  padding: 10px 18px;
  font-size: 0.9rem;
  font-weight: 700;
  color: #fff;
  background: #111;
  border: none;
  border-radius: 8px;
  cursor: pointer;
  white-space: nowrap;
}
.pdp-restock-btn:hover { opacity: 0.9; }
.pdp-restock-btn:disabled { opacity: 0.55; cursor: default; }
.pdp-restock-status {
  margin: 10px 0 0;
  font-size: 0.82rem;
  color: var(--muted);
}
.pdp-restock-status.ok { color: #15803d; margin: 0; }
.pdp-restock-status.err { color: #b91c1c; }

/* ===== Product reviews ===== */
.pdp-reviews {
  grid-column: 1 / -1;
  max-width: 760px;
  margin: 8px auto 0;
  /* Side padding so the section isn't flush to the screen edges on phones
     (max-width centres it on desktop; the gutter matters below ~760px). */
  padding: 32px clamp(20px, 6vw, 24px) 8px;
  border-top: 1px solid var(--line, #e6e8ec);
}
.pdp-reviews-title { font-size: 1.25rem; margin: 0 0 14px; }
.stars { display: inline-flex; letter-spacing: 1px; }
.stars .star { color: #d4d4d8; font-size: 1rem; line-height: 1; }
.stars .star.on { color: #f5a623; }
.pdp-reviews-summary { display: flex; align-items: center; gap: 10px; margin-bottom: 18px; }
.pdp-reviews-summary .stars .star { font-size: 1.15rem; }
.pdp-reviews-avg { font-weight: 700; font-size: 1.05rem; }
.pdp-reviews-count { color: var(--muted, #64748b); font-size: 0.9rem; }
.pdp-reviews-empty { margin: 0 0 18px; }
.pdp-review-list { list-style: none; margin: 0 0 26px; padding: 0; display: flex; flex-direction: column; gap: 18px; }
.pdp-review { border-bottom: 1px solid var(--line, #e6e8ec); padding-bottom: 16px; }
.pdp-review:last-child { border-bottom: 0; }
.pdp-review-head { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin-bottom: 6px; }
.pdp-review-name { font-weight: 650; }
.pdp-review-date { color: var(--muted, #64748b); font-size: 0.82rem; }
.pdp-review-body { margin: 0; line-height: 1.6; font-size: 0.95rem; }

.pdp-review-form {
  margin-top: 8px; padding: 20px; border: 1px solid var(--line, #e6e8ec);
  border-radius: 14px; background: var(--surface, #fafafa);
  display: flex; flex-direction: column; gap: 12px;
}
.pdp-review-form-title { margin: 0; font-size: 1.02rem; }
.pdp-star-pick { display: inline-flex; gap: 2px; }
.star-pick {
  appearance: none; border: 0; background: none; cursor: pointer; padding: 0 2px;
  font-size: 1.7rem; line-height: 1; color: #d4d4d8; transition: color 0.1s ease;
}
.star-pick.on { color: #f5a623; }
.pdp-review-name-in, .pdp-review-text {
  width: 100%; padding: 10px 12px; font: inherit; font-size: 0.95rem;
  border: 1px solid var(--line, #e6e8ec); border-radius: 8px; background: #fff;
}
.pdp-review-text { resize: vertical; }
.pdp-review-submit {
  align-self: flex-start; padding: 10px 20px; font-weight: 700; font-size: 0.95rem;
  color: #fff; background: #111; border: none; border-radius: 8px; cursor: pointer;
}
.pdp-review-submit:hover { opacity: 0.9; }
.pdp-review-submit:disabled { opacity: 0.55; cursor: default; }
.pdp-review-status { margin: 0; font-size: 0.85rem; color: var(--muted, #64748b); }
.pdp-review-status.ok { color: #15803d; }
.pdp-review-status.err { color: #b91c1c; }

.pdp-accordion {
  margin-top: clamp(20px, 3vw, 32px);
  border-top: 1px solid var(--line);
}

.pdp-acc {
  border-bottom: 1px solid var(--line);
}

.pdp-acc summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 18px 2px;
  font-size: 0.82rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  cursor: pointer;
  list-style: none;
}

.pdp-acc summary::-webkit-details-marker {
  display: none;
}

.pdp-acc summary::after {
  content: "+";
  font-size: 1.4rem;
  font-weight: 400;
  line-height: 1;
  color: var(--muted);
}

.pdp-acc[open] summary::after {
  content: "\2212";
}

.pdp-acc-body {
  padding: 0 2px 22px;
  color: #3a3c41;
  font-size: 0.92rem;
  line-height: 1.65;
}

.pdp-acc-body p {
  margin: 0;
}

.pdp-specs {
  display: grid;
  gap: 0;
  margin: 0;
  padding: 0;
  list-style: none;
}

.pdp-specs li {
  display: flex;
  justify-content: space-between;
  gap: 16px;
  font-size: 0.9rem;
  padding: 14px 0;
  border-top: 1px solid var(--line, #ececec);
}

.pdp-specs li:first-child {
  border-top: 0;
}

.pdp-specs span {
  color: var(--muted);
}

.pdp-specs strong {
  font-weight: 650;
}

@media (max-width: 820px) {
  /* minmax(0, …) lets the single column shrink to the viewport — plain 1fr is
     minmax(auto,1fr), which can't go below its content's width, so the wide
     product image and the action row were forcing horizontal overflow. */
  .pdp {
    grid-template-columns: minmax(0, 1fr);
    gap: clamp(24px, 5vw, 40px);
  }

  .pdp-info {
    position: static;
    max-width: 100%;
  }

  /* Smaller title on phones — the desktop clamp floored at 2rem, which reads
     oversized on a narrow screen. */
  .pdp-title {
    font-size: clamp(1.6rem, 6vw, 2.1rem);
    margin-bottom: 14px;
  }
  [data-card-detail] .pdp-title {
    font-size: clamp(1.35rem, 5vw, 1.8rem);
  }

  .pdp-gallery {
    grid-template-columns: minmax(0, 1fr);
  }

  .pdp-thumbs {
    flex-direction: row;
    order: 1;
  }

  .pdp-thumb {
    width: 64px;
    height: 64px;
  }

  /* Let the product photo fill more of the square frame on phones. */
  .pdp-main {
    padding: clamp(16px, 4vw, 28px);
  }

  /* Quantity + Add share one row (Add fills the space next to the stepper, so
     it's sized sensibly rather than squeezed/oversized); Save drops to its own
     full-width row below. Heights matched and trimmed to 50px. */
  .pdp-actions {
    flex-wrap: wrap;
  }
  .qty-stepper button,
  .qty-stepper input {
    height: 50px;
  }
  .pdp-add {
    flex: 1 1 150px;
    min-width: 0;
    width: auto;
    height: 50px;
    padding: 0 16px;
    letter-spacing: 0.05em;
  }
  .wishlist-heart.pdp-wish {
    flex-basis: 100%;
    justify-content: center;
    height: 50px; /* match the Add to bag / Sold out button height */
  }
}

/* ===== Cart (functional) ===== */
.cart-layout {
  display: grid;
  grid-template-columns: 1fr;
  gap: clamp(24px, 4vw, 40px);
  width: min(940px, 100%);
  margin: 0 auto;
}

.cart-items {
  display: grid;
  gap: 14px;
  align-content: start;
}

.cart-heading {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 16px;
  padding-bottom: 14px;
  border-bottom: 1px solid var(--line);
}

.cart-heading h2 {
  margin: 0;
  font-size: clamp(1.4rem, 2.4vw, 1.75rem);
  line-height: 1;
}

.cart-count-label {
  color: var(--muted);
  font-size: 0.9rem;
  font-weight: 600;
}

.cart-row {
  display: grid;
  grid-template-columns: 88px 1fr auto;
  gap: 16px;
  align-items: center;
  padding: 16px;
  border: 1px solid var(--line);
  border-radius: 12px;
  background: #fff;
  transition: border-color 0.15s ease, box-shadow 0.15s ease;
}

.cart-row:hover {
  border-color: rgba(8, 9, 9, 0.2);
  box-shadow: 0 6px 20px rgba(8, 9, 9, 0.06);
}

.cart-row-media {
  width: 88px;
  height: 88px;
  display: grid;
  place-items: center;
  padding: 8px;
  background: #0d0d0d;
  border-radius: 8px;
  overflow: hidden;
}

.cart-row-media img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  display: block;
}

.cart-row-info {
  display: grid;
  gap: 6px;
}

.cart-row-info h3 {
  margin: 0;
  font-size: 1.1rem;
  font-weight: 700;
  letter-spacing: -0.01em;
}

.cart-row-info h3 a:hover {
  color: var(--coral);
}

.cart-row-price {
  color: var(--muted);
  font-size: 0.88rem;
}

.cart-row-controls {
  display: flex;
  align-items: center;
  gap: 14px;
  margin-top: 4px;
}

.cart-remove {
  border: 0;
  background: none;
  color: var(--muted);
  font-size: 0.8rem;
  text-decoration: underline;
  cursor: pointer;
}

.cart-remove:hover {
  color: var(--coral);
}

.cart-line-total {
  min-width: 70px;
  text-align: right;
  font-weight: 700;
}

.cart-totals {
  align-self: start;
  display: grid;
  gap: 14px;
  padding: clamp(22px, 3vw, 30px);
  border: 1px solid var(--line);
  border-radius: 14px;
  background: #f6f6f4;
}

.cart-totals-title {
  margin: 0 0 4px;
  font-size: 1.15rem;
  font-weight: 800;
  letter-spacing: -0.01em;
}

.cart-totals-row {
  display: flex;
  justify-content: space-between;
  gap: 24px;
  color: var(--ink);
  font-size: 0.95rem;
}

.cart-totals-row span:last-child {
  color: var(--muted);
}

.cart-totals-row.is-total {
  padding-top: 12px;
  border-top: 1px solid var(--line);
  font-size: 1.15rem;
  font-weight: 800;
}

.cart-totals-row.is-total span:last-child {
  color: var(--ink);
}

.cart-checkout {
  width: 100%;
  margin-top: 4px;
}

.cart-checkout[disabled] {
  opacity: 0.5;
  cursor: not-allowed;
  box-shadow: none;
}

.cart-checkout[disabled]:hover {
  transform: none;
  filter: none;
}

.cart-secure {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  margin: 0;
  color: var(--muted);
  font-size: 0.8rem;
  font-weight: 600;
}

.cart-secure svg {
  flex: 0 0 auto;
  color: #16794c;
}

.cart-row-note {
  margin: 0;
  font-size: 0.8rem;
  color: var(--muted);
}

.cart-row-note.is-warn {
  color: #b91c1c;
  font-weight: 600;
}

.cart-row.is-blocked {
  border-color: #f0c4c4;
  background: #fdf5f5;
}

.cart-row.is-blocked .cart-row-media {
  opacity: 0.55;
}

.cart-alert {
  margin: 0;
  padding: 10px 12px;
  font-size: 0.85rem;
  font-weight: 600;
  color: #b91c1c;
  background: #fdecec;
  border: 1px solid #f5c2c2;
  border-radius: 8px;
}

.checkout-error {
  margin: 0;
  color: #b91c1c;
  font-size: 0.82rem;
  font-weight: 600;
  text-align: center;
}

@media (min-width: 880px) {
  .cart-layout {
    grid-template-columns: 1fr 340px;
    align-items: start;
  }

  .cart-totals {
    position: sticky;
    top: 20px;
  }
}

@media (max-width: 760px) {
  .pdp {
    grid-template-columns: 1fr;
  }

  .pdp-info {
    max-width: 100%;
  }

  .pdp-add {
    width: 100%;
  }
}

@media (max-width: 540px) {
  .cart-row {
    grid-template-columns: 64px 1fr;
  }

  .cart-row-media {
    width: 64px;
    height: 64px;
  }

  .cart-line-total {
    grid-column: 2;
    text-align: left;
  }
}

/* ===== Order confirmation ===== */
.order-confirm {
  width: min(560px, 100%);
  margin: 0 auto;
  display: grid;
  justify-items: center;
  gap: 16px;
  text-align: center;
}

.order-confirm-icon {
  display: grid;
  place-items: center;
  width: 72px;
  height: 72px;
  border-radius: 999px;
  color: #16794c;
  background: rgba(22, 121, 76, 0.12);
}

.order-confirm h1 {
  margin: 0;
  font-size: clamp(1.9rem, 4vw, 2.8rem);
  line-height: 1.05;
}

.order-confirm-sub {
  margin: 0;
  max-width: 34rem;
  color: var(--muted);
  line-height: 1.6;
}

.order-receipt {
  width: 100%;
  margin: 8px 0;
  padding: clamp(18px, 3vw, 24px);
  border: 1px solid var(--line);
  border-radius: 14px;
  background: #f6f6f4;
  text-align: left;
}

.order-receipt-head {
  display: flex;
  justify-content: space-between;
  font-size: 0.8rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--muted);
  padding-bottom: 12px;
  margin-bottom: 12px;
  border-bottom: 1px solid var(--line);
}

.order-lines {
  list-style: none;
  margin: 0 0 12px;
  padding: 0;
  display: grid;
  gap: 10px;
}

.order-lines li {
  display: flex;
  justify-content: space-between;
  gap: 16px;
  font-size: 0.95rem;
}

.order-totals {
  display: grid;
  gap: 8px;
  padding-top: 12px;
  border-top: 1px solid var(--line);
}

.order-total-row {
  display: flex;
  justify-content: space-between;
  gap: 16px;
  font-size: 0.92rem;
  color: var(--muted);
}

.order-total-row.is-total {
  padding-top: 8px;
  margin-top: 2px;
  border-top: 1px solid var(--line);
  font-size: 1.1rem;
  font-weight: 800;
  color: var(--ink);
}

/* ===== Cookie consent banner ===== */
.cookie-banner {
  position: fixed;
  left: 24px;
  bottom: 24px;
  z-index: 1100;
  width: min(380px, calc(100% - 32px));
  padding: 20px 22px;
  background: #fff;
  color: var(--ink);
  border: 1px solid var(--line);
  border-radius: 14px;
  box-shadow: 0 18px 50px rgba(8, 9, 9, 0.16);
  opacity: 0;
  transform: translateY(12px);
  transition: opacity 0.28s ease, transform 0.28s cubic-bezier(0.22, 1, 0.36, 1);
}

.cookie-banner.is-open {
  opacity: 1;
  transform: translateY(0);
}

.cookie-banner-title {
  margin: 0 0 6px;
  font-size: 0.95rem;
  font-weight: 700;
  letter-spacing: -0.01em;
}

.cookie-banner-text {
  margin: 0 0 16px;
  font-size: 0.85rem;
  line-height: 1.55;
  color: var(--muted);
}

.cookie-banner-text a {
  color: var(--ink);
  text-decoration: underline;
  text-underline-offset: 2px;
}

.cookie-banner-actions {
  display: flex;
  gap: 10px;
}

.cookie-btn {
  flex: 1 1 auto;
  padding: 10px 16px;
  border-radius: 9px;
  font-size: 0.85rem;
  font-weight: 600;
  cursor: pointer;
  border: 1px solid transparent;
  transition: background 0.15s ease, border-color 0.15s ease, color 0.15s ease;
}

.cookie-decline {
  background: transparent;
  color: var(--ink);
  border-color: var(--line);
}

.cookie-decline:hover {
  border-color: rgba(8, 9, 9, 0.32);
  background: #f6f6f4;
}

.cookie-accept {
  background: var(--ink);
  color: #fff;
}

.cookie-accept:hover {
  background: #000;
}

@media (prefers-reduced-motion: reduce) {
  .cookie-banner {
    transition: none;
  }
}

/* ===== Mini-cart drawer ===== */
.mini-cart {
  position: fixed;
  inset: 0;
  z-index: 1000;
}

.mini-cart-backdrop {
  position: absolute;
  inset: 0;
  background: rgba(8, 9, 9, 0.42);
  opacity: 0;
  transition: opacity 0.25s ease;
}

.mini-cart.is-open .mini-cart-backdrop {
  opacity: 1;
}

.mini-cart-panel {
  position: absolute;
  top: 0;
  right: 0;
  height: 100%;
  width: min(420px, 100%);
  display: flex;
  flex-direction: column;
  background: #fff;
  box-shadow: -12px 0 40px rgba(8, 9, 9, 0.18);
  transform: translateX(100%);
  transition: transform 0.28s cubic-bezier(0.22, 1, 0.36, 1);
  outline: none;
}

.mini-cart.is-open .mini-cart-panel {
  transform: translateX(0);
}

.mini-cart-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 20px 22px;
  border-bottom: 1px solid var(--line);
}

.mini-cart-head h2 {
  margin: 0;
  font-size: 1.15rem;
  font-weight: 800;
  letter-spacing: -0.01em;
}

.mini-cart-count {
  color: var(--muted);
  font-weight: 600;
}

.mini-cart-close {
  display: grid;
  place-items: center;
  width: 40px;
  height: 40px;
  margin: -8px -8px -8px 0;
  border: 0;
  border-radius: 8px;
  background: none;
  color: var(--ink);
  cursor: pointer;
  transition: background 0.15s ease;
}

.mini-cart-close:hover {
  background: #f1f1f2;
}

.mini-cart-body {
  flex: 1 1 auto;
  overflow-y: auto;
  padding: 16px 22px;
  display: grid;
  gap: 14px;
  align-content: start;
}

.mini-cart-row {
  display: grid;
  grid-template-columns: 64px 1fr auto;
  gap: 12px;
  align-items: start;
  padding-bottom: 14px;
  border-bottom: 1px solid var(--line);
}

.mini-cart-row:last-child {
  border-bottom: 0;
  padding-bottom: 0;
}

.mini-cart-media {
  width: 64px;
  height: 64px;
  display: grid;
  place-items: center;
  padding: 2px;
  background: #0d0d0d;
  border-radius: 8px;
  overflow: hidden;
}

.mini-cart-media img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  display: block;
}

.mini-cart-info {
  display: grid;
  gap: 6px;
  min-width: 0;
}

.mini-cart-info h3 {
  margin: 0;
  font-size: 0.95rem;
  font-weight: 700;
  line-height: 1.25;
}

.mini-cart-info h3 a:hover {
  color: var(--coral);
}

.mini-cart-price {
  color: var(--muted);
  font-size: 0.85rem;
}

.mini-cart-controls {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-top: 2px;
}

.mini-cart-line {
  font-weight: 700;
  font-size: 0.9rem;
  white-space: nowrap;
}

.mini-cart-foot {
  flex: 0 0 auto;
  display: grid;
  gap: 10px;
  padding: 18px 22px calc(18px + env(safe-area-inset-bottom, 0px));
  border-top: 1px solid var(--line);
  background: #f6f6f4;
}

.mini-cart-subtotal {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  font-size: 1.05rem;
  font-weight: 800;
}

.mini-cart-ship {
  margin: 0;
  color: var(--muted);
  font-size: 0.8rem;
}

.mini-cart-checkout,
.mini-cart-viewcart {
  width: 100%;
}

/* Full-width footer button: drop the hero-button glow so it reads as a clean,
   flat black bar (the soft halo looked like thin light lines around the box). */
.mini-cart-checkout,
.mini-cart-checkout:hover {
  box-shadow: none;
}

.mini-cart-empty {
  display: grid;
  justify-items: center;
  gap: 14px;
  padding: 48px 16px;
  text-align: center;
  color: var(--muted);
}

body.mini-cart-locked {
  overflow: hidden;
}

@media (prefers-reduced-motion: reduce) {
  .mini-cart-backdrop,
  .mini-cart-panel {
    transition: none;
  }
}

/* ===== Wishlist hearts ===== */
.wishlist-heart {
  position: absolute;
  top: 12px;
  left: 12px; /* top-left on every card (matches the sold-out cards) */
  z-index: 2;
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 6px 12px 6px 10px;
  font-size: 13px;
  font-weight: 650;
  color: #111;
  background: rgba(255, 255, 255, 0.92);
  border: 1px solid rgba(8, 9, 9, 0.12);
  border-radius: 999px;
  cursor: pointer;
  backdrop-filter: blur(4px);
  transition: color 0.15s ease, border-color 0.15s ease, background 0.15s ease, transform 0.15s ease;
}
/* Crisp heart icon — outlined when unsaved, fills in when saved. */
.wish-ic {
  width: 15px;
  height: 15px;
  flex: none;
  fill: none;
  stroke: currentColor;
  stroke-width: 2;
  transition: fill 0.15s ease, transform 0.15s ease;
}
.wishlist-heart:hover { transform: scale(1.04); }
.wishlist-heart.is-wished {
  color: #e11d48;
  border-color: #fbcfd8;
  background: #fff1f3;
}
.wishlist-heart.is-wished .wish-ic {
  fill: currentColor;
  stroke: currentColor;
}
.wishlist-remove {
  align-self: flex-start;
  margin-top: 8px;
  padding: 6px 12px;
  font-size: 13px;
  font-weight: 600;
  color: #e11d48;
  background: #fff;
  border: 1px solid #f5c2cd;
  border-radius: 999px;
  cursor: pointer;
}
.wishlist-remove:hover { background: #fff5f7; }

.account-greeting {
  display: inline-flex;
  align-items: center;
  margin-right: 6px;
  font-size: 13px;
  font-weight: 600;
  color: #111;
  text-decoration: none;
  white-space: nowrap;
}
.account-greeting:hover { text-decoration: underline; }
@media (max-width: 600px) {
  .account-greeting { display: none; }
}

.order-history { margin-top: 28px; text-align: left; }
.order-history-title {
  font-size: 14px;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: #6b7280;
  margin: 0 0 12px;
}
.order-row {
  border: 1px solid rgba(8, 9, 9, 0.08);
  border-radius: 14px;
  padding: 16px 18px;
  margin-bottom: 14px;
  background: #fff;
  box-shadow: 0 1px 2px rgba(8, 9, 9, 0.05);
}
.order-row-head {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  font-size: 14px;
  padding-bottom: 12px;
  margin-bottom: 12px;
  border-bottom: 1px solid rgba(8, 9, 9, 0.08);
}
.order-head-meta {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 7px;
  min-width: 0;
}
.order-date { font-weight: 700; font-size: 15px; }
.order-total {
  margin-left: auto;
  font-size: 18px;
  font-weight: 800;
  white-space: nowrap;
}
.order-status {
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: #15803d;
  background: #dcfce7;
  padding: 2px 8px;
  border-radius: 999px;
  white-space: nowrap;
}
/* Refunded/cancelled read as neutral, not "good green"; in-progress reads amber. */
.order-status--muted { color: #6b7280; background: #eef0f2; }
.order-status--pending { color: #92600a; background: #fef3c7; }
.order-items {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 9px;
}
.order-item {
  display: flex;
  gap: 10px;
  align-items: baseline;
  font-size: 14px;
}
.order-item-qty {
  flex: 0 0 auto;
  min-width: 20px;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  color: #6b7280;
}
.order-item-name { color: #444; flex: 1 1 auto; }
.order-line-price {
  flex: 0 0 auto;
  color: #111;
  font-weight: 600;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}
.order-history .muted { color: #6b7280; font-size: 13px; }

/* ===== Return-policy notes ===== */
.final-sale-note {
  margin-top: 14px;
  font-size: 13px;
  color: #6b7280;
}
.final-sale-note strong { color: #b91c1c; }
.final-sale-note a,
.cart-policy a {
  color: inherit;
  text-decoration: underline;
  text-underline-offset: 2px;
}
.cart-policy {
  margin-top: 12px;
  font-size: 12px;
  line-height: 1.45;
  color: #6b7280;
}
.cart-policy strong { color: #b91c1c; }

/* ===== Accessibility: skip link + consistent keyboard focus ===== */
.skip-link {
  position: absolute;
  left: 12px;
  top: 12px;
  z-index: 200;
  padding: 10px 18px;
  border-radius: 6px;
  background: var(--ink);
  color: #fff;
  font-weight: 700;
  font-size: 0.9rem;
  text-decoration: none;
  transform: translateY(-160%);
  opacity: 0;
  transition: transform 0.15s ease, opacity 0.15s ease;
}

.skip-link:focus {
  transform: translateY(0);
  opacity: 1;
  outline: 2px solid #fff;
  outline-offset: 2px;
}

/* The skip target is programmatically focused — don't box the whole region. */
#content:focus {
  outline: none;
}

/* Visible, consistent focus ring for keyboard users on interactive elements
   that previously relied only on the default browser outline. Coral matches
   the existing accent focus ring used elsewhere. */
.product-image:focus-visible,
.product-button:focus-visible,
.action-icon:focus-visible,
.slider-arrow:focus-visible,
.utility-link:focus-visible,
.wishlist-heart:focus-visible,
.mega-cats a:focus-visible,
.mega-shop-now:focus-visible,
.footer-col a:focus-visible,
.footer-legal a:focus-visible,
.new-drop:focus-visible {
  outline: 2px solid var(--coral);
  outline-offset: 2px;
  border-radius: 3px;
}

@media (prefers-reduced-motion: reduce) {
  .skip-link {
    transition: none;
  }
}

/* ===== Mobile two-panel menu (Pop Mart-style) ===== */
/* Slide-in panel opened by the ☰ on phones; built in script.js. Left rail =
   section headers, right = the tapped section's tiles. To undo: delete this
   block + the mobile-menu block in script.js. */
.ms-menu-open {
  overflow: hidden; /* lock the page behind the menu from scrolling */
}

.ms-mobmenu[hidden] {
  display: none;
}

.ms-mobmenu {
  position: fixed;
  inset: 0;
  z-index: 1200; /* above header (25-30) and mini-cart drawer (1100) */
}

.ms-mobmenu-overlay {
  position: absolute;
  inset: 0;
  background: rgba(8, 9, 9, 0.4);
  opacity: 0;
  transition: opacity 0.2s ease;
}
.ms-mobmenu.is-open .ms-mobmenu-overlay {
  opacity: 1;
}

.ms-mobmenu-panel {
  /* Full-screen sheet that slides in from the RIGHT (matches the hamburger on
     the right side of the header). */
  position: absolute;
  inset: 0;
  background: #fff;
  display: flex;
  flex-direction: column;
  transform: translateX(100%);
  transition: transform 0.24s ease;
}
.ms-mobmenu.is-open .ms-mobmenu-panel {
  transform: translateX(0);
}

.ms-mobmenu-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 14px 16px;
  padding-top: max(14px, env(safe-area-inset-top));
  border-bottom: 1px solid var(--line);
}
.ms-mobmenu-account {
  display: inline-flex;
  align-items: center;
  gap: 11px;
  color: var(--ink);
  text-decoration: none;
  font-size: 0.95rem;
}
/* Avatar chip: coral circle with the customer's initial (or a person icon for
   guests), a bold greeting, and a small "view account" subline. */
.ms-acct-avatar {
  flex: none;
  width: 38px;
  height: 38px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: var(--coral);
  color: #fff;
  font-weight: 800;
  font-size: 0.95rem;
  line-height: 1;
  text-transform: uppercase;
}
.ms-acct-avatar svg { width: 20px; height: 20px; }
.ms-acct-text {
  display: flex;
  flex-direction: column;
  line-height: 1.15;
}
.ms-acct-name { font-weight: 800; font-size: 0.98rem; }
.ms-acct-sub { font-size: 0.76rem; color: var(--muted); margin-top: 1px; }
.ms-mobmenu-close {
  border: 0;
  background: none;
  color: var(--ink);
  padding: 4px;
  cursor: pointer;
  line-height: 0;
}

.ms-mobmenu-body {
  flex: 1 1 auto;
  display: grid;
  grid-template-columns: 36% 1fr;
  min-height: 0; /* let the two columns scroll independently */
}

.ms-mobmenu-rail {
  background: #fafafa;
  border-right: 1px solid var(--line);
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
}
.ms-rail-item {
  display: block;
  width: 100%;
  text-align: left;
  border: 0;
  border-left: 3px solid transparent;
  background: none;
  padding: 17px 14px;
  font-size: 0.82rem;
  font-weight: 650;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: #6b6b6f;
  text-decoration: none;
  cursor: pointer;
  transition: color 0.15s ease, background 0.15s ease;
}
.ms-rail-item.is-active {
  background: #fff;
  border-left-color: var(--coral-deep);
  color: var(--coral-deep); /* Pop Mart's red active state, in your brand coral */
}

.ms-mobmenu-content {
  background: #fff;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  padding: 18px 16px calc(28px + env(safe-area-inset-bottom));
}
.ms-tile-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px 14px;
}
.ms-tile {
  display: flex;
  flex-direction: column;
  gap: 9px;
  text-decoration: none;
  color: var(--ink);
}
.ms-tile-media {
  position: relative;
  aspect-ratio: 1 / 1; /* fixed square frame → every tile the same size */
  background: #f5f5f6;
  border-radius: 12px;
  overflow: hidden;
  transition: opacity 0.15s ease;
}
.ms-tile:active .ms-tile-media { opacity: 0.85; }
/* Absolutely fill the square frame so ANY image — square category tiles or
   portrait/landscape product photos — covers the whole box edge-to-edge with no
   gaps. Applies to every current and future tile, so new sections match too. */
.ms-tile-media img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  padding: 0;
}
/* Missing-image fallback: hide the broken img, show a soft branded block. */
.ms-tile--noimg .ms-tile-media {
  background: linear-gradient(135deg, #fdeceb, #f5f5f6);
}
.ms-tile--noimg .ms-tile-media img {
  display: none;
}
.ms-tile-label {
  text-align: center;
  font-size: 0.92rem;
  font-weight: 500;
  letter-spacing: -0.01em;
}

/* ===== Header search overlay (Pop Mart-style slide-out) ===== */
.search-ov[hidden] { display: none; }
.search-ov {
  position: fixed;
  inset: 0;
  z-index: 1300; /* above header, mini-cart (1100), and mobile menu (1200) */
}
.search-ov-panel {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  background: #fff;
  padding: 14px 20px 40px;
  padding-top: max(14px, env(safe-area-inset-top));
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  opacity: 0;
  transform: translateX(-100%); /* slide in from the LEFT (matches the search icon on the left) */
  transition: opacity 0.22s ease, transform 0.22s ease;
}
.search-ov.is-open .search-ov-panel { opacity: 1; transform: none; }
.search-ov-top { display: flex; justify-content: flex-end; }
.search-ov-close,
.search-ov-go,
.search-ov-trash {
  border: 0;
  background: none;
  color: var(--ink);
  cursor: pointer;
  padding: 6px;
  line-height: 0;
}
.search-ov-trash { color: var(--muted); padding: 2px; }
.search-ov-field {
  display: flex;
  align-items: center;
  gap: 12px;
  border-bottom: 2px solid var(--ink);
  padding: 10px 2px;
  margin: 6px 0 28px;
}
.search-ov-field input {
  flex: 1;
  min-width: 0;
  border: 0;
  outline: 0;
  background: none;
  font: inherit;
  font-size: 1.05rem;
  color: var(--ink);
}
.search-ov-sec-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  color: var(--muted);
  font-size: 0.95rem;
  padding-bottom: 12px;
  border-bottom: 1px solid var(--line);
  margin-bottom: 16px;
}
.search-ov-terms,
.search-ov-hist {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-bottom: 30px;
}
.search-ov-hist { margin-bottom: 0; }
.search-ov-term,
.search-ov-chip {
  border: 0;
  cursor: pointer;
  font: inherit;
  font-size: 0.92rem;
  color: #333;
  background: #f3f3f4;
  border-radius: 999px;
  padding: 9px 15px;
  transition: background 0.15s ease, color 0.15s ease;
}
.search-ov-term:hover,
.search-ov-chip:hover { background: #ececed; color: var(--ink); }
.search-ov-term:active,
.search-ov-chip:active { background: #e5e5e7; }
html.search-ov-open { overflow: hidden; }

/* Desktop: keep the full-screen sheet but center content in a readable column. */
@media (min-width: 700px) {
  .search-ov-panel {
    padding-left: max(20px, calc((100vw - 880px) / 2));
    padding-right: max(20px, calc((100vw - 880px) / 2));
  }
}

/* ===== Header account menu (click profile icon → email + Sign out) ===== */
/* Fixed-position dropdown built in customer.js and placed under the profile
   icon. To undo: delete this block + initAccountMenu() in customer.js. */
.account-menu[hidden] { display: none; }
.account-menu {
  position: fixed;
  z-index: 1200;
  width: 244px;
  max-width: calc(100vw - 16px);
  background: #fff;
  border: 1px solid rgba(8, 9, 9, 0.12);
  border-radius: 12px;
  box-shadow: 0 18px 44px rgba(8, 9, 9, 0.18);
  padding: 14px;
  opacity: 0;
  transform: translateY(-6px);
  transition: opacity 0.16s ease, transform 0.16s ease;
}
.account-menu.is-open {
  opacity: 1;
  transform: translateY(0);
}
.account-menu-label {
  margin: 0;
  font-size: 0.68rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: #6b6b6b;
}
.account-menu-email {
  margin: 2px 0 12px;
  font-size: 0.9rem;
  font-weight: 600;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.account-menu-links {
  display: flex;
  flex-direction: column;
  gap: 2px;
  margin-bottom: 10px;
}
.account-menu-links a {
  display: block;
  padding: 9px 10px;
  border-radius: 8px;
  color: var(--ink);
  text-decoration: none;
  font-weight: 600;
  font-size: 0.9rem;
}
.account-menu-links a:hover { background: #f2f1ef; }
.account-menu-signout {
  width: 100%;
  padding: 10px;
  border: 1px solid rgba(8, 9, 9, 0.18);
  border-radius: 8px;
  background: #fff;
  font: inherit;
  font-weight: 700;
  cursor: pointer;
  transition: background 0.15s ease, color 0.15s ease, border-color 0.15s ease;
}
.account-menu-signout:hover {
  background: var(--ink);
  color: #fff;
  border-color: var(--ink);
}