/* GW Product Carousel — Figma 1:740 (desktop 1440) / 1:782 (mobile 390).
   Mobile-first. Desktop boundary is the theme's sanctioned min-width:1025px.
   Line-height is `normal` throughout: the Figma tokens declare 100 but every
   text node measures ~1.3125, which is EB Garamond's normal. */

.gw-product-carousel {
  background: var(--gw-pc-bg, #ffffff);
  padding: 64px 16px;
}

.gw-product-carousel__wrap {
  display: flex;
  flex-direction: column;
  gap: 32px;
  max-width: 1344px;
  margin: 0 auto;
}

/* Editorial photo — 358x312 banner on mobile, stretched beside the content
   column on desktop. One uploaded square image, re-cropped by object-fit. */
.gw-product-carousel__media {
  position: relative;
  height: 312px;
}

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

/* 24px between every adjacent top-level group, both breakpoints. */
.gw-product-carousel__body {
  display: flex;
  flex-direction: column;
  gap: 24px;
  min-width: 0;
}

/* No gap: the Figma header row is 814 (text stack) + 56 (arrows) = 870, the
   full column width, so the text stack must be free to fill all 814. */
.gw-product-carousel__head {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
}

.gw-product-carousel__text {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 8px;
  flex: 1 0 0;
  min-width: 0;
}

.gw-product-carousel__tagline {
  margin: 0;
  font-family: var(--font-header-family, inherit);
  font-size: 14px;
  font-weight: 600;
  line-height: normal;
  letter-spacing: 2.52px;
  text-transform: uppercase;
  color: var(--gw-pc-tagline, #a98a4d);
}

.gw-product-carousel__heading {
  margin: 0;
  font-family: var(--font-header-family, inherit);
  font-size: 40px;
  font-weight: 400;
  line-height: normal;
  letter-spacing: 0;
  text-transform: none;
  color: #242424;
}

/* The Figma body box fills the text stack (814 on desktop, 358 on mobile)
   while the tagline and heading hug their text. `align-items: flex-start` on
   the stack shrink-wraps every child, so this one opts back into the fill. */
.gw-product-carousel__body-copy {
  align-self: stretch;
  margin: 0;
  font-size: 16px;
  font-weight: 400;
  line-height: normal;
  color: #3c3c3c;
}

/* Arrows are desktop-only in the design; the 4px bar is its mobile counterpart. */
.gw-product-carousel__arrows {
  display: none;
  align-items: center;
  gap: 8px;
  flex: 0 0 auto;
}

.gw-product-carousel__arrow {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 24px;
  height: 24px;
  padding: 0;
  border: 0;
  background: none;
  color: #242424;
  cursor: pointer;
}

.gw-product-carousel__arrow--prev {
  transform: rotate(180deg);
}

.gw-product-carousel__arrow[disabled] {
  opacity: 0.35;
  cursor: default;
}

.gw-product-carousel__arrow svg {
  display: block;
}

/* Grid -> progress bar is 16px, nested inside the 24px group rhythm. */
.gw-product-carousel__carousel {
  display: flex;
  flex-direction: column;
  gap: 16px;
  min-width: 0;
}

/* ONE grid for both breakpoints. Columns flow horizontally; the row count is
   what changes (2 on mobile, 1 on desktop), so a page is 4 cards either way
   and the snap rule below never changes. */
.gw-product-carousel__track {
  display: grid;
  grid-auto-flow: column;
  grid-template-rows: repeat(2, auto);
  grid-auto-columns: calc((100% - 16px) / 2);
  gap: 16px;
  margin: 0;
  padding: 0;
  list-style: none;
  overflow-x: auto;
  overscroll-behavior-x: contain;
  scroll-snap-type: x mandatory;
  scrollbar-width: none;
  -ms-overflow-style: none;
}

.gw-product-carousel__track::-webkit-scrollbar {
  display: none;
}

/* Every 4th card opens a page — column 1 on mobile (2 rows), column 1 on
   desktop (1 row). Same selector serves both. */
/* margin:0 resets an inherited theme `li` margin-bottom of 4.5px — the same
   rule that inflated the gw-brand-story logo row. Left in, it adds 4.5px to
   the track and therefore to the stretched photo column beside it. */
.gw-product-carousel__card {
  min-width: 0;
  margin: 0;
}

.gw-product-carousel__card:nth-child(4n + 1) {
  scroll-snap-align: start;
}

.gw-product-carousel__link {
  display: flex;
  flex-direction: column;
  gap: 12px;
  text-decoration: none;
  color: inherit;
}

.gw-product-carousel__media-box {
  position: relative;
  width: 100%;
  aspect-ratio: 1 / 1;
  overflow: hidden;
}

/* aspect-ratio gives the box real area before load, which is what makes
   loading="lazy" safe here — see the gw-brand-story note in COMPONENTS.md. */
.gw-product-carousel__img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.gw-product-carousel__info {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.gw-product-carousel__price-row {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 8px;
}

.gw-product-carousel__title,
.gw-product-carousel__price {
  font-size: 16px;
  font-weight: 400;
  line-height: normal;
  color: #242424;
}

/* The frame draws the title and price on ONE 21px row, using the short
   placeholder "Product Name". Real titles are long enough to wrap, which would
   push the row to 42px and leave the cards uneven, so the title is clamped to
   the single line the design specifies. */
.gw-product-carousel__title {
  min-width: 0;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}

.gw-product-carousel__price {
  flex: 0 0 auto;
}

/* 5 x 17.04 + 4 x 1.7 = 92.0 — the Figma Stars Wrapper width exactly. */
.gw-product-carousel__stars {
  display: flex;
  align-items: center;
  align-self: flex-start;
  gap: 1.7px;
  height: 17.04px;
}

.gw-product-carousel__stars svg {
  display: block;
  flex: 0 0 auto;
}

.gw-product-carousel__indicator {
  position: relative;
  width: 100%;
  height: 4px;
  background: #e5e6e6;
  overflow: hidden;
}

.gw-product-carousel__bar-thumb {
  position: absolute;
  left: 0;
  top: 0;
  height: 4px;
  width: 29%;
  background: #252626;
}

/* Nothing overflows: the controls have nothing to drive, so they go rather
   than sitting permanently disabled. */
.gw-product-carousel gw-scroll-carousel[data-gwsc-idle] .gw-product-carousel__indicator,
.gw-product-carousel gw-scroll-carousel[data-gwsc-idle] .gw-product-carousel__arrows {
  display: none;
}

.gw-product-carousel__cta {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 12px;
}

.gw-product-carousel__btn {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  padding: 12px 24px;
  border-radius: 0;
  background: var(--gw-pc-btn-bg, #4a3b1f);
  color: var(--gw-pc-btn-text, #ffffff);
  font-size: 16px;
  font-weight: 400;
  line-height: normal;
  text-decoration: none;
  transition: opacity 0.2s ease;
}

.gw-product-carousel__btn:hover,
.gw-product-carousel__btn:focus-visible {
  opacity: 0.85;
}

.gw-product-carousel__caption {
  margin: 0;
  font-size: 16px;
  font-style: italic;
  font-weight: 400;
  line-height: normal;
  color: #252626;
  text-align: center;
}

.gw-product-carousel__placeholder {
  padding: 24px;
  border: 1px dashed #c9c9c9;
  font-size: 16px;
  line-height: normal;
  color: #3c3c3c;
  text-align: center;
}

@media (prefers-reduced-motion: reduce) {
  .gw-product-carousel__track {
    scroll-behavior: auto;
  }

  .gw-product-carousel__btn {
    transition: none;
  }
}

@media (min-width: 1025px) {
  .gw-product-carousel {
    padding: 96px 48px;
  }

  .gw-product-carousel__wrap {
    flex-direction: row;
    align-items: stretch;
    gap: 32px;
  }

  /* 442 + 32 + 870 = 1344 = the Figma container width. */
  .gw-product-carousel__media {
    flex: 1 0 0;
    height: auto;
    min-width: 0;
  }

  .gw-product-carousel__photo {
    position: absolute;
    inset: 0;
  }

  .gw-product-carousel__body {
    flex: 0 0 870px;
    width: 870px;
  }

  .gw-product-carousel__heading {
    font-size: 48px;
  }

  .gw-product-carousel__arrows {
    display: flex;
  }

  /* One row, so a page is 4 side-by-side cards: (100% - 3*16) / 4 = 205.5 at
     870 wide, matching the Figma card exactly. */
  .gw-product-carousel__track {
    grid-template-rows: auto;
    grid-auto-columns: calc((100% - 48px) / 4);
  }

  /* Portrait 205.5 x 226 on desktop, square on mobile. */
  .gw-product-carousel__media-box {
    aspect-ratio: 205.5 / 226;
  }

  .gw-product-carousel__indicator {
    display: none;
  }

  .gw-product-carousel__cta {
    align-items: flex-start;
  }

  .gw-product-carousel__btn {
    width: auto;
  }

  .gw-product-carousel__caption {
    width: 176px;
  }
}