/* ============================================================
   Leizer Tienda — HEADER + FOOTER COMPARTIDOS (site-chrome)
   Layout del chrome que js/site-chrome.js inyecta en todas las
   páginas públicas. Los COLORES los sigue poniendo theme.css
   (que ya trae reglas !important para .header, .brand y footer);
   aquí solo va estructura, para que las páginas que nunca
   tuvieron footer (catálogo, galería, diseño, carrito, checkout…)
   lo tengan igual que index.html.

   Se carga ANTES de theme.css para que el tema siga mandando.
   ============================================================ */

/* ---------- Header ---------- */
.header{
  background:rgba(255,255,255,.85);
  backdrop-filter:blur(20px);-webkit-backdrop-filter:blur(20px);
  border-bottom:1px solid var(--border,rgba(34,26,43,.10));
  padding:0 24px;position:sticky;top:0;z-index:50;
}
.header-inner{
  max-width:1280px;margin:0 auto;display:flex;align-items:center;
  min-height:72px;gap:18px;
}
/* Reserva de altura: el header lo pinta JS, así evitamos el salto
   de layout (CLS) entre el HTML y la hidratación. */
[data-lz-header]{min-height:72px}

.brand{
  font-family:var(--font-serif,inherit);font-size:24px;font-weight:600;
  letter-spacing:-.5px;flex-shrink:0;color:var(--text,#221a2b);text-decoration:none;
}
.brand span{color:var(--orange,#f26b1f)}

.lz-nav{display:flex;gap:26px;margin-left:34px;flex:0 1 auto;min-width:0}
.lz-nav a{
  color:var(--text-soft,#4a4152);font-weight:500;font-size:14px;
  position:relative;transition:color .2s;text-decoration:none;white-space:nowrap;
}
.lz-nav a::after{
  content:'';position:absolute;bottom:-6px;left:0;width:0;height:2px;
  background:var(--orange,#f26b1f);transition:width .3s ease;
}
.lz-nav a:hover{color:var(--orange,#f26b1f)}
.lz-nav a:hover::after{width:100%}
.lz-nav a[aria-current="page"]{color:var(--orange,#f26b1f);font-weight:700}
.lz-nav a[aria-current="page"]::after{width:100%}

.header-right{display:flex;gap:10px;align-items:center;margin-left:auto}
/* Hueco para lo propio de cada página (buscador del catálogo, "Mi pedido"
   de la galería, candado de MercadoPago en el pago…). */
.lz-slot-center{flex:1 1 auto;min-width:0;display:flex;align-items:center}
/* Páginas con buscador en el header (catálogo): el buscador se queda con el
   centro y la navegación vive en el cajón, en cualquier ancho. Con la nav de
   6 ítems + el switcher el input se quedaba en 62px (medido a 1366 y 1440). */
.lz-has-center .lz-nav{display:none}
.lz-has-center .lz-burger{display:inline-flex}
.lz-slot-right{display:flex;gap:10px;align-items:center}

.cart-btn{
  position:relative;background:var(--surf-2,#fff1f6);
  border:1px solid var(--border,rgba(34,26,43,.10));padding:10px 16px;
  border-radius:999px;font-weight:600;color:var(--text,#221a2b);font-size:14px;
  text-decoration:none;transition:all .2s;
}
.cart-btn:hover{border-color:var(--orange,#f26b1f);color:var(--orange,#f26b1f)}
.cart-badge{
  position:absolute;top:-4px;right:-4px;background:var(--orange,#f26b1f);color:#fff;
  border-radius:999px;font-size:10px;padding:2px 6px;min-width:18px;
  text-align:center;font-weight:800;
}

/* ---------- Hamburguesa ---------- */
.lz-burger{
  display:none;align-items:center;justify-content:center;
  width:42px;height:42px;flex-shrink:0;
  background:var(--surf-2,#fff1f6);border:1px solid var(--border,rgba(34,26,43,.10));
  border-radius:14px;cursor:pointer;padding:0;
}
.lz-burger:hover{border-color:var(--orange,#f26b1f)}
.lz-burger-bars{display:block;width:18px;height:14px;position:relative}
.lz-burger-bars i{
  position:absolute;left:0;width:100%;height:2px;border-radius:2px;
  background:var(--text,#221a2b);transition:transform .25s ease,opacity .2s ease;
}
.lz-burger-bars i:nth-child(1){top:0}
.lz-burger-bars i:nth-child(2){top:6px}
.lz-burger-bars i:nth-child(3){top:12px}
.lz-burger[aria-expanded="true"] .lz-burger-bars i:nth-child(1){transform:translateY(6px) rotate(45deg)}
.lz-burger[aria-expanded="true"] .lz-burger-bars i:nth-child(2){opacity:0}
.lz-burger[aria-expanded="true"] .lz-burger-bars i:nth-child(3){transform:translateY(-6px) rotate(-45deg)}

/* ---------- Cajón (drawer) móvil ---------- */
.lz-drawer-backdrop{
  position:fixed;inset:0;background:rgba(34,26,43,.45);z-index:98;
  opacity:0;pointer-events:none;transition:opacity .22s ease;
}
.lz-drawer-backdrop.open{opacity:1;pointer-events:auto}
.lz-drawer{
  position:fixed;top:0;right:0;bottom:0;width:min(86vw,340px);z-index:99;
  background:var(--surf,#fff);box-shadow:-18px 0 48px -24px rgba(34,26,43,.5);
  transform:translateX(101%);transition:transform .26s cubic-bezier(.2,.8,.2,1);
  display:flex;flex-direction:column;overflow-y:auto;
  padding:18px 20px calc(24px + env(safe-area-inset-bottom));
}
.lz-drawer.open{transform:none}
/* `display:flex` de arriba le gana al display:none del UA para [hidden];
   hay que reponerlo o el cajón queda tabulable estando cerrado. */
.lz-drawer[hidden]{display:none}
.lz-drawer-head{display:flex;align-items:center;justify-content:space-between;margin-bottom:18px}
.lz-drawer-close{
  width:40px;height:40px;border-radius:12px;border:1px solid var(--border,rgba(34,26,43,.10));
  background:var(--surf-2,#fff1f6);font-size:20px;line-height:1;cursor:pointer;color:var(--text,#221a2b);
}
.lz-drawer-links{display:flex;flex-direction:column;gap:2px}
.lz-drawer-links a{
  display:flex;align-items:center;gap:10px;padding:13px 12px;border-radius:14px;
  font-size:15.5px;font-weight:600;color:var(--text,#221a2b);text-decoration:none;
}
.lz-drawer-links a:hover{background:var(--surf-2,#fff1f6)}
.lz-drawer-links a[aria-current="page"]{background:var(--surf-cream,#fff1e9);color:var(--orange-d,#c1490c)}
.lz-drawer-sep{height:1px;background:var(--border,rgba(34,26,43,.10));margin:14px 0}
.lz-drawer-title{
  font-size:11px;font-weight:800;letter-spacing:1.4px;text-transform:uppercase;
  color:var(--muted,#6b6072);margin:4px 0 8px 12px;
}
.lz-drawer-mini{display:flex;flex-wrap:wrap;gap:8px 16px;padding:0 12px}
.lz-drawer-mini a{font-size:13px;color:var(--muted,#6b6072);text-decoration:none}
.lz-drawer-mini a:hover{color:var(--orange,#f26b1f);text-decoration:underline}
.lz-drawer-cta{
  display:block;margin-top:16px;text-align:center;padding:13px 18px;border-radius:999px;
  background:linear-gradient(135deg,var(--orange-l,#ff8a3d),var(--orange,#f26b1f));
  color:#fff;font-weight:800;text-decoration:none;
}
body.lz-drawer-open{overflow:hidden}

/* ---------- Footer ---------- */
footer{
  background:var(--surf-cream,#fff1e9);
  border-top:1px solid var(--border,rgba(34,26,43,.10));
  padding:60px 24px 26px;
}
.footer-inner{
  max-width:1240px;margin:0 auto 40px;display:grid;
  grid-template-columns:1.4fr repeat(3,1fr);gap:40px;
}
.footer-brand{
  font-family:var(--font-serif,inherit);font-size:28px;font-weight:500;
  margin-bottom:14px;letter-spacing:-.5px;color:var(--text,#221a2b);
}
.footer-brand span{color:var(--orange,#f26b1f)}
.footer-desc{font-size:14px;color:var(--muted,#6b6072);line-height:1.7;max-width:300px}
.footer-col h4{
  font-size:11px;font-weight:700;text-transform:uppercase;letter-spacing:1.5px;
  margin-bottom:18px;color:var(--text,#221a2b);
}
.footer-col ul{list-style:none;display:flex;flex-direction:column;gap:10px;margin:0;padding:0}
.footer-col a{color:var(--muted,#6b6072);font-size:14px;transition:color .2s;text-decoration:none}
.footer-col a:hover{color:var(--orange,#f26b1f)}
.footer-bottom{
  max-width:1240px;margin:0 auto;border-top:1px solid var(--border,rgba(34,26,43,.10));
  padding-top:24px;display:flex;justify-content:space-between;
  font-size:12.5px;color:var(--muted,#6b6072);flex-wrap:wrap;gap:8px;
}
.lz-footer-credit{
  max-width:1240px;margin:14px auto 0;padding-top:12px;
  border-top:1px solid rgba(255,255,255,.05);
  text-align:center;font-size:11.5px;letter-spacing:.02em;
}
.lz-footer-credit a{font-weight:600;color:#f59e0b;text-decoration:none}

/* ---------- Responsive ---------- */
@media (max-width:1080px){
  .lz-nav{gap:18px;margin-left:22px}
  .lz-nav a{font-size:13.5px}
}
@media (max-width:900px){
  /* Debajo de este ancho la nav horizontal no cabe: pasa al cajón. */
  .lz-nav{display:none}
  .lz-burger{display:inline-flex}
  .header-inner{min-height:62px;gap:10px}
  [data-lz-header]{min-height:62px}
  .header{padding:0 14px}
  .brand{font-size:19px}
  /* En móvil el botón de cuenta vive en el cajón; el carrito se queda
     a la vista porque es el que convierte. */
  .header-right .lz-account{display:none}
  .footer-inner{grid-template-columns:1fr 1fr;gap:28px}
}
@media (max-width:600px){
  .footer-inner{grid-template-columns:1fr;gap:26px}
  .footer-bottom{flex-direction:column;align-items:flex-start}
  footer{padding:44px 20px 24px}
  .brand{font-size:17px}
  .cart-btn{padding:9px 13px}
}
@media (max-width:400px){
  .brand{font-size:15.5px}
  .header-inner{gap:8px}
}
@media (prefers-reduced-motion:reduce){
  .lz-drawer,.lz-drawer-backdrop,.lz-burger-bars i{transition:none}
}