/* ==========================================================
   LASPINA WINES — Design System v2
   Identidad extraída de fotografías reales del local.
   ========================================================== */

@import url('https://fonts.googleapis.com/css2?family=Cormorant+Garamond:ital,wght@0,300;0,400;0,500;0,600;1,300;1,400;1,500;1,600&family=Inter:wght@300;400;500;600&display=swap');

/* ==========================================================
   TOKENS — extraídos de las fotos del local
   ========================================================== */

:root {
  /* Bordó real de la pared del local */
  --wine:        #7A1617;
  --wine-deep:   #521010;
  --wine-light:  #9B2020;
  --wine-faint:  #F5EDED;

  /* Dorado de la iluminación tungsteno */
  --gold:        #C8A96A;
  --gold-light:  #E4D4A8;
  --gold-dim:    #A07840;

  /* Madera de los estantes — caoba cálida */
  --wood:        #6B3E2A;
  --wood-light:  #8B5E3C;
  --wood-dark:   #3D1E0E;

  /* Crema — paredes y ambiente general */
  --cream:       #F4EFE6;
  --cream-dark:  #E8E0D0;
  --cream-deep:  #D4C8B4;

  /* Hierro negro de las estanterías */
  --iron:        #1A1A1A;
  --iron-soft:   #2C2C2C;
  --iron-mid:    #3D3D3D;

  /* Tonos neutros cálidos */
  --warm-50:     #FAF8F5;
  --warm-100:    #F4EFE6;
  --warm-200:    #E8E0D0;
  --warm-300:    #D4C8B4;
  --warm-400:    #B8A898;
  --warm-500:    #8C7868;
  --warm-600:    #6A5848;
  --warm-700:    #4A3828;
  --warm-800:    #2C2018;
  --warm-900:    #1A1208;

  /* Textos */
  --text-primary:   #1A1208;
  --text-secondary: #6A5848;
  --text-muted:     #8C7868;
  --white:          #FFFFFF;

/* Tipografías */
/* =========================
TIPOGRAFÍAS LASPINA
========================= */

--font-display:
'Cormorant Garamond',
serif;

--font-body:
'Inter',
sans-serif;
  /* Espacios */
  --space-1:  4px;
  --space-2:  8px;
  --space-3:  12px;
  --space-4:  16px;
  --space-5:  20px;
  --space-6:  24px;
  --space-8:  32px;
  --space-10: 40px;
  --space-12: 48px;
  --space-16: 64px;
  --space-20: 80px;
  --space-24: 96px;

  /* Radios — reducidos vs v1, más refinados */
  --r-sm:   4px;
  --r-md:   6px;
  --r-lg:   10px;
  --r-xl:   14px;
  --r-full: 9999px;

  /* Sombras — cálidas, no frías */
  --shadow-sm:   0 1px 4px rgba(26,18,8,.07);
  --shadow-md:   0 4px 16px rgba(26,18,8,.10);
  --shadow-lg:   0 12px 40px rgba(26,18,8,.14);
  --shadow-xl:   0 24px 72px rgba(26,18,8,.18);
  --shadow-wine: 0 8px 28px rgba(122,22,23,.30);

  /* Transiciones */
  --t-fast:   .15s ease;
  --t-base:   .28s ease;
  --t-slow:   .45s ease;
  --t-spring: .38s cubic-bezier(.34,1.56,.64,1);

  /* Layout */
  --max-w:    1280px;
  --nav-h:    68px;
}

/* ==========================================================
   RESET & BASE
   ========================================================== */

*, *::before, *::after {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

html {
  scroll-behavior: smooth;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

body{
    font-family: var(--font-body);
    font-weight: 500;
}

img { max-width: 100%; display: block; }
a { color: inherit; text-decoration: none; }
button { font-family: var(--font-body); cursor: pointer; border: none; }

/* ==========================================================
   LAYOUT
   ========================================================== */

.container {
  max-width: var(--max-w);
  margin: 0 auto;
  padding: 0 var(--space-5);
}

@media (min-width: 768px) { .container { padding: 0 var(--space-8); } }
@media (min-width: 1280px) { .container { padding: 0 var(--space-10); } }

/* ==========================================================
   NAVBAR — inspirada en la madera y el hierro del local
   ========================================================== */

.navbar {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    z-index: 9999;
    height: var(--nav-h);
    background: var(--wood-dark);
    border-bottom: 2px solid var(--gold-dim);
    transition: box-shadow var(--t-base);
    overflow: visible;
}

.navbar::before{
    content:"";

    position:absolute;
    inset:0;

    background:
        repeating-linear-gradient(
            90deg,
            rgba(255,255,255,.025) 0px,
            rgba(255,255,255,.025) 2px,
            transparent 2px,
            transparent 55px
        );

    opacity:.7;

    pointer-events:none;
}
.navbar::after{
    content:"";

    position:absolute;
    inset:0;

    background:
        linear-gradient(
            180deg,
            rgba(255,255,255,.08) 0%,
            transparent 25%
        );

    pointer-events:none;
}

.navbar.scrolled {
  box-shadow: 0 4px 24px rgba(26,18,8,.35);
}

.navbar-inner {
  max-width: var(--max-w);
  margin: 0 auto;
  padding: 0 var(--space-5);
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-6);
}

@media (min-width: 768px) { .navbar-inner { padding: 0 var(--space-8); } }

.navbar-logo{
    display:flex;
    align-items:center;
    gap:12px;
    flex-shrink:0;
}

.navbar-logo-text{
    display:flex;
    flex-direction:column;
    line-height:1;
}

.navbar-logo-img{
    width:48px;
    height:48px;
    object-fit:contain;
    border-radius:50%;
}
.navbar-search {
  flex: 1;
  max-width: 400px;
  position: relative;
  display: none;
}

@media (min-width: 768px) { .navbar-search { display: block; } }

.navbar-search input {
  width: 100%;
  height: 38px;
  padding: 0 var(--space-4) 0 40px;
  border: 1px solid rgba(200,169,106,.25);
  border-radius: var(--r-sm);
  background: rgba(255,255,255,.07);
  font-family: var(--font-body);
  font-size: 14px;
  color: var(--gold-light);
  outline: none;
  transition: border-color var(--t-base), background var(--t-base);
}

.navbar-search input::placeholder { color: rgba(200,169,106,.45); }

.navbar-search input:focus {
  border-color: rgba(200,169,106,.6);
  background: rgba(255,255,255,.10);
}

.navbar-search-icon {
  position: absolute;
  left: 12px;
  top: 50%;
  transform: translateY(-50%);
  color: var(--gold-dim);
  pointer-events: none;
  font-size: 15px;
}

.navbar-actions {
  display: flex;
  align-items: center;
  gap: var(--space-2);
}

.nav-icon-btn {
  width: 40px;
  height: 40px;
  border-radius: var(--r-sm);
  background: transparent;
  color: var(--gold-dim);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 18px;
  transition: background var(--t-fast), color var(--t-fast);
  position: relative;
  text-decoration: none;
}

.nav-icon-btn:hover {
  background: rgba(200,169,106,.12);
  color: var(--gold-light);
}

.nav-badge {
  position: absolute;
  top: 4px;
  right: 4px;
  width: 17px;
  height: 17px;
  background: var(--wine);
  color: var(--white);
  border-radius: var(--r-full);
  font-size: 10px;
  font-weight: 600;
  display: flex;
  align-items: center;
  justify-content: center;
  line-height: 1;
  transition: transform var(--t-spring);
}

.nav-badge.bump { transform: scale(1.4); }

/* Search suggestions */
.search-suggestions {
  position: absolute;
  top: calc(100% + 6px);
  left: 0;
  right: 0;
  background: var(--wood-dark);
  border: 1px solid var(--gold-dim);
  border-radius: var(--r-md);
  box-shadow: var(--shadow-lg);
  overflow: hidden;
  z-index: 200;
  opacity: 0;
  transform: translateY(-8px);
  pointer-events: none;
  transition: opacity var(--t-fast), transform var(--t-fast);
}

.search-suggestions.open {
  opacity: 1;
  transform: translateY(0);
  pointer-events: auto;
}

.suggestion-item {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  padding: var(--space-3) var(--space-4);
  cursor: pointer;
  transition: background var(--t-fast);
  border-bottom: 1px solid rgba(200,169,106,.1);
}

.suggestion-item:last-child { border-bottom: none; }
.suggestion-item:hover { background: rgba(200,169,106,.08); }

.suggestion-thumb {
  width: 32px;
  height: 44px;
  object-fit: contain;
  flex-shrink: 0;
}

.suggestion-info { flex: 1; min-width: 0; }

.suggestion-name {
  font-size: 13px;
  font-weight: 500;
  color: var(--gold-light);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.suggestion-meta {
  font-size: 13px;
  color: var(--gold-dim);
}

.suggestion-empty {
  padding: var(--space-5) var(--space-4);
  text-align: center;
  color: var(--gold-dim);
  font-size: 14px;
}

/* ==========================================================
   SHIPPING BANNER
   ========================================================== */

.shipping-banner {
  background: var(--wine-deep);
  color: var(--gold-light);
  text-align: center;
  padding: var(--space-2) var(--space-4);
  font-size: 13px;
  font-weight: 500;
  letter-spacing: .6px;
  margin-top: var(--nav-h);
  border-bottom: 1px solid var(--wine);
}

.shipping-banner span { margin: 0 var(--space-4); }
.shipping-banner .dot { color: var(--gold-dim); margin: 0 var(--space-2); }

/* ==========================================================
   HERO — atmósfera del local real
   El fondo refleja la pared bordó + textura de la madera
   ========================================================== */

.hero {
  position: relative;
  min-height: 90vh;
  display: flex;
  align-items: center;
  overflow: visible;
  background: #3D1010;
}
.hero::after{
    display:none;
}

/* Textura de tabla de madera — sutil */
.hero-bg {
  position: absolute;
  inset: 0;
  background:
    linear-gradient(180deg,
      rgba(82,16,16,.0)  0%,
      rgba(82,16,16,.6)  40%,
      rgba(61,14,14,.85) 100%
    ),
    /* Zona izquierda: el bordó de la pared */
    linear-gradient(105deg,
      #521010 0%,
      #6B1515 35%,
      #3D1010 65%,
      #2A0C0C 100%
    );
}

/* Veta de madera sutil */
.hero-texture{
    position:absolute;
    inset:0;

    background:

    repeating-linear-gradient(
        90deg,
        rgba(255,255,255,.015) 0px,
        rgba(255,255,255,.015) 3px,
        transparent 3px,
        transparent 85px
    ),

    linear-gradient(
        90deg,
        rgba(0,0,0,.08),
        transparent 25%,
        transparent 75%,
        rgba(0,0,0,.08)
    );
}
/* Foco de luz cálido — como los spots del local */
.hero-texture::after{
    content:"";

    position:absolute;
    inset:0;

    background:

    radial-gradient(
        circle at 20% 20%,
        rgba(255,255,255,.04),
        transparent 40%
    ),

    radial-gradient(
        circle at 80% 50%,
        rgba(200,169,106,.08),
        transparent 50%
    );
}

.hero-inner {
  position: relative;
  z-index: 2;
  max-width: var(--max-w);
  margin: 0 auto;
  padding: var(--space-20) var(--space-5);
  width: 100%;
  display: grid;
  grid-template-columns: 1fr;
  gap: 120px; /* antes var(--space-12) */
  align-items: center;
}

@media (min-width: 900px) {
  .hero-inner {
    grid-template-columns: 55% 45%;
    gap: 220px;
    padding: var(--space-24) var(--space-8);
  }
}
.hero-content { color: var(--white); }

/* Reemplaza el pill "startup" por un separador editorial */
.hero-eyebrow {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  font-size: 11px;
  font-weight: 400;
  letter-spacing: 4px;
  text-transform: uppercase;
  color: var(--gold);
  margin-bottom: var(--space-6);
}

.hero-eyebrow::before {
  content: '';
  display: block;
  width: 32px;
  height: 1px;
  background: var(--gold-dim);
  flex-shrink: 0;
}

.hero-title {
  font-family: var(--font-display);
  font-size: clamp(52px, 8vw, 96px);
  font-weight: 400;
  font-style: italic;
  line-height: 1.02;
  margin-bottom: var(--space-6);
  color: var(--white);
  letter-spacing: -.5px;
}

.hero-title em {
  font-style: normal;
  color: var(--gold-light);
  font-weight: 300;
}

.hero-title strong {
  font-weight: 600;
  font-style: italic;
}

.hero-subtitle {
  font-size: 16px;
  line-height: 1.75;
  color: rgba(244,239,230,.62);
  max-width: 460px;
  margin-bottom: var(--space-10);
  font-weight: 300;
}

.hero-actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-4);
  align-items: center;
}

/* Separador horizontal entre CTA y stats */
.hero-divider {
  width: 40px;
  height: 1px;
  background: rgba(200,169,106,.35);
  margin: var(--space-10) 0;
}

.hero-stats {
  display: flex;
  gap: var(--space-10);
}

.hero-stat-value {
  font-family: var(--font-display);
  font-size: 36px;
  font-weight: 400;
  font-style: italic;
  color: var(--gold-light);
  line-height: 1;
  display: block;
}

.hero-stat-label {
  font-size: 11px;
  color: rgba(244,239,230,.45);
  margin-top: 6px;
  text-transform: uppercase;
  letter-spacing: 2px;
  font-weight: 400;
}

/* Visual del hero — estante de botellas estilizado */
.hero-visual {
  display: none;
  justify-content: center;
  align-items: flex-end;
  position: relative;
  padding-bottom: var(--space-8);
}

@media (min-width: 900px) { .hero-visual { display: flex; } }

/* Estante horizontal de hierro — como en el local */
.hero-shelf {
  position: relative;
  width: 100%;
  max-width: 440px;
}

.hero-shelf-plank {
  position: absolute;
  bottom: 0;
  left: -16px;
  right: -16px;
  height: 12px;
  background: linear-gradient(180deg, var(--wood-light) 0%, var(--wood) 100%);
  border-radius: 2px;
  box-shadow: 0 4px 16px rgba(26,18,8,.5);
}

.hero-shelf-plank::before {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: 2px;
  background: repeating-linear-gradient(
    90deg,
    transparent 0px,
    transparent 28px,
    rgba(0,0,0,.08) 28px,
    rgba(0,0,0,.08) 29px
  );
}

/* Botellas de vino estilizadas — siluetas reales */
.hero-bottles {
  display: flex;
  align-items: flex-end;
  justify-content: center;
  gap: 20px;
  padding-bottom: 12px;
  padding: 0 var(--space-5) 12px;
}

.hero-bottle {
  position: relative;
  filter: drop-shadow(0 20px 40px rgba(0,0,0,.5));
}

/* Botella 1 — Malbec oscuro */
.hero-bottle:nth-child(1) { transform: translateY(0px); }
.hero-bottle:nth-child(2) { transform: translateY(-24px); }
.hero-bottle:nth-child(3) { transform: translateY(-8px); }
.hero-bottle:nth-child(4) { transform: translateY(-16px); }

/* Sello decorativo — como la vitrina del local */
.hero-badge-wine {
  position: absolute;
  top: var(--space-8);
  right: -24px;
  width: 88px;
  height: 88px;
  border-radius: 50%;
  background: var(--gold);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  box-shadow: 0 8px 24px rgba(200,169,106,.35);
  text-align: center;
}

.hero-badge-wine span:first-child {
  font-family: var(--font-display);
  font-size: 24px;
  font-style: italic;
  color: var(--wine-deep);
  font-weight: 600;
  line-height: 1;
}

.hero-badge-wine span:last-child {
  font-size: 9px;
  letter-spacing: 2px;
  text-transform: uppercase;
  color: var(--wine-deep);
  font-weight: 500;
  margin-top: 3px;
}

/* ==========================================================
   BUTTONS
   ========================================================== */

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-2);
  padding: 0 var(--space-6);
  height: 48px;
  border-radius: var(--r-sm);
  font-family: var(--font-body);
  font-size: 13px;
  font-weight: 500;
  letter-spacing: 1.5px;
  text-transform: uppercase;
  cursor: pointer;
  border: none;
  transition: all var(--t-base);
  white-space: nowrap;
  text-decoration: none;
}

.btn-primary {
  background: var(--wine);
  color: var(--white);
  border: 1px solid var(--wine-light);
}

.btn-primary:hover {
  background: var(--wine-light);
  transform: translateY(-1px);
  box-shadow: var(--shadow-wine);
}

.btn-primary:active { transform: translateY(0); }

/* Botón outline en fondo oscuro — borde dorado */
.btn-outline {
  background: transparent;
  color: var(--gold-light);
  border: 1px solid rgba(200,169,106,.45);
}

.btn-outline:hover {
  border-color: var(--gold);
  background: rgba(200,169,106,.08);
}

/* Botón ghost — en fondo claro */
.btn-ghost {
  background: transparent;
  color: var(--wine);
  border: 1px solid var(--wine-faint);
}

.btn-ghost:hover {
  background: var(--wine-faint);
  border-color: rgba(122,22,23,.2);
}

.btn-gold {
  background: var(--gold);
  color: var(--wine-deep);
  border: 1px solid var(--gold-dim);
}

.btn-gold:hover {
  background: var(--gold-light);
  transform: translateY(-1px);
}

.btn-sm { height: 36px; padding: 0 var(--space-4); font-size: 11px; }
.btn-lg { height: 54px; padding: 0 var(--space-10); font-size: 13px; }
.btn-full { width: 100%; }
.btn-icon { width: 48px; padding: 0; flex-shrink: 0; }

/* ==========================================================
   SECTION HEADER — editorial
   ========================================================== */

.section-header {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: var(--space-4);
  margin-bottom: var(--space-10);
  flex-wrap: wrap;
  padding-bottom: var(--space-6);
  border-bottom: 1px solid var(--cream-deep);
}

.section-eyebrow {
  font-size: 10px;
  font-weight: 500;
  letter-spacing: 3.5px;
  text-transform: uppercase;
  color: var(--gold-dim);
  margin-bottom: var(--space-2);
}

.section-title {
  font-family: var(--font-display);
  font-size: clamp(28px, 4vw, 44px);
  font-weight: 400;
  font-style: italic;
  line-height: 1.1;
  color: var(--wine-deep);
}

.section-title em {
  font-style: normal;
  color: var(--wine);
}

.section-link {
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 2px;
  text-transform: uppercase;
  color: var(--wine);
  display: flex;
  align-items: center;
  gap: 6px;
  white-space: nowrap;
  transition: gap var(--t-fast);
  border-bottom: 1px solid transparent;
  padding-bottom: 2px;
}

.section-link:hover {
  gap: var(--space-2);
  border-bottom-color: var(--wine);
}

/* ==========================================================
   SECTIONS
   ========================================================== */

section { padding: var(--space-16) 0; }

@media (min-width: 768px) { section { padding: var(--space-20) 0; } }

/* Sección sobre fondo bordó — como la pared del local */
.section-wine-bg {
  background: var(--wine-faint);
  border-top: 1px solid rgba(122,22,23,.1);
  border-bottom: 1px solid rgba(122,22,23,.1);
}

.section-dark-bg {
  background: var(--wine-deep);
  color: var(--white);
}

.section-dark-bg .section-title { color: var(--gold-light); font-style: italic; }
.section-dark-bg .section-eyebrow { color: rgba(200,169,106,.55); }
.section-dark-bg .section-header { border-bottom-color: rgba(200,169,106,.15); }

/* Sección crema oscura — como el suelo del local */
.section-cream-bg { background: var(--cream-dark); }

/* ==========================================================
   FILTERS
   ========================================================== */
/* ==========================================================
   FILTERS — Lista distribuida en 3 Columnas Verticales (Móvil)
   ========================================================== */

.filters-wrap {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  flex-wrap: wrap;
  margin-bottom: var(--space-8);
}

.filter-chip {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 6px var(--space-4);
  border-radius: var(--r-sm);
  font-size: 12px;
  font-weight: 500;
  letter-spacing: 1px;
  text-transform: uppercase;
  background: var(--white);
  color: var(--text-secondary);
  border: 1px solid var(--cream-deep);
  cursor: pointer;
  transition: all var(--t-base);
}

.filter-chip:hover {
  border-color: var(--wine);
  color: var(--wine);
}

.filter-chip.active {
  background: var(--wine);
  color: var(--white);
  border-color: var(--wine);
}

/* ─── CAMBIOS EXCLUSIVOS PARA MÓVIL (max-width: 767px) ─── */
@media (max-width: 767px) {
  .filters-wrap {
    display: block;        /* Cambia a block para que funcione el sistema de columnas */
    column-count: 3;       /* Divide la lista larga en 3 columnas verticales */
    column-gap: 8px;       /* Separación horizontal entre las 3 columnas */
    margin-bottom: var(--space-8);
  }

  .filter-chip {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 100%;           /* Hace que cada botón ocupe todo el ancho de su columna */
    margin-bottom: 10px;   /* Separación vertical entre los botones de la lista */
    padding: 8px 4px;
    font-size: 11px;
    text-transform: none;  /* Mantiene minúsculas para que no ocupe tanto espacio */
    letter-spacing: 0px;
    
    /* Permitimos que el texto largo se acomode */
    white-space: normal;   /* 💡 CLAVE: Permite que si el nombre es largo haga salto de línea interno */
    text-align: center;
    height: auto;          /* El botón crece verticalmente si el nombre es largo */
    
    /* Evita que un botón se parta a la mitad entre dos columnas */
    break-inside: avoid-column; 
    page-break-inside: avoid;
  }

  /* Oculta iconos en móvil para que el texto aproveche todo el ancho */
  .filter-chip i, 
  .filter-chip svg {
    display: none !important;
  }
}

.filter-chip:hover {
  border-color: var(--wine);
  color: var(--wine);
}

.filter-chip.active {
  background: var(--wine);
  color: var(--white);
  border-color: var(--wine);
}

/* ─── CAMBIOS SÓLO EN MÓVIL (Pantallas menores a 768px) ─── */
@media (max-width: 767px) {
  .filters-wrap {
    display: grid;
    grid-template-columns: repeat(3, 1fr); /* 3 columnas exactas */
    gap: var(--space-2);
  }

  .filter-chip {
    display: flex;
    justify-content: center; /* Centra el texto horizontalmente */
    padding: 6px var(--space-1); /* Menos margen interno para que quepa todo */
    font-size: 10px; /* Letra un poco más chica para evitar desbordes */
    letter-spacing: 0.5px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis; /* Si el nombre es larguísimo, pone "..." */
  }
}

.filter-chip:hover {
  border-color: var(--wine);
  color: var(--wine);
}

.filter-chip.active {
  background: var(--wine);
  color: var(--white);
  border-color: var(--wine);
}

/* ==========================================================
   PRODUCT GRID
   ========================================================== */

.products-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
  gap: var(--space-5);
}

@media (max-width: 767px) {
  .products-grid { grid-template-columns: repeat(2, 1fr); gap: var(--space-3); }
}

@media (min-width: 768px) {
  .products-grid { grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); }
}

/* ==========================================================
   PRODUCT CARD — LASPINA WINES
========================================================== */

.card{
    background:var(--white);
    border-radius:var(--r-md);
    overflow:hidden;

    box-shadow:
    0 2px 8px rgba(26,18,8,.07),
    0 0 0 1px rgba(26,18,8,.05);

    transition:
    transform var(--t-base),
    box-shadow var(--t-base);

    position:relative;

    display:flex;
    flex-direction:column;
}

/* hover de imagen eliminado — imagen estática */

.card:hover{
    box-shadow:
    0 12px 36px rgba(26,18,8,.12),
    0 0 0 1px rgba(122,22,23,.08);
}

.card-image{
    position:relative;

    height:240px;

    background: #7a3535;

    display:flex;
    align-items:center;
    justify-content:center;

    padding:var(--space-5);

    overflow:hidden;
}

/* borde inferior eliminado */

.card-image img{
    max-width:100%;
    max-height:100%;

    object-fit:contain;

    transform:scale(0.95) translateY(-0%);
    transition:none !important;
}


.card-fav{
    position:absolute;

    top:var(--space-3);
    right:var(--space-3);

    width:32px;
    height:32px;

    border-radius:var(--r-full);

    background:rgba(255,255,255,.85);

    border:none;

    display:flex;
    align-items:center;
    justify-content:center;

    cursor:pointer;

    z-index:2;

    color:var(--warm-400);
}

/* ==========================================================
   BADGES v2
   ========================================================== */

.badge-container {
  position: absolute;
  top: var(--space-3);
  left: var(--space-3);
  z-index: 2;
  display: flex;
  flex-direction: column;
  gap: 5px;
  pointer-events: none;
}

.badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-family: var(--font-body);
  font-weight: 800;
  text-transform: uppercase;
  line-height: 1;
  width: max-content;
  /* reset total — cada variante define sus propios valores */
  padding: 0;
  border-radius: 0;
  font-size: unset;
  color: unset;
  background: none;
  letter-spacing: .8px;
}

/* ── OFERTA — starburst dorado ───────────────────────── */
.badge-oferta {
  width: 66px;
  height: 66px;
  background: #F5C518;
  color: #1a0a00;
  font-size: 9px;
  letter-spacing: .3px;
  font-weight: 900;
  clip-path: polygon(
    50%  2%, 56% 32%, 73% 10%, 68% 40%,
    96% 35%, 76% 52%, 96% 65%, 68% 60%,
    73% 90%, 56% 68%, 50% 98%, 44% 68%,
    27% 90%, 32% 60%,  4% 65%, 24% 52%,
     4% 35%, 32% 40%, 27% 10%, 44% 32%
  );
  flex-direction: column;
  padding-top: 2px;
}

/* ── TOP-VENTAS — price-tag oscuro ──────────────────── */
.badge-top-ventas {
  background: #1a1a1a;
  color: #F5C518;
  font-size: 9px;
  letter-spacing: 1.2px;
  padding: 5px 10px 5px 16px;
  border-radius: 0 var(--r-sm) var(--r-sm) 0;
  position: relative;
  box-shadow: 2px 2px 6px rgba(0,0,0,.45);
}
.badge-top-ventas::before {
  content: "";
  position: absolute;
  left: 6px;
  top: 50%;
  transform: translateY(-50%);
  width: 4px;
  height: 4px;
  border-radius: 50%;
  background: #F5C518;
}

/* ── NUEVO — píldora verde con dot pulsante ─────────── */
.badge-nuevo {
  background: #16a34a;
  color: #fff;
  font-size: 9px;
  letter-spacing: 1px;
  padding: 5px 10px 5px 21px;
  border-radius: var(--r-full);
  position: relative;
  box-shadow: 0 0 8px rgba(22,163,74,.5);
}
.badge-nuevo::before {
  content: "";
  position: absolute;
  left: 8px;
  top: 50%;
  transform: translateY(-50%);
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: #86efac;
  animation: badge-pulse 1.6s ease-in-out infinite;
}
@keyframes badge-pulse {
  0%, 100% { opacity: 1;  transform: translateY(-50%) scale(1);   }
  50%       { opacity: .5; transform: translateY(-50%) scale(.65); }
}

/* ── PRECIO/CALIDAD — medallón sello circular ────────── */
.badge-precio-calidad {
  width: 58px;
  height: 58px;
  border-radius: 50%;
  background: radial-gradient(circle at 40% 38%, #1e3a5f, #0d1f35 80%);
  border: 2px solid #C8A96A;
  box-shadow: 0 0 0 1px rgba(200,169,106,.3), inset 0 1px 3px rgba(255,255,255,.1);
  color: #C8A96A;
  font-size: 7px;
  letter-spacing: .5px;
  flex-direction: column;
  gap: 0px;
  text-align: center;
  padding: 0;
}
.badge-precio-calidad::before {
  content: "PRECIO";
  display: block;
  font-size: 7px;
  font-weight: 800;
  letter-spacing: .6px;
  color: #C8A96A;
  line-height: 1.3;
}
.badge-precio-calidad::after {
  content: "CALIDAD" "\a" "★ ★ ★";
  white-space: pre;
  display: block;
  font-size: 7px;
  font-weight: 800;
  letter-spacing: .6px;
  color: #C8A96A;
  line-height: 1.6;
  text-align: center;
}

/* ── RECOMENDADO — estrella + pill ───────────────────── */
.badge-recomendado {
  flex-direction: column;
  align-items: flex-start;
  gap: 2px;
}
.badge-recomendado::before {
  content: "★";
  font-size: 26px;
  line-height: 1;
  color: #a855f7;
  filter: drop-shadow(0 0 5px rgba(168,85,247,.8));
}
.badge-recomendado::after {
  content: "RECOMENDADO";
  background: #7e22ce;
  color: #fff;
  font-size: 8px;
  font-weight: 800;
  letter-spacing: .7px;
  padding: 3px 7px;
  border-radius: var(--r-full);
}

/* ── 2×1 — bloque cuadrado naranja ───────────────────── */
.badge-2x1 {
  width: 52px;
  height: 52px;
  background: linear-gradient(135deg, #f97316, #ea580c);
  border-radius: var(--r-md);
  flex-direction: column;
  gap: 1px;
  box-shadow: 0 3px 10px rgba(234,88,12,.5);
}
.badge-2x1::before {
  content: "2×1";
  font-size: 17px;
  font-weight: 900;
  color: #fff;
  line-height: 1.1;
  letter-spacing: 0;
}
.badge-2x1::after {
  content: "PROMO";
  font-size: 7px;
  font-weight: 700;
  color: #fff;
  letter-spacing: 1.2px;
  opacity: .88;
}

.card-content{

    padding:
    var(--space-4)
    var(--space-5)
    var(--space-5);

    flex:1;

    display:flex;
    flex-direction:column;

    border-top:3px solid var(--cream-deep);
}

.card-varietal{

    font-family:
    var(--font-body);

    font-size:11px;

    font-weight:700;

    letter-spacing:3px;

    text-transform:uppercase;

    color:var(--gold-dim);

    margin-bottom:8px;
}

.card-bodega{

    font-family:
    var(--font-body);

    font-size:14px;

    font-weight:400;

    color:var(--text-muted);

    margin-bottom:10px;
}

.card-name{

    font-family:
    var(--font-display);

    font-size:22px;

    font-weight:600;

    line-height:1.1;

    color:var(--wine-deep);

    margin-bottom:18px;

    flex:1;
}

.card-footer{

    display:flex;

    align-items:center;

    justify-content:space-between;

    gap:var(--space-2);

    margin-top:auto;

    padding-top:var(--space-3);

    border-top:1px solid var(--cream-dark);
}

/* RESPETAMOS EL PRECIO ACTUAL */

.card-price{

    font-family:
    var(--font-body);

    font-size:24px;

    font-weight:500;

    color:
    var(--wine-deep);

    line-height:1;

}

.card-price-old{

    display:block;

    margin-bottom:6px;

    font-family:
    var(--font-body);

    font-size:20px;

       font-weight:440;
    color:#ff0000;

    text-decoration:line-through;

    text-decoration-thickness:1px;
}

.card-price-oferta {
    color:#7a1617;
}

/* ── Sin Stock ribbon ─────────────────────────────────────── */

.card-image {
  position: relative;
  overflow: hidden;
}

.sin-stock-ribbon {
  position: absolute;
  top: 22px;
  right: -32px;
  width: 148px;
  background: #111111;
  color: #fff;
  font-size: 12px;
  font-weight: 800;
  letter-spacing: 2px;
  text-transform: uppercase;
  text-align: center;
  padding: 8px 0;
  transform: rotate(45deg);
  transform-origin: center;
  z-index: 3;
  box-shadow: 0 3px 8px rgba(0,0,0,0.45);
}

.card-sin-stock {
  opacity: 0.82;
}

.btn-add{

    width:46px;
    height:46px;

    border-radius:var(--r-sm);

    background:var(--wine);

    color:var(--white);

    border:none;

    display:flex;

    align-items:center;

    justify-content:center;

    font-size:26px;

    font-weight:700;

    flex-shrink:0;

    transition:all var(--t-base);
}

.btn-add:hover{

    background:var(--wine-light);

    transform:scale(1.05);
}

.btn-add.added{
    background:#2d6a4f;
}

.btn-add-sin-stock {
  background: #333;
  position: relative;
}

.btn-add-sin-stock:hover {
  background: #555;
}

/* ==========================================================
   SKELETON
   ========================================================== */

@keyframes shimmer {
  0%   { background-position: -200% 0; }
  100% { background-position:  200% 0; }
}

.skeleton {
  background: linear-gradient(90deg, var(--warm-100) 25%, var(--warm-200) 50%, var(--warm-100) 75%);
  background-size: 200% 100%;
  animation: shimmer 1.5s infinite;
  border-radius: var(--r-sm);
}

.card-skeleton {
  background: var(--white);
  border-radius: var(--r-md);
  overflow: hidden;
  box-shadow: 0 2px 8px rgba(26,18,8,.06);
}

.card-skeleton .sk-image { height: 240px; border-radius: 0; }
.card-skeleton .sk-body { padding: var(--space-4) var(--space-5) var(--space-5); }
.card-skeleton .sk-line { height: 11px; margin-bottom: var(--space-3); border-radius: var(--r-full); }
.card-skeleton .sk-line.short { width: 55%; }
.card-skeleton .sk-line.med   { width: 75%; }
.card-skeleton .sk-line.full  { width: 100%; }

/* ==========================================================
   EMPTY STATE
   ========================================================== */

.empty-state { text-align: center; padding: var(--space-20) var(--space-8); }
.empty-state-icon { font-size: 56px; display: block; margin-bottom: var(--space-5); opacity: .4; }

.empty-state h3 {
  font-family: var(--font-display);
  font-size: 28px;
  font-style: italic;
  color: var(--wine-deep);
  margin-bottom: var(--space-3);
  font-weight: 400;
}

.empty-state p { color: var(--text-muted); margin-bottom: var(--space-6); font-size: 15px; }

/* ==========================================================
   FEATURED ROW
   ========================================================== */

.scroll-row {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
  gap: var(--space-5);
}

@media (max-width: 767px) {
  .scroll-row {
    display: flex;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    -webkit-overflow-scrolling: touch;
    gap: var(--space-4);
    padding-bottom: var(--space-3);
    scrollbar-width: none;
  }
  .scroll-row::-webkit-scrollbar { display: none; }
  .scroll-row .card { scroll-snap-align: start; flex: 0 0 260px; }
}

/* ==========================================================
   PROMO CARDS — estética de la vitrina del local
   ========================================================== */

.promo-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-4);
}

@media (min-width: 600px) { .promo-grid { grid-template-columns: 1fr 1fr; } }
@media (min-width: 900px) { .promo-grid { grid-template-columns: 2fr 1fr 1fr; } }

.promo-cards{

    display:grid;

    grid-template-columns:
    repeat(3,1fr);

    gap:32px;

    margin-top:80px;

    width:100%;

}

@media (max-width:900px){

    .promo-cards{

        grid-template-columns:
        repeat(2,minmax(0,1fr));

    }

}

@media (max-width:640px){

    .promo-cards{
      
      

        grid-template-columns:
        1fr;
        

    }

}

.promo-card:hover{

    transform:translateY(-6px);

    box-shadow:
    0 18px 40px rgba(0,0,0,.10);

}
.promo-card{

    width:100%;

    background:#ffffff;

    border:1px solid rgba(0,0,0,.15);

    border-radius:20px;

    padding:32px;

    text-decoration:none;

    color:inherit;

    transition:.25s;

    box-shadow:
    0 8px 30px rgba(0,0,0,.06);

}

.promo-card-label{

    display:block;

    font-size:12px;

    font-weight:700;

    letter-spacing:2px;

    color:#8b1538;

    margin-bottom:14px;

}

.promo-card-title{
    font-family: "Libre Baskerville", serif;
    font-size: 28px;
    line-height: 1.2;
    font-weight: 700;
    color: var(--wine-deep);
    margin-bottom: 16px;
}
.promo-card-description{

    color:#5f5f5f;

    line-height:1.7;

    margin-bottom:24px;

}

.promo-card-link{

    color:#8b1538;

    font-weight:700;

    font-size:14px;

}

/* ==========================================================
   TOAST
   ========================================================== */

.toast-container {
  position: fixed;
  bottom: var(--space-6);
  left: 50%;
  transform: translateX(-50%);
  z-index: 1000;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-2);
  pointer-events: none;
}

.toast {
  background: var(--iron);
  color: var(--gold-light);
  padding: var(--space-3) var(--space-5);
  border-radius: var(--r-sm);
  font-size: 13px;
  font-weight: 500;
  box-shadow: var(--shadow-lg);
  display: flex;
  align-items: center;
  gap: var(--space-2);
  animation: toastIn .3s var(--t-spring) both, toastOut .3s ease .7s both forwards;
  white-space: nowrap;
  border: 1px solid var(--gold-dim);
  letter-spacing: .3px;
}

@keyframes toastIn  { from { opacity:0; transform:translateY(12px) scale(.95); } to { opacity:1; transform:translateY(0) scale(1); } }
@keyframes toastOut { to   { opacity:0; transform:translateY(-8px) scale(.95); } }

/* ==========================================================
   WHATSAPP FLOAT
   ========================================================== */

.wa-float {
  position: fixed;
  bottom: var(--space-6);
  right: var(--space-5);
  z-index: 90;
  width: 54px;
  height: 54px;
  border-radius: var(--r-full);
  background: #25d366;
  color: var(--white);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 26px;
  box-shadow: 0 4px 16px rgba(37,211,102,.4);
  text-decoration: none;
  transition: transform var(--t-spring), box-shadow var(--t-base);
}

.wa-float:hover {
  transform: scale(1.1);
  box-shadow: 0 8px 24px rgba(37,211,102,.5);
}

/* ==========================================================
   FOOTER — madera oscura, como el mostrador
   ========================================================== */

footer{
    position:relative;

    background:
        linear-gradient(
            180deg,
            #3d1e0e 0%,
            #2f170b 45%,
            #241108 100%
        );

    color:rgba(244,239,230,.55);

    padding:var(--space-16) 0 var(--space-8);

    border-top:1px solid rgba(200,169,106,.35);

    overflow:hidden;
}
footer::before{
    content:"";

    position:absolute;
    inset:0;

    background:
        repeating-linear-gradient(
            90deg,
            rgba(255,255,255,.02) 0px,
            rgba(255,255,255,.02) 2px,
            transparent 2px,
            transparent 70px
        );

    pointer-events:none;
}
footer::after{
    content:"";

    position:absolute;
    inset:0;

    background:
        linear-gradient(
            180deg,
            rgba(255,255,255,.05) 0%,
            transparent 20%
        );

    pointer-events:none;
}

.footer-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-8);
  margin-bottom: var(--space-12);
}

@media (min-width: 600px) { .footer-grid { grid-template-columns: 1fr 1fr; } }
@media (min-width: 900px) { .footer-grid { grid-template-columns: 2fr 1fr 1fr 1fr; } }


.footer-brand .logo-main {
  font-family: var(--font-display);
  font-size: 32px;
  font-weight: 400;
  font-style: italic;
  color: var(--gold-light);
  display: block;
  margin-bottom: 4px;
}

.footer-brand .logo-sub {
  font-size: 9px;
  font-weight: 400;
  letter-spacing: 3.5px;
  text-transform: uppercase;
  color: var(--gold-dim);
  display: block;
  margin-bottom: var(--space-5);
}

.footer-desc {
  font-size: 14px;
  line-height: 1.75;
  max-width: 280px;
  margin-bottom: var(--space-5);
  color: rgba(244,239,230,.5);
}

.footer-socials { display: flex; gap: var(--space-3); }

.footer-social-btn {
  width: 38px;
  height: 38px;
  border-radius: var(--r-sm);
  background: rgba(200,169,106,.08);
  color: var(--gold-dim);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 17px;
  text-decoration: none;
  border: 1px solid rgba(200,169,106,.15);
  transition: background var(--t-fast), color var(--t-fast), border-color var(--t-fast);
}

.footer-social-btn:hover {
  background: rgba(200,169,106,.18);
  color: var(--gold-light);
  border-color: var(--gold-dim);
}

.footer-col-title {
  font-size: 9px;
  font-weight: 500;
  letter-spacing: 3px;
  text-transform: uppercase;
  color: var(--gold);
  margin-bottom: var(--space-5);
}

.footer-links {
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
}

.footer-links li a {
  font-size: 14px;
  color: rgba(244,239,230,.5);
  text-decoration: none;
  transition: color var(--t-fast);
}

.footer-links li a:hover { color: var(--gold-light); }

.footer-contact-item {
  display: flex;
  align-items: flex-start;
  gap: var(--space-2);
  font-size: 14px;
  margin-bottom: var(--space-3);
  color: rgba(244,239,230,.5);
}

.footer-contact-item .icon { font-size: 15px; flex-shrink: 0; margin-top: 2px; }

.footer-bottom {
  border-top: 1px solid rgba(200,169,106,.22);
  padding-top: var(--space-6);
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  gap: var(--space-4);
  font-size: 13px;
  color: rgba(244,239,230,.25);
}

/* ==========================================================
   MOBILE SEARCH
   ========================================================== */

.mobile-search-btn { display: flex; }
@media (min-width: 768px) { .mobile-search-btn { display: none; } }

.mobile-search-overlay {
  position: fixed;
  inset: 0;
  background: rgba(26,18,8,.6);
  z-index: 200;
  display: none;
  align-items: flex-start;
  padding-top: 80px;
}

.mobile-search-overlay.open { display: flex; }

.mobile-search-box {
  width: calc(100% - 40px);
  margin: 0 auto;
  max-width: 560px;
  background: var(--wood-dark);
  border-radius: var(--r-lg);
  overflow: hidden;
  box-shadow: var(--shadow-xl);
  border: 1px solid var(--gold-dim);
}

.mobile-search-box input {
  width: 100%;
  height: 54px;
  padding: 0 var(--space-5) 0 50px;
  border: none;
  font-family: var(--font-body);
  font-size: 16px;
  outline: none;
  background: transparent;
  color: var(--gold-light);
}

.mobile-search-box .search-icon {
  position: absolute;
  left: 16px;
  top: 50%;
  transform: translateY(-50%);
  font-size: 18px;
  color: var(--gold-dim);
  pointer-events: none;
}

.mobile-search-inner {
  position: relative;
  border-bottom: 1px solid rgba(200,169,106,.15);
}

.mobile-suggestions { max-height: 320px; overflow-y: auto; }

/* ==========================================================
   CATALOG PAGE
   ========================================================== */

.catalog-header {
  padding: var(--space-8) 0 var(--space-4);
  border-bottom: 1px solid var(--cream-deep);
  margin-bottom: var(--space-6);
}

.catalog-header h1 {
  font-family: var(--font-display);
  font-size: 40px;
  font-style: italic;
  color: var(--wine-deep);
  font-weight: 400;
}

.catalog-meta {
  font-size: 13px;
  color: var(--text-muted);
  margin-top: 5px;
  letter-spacing: .3px;
}

.catalog-toolbar {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: var(--space-3);
  margin-bottom: var(--space-5);
  flex-wrap: wrap;
  flex-direction: column;
}

.sin-stock-disclaimer {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: #fdf0f2;
  border: 1.5px solid #9b2335;
  border-radius: var(--r-sm);
  padding: 8px 14px;
  font-size: 13px;
  color: #7a1525;
  font-family: var(--font-body);
  line-height: 1.4;
}

.catalog-sort select {
  height: 38px;
  padding: 0 var(--space-4);
  border: 1px solid var(--cream-deep);
  border-radius: var(--r-sm);
  background: var(--white);
  font-family: var(--font-body);
  font-size: 13px;
  letter-spacing: .5px;
  color: var(--text-secondary);
  cursor: pointer;
  outline: none;
  appearance: none;
  padding-right: var(--space-8);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath fill='%238C7868' d='M8 10L3 5h10z'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 12px center;
  background-size: 11px;
}

/* ==========================================================
   PRODUCT PAGE
   ========================================================== */

.product-page {
  max-width: 1100px;
  margin: 0 auto;
  padding: var(--space-10) var(--space-5);
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-10);
}

@media (min-width: 768px) {
  .product-page {
    grid-template-columns: 1fr 1fr;
    padding: var(--space-12) var(--space-8);
    gap: var(--space-16);
  }
}

/* ----------------------------------------------------------
   PAGE MAIN — padding for fixed navbar
   ---------------------------------------------------------- */

.page-main {
  padding-top: var(--nav-h);
  min-height: 100vh;
}

/* ----------------------------------------------------------
   PRODUCT LAYOUT (producto.html) — two-column grid
   ---------------------------------------------------------- */

.product-layout {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-8);
  padding-top: var(--space-8);
}

@media (min-width: 768px) {
  .product-layout {
    grid-template-columns: 480px 1fr;
    gap: var(--space-10);
    align-items: start;
  }
}

/* Gallery column */
.product-gallery {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
}

.product-main-img {
  background: linear-gradient(180deg, var(--warm-50) 0%, var(--warm-100) 100%);
  border-radius: var(--r-xl);
  border: 1px solid var(--cream-deep);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: var(--space-8) var(--space-6);
  min-height: 480px;
  max-height: 560px;
  overflow: hidden;
  position: relative;
}

.product-main-img img {
  width: auto;
  max-width: 100%;
  height: auto;
  max-height: 480px;
  object-fit: contain;
  display: block;
  filter: drop-shadow(0 24px 48px rgba(26,18,8,.18));
  transition: transform var(--t-slow);
}

.product-main-img:hover img {
  transform: scale(1.02);
}

/* Info column */
.product-info {
  padding-top: 0;
}

.product-breadcrumb {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 13px;
  color: var(--text-muted);
  margin-bottom: var(--space-5);
  font-family: var(--font-body);
  letter-spacing: .3px;
}

.product-breadcrumb a {
  color: var(--text-muted);
  text-decoration: none;
  transition: color var(--t-fast);
}

.product-breadcrumb a:hover { color: var(--wine); }

.product-varietal-tag {
  display: inline-block;
  font-size: 10px;
  font-weight: 500;
  letter-spacing: 3px;
  text-transform: uppercase;
  color: var(--gold-dim);
  margin-bottom: var(--space-2);
  font-family: var(--font-body);
}

.product-title {
  font-family: var(--font-display);
  font-size: clamp(30px, 4vw, 46px);
  font-weight: 400;
  font-style: italic;
  color: var(--wine-deep);
  line-height: 1.1;
  margin-bottom: var(--space-2);
}

.product-price-block {
  display: flex;
  align-items: baseline;
  gap: var(--space-3);
  margin-bottom: var(--space-4);
}

.product-divider {
  border: none;
  border-top: 1px solid var(--cream-deep);
  margin: var(--space-5) 0;
}

.product-qty {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  background: var(--white);
  border: 1px solid var(--cream-deep);
  border-radius: var(--r-sm);
  padding: 0 var(--space-2);
  height: 54px;
  flex-shrink: 0;
}

.qty-btn {
  width: 32px;
  height: 32px;
  border: none;
  background: none;
  font-size: 20px;
  color: var(--text-secondary);
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  border-radius: var(--r-sm);
  transition: background var(--t-fast), color var(--t-fast);
}

.qty-btn:hover { background: var(--wine-faint); color: var(--wine); }

.qty-number {
  min-width: 28px;
  text-align: center;
  font-size: 16px;
  font-weight: 500;
  font-family: var(--font-body);
  color: var(--text-primary);
}

@media (max-width: 767px) {
  .product-main-img {
    min-height: 320px;
    max-height: 380px;
    padding: var(--space-5) var(--space-4);
  }
  .product-main-img img {
    max-height: 300px;
  }
}

.product-image-wrap {
  background: linear-gradient(180deg, var(--warm-50) 0%, var(--warm-100) 100%);
  border-radius: var(--r-lg);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: var(--space-12);
  min-height: 480px;
  position: relative;
  border: 1px solid var(--cream-deep);
}

.product-image-wrap img {
  max-height: 460px;
  object-fit: contain;
  filter: drop-shadow(0 20px 40px rgba(26,18,8,.15));
}

.product-badges { display: flex; flex-wrap: wrap; gap: var(--space-2); margin-bottom: var(--space-4); }
.product-varietal {
  font-size: 10px;
  font-weight: 500;
  letter-spacing: 3px;
  text-transform: uppercase;
  color: var(--gold-dim);
  margin-bottom: var(--space-2);
}

.product-bodega {
  font-size: 15px;
  color: var(--text-muted);
  margin-bottom: var(--space-2);
  font-style: italic;
  font-family: var(--font-display);
}

.product-name {
  font-family: var(--font-display);
  font-size: clamp(32px, 5vw, 48px);
  font-weight: 400;
  font-style: italic;
  color: var(--wine-deep);
  line-height: 1.1;
  margin-bottom: var(--space-4);
}

.product-price-wrap { margin-bottom: var(--space-6); }

.product-price {
  font-family: var(--font-body);
  font-size: 52px;
  font-weight: 400;
  color: var(--wine-deep);
  line-height: 1;
  font-style: bold;
}

.product-price-old {
  font-size: 18px;
  color: var(--text-muted);
  text-decoration: line-through;
  font-family: var(--font-body);
}

.product-price-oferta {
  color: #c0392b;
}

.product-desc {
  font-size: 15px;
  line-height: 1.75;
  color: var(--text-secondary);
  margin-bottom: var(--space-8);
  padding-bottom: var(--space-8);
  border-bottom: 1px solid var(--cream-deep);
}

.product-actions {
  display: flex;
  gap: var(--space-3);
  flex-wrap: wrap;
  margin-bottom: var(--space-6);
}

.product-add-btn {
  flex: 1;
  min-width: 180px;
  height: 54px;
  background: var(--wine);
  color: var(--white);
  border: none;
  border-radius: var(--r-sm);
  font-family: var(--font-body);
  font-size: 13px;
  font-weight: 500;
  letter-spacing: 2px;
  text-transform: uppercase;
  cursor: pointer;
  transition: all var(--t-base);
}

.product-add-btn:hover {
  background: var(--wine-light);
  transform: translateY(-1px);
  box-shadow: var(--shadow-wine);
}

.product-fav-btn {
  width: 54px;
  height: 54px;
  border-radius: var(--r-sm);
  background: var(--white);
  border: 1px solid var(--cream-deep);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 20px;
  cursor: pointer;
  color: var(--warm-400);
  flex-shrink: 0;
  transition: all var(--t-base);
}

.product-fav-btn:hover { border-color: var(--wine); color: var(--wine); }
.product-fav-btn.active { color: var(--wine); border-color: var(--wine); }

.product-wa-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-2);
  height: 48px;
  width: 100%;
  border-radius: var(--r-sm);
  background: transparent;
  border: 1px solid var(--cream-deep);
  font-family: var(--font-body);
  font-size: 13px;
  font-weight: 500;
  letter-spacing: 1px;
  text-transform: uppercase;
  color: var(--text-secondary);
  cursor: pointer;
  text-decoration: none;
  transition: all var(--t-base);
  margin-bottom: var(--space-5);
}

.product-wa-btn:hover { border-color: #25d366; color: #25d366; }

.product-meta-box {
  background: var(--warm-50);
  border-radius: var(--r-md);
  padding: var(--space-5);
  margin-top: var(--space-5);
  border: 1px solid var(--cream-deep);
}

.product-meta-row {
  display: flex;
  justify-content: space-between;
  font-size: 15px;
  padding: var(--space-2) 0;
  border-bottom: 1px solid var(--cream-dark);
}

.product-meta-row:last-child { border-bottom: none; }
.product-meta-label { color: var(--text-secondary); }
.product-meta-value { font-weight: 500; color: var(--text-primary); font-family: var(--font-body); font-style: normal; text-transform: capitalize; }

/* ==========================================================
   CARRITO PAGE
   ========================================================== */

.cart-page {
  max-width: 900px;
  margin: 0 auto;
  padding: var(--space-10) var(--space-5);
}

.cart-title {
  font-family: var(--font-display);
  font-size: 40px;
  font-style: italic;
  color: var(--wine-deep);
  font-weight: 400;
  margin-bottom: var(--space-8);
  padding-bottom: var(--space-6);
  border-bottom: 1px solid var(--cream-deep);
}

.cart-empty {
  text-align: center;
  padding: var(--space-24) 0;
}

.cart-empty-icon { font-size: 64px; display: block; margin-bottom: var(--space-5); opacity: .3; }

.cart-empty h2 {
  font-family: var(--font-display);
  font-size: 28px;
  font-style: italic;
  color: var(--wine-deep);
  font-weight: 400;
  margin-bottom: var(--space-3);
}

.cart-empty p { color: var(--text-muted); margin-bottom: var(--space-6); }

.cart-item {
  display: flex;
  gap: var(--space-5);
  padding: var(--space-5) 0;
  border-bottom: 1px solid var(--cream-dark);
  align-items: flex-start;
}

.cart-item-img {
  width: 80px;
  height: 110px;
  object-fit: contain;
  flex-shrink: 0;
  background: var(--warm-100);
  border-radius: var(--r-sm);
  padding: var(--space-2);
}

.cart-item-info { flex: 1; min-width: 0; }

.cart-item-name {
  font-family: var(--font-display);
  font-size: 18px;
  font-style: italic;
  color: var(--wine-deep);
  font-weight: 400;
  line-height: 1.3;
  margin-bottom: 4px;
}

.cart-item-bodega { font-size: 13px; color: var(--text-muted); margin-bottom: var(--space-3); }

.cart-qty {
  display: flex;
  align-items: center;
  gap: var(--space-2);
}

.cart-qty-btn {
  width: 30px;
  height: 30px;
  border-radius: var(--r-sm);
  border: 1px solid var(--cream-deep);
  background: var(--white);
  font-size: 16px;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  color: var(--text-secondary);
  transition: all var(--t-fast);
}

.cart-qty-btn:hover { border-color: var(--wine); color: var(--wine); }

.cart-qty-val {
  font-size: 16px;
  font-weight: 500;
  min-width: 24px;
  text-align: center;
}

.cart-item-price {
  font-family: var(--font-display);
  font-size: 24px;
  font-style: italic;
  color: var(--wine-deep);
  font-weight: 400;
  white-space: nowrap;
  flex-shrink: 0;
}

.cart-remove {
  background: none;
  border: none;
  font-size: 18px;
  color: var(--text-muted);
  cursor: pointer;
  padding: 4px;
  transition: color var(--t-fast);
  flex-shrink: 0;
}

.cart-remove:hover { color: var(--wine); }

.cart-summary {
  background: var(--warm-50);
  border-radius: var(--r-lg);
  padding: var(--space-6);
  margin-top: var(--space-6);
  border: 1px solid var(--cream-deep);
}

.cart-summary-row {
  display: flex;
  justify-content: space-between;
  font-size: 14px;
  margin-bottom: var(--space-3);
  color: var(--text-secondary);
}

.cart-summary-total {
  font-family: var(--font-display);
  font-size: 28px;
  font-style: italic;
  color: var(--wine-deep);
  font-weight: 500;
  display: flex;
  justify-content: space-between;
  margin-top: var(--space-4);
  padding-top: var(--space-4);
  border-top: 1px solid var(--cream-deep);
}

.cart-checkout-btn {
  width: 100%;
  height: 54px;
  border-radius: var(--r-sm);
  background: var(--wine);
  color: var(--white);
  border: none;
  font-family: var(--font-body);
  font-size: 13px;
  font-weight: 500;
  letter-spacing: 2px;
  text-transform: uppercase;
  cursor: pointer;
  margin-top: var(--space-5);
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-2);
  text-decoration: none;
  transition: all var(--t-base);
}

.cart-checkout-btn:hover {
  background: var(--wine-light);
  transform: translateY(-1px);
  box-shadow: var(--shadow-wine);
}

/* ==========================================================
   FAVORITOS PAGE — igual que carrito en estructura
   ========================================================== */

.favorites-page { max-width: 1100px; margin: 0 auto; padding: var(--space-10) var(--space-5); }
.favorites-title {
  font-family: var(--font-display);
  font-size: 40px;
  font-style: italic;
  color: var(--wine-deep);
  font-weight: 400;
  margin-bottom: var(--space-8);
  padding-bottom: var(--space-6);
  border-bottom: 1px solid var(--cream-deep);
}

/* ==========================================================
   ANIMATIONS
   ========================================================== */

@keyframes fadeIn { from { opacity:0; } to { opacity:1; } }
@keyframes slideUp { from { opacity:0; transform:translateY(20px); } to { opacity:1; transform:translateY(0); } }

.animate-fade { animation: fadeIn .45s ease both; }
.animate-up   { animation: slideUp .45s ease both; }
.card { animation: slideUp .38s ease both; }

.products-grid .card:nth-child(2)  { animation-delay: .05s; }
.products-grid .card:nth-child(3)  { animation-delay: .10s; }
.products-grid .card:nth-child(4)  { animation-delay: .15s; }
.products-grid .card:nth-child(5)  { animation-delay: .20s; }
.products-grid .card:nth-child(6)  { animation-delay: .25s; }
.products-grid .card:nth-child(n+7){ animation-delay: .30s; }

/* ==========================================================
   RESPONSIVE
   ========================================================== */

@media (max-width: 767px) {
  .hero-stats { gap: var(--space-6); }
  .hero-stat-value { font-size: 28px; }
  section { padding: var(--space-12) 0; }
  .product-actions { flex-wrap: wrap; }
  .product-add-btn { flex: 1 1 200px; }
}
/* TITULOS */
h1,
h2,
h3,
.hero-title,
.section-title,
.promo-card-title{

    font-family:
    "Cormorant Garamond",
    serif !important;

}

/* TEXTOS */
body,
p,
a,
button,
input,
label,
.hero-subtitle,
.promo-card-description{

    font-family: var(--font-body) !important;

}
.hero-content{
    display:grid;
    grid-template-columns: 1fr 1fr;
    align-items:center;
    gap:100px;
    
    
}

.hero-logo{
    display:flex;
    justify-content:center;
}

.hero-logo img{
    width:420px;
    max-width:150%;
    height:auto;
}

.hero-description-block{
    max-width:520px;
    
}

.hero-subtitle{
    font-size:22px;
    line-height:1.8;
}
.hero-logo {
    width: 520px;
    max-width: none;
}

.hero-content {
    margin-left: 80px;
}
/* LOGO NAVBAR */

.navbar-logo{
    display:flex;
    align-items:center;
    gap:12px;
    text-decoration:none;
}

.navbar-logo-img{
    width:42px;
    height:42px;
    object-fit:contain;
    flex-shrink:0;
}

.navbar-logo-text{
    display:flex;
    flex-direction:column;
    line-height:1;
}
/* LOGO NAVBAR */

.navbar-logo .logo-main{
    font-family:'Stardos Stencil', serif !important;
    font-size:26px;
    font-weight:700;
    letter-spacing:2px;
    color:#C8A96A;
    text-transform:uppercase;
}

.navbar-logo .logo-sub{
    font-size:9px;
    letter-spacing:3px;
    color:#C8A96A;
}
/* ==========================================================
   MOBILE FIX — overflow horizontal y layout responsive
   Agregar al final de main.css
   ========================================================== */

/* Fix raíz — evita scroll horizontal global */
html, body {
  overflow-x: hidden;
  width: 100%;
}

/* ==========================================================
   HERO — en mobile era un grid de 2 columnas con margin fijo
   ========================================================== */
@media (max-width: 899px) {
  .hero-content {
    display: flex !important;
    flex-direction: column;
    gap: var(--space-8);
    margin-left: 0 !important;
  }

  .hero-logo {
    width: 100% !important;
    max-width: 100% !important;
    justify-content: center;
  }

  .hero-logo img {
    width: 220px !important;
    max-width: 100% !important;
  }

  .hero-description-block {
    max-width: 100%;
  }

  .hero-subtitle {
    font-size: 16px !important;
  }

  .hero-inner {
    padding: var(--space-12) var(--space-5) !important;
    gap: var(--space-8) !important;
  }

  .hero-title {
    font-size: clamp(36px, 10vw, 64px);
  }

  .hero-actions {
    flex-direction: column;
    align-items: stretch;
  }

  .hero-actions .btn {
    width: 100%;
    justify-content: center;
  }

  .hero-stats {
    gap: var(--space-6);
    flex-wrap: wrap;
  }
}

/* ==========================================================
   NAVBAR — en mobile el inner puede desbordar
   ========================================================== */
@media (max-width: 767px) {
  .navbar-inner {
    padding: 0 var(--space-4) !important;
    gap: var(--space-2);
  }

  .navbar-logo .logo-main {
    font-size: 18px !important;
  }

  .navbar-logo .logo-sub {
    display: none;
  }
}

/* ==========================================================
   FILTROS — en mobile: solo ajustes de toolbar
   ========================================================== */
@media (max-width: 767px) {
  .catalog-toolbar {
    flex-direction: column;
    align-items: stretch;
  }

  .catalog-sort select {
    width: 100%;
  }
}

/* ==========================================================
   PROMO CARDS — el grid de 3 col con gap fijo desbordaba
   ========================================================== */
@media (max-width: 767px) {
  .promo-cards {
    grid-template-columns: 1fr !important;
    gap: var(--space-5) !important;
    margin-top: var(--space-10) !important;
    width: 100% !important;
  }

  .promo-card {
    padding: var(--space-5) !important;
  }
}

/* ==========================================================
   PRODUCT PAGE — en mobile el layout debe ser 1 columna
   ========================================================== */
@media (max-width: 767px) {
  .product-layout {
    grid-template-columns: 1fr !important;
  }

  .product-price {
    font-size: 36px !important;
  }

  .product-actions {
    flex-direction: column;
  }

  .product-add-btn {
    width: 100%;
  }
}

/* ==========================================================
   FOOTER — en mobile puede tener items muy anchos
   ========================================================== */
@media (max-width: 599px) {
  .footer-bottom {
    flex-direction: column;
    text-align: center;
    gap: var(--space-2);
  }

  .footer-desc {
    max-width: 100%;
  }
}

/* ==========================================================
   CARRITO / FAVORITOS
   ========================================================== */
@media (max-width: 767px) {
  .cart-page,
  .favorites-page {
    padding: var(--space-6) var(--space-4) !important;
  }

  .cart-item {
    flex-wrap: wrap;
  }

  .cart-item-price {
    font-size: 20px !important;
  }
}
body {
  background-color: var(--warm-100);
}

.page-main {
  background-color: var(--warm-100);
}

.card {
  background: #FDFBF8;
}

.filter-chip {
  background: #FDFBF8;
}

.catalog-sort select {
  background: #FDFBF8;
}
.catalog-header h1 {
  font-family: var(--font-body) !important;
  font-style: normal;
  font-weight: 600;
  letter-spacing: -0.5px;
}
/* ==========================================================
   CATALOG LAYOUT — sidebar de filtros
   ========================================================== */

.catalog-layout {
  display: flex;
  gap: var(--space-8);
  align-items: flex-start;
}

.catalog-sidebar {
  width: 140px;
  flex-shrink: 0;
  position: sticky;
  top: calc(var(--nav-h) + var(--space-5));
}

.catalog-sidebar-title {
  font-size: 9px;
  font-weight: 600;
  letter-spacing: 3px;
  text-transform: uppercase;
  color: var(--text-muted);
  margin-bottom: var(--space-4);
  padding-bottom: var(--space-2);
  border-bottom: 1px solid var(--cream-deep);
}

.catalog-main {
  flex: 1;
  min-width: 0;
}

/* Los chips en sidebar van verticales */
.catalog-sidebar .filters-wrap {
  flex-direction: column;
  flex-wrap: nowrap;
  overflow-x: visible;
  margin-bottom: 0;
}

.catalog-sidebar .filter-chip {
  width: 100%;
  font-size: 10px;
  padding: 6px 10px;
}

/* Botón toggle: oculto en desktop, visible solo en mobile */
.filter-toggle-btn {
  display: none;
}

/* En mobile: dropdown de filtros */
@media (max-width: 767px) {
  .catalog-layout {
    flex-direction: column;
  }
  .catalog-sidebar {
    width: 100% !important;
    position: static;
  }

  /* Botón toggle del dropdown */
  .filter-toggle-btn {
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 100%;
    padding: 10px 14px;
    background: #FDFBF8;
    border: 1px solid var(--cream-deep);
    border-radius: var(--r-sm);
    font-size: 12px;
    font-weight: 600;
    letter-spacing: 1.5px;
    text-transform: uppercase;
    color: var(--text-secondary);
    cursor: pointer;
    transition: all var(--t-base);
  }
  .filter-toggle-btn:hover,
  .filter-toggle-btn.open {
    border-color: var(--wine);
    color: var(--wine);
  }
  .filter-toggle-btn .filter-toggle-arrow {
    transition: transform 0.25s ease;
    font-style: normal;
  }
  .filter-toggle-btn.open .filter-toggle-arrow {
    transform: rotate(180deg);
  }
  .filter-toggle-label {
    display: flex;
    align-items: center;
    gap: 8px;
  }
  .filter-active-name {
    background: var(--wine);
    color: white;
    font-size: 9px;
    padding: 2px 7px;
    border-radius: 20px;
    letter-spacing: 0.5px;
  }

  /* Panel desplegable */
  .catalog-sidebar .filters-wrap {
    display: none !important;
    margin-top: 6px;
    margin-bottom: 0;
    padding: 12px;
    background: #FDFBF8;
    border: 1px solid var(--cream-deep);
    border-radius: var(--r-sm);
  }
  .catalog-sidebar .filters-wrap.open {
    display: grid !important;
    grid-template-columns: 1fr 1fr !important;
    gap: 4px !important;
  }

  .catalog-sidebar .filter-chip {
    width: 100% !important;
    text-align: center !important;
    justify-content: center !important;
    font-size: 11px;
    padding: 9px 8px;
    white-space: nowrap !important;
    overflow: hidden;
    text-overflow: ellipsis;
  }
  .catalog-sidebar .filter-group-title {
    grid-column: 1 / -1;
    margin-top: 10px;
    margin-bottom: 2px;
  }

  /* Chip solitario: único hijo entre dos títulos de grupo */
  .catalog-sidebar .filter-group-title + .filter-chip:has(+ .filter-group-title),
  .catalog-sidebar .filter-group-title + .filter-chip:last-child {
    grid-column: 1 / -1;
  }
}

/* ==========================================================
   CATALOGO V2 — LASPINA WINES
   ========================================================== */

/* Sidebar más angosta */

.catalog-layout{
    gap:24px;
}

.catalog-sidebar{
    width:120px;
    flex-shrink:0;
}

.catalog-sidebar-title{
    font-size:8px;
    letter-spacing:2px;
}

.catalog-sidebar .filter-chip{
    width:100%;
    font-size:9px;
    padding:5px 8px;
    min-height:30px;
    white-space:normal;
    word-break:break-word;
    overflow:hidden;
    box-sizing:border-box;
    text-align:center;
    justify-content:center;
    letter-spacing:0.5px;
}

/* Más espacio para los productos */

.catalog-main{
    flex:1;
    width:100%;
}

/* 5 productos por fila */

.products-grid{
    display:grid !important;
    grid-template-columns:repeat(5,1fr) !important;
    gap:12px !important;
}

/* Desktop mediano */

@media (max-width:1200px){

    .products-grid{
        grid-template-columns:repeat(4,1fr) !important;
    }

}

/* Tablet */

@media (max-width:900px){

    .products-grid{
        grid-template-columns:repeat(3,1fr) !important;
    }

}

/* Mobile */

@media (max-width:600px){

    .products-grid{
        grid-template-columns:repeat(2,1fr) !important;
        gap:10px !important;
    }

    .card-image img{
        transform:scale(1.25) translateY(0) !important;
    }

    /* Badges mobile */
    .badge-container { top: 6px; left: 6px; gap: 4px; }

    .badge-oferta { width: 52px; height: 52px; font-size: 8px; }

    .badge-top-ventas { font-size: 8px; padding: 4px 8px 4px 14px; }

    .badge-nuevo { font-size: 8px; padding: 4px 8px 4px 19px; }
    .badge-nuevo::before { width: 5px; height: 5px; left: 7px; }

    .badge-precio-calidad { width: 46px; height: 46px; }
    .badge-precio-calidad::before { font-size: 6px; }
    .badge-precio-calidad::after { font-size: 6px; }

    .badge-recomendado::before { font-size: 20px; }
    .badge-recomendado::after  { font-size: 7px; padding: 2px 5px; }

    .badge-2x1 { width: 44px; height: 44px; }
    .badge-2x1::before { font-size: 14px; }
    .badge-2x1::after  { font-size: 6px; }

}

/* ==========================================================
   TARJETAS MÁS COMPACTAS
   ========================================================== */

.card{
    border-radius:8px;
}

/* Imagen más baja */

/* =====================================
   FOTO DEL PRODUCTO
   ===================================== */

.card-image{
    height:280px !important;
    overflow:hidden;
    padding:0 !important;

    display:flex;
    align-items:center;
    justify-content:center;

    background:#7a3535;
}

/* transform unificado en el bloque principal arriba */
/* hover */


/* Contenido más compacto */

.card-content{
    padding:12px !important;
}

/* Ocultar varietal */

.card-varietal{
    display:none !important;
}

/* Bodega más chica */

.card-bodega{
    font-size:11px !important;
}

/* Nombre más compacto */

.card-name{
    font-size:16px !important;
    line-height:1.2 !important;
    font-weight:600;
}
/* Footer más chico */

.card-footer{
    padding-top:10px !important;
}

/* Precio más chico */

.card-price{
    font-size:20px !important;
}

/* Precio anterior */

.card-price-old{
    font-size:13px !important;
}

/* Botón agregar */

.btn-add{
    width:40px !important;
    height:40px !important;
    font-size:22px !important;
}

/* Corazón favorito */

.card-fav{
    width:28px;
    height:28px;
    font-size:12px;
}

/* ==========================================================
   CATALOGO MÁS ANCHO
   ========================================================== */

.container{
    max-width:1500px;
}

/* Aprovecha mejor el ancho de pantalla */

@media (min-width:1400px){

    .container{
        max-width:1600px;
    }

}
.suggestion-price{
    font-family: var(--font-body) !important;
    font-size: 14px !important;
    font-weight: 700 !important;
    color: var(--gold-light);
}
.filter-group-title{
    margin-top:18px;
    margin-bottom:8px;

    font-size:11px;
    font-weight:700;
    letter-spacing:.15em;
    text-transform:uppercase;

    color:#7a1617;
}
/* ==========================================================
   MOBILE SEARCH
   ========================================================== */

.mobile-search-btn { display: flex; }

/* ==========================================================
   SHIPPING BANNER — mobile compacto
   ========================================================== */

@media (max-width: 600px) {
  .shipping-banner {
    font-size: 11px;
    padding: var(--space-2) var(--space-2);
    letter-spacing: 0;
    line-height: 1.5;
  }
  .shipping-banner span { margin: 0 2px; }
  .shipping-banner .dot { margin: 0 1px; }
}