/* Ficha librería / producto — galería de 6 columnas (imagen principal cuadrada de 708 × 708 y miniaturas de 1 columna) junto al panel de venta en las columnas 8 a 12
   (hueco de 8 px). Dentro del panel, las filas llevan el nombre en 2 columnas y el contenido en 3. Estilos propios: solo dependen del sistema de diseño base. */
.cca-v2 .cca-v2__product-sheet { scroll-margin-top: 100px; padding-bottom: 8px; }
.cca-v2 .cca-v2__product-sheet--gray { --cca-v2-surface: var(--cca-v2-gray-200); --cca-v2-ink: #000; color: var(--cca-v2-ink); background: var(--cca-v2-surface); }
.cca-v2 .cca-v2__product-sheet-grid { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: 8px; align-items: start; padding-top: 8px; }
.cca-v2 .cca-v2__product-sheet-gallery { grid-column: 1 / span 6; display: flex; flex-direction: column; gap: 8px; min-width: 0; }
.cca-v2 .cca-v2__product-sheet-info { grid-column: 8 / span 5; min-width: 0; }

/* Imagen principal: cuadrada sobre gris 200; el producto se ve entero. Sin imagen, queda el cuadrado gris vacío. Miniaturas: 1 columna (111 px) cuadradas, la actual con un borde negro. */
.cca-v2 .cca-v2__product-sheet-main { aspect-ratio: 1 / 1; overflow: hidden; border-radius: var(--cca-v2-radius); background: var(--cca-v2-gray-200); }
.cca-v2 .cca-v2__product-sheet-image { display: block; width: 100%; height: 100%; object-fit: contain; }
.cca-v2 .cca-v2__product-sheet-thumbs { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 8px; margin: 0; padding: 0; list-style: none; }
.cca-v2 .cca-v2__product-sheet-thumb { position: relative; display: block; aspect-ratio: 1 / 1; overflow: hidden; border-radius: var(--cca-v2-radius); background: var(--cca-v2-gray-200); color: inherit; }
.cca-v2 .cca-v2__product-sheet-thumb-image { display: block; width: 100%; height: 100%; object-fit: cover; }
/* Seleccionada: un aro negro de 1,5 px separado 3 px de la imagen, que sigue sus esquinas. En hover, un aro gris. */
.cca-v2 .cca-v2__product-sheet-thumb { outline: 1.5px solid transparent; outline-offset: 3px; transition: outline-color 150ms ease; }
.cca-v2 .cca-v2__product-sheet-thumb[aria-current="true"] { outline-color: var(--cca-v2-black); }
@media (hover: hover) { .cca-v2 .cca-v2__product-sheet-thumb:not([aria-current="true"]):hover { outline-color: var(--cca-v2-gray-400); } }
.cca-v2 .cca-v2__product-sheet-thumb:focus-visible { outline: 2px solid currentColor; outline-offset: 3px; }

/* Panel de venta: precio, stock, cantidad y botón. Cada bloque lleva una línea de 0.5 px (gris 600) arriba: 16 px de aire debajo de ella en el precio y 12 px en las filas. */
.cca-v2 .cca-v2__product-sheet-buy { container-type: inline-size; padding: 16px 0 32px; border-top: 1px solid rgb(0 0 0 / 20%); }
.cca-v2 .cca-v2__product-sheet-row { padding: 12px 0 32px; border-top: 1px solid rgb(0 0 0 / 20%); }
.cca-v2 .cca-v2__product-sheet-price { margin: 0 0 16px; font-family: var(--cca-v2-font-headline); font-size: 32px; font-weight: var(--cca-v2-weight-regular); line-height: 1.1; letter-spacing: 0; }
/* Las mismas columnas que las filas de abajo (5 en el panel): el stock en 2 y la cantidad con el botón en 3. */
.cca-v2 .cca-v2__product-sheet-buy-row { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); align-items: center; gap: 8px; }
/* El stock ocupa las 2 columnas del nombre (40 % del panel) para que la cantidad arranque en la tercera. */
.cca-v2 .cca-v2__product-sheet-stock { display: flex; grid-column: 1 / span 2; min-width: 0; }
.cca-v2 .cca-v2__product-sheet-status { display: inline-flex; align-items: center; box-sizing: border-box; height: 24px; gap: 4px; padding: 0 8px; border-radius: 40px; font-family: var(--cca-v2-font-mono); font-size: var(--cca-v2-type-tag); font-weight: var(--cca-v2-weight-regular); line-height: 1; letter-spacing: 0; text-transform: uppercase; text-box: trim-both cap alphabetic; }
/* Stock: como la etiqueta de estado de las cards de producto. Oferta y personalizado, píldora negra; disponible y sin stock, blanca con un círculo de 8 px. */
.cca-v2 :is(.cca-v2__product-sheet-status--offer, .cca-v2__product-sheet-status--custom) { background: var(--cca-v2-black); color: var(--cca-v2-white); }
.cca-v2 :is(.cca-v2__product-sheet-status--available, .cca-v2__product-sheet-status--out) { padding: 0 6px; border: 0.5px solid var(--cca-v2-gray-600); background: var(--cca-v2-white); color: var(--cca-v2-black); }
.cca-v2 :is(.cca-v2__product-sheet-status--available, .cca-v2__product-sheet-status--out)::before { content: ""; flex: 0 0 8px; width: 8px; height: 8px; border-radius: 50%; }
.cca-v2 .cca-v2__product-sheet-status--available::before { background: #00ff00; /* verde del diseño; el sistema no tiene un verde */ }
.cca-v2 .cca-v2__product-sheet-status--out { color: var(--cca-v2-gray-800); }
.cca-v2 .cca-v2__product-sheet-status--out::before { background: var(--cca-v2-gray-400); }

/* Cantidad: "Cantidad" (Geist Mono 12 px, mayúsculas, peso 500) y, a 20 px, el selector agrupado de 69 px como máximo: los signos en los extremos y el número en el espacio que queda (unos 20 px a cada lado con una cifra, y entra con más) (peso 400) y el número (peso 300, Stack Sans Text 16 px). */
.cca-v2 .cca-v2__product-sheet-actions { display: flex; grid-column: 3 / span 3; justify-content: space-between; align-items: center; gap: 8px; min-width: 0; }
.cca-v2 .cca-v2__product-sheet-qty { display: inline-flex; align-items: center; gap: 20px; }
.cca-v2 .cca-v2__product-sheet-cart { margin-left: auto; }
.cca-v2 .cca-v2__product-sheet-qty-control { display: flex; flex: 0 1 auto; justify-content: space-between; align-items: center; width: 69px; max-width: 69px; min-width: 0; }
.cca-v2 .cca-v2__product-sheet-qty-label { font-family: var(--cca-v2-font-mono); font-size: var(--cca-v2-type-label, 12px); font-weight: var(--cca-v2-weight-medium); line-height: 1; text-transform: uppercase; }
.cca-v2 .cca-v2__product-sheet-qty-button { position: relative; display: flex; justify-content: center; align-items: center; height: 24px; margin: 0; padding: 0; border: 0; background: transparent; color: inherit; font-family: var(--cca-v2-font-mono); font-size: 14px; font-weight: var(--cca-v2-weight-regular); line-height: 1; cursor: pointer; appearance: none; }
.cca-v2 .cca-v2__product-sheet-qty-button:focus-visible { outline: 2px solid currentColor; outline-offset: 2px; }
@media (hover: hover) { .cca-v2 .cca-v2__product-sheet-qty-button:hover { opacity: .5; } }
.cca-v2 .cca-v2__product-sheet-qty-input { flex: 1 1 0; width: 0; min-width: 0; margin: 0; padding: 0; border: 0; background: transparent; color: inherit; font-family: var(--cca-v2-font-text); font-size: var(--cca-v2-type-body); font-weight: var(--cca-v2-weight-light); line-height: 1.4; text-align: center; appearance: textfield; -moz-appearance: textfield; }
.cca-v2 .cca-v2__product-sheet-qty-input::-webkit-outer-spin-button,
.cca-v2 .cca-v2__product-sheet-qty-input::-webkit-inner-spin-button { margin: 0; appearance: none; -webkit-appearance: none; }
.cca-v2 .cca-v2__product-sheet-qty-input:focus-visible { outline: 0; } /* Al hacer clic en el número no se dibuja ningún recuadro; el cursor de texto ya indica el foco. */

/* Filas: el nombre en 2 columnas y el contenido en 3 (de las 5 del panel). Nombre en Stack Sans Text 16 px negro; contenido en Light gris 800. */
.cca-v2 .cca-v2__product-sheet-row { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 8px; }
.cca-v2 .cca-v2__product-sheet-label { grid-column: 1 / span 2; min-width: 0; margin: 0; font-family: var(--cca-v2-font-text); font-size: var(--cca-v2-type-body); font-weight: var(--cca-v2-weight-regular); line-height: 1.4; letter-spacing: 0; }
.cca-v2 .cca-v2__product-sheet-content { grid-column: 3 / span 3; min-width: 0; }
.cca-v2 .cca-v2__product-sheet-benefit { margin: 0; }
.cca-v2 .cca-v2__product-sheet-note { margin: 12px 0 0; color: var(--cca-v2-gray-800); font-size: 12px; font-weight: var(--cca-v2-weight-light); line-height: 1.4; }
.cca-v2 .cca-v2__product-sheet-text { margin: 0; color: var(--cca-v2-gray-800); font-family: var(--cca-v2-font-text); font-size: var(--cca-v2-type-body); font-weight: var(--cca-v2-weight-light); line-height: 1.4; letter-spacing: 0; overflow-wrap: anywhere; }
.cca-v2 .cca-v2__product-sheet-text + .cca-v2__product-sheet-text { margin-top: 0; }
.cca-v2 .cca-v2__product-sheet-info .cca-v2__product-sheet-content > .cca-v2__product-sheet-text:only-child { margin-top: 0; }
/* "Asociate ahora!": enlace en Geist Mono 12 px, mayúsculas y subrayado. */
.cca-v2 .cca-v2__product-sheet-join { display: inline-block; color: inherit; font-family: var(--cca-v2-font-mono); font-size: var(--cca-v2-type-label, 12px); font-weight: var(--cca-v2-weight-medium); line-height: 1.4; text-transform: uppercase; text-decoration: underline; text-underline-offset: 2px; }
@media (hover: hover) { .cca-v2 .cca-v2__product-sheet-join:hover { opacity: .5; } }
.cca-v2 .cca-v2__product-sheet-join:focus-visible { outline: 2px solid currentColor; outline-offset: 3px; }

/* Panel angosto (menos de 534 px: en 3 columnas ya no caben la cantidad y el botón): el stock arriba y debajo la cantidad a la izquierda y el botón a la derecha, a todo el ancho. */
@container (max-width: 533px) {
  .cca-v2 .cca-v2__product-sheet-buy-row:has(.cca-v2__product-sheet-qty) :is(.cca-v2__product-sheet-stock, .cca-v2__product-sheet-actions) { grid-column: 1 / -1; }
}
/* De 768 a 1024 px: dos columnas iguales (6 y 6), la galería a la izquierda y el panel a la derecha. */
@media (min-width: 768px) and (max-width: 1024px) {
  .cca-v2 .cca-v2__product-sheet-info { grid-column: 7 / span 6; }
}
/* Móvil (hasta 767 px; desde 768 px vuelven las dos columnas): la galería a todo el ancho y el panel debajo, con las filas de nombre y contenido en una sola columna. */
@media (max-width: 767px) {
  .cca-v2 .cca-v2__product-sheet-gallery, .cca-v2 .cca-v2__product-sheet-info { grid-column: 1 / -1; }
  .cca-v2 .cca-v2__product-sheet-info { margin-top: 16px; }
  .cca-v2 .cca-v2__product-sheet-thumbs { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .cca-v2 .cca-v2__product-sheet-row { grid-template-columns: minmax(0, 1fr); gap: 8px; }
  .cca-v2 .cca-v2__product-sheet-label, .cca-v2 .cca-v2__product-sheet-content { grid-column: 1; }
  .cca-v2 .cca-v2__product-sheet-buy-row:has(.cca-v2__product-sheet-qty) :is(.cca-v2__product-sheet-stock, .cca-v2__product-sheet-actions) { grid-column: 1 / -1; }
}
@media (prefers-reduced-motion: reduce) { .cca-v2 .cca-v2__product-sheet-thumb { transition: none; } }

@media (max-width: 1024px) {
  .cca-v2 :is(.cca-v2__product-sheet-buy, .cca-v2__product-sheet-row) { padding-bottom: 24px; }
}

/* Título opcional con el nombre del producto: el estilo del banner de solo texto (la clase de titular fija tamaño y tipografía) y, como él en escritorio, 200 px de relleno arriba y 80 px abajo. En móvil, 32 px arriba y 24 px abajo. */
.cca-v2 .cca-v2__product-sheet-heading-title { margin: 0; padding-block: 200px 80px; overflow-wrap: anywhere; max-width: calc((100% - 88px) / 12 * 7 + 48px); } /* Máximo 7 de las 12 columnas (7 columnas + 6 huecos de 8 px); lo que sigue baja de línea. */
@media (max-width: 767px) { .cca-v2 .cca-v2__product-sheet-heading-title { padding-block: 32px 24px; max-width: none; } }
/* En escritorio el título ya trae sus 200 px de relleno para librar el header: el contenedor del módulo no suma el suyo (ni los 160 px de una página sin hero). Abajo tampoco: el espacio hasta el módulo siguiente lo pone ese módulo. */
@media (min-width: 768px) {
  .cca-v2 .cca-v2__module-slot[data-cca-module="product_sheet"],
  .cca-v2.cca-v2__page #cca-v2-main > .cca-v2__module-stack[data-without-hero] > .cca-v2__module-slot[data-cca-module="product_sheet"]:first-child { padding-block: 0; }
}
/* De 768 a 1099 px (header compacto): el título necesita menos relleno que en escritorio, y los módulos de la página de un producto usan la separación de móvil (160 → 80, 80 → 40 px). */
@media (min-width: 768px) and (max-width: 1099px) {
  .cca-v2 .cca-v2__product-sheet-heading-title { padding-block: 120px 48px; }
  .cca-v2.single-product .cca-v2__module-slot { --cca-module-space: var(--cca-module-space-mobile, var(--cca-v2-space-40)); --cca-module-space-end: var(--cca-module-after-mobile, var(--cca-v2-space-20)); }
}

/* Avisos de WooCommerce en la página de un producto ("añadido al carrito", sin existencias…): un bloque a todo el ancho del contenedor, debajo del header y encima del título, sin viñetas. Sin aviso el contenedor no ocupa nada. */
.cca-v2.single-product .woocommerce-notices-wrapper:has(:is(.woocommerce-error, .woocommerce-message, .woocommerce-info)) { width: calc(100% - var(--cca-v2-page-gutter) * 2); max-width: var(--cca-v2-container-width); margin-inline: auto; padding-top: 144px; }
.cca-v2.single-product .woocommerce-notices-wrapper:has(:is(.woocommerce-error, .woocommerce-message, .woocommerce-info)) ~ :is(.cca-v2__module-stack, .cca-v2__module-slot) .cca-v2__product-sheet-heading-title { padding-top: 48px; } /* El aviso ya libra el header. */
.cca-v2.single-product .woocommerce-notices-wrapper :is(.woocommerce-error, .woocommerce-message, .woocommerce-info) { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 24px; margin: 0 0 8px; padding: 12px 24px; border: 0; border-radius: 28px; list-style: none; color: #000; background: var(--cca-v2-gray-200); font-size: var(--cca-v2-type-body); line-height: 1.4; }
.cca-v2.single-product .woocommerce-notices-wrapper .woocommerce-error { display: grid; gap: 8px; }
.cca-v2.single-product .woocommerce-notices-wrapper :is(.woocommerce-error, .woocommerce-message, .woocommerce-info)::before { content: none; }
/* Los errores llevan un círculo negro con «!» a la izquierda de cada mensaje. */
.cca-v2.single-product .woocommerce-notices-wrapper .woocommerce-error li { display: flex; align-items: center; gap: 16px; }
.cca-v2.single-product .woocommerce-notices-wrapper .woocommerce-error li::before { content: "!"; flex: 0 0 28px; display: grid; place-items: center; height: 28px; border-radius: 50%; color: #fff; background: #000; font-family: var(--cca-v2-font-mono); font-size: var(--cca-v2-type-label); line-height: 1; }
.cca-v2.single-product .woocommerce-notices-wrapper a:not(.button) { color: inherit; text-underline-offset: 3px; }
.cca-v2.single-product .woocommerce-notices-wrapper .button { order: 2; margin-left: auto; padding: 12px 24px; border: 0; border-radius: 50px; color: #fff; background: #000; font-family: var(--cca-v2-font-mono); font-size: var(--cca-v2-type-label); line-height: 1; text-decoration: none; text-transform: uppercase; }
@media (hover: hover) { .cca-v2.single-product .woocommerce-notices-wrapper .button:hover { opacity: .5; } }
@media (max-width: 1099px) { .cca-v2.single-product .woocommerce-notices-wrapper:has(:is(.woocommerce-error, .woocommerce-message, .woocommerce-info)) { padding-top: 104px; } }
@media (max-width: 767px) { .cca-v2.single-product .woocommerce-notices-wrapper .button { margin-left: 0; } }