:root {
      --shop-bg: #060708;
      --shop-panel: #0b0d10;
      --shop-panel-2: #101419;
      --shop-card: rgba(255,255,255,0.03);
      --shop-border: rgba(255,255,255,0.09);
      --shop-border-strong: rgba(78,205,196,0.28);
      --shop-white: #f0ede8;
      --shop-muted: rgba(240,237,232,0.58);
      --shop-soft: rgba(240,237,232,0.22);
      --shop-teal: #4ecdc4;
      --shop-teal-glow: rgba(78,205,196,0.18);
      --shop-radius: 2rem;
      --shop-shadow: 0 24px 80px rgba(0,0,0,0.38);

      /* Admin-controlled card style variables */
      --card-radius: 1.9rem;
      --card-hover: translateY(-4px);
      --card-btn-padding-y: 0.65rem;
      --card-btn-padding-x: 0.5rem;
      --card-btn-font-size: 0.58rem;
      --card-btn-radius: 0px;
      --card-btn-layout: 1fr 1fr;
      --card-btn-justify: stretch;
      --card-accent: #4ecdc4;
      --apparel-cols: 3;
      --prints-cols: 3;
      --apparel-cols-mob: 1;
      --prints-cols-mob: 2;
      --prints-img-height: clamp(280px, 36vw, 520px);

      /* Button width control */
      --card-btn-width: auto;
      --card-btn-max-width: 160px;

      /* Shop typography — admin controlled */
      --shop-hero-align: center;
      --shop-section-align: center;
      --shop-card-align: left;
      --shop-hero-font: 'Bebas Neue', sans-serif;
      --shop-hero-size: clamp(4rem, 10vw, 7.75rem);
      --shop-section-font: 'Bebas Neue', sans-serif;
      --shop-section-color: #f0ede8;
      --shop-overline-color: var(--shop-teal);
      --shop-copy-size: 14px;
      --shop-copy-color: rgba(240,237,232,0.58);
      --shop-card-name-font: 'Bebas Neue', 'Montserrat', sans-serif;
      --shop-card-name-size: 16px;
      --shop-card-name-color: #f0ede8;
      --shop-card-price-color: #f0ede8;
      --shop-print-price-color: var(--shop-teal, #4ecdc4);

      /* Cart / header button colors */
      --cart-bg: rgba(255,255,255,0.06);
      --cart-color: var(--shop-white);
      --cart-border: rgba(255,255,255,0.12);
      --cart-hover-bg: rgba(255,255,255,0.1);
    }

    body.shop-page {
      background:
        radial-gradient(circle at top right, rgba(78,205,196,0.08), transparent 30%),
        radial-gradient(circle at bottom left, rgba(78,205,196,0.05), transparent 28%),
        var(--shop-bg);
    }

    .shop-page main {
      padding-top: 6.25rem;
      overflow: clip;
    }

    .shop-hero {
      padding: 2.25rem 4rem 2rem;
      position: relative;
    }

    .shop-hero::before {
      content: '';
      position: absolute;
      inset: 0;
      background:
        linear-gradient(180deg, rgba(255,255,255,0.015) 0%, transparent 22%),
        repeating-linear-gradient(90deg, rgba(255,255,255,0.015) 0 1px, transparent 1px 140px);
      opacity: 0.6;
      pointer-events: none;
      mask-image: linear-gradient(180deg, black 0%, transparent 100%);
    }

    .shop-hero-head {
      display: flex;
      flex-direction: column;
      align-items: var(--shop-hero-align, center);
      text-align: var(--shop-hero-align, center);
      margin-bottom: 1.75rem;
      position: relative;
      z-index: 1;
    }

    .shop-hero-head > div:first-child {
      text-align: center;
    }

    .shop-hero-name {
      font-family: 'Montserrat', sans-serif;
      font-size: 0.72rem;
      font-weight: 600;
      letter-spacing: 0.32em;
      text-transform: uppercase;
      color: var(--shop-muted);
      margin-bottom: 0.35rem;
    }

    .shop-kicker {
      display: inline-flex;
      align-items: center;
      justify-content: center;
      gap: 0.85rem;
      font-size: 0.62rem;
      font-weight: 700;
      letter-spacing: 0.34em;
      text-transform: uppercase;
      color: var(--shop-teal);
      margin-bottom: 1rem;
    }

    .shop-kicker::before {
      content: '';
      width: 36px;
      height: 1px;
      background: var(--shop-teal);
      opacity: 0.8;
    }

    .shop-hero-title {
      font-family: var(--shop-hero-font, 'Bebas Neue', sans-serif);
      font-size: var(--shop-hero-size, clamp(4rem, 10vw, 7.75rem));
      line-height: 0.9;
      letter-spacing: 0.03em;
      color: var(--shop-white);
      margin: 0;
    }

    .shop-hero-title .outline {
      color: transparent;
      -webkit-text-stroke: 1px rgba(78,205,196,0.42);
    }

    .shop-hero-desc {
      max-width: 34rem;
      font-size: 0.92rem;
      line-height: 1.85;
      color: var(--shop-muted);
      margin: 1rem auto 0;
    }

    .shop-hero-meta {
      display: grid;
      grid-template-columns: repeat(3, minmax(0, 1fr));
      gap: 1rem;
      align-self: stretch;
    }

    .shop-meta-card {
      background: linear-gradient(180deg, rgba(255,255,255,0.03), rgba(255,255,255,0.015));
      border: 1px solid var(--shop-border);
      border-radius: 1.25rem;
      padding: 1rem 1rem 1.1rem;
      min-height: 110px;
      display: flex;
      flex-direction: column;
      justify-content: space-between;
      box-shadow: inset 0 1px 0 rgba(255,255,255,0.02);
    }

    .shop-meta-label {
      font-size: 0.54rem;
      font-weight: 700;
      letter-spacing: 0.25em;
      text-transform: uppercase;
      color: var(--shop-soft);
    }

    .shop-meta-value {
      font-family: 'Bebas Neue', sans-serif;
      font-size: 1.55rem;
      letter-spacing: 0.08em;
      color: var(--shop-white);
      line-height: 1;
    }

    .shop-stage {
      position: relative;
      min-height: 720px;
      padding: 2rem;
      border: 1px solid var(--shop-border);
      border-radius: calc(var(--shop-radius) + 0.25rem);
      background:
        radial-gradient(circle at 70% 28%, rgba(78,205,196,0.16), transparent 26%),
        linear-gradient(135deg, rgba(255,255,255,0.028), rgba(255,255,255,0.012)),
        #080b0f;
      box-shadow: var(--shop-shadow);
      overflow: hidden;
      isolation: isolate;
    }

    .shop-stage::before,
    .shop-stage::after {
      content: '';
      position: absolute;
      border-radius: 50%;
      border: 1px solid rgba(255,255,255,0.08);
      pointer-events: none;
      z-index: 0;
    }

    .shop-stage::before {
      width: 40rem;
      height: 40rem;
      right: -8rem;
      top: -12rem;
    }

    .shop-stage::after {
      width: 18rem;
      height: 18rem;
      left: -6rem;
      bottom: -5rem;
      border-color: rgba(78,205,196,0.18);
    }

    .shop-carousel {
      position: relative;
      min-height: 640px;
      z-index: 1;
    }

    .shop-slide {
      position: absolute;
      inset: 0;
      display: grid;
      grid-template-columns: minmax(300px, 0.9fr) minmax(0, 1.1fr);
      gap: clamp(1.5rem, 3vw, 3.25rem);
      align-items: center;
      opacity: 0;
      pointer-events: none;
      transform: translateX(0) scale(0.88);
      transform-origin: center center;
      transition: transform 720ms cubic-bezier(.22,.61,.36,1), opacity 520ms ease, filter 720ms ease;
      filter: blur(0);
    }

    .shop-slide.active {
      opacity: 1;
      pointer-events: auto;
      z-index: 6;
      transform: translateX(0) scale(1);
    }

    .shop-slide.prev {
      opacity: 0.15;
      z-index: 4;
      transform: translateX(-48%) scale(0.74);
      filter: blur(1px) brightness(0.35);
    }

    .shop-slide.next {
      opacity: 0.15;
      z-index: 4;
      transform: translateX(48%) scale(0.74);
      filter: blur(1px) brightness(0.35);
    }

    .shop-slide.hidden-left {
      opacity: 0;
      z-index: 2;
      transform: translateX(-72%) scale(0.62);
    }

    .shop-slide.hidden-right {
      opacity: 0;
      z-index: 2;
      transform: translateX(72%) scale(0.62);
    }

    .shop-slide-copy {
      max-width: 30rem;
      padding-left: 0.25rem;
      padding-bottom: 7rem;
      display: flex;
      flex-direction: column;
    }

    .shop-slide-badge-row {
      display: flex;
      flex-wrap: wrap;
      gap: 0.6rem;
      margin-bottom: 1.15rem;
    }

    .shop-pill {
      display: inline-flex;
      align-items: center;
      justify-content: center;
      min-height: 30px;
      padding: 0.45rem 0.9rem;
      border-radius: 999px;
      font-size: 0.56rem;
      font-weight: 800;
      letter-spacing: 0.22em;
      text-transform: uppercase;
      background: rgba(255,255,255,0.035);
      color: var(--shop-white);
      border: 1px solid rgba(255,255,255,0.08);
      white-space: nowrap;
    }

    .shop-pill.teal {
      color: var(--shop-bg);
      background: var(--shop-teal);
      border-color: transparent;
      box-shadow: 0 0 24px rgba(78,205,196,0.25);
    }

    .shop-slide-title {
      font-family: 'Bebas Neue', sans-serif;
      font-size: clamp(3.25rem, 8vw, 6rem);
      line-height: 0.88;
      letter-spacing: 0.03em;
      color: var(--shop-white);
      margin: 0 0 1rem;
    }

    .shop-slide-title span {
      color: transparent;
      -webkit-text-stroke: 1px rgba(255,255,255,0.28);
    }

    .shop-slide-body {
      max-width: 28rem;
      font-size: 0.96rem;
      line-height: 1.85;
      color: var(--shop-muted);
      margin: 0 0 1.5rem;
    }

    .shop-specs {
      list-style: none;
      display: grid;
      gap: 0.8rem;
      margin: 0 0 1.75rem;
      padding: 0;
    }

    .shop-specs li {
      display: flex;
      align-items: center;
      gap: 0.8rem;
      font-size: 0.74rem;
      letter-spacing: 0.12em;
      text-transform: uppercase;
      color: rgba(240,237,232,0.78);
    }

    .shop-specs li::before {
      content: '';
      width: 8px;
      height: 8px;
      border-radius: 50%;
      background: var(--shop-teal);
      box-shadow: 0 0 0 6px rgba(78,205,196,0.12);
      flex-shrink: 0;
    }

    .shop-slide-actions {
      display: flex;
      align-items: center;
      gap: 1rem;
      flex-wrap: wrap;
      margin-bottom: 1.6rem;
    }

    .shop-btn-primary,
    .shop-btn-ghost {
      min-height: 52px;
      padding: 0.9rem 1.55rem;
      display: inline-flex;
      align-items: center;
      justify-content: center;
      text-decoration: none;
      border-radius: 999px;
      font-size: 0.66rem;
      font-weight: 800;
      letter-spacing: 0.2em;
      text-transform: uppercase;
      transition: transform 180ms ease, background 180ms ease, color 180ms ease, border-color 180ms ease;
    }

    .shop-btn-primary {
      color: var(--shop-bg);
      background: var(--shop-teal);
      box-shadow: 0 0 28px rgba(78,205,196,0.2);
    }

    .shop-btn-primary:hover,
    .shop-btn-primary:focus-visible {
      transform: translateY(-2px);
      background: var(--shop-white);
    }

    .shop-btn-ghost {
      color: var(--shop-white);
      border: 1px solid rgba(255,255,255,0.14);
      background: rgba(255,255,255,0.025);
    }

    .shop-btn-ghost:hover,
    .shop-btn-ghost:focus-visible {
      transform: translateY(-2px);
      border-color: rgba(255,255,255,0.3);
      background: rgba(255,255,255,0.06);
    }

    .shop-slide-footer {
      display: flex;
      align-items: end;
      justify-content: space-between;
      gap: 1rem;
      padding-top: 1rem;
      border-top: 1px solid rgba(255,255,255,0.08);
    }

    .shop-slide-tag {
      font-size: 0.56rem;
      font-weight: 700;
      letter-spacing: 0.28em;
      text-transform: uppercase;
      color: var(--shop-soft);
      margin-bottom: 0.35rem;
    }

    .shop-slide-name {
      font-size: 0.95rem;
      font-weight: 700;
      color: var(--shop-white);
      letter-spacing: 0.03em;
    }

    .shop-slide-price {
      font-family: 'Bebas Neue', sans-serif;
      font-size: clamp(2.2rem, 3.5vw, 3.15rem);
      color: var(--shop-teal);
      letter-spacing: 0.08em;
      line-height: 1;
      flex-shrink: 0;
    }

    .shop-visual {
      position: relative;
      min-height: 560px;
      display: flex;
      align-items: center;
      justify-content: center;
    }

    .shop-visual-shell {
      position: relative;
      width: min(100%, 560px);
      aspect-ratio: 1 / 1;
      border-radius: 2.4rem;
      border: 1px solid rgba(255,255,255,0.1);
      background:
        linear-gradient(180deg, rgba(255,255,255,0.055), rgba(255,255,255,0.012)),
        radial-gradient(circle at 30% 30%, var(--accentGlow), transparent 48%),
        linear-gradient(145deg, rgba(0,0,0,0.2), rgba(0,0,0,0.55));
      box-shadow:
        inset 0 1px 0 rgba(255,255,255,0.08),
        0 22px 70px rgba(0,0,0,0.44),
        0 0 0 1px rgba(255,255,255,0.02);
      overflow: hidden;
      isolation: isolate;
    }

    .shop-visual-shell::before,
    .shop-visual-shell::after {
      content: '';
      position: absolute;
      border-radius: 50%;
      pointer-events: none;
    }

    .shop-visual-shell::before {
      width: 72%;
      height: 72%;
      border: 1px solid rgba(255,255,255,0.09);
      top: 14%;
      left: 14%;
    }

    .shop-visual-shell::after {
      width: 112%;
      height: 112%;
      border: 1px solid rgba(255,255,255,0.05);
      top: -6%;
      left: -6%;
    }

    .shop-watermark {
      position: absolute;
      inset: 8%;
      display: flex;
      align-items: center;
      justify-content: center;
      opacity: 0.08;
      transform: rotate(-12deg) scale(1.05);
    }

    .shop-watermark img {
      width: 82%;
      height: auto;
      filter: brightness(10);
    }

    .shop-product-core {
      position: absolute;
      inset: 13%;
      border-radius: 2rem;
      background:
        linear-gradient(145deg, rgba(255,255,255,0.06), rgba(255,255,255,0.012)),
        linear-gradient(120deg, rgba(255,255,255,0.01), transparent 42%),
        var(--accentBase);
      border: 1px solid rgba(255,255,255,0.12);
      box-shadow:
        0 32px 80px rgba(0,0,0,0.35),
        inset 0 1px 0 rgba(255,255,255,0.08);
    }

    .shop-product-core::before {
      content: '';
      position: absolute;
      inset: 9% 9% auto;
      height: 1px;
      background: linear-gradient(90deg, transparent, rgba(255,255,255,0.18), transparent);
    }

    .shop-product-echo {
      position: absolute;
      inset: auto 8% 8% auto;
      font-family: 'Bebas Neue', sans-serif;
      font-size: clamp(4.8rem, 10vw, 7.4rem);
      line-height: 0.86;
      text-align: right;
      letter-spacing: 0.08em;
      color: rgba(255,255,255,0.075);
      z-index: 1;
      pointer-events: none;
    }

    .shop-product-word {
      position: absolute;
      left: 9%;
      bottom: 10%;
      z-index: 2;
      font-family: 'Bebas Neue', sans-serif;
      font-size: clamp(3rem, 6vw, 4.75rem);
      line-height: 0.88;
      letter-spacing: 0.06em;
      color: var(--shop-white);
      text-shadow: 0 0 24px rgba(0,0,0,0.2);
    }

    .shop-product-badge {
      position: absolute;
      top: 8%;
      left: 8%;
      z-index: 2;
      font-size: 0.54rem;
      font-weight: 800;
      letter-spacing: 0.26em;
      text-transform: uppercase;
      padding: 0.58rem 0.78rem;
      border-radius: 999px;
      color: var(--shop-bg);
      background: var(--accent);
      box-shadow: 0 0 18px rgba(78,205,196,0.18);
    }

    .shop-product-shine {
      position: absolute;
      inset: auto 12% 8% auto;
      width: 42%;
      height: 20%;
      background: radial-gradient(circle at center, rgba(255,255,255,0.12), transparent 70%);
      transform: rotate(-10deg);
      filter: blur(24px);
      opacity: 0.55;
      pointer-events: none;
    }

    .shop-product-media {
      position: absolute;
      inset: 11% 10% 12%;
      z-index: 3;
      display: flex;
      align-items: center;
      justify-content: center;
      pointer-events: none;
    }

    .shop-product-media img {
      width: 100%;
      height: 100%;
      object-fit: contain;
      transform: translateY(var(--productY, 0)) scale(var(--productScale, 1));
      transform-origin: center center;
      filter:
        drop-shadow(0 28px 42px rgba(0,0,0,0.48))
        drop-shadow(0 6px 10px rgba(0,0,0,0.2));
    }

    .shop-card-media {
      position: absolute;
      inset: 6% 6% 8%;
      z-index: 1;
      display: flex;
      align-items: center;
      justify-content: center;
      pointer-events: none;
    }

    .shop-card.featured .shop-card-media {
      inset: 5% 8% 7%;
    }

    .shop-card-media img {
      width: 100%;
      height: 100%;
      object-fit: contain;
      object-position: center center;
      transform: translateY(var(--cardProductY, 0)) scale(var(--cardProductScale, 1));
      transform-origin: center center;
      filter:
        drop-shadow(0 22px 30px rgba(0,0,0,0.4))
        drop-shadow(0 4px 8px rgba(0,0,0,0.2));
    }

    .shop-card-display .shell.has-product {
      background:
        linear-gradient(180deg, rgba(255,255,255,0.04), rgba(255,255,255,0.014)),
        radial-gradient(circle at 28% 28%, var(--cardGlow), transparent 46%),
        linear-gradient(145deg, rgba(6,8,10,0.78), rgba(6,8,10,0.92));
    }

    .shop-card-display .shell.has-product::before {
      inset: 10%;
    }

    .shop-card-display .shell.has-product::after {
      width: 52%;
      height: 34%;
      opacity: 0.32;
    }

    .shop-product-line {
      position: absolute;
      left: 9%;
      right: 28%;
      top: 26%;
      height: 1px;
      background: linear-gradient(90deg, rgba(255,255,255,0.45), transparent);
      opacity: 0.5;
      z-index: 2;
    }

    .shop-product-note {
      position: absolute;
      left: 9%;
      top: 29%;
      z-index: 2;
      font-size: 0.62rem;
      font-weight: 700;
      letter-spacing: 0.26em;
      text-transform: uppercase;
      color: rgba(240,237,232,0.56);
    }

    .shop-carousel-controls {
      position: absolute;
      inset: auto 2rem 2rem 2rem;
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 1rem;
      z-index: 7;
      pointer-events: none;
    }

    .shop-controls-left {
      display: flex;
      align-items: center;
      gap: 0.85rem;
      pointer-events: auto;
    }

    .shop-control-btn {
      width: 54px;
      height: 54px;
      border-radius: 50%;
      border: 1px solid rgba(255,255,255,0.14);
      background: rgba(7,10,12,0.65);
      color: var(--shop-white);
      font-size: 1rem;
      cursor: pointer;
      transition: transform 180ms ease, border-color 180ms ease, background 180ms ease;
      backdrop-filter: blur(10px);
      pointer-events: auto;
    }

    .shop-control-btn:hover,
    .shop-control-btn:focus-visible {
      transform: translateY(-2px);
      border-color: var(--shop-border-strong);
      background: rgba(12,16,19,0.92);
      outline: none;
    }

    .shop-progress {
      display: flex;
      align-items: center;
      gap: 0.7rem;
      padding: 0.8rem 1rem;
      border-radius: 999px;
      border: 1px solid rgba(255,255,255,0.1);
      background: rgba(7,10,12,0.7);
      backdrop-filter: blur(10px);
      pointer-events: auto;
    }

    .shop-progress-bar {
      width: min(28vw, 180px);
      height: 2px;
      background: rgba(255,255,255,0.12);
      position: relative;
      overflow: hidden;
      border-radius: 999px;
    }

    .shop-progress-bar span {
      position: absolute;
      inset: 0 auto 0 0;
      width: var(--progressWidth, 25%);
      background: var(--shop-teal);
      border-radius: inherit;
      transition: width 320ms ease;
    }

    .shop-progress-copy {
      font-size: 0.56rem;
      font-weight: 800;
      letter-spacing: 0.24em;
      text-transform: uppercase;
      color: var(--shop-soft);
    }

    .shop-thumbs {
      display: grid;
      grid-template-columns: repeat(4, minmax(0, 1fr));
      gap: 0.85rem;
      position: relative;
      z-index: 1;
      margin-top: 1rem;
    }

    .shop-thumb {
      position: relative;
      text-align: left;
      padding: 1rem 1rem 1.05rem;
      border-radius: 1.15rem;
      border: 1px solid rgba(255,255,255,0.08);
      background: rgba(255,255,255,0.025);
      color: var(--shop-white);
      cursor: pointer;
      transition: transform 180ms ease, border-color 180ms ease, background 180ms ease;
    }

    .shop-thumb:hover,
    .shop-thumb:focus-visible,
    .shop-thumb.active {
      transform: translateY(-2px);
      border-color: var(--shop-border-strong);
      background: rgba(255,255,255,0.05);
      outline: none;
    }

    .shop-thumb-label {
      font-size: 0.52rem;
      font-weight: 700;
      letter-spacing: 0.24em;
      text-transform: uppercase;
      color: var(--shop-soft);
      margin-bottom: 0.55rem;
    }

    .shop-thumb-name {
      font-size: 0.92rem;
      font-weight: 700;
      color: var(--shop-white);
      margin-bottom: 0.35rem;
    }

    .shop-thumb-price {
      font-family: 'Bebas Neue', sans-serif;
      font-size: 1.15rem;
      color: var(--shop-teal);
      letter-spacing: 0.08em;
    }


    .shop-collection {
      padding: 5.5rem 4rem 0;
    }

    .shop-section-head {
      text-align: var(--shop-section-align, center);
      margin-bottom: 2.5rem;
      padding-bottom: 1.8rem;
      border-bottom: 1px solid rgba(255,255,255,0.08);
      display: flex;
      flex-direction: column;
      align-items: var(--shop-section-align, center);
    }

    .shop-section-overline {
      font-size: 0.58rem;
      font-weight: 700;
      letter-spacing: 0.34em;
      text-transform: uppercase;
      color: var(--shop-overline-color, var(--shop-teal));
      margin-bottom: 0.8rem;
    }

    .shop-section-title {
      margin: 0;
      font-family: var(--shop-section-font, 'Bebas Neue', sans-serif);
      font-size: clamp(2.8rem, 5vw, 4.9rem);
      line-height: 0.92;
      letter-spacing: 0.04em;
      color: var(--shop-section-color, var(--shop-white));
    }

    .shop-section-copy {
      max-width: 34rem;
      margin: 1rem auto 0;
      font-size: var(--shop-copy-size, 14px);
      line-height: 1.82;
      color: var(--shop-copy-color, var(--shop-muted));
      text-align: var(--shop-section-align, center);
    }

    .shop-section-note {
      font-size: 0.58rem;
      font-weight: 700;
      letter-spacing: 0.25em;
      text-transform: uppercase;
      color: var(--shop-soft);
      white-space: nowrap;
      margin-top: 1.2rem;
    }

    .shop-grid {
      display: grid;
      grid-template-columns: repeat(12, minmax(0, 1fr));
      gap: 1rem;
    }
    #shop-apparel-grid { grid-template-columns: repeat(var(--apparel-cols, 3), minmax(0, 1fr)); }
    #shop-prints-grid  { grid-template-columns: repeat(var(--prints-cols, 3), minmax(0, 1fr)); }
    #shop-prints-grid .shop-card.featured,
    #shop-prints-grid .shop-card.standard { grid-column: span 1 !important; min-height: var(--prints-img-height, clamp(280px,36vw,520px)); }
    #shop-prints-grid .shop-card-media    { height: var(--prints-img-height, clamp(280px,36vw,520px)) !important; }

    /* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
       APPAREL CARDS  ·  .ap-card
       Minimal premium streetwear aesthetic
    ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */

    .ap-grid {
      display: grid;
      grid-template-columns: repeat(var(--apparel-cols, 3), minmax(0, 1fr));
      gap: 1.5rem;
    }
    

    .ap-card {
      display: flex;
      flex-direction: column;
      background: #0c0e10;
      border: 1px solid rgba(255,255,255,0.07);
      border-radius: var(--card-radius, 10px);
      overflow: hidden;
      transition: border-color 250ms ease, box-shadow 250ms ease;
      cursor: pointer;
    }
    .ap-card:hover {
      transform: var(--card-hover, translateY(-4px));
      border-color: rgba(255,255,255,0.14);
      box-shadow: 0 12px 40px rgba(0,0,0,0.4);
    }

    /* Image zone — warm cream so white-bg product photos look intentional */
    .ap-img-zone {
      position: relative;
      background: #eeece8;
      aspect-ratio: 4 / 5;
      display: flex;
      align-items: center;
      justify-content: center;
      overflow: hidden;
      flex-shrink: 0;
    }
    .ap-img-zone img {
      width: 82%;
      height: 82%;
      object-fit: contain;
      object-position: center center;
      display: block;
      transition: transform 450ms ease;
    }
    .ap-card:hover .ap-img-zone img { transform: scale(1.04); }

    /* Badge chip — overlaid top-left on image */
    .ap-chip {
      display: var(--chip-display, inline-flex);
      position: absolute;
      top: 0.6rem;
      left: 0.6rem;
      font-size: 0.45rem;
      font-weight: 800;
      letter-spacing: 0.2em;
      text-transform: uppercase;
      background: rgba(10,10,10,0.7);
      color: rgba(255,255,255,0.9);
      padding: 0.25rem 0.5rem;
      border-radius: 2px;
      backdrop-filter: blur(4px);
      pointer-events: none;
    }

    /* Info strip — dark, tight, clean */
    .ap-info {
      padding: 0.8rem 0.9rem 0.9rem;
      border-top: 1px solid rgba(255,255,255,0.06);
      display: flex;
      flex-direction: column;
      gap: 0.55rem;
    }
    .ap-collection {
      font-size: 0.48rem;
      font-weight: 700;
      letter-spacing: 0.2em;
      text-transform: uppercase;
      color: var(--shop-teal, #4ecdc4);
    }
    .ap-name {
      font-family: var(--shop-card-name-font, 'Bebas Neue', 'Montserrat', sans-serif);
      font-size: var(--shop-card-name-size, 16px);
      font-weight: 700;
      letter-spacing: 0.05em;
      text-transform: uppercase;
      color: var(--shop-card-name-color, #f0ede8);
      line-height: 1.1;
      text-align: var(--shop-card-align, left);
    }
    .ap-bottom {
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 0.5rem;
    }
    .ap-price {
      font-size: 1rem;
      font-weight: 800;
      color: var(--shop-card-price-color, #f0ede8);
      letter-spacing: -0.01em;
    }
    .ap-atc {
      flex-shrink: 0;
      background: var(--card-accent, var(--shop-teal, #4ecdc4));
      color: var(--card-btn-text, #000);
      border: none;
      font-family: inherit;
      font-size: var(--card-btn-font-size, 0.5rem);
      font-weight: 800;
      letter-spacing: 0.15em;
      text-transform: uppercase;
      padding: var(--card-btn-padding-y, 0.45rem) var(--card-btn-padding-x, 0.75rem);
      border-radius: var(--card-btn-radius, 3px);
      cursor: pointer;
      white-space: nowrap;
      width: var(--card-btn-width, auto);
      max-width: var(--card-btn-max-width, 160px);
      transition: opacity 0.2s;
    }
    .ap-atc:hover { opacity: 0.82; }
    .ap-atc.added { background: #2ecc71 !important; color: #000 !important; }
    .ap-atc:disabled { opacity: 0.55; cursor: default; }

    /* ── Apparel layout: List (image left, info right) ── */
    .ap-grid[data-layout="list"] {
      grid-template-columns: 1fr !important;
    }
    .ap-grid[data-layout="list"] .ap-card {
      flex-direction: row;
    }
    .ap-grid[data-layout="list"] .ap-img-zone {
      width: 200px;
      aspect-ratio: unset;
      min-height: 200px;
      flex-shrink: 0;
    }
    .ap-grid[data-layout="list"] .ap-info {
      padding: 1.25rem 1.5rem;
      justify-content: center;
      border-top: none;
      border-left: 1px solid rgba(255,255,255,0.06);
    }
    .ap-grid[data-layout="list"] .ap-name { font-size: 1.2rem; }

    /* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
       PRINT CARDS  ·  .print-card
       Gallery-first — artwork is the hero
    ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */

    .print-cards-grid {
      display: grid;
      grid-template-columns: repeat(2, minmax(0, 1fr));
      gap: 1.25rem;
    }

    .print-card {
      display: flex;
      flex-direction: column;
      background: #0c0e10;
      border: 1px solid rgba(255,255,255,0.07);
      border-radius: var(--card-radius, 10px);
      overflow: hidden;
      transition: border-color 250ms ease, box-shadow 250ms ease;
    }
    .print-card:hover {
      border-color: rgba(255,255,255,0.14);
      box-shadow: 0 12px 40px rgba(0,0,0,0.4);
    }

    /* Artwork fills a 4:3 frame */
    .print-img-zone {
      position: relative;
      width: 100%;
      aspect-ratio: 4 / 3;
      overflow: hidden;
      flex-shrink: 0;
    }
    .print-img-zone img {
      width: 100%;
      height: 100%;
      object-fit: cover;
      object-position: center;
      display: block;
      transition: transform 450ms ease;
    }
    .print-card:hover .print-img-zone img { transform: scale(1.03); }

    /* Chip badge overlaid on image */
    .print-chip {
      display: var(--chip-display, inline-flex);
      position: absolute;
      top: 0.65rem;
      left: 0.65rem;
      font-size: 0.45rem;
      font-weight: 800;
      letter-spacing: 0.2em;
      text-transform: uppercase;
      background: rgba(10,10,10,0.72);
      color: rgba(255,255,255,0.9);
      padding: 0.25rem 0.5rem;
      border-radius: 2px;
      backdrop-filter: blur(4px);
      pointer-events: none;
    }

    /* Info row — single line, name left, price+btn right */
    .print-info {
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 0.75rem;
      padding: 0.75rem 0.9rem 0.85rem;
      border-top: 1px solid rgba(255,255,255,0.06);
      flex-shrink: 0;
    }
    .print-name {
      font-family: var(--shop-card-name-font, 'Bebas Neue', 'Montserrat', sans-serif);
      font-size: var(--shop-card-name-size, 14px);
      font-weight: 700;
      letter-spacing: 0.05em;
      text-transform: uppercase;
      color: var(--shop-card-name-color, #f0ede8);
      line-height: 1.1;
      text-align: var(--shop-card-align, left);
    }
    .print-right {
      display: flex;
      align-items: center;
      gap: 0.6rem;
      flex-shrink: 0;
    }
    .print-price {
      font-size: 0.95rem;
      font-weight: 800;
      color: var(--shop-print-price-color, var(--shop-teal, #4ecdc4));
    }
    .print-atc {
      background: transparent;
      border: 1px solid rgba(78,205,196,0.35);
      color: var(--shop-teal, #4ecdc4);
      font-family: inherit;
      font-size: var(--card-btn-font-size, 0.48rem);
      font-weight: 800;
      letter-spacing: 0.15em;
      text-transform: uppercase;
      padding: var(--card-btn-padding-y, 0.42rem) var(--card-btn-padding-x, 0.7rem);
      border-radius: var(--card-btn-radius, 3px);
      cursor: pointer;
      white-space: nowrap;
      transition: all 0.2s;
    }
    .print-atc:hover {
      background: rgba(78,205,196,0.1);
      border-color: rgba(78,205,196,0.6);
    }
    .print-atc.added { background: rgba(46,204,113,0.15) !important; border-color: #2ecc71 !important; color: #2ecc71 !important; }

    /* ── Print layout: Mosaic (first card featured) ── */
    #shop-prints-grid[data-layout="mosaic"] {
      grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
    }
    #shop-prints-grid[data-layout="mosaic"] .print-card:nth-child(1) {
      grid-column: span 2;
    }
    #shop-prints-grid[data-layout="mosaic"] .print-card:nth-child(1) .print-img-zone {
      aspect-ratio: 16 / 9;
    }
    #shop-prints-grid[data-layout="mosaic"] .print-card:nth-child(1) .print-name {
      font-size: 1.05rem;
    }

    /* ── Print layout: Gallery (4-col hover reveal) ── */
    #shop-prints-grid[data-layout="minimal"] {
      grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
      gap: 0.6rem !important;
    }
    #shop-prints-grid[data-layout="minimal"] .print-img-zone {
      aspect-ratio: 1 / 1;
    }
    #shop-prints-grid[data-layout="minimal"] .print-info {
      padding: 0.55rem 0.7rem 0.6rem;
    }
    #shop-prints-grid[data-layout="minimal"] .print-name {
      font-size: 0.72rem;
    }
    #shop-prints-grid[data-layout="minimal"] .print-price {
      font-size: 0.78rem;
    }
    #shop-prints-grid[data-layout="minimal"] .print-atc {
      display: none;
    }

    .shop-prints-section { border-top: 1px solid rgba(255,255,255,0.04); }
    .shop-prints-note {
      margin-top: 2.5rem;
      padding: 1.5rem 2rem;
      background: rgba(255,255,255,0.02);
      border: 1px solid rgba(255,255,255,0.04);
      border-radius: 4px;
    }
    .shop-prints-note p {
      font-size: 0.75rem;
      font-weight: 300;
      line-height: 1.8;
      color: rgba(240,237,232,0.35);
      max-width: 680px;
    }

    /* ── Print card grid: 2 cols desktop, 1 mobile ───────────────────── */
    .print-cards-grid {
      display: grid;
      grid-template-columns: repeat(2, minmax(0, 1fr));
      gap: 1.5rem;
    }

    /* ── Print card: stacked, square image contained ─────────────────── */
    .print-card {
      display: flex;
      flex-direction: column;
      background: var(--pc-base, #0d0d0d);
      border: 1px solid rgba(255,255,255,0.07);
      border-radius: 1.1rem;
      overflow: hidden;
      transition: transform 220ms ease, border-color 220ms ease, box-shadow 220ms ease;
    }
    .print-card:hover {
      transform: translateY(-4px);
      border-color: rgba(78,205,196,0.22);
      box-shadow: 0 20px 60px rgba(0,0,0,0.4);
    }

    /* Image area: square 1:1, image contained so nothing gets cropped */
    .print-card-image {
      position: relative;
      width: 100%;
      aspect-ratio: 1 / 1;
      background: var(--pc-base, #0d0d0d);
      overflow: hidden;
      flex-shrink: 0;
    }
    /* Ambient color glow matching artwork palette */
    .print-card-image::before {
      content: '';
      position: absolute;
      inset: 0;
      background: radial-gradient(ellipse at 50% 50%, var(--pc-glow, rgba(78,205,196,0.14)), transparent 70%);
      z-index: 0;
      pointer-events: none;
    }
    /* Soft bottom vignette blending into info panel */
    .print-card-image::after {
      content: '';
      position: absolute;
      bottom: 0; left: 0; right: 0;
      height: 25%;
      background: linear-gradient(to bottom, transparent, var(--pc-base, #0d0d0d));
      z-index: 2;
      pointer-events: none;
    }
    .print-card-image img {
      position: relative;
      z-index: 1;
      width: 100%;
      height: 100%;
      object-fit: contain;
      object-position: center center;
      display: block;
      transition: transform 500ms ease;
    }
    .print-card:hover .print-card-image img {
      transform: scale(1.04);
    }

    /* Info panel */
    .print-card-body {
      display: flex;
      flex-direction: column;
      align-items: center;
      text-align: center;
      padding: 1rem 1.25rem 1.25rem;
      flex: 1;
      position: relative;
    }
    .print-card-chip {
      font-size: 0.5rem;
      font-weight: 800;
      letter-spacing: 0.22em;
      text-transform: uppercase;
      color: var(--shop-teal);
      margin-bottom: 0.5rem;
    }
    .print-card-name {
      font-family: 'Bebas Neue', 'Montserrat', sans-serif;
      font-size: 1.3rem;
      font-weight: 700;
      letter-spacing: 0.05em;
      color: var(--shop-white);
      line-height: 1.1;
      margin-bottom: 0.5rem;
      text-align: center;
    }
    .print-card-copy {
      font-size: 0.7rem;
      font-weight: 300;
      line-height: 1.75;
      color: var(--shop-muted);
      flex: 1;
      margin-bottom: 1.1rem;
    }
    .print-card-footer {
      display: flex;
      align-items: center;
      justify-content: center;
      gap: 0.75rem;
      width: 100%;
    }
    .print-card-price {
      font-size: 1.5rem;
      font-weight: 800;
      color: var(--shop-white);
      line-height: 1;
      letter-spacing: -0.01em;
    }
    .print-card-price span {
      display: block;
      font-size: 0.58rem;
      font-weight: 400;
      color: var(--shop-muted);
      letter-spacing: 0.08em;
      text-transform: uppercase;
      margin-top: 0.2rem;
    }
    .print-card-cta {
      display: inline-flex;
      align-items: center;
      justify-content: center;
      font-size: 0.55rem;
      font-weight: 800;
      letter-spacing: 0.18em;
      text-transform: uppercase;
      color: #000;
      background: var(--shop-teal);
      border: none;
      padding: 0.7rem 1.1rem;
      border-radius: 3px;
      text-decoration: none;
      transition: opacity 0.2s;
      cursor: pointer;
      white-space: nowrap;
      flex-shrink: 0;
    }
    .print-card-cta:hover { opacity: 0.85; }

    /* ── Oakley-inspired carousel ────────────────────────────────── */
    .shop-stage {
      min-height: 780px;
      padding: 1.5rem;
      background:
        radial-gradient(circle at 50% 18%, rgba(78,205,196,0.12), transparent 30%),
        linear-gradient(180deg, rgba(255,255,255,0.03), rgba(255,255,255,0.01)),
        #07090c;
    }

    .shop-carousel { min-height: 660px; }

    .shop-slide {
      grid-template-columns: 1fr;
      gap: 0;
      align-items: stretch;
    }

    .shop-slide-copy {
      position: absolute;
      left: clamp(1.4rem, 3vw, 2.8rem);
      bottom: clamp(1.4rem, 3vw, 2.8rem);
      z-index: 8;
      max-width: 26rem;
      padding-left: 0;
      padding-bottom: 0;
      display: flex;
      flex-direction: column;
      gap: 0.9rem;
    }

    /* Hide elements not needed in Oakley mode */
    .shop-slide-badge-row,
    .shop-slide-body,
    .shop-specs,
    .shop-slide-footer,
    .shop-product-badge,
    .shop-product-note,
    .shop-product-line,
    .shop-watermark,
    .shop-btn-ghost {
      display: none !important;
    }

    .shop-slide-title {
      font-size: clamp(2.8rem, 6vw, 5rem);
      line-height: 0.9;
      margin: 0;
      max-width: 9ch;
      text-wrap: balance;
    }

    .shop-slide-title span {
      color: var(--shop-white);
      -webkit-text-stroke: 0;
    }

    .shop-slide-actions { margin: 0; }

    .shop-btn-primary {
      align-self: flex-start;
      min-height: 36px;
      padding: 0.42rem 1rem;
      background: rgba(255,255,255,0.92);
      color: #0a0a0a;
      box-shadow: none;
      border-radius: 999px;
      font-size: 0.56rem;
      font-weight: 800;
      letter-spacing: 0.18em;
      text-transform: uppercase;
    }

    .shop-btn-primary:hover,
    .shop-btn-primary:focus-visible {
      background: var(--shop-teal);
      color: #0a0a0a;
      transform: translateY(-2px);
    }

    .shop-visual { min-height: 620px; }

    .shop-visual-shell {
      width: min(100%, 650px);
      border-radius: 2rem;
      border: 1px solid rgba(255,255,255,0.08);
      background:
        radial-gradient(circle at 50% 28%, rgba(78,205,196,0.14), transparent 28%),
        linear-gradient(180deg, rgba(255,255,255,0.035), rgba(255,255,255,0.01)),
        linear-gradient(145deg, rgba(7,10,13,0.96), rgba(7,10,13,0.9));
      box-shadow: inset 0 1px 0 rgba(255,255,255,0.05), 0 26px 80px rgba(0,0,0,0.42);
    }

    .shop-visual-shell::before {
      width: 66%; height: 66%; top: 17%; left: 17%;
      border-color: rgba(255,255,255,0.06);
    }
    .shop-visual-shell::after { display: none; }

    .shop-product-core { inset: 0; border: 0; background: transparent; box-shadow: none; }

    .shop-product-shine {
      inset: auto 18% 14% auto;
      width: 34%; height: 14%; opacity: 0.35;
    }

    .shop-product-media { inset: 8% 12% 14%; }

    .shop-product-media img {
      transform: translateY(var(--productY, 0)) scale(var(--productScale, 1));
      filter: drop-shadow(0 34px 54px rgba(0,0,0,0.52));
    }

    .shop-carousel-controls { inset: auto 1.5rem 1.5rem 1.5rem; }

    .shop-progress { padding: 0.75rem 0.95rem; background: rgba(7,10,12,0.78); }

    .shop-thumbs { gap: 0.65rem; margin-top: 0.95rem; }

    .shop-thumb {
      min-height: 52px;
      padding: 0.9rem 1rem;
      border-radius: 999px;
      text-align: center;
      background: rgba(255,255,255,0.02);
    }

    .shop-thumb-label,
    .shop-thumb-price { display: none; }

    .shop-thumb-name {
      margin: 0;
      font-size: 0.72rem;
      font-weight: 800;
      letter-spacing: 0.2em;
      text-transform: uppercase;
      color: rgba(240,237,232,0.78);
    }

    .shop-thumb.active .shop-thumb-name,
    .shop-thumb:hover .shop-thumb-name,
    .shop-thumb:focus-visible .shop-thumb-name { color: var(--shop-white); }

    /* ── Responsive carousel ──────────────────────────────────────── */
    @media (max-width: 980px) {
      .shop-stage { min-height: 700px; }
      .shop-slide.prev, .shop-slide.next,
      .shop-slide.hidden-left, .shop-slide.hidden-right {
        opacity: 0;
        transform: translateX(0) scale(0.96);
      }
      .shop-slide-copy {
        position: absolute;
        left: 1.25rem; right: 1.25rem; bottom: 1.25rem;
        max-width: 100%;
      }
      .shop-visual { min-height: 560px; }
      .shop-product-media { inset: 8% 10% 18%; }
    }

    @media (max-width: 700px) {
      .shop-hero { padding: 1.5rem 1rem 1.25rem; }
      .shop-collection { padding: 3rem 1rem 0; }
      .shop-prints-section { padding: 2.5rem 1rem 0; }
      .shop-stage { padding: 0.85rem; min-height: 580px; border-radius: 1.5rem; }
      .shop-carousel { min-height: 520px; }
      .shop-visual { min-height: 480px; }
      .shop-visual-shell { border-radius: 1.35rem; }
      .shop-product-media { inset: 10% 8% 22%; }
      .shop-slide-title {
        max-width: 10ch;
        font-size: clamp(2.35rem, 9vw, 3.5rem);
      }
      .shop-carousel-controls { inset: auto 0.9rem 0.9rem 0.9rem; }
      .shop-progress { display: none; }
      .shop-thumbs { grid-template-columns: repeat(2, minmax(0, 1fr)); }

      /* ── Mobile carousel ATC button revamp ── */
      .shop-slide-actions .shop-btn-primary {
        width: 100%;
        min-height: 58px;
        border-radius: 16px;
        justify-content: center;
        gap: 0.65rem;
        font-size: 0.72rem;
        font-weight: 900;
        letter-spacing: 0.16em;
        padding: 1rem 1.5rem;
        background: rgba(255,255,255,0.96);
        backdrop-filter: blur(20px);
        -webkit-backdrop-filter: blur(20px);
        box-shadow: 0 8px 32px rgba(0,0,0,0.35), inset 0 1px 0 rgba(255,255,255,0.6);
        color: #080b0e;
        border: none;
        align-self: stretch;
      }
      .shop-slide-actions .shop-btn-primary::before {
        content: '';
        display: inline-block;
        width: 20px;
        height: 20px;
        flex-shrink: 0;
        background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23080b0e' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='9' cy='21' r='1'/%3E%3Ccircle cx='20' cy='21' r='1'/%3E%3Cpath d='M1 1h4l2.68 13.39a2 2 0 0 0 2 1.61h9.72a2 2 0 0 0 2-1.61L23 6H6'/%3E%3C/svg%3E");
        background-repeat: no-repeat;
        background-size: contain;
        background-position: center;
      }
      .shop-slide-actions .shop-btn-primary:hover,
      .shop-slide-actions .shop-btn-primary:active {
        background: var(--shop-teal);
        transform: translateY(-2px);
        box-shadow: 0 12px 40px rgba(78,205,196,0.35);
      }
      .shop-slide-actions .shop-btn-primary:hover::before,
      .shop-slide-actions .shop-btn-primary:active::before {
        background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23080b0e' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='9' cy='21' r='1'/%3E%3Ccircle cx='20' cy='21' r='1'/%3E%3Cpath d='M1 1h4l2.68 13.39a2 2 0 0 0 2 1.61h9.72a2 2 0 0 0 2-1.61L23 6H6'/%3E%3C/svg%3E");
      }

      /* Product grids */
      .ap-grid { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; gap: 1rem; }
      .print-cards-grid { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; }
      /* Section headings */
      .shop-section-title { font-size: clamp(2.2rem, 8vw, 3.5rem); }
      .shop-section-copy { font-size: 0.85rem; }
    }

    @media (max-width: 430px) {
      .shop-page main { padding-top: 4.8rem; }
      .shop-hero { padding: 1rem 0.8rem 0.9rem; }
      .shop-hero-title { font-size: clamp(2.2rem, 11vw, 3.1rem); }
      .shop-stage { padding: 0.65rem; min-height: 520px; border-radius: 1.1rem; }
      .shop-carousel { min-height: 460px; }
      .shop-visual { min-height: 400px; }
      .shop-visual-shell { border-radius: 1rem; }
      .shop-product-media { inset: 10% 8% 24%; }
      .shop-slide-copy { left: 0.75rem; right: 0.75rem; bottom: 0.75rem; }
      .shop-slide-title {
        font-size: clamp(2rem, 10vw, 2.8rem);
        max-width: 11ch;
      }
      .shop-btn-primary { min-height: 54px; border-radius: 14px; font-size: 0.68rem; }
      .shop-carousel-controls { inset: auto 0.7rem 0.7rem 0.7rem; }
      .shop-controls-left { justify-content: center; }
      .shop-control-btn { width: 48px; height: 48px; }
      .shop-thumbs { gap: 0.5rem; }
      .shop-thumb { min-height: 48px; padding: 0.75rem 0.6rem; }
      .shop-thumb-name { font-size: 0.64rem; letter-spacing: 0.14em; }
      .shop-collection { padding-left: 0.8rem; padding-right: 0.8rem; }
      /* Product grids: 1 col on phone */
      .ap-grid { grid-template-columns: 1fr !important; }
      .print-cards-grid { grid-template-columns: 1fr !important; }
      /* Cart full width */
      .cart-drawer { width: 100% !important; right: 0 !important; }
    }