/* =============================================================================
   Mueller's Collection Pages — collection-cards.css
   Version: 1.4.2

   Product card and package card styles.
   Image crossfade uses CSS opacity only — no JavaScript.
   All classes prefixed mrp-col-.  No generic element selectors.
   ============================================================================= */

/* ── Card wrapper ───────────────────────────────────────────────────────────── */
.mrp-col-card {
  background: var(--mrp-col-bg-card);
  border-radius: var(--mrp-col-card-radius);
  box-shadow: var(--mrp-col-card-shadow);
  overflow: hidden;
  transition: box-shadow var(--mrp-col-transition);
}

/* ── Card link — wraps the entire card ─────────────────────────────────────── */
/*
   One anchor wraps image + body.
   No nested <a> elements — the CTA is a <span> styled as a button.
   The anchor's aria-label carries the full product name + brand for
   screen readers; the visual CTA is aria-hidden="true".
*/
.mrp-col-card__link {
  display: flex;
  flex-direction: column;
  height: 100%;
  text-decoration: none;
  color: inherit;
  outline-offset: -2px;
}

.mrp-col-card__link:focus-visible {
  outline: 2px solid var(--mrp-col-border-focus);
  outline-offset: 0;
  border-radius: var(--mrp-col-card-radius);
}

/* ── Card hover state — elevation ───────────────────────────────────────────── */
@media (hover: hover) and (pointer: fine) {
  .mrp-col-card:hover {
    box-shadow: var(--mrp-col-card-shadow-hover);
  }
}

/* ── Media container — 2:1 aspect ratio (800 × 400 design target) ─────────────── */
/*
   Standard product cards use a responsive 2:1 stage. An 800 × 400 source image
   fills the frame exactly; differently-shaped sources (e.g. 4:3 cutouts) remain
   fully visible with intentional neutral background bars. See --primary below.
*/
.mrp-col-card__media {
  position: relative;
  width: 100%;
  aspect-ratio: 2 / 1;
  overflow: hidden;
  background: #f5f5f3;
  flex-shrink: 0;
}

/* 16:9 variant for package cards */
.mrp-col-card__media--16-9 {
  aspect-ratio: 16 / 9;
}

/* ── Shared image base ──────────────────────────────────────────────────────── */
.mrp-col-card__img {
  display: block;
}

/* ── Primary image — centered contain; never cropped, never upscaled ────────── */
/*
   width:auto / height:auto let the image render at its natural size.
   max-width:100% / max-height:100% prevent it from exceeding the 2:1 stage.
   The browser applies aspect-ratio preservation when both axes are capped,
   equivalent to object-fit:contain. transform centers the result.
   Opacity crossfade handled in the hover-capable media query below.
*/
.mrp-col-card__img--primary {
  position: absolute;
  top: 50%;
  left: 50%;
  width: auto;
  height: auto;
  max-width: 100%;
  max-height: 100%;
  object-fit: contain;
  object-position: center center;
  transform: translate(-50%, -50%);
  padding: 0;
  opacity: 1;
}

/* ── Hover image — identical containment and centering as primary ────────────── */
.mrp-col-card__img--hover {
  position: absolute;
  top: 50%;
  left: 50%;
  width: auto;
  height: auto;
  max-width: 100%;
  max-height: 100%;
  object-fit: contain;
  object-position: center center;
  transform: translate(-50%, -50%);
  padding: 0;
  opacity: 0;
}

/* ── Package image — full-bleed cover fill (no hover swap for packages) ─────── */
/*
   Package cards carry both --primary and --cover. --cover is defined last so
   its rules win, restoring cover-fill behavior and cancelling the centering
   transform that --primary applies.
*/
.mrp-col-card__img--cover {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  max-width: 100%;
  max-height: 100%;
  transform: none;
  object-fit: cover;
  object-position: center;
  padding: 0;
}

/* ── Image placeholder — no featured image set ──────────────────────────────── */
.mrp-col-card__img-placeholder {
  position: absolute;
  inset: 0;
  background: var(--mrp-col-bg-placeholder);
}

/* ── Image crossfade — desktop fine-pointer only ────────────────────────────── */
/*
   Only devices with a real hover pointer (mouse) see the crossfade.
   Touch / coarse-pointer devices see only the primary image — one tap
   navigates directly to the product without triggering a hover state.

   Keyboard focus-within produces the same visual result as mouse hover
   so keyboard users experience parity with pointer users.

   transform is NOT included in the transition because it is used for
   centering. Animating it during hover would shift the image position.
*/
@media (hover: hover) and (pointer: fine) {
  .mrp-col-card__img--primary {
    transition: opacity var(--mrp-col-img-swap);
  }
  .mrp-col-card__img--hover {
    transition: opacity var(--mrp-col-img-swap);
  }

  /* Mouse hover */
  .mrp-col-card:hover .mrp-col-card__img--primary {
    opacity: 0;
  }
  .mrp-col-card:hover .mrp-col-card__img--hover {
    opacity: 1;
  }

  /* Keyboard focus-within (same visual state as hover) */
  .mrp-col-card:focus-within .mrp-col-card__img--primary {
    opacity: 0;
  }
  .mrp-col-card:focus-within .mrp-col-card__img--hover {
    opacity: 1;
  }
}

/* ── Card body ──────────────────────────────────────────────────────────────── */
.mrp-col-card__body {
  display: flex;
  flex-direction: column;
  padding: 1rem 1.125rem 1.25rem;
  flex: 1;
  gap: 0.25rem;
  border-top: 1px solid var(--mrp-col-border);
}

/* ── Brand label ────────────────────────────────────────────────────────────── */
.mrp-col-card__brand {
  font-size: var(--mrp-col-font-size-xs);
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--mrp-col-text-secondary);
  margin: 0;
  font-family: var(--mrp-col-font-sans);
  line-height: 1.4;
}

/* ── Product name (H3) ──────────────────────────────────────────────────────── */
.mrp-col-card__name {
  font-size: var(--mrp-col-font-size-card-title);
  font-weight: 600;
  color: var(--mrp-col-text-primary);
  margin: 0.125rem 0 0;
  line-height: 1.3;
  font-family: var(--mrp-col-font-sans);
}

/* ── Feature line ───────────────────────────────────────────────────────────── */
.mrp-col-card__feature {
  font-size: var(--mrp-col-font-size-sm);
  color: var(--mrp-col-text-secondary);
  margin: 0.25rem 0 0;
  line-height: 1.5;
  font-family: var(--mrp-col-font-sans);
}

/* ── Quote status ───────────────────────────────────────────────────────────── */
.mrp-col-card__status {
  font-size: var(--mrp-col-font-size-xs);
  font-weight: 500;
  color: var(--mrp-col-text-muted);
  margin: 0.375rem 0 0;
  letter-spacing: 0.04em;
  font-family: var(--mrp-col-font-sans);
}

/* ── Package includes block ─────────────────────────────────────────────────── */
.mrp-col-card__includes {
  font-size: var(--mrp-col-font-size-sm);
  color: var(--mrp-col-text-secondary);
  line-height: 1.6;
  margin: 0.375rem 0 0;
  font-family: var(--mrp-col-font-sans);
}

.mrp-col-card__includes ul,
.mrp-col-card__includes ol {
  margin: 0.25rem 0 0 1rem;
  padding: 0;
}

.mrp-col-card__includes li {
  margin: 0.125rem 0;
}

/* ── CTA span — styled as an outline button ─────────────────────────────────── */
/*
   This is intentionally a <span>, not an <a> or <button>, to avoid
   nesting interactive elements inside the card <a>.
   It is aria-hidden="true" — the card link's aria-label conveys the destination.
*/
.mrp-col-card__cta {
  display: inline-block;
  margin-top: auto;
  padding-top: 1rem;
  font-size: var(--mrp-col-font-size-sm);
  font-weight: 600;
  font-family: var(--mrp-col-font-sans);
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--mrp-col-text-primary);
  border-bottom: 1px solid var(--mrp-col-border-strong);
  padding-bottom: 1px;
  transition: color var(--mrp-col-transition), border-color var(--mrp-col-transition);
  align-self: flex-start;
}

@media (hover: hover) and (pointer: fine) {
  .mrp-col-card:hover .mrp-col-card__cta,
  .mrp-col-card:focus-within .mrp-col-card__cta {
    color: var(--mrp-col-accent-hover);
    border-color: var(--mrp-col-accent-hover);
  }
}

/* ── prefers-reduced-motion ─────────────────────────────────────────────────── */
@media (prefers-reduced-motion: reduce) {
  .mrp-col-card__img--primary,
  .mrp-col-card__img--hover,
  .mrp-col-card__cta,
  .mrp-col-card {
    transition: none;
  }
}
/* ── Promotional pricing — collection card (v1.4.2) ────────────────────────── */
/*
   Applies to products with an eligible promotional brand (presidential-
   billiards 15%, olhausen 10%) in pool-tables or shuffleboards.
   Scoped to .mrp-col-card__promotion so no existing grid or image rules
   are affected. No colour is used as the sole indicator of a discount.
*/
.mrp-col-card__promotion {
  display: flex;
  flex-direction: column;
  gap: 0.375rem;
  margin: 0.5rem 0 0.125rem;
}

/* Badge: uppercase, dark pill — mirrors the Mueller brand voice */
.mrp-col-card__promo-badge {
  display: inline-block;
  padding: 0.2em 0.6em;
  background: var(--mrp-col-text-primary);
  color: var(--mrp-col-bg-card);
  font-size: var(--mrp-col-font-size-xs);
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  border-radius: 2px;
  font-family: var(--mrp-col-font-sans);
  align-self: flex-start;
}

/* Price row: original (struck through) and promotional side by side */
.mrp-col-card__price {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 0.25em 0.55em;
  font-family: var(--mrp-col-font-sans);
}

.mrp-col-card__price-original {
  font-size: var(--mrp-col-font-size-sm);
  color: var(--mrp-col-text-muted);
  text-decoration: line-through;
  font-style: normal; /* <del> defaults to italic in some resets */
}

.mrp-col-card__price-current {
  font-size: var(--mrp-col-font-size-base);
  font-weight: 700;
  color: var(--mrp-col-text-primary);
  text-decoration: none;
  font-style: normal; /* <ins> defaults to underline in some resets */
}

/*
   Strip WooCommerce currency-wrapper styling that may otherwise override
   the font-size and font-weight inherited from del/ins.
*/
.mrp-col-card__price-original .woocommerce-Price-amount,
.mrp-col-card__price-current .woocommerce-Price-amount {
  font-size: inherit;
  font-weight: inherit;
  color: inherit;
}

/* Fallback note when no numeric price is available (quote-only product) */
.mrp-col-card__promo-note {
  font-size: var(--mrp-col-font-size-xs);
  color: var(--mrp-col-text-secondary);
  margin: 0;
  font-family: var(--mrp-col-font-sans);
  font-style: italic;
}

/* Source note: shown below price pair when WC sale price wins */
.mrp-col-card__promo-source {
  font-size: var(--mrp-col-font-size-xs);
  color: var(--mrp-col-text-muted);
  margin: 0;
  font-family: var(--mrp-col-font-sans);
  font-style: italic;
}