/* Ajustes aprobados por Rafael sobre el mockup. Se carga después de las hojas del mockup (assets/tienda/), que no se
   tocan. Cada regla anota la fecha y el motivo. */

/* 1.3 (06/11/2026): las filas del buscador miden lo mismo que en el mockup (111 px, fila con tallas) aunque el producto
   no tenga tallas, para que la lista no se vea apretada. El contenido queda centrado en la fila. */
.search-item{box-sizing:border-box;min-height:111px;display:flex;flex-direction:column;justify-content:center}


/* Ficha: la descripción de WooCommerce trae HTML (párrafos, listas, negritas); toma el estilo del párrafo del mockup. */
#tabDescription{font:400 13px/1.85 'DM Sans',sans-serif;color:var(--muted);margin:0 0 20px}
#tabDescription :is(p,ul,ol){font:inherit;margin:0 0 12px}
#tabDescription :is(ul,ol){padding-left:18px}
#tabDescription strong{color:var(--ink);font-weight:600}
#detailDescription>p{margin:0}

/* Ficha: botón de Marca (Botón Marca del sistema) sobre el antetítulo; logo en negativo en tema oscuro. */
.pdp-brand-btn{display:inline-flex;margin-bottom:14px}
html[data-theme=dark] .pdp-brand-btn img{filter:brightness(0) invert(1)}
/* Ficha: Agotado es un botón bloqueado, sin hover, sin Glow y sin ícono de carrito. */
.product-page .pdp-add:disabled,.product-page .pdp-add:disabled:hover,#mobileAdd:disabled,#mobileAdd:disabled:hover{background:var(--soft)!important;color:var(--muted)!important;border-color:var(--soft)!important;cursor:not-allowed;box-shadow:none!important;transform:none!important}
.product-page .pdp-add:disabled::before,.product-page .pdp-add:disabled::after{display:none!important}
/* Ficha: Compartir abre una fila de íconos sobre el botón (redes en línea, 44 px, como las del footer). */
.pdp-share{position:relative}
.pdp-share-menu{position:absolute;right:0;bottom:calc(100% + 10px);z-index:20;display:flex;gap:6px;padding:6px;border:1px solid var(--line);border-radius:999px;background:rgb(255 255 255 / .86);backdrop-filter:blur(18px) saturate(1.6);box-shadow:0 12px 32px #0000001a}
html[data-theme=dark] .pdp-share-menu{background:rgb(29 29 27 / .9)}
.pdp-share-menu[hidden]{display:none}
.pdp-share-menu .pdp-red{display:grid;place-items:center;width:44px;height:44px;padding:0;border:0;border-radius:50%;background:none;color:var(--ink);cursor:pointer;transition:transform .2s,background .2s}
.pdp-share-menu .pdp-red:hover,.pdp-share-menu .pdp-red:focus-visible{transform:translateY(-2px);background:var(--surface)}
/* Logos oficiales con sus colores de marca; X y TikTok en negro (blanco en tema oscuro, como en sus apps). */
.pdp-share-menu .pdp-red svg{width:28px;height:28px}
.pdp-share-menu .pdp-red:not(.pdp-red--copiar) svg{stroke:none}
.pdp-share-menu .pdp-red:not(.pdp-red--copiar) svg *{stroke:none}
.pdp-share-menu .pdp-red--copiar svg{width:22px;height:22px}
.pdp-share-menu .pdp-red--copiar{background:var(--surface-raised);color:var(--ink);box-shadow:inset 0 0 0 1px var(--line)}
.pdp-share-menu .pdp-red--copiar.is-ok{background:var(--ink);color:var(--on-ink)}

/* Guía de tallas con imagen: la ventana se ensancha para leer la tabla; la imagen abre en grande en otra pestaña. */
.pdp-guide:has(.pdp-guide-img){width:min(720px,94vw)}
.pdp-guide-img{display:block;margin:12px 0 18px}
.pdp-guide-img img{display:block;width:100%;height:auto;border-radius:12px}

/* Tienda (Rafael, 06/11/2026): "Ordenar por" con fondo blanco sólido; la regla del contador de Filtros no le aplica. */
.catalog-toolbar .mo-sel__btn{background:var(--surface-raised)}
.catalog-toolbar .mo-sel__btn span{background:none;border-radius:0;padding:0;font-size:inherit}
/* Filtros: sin línea entre el título y el buscador; buscador con lupa. */
.s3-filters__top{border-bottom:0}
.s3-search{position:relative}
.s3-search__icon{position:absolute;left:14px;top:50%;width:18px;height:18px;transform:translateY(-50%);fill:none;stroke:var(--muted);stroke-width:1.6;pointer-events:none}
.s3-search .s3-input{padding-left:42px}
/* Categoría y Marca con su imagen de referencia (miniatura de la categoría, logo de la marca). */
.s3-thumb{flex:0 0 32px;width:32px;height:32px;margin-right:0;border-radius:8px;background:var(--surface);overflow:hidden;display:grid;place-items:center}
.s3-thumb img{width:100%;height:100%;object-fit:cover}
.s3-thumb--marca{background:#fff;border:1px solid var(--line)}
.s3-thumb--marca img{object-fit:contain;padding:4px}
.s3-row{display:flex;align-items:center}
.s3-row em{margin-left:auto}
.s3-row--child .s3-thumb{flex-basis:26px;width:26px;height:26px}

/* Categoría principal con ícono de línea (las hijas con su imagen); rangos rápidos de precio. */
.s3-thumb--icono{background:none}
.s3-thumb--icono svg{width:20px;height:20px;fill:none;stroke:var(--ink-2);stroke-width:1.5;stroke-linecap:round;stroke-linejoin:round}
.s3-rangos{display:flex;flex-wrap:wrap;gap:8px;margin-top:14px}
.s3-rango{min-height:36px;padding:0 12px;border:1px solid var(--line);border-radius:999px;background:var(--surface-raised);color:var(--ink);font:500 12px var(--font-display);cursor:pointer;transition:border-color .2s}
.s3-rango:hover{border-color:var(--ink)}
.s3-rango[aria-pressed=true]{background:var(--ink);color:var(--on-ink);border-color:var(--ink)}

/* Contacto: el botón de WhatsApp lleva su logo, como los demás botones de WhatsApp de la tienda. */
.mo-ctc__card .mo-btn{display:inline-flex;align-items:center;gap:8px}
.mo-ctc__wa{width:18px;height:18px;flex:none;stroke:none}

/* El Protagonista (Inicio): Guardar Favorito y Compartir Producto de la ficha (pedido de Rafael, Fase 4.3). Mismas reglas
   de ficha.css, que Inicio no carga. */
.study-purchase .pdp-secondary-actions{display:flex;justify-content:space-between;gap:16px;margin:14px 0 0}
.study-purchase .pdp-secondary-actions>button,.study-purchase .pdp-share>button{display:flex;align-items:center;gap:9px;min-height:44px;border:0;background:none;color:var(--muted);font:400 11px 'DM Sans',sans-serif;padding:0}
.study-purchase .pdp-secondary-actions>button svg,.study-purchase .pdp-share>button svg{width:16px;height:16px}
.study-purchase #studyWish:hover,.study-purchase #studyWish:focus-visible,.study-purchase #studyWish.saved{color:#c2184b}
.study-purchase #studyWish.saved svg{fill:#c2184b;stroke:#c2184b}

/* Intro de Inicio: el logo espera oculto hasta que inicio.js empieza su animación (template-parts/inicio/intro.php). */
.intro-espera .assembly-logo,.intro-espera .assembly-caption{opacity:0}
/* Carrito: errores junto al contenido, sin avisos flotantes. */
.mo-cart-error{max-width:1120px;margin:16px auto;padding:12px 16px;border:1px solid var(--danger);border-radius:var(--radius-md);background:var(--danger-soft);color:var(--danger);font:400 14px/20px var(--font-text)}
.mo-cart-error[hidden]{display:none}
#cartDrawer .mo-cart-error{margin:12px 20px 0;flex:none}
[aria-busy=true] [data-cart-action],[aria-busy=true] [data-cart-undo]{pointer-events:none}

/* Checkout público: la única marca obligatoria de Términos está escrita en su plantilla. */
.mo .mo-co-terms label{display:flex;align-items:flex-start;gap:8px;font:400 14px/22px var(--font-text);color:var(--ink-2)}
.mo .mo-co-terms input{flex:none;width:18px;height:18px;margin:2px 0 0;accent-color:var(--ink)}
.mo .mo-co-terms a{text-decoration:underline;text-underline-offset:3px}
.mo .mo-co-terms abbr{border:0;text-decoration:none}
.mo .mo-co-pay #place_order{margin-top:var(--space-4,16px)}
.mo .woocommerce-NoticeGroup-checkout,.mo .woocommerce-NoticeGroup-checkout ul{margin:0 0 16px;padding:16px;list-style:none;border-radius:var(--radius-md);background:var(--danger-soft);color:var(--danger);font:400 14px/22px var(--font-text)}

/* Ficha: texto del equipo uniforme (mo_ficha_texto): misma letra, tamaño y color que el resto de la descripción. */
#tabDescription :is(p,ul,ol,li,em,a),.pdp-description :is(p,ul,ol,li,em,a){font:inherit;color:inherit}
#tabDescription strong,.pdp-description strong{font-weight:500;color:var(--ink)}
#tabDescription :is(ul,ol),.pdp-description :is(ul,ol){margin:0 0 20px;padding-left:18px}
#tabDescription li,.pdp-description li{margin:0 0 6px}
#tabDescription p,.pdp-description p{margin:0 0 14px}
#tabDescription a,.pdp-description a{text-decoration:underline;text-underline-offset:3px}

/* Reels: Abrir en TikTok o Instagram en negro (pedido de Rafael, flujo 6). */
.social-player-info>a:first-of-type{background:var(--ink);color:var(--paper);border:1px solid var(--ink)}
.social-player-info>a:first-of-type:hover{opacity:.88}

/* Ofertas de Inicio: etiqueta blanca como en el resto de la tienda, también en tema oscuro (pedido de Rafael). */
.offers-edit .arrival-badge,html[data-theme=dark] .arrival-badge{background:#fffffff0;color:#0b0b0b;border:1px solid #0000000c}

.study-selector>.mo-qf{flex:1;min-width:0}
#tabDescription li p,.pdp-description li p{margin:0}

/* Nuevo: destello dorado con brillo mínimo, como el punto de En Oferta (sistema, Fase 4). */
.arrival-badge--novedad{display:inline-flex;align-items:center;gap:6px}
.arrival-badge--novedad i{display:grid;width:10px;height:10px}
.arrival-badge--novedad i svg{width:10px;height:10px;fill:#cb9500;filter:drop-shadow(0 0 3px #ffcf4d);animation:mo-destello 1.6s ease-in-out infinite alternate}
@keyframes mo-destello{from{transform:scale(.78) rotate(0);opacity:.75}to{transform:scale(1.08) rotate(45deg);opacity:1}}
@media(prefers-reduced-motion:reduce){.arrival-badge--novedad i svg{animation:none}}

/* El Protagonista: video con más color y menos velo (pedido de Rafael; el mockup usa opacity .4 y blur 3px). */
.study-video{opacity:.72;filter:blur(1.5px) saturate(1.15)}

/* Favoritos: ícono del navbar con contador (el de cart-count) y página /favoritos/. */
.fav-trigger{position:relative}
.fav-count[hidden]{display:none}
.mo-favoritos{min-height:60vh}
/* Estado vacío: el mismo botón primario del carrito vacío (Fase 10, Paso 3). */
.mo-favoritos .arrival-empty .mo-btn{margin-top:18px}
.mo-favoritos{padding-top:32px}
/* Favoritos sobre fondo blanco (paper cambia solo en tema oscuro), sin el gris de la sección del mockup. */
.experience-main .mo-favoritos{background:var(--paper);border:0}

/* Seguir Mi Pedido: el texto de apoyo junto al título y aire entre la búsqueda y el resultado (flujo 1). */
.mo-ayuda-main .experience-heading{justify-content:flex-start;gap:clamp(40px,8vw,120px)}
.mo-ayuda .mo-seg-result{margin-top:var(--space-5)}

/* F6A: reglas de acceso del portal, limitadas a la tienda. */
.mo-tienda-acceso{--space-8:64px}
.mo-cuenta-pagina .wd-toolbar{display:none!important}
.mo.mo-tienda-acceso { max-width: 810px; margin: var(--space-6) auto var(--space-8); background: transparent; display: grid; gap: var(--space-5); }
/* El registro usa el ancho completo (810 px); acceso, recuperar, restablecer, pestañas y avisos quedan en 620 px. */
.mo.mo-tienda-acceso > *:not(.mo-acceso-registro) { width: 100%; max-width: 620px; justify-self: center; }
.mo-tienda-acceso .mo-auth-tabs { gap: var(--space-2); border-bottom: 0; }
/* Pestaña activa: negra con texto blanco. Inactiva: blanca con borde y texto negro. */
.mo-tienda-acceso .mo-auth-tabs .mo-tab { flex: 1; min-height: 48px; margin: 0; border: 1px solid var(--line-strong); border-radius: var(--radius-md); background: var(--surface-raised); color: var(--ink); font-family: var(--font-display); font-size: 15px; font-weight: 600; box-shadow: none; }
.mo-tienda-acceso .mo-auth-tabs .mo-tab:hover { border-color: var(--ink); }
.mo-tienda-acceso .mo-auth-tabs .mo-tab.active { background: var(--ink); border-color: var(--ink); color: var(--on-ink); }
.mo-tienda-acceso .mo-auth-tabs .mo-tab:focus-visible { outline: none; border-color: var(--gold); box-shadow: var(--shadow-focus); }
.mo-tienda-acceso .mo-tab-content { display: none; }
.mo-tienda-acceso .mo-tab-content.active { display: block; }
.mo-tienda-acceso .mo-login-card { display: grid; gap: var(--space-2); }
.mo-tienda-acceso .mo-auth-sub { margin: 0; }
.mo-tienda-acceso .mo-form { display: grid; gap: var(--space-5); }
.mo-tienda-acceso .mo-auth-form { margin-top: var(--space-4); }
.mo-tienda-acceso .mo-form-actions { display: flex; justify-content: space-between; align-items: center; gap: var(--space-3); flex-wrap: wrap; }
.mo-tienda-acceso .mo-form-actions--center { justify-content: center; }
/* Ojo de contraseña: objetivo táctil de 44 px dentro del campo. */
.mo-tienda-acceso .mo-input-has-eye { padding-right: 48px; }
.mo-tienda-acceso .mo-toggle-password { position: absolute; right: 0; top: 0; display: grid; place-items: center; width: 44px; height: 44px; min-height: 0; padding: 0; border: 1px solid transparent; border-radius: var(--radius-md); background: transparent; color: var(--muted); cursor: pointer; box-shadow: none; }
.mo-tienda-acceso .mo-toggle-password:hover { color: var(--ink); }
.mo-tienda-acceso .mo-toggle-password:focus-visible { outline: none; border-color: var(--gold); box-shadow: var(--shadow-focus); }
.mo-tienda-acceso .mo-toggle-password svg { display: block; pointer-events: none; }
/* Captcha: ancho de una columna del formulario; en móvil, ancho completo. */
.mo-tienda-acceso .mo-captcha { width: calc(50% - var(--space-4) / 2); min-width: 300px; }
.mo-tienda-acceso .mo-captcha:empty { display: none; }
.mo-tienda-acceso .mo-rp-error { display: block; color: var(--danger); }
.mo-tienda-acceso .mo-rp-error:empty { display: none; }

.mo-tienda-acceso .mo-auth-tabs a{display:grid;place-items:center;text-align:center;text-decoration:none;padding:12px}
.mo-tienda-acceso .mo-auth-tabs{display:flex}
.mo-tienda-acceso .mo-form-row{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:var(--space-4)}
/* Cada campo reserva la línea de su error: al validar, ningún campo se mueve ni se estira (flujo 3). */
.mo-tienda-acceso .mo-field{display:grid;grid-template-rows:auto auto 16px;align-content:start;align-self:start;gap:6px}
.mo-tienda-acceso .mo-form{gap:4px}
.mo-tienda-acceso .mo-form-row{row-gap:0}
.mo-tienda-acceso .mo-tab-content[hidden]{display:none}
.mo-tienda-acceso .mo-form-row{align-items:start}
.mo-tienda-acceso .mo-field-error{display:block;min-height:16px;font-size:12px;line-height:16px;color:var(--danger);visibility:hidden;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.mo-tienda-acceso .has-error .mo-field-error{visibility:visible}
.mo-tienda-acceso .has-error .mo-input{border-color:var(--danger);background:var(--danger-soft)}
.mo-tienda-acceso .mo-reg-login-link{border-top:1px solid var(--line);padding-top:var(--space-4);text-align:center}
.mo-tienda-acceso .mo-check{display:flex;align-items:flex-start;gap:8px}
.mo-tienda-acceso .mo-check input{flex:none;margin-top:4px;accent-color:var(--ink)}
@media(max-width:640px){.mo-tienda-acceso .mo-form-row{grid-template-columns:1fr}.mo-tienda-acceso .mo-captcha{width:100%;min-width:0}}

/* Mis Pedidos: tarjetas algo más anchas y de alto fijo; la dirección larga se corta en 2 líneas (flujo 3). */
.mo .mo-pedidos__lista{grid-template-columns:repeat(auto-fill,minmax(min(100%,400px),1fr));align-items:stretch}
.mo .mo-ped{grid-template-rows:auto 56px 1fr auto;min-height:440px}
.mo .mo-ped__fotos{overflow:hidden}
.mo .mo-ped__fotos li{flex:none}
.mo .mo-ped__datos dd{display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;max-width:70%}

/* Menú de Mi Cuenta con ícono por sección. */
.account-nav>a svg{width:18px;height:18px;flex:none;fill:none;stroke:currentColor;stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round}
.mo-cuenta__campos input[readonly]{background:var(--subtle);color:var(--muted);cursor:not-allowed}

/* Libro: el texto largo de la revisión y la constancia se parte dentro de su caja (flujo 5). */
.mo-lr dd,.mo-lr-case .mo-body{overflow-wrap:anywhere;min-width:0}

/* Acceso y afiliación de socios (/socio/ sin portal): los espacios del sistema que usan las hojas del portal (flujo 7). */
.mo-socio-acceso{--space-1:4px;--space-2:8px;--space-3:12px;--space-4:16px;--space-5:24px;--space-6:32px;--space-7:48px;--space-8:64px;--shadow-focus:0 0 0 1px #cb9500}
.mo-portal-cliente .mo-login-card{display:grid;gap:var(--space-3)}
.mo-portal-cliente .mo-h1,.mo-portal-cliente .mo-body,.mo-portal-cliente .mo-small{margin:0}
.mo-portal-cliente__acciones{display:grid;grid-template-columns:1fr 1fr;gap:var(--space-3);margin-top:var(--space-2)}
@media(max-width:560px){.mo-portal-cliente__acciones{grid-template-columns:1fr}}


/* Fase 9: en móvil cierre.css le pone justify-content:space-between y la flecha se iba a la esquina del círculo. */
.footer-back{justify-content:center!important;align-content:center!important;gap:0!important}

/* Fase 9: en el celular los filtros rápidos (Novedades, Protagonista) son una fila deslizable, sin el menú Más. */
.mo-qf.mo-qf--fila{overflow-x:auto;overscroll-behavior-x:contain;scroll-snap-type:x proximity;scrollbar-width:none;-webkit-overflow-scrolling:touch;padding-bottom:2px}
.mo-qf.mo-qf--fila::-webkit-scrollbar{display:none}
.mo-qf.mo-qf--fila>.filter-chip{scroll-snap-align:start}

/* Fase 9: en el celular las tallas van en una sola fila deslizable al pie de la foto; con 3 o más ya no tapan la tarjeta. */
@media (hover:none),(pointer:coarse),(max-width:760px){
.arrival-photo .arrival-options{padding:8px!important}
.arrival-photo .arrival-option-label{display:block;margin-bottom:6px}
.arrival-photo .product-variants{display:flex!important;flex-wrap:nowrap!important;gap:6px!important;overflow-x:auto;overscroll-behavior-x:contain;scrollbar-width:none;-webkit-overflow-scrolling:touch}
.arrival-photo .product-variants::-webkit-scrollbar{display:none}
.arrival-photo .product-variants .size-chip{flex:0 0 auto}
}