/* ==========================================================================
   iCase — FICHA DE PRODUCTO v1.0  ·  "Bloque"
   Archivo: static/css/icase-detail.css
   Requiere: icase-tokens.css, icase-product.css

   Igual que el carrito: Rio ya trae galería con lightbox, selector de
   variantes, cuotas, calculador de envío y relacionados. Esto restiliza
   sobre sus clases `js-*` y agrega lo que falta.
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. LAYOUT
   -------------------------------------------------------------------------- */
#single-product { padding-top: var(--ic-s6); }
@media (min-width: 992px) { #single-product { padding-top: var(--ic-s8); } }

#single-product .page-header { padding-top: 0 !important; }
#single-product .js-product-name {
  font-size: var(--ic-fs-h2) !important;
  font-weight: var(--ic-fw-black);
  letter-spacing: var(--ic-ls-display);
  line-height: 1.1;
  color: var(--ic-ink);
  margin-bottom: var(--ic-s4);
}

/* --------------------------------------------------------------------------
   2. GALERÍA
   -------------------------------------------------------------------------- */
#single-product .js-swiper-product,
#single-product .product-image-container { border-radius: var(--ic-r-case); overflow: hidden; background: var(--ic-mist); }
#single-product .js-product-slide img { width: 100%; height: auto; }
/* La lupa ya existe: Rio abre el lightbox al hacer clic. Se hace visible. */
#single-product .js-product-slide { cursor: zoom-in; }

#single-product .js-product-thumb {
  border: 1.5px solid transparent; border-radius: var(--ic-r-case-sm);
  overflow: hidden; background: var(--ic-mist);
  transition: border-color var(--ic-t-fast) var(--ic-ease);
}
#single-product .js-product-thumb.selected,
#single-product .js-product-thumb:hover { border-color: var(--ic-ink); }
#single-product .swiper-pagination-bullet { background: var(--ic-ink-3); opacity: .4; border-radius: 0; width: 18px; height: 3px; }
#single-product .swiper-pagination-bullet-active { background: var(--ic-ink); opacity: 1; }

/* --------------------------------------------------------------------------
   3. PRECIO
   -------------------------------------------------------------------------- */
#single-product .js-price-container,
#single-product .item-price-container { display: flex; align-items: baseline; flex-wrap: wrap; gap: 8px 12px; }
#single-product .js-price-display,
#single-product .item-price {
  font-size: clamp(1.75rem, 1.3rem + 1.9vw, 2.5rem) !important;
  font-weight: var(--ic-fw-black); letter-spacing: -0.035em;
  color: var(--ic-ink); font-variant-numeric: tabular-nums; line-height: 1;
}
#single-product .js-compare-price-display,
#single-product .price-compare {
  font-size: var(--ic-fs-lead); color: var(--ic-ink-3);
  text-decoration: line-through; text-decoration-thickness: 1px;
  font-variant-numeric: tabular-nums;
}
#single-product .js-payment-discount-price-container,
#single-product [class*="payment-discount"] {
  color: var(--ic-ok) !important; font-weight: var(--ic-fw-semi);
  font-size: var(--ic-fs-body);
}
#single-product .js-installments,
#single-product [class*="installment"] {
  font-family: var(--ic-mono); font-size: var(--ic-fs-sm);
  letter-spacing: .03em; color: var(--ic-ink-2);
  font-variant-numeric: tabular-nums;
}
#single-product .js-free-shipping-message {
  display: inline-flex; align-items: center; gap: 7px;
  padding: 7px 11px; border-radius: var(--ic-r-ui);
  background: var(--ic-ok-wash); color: var(--ic-ok) !important;
  font-size: var(--ic-fs-sm); font-weight: var(--ic-fw-semi);
}

/* --------------------------------------------------------------------------
   4. VARIANTES
   -------------------------------------------------------------------------- */
#single-product .form-label {
  font-family: var(--ic-mono); font-size: var(--ic-fs-xs);
  letter-spacing: var(--ic-ls-mono); text-transform: uppercase;
  font-weight: var(--ic-fw-medium); color: var(--ic-ink-3);
  margin-bottom: 6px;
}
#single-product .form-select,
#single-product select.js-variation-option {
  height: 50px; width: 100%;
  padding: 0 var(--ic-s7) 0 var(--ic-s4);
  border: 1.5px solid var(--ic-line); border-radius: var(--ic-r-ui);
  background: #fff; color: var(--ic-ink);
  font-size: 1rem; font-weight: var(--ic-fw-medium);
  appearance: none; cursor: pointer;
  transition: border-color var(--ic-t-fast) var(--ic-ease);
}
#single-product .form-select:hover  { border-color: var(--ic-ink-3); }
#single-product .form-select:focus  { border-color: var(--ic-blue); outline: none; }
#single-product .form-select-icon { color: var(--ic-ink-3); }

/* Botones de variante (colores / instantáneas) */
#single-product .btn-variant {
  min-height: 42px; padding: 0 var(--ic-s4);
  border: 1.5px solid var(--ic-line); border-radius: var(--ic-r-ui);
  background: #fff; color: var(--ic-ink-2);
  font-size: var(--ic-fs-sm); font-weight: var(--ic-fw-semi);
  transition: all var(--ic-t-fast) var(--ic-ease);
}
#single-product .btn-variant:hover { border-color: var(--ic-ink-3); color: var(--ic-ink); }
#single-product .btn-variant.selected {
  border-color: var(--ic-ink); background: var(--ic-ink); color: #fff;
}

/* Cantidad */
#single-product .form-quantity {
  border: 1.5px solid var(--ic-line); border-radius: var(--ic-r-ui);
  overflow: hidden; height: 50px; display: inline-flex; align-items: center;
}
#single-product .form-quantity .btn { width: 44px; height: 100%; color: var(--ic-ink-2); }
#single-product .form-quantity input {
  width: 46px; border: 0; text-align: center;
  font-weight: var(--ic-fw-semi); font-variant-numeric: tabular-nums;
}

/* --------------------------------------------------------------------------
   5. BOTÓN DE COMPRA
   -------------------------------------------------------------------------- */
#single-product .js-addtocart,
#single-product .btn-primary {
  min-height: 56px;
  border: 0; border-radius: var(--ic-r-ui);
  background: var(--ic-blue); color: #fff;
  font-family: var(--ic-font); font-size: 1.0625rem;
  font-weight: var(--ic-fw-bold); letter-spacing: -0.015em;
  cursor: pointer;
  transition: background var(--ic-t-fast) var(--ic-ease);
}
#single-product .js-addtocart:hover { background: var(--ic-blue-hover); }
#single-product .js-addtocart.disabled,
#single-product .js-addtocart[disabled] { background: var(--ic-line); color: var(--ic-ink-3); }
#single-product .btn-secondary {
  min-height: 56px; border-radius: var(--ic-r-ui);
  border: 1.5px solid var(--ic-ink); background: transparent; color: var(--ic-ink);
  font-weight: var(--ic-fw-bold);
}

/* --------------------------------------------------------------------------
   6. ACORDEONES (descripción, envío)
   -------------------------------------------------------------------------- */
#single-product .js-accordion-container {
  border-top: 1px solid var(--ic-line);
  padding-block: var(--ic-s2);
}
#single-product .js-accordion-toggle {
  display: flex; align-items: center; justify-content: space-between;
  width: 100%; padding-block: var(--ic-s4);
  font-size: var(--ic-fs-body); font-weight: var(--ic-fw-semi);
  letter-spacing: -0.015em; color: var(--ic-ink); cursor: pointer;
}
#single-product .js-accordion-content { padding-bottom: var(--ic-s4); color: var(--ic-ink-2); line-height: 1.65; }
#single-product .js-accordion-content p { margin-bottom: var(--ic-s3); }

/* --------------------------------------------------------------------------
   7. BLOQUE DE CONFIANZA (nuevo)
   -------------------------------------------------------------------------- */
.ic-pbenefits {
  display: grid; gap: 1px;
  background: var(--ic-line);
  border: 1px solid var(--ic-line);
  margin-block: var(--ic-s6);
}
@media (min-width: 480px) { .ic-pbenefits { grid-template-columns: repeat(2, 1fr); } }
.ic-pbenefit {
  display: flex; align-items: flex-start; gap: var(--ic-s3);
  padding: var(--ic-s4);
  background: var(--ic-paper);
}
.ic-pbenefit svg { width: 19px; height: 19px; color: var(--ic-blue); flex: none; margin-top: 2px; }
.ic-pbenefit strong {
  display: block; font-size: var(--ic-fs-sm); font-weight: var(--ic-fw-bold);
  letter-spacing: -0.015em; line-height: 1.25; color: var(--ic-ink);
}
.ic-pbenefit span { display: block; font-size: var(--ic-fs-xs); color: var(--ic-ink-3); line-height: 1.4; margin-top: 2px; }

/* --------------------------------------------------------------------------
   8. FAQ (nuevo)
   -------------------------------------------------------------------------- */
.ic-faq { margin-top: var(--ic-s7); }
.ic-faq__label {
  display: block; margin-bottom: var(--ic-s3);
  font-family: var(--ic-mono); font-size: var(--ic-fs-xs);
  letter-spacing: var(--ic-ls-mono); text-transform: uppercase; color: var(--ic-ink-3);
}
.ic-faq__item { border-top: 1px solid var(--ic-line); }
.ic-faq__item:last-child { border-bottom: 1px solid var(--ic-line); }
.ic-faq__q {
  display: flex; align-items: center; justify-content: space-between; gap: var(--ic-s4);
  width: 100%; padding: var(--ic-s4) 0;
  border: 0; background: none; cursor: pointer; text-align: left;
  font-size: var(--ic-fs-body); font-weight: var(--ic-fw-semi);
  letter-spacing: -0.015em; color: var(--ic-ink);
}
.ic-faq__q svg { width: 13px; height: 13px; flex: none; opacity: .45; transition: transform var(--ic-t-base) var(--ic-ease); }
.ic-faq__q[aria-expanded="true"] svg { transform: rotate(180deg); }
.ic-faq__a { display: grid; grid-template-rows: 0fr; transition: grid-template-rows var(--ic-t-base) var(--ic-ease); }
.ic-faq__a.is-open { grid-template-rows: 1fr; }
.ic-faq__a-inner { overflow: hidden; }
.ic-faq__a p { margin: 0 0 var(--ic-s4); color: var(--ic-ink-2); line-height: 1.65; font-size: var(--ic-fs-body); }

/* --------------------------------------------------------------------------
   9. BARRA STICKY DE COMPRA — la mayor palanca de conversión mobile

   Un solo botón de ancho completo con el precio adentro. Antes llevaba foto,
   nombre y precio a la izquierda más un botón chico a la derecha: 65px de
   alto para repetir dos cosas que el cliente ya vio al entrar. Así ocupa
   menos, el precio queda siempre a la vista y el área táctil es toda la
   franja en vez de un botón de 90px.

   No se esconde en escritorio: entre el precio, los medios de pago, el aviso
   de envío y el selector de modelos, en una pantalla de 860px el "Agregar al
   carrito" igual queda cerca del pliegue. Ahí se centra en un ancho contenido
   para que no se lea como una barra de sistema.
   -------------------------------------------------------------------------- */
.ic-sticky-buy {
  position: fixed; left: 0; right: 0; bottom: 0;
  z-index: var(--ic-z-sticky);
  display: flex;
  padding: 8px var(--ic-gutter) calc(8px + env(safe-area-inset-bottom));
  background: rgba(255,255,255,.94);
  -webkit-backdrop-filter: saturate(180%) blur(16px); backdrop-filter: saturate(180%) blur(16px);
  border-top: 1px solid var(--ic-line);
  transform: translateY(115%);
  transition: transform var(--ic-t-base) var(--ic-ease);
}
.ic-sticky-buy.is-visible { transform: none; }

.ic-sticky-buy__cta {
  flex: 1;
  display: flex; align-items: center; justify-content: center; gap: 9px;
  min-height: 46px; padding: 0 var(--ic-s4);
  border: 0; border-radius: var(--ic-r-ui);
  background: var(--ic-ink); color: #fff;
  font-family: inherit; font-size: var(--ic-fs-body); font-weight: var(--ic-fw-bold);
  cursor: pointer;
  transition: background-color 200ms var(--ic-ease), opacity 200ms var(--ic-ease);
}
.ic-sticky-buy__cta:hover:not([disabled]) { background: var(--ic-blue); }
.ic-sticky-buy__cta[disabled] { opacity: .45; cursor: default; }

.ic-sticky-buy__price {
  font-weight: var(--ic-fw-black);
  font-variant-numeric: tabular-nums;
  letter-spacing: -0.01em;
}
.ic-sticky-buy__price[hidden] { display: none; }

/* El separador se dibuja en CSS y no en el texto: así no lo lee el lector de
   pantalla ni queda colgado cuando el precio se esconde. */
.ic-sticky-buy__sep {
  width: 3px; height: 3px; flex: none;
  border-radius: 50%; background: currentColor; opacity: .45;
}
.ic-sticky-buy__sep[hidden] { display: none; }

@media (min-width: 992px) {
  .ic-sticky-buy { padding-inline: 0; justify-content: center; }
  .ic-sticky-buy__cta { flex: 0 0 320px; }
}

/* --------------------------------------------------------------------------
   10. RELACIONADOS Y COMPLEMENTARIOS
   -------------------------------------------------------------------------- */
.section-products-related h3,
.js-related-products h3,
.js-complementary-products h3 {
  font-size: var(--ic-fs-h3) !important;
  font-weight: var(--ic-fw-black); letter-spacing: var(--ic-ls-display);
  text-align: left !important; color: var(--ic-ink);
  padding-bottom: var(--ic-s3); border-bottom: 2px solid var(--ic-ink);
  margin-bottom: var(--ic-s6);
}

/* ==========================================================================
   BLOQUE DE DESPACHO — verde calmo
   Marcado: snipplets/icase/icase-envio-urgencia.tpl
   Lógica:  static/js/icase-envio.js

   Verde y no naranja a propósito. El naranja del sistema (--ic-flame) es el
   color de lo que se acaba; esto no apura, informa. El punto de color late
   apenas mientras todavía se despacha hoy, y se queda quieto cuando no.
   ========================================================================== */
.ic-envio {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  margin: var(--ic-s4) 0 0;
  padding: 13px 15px;
  border: 1px solid rgba(18, 135, 78, .18);
  border-radius: var(--ic-r-ui);
  background: var(--ic-ok-wash);
  color: var(--ic-ink);
  font-size: var(--ic-fs-sm);
  line-height: 1.45;
  text-wrap: pretty;
}
.ic-envio__punto {
  flex: 0 0 auto;
  width: 9px; height: 9px;
  margin-top: 6px;
  border-radius: 50%;
  background: var(--ic-ok);
}
.ic-envio__txt strong {
  font-weight: var(--ic-fw-bold);
  color: var(--ic-ok);
}

/* Mientras todavía sale despacho hoy, el punto respira. Fuera de ese estado
   queda fijo: un indicador que late cuando ya no hay nada que apurar miente. */
@media (prefers-reduced-motion: no-preference) {
  .ic-envio[data-estado="hoy"] .ic-envio__punto { animation: ic-envio-late 2.4s var(--ic-ease) infinite; }
}
@keyframes ic-envio-late {
  0%, 100% { box-shadow: 0 0 0 0 rgba(18, 135, 78, .38); }
  70%      { box-shadow: 0 0 0 7px rgba(18, 135, 78, 0); }
}

/* ==========================================================================
   ESTRUCTURA DE LA FICHA  ·  .ic-pdp
   Marcado: templates/product.tpl

   Tres zonas:  [ foto | compra ]
                [    todo el ancho    ]
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. AIRE
   El original apretaba las dos columnas contra el borde y dejaba la
   descripción colgando en 397px. Acá el bloque de compra respira y la
   separación entre columnas es la misma que el margen de la página.
   -------------------------------------------------------------------------- */
#single-product .ic-pdp { row-gap: 0; }

@media (min-width: 768px) {
  #single-product .ic-pdp__media { padding-right: clamp(24px, 3vw, 56px); }
  #single-product .ic-pdp__buy   { padding-top: var(--ic-s2); }
}

/* --------------------------------------------------------------------------
   2. ORDEN DE LA COLUMNA DE COMPRA
   El marcado no puede dar este orden solo: el precio, el envío y el
   formulario los arma product-form.tpl y el bloque verde se incluye después.
   Como todos terminan siendo hermanos dentro de .col, el orden se resuelve
   acá y no hace falta tocar ningún snipplet de Rio.

        1  nombre
        2  precio · transferencia · cuotas
        3  filete
        4  envío
        5  despacho (verde)
        6  ranuras de apps (vacías)
        7  formulario: variantes, cantidad, botón, medios de pago y envío
        8  combiná y ahorrá
        9  descripción — solo en móvil, donde Rio la mueve hasta acá
   -------------------------------------------------------------------------- */
#single-product .ic-pdp__buy { display: flex; flex-direction: column; }

#single-product .ic-pdp__buy > *                          { order: 6; }
#single-product .ic-pdp__buy > .page-header               { order: 1; }
#single-product .ic-pdp__buy > .js-price-container        { order: 2; }
#single-product .ic-pdp__buy > .divider                   { order: 3; }
#single-product .ic-pdp__buy > .js-free-shipping-message  { order: 4; }
#single-product .ic-pdp__buy > .ic-envio                  { order: 5; }
#single-product .ic-pdp__buy > #product_form              { order: 7; }

#single-product .ic-pdp__buy > .sticky-product            { order: 7; }

/* store.js de Rio la trae hasta acá en pantallas de hasta 767px.
   Sin este order caería entre el bloque verde y el botón. */
#single-product .ic-pdp__buy > #product-description       { order: 9; }

/* El filete suelto arriba del envío no aporta nada cuando el bloque verde
   ya separa el precio de la compra. */
#single-product .ic-pdp__buy > .divider { display: none; }

/* --------------------------------------------------------------------------
   3. ZONA PREPARADA DEBAJO DE LA FOTO
   Vacía no ocupa nada: sin :empty el contenedor metería un hueco.
   Cuando tenga contenido (video, UGC, lifestyle, demostraciones) aparece
   con su separación ya resuelta.
   -------------------------------------------------------------------------- */
.ic-pdp__extra:empty { display: none; }
.ic-pdp__extra {
  display: grid;
  gap: var(--ic-s5);
  margin-top: var(--ic-s6);
}

/* --------------------------------------------------------------------------
   4. FRANJA DE ABAJO, TODO EL ANCHO
   -------------------------------------------------------------------------- */
#single-product .ic-pdp__more { margin-top: var(--ic-s8); }

@media (min-width: 768px) {
  #single-product .ic-pdp__more { margin-top: var(--ic-s10); }
}

/* Ancho de lectura. A 1280px la descripción daría renglones de 180 caracteres
   y no se lee: el ojo pierde el salto de línea. Se limita el texto, no el
   bloque, así las imágenes de la descripción siguen pudiendo ser anchas. */
#single-product .ic-pdp__more .product-description.user-content > * { max-width: 72ch; }
#single-product .ic-pdp__more .product-description.user-content > :is(img, figure, table, video, iframe) { max-width: 100%; }

#single-product .ic-pdp__more #product-description { margin-top: 0 !important; }

/* Los beneficios y el FAQ se escribieron para la columna angosta de 397px.
   A 1250px, dos columnas dan tarjetas de 625px y el FAQ renglones de 190
   caracteres. Se reparten distinto solo dentro de la franja ancha. */
@media (min-width: 900px) {
  #single-product .ic-pdp__more .ic-pbenefits { grid-template-columns: repeat(4, 1fr); }
}
#single-product .ic-pdp__more .ic-faq { max-width: 76ch; }


/* La casilla real queda accesible pero invisible; se dibuja el cuadro.
   Sin esto el tema le aplica sus propios estilos de formulario. */


/* ==========================================================================
   AJUSTES DE DENSIDAD DE LA COLUMNA DE COMPRA

   Medido en vivo sobre Case Leather (1280px): la columna daba 2776px de alto
   y el botón de compra quedaba lejos del pliegue.
   ========================================================================== */

/* El <form> se vuelve display:contents. Así sus hijos pasan a ser elementos
   del mismo flex que el resto de la columna y se les puede dar orden
   individual, sin tocar el snipplet de Rio ni romper el envío del formulario,
   que sigue funcionando igual.

        6  variantes (modelo y color)
        8  botón agregar al carrito
        9  medios de pago
       10  medios de envío

   El 7 quedó libre: ahí iba el bloque de combos, que se sacó cuando los
   complementarios pasaron a una aplicación externa. Se deja el hueco por si
   más adelante entra algo entre los colores y el botón.
*/
#single-product .ic-pdp__buy > #product_form { display: contents; }
#single-product .ic-pdp__buy > #product_form > .form-row                   { order: 8; }
/* Después de .form-row a propósito: el bloque de variantes lleva las dos
   clases, y si no, empatan en 7 y el orden queda librado al orden del DOM. */
#single-product .ic-pdp__buy > #product_form > .js-product-variants        { order: 6; }

#single-product .ic-pdp__buy > #product_form > .js-accordion-container      { order: 9; }
#single-product .ic-pdp__buy > #product_form > .product-shipping-calculator { order: 10; }

/* Selector de modelos: 19 botones de 42px con 10px de separación daban 388px,
   más que la foto y el precio juntos. Con 34px y 6px entran las mismas
   opciones en unos 300px y el botón de compra sube otro tanto. */
#single-product .ic-pdp__buy .btn-variant {
  min-height: 34px; height: auto;
  padding: 0 11px;
  margin: 0 6px 6px 0;
  font-size: 12.5px;
}
#single-product .ic-pdp__buy .js-product-variants .form-label { margin-bottom: 6px; }

/* Nombre: el pt-4 de Rio sumaba 24px arriba de un título que ya tiene margen,
   y la columna entera ya trae su propio padding superior. */
#single-product .ic-pdp__buy > .page-header { padding-top: 0 !important; }
#single-product .ic-pdp__buy .breadcrumbs { margin-bottom: 6px; font-size: var(--ic-fs-xs); }
#single-product .ic-pdp__buy .js-product-name { margin-bottom: var(--ic-s3); line-height: 1.1; }

/* Precio: las tres filas venían con márgenes de Bootstrap pensados para otra
   caja. Se juntan sin encimarse. */
#single-product .ic-pdp__buy > .js-price-container { margin-bottom: var(--ic-s3) !important; }
#single-product .ic-pdp__buy > .js-price-container > .col-12 { margin-top: 2px; }
#single-product .ic-pdp__buy > .js-price-container [class*="payment-discount"] { margin-top: 4px !important; }
#single-product .ic-pdp__buy > .js-free-shipping-message { margin-bottom: 0 !important; padding-bottom: 0 !important; }


/* --------------------------------------------------------------------------
   RECUADRO "COMPLEMENTA TU COMPRA" — se oculta

   No es del tema ni de la descripción del producto: lo inyecta una app
   instalada, en tiempo de ejecución. No aparece en el HTML que sirve el
   servidor, así que desde el código del tema no se puede borrar.

   Su script busca un <button> cuyo texto sea exactamente "agregar al carrito"
   y se inserta ANTES de ese botón.

   ⚠ Esto tapa el recuadro pero la app sigue cargando su JavaScript. Para
     sacarlo de verdad hay que desinstalarla desde el panel.
   -------------------------------------------------------------------------- */
[data-icase-addons] { display: none !important; }

/* ==========================================================================
   VARIANTES: MODELO DESPLEGABLE · COLOR EN CÍRCULOS

   Rio dibuja las DOS versiones de cada variante en el HTML: un <select> con
   todas las opciones (oculto con .d-none cuando settings.bullet_variants está
   activo) y los botones .btn-variant. Las dos están siempre ahí.

   Entonces no hace falta tocar el snipplet ni apagar el ajuste del tema:
   alcanza con elegir cuál se muestra en cada grupo.

     · MODELO (y cualquier otra variante que no sea color) → el <select>.
       8 modelos en botones ocupaban 304px; en desplegable, 50px.
     · COLOR → los botones, redondos y chicos. Un color se reconoce mirándolo;
       en una lista desplegable habría que leer "Gris" y adivinar cuál es.

   Rio marca el grupo de color con .js-color-variants-container, así que la
   distinción se hace sola en productos con otras variantes (talle, capacidad).
   -------------------------------------------------------------------------- */

/* Todo lo que NO es color: se muestra el desplegable y se esconden los botones */
#single-product .ic-pdp__buy .js-product-variants-group:not(.js-color-variants-container) > .form-group.d-none { display: block !important; }
#single-product .ic-pdp__buy .js-product-variants-group:not(.js-color-variants-container) > .row { display: none !important; }

/* Color: el rótulo pasa arriba, como el del desplegable, para que las dos
   variantes se lean alineadas y no una con rótulo al costado y otra encima. */
#single-product .ic-pdp__buy .js-color-variants-container > .row { flex-direction: column; }
#single-product .ic-pdp__buy .js-color-variants-container > .row > .col-auto { max-width: 100%; flex: 0 0 auto; padding-left: 0; }
#single-product .ic-pdp__buy .js-color-variants-container > .row > .col-auto .form-label { margin-top: 0 !important; margin-bottom: 6px; }
#single-product .ic-pdp__buy .js-color-variants-container > .row > .col.pl-0 { flex: 0 0 auto; max-width: 100%; padding-left: 0 !important; }

/* El círculo: 32px de área de toque, 22px de color visible.
   El aro de 32 es lo que se pinta al elegir, así el color no cambia de tamaño. */
#single-product .ic-pdp__buy .btn-variant-color {
  width: 32px !important;
  height: 32px !important;
  min-height: 32px !important;
  padding: 0 !important;
  margin: 0 8px 8px 0 !important;
  border-radius: 50% !important;
  display: inline-grid !important;
  place-items: center;
  line-height: 1;
}
#single-product .ic-pdp__buy .btn-variant-color .btn-variant-content {
  display: block;
  width: 22px !important;
  height: 22px !important;
  border-radius: 50% !important;
}

/* Confirmación después de sumar complementarios */


/* El cartel del porcentaje. Naranja: es el color de urgencia del sistema y
   acá dice algo que conviene aprovechar ahora. */


/* Las filas sobre el fondo teñido necesitan su propio blanco para no perderse */


/* La primera opción no tiene miniatura: se salta esa columna */


/* El precio final arriba y el de lista tachado abajo: se lee primero lo que
   se paga, después de dónde viene. */


/* Cartel del 10% en la opción que lo tiene. Verde: es plata que se ahorra. */


/* Selector de modelo del accesorio. Ocupa su propia fila dentro de la opción. */


/* El ahorro total ocupa el renglón completo, debajo de la cifra. */


/* Con la cuenta final justo arriba, el botón no necesita separarse tanto. */


/* --------------------------------------------------------------------------
   14. OPINIONES EN LA FICHA

   Reseñas reales de Google. El diseño evita a propósito el aire de "widget
   de reseñas": nada de tarjetas con sombra, avatares de colores ni comillas
   gigantes. Filetes y texto, como el resto de la página.

   La nota general va arriba y el enlace a Google abajo: lo primero es la
   promesa, lo último es dónde comprobarla.
   -------------------------------------------------------------------------- */
.ic-op {
  margin-top: var(--ic-s7);
  padding-top: var(--ic-s6);
  border-top: 2px solid var(--ic-ink);
}
.ic-op__head {
  display: flex; flex-wrap: wrap; align-items: baseline;
  gap: var(--ic-s2) var(--ic-s4);
  margin-bottom: var(--ic-s5);
}
.ic-op__title {
  margin: 0;
  font-size: var(--ic-fs-h3); font-weight: var(--ic-fw-black);
  letter-spacing: var(--ic-ls-display); color: var(--ic-ink);
}
.ic-op__nota { display: flex; align-items: center; gap: var(--ic-s2); }
.ic-op__num  { font-size: var(--ic-fs-body); font-weight: var(--ic-fw-black); color: var(--ic-ink); }
.ic-op__de   { font-size: var(--ic-fs-sm); color: var(--ic-ink-3); }

.ic-op__estrellas, .ic-op__cinco { display: inline-flex; gap: 2px; color: #F5B301;   /* el mismo amarillo que las estrellas de la portada */ }
.ic-op__star { width: 15px; height: 15px; flex: none; }
/* 4,7 no son cinco estrellas llenas: la última va a medias y se ve. */
.ic-op__star--medio { opacity: .45; }

/* --------------------------------------------------------------------------
   Carrusel de opiniones

   Se desliza con el dedo en el celular y con las flechas en escritorio.
   Sin librería: es scroll horizontal nativo con scroll-snap. Pesa cero y
   funciona aunque el JavaScript no cargue — ahí quedan las siete tarjetas
   deslizables a mano, que es exactamente lo que hace un carrusel.
   -------------------------------------------------------------------------- */
.ic-op__carrusel { position: relative; }

.ic-op__pista {
  display: flex;
  gap: var(--ic-s4);
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scroll-behavior: smooth;
  /* Sin sangría lateral: cualquier desfase deja el scroll arrancando en 4px
     en vez de 0 y la flecha izquierda aparece con el carrusel sin mover. */
  padding: 2px 0 var(--ic-s5);
  -webkit-overflow-scrolling: touch;
  scrollbar-width: thin;
}
.ic-op__pista:focus-visible { outline: 2px solid var(--ic-blue); outline-offset: 3px; border-radius: var(--ic-r-ui); }

/* La barra de scroll se deja a la vista: es la pista de que hay más. */
.ic-op__pista::-webkit-scrollbar { height: 5px; }
.ic-op__pista::-webkit-scrollbar-thumb { background: var(--ic-line); border-radius: 99px; }
.ic-op__pista::-webkit-scrollbar-thumb:hover { background: var(--ic-ink-3); }

.ic-op__item {
  flex: 0 0 clamp(260px, 78vw, 340px);
  scroll-snap-align: start;
  margin: 0;
  padding: var(--ic-s4);
  border: 1px solid var(--ic-line);
  border-radius: var(--ic-r-ui);
  background: var(--ic-paper);
  display: grid; gap: var(--ic-s2); align-content: start;
}
@media (min-width: 768px) {
  .ic-op__item { flex-basis: 340px; }
}

.ic-op__txt {
  margin: 0;
  font-size: var(--ic-fs-body); line-height: 1.6; color: var(--ic-ink-2);
}
.ic-op__quien {
  font-style: normal;
  font-size: var(--ic-fs-sm); font-weight: var(--ic-fw-semi); color: var(--ic-ink);
}

/* Flechas. Sólo aparecen si el carrusel desborda y hay a dónde ir: las
   enciende y apaga icase-detail.js. */
.ic-op__flecha {
  position: absolute; top: 42%; transform: translateY(-50%);
  z-index: 2;
  width: 38px; height: 38px;
  display: flex; align-items: center; justify-content: center;
  border: 1px solid var(--ic-line); border-radius: 50%;
  background: rgba(255,255,255,.94);
  -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px);
  box-shadow: 0 2px 10px rgba(16,20,24,.10);
  color: var(--ic-ink); cursor: pointer;
  transition: background-color 180ms var(--ic-ease), opacity 180ms var(--ic-ease);
}
.ic-op__flecha:hover { background: #fff; }
.ic-op__flecha[hidden] { display: none; }
.ic-op__flecha--izq { left: -6px; }
.ic-op__flecha--der { right: -6px; }
.ic-op__chev { width: 17px; height: 17px; }
.ic-op__flecha--izq .ic-op__chev { transform: rotate(90deg); }
.ic-op__flecha--der .ic-op__chev { transform: rotate(-90deg); }

/* En pantallas táctiles se desliza con el dedo: las flechas sobran. */
@media (hover: none) {
  .ic-op__flecha { display: none !important; }
}

.ic-op__link {
  display: inline-flex; align-items: center; gap: 5px;
  margin-top: var(--ic-s5);
  font-size: var(--ic-fs-sm); font-weight: var(--ic-fw-semi);
  color: var(--ic-ink); text-decoration: none;
  border-bottom: 1.5px solid var(--ic-ink); padding-bottom: 2px;
}
.ic-op__link:hover { color: var(--ic-blue); border-color: var(--ic-blue); }
.ic-op__flechita { width: 14px; height: 14px; transform: rotate(-90deg); }


/* La descripción pasa a vivir bajo la foto (ver icase-detail.js, punto 3).
   La zona reservada no ocupa nada hasta que tiene algo adentro. */
.ic-pdp__extra--con-desc { margin-top: var(--ic-s6); }
@media (max-width: 767px) {
  /* En el celular la descripción no se muda: la zona vuelve a no ocupar nada */
  .ic-pdp__extra--con-desc { margin-top: 0; }
}

/* --------------------------------------------------------------------------
   COMPLEMENTARIOS DE RIO — apagados

   El tema trae su propia sección "Para comprar con este producto", que sale
   de complementary_product_list. Se apaga porque los combos pasaron a
   manejarse con una aplicación externa y dos bloques ofreciendo lo mismo
   en la misma ficha se pisan entre ellos.

   ⚠ Esto lo esconde, no lo desactiva: el HTML se sigue generando. El
     apagado de verdad está en el panel, en Diseño → configuración del tema,
     en la opción de productos complementarios. Cuando lo apagues ahí, esta
     regla se puede borrar.

   Los RELACIONADOS ("También te puede interesar") NO se tocan: son otra
   cosa y no compiten con la app.
   -------------------------------------------------------------------------- */
.js-complementary-products,
.section-complementary-products { display: none !important; }