/* =============================================================================
   Vault Solutions — Detalle de producto (producto.html)
   Solo usa tokens var(--...) existentes. Sin colores hardcodeados.
   ============================================================================= */

/* ---- Layout principal: visual + compra ---- */
.pd-layout {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.05fr);
  gap: clamp(1.5rem, 3vw, 3rem);
  align-items: start;
  margin-top: clamp(1.5rem, 2vw, 2.25rem);
}

@media (max-width: 860px) {
  /* minmax(0, …) y no "1fr" a secas: con "1fr" la columna no puede achicarse
     por debajo del ancho mínimo de su contenido y en el celular la ficha se
     salía de la pantalla (aparecía barra horizontal). */
  .pd-layout {
    grid-template-columns: minmax(0, 1fr);
  }
}

.pd-visual,
.pd-buy {
  min-width: 0;
}

/* ---- Columna visual ---- */
.pd-visual {
  position: sticky;
  top: calc(var(--header-h, 70px) + 1.25rem);
  display: flex;
  flex-direction: column;
  gap: 0.9rem;
}

@media (max-width: 860px) {
  .pd-visual {
    position: static;
  }
}

.pd-stage {
  position: relative;
  display: grid;
  place-items: center;
  min-height: clamp(280px, 38vw, 420px);
  padding: 2rem;
  background:
    radial-gradient(120% 120% at 50% 0%, var(--surface) 0%, var(--bg-subtle) 100%);
  border: 1px solid var(--border);
  border-radius: var(--r-xl);
  overflow: hidden;
}

.pd-stage::before {
  content: "";
  position: absolute;
  inset: 0;
  background-image:
    linear-gradient(var(--border) 1px, transparent 1px),
    linear-gradient(90deg, var(--border) 1px, transparent 1px);
  background-size: 28px 28px;
  opacity: 0.4;
  -webkit-mask-image: radial-gradient(70% 70% at 50% 45%, #000 0%, transparent 75%);
  mask-image: radial-gradient(70% 70% at 50% 45%, #000 0%, transparent 75%);
  pointer-events: none;
}

.pd-stage .brand-glyph {
  position: relative;
  box-shadow: var(--shadow-md);
}

.pd-stage__pins {
  position: absolute;
  top: 1rem;
  left: 1rem;
  display: flex;
  gap: 0.5rem;
  flex-wrap: wrap;
  z-index: 2;
}

.pd-stage__secure {
  position: absolute;
  bottom: 1rem;
  right: 1rem;
  z-index: 2;
}

/* ---- Columna de compra ---- */
.pd-buy {
  display: flex;
  flex-direction: column;
}

.pd-cat {
  font-size: 0.82rem;
  font-weight: 600;
  color: var(--brand-ink);
  letter-spacing: 0.01em;
}

.pd-buy h1 {
  font-size: clamp(1.7rem, 1.3rem + 2vw, 2.4rem);
  line-height: 1.12;
  letter-spacing: -0.02em;
  margin: 0.35rem 0 0.6rem;
}

.pd-rating {
  margin-bottom: 1rem;
}

.pd-summary {
  color: var(--ink-body);
  line-height: 1.6;
  max-width: 52ch;
  margin-bottom: 1.25rem;
}

.pd-price-row {
  display: flex;
  align-items: flex-end;
  gap: 1rem;
  flex-wrap: wrap;
  padding: 1.1rem 0;
  border-block: 1px solid var(--border);
}

.pd-save {
  display: inline-flex;
  align-items: center;
  margin-bottom: 0.2rem;
}

.pd-specs {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  margin: 1.1rem 0;
}

/* ============ LAS PÍLDORAS DE LA FICHA, EN ORO PULIDO — 14-ago-2026 ========
   Pedido del dueño: «el tema de entregas, colócalo de colores, dorado o algo
   así, para que no se vea tan simple; glossy, como el botón de iniciar sesión».

   Lo que había: cinco píldoras grises de la casa (`.badge`) y una azul en medio
   (`.badge--info`, el tipo de entrega). El azul era el ÚNICO color de toda la
   columna de compra, y encima no es un color de la marca: la fila se leía como
   un formulario, no como la ficha de un producto premium.

   Ahora la fila entera habla en oro y comparte el acabado de los botones:
   filo de luz arriba, corte seco a media altura y sombra abajo. El corte al 49
   / 51 % es lo mismo que ya está anotado en portada.css para el platino —un
   degradado liso se lee como papel de color; lo que convierte una superficie en
   pulida es el corte—.

   LA JERARQUÍA NO SE PIERDE, CAMBIA DE IDIOMA
   Antes la píldora que importaba (cómo se entrega) destacaba por ser de OTRO
   color. Ahora destaca por ser la única MACIZA: oro relleno con tinta negra,
   contra cuatro cápsulas de oro traslúcido. Un solo color, dos pesos.

   Va por `.pd-specs .badge` y no tocando `.badge`: esa clase la usan el panel,
   el carrito y los pedidos, donde el gris y el azul sí significan algo.
   ========================================================================== */
.pd-specs .badge {
  /* El fondo de color va en background-color y el brillo en background-image:
     separados, cada uno se puede cambiar sin borrar al otro (el atajo
     `background` sí borraría el brillo — el mismo tropiezo que está anotado en
     el hover de .btn--secondary). */
  background-color: var(--brand-50);
  background-image: linear-gradient(180deg,
      rgb(255 255 255 / 0.22) 0%,
      rgb(255 255 255 / 0.07) 49%,
      rgb(0 0 0 / 0.07) 51%,
      rgb(0 0 0 / 0.16) 100%);
  color: var(--brand-ink);
  border: 1px solid color-mix(in oklch, var(--brand) 34%, transparent);
  box-shadow:
    inset 0 1px 0 rgb(255 255 255 / 0.3),
    0 1px 2px rgb(0 0 0 / 0.22);
  padding: 0.38rem 0.7rem;
}

/* El icono, en el oro vivo: dentro de la cápsula traslúcida la tinta ya es oro
   apagado, y sin esto el icono se confundía con el texto. */
.pd-specs .badge svg {
  color: var(--brand);
}

/* LA MACIZA: el tipo de entrega. `--success` e `--info` son las dos variantes
   que puede traer según sea automática o asistida (product.js); las dos caen
   aquí, porque lo que importa no es cuál de las dos sea, sino que ESA es la
   píldora que hay que leer primero. */
.pd-specs .badge--success,
.pd-specs .badge--info {
  background-color: var(--brand-strong);
  background-image: linear-gradient(180deg,
      rgb(255 255 255 / 0.34) 0%,
      rgb(255 255 255 / 0.12) 49%,
      rgb(0 0 0 / 0.06) 51%,
      rgb(0 0 0 / 0.14) 100%);
  color: var(--on-brand);
  border-color: color-mix(in oklch, var(--brand) 70%, transparent);
  box-shadow:
    inset 0 1px 0 rgb(255 255 255 / 0.55),
    0 2px 6px -1px color-mix(in oklch, var(--brand) 40%, transparent);
}

/* Sobre el oro macizo el icono va en la misma tinta negra: en oro vivo sería
   oro sobre oro. */
.pd-specs .badge--success svg,
.pd-specs .badge--info svg {
  color: currentColor;
}

.pd-highlights {
  margin: 0.5rem 0 1.5rem;
}

/* ---- Compra: cantidad + acciones ---- */
/* ---- Cómo lo recibes (tipo de entrega, ANTES de comprar) ---- */
.pd-fulfill {
  display: flex;
  gap: 0.85rem;
  align-items: flex-start;
  padding: 1rem 1.1rem;
  background: color-mix(in srgb, var(--brand) 6%, var(--surface));
  border: 1px solid color-mix(in srgb, var(--brand) 22%, var(--border));
  border-radius: var(--r-lg);
  margin-bottom: 1rem;
}

.pd-fulfill__icon {
  flex: none;
  display: grid;
  place-items: center;
  width: 2.4rem;
  height: 2.4rem;
  border-radius: 0.75rem;
  background: color-mix(in srgb, var(--brand) 14%, var(--surface));
  color: var(--brand-strong);
}

.pd-fulfill__icon svg {
  width: 1.15rem;
  height: 1.15rem;
}

.pd-fulfill__txt b {
  display: block;
  color: var(--ink);
  font-size: 0.95rem;
  margin-bottom: 0.2rem;
}

.pd-fulfill__txt p {
  margin: 0;
  font-size: 0.88rem;
  line-height: 1.55;
  color: var(--muted);
}

.pd-fulfill__note {
  margin-top: 0.45rem !important;
  color: var(--ink) !important;
  font-weight: 600;
  display: flex;
  align-items: flex-start;
  gap: 0.35rem;
}

.pd-fulfill__note svg {
  flex: none;
  width: 0.95rem;
  height: 0.95rem;
  margin-top: 0.15rem;
  color: var(--warn, #d97706);
}

/* ---- Garantía: una línea chica, verde si cubre y roja si no hay reposición.
       Va debajo de "cómo lo recibes" y siempre visible antes de pagar. ---- */
.pd-warranty {
  display: flex;
  align-items: flex-start;
  gap: 0.4rem;
  margin: -0.35rem 0 1.1rem;
  font-size: 0.82rem;
  line-height: 1.5;
}

.pd-warranty svg {
  flex: none;
  width: 0.95rem;
  height: 0.95rem;
  margin-top: 0.15rem;
}

.pd-warranty b {
  font-weight: 700;
}

.pd-warranty.is-ok {
  color: color-mix(in srgb, var(--success, #986a00) 78%, var(--muted));
}

.pd-warranty.is-ok svg,
.pd-warranty.is-ok b {
  color: var(--success, #986a00);
}

.pd-warranty.is-bad {
  color: color-mix(in srgb, var(--danger, #c0392b) 72%, var(--muted));
}

.pd-warranty.is-bad svg,
.pd-warranty.is-bad b {
  color: var(--danger, #c0392b);
}

/* La misma garantía, destacada dentro de la pestaña "Garantía y renovación". */
.pd-warranty-lead {
  margin: 0 0 0.6rem !important;
  font-size: 0.92rem;
}

.pd-warranty-lead.is-ok b {
  color: var(--success, #986a00);
}

.pd-warranty-lead.is-bad b {
  color: var(--danger, #c0392b);
}

.pd-purchase {
  display: flex;
  flex-direction: column;
  gap: 0.9rem;
  padding: 1.25rem;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--r-lg);
  box-shadow: var(--shadow-sm);
}

/* ---- Caja de compra con volumen (estilo "estuche" 3D) ----------------------
   La pieza que decide la venta: se levanta del resto con una plancha de apoyo
   detrás (::before), un filo de marca arriba (::after) y sombra en capas. Al
   pasar el cursor sube un poco, como una caja que se toma con la mano. */
.pd-buybox {
  position: relative;
  margin-top: 0.4rem;
  margin-bottom: 0.9rem;
  padding: 1.4rem 1.35rem 1.2rem;
  border: 1px solid var(--border-strong);
  border-radius: var(--r-xl);
  background: linear-gradient(180deg, var(--surface) 0%, var(--surface-2) 100%);
  box-shadow:
    inset 0 1px 0 #fff,
    0 2px 4px oklch(0.24 0 0 / 0.05),
    0 12px 26px oklch(0.24 0 0 / 0.10),
    0 30px 54px oklch(0.24 0 0 / 0.09);
  transition: transform var(--t) var(--ease-out), box-shadow var(--t) var(--ease-out);
}

/* Plancha de apoyo: el canto que asoma por debajo y le da cuerpo */
.pd-buybox::before {
  content: "";
  position: absolute;
  z-index: -1;
  left: 1.15rem;
  right: 1.15rem;
  bottom: -0.6rem;
  height: 1.4rem;
  border: 1px solid var(--border);
  border-top: 0;
  border-radius: 0 0 var(--r-lg) var(--r-lg);
  background: color-mix(in oklch, var(--brand) 12%, var(--surface-2));
}

/* Filo de marca en el borde superior */
.pd-buybox::after {
  content: "";
  position: absolute;
  top: -1px;
  left: 1.6rem;
  right: 1.6rem;
  height: 3px;
  border-radius: 0 0 3px 3px;
  background: linear-gradient(90deg, var(--brand), var(--brand-strong));
}

.pd-buybox:hover {
  transform: translateY(-3px);
  box-shadow:
    inset 0 1px 0 #fff,
    0 2px 4px oklch(0.24 0 0 / 0.05),
    0 18px 34px oklch(0.24 0 0 / 0.13),
    0 40px 70px oklch(0.24 0 0 / 0.11);
}

/* El "Pagar ahora" es el protagonista de la caja */
.pd-buybox .pd-actions .btn--primary {
  font-size: 1.05rem;
  padding-block: 0.95rem;
}

/* ---- Franja de medios de pago dentro de la caja ---- */
.pd-pay {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.6rem 0.9rem;
  flex-wrap: wrap;
  margin-top: 0.2rem;
  padding-top: 0.9rem;
  border-top: 1px solid var(--border);
}

.pd-pay__t {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  font-size: 0.82rem;
  color: var(--ink-muted);
}

.pd-pay__t svg {
  width: 0.95rem;
  height: 0.95rem;
  color: var(--brand);
  flex: none;
}

.pd-pay__marks {
  display: flex;
  align-items: center;
  gap: 0.35rem;
  flex-wrap: wrap;
}

.pd-pay__marks .paymark {
  width: 2.55rem;
  height: 1.6rem;
}

/* ---- Segunda línea: Yape y Binance ---------------------------------------
   Va SIN raya arriba: la raya de `.pd-pay` ya separa el bloque de pago del
   botón, y una segunda haría parecer que son dos apartados distintos cuando
   son el mismo —cómo se paga—. Solo un escalón de aire.

   Estos dos sí llevan el nombre escrito al lado del logo. Visa y Mastercard se
   reconocen solas; «Yape o Plin» y «Binance Pay» son nombres de servicio, y
   además el logo por sí solo no dice que la tienda acepte TAMBIÉN Plin. */
.pd-pay--alt {
  border-top: 0;
  padding-top: 0.5rem;
  margin-top: 0;
}

.pd-pay--alt .paymark {
  width: 2.4rem;
  height: 1.5rem;
}

/* Los dos se salen del ancho común de la fila: el de Yape es cuadrado y el de
   Binance es una palabra apaisada. Forzarlos al ancho de una tarjeta dejaría
   uno con aire de sobra y el otro ilegible. */
.pd-pay--alt .paymark--yape {
  width: 1.5rem;
}

.pd-pay--alt .paymark--binance {
  width: 3.4rem;
}

/* El nombre pegado a su logo: el `gap` de la fila es el mismo entre logo y
   nombre que entre un medio y el siguiente, así que sin este margen negativo
   las cuatro piezas se leen como cuatro cosas sueltas en vez de dos parejas. */
.pd-pay__n {
  font-size: 0.78rem;
  font-weight: 600;
  color: var(--ink-body);
  margin-left: -0.1rem;
  margin-right: 0.35rem;
}

.pd-pay__n:last-child {
  margin-right: 0;
}

/* ---- Detalle largo: va DEBAJO de la caja de compra ---- */
.pd-detail {
  margin-top: 0.4rem;
}

.pd-detail__t {
  margin: 1.3rem 0 0.2rem;
  font-size: 0.76rem;
  font-weight: 800;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--ink-faint);
}



.pd-qty-row {
  display: flex;
  align-items: center;
  gap: 1rem;
  flex-wrap: wrap;
}

.pd-qty-row>label {
  font-size: 0.9rem;
  font-weight: 600;
  color: var(--ink-body);
}

/* flex: none — el selector de cantidad es un CONTROL: nunca se encoge. Si se
   encoge, sus botones +/- quedan recortados y deja de poder usarse. */
.pd-stepper {
  display: inline-flex;
  align-items: center;
  flex: none;
  border: 1px solid var(--border-strong);
  border-radius: var(--r-sm);
  overflow: hidden;
}

.pd-stepper button {
  width: 2.5rem;
  height: 2.5rem;
  display: grid;
  place-items: center;
  color: var(--ink-body);
  transition: background-color var(--t), color var(--t);
}

.pd-stepper button:hover:not(:disabled) {
  background: var(--surface-2);
  color: var(--ink);
}

.pd-stepper button:disabled {
  color: var(--ink-faint);
  cursor: not-allowed;
}

.pd-stepper button svg {
  width: 0.95rem;
  height: 0.95rem;
}

.pd-stepper input {
  width: 3rem;
  height: 2.5rem;
  border: none;
  border-inline: 1px solid var(--border);
  background: var(--surface);
  text-align: center;
  font-weight: 700;
  font-size: 1rem;
  color: var(--ink);
  font-variant-numeric: tabular-nums;
  -moz-appearance: textfield;
}

.pd-stepper input::-webkit-outer-spin-button,
.pd-stepper input::-webkit-inner-spin-button {
  -webkit-appearance: none;
  margin: 0;
}

.pd-stepper input:focus {
  outline: none;
  box-shadow: inset var(--ring);
}

.pd-line-total {
  margin-left: auto;
  font-size: 0.9rem;
  color: var(--ink-muted);
}

.pd-line-total b {
  color: var(--ink);
  font-size: 1.05rem;
  font-variant-numeric: tabular-nums;
}

.pd-actions {
  display: flex;
  flex-direction: column;
  gap: 0.65rem;
}

/* Aquí vivía .pd-gift, el cartel del cupón de bienvenida de la caja de compra.
   Fuera con el anuncio (4-sep-2026), así que la regla se va con él. */

/* ---- Bloques informativos de la descripción (qué incluye / entrega / garantía) ---- */
.pd-info-blocks {
  display: grid;
  gap: 1rem;
  margin-top: 1.5rem;
}

.pd-info {
  padding: 1.25rem 1.35rem;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--r-lg);
}

.pd-info h3 {
  display: flex;
  align-items: center;
  gap: 0.55rem;
  font-size: 1.05rem;
  margin: 0 0 0.75rem;
}

.pd-info h3 svg {
  width: 1.2rem;
  height: 1.2rem;
  color: var(--brand);
  flex: none;
}

.pd-info p {
  margin-bottom: 0;
}

.pd-info .feature-list {
  gap: 0.55rem;
}

.pd-info .feature-list li {
  font-size: 0.93rem;
}

.pd-info__note {
  margin-top: 0.9rem !important;
  padding-top: 0.9rem;
  border-top: 1px dashed var(--border);
  font-size: 0.86rem;
  color: var(--ink-muted);
}

/* ---- Sección de pestañas ---- */
.pd-tabs-wrap {
  margin-top: clamp(3rem, 5vw, 4.5rem);
}

.pd-tab-body {
  padding-top: 1.75rem;
  max-width: 70ch;
}

.pd-tab-body p {
  color: var(--ink-body);
  line-height: 1.7;
  margin-bottom: 1rem;
}

.pd-tab-body p:last-child {
  margin-bottom: 0;
}

.pd-tab-body h3 {
  font-size: 1.1rem;
  margin: 1.5rem 0 0.75rem;
}

.pd-tab-body h3:first-child {
  margin-top: 0;
}

/* table.data (styles.css) fuerza min-width:640px para las tablas anchas del
   panel. Esta es una ficha de dos columnas y sí cabe en un celular, pero hay
   que ganarle la especificidad: `.pd-spec-table` sola (0,1,0) perdía contra
   `table.data` (0,1,1) y el min-width:0 no hacía nada. Con el selector
   duplicado empata en clases y gana por orden de carga. (29-jul-2026) */
table.data.pd-spec-table {
  min-width: 0;
}

.pd-spec-table th {
  width: 38%;
}

/* En pantallas anchas las etiquetas ("Método de entrega", "Tipo de licencia")
   se leen mejor en una línea; en el celular tienen que poder partir o empujan
   la columna de valores fuera de la tarjeta. */
@media (min-width: 561px) {
  .pd-spec-table th {
    white-space: nowrap;
  }
}

.pd-spec-table th,
.pd-spec-table td {
  padding-inline: 0 1rem;
  background: transparent;
}

.pd-tab-body .data th:first-child {
  padding-left: 1rem;
}

/* ---- Pasos de activación ---- */
.pd-steps {
  display: grid;
  gap: 1rem;
  counter-reset: pdstep;
  max-width: 60ch;
}

.pd-step {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 1rem;
  align-items: start;
  padding: 1.1rem 1.25rem;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--r);
}

.pd-step__num {
  width: 2.1rem;
  height: 2.1rem;
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: var(--brand-50);
  color: var(--brand-ink);
  font-weight: 800;
  font-size: 0.95rem;
  flex: none;
}

.pd-step h4 {
  font-size: 1rem;
  margin-bottom: 0.2rem;
}

.pd-step p {
  font-size: 0.92rem;
  color: var(--ink-muted);
  line-height: 1.55;
  margin: 0;
}

/* Acceso inferior contextual: muestra la imagen del producto actual, no la
   ruleta ni un pictograma genérico. Se mantiene a la izquierda de WhatsApp. */
.product-quick-buy {
  position: fixed;
  left: clamp(.85rem, 2vw, 1.5rem);
  bottom: clamp(.85rem, 2.5vh, 1.5rem);
  z-index: var(--z-sticky);
  display: inline-flex;
  align-items: center;
  gap: .7rem;
  max-width: min(19rem, calc(100vw - 5.5rem));
  padding: .48rem .9rem .48rem .48rem;
  border: 1px solid var(--border-strong);
  border-radius: var(--r-pill);
  color: var(--ink);
  background: var(--surface);
  box-shadow: var(--shadow-lg);
  cursor: pointer;
  font: inherit;
  text-align: left;
  transition: translate var(--t) var(--ease-out), border-color var(--t), box-shadow var(--t);
}

.product-quick-buy:hover {
  translate: 0 -3px;
  border-color: var(--brand);
  box-shadow: var(--shadow-xl);
}

.product-quick-buy:focus-visible {
  outline: none;
  box-shadow: var(--ring), var(--shadow-lg);
}

.product-quick-buy__img,
.product-quick-buy__glyph {
  width: 3rem;
  height: 3rem;
  flex: none;
  border-radius: 50%;
  object-fit: contain;
  padding: .2rem;
  background: #fff;
  border: 1px solid var(--border);
}

.product-quick-buy__glyph {
  display: grid;
  place-items: center;
  padding: 0;
  background: transparent;
  border: 0;
}

.product-quick-buy__glyph[hidden] {
  display: none;
}

.product-quick-buy__text {
  min-width: 0;
  display: grid;
  line-height: 1.2;
}

.product-quick-buy__text b {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: .86rem;
}

.product-quick-buy__text small {
  margin-top: .2rem;
  color: var(--brand-ink);
  font-size: .72rem;
  font-weight: 750;
}

@media (max-width: 540px) {
  .product-quick-buy {
    width: 3.6rem;
    height: 3.6rem;
    padding: .28rem;
    justify-content: center;
  }

  .product-quick-buy__img,
  .product-quick-buy__glyph {
    width: 3rem;
    height: 3rem;
  }

  .product-quick-buy__text {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip-path: inset(50%);
  }
}

/* ---- Relacionados ---- */
.pd-related {
  margin-top: clamp(3rem, 5vw, 4.5rem);
}

.pd-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 258px), 1fr));
  gap: clamp(1rem, 2vw, 1.5rem);
  margin-top: 1.75rem;
}

/* ---- Celular: la ficha entra en una pantalla, sin aire de más --------------
   La mayor parte del tráfico entra desde el teléfono, así que aquí manda que
   el precio y "Pagar ahora" se vean juntos sin bajar. */
@media (max-width: 560px) {
  .pd-layout {
    gap: 1.1rem;
    margin-top: 1rem;
  }

  .pd-buy h1 {
    margin: 0.25rem 0 0.4rem;
  }

  .pd-summary {
    font-size: 0.94rem;
    line-height: 1.5;
    margin-bottom: 0.9rem;
  }

  .pd-price-row {
    padding: 0.85rem 0;
  }

  .pd-specs {
    gap: 0.4rem;
    margin: 0.85rem 0;
  }

  .pd-purchase {
    gap: 0.7rem;
  }

  .pd-buybox {
    padding: 1.05rem 0.9rem 0.95rem;
    margin-bottom: 0.8rem;
  }

  .pd-buybox::before {
    left: 0.8rem;
    right: 0.8rem;
    bottom: -0.5rem;
    height: 1.1rem;
  }

  .pd-buybox::after {
    left: 1.1rem;
    right: 1.1rem;
  }

  .pd-buybox .pd-actions .btn--primary {
    font-size: 1rem;
    padding-block: 0.85rem;
  }

  /* Cantidad y total en UNA sola línea: el paso más chico y el texto más
     corto evitan que "Total" caiga a un renglón suyo y estire la caja. */
  /* Sigue cabiendo en una línea con la letra normal (para eso los tamaños de
     abajo), pero si el visitante tiene la letra del sistema en grande la fila
     PARTE en vez de aplastar el selector de cantidad: con nowrap, el +/- se
     encogía a 37 px y los botones quedaban cortados. */
  .pd-qty-row {
    gap: 0.5rem 0.55rem;
    flex-wrap: wrap;
  }

  .pd-qty-row > label { min-width: 0; }

  .pd-qty-row>label {
    font-size: 0.85rem;
  }

  .pd-stepper button {
    width: 2.1rem;
    height: 2.2rem;
  }

  .pd-stepper input {
    width: 2.4rem;
    height: 2.2rem;
    font-size: 0.95rem;
  }

  .pd-line-total {
    font-size: 0.82rem;
    white-space: nowrap;
  }

  .pd-pay {
    justify-content: center;
    text-align: center;
    gap: 0.5rem;
    padding-top: 0.75rem;
  }

  .pd-pay__marks {
    justify-content: center;
  }

  .pd-fulfill {
    padding: 0.85rem 0.9rem;
    gap: 0.7rem;
    margin-bottom: 0.8rem;
  }

  .pd-detail__t {
    margin-top: 1.05rem;
  }

  .pd-highlights {
    margin: 0.4rem 0 1rem;
  }
}