:root{
  --bg:#f6f8fb;
  --text:#0b1220;
  --muted:#5e6b7a;
  --card:#fff;
  --line:#e5ebf3;
  --accent:#1d7fd7;
  --accent2:#55a7ff;
  --soft:#eef3f9;
  --sidebar:#e9f0f9;
}

*{box-sizing:border-box}
body{margin:0;font-family:system-ui,-apple-system,Segoe UI,Roboto,Arial; background:var(--bg); color:var(--text)}
.container{max-width:1180px;margin:0 auto;padding:0 16px 60px}

.spacer-40{height:40px}
.spacer-20{height:20px}

.brand-link{color:#fff;text-decoration:none;font-weight:700;font-size:60px}
.brand-tag{font-size:12px;opacity:.9}
.searchbox{position:relative}
.searchbox input{width:100%;padding:10px 12px;border-radius:12px;border:1px solid rgba(255,255,255,.25);outline:none}
.suggest{position:absolute;left:0;right:0;top:42px;background:#fff;color:var(--text);border:1px solid var(--line);border-radius:12px;box-shadow:0 10px 24px rgba(0,0,0,.08);overflow:hidden}
.suggest-item{padding:10px 12px;cursor:pointer}
.suggest-item:hover{background:var(--soft)}
.hidden{display:none !important}

.top-actions{display:flex;gap:18px;justify-content:flex-end;align-items:center}
.icon-link{color:#fff;text-decoration:none;font-size:18px;padding:16px 16px}
.user-pill{background:rgba(255,255,255,.18);padding:6px 10px;border-radius:999px;font-size:13px}
.inline{display:inline}

.cats-wrap{padding:0 16px 12px }
.cats{padding:6px 0}

/* Iconos favoritos/alertas más grandes */
.icon-link.icon-big{
  font-size: 35px;     /* sube/baja a gusto */
  line-height: 1;
}

/* Botón "Entrar" en header */
.btn-login{
  background: rgba(255,255,255,.18);
  border: 1px solid rgba(255,255,255,.35);
  color: #fff;
  padding: 8px 14px;
  border-radius: 12px;  /* si lo quieres cuadrado: 0 */
  font-size: 14px;
  font-weight: 700;
  text-decoration: none;
}

.btn-login:hover{
  background: rgba(255,255,255,.26);
}



/* =========================
   HOME HERO: promos izquierda + carrusel derecha
   Carrusel: cuadrado (sin radius), alto 300px
   ========================= */

.home-hero-grid{
  display:grid;
  grid-template-columns: 320px 1fr;
  gap:16px;
  align-items:start;
}

.promos-col .promo-box{
  display:flex !important;
  align-items:center !important;
  justify-content:center !important;
}

.promos-col .promo-box img{
  width:90% !important;
  height:90% !important;
  object-fit:contain !important;
  display:block !important;
}

.promos-col{
  display:flex;
  flex-direction:column;
  gap:12px;
}

.promo-box{
  display:flex;
  align-items:center;
  justify-content:center;
  border:1px solid var(--line);
  background:#fff;
  border-radius:0px;   /* si las quieres cuadradas: 0 */
  overflow:hidden;
  height:50px;          /* ajusta si quieres más alto */
}

.promo-box img{
  width:80%;
  height:80%;
  object-fit:contain;   /* clave: NO recorta */
  display:block;
}


.hero-right{
  display:flex;
  flex-direction:column;
  gap:10px;
}

#heroSwiper{
  width:100%;
  height:300px;
  border-radius:0;            /* <-- cuadrado */
  overflow:hidden;
  background:#dbe9ff;
  position:relative;
  border:1px solid var(--line);
}

#heroSwiper .swiper-slide{
  width:100%;
  height:100%;
}

#heroSwiper img{
  width:100%;
  height:100%;
  object-fit:cover;
  display:block;
}

/* Flechas */
#heroSwiper .swiper-button-prev,
#heroSwiper .swiper-button-next{
  color:#fff;
  width:44px;
  height:44px;
  border-radius:999px;
  background:rgba(0,0,0,.25);
  backdrop-filter: blur(4px);
  z-index:20;
}

#heroSwiper .swiper-button-prev::after,
#heroSwiper .swiper-button-next::after{
  font-size:18px;
  font-weight:900;
}

/* Bolitas */
#heroSwiper .swiper-pagination{
  z-index:30;
  bottom:10px !important;
}

#heroSwiper .swiper-pagination-bullet{
  width:10px;
  height:10px;
  opacity:1;
  background:rgba(255,255,255,.6);
  border:1px solid rgba(0,0,0,.15);
}

#heroSwiper .swiper-pagination-bullet-active{
  background:#fff;
}

/* Debug visible */
.hero-debug{display:flex;gap:8px;flex-wrap:wrap}
.badge{
  font-size:12px;
  padding:6px 10px;
  border-radius:999px;
  border:1px solid var(--line);
  background:#fff;
}
.badge.bad{
  border-color:#ff3b66;
  color:#ff3b66;
}

/* responsive */
@media(max-width:980px){
  .home-hero-grid{grid-template-columns:1fr}
  .promo-box{height:120px}
  #heroSwiper{height:240px}
}

/* ========================= */

.home-copy h1{margin:0 0 8px}
.home-copy p{margin:0;color:var(--muted)}

.page-title{margin:0 0 12px}
.section-title{margin:0 0 8px}

.crumbs{display:flex;gap:8px;align-items:center;color:var(--muted);font-size:13px}
.crumbs a{color:var(--muted);text-decoration:none}
.crumbs a:hover{text-decoration:underline}

.results-topbar{
  display:flex;justify-content:space-between;gap:16px;align-items:flex-start;
  padding-bottom:12px;margin-bottom:12px;border-bottom:1px solid var(--line)
}
.results-topbar .count{margin-top:6px;color:var(--muted)}
.sort-label{color:var(--muted);font-size:13px;margin-right:8px}
#sortSelect{padding:8px 10px;border-radius:12px;border:1px solid var(--line);background:#fff}

.chips{display:flex;flex-wrap:wrap;gap:8px;margin-top:10px}
.chip{display:inline-flex;gap:8px;align-items:center;background:var(--soft);border:1px solid var(--line);
  padding:6px 10px;border-radius:999px;font-size:12px;color:var(--text)}
.chip button{border:none;background:transparent;cursor:pointer;color:var(--muted)}

.layout{display:grid;grid-template-columns:320px 1fr;gap:16px}
.sidebar{background:var(--sidebar);border:1px solid var(--line);border-radius:16px;padding:12px;position:sticky;top:120px;height:calc(100vh - 140px);overflow:auto}
.content{min-height:400px}

.filters-head{display:flex;justify-content:space-between;align-items:center;margin-bottom:10px}
.filters-title{font-weight:700}
.filter-block{background:#fff;border:1px solid var(--line);border-radius:16px;padding:10px;margin-bottom:10px}
.filter-title{font-weight:700;margin-bottom:8px}
.price-row{display:flex;gap:8px}
.price-row input[type=number]{width:100%;padding:8px;border:1px solid var(--line);border-radius:12px}
.price-row input[type=range]{width:100%}

.facet{background:#fff;border:1px solid var(--line);border-radius:16px;margin-bottom:10px;overflow:hidden}
.facet-head{padding:10px;display:flex;justify-content:space-between;align-items:center;cursor:pointer}
.facet-name{font-weight:700}
.facet-body{padding:10px;border-top:1px solid var(--line)}
.facet-search{width:100%;padding:8px;border:1px solid var(--line);border-radius:12px;margin-bottom:8px}
.facet-list{max-height:360px;overflow:auto}
.facet-item{display:flex;justify-content:space-between;gap:10px;padding:6px 0;align-items:center}
.facet-left{display:flex;gap:10px;align-items:center}
.facet-count{color:var(--muted);font-size:12px}
.talla-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:6px}
.talla-btn{padding:8px;border-radius:12px;border:1px solid var(--line);background:#fff;cursor:pointer;font-size:12px}
.talla-btn.active{border-color:var(--accent);background:#eaf3ff}

.grid .card{background:var(--card);border:1px solid var(--line);border-radius:0px;overflow:hidden;box-shadow:0 8px 20px rgba(0,0,0,.05)}
.card-img{height:150px;background:var(--soft);display:flex;align-items:center;justify-content:center}
.card-img img{max-width:100%;max-height:150px;object-fit:contain}
.card-body{padding:10px}
.card-title{font-weight:700;font-size:14px;line-height:1.2;min-height:34px}
.card-meta{display:flex;gap:6px;flex-wrap:wrap;margin:8px 0}
.pill{background:var(--soft);border:1px solid var(--line);padding:4px 8px;border-radius:999px;font-size:12px;color:var(--muted)}
.card-price{display:flex;gap:10px;align-items:baseline}
.price{font-weight:800}
.price.big{font-size:28px}
.old{color:var(--muted);text-decoration:line-through;font-size:12px}
.old.big{font-size:16px}
.card-actions{display:flex;gap:8px;align-items:center;margin-top:10px;flex-wrap:wrap}

.btn{border:none;border-radius:12px;padding:10px 12px;cursor:pointer;text-decoration:none;display:inline-flex;align-items:center;justify-content:center}
.btn-primary{background:var(--accent);color:#fff}
.btn-ghost{background:transparent;border:1px solid rgba(255,255,255,.35);color:#fff}
.btn-ghost.small{padding:6px 10px;border-radius:999px}
.sidebar .btn-ghost{border:1px solid var(--line);color:var(--text);background:#fff}
.sidebar .btn-ghost:hover{background:var(--soft)}
.content .btn-ghost{border:1px solid var(--line);color:var(--text);background:#fff}

.fav-btn{border:1px solid var(--line);background:#fff;border-radius:12px;padding:10px;cursor:pointer}
.fav-btn.active{border-color:#ff3b66;color:#ff3b66}

.pagination{display:flex;gap:10px;align-items:center;justify-content:center;margin-top:18px}
.page-btn,.page-num{border:1px solid var(--line);background:#fff;border-radius:12px;padding:8px 10px;cursor:pointer}
.page-num.active{border-color:var(--accent);background:#eaf3ff}
.page-btn:disabled{opacity:.5;cursor:not-allowed}

.cookie{position:fixed;left:16px;right:16px;bottom:16px;z-index:80}
.cookie-inner{display:flex;justify-content:space-between;gap:12px;align-items:center;background:#fff;border:1px solid var(--line);
  border-radius:16px;padding:12px;box-shadow:0 10px 24px rgba(0,0,0,.1)}
.cookie-text{color:var(--muted);font-size:13px;margin-top:4px}
.cookie-actions{display:flex;gap:10px}
.cookie .btn-ghost{border:1px solid var(--line);color:var(--text);background:#fff}


.grid{
  gap: 0 !important;
}

/* Card cuadrada */
.grid .card{
  border-radius: 0 !important;
  box-shadow: none !important;          /* opcional: sin sombra para efecto “cajón pegado” */
  border-left: 0 !important;            /* opcional: evita doble borde entre cards */
  border-top: 0 !important;
  background:#fff   !important;          /* opcional */
}
.card-img{
  background:#fff !important; /* o transparent */
}
.subcat-grid{display:flex;flex-direction:column;gap:18px}
.subcat-section{background:#fff;border:1px solid var(--line);border-radius:16px;padding:14px}
.subcat-head{display:flex;justify-content:space-between;align-items:flex-end;margin-bottom:10px}
.subcat-title{font-weight:800}
.subcat-note{color:var(--muted);font-size:13px}
.obj-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:12px}
.obj-card{position:relative;border:1px solid var(--line);border-radius:16px;overflow:hidden;text-decoration:none;color:var(--text);background:#fff}
.obj-card-bg{position:absolute;inset:0;background-image:var(--bg);background-size:cover;background-position:center;opacity:.15}
.obj-card-body{position:relative;padding:14px}
.obj-name{font-weight:800}
@media(max-width:980px){.layout{grid-template-columns:1fr}.sidebar{display:none}.obj-grid{grid-template-columns:repeat(2,1fr)}}

.mobile-filter-btn{display:none;position:fixed;right:16px;bottom:18px;z-index:90;background:var(--accent);color:#fff;border-radius:999px;padding:12px 16px;border:none}
@media(max-width:980px){.mobile-filter-btn{display:block}}

.drawer{position:fixed;left:0;right:0;top:0;bottom:0;background:#fff;z-index:100;display:flex;flex-direction:column}
.drawer-head{display:flex;justify-content:space-between;align-items:center;padding:12px 16px;border-bottom:1px solid var(--line)}
.drawer-body{padding:12px 16px;overflow:auto}
.drawer .btn-ghost{border:1px solid var(--line);color:var(--text);background:#fff}

.shops-layout{display:grid;grid-template-columns:380px 1fr;gap:16px}
@media(max-width:980px){.shops-layout{grid-template-columns:1fr}}
.ficha-card{background:#fff;border:1px solid var(--line);border-radius:16px;padding:12px}
.ficha-top{display:flex;justify-content:space-between;gap:10px}
.ficha-thumb{width:64px;height:64px;object-fit:contain;background:var(--soft);border-radius:12px;border:1px solid var(--line)}
.ficha-title{font-weight:800}
.ficha-sub{color:var(--muted);font-size:13px}
.carousel-mini{display:flex;gap:8px;margin-top:10px;overflow:auto}
.carousel-mini img{height:110px;border-radius:12px;border:1px solid var(--line);background:var(--soft);object-fit:contain}
.offer-row{display:grid;grid-template-columns:70px 1fr 110px 90px;gap:12px;align-items:center;background:#fff;border:1px solid var(--line);border-radius:16px;padding:10px;margin-bottom:10px}
.offer-img{width:70px;height:70px;object-fit:contain;background:var(--soft);border-radius:12px;border:1px solid var(--line)}
.offer-title{font-weight:800}
.offer-meta{display:flex;gap:6px;flex-wrap:wrap;margin-top:6px}
.offer-price{font-weight:900;font-size:16px}

.detail{display:grid;grid-template-columns:420px 1fr;gap:18px;align-items:start}
@media(max-width:980px){.detail{grid-template-columns:1fr}}
.detail-img{width:100%;max-height:420px;object-fit:contain;background:#fff;border:1px solid var(--line);border-radius:16px;padding:10px}
.detail-title{margin:0 0 10px}
.detail-meta{display:flex;gap:6px;flex-wrap:wrap;margin-bottom:10px}
.detail-actions{display:flex;gap:10px;flex-wrap:wrap;margin-top:12px}

.modal{position:fixed;inset:0;background:rgba(0,0,0,.35);z-index:110;display:flex;align-items:center;justify-content:center;padding:16px}
.modal-card{width:min(900px,100%);background:#fff;border-radius:16px;border:1px solid var(--line);overflow:hidden}
.modal-head{display:flex;justify-content:space-between;align-items:center;padding:12px 14px;border-bottom:1px solid var(--line)}
.modal-body{padding:12px 14px;max-height:70vh;overflow:auto}
.ex-row{display:grid;grid-template-columns:200px 1fr;gap:12px;padding:8px 0;border-bottom:1px dashed var(--line)}
.ex-k{color:var(--muted);font-size:12px}
.ex-v{font-size:13px}

.auth{max-width:420px;margin:0 auto;background:#fff;border:1px solid var(--line);border-radius:16px;padding:16px}
.auth-form{display:flex;flex-direction:column;gap:10px}
.auth-form input{padding:10px 12px;border-radius:12px;border:1px solid var(--line)}
.error{background:#ffe7ec;border:1px solid #ffc1cf;padding:10px;border-radius:12px;margin-bottom:10px}
.muted{color:var(--muted)}
.small{font-size:12px}

.alert-box{background:#fff;border:1px solid var(--line);border-radius:16px;padding:12px}
.alert-form{display:grid;grid-template-columns:1fr 1fr 1fr 1fr 140px;gap:8px;margin-top:10px}
.alert-form input{padding:10px 12px;border-radius:12px;border:1px solid var(--line)}
@media(max-width:980px){.alert-form{grid-template-columns:1fr}}

.list{display:flex;flex-direction:column;gap:10px}
.list-item{background:#fff;border:1px solid var(--line);border-radius:16px;padding:12px}
/* =========================
   HOME HERO (promos + carrusel)
   ========================= */
.home-hero-grid{
  display:grid;
  grid-template-columns: 40% 60%;
  gap:16px;
  align-items:stretch;
}

.promos-col{
  display:flex;
  flex-direction:column;
  gap:12px;
}

.promo-box{
  display:block;
  border:1px solid var(--line);
  background:#fff;
  /* promos pueden mantener un ligero radio si quieres; si quieres cuadrado: pon 0 */
  border-radius:12px;
  overflow:hidden;
  height: 92px;
}

.promo-box img{
  width:100%;
  height:100%;
  object-fit:cover;
  display:block;
}

.hero-right{
  min-height:300px;
}

.hero-swiper{
  width:100%;
  height:300px;
  border-radius:0; /* carrusel cuadrado */
  overflow:hidden;
  background:#dbe9ff;
  border:1px solid var(--line);
}

.hero-swiper .swiper-slide img{
  width:100%;
  height:300px;
  object-fit:cover;
  display:block;
}

/* flechas visibles sobre imágenes */
.hero-swiper .swiper-button-prev,
.hero-swiper .swiper-button-next{
  color:#fff;
  text-shadow:0 2px 8px rgba(0,0,0,.35);
}

/* paginación (bolitas) */
.hero-swiper .swiper-pagination-bullet{
  opacity:.7;
}
.hero-swiper .swiper-pagination-bullet-active{
  opacity:1;
}

/* debug badges */
.hero-debug{
  display:flex;
  gap:10px;
  margin-top:10px;
  justify-content:flex-start;
  align-items:center;
}
.badge{
  background:#fff;
  border:1px solid var(--line);
  border-radius:999px;
  padding:4px 8px;
  font-size:12px;
  color:var(--muted);
}

/* responsive */
@media(max-width:980px){
  .home-hero-grid{grid-template-columns:1fr}
  .promo-box{height:80px}
}

/* =========================
   HOME FEATURED PRODUCTS CAROUSEL (80% width)
   ========================= */
.home-featured{
  width:80%;
  margin:0 auto;
}

.home-featured-head{
  display:flex;
  justify-content:space-between;
  align-items:flex-end;
  gap:12px;
  margin-bottom:10px;
}

.products-swiper{
  width:100%;
}

.product-slide{
  height:auto;
}

.product-slide-inner{
  /* asegurar que la card no “baila” */
  height:100%;
}

/* Ajuste: en carrusel, cards un pelín más compactas si quieres */
.products-swiper .card-img{
  height:160px;
}
.products-swiper .card-img img{
  max-height:160px;
}

/* flechas */
.products-swiper .swiper-button-prev,
.products-swiper .swiper-button-next{
  color: var(--accent);
}

/* bullets */
.products-swiper .swiper-pagination{
  position:relative;
  margin-top:10px;
}