/*
Theme Name:   Sigloss Grocery Child
Theme URI:    https://siglosshopping.com
Description:  Tema hijo de SKT Supermarket para Sigloss Tienda Online. Contiene la identidad de marca (paleta oro/grafito, tipografías propias) y las personalizaciones del proyecto. Nunca editar el tema padre: sus actualizaciones borrarían el trabajo.
Author:       Sigloss Tienda Online
Template:     grocery-store
Version:      1.0.0
Text Domain:  sigloss-child
*/

/* =========================================================
   1 · PALETA DE MARCA
   Colores extraídos del logotipo original: oro #D4A017, gris #949494.
   Cambiar un color aquí lo cambia en toda la web.
   ========================================================= */

:root {
	--sig-oro:            #D4A017;
	--sig-oro-claro:      #F2CE6B;
	--sig-oro-hondo:      #8F6B0A;
	--sig-grafito:        #23262B;
	--sig-tinta:          #14161A;
	--sig-gris:           #949494;
	--sig-gris-suave:     #E7E4DE;
	--sig-crema:          #FAF8F3;
	--sig-turquesa:       #0E9C93;
	--sig-turquesa-hondo: #0A6F69;
	--sig-mandarina:      #EF5B34;
	--sig-verde:          #2E9E5B;

	--sig-radio:   14px;
	--sig-radio-s: 9px;

	--sig-display: 'Outfit', system-ui, sans-serif;
	--sig-texto:   'Inter', system-ui, sans-serif;
	--sig-dato:    'IBM Plex Mono', ui-monospace, monospace;
}

/* =========================================================
   2 · TIPOGRAFÍA
   ========================================================= */

body,
button,
input,
select,
textarea {
	font-family: var(--sig-texto);
	color: var(--sig-grafito);
}

h1, h2, h3, h4, h5, h6,
.site-title,
.entry-title,
.woocommerce-loop-product__title,
.product_title {
	font-family: var(--sig-display);
	letter-spacing: -0.02em;
	color: var(--sig-grafito);
}

.price,
.woocommerce-Price-amount,
.order-number,
.sec-cod {
	font-family: var(--sig-dato);
}

/* =========================================================
   3 · COLOR: sustituye el verde del demo por la identidad Sigloss
   ========================================================= */

body {
	background: var(--sig-crema);
}

a {
	color: var(--sig-oro-hondo);
}

a:hover,
a:focus {
	color: var(--sig-oro);
}

/* Botones principales: oro con texto grafito (mejor contraste que texto blanco). */
.button,
button,
input[type="submit"],
.woocommerce #respond input#submit,
.woocommerce a.button,
.woocommerce button.button,
.woocommerce input.button,
.wp-block-button__link {
	background-color: var(--sig-oro);
	color: var(--sig-tinta);
	border: 0;
	border-radius: 30px;
	font-family: var(--sig-texto);
	font-weight: 600;
	letter-spacing: 0;
	text-transform: none;
	transition: background-color .18s ease;
}

.button:hover,
button:hover,
input[type="submit"]:hover,
.woocommerce #respond input#submit:hover,
.woocommerce a.button:hover,
.woocommerce button.button:hover,
.woocommerce input.button:hover {
	background-color: var(--sig-oro-claro);
	color: var(--sig-tinta);
}

/* Botón principal de compra: mismo oro, más peso visual. */
.woocommerce button.button.alt,
.woocommerce a.button.alt,
.woocommerce input.button.alt,
.woocommerce #respond input#submit.alt {
	background-color: var(--sig-oro);
	color: var(--sig-tinta);
}

.woocommerce button.button.alt:hover,
.woocommerce a.button.alt:hover,
.woocommerce input.button.alt:hover {
	background-color: var(--sig-oro-claro);
	color: var(--sig-tinta);
}

/* Acciones de apoyo: turquesa. */
.sig-btn-secundario,
.woocommerce .button.wc-backward {
	background-color: var(--sig-turquesa-hondo);
	color: #fff;
}

/* Etiquetas de oferta. */
.woocommerce span.onsale {
	background-color: var(--sig-mandarina);
	color: #fff;
	border-radius: 20px;
	font-weight: 700;
	min-width: auto;
	padding: 4px 12px;
	line-height: 1.6;
}

/* Avisos de stock. */
.woocommerce .stock.in-stock {
	color: var(--sig-verde);
}

/* Cabecera y pie. */
.site-header,
.header-main {
	background: #fff;
	border-bottom: 1px solid var(--sig-gris-suave);
}

.site-footer,
.footer-main {
	background: var(--sig-tinta);
	color: #9AA0A8;
}

.site-footer a,
.footer-main a {
	color: #C9CDD3;
}

.site-footer a:hover,
.footer-main a:hover {
	color: var(--sig-oro-claro);
}

/* Menú principal. */
.main-navigation a:hover,
.main-navigation .current-menu-item > a {
	color: var(--sig-oro-hondo);
}

/* Fichas de producto. */
.woocommerce ul.products li.product {
	background: #fff;
	border: 1px solid var(--sig-gris-suave);
	border-radius: var(--sig-radio);
	overflow: hidden;
	transition: box-shadow .2s ease, transform .2s ease;
}

.woocommerce ul.products li.product:hover {
	transform: translateY(-3px);
	box-shadow: 0 8px 24px -12px rgba(20, 22, 26, .25);
}

/* Campos de formulario. */
input[type="text"],
input[type="email"],
input[type="tel"],
input[type="number"],
input[type="password"],
select,
textarea {
	border: 1px solid var(--sig-gris-suave);
	border-radius: var(--sig-radio-s);
	padding: 11px 12px;
}

input:focus,
select:focus,
textarea:focus {
	outline: 2px solid var(--sig-oro);
	outline-offset: 1px;
	border-color: var(--sig-oro);
}

/* =========================================================
   4 · ACCESIBILIDAD Y DETALLES
   ========================================================= */

@media (prefers-reduced-motion: reduce) {
	* {
		transition: none !important;
		animation: none !important;
	}
}

/* =========================================================
   5 · AJUSTES PROPIOS DEL PROYECTO
   Añade aquí el CSS específico. Todo lo de arriba es la base de marca.
   ========================================================= */