/* storefront-listmode.css
 * Grid / List view toggle — §2 of storefront-listmode-v1.md
 * No per-tenant colour values. Only --ss-* tokens.
 */

/* ── Grid mode ─────────────────────────────────────────────────────────── */
/* Replaces Tailwind grid utilities removed from #ss-products-grid /
   #ss-cat-products-grid (§1.4). Pixel-identical to prior layout. */

/* Column scale (2/3/4/5/6/7). Denser gap than the old gap-4. The compound
   `#id.ss-view-grid` block below repeats the same ladder at higher specificity
   so it beats BOTH the Tailwind grid-cols-* utilities the blade still adds to
   the container AND the id-scoped inline_style_block that StorefrontDesignResolver
   emits when desktop>=5 (that #id rule would otherwise cap wide screens at 6, so
   1280->5 and 1920->7 would be impossible). PLATFORM CSS: applies to every
   storefront shop — intentional, to use the extra width on wide desktops. The
   plain `.ss-view-grid` set keeps any generic (non-#id) container responsive. */
.ss-view-grid {
  display: grid;
  gap: 0.5rem;                                        /* denser than gap-4 */
  grid-template-columns: repeat(2, minmax(0, 1fr));
}
@media (min-width: 640px)  { .ss-view-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (min-width: 1024px) { .ss-view-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
@media (min-width: 1280px) { .ss-view-grid { grid-template-columns: repeat(5, minmax(0, 1fr)); } }
@media (min-width: 1440px) { .ss-view-grid { grid-template-columns: repeat(6, minmax(0, 1fr)); } }
@media (min-width: 1920px) { .ss-view-grid { grid-template-columns: repeat(7, minmax(0, 1fr)); } }

/* Same ladder at #id specificity: overrides the inline_style_block (desktop>=5). */
#ss-products-grid.ss-view-grid,
#ss-cat-products-grid.ss-view-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
@media (min-width: 640px)  { #ss-products-grid.ss-view-grid, #ss-cat-products-grid.ss-view-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (min-width: 1024px) { #ss-products-grid.ss-view-grid, #ss-cat-products-grid.ss-view-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
@media (min-width: 1280px) { #ss-products-grid.ss-view-grid, #ss-cat-products-grid.ss-view-grid { grid-template-columns: repeat(5, minmax(0, 1fr)); } }
@media (min-width: 1440px) { #ss-products-grid.ss-view-grid, #ss-cat-products-grid.ss-view-grid { grid-template-columns: repeat(6, minmax(0, 1fr)); } }
@media (min-width: 1920px) { #ss-products-grid.ss-view-grid, #ss-cat-products-grid.ss-view-grid { grid-template-columns: repeat(7, minmax(0, 1fr)); } }


/* ── Grid mode: card internals (2026-07-02 ajuste) ───────────────────────
   Article children: name -> photo -> controls. Controls children (new DOM):
   ref+Caja/Unidad selector -> price row (price + stepper) -> Añadir button.
   Pure `order:` reorder scoped to grid; `.ss-view-list` is untouched. */

.ss-view-grid > article[data-product-id] {
  display: flex;
  flex-direction: column;
}

/* Photo link — the only direct-child <a> without .ss-card-name */
.ss-view-grid > article[data-product-id] > a:not(.ss-card-name) { order: 2; }
.ss-view-grid > article[data-product-id] > .ss-card-name        { order: 1; }
.ss-view-grid > article[data-product-id] > .ss-card-controls    { order: 3; }

/* Inside controls: ref/selector, then price+stepper row, then Añadir. */
.ss-view-grid > article[data-product-id] > .ss-card-controls > .ss-card-ref-selector { order: 1; }
.ss-view-grid > article[data-product-id] > .ss-card-controls > .ss-price-row         { order: 2; }
.ss-view-grid > article[data-product-id] > .ss-card-controls > [data-gated-controls] { order: 3; }

/* Change 2 — bigger product title in grid. Keeps the blade's line-clamp-2.
   min-height reserva SIEMPRE las 2 líneas del clamp: los títulos de una sola
   línea ya no desalinean las fotos/controles del resto de la fila (2026-07-03). */
.ss-view-grid > article[data-product-id] .ss-card-name h2 {
  font-size: 0.95rem;
  line-height: 1.25;
  font-weight: 600;
  min-height: 2.375rem;
}

/* Change 3 — denser card padding in grid (overrides the blade px/pt/pb). */
.ss-view-grid > article[data-product-id] > .ss-card-name {
  padding-left: 0.5rem;
  padding-right: 0.5rem;
  padding-top: 0.375rem;
}
.ss-view-grid > article[data-product-id] > .ss-card-controls {
  padding-left: 0.5rem;
  padding-right: 0.5rem;
  padding-top: 0.25rem;
  padding-bottom: 0.5rem;
  gap: 0.375rem;
}

/* Change 4 — price + stepper on one row (price/gate left, stepper right).
   flex-wrap so the narrowest (6-7 col) card drops the stepper to a second
   line instead of overflowing; margin-left:auto keeps it right-aligned. */
.ss-view-grid > article[data-product-id] > .ss-card-controls > .ss-price-row {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  column-gap: 0.5rem;
  row-gap: 0.25rem;
}
.ss-view-grid > article[data-product-id] > .ss-card-controls > .ss-price-row > [data-qty-stepper] {
  margin-left: auto;
}

/* Botón "Añadir" anclado al pie de la tarjeta (2026-07-03): .ss-card-controls
   ya es flex-col flex-1, así que el hueco sobrante de las tarjetas más cortas
   queda ENTRE los datos y el botón — todas las filas terminan alineadas.
   Para el invitado no cambia nada: su [data-gated-controls] va display:none
   inline y la tarjeta acaba en la fila de precio. */
.ss-view-grid > article[data-product-id] > .ss-card-controls > [data-gated-controls] {
  margin-top: auto;
}

/* ── List mode (rediseño 2026-07-03) ─────────────────────────────────────
   Paridad visual con la hoja de pedido: la lista entera va en un contenedor
   con borde y filas cebra; cada fila es un grid de DOS columnas con el
   TÍTULO de punta a punta en la fila 1 (sin truncar), la foto SOLA en la
   subcolumna izquierda de la fila 2 y, a su derecha, una línea que envuelve
   con REF · precio · selector · stepper · Añadir.
   En móvil (<640px) esa línea apila: REF / precio / selector+stepper /
   botón a ancho completo. El DOM de la tarjeta NO cambia (paridad
   blade/JS intacta); todo es CSS. Los wrappers intermedios de la tarjeta
   (.ss-card-ref-selector, .ss-price-row, [data-gated-controls],
   .ss-card-actions) se aplanan con display:contents y los hijos se
   ordenan con `order`. */

.ss-view-list {
  display: flex;
  flex-direction: column;
  gap: 0;
  border: 1px solid var(--ss-border, #E5E5E3);
  border-radius: 8px;
  overflow: hidden;
  background: var(--color-background, #FFFFFF);
}

.ss-view-list > article[data-product-id] {
  display: grid;
  grid-template-columns: var(--ss-card-img-mobile, 120px) minmax(0, 1fr);
  column-gap: 12px;
  row-gap: 6px;
  align-items: start;
  padding: 12px 16px;
  border: 0;                             /* neutraliza el aspecto tarjeta del modo grid */
  border-radius: 0;
  border-bottom: 1px solid var(--ss-border, #E5E5E3);
  box-shadow: none !important;           /* mata hover:shadow-md dentro de la lista */
  background: var(--color-background, #FFFFFF);
}
.ss-view-list > article[data-product-id]:nth-child(even) {
  background: var(--color-surface, #FAFAFA);   /* cebra, como la hoja de pedido */
}
.ss-view-list > article[data-product-id]:last-child {
  border-bottom: none;
}

/* Foto — sola en la subcolumna 1, centrada verticalmente */
.ss-view-list > article[data-product-id] > a:first-of-type {
  grid-column: 1;
  grid-row: 2;
  align-self: start;
  display: block;
  width: var(--ss-card-img-mobile, 120px);
  height: var(--ss-card-img-mobile, 120px);
  overflow: hidden;
  border-radius: 6px;
}
.ss-view-list > article[data-product-id] > a:first-of-type img,
.ss-view-list > article[data-product-id] > a:first-of-type > div {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* Título — arriba del todo, de punta a punta de la tarjeta (fila 1 completa),
   SIN truncar: puede ocupar varias líneas en móvil. */
.ss-view-list > article[data-product-id] > .ss-card-name {
  grid-column: 1 / -1;
  grid-row: 1;
  padding: 0;
}
.ss-view-list > article[data-product-id] > .ss-card-name h2 {
  font-size: 0.9375rem;
  line-height: 1.35;
  font-weight: 500;
  display: block;              /* pisa el -webkit-box del line-clamp-2 (sin límite de líneas) */
  white-space: normal;
  overflow: visible;
}

/* Línea de datos+controles — fila 2 de la columna 2 */
.ss-view-list > article[data-product-id] > .ss-card-controls {
  grid-column: 2;
  grid-row: 2;
  display: flex;
  flex-direction: row;   /* pisa el flex-col Tailwind del blade */
  flex-wrap: wrap;
  align-items: center;
  column-gap: 16px;
  row-gap: 8px;
  padding: 0;
}

/* Selector Caja/Unidad como RADIOS separados, igual que en la hoja de
   pedido (petición del dueño): fuera el aspecto de píldora segmentada;
   cada opción muestra su circulito y la etiqueta al lado. Aplica al modo
   lista Y al modo cuadrícula (2026-07-03: en cuadrícula la píldora
   segmentada se leía como un checkbox suelto "en blanco o marcado" según
   el producto); la PDP conserva el segmented. */
.ss-view-list .segmented-control,
.ss-view-grid .segmented-control {
  display: inline-flex;
  gap: 14px;
  border: 0 !important;
  border-radius: 0;
  background: transparent !important;
  overflow: visible;
}
.ss-view-list .segmented-option,
.ss-view-grid .segmented-option {
  padding: 0;
  min-height: 0;
  min-width: 0;
  justify-content: flex-start;
  gap: 6px;
  background: transparent !important;
  color: var(--ss-text, #2A2A2A) !important;
}
.ss-view-list .segmented-option + .segmented-option,
.ss-view-grid .segmented-option + .segmented-option { border-left: 0 !important; }
.ss-view-list .segmented-option::before,
.ss-view-grid .segmented-option::before {
  content: '';
  flex: 0 0 auto;
  width: 15px;
  height: 15px;
  border-radius: 50%;
  border: 2px solid var(--color-border-strong, #8C8C8C);
  background: var(--color-background, #FFFFFF);
  box-sizing: border-box;
}
.ss-view-list .segmented-option:has(input:checked)::before,
.ss-view-grid .segmented-option:has(input:checked)::before {
  border-width: 4.5px;                       /* look de radio nativo relleno */
  border-color: var(--ss-primary, #C73E1D);
}

/* El stepper necesita fondo propio: sobre las filas cebra (beige) no se
   distinguía dónde empezaban los botones − / +. */
.ss-view-list [data-qty-stepper] {
  background: var(--color-background, #FFFFFF);
}

/* Aplanar wrappers: sus hijos pasan a ser items de la línea.
   OJO: [data-gated-controls] lleva display:none INLINE para invitados —
   el estilo inline gana a esta regla, así que sigue oculto para ellos. */
.ss-view-list > article[data-product-id] > .ss-card-controls > .ss-card-ref-selector,
.ss-view-list > article[data-product-id] > .ss-card-controls > [data-gated-controls],
.ss-view-list .ss-price-row,
.ss-view-list .ss-card-actions {
  display: contents;
}

/* Orden dentro de la línea: REF · precio (o "Ver precio") · Caja/Unidad ·
   stepper · Añadir. Los placeholders ocultos (inline display:none) no
   participan. */
.ss-view-list .ss-card-controls .ss-product-ref                    { order: 1; margin: 0; }
.ss-view-list .ss-card-controls .ss-price-block,
.ss-view-list .ss-card-controls .ss-price-gate                     { order: 2; text-align: left; }
.ss-view-list .ss-card-controls fieldset                           { order: 3; margin: 0 !important; }
.ss-view-list .ss-card-controls [data-qty-stepper]                 { order: 4; }
.ss-view-list .ss-card-actions > [data-add-to-cart],
.ss-view-list .ss-card-actions > .ss-out-of-stock                  { order: 5; }

/* ≥640px: foto 96 y controles compactos en línea */
@media (min-width: 640px) {
  .ss-view-list > article[data-product-id] {
    grid-template-columns: 96px minmax(0, 1fr);
  }
  .ss-view-list > article[data-product-id] > a:first-of-type {
    width: 96px;
    height: 96px;
  }
  .ss-view-list .ss-card-actions > [data-add-to-cart],
  .ss-view-list .ss-card-actions > .ss-out-of-stock {
    width: auto;
    min-width: 104px;
    min-height: 36px;
  }
  .ss-view-list [data-qty-stepper] .qty-dec,
  .ss-view-list [data-qty-stepper] .qty-inc { width: 36px !important; height: 36px !important; }
  .ss-view-list [data-qty-stepper] .qty-input { height: 36px !important; }
}

/* <640px: la columna 2 apila por filas — REF / precio / selector /
   stepper+Añadir juntos en la última fila. Targets táctiles 44px. */
@media (max-width: 639px) {
  /* Para que [− 1 +][ Añadir ] compartan fila en 390px hace falta columna:
     foto a 104px (la columna derecha pasa de 177 a 193px), stepper compacto
     (40+30+40 = 110px), hueco 10px y pisar el min-width:72px INLINE del
     botón con !important. En pantallas aún más estrechas, flex-wrap baja el
     botón a fila completa sin romper nada. */
  .ss-view-list > article[data-product-id] {
    grid-template-columns: 104px minmax(0, 1fr);
  }
  .ss-view-list > article[data-product-id] > a:first-of-type {
    width: 104px;
    height: 104px;
  }
  .ss-view-list > article[data-product-id] > .ss-card-controls { column-gap: 10px; }
  .ss-view-list .ss-card-controls .ss-product-ref  { flex: 1 0 100%; }
  .ss-view-list .ss-card-controls .ss-price-block,
  .ss-view-list .ss-card-controls .ss-price-gate   { flex: 1 0 100%; }
  .ss-view-list .ss-card-controls fieldset         { flex: 1 0 100%; }
  .ss-view-list .ss-card-actions > [data-add-to-cart],
  .ss-view-list .ss-card-actions > .ss-out-of-stock {
    flex: 1 1 auto;            /* comparte fila con el stepper */
    width: auto;
    min-width: 0 !important;   /* pisa el min-width:72px inline del blade */
    min-height: 40px !important;
  }
  .ss-view-list [data-qty-stepper] .qty-dec,
  .ss-view-list [data-qty-stepper] .qty-inc { width: 40px !important; height: 40px !important; }
  .ss-view-list [data-qty-stepper] .qty-input { height: 40px !important; width: 30px !important; }
}


/* ── Toggle button styles ───────────────────────────────────────────────── */

.ss-view-toggle-group {
  display: inline-flex;
  gap: 4px;
  align-items: center;
}

/* El JS recoloca el aviso ex-IVA como hermano del toggle-group dentro del
   form de la grid, donde el space-y-4 de la sección ya no le alcanza. */
#ss-vat-notice {
  margin-top: 0.625rem;
  margin-bottom: 0.25rem;
}

.ss-view-toggle-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  border: 1px solid var(--ss-border, #E5E5E3);
  border-radius: 4px;
  background: transparent;
  color: var(--ss-muted, #6B6960);
  cursor: pointer;
  transition: background 0.15s, color 0.15s, border-color 0.15s;
  padding: 0;
}

.ss-view-toggle-btn[aria-pressed="true"] {
  background: var(--ss-primary, #C73E1D);
  border-color: var(--ss-primary, #C73E1D);
  color: #ffffff;
}

.ss-view-toggle-btn:hover:not([aria-pressed="true"]) {
  border-color: var(--ss-primary, #C73E1D);
  color: var(--ss-primary, #C73E1D);
}

.ss-view-toggle-btn:focus-visible {
  outline: 2px solid var(--ss-primary, #C73E1D);
  outline-offset: 2px;
}


/* --- Card action cluster: stepper a la derecha, boton Anadir debajo (2026-07) --- */
.ss-card-actions {
  display: flex;
  flex-direction: column;
  gap: 6px;
  margin-top: 4px;
}
.ss-card-actions > [data-add-to-cart],
.ss-card-actions > .ss-out-of-stock {
  width: 100%;            /* boton a ancho completo (el stepper ya no vive aqui) */
  text-align: center;
}


/* --- Cart badge "ya está en el carrito" (cart-badge-v1 §4) -----------------
   Chip informativo. Fondo claro + texto oscuro (--ss-text sobre fondo blanco:
   contraste WCAG AA holgado, INDEPENDIENTE del --ss-primary de cada tenant, que
   varía). Icono en --ss-primary (decorativo, aria-hidden). Sin colores literales
   nuevos: sólo tokens ya usados en esta hoja. */
.ss-cart-badge {
  position: absolute;                 /* overlay esquina de la imagen en la card */
  top: 6px;
  left: 6px;
  z-index: 2;
  display: inline-flex;
  align-items: center;
  gap: 4px;
  max-width: calc(100% - 12px);
  padding: 3px 8px;
  border-radius: 999px;
  background: var(--color-background, #FFFFFF);
  border: 1px solid var(--ss-border, #E5E5E3);
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.14);
  font-size: 0.6875rem;
  font-weight: 600;
  line-height: 1.1;
  color: var(--ss-text, #2A2A2A);
  white-space: nowrap;
  pointer-events: none;               /* informativo: no interceptar el click a la ficha */
}

/* El atributo [hidden] debe ganar al display:inline-flex de arriba (misma feature,
   d3 hace removeAttribute('hidden') para mostrarlo en vivo). */
.ss-cart-badge[hidden] { display: none; }

.ss-cart-badge-icon {
  flex-shrink: 0;
  color: var(--ss-primary, #C73E1D);
}

.ss-cart-badge [data-cart-badge-text] {
  overflow: hidden;
  text-overflow: ellipsis;
}

/* La card necesita contexto de posicionamiento para el overlay en esquina.
   position:relative sólo establece el containing block; no altera el layout
   flex/grid existente ni el reordenado order-* de los hijos. */
.ss-view-grid > article[data-product-id],
.ss-view-list > article[data-product-id] { position: relative; }

/* Variante inline: PDP + fila de hoja de pedido. Fluye con el contenido, sin
   overlay ni sombra; recupera pointer-events por si el badge llevara texto
   seleccionable. */
.ss-cart-badge--inline {
  position: static;
  max-width: 100%;
  box-shadow: none;
  pointer-events: auto;
  margin-top: 4px;
}