/*
Theme Name: HCS
Theme URI: https://hellcatstore.cl
Description: Sitio y tienda de HELLCAT STORE. Tema propio: reusa el sistema visual ya aprobado del sitio (base clara, rojo de marca en un solo lugar, títulos en cursiva pesada) y le suma WooCommerce.
Author: Siete Kolores
Version: 1.3
Text Domain: hcs
*/

:root {
  --hcs-rojo: #e62b1e;
  --hcs-rojo-oscuro: #b81f15;
  --hcs-tinta: #15151e;
  --hcs-humo: #6e6e78;
  --hcs-acero: #e2e2e6;
  --hcs-carbon: #f2f2f4;
  --hcs-titulo: "Titillium Web", "Saira Condensed", system-ui, sans-serif;
}

body, button, input, select, textarea, .site-title, .widget h1, h1, h2, h3, h4, h5, h6 {
  font-family: var(--hcs-titulo);
  color: var(--hcs-tinta);
}
body { background: #fff; }

/* Títulos: cursiva pesada, la firma visual del sitio */
h1, h2, h3, .woocommerce-loop-product__title, .product_title {
  font-style: italic;
  font-weight: 700;
  letter-spacing: -0.01em;
  text-transform: none;
}
h1, .product_title { font-size: 2.4rem; line-height: 1.1; }

/* Encabezado negro con el isologo */
.site-header {
  background: var(--hcs-tinta);
  border-bottom: 3px solid var(--hcs-rojo);
  padding: 1.1em 0;
}
.site-header .site-title a, .site-header .site-description,
.site-header a, .main-navigation ul li a {
  color: #fff;
}
.site-header .custom-logo { max-height: 46px; width: auto; }
.main-navigation ul li a:hover { color: var(--hcs-rojo); }

/* Botones: un solo acento, esquinas casi rectas */
.button, button, input[type="submit"], .added_to_cart,
.woocommerce #respond input#submit, .woocommerce a.button, .woocommerce button.button {
  background: var(--hcs-rojo);
  color: #fff;
  border-radius: 2px;
  font-weight: 600;
  font-style: italic;
  text-transform: uppercase;
  letter-spacing: 0.02em;
  padding: 0.7em 1.4em;
}
.button:hover, .woocommerce a.button:hover, .woocommerce button.button:hover,
.woocommerce #respond input#submit:hover { background: var(--hcs-rojo-oscuro); color: #fff; }

/* La vitrina es la del catálogo del sitio (article.producto). Acá solo lo que
   WooCommerce agrega encima: enlaces del título, precio y botón de compra. */
.producto .cuerpo h3 a { color: inherit; text-decoration: none; }
.producto .cuerpo h3 a:hover { color: var(--hcs-rojo); }
.producto .cubierta-producto { display: block; text-decoration: none; }
.producto .cuerpo .boton { align-self: flex-start; width: auto; }
.producto .precio-producto { font-weight: 700; margin: 0 0 .6em; }
.producto .imagen.con-foto { position: relative; }
.producto .imagen.con-foto img { width: 100%; height: 100%; object-fit: cover; display: block; }
/* Mismo aviso que pinta el catálogo por CSS, ahora sobre la foto de la biblioteca */
.producto .imagen .referencial, .woocommerce div.product .hcs-referencial {
  position: absolute; right: 8px; bottom: 8px;
  font-family: var(--fuente-texto, inherit); font-size: .62rem; font-weight: 600;
  letter-spacing: .04em; text-transform: uppercase;
  color: rgba(255,255,255,.55); background: rgba(21,21,30,.55);
  padding: 3px 7px; border-radius: 2px;
}

/* Relacionados: WooCommerce los saca en ul.products, se acomodan a la rejilla del sitio */
.woocommerce ul.products {
  display: grid; grid-template-columns: repeat(4, 1fr); gap: 22px;
  margin: 1.5em 0 0; padding: 0; list-style: none;
}
.woocommerce ul.products::before, .woocommerce ul.products::after { content: none; }
.woocommerce ul.products li.product { width: auto !important; float: none !important; margin: 0 !important; }
@media (max-width: 1100px) { .woocommerce ul.products { grid-template-columns: repeat(3, 1fr); } }
@media (max-width: 820px)  { .woocommerce ul.products { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 520px)  { .woocommerce ul.products { grid-template-columns: 1fr; } }

/* La galería de la ficha, dentro del ancho del sitio */
.woocommerce div.product div.images { position: relative; max-width: 560px; }
.woocommerce div.product div.images img { border: 1px solid var(--hcs-acero); }

/* Ficha de producto */
.woocommerce div.product .product_title { margin-bottom: .3em; }
.woocommerce div.product .woocommerce-product-details__short-description { color: var(--hcs-humo); }
.woocommerce div.product div.images { margin-bottom: 2em; }
.woocommerce div.product .hcs-sin-foto { aspect-ratio: 4/3; }
.woocommerce table.shop_attributes th { font-style: italic; }

/* Insignia OEM / certificado */
.hcs-insignia {
  display: inline-block; background: var(--hcs-tinta); color: #fff;
  font-size: .68rem; letter-spacing: .08em; text-transform: uppercase;
  padding: .25em .6em; border-radius: 2px; margin: 0 1em .5em;
}
.hcs-insignia.neutra { background: var(--hcs-humo); }

/* Producto de cotización */
.hcs-sin-precio { display: block; color: var(--hcs-humo); font-size: .9rem; margin-bottom: .6em; }
.hcs-nota-cotizacion {
  border-left: 3px solid var(--hcs-rojo); background: var(--hcs-carbon);
  padding: 1em 1.2em; margin: 1.5em 0; font-size: .95rem;
}

/* Cotizador */
.hcs-cotizador { max-width: 620px; }
.hcs-cotizador label { display: block; font-weight: 600; margin: 1em 0 .3em; }
.hcs-cotizador input, .hcs-cotizador textarea, .hcs-cotizador select {
  width: 100%; border: 1px solid var(--hcs-acero); border-radius: 2px; padding: .7em;
}
.hcs-cotizador .hcs-aviso { background: var(--hcs-carbon); padding: 1em; border-left: 3px solid var(--hcs-rojo); }
.hcs-lista-cotizacion { list-style: none; margin: 0 0 1.5em; padding: 0; }
.hcs-lista-cotizacion li {
  display: flex; justify-content: space-between; align-items: center;
  border-bottom: 1px solid var(--hcs-acero); padding: .7em 0;
}

/* Pie */
.site-footer { background: var(--hcs-tinta); color: #fff; }
.site-footer a { color: #fff; }
.site-footer a:hover { color: var(--hcs-rojo); }

/* Ficha: pestañas y relacionados con el color del sitio */
.woocommerce div.product .woocommerce-tabs ul.tabs li a { color: var(--hcs-tinta); font-style: italic; font-weight: 600; }
.woocommerce div.product .woocommerce-tabs ul.tabs li.active a { color: var(--hcs-rojo); }
.woocommerce div.product .woocommerce-tabs ul.tabs::before { border-bottom-color: var(--hcs-acero); }
.woocommerce .related, .woocommerce .upsells { clear: both; margin-top: 3em; }
.woocommerce .related > h2, .woocommerce .upsells > h2 { margin-bottom: .6em; }
.woocommerce div.product .hcs-sin-foto-ficha { aspect-ratio: 4/3; border: 1px solid var(--hcs-acero); }

/* Encabezado de la tienda con el aire de las secciones del sitio */
.woocommerce-products-header { margin-bottom: .4em; }
.woocommerce .woocommerce-breadcrumb { color: var(--hcs-humo); font-size: .85rem; }

/* ---- WooCommerce con los colores de la marca, no con los suyos ---- */
.woocommerce div.product p.price,
.woocommerce div.product span.price,
.woocommerce ul.products li.product .price {
  color: var(--hcs-tinta); font-weight: 700; font-size: 1.35rem;
}
.woocommerce div.product form.cart .button,
.woocommerce #respond input#submit, .woocommerce a.button, .woocommerce button.button,
.woocommerce input.button, .woocommerce a.button.alt, .woocommerce button.button.alt,
.woocommerce input.button.alt, .woocommerce #place_order {
  background: var(--hcs-rojo); color: #fff; border-radius: 2px;
  font-weight: 600; font-style: italic; text-transform: uppercase; letter-spacing: .02em;
  padding: .8em 1.6em; border: 0;
}
.woocommerce a.button:hover, .woocommerce button.button:hover,
.woocommerce input.button:hover, .woocommerce a.button.alt:hover,
.woocommerce button.button.alt:hover, .woocommerce #place_order:hover {
  background: var(--hcs-rojo-oscuro); color: #fff;
}
.woocommerce .button.disabled, .woocommerce button.button:disabled { opacity: .45; }
.woocommerce div.product form.cart .variations select {
  border: 1px solid var(--hcs-acero); border-radius: 2px; padding: .55em; min-width: 180px;
}
.woocommerce div.product form.cart .variations label { font-weight: 600; }
.woocommerce .quantity .qty { border: 1px solid var(--hcs-acero); border-radius: 2px; padding: .5em; }

/* Checkout: formulario ordenado y legible */
.woocommerce form .form-row label { font-weight: 600; margin-bottom: .3em; }
.woocommerce form .form-row input.input-text,
.woocommerce form .form-row textarea,
.woocommerce form .form-row .select2-container .select2-selection {
  border: 1px solid var(--hcs-acero); border-radius: 2px; padding: .7em;
}
.woocommerce-checkout h3, .woocommerce-checkout h2 { font-style: italic; font-weight: 700; }
.woocommerce-checkout #payment { background: var(--hcs-carbon); border-radius: 2px; }
.woocommerce-checkout #payment ul.payment_methods { border-bottom: 1px solid var(--hcs-acero); }
.woocommerce-info, .woocommerce-message {
  border-top-color: var(--hcs-rojo); background: var(--hcs-carbon);
}
.woocommerce-info::before, .woocommerce-message::before { color: var(--hcs-rojo); }