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

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

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

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-cart-button {
  font-family: var(--font-ui);
  font-weight: 700;
  font-size: 0.72rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  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-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;
}

/* =======================================
  PROMO SECTION (shop landing two-column)
  ======================================= */

.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-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/apparel promo: reuses the live-section two-column layout, swapping the
  360 viewer for a clickable product photo. */
.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;
  }
}

.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;
}

/* Quiet item count above the product grid - a technical readout line,
  not a control bar. */
.shop-grid-count {
  margin-bottom: 1.1rem;
  color: var(--white-dim);
  font-family: var(--font-ui);
  font-weight: 600;
  font-size: 0.68rem;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  display: flex;
  align-items: center;
  gap: 0.7rem;
}

.shop-grid-count::after {
  content: "";
  flex: 1;
  height: 1px;
  background: var(--dark-3);
}

/* 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. Solid accent so available
  products read louder than coming-soon items. */
.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: 1.1rem;
  color: var(--accent);
  font-family: var(--font-display);
  font-size: clamp(1.7rem, 3vw, 2.25rem);
  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);
}

/* Purchasable, in-stock product cards (e.g. the hat). The card is a <div>:
  the art + title are a link to the detail page, and a real Add-to-Cart button
  lives in the buy row so it adds to the cart in one tap. The button can't be
  nested in the card link, so it sits beside it as a sibling. */
.shop-product-card-link {
  display: flex;
  flex-direction: column;
  flex: 1;
  min-width: 0;
  color: var(--white);
}

.shop-product-meta-buy {
  padding: 0 0.9rem 0.9rem;
}

.shop-atc-mini {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  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.5rem 0.9rem;
  cursor: pointer;
  transition: background 0.2s ease, transform 0.2s ease;
}

.shop-atc-mini:hover,
.shop-atc-mini:focus-visible {
  background: #fff;
  transform: translateY(-1px);
}

/* 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.75;
  margin-top: 1.25rem;
  max-width: 44rem;
}

.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;
  align-items: center;
  gap: 0.85rem;
  margin-top: 2rem;
  padding-top: 1.75rem;
  border-top: 1px solid var(--dark-3);
}

.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));
  }
}

@media (max-width: 860px) {
  .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) {
  /* In the stacked mobile menu the plain <li> items center, but the Shop item
    is a flex row (for the desktop dropdown), which pinned its link to the
    left. Stack it and center so "Shop" lines up with the other links. */
  .nav-links.open .nav-item-shop {
  width: 100%;
  flex-direction: column;
  align-items: center;
  }

  .nav-links.open .nav-item-shop > a {
  justify-content: center;
  }

  .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-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 {
  grid-template-columns: repeat(2, minmax(0, 1fr));
  }

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

@media (max-width: 420px) {
  .shop-brand-grid,
  .shop-category-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 {
  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);
  }
}