/* =======================================
   CDJ DESIGNS SHOP
   ======================================= */

.shop-main {
  padding-top: 4rem;
}

.shop-shell {
  min-height: 60vh;
}

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

nav.site-nav .nav-links {
  align-self: stretch;
  align-items: center;
}

.nav-item-shop {
  position: relative;
  display: flex;
  align-items: center;
}

.nav-item-shop > a {
  display: flex;
  align-items: center;
}

.shop-nav-dropdown {
  position: fixed;
  top: var(--shop-dropdown-top, 4rem);
  left: 50%;
  z-index: 1150;
  width: min(24rem, calc(100vw - 2rem));
  padding: 0.6rem;
  display: grid;
  gap: 0.35rem;
  background: rgba(5, 5, 5, 0.98);
  border: 1px solid rgba(200, 255, 0, 0.22);
  box-shadow: 0 24px 60px rgba(0, 0, 0, 0.6);
  backdrop-filter: blur(18px);
  opacity: 0;
  pointer-events: none;
  transform: translate(-50%, 0.35rem);
  transition: opacity 0.22s ease, transform 0.22s ease;
}

.shop-nav-dropdown::before {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  top: -0.35rem;
  height: 0.35rem;
}

.nav-item-shop:hover .shop-nav-dropdown,
.nav-item-shop.open .shop-nav-dropdown {
  opacity: 1;
  pointer-events: auto;
  transform: translate(-50%, 0);
}

.shop-dropdown-link {
  display: block;
  padding: 0.7rem 0.8rem;
  color: var(--white-dim);
  border: 1px solid transparent;
  background: rgba(255, 255, 255, 0.03);
  font-family: var(--font-ui);
  font-weight: 700;
  font-size: 0.72rem;
  letter-spacing: 0.16em;
  line-height: 1.2;
  text-transform: uppercase;
  transition: color 0.25s, border-color 0.25s, background 0.25s;
}

.shop-dropdown-link::after {
  display: none;
}

.shop-dropdown-link:hover,
.shop-dropdown-link:focus-visible,
.shop-dropdown-link.active {
  color: var(--accent);
  border-color: rgba(200, 255, 0, 0.28);
  background: rgba(200, 255, 0, 0.08);
}

.shop-dropdown-cart {
  width: 100%;
  margin-top: 0.25rem;
}

.shop-subnav {
  position: sticky;
  top: 4rem;
  z-index: 900;
  background: rgba(5, 5, 5, 0.94);
  border-bottom: 1px solid rgba(200, 255, 0, 0.12);
  backdrop-filter: blur(18px);
}

.shop-subnav-inner {
  max-width: 1300px;
  margin: 0 auto;
  padding: 0.8rem 2rem;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  min-width: 0;
}

.shop-subnav-links {
  display: flex;
  flex: 1 1 auto;
  gap: 0.35rem;
  min-width: 0;
  overflow-x: auto;
  scrollbar-width: thin;
}

.shop-subnav-links a,
.shop-cart-button,
.shop-filter-button,
.shop-sort-select,
.shop-notify-button {
  font-family: var(--font-ui);
  font-weight: 700;
  font-size: 0.72rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
}

.shop-subnav-links a {
  color: var(--white-dim);
  border: 1px solid transparent;
  padding: 0.55rem 0.8rem;
  white-space: nowrap;
  transition: color 0.25s, border-color 0.25s, background 0.25s;
}

.shop-subnav-links a:hover,
.shop-subnav-links a.active {
  color: var(--accent);
  border-color: rgba(200, 255, 0, 0.28);
  background: rgba(200, 255, 0, 0.06);
}

.shop-cart-button {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.45rem;
  min-width: 3.5rem;
  min-height: 2.3rem;
  padding: 0.5rem 0.75rem;
  color: var(--white);
  background: var(--dark-2);
  border: 1px solid var(--dark-4);
  transition: color 0.25s, border-color 0.25s, background 0.25s;
}

.shop-cart-button:hover,
.shop-cart-button:focus-visible {
  color: var(--black);
  background: var(--accent);
  border-color: var(--accent);
}

.shop-cart-button svg {
  width: 1rem;
  height: 1rem;
}

.shop-cart-count {
  min-width: 1rem;
  height: 1rem;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 999px;
  background: var(--accent);
  color: var(--black);
  font-size: 0.62rem;
  line-height: 1;
}

.shop-cart-button:hover .shop-cart-count,
.shop-cart-button:focus-visible .shop-cart-count {
  background: var(--black);
  color: var(--accent);
}

.shop-toast {
  position: fixed;
  top: 7.25rem;
  right: 1rem;
  z-index: 1200;
  max-width: min(20rem, calc(100vw - 2rem));
  padding: 0.85rem 1rem;
  background: var(--dark-2);
  color: var(--white);
  border: 1px solid rgba(200, 255, 0, 0.35);
  box-shadow: 0 16px 40px rgba(0, 0, 0, 0.45);
  font-family: var(--font-ui);
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  transform: translateY(-0.5rem);
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.25s ease, transform 0.25s ease;
}

.shop-toast.visible {
  opacity: 1;
  transform: translateY(0);
}

.shop-section,
.shop-category-page,
.shop-product-detail {
  max-width: 1300px;
  margin: 0 auto;
  padding-left: 2rem;
  padding-right: 2rem;
}

/* Hero is intentionally full-bleed: spans the viewport edge-to-edge and
   fills one screen (minus the fixed nav) so it reads as a dedicated landing
   rather than a chopped banner. Content sits inside .shop-hero-inner which
   keeps the 1300px content max-width. The scrim is a single directional
   gradient anchored bottom-left (where the headline lives) so the photo
   stays crisp and legible at the same time — no muddy multi-bloom stack. */
.shop-hero {
  position: relative;
  width: 100%;
  /* Escape the global `section { max-width: 1300px }` clamp from site.css so
     the hero truly spans the viewport edge to edge (like the home hero). */
  max-width: none;
  margin: 0;
  padding: 0;
  min-height: calc(100svh - 4rem);
  display: flex;
  align-items: flex-end;
  overflow: hidden;
  isolation: isolate;
}

.shop-hero::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -2;
  background:
    /* Even floor-and-ceiling shade: nav contrast up top, a strong headline
       anchor at the floor, and only a light 0.12 veil through the middle so
       the photo stays bright and fills the whole frame edge to edge. */
    linear-gradient(180deg, rgba(5, 5, 5, 0.55) 0%, rgba(5, 5, 5, 0.12) 20%, rgba(5, 5, 5, 0.12) 48%, rgba(5, 5, 5, 0.9) 100%),
    /* Gentle left lift under the headline column; clears to nothing by 72%
       so the right side of the photo reads clean, not blacked-out. */
    linear-gradient(95deg, rgba(5, 5, 5, 0.7) 0%, rgba(5, 5, 5, 0.3) 38%, transparent 72%);
}

.shop-hero::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background:
    url("data:image/svg+xml,%3Csvg viewBox='0 0 256 256' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='0.07'/%3E%3C/svg%3E"),
    repeating-linear-gradient(100deg, transparent 0 30px, rgba(200, 255, 0, 0.025) 31px 32px);
  pointer-events: none;
}

.shop-hero-media {
  position: absolute;
  inset: 0;
  z-index: -3;
  overflow: hidden;
  background: var(--shop-hero-first-image, none) center / cover no-repeat, var(--dark);
  /* Slight punch so the sim screenshots pop and the night frames lift a touch. */
  filter: saturate(1.06) brightness(1.03);
}

.shop-hero-inner {
  position: relative;
  z-index: 1;
  width: 100%;
  max-width: 1300px;
  margin: 0 auto;
  padding: clamp(5rem, 10vw, 7rem) 2rem clamp(3rem, 6vw, 4.5rem);
}

.shop-hero-slide {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  /* The mx-XX-hero crops put the rider in the upper-middle. Bias the
     cover-crop slightly down so the bike sits in the top third of
     the visible hero instead of getting cropped at the top. */
  object-position: center 35%;
  opacity: 0;
  transform: scale(1);
  transition: opacity 1.2s ease;
}

.shop-hero-slide.is-active {
  opacity: 1;
  animation: shopHeroKenBurns 6s ease-out forwards;
}

.shop-title {
  text-shadow:
    0 2px 8px rgba(0, 0, 0, 0.85),
    0 6px 28px rgba(0, 0, 0, 0.7);
}

.shop-copy {
  text-shadow: 0 2px 14px rgba(0, 0, 0, 0.85);
}

.shop-hero-noscript {
  background: var(--shop-hero-first-image) center / cover no-repeat;
}

@keyframes shopHeroKenBurns {
  from { transform: scale(1); }
  to { transform: scale(1.08); }
}

.shop-hero-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.2fr) minmax(17rem, 0.65fr);
  gap: clamp(2rem, 5vw, 4rem);
  align-items: end;
}

.shop-hero-content {
  max-width: 42rem;
}

.shop-hero-stats {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1px;
  background: var(--dark-3);
  border: 1px solid var(--dark-3);
  width: 100%;
  max-width: 28rem;
  margin-left: auto;
  align-self: end;
  box-shadow: 0 18px 50px rgba(0, 0, 0, 0.45);
}

.shop-hero-stat {
  background: rgba(10, 10, 10, 0.82);
  backdrop-filter: blur(10px);
  padding: 1.4rem 1.25rem;
  min-height: 6rem;
  display: flex;
  flex-direction: column;
  justify-content: center;
}

.shop-hero-stat-num {
  font-family: var(--font-display);
  font-weight: 800;
  font-size: clamp(1.6rem, 3.5vw, 2.2rem);
  color: var(--accent);
  line-height: 1;
  letter-spacing: 0.01em;
}

.shop-hero-stat-label {
  font-family: var(--font-ui);
  font-weight: 700;
  font-size: 0.62rem;
  letter-spacing: 0.28em;
  text-transform: uppercase;
  color: var(--white-dim);
  margin-top: 0.55rem;
}

.shop-kicker,
.shop-breadcrumbs,
.shop-product-tag,
.shop-card-link,
.shop-empty-label {
  font-family: var(--font-ui);
  font-weight: 700;
  letter-spacing: 0.18em;
  text-transform: uppercase;
}

.shop-kicker {
  color: var(--accent);
  font-size: 0.72rem;
  margin-bottom: 1rem;
}

.shop-title {
  font-family: var(--font-display);
  font-size: clamp(2.65rem, 8vw, 6.4rem);
  line-height: 0.88;
  letter-spacing: 0;
  text-transform: uppercase;
  max-width: 11ch;
}

.shop-title span {
  color: var(--accent);
}

.shop-copy {
  color: var(--white-dim);
  font-size: clamp(1rem, 2vw, 1.15rem);
  line-height: 1.65;
  font-weight: 300;
  max-width: 40rem;
  margin-top: 1.35rem;
}

.shop-hero-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem;
  margin-top: 2rem;
}

/* One orchestrated load reveal: hero elements fade up in sequence so the
   landing feels staged, not static. Skipped entirely under reduced motion. */
@media (prefers-reduced-motion: no-preference) {
  .shop-hero .shop-kicker,
  .shop-hero .shop-title,
  .shop-hero .shop-copy,
  .shop-hero .shop-hero-actions,
  .shop-hero .shop-hero-stats {
    opacity: 0;
    animation: shopHeroReveal 0.7s cubic-bezier(0.22, 1, 0.36, 1) forwards;
  }

  .shop-hero .shop-kicker { animation-delay: 0.08s; }
  .shop-hero .shop-title { animation-delay: 0.18s; }
  .shop-hero .shop-copy { animation-delay: 0.32s; }
  .shop-hero .shop-hero-actions { animation-delay: 0.44s; }
  .shop-hero .shop-hero-stats { animation-delay: 0.56s; }
}

@keyframes shopHeroReveal {
  from { opacity: 0; transform: translateY(1.3rem); }
  to { opacity: 1; transform: translateY(0); }
}

.shop-section {
  padding-top: 4.5rem;
  padding-bottom: 0;
}

.shop-section-header {
  display: flex;
  justify-content: space-between;
  align-items: end;
  gap: 1.5rem;
  margin-bottom: 1.5rem;
}

.shop-section-header .section-desc {
  margin-bottom: 0;
}

.shop-brand-grid,
.shop-category-grid {
  display: grid;
  gap: 1px;
  background: var(--dark-3);
  border: 1px solid var(--dark-3);
}

.shop-brand-grid {
  grid-template-columns: repeat(4, minmax(0, 1fr));
}

.shop-category-grid {
  grid-template-columns: repeat(4, minmax(0, 1fr));
}

/* Apparel landing has 3 sub-categories, Track has 2. Override the
   default 4-col grid for those landings so the cards fill the row
   instead of leaving dead columns. */
body[data-category="apparel"] .shop-category-grid {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

body[data-category="track"] .shop-category-grid {
  grid-template-columns: repeat(2, minmax(0, 1fr));
  max-width: 64rem;
  margin-left: auto;
  margin-right: auto;
}

.shop-brand-card,
.shop-category-card {
  position: relative;
  min-height: 10.5rem;
  display: flex;
  flex-direction: column;
  padding: 1.3rem;
  overflow: hidden;
  color: var(--white);
  background: var(--dark-2);
  transition: transform 0.25s ease, border-color 0.25s ease, background 0.25s ease;
}

.shop-brand-card {
  justify-content: flex-end;
}

.shop-category-card {
  justify-content: space-between;
}

.shop-brand-card {
  isolation: isolate;
}

.shop-brand-card::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -2;
  background: var(--brand-color, var(--dark-2));
}

.shop-brand-card::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background:
    linear-gradient(135deg, rgba(5, 5, 5, 0.2), rgba(5, 5, 5, 0.74)),
    repeating-linear-gradient(105deg, transparent 0 20px, rgba(255, 255, 255, 0.1) 21px 22px);
}

/* Stronger motifs for the visually weaker brand colors (charcoal,
   near-black, mid red). Keeps the brand-color base, layers a unique
   pattern overlay on top. */

.shop-brand-card[data-motif="triumph"]::after {
  background:
    linear-gradient(135deg, rgba(5, 5, 5, 0.18), rgba(5, 5, 5, 0.55)),
    repeating-linear-gradient(135deg,
      transparent 0 6px,
      rgba(220, 220, 220, 0.18) 6px 7px,
      transparent 7px 18px),
    radial-gradient(ellipse at 80% 110%, rgba(200, 200, 200, 0.22), transparent 55%);
}

.shop-brand-card[data-motif="beta"]::after {
  background:
    linear-gradient(135deg, rgba(5, 5, 5, 0.18), rgba(5, 5, 5, 0.62)),
    radial-gradient(circle at 20% 30%, rgba(255, 255, 255, 0.18) 1px, transparent 2px) 0 0 / 14px 14px,
    radial-gradient(circle at 70% 70%, rgba(255, 255, 255, 0.12) 1px, transparent 2px) 7px 7px / 14px 14px;
}

.shop-brand-card[data-motif="fantic"]::after {
  background:
    linear-gradient(135deg, rgba(5, 5, 5, 0.2), rgba(5, 5, 5, 0.62)),
    repeating-linear-gradient(75deg,
      transparent 0 22px,
      rgba(255, 255, 255, 0.16) 22px 24px,
      transparent 24px 50px,
      rgba(255, 255, 255, 0.08) 50px 51px,
      transparent 51px 90px);
}

/* Brand logo watermark. Sits on the right half of the card as a faint
   white ghost mark behind the brand name. The brightness(0) invert(1)
   filter forces any source logo — colored SVG, multi-fill lockup, or
   transparent PNG — into one flat white silhouette, so the twelve very
   different brand files read as a consistent set. object-fit: contain
   keeps both square emblems and wide wordmarks from distorting. */
.shop-brand-logo {
  position: absolute;
  top: 1rem;
  right: 0.75rem;
  width: 60%;
  height: 52%;
  object-fit: contain;
  object-position: right top;
  filter: brightness(0) invert(1);
  opacity: 0.2;
  pointer-events: none;
  z-index: 0;
  transition: opacity 0.3s ease, transform 0.3s ease;
}

/* Tone variants. Default (white) etches the mark bright for dark/medium
   cards. "dark" stamps it black for light cards (Suzuki yellow). "native"
   keeps the logo's own fills for two-tone marks that read by contrast
   (Triumph's hollow shield) — flattening those collapses the outline into
   a solid blob. */
.shop-brand-logo[data-logo-tone="dark"] {
  filter: brightness(0);
  opacity: 0.22;
}

.shop-brand-logo[data-logo-tone="native"] {
  filter: none;
  opacity: 0.55;
}

/* Fantic's wordmark is a thin wide band — it reads weak anchored to the top
   edge, so drop it toward the card's middle and lift opacity for presence. */
.shop-brand-card[data-motif="fantic"] .shop-brand-logo {
  top: 27%;
  height: 46%;
  object-position: right center;
  opacity: 0.5;
}

/* Ducati's shield reads small against its neighbors — nudge it larger. */
.shop-brand-card[href*="ducati"] .shop-brand-logo {
  width: 70%;
  height: 64%;
}

/* KTM's PNG carries a faint semi-transparent orange panel behind the mark.
   The card base is set to that panel's exact color (#F07010), so the panel
   vanishes — but only if nothing darkens the base unevenly. Drop the dark
   diagonal scrim here (keep the stripe texture) so the base stays uniform. */
.shop-brand-card[href*="ktm"]::after {
  background:
    repeating-linear-gradient(105deg, transparent 0 20px, rgba(255, 255, 255, 0.1) 21px 22px);
}

.shop-brand-card:hover .shop-brand-logo,
.shop-brand-card:focus-visible .shop-brand-logo {
  opacity: 0.34;
  transform: scale(1.05);
}

.shop-brand-card:hover .shop-brand-logo[data-logo-tone="native"],
.shop-brand-card:focus-visible .shop-brand-logo[data-logo-tone="native"] {
  opacity: 0.78;
}

.shop-brand-card:hover,
.shop-brand-card:focus-visible,
.shop-category-card:hover,
.shop-category-card:focus-visible {
  transform: translateY(-2px);
  outline: 1px solid var(--accent);
  outline-offset: -1px;
}

.shop-brand-name,
.shop-category-name {
  position: relative;
  z-index: 1;
  font-family: var(--font-display);
  font-weight: 800;
  font-size: clamp(1.75rem, 4vw, 2.8rem);
  line-height: 0.9;
  text-transform: uppercase;
  color: var(--white);
  text-shadow: 0 2px 14px rgba(0, 0, 0, 0.5);
}

.shop-category-name {
  color: var(--white);
  font-size: clamp(1.3rem, 2.4vw, 1.85rem);
  line-height: 1;
  overflow-wrap: break-word;
  hyphens: auto;
}

.shop-brand-meta,
.shop-category-meta {
  color: rgba(255, 255, 255, 0.82);
  font-family: var(--font-ui);
  font-size: 0.78rem;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
}

.shop-category-card {
  min-height: 11.5rem;
}

.shop-category-card::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0;
  width: 4px;
  height: 100%;
  background: var(--accent);
}

.shop-category-card p {
  color: var(--white-dim);
  line-height: 1.5;
  margin: 1rem 0;
}

.shop-card-link {
  color: var(--accent);
  font-size: 0.72rem;
}

.shop-featured-row {
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: minmax(15rem, 1fr);
  gap: 1rem;
  overflow-x: auto;
  padding-bottom: 0.8rem;
  scroll-snap-type: x proximity;
  scrollbar-width: thin;
  scrollbar-color: var(--dark-3) transparent;
}

.shop-featured-row::-webkit-scrollbar {
  height: 6px;
}

.shop-featured-row::-webkit-scrollbar-track {
  background: transparent;
}

.shop-featured-row::-webkit-scrollbar-thumb {
  background: var(--dark-3);
  border-radius: 3px;
}

.shop-featured-row::-webkit-scrollbar-thumb:hover {
  background: var(--dark-4);
}

.shop-featured-row .shop-product-card {
  scroll-snap-align: start;
}

/* =======================================
   LIVE BUILD 360 VIEWER (shop landing)
   ======================================= */

.shop-live-section {
  max-width: 1300px;
  margin: 0 auto;
  padding: 4.5rem 2rem 0;
}

.shop-live-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr);
  gap: clamp(2rem, 5vw, 4rem);
  align-items: center;
}

.shop-live-viewer {
  position: relative;
  aspect-ratio: 1920 / 910;
  background:
    radial-gradient(ellipse at center, transparent 40%, rgba(0, 0, 0, 0.45) 100%),
    linear-gradient(180deg, #f0f0f0 0%, #d8d8d8 100%);
  border: 1px solid var(--dark-3);
  overflow: hidden;
  cursor: grab;
  user-select: none;
  touch-action: pan-y;
}

.shop-live-viewer.is-dragging {
  cursor: grabbing;
}

.shop-live-frame {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: contain;
  pointer-events: none;
}

.shop-live-tag {
  position: absolute;
  top: 1rem;
  left: 1rem;
  z-index: 2;
  font-family: var(--font-ui);
  font-weight: 800;
  font-size: 0.62rem;
  letter-spacing: 0.26em;
  text-transform: uppercase;
  color: var(--black);
  background: var(--accent);
  padding: 0.4rem 0.7rem;
  clip-path: polygon(6px 0, 100% 0, calc(100% - 6px) 100%, 0 100%);
}

.shop-live-hint {
  position: absolute;
  bottom: 1rem;
  left: 50%;
  transform: translateX(-50%);
  z-index: 2;
  padding: 0.45rem 1rem;
  background: rgba(0, 0, 0, 0.7);
  backdrop-filter: blur(8px);
  font-family: var(--font-ui);
  font-weight: 600;
  font-size: 0.68rem;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--white);
  pointer-events: none;
  transition: opacity 0.4s ease;
}

.shop-live-hint.is-faded {
  opacity: 0;
}

.shop-live-body .section-title {
  font-size: clamp(2rem, 4.5vw, 3.2rem);
  line-height: 0.95;
}

.shop-live-body .section-desc {
  margin-bottom: 1.6rem;
}

.shop-live-actions {
  display: flex;
  gap: 0.75rem;
  flex-wrap: wrap;
}

/* Hat drop promo: reuses the live-section two-column layout, swapping the
   360 viewer for a clickable product photo that links to the drop page. */
.shop-drop-media {
  position: relative;
  display: block;
  aspect-ratio: 4 / 3;
  border: 1px solid var(--dark-3);
  background: var(--dark-2);
  overflow: hidden;
}

.shop-drop-media img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.45s ease;
}

.shop-drop-media:hover img,
.shop-drop-media:focus-visible img {
  transform: scale(1.04);
}

.shop-drop-price {
  margin: 0 0 1.5rem;
  color: var(--accent);
  font-family: var(--font-display);
  font-size: 1.9rem;
  line-height: 1;
  letter-spacing: 0.01em;
}

.shop-drop-price span {
  color: var(--white-dim);
  font-family: var(--font-ui);
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
}

@media (max-width: 860px) {
  .shop-live-section {
    padding-left: 2rem;
    padding-right: 2rem;
  }

  .shop-live-grid {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 660px) {
  .shop-live-section {
    padding-left: 1rem;
    padding-right: 1rem;
  }

  .shop-live-actions {
    flex-direction: column;
    align-items: stretch;
  }

  .shop-live-actions .btn-primary,
  .shop-live-actions .btn-secondary {
    width: 100%;
    text-align: center;
  }
}

/* =======================================
   DESIGN LINE CARDS (the five-line lineup)
   ======================================= */

.shop-lines-section .section-title {
  font-size: clamp(2.2rem, 5.5vw, 3.8rem);
  line-height: 0.95;
}

.shop-lines-grid {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 1px;
  background: var(--dark-3);
  border: 1px solid var(--dark-3);
}

.shop-line-card {
  position: relative;
  display: flex;
  flex-direction: column;
  background: var(--dark-2);
  color: var(--white);
  overflow: hidden;
  isolation: isolate;
  transition: transform 0.25s ease;
  min-height: 22rem;
}

.shop-line-card:hover,
.shop-line-card:focus-visible {
  transform: translateY(-3px);
  outline: 1px solid var(--accent);
  outline-offset: -1px;
}

.shop-line-art {
  position: relative;
  display: block;
  aspect-ratio: 1;
  width: 100%;
  overflow: hidden;
  background: linear-gradient(135deg, #0c0c0c, #1a1a1a);
}

.shop-line-art::before,
.shop-line-art::after {
  content: "";
  position: absolute;
  inset: 0;
}

.shop-line-number {
  position: absolute;
  right: 0.8rem;
  bottom: 0.4rem;
  z-index: 2;
  font-family: var(--font-display);
  font-weight: 800;
  font-size: clamp(3rem, 7vw, 4.5rem);
  line-height: 1;
  color: rgba(200, 255, 0, 0.18);
  letter-spacing: -0.02em;
  pointer-events: none;
}

/* Per-line motifs. Each one tries to evoke its name with pure CSS. */

/* Velocity Division -diagonal motion-blur streaks */
.shop-line-card[data-line="velocity"] .shop-line-art {
  background:
    repeating-linear-gradient(115deg,
      transparent 0 14px,
      rgba(200, 255, 0, 0.06) 14px 15px,
      transparent 15px 38px,
      rgba(200, 255, 0, 0.14) 38px 40px,
      transparent 40px 88px),
    linear-gradient(135deg, #0a0a0a, #1a1a1a);
}

.shop-line-card[data-line="velocity"] .shop-line-art::before {
  background:
    linear-gradient(115deg, transparent 30%, rgba(200, 255, 0, 0.12) 45%, transparent 60%);
  filter: blur(2px);
}

/* Topo -concentric contour rings */
.shop-line-card[data-line="topo"] .shop-line-art {
  background:
    radial-gradient(circle at 30% 70%,
      transparent 0 14px,
      rgba(200, 255, 0, 0.18) 14px 15px,
      transparent 15px 30px,
      rgba(200, 255, 0, 0.14) 30px 31px,
      transparent 31px 50px,
      rgba(200, 255, 0, 0.1) 50px 51px,
      transparent 51px 80px,
      rgba(200, 255, 0, 0.07) 80px 81px,
      transparent 81px 130px,
      rgba(200, 255, 0, 0.05) 130px 131px,
      transparent 131px),
    linear-gradient(135deg, #0a0a0a, #161616);
}

/* Factory -horizontal racing stripes, red/white accent */
.shop-line-card[data-line="factory"] .shop-line-art {
  background:
    linear-gradient(180deg,
      transparent 0%, transparent 38%,
      rgba(255, 34, 51, 0.55) 38%, rgba(255, 34, 51, 0.55) 42%,
      rgba(240, 240, 240, 0.85) 42%, rgba(240, 240, 240, 0.85) 44%,
      rgba(255, 34, 51, 0.55) 44%, rgba(255, 34, 51, 0.55) 48%,
      transparent 48%),
    linear-gradient(135deg, #0c0c0c, #1c1c1c);
}

.shop-line-card[data-line="factory"] .shop-line-art::before {
  background: linear-gradient(180deg,
    rgba(5, 5, 5, 0.5) 0%, transparent 30%, transparent 70%, rgba(5, 5, 5, 0.6) 100%);
}

/* Gridline -strict engineering grid */
.shop-line-card[data-line="gridline"] .shop-line-art {
  background:
    repeating-linear-gradient(0deg,
      transparent 0 23px,
      rgba(200, 255, 0, 0.1) 23px 24px),
    repeating-linear-gradient(90deg,
      transparent 0 23px,
      rgba(200, 255, 0, 0.1) 23px 24px),
    linear-gradient(135deg, #0a0a0a, #181818);
}

.shop-line-card[data-line="gridline"] .shop-line-art::before {
  background:
    linear-gradient(90deg, transparent 49%, rgba(200, 255, 0, 0.35) 49%, rgba(200, 255, 0, 0.35) 51%, transparent 51%),
    linear-gradient(0deg, transparent 49%, rgba(200, 255, 0, 0.35) 49%, rgba(200, 255, 0, 0.35) 51%, transparent 51%);
  opacity: 0.4;
}

/* Apex -single sharp chevron, aggressive */
.shop-line-card[data-line="apex"] .shop-line-art {
  background: linear-gradient(135deg, #0a0a0a, #1a1a1a);
}

.shop-line-card[data-line="apex"] .shop-line-art::before {
  background: linear-gradient(135deg,
    transparent 0%, transparent 38%,
    rgba(200, 255, 0, 0.4) 39%, rgba(200, 255, 0, 0.4) 42%,
    transparent 43%, transparent 56%,
    rgba(200, 255, 0, 0.25) 57%, rgba(200, 255, 0, 0.25) 60%,
    transparent 61%);
  clip-path: polygon(0 100%, 100% 0, 100% 100%);
}

.shop-line-card[data-line="apex"] .shop-line-art::after {
  background: linear-gradient(180deg, rgba(5, 5, 5, 0.4) 0%, transparent 50%);
}

.shop-line-body {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  padding: 1.1rem;
  flex: 1;
}

.shop-line-eyebrow {
  font-family: var(--font-ui);
  font-weight: 700;
  font-size: 0.62rem;
  letter-spacing: 0.28em;
  text-transform: uppercase;
  color: var(--accent);
}

.shop-line-name {
  font-family: var(--font-display);
  font-weight: 800;
  font-size: clamp(1.3rem, 2.2vw, 1.6rem);
  line-height: 0.95;
  text-transform: uppercase;
  letter-spacing: 0.01em;
}

.shop-line-tagline {
  font-family: var(--font-body);
  font-weight: 300;
  font-size: 0.85rem;
  color: var(--white-dim);
  line-height: 1.5;
  flex: 1;
}

.shop-line-card .shop-coming-pill {
  margin-top: 0.5rem;
}

.shop-category-page {
  padding-top: 3rem;
  padding-bottom: 2rem;
}

.shop-breadcrumbs {
  display: flex;
  flex-wrap: wrap;
  gap: 0.45rem;
  align-items: center;
  color: var(--white-dim);
  font-size: 0.72rem;
  margin-bottom: 1.25rem;
}

.shop-breadcrumbs a {
  color: var(--white-dim);
  transition: color 0.25s;
}

.shop-breadcrumbs a:hover {
  color: var(--accent);
}

.shop-breadcrumbs span[aria-current="page"] {
  color: var(--accent);
}

.shop-page-heading {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 1rem;
  align-items: end;
  margin-bottom: 2rem;
}

.shop-page-heading h1 {
  font-family: var(--font-display);
  font-size: clamp(2.4rem, 7vw, 5rem);
  line-height: 0.9;
  text-transform: uppercase;
}

.shop-page-heading p {
  color: var(--white-dim);
  line-height: 1.65;
  max-width: 42rem;
  margin-top: 0.85rem;
}

.shop-controls {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: 0.75rem;
  align-items: center;
  margin-bottom: 1.5rem;
}

.shop-controls label {
  flex: 0 0 auto;
  min-width: 0;
}

.shop-filter-button,
.shop-sort-select,
.shop-notify-button {
  color: var(--white);
  background: var(--dark-2);
  border: 1px solid var(--dark-4);
  min-height: 2.6rem;
}

.shop-filter-button,
.shop-notify-button {
  flex: 0 0 auto;
  padding: 0.65rem 1.1rem;
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
}

.shop-filter-button::before {
  content: "";
  display: inline-block;
  width: 12px;
  height: 8px;
  background:
    linear-gradient(currentColor, currentColor) center / 12px 1.5px no-repeat,
    linear-gradient(currentColor, currentColor) center 3.5px / 9px 1.5px no-repeat,
    linear-gradient(currentColor, currentColor) center 7px / 6px 1.5px no-repeat;
}

.shop-sort-select {
  width: auto;
  min-width: 11rem;
  padding: 0.65rem 2.2rem 0.65rem 0.85rem;
  appearance: none;
  background-image:
    linear-gradient(45deg, transparent 50%, var(--white-dim) 50%),
    linear-gradient(135deg, var(--white-dim) 50%, transparent 50%);
  background-position:
    calc(100% - 16px) calc(50% - 2px),
    calc(100% - 11px) calc(50% - 2px);
  background-size: 5px 5px, 5px 5px;
  background-repeat: no-repeat;
}

.shop-filter-button:hover,
.shop-notify-button:hover,
.shop-sort-select:focus {
  border-color: var(--accent);
  color: var(--accent);
}

@media (max-width: 480px) {
  .shop-controls {
    flex-direction: column;
    align-items: stretch;
  }

  .shop-filter-button,
  .shop-notify-button,
  .shop-sort-select {
    width: 100%;
  }

  .shop-controls label {
    width: 100%;
  }
}

/* Coming-soon panel: the deliberate empty state for categories that have
   no real products yet. Reads as an intentional "drop staging" moment with
   a notify CTA, not a broken empty grid. */
.shop-coming-panel {
  position: relative;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 1.1rem;
  padding: clamp(2.25rem, 6vw, 4rem);
  margin-bottom: 1.5rem;
  border: 1px solid var(--dark-3);
  background:
    radial-gradient(ellipse 70% 90% at 100% 0%, rgba(200, 255, 0, 0.08), transparent 60%),
    linear-gradient(160deg, var(--dark-2) 0%, var(--dark) 100%);
}

.shop-coming-panel::before {
  content: "";
  position: absolute;
  inset: 0;
  background: repeating-linear-gradient(115deg, transparent 0 26px, rgba(200, 255, 0, 0.03) 26px 27px);
  pointer-events: none;
}

.shop-coming-panel > * {
  position: relative;
  z-index: 1;
}

.shop-empty-label {
  color: var(--black);
  background: var(--accent);
  padding: 0.4rem 0.7rem;
  font-size: 0.66rem;
}

.shop-coming-panel h2 {
  font-family: var(--font-display);
  font-weight: 800;
  font-size: clamp(1.8rem, 4.5vw, 2.9rem);
  line-height: 0.95;
  text-transform: uppercase;
}

.shop-coming-panel p {
  color: var(--white-dim);
  line-height: 1.65;
  max-width: 46rem;
}

.shop-coming-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem;
  margin-top: 0.4rem;
}

@media (max-width: 480px) {
  .shop-coming-actions {
    flex-direction: column;
    align-items: stretch;
    width: 100%;
  }

  .shop-coming-actions .btn-primary,
  .shop-coming-actions .btn-secondary {
    width: 100%;
    text-align: center;
  }
}

.shop-product-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 1rem;
}

.shop-product-card {
  display: flex;
  flex-direction: column;
  min-width: 0;
  color: var(--white);
  background: var(--dark-2);
  border: 1px solid var(--dark-3);
  transition: border-color 0.25s ease, transform 0.25s ease, box-shadow 0.25s ease;
}

.shop-product-card:hover,
.shop-product-card:focus-visible {
  border-color: rgba(200, 255, 0, 0.72);
  transform: translateY(-2px);
  box-shadow: 0 0 0 1px rgba(200, 255, 0, 0.12), 0 16px 32px rgba(0, 0, 0, 0.28);
}

.shop-product-art {
  position: relative;
  aspect-ratio: 1;
  display: grid;
  place-items: center;
  overflow: hidden;
  background:
    radial-gradient(ellipse at 50% 120%, rgba(200, 255, 0, 0.06), transparent 55%),
    radial-gradient(ellipse at 50% -10%, rgba(255, 255, 255, 0.04), transparent 60%),
    linear-gradient(180deg, #181818 0%, #0a0a0a 100%);
}

.shop-product-art::before {
  content: "";
  position: absolute;
  inset: 0;
  background: repeating-linear-gradient(115deg,
    transparent 0 22px,
    rgba(255, 255, 255, 0.018) 22px 23px);
  pointer-events: none;
}

.shop-product-art span {
  position: relative;
  z-index: 1;
  font-family: var(--font-ui);
  font-weight: 700;
  font-size: 0.62rem;
  letter-spacing: 0.3em;
  text-transform: uppercase;
  color: var(--white-dim);
  padding: 0.4rem 0.6rem;
  border-top: 1px solid rgba(200, 255, 0, 0.3);
  border-bottom: 1px solid rgba(200, 255, 0, 0.3);
}

.shop-product-card:hover .shop-product-art span,
.shop-product-card:focus-visible .shop-product-art span {
  color: var(--accent);
}

.shop-product-body {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  padding: 0.9rem;
  flex: 1;
}

.shop-product-body h3 {
  font-family: var(--font-display);
  font-size: 1.25rem;
  line-height: 1;
  text-transform: uppercase;
}

.shop-product-tag {
  color: var(--white-dim);
  font-size: 0.64rem;
}

.shop-coming-pill {
  width: fit-content;
  margin-top: auto;
  color: var(--black);
  background: var(--accent);
  font-family: var(--font-ui);
  font-weight: 800;
  font-size: 0.68rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  padding: 0.35rem 0.55rem;
}

/* Primary product state: made-to-order customs that are live now. Solid
   accent so available products read louder than the staging drops. */
.shop-custom-pill {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  width: fit-content;
  margin-top: auto;
  color: var(--black);
  background: var(--accent);
  font-family: var(--font-ui);
  font-weight: 800;
  font-size: 0.68rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  padding: 0.35rem 0.6rem;
}

/* Secondary state: flagged "coming soon" drops. Muted ghost pill so they
   sit quietly next to the live customs. */
.shop-soon-pill {
  width: fit-content;
  margin-top: auto;
  color: var(--white-dim);
  background: transparent;
  border: 1px solid rgba(255, 255, 255, 0.18);
  font-family: var(--font-ui);
  font-weight: 700;
  font-size: 0.64rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  padding: 0.32rem 0.55rem;
}

.shop-product-blurb {
  color: var(--white-dim);
  font-family: var(--font-body);
  font-weight: 300;
  font-size: 0.82rem;
  line-height: 1.45;
}

/* Live customs get an accent-lit art label so the grid telegraphs which
   pieces are buildable today versus staging. */
.shop-product-art.is-live span {
  color: var(--accent);
  border-color: var(--accent);
}

/* Featured nav-style card (the all-five-lines premade kit entry). */
.shop-product-card.is-featured {
  border-color: rgba(200, 255, 0, 0.5);
  box-shadow: inset 3px 0 0 var(--accent);
}

.shop-product-card.is-featured:hover,
.shop-product-card.is-featured:focus-visible {
  box-shadow: inset 3px 0 0 var(--accent), 0 16px 32px rgba(0, 0, 0, 0.28);
}

.shop-error {
  max-width: 46rem;
  margin: 6rem auto;
  padding: 2rem;
  border: 1px solid rgba(200, 255, 0, 0.24);
  background: var(--dark-2);
}

.shop-error h1 {
  font-family: var(--font-display);
  font-size: 2.5rem;
  text-transform: uppercase;
}

.shop-error p {
  color: var(--white-dim);
  line-height: 1.6;
  margin-top: 0.75rem;
}

.shop-product-detail {
  padding-top: 3rem;
}

.shop-product-detail-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(18rem, 0.8fr);
  gap: clamp(2rem, 5vw, 4rem);
  align-items: start;
}

.shop-product-detail-art .shop-product-art {
  border: 1px solid var(--dark-3);
}

.shop-proof-preview {
  margin: 0;
  border: 1px solid var(--dark-3);
  background: var(--dark-2);
}

.shop-proof-preview img {
  display: block;
  width: 100%;
  aspect-ratio: 16 / 9;
  object-fit: cover;
}

.shop-proof-preview figcaption {
  padding: 0.85rem 1rem;
  border-top: 1px solid var(--dark-3);
  color: var(--accent);
  font-family: var(--font-ui);
  font-size: 0.72rem;
  font-weight: 800;
  letter-spacing: 0.18em;
  text-transform: uppercase;
}

/* Product photo gallery (detail page). Main image plus a thumbnail strip
   that swaps the main on click. Used by real-photo products like hats. */
.shop-product-gallery {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
}

.shop-gallery-main {
  margin: 0;
  border: 1px solid var(--dark-3);
  background: var(--dark-2);
  overflow: hidden;
}

.shop-gallery-main img {
  display: block;
  width: 100%;
  aspect-ratio: 1;
  object-fit: cover;
}

.shop-gallery-thumbs {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 0.5rem;
}

.shop-gallery-thumb {
  padding: 0;
  border: 1px solid var(--dark-3);
  background: var(--dark-2);
  cursor: pointer;
  overflow: hidden;
  transition: border-color 0.2s ease;
}

.shop-gallery-thumb img {
  display: block;
  width: 100%;
  aspect-ratio: 1;
  object-fit: cover;
}

.shop-gallery-thumb.is-active,
.shop-gallery-thumb:hover,
.shop-gallery-thumb:focus-visible {
  border-color: var(--accent);
}

/* Price line on the product detail page. Higher specificity than
   .shop-product-info p so it reads accent and large, not dim body text. */
.shop-product-info .shop-product-price {
  margin-top: 0.85rem;
  color: var(--accent);
  font-family: var(--font-display);
  font-size: clamp(1.6rem, 3vw, 2.1rem);
  line-height: 1;
  letter-spacing: 0.01em;
}

/* Card footer row: pill on the left, price on the right. */
.shop-product-meta {
  margin-top: auto;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.6rem;
  flex-wrap: wrap;
}

.shop-product-meta .shop-soon-pill,
.shop-product-meta .shop-custom-pill {
  margin-top: 0;
}

.shop-product-price-tag {
  font-family: var(--font-display);
  font-size: 1.05rem;
  line-height: 1;
  letter-spacing: 0.02em;
  color: var(--accent);
}

/* Real-photo product cards: the photo fills the square art slot, with a
   small "Coming Soon" flag overlaid for staging drops. */
.shop-product-art.has-photo {
  display: block;
}

.shop-product-art.has-photo img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.shop-product-art .shop-product-art-flag {
  position: absolute;
  top: 0.6rem;
  left: 0.6rem;
  z-index: 2;
  padding: 0.3rem 0.5rem;
  border: 1px solid rgba(255, 255, 255, 0.2);
  background: rgba(0, 0, 0, 0.66);
  color: var(--white);
  font-family: var(--font-ui);
  font-weight: 700;
  font-size: 0.6rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
}

.shop-product-info h1 {
  font-family: var(--font-display);
  font-size: clamp(2.4rem, 6vw, 4.6rem);
  line-height: 0.92;
  text-transform: uppercase;
}

.shop-product-info p {
  color: var(--white-dim);
  line-height: 1.7;
  margin-top: 1rem;
}

.shop-product-options {
  display: grid;
  gap: 0;
  list-style: none;
  margin: 1.35rem 0 0;
  padding: 0;
  border-top: 1px solid var(--dark-3);
}

.shop-product-options li {
  display: flex;
  gap: 0.8rem;
  align-items: center;
  min-height: 2.55rem;
  border-bottom: 1px solid var(--dark-3);
  color: var(--white);
  font-family: var(--font-ui);
  font-size: 0.76rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}

.shop-product-options li::before {
  content: ">";
  color: var(--accent);
  font-weight: 800;
}

.shop-kit-configurator {
  display: grid;
  gap: 1rem;
  margin-top: 1.5rem;
}

.shop-config-section {
  border: 1px solid var(--dark-3);
  background:
    linear-gradient(135deg, rgba(200, 255, 0, 0.045), transparent 48%),
    var(--dark-2);
  padding: clamp(1rem, 2.5vw, 1.35rem);
}

.shop-config-heading {
  margin-bottom: 1rem;
}

.shop-config-heading .section-label {
  margin-bottom: 0.45rem;
}

.shop-config-heading h2 {
  font-family: var(--font-display);
  font-size: clamp(1.55rem, 3vw, 2.25rem);
  line-height: 0.95;
  text-transform: uppercase;
}

.shop-config-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0.85rem;
}

.shop-config-field {
  display: grid;
  gap: 0.4rem;
  margin-top: 0.85rem;
}

.shop-config-field:first-child,
.shop-config-grid .shop-config-field {
  margin-top: 0;
}

.shop-config-field-full {
  grid-column: 1 / -1;
}

.shop-config-field span,
.shop-choice-block h3 {
  color: var(--white);
  font-family: var(--font-ui);
  font-size: 0.72rem;
  font-weight: 800;
  letter-spacing: 0.12em;
  line-height: 1.35;
  text-transform: uppercase;
}

.shop-config-field em,
.shop-choice-block h3 span {
  color: var(--white-dim);
  font-style: normal;
  letter-spacing: 0.06em;
  margin-left: 0.3rem;
}

.shop-config-field input,
.shop-config-field select,
.shop-config-field textarea {
  width: 100%;
  min-height: 2.8rem;
  border: 1px solid var(--dark-3);
  background: rgba(5, 5, 5, 0.72);
  color: var(--white);
  font-family: var(--font-body);
  font-size: 0.92rem;
  outline: none;
  padding: 0.78rem 0.9rem;
}

.shop-config-field textarea {
  min-height: 8rem;
  resize: vertical;
}

.shop-config-field input:focus,
.shop-config-field select:focus,
.shop-config-field textarea:focus {
  border-color: var(--accent);
}

.shop-config-field select option {
  background: var(--dark);
}

.shop-choice-block {
  margin-top: 1rem;
}

.shop-choice-block:first-of-type {
  margin-top: 0;
}

.shop-choice-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0.6rem;
  margin-top: 0.65rem;
}

.shop-choice-grid-compact {
  grid-template-columns: 1fr;
}

.shop-config-choice {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  gap: 0.7rem;
  align-items: center;
  min-height: 3.25rem;
  border: 1px solid var(--dark-3);
  background: rgba(0, 0, 0, 0.24);
  cursor: pointer;
  padding: 0.75rem;
  transition: border-color 0.2s ease, transform 0.2s ease;
}

.shop-config-choice:hover,
.shop-config-choice:focus-within {
  border-color: rgba(200, 255, 0, 0.65);
  transform: translateY(-1px);
}

.shop-config-choice input {
  accent-color: var(--accent);
}

.shop-config-choice strong {
  display: block;
  color: var(--white);
  font-family: var(--font-ui);
  font-size: 0.74rem;
  font-weight: 800;
  letter-spacing: 0.08em;
  line-height: 1.3;
  text-transform: uppercase;
}

.shop-config-choice small {
  display: block;
  color: var(--white-dim);
  font-size: 0.72rem;
  margin-top: 0.2rem;
}

.shop-config-choice b {
  color: var(--accent);
  font-family: var(--font-ui);
  font-size: 0.78rem;
  letter-spacing: 0.05em;
  white-space: nowrap;
}

.shop-product-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem;
  margin-top: 1.6rem;
}

.shop-related {
  padding-top: 4rem;
}

@media (max-width: 1100px) {
  .shop-brand-grid,
  .shop-product-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

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

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

@media (max-width: 860px) {
  .shop-subnav {
    top: 3.75rem;
  }

  .shop-hero-grid,
  .shop-page-heading,
  .shop-product-detail-grid {
    grid-template-columns: 1fr;
  }

  .shop-config-grid,
  .shop-choice-grid {
    grid-template-columns: 1fr;
  }

  .shop-hero-stats {
    margin-left: 0;
    max-width: 100%;
  }

  .shop-section-header {
    display: block;
  }

  .shop-section-header .btn-secondary {
    margin-top: 1rem;
  }
}

@media (max-width: 1140px) {
  .nav-links.open .nav-item-shop {
    width: 100%;
  }

  .nav-links.open .shop-nav-dropdown {
    position: static;
    width: 100%;
    margin-top: 0.75rem;
    box-shadow: none;
    opacity: 1;
    pointer-events: auto;
    transform: none;
    display: none;
  }

  .nav-links.open .shop-nav-dropdown::before {
    display: none;
  }

  .nav-links.open .nav-item-shop.open .shop-nav-dropdown {
    display: grid;
  }
}

@media (max-width: 660px) {
  .shop-main {
    padding-top: 3.75rem;
  }

  .shop-subnav-inner {
    padding: 0.7rem 1rem;
    gap: 0.55rem;
  }

  .shop-section,
  .shop-category-page,
  .shop-product-detail {
    padding-left: 1rem;
    padding-right: 1rem;
  }

  .shop-hero-inner {
    padding-left: 1rem;
    padding-right: 1rem;
  }

  /* On phones the content stacks full-width, so the scrim goes vertical:
     light at the top, heavy at the bottom where the headline + stats sit. */
  .shop-hero::before {
    background:
      linear-gradient(180deg, rgba(5, 5, 5, 0.62) 0%, transparent 28%, rgba(5, 5, 5, 0.35) 58%, rgba(5, 5, 5, 0.95) 100%);
  }

  .shop-hero-actions {
    flex-direction: column;
    align-items: stretch;
  }

  .shop-hero-actions .btn-primary,
  .shop-hero-actions .btn-secondary {
    width: 100%;
    padding-left: 1rem;
    padding-right: 1rem;
    text-align: center;
  }

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

  .shop-brand-card,
  .shop-category-card {
    min-height: 9.5rem;
    padding: 1rem;
  }

  .shop-line-card {
    min-height: 18rem;
  }

  .shop-controls {
    align-items: stretch;
  }
}

@media (max-width: 420px) {
  .shop-brand-grid,
  .shop-category-grid,
  .shop-lines-grid {
    grid-template-columns: 1fr;
  }

  .shop-product-grid {
    gap: 0.65rem;
  }

  .shop-product-body {
    padding: 0.75rem;
  }

  .shop-product-body h3 {
    font-size: 1.05rem;
  }
}

@media (prefers-reduced-motion: reduce) {
  .shop-product-card,
  .shop-brand-card,
  .shop-category-card,
  .shop-line-card,
  .shop-toast {
    transition: none;
  }

  .shop-hero-slide,
  .shop-hero-slide.is-active {
    /* Keep the gentle opacity crossfade so the hero still rotates through
       its photos, but drop the Ken Burns zoom (the actual movement) for
       reduced-motion users. */
    animation: none;
    transform: scale(1);
  }
}