/* ── TOKENS O2 ── */
:root {
  --cream:    #F7EFEA;
  --cream-l:  #FBF7F4;
  --cream-d:  #EDE4DC;
  --terra:    #d87d62; /* Naranja melocotón oficial */
  --terra-d:  #b86851; /* Hover oscuro */
  --terra-l:  #ea967f; /* Secundario claro */
  --brown:    #1E1512;
  --brown-m:  #5A3D2B;
  --brown-l:  #8B6347;
  --white:    #FFFFFF;
  --shadow:   0 4px 24px rgba(30,21,18,.10);
  --shadow-l: 0 2px 12px rgba(30,21,18,.06);
  --r:        12px;
  --r-sm:     8px;
  --r-pill:   100px;
  --transition: all .25s cubic-bezier(.4,0,.2,1);
}

#storeSection,
#storeSection *,
#storeSection *::before,
#storeSection *::after {
  box-sizing: border-box;
}

#storeSection {
  font-family: 'DM Sans', sans-serif;
  color: var(--brown);
  line-height: 1.6;
  /* Prevent horizontal overflow caused by grid children */
  overflow-x: hidden;
  width: 100%;
  max-width: 100%;
}

/* ── SEARCH HERO ── */
.search-wrap{flex:1;position:relative;max-width:600px}
.search-box{
  width:100%;
  height:44px;
  padding:0 1.25rem 0 3rem;
  border:2px solid transparent;
  border-radius:var(--r-pill);
  background:var(--white);
  font-family:'DM Sans',sans-serif;
  font-size:.95rem;color:var(--brown);
  box-shadow:var(--shadow-l);
  transition:var(--transition);
  outline:none;
}
.search-box:focus{border-color:var(--terra);box-shadow:0 0 0 4px rgba(196,112,74,.12)}
.search-icon{
  position:absolute;left:1rem;top:50%;transform:translateY(-50%);
  color:var(--terra);pointer-events:none;
  display:flex;align-items:center;
}
.search-clear{
  position:absolute;right:.75rem;top:50%;transform:translateY(-50%);
  background:none;border:none;cursor:pointer;
  color:var(--brown-l);font-size:1.1rem;display:none;padding:.25rem;
}
.search-box:not(:placeholder-shown) ~ .search-clear{display:flex}

/* Dropdown sugerencias */
.search-dropdown{
  position:absolute;top:calc(100% + 6px);left:0;right:0;
  background:var(--white);
  border-radius:var(--r);
  box-shadow:var(--shadow);
  border:1px solid rgba(196,112,74,.15);
  overflow:hidden;
  display:none;z-index:200;
}
.search-dropdown.open{display:block}
.suggest-item{
  display:flex;align-items:center;gap:.75rem;
  padding:.7rem 1rem;cursor:pointer;
  transition:background .15s;border-bottom:1px solid rgba(30,21,18,.05);
}
.suggest-item:last-child{border-bottom:none}
.suggest-item:hover,.suggest-item.active{background:var(--cream)}
.suggest-img{
  width:44px;height:44px;border-radius:var(--r-sm);
  object-fit:cover;flex-shrink:0;
  background:var(--cream-d);
}
.suggest-info{flex:1;min-width:0}
.suggest-name{font-size:.875rem;font-weight:500;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.suggest-meta{font-size:.75rem;color:var(--brown-l)}
.suggest-price{font-size:.875rem;font-weight:600;color:var(--terra);white-space:nowrap}
.suggest-footer{
  padding:.6rem 1rem;
  background:var(--cream);
  font-size:.8rem;color:var(--brown-l);
  text-align:center;cursor:pointer;
}
.suggest-footer:hover{color:var(--terra)}

/* Nav right */
.nav-actions{display:flex;gap:.75rem;align-items:center;margin-left:auto}
.btn{
  display:inline-flex;align-items:center;gap:.4rem;
  padding:.5rem 1.25rem;
  border-radius:var(--r-pill);
  font-family:'DM Sans',sans-serif;
  font-size:.875rem;font-weight:500;
  cursor:pointer;border:none;text-decoration:none;
  transition:var(--transition);
}
.btn-ghost{background:transparent;color:var(--brown-m);border:1.5px solid var(--cream-d)}
.btn-ghost:hover{border-color:var(--terra);color:var(--terra)}
.btn-primary{background:var(--terra);color:var(--white)}
.btn-primary:hover{background:var(--terra-d);transform:translateY(-1px)}
.btn-outline{background:transparent;color:var(--terra);border:1.5px solid var(--terra)}
.btn-outline:hover{background:var(--terra);color:var(--white)}

/* ── HERO BANNER ── */
.hero{
  background:linear-gradient(135deg,var(--brown) 0%,var(--brown-m) 100%);
  color:var(--white);
  padding:4rem clamp(1rem,5vw,4rem) 4rem;
  display:grid;grid-template-columns:1fr 1fr;gap:2rem;align-items:center;
}
@media(max-width:768px){.hero{grid-template-columns:1fr;text-align:center}}
.hero-eyebrow{font-size:.8rem;font-weight:600;letter-spacing:2px;text-transform:uppercase;color:var(--terra-l);margin-bottom:.75rem}
.hero-title{font-family:'Cormorant Garamond',serif;font-size:clamp(2rem,4vw,3.5rem);font-weight:700;line-height:1.15;margin-bottom:1rem}
.hero-title em{color:var(--terra-l);font-style:normal}
.hero-sub{font-size:1rem;color:rgba(255,255,255,.75);max-width:480px;margin-bottom:2rem}
.hero-stats{display:flex;gap:2rem}
.hero-stat{text-align:center}
.hero-stat-n{font-family:'Cormorant Garamond',serif;font-size:2rem;font-weight:700;color:var(--terra-l)}
.hero-stat-l{font-size:.75rem;color:rgba(255,255,255,.6);text-transform:uppercase;letter-spacing:1px}
.hero-visual{display:grid;grid-template-columns:1fr 1fr;gap:.75rem}
.hero-img{
  border-radius:var(--r);object-fit:cover;width:100%;
  aspect-ratio:1;filter:brightness(.9);
}
.hero-img:first-child{grid-column:span 2;aspect-ratio:16/9}

/* ── LAYOUT ── */
.container{max-width:1400px;margin:0 auto;padding:0 clamp(1rem,4vw,3rem);overflow-x:hidden}
.store-layout{
  display:block;
  padding:2rem 0 4rem;
  align-items:start;
  /* Previene que las columnas del grid rompan el ancho del contenedor */
  min-width:0;
  width:100%;
  overflow:hidden;
}
/* Columna central: DEBE tener min-width:0 para que el grid la comprima correctamente */
.store-layout > main {
  min-width: 0;
  width: 100%;
  overflow: hidden;
}
@media(max-width:992px){
  .store-layout{
    grid-template-columns:1fr;
    gap:1.5rem;
  }
}