/* ══════════════════════════════════════════
   VARIABLES & RESET  (mismo estilo Molucas)
══════════════════════════════════════════ */
*,*::before,*::after{margin:0;padding:0;box-sizing:border-box}
:root {
  --orange: #CC5E08;
  --orange-light: #E87818;
  --green: #3A7020;
  --green-light: #559030;
  --cream: #3A1200;
  --dark: #FFF0E4;
  --dark2: #FFE2C8;
  --warm: #FFD8B4;
  --text-muted: rgba(58,18,0,0.55);
  --saffron: #B06808;
  --turmeric: #BA7008;
  --paprika: #B02818;
  --cardamom: #1A3410;
  --cinnamon: #782A10;
}
html{scroll-behavior:smooth}
body{background:var(--dark);color:var(--cream);font-family:'Nunito',sans-serif;overflow-x:hidden}


/* ── LOADER ── */
#loader{position:fixed;inset:0;background:var(--dark);z-index:10000;display:flex;align-items:center;justify-content:center;flex-direction:column;gap:24px;transition:opacity .8s,visibility .8s}
#loader.hidden{opacity:0;visibility:hidden}
.loader-name{font-family:'Bebas Neue',cursive;font-size:clamp(3rem,8vw,5rem);letter-spacing:.25em;color:var(--orange-light);animation:ldPulse 1.5s ease-in-out infinite}
.loader-sub{font-size:.75rem;letter-spacing:.5em;text-transform:uppercase;color:var(--green-light);opacity:.8}
.loader-bar{width:200px;height:2px;background:rgba(232,130,10,.2);border-radius:2px;overflow:hidden}
.loader-bar-fill{height:100%;background:linear-gradient(to right,var(--orange),var(--green-light));animation:ldFill 2.2s ease forwards}
@keyframes ldFill{from{width:0}to{width:100%}}
@keyframes ldPulse{0%,100%{opacity:1}50%{opacity:.4}}

/* ── PARTICLES ── */
#particles-canvas{position:fixed;top:0;left:0;width:100%;height:100%;pointer-events:none;z-index:1;opacity:.3}

/* ── NAV ── */
nav{position:fixed;top:0;width:100%;z-index:100;padding:16px 60px;display:flex;align-items:center;justify-content:space-between;background:linear-gradient(to bottom,rgba(255,240,228,.97),transparent);transition:padding .4s}
nav.scrolled{padding:12px 60px;background:rgba(255,240,228,.97);backdrop-filter:blur(20px);border-bottom:1px solid rgba(200,102,10,.18)}
.nav-brand{display:flex;align-items:center;gap:12px;text-decoration:none}
.nav-logo-icon{display:flex;align-items:center;justify-content:center;flex-shrink:0}
.nav-logo-icon img{height:45px;width:auto;border-radius:8px;object-fit:cover}
.nav-brand-text{display:flex;flex-direction:column;line-height:1}
.nav-brand-name{font-family:'Bebas Neue',cursive;font-size:1.6rem;letter-spacing:.12em;color:var(--orange-light)}
.nav-brand-tagline{font-size:.6rem;letter-spacing:.3em;text-transform:uppercase;color:var(--green-light);margin-top:2px}
.nav-back{display:flex;align-items:center;gap:8px;color:var(--cream);text-decoration:none;font-size:.78rem;letter-spacing:.18em;text-transform:uppercase;opacity:.65;transition:opacity .3s,color .3s}
.nav-back:hover{opacity:1;color:var(--orange-light)}
.cart-nav-btn{display:flex;align-items:center;gap:8px;background:rgba(200,102,10,.15);border:1px solid rgba(200,102,10,.35);color:var(--orange-light);padding:9px 20px;border-radius:8px;font-size:.8rem;letter-spacing:.1em;text-transform:uppercase;font-weight:700;cursor:pointer;transition:background .3s;font-family:'Nunito',sans-serif;position:relative}
.cart-nav-btn:hover{background:rgba(200,102,10,.3)}
.cart-nav-count{background:var(--orange);color:var(--dark);border-radius:50%;width:20px;height:20px;font-size:.72rem;font-weight:800;display:flex;align-items:center;justify-content:center;animation:cartBounce .4s ease}
@keyframes cartBounce{0%,100%{transform:scale(1)}50%{transform:scale(1.35)}}

/* ── STORE HEADER TITLE ── */
.store-header-title {
  padding: 125px 60px 10px;
  text-align: center;
  position: relative;
  z-index: 2;
}

.page-tag {
  font-size: .75rem;
  letter-spacing: .45em;
  text-transform: uppercase;
  color: var(--saffron);
  display: inline-flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 10px;
  font-weight: 800;
}

.page-tag::before { content: ''; width: 32px; height: 1px; background: var(--saffron); }
.page-tag::after { content: ''; width: 32px; height: 1px; background: var(--saffron); }

.page-title {
  font-family: 'Playfair Display', serif;
  font-size: clamp(2.4rem, 5vw, 4rem);
  font-weight: 900;
  line-height: 1.1;
  margin-bottom: 10px;
  color: var(--cream);
}

.page-title em {
  color: var(--orange-light);
  font-style: italic;
}

.page-desc {
  font-size: 1rem;
  color: var(--text-muted);
  max-width: 580px;
  margin: 0 auto;
  line-height: 1.6;
}

/* ══════════════════════════════════════════
   HERO ADS SECTION (Estilo iHerb)
══════════════════════════════════════════ */
.hero-ads-section {
  padding: 20px 60px 30px;
  max-width: 1560px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: 1.2fr 1fr;
  gap: 20px;
  position: relative;
  z-index: 2;
}

/* ── Banner Principal (Izquierda) ── */
.hero-main-ad {
  background-image: url(../images/banner-prin.png) ;
  background-size: cover;
  background-position: center;
  border: 1px solid rgba(59, 130, 246, 0.25);
  border-radius: 24px;
  padding: 36px 40px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  position: relative;
  overflow: hidden;
  box-shadow: 0 12px 35px rgba(30, 58, 138, 0.06);
  transition: transform .35s, box-shadow .35s;
}

.hero-main-ad:hover {
  transform: translateY(-4px);
  box-shadow: 0 20px 45px rgba(30, 58, 138, 0.12);
}

.hero-main-ad__content {
  flex: 1;
  max-width: 480px;
  z-index: 2;
}

.hero-main-ad__badge {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: rgba(220, 38, 38, 0.1);
  color: #DC2626;
  border: 1px solid rgba(220, 38, 38, 0.25);
  font-size: 0.75rem;
  font-weight: 800;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  padding: 6px 14px;
  border-radius: 20px;
  margin-bottom: 16px;
}

.hero-main-ad__title {
  font-family: 'Playfair Display', serif;
  font-size: clamp(1.8rem, 3.2vw, 2.6rem);
  font-weight: 900;
  color: #0F172A;
  line-height: 1.15;
  margin-bottom: 12px;
}

.hero-main-ad__desc {
  font-size: 0.95rem;
  color: #fff;
  line-height: 1.5;
  margin-bottom: 24px;
}

.hero-main-ad__desc strong {
  color: #ed9d08;
  font-weight: 800;
}

/* ── Reloj Temporizador ── */
.hero-timer-wrap {
  margin-bottom: 28px;
}

.hero-timer-label {
  display: block;
  font-size: 0.8rem;
  font-weight: 700;
  color: #475569;
  margin-bottom: 10px;
  letter-spacing: 0.05em;
}

.hero-timer {
  display: flex;
  align-items: center;
  gap: 10px;
}

.timer-box {
  background: #FFFFFF;
  border: 1px solid rgba(15, 23, 42, 0.12);
  border-radius: 12px;
  padding: 8px 14px;
  display: flex;
  align-items: baseline;
  gap: 4px;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.06);
}

.timer-num {
  font-family: 'Bebas Neue', cursive, sans-serif;
  font-size: 1.8rem;
  line-height: 1;
  color: #DC2626;
  font-weight: 900;
}

.timer-unit {
  font-size: 0.85rem;
  font-weight: 700;
  color: #64748B;
}

.hero-main-ad__btn {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  background: #0F172A;
  color: #FFFFFF;
  font-weight: 800;
  font-size: 0.85rem;
  letter-spacing: 0.08em;
  padding: 14px 28px;
  border-radius: 12px;
  border: none;
  cursor: pointer;
  transition: background .3s, transform .2s, box-shadow .3s;
}

.hero-main-ad__btn:hover {
  background: #2563EB;
  transform: translateY(-2px);
  box-shadow: 0 10px 25px rgba(37, 99, 235, 0.3);
}



/* ── Cuadrícula 2x2 de Anuncios Secundarios (Derecha) ── */
.hero-ads-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  grid-template-rows: 1fr 1fr;
  gap: 16px;
}

.ad-card {
  border-radius: 20px;
  padding: 20px 22px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  position: relative;
  overflow: hidden;
  cursor: pointer;
  transition: transform .35s, box-shadow .35s;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.04);
  border: 1px solid rgba(255, 255, 255, 0.6);
  min-height: 175px;
}

.ad-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 16px 36px rgba(0, 0, 0, 0.09);
}

.ad-card__text {
  z-index: 2;
  max-width: 70%;
}

.ad-card__title {
  font-family: 'Nunito', sans-serif;
  font-size: 1.05rem;
  font-weight: 900;
  color: #0F172A;
  line-height: 1.25;
  margin-bottom: 6px;
}

.ad-card__sub {
  font-size: 0.78rem;
  color: #475569;
  line-height: 1.35;
  font-weight: 600;
}

.ad-card__img-wrap {
  position: absolute;
  bottom: -10px;
  right: -10px;
  width: 100px;
  height: 100px;
  z-index: 1;
  pointer-events: none;
}

.ad-card__img-wrap img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: 50%;
  box-shadow: 0 8px 20px rgba(0, 0, 0, 0.1);
  transition: transform .4s ease;
}

.ad-card:hover .ad-card__img-wrap img {
  transform: scale(1.1) rotate(-3deg);
}

/* ── GRID CONTAINER CON SLIDER & BOTONES ── */
.hero-ads-grid-container {
  position: relative;
  width: 100%;
}

.hero-grid-slider {
  position: relative;
  width: 100%;
  overflow: hidden;
  border-radius: 20px;
}

.grid-page {
  display: grid;
  grid-template-columns: 1fr 1fr;
  grid-template-rows: 1fr 1fr;
  gap: 16px;
  transition: opacity .4s ease, transform .4s ease;
  width: 100%;
}

.grid-page:not(.active) {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  display: grid;
  opacity: 0;
  transform: translateX(30px);
  pointer-events: none;
  visibility: hidden;
  z-index: 1;
}

.grid-page.active {
  position: relative;
  opacity: 1;
  transform: translateX(0);
  visibility: visible;
  z-index: 2;
}

/* Botones flotantes de navegación */
.grid-nav-btn {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  width: 38px;
  height: 38px;
  border-radius: 50%;
  background: #FFFFFF;
  border: 1px solid rgba(0, 0, 0, 0.1);
  color: #0F172A;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  z-index: 10;
  box-shadow: 0 6px 16px rgba(0, 0, 0, 0.15);
  transition: all .25s ease;
  font-size: 1rem;
}

.grid-nav-btn:hover {
  background: #0F172A;
  color: #FFFFFF;
  transform: translateY(-50%) scale(1.1);
}

.grid-nav-btn--prev {
  left: -19px;
}

.grid-nav-btn--next {
  right: -19px;
}

/* Pastilla Indicadora (ej: ► 1/2) */
.grid-page-pill {
  position: absolute;
  bottom: -16px;
  left: 50%;
  transform: translateX(-50%);
  background: rgba(15, 23, 42, 0.85);
  color: #FFFFFF;
  font-size: 0.75rem;
  font-weight: 800;
  letter-spacing: 0.08em;
  padding: 4px 14px;
  border-radius: 20px;
  display: flex;
  align-items: center;
  gap: 5px;
  backdrop-filter: blur(6px);
  z-index: 5;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2);
}

.grid-page-pill i {
  font-size: 0.7rem;
  color: var(--orange-light);
}

/* Estilos Específicos para Tarjetas con 3 Frascos al Centro */
.ad-card--trio-center {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  align-items: flex-start;
  text-align: left;
  padding: 22px;
}

.ad-card--trio-center .ad-card__text {
  max-width: 100%;
  width: 100%;
  z-index: 2;
}

.ad-card__img-trio {
  width: 100%;
  max-width: 220px;
  height: 95px;
  border-radius: 50%;
  margin: 0;
  margin: 6px auto 0;
  object-position: center;
  object-fit: cover;
  z-index: 1;
  filter: drop-shadow(0 8px 18px rgba(0, 0, 0, 0.14));
  transition: transform .4s ease;
}

.ad-card--trio-center:hover .ad-card__img-trio {
  transform: scale(1.08) translateY(-4px);
}

/* Ajustes para fotos inferiores alineadas al borde derecho */
.ad-card__img-wrap--bottom-right {
  position: absolute;
  bottom: 0;
  right: 0;
  width: 135px;
  height: 125px;
  border-radius: 0 0 20px 0;
  overflow: hidden;
  pointer-events: none;
}

.ad-card__img-wrap--bottom-right img {
  width: 100%;
  height: 100%;
  border-radius: 50%;
  object-fit: cover;

}

/* Degradados Radiales Idénticos a la Imagen del Usuario */
.ad-card--discount {
  background: radial-gradient(circle at 50% 120%, #f0abfc 0%, #fae8ff 55%, #fdf4ff 100%);
  border-color: rgba(244, 114, 182, 0.35);
}

.ad-card--herbs {
  background: radial-gradient(circle at 50% 120%, #fdba74 0%, #ffedd5 55%, #fff7ed 100%);
  border-color: rgba(251, 146, 60, 0.35);
}

.ad-card--gourmet {
  background: linear-gradient(135deg, #FAF5FF 0%, #F3E8FF 60%, #E9D5FF 100%);
  border-color: rgba(192, 132, 252, 0.35);
}

.ad-card--recipes {
  background: linear-gradient(135deg, #F0FDFA 0%, #CCFBF1 60%, #99F6E4 100%);
  border-color: rgba(45, 212, 191, 0.35);
}

/* ── DOTS INDICADORES DE SLIDER / PASARELA EN MÓVIL ── */
.hero-ads-dots {
  display: none;
  justify-content: center;
  align-items: center;
  gap: 8px;
  margin: 12px 0 24px;
}

.hero-dot {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: rgba(200, 102, 10, 0.25);
  cursor: pointer;
  transition: all 0.35s ease;
}

.hero-dot.active {
  width: 28px;
  border-radius: 12px;
  background: var(--orange-light);
}

/* Media Queries: Pasarela / Carousel Deslizable para Tablets y Teléfonos */
@media (max-width: 992px) {
  .hero-ads-dots {
    display: flex;
  }

  .hero-ads-section {
    display: flex;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    scroll-behavior: smooth;
    -webkit-overflow-scrolling: touch;
    gap: 16px;
    padding: 10px 24px 20px;
    scrollbar-width: none;
    -ms-overflow-style: none;
  }

  .hero-ads-section::-webkit-scrollbar {
    display: none;
  }

  /* Banner principal = primer slide */
  .hero-main-ad {
    flex: 0 0 88vw;
    max-width: 500px;
    scroll-snap-align: center;
    border-radius: 20px;
    padding: 24px;
  }



  /* Grid Container = segundo slide */
  .hero-ads-grid-container {
    flex: 0 0 88vw;
    max-width: 500px;
    scroll-snap-align: center;
  }

  /* Dentro del grid container las tarjetas se mantienen como grid 2x2 */
  .hero-ads-grid.grid-page.active {
    display: grid;
    grid-template-columns: 1fr 1fr;
    grid-template-rows: 1fr 1fr;
    gap: 10px;
  }

  /* En móvil/tablet el slider de tarjetas se desliza horizontalmente entre páginas */
  .hero-grid-slider {
    display: flex;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    -ms-overflow-style: none;
  }

  .hero-grid-slider::-webkit-scrollbar {
    display: none;
  }

  .hero-grid-slider .grid-page {
    flex: 0 0 100%;
    min-width: 100%;
    position: static;
    visibility: visible;
    opacity: 1;
    transform: none;
    pointer-events: auto;
    scroll-snap-align: center;
  }

  .ad-card {
    min-height: 150px;
  }

  /* Ocultar botones de paginación en móvil si se desea */
  .grid-nav-btn {
    width: 30px;
    height: 30px;
    font-size: 0.8rem;
  }

  .grid-nav-btn--prev { left: -12px; }
  .grid-nav-btn--next { right: -12px; }
}

@media (max-width: 640px) {
  .hero-main-ad {
    flex-direction: column;
    text-align: center;
    padding: 20px;
    flex: 0 0 92vw;
  }
  .hero-main-ad__content {
    max-width: 100%;
  }
  .hero-timer {
    justify-content: center;
  }
  
  .hero-main-ad__title {
    font-size: 1.6rem;
  }
  .hero-ads-grid-container {
    flex: 0 0 92vw;
  }
  .hero-ads-grid.grid-page.active {
    gap: 8px;
  }
  .ad-card {
    min-height: 130px;
    padding: 14px;
  }
  .ad-card__title {
    font-size: 0.9rem;
  }
  .ad-card__sub {
    font-size: 0.7rem;
  }
  .ad-card__img-trio {
    height: 70px;
  }
  .ad-card__img-wrap--bottom-right {
    width: 100px;
    height: 95px;
  }
}

/* ── FIX: Anuncios completos en pantallas < 740px ── */
@media (max-width: 740px) {

  /* Sección principal: apila todo verticalmente, sin scroll horizontal */
  .hero-ads-section {
    display: flex;
    flex-direction: column;
    overflow-x: visible;
    scroll-snap-type: none;
    gap: 16px;
    padding: 10px 16px 20px;
  }

  /* ── Banner Principal: sin imagen, solo texto ── */
  .hero-main-ad {
    flex: none;
    width: 100%;
    max-width: 100%;
    background-image: none !important;
    background: #FFFFFF;
    border: 1px solid rgba(0, 0, 0, 0.08);
    border-radius: 16px;
    padding: 28px 20px;
    flex-direction: column;
    text-align: center;
    align-items: center;
    justify-content: center;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.06);
  }

  .hero-main-ad__content {
    max-width: 100%;
    background: transparent;
    backdrop-filter: none;
    border-radius: 0;
    padding: 0;
  }

  .hero-main-ad__title {
    font-size: clamp(1.3rem, 5vw, 1.8rem);
  }

  .hero-main-ad__desc {
    font-size: 0.85rem;
    color: #334155;
  }

  .hero-main-ad__desc strong {
    color: #DC2626;
  }

  .hero-timer {
    justify-content: center;
  }

  .hero-timer-label {
    text-align: center;
  }

  .hero-main-ad__btn {
    width: 100%;
    justify-content: center;
    padding: 12px 20px;
    font-size: 0.8rem;
  }

  /* ── Grid de anuncios: 1 columna para mostrar imagen completa ── */
  .hero-ads-grid-container {
    flex: none;
    width: 100%;
    max-width: 100%;
  }

  .hero-ads-grid.grid-page.active {
    display: grid;
    grid-template-columns: 1fr 1fr;
    grid-template-rows: auto auto;
    gap: 8px;
  }

  /* Cada ad-card: compacto, imagen completa */
  .ad-card {
    min-height: 120px;
    background-size: cover;
    background-repeat: no-repeat;
    background-position: center;
    border-radius: 12px;
    padding: 10px;
    aspect-ratio: 4 / 3;
  }

  /* Ocultar texto superpuesto en cards que solo tienen imagen de fondo */
  .ad-card--discount .ad-card__text,
  .ad-card--condimentos .ad-card__text,
  .ad-card--cafe .ad-card__text {
    display: none;
  }

  /* Cards con imagen de fondo: completa y compacta */
  .ad-card--discount,
  .ad-card--condimentos,
  .ad-card--cafe {
    background-size: cover !important;
    background-repeat: no-repeat !important;
    background-position: center !important;
  }

  /* Card de recetas */
  .ad-card--recipes {
    aspect-ratio: auto;
    min-height: 100px;
  }

  .ad-card__img-wrap--bottom-right {
    width: 70px;
    height: 65px;
  }

  /* Ocultar dots ya que no hay carousel */
  .hero-ads-dots {
    display: none;
  }

  /* Grid slider: sin scroll horizontal */
  .hero-grid-slider {
    display: block;
    overflow: visible;
  }

  .hero-grid-slider .grid-page {
    position: static;
    visibility: visible;
    opacity: 1;
    transform: none;
    pointer-events: auto;
  }
}

/* ── VIDEO (bajo el hero) ── */
.video-seccion{position:relative;width:100%;max-width:1100px;margin:-20px auto 10px;padding:0 24px;z-index:2}
.video-seccion__mp4{width:100%;display:block;border-radius:16px;box-shadow:0 25px 60px rgba(58,18,0,.25);object-fit:cover;max-height:500px}
.video-seccion__overlay{position:absolute;inset:0;border-radius:16px;background:linear-gradient(to bottom,rgba(58,18,0,.12),rgba(58,18,0,.35));pointer-events:none}
@media(max-width:800px){
  .video-seccion{display:none}
}

/* ── FILTROS ── */
.filtros-bar{display:flex;align-items:center;justify-content:space-between;padding:0 60px 40px;position:relative;z-index:2;flex-wrap:wrap;gap:16px}
.filtros-chips{display:flex;gap:10px;flex-wrap:wrap}
.chip{padding:8px 20px;border:1px solid rgba(200,102,10,.25);border-radius:20px;font-size:.76rem;letter-spacing:.12em;text-transform:uppercase;color:var(--text-muted);cursor:pointer;transition:all .3s;background:transparent;font-family:'Nunito',sans-serif}
.chip:hover,.chip.active{border-color:var(--orange);color:var(--orange-light);background:rgba(200,102,10,.1)}
.search-box{display:flex;align-items:center;gap:10px;background:rgba(58,18,0,0.05);border:1px solid rgba(200,102,10,.2);border-radius:8px;padding:10px 16px}
.search-box input{background:transparent;border:none;outline:none;color:var(--cream);font-family:'Nunito',sans-serif;font-size:.9rem;width:220px}
.search-box input::placeholder{color:var(--text-muted)}

/* ── GRID PRODUCTOS ── */
.tienda-wrap{display:grid;grid-template-columns:1fr 380px;gap:40px;padding:0 60px 100px;max-width:1600px;margin:0 auto;position:relative;z-index:2}
.productos-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(250px,1fr));gap:20px;align-content:start}

/* ── CARD PRODUCTO ── */
.prod-img-wrap img {
  opacity: 1;
  transform: scale(1);
  transition: opacity 0.25s ease-in-out, transform 0.25s ease-in-out !important;
  will-change: opacity, transform;
}

/* Estado durante el cambio de imagen */
.prod-img-wrap img.changing-img {
  opacity: 0 !important;
  transform: scale(0.96) !important;
}

.prod-card-tienda{background:rgba(58,18,0,0.04);border:1px solid rgba(200,102,10,.14);border-radius:14px;overflow:hidden;transition:transform .35s,border-color .35s,box-shadow .35s;position:relative}
.prod-card-tienda:hover{transform:translateY(-6px);border-color:rgba(200,102,10,.45);box-shadow:0 20px 60px rgba(200,102,10,.2)}
.prod-img-wrap{aspect-ratio:1/1;background:linear-gradient(145deg,rgba(200,102,10,.12),rgba(200,102,10,.25));display:flex;align-items:center;justify-content:center;position:relative;overflow:hidden}
.prod-img-wrap img{width:100%;height:100%;object-fit:cover;transition:transform .5s}
.prod-card-tienda:hover .prod-img-wrap img{transform:scale(1.07)}
.prod-img-placeholder{font-size:4rem;opacity:.6}
.prod-estado-badge{position:absolute;top:12px;left:12px;padding:4px 12px;border-radius:20px;font-size:.65rem;letter-spacing:.15em;text-transform:uppercase;font-weight:700}
.badge-disponible{background:rgba(74,124,47,.7);color:#b8f0a0;border:1px solid rgba(107,160,72,.5)}
.badge-agotado{background:rgba(192,57,43,.7);color:#ffb0a8;border:1px solid rgba(192,57,43,.5)}
.prod-origen{position:absolute;top:12px;right:12px;background:rgba(255,240,228,.88);border:1px solid rgba(232,160,48,.3);padding:3px 10px;border-radius:10px;font-size:.65rem;letter-spacing:.1em;text-transform:uppercase;color:var(--saffron);backdrop-filter:blur(8px)}
.prod-body{padding:20px}
.prod-nombre{font-family:'Playfair Display',serif;font-size:1.15rem;font-weight:700;margin-bottom:6px;color:var(--cream)}
.prod-desc-short{font-size:.82rem;color:#3A1200;line-height:1.6;margin-bottom:12px;display:-webkit-box; -webkit-line-clamp:2;line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.prod-meta{display:flex;align-items:center;justify-content:space-between;margin-bottom:14px}
.prod-precio{font-family:'Bebas Neue',cursive;font-size:1.6rem;color:var(--orange-light);letter-spacing:.06em}
.prod-peso{font-size:.75rem;color:var(--text-muted);letter-spacing:.1em}
.prod-onza-row{display:flex;flex-direction:column;align-items:flex-end;gap:3px}
.prod-onza-label{font-size:.62rem;letter-spacing:.15em;text-transform:uppercase;color:var(--text-muted)}
.prod-onza-select-wrap{position:relative;display:inline-block}
.prod-onza-select-wrap>i{position:absolute;right:10px;top:50%;transform:translateY(-50%);color:var(--orange-light);opacity:.6;font-size:.55rem;pointer-events:none}
.prod-onza-select{
  appearance:none;-webkit-appearance:none;-moz-appearance:none;
  background:rgba(58,18,0,0.05);border:1px solid rgba(200,102,10,.22);
  border-radius:8px;color:var(--cream);font-family:'Nunito',sans-serif;
  font-size:.78rem;font-weight:700;padding:7px 28px 7px 12px;cursor:pointer;
  outline:none;transition:border-color .25s,box-shadow .25s;
}
.prod-onza-select:hover{border-color:rgba(200,102,10,.5)}
.prod-onza-select:focus{border-color:var(--orange-light);box-shadow:0 0 0 3px rgba(200,102,10,.12)}
.prod-onza-select option{background:#FFF0E4;color:#3A1200}
.cart-item-onzas{font-size:.68rem;color:var(--text-muted);font-weight:600}
.prod-stock-bar-wrap{margin-bottom:14px}
.prod-stock-label{font-size:.68rem;letter-spacing:.15em;text-transform:uppercase;color:var(--text-muted);margin-bottom:5px}
.prod-stock-bar{height:4px;background:rgba(58,18,0,0.07);border-radius:2px;overflow:hidden}
.prod-stock-fill{height:100%;border-radius:2px;background:linear-gradient(to right,var(--green),var(--green-light));transition:width .6s}
.prod-stock-fill.low{background:linear-gradient(to right,#C0392B,#E74C3C)}
.prod-qty-row{display:flex;align-items:center;gap:10px;margin-bottom:14px}
.qty-label{font-size:.72rem;letter-spacing:.15em;text-transform:uppercase;color:var(--text-muted)}
.qty-ctrl{display:flex;align-items:center;gap:0;background:rgba(58,18,0,0.06);border:1px solid rgba(200,102,10,.2);border-radius:8px;overflow:hidden}
.qty-btn{width:32px;height:32px;background:transparent;border:none;color:var(--orange-light);font-size:1.1rem;cursor:pointer;transition:background .2s;font-family:'Nunito',sans-serif;font-weight:800}
.qty-btn:hover{background:rgba(200,102,10,.2)}
.qty-num{width:36px;text-align:center;font-size:.9rem;font-weight:700;color:var(--cream);border:none;background:transparent;outline:none;font-family:'Nunito',sans-serif}
.btn-agregar{width:100%;padding:12px;background:linear-gradient(135deg,var(--orange),var(--orange-light));color:var(--dark);font-weight:800;font-size:.82rem;letter-spacing:.18em;text-transform:uppercase;border:none;border-radius:8px;cursor:pointer;transition:transform .25s,box-shadow .25s;font-family:'Nunito',sans-serif;display:flex;align-items:center;justify-content:center;gap:8px}
.btn-agregar:hover{transform:translateY(-2px);box-shadow:0 10px 30px rgba(200,102,10,.4)}
.btn-agregar:disabled{background:rgba(58,18,0,0.07);color:var(--text-muted);cursor:not-allowed;transform:none;box-shadow:none}
.prod-card-tienda.agotado .prod-img-wrap::after{content:'AGOTADO';position:absolute;inset:0;background:rgba(26,15,0,.65);display:flex;align-items:center;justify-content:center;font-family:'Bebas Neue',cursive;font-size:2rem;letter-spacing:.3em;color:rgba(255,255,255,.5)}

/* ── CARRITO SIDEBAR ── */
.carrito-sidebar{position:sticky;top:100px;height:fit-content;max-height:calc(100vh - 120px);display:flex;flex-direction:column;background:#FFF0E4;border:1px solid rgba(200,102,10,.18);border-radius:16px;overflow:hidden}
.carrito-header{padding:22px 24px;background:linear-gradient(135deg,var(--orange),#7A3805);display:flex;align-items:center;justify-content:space-between}
.carrito-title{font-family:'Bebas Neue',cursive;font-size:1.5rem;letter-spacing:.2em;color:white}
.carrito-count-badge{background:rgba(58,18,0,0.12);color:white;padding:4px 12px;border-radius:20px;font-size:.78rem;font-weight:700;letter-spacing:.1em}
.carrito-body{flex:1;overflow-y:auto;padding:16px}
.carrito-vacio{text-align:center;padding:40px 20px;color:var(--text-muted)}
.carrito-vacio-icon{font-size:3.5rem;display:block;margin-bottom:12px;opacity:.5}
.carrito-vacio p{font-size:.9rem;line-height:1.7}
.cart-item{display:grid;grid-template-columns:auto 1fr auto;gap:12px;align-items:center;padding:14px 0;border-bottom:1px solid rgba(200,102,10,.1)}
.cart-item:last-child{border-bottom:none}
.cart-item-img{width:52px;height:52px;border-radius:8px;background:rgba(200,102,10,.1);display:flex;align-items:center;justify-content:center;font-size:1.5rem;overflow:hidden;flex-shrink:0}
.cart-item-img img{width:100%;height:100%;object-fit:cover}
.cart-item-nombre{font-size:.88rem;font-weight:700;color:var(--cream);margin-bottom:3px;line-height:1.3}
.cart-item-sub{font-size:.75rem;color:var(--text-muted)}
.btn-cambiar-oz{display:inline-flex;align-items:center;gap:5px;background:rgba(200,102,10,.09);border:1px solid rgba(200,102,10,.25);color:var(--orange);font-family:'Nunito',sans-serif;font-size:.72rem;font-weight:700;letter-spacing:.04em;padding:3px 8px;border-radius:6px;cursor:pointer;margin-top:5px;transition:all .2s ease}
.btn-cambiar-oz:hover{background:var(--orange);color:#fff;border-color:var(--orange);transform:translateY(-1px);box-shadow:0 3px 8px rgba(204,94,8,.25)}
.btn-cambiar-oz i{font-size:.8rem;transition:transform .3s ease}
.btn-cambiar-oz:hover i{transform:rotate(180deg)}
.cart-item-right{text-align:right}
.cart-item-precio{font-family:'Bebas Neue',cursive;font-size:1.2rem;color:var(--orange-light);letter-spacing:.05em;display:block}
.cart-item-del{background:none;border:none;color:rgba(192,57,43,.7);cursor:pointer;font-size:.85rem;padding:2px 4px;border-radius:4px;transition:color .2s,background .2s;margin-top:2px}
.cart-item-del:hover{color:#E74C3C;background:rgba(192,57,43,.1)}
.carrito-footer{padding:18px 24px;border-top:1px solid rgba(200,102,10,.15);background:#FFE2C8}
.total-row{display:flex;justify-content:space-between;align-items:center;margin-bottom:16px}
.total-label{font-size:.8rem;letter-spacing:.2em;text-transform:uppercase;color:var(--text-muted)}
.total-valor{font-family:'Bebas Neue',cursive;font-size:2rem;color:var(--orange-light);letter-spacing:.06em}
.alerta-minimo{display:flex;align-items:center;justify-content:space-between;gap:10px;background:#FFF4E8;border:1px solid rgba(204,94,8,0.3);border-left:4px solid var(--orange);border-radius:10px;padding:10px 12px;margin-bottom:14px;box-shadow:0 3px 10px rgba(204,94,8,0.08);animation:fadeInMinimo 0.25s ease-out}
@keyframes fadeInMinimo{from{opacity:0;transform:translateY(-4px)}to{opacity:1;transform:translateY(0)}}
.alerta-minimo-content{display:flex;align-items:center;gap:9px;flex:1;min-width:0}
.alerta-minimo-icon{font-size:1.15rem;color:var(--orange);flex-shrink:0;display:flex;align-items:center}
.alerta-minimo-texto{font-size:0.82rem;line-height:1.35;color:var(--cream);font-weight:600}
.alerta-minimo-texto strong{color:var(--orange);font-weight:800}
.alerta-minimo-cerrar{background:transparent;border:none;color:rgba(58,18,0,0.45);cursor:pointer;padding:4px 6px;display:flex;align-items:center;justify-content:center;border-radius:6px;font-size:0.82rem;transition:all 0.2s ease;flex-shrink:0}
.alerta-minimo-cerrar:hover{color:var(--paprika);background:rgba(176,40,24,0.12)}
.btn-comprar{width:100%;padding:15px;background:linear-gradient(135deg,#25D366,#128C7E);color:white;font-weight:800;font-size:.88rem;letter-spacing:.18em;text-transform:uppercase;border:none;border-radius:8px;cursor:pointer;transition:transform .25s,box-shadow .25s;font-family:'Nunito',sans-serif;display:flex;align-items:center;justify-content:center;gap:10px;margin-bottom:10px}
.btn-comprar:hover{transform:translateY(-2px);box-shadow:0 12px 35px rgba(37,211,102,.35)}
.btn-comprar:disabled{background:rgba(58,18,0,0.07);color:var(--text-muted);cursor:not-allowed;transform:none;box-shadow:none}
.btn-limpiar{width:100%;padding:10px;background:transparent;border:1px solid rgba(200,102,10,.25);color:var(--text-muted);font-size:.75rem;letter-spacing:.15em;text-transform:uppercase;border-radius:6px;cursor:pointer;transition:all .3s;font-family:'Nunito',sans-serif}
.btn-limpiar:hover{border-color:var(--paprika);color:#E74C3C}

/* ── TOAST ── */
.toast{position:fixed;bottom:30px;left:50%;transform:translateX(-50%) translateY(80px);background:rgba(58,18,0,.92);border:1px solid rgba(200,102,10,.4);color:#FFF0E4;padding:14px 26px;border-radius:10px;font-size:.88rem;z-index:9000;opacity:0;transition:opacity .4s,transform .4s;backdrop-filter:blur(12px);white-space:nowrap}
.toast.show{opacity:1;transform:translateX(-50%) translateY(0)}
.toast.success{border-color:rgba(74,124,47,.6)}
.toast.error{border-color:rgba(192,57,43,.6)}

/* ── MODAL CONFIRMACIÓN ── */
.modal-overlay{position:fixed;inset:0;background:rgba(58,18,0,.7);backdrop-filter:blur(10px);z-index:5000;display:flex;align-items:center;justify-content:center;opacity:0;visibility:hidden;transition:opacity .4s,visibility .4s}
.modal-overlay.open{opacity:1;visibility:visible}
.modal-box{background:linear-gradient(145deg,#FFE2C8,#FFF0E4);border:1px solid rgba(200,102,10,.3);border-radius:20px;padding:40px;max-width:480px;width:90%;text-align:center}
.modal-icon{font-size:3.5rem;margin-bottom:16px;display:block}
.modal-title{font-family:'Playfair Display',serif;font-size:1.8rem;font-weight:700;margin-bottom:10px}
.modal-title em{color:var(--saffron);font-style:italic}
.modal-body{font-size:.92rem;color:var(--text-muted);line-height:1.8;margin-bottom:24px}
.modal-resumen{background:rgba(200,102,10,.07);border:1px solid rgba(200,102,10,.2);border-radius:10px;padding:16px;margin-bottom:24px;text-align:left;max-height:220px;overflow-y:auto}
.modal-item{display:flex;justify-content:space-between;padding:6px 0;border-bottom:1px solid rgba(200,102,10,.08);font-size:.85rem}
.modal-item:last-child{border-bottom:none;font-weight:800;color:var(--orange-light);font-size:.95rem}
.modal-btns{display:flex;gap:12px}
.modal-btn-wa{flex:1;padding:14px;background:linear-gradient(135deg,#25D366,#128C7E);color:white;font-weight:800;font-size:.85rem;letter-spacing:.15em;text-transform:uppercase;border:none;border-radius:8px;cursor:pointer;font-family:'Nunito',sans-serif;transition:transform .25s}
.modal-btn-wa:hover{transform:translateY(-2px)}
.modal-btn-close{padding:14px 20px;background:transparent;border:1px solid rgba(200,102,10,.3);color:var(--text-muted);font-size:.82rem;letter-spacing:.1em;text-transform:uppercase;border-radius:8px;cursor:pointer;font-family:'Nunito',sans-serif;transition:all .3s}
.modal-btn-close:hover{border-color:var(--orange);color:var(--orange-light)}


/* ── MODAL CAMBIAR OZ ── */
.modal-box-oz{max-width:490px;width:92%;padding:26px 24px;position:relative;text-align:left;border-radius:18px;box-shadow:0 25px 60px rgba(58,18,0,.45);max-height:90vh;display:flex;flex-direction:column;background:linear-gradient(145deg,#FFE2C8,#FFF0E4);border:1px solid rgba(200,102,10,.3)}
.modal-close-btn{position:absolute;top:16px;right:16px;background:rgba(58,18,0,.08);border:none;width:32px;height:32px;border-radius:50%;display:flex;align-items:center;justify-content:center;color:var(--cream);cursor:pointer;font-size:.95rem;transition:all .2s ease;z-index:2}
.modal-close-btn:hover{background:var(--paprika);color:#fff;transform:rotate(90deg)}
.modal-oz-header{display:flex;align-items:center;gap:14px;margin-bottom:16px;padding-right:32px}
.modal-oz-icon-badge{width:46px;height:46px;border-radius:12px;background:linear-gradient(135deg,rgba(204,94,8,.18),rgba(204,94,8,.06));border:1px solid rgba(204,94,8,.25);color:var(--orange);font-size:1.35rem;display:flex;align-items:center;justify-content:center;flex-shrink:0}
.modal-oz-title{font-family:'Playfair Display',serif;font-size:1.35rem;font-weight:700;color:var(--cream);line-height:1.2;margin:0}
.modal-oz-subtitle{font-size:.8rem;color:var(--text-muted);margin-top:3px}

.modal-oz-current-item{display:flex;align-items:center;gap:12px;background:rgba(200,102,10,.08);border:1px dashed rgba(200,102,10,.3);border-radius:12px;padding:11px 14px;margin-bottom:16px}
.modal-oz-curr-img{width:48px;height:48px;border-radius:8px;object-fit:cover;background:rgba(200,102,10,.12);flex-shrink:0}
.modal-oz-curr-img-ph{width:48px;height:48px;border-radius:8px;background:rgba(200,102,10,.12);display:flex;align-items:center;justify-content:center;font-size:1.3rem;color:var(--orange);flex-shrink:0}

.modal-oz-curr-info{flex:1;min-width:0}
.modal-oz-curr-nombre{font-size:.92rem;font-weight:700;color:var(--cream);line-height:1.25;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.modal-oz-curr-badge{display:flex;align-items:center;gap:6px;font-size:.78rem;color:var(--orange);font-weight:600;margin-top:3px;line-height:1.3}
.modal-oz-curr-badge span{display:inline;white-space:normal}
.modal-oz-curr-badge strong{color:var(--orange);font-weight:800}
.modal-oz-options-label{font-size:.76rem;letter-spacing:.12em;text-transform:uppercase;color:var(--text-muted);font-weight:700;margin-bottom:10px}
.modal-oz-list{display:flex;flex-direction:column;gap:11px;overflow-y:auto;max-height:350px;padding-right:4px}
.modal-oz-card{display:flex;flex-direction:column;gap:10px;background:#FFFDF9;border:1px solid rgba(200,102,10,.2);border-radius:14px;padding:13px 15px;transition:all .22s ease}
.modal-oz-card:not(.disabled):not(.is-current):hover{border-color:var(--orange);background:#FFF9F3;transform:translateY(-2px);box-shadow:0 6px 16px rgba(204,94,8,.12)}
.modal-oz-card.is-current{background:rgba(58,112,32,.06);border:1.5px solid rgba(58,112,32,.35)}
.modal-oz-card.disabled{opacity:.6;background:rgba(58,18,0,.04);border-color:rgba(58,18,0,.1);cursor:not-allowed}
.modal-oz-card-header{display:flex;align-items:center;justify-content:space-between;flex-wrap:wrap;gap:8px}
.modal-oz-card-title{display:flex;align-items:center;flex-wrap:wrap;gap:8px}
.modal-oz-badge-oz{font-family:'Bebas Neue',cursive;font-size:1.35rem;color:var(--orange);letter-spacing:.04em;line-height:1}
.modal-oz-card-price{font-size:.85rem;color:var(--cream);font-weight:700;background:rgba(200,102,10,.08);padding:3px 8px;border-radius:6px;display:inline-block;white-space:nowrap}
.modal-oz-badge-actual{font-size:.7rem;background:rgba(58,112,32,.15);color:var(--green);padding:3px 8px;border-radius:6px;font-weight:800;letter-spacing:.05em;display:inline-flex;align-items:center;gap:4px}
.modal-oz-card-stock{font-size:.75rem;display:flex;align-items:center;gap:5px;white-space:nowrap}.modal-oz-card-stock.in-stock{color:var(--green);font-weight:700}
.modal-oz-card-stock.low-stock{color:#D35400;font-weight:800}
.modal-oz-card-stock.out-of-stock{color:var(--paprika);font-weight:700}
.modal-oz-card-aviso{width:100%;font-size:.78rem;line-height:1.42;color:#B02818;background:#FFF0ED;padding:9px 12px;border-radius:8px;border-left:3.5px solid #B02818;font-weight:600;box-sizing:border-box}
.modal-oz-card-btn-wrap{width:100%}
.modal-oz-btn-action{width:100%;padding:10px 16px;border:none;border-radius:8px;font-family:'Nunito',sans-serif;font-weight:800;font-size:.82rem;letter-spacing:.05em;text-transform:uppercase;cursor:pointer;transition:all .2s ease;display:flex;align-items:center;justify-content:center;gap:6px}

.modal-oz-btn-action.btn-select{background:linear-gradient(135deg,var(--orange),var(--orange-light));color:white;box-shadow:0 4px 12px rgba(204,94,8,.25)}
.modal-oz-btn-action.btn-select:hover{transform:translateY(-1px);box-shadow:0 6px 16px rgba(204,94,8,.35)}
.modal-oz-btn-action.btn-current{background:rgba(58,112,32,.12);color:var(--green);cursor:default}
.modal-oz-btn-action.btn-disabled{background:rgba(58,18,0,.08);color:var(--text-muted);cursor:not-allowed}
/* ── LOADING STATE ── */
.skeleton{background:linear-gradient(90deg,rgba(58,18,0,0.04) 25%,rgba(58,18,0,0.07) 50%,rgba(58,18,0,0.04) 75%);background-size:400% 100%;animation:shimmer 1.6s infinite;border-radius:8px}
@keyframes shimmer{0%{background-position:100% 0}100%{background-position:-100% 0}}
.no-results{grid-column:1/-1;text-align:center;padding:60px 20px;color:var(--text-muted)}
.no-results-icon{font-size:3rem;display:block;margin-bottom:12px;opacity:.5}

/* ── RESPONSIVE ── */
@media(max-width:1100px){
  /* El grid pone productos PRIMERO, carrito SEGUNDO */
  .tienda-wrap{
    grid-template-columns:1fr;
    grid-template-rows:auto auto;
    padding:0 24px 80px;
  }
  /* Fuerza el grid a ir primero */
  .productos-grid{ order:1; }
  .carrito-sidebar{ order:2; }

  /* Carrito: panel deslizante desde abajo, pantalla completa */
  .carrito-sidebar{
    position:fixed;
    bottom:0; left:0; right:0; top:auto;
    /* Altura: cubre ~85% de la pantalla al abrirse */
    max-height:85dvh;
    border-radius:16px 16px 0 0;
    transform:translateY(100%);
    transition:transform .4s cubic-bezier(.4,0,.2,1);
    z-index:500;
    display:flex;
    flex-direction:column;
    overflow:hidden; /* evita scroll en el panel completo */
  }
  .carrito-sidebar.open{ transform:translateY(0); }
  
  .carrito-header{
    padding:14px 18px;
  }
  .carrito-title{
    font-size:1.2rem;
  }

  /* Body del carrito en móvil: fijo sin scroll cuando está vacío, padding compacto */

  
  .carrito-body{
    flex:1;
    overflow-y:auto;
    -webkit-overflow-scrolling:touch;
    padding: 10px 18px;
    overscroll-behavior: contain;
    
  }

  /* El footer no scrollea y se mantiene compacto */
  .carrito-footer{
    flex-shrink: 0;
    flex-shrink:0;
    background:#FFE2C8;
    border-top:1px solid rgba(200,102,10,.18);
  }
  
  .total-row{
    margin-bottom:8px;
  }
  .total-label{
    font-size:.72rem;
  }
  .total-valor{
    font-size:1.6rem;
  }
  .alerta-minimo{
    padding:8px 10px;
    margin-bottom:8px;
    border-radius:8px;
    gap:8px;
  }
  .alerta-minimo-icon{
    font-size:1rem;
  }
  .alerta-minimo-texto{
    font-size:.76rem;
    line-height:1.25;
  }
  .alerta-minimo-cerrar{
    padding:2px 4px;
    font-size:.75rem;
  }
  .btn-comprar{
    padding:12px 14px;
    font-size:.82rem;
    margin-bottom:6px;
    border-radius:7px;
  }
  .btn-limpiar{
    padding:6px;
    font-size:.7rem;
    border-radius:5px;
  }

  /* Modal Cambiar Oz en móvil */
  .modal-box-oz{
    padding:20px 16px;
    max-height:85vh;
  }
  .modal-oz-list{
    max-height:260px;
  }
  .modal-oz-card{
    padding:10px 12px;
  }
  .modal-oz-btn-action{
    padding:8px 12px;
    font-size:.75rem;
  }

  .filtros-bar{padding:0 24px 30px}
  nav{padding:14px 24px}
  nav.scrolled{padding:10px 24px}
  .page-hero{padding:110px 24px 40px}
}

@media(max-width:640px){
  .productos-grid{grid-template-columns:1fr 1fr}
  .search-box input{width:140px}
}
@media(max-width:420px){
  .productos-grid{grid-template-columns:1fr}
}

/* ── BOTÓN CERRAR CARRITO (solo móvil) ── */
.carrito-close-btn{
  display:none;
}
@media(max-width:1100px){
  .carrito-close-btn{
    display:flex;
    align-items:center;
    justify-content:center;
    background:rgba(58,18,0,0.1);
    border:none;
    color:white;
    width:32px; height:32px;
    border-radius:50%;
    font-size:1.1rem;
    cursor:pointer;
    transition:background .2s;
    font-family:'Nunito',sans-serif;
    font-weight:800;
    flex-shrink:0;
  }
  .carrito-close-btn:hover{ background:rgba(58,18,0,0.15); }
}

/* ══════════════════════════════════════════════════════
   FORMULARIO DE ENVÍO — MODAL PREMIUM
══════════════════════════════════════════════════════ */

/* Overlay */
#modalEnvio{z-index:6000}
#modalEnvio .envio-modal{
  background:linear-gradient(165deg,#FFE2C8 0%,#FFF0E4 40%,#FFF0E4 100%);
  border:1px solid rgba(200,102,10,.25);
  border-radius:20px;
  width:95%;
  max-width:640px;
  max-height:90vh;
  display:flex;
  flex-direction:column;
  overflow:hidden;
  box-shadow:0 40px 100px rgba(0,0,0,.8),0 0 80px rgba(200,102,10,.15);
  animation:envioSlideUp .45s cubic-bezier(.23,1,.32,1);
}

@keyframes envioSlideUp{
  from{opacity:0;transform:translateY(40px) scale(.97)}
  to{opacity:1;transform:translateY(0) scale(1)}
}

/* Header */
.envio-header{
  display:flex;align-items:center;justify-content:space-between;
  padding:22px 28px;
  background:linear-gradient(135deg,rgba(200,102,10,.15),rgba(74,124,47,.08));
  border-bottom:1px solid rgba(200,102,10,.15);
  flex-shrink:0;
}
.envio-header-left{display:flex;align-items:center;gap:14px}
.envio-header-left>i{font-size:1.8rem;color:var(--orange-light);opacity:.9}
.envio-title{font-family:'Playfair Display',serif;font-size:1.35rem;font-weight:700;color:var(--cream);margin:0;line-height:1.2}
.envio-subtitle{font-size:.75rem;color:var(--text-muted);margin:2px 0 0;letter-spacing:.05em}
.envio-close{
  width:36px;height:36px;border-radius:50%;
  background:rgba(58,18,0,0.06);
  border:1px solid rgba(58,18,0,0.09);
  color:var(--text-muted);font-size:1rem;
  display:flex;align-items:center;justify-content:center;
  cursor:pointer;transition:all .25s;flex-shrink:0;
}
.envio-close:hover{background:rgba(192,57,43,.2);border-color:rgba(192,57,43,.4);color:#E74C3C}

/* Steps Progress */
.envio-steps{
  display:flex;align-items:center;justify-content:center;
  gap:0;padding:20px 28px 16px;flex-shrink:0;
}
.envio-step{
  display:flex;flex-direction:column;align-items:center;gap:6px;
  position:relative;z-index:2;
}
.envio-step span{
  font-size:.62rem;letter-spacing:.2em;text-transform:uppercase;
  color:var(--text-muted);transition:color .4s;
}
.step-circle{
  width:36px;height:36px;border-radius:50%;
  background:rgba(58,18,0,0.05);
  border:2px solid rgba(200,102,10,.2);
  display:flex;align-items:center;justify-content:center;
  font-size:.82rem;font-weight:800;color:var(--text-muted);
  transition:all .4s cubic-bezier(.23,1,.32,1);
}
.envio-step.active .step-circle{
  background:linear-gradient(135deg,var(--orange),var(--orange-light));
  border-color:var(--orange-light);
  color:var(--dark);
  box-shadow:0 0 20px rgba(200,102,10,.5);
  transform:scale(1.1);
}
.envio-step.active span{color:var(--orange-light);font-weight:700}
.envio-step.completed .step-circle{
  background:rgba(74,124,47,.3);
  border-color:var(--green-light);
  color:var(--green-light);
}
.envio-step.completed span{color:var(--green-light)}
.step-line{
  width:60px;height:2px;
  background:rgba(200,102,10,.12);
  margin:0 8px;margin-bottom:20px;
  transition:background .4s;
}
.step-line.completed{background:linear-gradient(to right,var(--green),var(--green-light))}

/* Body */
.envio-body{
  flex:1;overflow-y:auto;padding:0 28px 24px;
  scrollbar-width:thin;
  scrollbar-color:rgba(200,102,10,.3) transparent;
}
.envio-body::-webkit-scrollbar{width:5px}
.envio-body::-webkit-scrollbar-track{background:transparent}
.envio-body::-webkit-scrollbar-thumb{background:rgba(200,102,10,.3);border-radius:4px}

/* Panels */
.envio-panel{display:none;animation:panelFadeIn .35s ease}
.envio-panel.active{display:block}
@keyframes panelFadeIn{from{opacity:0;transform:translateX(16px)}to{opacity:1;transform:translateX(0)}}

.envio-section-title{
  font-family:'Playfair Display',serif;font-size:1.05rem;font-weight:600;
  color:var(--cream);margin-bottom:20px;
  display:flex;align-items:center;gap:10px;
}
.envio-section-title i{color:var(--orange-light);font-size:1.1rem}

/* Form Grid */
.envio-form-grid{display:grid;grid-template-columns:1fr 1fr;gap:16px}
.envio-field.full{grid-column:1/-1}

.envio-field label{
  display:block;font-size:.7rem;letter-spacing:.2em;text-transform:uppercase;
  color:var(--text-muted);margin-bottom:6px;font-weight:600;
}
.envio-field .req{color:#E74C3C;font-weight:800}
.envio-field .opt{color:var(--text-muted);font-weight:400;letter-spacing:.1em;text-transform:none;font-size:.72rem}

/* Input Wrapper */
.envio-input-wrap{
  display:flex;align-items:center;gap:10px;
  background:rgba(58,18,0,0.04);
  border:1px solid rgba(200,102,10,.18);
  border-radius:10px;padding:0 14px;
  transition:all .3s;position:relative;
}
.envio-input-wrap:focus-within{
  border-color:var(--orange-light);
  background:rgba(200,102,10,.06);
  box-shadow:0 0 0 3px rgba(200,102,10,.1);
}
.envio-input-wrap i{color:var(--orange-light);opacity:.5;font-size:.9rem;flex-shrink:0}
.envio-input-wrap:focus-within i{opacity:1}
.envio-input-wrap input,
.envio-input-wrap textarea{
  flex:1;background:transparent;border:none;outline:none;
  color:var(--cream);font-family:'Nunito',sans-serif;
  font-size:.9rem;padding:12px 0;
}
.envio-input-wrap textarea{resize:vertical;min-height:50px;line-height:1.6}
.envio-input-wrap input::placeholder,
.envio-input-wrap textarea::placeholder{color:rgba(58,18,0,0.25)}

/* Select Wrapper */
.envio-select-wrap{
  position:relative;
  background:rgba(58,18,0,0.04);
  border:1px solid rgba(200,102,10,.18);
  border-radius:10px;
  transition:all .3s cubic-bezier(0.25, 0.8, 0.25, 1);
  overflow:hidden;
}
.envio-select-wrap:hover:not(:has(select:disabled)){
  border-color:rgba(200,102,10,.45);
  background:rgba(200,102,10,.08);
  transform:translateY(-2px);
  box-shadow:0 4px 14px rgba(200,102,10,.12);
}
.envio-select-wrap:focus-within{
  border-color:var(--orange-light);
  background:rgba(200,102,10,.08);
  box-shadow:0 0 0 3px rgba(200,102,10,.18), 0 6px 20px rgba(200,102,10,.12);
  transform:translateY(-2px);
}
.envio-select-wrap select{
  appearance:none;-webkit-appearance:none;
  width:100%;background:transparent;border:none;outline:none;
  color:var(--cream);font-family:'Nunito',sans-serif;
  font-size:.88rem;padding:12px 38px 12px 14px;cursor:pointer;
  font-weight:600;
  transition:color .3s ease;
}
.envio-select-wrap select option{background:#2D1407;color:#FFF0E4;font-family:'Nunito',sans-serif;padding:10px;}
.envio-select-wrap select:disabled{opacity:.45;cursor:not-allowed}
.envio-select-wrap:has(select:disabled){
  background:rgba(0, 0, 0, 0.04);
  border-style:dashed;
  border-color:rgba(200, 102, 10, 0.12);
  transform:none !important;
  box-shadow:none !important;
}
.envio-select-wrap .select-arrow,
.envio-select-wrap>i{
  position:absolute;right:12px;top:50%;transform:translateY(-50%);
  color:var(--orange-light);opacity:.55;pointer-events:none;font-size:.78rem;
  transition:transform .3s ease, opacity .3s ease, color .3s ease;
}
.envio-select-wrap:focus-within .select-arrow,
.envio-select-wrap:focus-within>i{
  opacity:1;
  color:var(--orange-light);
  transform:translateY(-50%) rotate(180deg);
}

/* ══════════════════════════════════════════════════════
   Campos Condicionales Provincia & Selects Cascadas
   ══════════════════════════════════════════════════════ */
.campos-provincia-box {
  margin-top: 18px;
  padding: 18px 20px;
  background: linear-gradient(135deg, rgba(58, 18, 0, 0.05) 0%, rgba(200, 102, 10, 0.07) 100%);
  border: 1px solid rgba(200, 102, 10, 0.22);
  border-radius: 14px;
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.08), inset 0 1px 0 rgba(255, 255, 255, 0.05);
  animation: provinciaExpand 0.45s cubic-bezier(0.16, 1, 0.3, 1) forwards;
  transition: border-color 0.3s ease, box-shadow 0.3s ease;
}

.campos-provincia-box:hover {
  border-color: rgba(200, 102, 10, 0.38);
  box-shadow: 0 10px 28px rgba(0, 0, 0, 0.12), inset 0 1px 0 rgba(255, 255, 255, 0.08);
}

@keyframes provinciaExpand {
  0% {
    opacity: 0;
    transform: translateY(-12px) scale(0.97);
  }
  100% {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
}

.campos-provincia-header {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 0.73rem;
  color: var(--orange-light, #C8660A);
  text-transform: uppercase;
  letter-spacing: 0.14em;
  margin-bottom: 16px;
  font-weight: 700;
}

.campos-provincia-header .header-icon {
  font-size: 0.9rem;
  animation: iconPulse 2s infinite ease-in-out;
}

@keyframes iconPulse {
  0%, 100% { transform: scale(1); opacity: 0.85; }
  50% { transform: scale(1.2); opacity: 1; }
}

.envio-cascading-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
  gap: 14px;
}

.envio-field label {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 0.72rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--text-muted);
  margin-bottom: 6px;
  font-weight: 600;
  transition: color 0.25s ease;
}

.envio-field label i {
  font-size: 0.85rem;
  color: var(--orange-light, #C8660A);
  opacity: 0.75;
  transition: transform 0.25s ease, opacity 0.25s ease;
}

.envio-field:hover label i {
  opacity: 1;
  transform: translateY(-1px);
}

.envio-field:hover label {
  color: var(--cream, #fff);
}

/* Envio Badge */
.envio-envio-badge{
  display:flex;align-items:center;gap:6px;
  margin-top:8px;padding:6px 12px;border-radius:8px;
  background:rgba(200,102,10,.1);border:1px solid rgba(200,102,10,.25);
  font-size:.78rem;color:var(--orange-light);
  animation:badgePop .35s ease;
}
.envio-envio-badge.free{
  background:rgba(74,124,47,.15);border-color:rgba(74,124,47,.35);
  color:var(--green-light);
}
.envio-envio-badge i{font-size:.85rem}
@keyframes badgePop{from{opacity:0;transform:scale(.9)}to{opacity:1;transform:scale(1)}}

/* Geo Button */
.envio-geo-btn{
  display:flex;align-items:center;justify-content:center;gap:8px;
  width:100%;padding:12px;margin-bottom:18px;
  background:rgba(74,124,47,.08);border:1px dashed rgba(74,124,47,.3);
  border-radius:10px;color:var(--green-light);
  font-size:.8rem;letter-spacing:.1em;
  cursor:pointer;transition:all .3s;font-family:'Nunito',sans-serif;
}
.envio-geo-btn:hover{background:rgba(74,124,47,.15);border-style:solid}
.envio-geo-btn:disabled{opacity:.5;cursor:wait}
.envio-geo-btn.geo-success{
  background:rgba(74,124,47,.2);border-color:var(--green-light);border-style:solid;
}
.envio-geo-status{font-size:.75rem;margin-bottom:12px;text-align:center}
.geo-ok{color:var(--green-light);display:flex;align-items:center;justify-content:center;gap:6px}
.geo-error{color:#E74C3C;display:flex;align-items:center;justify-content:center;gap:6px}
.geo-auto-result{
  display:flex;flex-direction:column;align-items:center;gap:4px;
  padding:12px;background:rgba(74,124,47,.08);
  border:1px solid rgba(74,124,47,.2);border-radius:10px;
  animation:badgePop .35s ease;
}
.geo-detail{color:var(--cream);font-weight:600;font-size:.82rem}
.geo-hint{color:var(--text-muted);font-size:.7rem;font-style:italic;letter-spacing:.05em}

/* Spin animation */
@keyframes spin{from{transform:rotate(0)}to{transform:rotate(360deg)}}
.spin{animation:spin 1s linear infinite}

/* Navigation Buttons */
.envio-nav {
  display: flex;
  gap: 12px;
  margin-top: 24px;
  padding-top: 20px;
  border-top: 1px solid rgba(200,102,10,0.1);
}
.envio-nav > button {
  flex: 1;
  justify-content: center;
  min-height: 48px;
}
.envio-btn-secondary{
  display:flex;align-items:center;gap:8px;
  padding:12px 20px;background:rgba(58,18,0,0.04);
  border:1px solid rgba(200,102,10,.2);border-radius:10px;
  color:var(--text-muted);font-size:.82rem;letter-spacing:.08em;
  cursor:pointer;transition:all .3s;font-family:'Nunito',sans-serif;font-weight:600;
}
.envio-btn-secondary:hover{border-color:var(--orange);color:var(--orange-light)}

.envio-btn-primary{
  display:flex;align-items:center;gap:8px;
  padding:12px 24px;
  background:linear-gradient(135deg,var(--orange),var(--orange-light));
  border:none;border-radius:10px;
  color:var(--dark);font-size:.82rem;font-weight:800;
  letter-spacing:.12em;text-transform:uppercase;
  cursor:pointer;transition:all .3s;font-family:'Nunito',sans-serif;
}
.envio-btn-primary:hover{transform:translateY(-2px);box-shadow:0 10px 30px rgba(200,102,10,.4)}

.envio-btn-confirm{
  display:flex;align-items:center;gap:8px;justify-content:center;
  padding:14px 24px;
  background:linear-gradient(135deg,#25D366,#128C7E);
  border:none;border-radius:10px;
  color:white;font-size:.88rem;font-weight:800;
  letter-spacing:.12em;text-transform:uppercase;
  cursor:pointer;transition:all .3s;font-family:'Nunito',sans-serif;
}
.envio-btn-confirm:hover{transform:translateY(-2px);box-shadow:0 12px 35px rgba(37,211,102,.35)}
.envio-btn-confirm:disabled{
  background:rgba(58,18,0,0.07);color:var(--text-muted);
  cursor:wait;transform:none;box-shadow:none;
}

/* Resumen Card (Step 3) */
.envio-resumen-card{
  background:rgba(200,102,10,.05);
  border:1px solid rgba(200,102,10,.15);
  border-radius:12px;padding:18px;margin-bottom:18px;
}
.resumen-section{margin-bottom:12px}
.resumen-section:last-child{margin-bottom:0}
.resumen-label{
  font-size:.65rem;letter-spacing:.25em;text-transform:uppercase;
  color:var(--text-muted);margin-bottom:4px;
  display:flex;align-items:center;gap:6px;
}
.resumen-label i{color:var(--orange-light);font-size:.8rem}
.resumen-value{font-size:.95rem;font-weight:700;color:var(--cream);line-height:1.4}
.resumen-value-sub{font-size:.8rem;color:var(--text-muted);margin-top:2px}
.resumen-divider{
  height:1px;background:rgba(200,102,10,.1);
  margin:12px 0;
}

/* Productos List (Step 3) */
.envio-producto-item{
  display:flex;align-items:center;gap:12px;
  padding:10px 0;border-bottom:1px solid rgba(200,102,10,.08);
}
.envio-producto-item:last-child{border-bottom:none}
.envio-prod-img{
  width:42px;height:42px;border-radius:8px;
  background:rgba(200,102,10,.1);overflow:hidden;
  display:flex;align-items:center;justify-content:center;
  font-size:1.2rem;flex-shrink:0;
}
.envio-prod-img img{width:100%;height:100%;object-fit:cover}
.envio-prod-info{flex:1;min-width:0}
.envio-prod-name{font-size:.85rem;font-weight:700;color:var(--cream);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.envio-prod-qty{font-size:.73rem;color:var(--text-muted)}
.envio-prod-subtotal{font-family:'Bebas Neue',cursive;font-size:1.1rem;color:var(--orange-light);letter-spacing:.04em;flex-shrink:0}

/* Totales (Step 3) */
.envio-totales{
  background:rgba(200,102,10,.05);
  border:1px solid rgba(200,102,10,.15);
  border-radius:12px;padding:16px 18px;margin-top:16px;
}
.envio-total-row{
  display:flex;justify-content:space-between;align-items:center;
  padding:8px 0;font-size:.85rem;color:var(--text-muted);
}
.envio-total-row.envio-row{
  color:var(--green-light);
}
.envio-total-row.envio-row i{margin-right:6px}
.envio-total-row.total{
  border-top:1px solid rgba(200,102,10,.2);
  margin-top:8px;padding-top:12px;
  font-weight:800;font-size:1.05rem;
  color:var(--orange-light);
}
.envio-total-row.total span:last-child{
  font-family:'Bebas Neue',cursive;
  font-size:1.6rem;letter-spacing:.06em;
}

/* ══════════════════════════════════════════
   RESPONSIVE — Formulario Envío
══════════════════════════════════════════ */
@media(max-width:640px){
  #modalEnvio .envio-modal{
    width:100%;max-width:100%;
    max-height:100vh;height:100vh;
    border-radius:0;
  }
  .envio-header{padding:16px 20px}
  .envio-body{padding:0 20px 20px}
  .envio-form-grid{grid-template-columns:1fr}
  .envio-steps{padding:14px 16px 10px}
  .step-line{width:30px}
  .step-circle{width:30px;height:30px;font-size:.72rem}
  .envio-step span{font-size:.55rem}
  .envio-nav{flex-direction:column}
  .envio-btn-primary,.envio-btn-secondary,.envio-btn-confirm{
    width:100%;justify-content:center;
  }
  .envio-title{font-size:1.1rem}
}

/* Botones de empresa de envío (EPS / Caribe Packs) */
.empresa-btn{
  display:flex;flex-direction:column;align-items:center;gap:12px;
  padding:24px 16px;border-radius:16px;cursor:pointer;
  background:linear-gradient(135deg, rgba(255,255,255,.04), rgba(255,255,255,.01));
  border:1px solid rgba(200,102,10,.15);
  color:var(--cream);font-family:'Nunito',sans-serif;
  font-weight:800;font-size:.9rem;letter-spacing:.03em;
  transition:all .25s cubic-bezier(.4,0,.2,1);outline:none;
  position:relative;overflow:hidden;
}
.empresa-btn::before{
  content:'';position:absolute;inset:0;
  background:linear-gradient(135deg, rgba(200,102,10,.1), transparent);
  opacity:0;transition:opacity .25s;
}
.empresa-btn:hover{
  border-color:var(--orange-light);
  background:rgba(200,102,10,.08);
  transform:translateY(-2px);
  box-shadow:0 8px 24px rgba(200,102,10,.12);
}
.empresa-btn:hover::before{opacity:1}
.empresa-btn.active{
  background:rgba(200,102,10,.18);
  border-color:var(--orange-light);
  box-shadow:0 0 0 3px rgba(200,102,10,.15), 0 8px 24px rgba(200,102,10,.1);
  transform:translateY(-2px);
}
.empresa-btn.active span{color:var(--orange-light)}
.empresa-btn:focus-visible{outline:2px solid var(--orange-light);outline-offset:2px}

.empresa-logo-wrap{
  width:68px;height:68px;border-radius:14px;
  background:linear-gradient(135deg, rgba(200,102,10,.12), rgba(200,102,10,.04));
  display:flex;align-items:center;justify-content:center;
  border:1px solid rgba(200,102,10,.15);
  transition:all .25s;
}
.empresa-btn:hover .empresa-logo-wrap{
  border-color:var(--orange-light);
  box-shadow:0 0 20px rgba(200,102,10,.2);
}
.empresa-logo{
  width:100%;height:100%;object-fit:contain;border-radius:12px;
  transition:transform .25s;
}
.empresa-btn:hover .empresa-logo{transform:scale(1.05)}
.empresa-logo-fallback{font-size:2.2rem;color:var(--orange-light)}

/* Animación de entrada para contenedorEmpresa y contenedorSucursalesEPS */
#contenedorEmpresa.visible,
#contenedorSucursalesEPS.visible{
  display:block !important;
  opacity:1 !important;
  transform:translateY(0) !important;
}

/* Animación staggered para las tarjetas de sucursales */
.sucursal-card{
  opacity:0;
  transform:translateY(15px) scale(.98);
  animation:sucursalFadeIn .35s cubic-bezier(.4,0,.2,1) forwards;
}
.sucursal-card:nth-child(1){animation-delay:.05s}
.sucursal-card:nth-child(2){animation-delay:.1s}
.sucursal-card:nth-child(3){animation-delay:.15s}
.sucursal-card:nth-child(4){animation-delay:.2s}
.sucursal-card:nth-child(5){animation-delay:.25s}
.sucursal-card:nth-child(6){animation-delay:.3s}
.sucursal-card:nth-child(7){animation-delay:.35s}
.sucursal-card:nth-child(8){animation-delay:.4s}
.sucursal-card:nth-child(9){animation-delay:.45s}
.sucursal-card:nth-child(10){animation-delay:.5s}

@keyframes sucursalFadeIn{
  to{opacity:1;transform:translateY(0) scale(1)}
}

@media(max-width:480px){
  .empresa-btn{padding:20px 12px;font-size:.82rem}
  .empresa-logo-wrap{width:56px;height:56px}
  .empresa-logo-fallback{font-size:1.8rem}
}

/* ══════════════════════════════════════════════
/* ══════════════════════════════════════════════
   MODAL META — ENVÍO GRATIS
══════════════════════════════════════════════ */
.meta-overlay{
  position:fixed;inset:0;z-index:2000;
  display:flex;align-items:center;justify-content:center;
  background:rgba(20,6,0,.6);backdrop-filter:blur(5px);
  animation:metaFade .35s ease;
}
.meta-overlay[style*="display:block"]{display:flex}
@keyframes metaFade{from{opacity:0}to{opacity:1}}

.meta-confetti{
  position:absolute;inset:0;overflow:hidden;pointer-events:none;z-index:1;
}
.meta-confetti-piece{
  position:absolute;top:-30px;width:10px;height:16px;border-radius:2px;
  animation:metaFall linear infinite;will-change:transform;
}
.meta-confetti-piece.round{border-radius:50%}
.meta-confetti-piece.ribbon{width:16px;height:8px}
@keyframes metaFall{
  to{transform:translateY(110vh) rotate(720deg)}
}

.meta-alert{
  position:relative;z-index:3;
  max-width:440px;width:92%;text-align:center;
  background:#FAF3E8;
  border:2px solid #EAD5C1;
  border-radius:22px;padding:45px 30px 30px;
  box-shadow:0 30px 80px rgba(0,0,0,.3),0 0 0 6px rgba(255,255,255,.4),0 0 40px rgba(210,108,28,.2);
  animation:metaPop .5s cubic-bezier(.2,1.2,.4,1);
}
@keyframes metaPop{from{transform:scale(.6);opacity:0}to{transform:scale(1);opacity:1}}

.meta-close{
  position:absolute;top:16px;right:20px;background:none;border:none;
  color:#9C795C;line-height:1;cursor:pointer;transition:color .2s, transform .2s;
}
.meta-close:hover{color:#7A5538; transform:scale(1.1);}

.meta-img-container {
  position:relative;
  margin: 0 auto 20px;
  width: 120px; height: 120px;
}
.meta-spices-bg {
  position: absolute;
  top: 50%; left: 50%;
  transform: translate(-50%, -45%);
  width: 240px; height: auto;
  z-index: 1; pointer-events: none;
}
.meta-icon-circle{
  width:100%;height:100%;border-radius:50%;
  background: #fff;
  border: 4px solid #F2E4D4;
  display:flex;align-items:center;justify-content:center;
  font-size:3.5rem;color:#D26C1C;
  box-shadow:0 12px 25px rgba(210,108,28,.15),inset 0 0 15px rgba(0,0,0,.03);
  position:relative; z-index:2;
}
.meta-check {
  position:absolute;
  top: 0; right: -5px;
  background:#426B22; color:#fff;
  width:36px; height:36px; border-radius:50%;
  display:flex; align-items:center; justify-content:center;
  font-size: 1.4rem; font-weight:bold;
  border: 3px solid #FAF3E8;
  z-index:3;
  box-shadow: 0 4px 10px rgba(66, 107, 34, 0.4);
}

.meta-title-container {
  display: flex; align-items:center; justify-content:center; gap:10px; margin-bottom:8px;
}
.meta-flourish {
  color: #D26C1C; opacity: 0.6; font-size: 1.1rem;
}
.meta-title-container h2{
  font-family:'Playfair Display',serif;color:#3A1E04;font-size:2rem;margin:0; font-weight:800;
}
.meta-alert p.meta-subtitle{color:#6D4C31;margin:0;font-size:1.05rem;line-height:1.5; margin-bottom:20px;}
.meta-strong{color:#AF511B; font-weight:800;}

.meta-gift-card{
  margin:0 auto;padding:12px;border-radius:14px;
  background:#FFF;border:1px solid #EAD5C1;
  display:flex;align-items:center;justify-content:space-between;
  box-shadow: 0 4px 15px rgba(210,108,28,.05);
}
.meta-gift-left {
  display:flex; align-items:center; gap: 12px;
  flex: 1; padding-left: 5px;
}
.meta-gift-icon {
  width:42px; height:42px; border-radius:50%; background:#FDEBD8;
  color:#D26C1C; display:flex; align-items:center; justify-content:center; font-size:1.3rem;
  flex-shrink: 0;
}
.meta-gift-text {
  text-align:left; display:flex; flex-direction:column;
}
.meta-gift-label { color:#3A1E04; font-size:0.85rem; line-height:1.2; }
.meta-gift-highlight { color:#2E5211; font-weight:800; font-size:1.15rem; letter-spacing:0.5px; white-space:nowrap; }

.meta-gift-divider {
  width: 1px; height: 35px; background: #EAD5C1; margin: 0 10px;
}

.meta-gift-right {
  display:flex; align-items:center; gap: 8px; flex: 0.8;
  text-align:left;
}
.meta-map-icon { color: #426B22; font-size: 1.4rem; }
.meta-gift-desc { color: #3A1E04; font-size: 0.75rem; line-height: 1.3; font-weight: 500; }

.meta-btn{
  margin-top:24px;padding:14px 38px;border:none;border-radius:12px;cursor:pointer;
  background:linear-gradient(to bottom, #D26C1C, #A74507);color:#fff;
  font-weight:800;font-size:1.05rem;letter-spacing:.15em;font-family:'Nunito',sans-serif;
  box-shadow:0 8px 22px rgba(167,69,7,.4), inset 0 2px 0 rgba(255,255,255,0.2);
  transition:transform .2s,box-shadow .2s;
  display: inline-flex; align-items:center; justify-content:center;
}
.meta-btn:hover{transform:translateY(-2px);box-shadow:0 12px 28px rgba(167,69,7,.5), inset 0 2px 0 rgba(255,255,255,0.2);}