/* =========================================================
   VAREN HOME — capa de diseño sobre Morelia
   Cargada por FTP y linkeada en layouts/layout.tpl
   (Iterable: re-subo este archivo cuando afinamos el diseño)
   ========================================================= */

@import url('https://fonts.googleapis.com/css2?family=Space+Grotesk:wght@500;600;700&family=DM+Sans:wght@400;500;600;700&display=swap');

/* ---- Paleta Varen (piso las variables de Morelia = no hace falta el editor) ---- */
:root{
  --main-background: #F7F1E5 !important;      /* crema */
  --main-foreground: #6E6353 !important;      /* marrón texto */
  --accent-color: #A98C6E !important;         /* acento */
  --button-background: #6E6353 !important;
  --button-foreground: #F7F1E5 !important;
  --label-background: #6E6353 !important;
  --label-foreground: #F7F1E5 !important;
  --header-background: #F7F1E5 !important;
  --header-foreground: #6E6353 !important;
  --footer-background: #EFE7D7 !important;
  --footer-foreground: #6E6353 !important;

  /* Tintes derivados (sombras/bordes) en tono marrón */
  --main-foreground-opacity-03: #6E63530D !important;
  --main-foreground-opacity-05: #6E63530D !important;
  --main-foreground-opacity-07: #6E635312 !important;
  --main-foreground-opacity-10: #6E63531A !important;
  --main-foreground-opacity-20: #6E635333 !important;
  --main-foreground-opacity-30: #6E63534D !important;
  --main-foreground-opacity-50: #6E635380 !important;

  /* Fuentes por token (para componentes que usan la variable) */
  --heading-font: 'Space Grotesk', sans-serif !important;
  --body-font: 'DM Sans', sans-serif !important;
}

/* ---- Redondeo global (Morelia usa --border-radius en todos lados) ---- */
:root{
  --border-radius: 14px !important;
  --border-radius-half: 8px !important;
}

/* ---- Refuerzo explícito de paleta (por las dudas) ---- */
body{ background-color:#F7F1E5 !important; color:#6E6353 !important; }

/* ---- Tipografías ---- */
body, input, textarea, select, button{ font-family:'DM Sans', sans-serif !important; }
h1,.h1,h2,.h2,h3,.h3,h4,.h4,.h5,.h6,
.item-name,.section-title,.swiper-title{
  font-family:'Space Grotesk', sans-serif !important;
  letter-spacing:-.3px;
}

/* ---- Botones: pill + sin MAYÚSCULAS forzadas ---- */
.btn,.btn-primary,.btn-secondary,.btn-big,.btn-add-to-cart,
input[type="submit"].btn{
  border-radius:999px !important;
  text-transform:none !important;
  letter-spacing:0 !important;
  font-family:'Space Grotesk', sans-serif !important;
  font-weight:600 !important;
}

/* ---- Items de producto: imagen CUADRADA uniforme + redondeo + sombra ---- */
.item-image{
  border-radius:14px !important;
  overflow:hidden;
  box-shadow:0 8px 24px var(--main-foreground-opacity-10, rgba(110,99,83,.10)) !important;
}
/* Contenedor de imagen forzado a cuadrado 1:1 */
.js-item-image-padding{
  padding-bottom:100% !important;
  height:0 !important;
  position:relative !important;
}
/* La imagen llena el cuadrado, recorta sin deformar (cover) */
.js-item-image,
.item-image img,
.item-image-featured,
.item-image-secondary{
  position:absolute !important;
  top:0 !important; left:0 !important;
  width:100% !important; height:100% !important;
  object-fit:cover !important;
  max-width:none !important;
}
.item-product{ transition:transform .18s ease; }
.item-product:hover{ transform:translateY(-4px); }

/* ---- Nombre y precio del item ---- */
.item-name{ opacity:1 !important; }
.item-price{ font-family:'Space Grotesk', sans-serif !important; font-weight:700 !important; }

/* ---- Etiquetas / labels ---- */
.label,.label-primary,.label-accent{
  border-radius:999px !important;
  font-family:'Space Grotesk', sans-serif !important;
  letter-spacing:.3px;
}

/* ---- Header un toque más aireado ---- */
.head-light{ border-bottom:1px solid var(--main-foreground-opacity-10, rgba(110,99,83,.12)); }

/* ---- Banners de portada / categorías: esquinas suaves ---- */
.swiper-slide img,.banner-image img,.js-banner-image img{ border-radius:18px; }

/* ---- Banda mayorista propia (clase para usar en módulo imagen+texto) ---- */
.vh-major{
  background:var(--main-foreground,#6E6353); color:var(--main-background,#F7F1E5);
  border-radius:20px; padding:34px; text-align:center;
  font-family:'Space Grotesk', sans-serif;
}
.vh-major .pill{ background:var(--accent-color,#A98C6E); color:#fff; border-radius:999px; padding:4px 12px; font-size:12px; }