/* ==========================================================================
   GNC SG — Product Card
   Shared across PLP grid, search results, carousels, related products.
   ========================================================================== */

/* The spec card is 338×479 with a 20px inset and 16px between its three
   children — image stack, meta, CTA. Width and height are left to the
   container instead of being pinned: the Featured rail already sizes cards to
   the design's own 332px, while the PLP's 3-column grid runs narrower, and both
   keep the spec's proportions from the padding and the square image slot.
   Children stretch to the content width, which is what the spec's
   align-items: flex-start plus align-self: stretch on each child adds up to. */
.product-card {
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
  padding: var(--space-5);
  background-color: var(--color-white);
  /* Square corners and a slightly cooler grey hairline, both sampled from
     product-card.png (#E5E7EB); the card had 8px corners and #EEEEEE. */
  border: 1px solid var(--color-border-subtle);
  border-radius: 0;
  overflow: hidden;
  transition: box-shadow var(--transition-base);
}

.product-card:hover {
  box-shadow: var(--shadow-md);
}

/* Square: the spec's 479px height only resolves if the image stack is as tall
   as it is wide (298 on a 338 card), which product-card.png confirms — its shot
   occupies a 292×292 block above the meta. White, not grey; the design has the
   shot sitting on the same white as the card body. The photo fills that block,
   so it carries no inset of its own beyond the card's own padding. */
.product-card__image {
  display: block;
  aspect-ratio: 1 / 1;
  overflow: hidden;
  background-color: var(--color-white);
}

.product-card__image img {
  width: 100%;
  height: 100%;
  object-fit: contain;
}

/* "prod-meta": title over benefits, 8px apart. Grows to absorb any spare height
   so the CTA stays pinned to the bottom and buttons line up across a row. */
.product-card__body {
  flex: 1;
  display: flex;
  flex-direction: column;
}

.product-card__title {
  /* 16px — the design's title has a 12px cap height on a 332px-wide card. */
  font-size: var(--font-size-base);
  font-weight: var(--font-weight-bold);
  line-height: var(--line-height-tight);
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.product-card__title a {
  color: var(--color-text);
  text-decoration: none;
}

.product-card__title a:hover {
  color: var(--color-primary);
}

/* Key Benefits — at most two, one line each (PLP.png). The min-height reserves
   both lines whether or not the product has any benefits, so cards with none
   are exactly as tall as cards with two and the SHOP NOW buttons line up. */
.product-card__benefits {
  margin: 0;
  padding: 0;
  list-style: none;
  min-height: calc(2 * var(--font-size-sm) * var(--line-height-base));
}

.product-card__benefits li {
  position: relative;
  padding-left: var(--space-3);
  line-height: var(--line-height-base);
  /* One line per benefit; long text is truncated rather than pushing the
     card taller than its neighbours. */
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.product-card__benefits li::before {
  content: '·';
  position: absolute;
  left: var(--space-1);
}

/* The card's own padding and gap place this now — the wrapper adds nothing. */
.product-card__cta {
  padding: 0;
}

/* 12px of vertical padding on a 14px label at 1.35 gives the spec's 43px
   button; the inherited 1.5 body line-height would make it 45. */
.product-card__cta a {
  display: block;
  width: 100%;
  padding: var(--space-3) 0;
  line-height: 1.35;
  /* The card's red is a shade darker than --color-primary, which the hero CTA
     still uses — sampled #DD1C1D from product-card.png, so it stays local
     rather than moving the site-wide token. */
  background-color: #DD1C1D;
  color: var(--color-white);
  /* 14px, not 12px: measured against product-card.png, whose label has a 10px
     cap height on a 332px-wide card. */
  font-size: var(--font-size-sm);
  font-weight: var(--font-weight-bold);
  text-transform: uppercase;
  letter-spacing: 0.05em;
  text-align: center;
  text-decoration: none;
  border-radius: var(--radius-sm);
  transition: background-color var(--transition-fast);
}

.product-card__cta a:hover {
  background-color: var(--color-primary-dark);
  text-decoration: none;
}

/* The "SHOP NOW →" arrow is drawn, not typed — the rule lives in buttons.css
   alongside the other two CTA arrows so the three cannot drift apart. */

/* ==========================================================================
   Mobile card (design/mobile/plp/product-card.png — 167.5 x 351.5)

   Two to a row, so the desktop 20px inset would eat the 143.5px of content
   width the card has. Every value below is from the supplied spec.

   The height resolves as: 1 border + 12 padding + 133.5 image + 16 + 38 title
   + 16 + 64 benefits + 16 + 42 CTA + 12 padding + 1 border = 351.5. That is why
   the image slot is pinned rather than left square — a 1:1 slot would be 143.5
   tall and push the card 8px past the design.
   ========================================================================== */

/* field--field-product-images.html.twig emits the PDP gallery — a main image
   followed by a thumbnail strip — and a card renders that same field. On the
   product listing only the main image comes through, but a card built from any
   other source (the taxonomy category pages render the same view mode) gets the
   strip too, and it stacks inside the card's square image slot. A card only
   ever shows one image, so the strip is suppressed here rather than in the
   field template, which the PDP still needs intact. */
.product-card__image .product-gallery__thumbs {
  display: none;
}

@media (max-width: 767px) {
  .product-card {
    padding: var(--space-3);
    gap: var(--space-4);
    border-radius: var(--radius-md);
  }

  .product-card__image {
    aspect-ratio: auto;
    height: 133.5px;
    flex: none;
  }

  /* The image arrives wrapped in several auto-height field/gallery divs, so
     the img's own `height: 100%` resolved against `auto` and it fell back to
     its natural ratio — a 480x96 shot rendered 141x28 and sat at the top of an
     otherwise empty slot. Passing the height down the wrappers lets object-fit
     centre the shot in the slot regardless of its proportions. */
  .product-card__image > *,
  .product-card__image div,
  .product-card__image picture {
    height: 100%;
  }

  /* The spec lists title, benefits and CTA as siblings 16px apart; they are
     nested one level deeper here, so the inner gap matches rather than the
     desktop's tighter 8px. */

  /* Two lines at 19px, then ellipsis. The heading's own bottom margin is
     dropped: the body spaces its children with flex gap, so a margin on top of
     that spaced the title 32px from the benefits and pushed the card 18px
     past the design's 351.5. */
  .product-card__title {
    margin: 0;
    font-size: var(--font-size-sm);
    font-weight: var(--font-weight-bold);
    line-height: 19px;
    color: var(--color-black);
    min-height: 38px;
  }

  /* 64px is four 16px lines — two benefits of up to two lines each. */
  .product-card__benefits {
    min-height: 64px;
    font-size: var(--font-size-xs);
    line-height: 16px;
    color: #7F7F7F;
  }

  /* Each benefit wraps to a second line and only then truncates, so the
     single-line clamp the desktop card uses is replaced here. */
  .product-card__benefits li {
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    line-height: 16px;
    white-space: normal;
    overflow: hidden;
  }

  .product-card__cta a {
    height: 42px;
    padding: var(--space-3) 0;
    border-radius: var(--radius-sm);
    font-size: 13px;
    font-weight: 800;
    line-height: 18px;
    letter-spacing: 0;
  }
}