/* Also Bought Section - Modern Card Design */
.also-bought {
  width: 100%;
  padding: 3rem 1.5rem;
}

/* Section Heading */
.also-bought-heading {
  color: var(--ab-heading-color, var(--clr-text-primary));
  margin: 0 0 2.5rem 0;
  line-height: 1.2;
  text-align: center;
}
/* Heading is a richtext block rendered into a .rte wrapper. Typography
   lives on the WRAPPER (editor-safe — the WYSIWYG editor cannot strip the
   wrapper's classes). The inner <h2> inherits font + color from the wrapper
   so typography survives even after the editor rewrites the inner tag to a
   bare tag on alignment/format edits. */
.also-bought-heading > * {
  font-family: inherit;
  font-size: inherit;
  font-weight: inherit;
  line-height: inherit;
  color: inherit;
  margin: 0 !important;
}
/* Products Grid — horizontal scroller at every breakpoint.
   Card count visible per "page" scales with viewport:
     - Mobile (<640px): ~1.15 cards (one full + peek of next)
     - Tablet (640–1023px): 2 cards
     - Desktop (≥1024px): 3 cards
   Extras always scroll horizontally with snap; the row centers
   itself when there are too few cards to overflow. */
.also-bought-grid {
  display: flex;
  flex-wrap: nowrap;
  gap: 1rem;
  overflow-x: auto;
  overflow-y: hidden;
  scroll-snap-type: x mandatory;
  -webkit-overflow-scrolling: touch;
  justify-content: flex-start;
  scrollbar-width: none;
  -ms-overflow-style: none;

  /* Room for the card shadow inside the scroll box.

     The cards carry `0 4px 20px` rising to `0 8px 30px` on hover, and lift 4px.
     This is a scroll container, and CSS does not allow visible overflow on one
     axis only — `overflow-x: auto` forces `overflow-y` to compute to a clipping
     value — so the shadow was being sliced off. Measured before this fix: the
     card's top and bottom were flush with the scroll box (0px of room on either
     side), which is why the hover shadow appeared cropped by the container.

     Pad the scroll box by the shadow's reach and pull exactly that padding back
     off the layout with an equal negative margin, so nothing moves and the
     shadow simply has somewhere to draw. The inline bleed is deliberately kept
     at or below `.container`'s own padding (16px, rising to 36px at >=1024px)
     so the negative margin can never push the row past the viewport — this
     theme has a history of horizontal-overflow bugs and must not gain another.
     `scroll-padding-inline-start` keeps snap positions where they were. */
     Vertical reach, worked out rather than guessed: on hover the shadow is
     `0 8px 30px` and the card lifts 4px, so it extends 30 - 4 = 26px above the
     card and 30 + 8 - 4 = 34px below it. 36px clears both with a margin.
  --ab-bleed: 16px;
  padding-block: 36px;
  margin-block: -36px;
  padding-inline: var(--ab-bleed);
  margin-inline: calc(-1 * var(--ab-bleed));
  scroll-padding-inline-start: var(--ab-bleed);
}

@media (min-width: 1024px) {
  .also-bought-grid { --ab-bleed: 32px; }
}
.also-bought-grid::-webkit-scrollbar {
  width: 0;
  height: 0;
  display: none;
}

.also-bought-grid > .also-bought-card {
  /* Mobile default: ~85% of container, so the next card peeks ~15%. */
  flex: 0 0 85%;
  min-width: 0;
  scroll-snap-align: start;
}

/* When only a single card exists, center it (no row to scroll). */
.also-bought-grid:not(:has(> .also-bought-card:nth-child(2))) {
  justify-content: center;
}

@media (min-width: 640px) and (max-width: 1023px) {
  /* Tablet: 2 cards visible by default; extras scroll horizontally;
     fewer than 3 cards center within the section. Same UX as desktop
     but with 2-up sizing. Avoids the orphan-card-on-second-row look
     that the prior 2-col grid produced with a default of 3 blocks. */
  .also-bought-grid {
    display: flex;
    grid-template-columns: none;
    flex-wrap: nowrap;
    gap: 1.5rem;
    overflow-x: auto;
    overflow-y: hidden;
    scroll-snap-type: x mandatory;
    -webkit-overflow-scrolling: touch;
    justify-content: flex-start;
    scrollbar-width: none;
    -ms-overflow-style: none;
  }
  .also-bought-grid::-webkit-scrollbar {
    width: 0;
    height: 0;
    display: none;
  }

  .also-bought-grid > .also-bought-card {
    flex: 0 0 calc((100% - 1.5rem) / 2); /* 2 visible w/ one 1.5rem gap */
    min-width: 0;
    scroll-snap-align: start;
  }

  .also-bought-grid:not(:has(> .also-bought-card:nth-child(3))) {
    justify-content: center;
  }
}

@media (min-width: 1024px) {
  /* Desktop: 3 cards visible by default; extras become a horizontal
     scroller; fewer than 4 cards center within the section. */
  .also-bought-grid {
    display: flex;
    grid-template-columns: none;
    flex-wrap: nowrap;
    gap: 2rem;
    overflow-x: auto;
    overflow-y: hidden;
    scroll-snap-type: x mandatory;
    -webkit-overflow-scrolling: touch;
    justify-content: flex-start;
    /* Hide native scrollbar — section already paginates visually. */
    scrollbar-width: none;
    -ms-overflow-style: none;
  }
  .also-bought-grid::-webkit-scrollbar {
    width: 0;
    height: 0;
    display: none;
  }

  .also-bought-grid > .also-bought-card {
    flex: 0 0 calc((100% - 4rem) / 3); /* 3 visible w/ two 2rem gaps */
    min-width: 0;
    scroll-snap-align: start;
  }

  /* Center the row when there are 3 or fewer cards (no 4th child). */
  .also-bought-grid:not(:has(> .also-bought-card:nth-child(4))) {
    justify-content: center;
  }
}

/* Product Card - Modern card design with shadow */
.also-bought-card {
  display: flex;
  flex-direction: column;
  background: var(--ab-card-bg, var(--clr-white));
  border-radius: 1.25rem;
  overflow: hidden;
  border: 1px solid color-mix(in srgb, var(--clr-primary) 10%, transparent);
  transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.also-bought-card:hover {
  transform: translateY(-4px);
  box-shadow: none;
  border-color: color-mix(in srgb, var(--clr-primary) 18%, transparent);
}

/* Image Wrapper - Full width card header style */
.also-bought-image-wrapper {
  width: 100%;
  aspect-ratio: 4 / 3;
  overflow: hidden;
  background: linear-gradient(135deg, var(--clr-neutral-lighter) 0%, var(--clr-neutral-light) 100%);
}

.also-bought-image-link {
  display: block;
  width: 100%;
  height: 100%;
}

.also-bought-image {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.4s ease;
}

.also-bought-image-link:hover .also-bought-image--primary {
  transform: scale(1.08);
}

/* Hover image — fades in over the primary image on card hover.
   Only present when a "Hover Image" is set (block gets .has-hover-image). */
.also-bought-card.has-hover-image .also-bought-image-link {
  position: relative;
}

.also-bought-image--hover {
  position: absolute;
  inset: 0;
  opacity: 0;
  transition: opacity 0.4s ease, transform 0.4s ease;
}

.also-bought-card.has-hover-image:hover .also-bought-image--hover {
  opacity: 1;
  transform: scale(1.08);
}

.also-bought-placeholder {
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  background: linear-gradient(135deg, var(--clr-neutral-lighter) 0%, var(--clr-neutral-light) 100%);
  color: var(--clr-neutral-dark);
}

/* Product Info - Card body with padding */
.also-bought-info {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.5rem;
  width: 100%;
  padding: 1.25rem 1rem 1.5rem;
  text-align: center;
}

/* Title */
.also-bought-title {
  margin: 0;
  color: var(--ab-title-color, var(--clr-text-primary));
  line-height: 1.3;
}

.also-bought-title a {
  color: inherit;
  text-decoration: none;
  transition: color 0.2s ease;
}

.also-bought-title a:hover {
  color: var(--ab-button-bg, var(--clr-primary));
}

/* Description */
.also-bought-description {
  margin: 0;
  color: var(--ab-desc-color, var(--clr-neutral-dark));
  line-height: 1.5;
  max-width: 100%;
}

/* Star Rating */
.also-bought-rating {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  margin-top: 0.25rem;
}

.also-bought-stars {
  display: flex;
  gap: 0.125rem;
  font-size: 1rem;
  line-height: 1;
}

.star {
  display: inline-block;
}

.star-full {
  color: var(--ab-star-filled, var(--clr-primary));
}

.star-empty {
  color: var(--ab-star-empty, var(--clr-neutral-light));
}

.star-half {
  position: relative;
  display: inline-block;
}

.star-half .star-bg {
  color: var(--ab-star-empty, var(--clr-neutral-light));
}

.star-half .star-fill {
  position: absolute;
  left: 0;
  top: 0;
  width: 50%;
  overflow: hidden;
  color: var(--ab-star-filled, var(--clr-primary));
}

.also-bought-rating-text {
  font-size: 0.8125rem;
  color: var(--ab-rating-color, var(--clr-neutral-dark));
  line-height: 1.4;
}

/* Price */
.also-bought-price {
  margin: 0.25rem 0 0;
  font-weight: 600;
  font-size: 1rem;
  color: var(--ab-title-color, var(--clr-text-primary));
  line-height: 1.3;
}

/* Add to Cart Button - Fully rounded pill style.
   Colors come from --ab-button-bg / --ab-button-text /
   --ab-button-hover-bg, which are emitted by the section's
   <style> block and ultimately resolve to theme tokens
   (var(--clr-primary), etc.) rather than hard-coded hex values. */
.also-bought-atc-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  margin-top: 0.75rem;
  padding: 0.75rem 1.75rem;
  font-size: 0.8125rem;
  font-weight: 600;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  background-color: var(--ab-button-bg);
  color: var(--ab-button-text);
  border: none;
  border-radius: 9999px;
  cursor: pointer;
  transition: background-color 0.2s ease, transform 0.15s ease;
  min-width: 140px;
}

.also-bought-atc-btn:hover:not(:disabled) {
  background-color: var(--ab-button-hover-bg);
  transform: translateY(-2px);
}

.also-bought-atc-btn:active:not(:disabled) {
  transform: translateY(0);
}

.also-bought-atc-btn:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

/* Empty State */
.also-bought-empty {
  text-align: center;
  padding: 2rem;
  color: var(--clr-neutral-dark);
  font-size: 0.875rem;
}

/* Mobile adjustments */
@media (max-width: 639px) {
  .also-bought {
    padding: 2rem 1rem;
  }
  
  .also-bought-heading {
    margin-bottom: 1.5rem;
  }
  
  .also-bought-grid {
    gap: 1.25rem;
  }
  
  .also-bought-card {
    border-radius: 1rem;
  }
  
  .also-bought-info {
    padding: 1rem 0.875rem 1.25rem;
  }
  
  .also-bought-atc-btn {
    padding: 0.625rem 1.5rem;
    font-size: 0.75rem;
  }
}

/* When contained in product-layout-grid-content (left column of sticky layout) */
.product-layout-grid-content .also-bought {
  padding-left: 0;
  padding-right: 0;
}

.product-layout-grid-content .also-bought-grid {
  gap: 1.25rem;
}

.product-layout-grid-content .also-bought-card {
  border-radius: 1rem;
}

/* Extra small screens */
@media (max-width: 479px) {
  .also-bought-info {
    padding: 0.875rem 0.75rem 1rem;
  }
  
  .also-bought-atc-btn {
    width: 100%;
    max-width: 180px;
    padding: 0.625rem 1rem;
  }
}

/* 2026-09-25: the 3-up basis assumed 2rem gaps; the PDP gap is 1.25rem, so cards sat 12px inside the column. */
@media (min-width: 1024px) {
  .product-layout-grid-content .also-bought-grid > .also-bought-card {
    flex-basis: calc((100% - 2.5rem) / 3);
  }
}