/* ==========================================================================
   Product page extras - assets/css/product-page.css
   Loaded by views/_getproduct.cfm after site.css.

   Two things live here: the star rating under the title (the category
   cards' two-row treatment, recoloured for the light page), and the
   hover zoom pane product-zoom.js drives when the 1250px image exists.
   ========================================================================== */

/* --------------------------------------------------------------------------
   Star rating: a muted row of stars as the track, a clipped filled row on
   top of it. Width of the fill is the rating percentage, set per product.
   -------------------------------------------------------------------------- */

.product-rating {
  display: flex;
  align-items: center;
  gap: 8px;
  margin: 2px 0 12px;
}

.star-rating {
  position: relative;
  display: inline-block;
  line-height: 1;
}

.star-row {
  display: block;
  white-space: nowrap;
  font-size: 16px;
  letter-spacing: 2px;
}

/* The category cards sit on brown and mute the track with white; this
   page is light, so the track is a warm gray instead. */
.star-rating-light .star-row-empty {
  color: #d8d2c6;
}

.star-rating-light .star-row-fill {
  position: absolute;
  top: 0;
  left: 0;
  overflow: hidden;
  color: #e8a33d;
}

.product-rating-count {
  font-size: 13px;
  color: #666666;
}

/* --------------------------------------------------------------------------
   Hover zoom. The wrapper is the positioning context; the script builds
   .zoom-lens (the highlight box on the photo) and .zoom-pane (the
   magnified window) inside it and drives them with cursor position.
   -------------------------------------------------------------------------- */

.zoom-wrap {
  position: relative;
}

.zoom-wrap[data-zoom-src] .product-photo {
  cursor: crosshair;
}

.zoom-lens {
  position: absolute;
  z-index: 30;
  border: 1px solid rgba(75, 48, 29, 0.8);
  background-color: rgba(255, 255, 255, 0.25);
  pointer-events: none;
}

.zoom-pane {
  position: absolute;
  top: 0;
  z-index: 40;
  background-color: #ffffff;
  background-repeat: no-repeat;
  border: 1px solid #e0ddd6;
  box-shadow: 0 5px 15px rgba(0, 0, 0, 0.25);
  pointer-events: none;
}

/* Beside the photo when there is room; the script adds this class when
   there is not, and the pane covers the photo instead. */
.zoom-pane-overlay {
  left: 0;
}

/* --------------------------------------------------------------------------
   Thumbnail row beneath the main photo. Buttons, because they act;
   is-active marks the image the photo is currently showing.
   -------------------------------------------------------------------------- */

.product-thumbs {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 10px;
}

.product-thumb {
  display: block;
  width: 70px;
  height: 70px;
  padding: 0;
  border: 2px solid transparent;
  border-radius: 3px;
  background: none;
  cursor: pointer;
  overflow: hidden;
}

.product-thumb img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.product-thumb:hover,
.product-thumb:focus-visible {
  border-color: rgba(75, 48, 29, 0.45);
}

.product-thumb.is-active {
  border-color: #910d10;
}

/* Grouped product pages stack one buy box per child; the sliver of white
   between them keeps each reading as its own offer. */
.buy-box + .buy-box {
    margin-top: 10px;
}