/*!
 * Theme Name:         ONA Dance Child Theme
 * Theme URI:          https://onadance.com
 * Description:        Custom WordPress theme for ONA Dance. Black & white, Tatiana Active structure, ONA values.
 * Author:             ONA Dance Team
 * Author URI:         https://onadance.com
 * Template:           twentytwentyfour
 * Template Version:   1.0
 * Version:            1.9.12
 * License:            GPL v2 or later
 * License URI:        https://www.gnu.org/licenses/gpl-2.0.html
 * Text Domain:        onadance-child
 * Domain Path:        /languages
 * Requires at least:  6.0
 * Requires PHP:       7.4
 *
 * @package ONA_Dance_Child
 */

/* ═══════════════════════════════════════════════════
   CHILD THEME IMPORTS — Load parent, then overrides
═══════════════════════════════════════════════════ */

/*
 * Parent theme styles are loaded in functions.php via wp_enqueue_style()
 * This file contains child theme overrides only.
 */

/* ═══════════════════════════════════════════════════
   CSS CUSTOM PROPERTIES (Design Tokens)
═══════════════════════════════════════════════════ */

:root {
  /* ── Paleta estricta ONA — sobreescribe tokens del parent theme ──
     Eliminados: #C8BEB4, #B8B0A8, #C4BAB2, #BCBAB8 (tonos tierra/beige)
  */

  /* Fondos */
  --color-bg:       #FFFFFF;
  --color-bg-alt:   #F7F7F5;

  /* Bordes */
  --color-border:   #EBEBEB;
  --color-border-2: #D5D5D5;

  /* Texto */
  --color-text-4:   #9A9A9A;
  --color-text-6:   #5A5A5A;
  --color-text:     #0A0A0A;

  /* Acentos — SOLO para badges, chips y detalles pequeños */
  --accent-cherry:  #B5303A;
  --accent-jade:    #3A7A5E;
  --accent-blush:   #E8B4B8;

  /* Colors — Black & White paleta ONA (aliases internos) */
  --ona-white:     #FFFFFF;
  --ona-off:       #F7F7F5;      /* alineado con --color-bg-alt */
  --ona-gray-100:  #EBEBEB;      /* alineado con --color-border   */
  --ona-gray-200:  #D5D5D5;      /* alineado con --color-border-2 */
  --ona-gray-400:  #9A9A9A;      /* alineado con --color-text-4   */
  --ona-gray-600:  #5A5A5A;      /* alineado con --color-text-6   */
  --ona-black:     #0A0A0A;      /* alineado con --color-text     */

  /* Typography */
  --ona-font-ui:   'Glacial Indifference', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  --ona-font-serif: 'Cormorant Garamond', Georgia, serif;

  /* Spacing */
  --ona-ann-h: 38px;
  --ona-hdr-h: 86px;   /* 70 → 78 → 86 para dar aire al logo (v1.2.1) */
  --ona-hdr-m: 64px;   /* móvil: 58 → 60 → 64 */

  /* Transitions */
  --ona-ease: cubic-bezier(0.25, 0.46, 0.45, 0.94);
  --ona-t:    0.28s var(--ona-ease);
  --ona-ts:   0.52s var(--ona-ease);

  /* Letter spacing */
  --ona-ls-xs: 0.08em;
  --ona-ls-sm: 0.12em;
  --ona-ls-md: 0.18em;
}

/* ═══════════════════════════════════════════════════
   BASE OVERRIDES
═══════════════════════════════════════════════════ */

html {
  font-size: 16px;
  scroll-behavior: smooth;
}

body {
  font-family: var(--ona-font-ui);
  font-weight: 300;
  color: var(--ona-black);
  background: var(--ona-white);
  -webkit-font-smoothing: antialiased;
}

a {
  color: inherit;
  text-decoration: none;
}

/* Remove WP default styles we don't need */
.wp-block-button__link:not(.has-text-color) {
  color: var(--ona-white);
}

/* ═══════════════════════════════════════════════════
   WORDPRESS GUTENBERG OVERRIDES (if needed)
═══════════════════════════════════════════════════ */

/* Only add if using Gutenberg blocks on frontend */
.wp-block-image {
  margin-bottom: 1.5rem;
}

/* ═══════════════════════════════════════════════════
   PLACEHOLDER — More styles in /css/main.css
═══════════════════════════════════════════════════ */

/*
 * IMPORTANT: Main styles are in dist/css/main.css
 * This file (style.css) is required by WordPress but kept minimal.
 *
 * Abner should:
 * 1. Compile CSS from src/ to dist/css/main.css
 * 2. Enqueue main.css in functions.php with filemtime() versioning
 * 3. Keep style.css light — only theme header metadata
 */


/* ═══════════════════════════════════════════════════
   PARENT THEME OVERRIDES — Neutralizar tonos tierra
   Elimina: #C8BEB4, #B8B0A8, #C4BAB2, #BCBAB8
═══════════════════════════════════════════════════ */

/* Placeholders de imagen de producto sin fondo beige */
.woocommerce-product-gallery__image--placeholder,
.product-image-placeholder,
.wc-placeholder {
  background-color: var(--color-border) !important;
}

/* Badge ECONYL / ecológico: verde jade ONA en lugar del verde oscuro original */
.badge--eco,
.product-badge.eco,
span.onsale[data-type="eco"] {
  background-color: var(--accent-jade) !important;
}

/* ── Selector de idioma (GTranslate) en el header, a la derecha ── */
.ona-hdr__actions { display: flex; align-items: center; }
/* order:2 → las banderas van DESPUÉS del carrito (escritorio y móvil) */
.ona-hdr__lang { display: inline-flex; align-items: center; order: 2; margin-left: 10px; }
/* Anular el ocultado global + forzar inline (no flotante) dentro del header */
.ona-hdr__lang .gtranslate_wrapper,
.ona-hdr__lang .gt_switcher,
.ona-hdr__lang .gt_float,
.ona-hdr__lang .gtranslate_wrapper .gt_switcher-wrapper {
  display: inline-flex !important;
  align-items: center;
  gap: 5px;
  position: static !important;
  float: none !important;
  inset: auto !important;
  transform: none !important;
  margin: 0 !important;
}
.ona-hdr__lang a { display: inline-flex; align-items: center; }
.ona-hdr__lang img { width: 20px; height: 14px; vertical-align: middle; opacity: .6; transition: opacity .2s; }
.ona-hdr__lang a:hover img,
.ona-hdr__lang .gt_current img { opacity: 1 !important; }

/* MÓVIL: orden logo · carrito · menú(☰) · banderas (al final) */
@media (max-width: 1024px) {
  .ona-hdr__actions { display: flex; align-items: center; }
  .ona-hdr__lang { order: 3; margin-right: 0; margin-left: 8px; }
}
@media (max-width: 480px) {
  .ona-hdr__lang { margin-left: 6px; }
  .ona-hdr__lang img { width: 18px; height: 12px; }
}

/* Tamaño y tracking del menú de navegación principal (Prompt 10: 12px) */
.main-navigation .menu-item > a,
.nav-primary .menu-item > a,
.primary-menu .menu-item > a,
.mega-menu-trigger,
.ona-mega-trigger,
nav.header-nav a {
  font-size: 13px !important;
  letter-spacing: 0.14em !important;
}


/* ═══════════════════════════════════════════════════
   HERO — Vídeo de fondo (reel/vertical de campaña)
═══════════════════════════════════════════════════ */

.hero-video-bg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center top;
  z-index: 0;
}

@media (max-width: 768px) {
  .hero-video-bg { object-position: 65% center; }
}


/* ═══════════════════════════════════════════════════
   RESEÑAS CURADAS — What our clients say
═══════════════════════════════════════════════════ */

.ona-sec-reviews { padding: 72px 0; background: var(--color-bg); }
.ona-rev-grid { display: grid; grid-template-columns: repeat(3,1fr); gap: 1px; background: var(--color-border); margin-top: 36px; }
@media(max-width:768px){ .ona-rev-grid { grid-template-columns: 1fr; } }
.ona-rev-card { background: var(--color-bg); padding: 32px 28px; }
.ona-stars, .ona-stars-sm { color: var(--color-text); letter-spacing: 2px; }
.ona-stars { font-size: 13px; }
.ona-stars-sm { font-size: 11px; margin-bottom: 10px; display: block; }
.ona-rating-global { display: flex; align-items: center; gap: 8px; }
.ona-rating-num { font-size: 24px; font-weight: 300; }
.ona-rev-title { font-size: 13px; font-weight: 400; letter-spacing: .04em; margin-bottom: 10px; }
.ona-rev-body { font-family: 'Cormorant Garamond', Georgia, serif; font-style: italic; font-size: 15px; font-weight: 300; color: var(--color-text-6); line-height: 1.7; margin-bottom: 18px; }
.ona-rev-meta { display: flex; flex-direction: column; gap: 3px; }
.ona-rev-author { font-size: 10px; font-weight: 400; letter-spacing: .12em; text-transform: uppercase; }
.ona-rev-product { font-size: 10px; color: var(--color-text-4); }


/* ═══════════════════════════════════════════════════
   PRODUCTO — Compromiso + Cross-sell (Completa el look / Mismo estilo)
═══════════════════════════════════════════════════ */

.ona-pd-commitment { margin-top: 24px; padding: 20px 22px; border: 1px solid var(--color-border); background: var(--color-bg-alt); }
.ona-commitment-icon { display: flex; align-items: center; gap: 10px; margin-bottom: 12px; }
.ona-pd-commitment p { font-size: 13px; font-weight: 300; line-height: 1.8; color: var(--color-text-6); margin-bottom: 12px; }
.ona-link-ethics { font-size: 10px; letter-spacing: .12em; text-transform: uppercase; color: var(--accent-jade); transition: opacity .2s; }
.ona-link-ethics:hover { opacity: .65; }
.ona-complete-look, .ona-same-style { padding: 72px 0; border-top: 1px solid var(--color-border); }
.ona-complete-look { background: var(--color-bg-alt); }
.ona-same-style { background: var(--color-bg); }

/* Grid de los productos cross-sell: los selectores de fase3.css solo
   apuntan a .ona-collection / section.related, no a estas secciones. */
.ona-complete-look ul.products,
.ona-same-style ul.products {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 1px;
  list-style: none;
  margin: 36px 0 0;
  padding: 0;
  background: var(--color-border);
}
.ona-complete-look ul.products li.product,
.ona-same-style ul.products li.product {
  margin: 0; padding: 0; list-style: none; background: var(--color-bg); float: none; width: auto;
}
@media (max-width: 1024px) {
  .ona-complete-look ul.products,
  .ona-same-style ul.products { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 480px) {
  .ona-complete-look ul.products,
  .ona-same-style ul.products { grid-template-columns: 1fr; }
}


/* ═══════════════════════════════════════════════════
   SHOP — Filtro de color + banner bestsellers
═══════════════════════════════════════════════════ */

.ona-filter-colors { display: flex; align-items: center; gap: 14px; padding: 12px 0 16px; border-bottom: 1px solid var(--color-border); margin-bottom: 20px; }
/* Swatches de color del filtro: 24px máx, gap 6px, compactos (TAREA 1).
   Scope a .ona-swatch-row para no afectar a los swatches 11px de la tarjeta. */
.ona-swatch-row { display: flex; flex-wrap: wrap; gap: 6px; }
.ona-swatch-row .ona-sw-c {
  width: 24px; height: 24px;
  border-radius: 50%;
  border: 1px solid var(--color-border);
  cursor: pointer;
  display: block;
  transition: box-shadow .2s ease, border-color .2s ease;
}
.ona-swatch-row .ona-sw-c:hover { border-color: var(--color-text-4); }
.ona-swatch-row .ona-sw-c.active {
  border-color: var(--color-text);
  box-shadow: 0 0 0 2px var(--color-text);   /* borde activo 2px sin reflow */
}
.ona-shop-banner { display: flex; align-items: center; justify-content: space-between; background: var(--color-text); color: var(--color-bg); padding: 16px 24px; margin-bottom: 28px; }
.ona-shop-banner span { font-size: 10px; letter-spacing: .14em; text-transform: uppercase; }
.ona-shop-banner a { font-size: 10px; letter-spacing: .14em; text-transform: uppercase; color: var(--color-bg); text-decoration: none; opacity: .7; transition: opacity .2s; }
.ona-shop-banner a:hover { opacity: 1; }


/* ═══════════════════════════════════════════════════
   TIENDA — Barra de filtros (tabs en fila, pills modernas)
   Scopeado a .ona-collection para ganar a main.css/fase3.css
   sin !important. Misma paleta (negro activo, gris reposo).
═══════════════════════════════════════════════════ */

.ona-collection .ona-filter-bar {
  display: flex;
  flex-flow: row wrap;
  align-items: center;
  justify-content: space-between;
  gap: 14px 20px;
}

.ona-collection .ona-filter-tabs {
  display: flex;
  flex-flow: row wrap;
  gap: 8px;
  border-bottom: none;
}

.ona-collection .ona-ftab {
  display: inline-flex;
  align-items: center;
  white-space: nowrap;
  font-family: var(--ona-font-ui);
  font-size: 10px;
  font-weight: 400;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  line-height: 1;
  padding: 9px 18px;
  margin: 0;
  border: 1px solid var(--color-border-2);
  border-radius: 999px;
  background: var(--color-bg);
  color: var(--color-text-6);
  cursor: pointer;
  transition: background 0.25s ease, color 0.25s ease, border-color 0.25s ease;
}

.ona-collection .ona-ftab:hover {
  border-color: var(--color-text);
  color: var(--color-text);
  background: var(--color-bg-alt);
}

.ona-collection .ona-ftab.is-active {
  background: var(--color-text);
  border-color: var(--color-text);
  color: #fff;
}

.ona-collection .ona-filter-right {
  display: flex;
  align-items: center;
  gap: 16px;
  flex-shrink: 0;
}

@media (max-width: 600px) {
  .ona-collection .ona-filter-right { width: 100%; justify-content: space-between; }
}


/* ═══════════════════════════════════════════════════
   TIENDA — Sidebar de filtros (izquierda) + productos (derecha)
═══════════════════════════════════════════════════ */

.ona-collection .ona-shop-layout {
  display: grid;
  grid-template-columns: 240px 1fr;
  align-items: start;
  margin-top: 8px;
}
@media (max-width: 900px) {
  .ona-collection .ona-shop-layout { grid-template-columns: 1fr; }
}

/* Sidebar */
.ona-shop-sidebar {
  background: var(--color-bg-alt);
  border-right: 1px solid var(--color-border);
}
@media (max-width: 900px) {
  .ona-shop-sidebar { border-right: none; border-bottom: 1px solid var(--color-border); }
}
.ona-filters { padding: 22px 20px; }
.ona-filters__hd { display: flex; align-items: baseline; justify-content: space-between; margin-bottom: 16px; }
.ona-filters__title { font-family: var(--ona-font-ui); font-size: 12px; letter-spacing: .16em; text-transform: uppercase; color: var(--color-text); }
.ona-filters__clear { font-size: 10px; letter-spacing: .1em; text-transform: uppercase; color: var(--color-text-4); transition: color .2s; }
.ona-filters__clear:hover { color: var(--accent-cherry); }

.ona-fgroup { padding: 16px 0; border-bottom: 1px solid var(--color-border); }
.ona-fgroup:first-of-type { padding-top: 0; }
.ona-fgroup__label { font-family: var(--ona-font-ui); font-size: 11px; font-weight: 500; letter-spacing: .14em; text-transform: uppercase; color: var(--color-text); margin: 0 0 12px; }

.ona-fcheck { display: flex; align-items: center; gap: 9px; padding: 5px 0; cursor: pointer; font-family: var(--ona-font-ui); font-size: 12px; font-weight: 300; color: var(--color-text-6); transition: color .2s; }
.ona-fcheck:hover { color: var(--color-text); }
.ona-fcheck input[type="checkbox"] { accent-color: var(--accent-cherry); width: 15px; height: 15px; cursor: pointer; flex-shrink: 0; }

.ona-fprice { display: flex; align-items: center; gap: 8px; }
.ona-fprice input { width: 100%; padding: 8px 10px; border: 1px solid var(--color-border-2); background: var(--color-bg); font-family: var(--ona-font-ui); font-size: 12px; color: var(--color-text); }
.ona-fprice input:focus { outline: none; border-color: var(--color-text); }
.ona-fprice__sep { color: var(--color-text-4); }

.ona-filters__apply {
  width: 100%;
  margin-top: 18px;
  justify-content: center;
  text-align: center;
  border-radius: 0;
  font-size: 11px;
  letter-spacing: .12em;
}

/* Columna de productos */
.ona-shop-main { padding-left: 28px; min-width: 0; }
@media (max-width: 900px) { .ona-shop-main { padding-left: 0; padding-top: 20px; } }
.ona-shop-toolbar { display: flex; align-items: center; justify-content: space-between; gap: 16px; flex-wrap: wrap; padding-bottom: 14px; border-bottom: 1px solid var(--color-border); margin-bottom: 20px; }


/* ═══════════════════════════════════════════════════
   PRODUCTO — Barra de beneficios (3 columnas)
═══════════════════════════════════════════════════ */

.ona-benefits { background: var(--color-bg); padding: 40px 0; border-top: 1px solid var(--color-border); }
.ona-benefits--shop { padding: 56px 0; }   /* variante tienda (TAREA 2B) */
.ona-benefits__grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 32px; }
@media (max-width: 768px) { .ona-benefits__grid { grid-template-columns: 1fr; gap: 28px; } }
.ona-benefit { display: flex; flex-direction: column; align-items: center; text-align: center; }
.ona-benefit__icon { width: 40px; height: 40px; border-radius: 50%; background: var(--color-text); color: #fff; display: inline-flex; align-items: center; justify-content: center; margin-bottom: 14px; }
.ona-benefit__title { font-family: var(--ona-font-ui); font-size: 11px; font-weight: 500; letter-spacing: .1em; text-transform: uppercase; color: var(--color-text); margin: 0 0 8px; }
.ona-benefit__text { font-family: var(--ona-font-serif); font-size: 14px; font-weight: 300; color: var(--color-text-6); line-height: 1.6; max-width: 300px; margin: 0; }


/* ═══════════════════════════════════════════════════
   RESEÑAS — Link Trustpilot
═══════════════════════════════════════════════════ */

.ona-trustpilot-link-wrap { text-align: center; margin-top: 28px; }
.ona-trustpilot-link { font-family: var(--ona-font-ui); font-size: 11px; letter-spacing: .1em; text-transform: uppercase; color: var(--color-text-6); text-decoration: none; transition: color .2s; }
.ona-trustpilot-link:hover { color: var(--color-text); }


/* ═══════════════════════════════════════════════════
   PRODUCTO — Detalles, badges, form, urgencia, mini-rev, upsells
═══════════════════════════════════════════════════ */

.ona-pd__title { font-family: var(--ona-font-ui); font-size: 28px; font-weight: 400; letter-spacing: .04em; text-transform: uppercase; color: var(--color-text); line-height: 1.15; margin: 0 0 10px; }
.ona-pd__rating { display: flex; align-items: center; gap: 10px; margin-bottom: 12px; flex-wrap: wrap; }
.ona-pd__rating .star-rating { color: var(--color-text); }
.ona-pd__review-count { font-family: var(--ona-font-ui); font-size: 11px; letter-spacing: .08em; text-transform: uppercase; color: var(--color-text-6); transition: color .2s; }
.ona-pd__review-count:hover { color: var(--color-text); }

.ona-pd__badges { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 14px; }
.ona-pdbadge { font-family: var(--ona-font-ui); font-size: 11px; letter-spacing: .04em; text-transform: uppercase; padding: 4px 10px; border: 1px solid var(--color-text); color: var(--color-text); line-height: 1.4; }
.ona-pdbadge--soft { background: var(--color-bg-alt); border-color: var(--color-border); color: var(--color-text-6); }

.ona-pd__short { font-family: var(--ona-font-serif); font-size: 15px; color: var(--color-text-6); line-height: 1.6; margin-bottom: 16px; }
.ona-pd__price { font-family: var(--ona-font-serif); font-size: 22px; color: var(--color-text); margin-bottom: 12px; }
.ona-pd__sizechart { margin: 0 0 6px; }
.ona-pd__sizechart a { display: inline-flex; align-items: center; gap: 6px; font-family: var(--ona-font-ui); font-size: 10px; letter-spacing: .08em; text-transform: uppercase; color: var(--color-text-6); transition: color .2s; }
.ona-pd__sizechart a:hover { color: var(--color-text); }

/* Form nativo WC reestilado a ONA */
.ona-pd__form table.variations { width: 100%; margin: 0 0 14px; border: none; }
.ona-pd__form table.variations td, .ona-pd__form table.variations th { padding: 6px 0; border: none; }
.ona-pd__form table.variations label { font-family: var(--ona-font-ui); font-size: 11px; letter-spacing: .1em; text-transform: uppercase; color: var(--color-text); }
.ona-pd__form select { width: 100%; border: 1px solid var(--color-border-2); border-radius: 0; padding: 10px 12px; font-family: var(--ona-font-ui); font-size: 13px; background: var(--color-bg); color: var(--color-text); }
.ona-pd__form select:focus { outline: none; border-color: var(--color-text); }
.ona-pd__form .reset_variations { font-size: 10px; letter-spacing: .06em; text-transform: uppercase; color: var(--color-text-4); }
.ona-pd__form .quantity input.qty { height: 48px; width: 64px; text-align: center; border: 1px solid var(--color-border-2); border-radius: 0; font-family: var(--ona-font-ui); background: var(--color-bg); }
.ona-pd__form .quantity { margin-right: 10px; }
.ona-pd__form .button.single_add_to_cart_button,
.ona-pd__form button.single_add_to_cart_button {
  width: 100%; height: 52px; margin-top: 12px;
  background: var(--color-text); color: #fff; border: 1px solid var(--color-text); border-radius: 0;
  font-family: var(--ona-font-ui); font-size: 12px; font-weight: 400; letter-spacing: .14em; text-transform: uppercase;
  transition: background .25s ease, color .25s ease;
}
.ona-pd__form .button.single_add_to_cart_button:hover { background: transparent; color: var(--color-text); }

.ona-pd__urgency { font-family: var(--ona-font-serif); font-style: italic; font-size: 13px; color: var(--accent-cherry); margin: 12px 0 0; }

/* Mini-carrusel reseñas */
.ona-pd__minirev { margin-top: 18px; border: 1px solid var(--color-border); background: var(--color-bg); padding: 16px; position: relative; }
.ona-minirev__slide { display: none; }
.ona-minirev__slide.is-active { display: block; }
.ona-minirev__stars { color: var(--color-text); font-size: 12px; letter-spacing: 2px; }
.ona-minirev__slide blockquote { font-family: var(--ona-font-serif); font-style: italic; font-size: 14px; color: var(--color-text-6); line-height: 1.6; margin: 6px 0; border: none; padding: 0; }
.ona-minirev__slide figcaption { font-family: var(--ona-font-ui); font-size: 10px; letter-spacing: .1em; text-transform: uppercase; color: var(--color-text-4); }
.ona-minirev__nav { position: absolute; top: 14px; right: 14px; display: flex; gap: 6px; }
.ona-minirev__nav button { width: 24px; height: 24px; border: 1px solid var(--color-border-2); background: var(--color-bg); font-size: 14px; line-height: 1; color: var(--color-text-6); cursor: pointer; }
.ona-minirev__nav button:hover { border-color: var(--color-text); color: var(--color-text); }
.ona-minirev__cta { font-family: var(--ona-font-ui); font-size: 11px; letter-spacing: .08em; text-transform: uppercase; color: var(--color-text); }

/* Completa el look (upsells) */
.ona-pd__upsells { margin-top: 22px; }
.ona-pd__upsells-t { font-family: var(--ona-font-ui); font-size: 11px; letter-spacing: .14em; text-transform: uppercase; color: var(--color-text); margin: 0 0 12px; }
.ona-upsells__track { display: flex; flex-direction: column; gap: 12px; }
.ona-upsell { display: flex; gap: 12px; align-items: center; }
.ona-upsell__img { width: 80px; height: 80px; flex-shrink: 0; }
.ona-upsell__img img { width: 80px; height: 80px; object-fit: cover; display: block; }
.ona-upsell__info { display: flex; flex-direction: column; gap: 3px; }
.ona-upsell__name { font-family: var(--ona-font-ui); font-size: 12px; letter-spacing: .04em; text-transform: uppercase; color: var(--color-text); }
.ona-upsell__price { font-family: var(--ona-font-serif); font-size: 14px; color: var(--color-text-6); }
.ona-upsell__atc { align-self: flex-start; font-family: var(--ona-font-ui); font-size: 10px; letter-spacing: .1em; text-transform: uppercase; padding: 7px 14px; border: 1px solid var(--color-text); color: var(--color-text); transition: all .2s; }
.ona-upsell__atc:hover { background: var(--color-text); color: #fff; }

/* Acordeones ancho completo */
.ona-acc-wrap { margin-top: 48px; }
.ona-acc { border-top: 1px solid var(--color-border); }
.ona-acc:last-child { border-bottom: 1px solid var(--color-border); }
.ona-acc__hd { width: 100%; display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 18px 0; background: none; border: none; cursor: pointer; text-align: left; }
.ona-acc__title { display: flex; align-items: center; gap: 10px; font-family: var(--ona-font-ui); font-size: 11px; font-weight: 500; letter-spacing: .12em; text-transform: uppercase; color: var(--color-text); }
.ona-acc__ico { display: inline-flex; color: var(--color-text-6); }
.ona-acc__plus { font-size: 18px; font-weight: 300; color: var(--color-text); transition: transform .25s ease; line-height: 1; }
.ona-acc.is-open .ona-acc__plus { transform: rotate(45deg); }
.ona-acc__body { font-family: var(--ona-font-serif); font-size: 15px; color: var(--color-text-6); line-height: 1.7; padding: 0 0 20px; }
.ona-acc__body a { color: var(--color-text); text-decoration: underline; }

/* Formulario de reseña */
.ona-review-form { padding: 48px 0; border-top: 1px solid var(--color-border); }
.ona-review-form__title { font-family: var(--ona-font-ui); font-size: 12px; letter-spacing: .16em; text-transform: uppercase; color: var(--color-text); margin-bottom: 20px; }
.ona-review-form label { font-family: var(--ona-font-ui); font-size: 11px; letter-spacing: .08em; text-transform: uppercase; color: var(--color-text); }
.ona-review-form input[type="text"], .ona-review-form input[type="email"], .ona-review-form textarea { border: 1px solid var(--color-border); border-radius: 0; background: var(--color-bg); padding: 10px 12px; font-family: var(--ona-font-ui); width: 100%; }
.ona-review-form input:focus, .ona-review-form textarea:focus { outline: none; border-color: var(--color-text); }
.ona-review-form input[type="submit"], .ona-review-form button[type="submit"], .ona-review-form .submit { display: inline-block; background: var(--color-text); color: #fff; border: 1px solid var(--color-text); border-radius: 0; font-family: var(--ona-font-ui); font-size: 11px; letter-spacing: .14em; text-transform: uppercase; padding: 14px 36px; cursor: pointer; transition: background .25s, color .25s; }
.ona-review-form input[type="submit"]:hover, .ona-review-form button[type="submit"]:hover { background: transparent; color: var(--color-text); }

/* Títulos WC + lista de reseñas (estilo ONA) */
.ona-review-form > .ona-w { max-width: 760px; }
.ona-review-form #reviews .woocommerce-Reviews-title { font-family: var(--ona-font-serif); font-size: clamp(26px, 3.5vw, 40px); font-weight: 300; color: var(--color-text); margin: 0 0 14px; }
.ona-review-form .woocommerce-noreviews { font-family: var(--ona-font-serif); font-style: italic; font-size: 16px; color: var(--color-text-4); margin: 0 0 28px; }
.ona-review-form #respond .comment-reply-title,
.ona-review-form #reply-title { font-family: var(--ona-font-ui); font-size: 11px; font-weight: 500; letter-spacing: .12em; text-transform: uppercase; color: var(--color-text); display: block; margin: 0 0 18px; }
.ona-review-form .commentlist { list-style: none; margin: 0 0 32px; padding: 0; }
.ona-review-form .commentlist li.review,
.ona-review-form .commentlist li.comment { border: 1px solid var(--color-border); padding: 20px 22px; margin: 0 0 14px; }
.ona-review-form .commentlist .avatar { display: none; }
.ona-review-form .commentlist .comment-text { margin: 0; }
.ona-review-form .commentlist .star-rating { color: var(--color-text); font-size: 12px; margin: 0 0 8px; }
.ona-review-form .commentlist .meta { font-family: var(--ona-font-ui); font-size: 11px; letter-spacing: .04em; text-transform: uppercase; color: var(--color-text); margin: 0 0 8px; }
.ona-review-form .commentlist .description { font-family: var(--ona-font-serif); font-size: 15px; line-height: 1.7; color: var(--color-text-6); }
.ona-review-form .comment-form p { margin: 0 0 16px; }
.ona-review-form select { width: 100%; border: 1px solid var(--color-border-2); border-radius: 0; background: var(--color-bg); padding: 12px 14px; font-family: var(--ona-font-ui); font-size: 14px; color: var(--color-text); }
.ona-review-form textarea { min-height: 130px; resize: vertical; }
.ona-review-form .comment-form-rating select { width: auto; min-width: 170px; }
/* Estrellas clicables (WC .stars) */
.ona-review-form p.stars { margin: 4px 0 18px; }
.ona-review-form p.stars a { color: var(--color-border-2) !important; }
.ona-review-form p.stars a:hover,
.ona-review-form p.stars:hover a,
.ona-review-form p.stars.selected a.active,
.ona-review-form p.stars a.active { color: var(--color-text) !important; }
.ona-review-form .comment-notes, .ona-review-form .comment-form-cookies-consent { font-family: var(--ona-font-ui); font-size: 11px; color: var(--color-text-4); }

/* ═══════════════════════════════════════════════════
   PÁGINA DE CARRITO (/cart/) — faltaban estilos en dist/fase4.css
═══════════════════════════════════════════════════ */

.ona-cart-page { padding: 40px 0 80px; }
.ona-cart-hd { margin-bottom: 36px; }
.ona-cart-title { font-family: var(--ona-font-serif); font-size: clamp(28px, 4vw, 44px); font-weight: 300; line-height: 1.05; color: var(--color-text); }

.ona-cart-grid { display: grid; grid-template-columns: 1fr 360px; gap: 48px; align-items: start; }
@media (max-width: 900px) { .ona-cart-grid { grid-template-columns: 1fr; gap: 32px; } }

/* Líneas de producto */
.ona-cart-row { display: grid; grid-template-columns: 90px 1fr auto; gap: 18px; padding: 22px 0; border-bottom: 1px solid var(--color-border); align-items: start; }
.ona-cr__img img { width: 90px; height: 120px; object-fit: cover; display: block; }
.ona-cr__name { font-family: var(--ona-font-ui); font-size: 12px; font-weight: 400; letter-spacing: .06em; text-transform: uppercase; color: var(--color-text); margin: 0 0 4px; line-height: 1.3; }
.ona-cr__name a { color: var(--color-text); }
.ona-cr__meta { font-family: var(--ona-font-serif); font-size: 13px; color: var(--color-text-4); margin: 0 0 12px; }
.ona-cr__qty { display: inline-flex; align-items: center; border: 1px solid var(--color-border-2); width: fit-content; }
.ona-cr__qb { width: 30px; height: 32px; background: var(--color-bg); border: none; cursor: pointer; font-size: 15px; color: var(--color-text); display: flex; align-items: center; justify-content: center; }
.ona-cr__qb:hover { background: var(--color-bg-alt); }
.ona-cr__qi { width: 40px; height: 32px; text-align: center; border: none; border-left: 1px solid var(--color-border-2); border-right: 1px solid var(--color-border-2); font-family: var(--ona-font-ui); font-size: 13px; background: var(--color-bg); -moz-appearance: textfield; }
.ona-cr__qi::-webkit-outer-spin-button, .ona-cr__qi::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
.ona-cr__qty-single { font-family: var(--ona-font-ui); font-size: 13px; color: var(--color-text-6); }
.ona-cr__rm { margin-top: 10px; }
.ona-cr__rm-btn { font-family: var(--ona-font-ui); font-size: 10px; letter-spacing: .08em; text-transform: uppercase; color: var(--color-text-4); text-decoration: none; transition: color .2s; }
.ona-cr__rm-btn:hover { color: var(--accent-cherry); }
.ona-cr__price { font-family: var(--ona-font-serif); font-size: 16px; color: var(--color-text); white-space: nowrap; text-align: right; }

/* Quote de marca */
.ona-cart-brand-q { margin-top: 28px; padding-left: 18px; border-left: 2px solid var(--color-border); }
.ona-cart-brand-q__text { font-family: var(--ona-font-serif); font-style: italic; font-size: 16px; color: var(--color-text-6); line-height: 1.6; margin: 0 0 8px; }
.ona-cart-brand-q__author { font-family: var(--ona-font-ui); font-size: 10px; letter-spacing: .1em; text-transform: uppercase; color: var(--color-text-4); }

/* Resumen del pedido */
.ona-order-sum { background: var(--color-bg-alt); padding: 32px; }
.ona-os__title { font-family: var(--ona-font-ui); font-size: 12px; letter-spacing: .14em; text-transform: uppercase; color: var(--color-text); margin: 0 0 22px; }
.ona-os__row { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; margin-bottom: 12px; }
.ona-os__l { font-family: var(--ona-font-serif); font-size: 15px; color: var(--color-text-6); }
.ona-os__v { font-family: var(--ona-font-serif); font-size: 15px; color: var(--color-text); }
.ona-os__v--free { color: var(--accent-jade); }
.ona-os__v--discount { color: var(--accent-cherry); }
.ona-os__rm-coupon { color: var(--color-text-4); text-decoration: none; margin-left: 6px; }
.ona-os__rm-coupon:hover { color: var(--accent-cherry); }
.ona-os__div { border: none; border-top: 1px solid var(--color-border); margin: 16px 0; }
.ona-os__total-row { font-family: var(--ona-font-ui); font-size: 11px; letter-spacing: .12em; text-transform: uppercase; color: var(--color-text); margin-bottom: 20px; }
.ona-os__total { font-family: var(--ona-font-serif); font-size: 24px; font-weight: 300; letter-spacing: 0; text-transform: none; }
.ona-os__coupon { margin-bottom: 18px; }
.ona-coup-row { display: flex; }
.ona-coup-input { flex: 1; min-width: 0; padding: 11px 13px; border: 1px solid var(--color-border-2); border-right: none; font-family: var(--ona-font-ui); font-size: 12px; background: var(--color-bg); }
.ona-coup-input:focus { outline: none; border-color: var(--color-text); }
.ona-coup-btn { background: var(--color-text); color: #fff; border: 1px solid var(--color-text); font-family: var(--ona-font-ui); font-size: 10px; letter-spacing: .1em; text-transform: uppercase; padding: 0 16px; cursor: pointer; white-space: nowrap; }
.ona-os__checkout { display: block; width: 100%; text-align: center; margin-bottom: 18px; }
.ona-os__trust { display: flex; flex-direction: column; gap: 8px; padding-top: 18px; border-top: 1px solid var(--color-border); }
.ona-os__trust .ona-trust-item { display: flex; align-items: center; gap: 8px; font-family: var(--ona-font-ui); font-size: 11px; letter-spacing: .03em; text-transform: none; color: var(--color-text-6); padding: 0; border: none; }
.ona-os__trust .ona-trust-item svg { color: var(--color-text-4); flex-shrink: 0; }

/* Completa el look en la página de carrito */
.ona-cart-suggest { margin-top: 48px; padding-top: 32px; border-top: 1px solid var(--color-border); }
.ona-cart-suggest__title { font-family: var(--ona-font-serif); font-style: italic; font-size: 18px; color: var(--color-text); margin: 0 0 20px; }
.ona-cart-suggest__grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 20px; }
@media (max-width: 768px) { .ona-cart-suggest__grid { grid-template-columns: repeat(2, 1fr); } }
.ona-cart-suggest__item { text-align: center; }
.ona-cart-suggest__img { display: block; }
.ona-cart-suggest__img img { width: 100%; aspect-ratio: 3/4; object-fit: cover; display: block; margin-bottom: 10px; }
.ona-cart-suggest__name { display: block; font-family: var(--ona-font-ui); font-size: 11px; letter-spacing: .06em; text-transform: uppercase; color: var(--color-text); margin-bottom: 4px; line-height: 1.3; }
.ona-cart-suggest__price { display: block; font-family: var(--ona-font-serif); font-size: 14px; color: var(--color-text-6); margin-bottom: 10px; }
.ona-cart-suggest__add { display: inline-block; font-family: var(--ona-font-ui); font-size: 10px; letter-spacing: .1em; text-transform: uppercase; padding: 8px 16px; border: 1px solid var(--color-text); color: var(--color-text); transition: all .2s; }
.ona-cart-suggest__add:hover { background: var(--color-text); color: #fff; }


/* Banner ética */
.ona-ethics-banner { position: relative; min-height: 420px; background-size: cover; background-position: center; display: flex; align-items: center; justify-content: center; text-align: center; }
.ona-ethics-banner__overlay { position: absolute; inset: 0; background: rgba(0,0,0,.35); }
.ona-ethics-banner__content { position: relative; z-index: 2; padding: 40px 20px; }
.ona-ethics-banner__title { font-family: var(--ona-font-serif); font-style: italic; font-size: 36px; color: #fff; margin: 0 0 10px; }
.ona-ethics-banner__sub { font-family: var(--ona-font-ui); font-size: 12px; letter-spacing: .15em; text-transform: uppercase; color: #fff; margin: 0 0 22px; }
.ona-ethics-banner__btn { display: inline-block; background: #fff; color: var(--color-text); font-family: var(--ona-font-ui); font-size: 11px; letter-spacing: .12em; text-transform: uppercase; padding: 14px 32px; border: 1px solid #fff; transition: all .25s ease; }
.ona-ethics-banner__btn:hover { background: var(--color-text); color: #fff; border-color: var(--color-text); }

/* Otros del mismo estilo — título con divider lateral */
.ona-st--divider { display: flex; align-items: center; gap: 14px; font-family: var(--ona-font-ui); font-size: 11px; font-weight: 500; letter-spacing: .14em; text-transform: uppercase; color: var(--color-text); }
.ona-st--divider::after { content: ''; flex: 1; height: 1px; background: var(--color-border); }


/* ═══════════════════════════════════════════════════
   PÁGINA — Guía de tallas (size-chart)
═══════════════════════════════════════════════════ */

.ona-sizechart { background: var(--color-bg-alt); }

/* Bloque 1 — hero */
.ona-sc__hero { background: var(--color-bg); padding: 64px 0 40px; text-align: center; }
.ona-sc__h1 { font-family: var(--ona-font-ui); font-size: 32px; font-weight: 400; text-transform: uppercase; letter-spacing: .15em; color: var(--color-text); margin: 0; }
.ona-sc__sub { font-family: var(--ona-font-serif); font-style: italic; font-size: 18px; color: var(--color-text-6); margin: 14px 0 0; }
.ona-sc__hr { display: block; width: 60px; height: 1px; background: var(--color-border); margin: 24px auto 0; }

/* Tarjetas (bloques 2, 4, 5) */
.ona-sc__card { max-width: 760px; margin: 40px auto; background: var(--color-bg); border: 1px solid var(--color-border); }
.ona-sc__tablewrap { padding: 40px; }
.ona-sc__measure { padding: 48px; }
.ona-sc__reco { padding: 48px; background: var(--color-bg-alt); border: none; }
.ona-sc__h2 { font-family: var(--ona-font-ui); font-size: 11px; font-weight: 500; text-transform: uppercase; letter-spacing: .1em; color: var(--color-text); margin: 0 0 24px; }

/* Bloque 2 — tabla */
.ona-sc__table { width: 100%; border-collapse: collapse; }
.ona-sc__table thead th { background: var(--color-text); color: #fff; font-family: var(--ona-font-ui); font-size: 11px; font-weight: 400; text-transform: uppercase; letter-spacing: .06em; padding: 12px 16px; text-align: center; }
.ona-sc__table tbody td { font-family: var(--ona-font-serif); font-size: 16px; color: var(--color-text); text-align: center; padding: 12px 16px; border-bottom: 1px solid var(--color-border); }
.ona-sc__table tbody tr:nth-child(even) td { background: var(--color-bg-alt); }
.ona-sc__table tbody tr:last-child td { border-bottom: none; }

/* Bloque 3 — imagen */
.ona-sc__img { display: block; width: 720px; max-width: 100%; height: auto; margin: 48px auto; }

/* Bloques 4 y 5 — texto */
.ona-sc__p { font-family: var(--ona-font-serif); font-size: 16px; color: var(--color-text-6); line-height: 1.8; margin: 0 0 14px; }
.ona-sc__measure .ona-sc__p { margin-bottom: 18px; }
.ona-sc__list { list-style: none; padding-left: 0; margin: 0; }
.ona-sc__list li { font-family: var(--ona-font-serif); font-size: 16px; color: var(--color-text-6); line-height: 2; }
.ona-sc__term { font-family: var(--ona-font-ui); font-size: 11px; font-weight: 500; text-transform: uppercase; letter-spacing: .06em; color: var(--color-text); }
.ona-sc__hl { font-family: var(--ona-font-ui); font-size: 11px; text-transform: uppercase; letter-spacing: .06em; color: var(--color-text); }

/* ═══════════════════════════════════════════════════
   MINI CART DRAWER — contenido (potencia el drawer existente)
═══════════════════════════════════════════════════ */

/* Barra de envío */
.ona-cs__shipbar {
  background: var(--color-bg-alt);
  padding: 10px 24px;
  font-family: var(--ona-font-ui);
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: .08em;
  color: var(--color-text-6);
  display: flex;
  align-items: center;
  gap: 8px;
  flex-shrink: 0;
  line-height: 1.4;
}
.ona-cs__shipbar svg { flex-shrink: 0; }

/* Footer del drawer: nota de impuestos + línea de confianza */
.ona-cs__tax-note { font-family: var(--ona-font-serif); font-style: italic; font-size: 12px; color: var(--color-text-4); text-align: center; margin: 0 0 10px; }
.ona-cs__trust { display: flex; align-items: center; justify-content: center; gap: 6px; font-family: var(--ona-font-ui); font-size: 10px; letter-spacing: .04em; color: var(--color-text-6); text-align: center; margin: 12px 0 0; }
.ona-cs__trust svg { color: var(--color-text-4); flex-shrink: 0; }

/* Lista de items */
.ona-cart-items { display: block; }
.ona-cart-item { display: flex; gap: 14px; padding: 16px 0; border-bottom: 1px solid var(--color-border); }
.ona-cart-item__thumb { flex-shrink: 0; width: 80px; height: 80px; display: block; }
.ona-cart-item__thumb img { width: 80px; height: 80px; object-fit: cover; display: block; }
.ona-cart-item__info { flex: 1; min-width: 0; }
.ona-cart-item__name { font-family: var(--ona-font-ui); font-size: 11px; text-transform: uppercase; letter-spacing: .08em; color: var(--color-text); display: block; margin-bottom: 4px; line-height: 1.3; }
.ona-cart-item__meta { font-family: var(--ona-font-serif); font-size: 13px; color: var(--color-text-4); display: block; margin-bottom: 10px; }
.ona-cart-item__actions { display: flex; align-items: center; gap: 10px; }
.ona-qty-wrap { display: flex; align-items: center; border: 1px solid var(--color-border); }
.ona-qty-wrap .ona-qty { width: 28px; height: 28px; background: none; border: none; cursor: pointer; font-size: 14px; color: var(--color-text); display: flex; align-items: center; justify-content: center; padding: 0; }
.ona-qty-wrap input.qty { width: 34px; height: 28px; border: none; text-align: center; font-family: var(--ona-font-serif); font-size: 14px; background: var(--color-bg); -moz-appearance: textfield; }
.ona-qty-wrap input.qty::-webkit-outer-spin-button,
.ona-qty-wrap input.qty::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
.ona-cart-item__price { font-family: var(--ona-font-serif); font-size: 15px; color: var(--color-text); margin-left: auto; white-space: nowrap; }
.ona-cart-item__remove { background: none; border: none; cursor: pointer; color: var(--color-text-4); padding: 0; transition: color .2s; display: inline-flex; }
.ona-cart-item__remove:hover { color: var(--accent-cherry); }

/* Carrito vacío */
.ona-cart-empty { text-align: center; padding: 48px 0; }
.ona-cart-empty p { font-family: var(--ona-font-serif); font-size: 16px; color: var(--color-text-6); margin-bottom: 24px; }

/* Cross-sells "Completa el look" */
.ona-cs__crosssells { border-top: 1px solid var(--color-border); padding: 16px 0 4px; position: relative; }
.ona-cs__crosssells-title { font-family: var(--ona-font-serif); font-size: 15px; font-style: italic; color: var(--color-text); display: block; margin-bottom: 12px; }
.ona-crosssells-track { display: flex; gap: 12px; overflow-x: auto; scroll-behavior: smooth; scrollbar-width: none; padding-bottom: 4px; }
.ona-crosssells-track::-webkit-scrollbar { display: none; }
.ona-crosssell-item { flex-shrink: 0; width: 90px; text-align: center; }
.ona-crosssell-item img { width: 90px; height: 90px; object-fit: cover; display: block; margin-bottom: 6px; }
.ona-crosssell-item__price { font-family: var(--ona-font-serif); font-size: 12px; color: var(--color-text-6); display: block; margin-bottom: 4px; }
.ona-crosssell-item__add { font-family: var(--ona-font-ui); font-size: 9px; text-transform: uppercase; letter-spacing: .05em; background: none; border: 1px solid var(--color-border); color: var(--color-text-6); padding: 4px 6px; cursor: pointer; width: 100%; transition: all .2s; }
.ona-crosssell-item__add:hover { background: var(--color-text); color: #fff; border-color: var(--color-text); }
.ona-crosssell-item__add.is-loading { opacity: .5; }
.ona-crosssells-arrow { position: absolute; right: 0; top: 54%; background: var(--color-text); color: #fff; border: none; width: 24px; height: 24px; cursor: pointer; font-size: 12px; display: flex; align-items: center; justify-content: center; }


/* Bloque 6 — CTA dudas */
.ona-sc__cta { background: var(--color-text); padding: 56px 48px; text-align: center; margin-top: 48px; }
.ona-sc__cta-q { font-family: var(--ona-font-serif); font-style: italic; font-size: 22px; color: #fff; margin: 0; }
.ona-sc__cta-sub { font-family: var(--ona-font-ui); font-size: 11px; text-transform: uppercase; letter-spacing: .1em; color: var(--color-text-4); margin: 16px 0; }
.ona-sc__cta-btn { display: inline-block; border: 1px solid #fff; color: #fff; font-family: var(--ona-font-ui); font-size: 11px; text-transform: uppercase; letter-spacing: .08em; padding: 14px 32px; margin-top: 16px; transition: background .25s ease, color .25s ease; }
.ona-sc__cta-btn:hover { background: #fff; color: var(--color-text); }

@media (max-width: 768px) {
  .ona-sc__hero { padding: 48px 0 32px; }
  .ona-sc__h1 { font-size: 24px; }
  .ona-sc__card { margin: 24px 16px; }
  .ona-sc__tablewrap, .ona-sc__measure, .ona-sc__reco { padding: 28px 18px; }
  .ona-sc__table thead th, .ona-sc__table tbody td { padding: 10px 8px; font-size: 14px; }
  .ona-sc__cta { padding: 40px 20px; }
}


/* ═══════════════════════════════════════════════════
   BADGE ECONYL — forzar jade ONA sobre el verde del parent (#2D5A27)
═══════════════════════════════════════════════════ */

.badge-eco,
.product-badge--eco,
.wc-badge--eco {
  background-color: var(--accent-jade) !important;
}


/* ═══════════════════════════════════════════════════
   MÓVIL — Espaciado de acciones del header
═══════════════════════════════════════════════════ */

@media (max-width: 480px) {
  .header-actions,
  .nav-right,
  .ona-hdr__actions { gap: 14px !important; }
}


/* ═══════════════════════════════════════════════════
   BREADCRUMB — quitar números del <ol> (mostrar "Inicio | Página")
═══════════════════════════════════════════════════ */

.ona-breadcrumb-inner {
  list-style: none !important;
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
  margin: 0;
  padding: 0;
}
.ona-breadcrumb-inner li {
  list-style: none !important;
  margin: 0;
  padding: 0;
}
.ona-breadcrumb-inner li::marker { content: "" !important; }
.ona-breadcrumb-inner span { color: var(--color-border-2); }


/* ═══════════════════════════════════════════════════
   LOGO — un poco más grande (header subido a 78px)
═══════════════════════════════════════════════════ */

.custom-logo,
.ona-logo__img {
  max-height: 82px !important;
  width: auto !important;
}
@media (max-width: 768px) {
  .custom-logo,
  .ona-logo__img { max-height: 58px !important; }
}


/* ═══════════════════════════════════════════════════
   HOME v3 — Claim de sección, anuncios, atelier (Prompt 10)
═══════════════════════════════════════════════════ */

/* Claim bajo el título "Encuentra tu pieza" */
.ona-section-claim {
  font-size: 10px;
  font-weight: 400;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--color-text-4);
  line-height: 1.8;
  margin-top: 10px;
  max-width: 520px;
}

/* Transición de color en la barra de anuncios (color por mensaje vía JS) */
.ona-ann__slide,
.ann-slide { transition: color 0.4s ease; }

/* Garantizar fondo oscuro en la sección Atelier (el "Atelier" blanco
   del título necesita contraste). */
.ona-home__atelier {
  background: var(--color-text);
  color: var(--ona-white);
}


/* ═══════════════════════════════════════════════════
   FICHA DE PRODUCTO — móvil: 1 columna (fix desbordamiento)
   fase3.css define .ona-prod-layout en 2 columnas SIN media query,
   por eso en móvil se apretaba y se "agrandaba a la derecha".
═══════════════════════════════════════════════════ */
@media (max-width: 900px) {
  .ona-prod-layout { grid-template-columns: 1fr !important; gap: 28px 0 !important; }
  .ona-prod-gallery { grid-template-columns: 1fr !important; position: static !important; }
  .ona-prod-details { padding-left: 0 !important; }
  .ona-gal-thumbs { display: flex !important; flex-direction: row !important; flex-wrap: wrap; gap: 6px; }
  .ona-gal-thumb { width: 60px; flex-shrink: 0; }
}
/* Refuerzo: nada dentro del producto más ancho que el contenedor */
.ona-prod-page img,
.ona-prod-details img,
.ona-acc__body img,
.ona-desc__body img { max-width: 100% !important; height: auto; }
.ona-acc__body table,
.ona-desc__body table { max-width: 100%; display: block; overflow-x: auto; }


/* ═══════════════════════════════════════════════════
   FORMULARIO DE CONTACTO — estilo ONA moderno
═══════════════════════════════════════════════════ */

.ona-form { max-width: 640px; margin: 0 auto; }
.ona-form__row { display: grid; gap: 18px; margin-bottom: 18px; }
.ona-form__row--2 { grid-template-columns: 1fr 1fr; }
@media (max-width: 600px) { .ona-form__row--2 { grid-template-columns: 1fr; } }

.ona-form__field { display: flex; flex-direction: column; gap: 6px; margin-bottom: 18px; }
.ona-form__row .ona-form__field { margin-bottom: 0; }
.ona-form__field label {
  font-family: var(--ona-font-ui);
  font-size: 10px;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--color-text);
}
.ona-form__opt {
  font-size: 9px;
  letter-spacing: .08em;
  color: var(--color-text-4);
  text-transform: lowercase;
  margin-left: 4px;
}

/* Inputs (CF7 envuelve cada campo en .wpcf7-form-control-wrap) */
.ona-form input[type="text"],
.ona-form input[type="email"],
.ona-form input[type="tel"],
.ona-form textarea {
  width: 100%;
  border: 1px solid var(--color-border-2);
  border-radius: 0;
  background: var(--color-bg);
  padding: 14px 16px;
  font-family: var(--ona-font-ui);
  font-size: 14px;
  color: var(--color-text);
  transition: border-color .2s ease, background .2s ease;
}
.ona-form input[type="text"]::placeholder,
.ona-form input[type="email"]::placeholder,
.ona-form input[type="tel"]::placeholder,
.ona-form textarea::placeholder { color: var(--color-text-4); opacity: 1; }
.ona-form input:focus,
.ona-form textarea:focus { outline: none; border-color: var(--color-text); background: var(--color-bg); }
.ona-form textarea { min-height: 140px; resize: vertical; }

/* CF7: envoltorios */
.ona-form .wpcf7-form-control-wrap { display: block; }
.ona-form .wpcf7-not-valid-tip { color: var(--accent-cherry); font-size: 11px; margin-top: 4px; }
.ona-form .wpcf7-response-output { border: 1px solid var(--color-border); padding: 12px 14px; font-size: 13px; color: var(--color-text-6); margin: 16px 0 0; }
.ona-form .wpcf7-not-valid { border-color: var(--accent-cherry) !important; }

/* === FIX BLINDADO checkbox CF7 — sale del grid pase lo que pase === */
/* Si el acceptance quedó dentro de un grid de 2 columnas, lo sacamos */
.ona-form .ona-form__row .wpcf7-acceptance,
.ona-form .ona-form__row .wpcf7-form-control-wrap[class*="acceptance"],
.ona-form .ona-form__row .ona-form__check {
  grid-column: 1 / -1 !important;
  width: 100% !important;
}
/* Cualquier .ona-form__field que contenga un acceptance también ocupa todo el ancho */
.ona-form .ona-form__field:has(.wpcf7-acceptance),
.ona-form .ona-form__row > .ona-form__field:has(.wpcf7-acceptance) {
  grid-column: 1 / -1 !important;
  width: 100% !important;
  display: block !important;
}

/* === FIX DEFINITIVO checkbox acceptance CF7 === */
/* Aplica a CUALQUIER acceptance dentro de .ona-form, sin importar wrappers. */
.ona-form .wpcf7-acceptance,
.ona-form span.wpcf7-form-control-wrap[class*="acceptance"] {
  display: block !important;
  width: 100% !important;
  max-width: 100% !important;
  margin: 6px 0 22px !important;
  text-align: left !important;
}
.ona-form .wpcf7-acceptance .wpcf7-list-item {
  display: flex !important;
  flex-direction: row !important;
  flex-wrap: nowrap !important;
  align-items: center !important;
  gap: 10px !important;
  width: 100% !important;
  max-width: 100% !important;
  margin: 0 !important;
  padding: 0 !important;
  float: none !important;
}
.ona-form .wpcf7-acceptance .wpcf7-list-item > label {
  display: flex !important;
  flex-direction: row !important;
  flex-wrap: nowrap !important;
  align-items: center !important;
  gap: 10px !important;
  width: 100% !important;
  max-width: 100% !important;
  margin: 0 !important;
  padding: 0 !important;
  font-family: var(--ona-font-ui) !important;
  font-size: 12px !important;
  color: var(--color-text-6) !important;
  line-height: 1.5 !important;
  letter-spacing: 0 !important;
  text-transform: none !important;
  text-align: left !important;
  white-space: normal !important;
  cursor: pointer;
}
.ona-form .wpcf7-acceptance .wpcf7-list-item-label {
  display: inline !important;
  flex: 1 1 auto !important;
  width: auto !important;
  max-width: 100% !important;
  min-width: 0 !important;
  font: inherit !important;
  color: inherit !important;
  line-height: 1.5 !important;
  white-space: normal !important;
  word-break: normal !important;
  overflow-wrap: normal !important;
  writing-mode: horizontal-tb !important;
  text-orientation: mixed !important;
}
.ona-form .wpcf7-acceptance input[type="checkbox"] {
  accent-color: var(--color-text);
  width: 16px !important;
  height: 16px !important;
  margin: 0 !important;
  flex-shrink: 0 !important;
  flex-grow: 0 !important;
  cursor: pointer;
}
.ona-form .wpcf7-acceptance a {
  color: var(--color-text) !important;
  text-decoration: underline !important;
  text-underline-offset: 2px;
  white-space: nowrap;
}
/* Si el contenedor padre (.ona-form__check o columna) fuerza un ancho pequeño,
   reseteamos a 100% para que el label tenga aire. */
.ona-form .ona-form__check {
  width: 100% !important;
  max-width: 100% !important;
  display: block !important;
  text-align: left !important;
}

/* CF7 acceptance suelto (sin wrapper .ona-form__check) — forzar línea horizontal */
.ona-form .wpcf7-acceptance { display: block; margin: 6px 0 22px; }
.ona-form .ona-acceptance .wpcf7-list-item,
.ona-form span.wpcf7-acceptance .wpcf7-list-item {
  display: flex !important;
  flex-direction: row !important;
  align-items: center !important;
  gap: 10px !important;
  margin: 0 !important;
  padding: 0 !important;
  width: 100% !important;
  max-width: none !important;
}
.ona-form .ona-acceptance .wpcf7-list-item label,
.ona-form span.wpcf7-acceptance .wpcf7-list-item label {
  display: flex !important;
  flex-direction: row !important;
  align-items: center !important;
  gap: 10px !important;
  margin: 0 !important;
  padding: 0 !important;
  font-family: var(--ona-font-ui);
  font-size: 12px;
  color: var(--color-text-6);
  line-height: 1.5;
  letter-spacing: 0;
  text-transform: none;
  cursor: pointer;
  white-space: normal;
  flex-wrap: nowrap;
}
.ona-form .ona-acceptance .wpcf7-list-item-label,
.ona-form span.wpcf7-acceptance .wpcf7-list-item-label {
  flex: 1; min-width: 0; line-height: 1.5;
}
.ona-form .ona-acceptance input[type="checkbox"] {
  accent-color: var(--color-text);
  width: 16px; height: 16px;
  margin: 0; flex-shrink: 0; cursor: pointer;
}

/* Checkbox aceptación (CF7 acceptance) — forzar línea horizontal */
.ona-form__check { margin: 6px 0 22px; display: block; text-align: left; }

/* CF7 mete varios wrappers; los aplanamos */
.ona-form__check .wpcf7-form-control-wrap,
.ona-form__check .wpcf7-acceptance,
.ona-form__check .wpcf7-form-control { display: block !important; width: 100%; }

/* El item (label envoltorio) en flex horizontal — máxima especificidad */
.ona-form__check .wpcf7-list-item,
.ona-form .ona-form__check .wpcf7-list-item {
  display: flex !important;
  flex-direction: row !important;
  align-items: center !important;
  gap: 10px !important;
  margin: 0 !important;
  padding: 0 !important;
  width: 100% !important;
  max-width: none !important;
}
.ona-form__check .wpcf7-list-item label {
  display: flex !important;
  align-items: center !important;
  gap: 10px !important;
  margin: 0 !important;
  padding: 0 !important;
  font-family: var(--ona-font-ui);
  font-size: 12px;
  color: var(--color-text-6);
  line-height: 1.5;
  letter-spacing: 0;
  text-transform: none;
  cursor: pointer;
  white-space: normal;
}
/* La parte de texto que mete CF7: que ocupe el espacio restante en una línea */
.ona-form__check .wpcf7-list-item-label {
  font: inherit;
  color: inherit;
  flex: 1;
  min-width: 0;
  line-height: 1.5;
}
.ona-form__check input[type="checkbox"] {
  accent-color: var(--color-text);
  width: 16px;
  height: 16px;
  margin: 0;
  flex-shrink: 0;
  cursor: pointer;
}
.ona-form__check a { color: var(--color-text); text-decoration: underline; text-underline-offset: 2px; }

/* Botón ENVIAR */
.ona-form__submit { text-align: center; }
.ona-form__btn,
.ona-form input[type="submit"].ona-form__btn,
.ona-form .wpcf7-submit {
  display: inline-block;
  background: var(--color-text) !important;
  color: #fff !important;
  border: 1px solid var(--color-text) !important;
  border-radius: 0 !important;
  font-family: var(--ona-font-ui) !important;
  font-size: 11px !important;
  letter-spacing: .18em !important;
  text-transform: uppercase !important;
  padding: 16px 40px !important;
  min-width: 220px;
  cursor: pointer;
  transition: background .25s ease, color .25s ease;
}
.ona-form__btn:hover,
.ona-form .wpcf7-submit:hover { background: transparent !important; color: var(--color-text) !important; }

/* Spinner CF7 */
.ona-form .wpcf7-spinner { margin: 0 0 0 14px; }


/* ═══════════════════════════════════════════════════
   PÁGINAS GENÉRICAS (.ona-page) — centrado correcto
═══════════════════════════════════════════════════ */

/* El cuerpo de la página queda centrado (no pegado a la izquierda) */
.ona-page__body { max-width: 860px; margin-left: auto !important; margin-right: auto !important; }

/* El breadcrumb dentro del hero queda alineado con el título (ambos dentro del .ona-w) */
.ona-page__hero .ona-breadcrumb { padding: 12px 0 0; border: none; }
.ona-page__hero .ona-breadcrumb-inner { justify-content: flex-start; }


/* ═══════════════════════════════════════════════════
   ATELIER — Banner + Galería (carrusel)
═══════════════════════════════════════════════════ */

/* Hero Atelier con imagen de fondo (3 personas) — full width hasta el final */
.ona-atp__hero.ona-atp__hero--bg {
  position: relative;
  background-size: cover;
  background-position: center 32%;
  background-repeat: no-repeat;
  background-color: #e8e6e2;
  /* Altura generosa: ocupa hasta el final visible debajo del header.
     Sin max-height para que no quede cortado por arriba o por abajo. */
  height: calc(100vh - var(--ona-ann-h, 38px) - var(--ona-hdr-h, 86px));
  min-height: 520px;
  color: #fff;
  display: flex;
  align-items: flex-end;
  justify-content: center;
}
.ona-atp__hero--bg .ona-atp__hero-overlay {
  position: absolute; inset: 0;
  background: linear-gradient(to top, rgba(0,0,0,.6) 0%, rgba(0,0,0,.2) 50%, rgba(0,0,0,0) 80%);
  pointer-events: none;
}
.ona-atp__hero--bg .ona-atp__hero-inner {
  position: relative; z-index: 2;
  text-align: center;
  padding: 24px 24px 44px;
  width: 100%;
}
.ona-atp__hero--bg .ona-atp__hero-eyebrow,
.ona-atp__hero--bg .ona-atp__hero-title { color: #fff; text-shadow: 0 1px 14px rgba(0,0,0,.4); }
/* Botón outline LIGHT */
.ona-atp__btn--outline-light {
  display: inline-block;
  font-family: var(--ona-font-ui);
  font-size: 11px;
  letter-spacing: .14em;
  text-transform: uppercase;
  padding: 12px 28px;
  border: 1px solid #fff;
  color: #fff;
  background: transparent;
  transition: background .25s ease, color .25s ease;
}
.ona-atp__btn--outline-light:hover { background: #fff; color: var(--color-text); }

/* Tablet */
@media (max-width: 1024px) {
  .ona-atp__hero.ona-atp__hero--bg { height: calc(100vh - var(--ona-ann-h, 38px) - var(--ona-hdr-h, 86px)); min-height: 480px; }
}
/* Móvil — alto fijo en vh para ocupar pantalla; enfoque ajustado */
@media (max-width: 768px) {
  .ona-atp__hero.ona-atp__hero--bg { height: calc(100vh - var(--ona-ann-h, 38px) - var(--ona-hdr-m, 64px)); min-height: 440px; background-position: center 25%; }
}
@media (max-width: 480px) {
  .ona-atp__hero.ona-atp__hero--bg { background-position: 55% 22%; }
}

/* Galería / carrusel — versión compacta */
.ona-atp__gallery { padding: 48px 0; background: var(--color-bg); }
.ona-atp__slider {
  position: relative;
  max-width: 900px;
  margin: 0 auto;
  padding: 0 24px;
  aspect-ratio: 16/9;
  max-height: 480px;
}
@media (max-width: 768px) { .ona-atp__slider { aspect-ratio: 4/5; padding: 0 16px; max-height: none; } }
.ona-atp__slide {
  position: absolute;
  inset: 0 24px;
  margin: 0;
  opacity: 0;
  transition: opacity .8s ease;
  pointer-events: none;
}
@media (max-width: 768px) { .ona-atp__slide { inset: 0 16px; } }
.ona-atp__slide.is-active { opacity: 1; pointer-events: auto; }
.ona-atp__slide img { width: 100%; height: 100%; object-fit: cover; display: block; }

/* Dots de paginación */
.ona-atp__slider-dots {
  position: absolute;
  bottom: 14px;
  left: 0;
  right: 0;
  display: flex;
  justify-content: center;
  gap: 8px;
  z-index: 3;
}
.ona-atp__dot {
  width: 8px; height: 8px;
  border-radius: 50%;
  border: 1px solid rgba(255,255,255,.7);
  background: transparent;
  padding: 0;
  cursor: pointer;
  transition: background .25s ease, transform .25s ease;
}
.ona-atp__dot.is-active { background: #fff; transform: scale(1.2); }

/* Checkbox nativo del form del atelier */
.ona-atp__check-native label {
  display: flex;
  align-items: center;
  gap: 10px;
  font-family: var(--ona-font-ui);
  font-size: 12px;
  color: var(--color-text-6);
  line-height: 1.5;
  text-transform: none;
  letter-spacing: 0;
  cursor: pointer;
}
.ona-atp__check-native input[type="checkbox"] {
  accent-color: var(--color-text);
  width: 16px; height: 16px;
  margin: 0;
  flex-shrink: 0;
  cursor: pointer;
}
.ona-atp__check-native a { color: var(--color-text); text-decoration: underline; text-underline-offset: 2px; }


/* ═══════════════════════════════════════════════════
   CHECKOUT — Pedido recibido / Tu pedido / View order
═══════════════════════════════════════════════════ */

.ona-checkout-page { background: var(--color-bg); }
.ona-checkout-page .ona-page__body { max-width: 920px; padding-top: 48px; padding-bottom: 80px; }

/* Aviso de WooCommerce (Gracias…) */
.ona-checkout-page .woocommerce-notice,
.ona-checkout-page .woocommerce-thankyou-order-received {
  font-family: var(--ona-font-serif);
  font-size: 18px;
  color: var(--color-text-6);
  font-style: italic;
  margin: 0 0 28px;
  padding: 18px 22px;
  border: 1px solid var(--color-border);
  background: var(--color-bg-alt);
}

/* Resumen del pedido (tabla con números, fecha, total, email, pago) */
.ona-checkout-page ul.order_details,
.ona-checkout-page .woocommerce-order-overview {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
  gap: 18px;
  list-style: none;
  margin: 0 0 32px;
  padding: 22px 24px;
  border: 1px solid var(--color-border);
  background: var(--color-bg-alt);
}
.ona-checkout-page ul.order_details li {
  display: flex;
  flex-direction: column;
  gap: 4px;
  font-family: var(--ona-font-ui);
  font-size: 11px;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--color-text-4);
  border: none !important;
  padding: 0 !important;
  margin: 0 !important;
}
.ona-checkout-page ul.order_details li strong {
  font-family: var(--ona-font-serif);
  font-size: 16px;
  letter-spacing: 0;
  text-transform: none;
  color: var(--color-text);
  font-weight: 400;
}

/* Detalles del pedido (tabla productos) */
.ona-checkout-page .woocommerce-order-details,
.ona-checkout-page .woocommerce-customer-details { margin-bottom: 32px; }
.ona-checkout-page .woocommerce-order-details h2,
.ona-checkout-page .woocommerce-column__title,
.ona-checkout-page section.woocommerce-customer-details > h2 {
  font-family: var(--ona-font-serif);
  font-size: 22px;
  font-weight: 300;
  color: var(--color-text);
  margin: 0 0 16px;
}
.ona-checkout-page .woocommerce-table {
  width: 100%;
  border-collapse: collapse;
  font-family: var(--ona-font-ui);
  font-size: 14px;
}
.ona-checkout-page .woocommerce-table th,
.ona-checkout-page .woocommerce-table td {
  padding: 14px 12px;
  border-bottom: 1px solid var(--color-border);
  text-align: left;
  color: var(--color-text);
}
.ona-checkout-page .woocommerce-table th {
  font-size: 11px;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--color-text-6);
  font-weight: 500;
}
.ona-checkout-page .woocommerce-table .woocommerce-table__product-total,
.ona-checkout-page .woocommerce-table tfoot td { text-align: right; }
.ona-checkout-page .woocommerce-table tfoot th { text-align: right; }
.ona-checkout-page .woocommerce-table .order-total td,
.ona-checkout-page .woocommerce-table .order-total th {
  font-family: var(--ona-font-serif);
  font-size: 18px;
  border-top: 1px solid var(--color-text);
  text-transform: none;
  letter-spacing: 0;
}

/* Direcciones (envío + facturación) en 2 columnas */
.ona-checkout-page .woocommerce-customer-details .woocommerce-columns--addresses {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 24px;
}
@media (max-width: 768px) {
  .ona-checkout-page .woocommerce-customer-details .woocommerce-columns--addresses { grid-template-columns: 1fr; }
}
.ona-checkout-page address {
  font-family: var(--ona-font-ui);
  font-size: 14px;
  line-height: 1.7;
  color: var(--color-text-6);
  font-style: normal;
  padding: 18px 22px;
  border: 1px solid var(--color-border);
  background: var(--color-bg);
}

/* Refuerzo: forzar la rejilla de direcciones a 2 columnas (CF a veces lo deja flotando) */
.ona-checkout-page .woocommerce-customer-details .woocommerce-columns {
  display: grid !important;
  grid-template-columns: 1fr 1fr !important;
  gap: 24px !important;
  margin: 0 !important;
}
.ona-checkout-page .woocommerce-customer-details .woocommerce-columns::before,
.ona-checkout-page .woocommerce-customer-details .woocommerce-columns::after { display: none !important; }
.ona-checkout-page .woocommerce-customer-details .woocommerce-column {
  width: 100% !important;
  float: none !important;
  margin: 0 !important;
  padding: 0 !important;
}
@media (max-width: 768px) {
  .ona-checkout-page .woocommerce-customer-details .woocommerce-columns { grid-template-columns: 1fr !important; }
}

/* Datos bancarios — bloque elegante */
.ona-checkout-page .woocommerce-bacs-bank-details,
.ona-checkout-page .wc-bacs-bank-details {
  margin: 0 0 32px;
  padding: 22px 24px;
  border: 1px solid var(--color-border);
  background: var(--color-bg-alt);
}
.ona-checkout-page .woocommerce-bacs-bank-details-heading,
.ona-checkout-page .wc-bacs-bank-details-heading {
  font-family: var(--ona-font-serif);
  font-size: 22px;
  font-weight: 300;
  color: var(--color-text);
  margin: 0 0 14px;
  letter-spacing: 0;
  text-transform: none;
}
.ona-checkout-page .woocommerce-bacs-bank-details-account-name,
.ona-checkout-page .wc-bacs-bank-details-account-name {
  font-family: var(--ona-font-ui);
  font-size: 11px;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--color-text);
  margin: 0 0 10px;
  font-weight: 500;
}
.ona-checkout-page .woocommerce-bacs-bank-details ul,
.ona-checkout-page .wc-bacs-bank-details ul {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 14px 22px;
  list-style: none;
  margin: 0;
  padding: 0;
}
.ona-checkout-page .woocommerce-bacs-bank-details ul li,
.ona-checkout-page .wc-bacs-bank-details ul li {
  font-family: var(--ona-font-ui);
  font-size: 13px;
  color: var(--color-text);
  border: none;
  padding: 0;
  margin: 0;
  line-height: 1.5;
}
.ona-checkout-page .woocommerce-bacs-bank-details ul li strong,
.ona-checkout-page .wc-bacs-bank-details ul li strong {
  display: block;
  font-size: 11px;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--color-text-6);
  font-weight: 500;
  margin: 0 0 2px;
}
@media (max-width: 768px) {
  .ona-checkout-page .woocommerce-bacs-bank-details ul,
  .ona-checkout-page .wc-bacs-bank-details ul { grid-template-columns: 1fr; }
}

/* Forzar tipografía coherente en toda la página */
.ona-checkout-page,
.ona-checkout-page h2,
.ona-checkout-page h3,
.ona-checkout-page p,
.ona-checkout-page address,
.ona-checkout-page table { color: var(--color-text); }
.ona-checkout-page h2 { font-family: var(--ona-font-serif); font-weight: 300; font-size: 22px; letter-spacing: 0; text-transform: none; }
.ona-checkout-page h3 { font-family: var(--ona-font-ui); font-size: 13px; letter-spacing: .12em; text-transform: uppercase; color: var(--color-text); }


/* ═══════════════════════════════════════════════════
   NUESTRO COMPROMISO — Logos, video y fondo circular
═══════════════════════════════════════════════════ */

/* Bloque de logos (ECONYL/OEKO-TEX/GRS) con buen espaciado */
.ona-commit__logos {
  display: flex !important;
  flex-wrap: wrap;
  gap: 56px;
  align-items: center;
  justify-content: center;
  margin: 56px auto 16px !important;
  max-width: 1100px;
  padding: 0 24px;
}
.ona-commit__logo {
  max-width: 220px;
  height: auto;
  flex: 0 0 auto;
}
@media (max-width: 768px) {
  .ona-commit__logos { gap: 32px; margin-top: 36px !important; }
  .ona-commit__logo { max-width: 160px; }
}

/* Video YouTube responsive (16:9) en la sección "Hecho en Barcelona" */
.ona-commit__video-wrap {
  position: relative;
  width: 100%;
  aspect-ratio: 9 / 16;          /* el short es vertical 9:16 */
  max-width: 360px;
  margin: 0 auto;
  background: #000;
}
.ona-commit__video-wrap iframe {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  border: 0;
}
@media (min-width: 769px) {
  .ona-commit__video-wrap { max-width: 100%; aspect-ratio: 9 / 16; max-height: 640px; }
}

/* Grid del bloque local: video izquierda + texto derecha */
.ona-commit__local { padding: 64px 0; }
.ona-commit__local-inner { max-width: 1200px; margin: 0 auto; padding: 0 24px; }
.ona-commit__local-grid {
  display: grid !important;
  grid-template-columns: minmax(280px, 420px) 1fr;
  gap: 56px;
  align-items: center;
}
@media (max-width: 900px) {
  .ona-commit__local-grid { grid-template-columns: 1fr !important; gap: 32px; }
}
.ona-commit__local-text { font-family: var(--ona-font-ui); }
.ona-commit__local-text p {
  font-size: 15px;
  line-height: 1.8;
  color: var(--color-text-6);
  margin: 0 0 14px;
}
.ona-commit__section-title--left { text-align: left !important; margin-bottom: 18px; }
.ona-commit__sub-title {
  font-family: var(--ona-font-ui);
  font-size: 13px;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--color-text);
  margin: 28px 0 12px;
}

/* Sección "Un futuro que se mueve en círculo" con imagen de fondo + tarjeta semi-transparente */
.ona-commit__circular {
  position: relative;
  background-size: cover !important;
  background-position: center !important;
  background-repeat: no-repeat !important;
  padding: 120px 24px !important;
  min-height: 520px;
  display: flex;
  align-items: center;
  justify-content: center;
}
.ona-commit__circular::before {
  content: '';
  position: absolute;
  inset: 0;
  background: rgba(0,0,0,.25);
  pointer-events: none;
}
.ona-commit__circular-card {
  position: relative;
  z-index: 2;
  max-width: 720px;
  background: rgba(255,255,255,.92);
  padding: 56px 48px;
  text-align: center;
}
.ona-commit__circular-card p {
  font-family: var(--ona-font-ui);
  font-size: 15px;
  line-height: 1.85;
  color: var(--color-text-6);
  margin: 0 0 14px;
}
.ona-commit__circular-card p:last-child { margin-bottom: 0; }
.ona-commit__circular-card .ona-commit__section-title { margin-bottom: 24px; }
@media (max-width: 768px) {
  .ona-commit__circular { padding: 64px 16px !important; min-height: 420px; }
  .ona-commit__circular-card { padding: 36px 24px; }
}


/* ═══════════════════════════════════════════════════
   FIX RESPONSIVE — Imágenes Divi (size-guide, etc.)
   En Divi las imágenes a veces llevan width/height fijos en el
   atributo HTML; en móvil quedan más anchas que el viewport.
═══════════════════════════════════════════════════ */

/* Imágenes Divi en general */
.et_pb_image,
.et_pb_image .et_pb_image_wrap,
.et_pb_image_wrap img,
.et_pb_module img {
  max-width: 100% !important;
  height: auto !important;
}
/* Imagen específica de la guía de tallas */
img[src*="Untitled-1200-x-1350-px-1"] {
  max-width: 100% !important;
  height: auto !important;
  display: block;
  margin: 0 auto;
}
/* En móvil, cualquier columna Divi puede tener width fijo en píxeles */
@media (max-width: 768px) {
  .et_pb_column,
  .et_pb_row,
  .et_pb_section { max-width: 100% !important; }
  .et_pb_image img,
  .et_pb_module img { width: 100% !important; height: auto !important; }
}

/* ═══════════════════════════════════════════════════
   v1.9.4 — Instagram en /nuestro-compromiso/
   Centrar título, dar respiro entre secciones.
═══════════════════════════════════════════════════ */
.ona-commit__instagram {
  margin-top: 80px;
  margin-bottom: 80px;
  padding: 40px 0;
  text-align: center;
}
.ona-commit__instagram .ona-home__instagram-hd {
  text-align: center;
  margin-bottom: 32px;
}
.ona-commit__instagram .ona-home__instagram-hd h3 {
  text-align: center;
  margin: 0 auto;
  letter-spacing: 0.12em;
  font-size: 22px;
  font-weight: 500;
}
/* Más aire arriba (debajo del bloque "Futuro circular") */
.ona-commit__circular + .ona-commit__instagram {
  margin-top: 100px;
}
@media (max-width: 768px) {
  .ona-commit__instagram {
    margin-top: 56px;
    margin-bottom: 56px;
    padding: 24px 0;
  }
  .ona-commit__circular + .ona-commit__instagram {
    margin-top: 64px;
  }
  .ona-commit__instagram .ona-home__instagram-hd h3 {
    font-size: 18px;
  }
}

/* ═══════════════════════════════════════════════════
   v1.9.4 — Unificar visual de inputs en Atelier form
   Que NAME, EMAIL, SELECT y TEXTAREA tengan exactamente
   el mismo estilo (borde, padding, fuente, color).
═══════════════════════════════════════════════════ */
.ona-atp__form .ona-form__field input[type="text"],
.ona-atp__form .ona-form__field input[type="email"],
.ona-atp__form .ona-form__field input[type="tel"],
.ona-atp__form .ona-form__field select,
.ona-atp__form .ona-form__field textarea,
.ona-atp__form-section input[type="text"],
.ona-atp__form-section input[type="email"],
.ona-atp__form-section input[type="tel"],
.ona-atp__form-section select,
.ona-atp__form-section textarea,
.ona-atp__form-section .wpcf7 input[type="text"],
.ona-atp__form-section .wpcf7 input[type="email"],
.ona-atp__form-section .wpcf7 input[type="tel"],
.ona-atp__form-section .wpcf7 select,
.ona-atp__form-section .wpcf7 textarea {
  width: 100% !important;
  box-sizing: border-box !important;
  display: block !important;
  padding: 14px 16px !important;
  border: 1px solid var(--color-border, #EBEBEB) !important;
  border-radius: 0 !important;
  background: #fff !important;
  color: var(--color-text, #0A0A0A) !important;
  font-family: inherit !important;
  font-size: 15px !important;
  line-height: 1.4 !important;
  font-weight: 400 !important;
  letter-spacing: 0 !important;
  appearance: none !important;
  -webkit-appearance: none !important;
  -moz-appearance: none !important;
  box-shadow: none !important;
  outline: none !important;
  transition: border-color .15s ease;
}
.ona-atp__form-section input:focus,
.ona-atp__form-section select:focus,
.ona-atp__form-section textarea:focus {
  border-color: var(--color-text, #0A0A0A) !important;
}
/* Placeholder uniforme */
.ona-atp__form-section input::placeholder,
.ona-atp__form-section textarea::placeholder {
  color: var(--color-text-4, #9A9A9A) !important;
  opacity: 1 !important;
  font-family: inherit !important;
  font-size: 15px !important;
  font-weight: 400 !important;
  font-style: normal !important;
}
/* Select: flecha personalizada (porque appearance:none la quita) */
.ona-atp__form-section select {
  background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath fill='none' stroke='%230A0A0A' stroke-width='1.5' d='M1 1l5 5 5-5'/%3E%3C/svg%3E") !important;
  background-repeat: no-repeat !important;
  background-position: right 16px center !important;
  padding-right: 44px !important;
}
/* Textarea: altura mínima coherente */
.ona-atp__form-section textarea {
  min-height: 140px !important;
  resize: vertical;
}
/* Labels uniformes */
.ona-atp__form-section label,
.ona-atp__form-section .wpcf7-form-control-wrap + label,
.ona-atp__form-section .ona-form__field > label {
  font-size: 12px !important;
  letter-spacing: 0.14em !important;
  text-transform: uppercase !important;
  color: var(--color-text, #0A0A0A) !important;
  font-weight: 500 !important;
  margin-bottom: 8px !important;
  display: block;
}

/* ═══════════════════════════════════════════════════
   v1.9.5 — Estado "cargando" del sidebar de filtros
   Cuando auto-submit dispara, dejamos los checkboxes
   semitransparentes y bloqueados para evitar doble click.
═══════════════════════════════════════════════════ */
.ona-filters.is-loading {
  opacity: .55;
  pointer-events: none;
  position: relative;
}
.ona-filters.is-loading::after {
  content: "";
  position: absolute;
  top: 12px; right: 12px;
  width: 18px; height: 18px;
  border: 2px solid var(--color-border, #EBEBEB);
  border-top-color: var(--color-text, #0A0A0A);
  border-radius: 50%;
  animation: onaSpin .8s linear infinite;
}
@keyframes onaSpin { to { transform: rotate(360deg); } }

/* Hint visual: ahora los filtros aplican solos, ocultamos botón "Aplicar"
   en desktop (queda como fallback si JS falla) */
@media (min-width: 769px) {
  .ona-filters__apply {
    display: none;
  }
}

/* ═══════════════════════════════════════════════════
   v1.9.6 — Lista de categorías como enlaces directos
   Las categorías NO son filtros del shop, son
   navegación directa a /categoria/<slug>/.
═══════════════════════════════════════════════════ */
.ona-cat-list {
  list-style: none;
  margin: 0;
  padding: 0;
}
.ona-cat-list li {
  margin: 0;
  padding: 0;
}
.ona-cat-link {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 8px 0;
  color: var(--color-text-6, #5A5A5A);
  text-decoration: none;
  font-size: 14px;
  letter-spacing: 0.02em;
  border-bottom: 1px solid transparent;
  transition: color .15s ease, border-color .15s ease;
}
.ona-cat-link:hover {
  color: var(--color-text, #0A0A0A);
}
.ona-cat-link.is-active {
  color: var(--color-text, #0A0A0A);
  font-weight: 600;
}
.ona-cat-link.is-active::before {
  content: "›";
  display: inline-block;
  margin-right: 6px;
  color: var(--accent-cherry, #B5303A);
}
.ona-cat-count {
  color: var(--color-text-4, #9A9A9A);
  font-size: 12px;
  font-variant-numeric: tabular-nums;
}

/* ═══════════════════════════════════════════════════
   v1.9.7 — Hero eyebrow "ETERNAL BLOOM · BARCELONA"
   Tamaño un poco mayor + letter-spacing más amplio
═══════════════════════════════════════════════════ */
.ona-home__hero-eyebrow > span:not(.ona-home__hero-eyebrow-line) {
  font-size: 15px !important;
  letter-spacing: 0.32em !important;
  font-weight: 500 !important;
}
@media (max-width: 768px) {
  .ona-home__hero-eyebrow > span:not(.ona-home__hero-eyebrow-line) {
    font-size: 13px !important;
    letter-spacing: 0.26em !important;
  }
}

/* ═══════════════════════════════════════════════════
   v1.9.7 — Logo en footer (sustituye al wordmark "ONA Dance")
   El logo original es negro → aplicamos filtro invert + brillo
   para que se vea blanco sobre fondo oscuro del footer.
═══════════════════════════════════════════════════ */
html body .ona-footer .ona-footer__logo-link,
html body.woocommerce .ona-footer .ona-footer__logo-link,
html body.woocommerce-page .ona-footer .ona-footer__logo-link,
html body.archive .ona-footer .ona-footer__logo-link,
html body.single-product .ona-footer .ona-footer__logo-link {
  display: inline-block !important;
  line-height: 0 !important;
  margin-bottom: 16px !important;
  max-width: 200px !important;
  width: auto !important;
}
html body .ona-footer .ona-footer__logo-img,
html body.woocommerce .ona-footer .ona-footer__logo-img,
html body.woocommerce-page .ona-footer .ona-footer__logo-img,
html body.archive .ona-footer .ona-footer__logo-img,
html body.single-product .ona-footer .ona-footer__logo-img,
html body .ona-footer__logo-img {
  display: block !important;
  max-width: 200px !important;
  width: 100% !important;
  height: auto !important;
  max-height: 110px !important;
  object-fit: contain !important;
  /* invert(1) convierte negro→blanco, brightness(2) refuerza,
     contrast(1) mantiene los bordes nítidos */
  filter: invert(1) brightness(2) contrast(1) !important;
  -webkit-filter: invert(1) brightness(2) contrast(1) !important;
}
@media (max-width: 768px) {
  html body .ona-footer .ona-footer__logo-link,
  html body.woocommerce .ona-footer .ona-footer__logo-link,
  html body.woocommerce-page .ona-footer .ona-footer__logo-link {
    max-width: 160px !important;
  }
  html body .ona-footer .ona-footer__logo-img,
  html body.woocommerce .ona-footer .ona-footer__logo-img,
  html body.woocommerce-page .ona-footer .ona-footer__logo-img,
  html body .ona-footer__logo-img {
    max-width: 160px !important;
    max-height: 90px !important;
  }
}