/*
Theme Name:   Rudelaris (tema hijo de Storefront)
Theme URI:    https://ruderalis.com.ar/
Description:  Tema hijo de Storefront para tienda.ruderalis.com.ar. Reutiliza
              el mismo header, footer, colores y tipografías del sitio
              principal (ruderalis.com.ar), y reskinea los elementos de
              WooCommerce (tarjetas de producto, botones, precios, carrito,
              checkout) para que se vean como una sola marca coherente.
Author:       SH Diseño
Template:     storefront
Version:      1.0.1
Text Domain:  rudelaris-storefront-child

===============================================================================
CÓMO ESTÁ ORGANIZADO ESTE ARCHIVO (leelo antes de tocar nada):

1. VARIABLES GLOBALES   -> los MISMOS colores/tipografías/espaciados que
   /css/styles.css del sitio principal (ruderalis.com.ar). Si el día de
   mañana cambia la paleta o la tipografía, hay que actualizar ACÁ *Y*
   también en el sitio estático, porque son dos proyectos/repos separados
   (no hay (todavía) un build compartido entre los dos). Buscá el mismo
   comentario en el otro archivo para no olvidarte.
2. RESET / BASE          -> reglas generales heredadas de Storefront que se
   ajustan a nuestra tipografía/colores.
3. UTILIDADES            -> .contenedor, botones (.boton, .boton-primario,
   .boton-secundario): son las MISMAS clases que usa el sitio principal.
4. HEADER                -> mismo diseño que el header del sitio principal,
   con el agregado del ícono de carrito (propio de la tienda).
5. PRODUCTOS (WooCommerce) -> las tarjetas de la grilla de la tienda
   reusan las clases .tarjeta-producto del sitio principal (ver
   woocommerce/content-product.php), así que el diseño es idéntico al de
   las tarjetas del index.
6. WOOCOMMERCE — RESKIN GENERAL -> botones "Agregar al carrito", precios,
   carrito, checkout, "Mi cuenta", notices, breadcrumbs, paginación: todo
   lo que WooCommerce dibuja con SUS clases por defecto, reskineado acá
   para que use los colores/tipografías de la marca en vez del celeste
   por defecto de Storefront.
7. FOOTER                -> mismo diseño que el footer del sitio principal.
8. RESPONSIVE             -> ajustes para celular.
===============================================================================
*/


/* =========================================================================
   1. VARIABLES GLOBALES — MISMAS que /css/styles.css del sitio principal
   ========================================================================= */
:root {
  /* --- Colores extraídos del isologo de Rudelaris --- */
  --color-verde-oscuro: #1f3d2b;
  --color-verde: #2d5940;
  --color-verde-claro: #6b8f6f;
  --color-lila: #9b7fc7;
  --color-lila-claro: #c9b8e6;
  --color-dorado: #b8932f;
  --color-crema: #f7f2e7;
  --color-crema-oscuro: #efe7d6;
  --color-blanco: #ffffff;
  --color-texto: #2b2b23;
  --color-texto-suave: #5c5c50;

  /* --- Tipografías --- */
  --fuente-titulos: 'Poppins', Arial, sans-serif;
  --fuente-acento: 'Dancing Script', cursive;
  --fuente-texto: 'Poppins', Arial, sans-serif;

  /* --- Espaciados reutilizables --- */
  --espacio-seccion: 6rem;
  --espacio-seccion-mobile: 3.5rem;
  --radio-borde: 18px;
  --ancho-maximo: 1180px;

  /* --- Sombra suave reutilizable --- */
  --sombra-suave: 0 10px 30px rgba(31, 61, 43, 0.08);
}


/* =========================================================================
   2. RESET / BASE
   ========================================================================= */
body {
  font-family: var(--fuente-texto);
  color: var(--color-texto);
  background-color: var(--color-crema);
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}

a {
  color: inherit;
}

h1, h2, h3, h4 {
  font-family: var(--fuente-titulos);
  color: var(--color-verde-oscuro);
  line-height: 1.2;
  font-weight: 800;
}


/* =========================================================================
   3. UTILIDADES (mismas clases que el sitio principal)
   ========================================================================= */
.contenedor {
  width: 100%;
  max-width: var(--ancho-maximo);
  margin: 0 auto;
  padding: 0 1.5rem;
}

.boton {
  display: inline-block;
  padding: 0.9rem 2rem;
  border-radius: 50px;
  font-weight: 600;
  font-size: 0.95rem;
  letter-spacing: 0.03em;
  transition: transform 0.2s ease, box-shadow 0.2s ease, background-color 0.2s ease;
  cursor: pointer;
  border: none;
}

.boton-primario {
  background-color: var(--color-verde-oscuro);
  color: var(--color-blanco);
}

.boton-primario:hover {
  background-color: var(--color-verde);
  color: var(--color-blanco);
  transform: translateY(-2px);
  box-shadow: var(--sombra-suave);
}

.boton-secundario {
  background-color: transparent;
  color: var(--color-verde-oscuro);
  border: 1.5px solid var(--color-verde-oscuro);
}

.boton-secundario:hover {
  background-color: var(--color-verde-oscuro);
  color: var(--color-blanco);
}


/* =========================================================================
   4. HEADER (mismo diseño que el sitio principal + carrito)
   ========================================================================= */
.header {
  position: sticky;
  top: 0;
  z-index: 100;
  background-color: rgba(247, 242, 231, 0.92);
  backdrop-filter: blur(6px);
  border-bottom: 1px solid rgba(31, 61, 43, 0.08);
}

.header__contenido {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0.9rem 1.5rem;
}

.header__marca {
  display: flex;
  align-items: center;
  gap: 0.6rem;
}

.header__logo {
  height: 46px;
  width: auto;
  display: block;
}

.header__nombre {
  font-family: var(--fuente-titulos);
  font-size: 1.3rem;
  color: var(--color-verde-oscuro);
  font-weight: 700;
}

.header__nav {
  display: flex;
  align-items: center;
  gap: 2rem;
}

.header__links {
  display: flex;
  gap: 1.8rem;
  list-style: none;
  margin: 0;
  padding: 0;
}

.header__links a {
  font-size: 0.92rem;
  font-weight: 500;
  color: var(--color-verde-oscuro);
  text-decoration: none;
  position: relative;
}

.header__links a::after {
  content: '';
  position: absolute;
  left: 0;
  bottom: -4px;
  width: 0;
  height: 2px;
  background-color: var(--color-dorado);
  transition: width 0.25s ease;
}

.header__links a:hover::after {
  width: 100%;
}

.header__acciones {
  display: flex;
  align-items: center;
  gap: 1rem;
}

/* Ícono de carrito propio de la tienda (no existe en el sitio principal).
   El número lo actualiza WooCommerce vía AJAX (ver functions.php ->
   rudelaris_agregar_fragmento_carrito), así no hace falta recargar la
   página cuando se agrega un producto. */
.header__carrito {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 42px;
  height: 42px;
  border-radius: 50%;
  background-color: var(--color-crema-oscuro);
  color: var(--color-verde-oscuro);
  text-decoration: none;
}

.header__carrito svg {
  width: 20px;
  height: 20px;
}

.header__carrito-contador {
  position: absolute;
  top: -4px;
  right: -4px;
  min-width: 18px;
  height: 18px;
  padding: 0 4px;
  border-radius: 50px;
  background-color: var(--color-dorado);
  color: var(--color-blanco);
  font-size: 0.68rem;
  font-weight: 700;
  display: flex;
  align-items: center;
  justify-content: center;
}

.header__boton-volver {
  padding: 0.65rem 1.4rem;
  font-size: 0.85rem;
  white-space: nowrap;
}

.header__menu-toggle {
  display: none;
  background: none;
  flex-direction: column;
  gap: 5px;
  padding: 0.5rem;
  border: none;
  cursor: pointer;
}

.header__menu-toggle span {
  width: 24px;
  height: 2px;
  background-color: var(--color-verde-oscuro);
}


/* =========================================================================
   5. PRODUCTOS (WooCommerce) — reusa .tarjeta-producto del sitio principal
   =========================================================================
   Ver woocommerce/content-product.php: ahí se arma cada tarjeta de la
   grilla de la tienda con estas MISMAS clases, para que se vea igual que
   las tarjetas del index de ruderalis.com.ar. */
/* "ul.products" es la clase que WooCommerce/Storefront le pone de fábrica
   a la grilla de la tienda (no la tocamos vía template, así que hay que
   pisarla acá). Se agrega junto con .productos__grilla por si el día de
   mañana se arma una grilla "a mano" con esa clase en alguna página. Al
   ser CSS Grid, no importa que Storefront le haya puesto float/width a
   los <li> por defecto: en un contenedor grid el float se ignora. */
.productos__grilla,
ul.products {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 2rem;
  list-style: none;
  margin: 0;
  padding: 2rem 0;
}

/* WooCommerce le agrega "columns-N" y estilos de columnas por defecto a
   los <li>; los neutralizamos porque el ancho ya lo maneja el grid. */
ul.products li.product {
  width: 100%;
  float: none;
  clear: none;
  margin: 0;
}

.tarjeta-producto {
  background-color: var(--color-blanco);
  border-radius: var(--radio-borde);
  overflow: hidden;
  box-shadow: var(--sombra-suave);
  display: flex;
  flex-direction: column;
  transition: transform 0.25s ease, box-shadow 0.25s ease;
}

.tarjeta-producto:hover {
  transform: translateY(-6px);
  box-shadow: 0 18px 40px rgba(31, 61, 43, 0.14);
}

.tarjeta-producto__imagen {
  aspect-ratio: 1 / 1;
  background: linear-gradient(160deg, var(--color-crema-oscuro), var(--color-lila-claro));
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
}

.tarjeta-producto__imagen img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  margin: 0;
}

.tarjeta-producto__placeholder {
  font-family: var(--fuente-titulos);
  font-size: 0.85rem;
  color: var(--color-verde);
  text-align: center;
  padding: 1rem;
  opacity: 0.7;
}

.tarjeta-producto__medida {
  position: absolute;
  top: 0.9rem;
  right: 0.9rem;
  background-color: var(--color-verde-oscuro);
  color: var(--color-blanco);
  font-size: 0.78rem;
  font-weight: 600;
  padding: 0.3rem 0.75rem;
  border-radius: 50px;
}

.tarjeta-producto__info {
  padding: 1.4rem 1.4rem 1.6rem 1.4rem;
  display: flex;
  flex-direction: column;
  flex-grow: 1;
}

.tarjeta-producto__linea {
  font-family: var(--fuente-acento);
  color: var(--color-lila);
  font-size: 1.1rem;
  margin-bottom: 0.1rem;
}

.tarjeta-producto__nombre {
  font-size: 1.15rem;
  margin-bottom: 0.5rem;
}

.tarjeta-producto__descripcion {
  font-size: 0.88rem;
  color: var(--color-texto-suave);
  margin-bottom: 1.1rem;
  flex-grow: 1;
}

.tarjeta-producto__pie {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.8rem;
}

.tarjeta-producto__precio {
  font-weight: 700;
  color: var(--color-verde-oscuro);
  font-size: 1.05rem;
}

.tarjeta-producto__precio del {
  font-weight: 500;
  opacity: 0.6;
  margin-right: 0.4rem;
}

.tarjeta-producto__boton {
  padding: 0.55rem 1.2rem;
  font-size: 0.82rem;
  background-color: var(--color-verde-oscuro);
  color: var(--color-blanco);
  border-radius: 50px;
  font-weight: 600;
  white-space: nowrap;
  text-decoration: none;
  border: none;
  cursor: pointer;
}

.tarjeta-producto__boton:hover {
  background-color: var(--color-dorado);
  color: var(--color-blanco);
}


/* =========================================================================
   6. WOOCOMMERCE — RESKIN GENERAL
   =========================================================================
   Acá abajo NO se tocan los templates de WooCommerce (siguen siendo los
   de Storefront/el plugin), solo se les cambia el aspecto con CSS para
   que combinen con la marca. Cubre: título de página de tienda,
   breadcrumbs, precio en producto individual, botón "Añadir al carrito",
   cantidad, tabs, notices (mensajes de error/éxito), carrito, checkout y
   "Mi cuenta". */

.woocommerce-breadcrumb {
  font-size: 0.85rem;
  color: var(--color-texto-suave);
  padding: 1.5rem 0 0 0;
}

.woocommerce-breadcrumb a {
  color: var(--color-verde);
  text-decoration: none;
}

.woocommerce-products-header__title,
.page-title {
  font-family: var(--fuente-titulos);
  color: var(--color-verde-oscuro);
}

/* Precio (listado y producto individual) */
.woocommerce .price,
.price {
  color: var(--color-verde-oscuro);
  font-weight: 700;
}

.woocommerce .price del {
  opacity: 0.55;
  font-weight: 400;
}

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

/* Botones de WooCommerce en general (agregar al carrito, checkout,
   "Actualizar carrito", etc.) — mismo estilo que .boton-primario */
.woocommerce a.button,
.woocommerce button.button,
.woocommerce input.button,
.woocommerce #respond input#submit,
.woocommerce-page a.button,
.woocommerce-page button.button {
  background-color: var(--color-verde-oscuro);
  border: none;
  border-radius: 50px;
  color: var(--color-blanco);
  font-family: var(--fuente-texto);
  font-weight: 600;
  padding: 0.85rem 1.8rem;
  letter-spacing: 0.02em;
  transition: background-color 0.2s ease, transform 0.2s ease;
}

.woocommerce a.button:hover,
.woocommerce button.button:hover,
.woocommerce input.button:hover,
.woocommerce #respond input#submit:hover {
  background-color: var(--color-verde);
  color: var(--color-blanco);
  transform: translateY(-2px);
}

/* Cantidad (selector +/-) */
.woocommerce div.quantity input.qty {
  border: 1.5px solid rgba(31, 61, 43, 0.15);
  border-radius: 10px;
  padding: 0.6rem;
  font-family: var(--fuente-texto);
}

/* Etiqueta "Oferta" */
.woocommerce span.onsale {
  background-color: var(--color-dorado);
  color: var(--color-blanco);
  font-weight: 700;
  border-radius: 50px;
  min-height: 0;
  min-width: 0;
  line-height: 1;
  padding: 0.4rem 0.8rem;
  top: 0.9rem;
  left: auto;
  right: 0.9rem;
}

/* Tabs de descripción/valoraciones en la página de producto */
.woocommerce-tabs ul.tabs li a,
.woocommerce-tabs ul.tabs li.active a {
  font-family: var(--fuente-texto);
  color: var(--color-verde-oscuro);
}

/* Mensajes (agregado al carrito, error de stock, cupón inválido, etc.) */
.woocommerce-message,
.woocommerce-info,
.woocommerce-error,
.woocommerce-noreviews,
p.no-comments {
  border-top-color: var(--color-verde);
  background-color: var(--color-crema-oscuro);
}

.woocommerce-message::before {
  color: var(--color-verde);
}

/* Carrito y checkout: encabezados de tabla, totales */
.woocommerce table.shop_table th,
.woocommerce-checkout #payment ul.payment_methods li {
  font-family: var(--fuente-texto);
  color: var(--color-verde-oscuro);
}

.woocommerce-checkout-review-order-table .order-total .woocommerce-Price-amount,
.cart-subtotal .woocommerce-Price-amount,
.order-total .woocommerce-Price-amount {
  color: var(--color-verde-oscuro);
  font-weight: 700;
}

/* Campos de formulario (checkout, mi cuenta, cupón) */
.woocommerce form .form-row input.input-text,
.woocommerce form .form-row textarea,
.woocommerce-page form .form-row select,
.woocommerce form .form-row select {
  border: 1.5px solid rgba(31, 61, 43, 0.15);
  border-radius: 10px;
  padding: 0.7rem 0.9rem;
  font-family: var(--fuente-texto);
}

.woocommerce form .form-row input.input-text:focus,
.woocommerce form .form-row textarea:focus {
  outline: none;
  border-color: var(--color-verde);
}

/* Enlaces de "Mi cuenta" (navegación de pestañas de la cuenta) */
.woocommerce-MyAccount-navigation ul {
  list-style: none;
  padding: 0;
}

.woocommerce-MyAccount-navigation li a {
  font-family: var(--fuente-texto);
  color: var(--color-verde-oscuro);
}

.woocommerce-MyAccount-navigation li.is-active a {
  color: var(--color-dorado);
  font-weight: 600;
}

/* Estrellas de valoración */
.woocommerce .star-rating span::before,
.star-rating::before {
  color: var(--color-dorado);
}


/* =========================================================================
   7. FOOTER (mismo diseño que el sitio principal)
   ========================================================================= */
.footer {
  background-color: var(--color-verde-oscuro);
  color: var(--color-crema);
  padding: 3.5rem 0 1.5rem 0;
}

.footer__contenido {
  display: grid;
  grid-template-columns: 1.3fr 1fr 1fr;
  gap: 2.5rem;
  margin-bottom: 2.5rem;
}

.footer__marca {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  margin-bottom: 1rem;
}

.footer__logo {
  height: 40px;
  width: 40px;
  object-fit: contain;
  background-color: var(--color-crema);
  border-radius: 50%;
  padding: 6px;
}

.footer__nombre {
  font-family: var(--fuente-titulos);
  font-size: 1.15rem;
}

.footer__descripcion {
  font-size: 0.88rem;
  color: rgba(247, 242, 231, 0.75);
  max-width: 320px;
}

.footer__titulo-columna {
  font-family: var(--fuente-texto);
  font-size: 0.85rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--color-dorado);
  margin-bottom: 1rem;
}

.footer__links {
  display: grid;
  gap: 0.6rem;
}

.footer__links a {
  font-size: 0.9rem;
  color: rgba(247, 242, 231, 0.85);
  text-decoration: none;
}

.footer__links a:hover {
  color: var(--color-dorado);
}

.footer__inferior {
  border-top: 1px solid rgba(247, 242, 231, 0.15);
  padding-top: 1.5rem;
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 0.8rem;
  font-size: 0.78rem;
  color: rgba(247, 242, 231, 0.6);
}


/* =========================================================================
   8. RESPONSIVE
   ========================================================================= */
@media (max-width: 900px) {
  /* IMPORTANTE: "ul.products" es la clase real que WooCommerce le pone a
     la grilla de la tienda (tienda.ruderalis.com.ar) — "productos__grilla"
     es la clase que usa el sitio estático (ruderalis.com.ar). Si acá solo
     se pisa una de las dos, la que se deja afuera queda pegada a 3
     columnas fijas en CUALQUIER ancho de pantalla (porque la regla base
     de la sección 5 así lo define), y las tarjetas se ven aplastadas con
     poco espacio lateral. Los dos selectores tienen que viajar siempre
     juntos en cada breakpoint de esta sección. */
  .productos__grilla,
  ul.products {
    grid-template-columns: repeat(2, 1fr);
  }

  .footer__contenido {
    grid-template-columns: 1fr 1fr;
  }
}

@media (max-width: 680px) {
  .header__links,
  .header__boton-volver {
    display: none;
  }

  .header__menu-toggle {
    display: flex;
  }

  .header__nav.abierto {
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    background-color: var(--color-crema);
    flex-direction: column;
    align-items: flex-start;
    padding: 1.5rem;
    gap: 1.2rem;
    box-shadow: var(--sombra-suave);
  }

  .header__nav.abierto .header__links {
    flex-direction: column;
    gap: 1rem;
  }

  .header__nav.abierto .header__boton-volver {
    display: inline-block;
  }

  .productos__grilla,
  ul.products {
    grid-template-columns: 1fr;
  }

  .footer__contenido {
    grid-template-columns: 1fr;
  }
}