/* card.css - product-card + product-grid component styles (ST-M2).
 *
 * OWNED BY ST-M2. Do not edit from another milestone.
 *
 * Consumes the design tokens declared inline by the layout (--primary/--bg/--text/--maxw)
 * and the per-section style props stamped on .nscms-section (see base.css). Served
 * fingerprinted + immutable via {{ 'card.css' | asset_url }}.
 *
 * EVERY variation here is driven by a SECTION SETTING (merchants never write CSS - D2 in
 * STOREFRONT_THEME_PARITY_PLAN.md), so the classes/custom properties below are the
 * vocabulary snippets/product-card.liquid emits from those settings:
 *
 *   --card-cols          columns_desktop  (grid columns from 990px up)
 *   --card-cols-mobile   columns_mobile   (grid columns below 750px)
 *   --pc-ratio           card_image_ratio (via .product-card__media--{square|portrait|...})
 *   --pc-fit             card_image_fit   (via .product-card__media--fit-{cover|contain})
 *   .product-card--card  card_style
 *   .product-card--zoom  card_hover
 *
 * Nothing here targets .card / .grid: those base.css rules still serve the non-product
 * cards (articles, content entries, feature rows) that ST-M2 does not own.
 */

:root {
  --pc-gap: 1.25rem;
  /* Basic (477:4239): square corners, the design's grey/200 empty-image fill. */
  --pc-radius: 0;
  --pc-border: #e6e6e9;
  --pc-surface: transparent;
  --pc-muted: #6b7280;
  --pc-placeholder: #e7e7e9;
  --pc-sale-bg: #c0392b; /* the colour the old inline style="color:#c0392b" used */
  --pc-sale-fg: #ffffff;
  --pc-sold-bg: #3f3f46;
}

/* --- grid ---------------------------------------------------------------------------
 * Mobile-first: columns_mobile below 750px, an auto-fill tablet band (so a merchant who
 * picked 6 desktop columns does not get 6 unreadable ones on an iPad), then the merchant's
 * columns_desktop from 990px. var() inside repeat() is substituted before the value is
 * grammar-checked, so the custom property really does drive the column count.
 * ---------------------------------------------------------------------------------- */
.product-grid {
  display: grid;
  grid-template-columns: repeat(var(--card-cols-mobile, 2), minmax(0, 1fr));
  gap: var(--pc-gap);
  margin: 0;
  padding: 0;
  list-style: none;
}

@media (min-width: 750px) {
  .product-grid {
    grid-template-columns: repeat(auto-fill, minmax(190px, 1fr));
  }
}

@media (min-width: 990px) {
  .product-grid {
    grid-template-columns: repeat(var(--card-cols, 4), minmax(0, 1fr));
  }
}

/* --- card --------------------------------------------------------------------------- */
.product-card {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 0.5rem; /* 8px image → name (477:4239) */
  min-width: 0;
  /* The section's text-align style prop (--section-align) is inherited, so a merchant
     centring the section centres its cards too - no extra setting needed. */
  text-align: inherit;
}

/* card_style = "card": the boxed treatment. "standard" (the default) is bare, which is
   what a modern grid looks like. */
.product-card--card {
  border: 1px solid var(--pc-border);
  border-radius: var(--pc-radius);
  background: var(--pc-surface);
  padding: 0.75rem;
}

.product-card a {
  color: inherit;
  text-decoration: none;
}

/* --- media -------------------------------------------------------------------------- */
.product-card__media {
  position: relative;
  display: block;
  overflow: hidden;
  border-radius: var(--pc-radius);
  background: var(--pc-placeholder);
  aspect-ratio: var(--pc-ratio, 1 / 1);
}

.product-card--card .product-card__media {
  border-radius: calc(var(--pc-radius) - 4px);
}

.product-card__media--square {
  --pc-ratio: 1 / 1;
}

.product-card__media--portrait {
  --pc-ratio: 3 / 4;
}

.product-card__media--landscape {
  --pc-ratio: 4 / 3;
}

/* "adapt" keeps the image's own proportions (Shopify's wording for it). */
.product-card__media--adapt {
  aspect-ratio: auto;
}

/* The image link fills the ratio box. It is aria-hidden (the title link carries the
   accessible name), so it must never be the only way to reach the product. */
.product-card__media-link {
  display: block;
  width: 100%;
  height: 100%;
}

.product-card__media--adapt .product-card__media-link {
  height: auto;
}

.product-card__media--fit-cover {
  --pc-fit: cover;
}

.product-card__media--fit-contain {
  --pc-fit: contain;
  background: transparent;
}

.product-card__image {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: var(--pc-fit, cover);
  object-position: center;
  transition: opacity 0.25s ease, transform 0.5s ease;
}

.product-card__media--adapt .product-card__image {
  height: auto;
}

/* card_hover = "second_image": the second gallery image cross-fades in on hover. It is
   layered on top so the first image still defines the box height in "adapt" mode. */
.product-card__image--hover {
  position: absolute;
  inset: 0;
  height: 100%;
  opacity: 0;
}

@media (hover: hover) {
  .product-card:hover .product-card__image--hover,
  .product-card:focus-within .product-card__image--hover {
    opacity: 1;
  }

  /* card_hover = "zoom" */
  .product-card--zoom:hover .product-card__image,
  .product-card--zoom:focus-within .product-card__image {
    transform: scale(1.05);
  }
}

.product-card__placeholder {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #595550; /* the design's glyph colour (477:4476) */
}

.product-card__placeholder svg {
  width: 64px;
  max-width: 40%;
  height: auto;
}

/* The PRE-ORDER chip (311:2238): a small dark pill, top right, tracked uppercase. */
.product-card__preorder {
  position: absolute;
  top: 0.75rem;
  right: 0.75rem;
  padding: 0.25rem 0.625rem;
  border-radius: 999px;
  background: rgba(27, 27, 27, 0.78);
  color: #fefefe;
  font-size: 0.625rem;
  line-height: 1.4;
  letter-spacing: var(--caps-spacing, 0.0625rem);
  text-transform: var(--caps-transform, uppercase);
  pointer-events: none;
}

/* --- badges ------------------------------------------------------------------------- */
.product-card__badges {
  position: absolute;
  top: 0.6rem;
  left: 0.6rem;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 0.3rem;
  /* Badges are decoration on top of a link; never eat the click. */
  pointer-events: none;
}

.product-card__badge {
  display: inline-block;
  padding: 0.15rem 0.45rem;
  border-radius: 999px;
  font-size: 0.75rem;
  font-weight: 600;
  line-height: 1.5;
  letter-spacing: 0.01em;
}

.product-card__badge--sale {
  background: var(--pc-sale-bg);
  color: var(--pc-sale-fg);
}

.product-card__badge--sold-out {
  background: var(--pc-sold-bg);
  color: #fff;
}

/* --- text --------------------------------------------------------------------------- */
.product-card__info {
  display: flex;
  flex-direction: column;
  gap: 0.2rem;
  min-width: 0;
}

.product-card__vendor {
  font-size: 0.78rem;
  letter-spacing: var(--caps-spacing, 0.04em);
  text-transform: var(--caps-transform, uppercase);
  color: var(--pc-muted);
}

/* Basic (477:4427): the name in the heading face, 16px, uppercase, 1.6px tracking; the price a
   size up in the body face, 20px medium with 2px tracking, the compare-at struck through in the
   caption grey beside it. 8px between name and price. */
.product-card__info {
  gap: 0.5rem;
}

.product-card__title {
  font-family: var(--font-heading, var(--font-body));
  font-size: 1rem;
  font-weight: 400;
  line-height: 1.25;
  letter-spacing: var(--caps-spacing, 0.1rem);
  text-transform: var(--caps-transform, uppercase);
}

.product-card__title:hover {
  text-decoration: underline;
  text-underline-offset: 3px;
}

/* The shared price snippet renders inside the card; keep its styling scoped so the
   product page (ST-M3) is free to style .price its own way. */
.product-card .price {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 0.5rem;
  font-size: 1.25rem;
  letter-spacing: 0.125rem;
}

.product-card .price s {
  color: #414148;
  font-weight: 400;
}

.product-card .price__now {
  font-weight: 500;
}

/* The design reads "$99.00 $100.00" — the price first, the struck-through original after it. The
   shared snippet emits them the other way round (the product page wants that order), so the card
   re-orders visually rather than forking the markup. The inline "-29%" is the product page's; on a
   card the discount is the image badge's job (card_badge), so it is not said twice. */
.product-card .price s {
  order: 2;
}

.product-card .price__now {
  order: 1;
}

.product-card .price__badge {
  display: none;
}

/* Replaces the old inline style="color:#c0392b" on the discount figure. */
.price__badge {
  color: var(--pc-sale-bg);
  font-weight: 600;
}

.product-card .unit-price {
  color: var(--pc-muted);
  font-size: 0.85em;
}

.product-card--sold-out .product-card__media {
  opacity: 0.62;
}

/* --- quick add ---------------------------------------------------------------------- */
.product-card__quick-add {
  margin-top: 0.15rem;
}

.product-card__quick-add button,
.product-card__choose {
  display: inline-block;
  width: 100%;
  border: 1px solid var(--primary, currentColor);
  border-radius: 999px;
  background: var(--primary, #111);
  color: var(--solid-button-text, #fff); /* 10-16 G2: the scheme's Solid button text; white when unset */
  padding: 0.5rem 0.9rem;
  font: inherit;
  font-size: 0.9rem;
  font-weight: 500;
  text-align: center;
  cursor: pointer;
  transition: opacity 0.2s ease, transform 0.2s ease;
}

.product-card__choose {
  background: transparent;
  color: inherit;
  border-color: var(--pc-border);
}

.product-card__choose:hover {
  text-decoration: none;
  border-color: currentColor;
}

.product-card__quick-add button[disabled] {
  opacity: 0.6;
  cursor: default;
}

/* On pointer devices the button only appears on hover/focus (Horizon's behaviour); on touch
   there is no hover, so it is always visible. */
@media (hover: hover) and (min-width: 750px) {
  .product-card__quick-add,
  .product-card__choose-wrap {
    opacity: 0;
    transform: translateY(2px);
    transition: opacity 0.2s ease, transform 0.2s ease;
  }

  .product-card:hover .product-card__quick-add,
  .product-card:focus-within .product-card__quick-add,
  .product-card:hover .product-card__choose-wrap,
  .product-card:focus-within .product-card__choose-wrap {
    opacity: 1;
    transform: none;
  }
}

/* 10-15-C §5 (X2) — "Round button on hover" (card_round_button). A round button at the photo's bottom
   right corner, linking to the product; only a card whose section turned it on carries the classes,
   so nothing here reaches any other card. --pc-round-size is the section's "Round button size".
   On a pointer device it fades in on hover or keyboard focus, like quick add. On a touch screen there
   is no hover, so it is ALWAYS shown there: a button that only appeared after a tap would appear after
   the tap had already opened the product. */
.product-card__round-btn {
  position: absolute;
  right: var(--pc-round-inset, 0.75rem); /* card_round_button_inset; 12px when unset */
  bottom: var(--pc-round-inset-bottom, var(--pc-round-inset, 0.75rem));
  z-index: 2;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: var(--pc-round-size, 40px);
  height: var(--pc-round-size, 40px);
  border-radius: 50%;
  transition: opacity 0.2s ease, transform 0.2s ease;
}

.product-card__round-btn svg {
  width: 50%;
  height: 50%;
}

/* "Button colours" are the section's colour scheme's button and button-label colours; a section on the
   base scheme carries no --color-button of its own, so the base scheme's pair stands in (the same pair
   the floating chat button uses).
   10-15-C fix2: each choice is scoped under .product-card so it outranks `.product-card a { color:
   inherit }` (0,1,1) above; a bare class (0,1,0) lost to it and every icon took the card's text colour. */
.product-card .product-card__round-btn--button {
  background: var(--color-button, var(--scheme-1-button, var(--primary, #111)));
  color: var(--color-button-text, var(--scheme-1-button-label, #fff));
}

.product-card .product-card__round-btn--dark {
  background: #000;
  color: #fff;
}

.product-card .product-card__round-btn--light {
  background: #fff;
  color: #000;
}

/* The wishlist heart lives in the same corner (account.css); with the button on it moves up to sit
   above it, centred on it, so the two never overlap. */
.product-card--round-btn .product-card__wish {
  bottom: calc(0.75rem + var(--pc-round-size, 40px) + 0.5rem);
  right: calc(0.75rem + (var(--pc-round-size, 40px) - 2.25rem) / 2);
}

@media (hover: hover) {
  .product-card__round-btn {
    opacity: 0;
    transform: translateY(4px);
  }

  .product-card:hover .product-card__round-btn,
  .product-card:focus-within .product-card__round-btn {
    opacity: 1;
    transform: none;
  }
}

@media (prefers-reduced-motion: reduce) {
  .product-card__round-btn {
    transition: none;
    transform: none;
  }
}

@media (prefers-reduced-motion: reduce) {
  .product-card__image,
  .product-card__quick-add,
  .product-card__choose-wrap,
  .product-card__quick-add button {
    transition: none;
  }

  .product-card--zoom:hover .product-card__image {
    transform: none;
  }
}

/* --- dark mode (shopper preference, mirrors base.css) -------------------------------- */
html[data-theme="dark"] {
  --pc-border: #334155;
  --pc-surface: #1e293b;
  --pc-muted: #94a3b8;
  --pc-placeholder: #1e293b;
  --pc-sold-bg: #64748b;
}

/* --- promo count on the card ------------------------------------------------------------
 * "2 promos" under the price. A COUNT, never the offers themselves: the tile has no room and
 * the product page lists them in full (snippets/product-promos.liquid).
 *
 * Deliberately quieter than .product-card__badge on the image. That badge is about compare-at
 * ("-25%", a number the shopper can act on immediately); this is a pointer to information that
 * lives one click away, and giving both the same weight would make the tile shout twice.
 */
.product-card__promos {
  display: inline-block;
  padding: 0.1rem 0.4rem;
  border: 1px solid currentColor;
  border-radius: 4px;
  font-size: 0.75rem;
  font-weight: 600;
  line-height: 1.5;
  opacity: 0.75;
}

/* The two marks sit on one row so a card with both does not grow a second line. */
.product-card__promo-marks {
  display: flex;
  flex-wrap: wrap;
  gap: 0.3rem;
  margin-top: 0.3rem;
}

/* The member mark is FILLED where the promo count is outlined: it is a statement about the
   shopper rather than about the product, and the two must not read as the same kind of fact.
   Only a signed-in member ever sees one. */
.product-card__promos--member {
  border-color: transparent;
  background: var(--primary, #1a1a1a);
  color: #fff;
  opacity: 1;
}

/* ===================================================================================== *
 * parity_snifl_product — card options, each off by default; only a card or grid carrying the class
 * or custom property below is touched.
 * ===================================================================================== */

/* card_image_ratio "Slightly tall (6:7)". */
.product-card__media--tall {
  --pc-ratio: 333 / 386;
}

/* card_text_style "Large name": the grey line and the price 16px (14px under 1200px), the name 22px
   medium with tight tracking, 4px between the lines and 10px under the photo, in the colour scheme's
   colours, never in capitals. */
.product-card--text-large {
  gap: 0.625rem;
}

.product-card--text-large .product-card__info {
  gap: 0.25rem;
}

.product-card--text-large .product-card__vendor {
  font-size: 1rem;
  line-height: 1.4;
  letter-spacing: 0;
  text-transform: none;
  color: color-mix(in srgb, var(--text, #451504) 80%, transparent);
}

.product-card--text-large .product-card__title {
  font-size: 1.375rem;
  font-weight: 500;
  line-height: 1.4;
  letter-spacing: -0.04em;
  text-transform: none;
  color: var(--text);
}

.product-card--text-large .price {
  gap: 0.375rem;
  font-size: 1rem;
  line-height: 1.4;
  letter-spacing: 0;
}

.product-card--text-large .price__now {
  font-weight: 400;
}

.product-card--text-large .price s {
  color: color-mix(in srgb, var(--text, #451504) 80%, transparent);
}

@media (max-width: 1199px) {
  .product-card--text-large .product-card__vendor,
  .product-card--text-large .price {
    font-size: 0.875rem;
  }
}

/* card_sale_color: the compare-at price's colour. */
.product-card.product-card--sale-color .price s {
  color: var(--pc-sale-color);
}

/* "Columns on tablets" and "Space between rows" (grid sections): only a grid that carries the
   property is affected. */
@media (min-width: 750px) and (max-width: 1199px) {
  .product-grid[style*="--card-cols-tablet"] {
    grid-template-columns: repeat(var(--card-cols-tablet), minmax(0, 1fr));
  }
}

.product-grid[style*="--card-row-gap"] {
  row-gap: var(--card-row-gap);
}
/* card_hover "Show second image (quick swap)": the same swap as "Show second image", in 60ms. */
.product-card--quick-swap .product-card__image {
  transition-duration: 0.06s;
}
/* card_mobile_style "Centred, quick add on the photo": the quick add under the words never shows; on
   phones the words are centred and a white pill (14px, a bag, 12px padding) sits 16px from the photo's
   bottom right corner, where the round hover button would be (that one is not shown on phones then). */
.product-card--mobile-pill .product-card__info > .product-card__quick-add,
.product-card--mobile-pill .product-card__info > .product-card__choose-wrap,
.product-card__pill {
  display: none;
}

@media (max-width: 749px) {
  .product-card--mobile-pill .product-card__info {
    align-items: center;
    text-align: center;
  }

  .product-card--mobile-pill .price {
    justify-content: center;
  }

  .product-card--mobile-pill .product-card__round-btn {
    display: none;
  }

  .product-card--mobile-pill .product-card__pill {
    position: absolute;
    right: 1rem;
    bottom: 1rem;
    z-index: 2;
    display: block;
  }

  .product-card__pill button {
    display: inline-flex;
    align-items: center;
    gap: 0.25rem;
    padding: 0.75rem;
    border: 0;
    border-radius: 100px;
    background: #fff;
    color: #000;
    font: inherit;
    font-size: 0.875rem;
    font-weight: 400;
    line-height: 1.4;
    cursor: pointer;
  }

  .product-card__pill svg {
    width: 1.25rem;
    height: 1.25rem;
    flex: none;
  }
}
/* Quick swap is a computer-width effect: below 750px (the phone layout) the photo does not swap,
   even in a narrow desktop window. */
@media (max-width: 749px) {
  .product-card--quick-swap .product-card__image--hover {
    display: none;
  }
}
/* card_round_button_label_on — "Show the label on hover": the circle (8px padding, a 24px icon at 40px)
   widens to the left into a pill with the label (16px, 4px after the icon) while the pointer is over
   the BUTTON, keeping its right edge, on Framer's ease. The label's column grows from 0fr to
   1fr so the pill ends exactly at its words; 0.4s matches Framer frame by frame. Keyboard focus opens it too. Touch screens keep the circle. */
.product-card__round-btn--label {
  width: auto;
  min-width: var(--pc-round-size, 40px);
  box-sizing: border-box;
  padding: 0 calc((var(--pc-round-size, 40px) - var(--pc-round-icon, 24px)) / 2);
  border-radius: 100px;
  overflow: hidden;
  justify-content: flex-start;
}

.product-card__round-btn--label svg {
  flex: none;
  width: var(--pc-round-icon, 24px);
  height: var(--pc-round-icon, 24px);
}

.product-card__round-btn--label {
  --pc-round-icon: calc(var(--pc-round-size, 40px) * 0.6);
}

.product-card__round-label {
  /* It reaches into the button's right padding (and the label carries that padding itself), so the
     words show from the first frame, clipped only by the pill's edge, as on Framer. */
  margin-right: calc((var(--pc-round-size, 40px) - var(--pc-round-icon, 24px)) / -2);
  display: grid;
  grid-template-columns: minmax(0, 0fr);
  transition: grid-template-columns 0.4s cubic-bezier(0.44, 0, 0.56, 1);
}

.product-card__round-label > span {
  min-width: 0;
  overflow: hidden;
  padding-left: 0.25rem;
  padding-right: calc((var(--pc-round-size, 40px) - var(--pc-round-icon, 24px)) / 2);
  font-size: 1rem;
  font-weight: 400;
  line-height: 1.4;
  white-space: nowrap;
}

/* At rest the words are not drawn (they would peek into the circle's right edge); they appear the moment
   the pill starts to open. */
.product-card__round-label > span {
  visibility: hidden;
}

@media (hover: hover) {
  .product-card__round-btn--label:hover .product-card__round-label,
  .product-card__round-btn--label:focus-visible .product-card__round-label {
    grid-template-columns: minmax(0, 1fr);
  }

  .product-card__round-btn--label:hover .product-card__round-label > span,
  .product-card__round-btn--label:focus-visible .product-card__round-label > span {
    visibility: visible;
  }
}

@media (prefers-reduced-motion: reduce) {
  .product-card__round-label {
    transition: none;
  }
}