/* Track B — PDP enhancements (Size Guide link, Buy it now, recommendations,
   recently viewed). Small additions on top of the linked theme CSS. */

/* SIZE GUIDE link — right-aligned in the Size fieldset legend. The theme's
   .product-form__group-name renders the legend text; we float the link to the
   end of the line, matching the reference's small tertiary link. */
.product-form__controls > .product-form__group-name {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  width: 100%;
}
.product-form__size-guide {
  margin-inline-start: auto;
}
.product-form__size-guide .product-popup__button {
  font-size: 1.1rem;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  text-decoration: underline;
  text-underline-offset: 0.2rem;
  opacity: 0.85;
  padding: 0;
  min-height: 0;
}
.product-form__size-guide .product-popup__button:hover {
  opacity: 1;
}

/* Buy it now sits directly under Add to cart inside .product__buy-buttons. */
.product__buy-buttons {
  display: flex;
  flex-direction: column;
  gap: 1rem;
}
.product__buy-buttons .product-form__buy-now {
  width: 100%;
}
.product__buy-buttons .product-form__buy-now[disabled] {
  cursor: not-allowed;
  opacity: 0.5;
}

/* Recommendations / Recently viewed sliders use the popular-products layout.
   Make the recently-viewed layout visible (the theme defaults the layout to
   display:none until .active / the recommendations override). */
.recently-viewed .popular-products__layout {
  display: block;
}
.recently-viewed.recently-viewed--empty {
  display: none;
}

/* Keep the sliders edge-to-edge on mobile like the reference rows. */
.product-recommendations .popular-products__wrapper,
.recently-viewed .popular-products__wrapper {
  position: relative;
}

/* Arrows hidden on the narrowest mobile (swipe to scroll), shown from tablet up
   — matches the reference where the row is swipeable on phones. */
.product-recommendations .heading-group__navigation,
.recently-viewed .heading-group__navigation {
  display: flex;
  gap: 0.4rem;
}
.heading-group__navigation-button {
  background: none;
  border: none;
  cursor: pointer;
  padding: 0.2rem;
  color: rgb(var(--color-foreground));
  line-height: 0;
}
.heading-group__navigation-button.swiper-button-disabled {
  opacity: 0.3;
  cursor: default;
}

/* Section spacing so the rows sit apart from the buy box and from each other. */
.product-recommendations-section,
.recently-viewed-section {
  display: block;
}

/* ---------- Desktop PDP gallery: thumbs BELOW main, single column ----------
   The theme's section-main-product.css flips .product__media-wrapper to
   flex-direction:row at >=990px, which threw the thumbnails to the RIGHT of the
   main image (and caused a load-time jump). We load after that file, so force a
   single column on desktop: main image first, then the thumbnail strip beneath
   it as a horizontal row. Mobile (<990px) is untouched — it's already a clean
   stack. No absolute positioning, so there's no layout shift. */
@media (min-width: 990px) {
  .product__media .product__media-wrapper {
    flex-direction: column;
    align-items: stretch;
  }
  .product__media .allegory-pdp-main {
    width: 100%;
    order: 0;
  }
  .product__media .allegory-pdp-thumbs {
    order: 1;
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    gap: 0.8rem;
    margin-top: 1rem;
    width: 100%;
  }
}