/* ==========================================================================
   PDP — Página de detalle de producto (rediseño full-bleed, orientado a venta)
   Construido SOLO con tokens de plum.css + aurora-glass.css. Light + dark.
   Todo bajo el scope .pdp. Motion: compositor-only, easing fuerte, <300ms,
   gated por prefers-reduced-motion. (REQ-LAYOUT/STICKY/RESP/A11Y/PRICE/STOCK)
   ========================================================================== */

.pdp {
  /* CTA WhatsApp con contraste AA (blanco s/ #25D366 = 1.98:1 FALLA;
     este verde profundo + blanco supera 4.5:1). Un solo token reusado. */
  --wa-cta-bg: #0a7c33;
  --wa-cta-bg-hover: #0a6b2c;
  --wa-cta-ink: #ffffff;
  /* Stock: variantes legibles del verde/ámbar en ambos temas. */
  --pd-ok: color-mix(in srgb, var(--ok) 82%, #000 18%);
  --pd-warn: color-mix(in srgb, var(--warn) 84%, #000 16%);
  --pd-ease: cubic-bezier(0.23, 1, 0.32, 1);
  --pd-measure: var(--content-max, 1280px);
  --pd-star: #f5a623; /* dorado de rating (único decorativo no derivado de marca) */
  /* Card + panel de imagen: blanco puro para matchar el fondo de las fotos.
     En dark cae al surface elevado del tema. */
  --pd-card-bg: #fff;
  color: var(--ink);
}
[data-theme="dark"] .pdp {
  --pd-ok: var(--ok);
  --pd-warn: var(--warn);
  --pd-card-bg: var(--surface-0);
}

/* ---- Bandas full-bleed + medida de lectura interna -------------------- */
.pd-band { width: 100%; }
.pd-band--tint { background: var(--surface-1); }
.pd-band--strip { background: var(--surface-0); border-top: 1px solid var(--border); border-bottom: 1px solid var(--border); }
.pd-band--brandtint {
  background: linear-gradient(180deg,
    color-mix(in srgb, var(--brand) 5%, var(--surface-0)) 0%, var(--surface-0) 100%);
}
.pd-measure {
  max-width: none;
  margin-inline: auto;
  padding-inline: clamp(1rem, 4vw, 3rem);
}
.pd-section-gap { padding-block: clamp(2.5rem, 5vw, 5rem); }
.pd-prose { max-width: 68ch; }
.pd-section-title {
  font-size: clamp(1.5rem, 3vw, 2.25rem); font-weight: 800;
  letter-spacing: -.02em; line-height: 1.1; color: var(--ink); margin: .3rem 0 1.2rem;
}

/* ---- Breadcrumb ------------------------------------------------------- */
.pd-breadcrumb {
  display: flex; flex-wrap: wrap; gap: .35rem; align-items: center;
  font-size: .8125rem; color: var(--ink-soft); padding-block: 1rem;
}
.pd-breadcrumb a { color: var(--ink-soft); text-decoration: none; }
.pd-breadcrumb a:hover { color: var(--brand); }
.pd-breadcrumb .sep { color: var(--ink-faint); }

/* ======================================================================
   HERO — galería + buy box
   ====================================================================== */
/* Un solo bloque: la galería y el buy box viven dentro del mismo card. */
.pd-hero {
  display: grid; grid-template-columns: 1fr; gap: clamp(1.25rem, 4vw, 2.5rem);
  background: var(--pd-card-bg); border: 1px solid var(--border);
  border-radius: var(--radius-lg); box-shadow: var(--shadow-sm);
  padding: clamp(1rem, 3vw, 1.75rem);
}
@media (min-width: 1024px) {
  .pd-hero { grid-template-columns: minmax(0, 1.25fr) minmax(360px, 1fr); align-items: start; }
}

/* Galería */
.pd-gallery { position: relative; }
.pd-gallery-stage {
  position: relative; border-radius: var(--radius-lg); overflow: hidden;
  background: var(--pd-card-bg); border: none;
  aspect-ratio: 4 / 3; display: flex; align-items: center; justify-content: center;
}
.pd-gallery-stage--nobg { background: transparent; border: none; }
/* Halo púrpura desactivado: sobre el card blanco unificado se leía como una
   mancha lila. El stage nobg queda 100% blanco (matchea el fondo de las fotos). */
.pd-gallery-glow { display: none; }
.pd-gallery-img {
  position: relative; z-index: 1;
  width: 100%; height: 100%;
  max-width: 100%; max-height: 100%;
  min-width: 0; min-height: 0; /* deja que el flex item encoja y respete el stage 4/3 */
  object-fit: contain; display: block; cursor: zoom-in;
}
/* El <picture> es el flex item real del stage (no el <img>). Sin esto, la
   imagen local se ve reventada hasta el primer swap de JS (que elimina los
   <source> y fuerza reflow). Debe llenar el stage y poder encoger. */
.pd-gallery-stage picture {
  display: block; width: 100%; height: 100%;
  min-width: 0; min-height: 0;
}
.pd-gallery-badges { position: absolute; top: .8rem; left: .8rem; z-index: 2;
  display: flex; flex-direction: column; gap: .4rem; align-items: flex-start; }
.pd-badge {
  font-size: .7rem; font-weight: 800; letter-spacing: .04em; text-transform: uppercase;
  padding: .3rem .6rem; border-radius: var(--radius-pill); color: #fff;
}
.pd-badge--discount { background: var(--err); }
.pd-badge--cond { background: var(--brand); }
.pd-badge--ext { background: var(--surface-3); color: var(--ink-soft); }
.pd-zoom-btn {
  position: absolute; bottom: .8rem; right: .8rem; z-index: 2;
  width: 44px; height: 44px; border-radius: 50%; border: 1px solid var(--border);
  background: var(--pd-card-bg); color: var(--ink-soft); cursor: pointer;
  display: flex; align-items: center; justify-content: center;
  transition: transform 160ms var(--pd-ease), color 160ms var(--pd-ease);
}
.pd-zoom-btn:hover { color: var(--brand); }
.pd-zoom-btn:active { transform: scale(.95); }

/* Flechas prev/next sobre la imagen principal (antes solo existían en el visor). */
.pd-gallery-nav {
  position: absolute; top: 50%; transform: translateY(-50%); z-index: 3;
  width: 44px; height: 44px; border-radius: 50%; border: 1px solid var(--border);
  background: var(--pd-card-bg); color: var(--ink-soft); cursor: pointer; opacity: .9;
  display: flex; align-items: center; justify-content: center;
  transition: transform 160ms var(--pd-ease), color 160ms var(--pd-ease), opacity 160ms var(--pd-ease);
}
.pd-gallery-prev { left: .8rem; }
.pd-gallery-next { right: .8rem; }
.pd-gallery-nav:hover { color: var(--brand); opacity: 1; }
.pd-gallery-nav:active { transform: translateY(-50%) scale(.95); }

.pd-thumb-rail { display: flex; gap: .5rem; margin-top: .75rem; flex-wrap: wrap; }
.pd-thumb {
  width: 64px; height: 64px; border-radius: var(--radius-md); overflow: hidden;
  border: 2px solid var(--border); background: var(--surface-1); cursor: pointer; padding: 0;
  display: flex; align-items: center; justify-content: center;
  transition: border-color 160ms var(--pd-ease);
}
.pd-thumb img { width: 100%; height: 100%; object-fit: contain; }
.pd-thumb[aria-current="true"] { border-color: var(--brand); }
.pd-thumb:hover { border-color: var(--brand-vivid); }

/* Buy box */
.pd-buybox { display: flex; flex-direction: column; gap: 1rem; }
@media (min-width: 1024px) and (min-height: 820px) {
  .pd-buybox {
    position: sticky; top: 5.5rem;
    max-height: calc(100dvh - 7rem); overflow: auto;
    padding-right: .25rem;
  }
}
.pd-buybox-card {
  background: transparent; border: none;
  border-radius: 0; padding: 0;
  box-shadow: none; display: flex; flex-direction: column; gap: 1rem;
}
.pd-title { display: flex; flex-wrap: wrap; align-items: baseline; gap: .35rem .5rem; line-height: 1.1; }
.pd-title-brand { font-size: clamp(1.4rem, 3vw, 2rem); font-weight: 800; letter-spacing: -.02em; color: var(--ink); }
.pd-title-model {
  font-size: clamp(1.4rem, 3vw, 2rem); font-weight: 800; letter-spacing: -.02em;
  color: var(--brand); /* color sólido de marca; énfasis por peso/color, sin gradient-text */
}

.pd-pills { display: flex; flex-wrap: wrap; gap: .4rem; }
.pd-pill {
  display: inline-flex; align-items: center; gap: .4rem;
  background: var(--surface-2); border: 1px solid var(--border); color: var(--ink-soft);
  font-size: .8rem; font-weight: 600; padding: .35rem .7rem; border-radius: var(--radius-pill);
}
.pd-pill i { color: var(--brand); }

/* Precio (ancla honesta) */
.pd-price { display: flex; flex-direction: column; gap: .2rem; }
.pd-price-row { display: flex; align-items: baseline; flex-wrap: wrap; gap: .6rem; }
.pd-price-now { font-size: clamp(1.9rem, 4vw, 2.6rem); font-weight: 800; letter-spacing: -.02em; color: var(--ink); }
.pd-price-was { font-size: 1rem; color: var(--ink-soft); text-decoration: line-through; }
.pd-save {
  display: inline-flex; align-items: center; gap: .35rem; align-self: flex-start;
  background: color-mix(in srgb, var(--ok) 14%, transparent); color: var(--pd-ok);
  border: 1px solid color-mix(in srgb, var(--ok) 30%, transparent);
  font-size: .8rem; font-weight: 700; padding: .25rem .6rem; border-radius: var(--radius-pill);
}
.pd-msrp { font-size: .78rem; color: var(--ink-soft); }
.pd-msrp s { color: var(--ink-soft); }

/* Stock (no solo color; con icono + texto SR) */
.pd-stock { display: inline-flex; align-items: center; gap: .5rem; font-size: .9rem; font-weight: 600; }
.pd-stock i { font-size: .9rem; }
.pd-stock--in { color: var(--pd-ok); }
.pd-stock--low { color: var(--pd-warn); }
.pd-stock--out { color: var(--ink-soft); }

/* Stepper */
.pd-stepper { display: flex; align-items: center; gap: .75rem; }
.pd-stepper-label { font-size: .85rem; color: var(--ink-soft); }
.pd-stepper-box { display: inline-flex; align-items: center; border: 1px solid var(--border-strong); border-radius: var(--radius); overflow: hidden; }
.pd-stepper-btn {
  width: 44px; height: 44px; border: none; background: var(--surface-1); color: var(--ink);
  font-size: 1.1rem; cursor: pointer; transition: background 150ms var(--pd-ease);
}
.pd-stepper-btn:hover { background: var(--surface-2); }
.pd-stepper-btn:active { transform: scale(.96); }
.pd-stepper-input {
  width: 52px; height: 44px; text-align: center; border: none; border-inline: 1px solid var(--border);
  background: var(--surface-0); color: var(--ink); font-weight: 700; font-size: 1rem;
  -moz-appearance: textfield;
}
.pd-stepper-input::-webkit-outer-spin-button,
.pd-stepper-input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }

/* CTA stack — una acción obvia */
.pd-cta-stack { display: flex; flex-direction: column; gap: .6rem; }
.pd-cta {
  display: inline-flex; align-items: center; justify-content: center; gap: .55rem;
  font-size: 1rem; font-weight: 700; min-height: 52px; padding: .85rem 1.25rem;
  border-radius: var(--radius); text-decoration: none; cursor: pointer; border: 1px solid transparent;
  transition: transform 200ms var(--pd-ease), background 160ms var(--pd-ease),
              box-shadow 200ms var(--pd-ease), border-color 160ms var(--pd-ease), filter 160ms var(--pd-ease);
}
.pd-cta:hover { transform: translateY(-2px); }
.pd-cta:active { transform: translateY(0); }
.pd-cta--wa { background: var(--wa-cta-bg); color: var(--wa-cta-ink); box-shadow: var(--shadow-sm); }
.pd-cta--wa:hover { background: var(--wa-cta-bg-hover); box-shadow: 0 12px 28px rgba(10,124,51,.30); }
.pd-cta--cart { background: var(--surface-0); color: var(--ink); border-color: var(--border-strong); }
.pd-cta--cart:hover { background: var(--surface-1); border-color: var(--brand-soft); box-shadow: 0 8px 20px rgba(var(--shadow-brand-rgb),.14); }
@media (prefers-reduced-motion: reduce) { .pd-cta:hover, .pd-cta:active { transform: none; } }

/* Trust mini dentro del buy box */
.pd-trustmini { display: grid; grid-template-columns: 1fr 1fr; gap: .5rem; padding-top: .25rem; }
.pd-trustmini-item { display: flex; align-items: center; gap: .5rem; font-size: .8rem; color: var(--ink-soft); }
.pd-trustmini-item i { color: var(--brand); }

/* ======================================================================
   TRUST band + testimonios (port honesto del home) + cómo comprar
   ====================================================================== */
/* Banda de confianza — estética igual a la barra del home (.tumbe) */
.pd-trust-grid { display: flex; justify-content: center; align-items: center; gap: 2.5rem; flex-wrap: wrap; }
.pd-trust-item { display: inline-flex; align-items: center; gap: .55rem; font-size: .9rem; font-weight: 700; color: var(--ink); }
.pd-trust-item i { color: var(--brand); font-size: 1.05rem; flex-shrink: 0; }
@media (max-width: 768px) { .pd-trust-grid { display: grid; grid-template-columns: 1fr 1fr; gap: .9rem 1.2rem; } .pd-trust-item { font-size: .8rem; } }

.pd-testi-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.2rem; }
@media (max-width: 820px) {
  .pd-testi-grid {
    grid-auto-flow: column; grid-auto-columns: 86%; grid-template-columns: none;
    overflow-x: auto; scroll-snap-type: x mandatory; padding-bottom: .5rem;
  }
  .pd-testi { scroll-snap-align: start; }
}
.pd-testi {
  background: var(--surface-1); border: 1px solid var(--border); border-radius: 18px;
  padding: 1.5rem; display: flex; flex-direction: column; gap: .9rem;
}
.pd-testi .stars { color: var(--pd-star); font-size: 1rem; letter-spacing: .12em; }
.pd-testi blockquote { margin: 0; font-size: .93rem; color: var(--ink); line-height: 1.6; }
.pd-testi .who { display: flex; align-items: center; gap: .7rem; margin-top: auto; }
.pd-testi .av {
  width: 2.4rem; height: 2.4rem; border-radius: 999px; background: var(--brand); color: #fff;
  display: flex; align-items: center; justify-content: center; font-weight: 800; flex-shrink: 0;
}
/* Avatar = foto real de perfil de Google del autor (recortada a círculo). */
.pd-testi .av--photo { object-fit: cover; display: block; }
.pd-testi .who strong { color: var(--ink); }
.pd-testi .who small { color: var(--ink-soft); font-size: .8rem; }

.pd-howto { display: grid; grid-template-columns: 1fr; gap: 1rem; }
@media (min-width: 768px) { .pd-howto { grid-template-columns: repeat(3, 1fr); } }
.pd-howto-step { display: flex; gap: .8rem; align-items: flex-start; }
.pd-howto-num {
  width: 2rem; height: 2rem; flex-shrink: 0; border-radius: 50%; background: var(--brand-soft);
  color: var(--brand); font-weight: 800; display: flex; align-items: center; justify-content: center;
}
.pd-howto-step h4 { margin: 0 0 .2rem; font-size: .95rem; color: var(--ink); }
.pd-howto-step p { margin: 0; font-size: .85rem; color: var(--ink-soft); line-height: 1.5; }

/* ======================================================================
   UPSELL (comparación) + CROSS-SELL + SIMILAR (cards)
   ====================================================================== */
.pd-card-grid { display: grid; grid-template-columns: 1fr; gap: 1rem; }
@media (min-width: 640px) { .pd-card-grid { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 980px) { .pd-card-grid--3 { grid-template-columns: repeat(3, 1fr); } }

.pd-card {
  display: flex; flex-direction: column; background: var(--surface-0);
  border: 1px solid var(--border); border-radius: var(--radius-lg); overflow: hidden;
  text-decoration: none; color: inherit;
  transition: transform 300ms var(--pd-ease), box-shadow 300ms var(--pd-ease), border-color 200ms var(--pd-ease);
}
.pd-card:hover { transform: translateY(-4px); box-shadow: var(--shadow-md); border-color: var(--brand-soft); }
.pd-card-img { aspect-ratio: 4 / 3; background: var(--surface-1); display: flex; align-items: center; justify-content: center; padding: 1rem; position: relative; }
.pd-card-img img { max-width: 100%; max-height: 100%; object-fit: contain; }
.pd-img-fallback { display: none; font-size: 2rem; color: var(--ink-faint); opacity: .5; }
.pd-card-img--noimg .pd-img-fallback { display: block; }
.pd-card-body { padding: 1rem; display: flex; flex-direction: column; gap: .3rem; flex: 1; }
.pd-card-brand { font-size: .65rem; font-weight: 800; letter-spacing: .1em; text-transform: uppercase; color: var(--brand); }
.pd-card-model { font-weight: 700; color: var(--ink); letter-spacing: -.01em; }
.pd-card-price { font-weight: 800; color: var(--ink); margin-top: auto; }
.pd-card-was { font-size: .8rem; color: var(--ink-soft); text-decoration: line-through; margin-left: .4rem; }

/* Upsell: badge de delta de precio + spec destacado */
.pd-up-delta {
  display: inline-flex; align-items: center; gap: .35rem; align-self: flex-start;
  background: var(--brand-soft); color: var(--brand); font-weight: 800; font-size: .78rem;
  padding: .25rem .55rem; border-radius: var(--radius-pill); margin-bottom: .2rem;
}
.pd-up-spec { font-size: .8rem; color: var(--ink-soft); }

/* Cross-sell add + combo */
.pd-mini-add {
  display: inline-flex; align-items: center; justify-content: center; gap: .4rem;
  margin-top: .5rem; min-height: 44px; padding: .5rem .8rem; border-radius: var(--radius);
  background: var(--surface-1); border: 1px solid var(--border-strong); color: var(--ink);
  font-size: .85rem; font-weight: 600; cursor: pointer;
  transition: transform 140ms var(--pd-ease), background 150ms var(--pd-ease);
}
.pd-mini-add:hover { background: var(--surface-2); }
.pd-mini-add:active { transform: scale(.97); }
.pd-combo-cta { margin-top: 1.2rem; display: flex; justify-content: center; }

/* Similar rail */
.pd-rail { display: flex; gap: 1rem; overflow-x: auto; padding-bottom: 1rem; scroll-snap-type: x mandatory; }
.pd-rail .pd-card { flex: 0 0 280px; scroll-snap-align: start; }

/* ======================================================================
   SPECS
   ====================================================================== */
.pd-highlights { display: grid; grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); gap: .75rem; margin-bottom: 1.5rem; }
.pd-highlight { display: flex; align-items: center; gap: .6rem; background: var(--surface-1); border: 1px solid var(--border); border-radius: var(--radius-md); padding: .8rem; }
.pd-highlight i { color: var(--brand); font-size: 1.2rem; width: 1.4rem; text-align: center; }
.pd-highlight-txt { font-size: .85rem; color: var(--ink); font-weight: 600; line-height: 1.3; }
.pd-spec-sheet { display: grid; grid-template-columns: 1fr; gap: 0; }
@media (min-width: 640px) { .pd-spec-sheet { grid-template-columns: 1fr 1fr; column-gap: 2.5rem; } }
.pd-spec-row { display: flex; align-items: center; gap: .75rem; padding: .7rem 0; border-bottom: 1px solid var(--border); }
.pd-spec-ico { width: 34px; height: 34px; flex-shrink: 0; border-radius: var(--radius); background: var(--brand-soft); color: var(--brand); display: flex; align-items: center; justify-content: center; }
.pd-spec-row dt { font-size: .8rem; color: var(--ink-soft); margin: 0; flex: 1; }
.pd-spec-row dd { font-size: .9rem; color: var(--ink); font-weight: 600; margin: 0; text-align: right; }

/* ======================================================================
   CLOSING band
   ====================================================================== */
.pd-closing { text-align: center; display: flex; flex-direction: column; align-items: center; gap: 1rem; }
.pd-closing-price { font-size: clamp(1.6rem, 3.5vw, 2.2rem); font-weight: 800; color: var(--ink); }
.pd-closing-meta { font-size: .9rem; color: var(--ink-soft); display: flex; flex-wrap: wrap; gap: .35rem 1.2rem; justify-content: center; }
.pd-closing-meta i { color: var(--brand); margin-right: .35rem; }

/* ======================================================================
   STICKY MÓVIL / TABLET
   ====================================================================== */
.pd-stickybar {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 1100;
  display: flex; align-items: center; gap: .8rem;
  padding: .7rem clamp(1rem, 4vw, 1.5rem);
  padding-bottom: calc(.7rem + env(safe-area-inset-bottom));
  background: var(--surface-0); border-top: 1px solid var(--border);
  box-shadow: 0 -4px 20px rgba(0,0,0,.08);
}
.pd-stickybar-info { display: flex; flex-direction: column; line-height: 1.2; }
.pd-stickybar-label { font-size: .7rem; color: var(--ink-soft); }
.pd-stickybar-price { font-size: 1.1rem; font-weight: 800; color: var(--ink); }
.pd-stickybar .pd-cta { flex: 1; min-height: 48px; }
@media (min-width: 1024px) { .pd-stickybar { display: none; } }
/* En la PDP el FAB global de WhatsApp sobra: el buy box ya tiene su CTA
   "Comprar por WhatsApp" (y en móvil está el sticky bar). Lo ocultamos en
   TODO ancho para no mostrar dos botones de WhatsApp. (pdp.css solo carga
   en la PDP, así que el FAB sigue en el resto del sitio.) */
.pl-whatsapp-fab { display: none !important; }
body.pdp-has-stickybar { padding-bottom: 84px; scroll-padding-bottom: 84px; }
@media (min-width: 1024px) { body.pdp-has-stickybar { padding-bottom: 0; } }

/* ======================================================================
   LIGHTBOX
   ====================================================================== */
.pd-lightbox {
  position: fixed; inset: 0; z-index: 1200; display: none;
  align-items: center; justify-content: center; padding: 0;
  background: rgba(0,0,0,.95); backdrop-filter: blur(4px);
}
.pd-lightbox.open { display: flex; }
/* El visor ocupa toda la pantalla: la imagen llena el viewport (contain
   preserva el aspecto). 100dvh evita que el chrome del navegador móvil corte. */
.pd-lightbox img { max-width: 100vw; max-height: 100vh; max-height: 100dvh; object-fit: contain; border-radius: 0; }
.pd-lightbox-close { position: absolute; top: 1.2rem; right: 1.2rem; width: 48px; height: 48px; border-radius: 50%; border: none; background: rgba(255,255,255,.15); color: #fff; font-size: 1.3rem; cursor: pointer; z-index: 2; }
.pd-lightbox-nav { position: absolute; top: 50%; transform: translateY(-50%); width: 52px; height: 52px; border-radius: 50%; border: none; background: rgba(255,255,255,.15); color: #fff; font-size: 1.4rem; line-height: 1; cursor: pointer; display: flex; align-items: center; justify-content: center; transition: background .2s; z-index: 2; }
.pd-lightbox-nav:hover { background: rgba(255,255,255,.3); }
.pd-lightbox-prev { left: 1.2rem; }
.pd-lightbox-next { right: 1.2rem; }
.pd-lightbox-counter { position: absolute; bottom: 1.4rem; left: 50%; transform: translateX(-50%); color: #fff; font-size: .9rem; font-weight: 600; background: rgba(0,0,0,.45); padding: .3rem .85rem; border-radius: 999px; }
@media (max-width: 600px) { .pd-lightbox-nav { width: 44px; height: 44px; font-size: 1.2rem; } .pd-lightbox-prev { left: .4rem; } .pd-lightbox-next { right: .4rem; } }

/* ======================================================================
   A11Y + MOTION
   ====================================================================== */
.pdp a:focus-visible, .pdp button:focus-visible, .pdp [tabindex]:focus-visible {
  outline: 3px solid var(--ring); outline-offset: 2px; border-radius: var(--radius-sm);
}
.sr-only {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0;
}
@media (hover: none) {
  .pd-card:hover { transform: none; }
}
@media (prefers-reduced-motion: reduce) {
  .pdp *, .pdp *::before, .pdp *::after {
    transition-duration: .01ms !important; animation-duration: .01ms !important;
  }
}