/* Product hero: section-level hooks on top of the ported design CSS.

   product.css, product-dark.css, product-ui.css and pdp.css draw .product-hero,
   .product-layout, the gallery stage, the thumb rail and the whole buy column
   exactly as the approved design does. This file only re-points what the
   section's settings can change, plus the few places where a platform
   component's own wrapper has to become the box the design styles. */

.product-hero:before {
  background: var(--mm-hero-pdp-bg, linear-gradient(115deg, #0b0619, #070313 62%, #17102a));
}
.gallery-stage {
  background: var(--mm-hero-pdp-stage, #090417);
}

/* <theme-misfit-gallery> is the .gallery column itself and <theme-misfit-addons>
   is the .product-info column itself, so both have to be blocks to take the
   grid track the design lays out for them. */
theme-misfit-gallery.gallery,
theme-misfit-addons.product-info {
  display: block;
  min-width: 0;
}

/* The stepper and the submit button both live inside product/form, so the
   quantity the shopper sets is a control of the form that posts it. That puts
   two elements — <theme-product-form> and its <form> — between .buy-row and the
   .qty-stepper / .btn the design lays out as its two grid cells, so both are
   flattened out of the box tree. The form's own hidden inputs are
   type="hidden", which the UA already draws as display:none, so neither takes
   a grid track. */
.buy-row .product-form,
.buy-row .product-form form {
  display: contents;
}

/* Express checkout (F-04): {{#payment_button/}} renders its wrapper inside the
   flattened form, so it is a .buy-row cell; give it the whole row under the
   stepper and Add to Cart, with the .btn corner. It stays empty, and takes no
   space, until the payment SDK fills it, as in the stock theme. */
.buy-row .shopline-payment-button-wrapper {
  grid-column: 1 / -1;
  flex-basis: 100%;
  width: 100%;
  min-width: 0;
  border-radius: 3px;
  overflow: hidden;
}
.buy-row .shopline-payment-button-wrapper:empty {
  display: none;
}

/* product/price renders its amount in a nested element carrying the theme's
   typography class, so the design's .price type has to be handed down. */
.price-row .price .product-price__item {
  font: inherit;
  line-height: inherit;
  letter-spacing: inherit;
  color: inherit;
}
.price-row .price.product-price {
  display: flex;
  align-items: baseline;
  gap: 10px;
}

/* Thresholds are entered as plain numbers in Theme settings and formatted for
   the store's currency on load, so reserve the line to stop a reflow. */
.gift [data-offer-amount]:empty::before {
  content: "\2007\2007";
}

/* Gallery slides (F-05): the stage holds one slide per media item, as the
   stock product/media component does, and only the active one shows. A video
   slide keeps the image's 92% inset inside the design's frame. */
.gallery-stage .gallery-slide {
  width: 100%;
  height: 100%;
  min-height: 0;
  display: grid;
  place-items: center;
}
.gallery-stage .gallery-slide[hidden] {
  display: none;
}
.gallery-stage .product-video {
  width: 92%;
  max-height: 92%;
}
.gallery-stage .product-video .theme-video-media {
  max-height: 100%;
  margin-inline: auto;
}
.gallery-stage .theme-video-media__play-button,
.thumb .thumb-play {
  color: var(--pdp-pink);
}
.gallery-stage .theme-video-media__play-button circle,
.thumb .thumb-play circle {
  fill: var(--pdp-cream);
}
.thumb {
  position: relative;
}
.thumb .thumb-play {
  position: absolute;
  inset-block-start: 50%;
  inset-inline-start: 50%;
  width: 26px;
  height: 26px;
  transform: translate(-50%, -50%);
  pointer-events: none;
}

/* Express checkout follows the selected variant (B1 R-02): the wrapper is
   always rendered when the block shows it, and hidden while the selected
   variant cannot be bought. */
.buy-row.is-unavailable .shopline-payment-button-wrapper {
  display: none;
}

/* Variant picker (F-06): the stock product/_detail-variant-picker block,
   restyled to the buy column. It hides itself when the product has only the
   default variant (no options), as in the stock theme. */
.product-info .product-detail__variant-picker {
  display: flex;
  flex-direction: column;
  gap: 14px;
  margin: 0 0 18px;
}
.product-info .product-detail__variant-picker[data-variant-size="0"],
.product-info theme-variant-select-picker.product-detail__variant-picker[data-size="0"] {
  display: none;
}
.product-info .product-detail__variant-picker .variant-picker__group {
  display: contents;
  margin: 0;
  padding: 0;
  border: 0;
}
.product-info .product-detail__variant-picker .product-detail__row {
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.product-info .product-detail__variant-picker .variant-picker__group-label {
  padding: 0;
  color: var(--pdp-muted);
  font-family: var(--mm-font-display, Cinzel, Georgia, serif);
  font-size: calc(0.72rem * var(--mm-fs-head, 1));
  letter-spacing: 0.06em;
  text-transform: uppercase;
}
.product-info .product-detail__variant-picker .variant-picker__options {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}
.product-info .product-detail__variant-picker .variant-picker__option {
  position: relative;
  display: inline-flex;
  cursor: pointer;
}
.product-info .product-detail__variant-picker .variant-picker__input {
  position: absolute;
  z-index: -1;
  width: 0;
  height: 0;
  overflow: hidden;
  opacity: 0;
}
.product-info .product-detail__variant-picker .variant-picker__button {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 42px;
  padding: 8px 16px;
  border: 1px solid var(--pdp-line-2);
  border-radius: 2px;
  background: transparent;
  color: var(--pdp-cream);
  font-size: calc(0.9rem * var(--mm-fs-body, 1));
  transition: border-color 0.18s;
}
.product-info .product-detail__variant-picker .variant-picker__button--swatch,
.product-info .product-detail__variant-picker .variant-picker__button--image {
  width: 42px;
  height: 42px;
  padding: 3px;
}
.product-info .product-detail__variant-picker .variant-picker__swatch-inner {
  display: block;
  width: 100%;
  height: 100%;
  background: var(--swatch-background-color);
}
.product-info .product-detail__variant-picker .variant-picker__image {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.product-info .product-detail__variant-picker .variant-picker__option:hover .variant-picker__button {
  border-color: var(--pdp-cream);
}
.product-info .product-detail__variant-picker .variant-picker__input:checked + .variant-picker__button,
.product-info .product-detail__variant-picker .variant-picker__input:checked + theme-popover .variant-picker__button {
  border-color: var(--pdp-pink);
  box-shadow: inset 0 0 0 1px var(--pdp-pink);
}
.product-info .product-detail__variant-picker .variant-picker__input:focus-visible + .variant-picker__button,
.product-info .product-detail__variant-picker .variant-picker__input:focus-visible + theme-popover .variant-picker__button {
  outline: 2px solid var(--pdp-blue);
  outline-offset: 2px;
}
.product-info .product-detail__variant-picker .variant-picker__option.disabled .variant-picker__button {
  opacity: 0.45;
  text-decoration: line-through;
}
.product-info .product-detail__variant-picker .variant-picker__slash {
  display: none;
}

/* App blocks (F-13): the section accepts @app blocks, which render straight
   into .product-layout next to the gallery and buy column. Anything in that
   grid that is not one of those two columns takes the whole row, so an app
   block sits as a full-width band under the hero rather than a half-width
   cell under the gallery. */
.product-hero .product-layout > :not(.gallery):not(.product-info) {
  grid-column: 1 / -1;
  min-width: 0;
}