:root{--orange:#ff5a00;--orange2:#ff7a00;--yellow:#ffc928;--ink:#101010;--muted:#666;--line:#e4e4e4;--soft:#f8f8f8}
h1,h2,h3{font-family:var(--font-secondary,inherit)}
*{box-sizing:border-box}html{scroll-behavior:smooth}body{margin:0;font-family:var(--font-primary,Arial,Helvetica,sans-serif);font-size:var(--base-font-size,15px);color:var(--text-color,var(--ink));background:var(--bg-color,#fff)}.shell{width:min(1500px,calc(100% - 46px));margin:auto}button,a{font-family:inherit}.top-strip{background:var(--top-bar-bg,#0e0e0e);color:#fff}.top-strip-inner{min-height:60px;max-width:1600px;margin:auto;display:grid;grid-template-columns:repeat(5,1fr);align-items:center}.top-item{height:100%;padding:10px 24px;display:flex;align-items:center;justify-content:center;gap:11px;border-right:1px solid #2d2d2d}.top-item:last-child{border:0}.top-item svg{width:29px;height:29px;fill:none;stroke:var(--top-bar-icon-color,var(--orange2));stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round;flex:0 0 auto}.top-item span{display:flex;flex-direction:column}.top-item b{font-size:13px}.top-item small{font-size:10px;margin-top:3px;color:#eee}a.top-item{color:inherit;text-decoration:none;cursor:pointer}.site-header{background:#fff;overflow-anchor:none}.head{height:116px;display:grid;grid-template-columns:245px minmax(340px,1fr) minmax(360px,auto);align-items:center;gap:28px}body.header-condensed .top-strip{display:none!important}body.header-condensed .head{height:74px!important}.logo-link{display:flex;align-items:center;justify-content:var(--logo-justify,flex-start);overflow:visible;min-width:0}.logo-link img{width:var(--logo-width,188px);max-width:100%;height:auto;max-height:96px;object-fit:contain;object-position:left center;display:block}body.header-condensed .logo-link img{max-height:56px}.search-wrap{position:relative;min-width:0}.search-bar{height:58px;border:1px solid #c9c9c9;border-radius:32px;display:flex;align-items:center;overflow:hidden;background:#fff;transition:border-color .2s,box-shadow .2s}.search-bar.compact{height:44px!important;border-radius:24px!important}.search-bar.compact input{font-size:13px!important;padding:0 16px!important}.search-bar.compact .clear-search,.search-bar.compact .search-submit{height:44px!important;width:44px!important}.search-bar.compact .search-scope{display:none!important}.search-bar.compact+.search-results{top:50px!important}.search-bar:focus-within{border-color:#999;box-shadow:0 0 0 3px rgba(255,90,0,.08)}.search-bar input{min-width:0;flex:1;border:0;outline:0;padding:0 24px;font-size:15px}.clear-search{border:0;background:transparent;font-size:29px;line-height:1;color:#555;width:44px;height:58px;cursor:pointer}.search-scope{font-size:12px;font-weight:600;white-space:nowrap;border-left:1px solid #e2e2e2;padding:0 18px;color:#333}.search-submit{width:68px;height:58px;border:0;background:linear-gradient(135deg,var(--orange2),var(--orange));display:grid;place-items:center;cursor:pointer}.search-submit svg{width:25px;height:25px;fill:none;stroke:#fff;stroke-width:2;stroke-linecap:round}.actions{display:flex;align-items:center;justify-content:flex-end;flex-wrap:nowrap;gap:4px}.action-item{border:0;background:none;display:flex;flex-direction:column;align-items:center;gap:4px;padding:6px;color:#111;cursor:pointer;text-decoration:none}.action-item>svg,.cart-icon-wrap>svg{width:24px;height:24px;fill:none;stroke:var(--orange);stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round}.action-item b{display:block;font-size:12px}.action-item small{display:block;font-size:10px;color:#555;margin-top:2px}.cart-icon-wrap{position:relative;display:inline-flex}.cart-icon-wrap i{position:absolute;right:-6px;top:-4px;min-width:21px;height:21px;border-radius:50%;background:var(--orange);color:#fff;font-style:normal;font-size:10px;font-weight:700;display:grid;place-items:center}.fav-btn{position:absolute;top:8px;right:8px;z-index:4;width:34px;height:34px;border:0;border-radius:50%;background:rgba(255,255,255,.92);display:grid;place-items:center;cursor:pointer;box-shadow:0 2px 6px rgba(0,0,0,.15)}.fav-btn svg{width:18px;height:18px;fill:none;stroke:#555;stroke-width:1.8}.fav-btn.active svg{fill:var(--orange,#ff5a00);stroke:var(--orange,#ff5a00)}.fav-btn-inline{display:inline-flex;align-items:center;gap:7px;border:1px solid #ddd;border-radius:9px;background:#fff;padding:0 16px;height:var(--btn-height,50px);cursor:pointer;font-weight:800;font-size:13px;color:#333}.fav-btn-inline svg{width:18px;height:18px;fill:none;stroke:#555;stroke-width:1.8}.fav-btn-inline.active svg{fill:var(--orange,#ff5a00);stroke:var(--orange,#ff5a00)}.fav-btn-inline.active{border-color:var(--orange,#ff5a00);color:var(--orange,#ff5a00)}.main-nav{height:56px;background:var(--secondary-color,#101010)}.main-nav .shell{height:100%;display:flex;align-items:center;gap:54px}.main-nav a{color:var(--menu-text-color,#fff);font-size:13px;font-weight:800;text-decoration:none;cursor:pointer;white-space:nowrap}.main-nav .nav-orange{color:var(--menu-text-color,#fff)}.main-nav .star{color:var(--accent-color,#ffb800)}.nav-categories{display:flex;align-items:center;gap:9px}.nav-categories svg{width:21px;height:21px;fill:none;stroke:#fff;stroke-width:1.8;stroke-linecap:round}.hero{margin-top:10px;display:grid;grid-template-columns:minmax(610px,2.45fr) minmax(175px,.64fr) minmax(210px,.72fr);gap:10px;height:388px}.banner{position:relative;overflow:hidden;border-radius:9px;background:radial-gradient(circle at 74% 42%,#5d3a24 0,#2c241e 29%,#121212 66%);color:#fff}.banner:after{content:"";position:absolute;inset:0;background:linear-gradient(90deg,rgba(0,0,0,.55) 0,rgba(0,0,0,.18) 50%,rgba(0,0,0,.06) 100%);pointer-events:none}.banner-copy{position:absolute;z-index:2;left:52px;top:43px}.banner h1,.banner .banner-heading-alt{font-size:40px;line-height:1.03;margin:0;letter-spacing:-1.5px}.banner-heading-alt{font-weight:700}.banner h1 span{color:var(--orange)}.banner p{font-size:16px;line-height:1.45;margin:20px 0}.banner button,.banner .banner-cta{border:0;border-radius:7px;background:var(--orange);color:#fff;font-weight:800;padding:14px 24px;cursor:pointer;display:inline-block;text-decoration:none}.tool-art{position:absolute;z-index:1;right:4%;bottom:5%;width:54%;opacity:.88}.tool-art svg{width:100%;height:auto;fill:#202020;stroke:#ff6a13;stroke-width:3}.dots{position:absolute;z-index:3;bottom:12px;left:50%;display:flex;gap:8px}.dots span{width:10px;height:10px;background:#fff;border-radius:50%;opacity:.9}.dots span.active{background:var(--accent-color,var(--orange))}.side-promos{display:grid;grid-template-rows:repeat(3,1fr);gap:6px}.promo-card{position:relative;border-radius:8px;padding:18px 17px;overflow:hidden}.promo-card b{font-size:20px;line-height:1.02}.promo-card p{font-size:11px;line-height:1.35;margin:8px 0 5px}.promo-card a{font-size:10px;font-weight:800;text-decoration:none}.promo-card i{position:absolute;right:14px;top:19px;font-style:normal;font-size:33px;opacity:.9}.promo-card span{color:var(--orange)}.promo-dark{background:#171717;color:#fff}.promo-dark a{color:#ffb300}.promo-orange{background:linear-gradient(135deg,#ff7417,#ff4b00);color:#fff}.promo-orange a{color:#fff}.promo-yellow{background:linear-gradient(135deg,#ffd640,#ffb800);color:#111}.promo-yellow a{color:#111}.quote-box{border:1.5px solid var(--orange);border-radius:11px;padding:17px;background:#fff;display:flex;flex-direction:column;min-width:0}.quote-title{display:flex;gap:10px;align-items:flex-start}.quote-title svg{width:30px;height:30px;fill:none;stroke:var(--orange);stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round;flex:0 0 auto}.quote-title h2{font-size:21px;margin:2px 0 0}.quote-title p{font-size:11px;line-height:1.4;margin:8px 0 0}.quote-summary{margin:18px 0 12px;border-top:1px solid #eee;border-bottom:1px solid #eee;padding:14px 2px;display:flex;flex-direction:column;gap:4px}.quote-summary b{font-size:13px}.quote-summary span{font-size:10px;color:#666}.quote-box button{height:41px;border-radius:6px;font-size:11px;font-weight:800;cursor:pointer}.quote-box .primary{border:0;background:var(--orange);color:#fff}.quote-box .secondary{margin-top:9px;background:#fff;border:1px solid #aaa;color:#333}.quote-box .secondary span{font-weight:500}.quote-box>small{display:block;text-align:center;font-size:8.5px;margin-top:auto;padding-top:12px;color:#444}.compact{margin-top:18px}.section-heading{display:flex;align-items:center;justify-content:space-between;margin:0 3px 9px}.section-heading h2{font-size:15px;margin:0}.section-heading h2 span{color:var(--orange)}.brand-heading a{font-size:10px;font-weight:800;color:var(--orange);cursor:pointer}.category-grid{display:grid;grid-template-columns:repeat(9,1fr);gap:10px}.category-grid button{height:105px;border:1px solid #e0e0e0;border-radius:8px;background:#fff;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:7px;cursor:pointer;transition:.16s}.category-grid button:hover{border-color:#ff9a60;transform:translateY(-1px);box-shadow:0 5px 16px rgba(0,0,0,.05)}.category-grid svg{width:42px;height:42px;fill:none;stroke:#202020;stroke-width:1.9;stroke-linecap:round;stroke-linejoin:round}.category-grid button:nth-child(1) svg,.category-grid button:nth-child(8) svg{stroke:var(--orange)}.category-grid b{font-size:11px}.more-category svg{stroke:#333}.brand-grid{display:grid;grid-template-columns:repeat(7,1fr);border:1px solid #ddd;border-radius:9px;overflow:hidden;background:#fff}.brand-grid a{height:68px;border:0;border-right:1px solid #e5e5e5;background:#fff;padding:7px 14px;cursor:pointer;display:grid;place-items:center}.brand-grid a:last-child{border-right:0}.brand-grid img{max-width:100%;width:auto;height:52px;object-fit:contain;display:block}.brand-grid a:nth-child(1) img{height:48px}.benefits{margin:20px 0 32px;background:#fafafa;border-radius:10px;padding:18px 26px;display:grid;grid-template-columns:repeat(5,1fr);gap:20px}.benefit-item{display:flex;align-items:center;gap:13px}.benefit-item svg{width:37px;height:37px;fill:none;stroke:var(--orange);stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round;flex:0 0 auto}.benefit-item b,.benefit-item small{display:block}.benefit-item b{font-size:11.5px}.benefit-item small{font-size:9.5px;line-height:1.35;margin-top:4px;color:#333}.search-results{position:absolute;z-index:100;top:65px;left:0;right:0;background:#fff;border:1px solid #ddd;border-radius:4px;box-shadow:0 15px 35px rgba(0,0,0,.18);overflow:hidden;max-height:520px;overflow-y:auto}.search-result{display:grid;grid-template-columns:48px minmax(0,1fr) auto;gap:12px;align-items:center;padding:10px 12px;border-bottom:1px solid #eee;cursor:pointer}.search-result:last-child{border-bottom:0}.search-result:hover{background:#fafafa}.search-result img,.result-placeholder{width:48px;height:48px;object-fit:contain;border:1px solid #eee;border-radius:4px;background:#fff}.result-placeholder{display:grid;place-items:center;color:#aaa}.result-placeholder svg{width:25px;height:25px;fill:none;stroke:#aaa;stroke-width:1.5}.search-result strong{display:block;font-size:13.5px;font-weight:800;line-height:1.25}.search-result small{display:block;font-size:10.5px;color:#555;margin-top:4px}.search-result em{font-style:normal;font-weight:800;color:var(--orange);font-size:13px;white-space:nowrap}.search-empty{padding:18px}.search-empty strong{font-size:13px}.search-empty small{display:block;color:#666;margin-top:5px}
@media(max-width:1250px){.top-item{padding:10px 12px}.top-item b{font-size:11px}.top-item small{font-size:9px}.head{grid-template-columns:200px 1fr 300px;gap:18px}.hero{grid-template-columns:minmax(530px,2fr) minmax(160px,.62fr) minmax(195px,.7fr)}.banner h1,.banner .banner-heading-alt{font-size:34px}.category-grid{grid-template-columns:repeat(5,1fr)}.brand-grid{grid-template-columns:repeat(4,1fr)}.benefits{grid-template-columns:repeat(3,1fr)}}
@media(max-width:980px){.top-strip-inner{grid-template-columns:repeat(3,1fr)}.top-item:nth-child(4),.top-item:nth-child(5){display:none}.head{grid-template-columns:175px 1fr}.actions{display:none}.hero{height:auto;grid-template-columns:1fr 210px}.banner{height:370px}.side-promos{display:none}.quote-box{height:370px}.main-nav .shell{gap:30px}.brand-grid{grid-template-columns:repeat(3,1fr)}}
@media(max-width:700px){.shell{width:calc(100% - 24px)}.top-strip-inner{grid-template-columns:1fr 1fr;min-height:52px}.top-item:nth-child(3){display:none}.top-item{justify-content:flex-start}.top-item svg{width:24px}.head{height:auto;padding:12px 0;grid-template-columns:1fr}.logo-link{justify-content:center}.logo-link img{max-height:64px}.search-scope{display:none}.main-nav{height:50px}.main-nav .shell{overflow:auto;gap:24px}.hero{grid-template-columns:1fr}.banner{height:350px}.banner-copy{left:28px;top:35px}.banner h1,.banner .banner-heading-alt{font-size:31px}.quote-box{height:auto}.quote-box>small{margin-top:12px}.category-grid{grid-template-columns:repeat(3,1fr)}.brand-grid{grid-template-columns:repeat(2,1fr)}.benefits{grid-template-columns:1fr 1fr}.search-result{grid-template-columns:42px minmax(0,1fr) auto}.search-result img,.result-placeholder{width:42px;height:42px}.search-result strong{font-size:12px}}

/* FERREX Online V3.2 - refinamiento visual y responsive */
.shell{width:min(var(--content-max-width,1740px),calc(100% - 32px));}
.top-strip-inner{max-width:1800px;}
.top-item b{font-size:clamp(12px,.76vw,15px)}
.top-item small{font-size:clamp(9px,.6vw,12px)}
.head{height:126px;grid-template-columns:minmax(240px,285px) minmax(500px,1fr) minmax(340px,410px);gap:clamp(20px,2vw,38px)}


.search-bar{height:64px;border-radius:34px}
.search-bar input{font-size:clamp(15px,.88vw,18px);padding-left:28px}
.clear-search{height:64px}
.search-submit{width:76px;height:64px}
.search-scope{font-size:clamp(11px,.68vw,13px);padding:0 22px}
.action-item>svg,.cart-icon-wrap>svg{width:32px;height:32px;stroke-width:1.8}
.action-item b{font-size:clamp(12px,.72vw,14px)}
.action-item small{font-size:clamp(9px,.58vw,11px)}
.main-nav{height:60px}
.main-nav .shell{gap:clamp(34px,3.4vw,68px)}
.main-nav a{font-size:clamp(12px,.72vw,14px)}
.hero{height:430px;grid-template-columns:minmax(660px,2.55fr) minmax(205px,.64fr) minmax(235px,.72fr);gap:12px;margin-top:12px}
.banner-copy{left:clamp(42px,3.3vw,64px);top:48px}
.banner h1,.banner .banner-heading-alt{font-size:clamp(38px,2.55vw,50px)}
.banner p{font-size:clamp(15px,.92vw,18px)}
.promo-card{padding:21px 19px}
.promo-card b{font-size:clamp(18px,1.17vw,23px)}
.promo-card p{font-size:clamp(10px,.68vw,13px)}
.quote-box{padding:20px}
.quote-title h2{font-size:clamp(20px,1.22vw,24px)}
.quote-title p{font-size:clamp(10px,.68vw,13px)}
.compact{margin-top:22px}
.section-heading h2{font-size:clamp(15px,.92vw,18px)}

/* Categorías: más vivas, sin perder limpieza */
.category-grid{gap:14px}
.category-grid button{height:122px;border:0;border-radius:16px;background:#fff;box-shadow:0 4px 18px rgba(25,25,25,.07);gap:10px;position:relative;overflow:hidden}
.category-grid button:before{content:"";position:absolute;width:72px;height:72px;border-radius:50%;top:13px;background:#fff3e8;z-index:0}
.category-grid button:nth-child(2):before{background:#e9f5ff}
.category-grid button:nth-child(3):before{background:#fff6c9}
.category-grid button:nth-child(4):before{background:#ffefe1}
.category-grid button:nth-child(5):before{background:#eaf8e7}
.category-grid button:nth-child(6):before{background:#e8f2ff}
.category-grid button:nth-child(7):before{background:#fff0df}
.category-grid button:nth-child(8):before{background:#f0efff}
.category-grid button:nth-child(9):before{background:#f3f3f3}
.category-grid svg{width:48px;height:48px;position:relative;z-index:1;stroke-width:2.15}
.category-grid button:nth-child(1) svg{stroke:#ff5a00}
.category-grid button:nth-child(2) svg{stroke:#1676bd}
.category-grid button:nth-child(3) svg{stroke:#e5aa00}
.category-grid button:nth-child(4) svg{stroke:#f27618}
.category-grid button:nth-child(5) svg{stroke:#3a9b3f}
.category-grid button:nth-child(6) svg{stroke:#2979c7}
.category-grid button:nth-child(7) svg{stroke:#ef6c00}
.category-grid button:nth-child(8) svg{stroke:#5c5c73}
.category-grid button:nth-child(9) svg{stroke:#333}
.category-grid b{font-size:clamp(11px,.72vw,14px);position:relative;z-index:1}
.category-grid button:hover{border-color:transparent;transform:translateY(-4px);box-shadow:0 10px 28px rgba(0,0,0,.11)}

/* Marcas: logos libres, sin cajas ni divisiones */
.brand-grid{display:grid;grid-template-columns:repeat(7,minmax(0,1fr));gap:clamp(14px,1.5vw,28px);border:0;border-radius:0;overflow:visible;background:transparent;align-items:center;padding:7px 8px 12px}
.brand-grid a{height:88px;border:0!important;background:transparent;padding:8px 12px;display:flex;align-items:center;justify-content:center;border-radius:14px;transition:.18s ease}
.brand-grid a:hover{transform:translateY(-2px)}
.brand-grid img{max-width:88%;width:auto;height:64px;object-fit:contain;display:block;filter:none}
.brand-grid a:nth-child(1) img{height:58px}
.brand-grid a:nth-child(2) img{height:60px}
.brand-grid a:nth-child(3) img{height:66px}
.brand-grid a:nth-child(4) img{height:64px}
.brand-grid a:nth-child(5) img{height:62px}
.brand-grid a:nth-child(6) img{height:58px}
.brand-grid a:nth-child(7) img{height:62px}

.benefits{margin-top:24px;padding:22px 30px}
.benefit-item svg{width:42px;height:42px}
.benefit-item b{font-size:clamp(11px,.74vw,14px)}
.benefit-item small{font-size:clamp(9px,.62vw,12px)}
.search-results{top:71px}
.search-result{grid-template-columns:56px minmax(0,1fr) auto;padding:11px 14px}
.search-result img,.result-placeholder{width:56px;height:56px}
.search-result strong{font-size:clamp(13px,.8vw,16px)}
.search-result small{font-size:clamp(10px,.64vw,12px)}
.search-result em{font-size:clamp(13px,.8vw,16px)}

@media(max-width:1500px){
  .shell{width:min(1450px,calc(100% - 28px))}
  .head{grid-template-columns:220px minmax(440px,1fr) 350px;gap:22px}
  
  .hero{height:405px;grid-template-columns:minmax(590px,2.35fr) minmax(185px,.64fr) minmax(220px,.72fr)}
  .category-grid button{height:112px}
  .brand-grid a{height:80px}
}
@media(max-width:1250px){
  .shell{width:calc(100% - 24px)}
  .head{grid-template-columns:200px minmax(400px,1fr) 310px;gap:16px}
  
  .hero{height:auto;grid-template-columns:minmax(520px,2fr) minmax(170px,.65fr) minmax(205px,.72fr)}
  .banner,.side-promos,.quote-box{min-height:390px}
  .category-grid{grid-template-columns:repeat(5,1fr)}
  .brand-grid{grid-template-columns:repeat(4,1fr)}
  .benefits{grid-template-columns:repeat(3,1fr)}
}
@media(max-width:980px){
  .head{grid-template-columns:190px 1fr}.actions{display:none}
  .hero{grid-template-columns:1fr 230px}.banner{min-height:380px}.quote-box{min-height:380px}.side-promos{display:none}
  .category-grid{grid-template-columns:repeat(3,1fr)}.brand-grid{grid-template-columns:repeat(3,1fr)}
}
@media(max-width:700px){
  .shell{width:calc(100% - 20px)}.head{grid-template-columns:1fr;padding:10px 0}
  .hero{grid-template-columns:1fr}.banner{min-height:360px}.quote-box{min-height:0}.category-grid{grid-template-columns:repeat(2,1fr)}.category-grid button{height:118px}
  .brand-grid{grid-template-columns:repeat(2,1fr);gap:12px}.brand-grid a{height:82px}.benefits{grid-template-columns:1fr}
}


/* FERREX Online V3.3 - escala de pantalla, categorías sólidas y marcas protagonistas */
.shell{width:calc(100% - 24px);max-width:none}
.top-strip-inner{max-width:none;padding:0 12px}
.head{grid-template-columns:clamp(230px,15vw,360px) minmax(560px,1fr) clamp(340px,22vw,520px);height:clamp(122px,7.1vw,164px);gap:clamp(22px,2vw,46px)}

.search-bar{height:clamp(64px,3.7vw,82px);border-radius:44px}.search-bar input{font-size:clamp(16px,1vw,22px)}.clear-search,.search-submit{height:clamp(64px,3.7vw,82px)}.search-submit{width:clamp(76px,4.4vw,98px)}
.main-nav{height:clamp(60px,3.4vw,76px)}.main-nav a{font-size:clamp(13px,.82vw,17px)}
.hero{height:clamp(430px,28vw,650px);grid-template-columns:minmax(0,2.65fr) minmax(220px,.65fr) minmax(255px,.75fr);gap:clamp(10px,.7vw,16px)}
.banner h1,.banner .banner-heading-alt{font-size:clamp(42px,3vw,68px)}.banner p{font-size:clamp(16px,1.05vw,23px)}.promo-card b{font-size:clamp(20px,1.35vw,30px)}.quote-title h2{font-size:clamp(22px,1.45vw,31px)}
.compact{margin-top:clamp(22px,1.5vw,34px)}.section-heading h2{font-size:clamp(17px,1vw,22px)}
.category-grid{grid-template-columns:repeat(9,minmax(0,1fr));gap:clamp(10px,.8vw,18px)}
.category-grid button{height:clamp(122px,8vw,172px);border:1px solid #e8e8e8;border-radius:14px;background:#fff;box-shadow:0 4px 15px rgba(0,0,0,.05);gap:10px;overflow:visible}
.category-grid button:before{display:none!important}.category-grid svg{width:clamp(54px,3.6vw,78px);height:clamp(54px,3.6vw,78px);fill:currentColor!important;stroke:none!important}.category-grid b{font-size:clamp(12px,.82vw,17px)}
.category-grid .cat-tools{color:#ff5a00}.category-grid .cat-plumbing{color:#1687c9}.category-grid .cat-electric{color:#f2b400}.category-grid .cat-build{color:#f47a17}.category-grid .cat-garden{color:#38a34a}.category-grid .cat-paint{color:#2f7fd0}.category-grid .cat-safety{color:#ff6b00}.category-grid .cat-auto{color:#4a5568}.category-grid .cat-more{color:#343434}
.category-grid button b{color:#171717}.category-grid button:hover{transform:translateY(-5px);box-shadow:0 12px 28px rgba(0,0,0,.11)}
.brand-grid{display:grid;grid-template-columns:repeat(7,minmax(0,1fr));gap:clamp(12px,1vw,22px);padding:8px 0 14px;background:transparent}
.brand-grid a{height:clamp(112px,7.3vw,164px)!important;border-radius:18px!important;padding:clamp(12px,1vw,24px)!important;overflow:hidden;box-shadow:0 7px 18px rgba(0,0,0,.09);transition:.18s ease}

.brand-grid a:hover{transform:translateY(-4px);filter:brightness(1.02)}
.brand-grid img,.brand-grid a:nth-child(n) img{width:92%;max-width:92%;height:clamp(84px,5.8vw,132px);object-fit:contain;mix-blend-mode:normal}
.benefits{padding:clamp(22px,1.6vw,36px);gap:clamp(18px,1.5vw,34px)}.benefit-item svg{width:clamp(42px,2.7vw,58px);height:clamp(42px,2.7vw,58px)}.benefit-item b{font-size:clamp(12px,.82vw,17px)}.benefit-item small{font-size:clamp(10px,.7vw,14px)}
@media(max-width:1500px){.shell{width:calc(100% - 24px)}.head{grid-template-columns:220px minmax(440px,1fr) 350px;height:126px}.hero{height:405px;grid-template-columns:minmax(590px,2.35fr) minmax(185px,.64fr) minmax(220px,.72fr)}.brand-grid a{height:108px!important}.brand-grid img,.brand-grid a:nth-child(n) img{height:82px}.category-grid button{height:120px}}
@media(max-width:1250px){.category-grid{grid-template-columns:repeat(5,1fr)}.brand-grid{grid-template-columns:repeat(4,1fr)}.hero{height:auto}}
@media(max-width:980px){.head{grid-template-columns:190px 1fr}.actions{display:none}.hero{grid-template-columns:1fr 240px}.category-grid{grid-template-columns:repeat(3,1fr)}.brand-grid{grid-template-columns:repeat(3,1fr)}}
@media(max-width:700px){.shell{width:calc(100% - 16px)}.head{grid-template-columns:1fr;height:auto}.hero{grid-template-columns:1fr}.category-grid{grid-template-columns:repeat(2,1fr)}.brand-grid{grid-template-columns:repeat(2,1fr)}.brand-grid a{height:108px!important}.benefits{grid-template-columns:1fr}}



/* V3.4: header naranja, escala realmente fluida y marcas más protagonistas */
html{font-size:clamp(15px,.82vw,19px)}
body{overflow-x:hidden}
.shell{width:calc(100% - clamp(18px,1.6vw,44px))!important;max-width:none!important;margin-inline:auto}
.site-header{background:var(--primary-color)!important}
.head{background:var(--primary-color)!important;grid-template-columns:clamp(290px,18vw,430px) minmax(620px,1fr) clamp(380px,23vw,560px)!important;height:clamp(138px,8.2vw,188px)!important;gap:clamp(24px,2vw,50px)!important}


.search-bar{background:#fff!important;border:0!important;box-shadow:0 3px 12px rgba(0,0,0,.16);height:clamp(68px,4vw,88px)!important}
.search-submit{background:#fff!important;border-left:1px solid #e5e5e5!important;height:100%!important}
.search-submit svg{stroke:#111!important;width:clamp(27px,1.7vw,34px)!important;height:clamp(27px,1.7vw,34px)!important}
.clear-search{color:#111!important}
.search-scope{color:#111!important;border-left:1px solid #e5e5e5!important}
.action-item{color:#111!important}
.action-item>svg,.cart-icon-wrap>svg{stroke:#111!important;width:clamp(34px,2.2vw,46px)!important;height:clamp(34px,2.2vw,46px)!important;stroke-width:1.9!important}
.action-item b{font-size:clamp(13px,.86vw,18px)!important}.action-item small{font-size:clamp(10px,.66vw,14px)!important;color:#222!important}
.cart-icon-wrap i{background:#111!important;color:#fff!important}
.main-nav .shell{width:calc(100% - clamp(18px,1.6vw,44px))!important}
.hero{width:100%!important;grid-template-columns:minmax(0,2.8fr) minmax(240px,.68fr) minmax(290px,.8fr)!important;height:clamp(470px,29vw,700px)!important}
.category-grid{grid-template-columns:repeat(9,minmax(120px,1fr))!important;gap:clamp(12px,.9vw,20px)!important}
.category-grid button{height:clamp(132px,8.4vw,190px)!important;border-radius:16px!important;background:#fff!important}
.category-grid svg{width:clamp(58px,4vw,88px)!important;height:clamp(58px,4vw,88px)!important;filter:drop-shadow(0 4px 7px rgba(0,0,0,.08))}
.category-grid b{font-size:clamp(13px,.88vw,18px)!important}
.brand-grid{grid-template-columns:repeat(7,minmax(150px,1fr))!important;gap:clamp(14px,1.1vw,24px)!important}
.brand-grid a{height:clamp(145px,9vw,205px)!important;padding:clamp(8px,.7vw,14px)!important;border-radius:20px!important}
.brand-grid img,.brand-grid a:nth-child(n) img{width:98%!important;max-width:98%!important;height:clamp(118px,7.5vw,175px)!important;object-fit:contain!important}
@media(max-width:1550px){
  .head{grid-template-columns:280px minmax(500px,1fr) 360px!important;height:138px!important}
  
  .hero{grid-template-columns:minmax(0,2.5fr) 205px 245px!important;height:430px!important}
  .brand-grid a{height:132px!important}.brand-grid img,.brand-grid a:nth-child(n) img{height:108px!important}
}
@media(max-width:1250px){
  .head{grid-template-columns:240px minmax(420px,1fr) 300px!important;gap:16px!important}
  .hero{grid-template-columns:minmax(0,1fr) 230px!important;height:auto!important}.side-promos{display:none!important}.banner,.quote-box{min-height:410px!important}
  .category-grid{grid-template-columns:repeat(5,minmax(0,1fr))!important}.brand-grid{grid-template-columns:repeat(4,minmax(0,1fr))!important}
}
@media(max-width:980px){
  .top-strip-inner{grid-template-columns:repeat(3,1fr)!important}.top-item:nth-child(4),.top-item:nth-child(5){display:none!important}
  .head{grid-template-columns:220px 1fr!important;height:128px!important}.actions{display:none!important}
  .hero{grid-template-columns:1fr!important}.quote-box{min-height:0!important}.category-grid{grid-template-columns:repeat(3,1fr)!important}.brand-grid{grid-template-columns:repeat(3,1fr)!important}
}
@media(max-width:700px){
  .shell{width:calc(100% - 14px)!important}.head{grid-template-columns:1fr!important;height:auto!important;padding:12px 0 16px!important}
  .search-bar{height:60px!important}.search-scope{display:none!important}.category-grid{grid-template-columns:repeat(2,1fr)!important}.brand-grid{grid-template-columns:repeat(2,1fr)!important}.brand-grid a{height:120px!important}.brand-grid img,.brand-grid a:nth-child(n) img{height:96px!important}
}


/* FERREX Online V3.6 — composición equilibrada del hero */
.shell{width:calc(100% - clamp(70px,5.4vw,132px))!important;max-width:1900px!important;margin-inline:auto!important}
.main-nav .shell{width:calc(100% - clamp(70px,5.4vw,132px))!important;max-width:1900px!important}
.hero{grid-template-columns:minmax(0,2.05fr) minmax(430px,.95fr)!important;gap:clamp(12px,1vw,20px)!important;height:clamp(440px,27vw,610px)!important}
.service-grid{display:grid!important;grid-template-columns:repeat(2,minmax(0,1fr))!important;grid-template-rows:repeat(2,minmax(0,1fr))!important;gap:clamp(10px,.75vw,15px)!important}
.service-grid .promo-card{min-height:0!important;padding:clamp(18px,1.25vw,28px)!important;display:flex;flex-direction:column;justify-content:center;border-radius:12px!important}
.service-grid .promo-card b{font-size:clamp(20px,1.35vw,29px)!important}.service-grid .promo-card p{font-size:clamp(11px,.72vw,15px)!important}.service-grid .promo-card a{font-size:clamp(10px,.65vw,13px)!important;margin-top:5px}.service-grid .promo-card i{font-size:clamp(28px,2vw,42px)!important}
.quote-mini{background:#fff!important;color:#111!important;border:2px solid var(--orange)!important;position:relative}
.quote-mini span{color:inherit!important}.quote-mini b{padding-left:clamp(42px,3vw,60px)}.quote-mini p{padding-left:clamp(42px,3vw,60px);margin-top:9px!important}.quote-mini a{color:var(--orange)!important;padding-left:clamp(42px,3vw,60px)}
.quote-mini-icon{position:absolute;left:clamp(16px,1.2vw,25px);top:clamp(20px,1.5vw,31px);width:clamp(30px,2.1vw,44px);height:clamp(30px,2.1vw,44px)}.quote-mini-icon svg{width:100%;height:100%;fill:none;stroke:var(--orange);stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
@media(max-width:1550px){.shell,.main-nav .shell{width:calc(100% - 72px)!important}.hero{grid-template-columns:minmax(0,1.9fr) minmax(390px,.95fr)!important;height:430px!important}}
@media(max-width:1250px){.shell,.main-nav .shell{width:calc(100% - 48px)!important}.hero{grid-template-columns:1fr!important;height:auto!important}.service-grid{grid-template-columns:repeat(4,minmax(0,1fr))!important;grid-template-rows:1fr!important}.service-grid .promo-card{min-height:180px!important}}
@media(max-width:980px){.shell,.main-nav .shell{width:calc(100% - 34px)!important}.service-grid{grid-template-columns:repeat(2,minmax(0,1fr))!important}.service-grid .promo-card{min-height:170px!important}}
@media(max-width:700px){.shell,.main-nav .shell{width:calc(100% - 24px)!important}.service-grid{grid-template-columns:1fr!important}.service-grid .promo-card{min-height:150px!important}}
.search-all-results{width:100%;border:0;border-top:1px solid #eee;background:#fff;padding:14px 16px;text-align:left;font-weight:900;color:#e85f12;cursor:pointer}.search-all-results:hover{background:#fff8f3}
.js-history-item,.js-category-link{display:block;width:100%;box-sizing:border-box;border:0;border-top:1px solid #eee;background:#fff;padding:12px 16px;text-align:left;font-size:13px;font-weight:700;color:#333;cursor:pointer;text-decoration:none}
.js-history-item:hover,.js-category-link:hover{background:#fafafa}


/* FERREX Online V4.1 — mobile header/navigation responsive fix */
@media (max-width: 700px){
  html,body{overflow-x:hidden!important}
  .shell{width:calc(100% - 24px)!important;max-width:none!important;margin-inline:auto!important}

  /* Benefits strip becomes a swipeable ribbon instead of squeezing cards */
  .top-strip{overflow:hidden!important}
  .top-strip-inner{
    display:flex!important;
    overflow-x:auto!important;
    scroll-snap-type:x mandatory;
    -webkit-overflow-scrolling:touch;
    min-height:74px!important;
    padding:0 12px!important;
    scrollbar-width:none;
  }
  .top-strip-inner::-webkit-scrollbar{display:none}
  .top-item,
  .top-item:nth-child(n){
    display:flex!important;
    flex:0 0 76vw!important;
    min-width:245px!important;
    justify-content:flex-start!important;
    padding:12px 18px!important;
    border-right:1px solid #2d2d2d!important;
    scroll-snap-align:start;
  }
  .top-item svg{width:29px!important;height:29px!important}
  .top-item b{font-size:15px!important;line-height:1.15}
  .top-item small{font-size:12px!important;line-height:1.3}

  /* Header becomes 3 clear mobile rows: logo/actions, search, nav */
  .site-header{background:var(--primary-color)!important}
  .head{
    width:100%!important;
    max-width:none!important;
    display:grid!important;
    grid-template-columns:1fr auto!important;
    grid-template-areas:"logo actions" "search search"!important;
    gap:12px 10px!important;
    height:auto!important;
    padding:16px 14px 14px!important;
    align-items:center!important;
  }
  
  
  .actions{
    grid-area:actions!important;
    display:flex!important;
    align-items:center!important;
    justify-content:flex-end!important;
    gap:4px!important;
  }
  .action-item{
    min-width:52px!important;
    padding:4px!important;
    gap:1px!important;
  }
  .action-item>svg,.cart-icon-wrap>svg{
    width:28px!important;
    height:28px!important;
  }
  .action-item b{font-size:10px!important;line-height:1.1!important}
  .action-item small{display:none!important}
  .cart-icon-wrap i{right:-7px!important;top:-7px!important;min-width:17px!important;height:17px!important;font-size:9px!important}

  .search-wrap{grid-area:search!important;width:100%!important;min-width:0!important}
  .search-bar{
    width:100%!important;
    height:54px!important;
    border-radius:27px!important;
    box-shadow:0 3px 10px rgba(0,0,0,.15)!important;
  }
  .search-bar input{
    width:100%!important;
    min-width:0!important;
    font-size:16px!important;
    padding:0 16px!important;
  }
  .clear-search{width:38px!important;height:54px!important;font-size:25px!important}
  .search-scope{display:none!important}
  .search-submit{width:54px!important;height:54px!important;flex:0 0 54px!important}
  .search-submit svg{width:24px!important;height:24px!important}
  .search-results{top:60px!important;left:0!important;right:0!important;max-height:58vh!important}
  .search-result{grid-template-columns:42px minmax(0,1fr) auto!important;padding:9px 10px!important;gap:8px!important}
  .search-result img,.result-placeholder{width:42px!important;height:42px!important}
  .search-result strong{font-size:12px!important;line-height:1.2!important}
  .search-result small{font-size:9.5px!important}
  .search-result em{font-size:12px!important}

  /* Full nav remains available through horizontal swipe */
  .main-nav{height:56px!important;overflow:hidden!important}
  .main-nav .shell{
    width:100%!important;
    max-width:none!important;
    height:56px!important;
    padding:0 14px!important;
    margin:0!important;
    display:flex!important;
    align-items:center!important;
    gap:28px!important;
    overflow-x:auto!important;
    overflow-y:hidden!important;
    white-space:nowrap!important;
    -webkit-overflow-scrolling:touch;
    scrollbar-width:none;
  }
  .main-nav .shell::-webkit-scrollbar{display:none}
  .main-nav a{font-size:13px!important;flex:0 0 auto!important}
  .nav-categories svg{width:20px!important;height:20px!important}

  /* Home content */
  main.shell{width:calc(100% - 24px)!important}
  .hero{grid-template-columns:1fr!important;height:auto!important;gap:12px!important;margin-top:12px!important}
  .banner{height:360px!important;border-radius:12px!important}
  .banner-copy{left:24px!important;right:20px!important;top:34px!important}
  .banner h1,.banner .banner-heading-alt{font-size:clamp(34px,10.5vw,46px)!important;line-height:1.02!important;letter-spacing:-1px!important}
  .banner p{font-size:15px!important;line-height:1.4!important;margin:18px 0!important}
  .banner button,.banner .banner-cta{padding:13px 20px!important;font-size:13px!important}
  .tool-art{width:63%!important;right:-5%!important;bottom:-2%!important;opacity:.72!important}
  .dots{bottom:10px!important;left:50%!important;transform:translateX(-50%)!important}

  .service-grid{
    display:grid!important;
    grid-template-columns:repeat(2,minmax(0,1fr))!important;
    grid-template-rows:repeat(2,minmax(138px,auto))!important;
    gap:10px!important;
  }
  .service-grid .promo-card{min-height:138px!important;padding:15px!important}
  .service-grid .promo-card b{font-size:18px!important;line-height:1.02!important}
  .service-grid .promo-card p{font-size:11px!important;line-height:1.35!important;margin:7px 0 4px!important}
  .service-grid .promo-card a{font-size:10px!important}
  .service-grid .promo-card i{font-size:27px!important;right:12px!important;top:14px!important}
  .quote-mini b,.quote-mini p,.quote-mini a{padding-left:34px!important}
  .quote-mini-icon{left:12px!important;top:16px!important;width:27px!important;height:27px!important}

  .compact{margin-top:20px!important}
  .section-heading{margin-bottom:10px!important}
  .section-heading h2{font-size:15px!important}

  /* Horizontal swipe keeps categories/brands readable instead of tiny */
  .category-grid{
    display:flex!important;
    overflow-x:auto!important;
    gap:10px!important;
    padding:2px 1px 10px!important;
    scroll-snap-type:x proximity;
    -webkit-overflow-scrolling:touch;
    scrollbar-width:none;
  }
  .category-grid::-webkit-scrollbar{display:none}
  .category-grid button{
    flex:0 0 132px!important;
    width:132px!important;
    height:112px!important;
    border-radius:12px!important;
    scroll-snap-align:start;
  }
  .category-grid svg{width:48px!important;height:48px!important}
  .category-grid b{font-size:12px!important}

  .brand-grid{
    display:flex!important;
    overflow-x:auto!important;
    gap:10px!important;
    padding:3px 1px 12px!important;
    scroll-snap-type:x proximity;
    -webkit-overflow-scrolling:touch;
    scrollbar-width:none;
  }
  .brand-grid::-webkit-scrollbar{display:none}
  .brand-grid a{
    flex:0 0 190px!important;
    width:190px!important;
    height:112px!important;
    border-radius:14px!important;
    scroll-snap-align:start;
  }
  .brand-grid img,.brand-grid a:nth-child(n) img{height:88px!important;width:94%!important;max-width:94%!important}

  .benefits{grid-template-columns:1fr!important;padding:18px!important;gap:16px!important;margin-bottom:24px!important}
}

@media (max-width: 390px){
  .head{padding-inline:10px!important}
  
  .actions{gap:0!important}
  .action-item{min-width:46px!important}
  .action-item b{font-size:9px!important}
  .banner{height:340px!important}
  .banner h1,.banner .banner-heading-alt{font-size:32px!important}
  .service-grid .promo-card{min-height:132px!important;padding:13px!important}
  .service-grid .promo-card b{font-size:16px!important}
}


/* FERREX Online V4.3 shared mobile header */
@media (max-width:700px){
  .top-strip{overflow:visible!important}
  .top-strip-inner{display:grid!important;grid-template-columns:1fr 1fr!important;overflow:visible!important;min-height:0!important;padding:0!important}
  .top-item,.top-item:nth-child(n){display:flex!important;min-width:0!important;width:auto!important;flex:auto!important;min-height:54px!important;padding:8px 10px!important;border-right:1px solid #2d2d2d!important;border-bottom:1px solid #2d2d2d!important;gap:7px!important;scroll-snap-align:none!important}
  .top-item:nth-child(5){grid-column:1/-1!important;justify-content:center!important;border-bottom:0!important}
  .top-item svg{width:21px!important;height:21px!important}
  .top-item b{font-size:10px!important;line-height:1.12!important}
  .top-item small{font-size:8.5px!important;line-height:1.15!important;margin-top:2px!important}
  .main-nav{height:auto!important;overflow:visible!important}
  .main-nav .shell{display:grid!important;grid-template-columns:repeat(4,minmax(0,1fr))!important;width:100%!important;max-width:none!important;height:auto!important;min-height:52px!important;padding:0 4px!important;gap:0!important;overflow:visible!important}
  .main-nav a{display:flex!important;align-items:center!important;justify-content:center!important;text-align:center!important;min-width:0!important;padding:10px 3px!important;font-size:10px!important;line-height:1.1!important;white-space:normal!important}
  .nav-categories{gap:4px!important}.nav-categories svg{width:16px!important;height:16px!important;flex:0 0 auto!important}
}

.ferrex-footer{margin-top:40px;background:var(--secondary-color,#101010);color:#fff;padding:36px 0 0}
.ferrex-footer-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:26px;padding-bottom:26px}
.ferrex-footer-col h3{font-size:12px;text-transform:uppercase;letter-spacing:.04em;margin:0 0 12px;color:#fff}
.ferrex-footer-col p,.ferrex-footer-col a{display:block;font-size:12.5px;color:#c9cdd3;line-height:1.7;text-decoration:none;margin:0 0 4px}
.ferrex-footer-col a:hover{color:#fff}
.ferrex-footer-logo{max-width:150px;height:auto;margin-bottom:12px;display:block}
.ferrex-footer-desc{color:#c9cdd3;font-size:12.5px;line-height:1.6;margin:0 0 14px}
.ferrex-footer-social{display:flex;gap:14px;flex-wrap:wrap}
.ferrex-footer-social a{color:#c9cdd3;font-weight:700;font-size:11.5px}
.ferrex-footer-payments{color:#c9cdd3}
.ferrex-footer-custom{padding:14px 0;border-top:1px solid rgba(255,255,255,.1);color:#9ea3ab;font-size:11.5px;line-height:1.6}
.ferrex-footer-copy{padding:16px 0;border-top:1px solid rgba(255,255,255,.1);color:#8a8f97;font-size:11px}
@media(max-width:1000px){.ferrex-footer-grid{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(max-width:620px){.ferrex-footer-grid{grid-template-columns:1fr}}

.ferrex-whatsapp-float{position:fixed;bottom:22px;z-index:80;width:56px;height:56px;border-radius:50%;background:#25d366;display:flex;align-items:center;justify-content:center;box-shadow:0 8px 22px rgba(0,0,0,.28);text-decoration:none}
.ferrex-whatsapp-float:hover{background:#20bd5a}
.ferrex-whatsapp-float.pos-bottom-right{right:22px}
.ferrex-whatsapp-float.pos-bottom-left{left:22px}
.ferrex-whatsapp-float svg{width:29px;height:29px;fill:#fff}
@media(max-width:700px){.ferrex-whatsapp-float.hide-mobile{display:none}}

/* Corrección deliberada: el archivo trae varias reglas antiguas de .head/.search-bar
   con !important aplicándose siempre (no solo en la pantalla chica para la que se
   escribieron), compitiendo entre sí por el alto real del encabezado. En vez de
   deshacer ese historial completo (arriesgado, toca cada página), se fija aquí el
   alto correcto con selectores de más peso que siempre ganan, sin importar el orden
   de las reglas anteriores. */
@media(min-width:701px){
.site-header .head{height:116px!important}
.site-header .search-bar{height:58px!important}
.site-header .search-bar.compact{height:44px!important}
body.header-condensed .site-header .head{height:74px!important}
.site-header .search-bar.compact{margin-top:0!important}
}

/* Barra de menú (.main-nav) más angosta a pedido: había 4 valores de height
   compitiendo (56/60/clamp 60-76px) sin ningún control de Diseño. Se fija
   un valor único y más delgado en vez de tocar el historial de parches. */
@media(min-width:701px){
.site-header .main-nav{height:46px!important}
}

/* Corrección: en el rango 701px-980px (tablets) .actions (carrito/favoritos/
   mi cuenta/pedidos) se ocultaba por completo sin ningún acceso alterno — la
   regla que la vuelve a mostrar (V4.1) solo cubre max-width:700px. Se le da
   su propia fila en el encabezado, igual que ya se hace en mobile. */
@media(min-width:701px) and (max-width:980px){
  .site-header .head{
    height:auto!important;
    grid-template-columns:auto 1fr!important;
    grid-template-areas:"logo actions" "search search"!important;
    row-gap:12px!important;
    padding:16px 0!important;
  }
  .site-header .head .logo-link{grid-area:logo!important}
  .site-header .head .actions{
    grid-area:actions!important;
    display:flex!important;
    align-items:center!important;
    justify-content:flex-end!important;
    gap:8px!important;
  }
  .site-header .head .search-wrap{
    grid-area:search!important;
    width:100%!important;
  }
}
@media(min-width:701px){.ferrex-whatsapp-float.hide-desktop{display:none}}

/* Carrusel del banner principal: con 1 sola imagen cargada (el caso por
   defecto) solo existe un .banner-slide, ya "active", sin rotación -- se ve
   idéntico a como se veía antes de esto. Con 2+, online.js las rota. */
.banner-slide{position:absolute;inset:0;background-size:cover;background-position:center;opacity:0;transition:opacity .8s ease;z-index:0}
.banner-slide.active{opacity:1;z-index:1}
.banner:after{z-index:2}
.banner-copy{z-index:3}
.dots{z-index:4}
.dots span{cursor:pointer}

/* Nombres de categoría centrados: el flex del botón centra la CAJA del <b>,
   pero no el texto dentro de ella -- en nombres largos que envuelven a 2
   líneas, la segunda línea quedaba pegada a la izquierda. */
.category-grid b{text-align:center}

/* Foto real del producto en la tarjeta de categoría (si hay una disponible),
   en vez del ícono. Sin relación con .category-grid svg, así que no compite
   con sus reglas de tamaño. */
.category-grid img{width:84px;height:84px;object-fit:contain;border-radius:6px}

/* Respaldo: si ninguna categoría seleccionada tiene producto con foto Y el
   nombre no coincide con los 8 íconos con color propio, el ícono genérico
   de "category" heredaba el color de texto ambiente (negro) -- se ve como
   cuadros negros sólidos por el fill:currentColor!important de la regla
   .category-grid svg. Se le da un color neutro propio. */
.cat-category{color:#8a8a8a}

/* Botón de agregar rápido en la barra de búsqueda: una columna más al grid
   de resultados, ganando sobre todas las generaciones previas (incluida la
   de mobile en @media) con !important al final del archivo. */
.search-result{grid-template-columns:42px minmax(0,1fr) auto 34px!important;gap:14px!important}
.search-quick-add{width:34px;height:34px;border:0;border-radius:8px;background:var(--orange,#ff5a00);color:#fff;font-size:18px;font-weight:900;line-height:1;cursor:pointer}
.search-quick-add:disabled{opacity:.6;cursor:default}

/* Menú hamburguesa real en móvil: la V4.3 forzaba .main-nav .shell a una
   cuadrícula fija de 4 columnas sin importar cuántos enlaces hubiera --
   con más de 4 (típico: categorías + promociones + ferreamigo + marcas +
   enlaces propios) se veía amontonado. Ahora Diseño → Encabezado → Estilo
   de menú realmente hace algo: "hamburguesa" colapsa el menú detrás de un
   botón en móvil; "horizontal" conserva la barra deslizable de siempre. */
.nav-toggle{display:none}
@media(max-width:700px){
  .main-nav[data-menu-style="hamburger"]{height:auto!important;overflow:visible!important}
  .main-nav[data-menu-style="hamburger"] .nav-toggle{
    display:flex!important;align-items:center;gap:8px;width:100%;height:48px;
    border:0;background:transparent;color:var(--menu-text-color,#fff);
    font-size:13px;font-weight:800;letter-spacing:.03em;padding:0 14px;cursor:pointer;
  }
  .main-nav[data-menu-style="hamburger"] .nav-toggle svg{width:22px;height:22px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round}
  .main-nav[data-menu-style="hamburger"] .shell{
    display:none!important;flex-direction:column!important;align-items:stretch!important;
    width:100%!important;max-width:none!important;height:auto!important;
    padding:4px 14px 14px!important;gap:0!important;overflow:visible!important;
  }
  .main-nav[data-menu-style="hamburger"].nav-open .shell{display:flex!important}
  .main-nav[data-menu-style="hamburger"] .shell a{
    padding:12px 4px!important;font-size:14px!important;white-space:normal!important;
    border-top:1px solid rgba(255,255,255,.12);
  }
  .main-nav[data-menu-style="hamburger"] .nav-categories{justify-content:flex-start!important;gap:10px!important}
  .main-nav[data-menu-style="hamburger"] .nav-categories svg{width:20px!important;height:20px!important}

  /* "Horizontal" en móvil: la V4.3 forzaba una cuadrícula rígida de 4
     columnas (.main-nav .shell) sin importar cuántos enlaces hubiera --
     se restaura el deslizable de la V4.1 con más especificidad para ganar. */
  .main-nav[data-menu-style="horizontal"] .shell{
    display:flex!important;grid-template-columns:none!important;
    overflow-x:auto!important;overflow-y:hidden!important;white-space:nowrap!important;
    gap:28px!important;padding:0 14px!important;-webkit-overflow-scrolling:touch;
  }
  .main-nav[data-menu-style="horizontal"] .shell a{
    display:inline!important;flex:0 0 auto!important;padding:0!important;font-size:13px!important;white-space:nowrap!important;
  }
}