/* Product card proposals (25-oct-2026): ?ficha=a…e switches them on (header.tpl). */

/* ===== Propuesta a ===== */
/* Proposal A, "Editorial sin caja": no box; the photo sits on a light plate and the type floats on white.
   Every selector starts with :root[data-rtg-card="a"], so nothing changes unless ?ficha=a is on.
   The prefix adds (0,2,0) on top of the base selectors, so these rules outrank the shared card rules,
   the mobile media rules and the "body#search" overrides with no !important at all. */

/* --- Card: no border, no shadow, no forced height (the 435px min-height created the empty gap). --- */
:root[data-rtg-card="a"] :is(body:not(#product), .rtg-recommendations) .product-miniature {
  /* 4px rhythm shared by every gap inside the card. */
  --rtg-a-s1: 4px; --rtg-a-s2: 8px; --rtg-a-s3: 12px; --rtg-a-s4: 16px;
  --rtg-a-ink: #1d1d1f; --rtg-a-muted: #6e6e73; --rtg-a-hair: #e5e5ea;
  --rtg-a-petrol: #0D343F; --rtg-a-brand: #1C4F5E; --rtg-a-focus: #1693a5;
  --rtg-a-ease: cubic-bezier(.16, 1, .3, 1);
  min-height: 0;
  border: 0;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
  text-align: left;
  /* Visible so focus rings on the edges are not clipped; every child keeps min-width:0, so nothing spills. */
  overflow: visible;
}

/* --- Photo plate: the white JPG multiplies into the plate, so the product looks cut out. --- */
:root[data-rtg-card="a"] :is(body:not(#product), .rtg-recommendations) .product-miniature__top {
  border-radius: 12px;
  background: #f6f7f8;
  /* Clips the promo ribbon and the photo to the plate; isolation keeps the blend inside it. */
  overflow: hidden;
  isolation: isolate;
  transition: background-color .5s var(--rtg-a-ease);
}
:root[data-rtg-card="a"] :is(body:not(#product), .rtg-recommendations) .product-miniature:hover .product-miniature__top,
:root[data-rtg-card="a"] :is(body:not(#product), .rtg-recommendations) .product-miniature:focus-within .product-miniature__top { background: #eef0f2; }
/* Percent padding follows the card width, so the product breathes the same at 165 and 306px. */
:root[data-rtg-card="a"] :is(body:not(#product), .rtg-recommendations) .product-miniature__image-container { padding: 8%; }
:root[data-rtg-card="a"] :is(body:not(#product), .rtg-recommendations) .product-miniature__image { mix-blend-mode: multiply; transition: none; }
/* No zoom on hover: the plate tone is the only feedback. */
:root[data-rtg-card="a"] :is(body:not(#product), .rtg-recommendations) .product-miniature__image-link:hover .product-miniature__image { transform: none; }
/* Inset ring: the plate clips anything drawn outside it. */
:root[data-rtg-card="a"] :is(body:not(#product), .rtg-recommendations) .product-miniature__image-link:focus-visible {
  outline: 2px solid var(--rtg-a-focus);
  outline-offset: -4px;
  border-radius: 12px;
}

/* --- Badges: same colors as today, softer shape so they read as labels on the plate. --- */
:root[data-rtg-card="a"] :is(body:not(#product), .rtg-recommendations) .product-miniature__top > .product-flags {
  top: var(--rtg-a-s2);
  right: var(--rtg-a-s2);
  max-width: calc(100% - 16px);
}
:root[data-rtg-card="a"] :is(body:not(#product), .rtg-recommendations) .product-miniature__top > .product-flags .badge {
  padding: 4px 8px;
  border-radius: 6px;
  font-size: 11px;
  letter-spacing: .02em;
}

/* --- Text column: a size container, so type and actions scale with the card, not the screen. --- */
:root[data-rtg-card="a"] :is(body:not(#product), .rtg-recommendations) .product-miniature__bottom {
  container: rtg-card-a / inline-size;
  /* No side padding: the text aligns with the plate edges, like the home showcases.
     Top gap is 5% of the card: 12px on phones, ~15px at 306px. */
  padding: clamp(12px, 5%, 16px) 0 var(--rtg-a-s1);
}
:root[data-rtg-card="a"] :is(body:not(#product), .rtg-recommendations) .product-miniature__infos { align-items: stretch; gap: var(--rtg-a-s2); }

/* Name: 14px at 165px, ~15px at 203px, 17px at 306px (linear in container width). */
:root[data-rtg-card="a"] :is(body:not(#product), .rtg-recommendations) .product-miniature__title {
  min-height: calc(2 * 1.3em);
  margin: 0;
  color: var(--rtg-a-ink);
  font-size: clamp(14px, 10.5px + 2.13cqi, 17px);
  font-weight: 600;
  line-height: 1.3;
  letter-spacing: -.005em;
  text-align: left;
  overflow-wrap: anywhere;
  -webkit-line-clamp: 3;
  transition: color .25s var(--rtg-a-ease);
}
:root[data-rtg-card="a"] :is(body:not(#product), .rtg-recommendations) .product-miniature__title:hover { color: #0f7684; }
:root[data-rtg-card="a"] :is(body:not(#product), .rtg-recommendations) .product-miniature__title:focus-visible {
  outline: 2px solid var(--rtg-a-focus);
  outline-offset: 2px;
  border-radius: 4px;
}

/* Price row may wrap (the struck price drops below on narrow cards); each amount stays on one line with ellipsis. */
:root[data-rtg-card="a"] :is(body:not(#product), .rtg-recommendations) .product-miniature__prices {
  justify-content: flex-start;
  align-items: baseline;
  gap: 0 var(--rtg-a-s2);
  margin: 0;
  white-space: normal;
}
/* Price: 17px at 165px, ~18px at 203px, 22px at 306px; ink, bold, tabular so prices line up. */
:root[data-rtg-card="a"] :is(body:not(#product), .rtg-recommendations) .product-miniature__price {
  max-width: 100%;
  overflow: hidden;
  color: var(--rtg-a-ink);
  font-size: clamp(17px, 11.15px + 3.55cqi, 22px);
  font-weight: 700;
  line-height: 1.2;
  letter-spacing: -.01em;
  font-variant-numeric: tabular-nums;
  text-overflow: ellipsis;
  white-space: nowrap;
}
/* Struck regular price after the current one: the eye lands on what is paid. */
:root[data-rtg-card="a"] :is(body:not(#product), .rtg-recommendations) .product-miniature__discount-price { order: 0; min-width: 0; max-width: 100%; }
:root[data-rtg-card="a"] :is(body:not(#product), .rtg-recommendations) .product-miniature__regular-price {
  display: block;
  overflow: hidden;
  color: var(--rtg-a-muted);
  font-size: 13px;
  font-weight: 500;
  font-variant-numeric: tabular-nums;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* --- Action row: compact stepper + petrol pill, kept at the bottom so buttons line up across a grid row. --- */
:root[data-rtg-card="a"] :is(body:not(#product), .rtg-recommendations) .product-miniature__actions { margin-top: auto; padding-top: var(--rtg-a-s3); }
/* Wrap: below ~156px (320px phones) the pill drops under the stepper instead of shrinking under 44px. */
:root[data-rtg-card="a"] :is(body:not(#product), .rtg-recommendations) .product-miniature__form { flex-wrap: wrap; justify-content: flex-start; gap: var(--rtg-a-s2); }
:root[data-rtg-card="a"] :is(body:not(#product), .rtg-recommendations) .product-miniature__form .quantity-button { flex: 0 0 auto; width: auto; margin: 0; }
/* Hairline drawn as an inset shadow, so the - / + buttons keep the full 40px height. */
:root[data-rtg-card="a"] :is(body:not(#product), .rtg-recommendations) .product-miniature__form .quantity-button__group {
  flex-wrap: nowrap;
  width: auto;
  height: 40px;
  border: 0;
  border-radius: 999px;
  background: #fff;
  box-shadow: inset 0 0 0 1px var(--rtg-a-hair);
}
:root[data-rtg-card="a"] :is(body:not(#product), .rtg-recommendations) .product-miniature__form .quantity-button__group .btn {
  --bs-btn-color: var(--rtg-a-ink); --bs-btn-hover-color: #0f7684; --bs-btn-active-color: #0f7684;
  --bs-btn-bg: transparent; --bs-btn-hover-bg: transparent; --bs-btn-active-bg: transparent;
  display: grid;
  place-items: center;
  flex: 0 0 36px;
  width: 36px;
  min-width: 36px;
  height: 40px;
  margin: 0;
  padding: 0;
  border: 0;
  border-radius: 999px;
  box-shadow: none;
}
:root[data-rtg-card="a"] :is(body:not(#product), .rtg-recommendations) .product-miniature__form .quantity-button__group .material-icons { font-size: 18px; }
:root[data-rtg-card="a"] :is(body:not(#product), .rtg-recommendations) .product-miniature__form .quantity-button__group .form-control {
  /* 32px fits a three-digit quantity ("100") at 15px/600. */
  flex: 0 0 32px;
  width: 32px;
  min-width: 0;
  height: 40px;
  margin: 0;
  padding: 0;
  border: 0;
  border-radius: 0;
  background: transparent;
  color: var(--rtg-a-ink);
  font-size: 15px;
  font-weight: 600;
  font-variant-numeric: tabular-nums;
  text-align: center;
  box-shadow: none;
}
/* Pill fills the rest of the row; Bootstrap's own variables keep hover/active/disabled consistent. */
:root[data-rtg-card="a"] :is(body:not(#product), .rtg-recommendations) .product-miniature__add {
  --bs-btn-bg: var(--rtg-a-petrol); --bs-btn-border-color: var(--rtg-a-petrol); --bs-btn-color: #fff;
  --bs-btn-hover-bg: var(--rtg-a-brand); --bs-btn-hover-border-color: var(--rtg-a-brand); --bs-btn-hover-color: #fff;
  --bs-btn-active-bg: var(--rtg-a-brand); --bs-btn-active-border-color: var(--rtg-a-brand); --bs-btn-active-color: #fff;
  --bs-btn-disabled-bg: var(--rtg-a-petrol); --bs-btn-disabled-border-color: var(--rtg-a-petrol); --bs-btn-disabled-color: #fff;
  display: inline-flex;
  flex: 1 1 44px;
  align-items: center;
  justify-content: center;
  gap: 6px;
  width: auto;
  min-width: 44px;
  height: 40px;
  min-height: 40px;
  padding: 0 14px;
  border-radius: 999px;
  font-size: 13px;
  font-weight: 600;
  letter-spacing: .01em;
  transition: background-color .3s var(--rtg-a-ease);
}
:root[data-rtg-card="a"] :is(body:not(#product), .rtg-recommendations) .product-miniature__add .material-icons { font-size: 20px; }
/* Label hidden by default: the pill is icon-only and its aria-label carries "Añadir al carrito …". */
:root[data-rtg-card="a"] :is(body:not(#product), .rtg-recommendations) .product-miniature__add-text {
  display: none;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
:root[data-rtg-card="a"] :is(body:not(#product), .rtg-recommendations) :is(.product-miniature__add, .product-miniature__form .btn, .product-miniature__details):focus-visible {
  outline: 2px solid var(--rtg-a-focus);
  outline-offset: 2px;
  box-shadow: none;
}
/* The input rule above removes Bootstrap's focus shadow, so give the field its own inset teal ring. */
:root[data-rtg-card="a"] :is(body:not(#product), .rtg-recommendations) .product-miniature__form .quantity-button__group .form-control:focus-visible {
  outline: 2px solid var(--rtg-a-focus); outline-offset: -2px; border-radius: 6px;
}
/* Products without add-to-cart: a quiet outlined pill, same height as the action row. */
:root[data-rtg-card="a"] :is(body:not(#product), .rtg-recommendations) .product-miniature__details {
  --bs-btn-color: var(--rtg-a-petrol); --bs-btn-border-color: #d2d2d7;
  --bs-btn-hover-bg: #f6f7f8; --bs-btn-hover-color: var(--rtg-a-brand); --bs-btn-hover-border-color: var(--rtg-a-brand);
  --bs-btn-active-bg: #eef0f2; --bs-btn-active-color: var(--rtg-a-brand); --bs-btn-active-border-color: var(--rtg-a-brand);
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  min-height: 40px;
  padding: 0 16px;
  border-radius: 999px;
  font-size: 14px;
  font-weight: 600;
}

/* --- Container steps (card width, wherever the page puts it). --- */
/* Phones (165px), search at 6 columns (203px) and product shelves: four lines so no name is cut. */
@container rtg-card-a (width < 256px) {
  :root[data-rtg-card="a"] :is(body:not(#product), .rtg-recommendations) .product-miniature__title { -webkit-line-clamp: 4; }
}
/* From 240px the action row gets more air above it. */
@container rtg-card-a (width >= 240px) {
  :root[data-rtg-card="a"] :is(body:not(#product), .rtg-recommendations) .product-miniature__actions { padding-top: var(--rtg-a-s4); }
}
/* Measured (Montserrat 600, 13px): icon + label + padding = ~163px; at 280px the pill is 168px next to the 104px stepper. */
@container rtg-card-a (width >= 280px) {
  :root[data-rtg-card="a"] :is(body:not(#product), .rtg-recommendations) .product-miniature__add-text { display: inline; }
}

/* Search keeps today's four-line allowance at every column count (same specificity, placed last). */
:root[data-rtg-card="a"] body#search .product-miniature__title { -webkit-line-clamp: 4; }

@media (prefers-reduced-motion: reduce) {
  :root[data-rtg-card="a"] :is(body:not(#product), .rtg-recommendations) :is(.product-miniature__top, .product-miniature__title, .product-miniature__add) { transition: none; }
}

/* ===== Propuesta b ===== */
/* Proposal B "Caja refinada": a premium card. Hairline box, 16px radius, photo on a soft stage,
   a 4/8px rhythm and one type scale that steps with the card width (container queries, not viewport).
   Scope: every selector starts with :root[data-rtg-card="b"]; the :is(...) part mirrors the base rules
   so specificity is (1,3,1)+ and beats them (and the body#search / @media overrides) without !important. */

/* Card: the container every inner size is measured against (shelves and listings are grids, so
   inline-size containment never collapses it). Name kept as "product-miniature" for the base queries. */
:root[data-rtg-card="b"] :is(body:not(#product), .rtg-recommendations) .product-miniature {
  container: product-miniature / inline-size;
  min-height: 0;
  border: 1px solid #e5e5ea;
  border-radius: 16px;
  box-shadow: none; /* shadow only on hover: at rest the hairline is enough */
  transition: transform .5s cubic-bezier(.16,1,.3,1), box-shadow .5s cubic-bezier(.16,1,.3,1), border-color .3s ease;
}
@media (hover: hover) {
  :root[data-rtg-card="b"] :is(body:not(#product), .rtg-recommendations) .product-miniature:hover {
    transform: translateY(-3px);
    border-color: rgb(22 147 165 / 60%); /* teal, softened so the edge does not shout */
    box-shadow: 0 14px 32px -14px rgb(13 52 63 / 22%);
  }
}
/* Keyboard focus only: :focus-within also fired on mouse clicks and left the edge teal after "add". */
:root[data-rtg-card="b"] :is(body:not(#product), .rtg-recommendations) .product-miniature:has(:focus-visible) { border-color: rgb(22 147 165 / 60%); }

/* Tokens live on __inner because a container cannot query itself. Default tier = 240-279px cards. */
:root[data-rtg-card="b"] :is(body:not(#product), .rtg-recommendations) .product-miniature__inner {
  --b-pad: 16px; --b-gap: 16px; --b-name: 16px; --b-name-lh: 22px; --b-lines: 3;
  --b-price: 20px; --b-btn: 44px; --b-btn-font: 14px; --b-stage-r: 10px;
  padding: var(--b-pad);
}
/* Never cut names more than today: search (body#search) and every phone layout (<=767px) allow 4 lines. */
:root[data-rtg-card="b"] body#search .product-miniature__inner { --b-lines: 4; }
@media (max-width: 767px) {
  :root[data-rtg-card="b"] :is(body:not(#product), .rtg-recommendations) .product-miniature__inner { --b-lines: 4; }
}

/* Photo on a faint stage; multiply melts the JPG's white into it. isolation keeps the blend inside. */
:root[data-rtg-card="b"] :is(body:not(#product), .rtg-recommendations) .product-miniature__top {
  margin-bottom: var(--b-gap);
  border-radius: var(--b-stage-r);
  background: #f6f7f8;
  overflow: hidden;
  isolation: isolate;
}
:root[data-rtg-card="b"] :is(body:not(#product), .rtg-recommendations) .product-miniature__image {
  mix-blend-mode: multiply;
  transition: transform .6s cubic-bezier(.16,1,.3,1);
}
:root[data-rtg-card="b"] :is(body:not(#product), .rtg-recommendations) .product-miniature__image-link:hover .product-miniature__image { transform: scale(1.04); }
:root[data-rtg-card="b"] :is(body:not(#product), .rtg-recommendations) .product-miniature__image-link:focus-visible { outline: 2px solid #1693a5; outline-offset: -2px; }

/* Badges as small pills, matching the radius language of the buttons; same scope as the card so
   miniatures this proposal does not restyle keep their square badges. */
:root[data-rtg-card="b"] :is(body:not(#product), .rtg-recommendations) .product-miniature__top > .product-flags { top: 8px; right: 8px; max-width: calc(100% - 16px); }
:root[data-rtg-card="b"] :is(body:not(#product), .rtg-recommendations) .product-miniature__top > .product-flags .badge { padding: 4px 8px; border-radius: 999px; font-size: 11px; letter-spacing: .02em; }

/* Text column: infos grow, so the price + buttons group lines up along the row bottom;
   the leftover space falls between name and price instead of above the buttons. */
:root[data-rtg-card="b"] :is(body:not(#product), .rtg-recommendations) .product-miniature__bottom { padding: 0; }
:root[data-rtg-card="b"] :is(body:not(#product), .rtg-recommendations) .product-miniature__infos { flex: 1 1 auto; align-items: stretch; }
:root[data-rtg-card="b"] :is(body:not(#product), .rtg-recommendations) .product-miniature__title {
  min-height: calc(2 * var(--b-name-lh)); /* two lines reserved, grows to --b-lines */
  margin: 0;
  color: #1d1d1f;
  font-size: var(--b-name);
  font-weight: 600;
  line-height: var(--b-name-lh);
  letter-spacing: -.005em;
  -webkit-line-clamp: var(--b-lines);
  transition: color .2s ease;
}
:root[data-rtg-card="b"] :is(body:not(#product), .rtg-recommendations) .product-miniature__title:hover { color: #0f7684; }
:root[data-rtg-card="b"] :is(body:not(#product), .rtg-recommendations) .product-miniature__title:focus-visible { outline: 2px solid #1693a5; outline-offset: 2px; border-radius: 4px; }

/* Price: brand dark, bold, tabular digits so a row of prices reads as one column of numbers. */
:root[data-rtg-card="b"] :is(body:not(#product), .rtg-recommendations) .product-miniature__prices {
  margin: auto 0 0;
  padding-top: 8px; /* minimum breathing room under a 3-line name */
  gap: 0 8px;
  font-variant-numeric: tabular-nums;
}
:root[data-rtg-card="b"] :is(body:not(#product), .rtg-recommendations) .product-miniature__price {
  max-width: 100%;
  overflow: hidden;
  color: #1C4F5E;
  font-size: var(--b-price);
  font-weight: 700;
  line-height: 1.4;
  letter-spacing: -.01em;
  text-overflow: ellipsis; /* nowrap is inherited from the base rule */
}
:root[data-rtg-card="b"] :is(body:not(#product), .rtg-recommendations) .product-miniature__regular-price { color: #6e6e73; font-size: 13px; font-weight: 500; }
/* The struck price also inherits nowrap: give it an ellipsis so it can never push the card wider. */
:root[data-rtg-card="b"] :is(body:not(#product), .rtg-recommendations) .product-miniature__discount-price { max-width: 100%; overflow: hidden; text-overflow: ellipsis; }

/* Actions: stepper pill above a full-width petrol pill. Fixed gap, no margin-top:auto hole. */
:root[data-rtg-card="b"] :is(body:not(#product), .rtg-recommendations) .product-miniature__actions { margin-top: var(--b-gap); }
:root[data-rtg-card="b"] :is(body:not(#product), .rtg-recommendations) .product-miniature__form { flex-direction: column; align-items: stretch; gap: 8px; }
:root[data-rtg-card="b"] :is(body:not(#product), .rtg-recommendations) .product-miniature__form .quantity-button { width: 100%; max-width: none; min-width: 0; margin: 0; }
:root[data-rtg-card="b"] :is(body:not(#product), .rtg-recommendations) .product-miniature__form .quantity-button__group {
  flex-wrap: nowrap;
  width: 100%;
  height: 40px;
  border: 0;
  border-radius: 999px;
  background: #f2f3f5;
  overflow: hidden;
}
:root[data-rtg-card="b"] :is(body:not(#product), .rtg-recommendations) .product-miniature__form .quantity-button__group .btn {
  display: grid;
  place-items: center;
  flex: 0 0 40px;
  width: 40px;
  min-width: 40px;
  height: 40px;
  margin: 0;
  padding: 0;
  border: 0;
  border-radius: 999px;
  background: transparent;
  color: #1d1d1f;
  box-shadow: none;
  transition: background-color .2s ease;
}
:root[data-rtg-card="b"] :is(body:not(#product), .rtg-recommendations) .product-miniature__form .quantity-button__group .btn:hover { background: #e5e6ea; }
:root[data-rtg-card="b"] :is(body:not(#product), .rtg-recommendations) .product-miniature__form .quantity-button__group .material-icons { font-size: 18px; }
:root[data-rtg-card="b"] :is(body:not(#product), .rtg-recommendations) .product-miniature__form .quantity-button__group .form-control {
  flex: 1 1 auto;
  width: 1%;
  min-width: 0;
  height: 40px;
  margin: 0;
  padding: 0;
  border: 0;
  border-radius: 0;
  background: transparent;
  color: #1d1d1f;
  font-size: 16px; /* 16px minimum: iOS Safari zooms the page when an input under 16px gets focus */
  font-weight: 600;
  font-variant-numeric: tabular-nums;
  text-align: center;
  box-shadow: none;
}
:root[data-rtg-card="b"] :is(body:not(#product), .rtg-recommendations) .product-miniature__form .quantity-button__group :is(.btn, .form-control):focus-visible {
  outline: 2px solid #1693a5;
  outline-offset: -2px;
}

/* Add to cart and "Ver detalles": same pill, so cards with and without a form keep one silhouette. */
:root[data-rtg-card="b"] :is(body:not(#product), .rtg-recommendations) :is(.product-miniature__add, .product-miniature__details) {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  width: 100%;
  min-width: 0;
  min-height: var(--b-btn);
  padding: 0 16px;
  border: 1px solid #0D343F;
  border-radius: 999px;
  background: #0D343F;
  color: #fff;
  font-size: var(--b-btn-font);
  font-weight: 600;
  line-height: 1.2;
  letter-spacing: .01em;
  box-shadow: none;
  transition: background-color .25s ease, border-color .25s ease, transform .2s cubic-bezier(.16,1,.3,1);
}
:root[data-rtg-card="b"] :is(body:not(#product), .rtg-recommendations) .product-miniature__add:is(:hover, :active) { border-color: #1C4F5E; background: #1C4F5E; color: #fff; }
:root[data-rtg-card="b"] :is(body:not(#product), .rtg-recommendations) :is(.product-miniature__add, .product-miniature__details):active { transform: scale(.98); }
:root[data-rtg-card="b"] :is(body:not(#product), .rtg-recommendations) :is(.product-miniature__add, .product-miniature__details):focus-visible { outline: 2px solid #1693a5; outline-offset: 2px; box-shadow: none; }
:root[data-rtg-card="b"] :is(body:not(#product), .rtg-recommendations) .product-miniature__details { background: transparent; color: #0D343F; }
:root[data-rtg-card="b"] :is(body:not(#product), .rtg-recommendations) .product-miniature__details:is(:hover, :active) { border-color: #0D343F; background: #0D343F; color: #fff; }
:root[data-rtg-card="b"] :is(body:not(#product), .rtg-recommendations) .product-miniature__add .material-icons { flex: none; font-size: 20px; }
:root[data-rtg-card="b"] :is(body:not(#product), .rtg-recommendations) .product-miniature__add-text {
  display: block;
  min-width: 0;
  overflow: hidden;
  font-size: inherit;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* ---- Width tiers (container width = card width minus its 2px border) ---- */
/* 280px+ (category 4 cols at 1440+): roomier frame and a stronger price. */
@container product-miniature (width >= 280px) {
  :root[data-rtg-card="b"] :is(body:not(#product), .rtg-recommendations) .product-miniature__inner { --b-pad: 20px; --b-price: 22px; --b-btn-font: 15px; --b-stage-r: 12px; }
}
/* 380px+ (2-col tablets/laptops): stepper and button share one row; no need to stack. */
@container product-miniature (width >= 380px) {
  :root[data-rtg-card="b"] :is(body:not(#product), .rtg-recommendations) .product-miniature__inner { --b-name: 17px; --b-name-lh: 24px; }
  :root[data-rtg-card="b"] :is(body:not(#product), .rtg-recommendations) .product-miniature__form { flex-direction: row; align-items: center; }
  :root[data-rtg-card="b"] :is(body:not(#product), .rtg-recommendations) .product-miniature__form .quantity-button { flex: 0 0 132px; width: 132px; }
  :root[data-rtg-card="b"] :is(body:not(#product), .rtg-recommendations) .product-miniature__form .product-miniature__add { flex: 1 1 auto; width: auto; }
}
/* Under 240px (search 6 cols ~203px, shelves): tighter frame, name may run to 4 lines. */
@container product-miniature (width < 240px) {
  :root[data-rtg-card="b"] :is(body:not(#product), .rtg-recommendations) .product-miniature__inner { --b-pad: 12px; --b-gap: 12px; --b-name: 15px; --b-name-lh: 21px; --b-lines: 4; --b-price: 18px; --b-stage-r: 8px; }
  :root[data-rtg-card="b"] :is(body:not(#product), .rtg-recommendations) .product-miniature__add { padding: 0 12px; }
}
/* Under 190px (phones, 2 cols ~165-175px): text-only button so "Añadir al carrito" fits whole. */
@container product-miniature (width < 190px) {
  :root[data-rtg-card="b"] :is(body:not(#product), .rtg-recommendations) .product-miniature__inner { --b-pad: 10px; --b-gap: 10px; --b-name: 14px; --b-name-lh: 19px; --b-price: 17px; --b-btn: 40px; --b-btn-font: 13px; }
  :root[data-rtg-card="b"] :is(body:not(#product), .rtg-recommendations) .product-miniature__add { padding: 0 8px; }
  :root[data-rtg-card="b"] :is(body:not(#product), .rtg-recommendations) .product-miniature__add .material-icons { display: none; }
  :root[data-rtg-card="b"] :is(body:not(#product), .rtg-recommendations) .product-miniature__regular-price { font-size: 12px; }
}
/* Under 150px (320px screens, ~137px container): icon-only; the button's aria-label still names the action.
   8px padding + 16px price keep "$129,900.00" (~110px) whole in the ~121px column instead of an ellipsis. */
@container product-miniature (width < 150px) {
  :root[data-rtg-card="b"] :is(body:not(#product), .rtg-recommendations) .product-miniature__inner { --b-pad: 8px; --b-gap: 8px; --b-price: 16px; }
  :root[data-rtg-card="b"] :is(body:not(#product), .rtg-recommendations) .product-miniature__add .material-icons { display: block; }
  :root[data-rtg-card="b"] :is(body:not(#product), .rtg-recommendations) .product-miniature__add-text { display: none; }
}

/* A container cannot query itself, so the card's own radius steps down by viewport on phones. */
@media (max-width: 767px) {
  :root[data-rtg-card="b"] :is(body:not(#product), .rtg-recommendations) .product-miniature { border-radius: 12px; }
}

@media (prefers-reduced-motion: reduce) {
  :root[data-rtg-card="b"] :is(body:not(#product), .rtg-recommendations) :is(.product-miniature, .product-miniature__image, .product-miniature__add, .product-miniature__details) { transition: none; }
  :root[data-rtg-card="b"] :is(body:not(#product), .rtg-recommendations) .product-miniature:hover,
  :root[data-rtg-card="b"] :is(body:not(#product), .rtg-recommendations) .product-miniature__image-link:hover .product-miniature__image { transform: none; }
}

/* ===== Propuesta c ===== */
/* Proposal C — "Compra rápida": price first, quiet name, one joined stepper + button bar.
   Every selector hangs from :root[data-rtg-card="c"], so nothing changes while the switch is off.
   The prefix adds (0,2,0) to the base rules' (1,1,1), so it also outranks the body#search and
   @media overrides in roentgen-product.css without !important. */

/* ---- Card shell: no border or shadow; whitespace separates cards, a soft tint marks hover. ---- */
:root[data-rtg-card="c"] :is(body:not(#product), .rtg-recommendations) .product-miniature {
  container: product-miniature / inline-size; /* same name the theme already uses; re-declared so the scale never depends on it */
  min-height: 0; /* the old 435px floor created the empty band above the button */
  border: 0; border-radius: 12px; background: transparent; box-shadow: none; text-align: left;
}
:root[data-rtg-card="c"] :is(body:not(#product), .rtg-recommendations) .product-miniature__inner {
  /* One set of tokens; container queries below only swap values (4/8px rhythm). */
  --c-pad: 12px;
  --c-price: 22px;
  --c-name: 15px;
  --c-name-lh: 21px;
  --c-clamp: 3;
  --c-qty-btn: 36px;
  --c-qty-in: 32px;
  --c-ease: cubic-bezier(.16, 1, .3, 1);
  padding: var(--c-pad); border-radius: 12px; background: #fff; box-shadow: none;
  transition: background-color .4s var(--c-ease);
}
/* Today search names run to 4 lines at every width, and so do all cards on phones; never clamp tighter. */
:root[data-rtg-card="c"] body#search .product-miniature__inner { --c-clamp: 4; }
@media (max-width: 767px) { :root[data-rtg-card="c"] :is(body:not(#product), .rtg-recommendations) .product-miniature__inner { --c-clamp: 4; } }
@media (hover: hover) {
  :root[data-rtg-card="c"] :is(body:not(#product), .rtg-recommendations) .product-miniature__inner:hover { background: #f5f6f7; box-shadow: none; }
}
/* Keyboard users get the same tint instead of the theme's drop shadow. */
:root[data-rtg-card="c"] :is(body:not(#product), .rtg-recommendations) .product-miniature__inner:has(:focus-visible) { background: #f5f6f7; box-shadow: none; }

/* ---- Photo: inset with a radius; multiply lets the white JPG take the hover tint. ---- */
:root[data-rtg-card="c"] :is(body:not(#product), .rtg-recommendations) .product-miniature__top { border-radius: 8px; overflow: hidden; }
:root[data-rtg-card="c"] :is(body:not(#product), .rtg-recommendations) .product-miniature__image {
  mix-blend-mode: multiply;
  transition: transform .6s var(--c-ease);
}
:root[data-rtg-card="c"] :is(body:not(#product), .rtg-recommendations) .product-miniature__image-link:hover .product-miniature__image,
:root[data-rtg-card="c"] :is(body:not(#product), .rtg-recommendations) .product-miniature__inner:hover .product-miniature__image { transform: scale(1.03); }
:root[data-rtg-card="c"] :is(body:not(#product), .rtg-recommendations) .product-miniature__image-link:focus-visible { outline: 2px solid #1693a5; outline-offset: -2px; }
:root[data-rtg-card="c"] :is(body:not(#product), .rtg-recommendations) .product-miniature__top > .product-flags .badge { border-radius: 6px; }

/* ---- Text block: left-aligned, price on top. ---- */
:root[data-rtg-card="c"] :is(body:not(#product), .rtg-recommendations) .product-miniature__bottom { gap: 0; padding: 12px 0 0; }
:root[data-rtg-card="c"] :is(body:not(#product), .rtg-recommendations) .product-miniature__infos {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: 4px;
  min-width: 0;
  margin-bottom: 12px;
}
:root[data-rtg-card="c"] :is(body:not(#product), .rtg-recommendations) .product-miniature__prices {
  order: -1; /* the hero sits right under the photo */
  display: flex;
  align-items: baseline;
  justify-content: flex-start;
  flex-wrap: wrap;
  gap: 0 8px;
  min-width: 0;
  margin: 0;
  white-space: normal; /* base sets nowrap here; only the price itself stays nowrap (with ellipsis) */
}
:root[data-rtg-card="c"] :is(body:not(#product), .rtg-recommendations) .product-miniature__price {
  max-width: 100%;
  overflow: hidden;
  color: #1d1d1f;
  font-size: var(--c-price);
  font-weight: 800;
  line-height: 1.2;
  letter-spacing: -.01em;
  font-variant-numeric: tabular-nums;
  text-overflow: ellipsis; /* nowrap only with ellipsis (house rule) */
  white-space: nowrap;
}
/* Struck regular price follows the hero instead of preceding it. */
:root[data-rtg-card="c"] :is(body:not(#product), .rtg-recommendations) .product-miniature__discount-price { order: 1; min-width: 0; }
:root[data-rtg-card="c"] :is(body:not(#product), .rtg-recommendations) .product-miniature__discount-price:empty { display: none; }
:root[data-rtg-card="c"] :is(body:not(#product), .rtg-recommendations) .product-miniature__regular-price {
  color: #6e6e73; /* #bcbcbc failed contrast */
  font-size: 13px;
  font-weight: 500;
  font-variant-numeric: tabular-nums;
}
:root[data-rtg-card="c"] :is(body:not(#product), .rtg-recommendations) .product-miniature__title {
  display: -webkit-box;
  min-height: calc(2 * var(--c-name-lh)); /* two lines reserved so prices and bars line up across a row */
  margin: 0;
  overflow: hidden;
  overflow-wrap: break-word;
  color: #424245;
  font-size: var(--c-name);
  font-weight: 500;
  line-height: var(--c-name-lh);
  text-align: left;
  text-decoration: none;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: var(--c-clamp);
  transition: color .3s var(--c-ease);
}
:root[data-rtg-card="c"] :is(body:not(#product), .rtg-recommendations) .product-miniature__title:hover { color: #0f7684; }
:root[data-rtg-card="c"] :is(body:not(#product), .rtg-recommendations) .product-miniature__title:focus-visible { border-radius: 4px; outline: 2px solid #1693a5; outline-offset: 2px; }

/* ---- Action bar: stepper and button read as one control, bottom-aligned across the row. ---- */
:root[data-rtg-card="c"] :is(body:not(#product), .rtg-recommendations) .product-miniature__actions { margin-top: auto; }
:root[data-rtg-card="c"] :is(body:not(#product), .rtg-recommendations) .product-miniature__form {
  display: flex;
  flex-direction: row; /* the theme stacks it below 13.5rem; this bar fits down to a 144px card */
  align-items: stretch;
  justify-content: flex-start;
  gap: 0;
  min-width: 0;
}
:root[data-rtg-card="c"] :is(body:not(#product), .rtg-recommendations) .product-miniature__form .quantity-button { flex: 0 0 auto; min-width: 0; }
:root[data-rtg-card="c"] :is(body:not(#product), .rtg-recommendations) .product-miniature__form .quantity-button__group {
  flex-wrap: nowrap;
  width: auto;
  height: 40px;
  border-radius: 10px 0 0 10px;
  background: #fff;
  box-shadow: inset 0 0 0 1px #e5e5ea; /* hairline ring; an inset shadow doesn't shift the input-group seams */
}
:root[data-rtg-card="c"] :is(body:not(#product), .rtg-recommendations) .product-miniature__form .quantity-button button {
  display: inline-grid;
  place-items: center;
  flex: 0 0 var(--c-qty-btn);
  width: var(--c-qty-btn);
  height: 40px;
  margin: 0; padding: 0; border: 0; border-radius: 0;
  background: transparent; color: #1d1d1f; opacity: 1;
  transition: color .25s var(--c-ease);
}
:root[data-rtg-card="c"] :is(body:not(#product), .rtg-recommendations) .product-miniature__form .quantity-button button:hover { color: #0f7684; opacity: 1; }
:root[data-rtg-card="c"] :is(body:not(#product), .rtg-recommendations) .product-miniature__form .quantity-button button:focus-visible { box-shadow: none; outline: 2px solid #1693a5; outline-offset: -3px; }
:root[data-rtg-card="c"] :is(body:not(#product), .rtg-recommendations) .product-miniature__form .quantity-button button .material-icons { font-size: 18px; }
:root[data-rtg-card="c"] :is(body:not(#product), .rtg-recommendations) .product-miniature__form .quantity-button .form-control {
  flex: 0 0 var(--c-qty-in);
  width: var(--c-qty-in);
  min-width: 0;
  max-width: none;
  height: 40px;
  margin: 0; padding: 0; border: 0; border-radius: 0;
  background: transparent; color: #1d1d1f; font-size: 16px; /* <16px makes iOS zoom on focus */
  font-weight: 600;
  font-variant-numeric: tabular-nums;
  text-align: center;
  box-shadow: none;
}
:root[data-rtg-card="c"] :is(body:not(#product), .rtg-recommendations) .product-miniature__form .quantity-button .form-control:focus-visible { outline: 2px solid #1693a5; outline-offset: -3px; }
:root[data-rtg-card="c"] :is(body:not(#product), .rtg-recommendations) .product-miniature__add {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  flex: 1 1 auto;
  width: auto;
  min-width: 40px;
  height: 40px;
  min-height: 40px;
  padding: 0 12px;
  overflow: hidden;
  border: 0;
  border-radius: 0 10px 10px 0;
  /* #0f7684 -> #0D343F keeps white text above 4.5:1; #1693a5 would not. */
  background: linear-gradient(110deg, #0f7684 0%, #0d343f 100%) 0 0 / 200% 100%;
  color: #fff;
  transition: background-position .5s var(--c-ease);
}
:root[data-rtg-card="c"] :is(body:not(#product), .rtg-recommendations) .product-miniature__add:hover { background-position: 100% 0; color: #fff; }
:root[data-rtg-card="c"] :is(body:not(#product), .rtg-recommendations) .product-miniature__add:active { background-position: 100% 0; color: #fff; }
:root[data-rtg-card="c"] :is(body:not(#product), .rtg-recommendations) .product-miniature__add:focus-visible { box-shadow: none; outline: 2px solid #1693a5; outline-offset: 2px; }
:root[data-rtg-card="c"] :is(body:not(#product), .rtg-recommendations) .product-miniature__add .material-icons { font-size: 20px; }
/* "Añadir al carrito" does not fit beside a stepper under ~300px; the short verb is drawn instead.
   The button's aria-label/title still announce the full action, so this is visual only. */
:root[data-rtg-card="c"] :is(body:not(#product), .rtg-recommendations) .product-miniature__add-text {
  display: inline-block;
  min-width: 0;
  overflow: hidden;
  font-size: 0;
  line-height: 1;
  white-space: nowrap;
  text-overflow: ellipsis; /* the button clips; widths above are sized so the word never needs it */
}
:root[data-rtg-card="c"] :is(body:not(#product), .rtg-recommendations) .product-miniature__add-text::before {
  content: "Añadir";
  font-size: 14px;
  font-weight: 700;
  letter-spacing: .01em;
}
/* Products without add-to-cart: the same 40px bar, outlined in petrol. */
:root[data-rtg-card="c"] :is(body:not(#product), .rtg-recommendations) .product-miniature__details {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  min-height: 40px;
  padding: 0 12px;
  border: 1px solid #1c4f5e;
  border-radius: 10px;
  background: transparent;
  color: #1c4f5e;
  font-size: 14px;
  font-weight: 700;
  transition: background-color .3s var(--c-ease), color .3s var(--c-ease);
}
:root[data-rtg-card="c"] :is(body:not(#product), .rtg-recommendations) .product-miniature__details:hover { background: #1c4f5e; color: #fff; }
:root[data-rtg-card="c"] :is(body:not(#product), .rtg-recommendations) .product-miniature__details:focus-visible { box-shadow: none; outline: 2px solid #1693a5; outline-offset: 2px; }

/* ---- Scale by card width, not viewport: one card for 306, 203 and 165px. ---- */
/* <240px (search 6-up and 4-up, product shelves): tighter frame, 4-line names, text-only button.
   Above 240px the icon + "Añadir" (≈102px) always fits beside the 104px stepper. */
@container product-miniature (width < 15rem) {
  :root[data-rtg-card="c"] :is(body:not(#product), .rtg-recommendations) .product-miniature__inner { --c-pad: 8px; --c-price: 20px; --c-name: 14px; --c-name-lh: 20px; --c-clamp: 4; --c-qty-in: 30px; }
  :root[data-rtg-card="c"] :is(body:not(#product), .rtg-recommendations) .product-miniature__bottom { padding-top: 8px; }
  :root[data-rtg-card="c"] :is(body:not(#product), .rtg-recommendations) .product-miniature__add { padding: 0 8px; }
  :root[data-rtg-card="c"] :is(body:not(#product), .rtg-recommendations) .product-miniature__add .material-icons { display: none; }
  :root[data-rtg-card="c"] :is(body:not(#product), .rtg-recommendations) .product-miniature__add-text::before { font-size: 13px; }
}
/* <192px (phones, 2-up): the cart icon replaces the word so the stepper keeps 36px targets. */
@container product-miniature (width < 12rem) {
  :root[data-rtg-card="c"] :is(body:not(#product), .rtg-recommendations) .product-miniature__inner { --c-price: 19px; --c-qty-in: 28px; }
  :root[data-rtg-card="c"] :is(body:not(#product), .rtg-recommendations) .product-miniature__add { padding: 0; }
  :root[data-rtg-card="c"] :is(body:not(#product), .rtg-recommendations) .product-miniature__add .material-icons { display: inline-block; }
  :root[data-rtg-card="c"] :is(body:not(#product), .rtg-recommendations) .product-miniature__add-text { display: none; }
}
/* <168px (360px phones): a 4px frame keeps the bar on one line down to a 148px card (8+100+40). */
@container product-miniature (width < 10.5rem) {
  :root[data-rtg-card="c"] :is(body:not(#product), .rtg-recommendations) .product-miniature__inner { --c-pad: 4px; }
}
/* <148px (320px screens): the button would drop under 40px wide (and overflow), so the bar stacks. */
@container product-miniature (width < 9.25rem) {
  :root[data-rtg-card="c"] :is(body:not(#product), .rtg-recommendations) .product-miniature__inner { --c-name: 13px; --c-name-lh: 18px; --c-price: 17px; }
  :root[data-rtg-card="c"] :is(body:not(#product), .rtg-recommendations) .product-miniature__form { flex-direction: column; gap: 4px; }
  :root[data-rtg-card="c"] :is(body:not(#product), .rtg-recommendations) .product-miniature__form .quantity-button__group { justify-content: space-between; border-radius: 10px; }
  :root[data-rtg-card="c"] :is(body:not(#product), .rtg-recommendations) .product-miniature__form .quantity-button .form-control { flex: 1 1 auto; }
  :root[data-rtg-card="c"] :is(body:not(#product), .rtg-recommendations) .product-miniature__add { width: 100%; border-radius: 10px; }
}

@media (prefers-reduced-motion: reduce) {
  :root[data-rtg-card="c"] :is(body:not(#product), .rtg-recommendations) :is(.product-miniature__inner, .product-miniature__image, .product-miniature__title, .product-miniature__add, .product-miniature__details) { transition: none; }
  :root[data-rtg-card="c"] :is(body:not(#product), .rtg-recommendations) .product-miniature__inner:hover .product-miniature__image { transform: none; }
}

/* ===== Propuesta d ===== */
/* D · Ficha actual afinada (25-oct, Carlos): the same card (box, centered, stepper + square button), only the
   typography and spacing reworked. One rhythm of 16px; the name is lighter and wider (500 instead of 600, no side
   margins), the price carries the weight (700, petrol, tabular numbers), and the controls share one height and radius.
   Colors: official «Eastern Blue» palette tokens only (--rtg-50…950), Carlos 25-oct. */
:root[data-rtg-card="d"] :is(body:not(#product), .rtg-recommendations) .product-miniature { border-radius: 12px; }
:root[data-rtg-card="d"] :is(body:not(#product), .rtg-recommendations) .product-miniature__bottom { padding: 16px 16px 16px; }

/* Name: 16px/1.35, 500, ink; two lines reserved, up to three (four in search, where cards are narrower). */
:root[data-rtg-card="d"] :is(body:not(#product), .rtg-recommendations) .product-miniature__title {
  min-height: calc(2 * 1.35em);
  margin: 0;
  color: var(--rtg-950);
  font-size: 16px;
  font-weight: 500;
  line-height: 1.35;
  letter-spacing: -.005em;
  -webkit-line-clamp: 3;
}
:root[data-rtg-card="d"] :is(body:not(#product), .rtg-recommendations) .product-miniature__title:hover { color: var(--rtg-700); }

/* Price: the strongest line of the card. */
:root[data-rtg-card="d"] :is(body:not(#product), .rtg-recommendations) .product-miniature__prices { gap: 2px 8px; margin: 2px 0 0; }
:root[data-rtg-card="d"] :is(body:not(#product), .rtg-recommendations) .product-miniature__price { color: var(--rtg-950); font-size: 20px; font-weight: 700; letter-spacing: -.01em; font-variant-numeric: tabular-nums; }
:root[data-rtg-card="d"] :is(body:not(#product), .rtg-recommendations) .product-miniature__regular-price { color: var(--rtg-800); font-size: 13px; font-weight: 500; }

/* Controls: 16px below the price (more only when a neighbour's longer name stretches the row), one 40px height. */
:root[data-rtg-card="d"] :is(body:not(#product), .rtg-recommendations) .product-miniature__actions { padding-top: 16px; }
:root[data-rtg-card="d"] :is(body:not(#product), .rtg-recommendations) .product-miniature__form { gap: 8px; }
:root[data-rtg-card="d"] .product-miniature .quantity-button__group > * { height: 40px; border-color: var(--rtg-200); }
:root[data-rtg-card="d"] .product-miniature .quantity-button__group > .btn { width: 40px; color: var(--rtg-950); }
:root[data-rtg-card="d"] .product-miniature .quantity-button__group > .btn:first-child { border-radius: 10px 0 0 10px; }
:root[data-rtg-card="d"] .product-miniature .quantity-button__group > .btn:last-child { border-radius: 0 10px 10px 0; }
:root[data-rtg-card="d"] .product-miniature .quantity-button__group > .form-control { padding-inline: 4px; color: var(--rtg-950); font-size: 15px; font-weight: 600; text-align: center; font-variant-numeric: tabular-nums; }
:root[data-rtg-card="d"] .product-miniature .product-miniature__add { width: 44px; height: 40px; border-color: var(--rtg-950); border-radius: 10px; background: var(--rtg-950); }
:root[data-rtg-card="d"] .product-miniature .product-miniature__add:hover { border-color: var(--rtg-800); background: var(--rtg-800); }
:root[data-rtg-card="d"] .product-miniature :is(.quantity-button__group > *, .product-miniature__add):focus-visible { outline: 2px solid var(--rtg-600); outline-offset: 2px; z-index: 3; }

/* Out-of-stock / no-cart products show a "Ver detalles" link: same size and shape as the cart button row. */
:root[data-rtg-card="d"] .product-miniature .product-miniature__details { display: inline-flex; align-items: center; justify-content: center; min-height: 40px; padding: 0 16px; border-color: var(--rtg-950); border-radius: 10px; color: var(--rtg-950); font-size: 14px; font-weight: 600; }
:root[data-rtg-card="d"] .product-miniature .product-miniature__details:hover { background: var(--rtg-950); color: #fff; }

/* Search (six narrow cards) and recommendation shelves: one step down so names still fit. */
:root[data-rtg-card="d"] body#search .product-miniature__title,
:root[data-rtg-card="d"] :is(#product, body) .rtg-recommendations .product-miniature__title { font-size: 15px; -webkit-line-clamp: 4; }
:root[data-rtg-card="d"] body#search .product-miniature__price,
:root[data-rtg-card="d"] :is(#product, body) .rtg-recommendations .product-miniature__price { font-size: 18px; }
:root[data-rtg-card="d"] body#search .product-miniature__bottom,
:root[data-rtg-card="d"] :is(#product, body) .rtg-recommendations .product-miniature__bottom { padding: 14px 12px 14px; }

/* Phones: two columns of ~170px. */
@media (max-width: 767px) {
  :root[data-rtg-card="d"] :is(body:not(#product), .rtg-recommendations) .product-miniature__bottom,
  :root[data-rtg-card="d"] body#search .product-miniature__bottom { padding: 12px 10px 12px; }
  :root[data-rtg-card="d"] :is(body:not(#product), .rtg-recommendations) .product-miniature__title,
  :root[data-rtg-card="d"] body#search .product-miniature__title { font-size: 14px; line-height: 1.35; -webkit-line-clamp: 4; }
  :root[data-rtg-card="d"] :is(body:not(#product), .rtg-recommendations) .product-miniature__price,
  :root[data-rtg-card="d"] body#search .product-miniature__price { font-size: 17px; }
  :root[data-rtg-card="d"] :is(body:not(#product), .rtg-recommendations) .product-miniature__actions { padding-top: 12px; }
  :root[data-rtg-card="d"] .product-miniature .quantity-button__group > .btn { width: 34px; }
  :root[data-rtg-card="d"] .product-miniature .product-miniature__add { width: 40px; }
}

/* ===== Propuesta e ===== */
/* E · Inspirada en Apple Store (25-oct, Carlos): white card with wide radius and a very soft shadow instead of a
   border (now the app's .r-card box, on the white page: Carlos 25-oct), the photo with generous air, left-aligned text, name in semibold, price quiet in regular weight, and a
   discreet purchase row at the bottom left. Same markup; only spacing, type and the card surface change.
   Colors: official «Eastern Blue» palette tokens only (--rtg-50…950), Carlos 25-oct. */
:root[data-rtg-card="e"] :is(body:not(#product), .rtg-recommendations) .product-miniature {
  /* The box of the Roentgen app (roentgenapps18 .r-card, the tickets master): white, 1px #e6edf0, 14px, faint shadow
     tinted with palette 900. */
  border: 1px solid #e6edf0;
  border-radius: 14px;
  box-shadow: 0 1px 3px rgba(28, 80, 93, .06);
  min-height: 0; /* sized by its content: the base 435px floor left a gap above the controls (Carlos 25-oct) */
  transition: box-shadow .35s cubic-bezier(.16, 1, .3, 1), border-color .35s ease;
}
:root[data-rtg-card="e"] :is(body:not(#product), .rtg-recommendations) .product-miniature:hover { border-color: var(--rtg-200); box-shadow: 0 6px 18px rgba(28, 80, 93, .10); }
:root[data-rtg-card="e"] :is(body:not(#product), .rtg-recommendations) .product-miniature__inner { border-radius: 13px; }
/* The photo breathes: an inner margin around it, no zoom on hover. */
:root[data-rtg-card="e"] :is(body:not(#product), .rtg-recommendations) .product-miniature__image-container { padding: 2% 3% 1%; } /* the photos already carry their own white margin; a bigger product (Carlos 25-oct) */
:root[data-rtg-card="e"] :is(body:not(#product), .rtg-recommendations) .product-miniature__image-link:hover .product-miniature__image { transform: none; }

/* Text column: left aligned, 20px gutters, one 8px rhythm. */
:root[data-rtg-card="e"] :is(body:not(#product), .rtg-recommendations) .product-miniature__bottom { padding: 8px 20px 20px; }
:root[data-rtg-card="e"] :is(body:not(#product), .rtg-recommendations) .product-miniature__infos { align-items: flex-start; }
:root[data-rtg-card="e"] :is(body:not(#product), .rtg-recommendations) .product-miniature__title {
  min-height: calc(2 * 1.3em);
  margin: 0;
  color: var(--rtg-900); /* Carlos 25-oct: #1C505D */
  font-size: 17px;
  font-weight: 600;
  line-height: 1.3;
  letter-spacing: -.012em;
  text-align: left;
  -webkit-line-clamp: 3;
}
:root[data-rtg-card="e"] :is(body:not(#product), .rtg-recommendations) .product-miniature__title:hover { color: var(--rtg-700); }
:root[data-rtg-card="e"] :is(body:not(#product), .rtg-recommendations) .product-miniature__prices { justify-content: flex-start; gap: 2px 8px; margin: 2px 0 0; } /* name → price 10px with the 8px row gap */
:root[data-rtg-card="e"] :is(body:not(#product), .rtg-recommendations) .product-miniature__price { color: var(--rtg-950); font-size: 17px; font-weight: 400; letter-spacing: -.005em; font-variant-numeric: tabular-nums; }
/* The discount slot sits before the price and is empty unless there is an offer; hidden, the price starts
   exactly under the name instead of 8px in (the row gap). */
:root[data-rtg-card="e"] :is(body:not(#product), .rtg-recommendations) .product-miniature__discount-price:not(:has(*)) { display: none; }
/* Price colours from the 25-oct research (as on the product page): price 950, crossed-out list price neutral grey,
   the promotion flag in promotion red with the small official radius. */
:root[data-rtg-card="e"] :is(body:not(#product), .rtg-recommendations) .product-miniature__regular-price { color: var(--rtg-price-was); font-size: 14px; }
:root[data-rtg-card="e"] .product-miniature .product-flags .badge { border-radius: calc(var(--rtg-radius) - 6px); }

/* Purchase row: quiet, left aligned, rounded like the card. */
:root[data-rtg-card="e"] :is(body:not(#product), .rtg-recommendations) .product-miniature__actions { padding-top: 8px; } /* price → controls 16px with the column's 8px gap */
:root[data-rtg-card="e"] :is(body:not(#product), .rtg-recommendations) .product-miniature__form { flex-direction: row; flex-wrap: nowrap; justify-content: flex-start; gap: 8px; } /* stepper and cart on one line; the theme stacks them in narrow cards (Carlos 25-oct) */
:root[data-rtg-card="e"] :is(body:not(#product), .rtg-recommendations) .product-miniature__form .quantity-button { flex: 0 1 auto; width: auto; min-width: 0; margin: 0; }
:root[data-rtg-card="e"] .product-miniature .quantity-button__group > * { height: 40px; border-color: var(--rtg-200); }
:root[data-rtg-card="e"] .product-miniature .quantity-button__group > .btn { width: 36px; color: var(--rtg-900); }
:root[data-rtg-card="e"] .product-miniature :is(.quantity-button__group, .product-miniature__add) .material-icons { color: inherit; }
:root[data-rtg-card="e"] .product-miniature .quantity-button__group > .btn:first-child { border-radius: var(--rtg-radius) 0 0 var(--rtg-radius); } /* official radius (Carlos 25-oct) */
:root[data-rtg-card="e"] .product-miniature .quantity-button__group > .btn:last-child { border-radius: 0 var(--rtg-radius) var(--rtg-radius) 0; }
:root[data-rtg-card="e"] .product-miniature .quantity-button__group > .form-control { padding-inline: 2px; color: var(--rtg-900); font-size: 15px; text-align: center; font-variant-numeric: tabular-nums; }
:root[data-rtg-card="e"] .product-miniature .product-miniature__add { width: 44px; height: 40px; border-color: var(--rtg-cart-action); border-radius: var(--rtg-radius); background: var(--rtg-cart-action); color: var(--rtg-cart-action-ink); } /* the add-to-cart colour (Carlos 26-oct) */
:root[data-rtg-card="e"] .product-miniature .product-miniature__add-text { display: none; } /* icon-only button; its aria-label names the action */
/* Generic cart icon (Carlos 25-oct: the official cart already repeats in the header). */
:root[data-rtg-card="e"] .product-miniature .product-miniature__add > .material-icons { font-size: 21px; }
:root[data-rtg-card="e"] .product-miniature .product-miniature__add:hover { border-color: var(--rtg-cart-action-hover); background: var(--rtg-cart-action-hover); color: var(--rtg-cart-action-ink); }
:root[data-rtg-card="e"] .product-miniature :is(.quantity-button__group > *, .product-miniature__add):focus-visible { outline: 2px solid var(--rtg-600); outline-offset: 2px; z-index: 3; }

/* Out-of-stock / no-cart products show a "Ver detalles" link: same size and shape as the cart button row. */
:root[data-rtg-card="e"] .product-miniature .product-miniature__details { display: inline-flex; align-items: center; justify-content: center; min-height: 40px; padding: 0 16px; border-color: var(--rtg-950); border-radius: var(--rtg-radius); color: var(--rtg-950); font-size: 14px; font-weight: 600; }
:root[data-rtg-card="e"] .product-miniature .product-miniature__details:hover { background: var(--rtg-950); color: #fff; }

/* Search (six narrow cards) and recommendation shelves: one step down. */
:root[data-rtg-card="e"] body#search .product-miniature__title,
:root[data-rtg-card="e"] :is(#product, body) .rtg-recommendations .product-miniature__title { font-size: 15px; -webkit-line-clamp: 4; }
:root[data-rtg-card="e"] body#search .product-miniature__price,
:root[data-rtg-card="e"] :is(#product, body) .rtg-recommendations .product-miniature__price { font-size: 16px; }
:root[data-rtg-card="e"] body#search .product-miniature__bottom,
:root[data-rtg-card="e"] :is(#product, body) .rtg-recommendations .product-miniature__bottom { padding: 6px 14px 16px; }
/* Narrow cards (six in a row): a compact stepper so it fits beside the cart, 32 + 40 + 32 + 8 + 44 = 154px of 176. */
:root[data-rtg-card="e"] body#search .product-miniature .quantity-button__group > .btn,
:root[data-rtg-card="e"] :is(#product, body) .rtg-recommendations .product-miniature .quantity-button__group > .btn { width: 32px; }
@media (min-width: 768px) { /* phones use the flexible field below */
  :root[data-rtg-card="e"] body#search .product-miniature .quantity-button__group > .form-control,
  :root[data-rtg-card="e"] :is(#product, body) .rtg-recommendations .product-miniature .quantity-button__group > .form-control { flex: 0 0 40px; width: 40px; }
}

/* Phones: two columns of ~170px. */
@media (max-width: 767px) {
  :root[data-rtg-card="e"] :is(body:not(#product), .rtg-recommendations) .product-miniature { border-radius: 12px; }
  :root[data-rtg-card="e"] :is(body:not(#product), .rtg-recommendations) .product-miniature__inner { border-radius: 11px; }
  :root[data-rtg-card="e"] :is(body:not(#product), .rtg-recommendations) .product-miniature__bottom,
  :root[data-rtg-card="e"] body#search .product-miniature__bottom { padding: 6px 12px 14px; }
  :root[data-rtg-card="e"] :is(body:not(#product), .rtg-recommendations) .product-miniature__title,
  :root[data-rtg-card="e"] body#search .product-miniature__title { font-size: 14px; -webkit-line-clamp: 4; }
  :root[data-rtg-card="e"] :is(body:not(#product), .rtg-recommendations) .product-miniature__price,
  :root[data-rtg-card="e"] body#search .product-miniature__price { font-size: 15px; }
  :root[data-rtg-card="e"] :is(body:not(#product), .rtg-recommendations) .product-miniature__prices { margin-top: 2px; }
  :root[data-rtg-card="e"] :is(body:not(#product), .rtg-recommendations) .product-miniature__actions { padding-top: 8px; }
  :root[data-rtg-card="e"] .product-miniature .quantity-button__group > .btn { width: 32px; }
  /* Phones: the number field takes whatever the card leaves (149px at 390, less at 360), so the stepper never breaks. */
  :root[data-rtg-card="e"] :is(body:not(#product), .rtg-recommendations) .product-miniature__form { gap: 6px; }
  :root[data-rtg-card="e"] :is(body:not(#product), .rtg-recommendations) .product-miniature__form .quantity-button { flex: 1 1 auto; }
  :root[data-rtg-card="e"] .product-miniature .quantity-button__group { flex-wrap: nowrap; width: 100%; }
  :root[data-rtg-card="e"] :is(body:not(#product), .rtg-recommendations) .product-miniature .quantity-button__group > .form-control,
  :root[data-rtg-card="e"] body#search .product-miniature .quantity-button__group > .form-control,
  :root[data-rtg-card="e"] :is(#product, body) .rtg-recommendations .product-miniature .quantity-button__group > .form-control { flex: 1 1 36px; width: auto; min-width: 0; }
  :root[data-rtg-card="e"] .product-miniature .product-miniature__add { width: 40px; }
}