/* ============================================================
   COSMÉTICOS AL POR MAYOR — capa responsive.
   Se carga DESPUÉS del <style> de cada página para poder
   sobrescribir las rejillas declaradas ahí sin usar !important.
   ============================================================ */

@media (max-width:1100px){
  .wrap,.wrap-tight{padding:0 24px}
  .grid{grid-template-columns:repeat(3,1fr)}
  .pdp{grid-template-columns:74px minmax(0,1fr)}
  .pdp .info{grid-column:1 / -1;position:static;margin-top:var(--s6)}
  .layout{grid-template-columns:210px minmax(0,1fr);gap:var(--s5)}
  .footer .cols{grid-template-columns:1fr 1fr 1fr}
}

@media (max-width:820px){
  /* --- barra de confianza: una sola línea deslizable --- */
  .trustbar{padding:9px 0}
  .trustbar .wrap{flex-wrap:nowrap;overflow-x:auto;justify-content:flex-start;gap:18px;
    font-size:11px;scrollbar-width:none;-webkit-overflow-scrolling:touch}
  .trustbar .wrap::-webkit-scrollbar{display:none}
  .trustbar .wrap > span{white-space:nowrap}

  /* --- cabecera --- */
  .hrow{flex-wrap:wrap;gap:12px;padding:12px 0}
  .logo{order:1}
  .logo img{height:22px}
  .hactions{order:2;margin-left:auto;gap:14px}
  .hactions .ghost{display:none}
  .hactions .btn{padding:10px 16px;font-size:12px;min-height:40px}
  .search{order:3;flex:0 0 100%;padding:10px 16px}
  .search span{font-size:12.5px}
  .chips{overflow-x:auto;padding-bottom:10px;scrollbar-width:none;-webkit-overflow-scrolling:touch}
  .chips::-webkit-scrollbar{display:none}

  /* --- tipografía --- */
  h1.display{font-size:clamp(32px,8.4vw,48px)}
  h2.display{font-size:clamp(25px,6vw,36px)}
  .lede{font-size:15px;line-height:1.75}
  .stack{padding:var(--s8) 0}
  .stack-sm{padding:var(--s7) 0}

  /* --- portada --- */
  .hero{min-height:0;padding:var(--s8) 0 0}
  .hero h1{font-size:clamp(32px,8.4vw,46px);max-width:none}
  .hero .inner{padding-bottom:var(--s7)}
  .bigsearch{flex-wrap:wrap;border-radius:var(--r-lg);padding:12px;gap:10px}
  .bigsearch span{flex:0 0 100%}
  .bigsearch .btn{width:100%}
  .hero .stats{grid-template-columns:1fr 1fr;gap:var(--s4);padding:18px 24px 24px}
  .modes{grid-template-columns:1fr 1fr}
  .marquee span{font-size:15px}
  .comp{grid-template-columns:1fr;padding:var(--s6);gap:var(--s6)}
  .comp .lado{padding:var(--s5)}
  .comp .lado .p{font-size:var(--fs-xl)}
  .comp .lado img{height:110px}
  .caja{min-height:0;padding:var(--s8) 0}
  .caja .c{margin-left:0;max-width:none}
  .own{grid-template-columns:1fr;min-height:0}
  .own .c{padding:var(--s6);max-width:none}
  .own .figs{gap:var(--s5);flex-wrap:wrap}
  .escuela{grid-template-columns:1fr;min-height:0}
  .escuela .art{min-height:220px;order:-1}
  .escuela .c{padding:var(--s6)}
  .steps{grid-template-columns:1fr;gap:var(--s5)}
  .close-cta{grid-template-columns:1fr;padding:var(--s6);gap:var(--s5)}

  /* --- catálogo --- */
  .grid{grid-template-columns:repeat(2,1fr);gap:var(--s4)}
  .grid-3{grid-template-columns:repeat(2,1fr)}
  .pc .im{height:170px}
  .motor .pk b{font-size:var(--fs-md)}
  .motor .un{min-width:96px;padding:10px 12px}

  /* --- categoría --- */
  .head-cat{grid-template-columns:1fr;padding:var(--s6);gap:var(--s5)}
  .head-cat .facts{grid-template-columns:1fr 1fr}
  .layout{grid-template-columns:1fr}
  .rail{position:static;max-height:none;overflow:visible;
    border-bottom:1px solid var(--line);padding-bottom:var(--s4);margin-bottom:var(--s5)}
  .toolbar{flex-wrap:wrap;gap:10px}

  /* --- producto --- */
  .pdp{grid-template-columns:1fr;gap:var(--s5)}
  .thumbs{flex-direction:row;position:static;order:2;overflow-x:auto;gap:8px}
  .thumbs button{width:62px;flex:0 0 62px}
  .stage{order:1;padding:var(--s5)}
  .info{position:static;order:3}
  .info h1{font-size:var(--fs-lg)}
  .buyrow{flex-wrap:wrap}
  .buyrow .add{min-width:100%;order:2}
  .specs{grid-template-columns:1fr}
  .tabs{gap:var(--s5);overflow-x:auto;white-space:nowrap}

  /* --- carrito --- */
  .cart-layout{grid-template-columns:1fr;gap:var(--s6)}
  .chead{display:none}
  .crow{grid-template-columns:82px 1fr;gap:var(--s4);row-gap:var(--s3);align-items:start}
  .crow .qty{grid-column:2;justify-self:start}
  .crow .tot{grid-column:2;text-align:left}
  .crow .x{grid-column:2;justify-self:start}
  .aside{position:static}
  .kpis{grid-template-columns:1fr 1fr}
  .suggest{flex-wrap:wrap}

  /* --- pago --- */
  .co{grid-template-columns:1fr}
  .co-main{padding:var(--s7) 0}
  .co-side{border-left:0;border-top:1px solid var(--line);padding:var(--s7) 0}
  .row-2,.row-3{grid-template-columns:1fr}
  .express-row{grid-template-columns:1fr}

  /* --- cajón --- */
  .drawer{width:100%}

  /* --- pie --- */
  .footer{padding:var(--s8) 0 var(--s5)}
  .footer .cols{grid-template-columns:1fr 1fr;gap:var(--s5)}
  .footer .bottom{flex-direction:column;gap:12px}
}

@media (max-width:600px){
  .wrap,.wrap-tight{padding:0 18px}
  .comp-lados{grid-template-columns:1fr}
  .hero .stats{padding-left:18px;padding-right:18px}
  .grid,.grid-3{grid-template-columns:1fr}
  .pc .im{height:210px}
  .modes{grid-template-columns:1fr}
  .head-cat .facts{grid-template-columns:1fr}
  .kpis{grid-template-columns:1fr}
  .footer .cols{grid-template-columns:1fr}
}