/* ============================================================================
   Core theme — canonical product card.

   Loaded once for the whole theme and used by every section that lists
   products. Scoped under .pcard; sections control layout (grid, slider, card
   width) and pass presentation through the --pcard-* properties below.
   ============================================================================ */

.pcard {
  /* Set by the owning section, so one card adapts to every context. */
  height: 100%;
  --pcard-ratio: 4 / 5;
  --pcard-fit: cover;
  --pcard-position: center;
  --pcard-radius: var(--r-md, 12px);
  --pcard-gap: 12px;

  /* Colour is NOT declared here on purpose: a declaration on .pcard would
     outrank a value inherited from the owning section. Each usage site below
     falls back to the canonical token instead, so Global Design applies by
     default and a section override simply wins. */

  position: relative;
  display: flex;
  min-width: 0;
  flex-direction: column;
  gap: var(--pcard-gap);
}

.pcard *,
.pcard *::before,
.pcard *::after { box-sizing: border-box; }

/* ------------------------------------------------------------------- media */

.pcard__media {
  position: relative;
  overflow: hidden;
  border-radius: var(--pcard-radius);
  background: var(--pcard-surface, var(--bg-s));
  border: 1px solid var(--pcard-border, transparent);
  /* A declared ratio is what keeps the grid from shifting as images load. */
  aspect-ratio: var(--pcard-ratio);
}

.pcard__media-link {
  display: block;
  width: 100%;
  height: 100%;
}

.pcard__img {
  width: 100%;
  height: 100%;
  object-fit: var(--pcard-fit);
  object-position: var(--pcard-position);
  transition: opacity var(--dur, .3s) var(--ease, ease),
              transform 600ms var(--ease, ease);
}

.pcard__img--hover {
  position: absolute;
  inset: 0;
  opacity: 0;
}

.pcard__placeholder {
  display: grid;
  width: 100%;
  height: 100%;
  color: var(--text-m);
  place-items: center;
}
.pcard__placeholder svg { width: 32px; height: 32px; }

/* One restrained hover: the secondary image if there is one, otherwise a very
   small zoom. Never both, and never on touch. */
@media (hover: hover) and (pointer: fine) {
  .pcard--has-hover:hover .pcard__img:not(.pcard__img--hover) { opacity: 0; }
  .pcard--has-hover:hover .pcard__img--hover { opacity: 1; }
  .pcard:not(.pcard--has-hover):hover .pcard__img { transform: scale(1.035); }
  .pcard:hover .pcard__link { text-decoration-color: currentColor; }
}

/* ------------------------------------------------------------------ badges */

.pcard__badges {
  position: absolute;
  z-index: 2;
  inset-block-start: var(--pcard-badge-inset, 10px);
  inset-inline-start: var(--pcard-badge-inset, 10px);
  display: flex;
  flex-wrap: wrap;
  gap: 5px;
  max-width: calc(100% - 20px);
}

.pcard__badge {
  padding: 4px 8px;
  border-radius: var(--pcard-badge-radius, 999px);
  font-family: var(--font);
  font-size: var(--pcard-badge-size, 12px);
  font-weight: 600;
  letter-spacing: .04em;
  line-height: 1.2;
  text-transform: uppercase;
}
.pcard__badge--sale { background: var(--pcard-badge-sale-bg, var(--sale)); color: var(--pcard-badge-sale-color, var(--on-brand)); }
.pcard__badge--neutral { background: var(--pcard-badge-neutral-bg, var(--text)); color: var(--pcard-badge-neutral-color, var(--bg)); }
.pcard__badge--muted {
  background: var(--pcard-badge-muted-bg, color-mix(in srgb, var(--text) 62%, transparent));
  color: var(--pcard-badge-muted-color, var(--on-brand));
  -webkit-backdrop-filter: blur(6px);
  backdrop-filter: blur(6px);
}

.pcard--sold-out .pcard__img { opacity: .55; }

/* ------------------------------------------------------------------- wishlist */

/* The target is 40px — the smallest comfortable one on a phone — while the
   visible disc stays 30px, so the card's image is not crowded by chrome. */
.pcard__wish {
  position: absolute;
  z-index: 2;
  inset-block-start: 5px;
  inset-inline-end: 5px;
  display: grid;
  width: 40px;
  height: 40px;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: transparent;
  color: var(--text);
  cursor: pointer;
  place-items: center;
}
.pcard__wish::before {
  content: "";
  position: absolute;
  inset: 5px;
  border-radius: 50%;
  background: color-mix(in srgb, var(--bg) 88%, transparent);
  -webkit-backdrop-filter: blur(6px);
  backdrop-filter: blur(6px);
  transition: background-color var(--dur-fast, .16s) var(--ease, ease);
}
.pcard__wish svg { position: relative; width: 15px; height: 15px; }
.pcard__wish:hover::before { background: var(--bg); }
.pcard__wish:focus-visible { outline: 2px solid var(--brand); outline-offset: 2px; }
.pcard__wish[aria-pressed="true"] { color: var(--sale); }
.pcard__wish[aria-pressed="true"] svg { fill: currentColor; }

/* --------------------------------------------------------------- actions */

.pcard__actions {
  display: flex;
  align-items: stretch;
  gap: 6px;
  margin-top: auto;
  padding-top: var(--pcard-actions-gap, 2px);
}

.pcard__quick-add {
  position: relative;
  z-index: 2;
  display: flex;
  flex: 1;
  min-width: 0;
  min-height: var(--pcard-btn-height, 40px);
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 0 14px;
  border: 0;
  border-radius: var(--pcard-btn-radius, var(--btn-radius, var(--r-sm, 9px)));
  background: var(--pcard-btn-bg, var(--btn-bg, var(--text)));
  color: var(--pcard-btn-color, var(--btn-color, var(--bg)));
  border: 1px solid var(--pcard-btn-border, transparent);
  cursor: pointer;
  font-family: var(--font);
  font-size: var(--pcard-btn-size, 12.5px);
  font-weight: 600;
  transition: background-color var(--dur-fast, .16s) var(--ease, ease),
              opacity var(--dur-fast, .16s) var(--ease, ease);
}
.pcard__quick-add-icon { width: 15px; height: 15px; flex: none; }
.pcard__quick-add-label { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pcard__quick-add:hover {
  background: var(--pcard-btn-hover-bg, var(--btn-hover-bg, var(--brand-d, var(--text))));
  color: var(--pcard-btn-hover-color, var(--pcard-btn-color, var(--btn-color, var(--bg))));
}
.pcard__quick-add:focus-visible { outline: 2px solid var(--brand); outline-offset: 2px; }
.pcard__quick-add[disabled] {
  background: color-mix(in srgb, var(--text) 12%, transparent);
  color: var(--text-m);
  cursor: default;
}

/* Actions stay visible at all times: a control that only appears on hover is
   undiscoverable on touch, and this is the card's primary conversion action. */

.pcard__spinner {
  display: none;
  width: 13px;
  height: 13px;
  border: 2px solid currentColor;
  border-radius: 50%;
  border-top-color: transparent;
  animation: pcardSpin .7s linear infinite;
}
.pcard.is-busy .pcard__spinner { display: block; }
.pcard.is-busy .pcard__quick-add { pointer-events: none; }
@keyframes pcardSpin { to { transform: rotate(360deg); } }

.pcard.is-added .pcard__quick-add {
  background: var(--brand);
  color: var(--on-brand);
}
.pcard.is-error .pcard__quick-add { background: var(--sale); color: #fff; }

/* -------------------------------------------------------------------- body */

.pcard__body {
  display: flex;
  min-width: 0;
  flex-direction: column;
  gap: 5px;
}

.pcard__vendor {
  margin: 0;
  color: var(--pcard-category, var(--text-m));
  font-family: var(--font);
  font-size: 12px;
  font-weight: 400;
  line-height: 1.3;
}

.pcard__title {
  margin: 0;
  font-family: var(--font);
  font-size: var(--pcard-title-size, 14.5px);
  font-weight: 600;
  line-height: 1.35;
}

.pcard__link {
  color: var(--pcard-title, var(--text));
  text-decoration: underline;
  text-decoration-color: transparent;
  text-underline-offset: 3px;
  text-decoration-thickness: 1px;
  transition: text-decoration-color var(--dur-fast, .16s) var(--ease, ease);
}
/* The whole card is clickable without nesting the media inside the link. */
.pcard__link::after { position: absolute; inset: 0; content: ""; z-index: 1; }
.pcard__link:focus-visible { outline: 2px solid var(--brand); outline-offset: 3px; }

.pcard__subtitle {
  margin: 0;
  overflow: hidden;
  color: var(--pcard-muted, var(--text-s));
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  font-size: 12.5px;
  line-height: 1.45;
}

/* ------------------------------------------------------------------ rating */

.pcard__rating {
  display: flex;
  align-items: center;
  gap: 6px;
  margin: 1px 0 0;
  font-family: var(--font);
  font-size: 12px;
  line-height: 1;
}
.pcard__stars {
  position: relative;
  color: color-mix(in srgb, var(--text) 18%, transparent);
  font-size: 13px;
  letter-spacing: 1px;
}
/* One element, clipped to the score — no half-star image set needed. */
.pcard__stars::before {
  position: absolute;
  inset: 0;
  width: var(--fill, 0%);
  overflow: hidden;
  color: var(--star);
  content: "★★★★★";
  white-space: nowrap;
}
.pcard__reviews { color: var(--text-m); }

/* ---------------------------------------------------------------- swatches */

.pcard__swatches {
  display: flex;
  align-items: center;
  gap: 5px;
  margin: 1px 0 0;
  padding: 0;
  list-style: none;
}
.pcard__swatch {
  width: 13px;
  height: 13px;
  border: 1px solid color-mix(in srgb, var(--text) 18%, transparent);
  border-radius: 50%;
  background: var(--swatch, var(--border));
}
.pcard__swatch-more {
  color: var(--text-m);
  font-family: var(--font);
  font-size: 12px;
  font-weight: 600;
}

/* ------------------------------------------------------------------- price */

.pcard__price {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 4px 8px;
  margin: 2px 0 0;
  font-family: var(--font);
  font-size: var(--pcard-price-size, 14px);
  line-height: 1.3;
}
.pcard__price-now { color: var(--pcard-price, var(--text)); font-weight: 600; }
.pcard__price-now.is-sale { color: var(--pcard-sale, var(--sale)); }
.pcard__price-was {
  color: var(--pcard-compare, var(--text-m));
  font-size: 12.5px;
  font-weight: 400;
  text-decoration-thickness: 1px;
}
.pcard__discount {
  color: var(--pcard-discount, var(--pcard-sale, var(--sale)));
  font-size: 12px;
  font-weight: 600;
}
/* A product on sale leads with the sale price, not the discount chip. */
.pcard--sold-out .pcard__price-now { color: var(--text-m); }

.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  border: 0;
  clip-path: inset(50%);
  white-space: nowrap;
}

/* ------------------------------------------------------------ small cards */

@media (max-width: 767px) {
  .pcard { --pcard-gap: 10px; }
  .pcard__title { font-size: 13.5px; }
  .pcard__price { font-size: 13.5px; }
  .pcard__quick-add { min-height: 42px; font-size: 12.5px; }
}

@media (prefers-reduced-motion: reduce) {
  .pcard__img,
  .pcard__quick-add,
  .pcard__link { transition-duration: .01ms; }
  .pcard:hover .pcard__img { transform: none; }
  .pcard__spinner { animation-duration: 1.6s; }
}