/** Shopify CDN: Minification failed

Line 626:0 All "@import" rules must come first

**/
/* ============================================================
   ALERIA — TRANSFORMACIÓN ESTILO BÉIS/CALPAK
   Pega todo esto en: Admin Shopify → Online Store → Themes
   → Customize → Theme Settings → Custom CSS
   ============================================================ */

/* ─── 1. VARIABLES DE MARCA ─────────────────────────────── */
:root {
  --aleria-navy: #313655;
  --aleria-navy-deep: #1e2238;
  --aleria-mustard: #F1D976;
  --aleria-mustard-deep: #d4bc50;
  --aleria-cream: #F8F5EF;       /* fondo principal estilo BÉIS */
  --aleria-white: #ffffff;
  --aleria-text: #1a1a1a;
  --aleria-muted: #6b6b6b;
  --aleria-border: #e8e4dc;
  --aleria-radius: 2px;          /* bordes casi cuadrados = estilo premium */
  --aleria-font: 'Montserrat', sans-serif;
  --aleria-tracking-wide: 0.08em;
  --aleria-tracking-wider: 0.14em;
  --color-accent: #313655 !important;
  --color-button: #313655 !important;
  --color-button-text: #ffffff !important;
  --colors-accent-1: #313655 !important;
  --colors-accent-2: #F1D976 !important;
  --color-link: #313655 !important;
  --color-border: #e8e4dc !important;
}
[style*="background-color: var(--color-accent)"],
[style*="background: var(--color-accent)"] {
  background-color: #313655 !important;
}

/* ─── 2. BASE GLOBAL ────────────────────────────────────── */
body {
  background-color: var(--aleria-cream) !important;
  color: var(--aleria-text) !important;
  font-family: var(--aleria-font) !important;
  -webkit-font-smoothing: antialiased;
}

/* Fondo crema en secciones que Shopify pone en blanco */
.shopify-section,
.section,
[class*="section"],
main,
#MainContent {
  background-color: var(--aleria-cream) !important;
}

/* Tipografía base */
h1, h2, h3, h4, h5, h6 {
  font-family: var(--aleria-font) !important;
  font-weight: 300 !important;           /* light = editorial premium */
  letter-spacing: var(--aleria-tracking-wide) !important;
  color: var(--aleria-navy) !important;
}

p, span, li, td, label {
  font-family: var(--aleria-font) !important;
  font-weight: 400;
}

/* ─── 3. ANNOUNCEMENT BAR (barra superior) ──────────────── */
.announcement-bar,
.announcement-bar__message,
[class*="announcement"],
.shopify-section--announcement-bar {
  background-color: var(--aleria-navy) !important;
  color: var(--aleria-cream) !important;
  font-size: 11px !important;
  letter-spacing: var(--aleria-tracking-wider) !important;
  text-transform: uppercase !important;
  font-weight: 500 !important;
  padding: 10px 0 !important;
  border-bottom: none !important;
}

.announcement-bar a,
[class*="announcement"] a {
  color: var(--aleria-mustard) !important;
  text-decoration: none !important;
}

/* ─── 4. HEADER / NAVEGACIÓN ────────────────────────────── */
.site-header,
header,
.header,
[class*="site-header"],
[class*="header__wrapper"] {
  background-color: var(--aleria-white) !important;
  border-bottom: 1px solid var(--aleria-border) !important;
  box-shadow: none !important;
  padding: 0 !important;
}

/* Logo */
.site-header__logo,
.header__logo,
[class*="header__logo"],
.header__heading-logo {
  max-height: 36px !important;
}

/* Links de navegación */
.site-nav a,
.header__menu-item,
[class*="header__menu"] a,
nav a,
.site-header a {
  font-size: 11px !important;
  letter-spacing: var(--aleria-tracking-wider) !important;
  text-transform: uppercase !important;
  font-weight: 500 !important;
  color: var(--aleria-navy) !important;
  text-decoration: none !important;
  transition: color 0.2s ease !important;
}

.site-nav a:hover,
.header__menu-item:hover,
[class*="header__menu"] a:hover {
  color: var(--aleria-mustard-deep) !important;
}

/* Dropdown de navegación */
.site-nav__dropdown,
.header__submenu,
[class*="dropdown"],
[class*="submenu"] {
  background-color: var(--aleria-white) !important;
  border: 1px solid var(--aleria-border) !important;
  border-top: 2px solid var(--aleria-navy) !important;
  box-shadow: 0 8px 24px rgba(49, 54, 85, 0.08) !important;
  border-radius: 0 !important;
}

.site-nav__dropdown a,
[class*="dropdown"] a,
[class*="submenu"] a {
  font-size: 11px !important;
  letter-spacing: 0.06em !important;
  color: var(--aleria-navy) !important;
  padding: 8px 20px !important;
  font-weight: 400 !important;
}

/* Iconos del header (carrito, búsqueda, login) */
.site-header__icons a,
.header__icons a,
[class*="header__icon"] {
  color: var(--aleria-navy) !important;
}

/* ─── 5. HERO / BANNER PRINCIPAL ────────────────────────── */
.hero,
[class*="hero"],
.banner,
[class*="banner"],
.slideshow,
[class*="slideshow"] {
  border-radius: 0 !important;
}

/* Texto del hero */
.hero__title,
[class*="hero__title"],
.banner__heading,
[class*="banner__heading"] {
  font-size: clamp(32px, 6vw, 72px) !important;
  font-weight: 200 !important;
  letter-spacing: 0.04em !important;
  line-height: 1.1 !important;
  color: var(--aleria-white) !important;
}

.hero__subtitle,
[class*="hero__subtitle"],
.banner__text,
[class*="banner__text"] {
  font-size: 13px !important;
  letter-spacing: var(--aleria-tracking-wider) !important;
  font-weight: 400 !important;
  text-transform: uppercase !important;
}

/* ─── 6. BOTONES ─────────────────────────────────────────── */
.btn,
.button,
[class*="btn"],
[class*="button"],
button[type="submit"],
input[type="submit"] {
  font-family: var(--aleria-font) !important;
  font-size: 11px !important;
  letter-spacing: var(--aleria-tracking-wider) !important;
  text-transform: uppercase !important;
  font-weight: 500 !important;
  border-radius: var(--aleria-radius) !important;
  padding: 14px 32px !important;
  transition: all 0.2s ease !important;
  cursor: pointer !important;
}

/* Botón primario — navy sólido */
.btn--primary,
[class*="btn--primary"],
.button--primary,
button[type="submit"],
input[type="submit"] {
  background-color: var(--aleria-navy) !important;
  color: var(--aleria-white) !important;
  border: 1.5px solid var(--aleria-navy) !important;
}

.btn--primary:hover,
[class*="btn--primary"]:hover {
  background-color: var(--aleria-navy-deep) !important;
  border-color: var(--aleria-navy-deep) !important;
  transform: none !important;
}

/* Botón outline — transparente con borde */
.btn--secondary,
[class*="btn--secondary"],
.button--secondary {
  background-color: transparent !important;
  color: var(--aleria-navy) !important;
  border: 1.5px solid var(--aleria-navy) !important;
}

.btn--secondary:hover,
[class*="btn--secondary"]:hover {
  background-color: var(--aleria-navy) !important;
  color: var(--aleria-white) !important;
}

/* Botón sobre fondo oscuro / hero */
.hero .btn,
.banner .btn,
.hero .button,
.banner .button {
  background-color: transparent !important;
  color: var(--aleria-white) !important;
  border: 1.5px solid var(--aleria-white) !important;
}

.hero .btn:hover,
.banner .btn:hover {
  background-color: var(--aleria-white) !important;
  color: var(--aleria-navy) !important;
}

/* ─── 7. TARJETAS DE PRODUCTO ────────────────────────────── */
.product-card,
.card,
[class*="product-card"],
[class*="card--product"],
.grid-product {
  background-color: var(--aleria-white) !important;
  border: none !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  overflow: hidden !important;
  transition: transform 0.3s ease !important;
}

.product-card:hover,
[class*="product-card"]:hover,
.grid-product:hover {
  transform: translateY(-3px) !important;
  box-shadow: 0 12px 32px rgba(49, 54, 85, 0.1) !important;
}

/* Imagen del producto */
.product-card__image,
[class*="card__media"],
[class*="product-card__image"],
.grid-product__image {
  border-radius: 0 !important;
  overflow: hidden !important;
  aspect-ratio: 4/5 !important;
  object-fit: cover !important;
}

/* Nombre del producto */
.product-card__title,
[class*="card__heading"],
[class*="product-card__title"],
.grid-product__title {
  font-size: 12px !important;
  letter-spacing: var(--aleria-tracking-wide) !important;
  text-transform: uppercase !important;
  font-weight: 500 !important;
  color: var(--aleria-navy) !important;
  margin-top: 12px !important;
}

/* Precio */
.product-card__price,
[class*="card__price"],
[class*="product-card__price"],
.grid-product__price,
.price {
  font-size: 13px !important;
  font-weight: 400 !important;
  color: var(--aleria-muted) !important;
  letter-spacing: 0.04em !important;
}

/* Precio en promoción */
.price--on-sale,
[class*="price--sale"],
.price-item--sale {
  color: var(--aleria-navy) !important;
  font-weight: 500 !important;
}

.price--compare,
[class*="price--compare"] {
  text-decoration: line-through !important;
  color: var(--aleria-muted) !important;
  opacity: 0.6 !important;
}

/* Info del producto (contenedor bajo imagen) */
.product-card__info,
[class*="card__content"],
[class*="card__information"] {
  padding: 12px 4px 20px !important;
}

/* ─── 8. GRID DE COLECCIÓN ───────────────────────────────── */
.collection-grid,
[class*="collection-grid"],
.product-grid,
[class*="product-grid"] {
  gap: 24px !important;
}

/* Título de sección */
.collection__title,
[class*="collection__title"],
.section__heading,
[class*="section__heading"],
.section-header__title {
  font-size: clamp(22px, 4vw, 42px) !important;
  font-weight: 300 !important;
  letter-spacing: 0.06em !important;
  text-transform: uppercase !important;
  color: var(--aleria-navy) !important;
  text-align: center !important;
  margin-bottom: 48px !important;
}

/* ─── 9. SECCIONES EDITORIAL (texto + imagen) ────────────── */
.featured-collection,
.image-with-text,
[class*="featured"],
[class*="image-with-text"] {
  background-color: var(--aleria-cream) !important;
}

/* Subtítulo / eyebrow label */
.subtitle,
[class*="subtitle"],
.overline,
[class*="eyebrow"],
[class*="label--upper"] {
  font-size: 10px !important;
  letter-spacing: var(--aleria-tracking-wider) !important;
  text-transform: uppercase !important;
  color: var(--aleria-muted) !important;
  font-weight: 500 !important;
}

/* ─── 10. BARRA DE BENEFICIOS ────────────────────────────── */
[class*="icon-with-text"],
[class*="benefits"],
[class*="feature-row"],
[class*="usp"] {
  background-color: var(--aleria-white) !important;
  border-top: 1px solid var(--aleria-border) !important;
  border-bottom: 1px solid var(--aleria-border) !important;
  padding: 32px 0 !important;
}

[class*="icon-with-text"] h3,
[class*="benefits"] h3,
[class*="usp"] h3 {
  font-size: 11px !important;
  letter-spacing: var(--aleria-tracking-wide) !important;
  text-transform: uppercase !important;
  font-weight: 600 !important;
  color: var(--aleria-navy) !important;
}

[class*="icon-with-text"] p,
[class*="benefits"] p,
[class*="usp"] p {
  font-size: 12px !important;
  color: var(--aleria-muted) !important;
}

/* ─── 11. FORMULARIO DE EMAIL / NEWSLETTER ───────────────── */
.newsletter,
[class*="newsletter"],
.email-signup,
[class*="email-signup"] {
  background-color: var(--aleria-navy) !important;
  color: var(--aleria-cream) !important;
}

.newsletter h2,
[class*="newsletter"] h2 {
  color: var(--aleria-cream) !important;
}

.newsletter p,
[class*="newsletter"] p {
  color: rgba(248, 245, 239, 0.75) !important;
}

.newsletter input[type="email"],
[class*="newsletter"] input[type="email"] {
  background: transparent !important;
  border: 1px solid rgba(248, 245, 239, 0.4) !important;
  border-radius: 0 !important;
  color: var(--aleria-cream) !important;
  font-family: var(--aleria-font) !important;
  font-size: 12px !important;
  letter-spacing: 0.06em !important;
  padding: 14px 16px !important;
}

.newsletter input[type="email"]::placeholder,
[class*="newsletter"] input[type="email"]::placeholder {
  color: rgba(248, 245, 239, 0.5) !important;
}

.newsletter .btn,
[class*="newsletter"] .btn {
  background-color: var(--aleria-mustard) !important;
  color: var(--aleria-navy) !important;
  border-color: var(--aleria-mustard) !important;
}

/* ─── 12. FOOTER ─────────────────────────────────────────── */
.site-footer,
footer,
[class*="footer"] {
  background-color: var(--aleria-navy) !important;
  color: var(--aleria-cream) !important;
  border-top: none !important;
}

[class*="footer"] h3,
[class*="footer"] h4,
[class*="footer"] .h4 {
  font-size: 10px !important;
  letter-spacing: var(--aleria-tracking-wider) !important;
  text-transform: uppercase !important;
  font-weight: 600 !important;
  color: var(--aleria-cream) !important;
  margin-bottom: 16px !important;
}

[class*="footer"] a,
[class*="footer"] li a {
  font-size: 12px !important;
  letter-spacing: 0.04em !important;
  color: rgba(248, 245, 239, 0.65) !important;
  text-decoration: none !important;
  transition: color 0.2s ease !important;
}

[class*="footer"] a:hover {
  color: var(--aleria-mustard) !important;
}

[class*="footer"] p,
[class*="footer__copyright"] {
  font-size: 11px !important;
  color: rgba(248, 245, 239, 0.45) !important;
  letter-spacing: 0.04em !important;
}

/* ─── 13. PÁGINA DE PRODUCTO (PDP) ──────────────────────── */
.product__title,
[class*="product__title"],
.product-single__title {
  font-size: clamp(20px, 3vw, 32px) !important;
  font-weight: 300 !important;
  letter-spacing: 0.06em !important;
  text-transform: uppercase !important;
  color: var(--aleria-navy) !important;
}

.product__price,
[class*="product__price"],
.product-single__price {
  font-size: 16px !important;
  font-weight: 400 !important;
  letter-spacing: 0.06em !important;
  color: var(--aleria-navy) !important;
}

.product__description,
[class*="product__description"] {
  font-size: 14px !important;
  line-height: 1.8 !important;
  color: var(--aleria-muted) !important;
  letter-spacing: 0.02em !important;
}

/* Add to cart */
.product-form__submit,
[class*="product-form__submit"],
.add-to-cart {
  background-color: var(--aleria-navy) !important;
  color: var(--aleria-white) !important;
  border: none !important;
  font-size: 11px !important;
  letter-spacing: var(--aleria-tracking-wider) !important;
  text-transform: uppercase !important;
  font-weight: 600 !important;
  padding: 18px !important;
  width: 100% !important;
  border-radius: 0 !important;
  transition: background-color 0.2s ease !important;
}

.product-form__submit:hover,
[class*="product-form__submit"]:hover {
  background-color: var(--aleria-navy-deep) !important;
}

/* ─── 14. CART / CARRITO ─────────────────────────────────── */
.cart__item-name,
[class*="cart__item-name"] {
  font-size: 12px !important;
  letter-spacing: 0.06em !important;
  text-transform: uppercase !important;
  color: var(--aleria-navy) !important;
}

.cart-subtotal,
[class*="cart__subtotal"],
.totals__subtotal {
  font-size: 13px !important;
  letter-spacing: var(--aleria-tracking-wide) !important;
  text-transform: uppercase !important;
  font-weight: 500 !important;
}

/* ─── 15. BADGES / ETIQUETAS ─────────────────────────────── */
.badge,
[class*="badge"],
.product-label,
[class*="label"] {
  font-size: 9px !important;
  letter-spacing: var(--aleria-tracking-wider) !important;
  text-transform: uppercase !important;
  font-weight: 600 !important;
  border-radius: 0 !important;
  padding: 4px 8px !important;
}

/* Badge de venda / sale */
.badge--sale,
[class*="badge--sale"],
[class*="label--sale"] {
  background-color: var(--aleria-mustard) !important;
  color: var(--aleria-navy) !important;
}

/* ─── 16. BREADCRUMB ─────────────────────────────────────── */
.breadcrumb,
[class*="breadcrumb"] {
  font-size: 11px !important;
  letter-spacing: 0.06em !important;
  color: var(--aleria-muted) !important;
  text-transform: uppercase !important;
}

.breadcrumb a,
[class*="breadcrumb"] a {
  color: var(--aleria-muted) !important;
  text-decoration: none !important;
}

/* ─── 17. SCROLL BAR PERSONALIZADA ──────────────────────── */
::-webkit-scrollbar {
  width: 4px;
}
::-webkit-scrollbar-track {
  background: var(--aleria-cream);
}
::-webkit-scrollbar-thumb {
  background: var(--aleria-navy);
  border-radius: 0;
}

/* ─── 18. SELECCIÓN DE TEXTO ─────────────────────────────── */
::selection {
  background-color: var(--aleria-mustard) !important;
  color: var(--aleria-navy) !important;
}

/* ─── 19. LINKS GLOBALES ─────────────────────────────────── */
a {
  color: var(--aleria-navy) !important;
  transition: color 0.2s ease !important;
}
a:hover {
  color: var(--aleria-mustard-deep) !important;
}

/* ─── 20. CARGA DE FUENTE MONTSERRAT (si no está cargada) ── */
@import url('https://fonts.googleapis.com/css2?family=Montserrat:wght@200;300;400;500;600&display=swap');