/*
Theme Name: Tienda DTF Child
Template: storefront
Description: Child theme de Storefront para la tienda de camisetas DTF. Todo el CSS/HTML custom del sitio va aqui, nunca en el tema padre.
Version: 1.0.0
Text Domain: tienda-dtf-child
*/

/* ══════════════════════════════════════════════
   SALINAS CLUB — sistema de marca
   Blanco y negro, elegante/sofisticado/atemporal/neutral. Fondo blanco para
   que la camiseta sea siempre el centro de atencion. Esquinas rectas (sin
   radio) en vez de redondeadas, para un aire mas boutique/editorial.
   Tipografia: Poppins en titulos, Montserrat en texto, con "Mona-Sans"/
   Arial/Helvetica/sans-serif como respaldo si Poppins/Montserrat no cargan.
══════════════════════════════════════════════ */
:root {
  --sc-black:       #111111;
  --sc-white:       #ffffff;
  --sc-gray-bg:      #f5f5f5;
  --sc-gray-border:  #e0e0e0;
  --sc-gray-text:    #6e6e6e;
  --sc-font-heading: 'Poppins', 'Mona-Sans', Arial, Helvetica, sans-serif;
  --sc-font-body:    'Montserrat', 'Mona-Sans', Arial, Helvetica, sans-serif;
}

/* ── Base ── */
body {
  background: var(--sc-white);
  color: var(--sc-black);
  font-family: var(--sc-font-body);
}
h1, h2, h3, h4, h5, h6,
.site-title, .site-description {
  font-family: var(--sc-font-heading);
  color: var(--sc-black);
  font-weight: 600;
  letter-spacing: -.01em;
}
a {
  color: var(--sc-black);
  text-decoration: none;
}
a:hover, a:focus {
  color: var(--sc-black);
  text-decoration: underline;
}

/* ── Header ──
   El nombre de la tienda ocupa su propia fila, centrado y grande (en vez de
   compartir fila con la navegacion en una columna del ~74%), para que sea
   lo primero que destaque al entrar. */
.site-header {
  background: var(--sc-white);
  border-bottom: 1px solid var(--sc-gray-border);
  position: relative;
}
.woocommerce-active .site-header .site-branding {
  float: none;
  width: 100%;
  margin-right: 0;
  text-align: center;
  padding-bottom: .5em;
  /* display:flex + align-items:center centra el logo, el titulo y el
     tagline pase lo que pase con el display (block/inline-block) que cada
     uno traiga por su cuenta — Storefront le pone "display:block" al link
     del logo con la misma especificidad que nuestra regla, y en vez de
     seguir esa guerra de empates es mas robusto centrar por flexbox. */
  display: flex;
  flex-direction: column;
  align-items: center;
}
/* Logo (opcional, subido en Personalizar > Identidad del sitio): arriba del
   nombre de la tienda, con tope de alto para que no compita en tamano con
   el titulo — pensado para el logo del caballo. Especificidad igual o
   mayor que las reglas de Storefront para .custom-logo-link/img, para que
   no dependa del orden de carga. */
.site-branding .custom-logo-link {
  margin-bottom: .6em;
}
.site-header .site-branding .custom-logo-link img.custom-logo {
  /* Tamano explicito (no solo max-height) a proposito: el SVG del logo
     trae viewBox pero no width/height propios, y sin un tamano fijo en
     CSS varios navegadores lo calculan en 0x0 — por eso "desaparecia"
     al reemplazar el PNG (que si traia width/height) por el SVG. */
  width: 72px;
  height: 72px;
  max-width: 100%;
}
.site-branding .site-title {
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .16em;
  font-size: 2.4rem;
}
.site-branding .site-title a {
  display: inline-block;
}
.site-branding .site-description {
  display: block;
  text-align: center;
  color: var(--sc-gray-text);
  font-size: .8rem;
  letter-spacing: .2em;
  font-style: italic;
}

/* ── Fila de iconos del header: busqueda, cuenta, carrito ──
   Trazo fino (sin relleno), en linea, alineados a la derecha justo
   debajo del nombre de la tienda. Boton y enlaces comparten exactamente
   la misma caja (tamano/padding/line-height) para que los 3 iconos
   queden alineados verticalmente entre si, sin heredar el CSS de
   ".site-search"/".site-header-cart" de Storefront (esos traian floats,
   anchos en % y position:absolute pensados para su propia maquetacion
   y descuadraban los iconos). */
.tdtf-header-utility-row {
  position: relative;
  padding-bottom: .5em;
}
.tdtf-header-icons {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 20px;
}
.tdtf-icon-btn {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  padding: 0;
  margin: 0;
  border: none;
  background: none;
  color: var(--sc-black);
  line-height: 0;
  cursor: pointer;
}
.tdtf-icon-btn:hover {
  opacity: .6;
  text-decoration: none;
}
.tienda-dtf-cart-count {
  display: none;
  position: absolute;
  top: -2px;
  right: -2px;
  min-width: 16px;
  height: 16px;
  padding: 0 3px;
  border-radius: 50%;
  background: var(--sc-black);
  color: var(--sc-white);
  font-family: var(--sc-font-body);
  font-size: .62rem;
  font-weight: 700;
  line-height: 16px;
  text-align: center;
}
.tienda-dtf-cart-count.is-visible {
  display: block;
}

/* ── Barra de busqueda a todo lo ancho ──
   Franja horizontal delgada de borde a borde (no una tarjeta centrada):
   lupa a la izquierda, campo que llena el ancho disponible, X pegada al
   borde derecho de la pagina — la esencia del buscador de
   creativeboys.com, con nuestra propia paleta blanco/negro. */
.tdtf-search-overlay {
  display: none;
  position: absolute;
  inset: 0;
  z-index: 30;
  background: var(--sc-white);
  align-items: center;
}
.tdtf-header-utility-row.tdtf-search-is-open .tdtf-search-overlay {
  display: flex;
}
.tdtf-search-overlay-inner {
  width: 100%;
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 0 40px;
}
.tdtf-search-overlay-icon {
  flex-shrink: 0;
  color: var(--sc-black);
}
.tdtf-search-form-el {
  flex: 1;
  min-width: 0;
  margin: 0;
  display: flex;
}
.tdtf-search-overlay input.tdtf-search-input[type="search"] {
  width: 100%;
  border: none;
  border-radius: 0;
  background: none;
  box-shadow: none;
  padding: 0;
  margin: 0;
  height: 32px;
  line-height: 32px;
  font-family: var(--sc-font-body);
  font-size: 1.05rem;
  font-weight: 400;
  color: var(--sc-black);
}
.tdtf-search-overlay input.tdtf-search-input[type="search"]::placeholder {
  color: var(--sc-gray-text);
  opacity: 1;
}
.tdtf-search-overlay input.tdtf-search-input[type="search"]:focus {
  outline: none;
  background: none;
  box-shadow: none;
}
.tdtf-search-close {
  flex-shrink: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  padding: 0;
  margin: 0;
  border: none;
  background: none;
  color: var(--sc-black);
  line-height: 0;
  cursor: pointer;
}
.tdtf-search-close:hover {
  opacity: .6;
}

/* ── Hero de portada del Shop ──
   Franja negra de texto (sin fotos de producto todavia — ver memoria del
   proyecto). ".tdtf-hero-track" > ".tdtf-hero-slide" ya queda armado como
   si fuera un carrusel de una sola diapositiva, para que cuando haya
   fotografia solo haya que agregar mas slides + nav, no reescribir esto. */
.tdtf-hero {
  background: var(--sc-black);
  margin-bottom: 3rem;
  overflow: hidden;
  /* Full-bleed: rompe el ancho maximo/padding de ".col-full" para que
     solo esta seccion ocupe todo el ancho de la pantalla, sin afectar
     el resto del contenido (cuadricula de productos, etc). */
  width: 100vw;
  position: relative;
  left: 50%;
  right: 50%;
  margin-left: -50vw;
  margin-right: -50vw;
}
.tdtf-hero-track {
  display: flex;
}
.tdtf-hero-slide {
  flex: 1 0 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: min(60vh, 560px);
  padding: 4rem 2rem;
}
.tdtf-hero-inner {
  max-width: 640px;
  text-align: center;
  color: var(--sc-white);
}
.tdtf-hero-kicker {
  display: inline-block;
  font-family: var(--sc-font-body);
  color: #b3b3b3;
  text-transform: uppercase;
  letter-spacing: .22em;
  font-size: .72rem;
  font-weight: 600;
  margin-bottom: 1.4rem;
  padding-bottom: 1rem;
  border-bottom: 1px solid rgba(255, 255, 255, .25);
}
.tdtf-hero-title {
  font-family: var(--sc-font-heading);
  color: var(--sc-white);
  text-transform: uppercase;
  letter-spacing: .14em;
  font-size: clamp(2.2rem, 5vw, 3.6rem);
  margin: 0 0 1.1rem;
}
.tdtf-hero-subtitle {
  font-family: var(--sc-font-body);
  color: #cfcfcf;
  font-size: 1.05rem;
  letter-spacing: .02em;
  font-style: italic;
  margin: 0 0 2.4rem;
}
.tdtf-hero .tdtf-hero-cta.button {
  background: var(--sc-white);
  color: var(--sc-black);
  border-color: var(--sc-white);
}
.tdtf-hero .tdtf-hero-cta.button:hover {
  background: var(--sc-black);
  color: var(--sc-white);
  border-color: var(--sc-white);
}

.main-navigation ul li a {
  font-family: var(--sc-font-body);
  font-weight: 600;
  font-size: .82rem;
  text-transform: uppercase;
  letter-spacing: .06em;
  color: var(--sc-black);
}
.main-navigation ul li a:hover {
  color: var(--sc-black);
  opacity: .6;
}
/* ── Botones (agregar al carrito, checkout, formularios) ──
   Negro solido con texto blanco; al pasar el mouse se invierte a
   blanco con borde negro, sin radio, para un trato minimal y directo. */
.button,
input[type="submit"],
.woocommerce a.button,
.woocommerce button.button,
.woocommerce #respond input#submit,
.woocommerce-Button {
  background: var(--sc-black);
  color: var(--sc-white);
  border: 1.5px solid var(--sc-black);
  border-radius: 0;
  font-family: var(--sc-font-body);
  font-weight: 600;
  font-size: .82rem;
  text-transform: uppercase;
  letter-spacing: .06em;
  padding: .9em 1.8em;
  transition: background .2s, color .2s;
  box-shadow: none;
}
.button:hover,
input[type="submit"]:hover,
.woocommerce a.button:hover,
.woocommerce button.button:hover,
.woocommerce #respond input#submit:hover,
.woocommerce-Button:hover {
  background: var(--sc-white);
  color: var(--sc-black);
  border-color: var(--sc-black);
}
.button.alt,
.woocommerce #respond input#submit.alt,
.woocommerce a.button.alt,
.woocommerce button.button.alt,
.woocommerce input.button.alt {
  background: var(--sc-black);
  color: var(--sc-white);
}

/* ── Cuadricula de productos (cards de diseños) ──
   Cada diseño de camiseta = un producto de WooCommerce. Grid propio
   (en vez del float/columnas por defecto de Storefront) para controlar
   el espaciado y el aspect-ratio de la foto sin pelear con esa cascada.
   Card minimal: foto 4:5, titulo/precio debajo, boton "Agregar" que
   aparece encima de la foto al pasar el mouse (no compite visualmente
   con el diseño estampado, que es lo que vende la camiseta). */
.woocommerce ul.products {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(230px, 1fr));
  gap: 2.4rem 1.6rem;
  margin: 0 0 3rem;
}
.woocommerce ul.products::before,
.woocommerce ul.products::after {
  /* Storefront's legacy float clearfix becomes a phantom grid item
     once ul.products is display:grid — kill it so real products don't
     get pushed one slot to the right. */
  content: none;
  display: none;
}
.woocommerce ul.products li.product {
  float: none !important;
  width: 100% !important;
  margin: 0;
  padding: 0;
  border: none;
}
.woocommerce ul.products li.product a {
  display: block;
  text-decoration: none;
}
.woocommerce ul.products li.product a img {
  display: block;
  width: 100%;
  aspect-ratio: 4 / 5;
  object-fit: cover;
  border-radius: 0;
  margin: 0 0 1rem;
  background: var(--sc-gray-bg);
  transition: opacity .25s;
}
.woocommerce ul.products li.product:hover a img {
  opacity: .88;
}
.woocommerce ul.products li.product .woocommerce-loop-product__title,
.woocommerce ul.products li.product h2,
.woocommerce ul.products li.product h3 {
  font-family: var(--sc-font-heading);
  color: var(--sc-black);
  font-size: .82rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: .05em;
  margin: 0 0 .35rem;
}
.woocommerce ul.products li.product .price,
.woocommerce div.product p.price,
.woocommerce div.product span.price,
.price .woocommerce-Price-amount {
  color: var(--sc-black);
  font-family: var(--sc-font-heading);
  font-weight: 600;
}
.woocommerce ul.products li.product .price {
  display: block;
  font-size: .85rem;
}
.woocommerce ul.products li.product .price del {
  color: var(--sc-gray-text);
  opacity: 1;
  font-weight: 400;
  margin-right: .4em;
}
.woocommerce ul.products li.product .price ins {
  text-decoration: none;
}
.woocommerce ul.products li.product .onsale {
  background: var(--sc-black);
  color: var(--sc-white);
  border-radius: 0;
  font-family: var(--sc-font-body);
  font-weight: 600;
  text-transform: uppercase;
  font-size: .68rem;
  letter-spacing: .05em;
  min-height: 0;
  min-width: 0;
  padding: 5px 10px;
  top: 0;
  left: 0;
  right: auto;
  z-index: 2;
}
/* Boton "Agregar al carrito" del loop: debajo del precio, discreto,
   mismo trazo negro/blanco de marca. Se dejo simple (sin overlay sobre
   la foto) porque el template de WooCommerce no trae un wrapper propio
   para la imagen — forzar el overlay significaria tocar el markup del
   loop en vez de solo el CSS. */
.woocommerce ul.products li.product .button {
  display: block;
  width: 100%;
  margin-top: .8rem;
  text-align: center;
  font-size: .68rem;
  padding: .7em 1em;
}
.woocommerce .star-rating span::before,
.woocommerce .star-rating::before {
  color: var(--sc-black);
}
.woocommerce div.product p.stock,
.woocommerce div.product .stock {
  color: var(--sc-black);
}
.woocommerce span.onsale ~ a img,
.woocommerce ul.products li.product a img {
  border-radius: 0;
}

/* ── Mensajes / notices ── */
.woocommerce-message,
.woocommerce-info {
  border-top-color: var(--sc-black);
}
.woocommerce-message::before,
.woocommerce-info::before {
  color: var(--sc-black);
}

/* ── Footer: cierre en negro para enmarcar el blanco del sitio ── */
.site-footer {
  background: var(--sc-black);
  color: var(--sc-white);
  border-top: none;
}
.site-footer a {
  color: var(--sc-white);
}
.site-footer a:hover {
  color: var(--sc-white);
  opacity: .7;
}
.site-footer .widget-title {
  font-family: var(--sc-font-heading);
  color: var(--sc-white);
  text-transform: uppercase;
  letter-spacing: .08em;
  font-size: .8rem;
}