/* =========================================================
   Ferretería Digital — Bloque 8: Paleta y base visual
   Referencia de estilo: Home Depot (denso, orientado a catálogo)
   ========================================================= */

:root {
	--fd-orange: #F97316;
	--fd-orange-dark: #C2570B;
	--fd-black: #202020;
	--fd-white: #FFFFFF;
	--fd-gray-light: #F5F5F5;
	--fd-green: #0D864C;
	--fd-border: #E5E5E5;
	--fd-cashea-yellow: #FFC72C; /* placeholder: reemplazar por el amarillo de marca exacto de Cashea si se dispone del manual de marca */
	--fd-header-gris: #6b6b6b; /* header de Mi Cuenta: rol customer (cliente B2C) */
	--fd-header-grafito: #2b3440; /* header de Mi Cuenta: rol cliente_b2b */
	--fd-crema: #FAEEDA; /* texto sobre header gris/grafito */
	--fd-texto-oscuro: #161616; /* texto sobre header naranja (ferretero) */
	--fd-radius: 4px;
	--fd-font: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
}

/* ---------- Base ---------- */
body {
	font-family: var(--fd-font);
	color: var(--fd-black);
	background-color: var(--fd-white);
}

/* Contenedor centrado reutilizado en header, footer y secciones */
.fd-container {
	max-width: 1280px;
	margin: 0 auto;
	padding: 0 20px;
}

/* Oculto visualmente pero accesible a lectores de pantalla (twentytwentyfive no la define) */
.screen-reader-text {
	position: absolute;
	width: 1px;
	height: 1px;
	margin: -1px;
	padding: 0;
	overflow: hidden;
	clip: rect(0, 0, 0, 0);
	white-space: nowrap;
	border: 0;
}

.fd-skip-link.screen-reader-text:focus {
	position: fixed;
	top: 8px;
	left: 8px;
	width: auto;
	height: auto;
	clip: auto;
	z-index: 10000;
	padding: 10px 16px;
	background-color: var(--fd-black);
	color: var(--fd-white);
	border-radius: var(--fd-radius);
}

h1, h2, h3, h4, h5, h6 {
	font-family: var(--fd-font);
	font-weight: 700;
	color: var(--fd-black);
}

a {
	color: var(--fd-black);
}

a:hover {
	color: var(--fd-orange);
}

/* Secciones alternadas blanco / gris claro */
.fd-bg-white { background-color: var(--fd-white); }
.fd-bg-gray { background-color: var(--fd-gray-light); }
.fd-bg-black { background-color: var(--fd-black); color: var(--fd-white); }

/* ---------- Botones / CTAs ---------- */
.wp-block-button__link,
a.button,
button.button,
input[type="submit"],
.woocommerce a.button,
.woocommerce button.button,
.woocommerce #respond input#submit {
	font-family: var(--fd-font);
	font-weight: 700;
	background-color: var(--fd-orange);
	color: var(--fd-white);
	border: none;
	border-radius: var(--fd-radius);
	padding: 12px 20px;
	transition: background-color 0.15s ease;
}

.wp-block-button__link:hover,
a.button:hover,
button.button:hover,
input[type="submit"]:hover,
.woocommerce a.button:hover,
.woocommerce button.button:hover,
.woocommerce #respond input#submit:hover {
	background-color: var(--fd-orange-dark);
	color: var(--fd-white);
}

/* Botón secundario / oscuro (ej. "Agregar al carrito" en producto) */
.fd-btn-dark,
.fd-btn-dark:hover {
	background-color: var(--fd-black);
	color: var(--fd-white);
}
.fd-btn-dark:hover {
	background-color: #000000;
}

/* ---------- WooCommerce: precios, badges, stock ---------- */
.woocommerce .price,
.woocommerce-Price-amount {
	color: var(--fd-orange);
	font-weight: 800;
}

.woocommerce .price del .woocommerce-Price-amount {
	color: #8a8a8a;
	font-weight: 400;
}

.woocommerce .price ins {
	text-decoration: none;
}

.woocommerce span.onsale {
	background-color: var(--fd-orange);
	color: var(--fd-white);
	font-weight: 800;
	border-radius: var(--fd-radius);
	min-height: auto;
	min-width: auto;
	line-height: 1.2;
	padding: 4px 10px;
	top: 10px;
	left: 10px;
	right: auto;
}

.woocommerce .stock.in-stock {
	color: var(--fd-green);
	font-weight: 700;
}

.woocommerce .stock.out-of-stock {
	color: #8a8a8a;
	font-weight: 700;
}

/* ---------- Formularios ---------- */
input[type="text"],
input[type="email"],
input[type="tel"],
input[type="number"],
input[type="password"],
input[type="search"],
select,
textarea {
	font-family: var(--fd-font);
	border: 1px solid var(--fd-border);
	border-radius: var(--fd-radius);
}

input:focus,
select:focus,
textarea:focus {
	outline: 2px solid var(--fd-orange);
	outline-offset: 1px;
}

/* ---------- Bordes y radios generales ---------- */
.wp-block-image img,
.wp-block-cover,
table,
.woocommerce table.shop_table {
	border-radius: var(--fd-radius);
}

hr, .wp-block-separator {
	border-color: var(--fd-border);
}

/* ---------- Mi Cuenta: ancho del formulario de login ---------- */
/*
 * En el child theme no existe ninguna regla .entry-content/.site-content/
 * .container/.content-area con max-width o margin:auto — el límite real lo
 * genera WordPress a partir de theme.json (twentytwentyfive), como
 * `:root{--wp--style--global--content-size:645px}` y la regla global
 * `.is-layout-constrained > :where(...){max-width:var(--wp--style--global--content-size)}`.
 * Esa regla es la que usan también posts/páginas normales del sitio para su
 * ancho de lectura, así que no se toca: se sobrescribe solo dentro de
 * body.woocommerce-account (la vista de login de /my-account/; el panel ya
 * logueado usa su propio shell en fd-dashboard.css, sin esta restricción).
 */
body.woocommerce-account .entry-content.is-layout-constrained > :where(:not(.alignleft):not(.alignright):not(.alignfull)) {
	max-width: none;
}