/**
 * minimal-theme.php
 * -----------------------------------------------------------------------
 * Capa de reskin para el template /minimal/. Se carga DESPUÉS de
 * css/main.php (el CSS compilado del theme "eStore" de BootstrapMade que
 * también usa /estore/), así que gana el cascade sin necesitar !important
 * salvo donde main.php ya usa !important o donde pisamos utilidades de
 * Bootstrap. No se tocó main.php ni el HTML/PHP de negocio: esto es
 * puramente visual, inspirado en la estética minimalista/monocromática de
 * mattestore.com.ar (mucho blanco, tipografía chica en mayúsculas, grillas
 * de producto sin decoración, botones planos).
 *
 * Los datos (productos, precios, carrito, checkout, cuentas) siguen
 * viniendo exactamente igual que en /estore/ — acá solo se redefinen
 * colores, tipografía, bordes/sombras y el layout de header/hero/cards.
 *
 * Antes este archivo era un .css estático que forzaba blanco/negro/gris
 * fijo para "el look minimal", ignorando los 4 colores de admin > Sitios
 * Web > Parámetros (regla 60-30-10). Ahora es un .php: lee esos mismos
 * 4 colores (emp_color_dominante/secundario/acento/acentotexto) de la
 * base como hace css/main.php, así que /minimal/ también respeta la
 * paleta elegida y se puede seguir jugando con los colores desde admin
 * sin tocar código.
 * ----------------------------------------------------------------------- */

/* -----------------------------------------------------------------------
   1. Tokens globales
   -----------------------------------------------------------------------
   Paleta 60-30-10 (la misma que usa css/main.php):
     dominante  (60%) -> fondo / superficies
     secundario (30%) -> texto, títulos, estructura (top-bar, nav)
     acento     (10%) -> botones, precios en oferta, links activos,
                          cualquier elemento pensado para "convertir"
     acentotexto      -> texto legible sobre el acento
   Se vuelven a declarar acá (en vez de dejarlas heredar de main.php)
   para que este archivo sea explícito y no dependa del orden de carga. */
:root {
  --default-font: "Poppins", system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --heading-font: "Poppins", system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --nav-font: "Poppins", system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;

  --background-color: #ffffff;
  --default-color: #000000;
  --heading-color: #000000;
  --accent-color: #707070;
  --surface-color: #ffffff;
  --contrast-color: #ffffff;

  --nav-color: #000000;
  --nav-hover-color: var(--accent-color);
  --nav-mobile-background-color: #ffffff;
  --nav-dropdown-background-color: #ffffff;
  --nav-dropdown-color: #000000;
  --nav-dropdown-hover-color: var(--accent-color);

  /* Tonos derivados de la paleta (no fijos): un borde/gris "neutro" que
     en realidad es el color secundario muy transparentado, para que
     también seguya la paleta si se cambia el secundario. */
  --minimal-border: color-mix(in srgb, var(--default-color), transparent 90%);
  --minimal-muted: color-mix(in srgb, var(--default-color), transparent 45%);
  /* Fondo alterno para secciones "claras" (antes #f7f7f5 fijo): una
     mezcla sutil de fondo + estructura, se adapta sea cual sea el
     dominante elegido. */
  --minimal-section-alt-bg: color-mix(in srgb, var(--background-color), var(--default-color) 4%);
  /* Sigue el valor de "Bordes" en admin > Sitios Web > Parámetros
     (--bs-border-radius, definido en css/main.php, que carga antes que
     este archivo), para que el mismo control global también afecte a
     /minimal/. */
  --minimal-radius: var(--bs-border-radius, 0px);
}

.light-background {
  --background-color: var(--minimal-section-alt-bg);
}

body {
  letter-spacing: 0.01em;
}

h1, h2, h3, h4, h5, h6 {
  font-weight: 600;
  letter-spacing: 0.01em;
}

/* Quitamos sombra/blur genéricos de tarjetas y dropdowns del theme base;
   los componentes puntuales de abajo reponen únicamente lo que necesitan
   (ej. un borde fino) en vez de una sombra difusa. */
.card,
.dropdown-menu,
.swiper-button-next,
.swiper-button-prev {
  box-shadow: none !important;
}

/* -----------------------------------------------------------------------
   2. Botones
   ----------------------------------------------------------------------- */
.btn,
.btn-shop,
.btn-cart,
.add-to-cart-btn,
.btn-add-to-cart,
.view-all-btn,
input[type="submit"].btn {
  border-radius: var(--minimal-radius) !important;
  box-shadow: none !important;
  text-transform: uppercase;
  font-size: 13px;
  letter-spacing: 0.08em;
  font-weight: 600;
}

.btn-primary,
.btn-shop,
.add-to-cart-btn,
.btn-add-to-cart {
  background-color: var(--accent-color) !important;
  border-color: var(--accent-color) !important;
  color: var(--contrast-color) !important;
  transition: background-color .2s ease, color .2s ease, border-color .2s ease;
}

.btn-primary:hover,
.btn-shop:hover,
.add-to-cart-btn:hover,
.btn-add-to-cart:hover {
  background-color: #5f5f5f !important;
  border-color: #5f5f5f !important;
  color: var(--contrast-color) !important;
}

.btn-outline-primary,
.view-all-btn {
  background-color: transparent !important;
  border: 1px solid var(--accent-color) !important;
  color: var(--accent-color) !important;
}

.btn-outline-primary:hover,
.view-all-btn:hover {
  background-color: var(--accent-color) !important;
  color: var(--contrast-color) !important;
}

.header .search-form .input-group .btn {
  border-radius: var(--minimal-radius) !important;
  background-color: var(--accent-color);
}

.header .search-form .input-group .btn:hover {
  background-color: var(--accent-color);
  opacity: .8;
}

/* -----------------------------------------------------------------------
   3. Header: top-bar de anuncios + header principal + nav
   ----------------------------------------------------------------------- */
#header.header {
  background: var(--background-color);
  border-bottom: 1px solid var(--minimal-border);
}

#header .top-bar {
  background-color: var(--heading-color);
  color: var(--contrast-color);
  font-size: 12px;
  letter-spacing: .06em;
  text-transform: uppercase;
  padding-top: 8px;
  padding-bottom: 8px;
}

#header .top-bar,
#header .top-bar a,
#header .top-bar .top-bar-item,
#header .top-bar .dropdown-toggle {
  color: var(--contrast-color);
}

#header .top-bar a:hover {
  color: var(--contrast-color);
  opacity: .75;
}

#header .top-bar .dropdown-menu {
  border-radius: var(--minimal-radius);
  border: 1px solid var(--minimal-border);
}

/* El menu desplegable de idioma/moneda vive DENTRO de #header .top-bar,
   así que sin esto heredaba el texto blanco (--contrast-color) que le
   pusimos al top-bar para el texto de "ES" / "ARS" que se ve siempre.
   Blanco sobre el fondo claro (--surface-color) del menu desplegado lo
   dejaba invisible. Estas dos reglas usan el mismo #header para tener
   la misma especificidad y así sí ganarle a la regla de arriba. */
#header .top-bar .dropdown-menu .dropdown-item {
  color: var(--default-color);
}

#header .top-bar .dropdown-menu .dropdown-item:hover {
  color: var(--accent-color);
}

#header .top-bar .announcement-slider .swiper-slide {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  font-weight: 500;
}

#header .main-header {
  padding-top: 4px;
  padding-bottom: 4px;
}

#header .logo img {
  max-height: 42px;
}

#header .logo .sitename {
  font-size: 22px;
  font-weight: 700;
  letter-spacing: .04em;
  text-transform: uppercase;
  color: var(--heading-color);
  margin: 0;
}

#header .search-form .form-control {
  border-radius: var(--minimal-radius);
  border: 1px solid var(--minimal-border);
  background: var(--surface-color);
}

#header .header-action-btn,
#header .header-actions i {
  color: var(--heading-color);
}

#header .header-nav {
  border-top: 1px solid var(--minimal-border);
}

#navmenu {
  text-align: center;
}

#navmenu ul {
  justify-content: center;
  gap: 4px;
}

#navmenu > ul > li > a {
  text-transform: uppercase;
  font-size: 13px;
  font-weight: 600;
  letter-spacing: .07em;
  color: var(--nav-color);
  padding: 14px 16px;
}

#navmenu > ul > li > a:hover,
#navmenu > ul > li.active > a {
  color: var(--accent-color);
}

#navmenu .dropdown ul {
  border-radius: var(--minimal-radius);
  border: 1px solid var(--minimal-border);
  box-shadow: none;
}

/* -----------------------------------------------------------------------
   4. Hero (slider admin: introcarousel + grilla de servicios)
   ----------------------------------------------------------------------- */
.ecommerce-hero-2.hero {
  background: var(--background-color);
  padding-top: 24px;
  padding-bottom: 24px;
}

.ecommerce-hero-2 .slide-content {
  box-shadow: none;
}

.ecommerce-hero-2 .slide-badge {
  border-radius: var(--minimal-radius);
  background: var(--heading-color);
  color: var(--contrast-color);
  text-transform: uppercase;
  font-size: 11px;
  letter-spacing: .1em;
}

.ecommerce-hero-2 .slide-content h1,

.ecommerce-hero-2 .slide-content h2.slide-title {
  font-weight: 600;
  color: var(--heading-color);
  text-transform: uppercase;
  letter-spacing: .01em;
}

.ecommerce-hero-2 .slide-content h1 span,

.ecommerce-hero-2 .slide-content h2.slide-title span {
  color: var(--accent-color);
}

.ecommerce-hero-2 .swiper-button-next,
.ecommerce-hero-2 .swiper-button-prev {
  background: var(--surface-color);
  border: 1px solid var(--minimal-border);
  border-radius: var(--minimal-radius);
}

/* Grilla de "servicios" (primer slide) */
.home-services .service-card {
  border-radius: var(--minimal-radius);
  box-shadow: none;
  border: 1px solid var(--minimal-border);
}

.home-services .service-title {
  text-transform: uppercase;
  font-size: 13px;
  letter-spacing: .06em;
  font-weight: 600;
  color: var(--heading-color);
}

/* -----------------------------------------------------------------------
   5. Info cards (envío / cuotas / soporte, etc.)
   ----------------------------------------------------------------------- */
.info-cards.section {
  background: var(--minimal-section-alt-bg);
}

.info-cards .info-card {
  background: transparent;
  box-shadow: none;
  border-right: 1px solid var(--minimal-border);
}

.info-cards .info-card:last-child {
  border-right: none;
}

.info-cards .icon-box {
  background: transparent;
  border-radius: 0;
  color: var(--heading-color);
}

.info-cards .info-card h4,
.info-cards .info-card p {
  text-transform: uppercase;
  font-size: 12px;
  letter-spacing: .05em;
}

/* -----------------------------------------------------------------------
   6. Categorías (home) — grilla de categoría-cards
   ----------------------------------------------------------------------- */
.category-cards .category-card {
  border-radius: var(--minimal-radius);
  box-shadow: none;
  overflow: hidden;
}

.category-cards .category-image {
  border-radius: var(--minimal-radius);
}

.category-cards .category-title {
  text-transform: uppercase;
  font-size: 13px;
  font-weight: 600;
  letter-spacing: .05em;
  color: var(--heading-color);
}

.category-cards .category-count {
  color: var(--minimal-muted);
  font-size: 12px;
}

/* -----------------------------------------------------------------------
   7. Grillas de producto (dos variantes usadas por el theme):
      - .product-card / .product-image  -> home "best-sellers"
      - .product-box  / .product-thumb  -> category.php y category-*.php
   ----------------------------------------------------------------------- */
.product-card,
.product-box {
  border-radius: var(--minimal-radius) !important;
  box-shadow: none !important;
  border: 1px solid transparent;
  background: var(--surface-color);
  transition: border-color .2s ease;
}

.product-card:hover,
.product-box:hover {
  border-color: var(--minimal-border);
  box-shadow: none !important;
}

.product-image,
.product-thumb {
  border-radius: var(--minimal-radius) !important;
  background: var(--minimal-section-alt-bg);
  aspect-ratio: 1 / 1;
  overflow: hidden;
}

.product-image img,
.product-thumb img.main-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* Etiqueta genérica (ej. "nuevo") en el color secundario/estructura;
   la de oferta usa el acento para destacar más (ver regla siguiente). */
.product-tags .badge,
.product-label {
  border-radius: var(--minimal-radius) !important;
  text-transform: uppercase;
  font-size: 10px;
  letter-spacing: .05em;
  background: var(--heading-color);
  color: var(--contrast-color);
}

.badge.bg-sale,
.product-label-sale {
  background: var(--accent-color) !important;
  color: var(--contrast-color) !important;
}

/* Overlay de "agregar al carrito" en .product-box: pasa de overlay
   centrado translúcido a una barra inferior plana, más acorde al estilo
   minimal (aparece al hover, sin oscurecer la foto). */
.product-overlay {
  background: transparent !important;
  align-items: flex-end !important;
  padding: 0 !important;
}

.product-overlay .add-to-cart-container {
  width: 100%;
}

.product-overlay .add-to-cart-btn {
  width: 100%;
  border-radius: 0 !important;
  background: var(--accent-color) !important;
  color: var(--contrast-color) !important;
  border: none !important;
  transform: translateY(100%);
  transition: transform .2s ease;
}

.product-box:hover .add-to-cart-btn {
  transform: translateY(0);
}

.product-actions {
  gap: 6px;
}

.btn-wishlist,
.btn-quickview {
  border-radius: 50% !important;
  border: 1px solid var(--minimal-border) !important;
  background: var(--surface-color) !important;
  color: var(--heading-color) !important;
  box-shadow: none !important;
}

.product-title,
.product-info .product-title,
.category-product-list .product-title {
  font-size: 13px;
  font-weight: 500;
  text-transform: none;
  color: var(--heading-color);
  margin-top: 10px;
}

.product-price,
.product-info .product-price {
  font-size: 14px;
}

.product-price .current-price,
.product-price .sale {
  font-weight: 600;
  color: var(--heading-color);
}

.product-price .original-price,
.product-price .original {
  color: var(--minimal-muted);
  text-decoration: line-through;
  font-weight: 400;
}

.product-rating {
  color: var(--minimal-muted);
}

.product-rating .bi-star-fill {
  color: var(--heading-color);
}

/* -----------------------------------------------------------------------
   8. category.php: filtros / sidebar / listado
   ----------------------------------------------------------------------- */
.widget-item,
.product-categories-widget {
  border-radius: var(--minimal-radius);
  box-shadow: none;
  border: 1px solid var(--minimal-border);
}

.widget-item .widget-title {
  text-transform: uppercase;
  font-size: 12px;
  letter-spacing: .06em;
  font-weight: 600;
}

/* -----------------------------------------------------------------------
   9. Ficha de producto (product-single.php / .product-details)
   ----------------------------------------------------------------------- */
.product-details .product-images .product-thumbnails .thumbnail-item {
  border-radius: var(--minimal-radius);
}

.product-details .product-images .product-thumbnails .thumbnail-item.active {
  border-color: var(--accent-color);
}

.product-details .product-info .product-title {
  text-transform: uppercase;
  font-weight: 600;
  letter-spacing: .01em;
}

.product-details .product-info .product-price-container .current-price {
  color: var(--heading-color);
}

.product-details .product-info .product-price-container .discount-badge {
  border-radius: var(--minimal-radius);
  background: var(--accent-color);
  color: var(--contrast-color);
}

.product-details .product-info .product-actions .add-to-cart-btn {
  border-radius: var(--minimal-radius) !important;
}

/* -----------------------------------------------------------------------
   10. Carrito / checkout: tablas y cards limpias, sin sombras
   ----------------------------------------------------------------------- */
.cart-table,
.checkout-box,
.order-summary,
.summary-card,
table.table {
  box-shadow: none !important;
}

.cart-table th,
table.table th {
  text-transform: uppercase;
  font-size: 11px;
  letter-spacing: .05em;
  color: var(--minimal-muted);
  border-bottom: 1px solid var(--minimal-border) !important;
}

.form-control,
.form-select {
  border-radius: var(--minimal-radius) !important;
  border: 1px solid var(--minimal-border);
}

.form-control:focus,
.form-select:focus {
  border-color: var(--accent-color);
  box-shadow: none;
}

/* -----------------------------------------------------------------------
   11. Footer
   ----------------------------------------------------------------------- */
footer,
#footer,
.footer {
  background: var(--background-color) !important;
  color: var(--default-color);
  border-top: 1px solid var(--minimal-border);
}

footer h4,
footer .footer-title,
#footer h4,
.footer h4 {
  text-transform: uppercase;
  font-size: 12px;
  letter-spacing: .08em;
  font-weight: 600;
}

footer a,
#footer a,
.footer a {
  color: var(--default-color);
}

footer a:hover,
#footer a:hover,
.footer a:hover {
  color: var(--accent-color);
}

.social-links a,
.footer .social-links a {
  border-radius: 50% !important;
  border: 1px solid var(--minimal-border);
  background: transparent !important;
  color: var(--default-color) !important;
}

.footer .newsletter-form .form-control {
  border-radius: var(--minimal-radius);
}

.footer .newsletter-form .btn {
  border-radius: var(--minimal-radius) !important;
}

.copyright,
.footer .copyright {
  border-top: 1px solid var(--minimal-border);
  font-size: 12px;
  color: var(--minimal-muted);
}

/* -----------------------------------------------------------------------
   12. Botón flotante de WhatsApp y volver arriba: antes fijos en negro
   "para combinar con la paleta monocromática"; ahora usan el acento
   (10% - conversión) para que también respondan a Parámetros.
   ----------------------------------------------------------------------- */
.whatsapp-float {
  background-color: var(--accent-color) !important;
}

#scroll-top {
  border-radius: var(--minimal-radius) !important;
  background-color: var(--accent-color) !important;
}

/* -----------------------------------------------------------------------
   Precios en promoción (se aplica en home, menú, tienda y ficha):
   - precio original: siempre tachado y sin negrita.
   - precio con descuento (.promo-price): color de admin > Parámetros
     (empresa_index.emp_color_promo). Si está vacío se mantiene el del tema.
   ----------------------------------------------------------------------- */
.original-price,
.old-price,
.product-price .original {
  text-decoration: line-through !important;
  font-weight: 400 !important;
}
.promo-price {
  color: #00ad0c !important;
}

/* -----------------------------------------------------------------------
   product-single: personalizaciones (texto / imagen / color).
   Títulos y placeholder al mismo tamaño que los precios por opción de
   los productos con atributos (12px).
   ----------------------------------------------------------------------- */
.pers-titulo {
  font-size: 12px;
}
.pers-input::placeholder {
  font-size: 12px;
}
/* Precio por opción de atributo cuando el producto está en promoción */
.atr-precio-promo {
  color: #000 !important;
  font-weight: 700 !important;
}

/* -----------------------------------------------------------------------
   Hero: un slide por promoción; los artículos de la promoción rotan
   (script en index.php). Solo se ve el artículo con clase .active.
   ----------------------------------------------------------------------- */
.promo-rotator .promo-rot-item {
  display: none;
}
.promo-rotator .promo-rot-item.active {
  display: block;
  animation: promoRotFade 0.6s ease;
}
@keyframes promoRotFade {
  from { opacity: 0; }
  to   { opacity: 1; }
}