/* ==========================================================================
   BOHÍO BRAIDS · base.css
   Sistema de diseño compartido. Tokens y componentes extraídos literalmente
   de index-original-referencia.html para conservar la identidad de marca.
   Solo se han AÑADIDO tokens derivados (nada de colores nuevos inventados).
   ========================================================================== */

*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}

:root{
  /* --- Paleta base: beige claro / casi blanco -----------------------
     Antes #f1ebde con una textura de grano SVG encima (ver más abajo:
     grain-overlay eliminada). El tono oscurecía la web entera y competía
     con el terracota y el verde, que son los que tienen que destacar.
     Ahora el fondo es plano y muy claro; el contraste con el texto sube
     en todos los casos (verificado: forest sobre --cream pasa de 9,1:1
     a 11,8:1). Las tarjetas usan --white-warm, blanco puro, y se
     distinguen del fondo por borde y sombra, no por tono. */
  --cream:#F7F4EE;
  --cream-soft:#FBF9F5;
  --beige:#EDE6D6;
  --gray:#F1F0EC;
  --gray-warm:#EEEBDD;
  --sage:#c2d1b8;
  --sage-light:#d8e0cf;
  --sage-deep:#9eb096;
  --moss:#7a9176;
  --moss-deep:#5a7058;
  --forest:#283522;
  --forest-soft:#3d4d35;
  --earth:#4a3d2e;
  --gold:#a88a5c;

  /* --- COLOR DE MARCA ---------------------------------------------------
     Terracota #E35336. Se usa como ACENTO, no como color dominante:
     la acción principal de cada pantalla, estados activos, ofertas e
     indicadores. El resto de la interfaz sigue siendo crema y bosque.

     Tres tonos porque el color puro no tiene contraste suficiente para
     texto (3,18:1 sobre crema). Cada uno tiene su trabajo:
       --marca         relleno grande, iconos, barras, puntos. Nunca texto pequeño.
       --marca-fuerte  botones sólidos con texto crema encima  (4,59:1 · AA)
       --marca-texto   texto y enlaces en color de marca       (5,45:1 · AA)  */
  --marca:#E35336;
  --marca-fuerte:#b7432b;
  --marca-texto:#a63a1f;
  --marca-suave:rgba(227,83,54,.10);
  --marca-linea:rgba(227,83,54,.32);

  /* Alias heredado: el CSS antiguo usaba --terracotta en muchos sitios.
     Se mantiene apuntando al tono legible para no romper nada. */
  --terracotta:var(--marca-texto);
  --ink:#1a1f17;
  --line:rgba(40,53,34,.12);
  --line-strong:rgba(40,53,34,.22);

  /* --- Derivados para e-commerce (todos calculados desde la paleta base) --- */
  --white-warm:#FFFFFF;                    /* fondo de tarjeta de producto: blanco puro */
  --terracotta-soft:var(--marca-suave);    /* fondo de badge de oferta */
  --terracotta-line:var(--marca-linea);
  --moss-soft:rgba(122,145,118,.12);       /* fondo de badge / chip activo */
  --moss-line:rgba(122,145,118,.30);
  --shadow-sm:0 2px 8px rgba(40,53,34,.05);
  --shadow-md:0 12px 30px rgba(40,53,34,.08);
  --shadow-lg:0 24px 50px rgba(40,53,34,.12);
  --focus:0 0 0 3px rgba(227,83,54,.45);   /* anillo de foco (marca) */

  /* --- Escala de espaciado (formaliza la ya usada: 4/8/12/20/24/40) --- */
  --s1:4px; --s2:8px; --s3:12px; --s4:16px; --s5:20px;
  --s6:24px; --s7:32px; --s8:40px; --s9:56px; --s10:80px;

  /* --- Radios (los del original: 4px cajas, 6px tarjetas, 100px píldoras) --- */
  --r-box:4px;
  --r-card:6px;
  --r-lg:20px;
  --r-pill:100px;

  --header-h:72px;
  --maxw:1500px;
}

html{scroll-behavior:smooth}
body{
  font-family:'Manrope',system-ui,sans-serif;
  background:var(--cream);
  color:var(--forest);
  overflow-x:hidden;
  position:relative;
  line-height:1.5;
  -webkit-font-smoothing:antialiased;
  font-feature-settings:'ss01','ss02';
}
h1,h2,h3,h4,h5{font-family:'Fraunces',Georgia,serif;font-weight:500;line-height:1.05;letter-spacing:-.02em}
a{color:inherit;text-decoration:none}
button{font-family:inherit;cursor:pointer;border:none;background:none;color:inherit}
img{display:block;max-width:100%}
input,select,textarea{font-family:inherit;font-size:inherit;color:inherit}

/* Accesibilidad: foco visible y coherente en toda la web */
a:focus-visible,button:focus-visible,input:focus-visible,
select:focus-visible,textarea:focus-visible,[tabindex]:focus-visible{
  outline:2.5px solid var(--marca);
  outline-offset:2px;
  border-radius:var(--r-box);
}
.skip-link{
  position:absolute;left:-9999px;top:0;z-index:1000;
  background:var(--forest);color:var(--cream);padding:12px 20px;
  font-size:13px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;
}
.skip-link:focus{left:0}
.sr-only{
  position:absolute;width:1px;height:1px;padding:0;margin:-1px;
  overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0;
}

/* === Grain overlay (idéntico al original) === */
/* ==========================================================================
   HEADER — evolución del original: se añade buscador, favoritos y carrito
   ========================================================================== */
.site-header{
  position:fixed;top:0;left:0;right:0;z-index:100;
  padding:14px 40px;
  background:rgba(241,235,222,.88);
  backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);
  border-bottom:1px solid var(--line);
  display:grid;
  grid-template-columns:auto 1fr auto;
  align-items:center;
  gap:32px;
  transition:padding .3s ease,box-shadow .3s ease;
}
.site-header.scrolled{padding:10px 40px;box-shadow:var(--shadow-sm)}

.logo{
  font-family:'Fraunces',Georgia,serif;font-size:22px;font-weight:600;
  letter-spacing:-.02em;color:var(--forest);
  display:flex;align-items:center;gap:12px;white-space:nowrap;
}
.logo-mark{width:30px;height:30px;display:flex;align-items:center;justify-content:center;flex-shrink:0}
.logo-mark img{width:100%;height:100%;object-fit:contain}
.logo em{font-style:italic;font-weight:400;color:var(--moss)}

nav.main-nav{display:flex;gap:28px;justify-content:center}
nav.main-nav a{
  font-size:12px;font-weight:600;letter-spacing:.12em;text-transform:uppercase;
  position:relative;padding-bottom:2px;transition:color .3s;white-space:nowrap;
}
nav.main-nav a::after{
  content:'';position:absolute;left:0;bottom:0;width:0;height:1px;
  background:var(--moss);transition:width .35s ease;
}
nav.main-nav a:hover{color:var(--moss-deep)}
nav.main-nav a:hover::after,nav.main-nav a[aria-current="page"]::after{width:100%}
nav.main-nav a[aria-current="page"]{color:var(--forest)}
nav.main-nav a[aria-current="page"]::after{background:var(--marca);height:2px}

.header-actions{display:flex;align-items:center;gap:6px}
.icon-btn{
  width:40px;height:40px;border-radius:50%;
  display:flex;align-items:center;justify-content:center;
  font-size:15px;color:var(--forest);position:relative;
  transition:background .25s ease,color .25s ease;
}
.icon-btn:hover{background:var(--moss-soft);color:var(--moss-deep)}
.icon-btn .badge{
  position:absolute;top:2px;right:2px;min-width:17px;height:17px;padding:0 4px;
  background:var(--marca-fuerte);color:var(--cream);
  border-radius:var(--r-pill);font-size:10px;font-weight:800;
  display:flex;align-items:center;justify-content:center;
  font-family:'Manrope',sans-serif;line-height:1;
}
.icon-btn .badge[hidden]{display:none}
.menu-toggle{display:none}

/* Buscador desplegable del header */
.search-panel{
  position:fixed;top:0;left:0;right:0;z-index:101;
  background:var(--cream);border-bottom:1px solid var(--line-strong);
  padding:20px 40px;
  transform:translateY(-100%);opacity:0;visibility:hidden;
  transition:transform .35s cubic-bezier(.22,1,.36,1),opacity .25s,visibility .35s;
  box-shadow:var(--shadow-md);
}
.search-panel.open{transform:translateY(0);opacity:1;visibility:visible}
.search-panel-inner{max-width:820px;margin:0 auto;position:relative}
.search-form{display:flex;align-items:center;gap:14px;border-bottom:1.5px solid var(--forest);padding-bottom:10px}
.search-form i{color:var(--moss-deep);font-size:17px}
.search-form input{
  flex:1;border:none;background:none;outline:none;
  font-family:'Fraunces',Georgia,serif;font-size:clamp(20px,3vw,28px);
  font-weight:400;color:var(--forest);
}
.search-form input::placeholder{color:rgba(40,53,34,.34)}
.search-close{font-size:20px;color:var(--moss-deep);padding:4px}
.search-results{margin-top:18px;max-height:52vh;overflow-y:auto}
.search-hint{font-size:12px;color:var(--forest-soft);opacity:.7;margin-top:14px;letter-spacing:.04em}
.search-item{
  display:grid;grid-template-columns:56px 1fr auto;gap:14px;align-items:center;
  padding:10px 8px;border-radius:var(--r-box);transition:background .2s;
}
.search-item:hover,.search-item:focus{background:var(--cream-soft)}
.search-item img{width:56px;height:56px;object-fit:cover;border-radius:var(--r-box);background:var(--sage-light)}
.search-item-name{font-size:14px;font-weight:600;color:var(--forest);line-height:1.3}
.search-item-cat{font-size:11px;color:var(--moss-deep);text-transform:uppercase;letter-spacing:.1em;font-weight:700;margin-top:3px}
.search-item-price{font-family:'Fraunces',Georgia,serif;font-size:16px;color:var(--forest);white-space:nowrap}

/* Menú móvil (mismo lenguaje visual que el original) */
.mobile-nav{
  position:fixed;top:0;right:-100%;width:86%;max-width:360px;height:100dvh;
  background:var(--forest);color:var(--cream);padding:80px 28px 32px;
  z-index:102;transition:right .4s cubic-bezier(.22,1,.36,1);
  display:flex;flex-direction:column;gap:2px;overflow-y:auto;
}
.mobile-nav.open{right:0}
.mobile-nav a{
  font-family:'Fraunces',Georgia,serif;font-size:23px;font-weight:500;
  padding:14px 0;border-bottom:1px solid rgba(241,235,222,.15);
  display:flex;justify-content:space-between;align-items:center;
}
.mobile-nav a em{font-style:italic;color:var(--sage)}
.mobile-nav a i{font-size:13px;opacity:.5}
.mobile-nav .mn-label{
  font-family:'Manrope',sans-serif;font-size:10px;font-weight:700;
  letter-spacing:.16em;text-transform:uppercase;color:var(--sage);
  margin:26px 0 6px;border:none;padding:0;
}
.mobile-nav-close{position:absolute;top:20px;right:20px;font-size:24px;color:var(--cream);padding:8px}
.nav-backdrop{
  position:fixed;inset:0;background:rgba(26,31,23,.5);z-index:101;
  opacity:0;visibility:hidden;transition:opacity .35s,visibility .35s;
}
.nav-backdrop.open{opacity:1;visibility:visible}

/* ==========================================================================
   BOTONES
   ========================================================================== */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:10px;
  padding:15px 28px;border-radius:var(--r-pill);
  font-size:13px;font-weight:700;letter-spacing:.1em;text-transform:uppercase;
  transition:background .28s ease,color .28s ease,transform .28s ease,box-shadow .28s ease;
  text-align:center;line-height:1.2;min-height:48px;
}
.btn i{font-size:12px}
.btn-primary{background:var(--forest);color:var(--cream)}
/* Acción principal de la pantalla. Solo UNA por vista: si todo destaca,
   no destaca nada. El resto de acciones van en verde o en contorno. */
.btn-marca{background:var(--marca-fuerte);color:var(--cream)}
.btn-marca:hover{background:var(--marca-texto);transform:translateY(-2px);box-shadow:0 12px 28px rgba(227,83,54,.28)}
.btn-primary:hover{background:var(--forest-soft);transform:translateY(-2px);box-shadow:var(--shadow-md)}
.btn-moss{background:var(--moss);color:var(--cream)}
.btn-moss:hover{background:var(--forest);transform:translateY(-2px);box-shadow:var(--shadow-md)}
.btn-outline{background:transparent;color:var(--forest);border:1.5px solid var(--line-strong)}
.btn-outline:hover{border-color:var(--forest);background:rgba(255,255,255,.5)}
.btn-light{background:var(--sage);color:var(--forest)}
.btn-light:hover{background:var(--cream);transform:translateY(-2px)}
.btn-block{width:100%}
.btn-sm{padding:11px 20px;font-size:11px;min-height:40px}
.btn-lg{padding:18px 36px;font-size:14px;min-height:56px}
.btn[disabled],.btn[aria-disabled="true"]{
  opacity:.45;cursor:not-allowed;pointer-events:none;
}

/* ==========================================================================
   CABECERAS DE SECCIÓN (idénticas al original)
   ========================================================================== */
.section-head{
  max-width:var(--maxw);margin:0 auto 50px;
  display:grid;grid-template-columns:auto 1fr;gap:80px;align-items:end;
}
.section-head .head-left{max-width:680px}
.section-label{
  font-size:11px;letter-spacing:.18em;text-transform:uppercase;color:var(--moss-deep);
  font-weight:700;margin-bottom:18px;display:flex;align-items:center;gap:12px;
}
.section-label::before{content:'';width:24px;height:1px;background:var(--moss)}
.section-head h2{font-size:clamp(34px,4.5vw,64px);font-weight:500;letter-spacing:-.03em;line-height:.95}
.section-head h2 em{font-style:italic;font-weight:300;color:var(--moss)}
.section-head p{font-size:14px;color:var(--forest-soft);line-height:1.6;max-width:480px;justify-self:end}
.section-head .head-cta{justify-self:end;align-self:end}

.section{padding:clamp(56px,7vw,100px) 40px}
.section-cream{background:var(--cream)}
.section-soft{background:var(--cream-soft)}
.section-gray{background:var(--gray)}
.section-forest{background:var(--forest);color:var(--cream)}
.section-forest .section-head h2{color:var(--cream)}
.section-forest .section-head h2 em{color:var(--sage)}
.section-forest .section-label{color:var(--sage)}
.section-forest .section-label::before{background:var(--sage)}
.section-forest .section-head p{color:rgba(241,235,222,.7)}
.wrap{max-width:var(--maxw);margin:0 auto}
.wrap-narrow{max-width:1080px;margin:0 auto}
.wrap-text{max-width:760px;margin:0 auto}

/* Migas de pan */
.breadcrumb{
  max-width:var(--maxw);margin:0 auto;padding:calc(var(--header-h) + 28px) 0 0;
  font-size:12px;color:var(--forest-soft);
  display:flex;flex-wrap:wrap;align-items:center;gap:8px;letter-spacing:.04em;
}
.breadcrumb a:hover{color:var(--moss-deep);text-decoration:underline;text-underline-offset:3px}
.breadcrumb .sep{opacity:.4}
.breadcrumb [aria-current]{color:var(--forest);font-weight:600}

/* ==========================================================================
   AVISOS / PLACEHOLDERS PENDIENTES
   Reutiliza el patrón `.rellenar` que ya existía en las páginas legales.
   ========================================================================== */
.rellenar{
  background:rgba(168,138,92,.16);border-bottom:1.5px solid var(--gold);
  padding:0 4px;font-weight:600;color:var(--forest);
}
.aviso-pendiente{
  max-width:var(--maxw);margin:0 auto;
  background:rgba(168,138,92,.14);border:1px solid rgba(168,138,92,.4);
  border-radius:var(--r-box);padding:14px 18px;
  font-size:13px;line-height:1.55;color:var(--earth);
  display:flex;gap:12px;align-items:flex-start;
}
.aviso-pendiente i{color:var(--gold);margin-top:3px;flex-shrink:0}
.aviso-pendiente strong{color:var(--forest)}

/* ==========================================================================
   FRANJA DE CONFIANZA
   ========================================================================== */
.trust-bar{background:var(--forest);color:var(--cream);padding:0}
.trust-bar-inner{
  max-width:var(--maxw);margin:0 auto;
  display:grid;grid-template-columns:repeat(4,1fr);
}
.trust-item{
  display:flex;align-items:center;gap:14px;padding:22px 24px;
  border-right:1px solid rgba(241,235,222,.14);
}
.trust-item:last-child{border-right:none}
.trust-item i{color:var(--sage);font-size:19px;flex-shrink:0}
.trust-item strong{display:block;font-family:'Manrope',sans-serif;font-size:12.5px;font-weight:700;color:var(--cream);letter-spacing:.02em}
.trust-item span{display:block;font-size:11.5px;color:rgba(241,235,222,.65);margin-top:2px;line-height:1.4}

/* ==========================================================================
   FOOTER (estructura original ampliada con columnas de tienda)
   ========================================================================== */
footer.site-footer{background:var(--forest);color:var(--cream);padding:76px 40px 28px;position:relative}
.footer-grid{
  max-width:var(--maxw);margin:0 auto;
  display:grid;grid-template-columns:1.7fr 1fr 1fr 1fr 1.5fr;gap:44px;
  padding-bottom:52px;border-bottom:1px solid rgba(241,235,222,.15);align-items:start;
}
.footer-brand h3{font-size:30px;font-weight:500;margin-bottom:14px;color:var(--cream)}
.footer-brand h3 em{font-style:italic;color:var(--sage);font-weight:300}
.footer-brand p{font-size:13px;color:rgba(241,235,222,.7);line-height:1.6;max-width:320px;margin-bottom:18px}
.footer-brand .antes{font-size:12.5px;opacity:.6;line-height:1.5}
.footer-brand .antes strong{opacity:.9}
.footer-social{display:flex;gap:10px;margin-top:20px}
.footer-social a{
  width:40px;height:40px;border:1px solid rgba(241,235,222,.2);border-radius:50%;
  display:flex;align-items:center;justify-content:center;font-size:14px;transition:all .3s;
}
.footer-social a:hover{background:var(--sage);color:var(--forest);border-color:var(--sage);transform:translateY(-3px)}
.footer-col h4{
  font-family:'Manrope',sans-serif;font-size:11px;font-weight:700;letter-spacing:.14em;
  text-transform:uppercase;color:var(--sage);margin-bottom:18px;
}
.footer-col ul{list-style:none;display:flex;flex-direction:column;gap:11px}
.footer-col li{font-size:13px;color:rgba(241,235,222,.75);line-height:1.5}
.footer-col li strong{color:var(--cream);font-weight:600;display:block;margin-bottom:2px}
.footer-col a:hover{color:var(--sage);text-decoration:underline;text-underline-offset:3px}
.footer-col.contact .contact-item{display:flex;align-items:flex-start;gap:12px;margin-bottom:14px}
.footer-col.contact .contact-item i{color:var(--sage);margin-top:3px;font-size:14px;width:16px}
.footer-col.contact .contact-item small{
  display:block;font-size:10px;text-transform:uppercase;letter-spacing:.1em;
  color:rgba(241,235,222,.5);margin-bottom:2px;
}
.footer-col.contact .contact-item span{font-size:13px;color:rgba(241,235,222,.8);line-height:1.5}
.footer-pagos{
  display:flex;flex-wrap:wrap;gap:8px;margin-top:16px;
}
.footer-pagos span{
  font-size:10px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;
  border:1px solid rgba(241,235,222,.22);border-radius:var(--r-box);
  padding:6px 10px;color:rgba(241,235,222,.75);
}
.footer-bottom{
  max-width:var(--maxw);margin:0 auto;padding-top:26px;
  display:flex;justify-content:space-between;align-items:center;flex-wrap:wrap;
  font-size:11px;color:rgba(241,235,222,.4);letter-spacing:.05em;gap:16px;
}
.footer-bottom a:hover{color:var(--sage)}

/* ==========================================================================
   NEWSLETTER
   ========================================================================== */
.newsletter{
  background:var(--gray);padding:clamp(48px,6vw,76px) 40px;
  background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='40' height='40'><path d='M0 0 L40 40 M40 0 L0 40' stroke='%23283522' stroke-width='0.5' fill='none' opacity='0.4'/></svg>");
}
.newsletter-inner{
  max-width:900px;margin:0 auto;text-align:center;
  background:var(--cream);border:1px solid var(--line);border-radius:var(--r-lg);
  padding:clamp(30px,4vw,48px);
}
.newsletter h3{font-size:clamp(26px,3.4vw,38px);font-weight:500;margin-bottom:12px}
.newsletter h3 em{font-style:italic;color:var(--moss);font-weight:300}
.newsletter p{font-size:14px;color:var(--forest-soft);line-height:1.6;max-width:52ch;margin:0 auto 26px}
.newsletter-form{display:flex;gap:10px;max-width:520px;margin:0 auto;flex-wrap:wrap}
.newsletter-form input{
  flex:1;min-width:220px;padding:15px 20px;border:1px solid var(--line-strong);
  border-radius:var(--r-pill);background:var(--white-warm);font-size:14px;
}
.newsletter-form input:focus{outline:none;border-color:var(--moss);box-shadow:var(--focus)}
.newsletter-legal{font-size:11px;color:var(--forest-soft);opacity:.7;margin-top:14px;line-height:1.5}
.newsletter-legal a{text-decoration:underline;text-underline-offset:2px}

/* ==========================================================================
   REVEAL
   ========================================================================== */
/* Solo se ocultan si el JS esta vivo (html.js). Si el JS falla o tarda,
   el contenido se ve igualmente: nunca dejamos producto invisible. */
html.js [data-reveal]{
  opacity:0;transform:translateY(30px);
  transition:opacity .8s cubic-bezier(.22,1,.36,1),transform .8s cubic-bezier(.22,1,.36,1);
}
html.js [data-reveal].revealed{opacity:1;transform:translateY(0)}

/* ==========================================================================
   TOAST
   ========================================================================== */
.toast-stack{
  position:fixed;bottom:24px;left:50%;transform:translateX(-50%);
  z-index:200;display:flex;flex-direction:column;gap:10px;
  width:min(420px,calc(100vw - 32px));pointer-events:none;
}
.toast{
  background:var(--forest);color:var(--cream);
  border-radius:var(--r-card);padding:14px 18px;
  display:flex;align-items:center;gap:12px;font-size:13.5px;line-height:1.4;
  box-shadow:var(--shadow-lg);pointer-events:auto;
  animation:toast-in .4s cubic-bezier(.22,1,.36,1);
}
.toast i{color:var(--sage);font-size:15px;flex-shrink:0}
.toast a{color:var(--sage);font-weight:700;text-decoration:underline;text-underline-offset:3px;margin-left:auto;white-space:nowrap}
@keyframes toast-in{from{opacity:0;transform:translateY(16px)}to{opacity:1;transform:translateY(0)}}

/* ==========================================================================
   RESPONSIVE
   ========================================================================== */
@media (max-width:1180px){
  .footer-grid{grid-template-columns:1.6fr 1fr 1fr;gap:36px}
}
/* Escalon intermedio: en tablet el menu SIGUE visible, solo se comprime.
   Antes desaparecia entero a 1100 px y un iPad de 1024 px se quedaba sin
   navegacion teniendo espacio de sobra. */
@media (max-width:1100px) and (min-width:901px){
  .site-header{padding:12px 22px;gap:18px}
  .site-header.scrolled{padding:9px 22px}
  nav.main-nav{gap:16px}
  nav.main-nav a{font-size:11px;letter-spacing:.07em}
  .logo{font-size:20px;gap:9px}
  .header-actions{gap:2px}
  .icon-btn{width:38px;height:38px;font-size:14px}
}
@media (max-width:1100px){
  .section-head{grid-template-columns:1fr;gap:22px}
  .section-head p,.section-head .head-cta{justify-self:start}
  .site-header{grid-template-columns:auto 1fr auto}
  .header-actions{justify-self:end}
  .trust-bar-inner{grid-template-columns:repeat(2,1fr)}
  .trust-item:nth-child(2){border-right:none}
  .trust-item:nth-child(-n+2){border-bottom:1px solid rgba(241,235,222,.14)}
}
@media (max-width:900px){
  nav.main-nav{display:none}
  .menu-toggle{display:flex}
  .site-header{grid-template-columns:auto 1fr;gap:16px}
}
@media (max-width:760px){
  .section{padding-left:18px;padding-right:18px}
  .site-header{padding:10px 16px}
  .site-header.scrolled{padding:8px 16px}
  .logo{font-size:19px;gap:9px}
  .logo-mark{width:26px;height:26px}
  .icon-btn{width:42px;height:42px}
  .search-panel{padding:16px 18px}
  footer.site-footer{padding:56px 18px 24px}
  .footer-grid{grid-template-columns:1fr;gap:32px;padding-bottom:34px}
  .footer-bottom{flex-direction:column;text-align:center}
  .newsletter{padding-left:18px;padding-right:18px}
  .trust-bar-inner{grid-template-columns:1fr}
  .trust-item{border-right:none;border-bottom:1px solid rgba(241,235,222,.14);padding:16px 18px}
  .trust-item:last-child{border-bottom:none}
  .breadcrumb{padding-top:calc(var(--header-h) + 16px)}
  .toast-stack{bottom:16px}
}

@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important}
  html.js [data-reveal]{opacity:1;transform:none}
  html{scroll-behavior:auto}
}