/* Product detail band: breadcrumb + sticky media gallery + buy column (purchase options, quantity
   tiers, add-ons, details accordion) and the narrow-screen sticky buy bar. */
.product-main { padding-block: var(--section-pad); }
.product-main--pad-top { padding-bottom: 0; }
.product-main--pad-bottom { padding-top: 0; }
.product-main--pad-none { padding-block: 0; }
.product-main {
  display: block;
  background: rgba(var(--color-background));
  color: rgba(var(--color-text));
}

/* ---------- Breadcrumb ---------- */
.product-main__breadcrumb {
  display: block;
  font: 500 11px/1 var(--font-mono);
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--theme-text-mono);
  margin-bottom: var(--product-main-breadcrumb-gap, 22px);
}
.product-main__breadcrumb a:hover { color: rgba(var(--color-text)); }

/* ---------- Two-column shell ---------- */
.product-main__grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(340px, 1fr));
  gap: 48px;
  align-items: start;
}

/* ---------- Gallery ---------- */
.product-main__gallery {
  display: flex;
  flex-direction: column;
  gap: 12px;
  position: sticky;
  top: calc(var(--header-h) + 22px);
}
.product-main__frame { position: relative; border-radius: var(--radius-lg); overflow: hidden; background: #000; }
.product-main__stage {
  display: flex; overflow-x: auto; scroll-snap-type: x mandatory; overscroll-behavior-x: contain;
  scrollbar-width: none; outline: none;
}
.product-main__stage::-webkit-scrollbar { display: none; }
.product-main__slide { flex: 0 0 100%; scroll-snap-align: center; background: #000; }
.product-main__slide img { width: 100%; aspect-ratio: 1; object-fit: cover; display: block; }
.product-main__nav {
  position: absolute; top: 50%; transform: translateY(-50%); z-index: 2;
  width: 40px; height: 40px; border-radius: var(--pill); border: 0; cursor: pointer;
  background: #F7F2E7E6; color: var(--theme-ink); font: 400 24px/1 var(--font-body);
  display: grid; place-items: center; opacity: 0; transition: opacity 0.18s ease, background 0.18s ease;
}
.product-main__frame:hover .product-main__nav { opacity: 1; }
.product-main__nav:hover { background: var(--theme-cream); }
.product-main__nav[disabled] { opacity: 0 !important; pointer-events: none; }
.product-main__nav--prev { left: 12px; }
.product-main__nav--next { right: 12px; }
.product-main__counter {
  position: absolute; right: 12px; bottom: 12px; z-index: 2;
  background: #0B0B0BB3; color: var(--theme-cream); border-radius: var(--pill);
  padding: 6px 12px; font: 500 11px/1 var(--font-mono); letter-spacing: 0.08em;
}
.product-main__dots { display: none; gap: 7px; justify-content: center; padding-top: 2px; }
.product-main__dot {
  width: 7px; height: 7px; padding: 0; border: 0; border-radius: var(--pill);
  background: #0B0B0B33; cursor: pointer; transition: background 0.18s ease, width 0.18s ease;
}
.product-main__dot.is-active { background: var(--theme-ink); width: 20px; }
.product-main__thumbs { display: flex; gap: 10px; overflow-x: auto; padding-bottom: 4px; }
.product-main__thumb {
  flex: 0 0 84px; border: 2px solid transparent; background: var(--theme-ink);
  border-radius: var(--radius-sm); padding: 0; cursor: pointer; overflow: hidden;
}
.product-main__thumb img { width: 100%; aspect-ratio: 1; object-fit: cover; }
.product-main__thumb.is-active { border-color: var(--theme-ink); }
@media (pointer: coarse) {
  .product-main__thumb { flex-basis: 72px; }
}

/* ---------- Buy column ---------- */
.product-main__rating {
  display: flex; align-items: center; gap: 12px;
  font: 500 12px/1 var(--font-mono); letter-spacing: 0.08em; text-transform: uppercase;
  color: var(--theme-text-mono);
}
.product-main__title { margin: 14px 0 0; }
.product-main__lede { max-width: 56ch; margin-top: 16px; }
.product-main__chips { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin-top: 22px; }
.product-main__options { display: grid; gap: 10px; margin-top: 30px; }

.product-main__option {
  text-align: left; cursor: pointer; width: 100%; background: transparent;
  border: 2px solid var(--theme-line-2); border-radius: var(--radius); padding: 18px 20px;
  display: flex; align-items: center; gap: 16px;
  transition: border-color 0.16s ease, background 0.16s ease;
}
.product-main__option:hover { border-color: var(--theme-line-3); }
.product-main__option.is-active { background: var(--theme-white); border-color: var(--theme-ink); }
.product-main__option-body { flex: 1; }
.product-main__option-title { display: block; font: 700 16px/1.2 var(--font-body); }
.product-main__option-note { display: block; font: 500 12px/1.4 var(--font-mono); color: var(--theme-text-muted); margin-top: 5px; }
.product-main__option-prices { text-align: right; }
.product-main__option-price { font-family: var(--font-display); font-size: 20px; }
.product-main__option-prices .product-main__option-price { display: block; }
.product-main__option-was { display: block; margin-top: 4px; }
.product-main__option-wrap {
  background: transparent; border: 2px solid var(--theme-line-2); border-radius: var(--radius);
  overflow: hidden; transition: border-color 0.16s ease, background 0.16s ease;
}
.product-main__option-wrap.is-active { background: var(--theme-white); border-color: var(--theme-ink); }
.product-main__option-wrap .product-main__option { border: 0; background: none; border-radius: 0; }
.product-main__option-wrap .product-main__option.is-active { background: none; }
.product-main__option-extra { padding: 0 20px 18px; }
.product-main__option-extra[hidden] { display: none; }
.product-main__cadence-label { margin-bottom: 10px; }
.product-main__cadence { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }

/* Optional purchase-options app block (@app mount). Unassigned it renders nothing, so the
   selector never applies. When a merchant assigns one it stays offstage by default: the app's
   server-rendered container and purchase SDK remain mounted and functional, but it contributes
   no layout, so a storefront that already renders its purchase options natively above keeps a
   single visible control. Turn on "Show the purchase-options app block" to place it in flow. */
.product-main__app-purchase { margin-top: 26px; }
.product-main__app-purchase--offstage {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: 0;
  padding: 0;
  overflow: hidden;
  clip-path: inset(50%);
  pointer-events: none;
}

.product-main__tiers-wrap { margin-top: 26px; }
.product-main__tiers-label { margin-bottom: 12px; }
.product-main__tiers { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; }
.product-main__tier {
  cursor: pointer; background: var(--theme-white); color: var(--theme-ink);
  border: 2px solid var(--theme-line-2); border-radius: 16px; padding: 18px 12px 16px;
  text-align: center; transition: background 0.16s ease, color 0.16s ease, border-color 0.16s ease;
}
.product-main__tier:hover { border-color: var(--theme-line-3); }
.product-main__tier.is-active { background: var(--theme-ink); color: var(--theme-cream); border-color: var(--theme-ink); }
.product-main__tier-qty { display: block; font-family: var(--font-display); font-size: 26px; line-height: 1; }
.product-main__tier-label { display: block; font: 600 11px/1.3 var(--font-body); letter-spacing: 0.06em; text-transform: uppercase; margin-top: 6px; }
.product-main__tier-each { display: block; font: 500 12px/1 var(--font-mono); margin-top: 8px; opacity: 0.75; }
@media (max-width: 380px) {
  .product-main__tiers { grid-template-columns: 1fr; }
}

.product-main__form { display: contents; }
.product-main__cta { margin-top: 22px; }
.product-main__cta-sep { opacity: 0.6; }
.product-main__save { margin-top: 12px; text-align: center; }
.product-main__save[hidden] { display: none; }
.product-main__notice { margin-top: 12px; text-align: center; color: var(--theme-red); font: 600 14px/1.4 var(--font-body); }
.product-main__notice[hidden] { display: none; }

.product-main__addons-panel { margin-top: 26px; }
.product-main__addons { display: grid; gap: 10px; margin-top: 16px; }
.product-main__addon {
  cursor: pointer; text-align: left; width: 100%; background: var(--theme-white);
  border: 1px solid var(--theme-line-2); border-radius: 14px; padding: 12px;
  display: flex; align-items: center; gap: 14px;
  transition: background 0.16s ease, border-color 0.16s ease;
}
.product-main__addon:hover { border-color: var(--theme-line-3); }
.product-main__addon.is-on { background: var(--theme-cream); border-color: var(--theme-ink); }
.product-main__addon img { width: 48px; height: 48px; object-fit: cover; border-radius: 9px; background: var(--theme-ink); flex: 0 0 auto; }
.product-main__addon-title { flex: 1; font: 600 14px/1.3 var(--font-body); }
.product-main__addon-note { display: block; font: 500 11px/1 var(--font-mono); color: var(--theme-text-mono); margin-top: 5px; }
.product-main__addon-price { text-align: right; font: 700 14px/1 var(--font-body); }
.product-main__addon-was { display: block; font: 500 11px/1 var(--font-mono); color: var(--theme-text-mono); text-decoration: line-through; margin-top: 4px; }

.product-main__trust { display: flex; flex-wrap: wrap; gap: 18px 28px; font: 600 13px/1.3 var(--font-body); color: var(--theme-text-soft); margin-top: 26px; }

.product-main__details { border-top: 1px solid var(--theme-line-2); margin-top: 30px; }
.product-main__detail { border-bottom: 1px solid var(--theme-line-2); }
.product-main__detail-btn {
  width: 100%; background: none; border: 0; cursor: pointer; text-align: left; padding: 19px 0;
  display: flex; gap: 16px; align-items: center;
  font: 700 16px/1.3 var(--font-body); color: rgba(var(--color-text)); transition: color 0.15s ease;
}
.product-main__detail-btn > span:first-child { flex: 1; }
.product-main__detail-btn:hover { color: var(--theme-link-hover); }
.product-main__detail-sign { font-family: var(--font-mono); font-size: 22px; color: var(--theme-text-mono); }
.product-main__detail-panel {
  display: none; padding-bottom: 20px; max-width: 60ch;
  color: rgba(var(--color-light-text)); font-size: 15px; line-height: 1.6; text-wrap: pretty;
}
.product-main__detail.is-open .product-main__detail-panel { display: block; animation: theme-rise 0.25s ease both; }

/* ---------- Narrow-screen sticky buy bar ---------- */
.product-main__stickybuy {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 70;
  background: #F7F2E7F5; backdrop-filter: blur(8px); border-top: 1px solid var(--theme-line-2);
  padding: 12px var(--gutter); display: none; align-items: center; gap: 14px;
}
.product-main__stickybuy.is-on { display: flex; animation: theme-rise 0.25s ease both; }
.product-main__stickybuy-info { flex: 1; min-width: 0; }
.product-main__stickybuy-title { font: 700 14px/1.2 var(--font-body); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
@media (min-width: 901px) {
  .product-main__stickybuy { display: none !important; }
}
/* The bar is fixed to the viewport bottom, so the document reserves its height while the bar can
   appear — otherwise it covers the last footer row once the page is scrolled to the end. */
@media (max-width: 900px) {
  body:has(.product-main__stickybuy) { padding-bottom: 88px; }
}
@media (max-width: 620px) {
  .product-main__stickybuy { padding-block: 10px; }
}

/* Touch: swipe the stage, dots for position, no thumbnail strip or arrows. */
@media (max-width: 900px) {
  .product-main__grid { grid-template-columns: 1fr; gap: 32px; }
  .product-main__gallery { position: static; top: auto; }
  .product-main__dots { display: flex; }
  .product-main__thumbs { display: none; }
  .product-main__nav { display: none; }
}

/* ---------- Gallery read from the product's own media ---------- */
/* The stock image tag prints the file's own width and height attributes. Without `height: auto` the height
   attribute beats `aspect-ratio`, and a slide or thumbnail is as tall as the original file. */
.product-main__slide img,
.product-main__thumb img { height: auto; }

/* States the design never drew. No image, or exactly one: nothing to step through, so no arrows, counter,
   dots or thumbnails. Two classes outrank the single-class rules above at every breakpoint. */
.product-main__gallery--empty .product-main__nav,
.product-main__gallery--empty .product-main__counter,
.product-main__gallery--empty .product-main__dots,
.product-main__gallery--empty .product-main__thumbs,
.product-main__gallery--single .product-main__nav,
.product-main__gallery--single .product-main__counter,
.product-main__gallery--single .product-main__dots,
.product-main__gallery--single .product-main__thumbs { display: none; }

/* No image on the product: a brand panel holds the square frame — ink ground, the theme's own inlined wordmark,
   a mono caption. The wordmark carries only a viewBox, so it is given its width here and takes the panel's own
   colour through `fill="currentColor"` — nothing to invert, and no file path to go stale. */
.product-main__empty {
  flex: 0 0 100%; aspect-ratio: 1; background: var(--theme-ink); color: var(--theme-cream);
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 18px;
  padding: 24px; text-align: center;
}
.product-main__empty-mark { display: block; width: min(52%, 300px); }
.product-main__empty-mark svg { display: block; width: 100%; height: auto; }
.product-main__empty-caption {
  font: 500 11px/1.4 var(--font-mono); letter-spacing: 0.1em; text-transform: uppercase;
  color: var(--theme-text-on-dark-muted);
}
/* A replacement image picked in the editor fills the frame instead of the panel. */
.product-main__empty--image { padding: 0; }
.product-main__empty--image img { width: 100%; height: auto; aspect-ratio: 1; object-fit: cover; display: block; }