/** Shopify CDN: Minification failed

Line 698:16 Unexpected "{"
Line 698:25 Expected ":"

**/
/* ============================================================
   Only Packs — Product Page v2 design system
   Tokens, typography utilities, and shared component styles.
   Loaded by sections/main-product.liquid on product pages only.
   ============================================================ */

:root {
  /* ── Core palette (mirrors settings_data.json color schemes) ── */
  --op-cream:        #FFFFFF;
  --op-cream-deep:   #F3F3F3;
  --op-ink:          #121212;
  --op-ink-soft:     #3A3A3A;
  --op-ink-mute:     #8A8A8A;
  --op-line:         #E5E5E5;

  /* ── Brand accent (scheme-5) ── */
  --op-accent:       #334FB4;
  --op-accent-soft:  #E4E8F6;
  --op-accent-deep:  #243A8A;

  /* ── Status ── */
  --op-ok:           #1F7A4D;
  --op-ok-soft:      #E4F2EB;
  --op-warn-ink:     #6B4A00;
  --op-warn-soft:    #F8EFD4;
  --op-urgent:       #B3261E;
  --op-urgent-soft:  #FCE8E6;
  --op-urgent-line:  #F6BBB5;

  /* ── Highlight (save tags, cart count, logo spark) ── */
  --op-sun:          #FFD66B;
  --op-sun-deep:     #C99300;

  /* ── Border radii ── */
  --op-radius-xl:    28px;
  --op-radius-l:     20px;
  --op-radius-m:     14px;
  --op-radius-s:     10px;

  /* ── Shadows ── */
  --op-shadow-soft:  0 2px 0 rgba(18,18,18,0.04), 0 18px 40px -22px rgba(18,18,18,0.18);
  --op-shadow-card:  0 1px 0 rgba(18,18,18,0.04), 0 24px 50px -28px rgba(18,18,18,0.22);
  --op-shadow-press: 0 6px 0 var(--op-ink);

  /* ── Typography ── */
  --op-font-display: 'Bricolage Grotesque', 'DM Sans', system-ui, sans-serif;
  --op-font-body:    var(--font-body-family, system-ui, sans-serif);
  --op-font-mono:    'JetBrains Mono', ui-monospace, monospace;
}

/* ── Typography utility classes ── */
.op-display {
  font-family: var(--op-font-display);
  font-weight: 700;
  letter-spacing: -0.02em;
}

.op-mono {
  font-family: var(--op-font-mono);
}

/* ── Pill / badge shared styles ── */
.op-vendor-pill {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: var(--op-accent-soft);
  color: var(--op-ink);
  padding: 6px 12px;
  border-radius: 999px;
  font-family: var(--op-font-mono);
  font-size: 11px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  font-weight: 500;
  margin-bottom: 16px;
}
.op-vendor-pill::before {
  content: "";
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--op-ok);
}

/* ── Stock pill ── */
.op-stock-pill {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 6px 11px;
  border-radius: 999px;
  background: var(--op-ok-soft);
  color: var(--op-ok);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.02em;
  line-height: 1;
}
.op-stock-pill__dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--op-ok);
}
.op-stock-pill--low {
  background: var(--op-warn-soft);
  color: var(--op-warn-ink);
}
.op-stock-pill--low .op-stock-pill__dot {
  background: var(--op-warn-ink);
}
.op-stock-pill--urgent {
  background: var(--op-urgent-soft);
  border: 1px solid var(--op-urgent-line);
  color: var(--op-urgent);
}
.op-stock-pill--urgent .op-stock-pill__dot {
  background: var(--op-urgent);
}
.op-stock-pill--out {
  background: var(--op-cream-deep);
  color: var(--op-ink-mute);
}
.op-stock-pill--out .op-stock-pill__dot {
  background: var(--op-ink-mute);
}
.op-stock-pill--store-only {
  background: #e9eefb;
  border: 1px solid #c7d3f4;
  color: var(--op-accent-deep);
  font-size: 14px;
  padding: 9px 14px;
}
.op-stock-pill--store-only .op-stock-pill__dot {
  background: var(--op-accent);
  width: 7px;
  height: 7px;
}

/* ── Save tag (rotated sticker) ── */
.op-save-tag {
  background: var(--op-sun);
  color: var(--op-ink);
  padding: 5px 11px;
  border-radius: 8px;
  font-weight: 700;
  font-size: 12px;
  letter-spacing: 0.04em;
  transform: rotate(-2deg);
  box-shadow: 0 2px 0 var(--op-ink);
  white-space: nowrap;
  display: inline-block;
}

/* ── Trust strip ── */
.op-trust {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 12px;
  padding: 18px;
  background: var(--op-cream);
  border-radius: var(--op-radius-l);
  border: 1px solid var(--op-line);
}
.op-trust__item {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: 6px;
}
.op-trust__icon {
  width: 36px;
  height: 36px;
  border-radius: 10px;
  display: grid;
  place-items: center;
}
.op-trust__item:nth-child(1) .op-trust__icon { background: var(--op-accent-soft); color: var(--op-accent); }
.op-trust__item:nth-child(2) .op-trust__icon { background: var(--op-cream-deep); color: var(--op-ink); }
.op-trust__item:nth-child(3) .op-trust__icon { background: var(--op-ok-soft); color: var(--op-ok); }
.op-trust__title { font-weight: 700; font-size: 13px; }
.op-trust__sub   { font-size: 11px; color: var(--op-ink-mute); }

/* ── Share row ── */
.op-share-row {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-top: 22px;
  font-size: 13px;
  color: var(--op-ink-soft);
}
.op-share-btn {
  width: 34px;
  height: 34px;
  border-radius: 50%;
  background: var(--op-cream);
  border: 1px solid var(--op-line);
  display: grid;
  place-items: center;
  transition: transform 0.15s ease, background 0.15s ease, color 0.15s ease;
  cursor: pointer;
  color: var(--op-ink-soft);
}
.op-share-btn:hover {
  transform: translateY(-2px);
  background: var(--op-cream-deep);
  color: var(--op-accent);
}

/* ── Mobile add-to-cart bar ── */
.op-mobile-bar {
  display: none;
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  background: var(--op-cream);
  border-top: 1px solid var(--op-line);
  padding: 12px 16px calc(12px + env(safe-area-inset-bottom));
  z-index: 60;
  gap: 12px;
  align-items: center;
  box-shadow: 0 -10px 30px -10px rgba(18,18,18,0.18);
}
.op-mobile-bar__price-label {
  font-size: 10px;
  color: var(--op-ink-mute);
  letter-spacing: 0.1em;
  text-transform: uppercase;
}
.op-mobile-bar__price-val {
  font-family: var(--op-font-display);
  font-weight: 700;
  font-size: 22px;
  color: var(--op-ink);
}

@media screen and (max-width: 880px) {
  .op-trust {
    padding: 14px 10px;
    gap: 4px;
  }
  .op-trust__sub { font-size: 10px; }
  .op-mobile-bar { display: flex; }
}

@media screen and (max-width: 480px) {
  .op-save-tag { display: none; }
}

/* ============================================================
   Breadcrumbs — all product pages
   ============================================================ */

.op-breadcrumbs {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 6px 10px;
  padding: 18px 0 12px;   /* page-width provides left/right padding */
  font-size: 13px;
  color: var(--op-accent);
  letter-spacing: 0.02em;
}

.op-breadcrumbs a {
  color: var(--op-accent);
  text-decoration: none;
  transition: color 0.15s ease;
}
.op-breadcrumbs a:hover { color: var(--op-accent-deep); }

.op-breadcrumbs__sep {
  color: var(--op-accent);
  opacity: 0.45;
  user-select: none;
}

.op-breadcrumbs__current {
  color: var(--op-accent);
  font-weight: 600;
  /* truncate long product titles on small screens */
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  max-width: 40ch;
}

@media screen and (max-width: 749px) {
  .op-breadcrumbs {
    padding: 14px 0 8px;
    font-size: 12px;
  }
  .op-breadcrumbs__current { max-width: 22ch; }
}

/* ============================================================
   Stage 4 — Buy section: quantity, ATC button, trust strip
   ============================================================ */

/* ── Quantity stepper ───────────────────────────────────────── */
.op-info .quantity {
  background: var(--op-cream);
  border: 1.5px solid var(--op-line) !important;
  border-radius: var(--op-radius-m) !important;
  padding: 4px;
  height: 56px;
  display: inline-flex;
  align-items: center;
  box-shadow: none !important;
}

.op-info .quantity__button {
  width: 36px;
  height: 36px;
  border-radius: 10px;
  display: grid;
  place-items: center;
  color: var(--op-ink);
  transition: background 0.15s ease;
  background: transparent;
  border: none;
}
.op-info .quantity__button:hover { background: var(--op-cream-deep); }

.op-info .quantity__input {
  width: 44px !important;
  font-family: var(--op-font-display);
  font-weight: 700;
  font-size: 18px;
  text-align: center;
  color: var(--op-ink);
  border: none;
  background: transparent;
  -moz-appearance: textfield;
}
.op-info .quantity__input::-webkit-inner-spin-button,
.op-info .quantity__input::-webkit-outer-spin-button { -webkit-appearance: none; }

/* ── Add-to-cart button ─────────────────────────────────────── */
.op-info .product-form__submit {
  background: var(--op-ink) !important;
  color: var(--op-cream) !important;
  border-radius: var(--op-radius-m) !important;
  padding: 18px 22px !important;
  font-family: var(--op-font-display) !important;
  font-weight: 700 !important;
  font-size: 16px !important;
  letter-spacing: 0.01em;
  box-shadow: var(--op-shadow-press) !important;
  border: none !important;
  transition: transform 0.12s ease, box-shadow 0.12s ease;
  position: relative;
  overflow: hidden;
  width: 100%;
}

/* Shimmer sweep on hover */
.op-info .product-form__submit::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(
    115deg,
    transparent 30%,
    rgba(255, 255, 255, 0.16) 50%,
    transparent 70%
  );
  transform: translateX(-100%);
  transition: transform 0.55s ease;
  pointer-events: none;
}
.op-info .product-form__submit:hover::after  { transform: translateX(100%); }
.op-info .product-form__submit:hover         { transform: translateY(-2px); box-shadow: 0 8px 0 var(--op-ink) !important; }
.op-info .product-form__submit:active        { transform: translateY(2px);  box-shadow: 0 2px 0 var(--op-ink) !important; }

/* Disabled state */
.op-info .product-form__submit:disabled,
.op-info .product-form__submit[disabled] {
  background: var(--op-cream-deep) !important;
  color: var(--op-ink-mute) !important;
  box-shadow: none !important;
  transform: none !important;
  cursor: not-allowed;
}
.op-info .product-form__submit:disabled::after { display: none; }

/* ── Dynamic checkout (Shop Pay etc.) ───────────────────────── */
.op-info .shopify-payment-button { margin-top: 10px; }
.op-info .shopify-payment-button__button--branded {
  border-radius: var(--op-radius-m) !important;
  min-height: 52px !important;
}
.op-info .shopify-payment-button__button--unbranded {
  background: var(--op-accent) !important;
  border-radius: var(--op-radius-m) !important;
  font-family: var(--op-font-display) !important;
  font-weight: 700 !important;
  font-size: 15px !important;
  min-height: 52px !important;
  transition: background 0.12s ease, transform 0.12s ease;
}
.op-info .shopify-payment-button__button--unbranded:hover {
  background: var(--op-accent-deep) !important;
  transform: translateY(-1px);
}

/* ── Shipping line ──────────────────────────────────────────── */
.op-ship-line {
  display: flex;
  align-items: center;
  gap: 10px;
  color: var(--op-ink-soft);
  font-size: 13px;
  padding: 12px 2px 4px;
}
.op-ship-line svg {
  color: var(--op-ok);
  flex-shrink: 0;
}
.op-ship-line strong { color: var(--op-ink); font-weight: 600; }

/* ── Trust strip (layout already defined in Stage 1 tokens) ─── */
/* Spacing adjustment inside the product info column */
.op-info .op-trust {
  margin: 16px 0 0;
}

@media screen and (max-width: 749px) {
  .op-info .quantity { height: 50px; }
  .op-info .product-form__submit { padding: 15px 18px !important; font-size: 15px !important; }
}

/* ============================================================
   Stage 3 — Info panel: title, price block, variant picker
   ============================================================ */

/* ── Product title ──────────────────────────────────────────── */
.op-info .product__title h1,
.op-info .product__title .h1 {
  font-family: var(--op-font-display);
  font-weight: 700;
  font-size: clamp(28px, 4.2vw, 48px);
  line-height: 1.05;
  letter-spacing: -0.03em;
  margin: 0 0 14px;
  color: var(--op-ink);
}

/* Support <em> in title for optional accent word */
.op-info .product__title h1 em,
.op-info .product__title .h1 em {
  font-style: normal;
  color: var(--op-accent);
}

/* ── SKU — mono font ────────────────────────────────────────── */
.op-info .product__sku {
  font-family: var(--op-font-mono);
  font-size: 11px;
  letter-spacing: 0.08em;
  color: var(--op-ink-mute);
}

/* ── Price block ────────────────────────────────────────────── */
.op-price-wrapper {
  display: flex;
  align-items: baseline;
  gap: 14px;
  flex-wrap: wrap;
  padding: 18px 0;
  border-top: 1px dashed var(--op-line);
  border-bottom: 1px dashed var(--op-line);
  margin-bottom: 28px;
}

/* Sale price — big Bricolage number */
.op-price-wrapper .price-item--sale,
.op-price-wrapper .price-item--regular:only-child {
  font-family: var(--op-font-display);
  font-weight: 700;
  font-size: 40px;
  letter-spacing: -0.03em;
  line-height: 1;
  color: var(--op-ink);
}

/* Struck-through original price */
.op-price-wrapper .price__sale .price-item--regular,
.op-price-wrapper s.price-item--regular {
  font-size: 18px;
  font-family: inherit;
  color: var(--op-ink-mute);
  text-decoration: line-through;
  font-weight: 400;
}

/* Push the save tag to the right */
.op-price-wrapper .op-save-tag {
  margin-left: auto;
}

/* Hide Dawn's default "Sale" badge — we show our own save % tag */
.op-price-wrapper .price__badge-sale {
  display: none !important;
}

/* Reset Dawn's default price--large sizing inside our wrapper */
.op-price-wrapper .price--large .price__container {
  display: contents;
}
.op-price-wrapper .price--large {
  display: contents;
}

/* ── Variant picker cards ───────────────────────────────────── */
/* Scoped to the info section so only product page is affected */

/* Fieldset → flex row that wraps.
   Flexbox (not grid) is used because <legend> inside a <fieldset>
   has special browser rendering that breaks CSS Grid alignment. */
.op-info .product-form__input--pill {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  border: none;
  margin: 0;
  padding: 0;
  align-items: stretch;
}

/* Legend takes its own full row above the buttons */
.op-info .product-form__input--pill legend.form__label {
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.02em;
  color: var(--op-ink);
  margin-bottom: 0; /* gap handles spacing */
  padding: 0;
  flex: 0 0 100%; /* force full-width row */
  width: 100%;
}

/* Hide the actual radio input visually but keep it accessible */
.op-info .product-form__input--pill input[type="radio"] {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

/* Card label — default/unselected state.
   Selector beats Dawn's component-product-variant-picker.css rule
   (.product-form__input--pill input[type='radio'] + label = specificity 0,2,2)
   by adding .op-info and matching the same input+label pattern = 0,3,2 */
.op-info .product-form__input--pill input[type="radio"] + label {
  /* Flex item: grow to fill row, min 120px so ≥2 fit side by side */
  flex: 1 1 120px;
  border: 1.5px solid var(--op-line);
  background: var(--op-cream);
  border-radius: var(--op-radius-m);
  padding: 12px 14px;
  margin: 0;
  display: flex !important;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  text-align: center;
  gap: 4px;
  cursor: pointer;
  transition: border-color 0.15s ease, transform 0.15s ease, background 0.15s ease, color 0.15s ease;
  font-size: 14px;
  font-weight: 600;
  color: var(--op-ink);
  min-height: 52px;
  line-height: 1.3;
  user-select: none;
  box-sizing: border-box;
  position: static;
}

.op-info .product-form__input--pill input[type="radio"] + label:hover {
  border-color: var(--op-ink-soft);
  transform: translateY(-1px);
}

/* Selected state — brand blue */
.op-info .product-form__input--pill input[type="radio"]:checked + label {
  border-color: var(--op-accent);
  background: var(--op-accent);
  color: #ffffff;
}

/* Focus ring for accessibility */
.op-info .product-form__input--pill input[type="radio"]:focus-visible + label {
  outline: 2px solid var(--op-accent);
  outline-offset: 2px;
}

/* Disabled/sold-out state — diagonal stripe */
.op-info .product-form__input--pill input[type="radio"].disabled + label,
.op-info .product-form__input--pill input[type="radio"]:disabled + label {
  opacity: 0.5;
  cursor: not-allowed;
  background:
    repeating-linear-gradient(
      135deg,
      transparent 0 8px,
      rgba(18, 18, 18, 0.05) 8px 9px
    ),
    var(--op-cream);
  transform: none;
}

/* The "sold out / unavailable" visually-hidden text (keep it hidden) */
.op-info .product-form__input--pill input[type="radio"] + label .label-unavailable {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
}

@media screen and (max-width: 749px) {
  .op-info .product__title h1,
  .op-info .product__title .h1 {
    font-size: clamp(26px, 7vw, 36px);
  }
  .op-price-wrapper .price-item--sale,
  .op-price-wrapper .price-item--regular:only-child {
    font-size: 32px;
  }
  .op-price-wrapper .op-save-tag {
    display: none; /* reclaimed by the mobile bar in Stage 5 */
  }
  .op-info .product-form__input--pill input[type="radio"] + label {
    flex: 1 1 100px; /* slightly smaller min on mobile */
  }
}

/* ============================================================
   Stage 2 — Product gallery
   ============================================================ */

/* ── Gallery wrapper (relative so the badge can overlay) ── */
.op-gallery-wrapper {
  position: relative;
}

/* ── "New drop" badge ─────────────────────────────────────── */
.op-gallery-badge {
  position: absolute;
  top: 20px;
  left: 20px;
  z-index: 10;
  background: var(--op-ink);
  color: #ffffff;
  padding: 8px 14px;
  border-radius: 999px;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  display: flex;
  align-items: center;
  gap: 8px;
  pointer-events: none;
}
.op-gallery-badge__dot {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--op-ok);
  box-shadow: 0 0 0 4px rgba(31, 122, 77, 0.22);
  animation: op-badge-pulse 1.8s ease-in-out infinite;
}
@keyframes op-badge-pulse {
  0%, 100% { box-shadow: 0 0 0 4px rgba(31,122,77,0.22); }
  50%       { box-shadow: 0 0 0 7px rgba(31,122,77,0.05); }
}

/* ── Main stage — the large image area ─────────────────────── */
/* Target the slider component that holds the main image(s) */
#GalleryViewer-{{ section.id }} .product__media-list,
.op-gallery-wrapper slider-component:first-of-type .product__media-list {
  border-radius: var(--op-radius-xl) !important;
  overflow: hidden;
  background:
    radial-gradient(circle at 20% 18%, #EDEFF7 0%, transparent 55%),
    radial-gradient(circle at 80% 30%, #E4E8F6 0%, transparent 60%),
    radial-gradient(circle at 50% 90%, #F0F1F4 0%, transparent 60%),
    linear-gradient(135deg, #F7F7F8, #ECEFF7);
  border: 1px solid rgba(18, 18, 18, 0.06);
  box-shadow: var(--op-shadow-card);
}

/* Generic scoped fallback (works without section ID) */
.op-gallery-wrapper .product__media-list {
  border-radius: var(--op-radius-xl);
  overflow: hidden;
  background:
    radial-gradient(circle at 20% 18%, #EDEFF7 0%, transparent 55%),
    radial-gradient(circle at 80% 30%, #E4E8F6 0%, transparent 60%),
    radial-gradient(circle at 50% 90%, #F0F1F4 0%, transparent 60%),
    linear-gradient(135deg, #F7F7F8, #ECEFF7);
  border: 1px solid rgba(18, 18, 18, 0.06);
  box-shadow: var(--op-shadow-card);
}

/* Remove the default media border/radius on the inner items so
   the outer stage container's radius is what shows */
.op-gallery-wrapper .product__media-item .global-media-settings,
.op-gallery-wrapper .product__media-item {
  border-radius: 0 !important;
  border: none !important;
  box-shadow: none !important;
  overflow: hidden;
}

/* ── Thumbnail buttons ──────────────────────────────────────── */
.op-gallery-wrapper .thumbnail-list {
  gap: 12px;
}

.op-gallery-wrapper .thumbnail-list__item .thumbnail {
  border-radius: var(--op-radius-m);
  border: 2px solid transparent !important;
  background: var(--op-cream);
  padding: 6px;
  transition: transform 0.15s ease, border-color 0.15s ease;
  box-shadow: var(--op-shadow-soft);
  overflow: visible; /* let the border show outside */
}

.op-gallery-wrapper .thumbnail-list__item .thumbnail.active,
.op-gallery-wrapper .thumbnail-list__item .thumbnail[aria-current="true"] {
  border-color: var(--op-ink) !important;
}

.op-gallery-wrapper .thumbnail-list__item .thumbnail:hover {
  transform: translateY(-2px);
}

.op-gallery-wrapper .thumbnail-list__item .thumbnail img {
  border-radius: 8px;
  display: block;
}

/* Remove Dawn's default solid border on thumbnails */
.op-gallery-wrapper .thumbnail-list__item .thumbnail {
  --media-border-width: 0px;
  --media-border-opacity: 0;
}

/* ── Sticky columns: clear the actual header height ─────────── */
/* Dawn hardcodes top: 3rem but the nav is taller.
   Dawn JS sets --header-height on :root so we use that instead.
   Higher specificity (0,2,0) beats Dawn's (0,1,0) rule. */
@media screen and (min-width: 750px) {
  .op-gallery-wrapper .product__column-sticky,
  .op-info.product__column-sticky {
    top: calc(var(--header-height, 0px) + 1.5rem);
  }
}

/* ── Vertical thumbnail strip on the LEFT of the main image ─── */
@media screen and (min-width: 750px) {
  /* Turn the media-gallery element into a flex row so we can
     place thumbnails to the left and the main viewer on the right */
  .op-gallery-wrapper media-gallery {
    display: flex;
    flex-direction: row;
    align-items: flex-start;
    gap: 10px;
  }

  /* Main image viewer fills remaining space */
  .op-gallery-wrapper media-gallery > slider-component:first-of-type {
    flex: 1;
    min-width: 0;
  }

  /* Thumbnail slider: narrow fixed column on the LEFT */
  .op-gallery-wrapper .thumbnail-slider {
    order: -1;
    flex: 0 0 72px;
    width: 72px;
  }

  /* Override Dawn's 4-column grid → single vertical column */
  .op-gallery-wrapper .thumbnail-list {
    display: flex !important;
    flex-direction: column !important;
    gap: 8px;
    grid-template-columns: unset !important;
    flex-wrap: nowrap;
  }

  /* Each thumbnail item fills the column */
  .op-gallery-wrapper .thumbnail-list__item {
    width: 100% !important;
    margin: 0 !important;
  }

  /* Thumbnail buttons: square, fill column width */
  .op-gallery-wrapper .thumbnail-list__item .thumbnail {
    width: 100% !important;
    height: auto !important;
    aspect-ratio: 1 / 1;
    padding: 4px;
    display: block;
  }

  /* Thumbnail images fill their button */
  .op-gallery-wrapper .thumbnail-list__item .thumbnail img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: 6px;
  }

  /* Hide the slider prev/next arrows — not needed for a vertical column */
  .op-gallery-wrapper .thumbnail-slider > .slider-button {
    display: none !important;
  }
}

/* ── Responsive ─────────────────────────────────────────────── */
@media screen and (max-width: 749px) {
  .op-gallery-badge {
    top: 14px;
    left: 14px;
    font-size: 11px;
    padding: 6px 12px;
  }
  .op-gallery-wrapper .product__media-list {
    border-radius: var(--op-radius-l);
  }
}

/* ============================================================
   Stage 5 — Accordion, Share button, Mobile ATC bar, Related cards
   ============================================================ */

/* ── Accordion ──────────────────────────────────────────────── */
.op-info .product__accordion {
  border-bottom: 1px solid var(--op-line);
  margin: 0;
}
.op-info .product__accordion + .product__accordion {
  /* sibling accordions share their top border with the previous one's bottom */
}
.op-info .product__accordion:first-of-type {
  border-top: 1px solid var(--op-line);
}

.op-info .product__accordion summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 18px 2px;
  cursor: pointer;
  list-style: none;
  user-select: none;
  gap: 12px;
}

/* Remove default triangle in all browsers */
.op-info .product__accordion summary::-webkit-details-marker { display: none; }
.op-info .product__accordion summary::marker               { display: none; }

/* Hide Dawn's rotating caret SVG — we add our own indicator */
.op-info .product__accordion summary .icon-caret,
.op-info .product__accordion summary > .svg-wrapper        { display: none !important; }

/* + / × indicator */
.op-info .product__accordion summary::after {
  content: "+";
  font-size: 22px;
  font-weight: 300;
  line-height: 1;
  color: var(--op-ink-soft);
  flex-shrink: 0;
  transition: color 0.15s ease;
}
.op-info .product__accordion details[open] > summary::after {
  content: "×";
  color: var(--op-accent);
}

/* Summary title row */
.op-info .product__accordion .summary__title {
  display: flex;
  align-items: center;
  gap: 10px;
  flex: 1;
}
.op-info .product__accordion .accordion__title {
  font-family: var(--op-font-display);
  font-weight: 600;
  font-size: 15px;
  letter-spacing: -0.01em;
  margin: 0;
  color: var(--op-ink);
}

/* Content */
.op-info .product__accordion .accordion__content {
  padding: 0 2px 20px;
  font-size: 14px;
  line-height: 1.75;
  color: var(--op-ink-soft);
}
.op-info .product__accordion .accordion__content a {
  color: var(--op-accent);
  text-decoration: underline;
}

/* ── Share button ────────────────────────────────────────────── */
.op-info .share-button {
  margin-top: 4px;
}
.op-info .share-button__button {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 10px 18px;
  border-radius: 999px;
  background: var(--op-cream);
  border: 1.5px solid var(--op-line);
  color: var(--op-ink-soft);
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
  transition: background 0.15s ease, border-color 0.15s ease, color 0.15s ease;
}
.op-info .share-button__button:hover {
  background: var(--op-accent-soft);
  border-color: var(--op-accent);
  color: var(--op-accent);
}
.op-info .share-button__button .svg-wrapper svg {
  width: 16px;
  height: 16px;
}
/* URL fallback popup */
.op-info .share-button__fallback {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-top: 10px;
}
.op-info .share-button__fallback .field { flex: 1; }
.op-info .share-button__fallback .field__input {
  border-radius: var(--op-radius-s) !important;
  font-size: 12px;
  height: 40px !important;
}
.op-info .share-button__copy,
.op-info .share-button__close {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  border: 1px solid var(--op-line);
  background: var(--op-cream);
  display: grid;
  place-items: center;
  cursor: pointer;
  color: var(--op-ink-soft);
  transition: background 0.15s ease, color 0.15s ease;
  flex-shrink: 0;
}
.op-info .share-button__copy:hover,
.op-info .share-button__close:hover {
  background: var(--op-accent-soft);
  color: var(--op-accent);
}

/* ── Mobile ATC bar — button & price block ──────────────────── */
.op-mobile-bar__price {
  display: flex;
  flex-direction: column;
  line-height: 1.2;
}
.op-mobile-bar__btn {
  flex: 1;
  background: var(--op-ink);
  color: #ffffff;
  border: none;
  border-radius: var(--op-radius-m);
  padding: 15px 20px;
  font-family: var(--op-font-display);
  font-weight: 700;
  font-size: 15px;
  cursor: pointer;
  transition: background 0.15s ease, transform 0.12s ease;
  box-shadow: 0 4px 0 rgba(18, 18, 18, 0.5);
}
.op-mobile-bar__btn:hover   { background: var(--op-ink-soft); transform: translateY(-1px); }
.op-mobile-bar__btn:active  { transform: translateY(1px); box-shadow: 0 1px 0 rgba(18,18,18,0.5); }
.op-mobile-bar__btn:disabled {
  background: var(--op-cream-deep);
  color: var(--op-ink-mute);
  box-shadow: none;
  cursor: not-allowed;
  transform: none;
}

/* ── Related product cards ───────────────────────────────────── */
.related-products .card-wrapper {
  transition: transform 0.2s ease;
}
.related-products .card-wrapper:hover {
  transform: translateY(-4px);
}
.related-products .card--product {
  border-radius: var(--op-radius-l) !important;
  overflow: hidden;
  box-shadow: var(--op-shadow-soft);
  transition: box-shadow 0.2s ease;
}
.related-products .card-wrapper:hover .card--product {
  box-shadow: var(--op-shadow-card);
}
/* Quick-add button — brand blue */
.related-products .quick-add__submit {
  background: var(--op-accent) !important;
  color: #ffffff !important;
  border-radius: var(--op-radius-s) !important;
  font-family: var(--op-font-display);
  font-weight: 700;
  transition: background 0.15s ease, transform 0.12s ease !important;
}
.related-products .quick-add__submit:hover {
  background: var(--op-accent-deep) !important;
  transform: scale(1.03);
}