/*
 Theme Name:   Ferreteria Theme
 Theme URI:    https://33ferreteria.com
 Description:  Child theme de Astra para la tienda de ferreteria. Optimizado para WooCommerce y preparado para la integracion con Odoo/n8n.
 Author:       Ferreteria
 Template:     astra
 Version:      1.0.3
 Text Domain:  ferreteria-theme
*/

/* ==========================================================================
   1. Paleta de colores - Ferreteria (tonos industriales + acentos)
   Estas variables NO pisan las custom properties de Astra: viven bajo su
   propio namespace (--ferr-*) para no romper el theming del padre y solo
   se usan dentro de los bloques propios de este child theme.
   ========================================================================== */
:root {
	--ferr-dark-900: #1c2833;   /* grafito - headers de tablas, footers de card */
	--ferr-dark-800: #212f3d;   /* texto principal */
	--ferr-dark-700: #2c3e50;   /* superficies oscuras secundarias */
	--ferr-steel-500: #5d6d7e;  /* bordes, texto secundario */
	--ferr-steel-200: #d5dbdb;  /* bordes suaves */
	--ferr-steel-100: #eceff1;  /* fondos suaves / stripes */
	--ferr-surface: #ffffff;    /* fondo de tarjetas */
	--ferr-bg: #f4f6f7;         /* fondo de secciones */
	--ferr-accent: #e8830c;     /* naranja seguridad - CTA, precios */
	--ferr-accent-dark: #c76c07;/* hover del acento */
	--ferr-accent-contrast: #1c2833;
	--ferr-yellow: #FCB900;     /* amarillo de marca - mismo color que los botones del Home y las categorias de la Tienda */
	--ferr-success: #1e8449;    /* stock disponible */
	--ferr-success-bg: #eafaf1;
	--ferr-warning: #b9770e;    /* stock bajo */
	--ferr-warning-bg: #fef5e7;
	--ferr-danger: #a93226;     /* sin stock */
	--ferr-danger-bg: #fdedec;
	--ferr-radius: 10px;
	--ferr-shadow: 0 2px 6px rgba(28, 40, 51, 0.08);
	--ferr-shadow-hover: 0 10px 24px rgba(28, 40, 51, 0.16);
}

/* ==========================================================================
   2. Base tipografica: usamos la tipografia/tamanos que ya define Astra via
   sus custom properties (--ast-*) cuando existen, y solo ajustamos color
   de acentos para mantener coherencia visual con el resto del sitio.
   ========================================================================== */
body {
	color: var(--ferr-dark-800);
}

a {
	color: var(--ferr-dark-700);
}

a:hover {
	color: var(--ferr-accent);
}

/* ==========================================================================
   2bis. Breakpoints estandar del sitio + prevencion de overflow horizontal
   Se usan estos rangos en todas las media queries de este archivo:
     Mobile:  hasta 767px    -> (max-width: 767px)
     Tablet:  768px - 1024px -> (min-width: 768px) and (max-width: 1024px)
     Desktop: desde 1025px   -> (min-width: 1025px)
   El menu principal (hamburguesa en mobile) ya lo resuelve Astra de forma
   nativa; este bloque solo evita que contenido propio del child theme
   (imagenes de producto, tablas, hero title) genere scroll horizontal.
   ========================================================================== */
html {
	overflow-x: hidden;
}

img,
svg,
video,
canvas,
iframe {
	max-width: 100%;
	height: auto;
}

/* ==========================================================================
   3. Grilla de productos (tienda / shop archive)
   ========================================================================== */
.woocommerce ul.products li.product,
.woocommerce-page ul.products li.product {
	background: var(--ferr-surface);
	border: 1px solid var(--ferr-steel-200);
	border-radius: var(--ferr-radius);
	padding: 1.25em 1.25em 1.5em;
	box-shadow: var(--ferr-shadow);
	transition: box-shadow 0.2s ease, transform 0.2s ease, border-color 0.2s ease;
}

.woocommerce ul.products li.product:hover,
.woocommerce-page ul.products li.product:hover {
	box-shadow: var(--ferr-shadow-hover);
	border-color: var(--ferr-steel-500);
	transform: translateY(-3px);
}

.woocommerce ul.products li.product img {
	border-radius: calc(var(--ferr-radius) - 4px);
	background: var(--ferr-bg);
}

/* Menos padding en mobile para aprovechar el ancho disponible sin apretar
   demasiado el contenido de cada card. Astra ya define cuantas columnas
   entran por breakpoint; aca solo ajustamos el espaciado interno. */
@media (max-width: 767px) {
	.woocommerce ul.products li.product,
	.woocommerce-page ul.products li.product {
		padding: 1em 1em 1.25em;
	}
}

.woocommerce ul.products li.product .woocommerce-loop-product__title {
	color: var(--ferr-dark-900);
	font-weight: 700;
	margin-top: 0.85em;
}

.woocommerce ul.products li.product .price {
	color: var(--ferr-yellow);
	font-weight: 700;
	font-size: 1.1em;
}

.woocommerce ul.products li.product .price del {
	color: var(--ferr-steel-500);
	opacity: 0.8;
	font-weight: 400;
}

.woocommerce ul.products li.product .price ins {
	text-decoration: none;
	color: var(--ferr-yellow);
}

/* ==========================================================================
   4. Botones de compra (listado y ficha de producto)
   ========================================================================== */
.woocommerce a.button,
.woocommerce button.button,
.woocommerce a.button.add_to_cart_button,
.woocommerce a.added_to_cart,
.woocommerce #respond input#submit,
.woocommerce .single_add_to_cart_button,
.wp-block-button__link:not(.uagb-buttons-repeater):not(.has-background):not(.is-style-outline),
.wp-element-button:not(.uagb-buttons-repeater):not(.has-background):not(.is-style-outline) {
	background-color: var(--ferr-yellow);
	color: var(--ferr-accent-contrast);
	border: none;
	border-radius: 999px;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 0.03em;
	padding: 0.75em 1.6em;
	transition: transform 0.2s ease, box-shadow 0.2s ease;
}

/* Hover unificado de todo el sitio: el fondo/color de marca (#FCB900 +
   texto oscuro) se mantiene intacto, el unico feedback es un levantamiento
   sutil con sombra (sin parpadeo de color al pasar el mouse). */
.woocommerce a.button:hover,
.woocommerce button.button:hover,
.woocommerce a.button.add_to_cart_button:hover,
.woocommerce a.added_to_cart:hover,
.woocommerce #respond input#submit:hover,
.woocommerce .single_add_to_cart_button:hover,
.wp-block-button__link:not(.uagb-buttons-repeater):not(.has-background):not(.is-style-outline):hover,
.wp-element-button:not(.uagb-buttons-repeater):not(.has-background):not(.is-style-outline):hover {
	background-color: var(--ferr-yellow);
	color: var(--ferr-accent-contrast);
	transform: translateY(-2px);
	box-shadow: var(--ferr-shadow-hover);
}

/* wc-block-components-button es la clase que usan los bloques de
   WooCommerce (Carrito/Checkout, ej. el boton "Pagar" de /carro/) en
   botones que no siempre heredan .wp-element-button (tambien "Aplicar
   cupon", "Actualizar carrito"). Astra imprime su propio CSS inline para
   esta misma clase sin proteger con :not(.has-background) (fondo azul de
   su paleta global en :hover) - por eso esta regla va sin ese guard y con
   !important, para que gane siempre sin importar el orden de carga. */
.wc-block-components-button:not(.is-link) .wc-block-components-button__text,
.wc-block-components-button:not(.is-link) {
	background-color: var(--ferr-yellow) !important;
	color: var(--ferr-accent-contrast) !important;
	border-color: var(--ferr-yellow) !important;
	border-radius: 999px;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 0.03em;
}

.wc-block-components-button:not(.is-link):hover,
.wc-block-components-button:not(.is-link):focus {
	background-color: var(--ferr-yellow) !important;
	border-color: var(--ferr-yellow) !important;
	color: var(--ferr-accent-contrast) !important;
	transform: translateY(-2px);
	box-shadow: var(--ferr-shadow-hover);
}

.woocommerce .single_add_to_cart_button {
	font-size: 1.05em;
	padding: 0.9em 2.2em;
}

/* ==========================================================================
   5. Badges de stock
   ========================================================================== */
.woocommerce p.stock,
.woocommerce .stock {
	display: inline-flex;
	align-items: center;
	gap: 0.4em;
	font-weight: 600;
	font-size: clamp(0.75rem, 0.7rem + 0.2vw, 0.85rem);
	padding: 0.3em 0.85em;
	border-radius: 999px;
	text-transform: uppercase;
	letter-spacing: 0.02em;
}

.woocommerce .stock::before {
	content: "";
	width: 0.5em;
	height: 0.5em;
	border-radius: 50%;
	background: currentColor;
	display: inline-block;
}

.woocommerce p.stock.in-stock,
.woocommerce .stock.in-stock {
	background: var(--ferr-success-bg);
	color: var(--ferr-success);
}

.woocommerce p.stock.out-of-stock,
.woocommerce .stock.out-of-stock {
	background: var(--ferr-danger-bg);
	color: var(--ferr-danger);
}

.woocommerce p.stock.available-on-backorder,
.woocommerce .stock.available-on-backorder {
	background: var(--ferr-warning-bg);
	color: var(--ferr-warning);
}

/* ==========================================================================
   6. Ficha de producto individual
   ========================================================================== */
.woocommerce div.product p.price,
.woocommerce div.product span.price {
	color: var(--ferr-yellow);
	font-weight: 700;
	font-size: clamp(1.15rem, 1rem + 1vw, 1.75rem);
}

.woocommerce div.product .sku_wrapper {
	display: inline-block;
	background: var(--ferr-steel-100);
	color: var(--ferr-dark-700);
	border: 1px solid var(--ferr-steel-200);
	border-radius: 6px;
	padding: 0.15em 0.6em;
	font-size: 0.85em;
	font-family: monospace;
}

.woocommerce div.product .sku_wrapper .sku {
	font-weight: 700;
	color: var(--ferr-dark-900);
}

/* ==========================================================================
   7. Ficha tecnica (specs de producto ferretero: medidas, marca, SKU)
   Estructura generada por functions.php (ferreteria_theme_ficha_tecnica) y
   por la tabla nativa de atributos de WooCommerce en la pestana
   "Informacion adicional".
   ========================================================================== */
.ferreteria-ficha-tecnica {
	margin: 1.75em 0;
	border: 1px solid var(--ferr-steel-200);
	border-radius: var(--ferr-radius);
	overflow: hidden;
	background: var(--ferr-surface);
}

.ferreteria-ficha-tecnica__header {
	background: var(--ferr-dark-900);
	color: var(--ferr-surface);
	padding: 0.6em 1.1em;
	font-size: 0.8em;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 0.08em;
}

.ferreteria-ficha-tecnica__table {
	width: 100%;
	border-collapse: collapse;
}

.ferreteria-ficha-tecnica__table tr:nth-child(even) {
	background: var(--ferr-steel-100);
}

.ferreteria-ficha-tecnica__table th,
.ferreteria-ficha-tecnica__table td {
	padding: 0.65em 1.1em;
	text-align: left;
	border-bottom: 1px solid var(--ferr-steel-200);
	font-size: 0.95em;
}

.ferreteria-ficha-tecnica__table tr:last-child th,
.ferreteria-ficha-tecnica__table tr:last-child td {
	border-bottom: none;
}

.ferreteria-ficha-tecnica__table th {
	width: 40%;
	color: var(--ferr-steel-500);
	font-weight: 600;
	text-transform: uppercase;
	font-size: 0.78em;
	letter-spacing: 0.03em;
}

.ferreteria-ficha-tecnica__table td {
	color: var(--ferr-dark-900);
	font-weight: 600;
}

/* La tabla nativa de WooCommerce (pestana "Informacion adicional") hereda
   el mismo tratamiento visual que la ficha tecnica propia. */
.woocommerce table.woocommerce-product-attributes {
	border: 1px solid var(--ferr-steel-200);
	border-radius: var(--ferr-radius);
	overflow: hidden;
	border-collapse: collapse;
}

.woocommerce table.woocommerce-product-attributes tr:nth-child(even) {
	background: var(--ferr-steel-100);
}

.woocommerce table.woocommerce-product-attributes th.woocommerce-product-attributes-item__label {
	color: var(--ferr-steel-500);
	font-weight: 600;
	text-transform: uppercase;
	font-size: 0.78em;
	letter-spacing: 0.03em;
	width: 40%;
}

.woocommerce table.woocommerce-product-attributes td.woocommerce-product-attributes-item__value {
	color: var(--ferr-dark-900);
	font-weight: 600;
}

.woocommerce table.woocommerce-product-attributes th,
.woocommerce table.woocommerce-product-attributes td {
	padding: 0.65em 1.1em;
	border-bottom: 1px solid var(--ferr-steel-200);
}

/* ==========================================================================
   7bis. Tablas en mobile: reflow vertical (label arriba, valor abajo) en
   vez de scroll horizontal, ya que ambas tablas son de 2 columnas
   (label/valor) y ese layout se lee mejor apilado en pantallas chicas.
   Cualquier otra tabla de contenido (posts/paginas) cae en el fallback de
   scroll horizontal para no perder columnas que no controlamos.
   ========================================================================== */
@media (max-width: 767px) {
	.ferreteria-ficha-tecnica__table,
	.ferreteria-ficha-tecnica__table tbody,
	.ferreteria-ficha-tecnica__table tr,
	.ferreteria-ficha-tecnica__table th,
	.ferreteria-ficha-tecnica__table td,
	.woocommerce table.woocommerce-product-attributes,
	.woocommerce table.woocommerce-product-attributes tbody,
	.woocommerce table.woocommerce-product-attributes tr,
	.woocommerce table.woocommerce-product-attributes th,
	.woocommerce table.woocommerce-product-attributes td {
		display: block;
		width: 100%;
	}

	.ferreteria-ficha-tecnica__table tr,
	.woocommerce table.woocommerce-product-attributes tr {
		padding: 0.5em 1.1em;
		border-bottom: 1px solid var(--ferr-steel-200);
	}

	.ferreteria-ficha-tecnica__table tr:last-child,
	.woocommerce table.woocommerce-product-attributes tr:last-child {
		border-bottom: none;
	}

	.ferreteria-ficha-tecnica__table th,
	.woocommerce table.woocommerce-product-attributes th {
		padding: 0 0 0.15em;
		border-bottom: none;
	}

	.ferreteria-ficha-tecnica__table td,
	.woocommerce table.woocommerce-product-attributes td {
		padding: 0;
		border-bottom: none;
	}

	.entry-content table {
		display: block;
		max-width: 100%;
		overflow-x: auto;
		-webkit-overflow-scrolling: touch;
	}
}

/* ==========================================================================
   8. Titulo hero del Home en dos columnas paralelas
   Generado por el shortcode [hero_titulo_ferreteria] en functions.php.
   ========================================================================== */
.ferreteria-hero-title {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 0.5em;
	text-align: center;
	margin: 0 auto;
	padding: 0.5em 0;
}

.ferreteria-hero-title .title-col {
	display: flex;
	flex-direction: column;
	line-height: 1.1;
}

.ferreteria-hero-title .title-col span {
	display: block;
	text-transform: uppercase;
	font-weight: 800;
	line-height: 1.1;
	font-size: clamp(1.6rem, 1.2rem + 4vw, 3rem);
}

.ferreteria-hero-title .title-left {
	align-items: flex-end;
	text-align: right;
	color: var(--ferr-dark-900);
}

.ferreteria-hero-title .title-right {
	align-items: flex-start;
	text-align: left;
	color: var(--ferr-accent);
}

@media (max-width: 767px) {
	.ferreteria-hero-title {
		flex-direction: column;
		gap: 0;
	}

	.ferreteria-hero-title .title-left,
	.ferreteria-hero-title .title-right {
		align-items: center;
		text-align: center;
	}

	.ferreteria-hero-title .title-col span {
		font-size: clamp(1.4rem, 1.1rem + 5vw, 2.2rem);
	}
}

@media (min-width: 768px) and (max-width: 1024px) {
	.ferreteria-hero-title {
		gap: 0.35em;
	}

	.ferreteria-hero-title .title-col span {
		font-size: clamp(1.5rem, 1.1rem + 3vw, 2.4rem);
	}
}

/* ==========================================================================
   9. Header global unificado (fondo blanco + sombra sutil) en todas las
   paginas, excepto la Home, que mantiene intencionalmente su header
   transparente flotando sobre la imagen de portada (body.ast-theme-transparent-header).
   Refuerza en CSS lo que ya deberia venir de la config del Header Builder de
   Astra, para que el header sea visualmente identico sin importar el meta de
   header que tenga cada pagina.
   ========================================================================== */
body:not(.ast-theme-transparent-header) .site-header {
	position: static;
	background-color: #ffffff;
	box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06);
}

/* ==========================================================================
   10bis. Boton de envio de formularios (Forminator y otros plugins de forms)
   El formulario real de /contact/ (Forminator, "Enviar") trae de fabrica
   .forminator-button-submit { background-color: #289dcc; color: #fff; }
   con la misma especificidad de clase que esta regla, asi que se fuerza con
   !important para que el color de marca gane sin depender del orden de
   encolado. Se cubren tambien los selectores genericos de otros plugins de
   formularios (CF7, WPForms) y los submit nativos por si se agregan a futuro.
   ========================================================================== */
input[type="submit"],
button[type="submit"],
.wpcf7-submit,
.wpforms-submit,
.forminator-button-submit {
	background-color: var(--ferr-yellow) !important;
	color: #111111 !important;
	border-color: var(--ferr-yellow) !important;
	transition: transform 0.2s ease, box-shadow 0.2s ease;
}

input[type="submit"]:hover,
button[type="submit"]:hover,
.wpcf7-submit:hover,
.wpforms-submit:hover,
.forminator-button-submit:hover {
	background-color: var(--ferr-yellow) !important;
	color: #111111 !important;
	border-color: var(--ferr-yellow) !important;
	transform: translateY(-2px);
	box-shadow: var(--ferr-shadow-hover);
}

/* ==========================================================================
   10. Header reducido (solo logo + menu principal) en Contacto, Quienes
   somos y las paginas legales: se ocultan el buscador, el banner "Servicio
   tecnico profesional" y el acceso a carrito / Iniciar sesion, que no
   aportan en estas paginas de contenido/legal.
   ========================================================================== */
:where(.page-id-6379, .page-id-13, .page-id-7141, .page-id-3, .page-id-7181, .page-id-6376) .main-header-bar-wrap,
:where(.page-id-6379, .page-id-13, .page-id-7141, .page-id-3, .page-id-7181, .page-id-6376) [data-section="section-header-woo-cart"],
:where(.page-id-6379, .page-id-13, .page-id-7141, .page-id-3, .page-id-7181, .page-id-6376) [data-section="section-hb-menu-2"] {
	display: none !important;
}