/* =========================================================================
   MJ Plast — Estilos
   Identidad visual tomada de los flyers: navy dominante + blanco,
   acento celeste, sello verde "alta calidad".
   ========================================================================= */

:root{
  /* Gama azul suavizada y monocromática (pedido de Melisa: el azul era "muy azul").
     Para volver al original: navy #0b2a87 / dark #071a5c / deep #050f3d / blue #1e6fd6. */
  --navy:        #2a4880;   /* azul principal (más suave/desaturado) */
  --navy-dark:   #1e3661;   /* fondos oscuros */
  --navy-deep:   #16284a;
  --blue:        #3f6fbe;   /* acento (menos eléctrico) */
  --blue-light:  #eef3fb;
  --green:       #34a853;   /* sello calidad */
  --green-dark:  #2c8c46;
  --wa:          #25d366;   /* whatsapp */
  --ink:         #14213d;
  --muted:       #5b6477;
  --line:        #e3e8f2;
  --bg:          #f4f7fc;
  --white:       #ffffff;
  --radius:      8px;   /* esquinas más sobrias/profesionales (antes 14px, look "redondeado") */
  --shadow-sm:   0 2px 8px rgba(11,42,135,.07);
  --shadow-md:   0 8px 28px rgba(11,42,135,.12);
  --shadow-lg:   0 18px 50px rgba(7,26,92,.22);
}

*{ box-sizing:border-box; margin:0; padding:0; }
[hidden]{ display:none !important; }   /* el atributo hidden siempre gana sobre display:grid/flex */
body.noscroll{ overflow:hidden; }      /* bloquea el scroll del fondo cuando hay un modal/drawer abierto */
html{ scroll-behavior:smooth; }
body{
  font-family:'Montserrat',system-ui,-apple-system,Segoe UI,Roboto,sans-serif;
  color:var(--ink);
  background:var(--bg);
  line-height:1.5;
}
a{ color:inherit; text-decoration:none; }
img{ max-width:100%; display:block; }
.container{ width:min(1200px,92%); margin-inline:auto; }

/* ---------- FRANJA DE ANUNCIOS (monto mínimo, etc.) ---------- */
.announce{ background:var(--blue-light); color:var(--navy); border-bottom:1px solid #dbe6fa; }
.announce__inner{ display:flex; justify-content:center; align-items:center; min-height:1.95rem; padding:.4rem 1rem; text-align:center; }
.announce__msg{ font-size:.82rem; font-weight:700; letter-spacing:.01em; }
.announce__msg--in{ animation:annIn .45s ease; }
@keyframes annIn{ from{ opacity:0; transform:translateY(-55%); } to{ opacity:1; transform:none; } }

/* ---------- AVISO DE MAYOREO (Lista 1 → consultá precios mayoristas) ---------- */
.mayoreo{ background:#fff6e9; border-bottom:1px solid #f4e0bf; color:#7a521b; }
.mayoreo__inner{ display:flex; justify-content:center; align-items:center;
  padding:.5rem 1rem; text-align:center; }
.mayoreo__txt{ font-size:.86rem; font-weight:700; }

/* ---------- TOP BAR ---------- */
.topbar{
  background:var(--navy-deep);
  color:#c9d6f5;
  font-size:.8rem;
  font-weight:500;
}
.topbar__inner{ display:flex; align-items:center; gap:.5rem; padding:.45rem 0; flex-wrap:wrap; }
.topbar a:hover{ color:#fff; }
.topbar__sep{ opacity:.4; }
.topbar__grow{ flex:1; }
.topbar__ship{ background:var(--blue); color:#fff; padding:.2rem .7rem; border-radius:4px; font-weight:600; }
.wa-ico{ width:1em; height:1em; vertical-align:-.13em; margin-right:.25em; flex:0 0 auto; }
.wa-contact .wa-ico{ width:15px; height:15px; }
.topbar__contacts{ display:inline-flex; align-items:center; gap:.5rem; flex-wrap:wrap; }
.wa-contact{ display:inline-flex; align-items:center; gap:.25rem; white-space:nowrap; font-weight:600; }
.wa-contact:hover{ color:#fff; }
/* contactos en el pie: en columna */
.footer__contacts{ display:flex; flex-direction:column; gap:.4rem; margin-bottom:.5rem; }
.footer__contacts .wa-contact{ color:#c9d6f5; font-size:.86rem; font-weight:500; }

/* ---------- HEADER ---------- */
.header{
  position:sticky; top:0; z-index:50;
  background:var(--white);
  box-shadow:var(--shadow-sm);
}
.header__inner{
  display:flex; align-items:center; gap:1.5rem;
  padding:.7rem 0;
}
.brand__logo{ height:54px; width:auto; }

.search{
  flex:1; position:relative;
  display:flex; align-items:center;
  background:var(--bg);
  border:2px solid var(--line);
  border-radius:8px;
  padding:.1rem .3rem;
  transition:border-color .15s, box-shadow .15s;
}
.search:focus-within{ border-color:var(--blue); box-shadow:0 0 0 4px var(--blue-light); }
.search__icon{ padding:0 .3rem 0 .8rem; opacity:.6; display:inline-flex; }
.search__icon svg{ width:18px; height:18px; display:block; }
.search input{
  flex:1; border:0; background:transparent; outline:0;
  padding:.65rem .4rem; font-size:.95rem; font-family:inherit; color:var(--ink);
}

.header__actions{ display:flex; align-items:center; gap:.5rem; }

/* Toggle de listas de precio */
.pricetoggle{
  display:flex; background:var(--bg); border:2px solid var(--line);
  border-radius:7px; padding:3px; margin-right:.3rem;
}
.pricetoggle button{
  border:0; background:transparent; cursor:pointer;
  font-family:inherit; font-weight:700; font-size:.78rem;
  color:var(--muted); padding:.4rem .8rem; border-radius:5px;
  transition:.15s;
}
.pricetoggle button.active{ background:var(--navy); color:#fff; box-shadow:var(--shadow-sm); }

.iconbtn{
  position:relative; border:0; background:transparent; cursor:pointer;
  font-family:inherit; color:var(--ink);
  display:flex; flex-direction:column; align-items:center; gap:.1rem;
  padding:.35rem .55rem; border-radius:8px; transition:background .15s;
  min-width:58px;
}
.iconbtn:hover{ background:var(--bg); }
.iconbtn__ico{ font-size:1.25rem; line-height:1; display:inline-flex; }
.iconbtn__ico svg{ width:23px; height:23px; display:block; }
.iconbtn__label{ font-size:.65rem; font-weight:600; color:var(--muted); }
.iconbtn--cart .iconbtn__ico{ color:var(--navy); }
.badge{
  position:absolute; top:0; right:4px;
  background:var(--green); color:#fff;
  font-size:.65rem; font-weight:800;
  min-width:18px; height:18px; padding:0 4px;
  border-radius:999px; display:grid; place-items:center;
  transform:scale(0); transition:transform .18s;
}
.badge.show{ transform:scale(1); }

/* Nav categorías (strip de chips con flechas).
   Franja clara con letras oscuras (negro) para máximo contraste y un look más sobrio
   que la barra azul anterior con texto lavado. */
.catnav{ background:#fff; border-top:1px solid var(--line); border-bottom:1px solid var(--line); }
.catnav__wrap{ position:relative; display:flex; align-items:center; gap:.2rem; }
.catnav__inner{ display:flex; gap:.45rem; padding:.55rem 0; overflow-x:auto; flex:1; min-width:0; scroll-behavior:smooth; scrollbar-width:none; }
.catnav__inner::-webkit-scrollbar{ height:0; }
.catnav__arrow{
  flex:0 0 auto; border:1px solid var(--line); cursor:pointer; width:30px; height:30px; border-radius:50%;
  background:var(--bg); color:var(--navy); font-size:1.3rem; line-height:1;
  display:none; align-items:center; justify-content:center; transition:.15s; z-index:2;
}
.catnav__arrow:hover{ background:var(--blue-light); }
.catnav__wrap.can-left .catnav__arrow--l{ display:flex; }
.catnav__wrap.can-right .catnav__arrow--r{ display:flex; }
.catnav__wrap.can-left::before, .catnav__wrap.can-right::after{
  content:""; position:absolute; top:0; bottom:0; width:40px; z-index:1; pointer-events:none;
}
.catnav__wrap.can-left::before{ left:30px; background:linear-gradient(90deg,#fff,transparent); }
.catnav__wrap.can-right::after{ right:30px; background:linear-gradient(270deg,#fff,transparent); }
.chip{
  white-space:nowrap; border:1px solid var(--line); cursor:pointer; flex:0 0 auto;
  font-family:inherit; font-weight:700; font-size:.85rem;
  color:var(--ink); background:var(--bg);
  padding:.42rem .85rem; border-radius:6px; transition:.15s;
}
.chip__txt{ display:inline-block; max-width:180px; overflow:hidden; text-overflow:ellipsis; vertical-align:bottom; }
.chip:hover{ background:var(--blue-light); color:var(--navy); border-color:#cfe0f6; }
.chip.active{ background:var(--navy); color:#fff; border-color:var(--navy); }
.chip--back{ background:#fff; color:var(--muted); font-weight:700; }
.chip--back:hover{ background:var(--bg); color:var(--ink); }
/* Accesos especiales (Novedades/Ofertas/Más vendidos) en el strip del catálogo */
.chip--virtual{ background:var(--blue-light); color:var(--navy); border-color:#cfe0f6; font-weight:800; }
.chip--virtual:hover{ background:#dce9fb; }
.chip--virtual.active{ background:var(--navy); color:#fff; border-color:var(--navy); }

/* Sidebar: acordeón segmento → categorías (los segmentos arrancan cerrados) */
.filterlist .fl-seg{ margin-top:.15rem; }
.filterlist .fl-seghdr{ font-weight:700; }
.filterlist .fl-caret{ flex:0 0 auto; width:14px; text-align:center; font-size:.7rem; color:var(--muted); transition:transform .18s ease; }
.filterlist .fl-seg.open .fl-caret{ transform:rotate(90deg); }
.filterlist .fl-seghdr.active .fl-caret{ color:var(--navy); }
.filterlist .fl-sub{ list-style:none; margin:.1rem 0 .35rem; padding:0 0 0 1.15rem; border-left:2px solid var(--line); display:flex; flex-direction:column; gap:.1rem; }
.filterlist .fl-sub button{ font-size:.82rem; }
.filterlist .fl-sub .flname{ font-weight:500; }
.filterlist .fl-all button{ font-weight:700; }

/* ---------- CARRUSEL DE BANNERS (portada) ---------- */
.carousel{ background:var(--navy-deep); }
.carousel__viewport{ position:relative; width:min(1200px,100%); margin-inline:auto; overflow:hidden; }
.carousel__track{ display:flex; transition:transform .5s cubic-bezier(.4,0,.2,1); }
/* Los flyers son banners apaisados (2:1). El slide toma su misma proporción para
   que la imagen llene el marco completa, sin barras ni fondo difuminado. */
.carousel__slide{
  position:relative; flex:0 0 100%; aspect-ratio:2/1;
  display:grid; place-items:center; overflow:hidden; background:var(--navy-deep);
}
.carousel__img{ position:absolute; inset:0; z-index:1; width:100%; height:100%; object-fit:cover; }
.carousel__arrow{
  position:absolute; top:50%; transform:translateY(-50%); z-index:2;
  width:42px; height:42px; border:0; border-radius:50%; cursor:pointer;
  background:rgba(255,255,255,.85); color:var(--navy); font-size:1.6rem; line-height:1;
  display:grid; place-items:center; box-shadow:var(--shadow-sm); transition:.15s;
}
.carousel__arrow:hover{ background:#fff; }
.carousel__arrow--l{ left:14px; }
.carousel__arrow--r{ right:14px; }
.carousel__dots{
  position:absolute; bottom:12px; left:50%; transform:translateX(-50%); z-index:2;
  display:flex; gap:.45rem;
}
.carousel__dot{
  width:9px; height:9px; border-radius:50%; border:0; cursor:pointer; padding:0;
  background:rgba(255,255,255,.5); transition:.15s;
}
.carousel__dot.active{ background:#fff; width:22px; border-radius:999px; }
@media (max-width:560px){
  .carousel__arrow{ width:34px; height:34px; font-size:1.3rem; }
}

/* ---------- HERO ---------- */
.hero{
  background:
    radial-gradient(circle at 80% 20%, rgba(30,111,214,.45), transparent 55%),
    linear-gradient(135deg, var(--navy) 0%, var(--navy-deep) 100%);
  color:#fff; position:relative; overflow:hidden;
}
.hero::after{
  content:""; position:absolute; right:-120px; bottom:-120px;
  width:360px; height:360px; border-radius:50%;
  background:rgba(255,255,255,.05);
}
.hero__inner{ display:flex; align-items:center; gap:2rem; padding:3.2rem 0; }
.hero__text{ flex:1; }
.hero__kicker{ text-transform:uppercase; letter-spacing:.12em; font-weight:700; font-size:.8rem; color:#7fa8ee; margin-bottom:.6rem; }
.hero h1{ font-size:clamp(1.9rem,4vw,3.1rem); font-weight:900; line-height:1.08; }
.hero h1 span{ color:#6fb0ff; }
.hero__sub{ margin:1rem 0 1.6rem; max-width:34rem; color:#c9d6f5; font-size:1.02rem; }
.seal{
  width:150px; height:150px; border-radius:50%;
  background:var(--green); color:#fff;
  display:grid; place-content:center; text-align:center;
  box-shadow:0 12px 30px rgba(52,168,83,.45);
  border:5px solid rgba(255,255,255,.25);
  transform:rotate(-8deg);
}
.seal__leaf{ font-size:1.6rem; display:inline-flex; }
.seal__leaf svg{ width:24px; height:24px; display:block; margin:0 auto .1rem; }
.seal strong{ font-size:1rem; font-weight:900; letter-spacing:.04em; }
.seal span{ font-size:.7rem; font-weight:700; letter-spacing:.05em; }

/* ---------- ACCESOS DIRECTOS (portada) ---------- */
.accesos{ padding:2.6rem 0 3rem; }
.accesos__title{ font-size:1.35rem; font-weight:800; color:var(--navy); margin-bottom:1.1rem; }
.accesos__title--rubros{ margin-top:2.4rem; }

.accesos__grid{ display:grid; grid-template-columns:repeat(4,1fr); gap:1rem; }
.acceso{
  display:flex; align-items:center; gap:.9rem; text-align:left;
  background:#fff; border:1px solid var(--line); border-radius:var(--radius);
  box-shadow:var(--shadow-sm); cursor:pointer; font-family:inherit;
  padding:1.15rem 1.1rem; transition:transform .15s, box-shadow .15s, border-color .15s;
  position:relative; overflow:hidden;
}
.acceso::before{ content:""; position:absolute; left:0; top:0; bottom:0; width:4px; background:var(--navy); }
.acceso:hover{ transform:translateY(-3px); box-shadow:var(--shadow-md); border-color:#cfe0f6; }
.acceso--nov::before{ background:var(--blue); }
.acceso--ofe::before{ background:var(--green); }
.acceso--mv::before{ background:#e0a000; }
.acceso--todo::before{ background:var(--navy); }
.acceso__ico{
  flex:0 0 auto; width:50px; height:50px; border-radius:12px;
  display:grid; place-items:center; background:var(--blue-light); color:var(--navy);
}
.acceso__ico svg{ width:27px; height:27px; }
.acceso--ofe .acceso__ico{ background:#e7f6ec; color:var(--green-dark); }
.acceso--mv .acceso__ico{ background:#fcf3da; color:#b07d00; }
.acceso__txt{ flex:1; min-width:0; display:flex; flex-direction:column; gap:.15rem; }
.acceso__name{ font-size:1rem; font-weight:800; color:var(--ink); line-height:1.15; }
.acceso__sub{ font-size:.78rem; color:var(--muted); font-weight:500; line-height:1.2; }
.acceso__count{
  flex:0 0 auto; align-self:flex-start; font-size:.72rem; font-weight:800; color:var(--navy);
  background:var(--bg); border:1px solid var(--line); border-radius:999px; padding:.12rem .55rem;
}

/* Rubros (familias) — botones compactos en grilla */
.rubros__grid{ display:grid; grid-template-columns:repeat(4,1fr); gap:.7rem; }
.rubro{
  display:flex; align-items:center; justify-content:space-between; gap:.6rem;
  background:#fff; border:1px solid var(--line); border-radius:var(--radius);
  cursor:pointer; font-family:inherit; padding:.85rem 1rem; transition:.12s; text-align:left;
}
.rubro:hover{ background:var(--blue-light); border-color:#cfe0f6; }
.rubro__name{ font-size:.9rem; font-weight:700; color:var(--ink); line-height:1.2; }
.rubro__count{ flex:0 0 auto; font-size:.72rem; font-weight:700; color:var(--muted);
  background:var(--bg); border-radius:5px; padding:.05rem .45rem; }
.rubro:hover .rubro__count{ background:#fff; }

@media (max-width:760px){
  .accesos__grid{ grid-template-columns:repeat(2,1fr); gap:.7rem; }
  .rubros__grid{ grid-template-columns:repeat(2,1fr); }
}
@media (max-width:560px){
  .accesos{ padding:1.6rem 0 2rem; }
  .accesos__title{ font-size:1.15rem; margin-bottom:.8rem; }
  .accesos__title--rubros{ margin-top:1.8rem; }
  .acceso{ flex-direction:column; align-items:flex-start; gap:.6rem; padding:.9rem .85rem; }
  .acceso__ico{ width:42px; height:42px; }
  .acceso__ico svg{ width:23px; height:23px; }
  .acceso__name{ font-size:.92rem; }
  .acceso__sub{ font-size:.72rem; }
  .acceso__count{ position:absolute; top:.7rem; right:.7rem; }
}

/* Botón "volver al inicio" en la vista catálogo */
.catback{
  display:inline-flex; align-items:center; gap:.35rem; margin-bottom:1.1rem;
  background:#fff; border:1px solid var(--line); border-radius:7px; cursor:pointer;
  font-family:inherit; font-weight:700; font-size:.85rem; color:var(--navy);
  padding:.5rem .85rem; transition:.12s;
}
.catback:hover{ background:var(--blue-light); border-color:#cfe0f6; }
.catback svg{ width:16px; height:16px; }

/* ---------- BENEFITS ---------- */
.benefits{ background:var(--navy-dark); }
.benefits__inner{ display:grid; grid-template-columns:repeat(4,1fr); gap:1rem; padding:1.1rem 0; }
.benefit{ display:flex; align-items:center; gap:.7rem; color:#fff; }
.benefit span{ font-size:1.6rem; display:inline-flex; flex:0 0 auto; }
.benefit span svg{ width:27px; height:27px; display:block; opacity:.92; }
.benefit strong{ display:block; font-size:.9rem; }
.benefit small{ color:#9fb3e0; font-size:.75rem; }

/* ---------- SECTIONS ---------- */
.section{ padding:3rem 0; }
.section--alt{ background:linear-gradient(180deg,#eef3fb,#f4f7fc); }
.section__head{ text-align:center; margin-bottom:1.8rem; }
.section__head h2{ font-size:1.6rem; font-weight:800; color:var(--navy); }
.section__head p{ color:var(--muted); }

/* ---------- GRID & CARDS ---------- */
.grid{ display:grid; grid-template-columns:repeat(auto-fill,minmax(220px,1fr)); gap:1.1rem; }
.grid--featured{ grid-template-columns:repeat(auto-fill,minmax(230px,1fr)); }

/* ---------- VITRINAS (fila horizontal scrolleable) ---------- */
.shelf-section{ padding:1.7rem 0; }
.shelf-section:nth-of-type(even){ background:linear-gradient(180deg,#eef3fb,#f4f7fc); }
.shelf__head{ display:flex; align-items:flex-end; justify-content:space-between; gap:1rem; margin-bottom:1rem; }
.shelf__head h2{ font-size:1.4rem; font-weight:800; color:var(--navy); line-height:1.1; }
.shelf__head p{ color:var(--muted); font-size:.88rem; }
.shelf__all{ flex:0 0 auto; border:1px solid var(--line); background:#fff; color:var(--navy);
  font-family:inherit; font-weight:700; font-size:.82rem; cursor:pointer; padding:.5rem .9rem;
  border-radius:7px; transition:.12s; white-space:nowrap; }
.shelf__all:hover{ background:var(--blue-light); border-color:#cfe0f6; }
.shelf{ display:flex; gap:1.1rem; overflow-x:auto; scroll-snap-type:x proximity;
  padding:.2rem .2rem .7rem; margin:0 -.2rem; scrollbar-width:thin; scrollbar-color:var(--line) transparent; }
.shelf > .card{ flex:0 0 210px; scroll-snap-align:start; }
.shelf::-webkit-scrollbar{ height:8px; }
.shelf::-webkit-scrollbar-thumb{ background:var(--line); border-radius:999px; }
.shelf::-webkit-scrollbar-track{ background:transparent; }
@media (max-width:560px){
  .shelf > .card{ flex:0 0 158px; }
  .shelf__head h2{ font-size:1.2rem; }
  .shelf__all{ font-size:.76rem; padding:.45rem .7rem; }
}

.card{
  background:#fff; border:1px solid var(--line); border-radius:var(--radius);
  overflow:hidden; display:flex; flex-direction:column;
  transition:transform .15s, box-shadow .15s; position:relative;
}
.card:hover{ transform:translateY(-4px); box-shadow:var(--shadow-md); }
.card__media{
  aspect-ratio:1/1; display:grid; place-items:center; position:relative;
  background:linear-gradient(135deg,#eef3fb,#dde8fa);
}
.card__media .glyph{ font-size:3.2rem; filter:drop-shadow(0 6px 10px rgba(11,42,135,.18)); opacity:.9; }
.card__media--ph{ background:linear-gradient(135deg,#eef3fb,#dde8fa); }
.ph-svg{ width:62px; height:62px; color:var(--navy); opacity:.22; }
.card__img{ width:100%; height:100%; object-fit:cover; position:absolute; inset:0; }
.card__cat{
  position:absolute; top:10px; left:10px;
  background:var(--navy); color:#fff; font-size:.62rem; font-weight:700;
  text-transform:uppercase; letter-spacing:.04em;
  padding:.22rem .5rem; border-radius:4px;
  max-width:calc(100% - 56px); white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
}
.card__fav{
  position:absolute; top:9px; right:9px;
  width:36px; height:36px; border-radius:50%; border:0; cursor:pointer;
  background:rgba(255,255,255,.95); box-shadow:0 2px 9px rgba(11,42,135,.20);
  color:#aab4c7; display:grid; place-items:center;
  transition:transform .15s, background .15s, color .15s;
}
.card__fav svg{ width:19px; height:19px; fill:transparent; stroke:currentColor; stroke-width:1.9; transition:.15s; }
.card__fav:hover{ transform:scale(1.12); color:#e63950; background:#fff; }
.card__fav.active{ color:#e63950; }
.card__fav.active svg{ fill:#e63950; stroke:#e63950; animation:heartpop .3s ease; }
@keyframes heartpop{ 0%{ transform:scale(.6);} 55%{ transform:scale(1.3);} 100%{ transform:scale(1);} }

.card__body{ padding:.85rem .9rem 1rem; display:flex; flex-direction:column; gap:.4rem; flex:1; }
.card__code{ font-size:.66rem; color:var(--muted); font-weight:600; letter-spacing:.03em; }
.card__name{ font-size:.98rem; font-weight:700; line-height:1.25; color:var(--ink);
  display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden; }
.card__obs{ font-size:.76rem; color:var(--muted); line-height:1.35;
  display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden; }
.card__price-row{ display:flex; align-items:baseline; gap:.4rem; margin-top:auto; }
.card__price{ font-size:1.3rem; font-weight:900; color:var(--navy); }
.card__unit{ font-size:.72rem; color:var(--muted); font-weight:600; }

.card__actions{ display:flex; gap:.4rem; margin-top:.3rem; }
.qty{ display:flex; align-items:center; border:2px solid var(--line); border-radius:7px; overflow:hidden; }
.qty button{ width:30px; height:38px; border:0; background:var(--bg); cursor:pointer; font-size:1.1rem; font-weight:700; color:var(--navy); }
.qty button:hover{ background:var(--blue-light); }
.qty input{ width:38px; border:0; text-align:center; font-family:inherit; font-weight:700; font-size:.9rem; outline:0; }
.card__add{
  flex:1; border:0; cursor:pointer; border-radius:7px;
  background:var(--navy); color:#fff; font-family:inherit; font-weight:700; font-size:.85rem;
  display:flex; align-items:center; justify-content:center; gap:.35rem; transition:.15s;
}
.card__add:hover{ background:var(--blue); }
.card__wa{
  display:flex; align-items:center; gap:.3rem; justify-content:center;
  font-size:.72rem; font-weight:600; color:var(--wa); margin-top:.2rem;
}
.card__wa .wa-ico{ width:15px; height:15px; }
.card__wa:hover{ text-decoration:underline; }

/* ---------- CATALOG LAYOUT ---------- */
.catalog{ display:grid; grid-template-columns:250px 1fr; gap:1.6rem; align-items:start; }
.catalog__side{ position:sticky; top:150px; background:#fff; border:1px solid var(--line); border-radius:var(--radius); padding:1.1rem; box-shadow:var(--shadow-sm); }
.catalog__side h3{ font-size:.95rem; color:var(--navy); margin-bottom:.7rem; }
.catfilter{ display:flex; align-items:center; gap:.4rem; background:var(--bg); border:2px solid var(--line);
  border-radius:10px; padding:.1rem .5rem; margin-bottom:.7rem; }
.catfilter span{ opacity:.55; font-size:.85rem; display:inline-flex; }
.catfilter span svg, .catalog__search-ico svg{ width:16px; height:16px; display:block; }
.catfilter input{ flex:1; border:0; background:transparent; outline:0; font-family:inherit; font-size:.84rem; padding:.45rem .1rem; color:var(--ink); }
.catfilter:focus-within{ border-color:var(--blue); }
.filterlist{ list-style:none; display:flex; flex-direction:column; gap:.15rem; max-height:calc(100vh - 320px); overflow-y:auto; padding-right:.2rem; }
.filterlist::-webkit-scrollbar{ width:7px; }
.filterlist::-webkit-scrollbar-thumb{ background:var(--line); border-radius:999px; }
.filterlist button{
  width:100%; text-align:left; border:0; cursor:pointer; background:transparent;
  font-family:inherit; font-size:.82rem; font-weight:600; color:var(--ink);
  padding:.4rem .5rem; border-radius:10px; display:flex; align-items:center; gap:.5rem;
  transition:.12s; min-width:0;
}
.filterlist button:hover{ background:var(--bg); }
.filterlist button.active{ background:var(--blue-light); color:var(--navy); }
.filterlist .flname{ flex:1; min-width:0; line-height:1.22; overflow-wrap:break-word; word-break:normal; }
.filterlist .count{ flex:0 0 auto; font-size:.72rem; color:var(--muted); font-weight:700; background:var(--bg); padding:.05rem .45rem; border-radius:5px; }
.filterlist button.active .count{ background:#fff; }
.filterlist__empty{ color:var(--muted); font-size:.82rem; padding:.6rem .5rem; }
/* miniatura de categoría */
.cthumb{ flex:0 0 auto; width:28px; height:28px; border-radius:8px; object-fit:cover; }
.cthumb--ph{ display:grid; place-items:center; background:linear-gradient(135deg,#eef3fb,#dde8fa); }
.cthumb--ph .ph-svg{ width:17px; height:17px; }
.favfilter{ margin-top:1rem; padding-top:1rem; border-top:1px solid var(--line); }
.switch{ display:flex; align-items:center; gap:.5rem; font-size:.82rem; font-weight:600; cursor:pointer; color:var(--ink); }
.switch input{ width:18px; height:18px; accent-color:var(--navy); }

.catalog__search{ display:flex; align-items:center; gap:.5rem; background:#fff; border:2px solid var(--line);
  border-radius:8px; padding:.15rem .9rem; margin-bottom:1rem; box-shadow:var(--shadow-sm); transition:border-color .15s, box-shadow .15s; }
.catalog__search:focus-within{ border-color:var(--blue); box-shadow:0 0 0 4px var(--blue-light); }
.catalog__search-ico{ opacity:.55; display:inline-flex; }
.catalog__search input{ flex:1; border:0; background:transparent; outline:0; font-family:inherit; font-size:.95rem; padding:.7rem .2rem; color:var(--ink); }

.catalog__bar{ display:flex; align-items:baseline; gap:.6rem; margin-bottom:1.1rem; }
.catalog__bar h2{ font-size:1.4rem; color:var(--navy); font-weight:800; }
.catalog__count{ color:var(--muted); font-size:.85rem; font-weight:600; }
.catalog__list{ margin-left:auto; font-size:.78rem; font-weight:800; color:var(--navy);
  background:var(--blue-light); border:1px solid #dbe6fa; border-radius:999px; padding:.12rem .6rem; white-space:nowrap; }
.empty{ text-align:center; padding:3rem 1rem; color:var(--muted); font-weight:600; }

/* ---------- PAGINACIÓN (anterior | número | siguiente) ---------- */
.pagination{ display:flex; flex-wrap:wrap; align-items:center; justify-content:center; gap:.4rem; margin-top:1.8rem; }
.pagination .pg__nums{ display:flex; flex-wrap:wrap; align-items:center; gap:.3rem; }
.pg{
  min-width:38px; height:38px; padding:0 .6rem; border:1px solid var(--line); background:#fff;
  color:var(--ink); font-family:inherit; font-weight:700; font-size:.85rem; cursor:pointer;
  border-radius:7px; display:inline-flex; align-items:center; justify-content:center; transition:.12s;
}
.pg:hover:not(:disabled):not(.active){ background:var(--blue-light); border-color:#cfe0f6; color:var(--navy); }
.pg.active{ background:var(--navy); color:#fff; border-color:var(--navy); cursor:default; }
.pg--step{ font-weight:700; }
.pg:disabled{ opacity:.45; cursor:default; }
.pg--gap{ border:0; background:transparent; min-width:auto; padding:0 .2rem; color:var(--muted); cursor:default; }
@media (max-width:560px){
  .pg{ min-width:34px; height:34px; font-size:.8rem; padding:0 .45rem; }
  .pg--step{ font-size:0; padding:0 .55rem; }          /* en móvil, solo la flecha */
  .pg--step::before{ font-size:1.1rem; }
  .pg--step[data-page="prev"]::before{ content:"‹"; }
  .pg--step[data-page="next"]::before{ content:"›"; }
}

/* ---------- INFORMACIÓN ÚTIL ---------- */
.info{ background:var(--bg); padding:2.6rem 0 2.2rem; border-top:1px solid var(--line); }
.info__title{ color:var(--navy); font-size:1.5rem; text-align:center; }
.info__lead{ text-align:center; color:var(--muted); max-width:640px; margin:.5rem auto 1.6rem; font-size:.92rem; }
.info__grid{ display:grid; grid-template-columns:repeat(2,1fr); gap:.9rem; max-width:920px; margin-inline:auto; align-items:start; }
.info__item{ background:#fff; border:1px solid var(--line); border-radius:var(--radius); box-shadow:var(--shadow-sm); overflow:hidden; }
.info__item summary{ cursor:pointer; list-style:none; padding:1rem 1.2rem; font-weight:700; color:var(--navy); display:flex; align-items:center; gap:.5rem; }
.info__item summary::-webkit-details-marker{ display:none; }
.info__item summary::after{ content:"+"; margin-left:auto; font-size:1.25rem; line-height:1; color:var(--blue); font-weight:700; }
.info__item[open] summary::after{ content:"–"; }
.info__body{ padding:0 1.2rem 1.1rem; }
.info__body p{ font-size:.86rem; color:var(--ink); margin-bottom:.5rem; line-height:1.55; }
.info__body p:last-child{ margin-bottom:0; }
.info__muted{ color:var(--muted) !important; font-size:.8rem !important; }
.info__link{ color:var(--blue); font-weight:700; font-size:.86rem; }
.info__link:hover{ text-decoration:underline; }
.info__draft{ text-align:center; color:var(--muted); font-size:.8rem; margin-top:1.5rem; }
@media (max-width:720px){ .info__grid{ grid-template-columns:1fr; } }

/* ---------- PÁGINA LEGAL / INFORMATIVA ---------- */
.header__inner--simple{ justify-content:space-between; }
.legal__back{ color:var(--navy); font-weight:700; font-size:.88rem; }
.legal__back:hover{ color:var(--blue); }
.legal{ background:var(--bg); padding:2.2rem 0 3rem; min-height:62vh; }
.legal__wrap{ max-width:760px; margin-inline:auto; background:#fff; border:1px solid var(--line); border-radius:var(--radius); box-shadow:var(--shadow-sm); padding:2rem 2.2rem; }
.legal__crumb{ font-size:.78rem; color:var(--muted); margin-bottom:.8rem; }
.legal__crumb a{ color:var(--blue); }
.legal__title{ color:var(--navy); font-size:1.8rem; margin-bottom:.5rem; }
.legal__lead{ color:var(--muted); font-size:.95rem; margin-bottom:1.6rem; }
.legal__sec{ margin-bottom:1.5rem; }
.legal__sec h2{ color:var(--navy); font-size:1.1rem; margin-bottom:.5rem; }
.legal__sec p{ font-size:.9rem; line-height:1.6; color:var(--ink); margin-bottom:.5rem; }
.legal__sec ul, .legal__sec ol{ padding-left:1.2rem; }
.legal__sec li{ font-size:.9rem; line-height:1.6; color:var(--ink); margin-bottom:.35rem; }
.legal__cta-row{ margin-top:1rem; }
.legal__note{ font-size:.8rem; color:var(--muted); border-top:1px solid var(--line); padding-top:1rem; margin-top:1.5rem; }
@media (max-width:600px){ .legal__wrap{ padding:1.4rem 1.2rem; } }

/* ---------- FOOTER ---------- */
.footer{ background:var(--navy-deep); color:#c9d6f5; margin-top:0; }
.footer__inner{ display:grid; grid-template-columns:1.4fr 1fr 1fr; gap:2rem; padding:2.6rem 0; }
.footer__logo{ height:50px; background:#fff; padding:6px 10px; border-radius:10px; margin-bottom:.8rem; }
.footer__col h4{ color:#fff; margin-bottom:.7rem; font-size:1rem; }
.footer__col p{ font-size:.86rem; margin-bottom:.35rem; }
.footer__col a:hover{ color:#fff; }
.footer__pay{ margin-top:.6rem; font-size:.78rem; color:#8aa0d4; }
.footer__bottom{ border-top:1px solid rgba(255,255,255,.1); padding:1rem 0; font-size:.78rem; text-align:center; color:#7e92c4; }

/* ---------- WHATSAPP FLOAT ---------- */
.wafloat{
  position:fixed; right:20px; bottom:20px; z-index:40;
  width:58px; height:58px; border-radius:50%;
  background:var(--wa); color:#fff; display:grid; place-items:center;
  box-shadow:0 10px 26px rgba(37,211,102,.5);
  transition:transform .15s;
}
.wafloat svg{ width:34px; height:34px; }
.wafloat:hover{ transform:scale(1.08); }

/* ---------- DRAWER ---------- */
.overlay{ position:fixed; inset:0; background:rgba(5,15,61,.5); z-index:60; backdrop-filter:blur(2px); }
.drawer{
  position:fixed; top:0; right:0; height:100%; width:min(420px,100%);
  background:#fff; z-index:70; transform:translateX(100%);
  transition:transform .28s cubic-bezier(.4,0,.2,1);
  display:flex; flex-direction:column; box-shadow:var(--shadow-lg);
}
.drawer.open{ transform:translateX(0); }
.drawer__head{ display:flex; align-items:center; justify-content:space-between; padding:1.1rem 1.2rem; background:var(--navy); color:#fff; }
.drawer__head h3{ font-size:1.1rem; }
.drawer__close{ border:0; background:transparent; color:#fff; font-size:1.3rem; cursor:pointer; }
.drawer__body{ flex:1; overflow-y:auto; overscroll-behavior:contain; padding:1rem 1.2rem; display:flex; flex-direction:column; gap:.8rem; }
.drawer__empty{ text-align:center; color:var(--muted); padding:3rem 1rem; }
.drawer__empty span{ font-size:3rem; display:block; margin-bottom:.5rem; }
.drawer__empty span svg{ width:48px; height:48px; display:block; margin:0 auto; opacity:.55; }

.citem{ display:flex; gap:.7rem; align-items:center; border:1px solid var(--line); border-radius:8px; padding:.6rem; }
.citem__glyph{ width:46px; height:46px; border-radius:7px; display:grid; place-items:center; background:var(--blue-light); flex-shrink:0; overflow:hidden; }
.citem__glyph--img{ background:#fff; }
.citem__img{ width:100%; height:100%; object-fit:cover; }
.citem__glyph .ph-svg{ width:55%; height:55%; }
.citem__info{ flex:1; min-width:0; }
.citem__name{ font-size:.85rem; font-weight:700; line-height:1.2; }
.citem__price{ font-size:.78rem; color:var(--muted); font-weight:600; }
.citem__qty{ display:flex; align-items:center; gap:.3rem; }
.citem__qty button{ width:26px; height:26px; border:1px solid var(--line); background:#fff; border-radius:7px; cursor:pointer; font-weight:700; color:var(--navy); }
.citem__qty span{ min-width:22px; text-align:center; font-weight:700; font-size:.85rem; }
.citem__del{ border:0; background:transparent; cursor:pointer; color:#c2ccde; font-size:1rem; }
.citem__del:hover{ color:#e63950; }

.drawer__foot{ border-top:1px solid var(--line); padding:1.1rem 1.2rem; }
.drawer__total{ display:flex; justify-content:space-between; align-items:baseline; margin-bottom:.3rem; }
.drawer__total strong{ font-size:1.5rem; color:var(--navy); }
.drawer__min{ font-size:.78rem; font-weight:700; color:#9a3412; background:#fff7ed; border:1px solid #fed7aa; border-radius:8px; padding:.45rem .6rem; margin-bottom:.6rem; }
.drawer__note{ font-size:.72rem; color:var(--muted); margin-bottom:.8rem; }

/* ---------- BUTTONS ---------- */
.btn{ border:0; cursor:pointer; font-family:inherit; font-weight:700; border-radius:7px; padding:.85rem 1.4rem; transition:.15s; display:inline-flex; align-items:center; justify-content:center; gap:.5rem; font-size:.95rem; }
.btn .wa-ico{ width:18px; height:18px; }
.btn--primary{ background:#fff; color:var(--navy); }
.hero .btn--primary{ box-shadow:var(--shadow-md); }
.btn--primary:hover{ background:#eaf1ff; }
.btn--wa{ background:var(--wa); color:#fff; width:100%; font-size:1rem; }
.btn--wa:hover{ background:#1fb858; }

/* ---------- MODAL ---------- */
.modal{ position:fixed; inset:0; background:rgba(5,15,61,.55); z-index:80; display:grid; place-items:center; padding:1rem; backdrop-filter:blur(3px); }
.modal__card{ background:#fff; border-radius:10px; padding:2rem; width:min(380px,100%); position:relative; box-shadow:var(--shadow-lg); text-align:center; max-height:calc(100dvh - 2rem); overflow-y:auto; overscroll-behavior:contain; }
.modal__close{ position:absolute; top:14px; right:14px; border:0; background:transparent; font-size:1.2rem; cursor:pointer; color:var(--muted); }
.modal__logo{ height:54px; margin:0 auto .8rem; }
.modal__card h3{ color:var(--navy); font-size:1.3rem; }
.modal__sub{ color:var(--muted); font-size:.85rem; margin:.5rem 0 1.3rem; }
.modal__form{ display:flex; flex-direction:column; gap:.9rem; text-align:left; }
.modal__form label{ font-size:.8rem; font-weight:700; color:var(--ink); display:flex; flex-direction:column; gap:.3rem; }
.modal__form input{ border:2px solid var(--line); border-radius:10px; padding:.7rem .8rem; font-family:inherit; font-size:.95rem; outline:0; }
.modal__form input:focus{ border-color:var(--blue); }
.modal__form .btn{ margin-top:.4rem; background:var(--navy); color:#fff; }
.modal__form .btn:hover{ background:var(--blue); }
.modal__hint{ font-size:.76rem; color:var(--muted); margin-top:1rem; }

/* ---------- PRECIO BLOQUEADO (invitado) ---------- */
.card__locked{ margin-top:auto; display:flex; flex-direction:column; gap:.4rem; }
.card__locked .card__unit{ font-size:.72rem; }
.card__login{
  border:2px dashed var(--line); background:var(--blue-light); color:var(--navy);
  font-family:inherit; font-weight:700; font-size:.78rem; cursor:pointer;
  padding:.6rem .5rem; border-radius:10px; transition:.15s; line-height:1.2;
}
.card__login:hover{ background:#d8e6fb; border-color:var(--blue); }

/* ---------- BOTÓN GOOGLE / SEPARADOR ---------- */
.googlebox{ display:flex; flex-direction:column; align-items:center; gap:.6rem; margin-bottom:.4rem; }
.googlebox #googleBtn{ display:flex; justify-content:center; min-height:40px; }
.orsep{ position:relative; width:100%; text-align:center; margin:.2rem 0; }
.orsep::before{ content:""; position:absolute; top:50%; left:0; right:0; height:1px; background:var(--line); }
.orsep span{ position:relative; background:#fff; padding:0 .8rem; color:var(--muted); font-size:.78rem; font-weight:600; }

/* ---------- USER MENU ---------- */
.header__actions{ position:relative; }
.usermenu{
  position:absolute; top:calc(100% + 8px); right:0; z-index:60;
  background:#fff; border:1px solid var(--line); border-radius:8px;
  box-shadow:var(--shadow-md); padding:.4rem; min-width:190px;
  display:flex; flex-direction:column;
}
.usermenu a, .usermenu button{
  text-align:left; border:0; background:transparent; cursor:pointer;
  font-family:inherit; font-size:.85rem; font-weight:600; color:var(--ink);
  padding:.6rem .7rem; border-radius:8px;
}
.usermenu a:hover, .usermenu button:hover{ background:var(--bg); }
.usermenu button{ color:#e63950; border-top:1px solid var(--line); margin-top:.2rem; }

/* ---------- TABS (modal) ---------- */
.tabs{ display:flex; gap:.3rem; background:var(--bg); border-radius:10px; padding:4px; margin-bottom:1rem; }
.tab{ flex:1; border:0; background:transparent; cursor:pointer; font-family:inherit; font-weight:700; font-size:.85rem;
  color:var(--muted); padding:.55rem; border-radius:8px; transition:.15s; }
.tab.active{ background:#fff; color:var(--navy); box-shadow:var(--shadow-sm); }
.modal__error{ background:#fdecef; color:#c0283c; font-size:.8rem; font-weight:600; padding:.55rem .7rem; border-radius:8px; }
.opt{ color:var(--muted); font-weight:500; font-size:.8em; }

/* ---------- TOAST ---------- */
.toast{
  position:fixed; bottom:90px; left:50%; transform:translateX(-50%) translateY(20px);
  background:var(--navy); color:#fff; padding:.8rem 1.3rem; border-radius:8px;
  font-weight:600; font-size:.9rem; box-shadow:var(--shadow-lg); z-index:90;
  opacity:0; transition:.25s; pointer-events:none;
}
.toast.show{ opacity:1; transform:translateX(-50%) translateY(0); }

/* ---------- PÁGINAS INTERNAS (cuenta / admin) ---------- */
.page-title{ flex:1; font-size:1.3rem; color:var(--navy); font-weight:800; }
.btn--ghost{ background:var(--bg); color:var(--navy); border:2px solid var(--line); font-size:.85rem; padding:.5rem .9rem; }
.btn--ghost:hover{ background:var(--blue-light); }
.container.narrow{ max-width:560px; }
.card-box{ background:#fff; border:1px solid var(--line); border-radius:var(--radius); padding:2.5rem; text-align:center; box-shadow:var(--shadow-sm); }
.card-box h2{ color:var(--navy); margin-bottom:.5rem; }
.muted{ color:var(--muted); }

.account__head{ display:flex; align-items:center; gap:1rem; margin-bottom:1.5rem; }
.account__avatar{ width:64px; height:64px; border-radius:50%; background:var(--navy); color:#fff; display:grid; place-items:center; font-size:1.8rem; font-weight:800; }
.account__head h2{ color:var(--navy); }
.account__stats{ display:grid; grid-template-columns:repeat(3,1fr); gap:1rem; margin-bottom:2rem; }
.stat{ background:#fff; border:1px solid var(--line); border-radius:var(--radius); padding:1.2rem; text-align:center; box-shadow:var(--shadow-sm); }
.stat__num{ display:block; font-size:1.6rem; font-weight:900; color:var(--navy); }
.stat__lbl{ font-size:.78rem; color:var(--muted); font-weight:600; }
.account__section-title{ font-size:1.15rem; color:var(--navy); margin:1.8rem 0 1rem; }

/* Perfil editable (Mis datos) */
.profile-form{ text-align:left; padding:1.5rem; }
.profile-grid{ display:grid; grid-template-columns:repeat(2,1fr); gap:1rem; }
.profile-grid__full{ grid-column:1 / -1; }
.profile-form label{ font-size:.8rem; font-weight:700; color:var(--ink); display:flex; flex-direction:column; gap:.3rem; }
.profile-form input{ border:2px solid var(--line); border-radius:10px; padding:.65rem .8rem; font-family:inherit; font-size:.95rem; outline:0; font-weight:500; }
.profile-form input:focus{ border-color:var(--blue); }
.profile-form__foot{ display:flex; justify-content:space-between; align-items:center; gap:1rem; margin-top:1.2rem; flex-wrap:wrap; }
.form-error{ background:#fdecef; color:#c0283c; font-size:.8rem; font-weight:600; padding:.55rem .7rem; border-radius:8px; margin-top:.8rem; }
@media (max-width:560px){ .profile-grid{ grid-template-columns:1fr; } }

.orders{ display:flex; flex-direction:column; gap:1rem; }
.order{ background:#fff; border:1px solid var(--line); border-radius:var(--radius); padding:1.1rem 1.2rem; box-shadow:var(--shadow-sm); }
.order__head{ display:flex; justify-content:space-between; align-items:center; gap:.5rem; margin-bottom:.7rem; flex-wrap:wrap; }
.order__items{ list-style:none; display:flex; flex-direction:column; gap:.25rem; font-size:.88rem; padding-left:0; }
.order__nota{ font-size:.8rem; color:var(--muted); margin-top:.5rem; font-style:italic; }
.order__foot{ display:flex; justify-content:space-between; align-items:baseline; border-top:1px solid var(--line); margin-top:.7rem; padding-top:.7rem; }
.order__foot strong{ font-size:1.2rem; color:var(--navy); }
.order__actions{ display:flex; justify-content:flex-end; margin-top:.7rem; }
.order__actions .btn{ font-size:.82rem; padding:.5rem .9rem; }

.status{ font-size:.72rem; font-weight:800; padding:.28rem .6rem; border-radius:5px; white-space:nowrap; }
.st--pend{ background:#fff3d6; color:#9a6700; }
.st--prep{ background:#dcebff; color:#5b21b6; }
.st--ok{ background:#d6f5e0; color:#1c7d44; }
.st--cancel{ background:#fde0e0; color:#c0283c; }

/* ---------- RESPONSIVE ---------- */
@media (max-width:900px){
  .catalog{ grid-template-columns:minmax(0,1fr); }
  .catalog__main{ min-width:0; }
  .catalog__side{ position:static; }
  .benefits__inner{ grid-template-columns:repeat(2,1fr); }
  .footer__inner{ grid-template-columns:1fr; }
  .iconbtn__label{ display:none; }
  .hero__seal{ display:none; }
}
@media (max-width:560px){
  .header__inner{ flex-wrap:wrap; gap:.6rem 1rem; padding:.6rem 0; }
  .brand__logo{ height:44px; }
  .search{ order:3; width:100%; flex-basis:100%; }
  .pricetoggle button{ padding:.4rem .55rem; }

  /* Catálogo: grid de 2 columnas más compacto y prolijo */
  .grid{ grid-template-columns:repeat(2,minmax(0,1fr)); gap:.7rem; }
  .grid--featured{ grid-template-columns:repeat(2,minmax(0,1fr)); }
  .card__cat{ top:7px; left:7px; font-size:.55rem; padding:.18rem .45rem; max-width:calc(100% - 14px); }
  .card__fav{ top:6px; right:6px; width:30px; height:30px; }
  .card__fav svg{ width:16px; height:16px; }
  .card__body{ padding:.6rem .65rem .7rem; gap:.3rem; }
  .card__code{ font-size:.62rem; }
  .card__name{ font-size:.82rem; line-height:1.2; }
  .card__obs{ -webkit-line-clamp:1; font-size:.7rem; }
  .card__price{ font-size:1.1rem; }

  /* Acciones (cliente logueado): cantidad arriba, botón Agregar a lo ancho */
  .card__actions{ flex-wrap:wrap; }
  .card__add{ flex:1 0 100%; padding:.5rem; }
  .qty button{ width:34px; height:34px; }

  .card__login{ font-size:.72rem; padding:.5rem .4rem; }
  .card__wa{ font-size:.66rem; gap:.2rem; }

  .benefits__inner{ grid-template-columns:1fr 1fr; }

  /* Buscador y barra del catálogo */
  .catalog__bar{ flex-wrap:wrap; gap:.2rem .6rem; }
  .catalog__bar h2{ font-size:1.2rem; }
}

@media (max-width:340px){
  .grid, .grid--featured{ grid-template-columns:1fr; }
}