/*
Theme Name: egudgets-lte
Author:
Description: Egudgets theme adapted to Las Tres Escobitas
Version: 1.0
Template: egudgets

This is the child theme for Egudgets theme, generated with Generate Child Theme plugin by catchthemes.

(optional values you can add: Theme URI, Author URI, License, License URI, Tags, Text Domain)
*/

:root {
  --body-text-color: #5a5a5a;
  --primary-text: #5a5a5a;
  --bs-body-color: #5a5a5a;
  --title-color: #313c46;
  --product-title-color: #313c46;
  --price-color: #aa40b5;
  --background-color: #f5f5f7;
  --border-color: #d1d1d1;
  --border-color1: #dcd3e6;
  --site-logo-color: #00677a;
  --menu-color: #00677a;
  --menu-focus-color: #e4f344;
}

@font-face {
  font-style: normal;
  font-weight: normal;
  src:
    url("//www.lastresescobitas.com/wp-content/themes/egudgets-lte/assets/webfonts/subset-EuphoriaScript-Regular.woff2")
      format("woff2"),
    url("//www.lastresescobitas.com/wp-content/themes/egudgets-lte/assets/webfonts/subset-EuphoriaScript-Regular.woff")
      format("woff");
  font-family: "Euphoria Script";
  font-display: swap;
}

html {
  font-size: 16px;
  font-size: clamp(14px, 1.2vw, 20px);
  -webkit-text-size-adjust: 100%;
}
body {
  font-size: 1rem;
  line-height: 1.5;
  font-family: "Rubik", sans-serif;
}

a {
  color: var(--menu-color);
  text-decoration: none;
}
.container,
body.woocommerce-cart .fc-content {
  width: 100%;
  max-width: 1280px;
  margin: 0 auto;
  padding: 0 1rem;
}

@media (min-width: 1600px) {
  .container,
  body.woocommerce-cart .fc-content {
    max-width: 1440px;
  }
}

h1,
.single-product .entry-summary .product_title {
  font-weight: 700;
  font-size: 2.25rem;
}
/* ≈ 36 px */
h2 {
  font-weight: 600;
  font-size: 1.75rem;
}
/* ≈ 28 px */
h3 {
  font-weight: 500;
  font-size: 1.5rem;
}
/* ≈ 24 px */
h4 {
  font-weight: 400;
  font-size: 1.25rem;
}
/* ≈ 20 px */
h5 {
  font-size: 1.125rem;
}
/* ≈ 18 px */
h6 {
  font-size: 1rem;
}
/* ≈ 16 px */
@media (max-width: 480px) {
  html {
    font-size: 95%;
  }
  /* ≈ 15 px */
}
@media (min-width: 481px) and (max-width: 768px) {
  html {
    font-size: 100%;
  }
  /* 16 px */
}
@media (min-width: 769px) {
  html {
    font-size: 106%;
  }
  /* ≈ 17 px */
}

/* FOOTER */
footer .main-footer {
  padding: 20px 0 0 0;
  background: #f3f5f6;
}
footer .main-footer,
footer .main-footer a {
  color: var(--body-text-color);
}
footer .footer-contact-info * svg {
  width: 18px;
  height: 18px;
}
footer .site-info {
  background: #ffffff;
  color: var(--body-text-color);
}
footer .copyright,
footer .copyright .copyright-left {
  color: var(--body-text-color);
  font-size: 0.75rem;
}

.joinchat {
  --s: 45px !important;
  --sep: 7px !important;
  --bottom: 35px !important;
}

/* Forzar compatibilidad de fuentes para v5, v6 y v7 */
.fas,
.far,
.fal,
.fad,
.fab,
.fa-solid,
.fa-regular,
.fa-brands {
  font-style: normal;
  font-weight: 900;
  font-family:
    "Font Awesome 7 Free", "Font Awesome 6 Free", "Font Awesome 5 Free" !important;
}

/* 1. IMÁGENES DE CATÁLOGO (Basado en tu código) */
img.attachment-woocommerce_thumbnail,
img.size-woocommerce_thumbnail {
    border-radius: 5px !important;
    overflow: hidden !important;
    /* A veces el navegador necesita esto para renderizar el recorte en imágenes */
    -webkit-mask-image: -webkit-radial-gradient(white, black); 
}

/* 2. ENVOLTORIO DEL CATÁLOGO */
/* Esto asegura que si hay un efecto de hover o borde al pasar el ratón, también sea curvo */
.products .product .woocommerce-loop-product__link,
.products .product .woocommerce-loop-product__link img {
    border-radius: 5px !important;
}

/* 3. GALERÍA DE PRODUCTO (Imagen Principal y Miniaturas) */
/* Atacamos el contenedor de la imagen principal y las fotos de la galería */
.woocommerce-product-gallery__image,
.woocommerce-product-gallery__image img,
.woocommerce-product-gallery__wrapper,
.flex-control-thumbs img {
    border-radius: 5px !important;
    overflow: hidden !important;
}

/* 4. ZOOM (Si lo usas) */
/* El zoom de WooCommerce crea una imagen flotante que suele ser cuadrada */
.zoomImg {
    border-radius: 5px !important;
}

/* 5. WPC VARIATIONS (Para que todo el ecosistema sea igual) */
.woovr-select2-image {
    border-radius: 5px !important;
}

/* Unificar las alertas de WooCommerce con el diseño del cuadro de fechas */
.woocommerce-info, 
.woocommerce-error, 
.woocommerce-message {
    background-color: #fcfaff !important; /* Mismo fondo sutil del cuadro de fechas */
    border: none !important; /* Quitamos los bordes genéricos de WooCommerce */
    border-left: 4px solid #9c27b0 !important; /* Tu morado corporativo a la izquierda */
    border-radius: 5px !important;
    padding: 12px 16px !important;
    font-size: 14px !important;
    color: #333 !important;
    margin: 15px 0 !important;
    width: 100%;
    box-sizing: border-box;
    box-shadow: none !important; /* Limpio de sombras raras */
}

/* Variante específica si es un mensaje de error (por si quieres mantener el toque rojo de alerta) */
.woocommerce-error {
    border-left-color: #e53935 !important; /* Borde rojo solo para errores críticos */
    background-color: #fff8f8 !important; /* Fondo sutil rojizo para avisar al cliente */
}

/* INICIO cambiar logo en movil */
@media (max-width: 768px) {
  a.custom-logo-link img.custom-logo,
  picture.custom-logo,
  .site-logo img {
    display: none !important;
  }
}

/* Quitar el separador por defecto de Bootstrap si tu tema ya pone iconos o separadores */
.breadcrumb-item+.breadcrumb-item::before {
  display: none !important;
}