/* ---------------------------------------------------------------------------
 * 1. Main image must fit the frame.
 *
 * Broadcast sizes the photo box purely from the image's own aspect ratio:
 *     .product__photo { height: 0; padding-top: calc(1 / var(--aspect-ratio) * 100%) }
 * This store's product shots are 1007x1511 (aspect 0.67), so in a half-width column
 * that resolves to ~150% of the column width (roughly 1050px tall) and the image runs
 * past the viewport and gets cut off. `image_size` only changes the REQUESTED width
 * (small 525 / normal 770 / stretch 970); it never constrains height.
 *
 * So: replace the padding-top ratio box with a real capped height, and switch the image
 * from `cover` to `contain` so the whole garment is visible rather than cropped.
 * ------------------------------------------------------------------------ */

:root {
  --od-pdp-media-h: min(74vh, 720px);
}

.product__wrapper .product__photo {
  height: var(--od-pdp-media-h);
  padding-top: 0;
}

.product__wrapper .product__photo .image-wrapper,
.product__wrapper .product__photo .image-wrapper--cover {
  position: absolute;
  inset: 0;
  height: 100%;
  padding-top: 0;
}

/* `contain` is the point of the change: nothing gets cut off. The letterboxing sits on
 * the theme background, which is the same near-white as the studio backdrop. */
.product__wrapper .product__photo .image-wrapper img,
.product__wrapper .product__photo .image-wrapper--cover img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  object-position: center;
}

/* The slide stack inherits the same cap so the grid row cannot grow past it. */
.product__images--thumbs .product__slides,
.product__images--mobile-thumbs .product__slides {
  max-height: var(--od-pdp-media-h);
}

/* ---------------------------------------------------------------------------
 * 2. Thumbnails belong directly beneath the main image, in the image column.
 *
 * The DOM already nests .product__thumbs inside .product__images right after
 * .product__slides, but .product__images is `display: block` in the plain `thumbnails`
 * layout, which leaves the strip free to be pushed around by the surrounding grid.
 * Making the column an explicit flex column pins the order: image, then thumb strip.
 * ------------------------------------------------------------------------ */

.product__wrapper--thumbnails .product__images {
  display: flex;
  flex-direction: column;
  align-items: stretch;
}

/* flex-basis MUST be reset on both children.
 *
 * Broadcast ships `.product__thumbs { flex: 1 1 100% }`, written for its ROW-based
 * thumbnails-left layout where 100% means full WIDTH. Inside a flex COLUMN that same
 * declaration means full HEIGHT, so the column split itself 402/402 and the thumb strip
 * landed on top of the image. Measured at 1440x900: photo ran y=77..743 while thumbs
 * started at y=493. `flex: 0 0 auto` puts both back to content sizing. */
.product__wrapper--thumbnails .product__slides {
  order: 1;
  width: 100%;
  flex: 0 0 auto;
}

.product__wrapper--thumbnails .product__thumbs {
  order: 2;
  width: 100%;
  margin: 14px 0 0;
  float: none;
  position: static;
  flex: 0 0 auto;
  min-height: 0;
}

.product__wrapper--thumbnails .product__thumbs__holder {
  display: flex;
  flex-flow: row nowrap;
  gap: 10px;
  overflow-x: auto;
  overflow-y: hidden;
  scroll-behavior: smooth;
}

.product__wrapper--thumbnails .product__thumbs__holder .product__thumb {
  flex: 0 0 auto;
  width: 78px;
  margin: 0;
}

@media screen and (max-width: 768px) {
  :root {
    --od-pdp-media-h: min(62vh, 520px);
  }

  .product__wrapper--thumbnails .product__thumbs__holder .product__thumb {
    width: 64px;
  }
}

.jdgm-rev-widg__reviews.od-revmarq {
  position: relative;
  overflow: hidden;
  /* Kill the app's masonry columns. */
  column-count: auto !important;
  columns: auto !important;
  display: block !important;
}

.od-revmarq .od-revmarq__track {
  display: flex;
  flex-flow: row nowrap;
  align-items: stretch;
  gap: 16px;
  width: max-content;
  animation: od-revmarq-scroll var(--od-revmarq-dur, 60s) linear infinite;
}

/* Let people actually read one. */
.od-revmarq:hover .od-revmarq__track,
.od-revmarq:focus-within .od-revmarq__track {
  animation-play-state: paused;
}

.od-revmarq .jdgm-rev {
  flex: 0 0 320px;
  width: 320px;
  min-height: 190px;
  margin: 0 !important;
  padding: 20px !important;
  box-sizing: border-box;
  border: 1px solid var(--border, #e7e7e3);
  background: var(--bg, #fff);
  /* The masonry layout relies on break-inside; neutralise it inside the flex row. */
  break-inside: auto !important;
  display: block !important;
  float: none !important;
}

.od-revmarq .jdgm-rev__body {
  overflow: hidden;
}

@keyframes od-revmarq-scroll {
  from {
    transform: translateX(0);
  }
  to {
    transform: translateX(-50%);
  }
}

.jdgm-rev-widg:has(.od-revmarq) .jdgm-rev-widg__sort-wrapper,
.jdgm-rev-widg:has(.od-revmarq) .jdgm-paginate {
  display: none;
}

@media (prefers-reduced-motion: reduce) {
  .od-revmarq .od-revmarq__track {
    animation: none;
  }
  .jdgm-rev-widg__reviews.od-revmarq {
    overflow-x: auto;
  }
}

@media screen and (max-width: 768px) {
  .od-revmarq .jdgm-rev {
    flex-basis: 260px;
    width: 260px;
  }
}

.cart-bar .product__submit__add {
  min-height: 44px;
}

@keyframes ijFloat {
  0%, 55%, 100% { transform: translateY(0); }
  20%           { transform: translateY(-6px); }
  35%           { transform: translateY(0); }
  45%           { transform: translateY(-3px); }
}
.template-product .block__icon__row:has(> .block__icon__container:nth-child(1):nth-last-child(3)) .block__icon {
  animation: ijFloat 2.8s ease-in-out infinite;
  will-change: transform;
}
.template-product .block__icon__row:has(> .block__icon__container:nth-child(1):nth-last-child(3)) > :nth-child(2) .block__icon { animation-delay: -.9s; }
.template-product .block__icon__row:has(> .block__icon__container:nth-child(1):nth-last-child(3)) > :nth-child(3) .block__icon { animation-delay: -1.8s; }

.template-product .block__icon__row.od-usp-paused .block__icon {
  animation-play-state: paused;
}

@media (prefers-reduced-motion: reduce) {
  .template-product .block__icon__row .block__icon {
    animation: none !important;
  }
}

@media (min-width: 1024px) {
  .product__images {
    position: sticky;
    top: 84px;
    align-self: flex-start;
  }
}

/* Related products heading + breathing room (2026-08-11)
 * The vendor renders that heading as a 12px h6 (.tab__title.heading-x-small) and the section
 * starts 0px after the product section - measured. Scoped to the related section only via
 * [id$="__related"]; .tab__title elsewhere (the description tabs) is untouched. */
.template-product .shopify-section[id$="__related"] {
  padding-top: clamp(56px, 7vw, 96px);
}
.template-product .shopify-section[id$="__related"] .tab__title {
  font-size: clamp(1.4rem, 2.4vw, 2rem);
  font-weight: 600;
  letter-spacing: -0.01em;
  line-height: 1.1;
  margin-bottom: 40px;
}

/* Sticky ATC follows the WHOLE product page.
 * `od-visible` is toggled by od-cart-bar.js whenever the real buy button is off-screen.
 * It mirrors the vendor's `.is-visible` so either class shows the bar - the vendor's own
 * scroll toggle is never fought, only complemented. */
.cart-bar.od-visible {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
  transition: opacity 0.5s ease, transform 0.5s ease, visibility 0s linear 0s;
}

/* The sticky add-to-cart bar inherits an empty colour scheme and paints no background,
 * so page content (the mobile thumbnail strip) showed through it. Give it the page white. */
cart-bar.cart-bar, cart-bar .cart-bar__form__wrapper { background-color: #fff; }