.gp-preview-product-page {
  --pilot-accent: #00b894;
  --pilot-accent-dark: #063b32;
  --pilot-soft: #e4f8f2;
  --pilot-soft-strong: #bceedd;
  --pilot-accent-contrast: #fff;
  --pilot-image-bg: #fff;
  --pilot-summary-bg: #0b332d;
  --pilot-summary-ink: #fff;
  --pilot-summary-muted: rgba(255, 255, 255, 0.72);
  --pilot-feature-accent: var(--pilot-accent);
  --pilot-feature-color-1: var(--pilot-feature-accent);
  --pilot-feature-color-2: #0071e3;
  --pilot-feature-color-3: #007fae;
  --pilot-ink: #101418;
  --pilot-muted: #5e666c;
  --pilot-line: rgba(16, 20, 24, 0.14);
}

.gp-preview-product-page[data-gp-product-slug="kit-spray-antideslizante-y-magnesio"] {
  --pilot-feature-accent: #008f73;
  --pilot-feature-color-1: #008f73;
  --pilot-feature-color-2: #d62f25;
  --pilot-feature-color-3: #007d9e;
}

.gp-preview-product-page[data-gp-product-slug="gladiator-control"],
.gp-preview-product-page[data-gp-product-slug="pack-gladiator-control"] {
  --pilot-accent: #0071e3;
  --pilot-accent-dark: #0a2342;
  --pilot-soft: #eef5ff;
  --pilot-soft-strong: #cfe4ff;
  --pilot-summary-bg: #edf4ff;
  --pilot-summary-ink: #0a2342;
  --pilot-summary-muted: #52677e;
  --pilot-feature-color-1: #0071e3;
  --pilot-feature-color-2: #32ade6;
  --pilot-feature-color-3: #008f86;
}

.gp-preview-product-page[data-gp-product-slug="gladiator-attack"],
.gp-preview-product-page[data-gp-product-slug="pack-gladiator-attack"] {
  --pilot-accent: #ff2d55;
  --pilot-accent-dark: #48000f;
  --pilot-soft: #310811;
  --pilot-soft-strong: #ff2d55;
  --pilot-summary-bg: #26060d;
  --pilot-summary-ink: #fff;
  --pilot-summary-muted: #d1d1d6;
  --pilot-feature-color-1: #ff2d55;
  --pilot-feature-color-2: #ff9500;
  --pilot-feature-color-3: #ff3b30;
  --pilot-ink: #f5f5f7;
  --pilot-muted: #b5b5bb;
  --pilot-line: rgba(255, 255, 255, 0.13);
}

.gp-preview-product-page[data-gp-product-slug="gladiator-attack"],
.gp-preview-product-page[data-gp-product-slug="pack-gladiator-attack"],
.gp-preview-product-page[data-gp-product-slug="gladiator-attack"] > .gp-main,
.gp-preview-product-page[data-gp-product-slug="pack-gladiator-attack"] > .gp-main,
.gp-preview-product-page[data-gp-product-slug="gladiator-attack"] #detalles-producto,
.gp-preview-product-page[data-gp-product-slug="pack-gladiator-attack"] #detalles-producto {
  background: #1d1d1f !important;
}

.gp-preview-product-page[data-gp-product-slug="grip-padel-antivibraciones"] {
  --pilot-accent: #0071e3;
  --pilot-accent-dark: #0b1f33;
  --pilot-soft: #edf5ff;
  --pilot-soft-strong: #d6e9ff;
  --pilot-summary-bg: #f5f5f7;
  --pilot-summary-ink: #1d1d1f;
  --pilot-summary-muted: #6e6e73;
  --pilot-feature-color-1: #0071e3;
  --pilot-feature-color-2: #008f73;
  --pilot-feature-color-3: #c76500;
}

.gp-preview-product-page[data-gp-product-slug="reloj-contador-puntos-padel-y-tennis"] {
  --pilot-accent: #0071e3;
  --pilot-accent-dark: #071b3d;
  --pilot-soft: #e8f2ff;
  --pilot-soft-strong: #cfe3ff;
  --pilot-summary-bg: #0b3472;
  --pilot-feature-color-1: #0071e3;
  --pilot-feature-color-2: #32ade6;
  --pilot-feature-color-3: #007d9e;
}

.gp-preview-product-page[data-gp-product-slug="spray-antideslizante-padel"] {
  --pilot-accent: #ff3b30;
  --pilot-accent-dark: #3a0b09;
  --pilot-soft: #fff0ee;
  --pilot-soft-strong: #ffd6d2;
  --pilot-summary-bg: #fff0ee;
  --pilot-summary-ink: #3a0b09;
  --pilot-summary-muted: #704b47;
  --pilot-feature-accent: #d62f25;
  --pilot-feature-color-1: #d62f25;
  --pilot-feature-color-2: #c76500;
  --pilot-feature-color-3: #ff9f0a;
}

.gp-preview-product-page[data-gp-product-slug="magnesio-liquido-padel"] {
  --pilot-accent: #00a6d6;
  --pilot-accent-dark: #17242b;
  --pilot-soft: #eef2f5;
  --pilot-soft-strong: #dce5eb;
  --pilot-accent-contrast: #06232d;
  --pilot-summary-bg: #dfe6ea;
  --pilot-summary-ink: #17242b;
  --pilot-summary-muted: #45545c;
  --pilot-feature-accent: #007d9e;
  --pilot-feature-color-1: #007d9e;
  --pilot-feature-color-2: #008f73;
  --pilot-feature-color-3: #0071e3;
}

.gp-preview-product-page[data-gp-product-slug="cordon-pala-padel"] {
  --pilot-accent: #ff375f;
  --pilot-accent-dark: #400817;
  --pilot-soft: #ffe9ef;
  --pilot-soft-strong: #ffc8d5;
  --pilot-summary-bg: #3e0a18;
  --pilot-feature-color-1: #e62950;
  --pilot-feature-color-2: #c76500;
  --pilot-feature-color-3: #ff453a;
}

.gp-preview-product-page[data-gp-product-slug="marcador-de-puntos-padel-tenis"] {
  --pilot-accent: #ff9f0a;
  --pilot-accent-dark: #3a2100;
  --pilot-soft: #fff4de;
  --pilot-soft-strong: #ffe0a3;
  --pilot-accent-contrast: #171006;
  --pilot-summary-bg: #4b2d00;
  --pilot-feature-accent: #c76500;
  --pilot-feature-color-1: #c76500;
  --pilot-feature-color-2: #d62f25;
  --pilot-feature-color-3: #ffcc00;
}

.gp-preview-product-page[data-gp-product-slug="overgrips-padel"] {
  --pilot-accent: #0066cc;
  --pilot-accent-dark: #071b33;
  --pilot-soft: #edf5ff;
  --pilot-soft-strong: #d6e9ff;
  --pilot-summary-bg: #0b2038;
  --pilot-feature-color-1: #0066cc;
  --pilot-feature-color-2: #008f73;
  --pilot-feature-color-3: #c76500;
}

.gp-preview-product-page[data-gp-product-slug="protector-pala-padel"] {
  --pilot-accent: #32ade6;
  --pilot-accent-dark: #0b3140;
  --pilot-soft: #e8f7fc;
  --pilot-soft-strong: #c6ecf8;
  --pilot-accent-contrast: #08202a;
  --pilot-summary-bg: #d9f1fa;
  --pilot-summary-ink: #0b3140;
  --pilot-summary-muted: #42626e;
  --pilot-feature-accent: #007fae;
  --pilot-feature-color-1: #007fae;
  --pilot-feature-color-2: #008f73;
  --pilot-feature-color-3: #0071e3;
}

.gp-preview-product-page[data-gp-product-slug="codera-padel"] {
  --pilot-accent: #0a84ff;
  --pilot-accent-dark: #061a33;
  --pilot-soft: #e7f2ff;
  --pilot-soft-strong: #b8d9ff;
  --pilot-summary-bg: #0a1d36;
  --pilot-feature-accent: #0071e3;
  --pilot-feature-color-1: #0071e3;
  --pilot-feature-color-2: #32ade6;
  --pilot-feature-color-3: #007d9e;
}

.gp-preview-product-page[data-gp-product-slug="packs-gladiator"] {
  --pilot-accent: #d8a928;
  --pilot-accent-dark: #241905;
  --pilot-soft: #fff7dd;
  --pilot-soft-strong: #f6dfa0;
  --pilot-accent-contrast: #211704;
  --pilot-summary-bg: #211a0d;
  --pilot-summary-ink: #fffaf0;
  --pilot-summary-muted: #d8cdb1;
  --pilot-feature-color-1: #b88408;
  --pilot-feature-color-2: #72501a;
  --pilot-feature-color-3: #d8a928;
}

.gp-preview-product-page[data-gp-product-slug="mochila-pala-gladiator"] {
  --pilot-accent: #0a84ff;
  --pilot-accent-dark: #071a2d;
  --pilot-soft: #eaf4ff;
  --pilot-soft-strong: #c8e2ff;
  --pilot-accent-contrast: #fff;
  --pilot-summary-bg: #132334;
  --pilot-summary-ink: #f5f9fc;
  --pilot-summary-muted: #b5c6d5;
  --pilot-feature-color-1: #0a84ff;
  --pilot-feature-color-2: #416a8f;
  --pilot-feature-color-3: #1f9ca8;
}

.gp-editorial-pilot-active [data-gp-grip-v5],
.gp-editorial-pilot-active [data-gp-accessory-v5],
.gp-editorial-pilot-active #detalles-producto > .gp-product-detail-intro,
.gp-editorial-pilot-active #detalles-producto > .gp-single-product__details-surface {
  display: none !important;
}

/*
 * El enlace de la galería llega como `display: inline` desde WooCommerce.
 * Sobre una caja inline, el `clip-path` de la variante Attack recorta a la
 * caja de línea en vez de a la imagen, y la foto principal desaparecía: la
 * ficha mostraba un rectángulo vacío donde debía ir el producto.
 */
.gp-editorial-pilot-active .gp-preview-product-image {
  background: var(--pilot-image-bg) !important;
  border-color: var(--pilot-line) !important;
  box-shadow: none !important;
  display: block;
}

.gp-editorial-pilot-active--attack .gp-preview-product-image {
  background: #f3f1ef !important;
  border: 2px solid color-mix(in srgb, var(--pilot-accent) 56%, transparent) !important;
  border-radius: 2rem !important;
  clip-path: inset(0 round 2rem);
  isolation: isolate;
}

.gp-editorial-pilot-active--attack .gp-single-product__media {
  background: #1d1d1f !important;
  background-image: none !important;
  border-radius: 2rem 2rem 1.25rem 1.25rem;
}

.gp-editorial-pilot-active--attack .gp-preview-product-gallery {
  background: #1d1d1f !important;
  border-radius: 2rem 2rem 1.25rem 1.25rem;
  gap: 0 !important;
}

.gp-editorial-pilot-active--attack .gp-preview-product-image img {
  border-radius: calc(2rem - 2px) !important;
  display: block;
  object-fit: contain !important;
}

.gp-editorial-pilot-active--attack .gp-pack-v5__counter,
.gp-editorial-pilot-active--attack .gp-attack-v5__counter {
  background: rgba(23, 23, 25, 0.92) !important;
  border-color: rgba(255, 255, 255, 0.13) !important;
  color: #f5f5f7 !important;
}

.gp-editorial-pilot-active .gp-grip-v5__summary,
.gp-editorial-pilot-active .gp-accessory-v5__summary,
.gp-editorial-pilot-active .gp-control-v5__summary,
.gp-editorial-pilot-active .gp-attack-v5__summary,
/*
 * La columna que se queda quieta es la galería, no el resumen.
 *
 * Cada ficha de la preview —Control, Attack, packs, agarre, accesorios— trae su
 * propia hoja con el resumen en `position: sticky`. Eso valía cuando la columna
 * de la derecha era la corta; ahora lleva garantías, plazos y «Completa el
 * conjunto», es la más alta de las dos y pegarla no sirve de nada.
 *
 * Lleva `!important` porque `home-section-order` inyecta esta hoja **antes**
 * que las de cada ficha —medido en el navegador: esta entra la 13.ª y la de
 * Control la 16.ª—, así que empatando en especificidad ganaba la de la ficha.
 * Es el mismo motivo por el que casi todo este archivo lo lleva.
 */
.gp-editorial-pilot-active .gp-single-product__summary,
.gp-editorial-pilot-active .gp-control-v5__summary,
.gp-editorial-pilot-active .gp-attack-v5__summary,
.gp-editorial-pilot-active .gp-pack-v5__summary,
.gp-editorial-pilot-active .gp-grip-v5__summary,
.gp-editorial-pilot-active .gp-accessory-v5__summary {
  position: static !important;
}

.gp-editorial-pilot-active .gp-pack-v5__summary,
.gp-editorial-pilot-active .gp-single-product__summary {
  background: var(--pilot-summary-bg) !important;
  border-color: var(--pilot-line) !important;
  box-shadow: none !important;
}

.gp-editorial-pilot-active .gp-grip-v5__summary::before,
.gp-editorial-pilot-active .gp-accessory-v5__summary::before,
.gp-editorial-pilot-active .gp-control-v5__summary::before,
.gp-editorial-pilot-active .gp-attack-v5__summary::before,
.gp-editorial-pilot-active .gp-pack-v5__summary::before,
.gp-editorial-pilot-active .gp-single-product__summary::before {
  display: none !important;
}

.gp-editorial-pilot-active .gp-product-taxonomy a {
  background: var(--pilot-accent-dark) !important;
  color: #fff !important;
}

.gp-editorial-pilot-active .product_title {
  color: var(--pilot-summary-ink) !important;
  font-size: clamp(2.45rem, 3.7vw, 3.75rem) !important;
  font-weight: 600 !important;
  letter-spacing: -0.05em !important;
  line-height: 1 !important;
  margin-top: 0 !important;
  max-width: 14ch !important;
}

.gp-editorial-pilot-active .woocommerce-product-details__short-description,
.gp-editorial-pilot-active .woocommerce-product-details__short-description p {
  color: var(--pilot-summary-muted) !important;
}

.gp-editorial-pilot-active .gp-grip-v5__hero-facts,
.gp-editorial-pilot-active .gp-accessory-v5__hero-facts,
.gp-editorial-pilot-active .gp-control-v5__hero-facts,
.gp-editorial-pilot-active .gp-attack-v5__hero-facts,
.gp-editorial-pilot-active .gp-pack-v5__hero-facts {
  display: none !important;
}

.gp-editorial-pilot-active [data-gp-control-v5] > *,
.gp-editorial-pilot-active [data-gp-attack-v5] > *,
.gp-editorial-pilot-active [data-gp-pack-v5] > * {
  display: none !important;
}

.gp-editorial-pilot-active .gp-editorial-pilot__legacy-empty {
  display: none !important;
}

.gp-editorial-pilot-active .gp-editorial-pilot__description > .gp-control-v5__included,
.gp-editorial-pilot-active .gp-editorial-pilot__description > .gp-attack-v5__included,
.gp-editorial-pilot-active .gp-editorial-pilot__description > .gp-pack-v5__included {
  background: var(--pilot-soft) !important;
  border: 1px solid var(--pilot-line) !important;
  box-shadow: none !important;
  display: grid !important;
  margin: clamp(2.5rem, 5vw, 4.5rem) 0 0 !important;
  width: 100% !important;
}

.gp-editorial-pilot-active .gp-control-v5__included .gp-control-v5__eyebrow,
.gp-editorial-pilot-active .gp-attack-v5__included .gp-attack-v5__eyebrow,
.gp-editorial-pilot-active .gp-pack-v5__included .gp-pack-v5__eyebrow {
  display: none !important;
}

.gp-editorial-pilot-active .gp-control-v5__included h2,
.gp-editorial-pilot-active .gp-attack-v5__included h2,
.gp-editorial-pilot-active .gp-pack-v5__included h2 {
  color: var(--pilot-accent-dark) !important;
}

.gp-editorial-pilot-active .gp-control-v5__included li > span,
.gp-editorial-pilot-active .gp-attack-v5__included li > span {
  background: var(--pilot-accent) !important;
  color: var(--pilot-accent-contrast) !important;
}

.gp-editorial-pilot-active .gp-pack-v5__included-list li,
.gp-editorial-pilot-active .gp-pack-v5__included-list li.is-pending {
  background: rgba(255, 255, 255, 0.72) !important;
  border-color: color-mix(in srgb, var(--pilot-accent) 20%, transparent) !important;
}

.gp-editorial-pilot-active .gp-pack-v5__list-icon {
  background: color-mix(in srgb, var(--pilot-accent) 12%, white) !important;
  color: var(--pilot-accent) !important;
}

.gp-editorial-pilot-active .gp-preview-purchase-states__panel,
.gp-editorial-pilot-active .gp-product-purchase {
  background: color-mix(in srgb, var(--pilot-accent-dark) 58%, #1d1d1f) !important;
  border-color: color-mix(in srgb, var(--pilot-accent) 24%, transparent) !important;
  box-shadow: none !important;
}

.gp-editorial-pilot-active .gp-editorial-price-note {
  color: rgba(255, 255, 255, 0.58);
  font-size: 0.68rem;
  font-weight: 900;
  letter-spacing: 0.09em;
  margin: 0;
  text-transform: uppercase;
}

.gp-editorial-pilot-active .gp-preview-purchase-states__panel .stock,
.gp-editorial-pilot-active .gp-preview-purchase-states__panel .out-of-stock,
.gp-editorial-pilot-active .gp-product-purchase .stock,
.gp-editorial-pilot-active .gp-product-purchase .out-of-stock {
  background: color-mix(in srgb, var(--pilot-accent) 18%, transparent) !important;
  border: 1px solid color-mix(in srgb, var(--pilot-accent) 46%, transparent) !important;
  color: color-mix(in srgb, var(--pilot-accent) 62%, white) !important;
}

.gp-editorial-pilot-active .gp-preview-purchase-states__panel .single_add_to_cart_button {
  background: var(--pilot-accent) !important;
  border-color: var(--pilot-accent) !important;
  color: var(--pilot-accent-contrast) !important;
  box-shadow: none !important;
}

.gp-editorial-pilot-active .gp-preview-purchase-states__panel .single_add_to_cart_button:hover,
.gp-editorial-pilot-active .gp-preview-purchase-states__panel .single_add_to_cart_button:focus-visible {
  background: color-mix(in srgb, var(--pilot-accent) 86%, black) !important;
  border-color: color-mix(in srgb, var(--pilot-accent) 86%, black) !important;
}

.gp-preview-product-page .gp-product-trust {
  background: #eef0ec !important;
  border: 0 !important;
  border-radius: 1.55rem !important;
  display: grid !important;
  gap: 0.7rem !important;
  grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
  margin-top: 1.5rem !important;
  overflow: visible !important;
  padding: 0.7rem !important;
}

.gp-preview-product-page .gp-product-trust li {
  --gp-trust-accent: #566800;
  --gp-trust-soft: #edf4ce;
  align-items: center !important;
  background: #f8f9f6 !important;
  border: 1px solid rgba(17, 17, 17, 0.08) !important;
  border-radius: 1.25rem !important;
  display: grid !important;
  gap: 1rem !important;
  grid-template-columns: 3.9rem minmax(0, 1fr) !important;
  min-height: 7.6rem;
  padding: 1.35rem clamp(1rem, 2.4vw, 2.5rem) !important;
}

.gp-preview-product-page .gp-product-trust li:nth-child(2) {
  --gp-trust-accent: #174d77;
  --gp-trust-soft: #deedf8;
}

.gp-preview-product-page .gp-product-trust li:nth-child(3) {
  --gp-trust-accent: #7a4014;
  --gp-trust-soft: #fae8d5;
}

.gp-preview-product-page .gp-product-trust__icon {
  background: var(--gp-trust-soft) !important;
  border: 1px solid color-mix(in srgb, var(--gp-trust-accent) 22%, transparent) !important;
  border-radius: 1.2rem !important;
  color: var(--gp-trust-accent) !important;
  height: 3.9rem !important;
  width: 3.9rem !important;
}

.gp-preview-product-page .gp-product-trust__icon svg {
  height: 1.74rem !important;
  width: 1.74rem !important;
}

.gp-preview-product-page .gp-product-trust__copy strong {
  color: #111 !important;
  font-size: clamp(0.95rem, 1.05vw, 1.08rem) !important;
}

.gp-preview-product-page .gp-product-trust__copy > span {
  color: #6e6e73 !important;
  font-size: clamp(0.75rem, 0.8vw, 0.84rem) !important;
}

.gp-editorial-pilot-active--attack .gp-product-trust {
  background: #2c2c2e !important;
  border: 1px solid rgba(255, 255, 255, 0.1) !important;
}

.gp-editorial-pilot-active--attack .gp-product-trust li {
  --gp-trust-accent: var(--pilot-feature-color-1);
  --gp-trust-soft: #3b0a14;
  background: #171719 !important;
  border-color: rgba(255, 255, 255, 0.1) !important;
}

.gp-editorial-pilot-active--attack .gp-product-trust li:nth-child(2) {
  --gp-trust-accent: var(--pilot-feature-color-2);
  --gp-trust-soft: #3b2500;
}

.gp-editorial-pilot-active--attack .gp-product-trust li:nth-child(3) {
  --gp-trust-accent: var(--pilot-feature-color-3);
  --gp-trust-soft: #3b0d0a;
}

.gp-editorial-pilot-active--attack .gp-product-trust__copy strong {
  color: #f5f5f7 !important;
}

.gp-editorial-pilot-active--attack .gp-product-trust__copy > span {
  color: #b5b5bb !important;
}

.gp-preview-product-page .gp-preview-product-reviews h2,
.gp-preview-product-page .gp-product-related h2 {
  color: var(--pilot-ink);
}

/*
 * El titular de las dudas va sobre la banda negra, así que no toma la tinta de
 * la paleta del producto: en las fichas claras se perdería contra el fondo.
 */
.gp-preview-product-page .gp-preview-product-faqs__intro > h2 {
  color: #f5f5f7;
}

.gp-preview-product-page .gp-preview-product-faq {
  border-color: color-mix(in srgb, var(--pilot-accent) 22%, #c4c4c9) !important;
  box-shadow: none !important;
}

.gp-preview-product-page .gp-preview-product-faq[open] {
  border-color: color-mix(in srgb, var(--pilot-accent) 50%, #c4c4c9) !important;
}

/*
 * La flecha de la pregunta.
 *
 * Antes era un «?» decorativo dentro de una tarjeta siempre abierta, con un aro
 * grueso porque medía 2,6 rem. Ahora es la flecha que gira al desplegar la
 * respuesta: sin fondo ni aro, solo el trazo, teñido con la tinta de la paleta
 * de cada producto.
 */
.gp-preview-product-page .gp-preview-product-faq__icon {
  background: none !important;
  border: 0 !important;
  box-shadow: none !important;
  color: var(--pilot-accent-dark) !important;
}

.gp-preview-product-page .gp-preview-product-reviews {
  background: #0b0d10 !important;
  border: 1px solid color-mix(in srgb, var(--pilot-accent) 34%, transparent) !important;
  border-top: 0.3rem solid var(--pilot-accent) !important;
  box-shadow: none !important;
}

.gp-preview-product-page .gp-preview-product-reviews .gp-preview-review-form {
  background: rgba(0, 0, 0, 0.22) !important;
  border-color: color-mix(in srgb, var(--pilot-accent) 30%, rgba(255, 255, 255, 0.12)) !important;
}

.gp-preview-product-page .gp-preview-product-reviews .gp-button--volt {
  background: var(--pilot-accent) !important;
  border-color: var(--pilot-accent) !important;
  color: var(--pilot-accent-contrast) !important;
}

.gp-preview-product-page .gp-preview-product-reviews select:focus,
.gp-preview-product-page .gp-preview-product-reviews textarea:focus {
  border-color: var(--pilot-accent) !important;
  outline: 0.18rem solid color-mix(in srgb, var(--pilot-accent) 32%, transparent) !important;
}

.gp-preview-product-page .gp-preview-product-reviews .gp-form-status {
  color: color-mix(in srgb, var(--pilot-accent) 72%, white) !important;
}

.gp-preview-product-page .gp-product-related {
  border-top-color: var(--pilot-accent) !important;
}

.gp-preview-product-page .gp-product-related .gp-product-card {
  border-color: color-mix(in srgb, var(--pilot-accent) 26%, #e6e6e6) !important;
  box-shadow: none !important;
}

.gp-preview-product-page .gp-product-related .gp-product-card img {
  background: var(--pilot-soft) !important;
}

.gp-preview-product-page .gp-product-related .gp-button--outline {
  border-color: var(--pilot-accent) !important;
  color: var(--pilot-accent-dark) !important;
}

@media (max-width: 820px) {
  .gp-preview-product-page .gp-product-trust {
    grid-template-columns: 1fr !important;
  }
}

.gp-editorial-pilot {
  color: var(--pilot-ink);
  display: grid;
  gap: clamp(2.5rem, 4vw, 4rem);
  grid-template-columns: minmax(0, 1fr);
  margin-top: clamp(2rem, 4vw, 3.25rem);
  min-width: 0;
}

.gp-editorial-pilot__section {
  margin: 0;
}

/*
   * Titulares de bloque, no de portada.
   *
   * Medido el 09/09/2026: a 1280 px el de «Qué incluye» salía a 83 px y con la
   * foto debajo el bloque pedía 824 px de alto, más de lo que cabe en la
   * pantalla por debajo de la cabecera. Toni pide que cada bloque quepa en una
   * pantalla sin encoger el ancho, así que baja el titular, no la caja.
   */
.gp-editorial-pilot__section > h2 {
  color: var(--pilot-ink);
  font-size: clamp(1.9rem, 3.4vw, 3.25rem);
  letter-spacing: -0.045em;
  line-height: 1;
  margin: 0 0 clamp(1.25rem, 2.2vw, 2rem);
}

.gp-editorial-pilot__description {
  --pilot-description-padding: clamp(2rem, 5vw, 5rem);
  background: #f5f5f7;
  border: 0;
  border-radius: 1.75rem;
  min-width: 0;
  overflow: visible;
  padding: var(--pilot-description-padding);
  width: 100%;
}

.gp-editorial-pilot__copy {
  display: grid;
  gap: 1.25rem;
  max-width: 64rem;
}

.gp-editorial-pilot__copy p {
  color: var(--pilot-muted);
  font-size: clamp(1.05rem, 1.55vw, 1.3rem);
  line-height: 1.65;
  margin: 0;
}

.gp-editorial-pilot__carousel {
  margin: clamp(2.5rem, 5vw, 4.5rem) calc(0px - var(--pilot-description-padding)) 0;
}

.gp-editorial-pilot__visuals {
  display: grid;
  gap: clamp(1rem, 2vw, 1.6rem);
  padding: 0 var(--pilot-description-padding) 0.75rem;
}

.gp-editorial-pilot__carousel.is-scrollable .gp-editorial-pilot__visuals {
  display: flex;
  overflow-x: auto;
  overscroll-behavior-inline: contain;
  padding-inline: 0;
  scroll-padding-inline: var(--pilot-carousel-edge);
  scroll-snap-type: inline mandatory;
  scrollbar-width: none;
}

.gp-editorial-pilot__carousel.is-scrollable {
  --pilot-carousel-edge: max(1.5rem, calc((100vw - var(--gp-max-width)) / 2 + var(--pilot-description-padding)));
  margin-inline: calc(50% - 50vw);
  width: 100vw;
}

.gp-editorial-pilot__carousel.is-scrollable .gp-editorial-pilot__visuals::-webkit-scrollbar {
  display: none;
}

.gp-editorial-pilot__visuals article {
  min-width: 0;
  scroll-snap-align: start;
}

.gp-editorial-pilot__carousel.is-scrollable .gp-editorial-pilot__visuals article {
  flex: 0 0 min(76vw, 32rem);
}

.gp-editorial-pilot__carousel.is-scrollable .gp-editorial-pilot__visuals article:first-child {
  margin-inline-start: var(--pilot-carousel-edge);
  scroll-margin-inline-start: var(--pilot-carousel-edge);
}

.gp-editorial-pilot__carousel.is-scrollable .gp-editorial-pilot__visuals article:last-child {
  margin-inline-end: var(--pilot-carousel-edge);
  scroll-margin-inline-end: var(--pilot-carousel-edge);
  /*
   * Sin esto la ultima foto no se llega a ver entera: con `scroll-snap-type:
   * inline mandatory` y todas las tarjetas alineadas por su inicio, la ultima
   * posicion de anclaje cae mas alla del final del recorrido, asi que el gesto
   * de arrastre vuelve a la penultima tarjeta y la sexta queda cortada.
   * Anclando la ultima por su final, el final del carrusel es un anclaje valido.
   */
  scroll-snap-align: end;
}

.gp-editorial-pilot__visual {
  background: #fff;
  border-radius: clamp(1.2rem, 2vw, 1.75rem);
  overflow: hidden;
}

.gp-editorial-pilot__visuals article:only-child .gp-editorial-pilot__visual {
  max-width: 64rem;
}

.gp-editorial-pilot__visuals img {
  aspect-ratio: 1;
  display: block;
  object-fit: cover;
  width: 100%;
}

.gp-editorial-pilot__visuals article:only-child img {
  aspect-ratio: 16 / 9;
  object-fit: contain;
}

.gp-editorial-pilot--control .gp-editorial-pilot__visuals article:only-child,
.gp-editorial-pilot--attack .gp-editorial-pilot__visuals article:only-child {
  margin-inline: auto;
  max-width: 58rem;
  width: 100%;
}

.gp-editorial-pilot--attack .gp-editorial-pilot__visuals article:only-child {
  max-width: 32rem;
}

.gp-editorial-pilot--control .gp-editorial-pilot__visuals article:only-child .gp-editorial-pilot__visual,
.gp-editorial-pilot--attack .gp-editorial-pilot__visuals article:only-child .gp-editorial-pilot__visual {
  background: #f3f1ef;
  max-width: none;
}

.gp-editorial-pilot--control .gp-editorial-pilot__visuals article:only-child img,
.gp-editorial-pilot--attack .gp-editorial-pilot__visuals article:only-child img {
  aspect-ratio: 1;
  object-fit: cover;
}

.gp-editorial-pilot__visuals article p {
  color: #6e6e73;
  font-size: clamp(1rem, 1.25vw, 1.18rem);
  letter-spacing: -0.018em;
  line-height: 1.52;
  margin: 1.25rem 0 0;
  padding: 0 0.15rem;
}

.gp-editorial-pilot__visuals article p strong {
  color: #1d1d1f;
  font-weight: 650;
}

.gp-editorial-pilot__carousel-controls {
  display: flex;
  gap: 0.7rem;
  justify-content: flex-end;
  padding: 1.5rem var(--pilot-description-padding) 0;
}

.gp-editorial-pilot__carousel.is-scrollable .gp-editorial-pilot__carousel-controls {
  padding-inline: var(--pilot-carousel-edge);
}

/*
 * «Qué incluye»: un producto del pack por tarjeta, con su foto.
 *
 * Vive dentro de la descripción, debajo del carrusel editorial, y repite la
 * caja blanca redondeada y la tipografía de las fotos de arriba para que se lea
 * como una continuación de la descripción y no como otro bloque pegado.
 */
.gp-editorial-pilot__pack {
  margin-top: clamp(2.5rem, 5vw, 4rem);
}

.gp-editorial-pilot__pack-title {
  color: var(--pilot-ink);
  font-size: clamp(1.5rem, 2.6vw, 2.25rem);
  letter-spacing: -0.03em;
  line-height: 1.1;
  margin: 0 0 clamp(1.25rem, 2.5vw, 2rem);
}

/*
 * Las tarjetas tienen tope de ancho y la fila se centra.
 *
 * Con dos piezas y columnas elásticas se repartían los 1232 px de la ficha y
 * cada foto salía a 603 px de lado. La sección sigue ocupando todo el ancho
 * —es el bloque—, pero las fotos se quedan en un tamaño de lectura.
 */
.gp-editorial-pilot__pack-list {
  display: grid;
  gap: clamp(1rem, 2vw, 1.6rem);
  /*
   * El tope va en la columna, no en la tarjeta.
   *
   * Con columnas de `1fr` y un `max-width` en la tarjeta, cada foto se quedaba
   * pegada a la izquierda de su columna de 603 px y dejaba un hueco de 277 px
   * en medio de las dos. Limitando la propia columna, las tarjetas miden lo que
   * tienen que medir y la fila se centra en el bloque.
   */
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 13rem), 22rem));
  justify-content: center;
  list-style: none;
  margin: 0;
  padding: 0;
}

.gp-editorial-pilot__pack-item {
  margin: 0;
  min-width: 0;
}

.gp-editorial-pilot__pack-visual {
  background: #fff;
  border-radius: clamp(1.2rem, 2vw, 1.75rem);
  overflow: hidden;
}

.gp-editorial-pilot__pack-visual img {
  aspect-ratio: 1;
  display: block;
  object-fit: cover;
  width: 100%;
}

.gp-editorial-pilot__pack-item > p {
  color: #6e6e73;
  font-size: clamp(1rem, 1.25vw, 1.18rem);
  letter-spacing: -0.018em;
  line-height: 1.52;
  margin: 1.25rem 0 0;
  padding: 0 0.15rem;
}

.gp-editorial-pilot__pack-item > p strong {
  color: #1d1d1f;
  font-weight: 650;
}

.gp-editorial-pilot-active--attack .gp-editorial-pilot__pack-item > p strong {
  color: #f5f5f7;
}

.gp-editorial-pilot-active--attack .gp-editorial-pilot__pack-item > p {
  color: #b5b5bb;
}

.gp-editorial-pilot__carousel-controls button {
  align-items: center;
  appearance: none;
  background: #dedee3;
  border: 0;
  border-radius: 50%;
  color: #1d1d1f;
  cursor: pointer;
  display: inline-flex;
  font-family: Arial, sans-serif;
  font-size: 2rem;
  height: 3rem;
  justify-content: center;
  line-height: 1;
  padding: 0 0 0.18rem;
  transition: background-color 160ms ease, color 160ms ease, opacity 160ms ease;
  width: 3rem;
}

.gp-editorial-pilot__carousel-controls button:hover:not(:disabled),
.gp-editorial-pilot__carousel-controls button:focus-visible {
  background: #c7c7cc;
}

.gp-editorial-pilot__carousel-controls button:focus-visible {
  outline: 0.18rem solid var(--pilot-accent);
  outline-offset: 0.18rem;
}

.gp-editorial-pilot__carousel-controls button:disabled {
  cursor: default;
  opacity: 0.34;
}

.gp-editorial-pilot__paddle-views {
  background: #f5f5f7;
  border-radius: clamp(1.5rem, 2.8vw, 2.25rem);
  margin: 0;
  padding: clamp(1.5rem, 3vw, 2.75rem);
  width: 100%;
}

.gp-editorial-pilot-active--attack .gp-editorial-pilot__description,
.gp-editorial-pilot-active--attack .gp-editorial-pilot__features,
.gp-editorial-pilot-active--attack .gp-editorial-pilot__specifications,
.gp-editorial-pilot-active--attack .gp-editorial-pilot__paddle-views {
  background: #2c2c2e;
  border: 1px solid rgba(255, 255, 255, 0.1);
}

.gp-editorial-pilot-active--attack .gp-editorial-pilot__feature-grid article,
.gp-editorial-pilot-active--attack .gp-editorial-pilot__spec {
  background: #171719;
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-top: 0.28rem solid var(--pilot-feature-color);
}

.gp-editorial-pilot-active--attack .gp-editorial-pilot__spec:nth-child(3n + 1) {
  border-top-color: var(--pilot-feature-color-1);
}

.gp-editorial-pilot-active--attack .gp-editorial-pilot__spec:nth-child(3n + 2) {
  border-top-color: var(--pilot-feature-color-2);
}

.gp-editorial-pilot-active--attack .gp-editorial-pilot__spec:nth-child(3n + 3) {
  border-top-color: var(--pilot-feature-color-3);
}

.gp-editorial-pilot-active--attack .gp-editorial-pilot__feature-grid article > p,
.gp-editorial-pilot-active--attack .gp-editorial-pilot__feature-grid article > p strong,
.gp-editorial-pilot-active--attack .gp-editorial-pilot__spec dd,
.gp-editorial-pilot-active--attack .gp-editorial-pilot__paddle-views > h2,
.gp-editorial-pilot-active--attack .gp-editorial-pilot__visuals article p strong {
  color: #f5f5f7;
}

.gp-editorial-pilot-active--attack .gp-editorial-pilot__visuals article p,
.gp-editorial-pilot-active--attack .gp-editorial-pilot__paddle-view figcaption span {
  color: #b5b5bb;
}

.gp-editorial-pilot__copy p:last-child {
  color: var(--pilot-accent);
  font-weight: 650;
}

.gp-editorial-pilot-active--attack .gp-editorial-pilot__description > .gp-attack-v5__included,
.gp-editorial-pilot-active--attack .gp-editorial-pilot__description > .gp-pack-v5__included {
  background: #29070e !important;
  border: 2px solid var(--pilot-accent) !important;
}

.gp-editorial-pilot-active--attack .gp-attack-v5__included h2,
.gp-editorial-pilot-active--attack .gp-pack-v5__included h2,
.gp-editorial-pilot-active--attack .gp-attack-v5__included p,
.gp-editorial-pilot-active--attack .gp-pack-v5__included p,
.gp-editorial-pilot-active--attack .gp-attack-v5__included li strong,
.gp-editorial-pilot-active--attack .gp-pack-v5__included-list strong {
  color: #f5f5f7 !important;
}

.gp-editorial-pilot-active--attack .gp-pack-v5__included-list li,
.gp-editorial-pilot-active--attack .gp-pack-v5__included-list li.is-pending {
  background: #151516 !important;
  border-color: color-mix(in srgb, var(--pilot-accent) 58%, transparent) !important;
}

.gp-editorial-pilot-active--attack .gp-pack-v5__included-list li:nth-child(2) {
  border-color: color-mix(in srgb, var(--pilot-feature-color-2) 62%, transparent) !important;
}

.gp-editorial-pilot-active--attack .gp-pack-v5__included-list li:nth-child(3) {
  border-color: color-mix(in srgb, var(--pilot-feature-color-3) 62%, transparent) !important;
}

.gp-editorial-pilot-active--attack .gp-pack-v5__included-list small {
  color: #ff6b85 !important;
}

.gp-editorial-pilot-active--attack .gp-pack-v5__included-list li:nth-child(2) small {
  color: #ffb340 !important;
}

.gp-editorial-pilot-active--attack .gp-pack-v5__included-list li:nth-child(3) small {
  color: #ff6961 !important;
}

.gp-editorial-pilot-active--attack .gp-pack-v5__list-icon {
  background: #3b0a14 !important;
  color: var(--pilot-accent) !important;
}

.gp-editorial-pilot__paddle-views > h2 {
  color: var(--pilot-ink);
  font-size: clamp(1.9rem, 3.4vw, 3.25rem);
  letter-spacing: -0.045em;
  line-height: 1;
  margin: 0 0 clamp(1.25rem, 2.2vw, 2rem);
}

.gp-editorial-pilot__paddle-views > div {
  display: grid;
  gap: clamp(0.75rem, 1.4vw, 1.15rem);
  grid-template-areas:
    "main profile"
    "main grip";
  grid-template-columns: minmax(0, 1.55fr) minmax(13rem, 0.75fr);
}

.gp-editorial-pilot__paddle-view {
  --pilot-view-color: var(--pilot-feature-color-1);
  background: #f3f1ef;
  border: 2px solid var(--pilot-view-color);
  border-radius: clamp(1.15rem, 2vw, 1.75rem);
  margin: 0;
  min-height: 0;
  overflow: hidden;
  position: relative;
}

.gp-editorial-pilot__paddle-view--1 { grid-area: main; }
.gp-editorial-pilot__paddle-view--2 { --pilot-view-color: var(--pilot-feature-color-2); grid-area: profile; }
.gp-editorial-pilot__paddle-view--3 { --pilot-view-color: var(--pilot-feature-color-3); grid-area: grip; }

.gp-editorial-pilot__paddle-view img {
  display: block;
  height: 100%;
  object-fit: contain;
  width: 100%;
}

/* Apaisada en vez de cuadrada: un cuadrado de 732 px se comía la pantalla.
   Sigue en `contain`, así que la pala no se recorta, solo cambia el marco. */
.gp-editorial-pilot__paddle-view--1 img { aspect-ratio: 3 / 2; }

.gp-editorial-pilot__paddle-view--2 img,
.gp-editorial-pilot__paddle-view--3 img { aspect-ratio: 4 / 3; }

.gp-editorial-pilot__paddle-view figcaption {
  background: rgba(255, 255, 255, 0.92);
  border: 1px solid var(--pilot-view-color);
  border-radius: 1rem;
  bottom: clamp(0.7rem, 1.5vw, 1.25rem);
  display: grid;
  gap: 0.15rem;
  left: clamp(0.7rem, 1.5vw, 1.25rem);
  max-width: calc(100% - 1.4rem);
  padding: 0.75rem 0.9rem;
  position: absolute;
}

.gp-editorial-pilot__paddle-view figcaption strong {
  color: var(--pilot-view-color);
  font-size: clamp(0.85rem, 1vw, 1rem);
}

.gp-editorial-pilot__paddle-view figcaption span {
  color: var(--pilot-muted);
  font-size: clamp(0.72rem, 0.85vw, 0.86rem);
}

.gp-editorial-pilot-active--attack .gp-editorial-pilot__paddle-view figcaption span {
  color: #1d1d1f !important;
  font-weight: 600;
}

.gp-editorial-pilot__feature-grid {
  display: grid;
  gap: clamp(1rem, 2vw, 2rem);
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

.gp-editorial-pilot__features {
  background: #f5f5f7;
  border-radius: 1.75rem;
  padding: clamp(2rem, 5vw, 5rem);
}

.gp-editorial-pilot__features > h2 {
  font-size: clamp(3rem, 4.8vw, 4.75rem);
  margin-bottom: clamp(2.25rem, 4vw, 3.5rem);
}

.gp-editorial-pilot__feature-grid article {
  --pilot-feature-color: var(--pilot-feature-color-1);
  background: #fff;
  border: 0;
  border-radius: clamp(1.5rem, 2.4vw, 2.15rem);
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  min-height: clamp(16rem, 20vw, 20rem);
  padding: clamp(1.75rem, 2.7vw, 2.5rem);
}

.gp-editorial-pilot__feature-grid article:nth-child(2) {
  --pilot-feature-color: var(--pilot-feature-color-2);
}

.gp-editorial-pilot__feature-grid article:nth-child(3) {
  --pilot-feature-color: var(--pilot-feature-color-3);
}

.gp-editorial-pilot__feature-symbol {
  color: var(--pilot-feature-color);
  display: block;
  flex: 0 0 auto;
  height: clamp(2.5rem, 3.3vw, 3.25rem);
  width: clamp(2.5rem, 3.3vw, 3.25rem);
}

.gp-editorial-pilot__feature-grid article > p {
  color: #1d1d1f;
  font-size: clamp(1.45rem, 1.9vw, 2rem);
  font-weight: 650;
  letter-spacing: -0.035em;
  line-height: 1.12;
  margin: clamp(2.5rem, 4.5vw, 4rem) 0 0;
}

.gp-editorial-pilot__feature-grid article > p strong {
  color: #1d1d1f;
  font-weight: inherit;
}

.gp-editorial-pilot__feature-grid article > p span {
  color: var(--pilot-feature-color);
}

.gp-editorial-pilot__specifications {
  background: #f5f5f7;
  border: 0;
  border-radius: clamp(1.5rem, 2.8vw, 2.25rem);
  padding: clamp(2rem, 4.5vw, 4.5rem);
}

.gp-editorial-pilot__specifications > h2 {
  color: #1d1d1f;
  font-size: clamp(3rem, 4.8vw, 4.75rem);
  letter-spacing: -0.055em;
  line-height: 0.96;
}

.gp-editorial-pilot-active--attack .gp-editorial-pilot__specifications > h2 {
  color: #f5f5f7;
}

.gp-editorial-pilot__specifications dl {
  display: grid;
  gap: clamp(1rem, 1.8vw, 1.5rem);
  grid-template-columns: repeat(3, minmax(0, 1fr));
  margin: 0;
}

.gp-editorial-pilot__spec {
  --pilot-spec-color: var(--pilot-feature-color-1);
  align-items: center;
  background: #fff;
  border: 0;
  border-radius: clamp(1.35rem, 2vw, 1.85rem);
  display: flex;
  flex-direction: column;
  justify-content: center;
  min-height: clamp(16rem, 20vw, 19.5rem);
  padding: clamp(2rem, 3.2vw, 3rem);
  text-align: center;
}

.gp-editorial-pilot__spec:nth-child(3n + 2) {
  --pilot-spec-color: var(--pilot-feature-color-2);
}

.gp-editorial-pilot__spec:nth-child(3n + 3) {
  --pilot-spec-color: var(--pilot-feature-color-3);
}

.gp-editorial-pilot__spec dt {
  color: var(--pilot-spec-color);
  font-size: clamp(1rem, 1.25vw, 1.18rem);
  font-weight: 600;
  letter-spacing: -0.02em;
  line-height: 1.25;
  max-width: 18rem;
}

.gp-editorial-pilot__spec dd {
  color: #1d1d1f;
  font-size: clamp(2.3rem, 3.7vw, 3.65rem);
  font-weight: 600;
  letter-spacing: -0.055em;
  line-height: 1.02;
  margin: clamp(1.5rem, 2.8vw, 2.25rem) 0 0;
  max-width: 22rem;
  overflow-wrap: anywhere;
}

.gp-editorial-pilot__spec.is-medium dd {
  font-size: clamp(1.85rem, 2.7vw, 2.8rem);
  line-height: 1.06;
}

.gp-editorial-pilot__spec.is-long dd {
  font-size: clamp(1.55rem, 2.15vw, 2.25rem);
  line-height: 1.1;
}

.gp-editorial-pilot__spec.is-pending dd {
  color: #6e6e73;
}

@media (max-width: 900px) {
  .gp-editorial-pilot__feature-grid,
  .gp-editorial-pilot__specifications dl {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 560px) {
  .gp-editorial-pilot {
    gap: 4rem;
    margin-top: 2rem;
  }

  .gp-editorial-pilot__description {
    --pilot-description-padding: 1.5rem;
    border-radius: 1.25rem;
    padding: var(--pilot-description-padding);
  }

  .gp-editorial-pilot__features {
    border-radius: 1.25rem;
    padding: 1.5rem;
  }

  .gp-editorial-pilot__specifications {
    border-radius: 1.25rem;
    padding: 1.5rem;
  }

  .gp-editorial-pilot__feature-grid,
  .gp-editorial-pilot__specifications dl {
    grid-template-columns: 1fr;
  }

  .gp-editorial-pilot__carousel.is-scrollable .gp-editorial-pilot__visuals article {
    flex-basis: min(82vw, 22rem);
  }

  .gp-editorial-pilot__feature-grid article {
    min-height: 15rem;
  }

  .gp-editorial-pilot__spec:nth-child(n) {
    min-height: 13rem;
    padding: 2rem 1.5rem;
  }

  .gp-editorial-pilot__paddle-views {
    border-radius: 1.25rem;
    padding: 1.5rem;
    width: 100%;
  }

  .gp-editorial-pilot__paddle-views > div {
    grid-template-areas:
      "main main"
      "profile grip";
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .gp-editorial-pilot__paddle-view--2 img,
  .gp-editorial-pilot__paddle-view--3 img { aspect-ratio: 1; }

  .gp-editorial-pilot__paddle-view figcaption {
    border-radius: 0.8rem;
    padding: 0.55rem 0.65rem;
  }
}

/* Product-level palette controls. These rules intentionally come last so the
   older family pilots cannot reintroduce the global volt-green selection. */

.gp-preview-product-open .gp-floating-action--top {
  background: var(--gp-active-product-accent, var(--gp-volt)) !important;
  border-color: color-mix(in srgb, var(--gp-active-product-accent, var(--gp-volt)) 76%, black) !important;
  color: var(--gp-active-product-accent-contrast, #111) !important;
}

.gp-preview-product-open .gp-floating-action--top:hover,
.gp-preview-product-open .gp-floating-action--top:focus-visible {
  background: color-mix(in srgb, var(--gp-active-product-accent, var(--gp-volt)) 86%, white) !important;
  box-shadow: none !important;
}

/* Neutral, full-width related-products rail. The horizontal inset is part of
   the scroll content, so it appears only at the first and final positions. */
.gp-preview-product-page .gp-product-related {
  background: #f5f5f7 !important;
  border: 0 !important;
  color: #1d1d1f !important;
  margin: clamp(4rem, 7vw, 7rem) calc(50% - 50vw) 0 !important;
  overflow: hidden;
  padding: clamp(4rem, 7vw, 6.5rem) 0 clamp(3rem, 5vw, 5rem) !important;
  width: 100vw;
}

.gp-preview-product-page .gp-product-related > .gp-section-heading {
  align-items: end;
  margin-inline: auto;
  padding-inline: max(1.5rem, calc((100vw - 84rem) / 2));
  width: 100%;
}

.gp-preview-product-page .gp-product-related > .gp-section-heading > p {
  display: none !important;
}

.gp-preview-product-page .gp-product-related h2 {
  color: #1d1d1f !important;
  font-size: clamp(2.65rem, 5vw, 5rem) !important;
  font-weight: 600 !important;
  letter-spacing: -0.065em !important;
  line-height: 0.98 !important;
  max-width: none !important;
}

.gp-preview-product-page .gp-product-related__grid {
  display: flex !important;
  gap: clamp(1rem, 1.6vw, 1.5rem) !important;
  grid-template-columns: none !important;
  margin-top: clamp(2.4rem, 4vw, 3.5rem) !important;
  overflow-x: auto !important;
  overscroll-behavior-inline: contain;
  padding: 0 max(1.5rem, calc((100vw - 84rem) / 2)) 1rem !important;
  scroll-padding-inline: max(1.5rem, calc((100vw - 84rem) / 2));
  scroll-snap-type: x mandatory;
  scrollbar-width: none;
  width: 100%;
}

.gp-preview-product-page .gp-product-related__grid::-webkit-scrollbar {
  display: none;
}

.gp-preview-product-page .gp-product-related__grid .gp-product-card {
  background: transparent !important;
  border: 0 !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  flex: 0 0 clamp(18rem, 30vw, 27rem);
  overflow: visible !important;
  scroll-snap-align: start;
  transform: none !important;
}

.gp-preview-product-page .gp-product-related__grid .gp-product-card img {
  aspect-ratio: 1 !important;
  background: #fff !important;
  border-radius: clamp(1.4rem, 2vw, 2rem) !important;
  display: block;
  object-fit: cover !important;
  width: 100%;
}

.gp-preview-product-page .gp-product-related__grid .gp-product-card__body {
  display: flex !important;
  gap: 0.8rem !important;
  padding: 1.4rem 0 0 !important;
}

.gp-preview-product-page .gp-product-related__grid .gp-eyebrow {
  display: none !important;
}

.gp-preview-product-page .gp-product-related__grid .gp-product-card__body h3 {
  color: #1d1d1f !important;
  font-size: clamp(1.45rem, 2vw, 1.8rem) !important;
  font-weight: 600 !important;
  letter-spacing: -0.045em !important;
  line-height: 1.08 !important;
  margin: 0 !important;
}

.gp-preview-product-page .gp-product-related__grid .gp-button--outline {
  align-self: flex-start;
  background: transparent !important;
  border: 0 !important;
  color: #424245 !important;
  font-size: 0.98rem !important;
  font-weight: 500 !important;
  min-height: 0 !important;
  padding: 0 !important;
}

.gp-product-related__controls {
  display: flex;
  gap: 0.75rem;
  justify-content: flex-end;
  margin-top: 1.5rem;
  padding-inline: max(1.5rem, calc((100vw - 84rem) / 2));
}

.gp-product-related__controls[hidden] {
  display: none;
}

.gp-product-related__controls button {
  align-items: center;
  background: #e2e2e7;
  border: 0;
  border-radius: 50%;
  color: #1d1d1f;
  cursor: pointer;
  display: inline-flex;
  font-size: 1.75rem;
  height: 3rem;
  justify-content: center;
  line-height: 1;
  width: 3rem;
}

.gp-product-related__controls button:disabled {
  color: #a1a1a6;
  cursor: default;
  opacity: 0.58;
}

@media (max-width: 560px) {
  .gp-preview-product-page .gp-product-related__grid .gp-product-card {
    flex-basis: min(82vw, 22rem);
  }
}

/*
 * ── 11/09/2026 · el rojo de la familia Attack ────────────────────────────
 *
 * Toni lo pide con una maqueta delante, y pide tres cosas concretas en las dos
 * fichas Attack —la pala con mochila y el pack—: la palabra «Attack» del
 * título, el botón de «Añadir al carrito» y el recorrido «Compra · Envío ·
 * Entrega». Nada más: el precio, las cuatro garantías y las fechas siguen en
 * claro sobre el lienzo oscuro, que es lo que ya tenían.
 *
 * **Son dos rojos y no uno, por contraste.** Sobre el lienzo `#1d1d1f` el
 * `#ff3b30` —que ya vivía en este mismo bloque como color de característica—
 * da 4,65:1, así que vale para la palabra del título y para las etiquetas de
 * los pasos, que son letra pequeña. Ese mismo rojo relleno con texto blanco
 * encima se queda en 3,05:1 y el botón de comprar es justo donde no se puede
 * fallar, así que el relleno baja a `#d31027`: blanco sobre él da 5,42:1 y
 * sigue separándose del fondo de la página (3,04:1). Un solo rojo obligaba a
 * elegir entre un título que se lee y un botón que se lee.
 *
 * Los tokens se declaran en el `body` y no en la ficha porque la barra de
 * compra pegajosa —`gladiator_sticky_purchase_bar()`— se pinta fuera del
 * `<main>`, y su botón es el mismo «Añadir al carrito» repetido: dejarlo negro
 * mientras el de arriba es rojo se lee como un fallo, no como una decisión. *
 * **Los tres tokens se declaran dos veces, y hace falta.** En el tema los pone
 * la clase del `body`; la preview no ejecuta PHP y no la tiene, así que allí
 * `var(--attack-cta-red)` quedaba sin valor. Una variable sin definir no cae al
 * valor anterior: invalida la declaración entera, y con `!important` delante
 * dejó el botón de comprar transparente en la preview en vez de rojo. Por eso
 * van también en la propia ficha, que es lo que las dos superficies comparten.
 */
body.gp-product-family--attack,
.gp-preview-product-page[data-gp-product-slug="gladiator-attack"],
.gp-preview-product-page[data-gp-product-slug="pack-gladiator-attack"] {
  --attack-ink-red: #ff3b30;
  --attack-cta-red: #d31027;
  --attack-cta-red-hover: #b20c20;
}

/* La palabra «Attack» del título; el `<span>` solo lo pinta esta familia. */
.gp-preview-product-page[data-gp-product-slug="gladiator-attack"] .gp-product-title__accent,
.gp-preview-product-page[data-gp-product-slug="pack-gladiator-attack"] .gp-product-title__accent {
  color: var(--attack-ink-red);
}

/*
 * El botón de comprar. Lleva `!important` porque el negro de
 * `cordon-purchase-pilot.css` también lo lleva; gana por especificidad, no por
 * orden de carga, así que el arreglo no depende de en qué orden se encolen.
 */
.gp-preview-product-page[data-gp-product-slug="gladiator-attack"] .gp-product-purchase .single_add_to_cart_button,
.gp-preview-product-page[data-gp-product-slug="pack-gladiator-attack"] .gp-product-purchase .single_add_to_cart_button,
.gp-preview-product-page[data-gp-product-slug="gladiator-attack"] .gp-preview-purchase-states__panel .single_add_to_cart_button,
.gp-preview-product-page[data-gp-product-slug="pack-gladiator-attack"] .gp-preview-purchase-states__panel .single_add_to_cart_button {
  background: var(--attack-cta-red) !important;
  border-color: var(--attack-cta-red) !important;
}

.gp-preview-product-page[data-gp-product-slug="gladiator-attack"] .gp-product-purchase .single_add_to_cart_button:hover,
.gp-preview-product-page[data-gp-product-slug="gladiator-attack"] .gp-product-purchase .single_add_to_cart_button:focus-visible,
.gp-preview-product-page[data-gp-product-slug="pack-gladiator-attack"] .gp-product-purchase .single_add_to_cart_button:hover,
.gp-preview-product-page[data-gp-product-slug="pack-gladiator-attack"] .gp-product-purchase .single_add_to_cart_button:focus-visible {
  background: var(--attack-cta-red-hover) !important;
  border-color: var(--attack-cta-red-hover) !important;
}

/* El mismo botón, repetido en la barra pegajosa que vive fuera del `<main>`. */
body.gp-product-family--attack .gp-sticky-purchase__button {
  background: var(--attack-cta-red);
  border-color: var(--attack-cta-red);
}

body.gp-product-family--attack .gp-sticky-purchase__button:hover,
body.gp-product-family--attack .gp-sticky-purchase__button:focus-visible {
  background: var(--attack-cta-red-hover);
  border-color: var(--attack-cta-red-hover);
}

/*
 * El recorrido: los tres iconos y las tres etiquetas. Las fechas se quedan en
 * el gris claro del lienzo oscuro, como en la maqueta.
 *
 * Los selectores se anclan en `.gp-delivery-steps__list .gp-delivery-step`
 * para subir la especificidad por encima de las reglas de
 * `entrega-estimada-2026-09-03.css`, que se carga después y pinta el icono del
 * paso en curso y el del `:hover` con la tinta clara. Sin ese tramo, pasar el
 * ratón por encima devolvía el icono a blanco.
 *
 * Ese ancla y no `.gp-purchase-assurance`, que es el envoltorio que monta la
 * JS de hoy: medido el 11/09 en gladiatorpadel.com, la ficha publicada todavía
 * sirve la versión anterior del bloque, que no lo lleva. La lista y el paso
 * están en las dos, así que el rojo sale igual antes y después de subir el
 * tema.
 *
 * El `:hover` mantiene el mismo rojo a propósito: oscurecerlo sobre lienzo
 * negro lo hunde —`#b20c20` sobre `#1d1d1f` es 2,1:1— y el aviso de que el
 * paso responde ya lo da el desplazamiento de 2 px que trae esa misma hoja.
 */
.gp-preview-product-page[data-gp-product-slug="gladiator-attack"] .gp-delivery-steps__list .gp-delivery-step .gp-delivery-step__icon,
.gp-preview-product-page[data-gp-product-slug="pack-gladiator-attack"] .gp-delivery-steps__list .gp-delivery-step .gp-delivery-step__icon,
.gp-preview-product-page[data-gp-product-slug="gladiator-attack"] .gp-delivery-steps__list .gp-delivery-step .gp-delivery-step__label,
.gp-preview-product-page[data-gp-product-slug="pack-gladiator-attack"] .gp-delivery-steps__list .gp-delivery-step .gp-delivery-step__label {
  color: var(--attack-ink-red);
}

.gp-preview-product-page[data-gp-product-slug="gladiator-attack"] .gp-delivery-steps__list .gp-delivery-step:hover .gp-delivery-step__icon,
.gp-preview-product-page[data-gp-product-slug="pack-gladiator-attack"] .gp-delivery-steps__list .gp-delivery-step:hover .gp-delivery-step__icon {
  color: var(--attack-ink-red);
}