/* ============================================================
   AQUALOZA — Re-skin de páginas internas sobre Morelia (Tiendanube)
   Producto · Catálogo · Contacto · Cuenta · Carrito · Búsqueda · Páginas.
   SOLO estilo: NO toca markup funcional (carrito/variantes/checkout).
   Carga DESPUÉS del CSS de Morelia → gana por orden de cascada.
   Las @font-face de Fraunces se cargan en layout.tpl.
   ============================================================ */

/* ===========================================================
   1) PALETA: forzamos los tokens de Morelia a AQUALOZA
   (azul profundo / porcelana / celeste) en TODA la tienda,
   sin depender de los colores del panel.
   Las variantes -opacity son hex de 8 dígitos (color + alpha).
   =========================================================== */
:root {
  --main-background: #0F2B49;
  --main-foreground: #ECEFF3;
  --accent-color: #6FB6E0;
  --button-background: #6FB6E0;
  --button-foreground: #0B2138;
  --label-background: #6FB6E0;
  --label-foreground: #0B2138;
  --adbar-background: #6FB6E0;
  --adbar-foreground: #0B2138;
  --header-background: #0F2B49;
  --header-foreground: #ECEFF3;
  --footer-background: #0B2138;
  --footer-foreground: #ECEFF3;
  --newsletter-background: #143A63;
  --newsletter-foreground: #ECEFF3;
  --services-background: #143A63;
  --services-foreground: #ECEFF3;

  --main-foreground-opacity-03: #ECEFF308;
  --main-foreground-opacity-05: #ECEFF30D;
  --main-foreground-opacity-07: #ECEFF312;
  --main-foreground-opacity-10: #ECEFF31A;
  --main-foreground-opacity-20: #ECEFF333;
  --main-foreground-opacity-30: #ECEFF34D;
  --main-foreground-opacity-40: #ECEFF366;
  --main-foreground-opacity-50: #ECEFF380;
  --main-foreground-opacity-80: #ECEFF3CC;

  --main-background-opacity-20: #0F2B4933;
  --main-background-opacity-30: #0F2B494D;
  --main-background-opacity-50: #0F2B4980;
  --main-background-opacity-80: #0F2B49CC;
  --main-background-opacity-90: #0F2B49E6;
  --main-background-opacity-95: #0F2B49F2;

  --header-foreground-opacity-20: #ECEFF333;
  --header-foreground-opacity-30: #ECEFF34D;
  --news-foreground-opacity-30: #ECEFF34D;
  --news-foreground-opacity-50: #ECEFF380;
  --footer-foreground-opacity-10: #ECEFF31A;
  --footer-foreground-opacity-20: #ECEFF333;
  --footer-foreground-opacity-30: #ECEFF34D;
  --footer-foreground-opacity-60: #ECEFF399;
  --footer-foreground-opacity-80: #ECEFF3CC;

  /* helpers AQUALOZA */
  --aq-navy: #1E4F88;
  --aq-ink: #14233A;
  --aq-ink-dim: #515D6B;
  --aq-card-line: #DCE3EA;
  --aq-ship: #3DBE7A;
}

/* ===========================================================
   2) TIPOGRAFÍA
   =========================================================== */
h1, h2, h3, h4, h5, h6,
.h1, .h2, .h3, .h4, .h5, .h6, .h1-huge,
.page-header-title, .js-product-name {
  font-family: 'Fraunces', Georgia, serif;
  font-weight: 500;
  letter-spacing: -0.012em;
}
body { font-family: 'Inter', system-ui, -apple-system, sans-serif; }

/* ===========================================================
   3) BOTONES — pill premium
   =========================================================== */
.btn-primary, .btn-default, .btn-secondary, .btn-add-to-cart, .btn-big, .btn-medium {
  border-radius: 999px;
  font-weight: 600;
  transition: transform .22s cubic-bezier(.2,.8,.2,1), box-shadow .22s, opacity .22s, background-color .22s;
}
.btn-primary { box-shadow: 0 14px 30px -14px rgba(0,0,0,.5); }
.btn-primary:hover, .btn-default:hover, .btn-secondary:hover, .btn-add-to-cart:hover { transform: translateY(-2px); }
.btn-big { padding: 15px 22px; }
.btn-add-to-cart { font-size: 1rem; letter-spacing: .005em; }

/* ===========================================================
   4) TARJETAS DE PRODUCTO (grid catálogo / búsqueda) — blancas premium
   =========================================================== */
.item-product .item {
  background: #fff;
  color: var(--aq-ink);
  border: 1px solid var(--aq-card-line);
  border-radius: 18px;
  overflow: hidden;
  padding: 0 0 16px;
  box-shadow: 0 12px 32px -20px rgba(0,0,0,.35);
  transition: transform .35s cubic-bezier(.2,.8,.2,1), box-shadow .35s, border-color .35s;
}
.item-product .item:hover {
  transform: translateY(-6px);
  box-shadow: 0 28px 60px -28px rgba(0,0,0,.5);
  border-color: rgba(111,182,224,.6);
}
.item-image { background: radial-gradient(120% 100% at 38% 18%, #fff, #EDF3F8 60%, #DDE9F1); }
.item-description { padding: 14px 16px 0; }
.item-product .item .item-link,
.item-product .item .item-name { color: var(--aq-ink); }
.item-product .item .item-name { font-weight: 600; }
.item-product .item .item-price { color: var(--aq-navy); font-size: 1.18rem; font-weight: 700; }
.item-product .item .price-compare { color: #A6B0BB; }
.item-product .item .item-installments,
.item-product .item .font-smallest,
.item-product .item .opacity-60 { color: var(--aq-ink-dim) !important; opacity: 1; }
.item-product .item .item-actions { color: var(--aq-navy); }
.item-product .item .btn-link { color: var(--aq-navy); }

/* ===========================================================
   5) DETALLE DE PRODUCTO — precio y compra
   =========================================================== */
.price-container .js-price-display,
.price-container #price_display {
  font-family: 'Inter', sans-serif;
  font-size: clamp(1.9rem, 4vw, 2.6rem);
  font-weight: 700;
  color: var(--accent-color);
  line-height: 1.1;
}
.price-compare { opacity: .6; text-decoration: line-through; }
.free-shipping-message, .js-free-shipping-minimum-message { font-weight: 600; }
.product-shipping-calculator { border-radius: 16px; }
#single-product .item-image-featured, .product-image-featured { border-radius: 22px; }
/* Caja de info del producto sobre superficie un poco más clara */
.product-shipping-calculator.list { border: 1px solid var(--main-foreground-opacity-10); padding: 14px; }

/* ===========================================================
   6) FORMULARIOS (contacto, registro, carrito, búsqueda)
   =========================================================== */
.form-control, .form-select, .form-quantity {
  border-radius: 12px;
  transition: border-color .2s, box-shadow .2s;
}
.form-control:focus { box-shadow: 0 0 0 3px rgba(111,182,224,.22); }
.form-control-btn { border-radius: 0 12px 12px 0; }

/* ===========================================================
   7) CARDS / MODALES / LABELS / TABLAS
   =========================================================== */
.card, .box { border-radius: 18px; border: 1px solid var(--main-foreground-opacity-10); }
.modal, .modal-body, .modal-scrollable-area { border-radius: 18px; }
.modal-shadow { box-shadow: 0 30px 80px -30px rgba(0,0,0,.6); }
.label { border-radius: 999px; font-weight: 600; letter-spacing: .02em; }
.table { border-radius: 14px; overflow: hidden; }

/* ===========================================================
   8) HEADER / NAV / BUSCADOR (ya azul por tokens; solo pulido)
   =========================================================== */
.head-main .form-control { border-radius: 999px; }
.search-suggestions { border-radius: 16px; }
.nav-primary .nav-list .nav-item a { transition: opacity .2s; }
.desktop-dropdown { border-radius: 0 0 16px 16px; }

/* ===========================================================
   9) PAGE HEADER / BANNER / CATEGORÍA
   =========================================================== */
.page-header { margin-bottom: 1.5rem; }
.category-banner-image { border-radius: 22px; }

/* ===========================================================
   10) FILTROS / CONTROLES DE CATÁLOGO
   =========================================================== */
.category-controls { border-radius: 999px; }
.filters-overlay, .modal-nav-filters { border-radius: 18px; }

/* ===========================================================
   11) PAGINACIÓN + FOOTER
   =========================================================== */
.pagination .page-link, .js-pagination a, .js-pagination span { border-radius: 10px; }
.footer-payments-shipping-logos img { border-radius: 8px; background: #fff; }

/* ===========================================================
   12) MOTION / RESPONSIVE
   =========================================================== */
@media (prefers-reduced-motion: reduce) {
  .btn-primary, .btn-default, .btn-secondary, .btn-add-to-cart,
  .item-product .item { transition: none !important; }
}
@media (max-width: 768px) {
  .item-description { padding: 12px 12px 0; }
  .price-container .js-price-display, .price-container #price_display { font-size: 1.9rem; }
}

/* ===========================================================
   13) CARRITO (drawer/popup) EN BLANCO — look checkout default TN
   Sobreescribe los tokens de color SOLO dentro del modal del
   carrito, para no afectar header/footer/otros componentes navy.
   =========================================================== */
#modal-cart, .modal.cart, .js-ajax-cart-panel {
  --main-background: #FFFFFF;
  --main-foreground: #14233A;
  --accent-color: #1E4F88;
  --main-foreground-opacity-03: #14233A08;
  --main-foreground-opacity-05: #14233A0D;
  --main-foreground-opacity-07: #14233A12;
  --main-foreground-opacity-10: #14233A1A;
  --main-foreground-opacity-20: #14233A33;
  --main-foreground-opacity-30: #14233A4D;
  --main-foreground-opacity-40: #14233A66;
  --main-foreground-opacity-50: #14233A80;
  --main-foreground-opacity-80: #14233ACC;
  background: #FFFFFF !important;
  color: #14233A;
}
#modal-cart .modal-header,
#modal-cart .modal-body,
#modal-cart .modal-scrollable-area,
#modal-cart .modal-footer,
#modal-cart .cart-row,
#modal-cart .box,
#modal-cart .card { background: #FFFFFF; color: #14233A; }
#modal-cart .h1, #modal-cart .h2, #modal-cart .h3, #modal-cart .h4, #modal-cart .h5,
#modal-cart [data-store="cart-total"], #modal-cart [data-store="cart-subtotal"],
#modal-cart .js-cart-total, #modal-cart .js-cart-subtotal { color: #14233A; }
/* Cerrar (x) y textos secundarios legibles sobre blanco */
#modal-cart .modal-close, #modal-cart .icon-close, #modal-cart .btn-link { color: #14233A; }
/* Separadores/bordes visibles sobre blanco */
#modal-cart .cart-item, #modal-cart .border-top, #modal-cart .border-bottom,
#modal-cart hr { border-color: #E4E8EC !important; }

/* ===========================================================
   14) NOTIFICACIÓN "Agregado al carrito" + "Sumá a tu compra"
   Tipografía Inter en todo (como el carrito), no la serif.
   =========================================================== */
#related-products-notification, #related-products-notification *,
.js-alert-added-to-cart, .js-alert-added-to-cart *,
.js-cart-notification-item-name, .js-cart-notification-item-price,
.js-cart-notification-item-quantity, .js-cart-total,
.js-related-products-notification-container, .js-related-products-notification-container * {
  font-family: 'Inter', system-ui, -apple-system, 'Segoe UI', Arial, sans-serif !important;
  letter-spacing: normal !important;
}