:root{--pink:#ff10f0;--cyan:#00f0ff;--green:#39ff14} .shop-shell{width:min(1440px,100%);margin:auto;padding:2rem 1.25rem 5rem;font-family:'Space Mono',monospace}.shop-kicker{color:var(--cyan);font-size:.75rem;letter-spacing:.2em}.shop-title{font-family:'Rubik Glitch',sans-serif;font-size:clamp(2.5rem,7vw,5rem);line-height:1.15;margin:.5rem 0 1rem}.shop-muted{color:#a7b0c1}.shop-controls{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:1rem;padding:1.2rem 0;margin:2rem 0 1rem;border-block:1px solid #334155}.shop-control-group{display:flex;align-items:center;flex-wrap:wrap;gap:.65rem}.shop-control-group label{font-size:.78rem;color:#cbd5e1}.shop-select,.shop-button,.shop-link{background:#111827;border:1px solid #475569;border-radius:8px;padding:.65rem .85rem;color:white;font:inherit;font-size:.8rem}.shop-button{cursor:pointer}.shop-button[aria-pressed=true]{border-color:var(--cyan);color:var(--cyan);box-shadow:0 0 0 1px var(--cyan)}.shop-button:disabled{opacity:.35;cursor:not-allowed}.shop-link{text-decoration:none;display:inline-block}.shop-button:hover:not(:disabled),.shop-link:hover{border-color:var(--pink)}.shop-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:1.5rem}.shop-grid[data-layout=compact]{grid-template-columns:repeat(5,minmax(0,1fr));gap:.8rem}.shop-grid[data-layout=large]{grid-template-columns:repeat(2,minmax(0,1fr));gap:2rem}.shop-card{min-width:0;background:#0c1019;border:1px solid #283243;border-radius:12px;overflow:hidden}.shop-card img{width:100%;aspect-ratio:4/5;object-fit:cover;background:#10131b}.shop-card-content{padding:1rem}.shop-card h2{font-size:1rem;font-weight:700;margin:.4rem 0}.shop-card p{font-size:.78rem;color:#a7b0c1}.shop-card .shop-price{color:var(--green);font-size:1rem;margin:.6rem 0}.shop-card .shop-link{margin-top:.6rem}.shop-grid[data-layout=compact] .shop-card-content{padding:.6rem}.shop-grid[data-layout=compact] .shop-card h2{font-size:.8rem}.shop-grid[data-layout=large] .shop-card h2{font-size:1.25rem}.shop-pagination{display:flex;justify-content:center;align-items:center;gap:1rem;margin:2rem 0}.product-layout{display:grid;grid-template-columns:minmax(0,1.1fr) minmax(300px,.9fr);gap:clamp(1.5rem,5vw,5rem);margin-top:2rem}.product-photo{width:100%;aspect-ratio:4/5;object-fit:contain;background:#10131b;border:1px solid #334155;border-radius:12px}.product-panel{align-self:start}.product-panel h1{font-size:clamp(1.7rem,4vw,3rem);font-weight:700;margin:.7rem 0}.product-panel .shop-price{font-size:1.5rem;color:var(--green);margin:1rem 0}.product-panel label{display:block;margin:1.5rem 0 .5rem}.product-panel .shop-select{min-width:140px}.product-panel .shop-button{display:block;margin-top:1.5rem;background:var(--pink);color:black;font-weight:700;padding:1rem 2rem}.product-panel .shop-button:disabled{background:#475569;color:#cbd5e1}.product-panel .shop-muted{line-height:1.8}.shop-note{border-left:3px solid var(--cyan);padding:.8rem 1rem;background:#101827;margin-top:2rem;font-size:.8rem;color:#cbd5e1}@media(max-width:850px){.shop-grid,.shop-grid[data-layout=compact]{grid-template-columns:repeat(2,minmax(0,1fr))}.shop-grid[data-layout=large]{grid-template-columns:1fr}.product-layout{grid-template-columns:1fr}}@media(max-width:480px){.shop-grid,.shop-grid[data-layout=compact]{gap:.7rem}.shop-card-content{padding:.6rem}.shop-controls{align-items:stretch}}


/* Match the index page's solid black background. */
html,
body {
  background-color: #000;
}

/* Keep the shared header above the shop toolbar. */
#header {
  position: sticky;
  top: 0;
  z-index: 1000;
}

/* Match the shared header: bg-slate-900/60 + backdrop blur. */
.shop-controls {
  position: sticky;
  top: var(--shop-header-height, 64px);
  z-index: 900;

  background-color: rgb(15 23 42 / 60%);
  -webkit-backdrop-filter: blur(8px);
  backdrop-filter: blur(8px);

  border: 1px solid rgb(30 41 59 / 80%);
  border-left: 0;
  border-right: 0;

  padding: 0.75rem;
  margin: 1rem -0.75rem;

  font-family: 'Space Mono', monospace;
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.025em;
  color: #cbd5e1;

  box-shadow: none;
}

/* Header-style labels. */
.shop-control-group label {
  font: inherit;
  color: #cbd5e1;
}

/* Consistent header-style buttons and dropdowns. */
.shop-controls .shop-button,
.shop-controls .shop-select {
  box-sizing: border-box;
  min-height: 36px;
  padding: 0 0.65rem;

  background-color: #1e293b;
  border: 1px solid #334155;
  border-radius: 8px;

  color: #cbd5e1;
  font-family: 'Space Mono', monospace;
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.025em;

  transition:
    background-color 150ms ease,
    border-color 150ms ease,
    color 150ms ease,
    box-shadow 150ms ease;
}

/* Make icon-only layout buttons the same size as header icons. */
.shop-controls .shop-button {
  min-width: 36px;
  cursor: pointer;
}

/* Match the header's slate hover state. */
.shop-controls .shop-button:hover:not(:disabled),
.shop-controls .shop-select:hover {
  background-color: #334155;
  border-color: #475569;
}

/* Preserve the neon highlight on the selected layout. */
.shop-controls .shop-button[aria-pressed="true"] {
  color: #00f0ff;
}
/* Pagination: same 36px-high slate controls and technical type as the header. */
.shop-pagination {
  font-family: 'Space Mono', monospace;
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.025em;
  color: #cbd5e1;
}
.shop-pagination .shop-button {
  box-sizing: border-box;
  min-height: 36px;
  padding: 0 0.85rem;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background-color: #1e293b;
  border: 1px solid #334155;
  border-radius: 8px;
  color: #cbd5e1;
  font: inherit;
  transition: background-color 150ms ease, border-color 150ms ease, color 150ms ease;
}
.shop-pagination .shop-button:hover:not(:disabled) {
  background-color: #334155;
  border-color: #00f0ff;
  color: #00f0ff;
}
.shop-pagination .shop-button:focus-visible {
  outline: 2px solid #ff10f0;
  outline-offset: 2px;
}
.shop-pagination .shop-button:disabled { opacity: 0.35; cursor: not-allowed; }
.shop-pagination #page-status { font: inherit; color: #cbd5e1; text-align: center; }

/* Darken the shared header as the shop options bar approaches. */
#header > header {
  background-color: rgb(
    15 23 42 / var(--shop-header-opacity, 0.6)
  );

  transition: background-color 120ms linear;
}

/* Desktop: show the existing layout buttons. */
.shop-view-buttons {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 0.65rem;
}

.shop-view-mobile {
  display: none;
}

/* Tablet and mobile: replace buttons with a dropdown. */
@media (max-width: 768px) {
  .shop-view-buttons {
    display: none;
  }

  .shop-view-mobile {
    display: flex;
    align-items: center;
    gap: 0.65rem;
  }

  .shop-view-mobile label {
    color: #cbd5e1;
    font-family: 'Space Mono', monospace;
    font-size: 0.75rem;
    font-weight: 700;
    letter-spacing: 0.025em;
  }

  .shop-view-mobile .shop-select {
    min-height: 36px;
    max-width: 100%;
    background-color: #1e293b;
    border: 1px solid #334155;
    border-radius: 8px;
    color: #00f0ff;
    font-family: 'Space Mono', monospace;
    font-size: 0.75rem;
    font-weight: 700;
    box-shadow: 0 0 0 1px #00f0ff;
  }
}

/* Reduce empty space below the men's shop pagination. */
.shop-shell {
  padding-bottom: 1.5rem;
}

.shop-pagination {
  margin-bottom: 0;
}

/* Compact sticky options bar */
.shop-controls {
  padding-top: 0.35rem;
  padding-bottom: 0.35rem;

  /* Reduce the gap above and below the bar */
  margin-top: 0.75rem;
  margin-bottom: 0.5rem;

  gap: 0.5rem;
}

/* Keep all options-bar controls compact and consistent */
.shop-controls .shop-button,
.shop-controls .shop-select {
  min-height: 32px;
  padding-top: 0;
  padding-bottom: 0;
}

/* Tighter spacing between labels and controls */
.shop-controls .shop-control-group,
.shop-controls .shop-view-buttons,
.shop-controls .shop-view-mobile {
  gap: 0.4rem;
}

@media (max-width: 768px) {
  .shop-controls {
    padding-top: 0.3rem;
    padding-bottom: 0.3rem;
    gap: 0.4rem;
  }
}

/* Match the collection description to the header navigation */
.shop-title + .shop-muted {
  font-family: 'Space Mono', monospace;
  font-size: 0.75rem; /* 12px */
  font-weight: 700;
  line-height: 1.5;
  letter-spacing: 0.025em;
  color: #cbd5e1;
  margin: 0;
}

/* Use the technical font for the breadcrumb above SHOP MEN */
.shop-kicker {
  font-family: 'Space Mono', monospace;
  font-size: 0.75rem; /* 12px */
  font-weight: 700;
  letter-spacing: 0.025em;
  color: #00f0ff; /* Retain neon cyan */
}


/* Contained SHOP MEN banner */
.shop-hero {
  position: relative;
  isolation: isolate;
  display: flex;
  align-items: center;
  width: 100%;
  min-height: 155px;
  padding: 1rem 1.5rem;
  margin-bottom: 0.75rem;
  overflow: hidden;

  background: #000;
  border: 1px solid rgb(51 65 85 / 70%);
  border-radius: 14px;
}

/* Keep all text above the decorative tiger */
.shop-hero-copy {
  position: relative;
  z-index: 2;
  width: 70%;
  min-width: 0;
}

.shop-hero .shop-title {
  margin: 0.25rem 0;
  font-size: clamp(2.5rem, 5vw, 4rem);
}

.shop-hero .shop-muted {
  margin: 0;
  font-family: 'Space Mono', monospace;
  font-size: 0.75rem;
  font-weight: 700;
  color: #cbd5e1;
}

/* Confine the animated tiger to the right of the banner */
.shop-hero-tiger {
  position: absolute;
  z-index: 1;
  top: 50%;
  right: 0;
  width: min(28%, 260px);
  height: auto;
  aspect-ratio: 1;
  transform: translateY(-50%);
  opacity: 0.85;
  pointer-events: none;
}

.shop-hero-tiger svg {
  display: block;
  width: 100%;
  height: 100%;
  max-width: 100%;
  filter: drop-shadow(0 0 12px rgb(255 16 240 / 30%));
}

/* Ensure the options bar and products occupy their own rows */
.shop-shell > .shop-controls,
.shop-shell > #product-grid,
.shop-shell > .shop-pagination {
  width: 100%;
}

/* Mobile adjustments */
@media (max-width: 600px) {
  .shop-hero {
    min-height: 125px;
    padding: 0.75rem 1rem;
  }

  .shop-hero-copy {
    width: 76%;
  }

  .shop-hero .shop-title {
    font-size: clamp(2rem, 8vw, 3rem);
  }

  .shop-hero-tiger {
    right: -5%;
    width: 38%;
    opacity: 0.55;
  }
}

/* ==========================================================
   SHOP MEN — HOMEPAGE-STYLE AMBIENT GLOW
   ========================================================== */

.shop-hero {
  position: relative;
  isolation: isolate;
  overflow: hidden;

  /* Same translucent black glass effect as the homepage card */
  background: rgba(0, 0, 0, 0.4);
  -webkit-backdrop-filter: blur(12px);
  backdrop-filter: blur(12px);

  border: 1px solid rgba(255, 255, 255, 0.1);
  box-shadow:
    0 0 24px rgba(0, 0, 0, 0.45),
    0 0 24px rgba(99, 102, 241, 0.08);
}

/* Indigo glow in the upper-left corner */
.shop-hero::before {
  content: "";
  position: absolute;
  z-index: 0;
  width: 288px;
  height: 288px;
  top: -96px;
  left: -96px;

  background: rgba(99, 102, 241, 0.1);
  border-radius: 50%;
  filter: blur(64px);
  pointer-events: none;
}

/* Orange glow in the lower-right corner */
.shop-hero::after {
  content: "";
  position: absolute;
  z-index: 0;
  width: 288px;
  height: 288px;
  right: -96px;
  bottom: -96px;

  background: rgba(249, 115, 22, 0.1);
  border-radius: 50%;
  filter: blur(64px);
  pointer-events: none;
}

/* Keep the text and tiger above the ambient glow */
.shop-hero-copy {
  position: relative;
  z-index: 2;
}

.shop-hero-tiger {
  z-index: 1;
}

/* Retain the tiger's own neon glow */
.shop-hero-tiger svg {
  filter: drop-shadow(0 0 16px rgba(255, 16, 240, 0.35));
}

/* ==========================================================
   MEN'S SHOP — EDGE-TO-EDGE OPTIONS BAR AND SECTION SPACING
   ========================================================== */
.shop-shell {
  width: min(1440px, 100%);
  box-sizing: border-box;
  margin-inline: auto;
  padding: 0.75rem 1.25rem 0;
}
.shop-hero { margin: 0; }
.shop-controls {
  position: sticky;
  top: var(--shop-header-height, 56px);
  z-index: 900;
  display: block;
  width: 100%;
  box-sizing: border-box;
  margin: 0.75rem 0 0;
  padding: 0;
  background: rgb(15 23 42 / 60%);
  -webkit-backdrop-filter: blur(8px);
  backdrop-filter: blur(8px);
  border: 0;
  border-top: 1px solid rgb(30 41 59 / 80%);
  border-bottom: 1px solid rgb(30 41 59 / 80%);
  border-radius: 0;
}
.shop-controls-inner {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 0.5rem;
  box-sizing: border-box;
  width: min(1440px, 100%);
  margin-inline: auto;
  padding: 0.35rem 1.25rem;
}
.shop-products-shell {
  padding-top: 0.75rem;
  padding-bottom: 1.5rem;
}
#product-grid { width: 100%; margin-top: 0; }
@media (max-width: 768px) {
  .shop-shell { padding-top: 0.625rem; }
  .shop-controls { margin-top: 0.625rem; }
  .shop-controls-inner { gap: 0.4rem; padding-block: 0.3rem; }
  .shop-products-shell { padding-top: 0.625rem; }
}

/* ==========================================================
   RESPONSIVE SHOP OPTIONS
   ========================================================== */

/* Tablet / smaller devices:
   Hide VIEW, leaving SHOW + SORT */
@media (max-width: 768px) {

  .shop-view-group {
    display: none !important;
  }

  .shop-controls-inner {
    flex-wrap: nowrap;
  }

  .shop-controls-inner > .shop-control-group {
    width: 100%;
    flex-wrap: nowrap;
    justify-content: flex-end;
  }

  .shop-controls .shop-select {
    min-width: 0;
    max-width: 100%;
  }
}


/* Small phones:
   Hide SHOW as well, leaving SORT only */
@media (max-width: 480px) {

  label[for="page-size"],
  #page-size {
    display: none !important;
  }

  .shop-controls-inner > .shop-control-group {
    justify-content: flex-end;
  }
}

/* VIEW PRODUCT — equal left/right/bottom spacing */
.shop-card .shop-link {
  display: block;
  width: 100%;
  box-sizing: border-box;
  margin-top: 0.6rem;
  margin-bottom: 0;
  text-align: center;
}

/* ==========================================================
   PRODUCT STATUS + PRICE ROW
   ========================================================== */
.shop-meta-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  width: 100%;
  margin: 0.6rem 0;
}

.shop-stock {
  font-family: 'Space Mono', monospace;
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  white-space: nowrap;
}

.shop-stock.is-stock { color: var(--green); }
.shop-stock.is-coming { color: #94a3b8; }

.shop-meta-row .shop-price {
  margin: 0 0 0 auto;
  text-align: right;
  white-space: nowrap;
  color: var(--green);
  font-size: 1rem;
}

.shop-meta-row:has(.is-coming) .shop-price {
  color: #cbd5e1;
}

/* ==========================================================
   PRODUCT CARDS — COMPACT + CONSISTENT SPACING
   ========================================================== */

.shop-card {
  display: flex;
  flex-direction: column;
  height: 100%;
}

.shop-card > img {
  flex-shrink: 0;
}

.shop-card-content {
  display: flex;
  flex-direction: column;
  flex: 1;

  /* Reduce overall card padding */
  padding: 0.75rem;

  /* Consistent spacing between title, description and status */
  gap: 6px;
}

/* Remove margins that interfere with the gap */
.shop-card-content h2,
.shop-card-content > p,
.shop-meta-row {
  margin: 0;
}


/* PRODUCT TITLE
   Reserve two lines so all cards remain aligned */
.shop-card-content h2 {
  line-height: 1.35;
  min-height: 2.7em;
}


/* DESCRIPTION
   Reserve two lines so all cards remain aligned */
.shop-card-content > p {
  line-height: 1.4;
  min-height: 2.8em;
}


/* STOCK STATUS + PRICE */
.shop-meta-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.5rem;
  width: 100%;
}


/* VIEW PRODUCT / COMING SOON BUTTON */
.shop-card .shop-link {
  display: flex;
  align-items: center;
  justify-content: center;

  width: 100%;
  min-height: 42px;
  box-sizing: border-box;

  /* Push button to bottom */
  margin-top: auto;
  margin-bottom: 0;

  text-align: center;
}


/* COMPACT VIEW — slightly tighter again */
.shop-grid[data-layout="compact"] .shop-card-content {
  padding: 0.65rem;
  gap: 5px;
}

.shop-grid[data-layout="compact"] .shop-card .shop-link {
  min-height: 40px;
}

.shop-card-content h2 {
  line-height: 1.35;
  min-height: 1.35em;
}

.shop-card-content > p {
  line-height: 1.5;
  min-height: 3em;
}

/* ==========================================================
   FAVOURITES — PRODUCT TILE + HEADER
   ========================================================== */

.shop-card-image-wrap {
  position: relative;
}

.shop-card-image-wrap > img {
  display: block;
  width: 100%;
  aspect-ratio: 4 / 5;
  object-fit: cover;
  background: #10131b;
}

.favourite-button {
  position: absolute;
  top: 0.65rem;
  right: 0.65rem;
  z-index: 2;
  width: 36px;
  height: 36px;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  border: 1px solid #475569;
  border-radius: 8px;
  background: rgb(15 23 42 / 82%);
  color: #cbd5e1;
  cursor: pointer;
  -webkit-backdrop-filter: blur(8px);
  backdrop-filter: blur(8px);
  transition: color 150ms ease, border-color 150ms ease, background-color 150ms ease, box-shadow 150ms ease, transform 150ms ease;
}

.favourite-button svg {
  width: 18px;
  height: 18px;
  fill: none;
  stroke: currentColor;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.favourite-button:hover,
.favourite-button:focus-visible,
.favourite-button.is-favourite {
  color: #39ff14;
  border-color: #39ff14;
  background: rgb(15 23 42 / 94%);
  box-shadow: 0 0 12px rgb(57 255 20 / 55%);
}

.favourite-button.is-favourite svg {
  fill: #39ff14;
  filter: drop-shadow(0 0 5px rgb(57 255 20 / 80%));
}

.favourite-button:active {
  transform: scale(0.92);
}

/* The shared header tiger makes room for Search / Favourites / Basket / Menu on phones. */
@media (max-width: 640px) {
  .header-tiger-icon {
    display: none !important;
  }
}

/* ==========================================================
   SHOP INTERACTIONS — INFINITE SCROLL / QUICK VIEW / COLOURS
   ========================================================== */

/* Favourites now use NEÓN TIGRE pink. */
.favourite-button:hover,
.favourite-button:focus-visible,
.favourite-button.is-favourite {
  color: #ff10f0;
  border-color: #ff10f0;
  background: rgb(15 23 42 / 94%);
  box-shadow: 0 0 12px rgb(255 16 240 / 55%);
}
.favourite-button.is-favourite svg {
  fill: #ff10f0;
  filter: drop-shadow(0 0 5px rgb(255 16 240 / 80%));
}

/* Image quick-view area is deliberately NOT a product-page link. */
.shop-card-image-wrap { overflow: hidden; }
.shop-image-arrow {
  position: absolute; top: 50%; z-index: 3; transform: translateY(-50%);
  width: 32px; height: 42px; padding: 0; border: 1px solid rgb(71 85 105 / 80%);
  background: rgb(15 23 42 / 78%); color: #fff; font: 700 24px/1 'Space Mono', monospace;
  cursor: pointer; opacity: 0; transition: opacity 150ms ease, border-color 150ms ease, color 150ms ease;
  -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px);
}
.shop-image-prev { left: 0.5rem; border-radius: 8px; }
.shop-image-next { right: 0.5rem; border-radius: 8px; }
.shop-card-image-wrap:hover .shop-image-arrow:not([hidden]),
.shop-image-arrow:focus-visible { opacity: 1; }
.shop-image-arrow:hover { color: #00f0ff; border-color: #00f0ff; }
.shop-image-arrow[hidden] { display: none !important; }
.shop-image-dots {
  position: absolute; z-index: 3; left: 50%; bottom: 0.55rem; transform: translateX(-50%);
  display: flex; gap: 5px; padding: 5px 7px; border-radius: 999px; background: rgb(15 23 42 / 62%);
}
.shop-image-dots[hidden] { display: none !important; }
.shop-image-dot { width: 5px; height: 5px; border-radius: 50%; background: #64748b; }
.shop-image-dot.is-active { background: #00f0ff; box-shadow: 0 0 6px rgb(0 240 255 / 75%); }
@media (hover: none) { .shop-image-arrow:not([hidden]) { opacity: 0.9; } }

/* Compact colour swatches. */
.shop-colours { display: flex; align-items: center; justify-content: flex-end; gap: 7px; min-height: 18px; width: 100%; }
.shop-colour-swatch {
  width: 15px; height: 15px; padding: 0; border: 1px solid #64748b; border-radius: 50%;
  background: var(--swatch); cursor: pointer; box-shadow: inset 0 0 0 1px rgb(0 0 0 / 30%);
  transition: transform 120ms ease, outline-color 120ms ease, box-shadow 120ms ease;
}
.shop-colour-swatch:hover { transform: scale(1.12); }
.shop-colour-swatch.is-selected { outline: 1px solid #fff; outline-offset: 2px; box-shadow: 0 0 7px rgb(255 255 255 / 35%); }

/* The information region is the product-page link for live products. */
.shop-card { transition: border-color 180ms ease, box-shadow 180ms ease; }
.shop-card.is-live .shop-card-content { cursor: pointer; }
.shop-card.is-live:has(.shop-card-content:hover),
.shop-card.is-live:has(.shop-card-content:focus-visible) {
  border-color: #ffd700;
  box-shadow: 0 0 0 1px rgb(255 215 0 / 22%), 0 0 18px rgb(255 215 0 / 12%);
}
.shop-card-content h2 { transition: color 180ms ease, text-shadow 180ms ease; }
.shop-card.is-live .shop-card-content:hover h2,
.shop-card.is-live .shop-card-content:focus-visible h2 {
  color: #ffd700;
  text-shadow: 0 0 8px rgb(255 215 0 / 55%);
}
.shop-card-content:focus-visible { outline: none; }

/* Old VIEW PRODUCT link is no longer used. */
.shop-card .shop-link { display: none; }

/* Infinite-scroll trigger and subtle loading state. */
.shop-scroll-sentinel { width: 100%; height: 1px; }
.shop-loading {
  padding: 1rem 0 0.25rem; text-align: center; color: #00f0ff;
  font: 700 0.7rem 'Space Mono', monospace; letter-spacing: 0.08em;
  text-shadow: 0 0 8px rgb(0 240 255 / 55%);
}
.shop-loading[hidden] { display: none; }

/* With SHOW removed, SORT remains aligned to the right. */
.shop-sort-group { margin-left: auto; }

/* Slightly tighter card rhythm now there is no VIEW PRODUCT button. */
.shop-card-content { padding: 0.7rem; gap: 6px; }
.shop-grid[data-layout="compact"] .shop-card-content { padding: 0.6rem; gap: 5px; }

@media (max-width: 768px) {
  .shop-sort-group { width: auto !important; margin-left: auto; }
}

/* Header quantity badges: favourites = pink -> cyan pulse; basket = cyan -> green pulse. */
.header-quantity-badge {
  transition: background-color 180ms ease, box-shadow 180ms ease, transform 180ms ease;
  transform-origin: center;
}
.header-favourites-badge {
  background: #ff10f0 !important;
  box-shadow: 0 0 8px rgb(255 16 240 / 65%);
}
.header-basket-badge {
  background: #00f0ff !important;
  box-shadow: 0 0 8px rgb(0 240 255 / 65%);
}
.header-favourites-badge.quantity-updated {
  background: #00f0ff !important;
  box-shadow: 0 0 12px rgb(0 240 255 / 90%);
  animation: header-quantity-pop 420ms ease-out;
}
.header-basket-badge.quantity-updated {
  background: #39ff14 !important;
  box-shadow: 0 0 12px rgb(57 255 20 / 90%);
  animation: header-quantity-pop 420ms ease-out;
}
@keyframes header-quantity-pop {
  0% { transform: scale(1); }
  42% { transform: scale(1.45); }
  100% { transform: scale(1); }
}
@media (prefers-reduced-motion: reduce) {
  .header-favourites-badge.quantity-updated,
  .header-basket-badge.quantity-updated { animation: none; }
}

/* Layout selector: each active view uses its own NEÓN TIGRE neon colour. */
.shop-controls .shop-button[data-layout-choice="compact"][aria-pressed="true"] {
  color: #00f0ff;
  border-color: #00f0ff;
  box-shadow: 0 0 0 1px #00f0ff;
}
.shop-controls .shop-button[data-layout-choice="standard"][aria-pressed="true"] {
  color: #ff10f0;
  border-color: #ff10f0;
  box-shadow: 0 0 0 1px #ff10f0;
}
.shop-controls .shop-button[data-layout-choice="large"][aria-pressed="true"] {
  color: #39ff14;
  border-color: #39ff14;
  box-shadow: 0 0 0 1px #39ff14;
}


/* ==========================================================
   EMPTY COLLECTION / COMING SOON STATE
   Keeps an empty department visually anchored below the
   options bar instead of leaving the page with no product area.
   ========================================================== */
.shop-grid.is-empty {
  display: block;
  min-height: clamp(300px, 48vh, 560px);
}

.shop-coming-soon {
  position: relative;
  min-height: clamp(300px, 48vh, 560px);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  text-align: center;
  border: 1px solid rgb(51 65 85 / 75%);
  border-radius: 12px;
  background:
    linear-gradient(135deg, rgb(0 240 255 / 4%), transparent 35%),
    linear-gradient(315deg, rgb(255 16 240 / 5%), transparent 40%),
    #0c1019;
}

.shop-coming-soon-glow {
  position: absolute;
  width: min(55vw, 520px);
  aspect-ratio: 1;
  border-radius: 999px;
  background: radial-gradient(circle, rgb(255 16 240 / 12%), transparent 65%);
  filter: blur(12px);
  pointer-events: none;
}

.shop-coming-soon-kicker,
.shop-coming-soon h2,
.shop-coming-soon > p:last-child {
  position: relative;
  z-index: 1;
}

.shop-coming-soon-kicker {
  margin: 0 0 0.7rem;
  color: #00f0ff;
  font-family: 'Space Mono', monospace;
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.24em;
}

.shop-coming-soon h2 {
  margin: 0;
  font-family: 'Rubik Glitch', sans-serif;
  font-size: clamp(2.8rem, 9vw, 6.5rem);
  font-weight: 400;
  line-height: 1;
  color: #ff10f0;
  text-shadow: 0 0 24px rgb(255 16 240 / 35%);
}

.shop-coming-soon > p:last-child {
  margin: 1rem 1rem 0;
  color: #94a3b8;
  font-family: 'Space Mono', monospace;
  font-size: clamp(0.65rem, 1.8vw, 0.8rem);
  letter-spacing: 0.1em;
}

@media (max-width: 600px) {
  .shop-grid.is-empty,
  .shop-coming-soon {
    min-height: 340px;
  }
}

/* Requested alignment: price at the right edge of the product metadata row. */
.shop-meta-row .shop-price{margin-left:auto;text-align:right}


/* ==========================================================
   SHOP SECTION RHYTHM — canonical layout
   Keep this as the single final authority for vertical spacing.
   ========================================================== */
:root {
  --shop-section-gap: 0.75rem;
}

main.shop-shell:not(.shop-products-shell) {
  margin-bottom: 0;
  padding-bottom: 0;
}

main.shop-shell:not(.shop-products-shell) > .shop-hero {
  margin-bottom: 0;
}

/* Equal section rhythm: SHOP banner -> OPTIONS uses the same 12px
   spacing as OPTIONS -> product grid / empty collection panel. */
body > .shop-controls {
  margin: 0.75rem 0 0;
}

main.shop-products-shell {
  margin-top: 0;
  padding-top: var(--shop-section-gap);
}

main.shop-products-shell > #product-grid,
main.shop-products-shell > #product-grid.is-empty,
main.shop-products-shell > #product-grid > .shop-coming-soon {
  margin-top: 0;
}

main.shop-products-shell > #product-grid.is-empty {
  padding-top: 0;
  gap: 0;
}

@media (max-width: 768px) {
  :root {
    --shop-section-gap: 0.625rem;
  }
}


/* ==========================================================
   SHOP FLEX LAYOUT FIX
   style.css globally sets every <main> to flex:1. Shop pages contain TWO
   separate <main> elements with the OPTIONS bar between them. On short/empty
   departments the browser therefore stretches the first (hero) <main>,
   creating a false large gap above OPTIONS. Populated departments overflow
   the viewport, so the problem is hidden there.
   ========================================================== */

/* Never allow the hero's <main> wrapper to absorb spare viewport height. */
body > main.shop-shell:not(.shop-products-shell) {
  flex: 0 0 auto;
}

/* Let the lower products area take any remaining height instead. This keeps
   the footer at the bottom without moving OPTIONS away from the hero. */
body > main.shop-shell.shop-products-shell {
  flex: 1 0 auto;
}


/* ==========================================================
   V33 — unified SHOP / FAVOURITES / BASKET shell positioning
   The original compact shop.css starts with `.shop-shell { margin:auto; }`.
   In the site's column-flex body, those TOP/BOTTOM auto margins absorb spare
   viewport height on short pages. That vertically centres FAVOURITES/BASKET
   and creates the large header-to-hero gap. Later `margin-inline:auto` rules
   only reset left/right, so the vertical auto margins survive.
   ========================================================== */

body > main.shop-shell {
  margin-top: 0 !important;
  margin-bottom: 0 !important;
  margin-left: auto;
  margin-right: auto;
}

/* Favourites and Basket keep the same hero -> panel rhythm as Shop. */
body > main.favourites-hero-shell > .shop-hero,
body > main.basket-hero-shell > .shop-hero {
  margin-bottom: 0 !important;
}

body > main.favourites-hero-shell > .favourites-panel,
body > main.basket-hero-shell > .basket-panel {
  margin-top: var(--shop-section-gap) !important;
}

/* Their single main may fill the remaining page height, but it must start
   directly below the header rather than centring itself vertically. */
body > main.favourites-hero-shell,
body > main.basket-hero-shell {
  flex: 1 0 auto;
  align-self: stretch;
}


/* ==========================================================
   V38 — disable OPTIONS when there are no products
   ========================================================== */
.shop-controls.is-disabled .shop-controls-inner,
.favourites-view-options.is-disabled {
  opacity: .32;
}

.shop-controls.is-disabled button,
.shop-controls.is-disabled select,
.favourites-view-options.is-disabled button,
.favourites-view-options.is-disabled select {
  cursor: default !important;
  pointer-events: none !important;
}

.shop-controls.is-disabled .shop-button,
.favourites-view-options.is-disabled .shop-button {
  color: #64748b !important;
  border-color: #334155 !important;
  background: transparent !important;
  box-shadow: none !important;
  transform: none !important;
}

.shop-controls.is-disabled select {
  color: #64748b !important;
  border-color: #334155 !important;
}


/* ==========================================================
   V39 — no active-options flash while catalogue state loads
   Controls start disabled in HTML and are enabled by JS only
   after products are confirmed to exist.
   ========================================================== */
.shop-controls.is-disabled,
.favourites-view-options.is-disabled {
  user-select: none;
}

.shop-controls.is-disabled *,
.favourites-view-options.is-disabled * {
  pointer-events: none !important;
}


/* ==========================================================
   V40 — empty OPTIONS use one immediate disabled visual state
   V38 combined parent opacity with a second button colour change.
   Because the buttons have colour/border transitions, that could look
   like the controls greyed out twice. Keep one visual treatment only.
   ========================================================== */
.shop-controls.is-disabled .shop-controls-inner,
.favourites-view-options.is-disabled {
  opacity: .32 !important;
  transition: none !important;
}

.shop-controls.is-disabled button,
.shop-controls.is-disabled select,
.favourites-view-options.is-disabled button,
.favourites-view-options.is-disabled select {
  /* Preserve the normal button palette underneath the parent opacity.
     The parent opacity alone supplies the disabled appearance. */
  transition: none !important;
  pointer-events: none !important;
  cursor: default !important;
}

/* Undo V38's second layer of per-button greying. */
.shop-controls.is-disabled .shop-button,
.favourites-view-options.is-disabled .shop-button {
  color: #cbd5e1 !important;
  border-color: #334155 !important;
  background: transparent !important;
  box-shadow: none !important;
  transform: none !important;
}


/* ==========================================================
   V41 — one and only one disabled dimming layer
   Native :disabled styling was still stacking with the group opacity.
   Keep the real disabled attribute for accessibility/interaction, but
   neutralise per-control opacity so only the parent group is dimmed.
   ========================================================== */
.shop-controls.is-disabled .shop-controls-inner,
.favourites-view-options.is-disabled {
  opacity: .32 !important;
  transition: none !important;
}

.shop-controls.is-disabled button:disabled,
.shop-controls.is-disabled select:disabled,
.favourites-view-options.is-disabled button:disabled,
.favourites-view-options.is-disabled select:disabled {
  opacity: 1 !important;
  filter: none !important;
  transition: none !important;
}

.shop-controls.is-disabled select:disabled,
.favourites-view-options.is-disabled select:disabled {
  -webkit-text-fill-color: currentColor;
}

/* V42 gift-card shop cards */
body[data-department="gift_cards"] .shop-card-image-wrap{background:linear-gradient(135deg,#05070c,#111827);border-color:#3f3f46}
body[data-department="gift_cards"] .shop-card-image{opacity:0}
body[data-department="gift_cards"] .shop-card-image-wrap::before{content:"NEÓN TIGRE";position:absolute;inset:0;display:grid;place-items:center;font-family:"Rubik Glitch",sans-serif;font-size:clamp(1.6rem,4vw,3.4rem);color:#fff;text-shadow:0 0 18px #ff10f055;z-index:1}
body[data-department="gift_cards"] .shop-card-image-wrap::after{content:"DIGITAL GIFT CARD";position:absolute;left:1rem;bottom:1rem;font-family:"Space Mono",monospace;font-size:.62rem;letter-spacing:.15em;color:#FFD700;z-index:1}
body[data-department="gift_cards"] .favourite-button,
body[data-department="gift_cards"] .shop-image-arrow,
body[data-department="gift_cards"] .shop-image-dots{display:none!important}


/* ==========================================================
   V43 — NEÓN TIGRE neon/glitch shop hero
   Shared by MEN / WOMEN / KIDS / ACCESSORIES / GIFT CARDS /
   FAVOURITES / BASKET.
   ========================================================== */
.shop-hero {
  overflow: hidden;
  isolation: isolate;
  background:
    radial-gradient(circle at 88% 42%, rgba(255,16,240,.13), transparent 26%),
    radial-gradient(circle at 76% 58%, rgba(0,240,255,.10), transparent 30%),
    #000 !important;
}

.shop-hero .shop-title {
  position: relative;
  display: inline-block;
  color: #fff !important;
  text-shadow:
    -3px 0 0 rgba(0,240,255,.78),
     3px 0 0 rgba(255,16,240,.72),
     0 0 20px rgba(255,255,255,.10);
  filter: contrast(1.12);
  animation: nt-title-glitch 5.5s steps(1,end) infinite;
}

@keyframes nt-title-glitch {
  0%, 89%, 93%, 100% { transform: translate(0,0); text-shadow:-3px 0 0 rgba(0,240,255,.78),3px 0 0 rgba(255,16,240,.72),0 0 20px rgba(255,255,255,.10); }
  90% { transform: translate(-2px,1px); text-shadow:5px 0 0 rgba(0,240,255,.9),-5px 0 0 rgba(255,16,240,.9); }
  91% { transform: translate(3px,-1px); text-shadow:-6px 0 0 rgba(0,240,255,.9),5px 0 0 rgba(255,16,240,.9); }
  92% { transform: translate(-1px,0); text-shadow:3px 0 0 rgba(57,255,20,.7),-3px 0 0 rgba(255,16,240,.85); }
}

.shop-hero-tiger {
  width: min(34%, 430px) !important;
  right: 1.5% !important;
  opacity: 1 !important;
  transform: scale(1.12);
  transform-origin: center;
}

.shop-hero-tiger::before {
  content: "";
  position: absolute;
  inset: -35% -55%;
  z-index: -1;
  background:
    linear-gradient(102deg, transparent 30%, rgba(0,240,255,.16) 43%, transparent 48%),
    linear-gradient(78deg, transparent 48%, rgba(255,16,240,.18) 55%, transparent 61%),
    radial-gradient(circle, rgba(124,58,237,.22), transparent 58%);
  filter: blur(8px);
  animation: nt-tiger-beams 6s ease-in-out infinite alternate;
}

.shop-hero-tiger svg {
  width: 100% !important;
  height: 100% !important;
  filter:
    drop-shadow(0 0 8px rgba(0,240,255,.55))
    drop-shadow(0 0 14px rgba(255,16,240,.42))
    drop-shadow(0 0 26px rgba(124,58,237,.28)) !important;
  animation: nt-tiger-pulse 4.8s ease-in-out infinite alternate;
}

@keyframes nt-tiger-pulse {
  from { transform: scale(1); filter:drop-shadow(0 0 8px rgba(0,240,255,.50)) drop-shadow(0 0 14px rgba(255,16,240,.38)) drop-shadow(0 0 24px rgba(124,58,237,.24)); }
  to   { transform: scale(1.025); filter:drop-shadow(0 0 13px rgba(0,240,255,.72)) drop-shadow(0 0 22px rgba(255,16,240,.55)) drop-shadow(0 0 34px rgba(124,58,237,.36)); }
}

@keyframes nt-tiger-beams {
  from { transform: translate3d(-2%,0,0) scale(.98); opacity:.72; }
  to   { transform: translate3d(2%,0,0) scale(1.04); opacity:1; }
}

@media (prefers-reduced-motion: reduce) {
  .shop-hero .shop-title,
  .shop-hero-tiger svg,
  .shop-hero-tiger::before { animation: none !important; }
}

@media (max-width: 768px) {
  .shop-hero-tiger { width: 42% !important; right: -7% !important; transform: scale(1.05); opacity: .78 !important; }
  .shop-hero .shop-title { text-shadow:-2px 0 0 rgba(0,240,255,.7),2px 0 0 rgba(255,16,240,.68); }
}


/* ==========================================================
   V45 — restore hero tiger vertical centering
   V43's scale override replaced the original translateY(-50%),
   leaving the absolutely positioned tiger anchored from its midpoint
   and therefore pushed down / clipped.
   ========================================================== */
.shop-hero-tiger {
  top: 50% !important;
  transform: translateY(-50%) scale(1.12) !important;
  transform-origin: center center !important;
}

@media (max-width: 768px) {
  .shop-hero-tiger {
    transform: translateY(-50%) scale(1.05) !important;
  }
}


/* ==========================================================
   V46 — detailed user-supplied tiger artwork
   ========================================================== */
.shop-hero-tiger .shop-hero-tiger-svg {
  display:block;
  width:100% !important;
  height:100% !important;
  overflow:visible;
}

/* The supplied artwork is monochrome; the existing layered drop-shadows
   provide the cyan/magenta/purple neon treatment without removing its
   additional internal line detail. */
.shop-hero-tiger .shop-hero-tiger-svg path,
.shop-hero-tiger .shop-hero-tiger-svg polygon,
.shop-hero-tiger .shop-hero-tiger-svg polyline,
.shop-hero-tiger .shop-hero-tiger-svg line {
  vector-effect: non-scaling-stroke;
}


/* ==========================================================
   V48 — show real Supabase gift-card artwork
   The V42 placeholder treatment deliberately hid .shop-card-image
   and drew a CSS NEÓN TIGRE card instead. Gift-card images are now
   stored in product_images, so the real catalogue image should render.
   ========================================================== */
body[data-department="gift_cards"] .shop-card-image-wrap {
  background: #05070c !important;
  border-color: #3f3f46;
}

body[data-department="gift_cards"] .shop-card-image {
  opacity: 1 !important;
  display: block !important;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

body[data-department="gift_cards"] .shop-card-image-wrap::before,
body[data-department="gift_cards"] .shop-card-image-wrap::after {
  content: none !important;
  display: none !important;
}

/* Gift cards have one digital artwork/variant, so carousel/favourite
   chrome remains hidden as intended. */
body[data-department="gift_cards"] .favourite-button,
body[data-department="gift_cards"] .shop-image-arrow,
body[data-department="gift_cards"] .shop-image-dots {
  display: none !important;
}


/* ==========================================================
   V52 — GIFT CARDS: use the normal SHOP favourite heart
   Gift-card denominations are separate products, so each heart
   is value-dependent automatically via product.id.
   ========================================================== */
body[data-department="gift_cards"] .favourite-button {
  display: flex !important;
}

body[data-department="gift_cards"] .shop-image-arrow,
body[data-department="gift_cards"] .shop-image-dots {
  display: none !important;
}

.nt-size-modal[hidden]{display:none!important}.nt-size-modal{position:fixed;inset:0;z-index:6000;display:flex;align-items:center;justify-content:center;background:rgba(0,0,0,.8);padding:1rem}.nt-size-dialog{width:min(36rem,100%);border:1px solid #334155;border-radius:16px;background:#020617;padding:1.5rem;box-shadow:0 25px 60px rgba(0,0,0,.55);font-family:"Space Mono",monospace}.nt-size-dialog-head{display:flex;align-items:flex-start;justify-content:space-between;gap:1rem;margin-bottom:1.25rem}.nt-size-dialog-head h2{font-family:"Rubik Glitch",sans-serif;font-size:1.5rem;margin:0}.nt-size-dialog-head button{border:0;background:transparent;color:#fff;font-size:1.75rem;cursor:pointer}.nt-size-product{font-size:.75rem;color:#cbd5e1;margin:0 0 1rem}.nt-size-options{display:flex;flex-wrap:wrap;gap:.55rem;border:1px solid #334155;border-radius:12px;padding:1rem}.nt-size-options button{min-width:52px;border:1px solid #475569;border-radius:10px;background:#0f172a;color:#fff;padding:.7rem .8rem;font:700 .72rem "Space Mono",monospace;cursor:pointer}.nt-size-options button:hover,.nt-size-options button.is-selected{border-color:#ff10f0;color:#ff10f0;box-shadow:0 0 12px rgba(255,16,240,.18)}.nt-size-help{font-size:.68rem;color:#94a3b8;margin:1rem 0}.nt-size-dialog-actions{display:flex;flex-wrap:wrap;justify-content:flex-end;gap:.75rem}.nt-size-dialog-actions button{border:1px solid #475569;border-radius:12px;background:transparent;color:#fff;padding:.65rem 1rem;font:700 .72rem "Space Mono",monospace;cursor:pointer}.nt-size-dialog-actions [data-size-save]{background:#ff10f0;border-color:#ff10f0;color:#020617}.nt-size-dialog-actions button:disabled{background:#1e293b;border-color:#475569;color:#64748b;cursor:not-allowed}body.nt-modal-open{overflow:hidden}

/* V54 — colour + size selection */
.nt-option-label{margin:.85rem 0 .4rem;color:#94a3b8;font:700 .66rem "Space Mono",monospace;letter-spacing:.12em}
.nt-colour-options{display:flex;flex-wrap:wrap;gap:.55rem;border:1px solid #334155;border-radius:12px;padding:1rem}
.nt-colour-options button{display:flex;align-items:center;gap:.5rem;border:1px solid #475569;border-radius:10px;background:#0f172a;color:#fff;padding:.65rem .8rem;font:700 .7rem "Space Mono",monospace;cursor:pointer}
.nt-colour-options button:hover,.nt-colour-options button.is-selected{border-color:#00f0ff;color:#00f0ff;box-shadow:0 0 12px rgba(0,240,255,.15)}
.nt-colour-dot{width:.85rem;height:.85rem;border-radius:50%;background:var(--swatch);border:1px solid rgba(255,255,255,.45);flex:0 0 auto}
.nt-no-options{color:#64748b;font:700 .68rem "Space Mono",monospace}

/* V56 — popup basket/favourite actions */
.nt-size-dialog-actions [data-size-basket]{border-color:#FFD700;color:#FFD700;background:transparent}
.nt-size-dialog-actions [data-size-basket]:not(:disabled):hover{background:#FFD700;color:#020617;box-shadow:0 0 14px rgba(255,215,0,.18)}
.nt-size-dialog-actions [data-size-save]{background:transparent!important;border-color:#ff10f0!important;color:#ff10f0!important}
.nt-size-dialog-actions [data-size-save]:not(:disabled):hover{background:#ff10f0!important;color:#020617!important;box-shadow:0 0 14px rgba(255,16,240,.18)}
.nt-size-dialog-actions [data-size-basket]:disabled,.nt-size-dialog-actions [data-size-save]:disabled{background:#1e293b!important;border-color:#475569!important;color:#64748b!important;box-shadow:none!important}


/* V57 — force all three favourite-popup actions to be visible */
.nt-size-dialog{max-height:calc(100vh - 2rem);overflow:auto}
.nt-size-dialog-actions.nt-size-dialog-actions-three{
  display:grid!important;
  grid-template-columns:repeat(3,minmax(0,1fr))!important;
  gap:.65rem!important;
  width:100%!important;
  margin-top:1rem!important;
}
.nt-size-dialog-actions.nt-size-dialog-actions-three button{
  display:flex!important;
  align-items:center!important;
  justify-content:center!important;
  width:100%!important;
  min-width:0!important;
  min-height:44px!important;
  margin:0!important;
  padding:.65rem .7rem!important;
  border-radius:10px!important;
  font:700 .68rem "Space Mono",monospace!important;
  white-space:normal!important;
  text-align:center!important;
}
.nt-size-dialog-actions .nt-popup-basket{
  border:1px solid #FFD700!important;
  background:transparent!important;
  color:#FFD700!important;
}
.nt-size-dialog-actions .nt-popup-basket:not(:disabled):hover{
  background:#FFD700!important;color:#020617!important;
}
.nt-size-dialog-actions .nt-popup-favourite{
  border:1px solid #ff10f0!important;
  background:transparent!important;
  color:#ff10f0!important;
}
.nt-size-dialog-actions .nt-popup-favourite:not(:disabled):hover{
  background:#ff10f0!important;color:#020617!important;
}
.nt-size-dialog-actions .nt-popup-basket:disabled,
.nt-size-dialog-actions .nt-popup-favourite:disabled{
  border-color:#475569!important;background:#1e293b!important;color:#64748b!important;
}
@media(max-width:620px){
  .nt-size-dialog-actions.nt-size-dialog-actions-three{grid-template-columns:1fr!important}
}


/* ==========================================================
   V66 — FULL-WIDTH COLLECTION BANNERS
   ========================================================== */
.shop-hero-shell-full{width:100%;max-width:none;margin:0;padding:0;box-sizing:border-box}
.shop-hero-shell-full>.shop-hero{width:100%;min-height:160px;margin:0;padding-left:max(1.25rem,calc((100vw - 1440px)/2 + 1.25rem));padding-right:max(1.25rem,calc((100vw - 1440px)/2 + 1.25rem));border:0;border-bottom:1px solid rgba(30,41,59,.8);border-radius:0;box-shadow:0 14px 30px rgba(0,0,0,.24);box-sizing:border-box}
.shop-hero-shell-full>.shop-hero .shop-hero-copy{width:min(70%,980px)}
.shop-hero-shell-full>.shop-hero .shop-hero-tiger{right:max(1.25rem,calc((100vw - 1440px)/2 + 1.25rem))}
.shop-hero-shell-full+ .shop-controls,.shop-hero-shell-full~.shop-controls{margin-top:0}
.favourites-controls,.basket-controls-bar{position:sticky;top:var(--shop-header-height,56px);z-index:900;margin:0}
.favourites-toolbar-count,.basket-controls-bar .basket-heading-count,.basket-toolbar-label{display:inline-flex;align-items:center;color:#cbd5e1;font:700 .7rem/1 "Space Mono",monospace;letter-spacing:.08em}
.favourites-products-shell,.basket-content-shell{padding-top:.75rem}
@media(max-width:768px){.shop-hero-shell-full>.shop-hero{min-height:132px;padding-left:1.25rem;padding-right:1.25rem}.shop-hero-shell-full>.shop-hero .shop-hero-copy{width:76%}.shop-hero-shell-full>.shop-hero .shop-hero-tiger{right:-2%;}.favourites-products-shell,.basket-content-shell{padding-top:.625rem}}


/* ==========================================================
   V67 — TRUE EDGE-TO-EDGE HERO BANNERS
   The hero is now a full-width page band rather than a card.
   It sits directly between the shared header and the options bar.
   ========================================================== */
body > main.shop-hero-shell-full {
  display: block !important;
  flex: 0 0 auto !important;
  align-self: stretch !important;
  width: 100% !important;
  max-width: none !important;
  min-width: 0 !important;
  margin: 0 !important;
  padding: 0 !important;
  border: 0 !important;
  border-radius: 0 !important;
  box-shadow: none !important;
}

body > main.shop-hero-shell-full > .shop-hero {
  display: flex !important;
  align-items: center !important;
  width: 100% !important;
  max-width: none !important;
  min-height: 168px !important;
  margin: 0 !important;
  padding-top: 1.25rem !important;
  padding-bottom: 1.25rem !important;
  padding-left: max(1.25rem, calc((100vw - 1440px) / 2 + 1.25rem)) !important;
  padding-right: max(1.25rem, calc((100vw - 1440px) / 2 + 1.25rem)) !important;
  border: 0 !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  box-sizing: border-box !important;
}

/* Keep hero text on the same left edge as the header logo and options. */
body > main.shop-hero-shell-full > .shop-hero > .shop-hero-copy {
  width: min(70%, 980px) !important;
  margin: 0 !important;
  padding: 0 !important;
}

body > main.shop-hero-shell-full > .shop-hero > .shop-hero-tiger {
  right: max(1.25rem, calc((100vw - 1440px) / 2 + 1.25rem)) !important;
}

/* No black-page strip between header/banner/options. */
body > main.shop-hero-shell-full + .shop-controls,
body > main.shop-hero-shell-full ~ .shop-controls.favourites-controls,
body > main.shop-hero-shell-full ~ .shop-controls.basket-controls-bar {
  margin-top: 0 !important;
  margin-bottom: 0 !important;
}

/* The options bar itself is the dividing line at the bottom of the banner. */
body > .shop-controls {
  border-top: 1px solid rgb(30 41 59 / 80%) !important;
}

@media (max-width: 768px) {
  body > main.shop-hero-shell-full > .shop-hero {
    min-height: 138px !important;
    padding: 1rem 1.25rem !important;
  }
  body > main.shop-hero-shell-full > .shop-hero > .shop-hero-copy {
    width: 76% !important;
  }
  body > main.shop-hero-shell-full > .shop-hero > .shop-hero-tiger {
    right: -2% !important;
  }
}


/* ==========================================================
   V68 — STANDARD ARROWS + MINIMAL FAVOURITE HEART
   ========================================================== */
/* Match the homepage tile arrow language on product imagery: simple ← / → glyphs. */
.shop-image-arrow{
  width:40px!important;
  height:40px!important;
  padding:0!important;
  border:0!important;
  border-radius:0!important;
  background:transparent!important;
  color:#cbd5e1!important;
  font:700 1.2rem/1 "Space Mono",monospace!important;
  box-shadow:none!important;
  -webkit-backdrop-filter:none!important;
  backdrop-filter:none!important;
  transition:opacity 150ms ease,color 150ms ease,filter 150ms ease,transform 150ms ease!important;
}
.shop-image-arrow:hover,.shop-image-arrow:focus-visible{
  color:#00f0ff!important;
  filter:drop-shadow(0 0 7px rgba(0,240,255,.75));
  outline:none!important;
}
.shop-image-prev:hover,.shop-image-arrow-left:hover,.shop-image-prev:focus-visible,.shop-image-arrow-left:focus-visible{
  transform:translate(-4px,-50%)!important;
}
.shop-image-next:hover,.shop-image-arrow-right:hover,.shop-image-next:focus-visible,.shop-image-arrow-right:focus-visible{
  transform:translate(4px,-50%)!important;
}
.shop-image-arrow-left{left:.5rem!important}
.shop-image-arrow-right{right:.5rem!important}

/* Product-tile favourite: no enclosing box, just the heart. */
.favourite-button{
  width:36px!important;
  height:36px!important;
  border:0!important;
  border-radius:0!important;
  background:transparent!important;
  color:#94a3b8!important;
  box-shadow:none!important;
  -webkit-backdrop-filter:none!important;
  backdrop-filter:none!important;
  transition:color 150ms ease,transform 150ms ease!important;
}
.favourite-button svg{
  width:20px!important;
  height:20px!important;
  fill:none!important;
  stroke:currentColor!important;
  filter:none;
  transition:fill 150ms ease,stroke 150ms ease,filter 150ms ease,transform 150ms ease;
}
.favourite-button:hover,.favourite-button:focus-visible{
  color:#ff10f0!important;
  border:0!important;
  background:transparent!important;
  box-shadow:none!important;
  outline:none!important;
}
.favourite-button:hover svg,.favourite-button:focus-visible svg{
  filter:drop-shadow(0 0 5px rgba(255,16,240,.8));
}
.favourite-button.is-favourite{
  color:#ff10f0!important;
  border:0!important;
  background:transparent!important;
  box-shadow:none!important;
}
.favourite-button.is-favourite svg{
  fill:#ff10f0!important;
  stroke:#ff10f0!important;
  filter:drop-shadow(0 0 6px rgba(255,16,240,.9))!important;
}
.favourite-button:active{transform:scale(.9)!important}

/* ==========================================================
   V69 — UNAVAILABLE PRODUCTS + NOTIFY ME
   ========================================================== */
/* Coming-soon/out-of-stock cards are still product links. */
.shop-card .shop-card-content{cursor:pointer}
.shop-card:has(.shop-card-content:hover),
.shop-card:has(.shop-card-content:focus-visible){
  border-color:#FFD700;
  box-shadow:0 0 0 1px rgb(255 215 0 / 22%),0 0 18px rgb(255 215 0 / 12%);
}
.shop-card .shop-card-content:hover h2,
.shop-card .shop-card-content:focus-visible h2{color:#FFD700;text-shadow:0 0 8px rgb(255 215 0 / 55%)}
.nt-size-options [data-modal-size].is-unavailable{opacity:.5;color:#94a3b8;border-color:#475569}
.nt-size-options [data-modal-size].is-unavailable:hover,
.nt-size-options [data-modal-size].is-unavailable.is-selected{opacity:1;color:#FFD700;border-color:#FFD700}
.nt-size-dialog-actions.nt-size-dialog-actions-four{grid-template-columns:repeat(2,minmax(0,1fr))!important}
.nt-size-dialog-actions .nt-popup-notify{border-color:#00f0ff!important;color:#00f0ff!important;background:transparent!important}
.nt-size-dialog-actions .nt-popup-notify:hover{background:#00f0ff!important;color:#020617!important}
@media(max-width:620px){.nt-size-dialog-actions.nt-size-dialog-actions-four{grid-template-columns:1fr!important}}
.favourite-add-basket:disabled{border-color:#475569!important;background:#1e293b!important;color:#64748b!important;box-shadow:none!important;cursor:not-allowed!important}
.favourite-notify{width:100%;min-height:40px;margin-top:.45rem;border:1px solid #00f0ff;border-radius:8px;background:transparent;color:#00f0ff;font:700 .7rem "Space Mono",monospace;letter-spacing:.05em}
.favourite-notify:hover,.favourite-notify:focus-visible{background:#00f0ff;color:#020617;box-shadow:0 0 14px rgba(0,240,255,.2)}


/* V71 — VIEW uses the same dropdown treatment as SORT on applicable pages. */
.shop-controls .shop-view-group {
  display:flex;
  align-items:center;
  gap:.4rem;
}
.shop-controls .shop-view-select {
  min-width:148px;
  text-transform:uppercase;
}
.shop-controls .shop-sort-group .shop-select,
.shop-controls .shop-sort-group .shop-select option,
.shop-controls .shop-view-select,
.shop-controls .shop-view-select option {
  text-transform:uppercase;
}
/* The VIEW control remains desktop-only, as requested. */
@media (max-width:768px) {
  .shop-controls .shop-view-group { display:none !important; }
}