/*
Theme Name:   ORESA Storefront
Theme URI:    https://oresa.local/
Template:     storefront
Author:       Tiskel Labs
Author URI:   https://tiskel.dev/
Description:  Child theme de Storefront para la tienda ORESA (F1 · C3). SOLO capa de presentación: identidad de marca por tokens centralizados, homepage y páginas estáticas. Cero lógica de integración (personalizador, push de pedido, REST, WP-CLI) — eso vive en el plugin oresa-core. Marca por FALLBACK: arranca con defaults de Storefront listos para swap en assets/css/tokens.css.
Version:      0.12.0
Requires at least: 6.8
Requires PHP: 8.2
License:      GNU General Public License v3 or later
License URI:  https://www.gnu.org/licenses/gpl-3.0.html
Text Domain:  oresa-storefront
Tags:         e-commerce, two-columns, custom-colors, custom-menu, responsive-layout, accessibility-ready
*/

/* --------------------------------------------------------------------------
 * Overrides de marca de ORESA.
 *
 * REGLA DURA (A3): ninguna regla de este archivo usa un color/fuente LITERAL.
 * Todo valor de marca deriva de las custom properties de assets/css/tokens.css
 * (`var(--oresa-*)`). Editá los tokens allí — nunca aquí — para reestilar.
 *
 * Estas reglas solo "cablean" los tokens sobre los elementos de Storefront,
 * de modo que cambiar un token en tokens.css reestile la tienda sin tocar este
 * archivo ni las plantillas. Con los defaults actuales el resultado visual es
 * idéntico a Storefront (fallback de marca).
 * ------------------------------------------------------------------------ */

body,
button,
input,
select,
textarea {
	font-family: var(--oresa-font-body);
	color: var(--oresa-color-text);
}

body {
	font-size: var(--oresa-font-size-base);
	background-color: var(--oresa-color-background);
}

h1, h2, h3, h4, h5, h6 {
	font-family: var(--oresa-font-heading);
	color: var(--oresa-color-heading);
	font-weight: var(--oresa-font-weight-heading);
}

/* Botón: hover coherente con el token de marca */
button:hover,
input[type="submit"]:hover,
.button:hover,
.woocommerce a.button:hover,
.woocommerce button.button:hover,
.woocommerce input.button:hover {
	background-color: var(--oresa-color-button-hover-bg);
}

a {
	color: var(--oresa-color-accent);
}

button,
input[type="button"],
input[type="reset"],
input[type="submit"],
.button,
.wp-block-button__link,
.woocommerce #respond input#submit,
.woocommerce a.button,
.woocommerce button.button,
.woocommerce input.button {
	background-color: var(--oresa-color-button-bg);
	color: var(--oresa-color-button-text);
}

.woocommerce #respond input#submit.alt,
.woocommerce a.button.alt,
.woocommerce button.button.alt,
.woocommerce input.button.alt {
	background-color: var(--oresa-color-button-alt-bg);
	color: var(--oresa-color-button-alt-text);
}

/* --------------------------------------------------------------------------
 * HEADER — branding con logo real AL Mayoreo, limpio y premium. Site-wide.
 * ------------------------------------------------------------------------ */
.site-header {
	background-color: #fff;
	border-bottom: 1px solid var(--oresa-color-border);
	padding: 0 !important;          /* mata el aire por defecto de Storefront */
	position: relative;             /* ancla para el carrito absoluto */
}
/* La 2.ª fila de Storefront queda vacía (quitamos el menú de páginas): fuera. */
.storefront-primary-navigation { display: none !important; }
/* Fila 1: logo + buscador, en una barra compacta */
.site-header .col-full {
	max-width: var(--oresa-container);
	padding: 10px 24px !important;
	display: flex;
	align-items: center;
	gap: 24px;
}
.site-header .site-branding {
	margin: 0 !important;
	padding: 0 !important;
	float: none !important;
	flex: 0 0 auto;
	width: auto !important;
}
.oresa-brand { display: inline-flex; align-items: center; }
.site-header .oresa-brand .oresa-brand__logo {
	height: 46px !important;
	width: auto !important;
	max-width: none !important;
	display: block;
	border: 0;
	box-shadow: none;
	border-radius: 0;
}
.site-header .site-search {
	padding: 0 !important;
	float: none !important;
	flex: 1 1 auto;
	max-width: 680px;
	margin: 0 20px !important;
	width: auto !important;
	order: 2;
}
.site-header .site-search .widget { margin: 0 !important; }
.site-header .site-search .woocommerce-product-search,
.site-header .site-search form { margin: 0 !important; }
.site-header .site-search .search-field { width: 100% !important; }

/* Carrito en la MISMA fila (subido por hook), alineado a la derecha */
.site-header .site-branding { order: 1; }
.site-header .secondary-navigation { display: none !important; }
.site-header #site-header-cart {
	display: flex;
	align-items: center;
	margin: 0 !important;
	padding: 0 !important;
	list-style: none !important;
}
/* Desktop: carrito anclado al top-right de la fila 1 (alineado al borde del
 * contenedor 1520). En mobile fluye normal debajo. */
@media (min-width: 769px) {
	.site-header #site-header-cart {
		position: absolute;
		top: 0;
		right: max(24px, calc((100% - 1520px) / 2 + 24px));
		height: 66px;
	}
}
.site-header #site-header-cart > li { float: none !important; margin: 0 !important; list-style: none !important; }
.site-header #site-header-cart .cart-contents {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	padding: 8px 12px;
	color: var(--oresa-color-heading);
	font-family: var(--oresa-font-heading);
	font-weight: 600;
	white-space: nowrap;
	border-radius: 800px;
}
.site-header #site-header-cart .cart-contents:hover { background: var(--oresa-color-surface); }
.site-header #site-header-cart .amount { font-weight: 700; color: var(--oresa-color-heading); }

/* Fila 2: navegación de páginas + carrito, compacta y pegada a la mega-nav */
.storefront-primary-navigation {
	margin: 0 !important;
	background: #fff;
	border-top: 1px solid var(--oresa-color-border);
}
.storefront-primary-navigation .col-full {
	max-width: var(--oresa-container);
	padding: 0 24px !important;
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 16px;
}
.storefront-primary-navigation .main-navigation {
	width: auto !important;
	float: none !important;
	margin: 0 !important;
}
.storefront-primary-navigation .main-navigation ul { margin: 0 !important; }
.storefront-primary-navigation .site-header-cart {
	float: none !important;
	margin: 0 !important;
	padding: 0 !important;
}

/* Fila 2 en DESKTOP: menú de páginas alineado a la IZQUIERDA (bajo el logo),
 * carrito a la DERECHA. Storefront mete un botón hamburguesa + un menú duplicado
 * que descuadraban la fila; los ocultamos en desktop. (Mobile intacto.) */
@media (min-width: 769px) {
	.storefront-primary-navigation .main-navigation {
		width: auto !important;
		float: none !important;
		margin: 0 !important;
		display: flex !important;
		align-items: center;
	}
	.storefront-primary-navigation .main-navigation .menu-toggle { display: none !important; }
	.storefront-primary-navigation .main-navigation div.menu + div.menu { display: none !important; }
	.storefront-primary-navigation .main-navigation ul.nav-menu,
	.storefront-primary-navigation .main-navigation div.menu > ul {
		display: flex !important;
		align-items: center;
		gap: 4px;
		margin: 0 !important;
		padding: 0 !important;
		list-style: none !important;
	}
	.storefront-primary-navigation .main-navigation li {
		float: none !important;
		margin: 0 !important;
		border: 0 !important;
	}
	.storefront-primary-navigation .main-navigation a { padding: 14px 14px !important; }
	.storefront-primary-navigation .site-header-cart { margin-left: auto !important; }
}

/* Quita el hueco gigante entre el header y el hero */
.site-content { padding-top: 0 !important; }

@media (max-width: 480px) {
	.site-header .oresa-brand .oresa-brand__logo { height: 40px !important; }
	.site-header .col-full { flex-wrap: wrap; gap: 12px; }
	.site-header .site-search { max-width: 100%; }
}

/* --------------------------------------------------------------------------
 * ANCHO GLOBAL — Storefront capa el contenido en .col-full a ~1110px, lo que
 * dejaba franjas blancas enormes a los lados en pantallas anchas. Lo llevamos
 * al contenedor de marca (1520) site-wide, y en el HOME lo liberamos del todo
 * para que las secciones (front-page.php) controlen su propio ancho con .oh-wrap.
 * ------------------------------------------------------------------------ */
.col-full { max-width: var(--oresa-container); }
.home #content > .col-full {
	max-width: none !important;
	padding-left: 0 !important;
	padding-right: 0 !important;
	width: 100% !important;
}
/* Storefront deja el content-area flotado al ~73% (layout de 2 columnas), lo que
 * pegaba el home a la izquierda con una franja blanca a la derecha en pantallas
 * anchas. En el home lo forzamos a ancho completo y sin float. */
.home #primary.content-area {
	width: 100% !important;
	max-width: none !important;
	float: none !important;
	margin: 0 !important;
}
.home .widget-area { display: none !important; }

/* --------------------------------------------------------------------------
 * MEGA-NAV de categorías — barra navy bajo el header, site-wide, con dropdowns
 * de productos por categoría. Categorización profesional (modelo "pero mejor").
 * ------------------------------------------------------------------------ */
.oresa-catnav {
	background: var(--oresa-color-navy-deep);
	width: 100%;
	position: relative;
	z-index: 50;
}
.oresa-catnav__inner {
	max-width: var(--oresa-container);
	margin: 0 auto;
	padding: 0 24px;
	display: flex;
	align-items: stretch;
	gap: .25rem;
	flex-wrap: wrap;
}
.oresa-catnav__all,
.oresa-catnav__top {
	display: inline-flex;
	align-items: center;
	padding: .85rem 1rem;
	color: #fff;
	font-family: var(--oresa-font-heading);
	font-weight: 600;
	font-size: .95rem;
	white-space: nowrap;
	border-bottom: 3px solid transparent;
}
.oresa-catnav__all { color: var(--oresa-color-kraft); }
.oresa-catnav__all:hover,
.oresa-catnav__top:hover { color: #fff; border-bottom-color: var(--oresa-color-rust); }

/* Resaltado de ubicación actual (aria-current) — subrayado kraft (02.c §2.1). */
.oresa-catnav__top[aria-current="true"] {
	color: #fff;
	border-bottom-color: var(--oresa-color-kraft);
}
.oresa-catnav__caret { font-size: .7em; opacity: .8; }

.oresa-catnav__item { position: relative; display: flex; }

/* Panel dropdown con productos de la categoría */
.oresa-catnav__panel {
	position: absolute;
	top: 100%;
	left: 0;
	min-width: 460px;
	max-width: 620px;
	background: #fff;
	border: 1px solid var(--oresa-color-border);
	border-top: 3px solid var(--oresa-color-rust);
	border-radius: 0 0 var(--oresa-radius) var(--oresa-radius);
	box-shadow: var(--oresa-shadow);
	padding: 1rem;
	opacity: 0;
	visibility: hidden;
	transform: translateY(6px);
	transition: opacity .15s ease, transform .15s ease, visibility .15s;
	z-index: 60;
}
/* Apertura por JS (delay 400ms → .is-open) o por teclado (:focus-within), NO por
 * :hover puro — evita la apertura instantánea (02.c §2.1, research §A.13). */
.oresa-catnav__item.is-open .oresa-catnav__panel,
.oresa-catnav__item:focus-within .oresa-catnav__panel {
	opacity: 1;
	visibility: visible;
	transform: translateY(0);
}

/* Panel de 3 niveles (columnas de subcategoría + links nivel 3). */
.oresa-catnav__panel--tree { min-width: 520px; max-width: 760px; }
.oresa-catnav__cols {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
	gap: 1rem 1.5rem;
}
.oresa-catnav__col { min-width: 0; }
.oresa-catnav__h3 {
	display: block;
	font-family: var(--oresa-font-heading);
	font-weight: 700;
	font-size: .9rem;
	color: var(--oresa-color-heading);
	padding-bottom: .35rem;
	margin-bottom: .4rem;
	border-bottom: 1px solid var(--oresa-color-border);
}
.oresa-catnav__h3:hover,
.oresa-catnav__h3[aria-current="true"] { color: var(--oresa-color-rust); }
.oresa-catnav__l3 { list-style: none; margin: 0; padding: 0; }
.oresa-catnav__l3 li { margin: 0; }
.oresa-catnav__l3 a {
	display: block;
	padding: .28rem 0;
	font-size: .84rem;
	color: var(--oresa-color-text);
}
.oresa-catnav__l3 a:hover,
.oresa-catnav__l3 a[aria-current="true"] { color: var(--oresa-color-navy); text-decoration: underline; }
.oresa-catnav__grid {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: .5rem;
}
.oresa-catnav__prod {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: .35rem;
	padding: .5rem;
	border-radius: 8px;
	text-align: center;
	transition: background-color .12s ease;
}
.oresa-catnav__prod:hover { background: var(--oresa-color-surface); }
.oresa-catnav__prod img,
.oresa-catnav__thumb {
	width: 100%;
	aspect-ratio: 1 / 1;
	object-fit: contain;
	background: var(--oresa-color-surface);
	border-radius: 6px;
}
.oresa-catnav__prod span {
	font-size: .74rem;
	line-height: 1.25;
	color: var(--oresa-color-heading);
	font-weight: 600;
	display: -webkit-box;
	-webkit-line-clamp: 2;
	-webkit-box-orient: vertical;
	overflow: hidden;
}
.oresa-catnav__more {
	display: inline-block;
	margin-top: .85rem;
	font-weight: 700;
	color: var(--oresa-color-rust);
	font-size: .9rem;
}
.oresa-catnav__more:hover { color: var(--oresa-color-rust-deep); }

/* Móvil: barra deslizable horizontal. Los items CON subcategorías funcionan como
 * ACORDEÓN (tap → .is-open despliega el panel en flujo, no como dropdown flotante,
 * 02.c §2.4). Los planos (piloto) navegan directo. */
@media (max-width: 860px) {
	.oresa-catnav__inner { flex-wrap: wrap; }
	.oresa-catnav__all, .oresa-catnav__top { padding: .75rem .8rem; font-size: .9rem; }

	/* Item con panel ocupa fila completa para poder desplegar debajo. */
	.oresa-catnav__item[data-oresa-catnav-item] { flex: 1 1 100%; flex-direction: column; }

	/* Panel flotante → panel en flujo (acordeón) cuando abre. */
	.oresa-catnav__item[data-oresa-catnav-item] .oresa-catnav__panel {
		position: static;
		min-width: 0;
		max-width: none;
		width: 100%;
		transform: none;
		box-shadow: none;
		border-radius: 0;
		display: none;
	}
	.oresa-catnav__item[data-oresa-catnav-item].is-open .oresa-catnav__panel {
		display: block;
		opacity: 1;
		visibility: visible;
	}
	.oresa-catnav__panel--tree { min-width: 0; }

	/* Los items planos (sin data-attr) no despliegan panel en táctil. */
	.oresa-catnav__item:not([data-oresa-catnav-item]) .oresa-catnav__panel { display: none; }
}

/* --------------------------------------------------------------------------
 * FOOTER de marca (3 columnas) — site-wide. Navy AL Mayoreo.
 * ------------------------------------------------------------------------ */
.site-footer {
	background-color: var(--oresa-color-secondary);
	color: #fff;
	padding-top: 0;
}
.site-footer a { color: #fff; }
.site-footer a:hover { color: var(--oresa-color-kraft); }

/* Columna de marca del footer */
.oresa-footer__brand p { color: rgba(255,255,255,.82); line-height: 1.55; }
.oresa-footer__logo {
	width: 96px; height: auto;
	background: #fff;
	border-radius: 12px;
	padding: 8px;
	margin-bottom: .9rem;
}
.oresa-footer__ship { font-weight: 700; color: #fff !important; }
.oresa-footer__wa {
	display: inline-block;
	margin-top: .9rem;
	padding: .6rem 1.1rem;
	background: #25d366;
	color: #06331b !important;
	border-radius: var(--oresa-radius);
	font-weight: 700;
}
.oresa-footer__wa:hover { background: #1ebe5a; color: #06331b !important; }

.oresa-footer { max-width: var(--oresa-container); margin: 0 auto; padding: 3rem 1.5rem 1.5rem; }
.oresa-footer__cols {
	display: grid;
	grid-template-columns: 1.4fr 1fr 1fr;
	gap: 2.5rem;
}
.oresa-footer__col h3 {
	color: #fff;
	font-size: 1.05rem;
	font-weight: 600;
	margin: 0 0 1rem;
}
.oresa-footer__col p { margin: 0 0 .55rem; line-height: 1.5; color: rgba(255,255,255,.85); }
.oresa-footer__col ul { list-style: none; margin: 0; padding: 0; }
.oresa-footer__col li { margin-bottom: .55rem; }
.oresa-footer .oresa-ph { color: #9fc2c9; font-style: italic; }
.oresa-footer__bar {
	margin-top: 2.25rem;
	padding-top: 1.25rem;
	border-top: 1px solid rgba(255,255,255,.14);
	font-size: .9rem;
	color: rgba(255,255,255,.75);
}

@media (max-width: 768px) {
	.oresa-footer__cols { grid-template-columns: 1fr; gap: 1.75rem; }
}

/* --------------------------------------------------------------------------
 * HEADER — buscador tipo pill (Storefront product search) — site-wide.
 * ------------------------------------------------------------------------ */
.site-header .widget_product_search .search-field,
.site-header input[type="search"],
.storefront-handheld-footer-bar input[type="search"] {
	border-radius: var(--oresa-radius-pill);
	border: 1px solid var(--oresa-color-border);
	padding-left: 1rem;
}

/* --------------------------------------------------------------------------
 * TIENDA full-width (sin sidebar de blog) — shop / producto / carrito / checkout.
 * ------------------------------------------------------------------------ */
.oresa-full-width #primary.content-area,
.oresa-full-width .content-area {
	width: 100%;
	margin: 0;
	float: none;
}
.oresa-full-width #secondary { display: none; }

/* --------------------------------------------------------------------------
 * FICHA DE PRODUCTO — personalizador universal (isla Konva).
 * ------------------------------------------------------------------------ */
/* Jerarquía B2C en la ficha: COMPRAR = terracota (CTA), PERSONALIZAR = navy. */
.single-product form.cart .single_add_to_cart_button.button.alt {
	background-color: var(--oresa-color-button-bg);
	color: var(--oresa-color-button-text);
}
.single-product form.cart .single_add_to_cart_button.button.alt:hover {
	background-color: var(--oresa-color-button-hover-bg);
}

/* Disparador del personalizador junto al botón de carrito (navy = secundario) */
.oresa-p-trigger.button.alt {
	margin-left: .5rem;
	background-color: var(--oresa-color-secondary);
}
.oresa-p-trigger.button.alt:hover { background-color: var(--oresa-color-primary); }

/* El editor (isla Konva) vive dentro del <dialog> modal; su layout de dos
 * columnas y el sizing del canvas los define el CSS del plugin
 * (oresa-personalizador.css). No se le impone ancho/caja desde el tema para no
 * colisionar con el grid del modal. */

/* Precio destacado en navy (coherente con la marca) */
.single-product div.product p.price,
.single-product div.product span.price { color: var(--oresa-color-primary); font-weight: 700; }

/* --------------------------------------------------------------------------
 * CONFIGURADOR DE COMPRA POR VOLUMEN (ficha) — modelo "al por mayor".
 * ------------------------------------------------------------------------ */
.oresa-vol {
	margin: 1.25rem 0 1.5rem;
	padding: 1.25rem;
	border: 1px solid var(--oresa-color-border);
	border-radius: var(--oresa-radius);
	background: var(--oresa-color-surface);
	max-width: 520px;
}
.oresa-vol__row {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 1rem;
	flex-wrap: wrap;
	margin-bottom: .9rem;
}
.oresa-vol__field { font-weight: 600; color: var(--oresa-color-heading); font-size: .9rem; display: flex; flex-direction: column; gap: .3rem; }
.oresa-vol__field select {
	padding: .5rem .7rem;
	border: 1px solid var(--oresa-color-border);
	border-radius: 6px;
	background: #fff;
	font-weight: 600;
	color: var(--oresa-color-text);
}
.oresa-vol__live { text-align: right; line-height: 1.4; }
.oresa-vol__live span { display: block; font-size: .9rem; color: var(--oresa-color-text); }
.oresa-vol__live strong { color: var(--oresa-color-heading); font-size: 1.05rem; }
.oresa-vol__sub strong { color: var(--oresa-color-rust); font-size: 1.25rem; }

.oresa-vol__min { margin: 0 0 .75rem; font-size: .9rem; color: var(--oresa-color-text); }
.oresa-vol__min strong { color: var(--oresa-color-rust); }

.oresa-vol__table { width: 100%; border-collapse: collapse; font-size: .9rem; background: #fff; border-radius: 8px; overflow: hidden; }
.oresa-vol__table th {
	background: var(--oresa-color-navy-deep);
	color: #fff;
	font-family: var(--oresa-font-heading);
	font-weight: 600;
	text-align: left;
	padding: .55rem .7rem;
	font-size: .82rem;
}
.oresa-vol__table td { padding: .5rem .7rem; border-top: 1px solid var(--oresa-color-border); color: var(--oresa-color-text); }
.oresa-vol__table td:nth-child(3) { color: #1f9d55; font-weight: 700; } /* descuento en verde */
.oresa-vol__table tr.is-active td { background: var(--oresa-color-kraft-soft); font-weight: 700; }
.oresa-vol__table tr.is-active td:first-child { box-shadow: inset 3px 0 0 var(--oresa-color-rust); }

.oresa-vol__hint { margin: .75rem 0 .35rem; font-weight: 700; color: var(--oresa-color-navy); font-size: .92rem; min-height: 1.2em; }
.oresa-vol__note { margin: 0; font-size: .78rem; color: #6b7280; }

/* --------------------------------------------------------------------------
 * PRODUCT CARD (shop, categoría, carrusel home, relacionados) — estilo modelo.
 * Fondo uniforme, borde sutil, hover con elevación. Aplica en todo el sitio.
 * ------------------------------------------------------------------------ */
.woocommerce ul.products li.product,
.woocommerce-page ul.products li.product {
	background: #fff;
	border: 1px solid var(--oresa-color-border);
	border-radius: 10px;
	padding: 1rem 1rem 1.25rem;
	transition: box-shadow .18s ease, transform .18s ease;
	text-align: center;
}
.woocommerce ul.products li.product:hover {
	box-shadow: 0 8px 24px rgba(18,57,72,.10);
	transform: translateY(-3px);
}
.woocommerce ul.products li.product a img {
	background: var(--oresa-color-surface);
	border-radius: 8px;
	margin-bottom: .85rem;
	aspect-ratio: 1 / 1;
	object-fit: contain;
	padding: .5rem;
}
.woocommerce ul.products li.product .woocommerce-loop-product__title {
	font-size: .98rem;
	font-weight: 600;
	color: var(--oresa-color-heading);
	padding-bottom: .35rem;
	min-height: 2.6em;
}
.woocommerce ul.products li.product .price {
	color: var(--oresa-color-primary);
	font-weight: 700;
}
.woocommerce ul.products li.product .button {
	border-radius: var(--oresa-radius);
	margin-top: .5rem;
}
/* En la home, el carrusel usa la misma card pero sin fondo de sección */
.oh-products.products { margin-top: 1rem; }