/* =========================================================
   BASIC THEME — skin EasyStore (css/easystore.css)
   =========================================================
   HOJA INDEPENDIENTE con TODO el estilo de EasyStore: minimalista
   editorial (referencia Zara): blanco, hairlines, mayúsculas pequeñas
   con tracking, cero radios, botones rectos, mucho aire.

   Para el look Zara puro, en el custom.css del proyecto:
   :root { --paper:#ffffff; --ink:#111111; }

   FUENTES DE SELECTORES — aquí no se inventa nada:
   (1) markup real capturado (ficha de producto + carrito header,
       2026-07-18) — bloques marcados [M].
   (2) selectores que estila homify, el template oficial EasyStore
       de JoomShaper (theme.scss) — bloques marcados [H].
   Lo no cubierto por (1) o (2) sigue en TODO al final.

   CONTRATO (misma regla que nav.css): SOLO tokens de :root con
   fallback — ninguna clase de styles.css. Única dependencia cruzada
   permitida y documentada: §ES2 usa .topbar (nav) como ámbito del
   carrito del header.

   PRUDENCIA: checkout y overlays traen su propia maquinaria CSS/JS
   (Alpine). Aquí solo color/tipografía/espaciado — JAMÁS display,
   position u overflow de sus contenedores funcionales.

   ─────────────────────────────────────────────────────────
   ÍNDICE
   ─────────────────────────────────────────────────────────
   §ES1  Base: etiquetas, utilidades, inputs numéricos
   §ES2  Carrito del header (ámbito .topbar) [M]
   §ES3  Galería de la ficha + zoom overlay [M]
   §ES4  Título · categoría · precio · SKU [M+H]
   §ES5  Variantes (tallas y color) [M+H]
   §ES6  Cantidad [M]
   §ES7  Disponibilidad + mensajes [M]
   §ES8  Botones comprar / wishlist / review [M+H]
   §ES9  Acordeón de la ficha (sppb, ámbito tienda) [M]
   §ES10 Catálogo: collection items + hover carrito [H]
   §ES11 Filtros de listado [H]
   §ES12 Drawer del carrito · mini cart · checkout [H]
   §ES13 Páginas EasyStore (wrapper, cuenta) [H]
   §ES14 TODO pendiente de markup real
   ========================================================= */


/* ---------- §ES1 · Base: etiquetas, utilidades, inputs ---------- */
/* Etiqueta pequeña en mayúsculas — la voz del skin (Zara-like). */
.easystore-block-label,
.easystore-option-name,
.easystore-option-value-name,
.easystore-product-sku-title,
.easystore-specification-title,
.easystore-specification-key {
  font-family: var(--body, sans-serif);
  font-size: 11px;
  font-weight: 400;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--ink, #161513);
}

.easystore-option-name-separator { color: var(--mute, #6f6b64); }
.easystore-option-value-name     { color: var(--mute, #6f6b64); }

/* Utilidades propias de EasyStore que deben seguir ocultas */
.easystore-hide { display: none !important; }

.easystore-visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}

/* Inputs numéricos sin flechas de spinner (cantidad) */
.easystore-product-quantity::-webkit-outer-spin-button,
.easystore-product-quantity::-webkit-inner-spin-button {
  -webkit-appearance: none;
  margin: 0;
}

.easystore-product-quantity[type="number"] { -moz-appearance: textfield; appearance: textfield; }


/* ---------- §ES2 · Carrito del header (ámbito .topbar) [M] ---------- */
/* ÚNICA dependencia cruzada con el nav: el icono vive dentro del
   topbar y hereda su tema dark (el SVG usa stroke currentColor). */
.topbar .easystore-cart-icon {
  position: relative;
  display: inline-flex;
  align-items: center;
  color: var(--ink, #161513);
  text-decoration: none;
  padding: 6px;
  transition: color var(--t-theme, 0.35s ease), opacity var(--t-ui, 0.2s ease);
}

.topbar .easystore-cart-icon:hover { opacity: 0.65; }

.topbar .easystore-cart-icon .easystore-svg { display: block; }

.topbar .easystore-cart-icon .easystore-svg svg {
  display: block;
  width: 20px;
  height: auto;
}

.topbar .easystore-cart-count {
  position: absolute;
  top: -2px;
  right: -4px;
  min-width: 16px;
  height: 16px;
  padding-inline: 4px;
  border-radius: 8px;
  background-color: var(--accent, #161513);
  color: var(--paper, #ffffff);
  font-family: var(--mono, monospace);
  font-size: 10px;
  line-height: 16px;
  text-align: center;
}

body[data-theme="dark"] .topbar .easystore-cart-count {
  background-color: var(--dark-ink, #f4f2ee);
  color: var(--dark-paper, #161513);
}

/* Neutralización del chrome SPBuilder dentro del topbar (el carrito
   llega como módulo del builder): ídem nav.css §N5 pero para el addon */
.topbar .easystore-cart-icon + style { display: none; }


/* ---------- §ES3 · Galería de la ficha + zoom overlay [M] ---------- */
/* Imágenes apiladas a sangre de columna, separación mínima (Zara). */
.easystore-product-gallery {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.easystore-product-gallery .easystore-product-image { margin: 0; }

.easystore-product-gallery .easystore-product-image img {
  display: block;
  width: 100%;
  height: auto;
}

.easystore-zoom-cursor { cursor: zoom-in; }

/* Overlay de zoom (se teletransporta al body): SOLO piel — el
   posicionamiento y la lógica son de EasyStore/Alpine. */
.easystore-zoom-gallery-backdrop { background-color: var(--paper, #ffffff); }

.easystore-zoom-gallery-preview img { cursor: zoom-in; }

.easystore-zoom-gallery-button {
  background: none;
  border: 0;
  cursor: pointer;
  opacity: 0.8;
  transition: opacity var(--t-ui, 0.2s ease);
}

.easystore-zoom-gallery-button:hover { opacity: 1; }

.easystore-zoom-gallery-thumb {
  background: none;
  border: 1px solid transparent;
  padding: 2px;
  cursor: pointer;
}

.easystore-zoom-gallery-thumb.is-active { border-color: var(--ink, #161513); }

.easystore-zoom-gallery-thumb img { display: block; }


/* ---------- §ES4 · Título · categoría · precio · SKU [M+H] ---------- */
/* Título en cards de catálogo (base) y en ficha (h4, algo mayor).
   Zara: nombre discreto, precio plano — sin jerarquías gritonas. */
.easystore-product-title {
  font-family: var(--body, sans-serif);
  font-size: 0.85rem;
  font-weight: 400;
  letter-spacing: 0.02em;
  line-height: 1.35;
  margin: 0 0 4px;
}

.easystore-product-title a {
  color: var(--ink, #161513);
  text-decoration: none;
}

.easystore-product-title a:hover { text-decoration: underline; text-underline-offset: 3px; }

h4.easystore-product-title {
  font-size: 1.05rem;
  font-weight: 500;
  margin: 0 0 6px;
}

.easystore-product-category {
  font-family: var(--body, sans-serif);
  font-size: 11px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--mute, #6f6b64);
  margin: 0 0 4px;
}

.easystore-product-category a { color: inherit; text-decoration: none; }
.easystore-product-category a:hover { color: var(--ink, #161513); }

/* Precio plano: entero, decimal y símbolo al mismo tamaño (Zara). */
.easystore-product-price {
  font-family: var(--body, sans-serif);
  font-size: 0.9rem;
  font-weight: 400;
  color: var(--ink, #161513);
}

.easystore-product-price-block {
  display: flex;
  align-items: baseline;
  gap: 10px;
}

.easystore-price-current .easystore-price-whole,
.easystore-price-current .easystore-price-decimal,
.easystore-price-current .easystore-price-symbol {
  font-size: 1em;
  font-weight: inherit;
}

.easystore-price-original {
  color: var(--mute, #6f6b64);
  text-decoration: line-through;
  font-size: 0.85em;
}

.easystore-product-sku {
  font-family: var(--mono, monospace);
  font-size: 11px;
  color: var(--mute, #6f6b64);
}


/* ---------- §ES5 · Variantes (tallas y color) [M+H] ---------- */
.easystore-product-variants { margin-block: 18px; }

.easystore-product-variant { margin-bottom: 14px; }

.easystore-variant-title { margin-bottom: 10px; }

.easystore-variant-options {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

/* Talla como caja recta hairline; seleccionada = tinta invertida.
   El input radio se oculta visualmente (la label sigue siendo
   clicable y el @change de Alpine dispara igual). */
.easystore-variant-option label {
  display: block;
  cursor: pointer;
  margin: 0;
}

.easystore-variant-option input[type="radio"] {
  position: absolute;
  width: 1px;
  height: 1px;
  opacity: 0;
}

.easystore-variant-option .easystore-variant-option-value {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 44px;
  min-height: 38px;
  padding: 4px 12px;
  border: 1px solid var(--rule, rgba(0, 0, 0, 0.14));
  border-radius: 0;
  font-family: var(--body, sans-serif);
  font-size: 12px;
  letter-spacing: 0.04em;
  color: var(--ink, #161513);
  transition: border-color var(--t-ui, 0.2s ease), background-color var(--t-ui, 0.2s ease), color var(--t-ui, 0.2s ease);
}

.easystore-variant-option label:hover .easystore-variant-option-value { border-color: var(--ink, #161513); }

.easystore-variant-option input[type="radio"]:checked + .easystore-variant-option-value {
  background-color: var(--ink, #161513);
  border-color: var(--ink, #161513);
  color: var(--paper, #ffffff);
}

.easystore-variant-option input[type="radio"]:focus-visible + .easystore-variant-option-value {
  outline: 2px solid var(--accent, #161513);
  outline-offset: 2px;
}

/* Variante de color [H]: swatch redondo con aro al seleccionar */
.easystore-variant-option-color .easystore-variant-option-value {
  min-width: 26px;
  min-height: 26px;
  padding: 0;
  border-radius: 50%;
}

.easystore-variant-option-color input[type="radio"]:checked + .easystore-variant-option-value {
  box-shadow: 0 0 0 2px var(--paper, #ffffff), 0 0 0 3px var(--ink, #161513);
}


/* ---------- §ES6 · Cantidad [M] ---------- */
.easystore-quantity-container { margin-block: 14px; }

.easystore-quantity-selector {
  display: inline-flex;
  align-items: stretch;
  border: 1px solid var(--rule, rgba(0, 0, 0, 0.14));
}

.easystore-quantity-selector-btn {
  width: 38px;
  background: none;
  border: 0;
  font-size: 15px;
  color: var(--ink, #161513);
  cursor: pointer;
  transition: opacity var(--t-ui, 0.2s ease);
}

.easystore-quantity-selector-btn:hover:not(:disabled) { opacity: 0.6; }
.easystore-quantity-selector-btn:disabled { color: var(--mute, #6f6b64); cursor: default; opacity: 0.5; }

.easystore-quantity-selector .easystore-product-quantity {
  width: 48px;
  max-width: 48px;
  padding: 9px 0;
  border: 0;
  border-inline: 1px solid var(--rule, rgba(0, 0, 0, 0.14));
  border-radius: 0;
  background: none;
  text-align: center;
  font-family: var(--body, sans-serif);
  font-size: 13px;
  color: var(--ink, #161513);
}

.easystore-quantity-selector .easystore-product-quantity:focus-visible { outline: none; }


/* ---------- §ES7 · Disponibilidad + mensajes [M] ---------- */
.easystore-product-inventory {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  font-size: 11px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--mute, #6f6b64);
  margin-block: 6px;
}

.easystore-product-inventory-icon {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background-color: var(--mute, #6f6b64);
}

.easystore-product-inventory-icon.easystore-available-stock { background-color: #3f7a52; }
.easystore-product-inventory-icon.easystore-no-stock        { background-color: #a4453a; }

.easystore-qty-message {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 11px;
  color: var(--mute, #6f6b64);
  margin-top: 6px;
}

.easystore-qty-message-error { color: #a4453a; }

.easystore-qty-message-icon { font-size: 11px; }


/* ---------- §ES8 · Botones comprar / wishlist / review [M+H] ---------- */
/* Añadir al carrito [H]: bloque sólido tinta, recto, mayúsculas. */
.easystore-btn-add-to-cart {
  display: block;
  width: 100%;
  padding: 14px 24px;
  background-color: var(--ink, #161513);
  color: var(--paper, #ffffff);
  border: 1px solid var(--ink, #161513);
  border-radius: 0;
  font-family: var(--body, sans-serif);
  font-size: 12px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  text-align: center;
  cursor: pointer;
  transition: background-color var(--t-ui, 0.2s ease), color var(--t-ui, 0.2s ease);
}

.easystore-btn-add-to-cart:hover {
  background-color: transparent;
  color: var(--ink, #161513);
}

/* Wishlist [M]: enlace discreto subrayado, sin caja (Zara). */
.easystore-btn-add-to-wishlist {
  display: inline-block;
  padding: 10px 0;
  background: none;
  border: 0;
  border-radius: 0;
  font-family: var(--body, sans-serif);
  font-size: 11px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--ink, #161513);
  text-decoration: underline;
  text-underline-offset: 3px;
  text-decoration-color: var(--rule, rgba(0, 0, 0, 0.14));
  cursor: pointer;
  transition: text-decoration-color var(--t-ui, 0.2s ease);
}

.easystore-btn-add-to-wishlist:hover { text-decoration-color: var(--ink, #161513); }

/* Review [H]: caja fantasma hairline */
.easystore-btn-review-form {
  display: inline-block;
  padding: 10px 20px;
  background: none;
  border: 1px solid var(--rule, rgba(0, 0, 0, 0.14));
  border-radius: 0;
  font-size: 11px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--ink, #161513);
  cursor: pointer;
  transition: border-color var(--t-ui, 0.2s ease);
}

.easystore-btn-review-form:hover { border-color: var(--ink, #161513); }


/* ---------- §ES9 · Acordeón de la ficha (sppb, ámbito tienda) [M] ---------- */
/* DETAILS / MATERIALS / SHIPPING / RETURN — hairlines y small caps.
   Escopado a la tienda para no re-vestir acordeones de otras páginas. */
.tb-easystore .sppb-addon-accordion .sppb-panel-group { border-top: 1px solid var(--rule, rgba(0, 0, 0, 0.14)); }

.tb-easystore .sppb-addon-accordion .sppb-panel {
  border: 0;
  border-bottom: 1px solid var(--rule, rgba(0, 0, 0, 0.14));
  background: none;
  border-radius: 0;
  margin: 0;
}

.tb-easystore .sppb-addon-accordion .sppb-panel-heading {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  padding: 14px 0;
  background: none;
  border: 0;
  cursor: pointer;
}

.tb-easystore .sppb-addon-accordion .sppb-panel-title {
  font-family: var(--body, sans-serif);
  font-size: 12px;
  font-weight: 400;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--ink, #161513);
}

.tb-easystore .sppb-addon-accordion .sppb-toggle-direction {
  font-size: 10px;
  color: var(--ink, #161513);
  transition: transform var(--t-ui, 0.2s ease);
}

.tb-easystore .sppb-addon-accordion .sppb-panel-heading.active .sppb-toggle-direction { transform: rotate(90deg); }

.tb-easystore .sppb-addon-accordion .sppb-panel-body {
  padding: 0 0 18px;
  font-size: 0.85rem;
  line-height: 1.7;
  color: var(--mute, #6f6b64);
}

.tb-easystore .sppb-addon-accordion .sppb-panel-body b,
.tb-easystore .sppb-addon-accordion .sppb-panel-body strong { color: var(--ink, #161513); font-weight: 500; }


/* ---------- §ES10 · Catálogo: collection items + hover carrito [H] ---------- */
/* El listado se monta con el addon Collection de SPBuilder (homify
   igual). Solo se tocan clases easystore-* y el addon del carrito. */
.sppb-collection-item .easystore-product-title { margin-top: 10px; }

.sppb-collection-item img { transition: opacity var(--t-ui, 0.2s ease); }

.sppb-collection-item:hover img { opacity: 0.92; }

/* Botón añadir en el card: aparece al hover (patrón homify), aquí
   como caja hairline pequeña — la animación la trae el addon. */
.sppb-collection-item .easystore-btn-add-to-cart {
  display: inline-block;
  width: auto;
  padding: 9px 18px;
  background-color: var(--paper, #ffffff);
  color: var(--ink, #161513);
  border-color: var(--ink, #161513);
  font-size: 11px;
}

.sppb-collection-item .easystore-btn-add-to-cart:hover {
  background-color: var(--ink, #161513);
  color: var(--paper, #ffffff);
}


/* ---------- §ES11 · Filtros de listado [H] ---------- */
.easystore-filter-item-label,
.easystore-filter-item-name,
.easystore-checkbox-label {
  font-family: var(--body, sans-serif);
  font-size: 12px;
  letter-spacing: 0.03em;
  color: var(--ink, #161513);
}

.easystore-filter-item-count {
  font-size: 11px;
  color: var(--mute, #6f6b64);
}

.easystore-checkbox-checkmark {
  border: 1px solid var(--rule, rgba(0, 0, 0, 0.14));
  border-radius: 0;
}

.easystore-range-symbol,
.easystore-range-control {
  font-size: 12px;
  color: var(--mute, #6f6b64);
}


/* ---------- §ES12 · Drawer del carrito · mini cart · checkout [H] ---------- */
/* Markup del drawer aún no capturado: SOLO superficie segura sobre
   los nombres que homify estila. Nada estructural. */
.easystore-cart-item {
  padding-block: 16px;
  border-bottom: 1px solid var(--rule, rgba(0, 0, 0, 0.14));
}

.easystore-drawer-footer {
  border-top: 1px solid var(--rule, rgba(0, 0, 0, 0.14));
  padding-top: 16px;
}

.easystore-mini-cart-quantity-price {
  font-size: 12px;
  color: var(--mute, #6f6b64);
}

.easystore-quick-cart-actions { gap: 10px; }

/* Checkout: SOLO herencia tipográfica. Es UI crítica de conversión —
   prohibido tocar layout aquí. */
.easystore-checkout-wrapper {
  font-family: var(--body, sans-serif);
  color: var(--ink, #161513);
}


/* ---------- §ES13 · Páginas EasyStore (wrapper, cuenta) [H] ---------- */
.easystore-page-wrapper,
.easystore-product-single {
  width: 100%;
  max-width: var(--container, 1280px);
  margin-inline: auto;
  padding-inline: var(--gutter, 24px);
}

/* Contención horizontal en toda vista de tienda */
body.tb-easystore { overflow-x: clip; }


/* ---------- §ES14 · TODO pendiente de markup real ---------- */
/* Cuando se capturen esas vistas (guardar página → pasarme el HTML):
   - Drawer del carrito completo (estructura interna del cart-item:
     imagen, nombre, variante, quantity inline, botón quitar).
   - Checkout paso a paso (solo color/tipografía, jamás layout).
   - Cuenta de cliente (pedidos, direcciones).
   - Ratings/reviews ([H] tiene .easystore-rating-stars,
     .easystore-summary-stars, .easystore-ratings-container — sin
     markup no se les da forma).
   Regla intacta: cero selectores inventados. */