@import url('https://fonts.googleapis.com/css2?family=Roboto:wght@300;400;500;700&display=swap');

:root{
  --bg:#F5F5F5; --white:#FFFFFF; --ink:#111111; --muted:#737373;
  --line:#D9D9D9; --navy:#0B1F4D; --soft:#EFEFEF;
}
*{box-sizing:border-box}
html,body{margin:0;padding:0}
body{font-family:"Roboto",Arial,sans-serif;background:var(--bg);color:var(--ink);font-weight:400}

.site-header{background:#fff;border-bottom:1px solid #e7e7e7}
.header-inner{max-width:1500px;margin:auto;height:74px;padding:0 30px;display:flex;align-items:center;gap:22px}
.hamburger{border:0;background:transparent;font-size:25px;line-height:1;cursor:pointer;padding:0}
.logo{font-size:25px;font-weight:700;letter-spacing:5.5px;white-space:nowrap}
.search{margin-left:auto;width:min(520px,44vw);border:0;background:#f0f0f0;border-radius:26px;padding:13px 18px;font:400 14px "Roboto"}
.whatsapp-top{font-size:12px;font-weight:500;white-space:nowrap}

.shell{max-width:1500px;margin:auto;padding:28px 30px 70px}
.breadcrumb{font-size:12px;color:#6f6f6f;margin:0 0 24px}
.title-row{display:flex;align-items:flex-end;gap:20px;padding-bottom:18px;border-bottom:1px solid var(--line);margin-bottom:24px}
.title-block h1{font-size:27px;line-height:1.05;margin:0 0 8px;font-weight:700}
.title-block p{font-size:13px;margin:0;color:#444;font-weight:400}
.toolbar{margin-left:auto;display:flex;align-items:center;gap:22px;font-size:13px;white-space:nowrap}
.toolbar button{border:0;background:transparent;font:500 13px "Roboto";padding:0;cursor:pointer}
.view-icons{font-size:20px;letter-spacing:4px}

.catalog-layout{display:grid;grid-template-columns:220px minmax(0,1fr);gap:34px;align-items:start}

/* Sidebar: intentionally NO white card, it lives on the same gray background */
.filters{background:transparent;padding:0;margin:0}
.filters-title{font-size:14px;font-weight:700;margin:0 0 22px;line-height:1}
.filter-group{border-bottom:1px solid var(--line);padding:0 0 18px;margin-bottom:18px}
.filter-heading{display:flex;justify-content:space-between;align-items:center;font-size:13px;font-weight:500;margin-bottom:12px}
.filter-search{width:100%;height:39px;border:1px solid #d2d2d2;background:#fff;padding:0 12px;font:400 12px "Roboto";margin-bottom:12px}
.filter-option{display:flex;justify-content:space-between;align-items:center;gap:10px;font-size:12px;margin:9px 0;cursor:pointer}
.filter-option span:last-child{color:#777}
.filter-option input{margin:0 8px 0 0}
.clear{width:100%;height:40px;border:1px solid #111;background:transparent;font:500 12px "Roboto";cursor:pointer}

/* IMPORTANT ALIGNMENT:
   top of first product image = top of sidebar FILTERS heading area */
.products-pane{min-width:0}
.products-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));column-gap:16px;row-gap:62px;align-items:start}

/* Product: ONLY PHOTO is white. No white card behind text. */
.product{min-width:0;cursor:pointer}
.product-photo{position:relative;background:#fff;aspect-ratio:1/1;overflow:hidden}
.product-photo img{width:100%;height:100%;object-fit:contain;display:block}
.favorite{position:absolute;top:11px;right:12px;font-size:20px;font-weight:300}

/* More air after photo; then all info becomes one compact block near price */
.product-info{padding:12px 4px 0;display:flex;flex-direction:column}
.product-name{font-size:13px;line-height:1.28;font-weight:500;margin:0 0 2px;min-height:0}
.product-sku{font-size:11px;line-height:1.25;color:var(--muted);font-weight:400;margin:0}
.product-bottom{display:flex;align-items:center;justify-content:flex-start;gap:10px;margin-top:7px}
.product-price{font-size:16px;font-weight:700;line-height:1}
.product-status{font-size:10px;font-weight:500;color:var(--navy);letter-spacing:.2px}

/* Product page */
.product-detail{display:grid;grid-template-columns:minmax(0,760px) minmax(360px,1fr);gap:46px;align-items:start;justify-content:space-between}
.detail-gallery-wrap{display:grid;grid-template-columns:112px minmax(0,1fr);gap:14px;align-items:stretch;max-width:760px}
.thumb-rail{height:100%;display:flex;align-items:stretch}
.thumb-arrow{display:none!important}
.thumb-arrow:disabled{opacity:.18;cursor:default}
.thumbs-window{height:100%;overflow:hidden;width:100%}
.thumbs-track{height:100%;display:grid;grid-template-rows:repeat(4,minmax(0,1fr));gap:10px;transition:transform .28s ease}
.thumb{background:#fff;border:0;cursor:pointer;padding:0;overflow:hidden;min-height:0}
.thumb.active{border:0}
.thumb img{width:100%;height:100%;object-fit:contain;display:block}
.main-photo{position:relative;background:#fff;aspect-ratio:1/1;overflow:hidden;max-width:634px;touch-action:pan-y;user-select:none}
.main-photo img{width:100%;height:100%;object-fit:contain;display:block}
.detail-info{padding-top:0;min-height:100%;display:flex;flex-direction:column}
.detail-info h1{font-size:25px;line-height:1.15;font-weight:500;margin:0 0 7px}
.detail-sku,.detail-brand{font-size:12px;color:#686868;margin:0 0 6px}
.detail-price{font-size:25px;font-weight:700;margin:22px 0 8px}
.detail-status{font-size:11px;font-weight:500;color:var(--navy)}
.detail-description{font-size:14px;line-height:1.65;margin:25px 0 0;padding-top:20px;border-top:1px solid var(--line)}
.wa-button{display:flex;align-items:center;justify-content:center;gap:9px;margin-top:auto;background:#111;color:#fff;text-decoration:none;text-align:center;padding:15px 18px;font-size:13px;font-weight:500}

/* Related products: EXACT same visual language as catalog */
.related{margin-top:72px;border-top:1px solid var(--line);padding-top:28px}
.related h2{font-size:17px;font-weight:700;margin:0 0 24px}
.related-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:16px}

/* Mobile */
@media(max-width:900px){
  .header-inner{height:auto;padding:14px 14px 13px;flex-wrap:wrap;gap:12px}
  .logo{font-size:21px;letter-spacing:4px}
  .search{order:3;width:100%;margin:0}
  .shell{padding:20px 12px 50px}
  .title-row{align-items:flex-start;flex-direction:column}
  .toolbar{margin-left:0;width:100%;justify-content:space-between;gap:8px}
  .catalog-layout{display:block}
  .filters{display:none}
  .products-grid{grid-template-columns:repeat(2,minmax(0,1fr));column-gap:8px;row-gap:38px}
  .product-info{padding:10px 2px 0}
  .product-name{font-size:12px}
  .product-bottom{margin-top:7px}
  .product-price{font-size:15px}
  .product-detail{display:grid;grid-template-columns:minmax(0,760px) minmax(360px,1fr);gap:46px;align-items:start;justify-content:space-between}
  .detail-gallery-wrap{display:grid;grid-template-columns:112px minmax(0,1fr);gap:14px;align-items:stretch;max-width:760px}
  .thumb-rail{height:100%;display:flex;align-items:stretch}
  .thumb-arrow{display:none!important}
  .thumbs-window{height:100%;overflow:hidden;width:100%}
  .thumbs-track{height:100%;display:grid;grid-template-rows:repeat(4,minmax(0,1fr));gap:10px;transition:transform .28s ease}
  .thumb{background:#fff;border:0;cursor:pointer;padding:0;overflow:hidden;min-height:0}
  .main-photo{position:relative;background:#fff;aspect-ratio:1/1;overflow:hidden;max-width:634px;touch-action:pan-y;user-select:none}
  .related-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:8px}
}

.carousel-dots{position:absolute;left:0;right:0;bottom:12px;display:flex;justify-content:center;gap:6px;z-index:2}
.carousel-dot{width:6px;height:6px;border-radius:50%;border:0;background:#b7b7b7;padding:0;cursor:pointer}
.carousel-dot.active{background:#111}
.main-photo img,.thumb img{-webkit-user-drag:none;user-drag:none;user-select:none;-webkit-user-select:none;-webkit-touch-callout:none}

/* V8 interaction corrections */
.sort-control{display:flex;align-items:center;font-size:13px}
.sort-control select{border:0;background:transparent;font:700 13px "Roboto";cursor:pointer;outline:none}
.view-icons{display:flex;gap:8px;letter-spacing:0}
.view-btn{width:30px;height:30px;border:0!important;border-radius:2px;background:transparent!important;font-size:18px!important;cursor:pointer}
.view-btn.active{background:#111!important;color:#fff}
.catalog-layout.filters-hidden{grid-template-columns:1fr}
.catalog-layout.filters-hidden .filters{display:none}
.products-grid.list-view{grid-template-columns:1fr;row-gap:18px}
.products-grid.list-view .product{display:grid;grid-template-columns:180px 1fr;gap:18px;align-items:start}
.products-grid.list-view .product-photo{aspect-ratio:1/1}
.products-grid.list-view .product-info{padding-top:4px}

/* Product gallery: 4 clean aligned thumbnails, no outline; active photo is always first */
.thumb{background:#fff;border:0;cursor:pointer;padding:0;overflow:hidden;min-height:0}
.thumb.active{border:0!important;outline:0!important}
.thumbs-track{height:100%;display:grid;grid-template-rows:repeat(4,minmax(0,1fr));gap:10px;transition:transform .28s ease}
.thumbs-track.slide-up{animation:thumbSlideUp .15s ease both}
.thumbs-track.slide-down{animation:thumbSlideDown .15s ease both}
@keyframes thumbSlideUp{from{transform:translateY(0);opacity:1}to{transform:translateY(-18px);opacity:.35}}
@keyframes thumbSlideDown{from{transform:translateY(0);opacity:1}to{transform:translateY(18px);opacity:.35}}
.main-arrow{position:absolute;top:50%;transform:translateY(-50%);z-index:3;width:38px;height:54px;border:0;background:rgba(255,255,255,.82);font:300 34px/1 "Roboto";cursor:pointer;opacity:0;transition:opacity .18s ease}
.main-photo:hover .main-arrow{opacity:1}
.main-prev{left:10px}.main-next{right:10px}
.carousel-dots{bottom:10px}

@media(max-width:900px){
  .product-detail{display:block}
  .detail-gallery-wrap{display:block;max-width:none}
  .thumb-rail{display:none}
  .main-photo{max-width:none;width:100%}
  .detail-info{padding-top:0;min-height:100%;display:flex;flex-direction:column}
  .main-arrow{opacity:.72}
}

.main-nav-arrow{position:absolute;top:50%;transform:translateY(-50%);width:42px;height:42px;border:0;border-radius:50%;background:rgba(255,255,255,.82);font-size:28px;line-height:1;cursor:pointer;z-index:3}
.main-nav-arrow.prev{left:14px}.main-nav-arrow.next{right:14px}
.main-nav-arrow:hover{background:#fff}
.whatsapp-icon{font-size:16px}


/* ===== V11: catalog controls ===== */
.toolbar{display:flex;align-items:center;gap:22px}
.toolbar button{font-family:"Roboto",Arial,sans-serif}
.sort-wrap{display:flex;align-items:center;gap:6px;font-size:13px}
.sort-select{
  border:0!important;
  outline:0!important;
  box-shadow:none!important;
  background:transparent!important;
  color:#111;
  font:500 13px "Roboto",Arial,sans-serif;
  padding:0 20px 0 0;
  cursor:pointer;
}
.view-toggle{display:flex;align-items:center;gap:12px}
.view-btn{border:0;background:transparent;padding:0;cursor:pointer;color:#777}
.view-btn.active{color:#111}
.grid-icon{width:18px;height:18px;display:grid;grid-template-columns:repeat(2,7px);grid-template-rows:repeat(2,7px);gap:2px}
.grid-icon i{display:block;background:currentColor}
.list-icon{width:20px;height:16px;display:flex;flex-direction:column;justify-content:center;gap:3px}
.list-icon i{display:block;height:2px;width:100%;background:currentColor}

/* Hiding filters truly gives products the available width */
.catalog-layout.filters-hidden{grid-template-columns:1fr}
.catalog-layout.filters-hidden .filters{display:none}

/* Real list view: one product per horizontal row */
.products-grid.list-view{grid-template-columns:1fr!important;row-gap:16px}
.products-grid.list-view .product{
  display:grid;
  grid-template-columns:190px minmax(0,1fr);
  align-items:center;
  gap:22px;
  padding:0 0 16px;
  border-bottom:1px solid var(--line);
}
.products-grid.list-view .product-photo{aspect-ratio:1/1}
.products-grid.list-view .product-info{padding:0;min-height:0;justify-content:center}
.products-grid.list-view .product-name{font-size:15px;margin-bottom:3px}
.products-grid.list-view .product-sku{font-size:12px;margin-bottom:8px}
.products-grid.list-view .product-price{font-size:17px}

/* ===== V11: product page ===== */
.detail-info{padding-top:0;min-height:100%;display:flex;flex-direction:column}
.detail-price{font-size:25px;font-weight:700;margin:10px 0 0}
.detail-status{display:none!important}
.wa-button{
  display:flex;align-items:center;justify-content:center;gap:8px;
  margin-top:auto;
  background:#111;color:#fff;text-decoration:none;text-align:center;
  padding:15px 18px;font-size:13px;font-weight:500
}
.wa-glyph{font-size:16px}

/* Four clean thumbnails, no arrows, no dots, no active border */
.thumb-rail{height:100%;display:flex;align-items:stretch}
.thumbs-window{height:100%;overflow:hidden;width:100%}
.thumbs-track{
  height:100%;
  display:grid;
  grid-template-rows:repeat(4,minmax(0,1fr));
  gap:10px;
}
.thumb{background:#fff;border:0!important;outline:0!important;cursor:pointer;padding:0;overflow:hidden;min-height:0}
.thumb.active{border:0!important;outline:0!important}
.thumb img{width:100%;height:100%;object-fit:contain;display:block}

/* Large-image carousel controls */
.main-photo{position:relative;background:#fff;aspect-ratio:1/1;overflow:hidden;max-width:634px;touch-action:pan-y;user-select:none}
.main-photo img{width:100%;height:100%;object-fit:contain;display:block}
.main-nav-arrow{
  position:absolute;top:50%;transform:translateY(-50%);
  width:42px;height:42px;border:0;border-radius:50%;
  background:rgba(255,255,255,.82);font-size:28px;line-height:1;
  cursor:pointer;z-index:3
}
.main-nav-arrow.prev{left:14px}.main-nav-arrow.next{right:14px}
.main-nav-arrow:hover{background:#fff}
.carousel-dots{position:absolute;left:0;right:0;bottom:12px;display:flex;justify-content:center;gap:6px;z-index:2}
.carousel-dot{width:6px;height:6px;border-radius:50%;border:0;background:#b7b7b7;padding:0;cursor:pointer}
.carousel-dot.active{background:#111}

/* Prevent easy drag/save interactions on product imagery */
.product-photo img,.main-photo img,.thumb img{
  -webkit-user-drag:none;user-drag:none;user-select:none;-webkit-user-select:none;-webkit-touch-callout:none
}

@media(max-width:900px){
  .toolbar{width:100%;justify-content:space-between;gap:8px}
  .sort-wrap{font-size:12px}
  .sort-select{font-size:12px;max-width:155px}
  .products-grid.list-view .product{grid-template-columns:120px minmax(0,1fr);gap:12px}
  .detail-info{min-height:auto}
  .thumb-rail{display:none}
  .main-photo{max-width:none;width:100%}
}


/* ===== V12 header / menu ===== */
.header-inner{position:relative}
.header-whatsapp{
  display:inline-flex;align-items:center;gap:7px;
  color:#111;text-decoration:none;
  font:500 12px "Roboto",Arial,sans-serif;
  white-space:nowrap;background:transparent;border:0
}
.header-whatsapp:hover{opacity:.68}
.header-whatsapp svg{width:20px;height:20px;display:block}

.menu-overlay{
  position:fixed;inset:0;background:rgba(0,0,0,.18);
  opacity:0;pointer-events:none;transition:opacity .2s ease;z-index:80
}
.menu-overlay.open{opacity:1;pointer-events:auto}
.side-menu{
  position:fixed;top:0;left:0;bottom:0;width:min(340px,86vw);
  background:#fff;transform:translateX(-102%);
  transition:transform .24s ease;z-index:90;
  padding:28px 26px;box-shadow:12px 0 28px rgba(0,0,0,.08)
}
.side-menu.open{transform:translateX(0)}
.side-menu-top{display:flex;align-items:center;justify-content:space-between;margin-bottom:34px}
.side-menu-brand{font-size:20px;font-weight:700;letter-spacing:4px}
.side-menu-close{border:0;background:transparent;font-size:27px;cursor:pointer}
.side-menu-nav{display:flex;flex-direction:column;gap:4px}
.side-menu-nav a{
  color:#111;text-decoration:none;font-size:15px;font-weight:500;
  padding:12px 0;border-bottom:1px solid #ececec
}
.side-menu-nav a:hover{opacity:.65}

/* breadcrumb simplified */
.breadcrumb{color:#666}
.breadcrumb a{color:inherit;text-decoration:none}

/* Ensure grid icon is clearly 2x2 and never collapses into one square */
.grid-icon{
  width:18px!important;height:18px!important;
  display:grid!important;
  grid-template-columns:repeat(2,7px)!important;
  grid-template-rows:repeat(2,7px)!important;
  gap:3px!important
}
.grid-icon i{
  width:7px!important;height:7px!important;
  display:block!important;background:currentColor!important
}

/* ===== V13 view toggle refinement ===== */
.view-toggle{display:flex;align-items:center;gap:14px}
.view-btn{
  border:0!important;
  background:transparent!important;
  padding:0!important;
  margin:0!important;
  color:#A6A6A6!important;
  box-shadow:none!important;
  border-radius:0!important;
  width:auto!important;height:auto!important;
}
.view-btn.active{color:#111!important;background:transparent!important}
.view-btn:hover{color:#444!important;background:transparent!important}

/* ===== V13 WhatsApp icon only ===== */
.header-whatsapp{
  width:30px;
  height:30px;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  color:#111;
  text-decoration:none;
  background:transparent!important;
  border:0!important;
  padding:0!important;
  flex:0 0 30px;
}
.header-whatsapp span{display:none!important}
.header-whatsapp svg{width:27px!important;height:27px!important;display:block}
.header-whatsapp:hover{opacity:.68}

/* V14 Sidebar */
.catalog-layout{align-items:start}
.filters{position:sticky;top:18px;max-height:calc(100vh - 36px);overflow-y:auto;overflow-x:hidden;padding-right:12px;scrollbar-width:thin;scrollbar-color:#8c8c8c transparent}
.filters::-webkit-scrollbar{width:6px}.filters::-webkit-scrollbar-track{background:transparent}.filters::-webkit-scrollbar-thumb{background:#8c8c8c;border-radius:999px}
.filter-group{border-bottom:1px solid var(--line);padding-bottom:16px;margin-bottom:16px}
.filter-heading{display:flex;align-items:center;justify-content:space-between;width:100%;border:0;background:transparent;padding:0;font:500 13px "Roboto",Arial,sans-serif;cursor:pointer;text-align:left}
.filter-chevron{width:8px;height:8px;border-right:1.6px solid #111;border-bottom:1.6px solid #111;transform:rotate(45deg);transition:transform .18s;margin-right:3px}
.filter-group.open .filter-chevron{transform:rotate(225deg)}
.filter-body{display:none;padding-top:12px}.filter-group.open .filter-body{display:block}
.filter-search{width:100%;height:42px;border:0!important;outline:0!important;background:#fff;border-radius:22px;padding:0 16px;font:400 12px "Roboto";box-shadow:0 0 0 1px #d4d4d4 inset}
.filter-search:focus{box-shadow:0 0 0 1.5px #111 inset}
.filter-option{display:flex;align-items:center;justify-content:space-between;gap:12px;min-height:34px;margin:0;cursor:pointer;font-size:12px}
.filter-option-main{display:flex;align-items:center;gap:10px;min-width:0}.filter-count{color:#777}
.filter-option input[type="checkbox"]{appearance:none;-webkit-appearance:none;width:18px;height:18px;border:1.4px solid #777;border-radius:2px;background:transparent;margin:0;display:grid;place-items:center;flex:0 0 18px}
.filter-option input[type="checkbox"]::after{content:"";width:8px;height:8px;background:#111;transform:scale(0);transition:transform .12s}.filter-option input[type="checkbox"]:checked{border-color:#111}.filter-option input[type="checkbox"]:checked::after{transform:scale(1)}
.more-btn{border:0;background:transparent;padding:8px 0 0;font:500 12px "Roboto";cursor:pointer;color:#111}
.autocomplete-box{margin-top:8px}.autocomplete-item{display:block;width:100%;border:0;background:transparent;text-align:left;padding:7px 4px;font:400 12px "Roboto";cursor:pointer}.autocomplete-item:hover{background:#ececec}
.price-row{display:grid;grid-template-columns:1fr 1fr;gap:8px}.price-field{width:100%;height:38px;border:0;outline:0;background:#fff;border-radius:20px;padding:0 12px;font:400 12px "Roboto";box-shadow:0 0 0 1px #d4d4d4 inset}
.color-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:14px 10px}.color-option{display:flex;flex-direction:column;align-items:center;gap:6px;cursor:pointer;font-size:11px;text-align:center;border:0;background:transparent}.color-swatch{width:34px;height:34px;border-radius:50%;border:1px solid transparent}.color-option.selected .color-swatch{box-shadow:0 0 0 2px #111}.color-swatch.white{border-color:#cfcfcf}.color-swatch.multicolor{background:conic-gradient(#ef3340 0 16%,#ffcc33 16% 33%,#6fbe44 33% 50%,#2496d1 50% 66%,#8e44ad 66% 83%,#f06a24 83% 100%)}
@media(max-width:900px){.filters{position:static;max-height:none;overflow:visible;padding-right:0}}

/* ===== V15 visual refinement ===== */
:root{
  --ink:#2B2B2B;
  --ink-strong:#333333;
  --muted:#666666;
  --control:#4A4A4A;
  --soft:#E3E3E3;
}
body{color:var(--ink)}
h1,h2,h3,.product-name,.product-price,.filters-title,.filter-heading{color:var(--ink)}
.product-sku,.breadcrumb,.subtitle,.filter-count{color:var(--muted)}

/* Sidebar truly fixed in viewport with its own complete scroll */
.filters{
  position:sticky;
  top:0;
  height:100vh;
  max-height:100vh;
  overflow-y:auto;
  overflow-x:hidden;
  overscroll-behavior:contain;
  scrollbar-width:thin;
  scrollbar-color:#8C8C8C transparent;
  padding-top:18px;
  padding-bottom:24px;
}
.filters::-webkit-scrollbar{width:6px}
.filters::-webkit-scrollbar-track{background:transparent}
.filters::-webkit-scrollbar-thumb{background:#8C8C8C;border-radius:999px;border:0}
.filters::-webkit-scrollbar-button{display:none;width:0;height:0}

/* Search fields */
.search-wrap,.top-search{position:relative}
#q{
  padding-left:42px!important;
}
.search-wrap::before,.top-search::before{
  content:"";
  position:absolute;left:16px;top:50%;width:14px;height:14px;
  border:1.5px solid #666;border-radius:50%;transform:translateY(-58%);
  pointer-events:none;z-index:2;
}
.search-wrap::after,.top-search::after{
  content:"";position:absolute;left:28px;top:55%;width:6px;height:1.5px;
  background:#666;transform:rotate(45deg);pointer-events:none;z-index:2;
}
.filter-search{
  border-radius:8px!important;
  padding-left:38px!important;
  position:relative;
}
.category-search-wrap{position:relative}
.category-search-wrap::before{
  content:"";position:absolute;left:14px;top:21px;width:12px;height:12px;
  border:1.4px solid #666;border-radius:50%;transform:translateY(-58%);z-index:2;pointer-events:none
}
.category-search-wrap::after{
  content:"";position:absolute;left:24px;top:24px;width:5px;height:1.4px;
  background:#666;transform:rotate(45deg);z-index:2;pointer-events:none
}

/* Softer controls */
.filter-chevron{border-color:var(--control)}
.filter-option input[type="checkbox"]{border-color:#777}
.filter-option input[type="checkbox"]:checked{border-color:var(--control)}
.filter-option input[type="checkbox"]::after{background:var(--control)}
.clear{
  background:#E3E3E3!important;color:#3F3F3F!important;border:0!important;
  border-radius:8px!important;font-weight:500!important;
}
.clear:hover{background:#D6D6D6!important}

/* Product text hierarchy */
.product-name{font-weight:500}
.product-price{font-weight:600;color:#333}
.product-sku{font-weight:400}

/* Product CTA */
.whatsapp-cta,.product-buy,.wa-button{
  background:#3F3F3F!important;color:#fff!important;border:0!important;border-radius:8px!important;
}
.whatsapp-cta:hover,.product-buy:hover,.wa-button:hover{background:#333!important}

/* Footer */
.site-footer{
  margin-top:72px;border-top:1px solid #D8D8D8;background:#ECECEC;color:#3F3F3F;
  padding:42px 30px 22px;
}
.footer-inner{
  max-width:1500px;margin:0 auto;display:grid;grid-template-columns:1.4fr 1fr 1fr;gap:60px
}
.footer-title{font-size:13px;font-weight:600;letter-spacing:.04em;margin-bottom:14px}
.footer-brand{font-size:18px;font-weight:600;letter-spacing:.18em;margin-bottom:10px}
.footer-copy{font-size:12px;color:#666;line-height:1.6;max-width:340px}
.footer-links{display:flex;flex-direction:column;gap:10px}
.footer-links a{color:#555;text-decoration:none;font-size:12px}
.footer-links a:hover{color:#2B2B2B}
.socials{display:flex;gap:15px;margin-top:18px}
.socials a{color:#555;text-decoration:none;font-size:13px;font-weight:500}
.footer-bottom{
  max-width:1500px;margin:32px auto 0;padding-top:18px;border-top:1px solid #D2D2D2;
  display:flex;justify-content:space-between;gap:20px;flex-wrap:wrap;font-size:11px;color:#707070
}
@media(max-width:900px){
  .filters{position:static;height:auto;max-height:none;overflow:visible;padding-top:0}
  .footer-inner{grid-template-columns:1fr;gap:30px}
}

/* ===== V16 final brand assets + visual consistency ===== */

/* Real brand logo */
.logo{display:flex;align-items:center}
.logo img{display:block;width:164px;max-height:34px;height:auto}
.side-menu-brand img{display:block;width:170px;height:auto}

/* Real search icon: remove CSS-drawn pseudo icon */
.top-search::before,.top-search::after,
.category-search-wrap::before,.category-search-wrap::after{display:none!important}
.top-search{display:block;flex:1;max-width:520px;margin-left:auto}
.top-search #q{
  width:100%;
  padding-left:43px!important;
  background-image:url("icon-search.svg")!important;
  background-repeat:no-repeat!important;
  background-position:16px center!important;
  background-size:17px 17px!important;
}
.filter-search{
  padding-left:39px!important;
  background-image:url("icon-search.svg")!important;
  background-repeat:no-repeat!important;
  background-position:13px center!important;
  background-size:15px 15px!important;
}

/* Header WhatsApp: real icon only */
.header-whatsapp img{width:28px;height:28px;display:block}
.header-whatsapp svg{display:none!important}

/* Price fields follow the same secondary-control language */
.price-field{
  border-radius:8px!important;
  color:#4A4A4A!important;
}

/* More relaxed grayscale language */
:root{
  --ink:#343434;
  --ink-strong:#303030;
  --muted:#737373;
  --control:#555555;
}
body{color:#343434}
.product-name,.product-price,.title-block h1,.filters-title,.filter-heading{color:#343434}
.filter-option input[type="checkbox"]:checked{border-color:#555}
.filter-option input[type="checkbox"]::after{background:#555}

/* CTA with real WhatsApp icon */
.wa-button{
  background:#454545!important;
  border-radius:8px!important;
  color:#fff!important;
  display:flex!important;
  align-items:center!important;
  justify-content:center!important;
  gap:10px!important;
}
.wa-button:hover{background:#393939!important}
.wa-button .wa-real-icon{
  width:21px;height:21px;display:block;
  filter:brightness(0) invert(1);
}

/* Darker footer */
.site-footer{
  background:#3E3E3E!important;
  color:#F1F1F1!important;
  border-top:0!important;
}
.footer-brand-logo{display:block;width:175px;height:auto;filter:brightness(0) invert(1);opacity:.95;margin-bottom:13px}
.footer-copy{color:#D2D2D2!important}
.footer-title{color:#F0F0F0!important}
.footer-links span{color:#CECECE;font-size:12px}
.footer-bottom{border-top-color:#595959!important;color:#BEBEBE!important}
.socials{display:flex;align-items:center;gap:17px;margin-top:18px}
.social-icon{
  display:inline-flex;align-items:center;justify-content:center;
  width:25px;height:25px;
}
.social-icon img{
  width:22px;height:22px;display:block;
  filter:brightness(0) invert(1);
  opacity:.82;
  transition:opacity .15s ease, transform .15s ease;
}
.social-icon:hover img{opacity:1;transform:translateY(-1px)}
.social-icon.whatsapp img{width:23px;height:23px}

/* Sidebar scroll: bar only, no native arrow buttons */
.filters::-webkit-scrollbar-button:single-button,
.filters::-webkit-scrollbar-button{display:none!important;width:0!important;height:0!important}

/* On desktop keep sidebar locked to viewport and internally scrollable */
@media(min-width:901px){
  .filters{
    position:sticky!important;
    top:16px!important;
    height:calc(100vh - 32px)!important;
    max-height:calc(100vh - 32px)!important;
    overflow-y:auto!important;
    overscroll-behavior:contain!important;
  }
}

/* ===== V17: header logo hierarchy + editorial footer ===== */

/* Never distort logo: width only + intrinsic aspect ratio */
.logo img{
  width:198px!important;
  height:auto!important;
  max-height:none!important;
  object-fit:contain!important;
}

/* Hamburger visually lighter so it does not compete with the brand */
.hamburger{
  width:26px!important;
  height:24px!important;
}
.hamburger span{
  height:1.5px!important;
  border-radius:1px!important;
}

/* Footer inspired by spacious editorial composition */
.site-footer{
  background:#3B3B3B!important;
  padding:0!important;
}
.footer-inner{
  max-width:none!important;
  width:100%!important;
  margin:0!important;
  padding:62px 3.2% 44px!important;
  display:grid!important;
  grid-template-columns:minmax(340px,1.6fr) minmax(360px,.9fr)!important;
  column-gap:10vw!important;
  align-items:start!important;
}
.footer-brand-area{
  min-width:0;
}
.footer-brand-logo{
  width:225px!important;
  height:auto!important;
  max-height:none!important;
  object-fit:contain!important;
  margin:0 0 14px!important;
}
.footer-tagline{
  color:#D5D5D5!important;
  font-size:15px!important;
  line-height:1.5!important;
  letter-spacing:.01em!important;
}
.footer-link-groups{
  display:grid!important;
  grid-template-columns:1fr 1.35fr!important;
  gap:46px!important;
  justify-self:end!important;
  width:min(100%,480px)!important;
}
.footer-title{
  margin-bottom:17px!important;
  letter-spacing:.04em!important;
}
.footer-links{
  gap:10px!important;
}
.footer-social-row{
  grid-column:1 / -1!important;
  display:flex!important;
  justify-content:center!important;
  align-items:center!important;
  gap:20px!important;
  padding:45px 0 8px!important;
}
.footer-social-row .social-icon{
  width:27px!important;
  height:27px!important;
  margin:0!important;
}
.footer-social-row .social-icon img{
  width:22px!important;
  height:22px!important;
}
.footer-divider{
  grid-column:1 / -1!important;
  border-top:1px solid #5A5A5A!important;
  margin-top:35px!important;
}
.footer-bottom{
  margin:0 3.2%!important;
  padding:20px 0 22px!important;
  border-top:0!important;
}
@media(max-width:900px){
  .logo img{width:178px!important}
  .footer-inner{
    padding:46px 24px 34px!important;
    grid-template-columns:1fr!important;
    gap:34px!important;
  }
  .footer-link-groups{
    justify-self:start!important;
    width:100%!important;
    max-width:480px!important;
  }
  .footer-social-row{
    grid-column:1!important;
    justify-content:flex-start!important;
    padding:10px 0 0!important;
    flex-wrap:wrap!important;
  }
  .footer-divider{grid-column:1!important;margin-top:8px!important}
  .footer-bottom{
    margin:0 24px!important;
    gap:10px!important;
  }
}

/* ===== V18 FINAL CATALOG REFINEMENTS ===== */

/* Header: stronger brand presence, preserved aspect ratio */
.logo img{
  width:224px!important;
  height:auto!important;
  max-height:none!important;
  object-fit:contain!important;
}

/* Lighter hamburger, no competition with logo */
.hamburger{
  font-size:0!important;
  width:28px!important;
  height:24px!important;
  padding:0!important;
  position:relative!important;
  background:transparent!important;
  border:0!important;
}
.hamburger::before,
.hamburger::after,
.hamburger{
  background:transparent!important;
}
.hamburger::before,
.hamburger::after{
  content:"";
  position:absolute;
  left:1px;
  width:22px;
  height:1px;
  background:#444!important;
}
.hamburger::before{top:6px}
.hamburger::after{bottom:6px}
.hamburger span{display:none!important}
.hamburger{
  box-shadow:inset 0 0 0 0 transparent!important;
}
.hamburger:focus{outline:none}
.hamburger::marker{display:none}

/* Middle hamburger stroke */
.hamburger > i{display:none}
.hamburger{
  background-image:linear-gradient(#444,#444)!important;
  background-repeat:no-repeat!important;
  background-size:22px 1px!important;
  background-position:1px 50%!important;
}

/* Sidebar: truly independent from page scroll on desktop */
@media(min-width:901px){
  .catalog-layout{
    position:relative!important;
    align-items:start!important;
  }
  .filters{
    position:sticky!important;
    top:0!important;
    height:100vh!important;
    max-height:100vh!important;
    min-height:0!important;
    overflow-y:auto!important;
    overflow-x:hidden!important;
    overscroll-behavior:contain!important;
    scrollbar-gutter:stable!important;
    padding-top:18px!important;
    padding-bottom:20px!important;
    box-sizing:border-box!important;
  }
  .products-pane{
    min-width:0!important;
  }
}
/* Scrollbar = thin gray bar only, no arrow buttons */
.filters{
  scrollbar-width:thin!important;
  scrollbar-color:#8A8A8A transparent!important;
}
.filters::-webkit-scrollbar{width:6px!important}
.filters::-webkit-scrollbar-track{background:transparent!important}
.filters::-webkit-scrollbar-thumb{
  background:#8A8A8A!important;
  border-radius:999px!important;
  border:0!important;
}
.filters::-webkit-scrollbar-button{
  display:none!important;
  width:0!important;
  height:0!important;
}

/* Footer: more compact, stronger logo, optical slogan alignment */
.site-footer{
  background:#3B3B3B!important;
}
.footer-inner{
  padding:44px 3.2% 24px!important;
  row-gap:0!important;
}
.footer-brand-logo{
  width:252px!important;
  height:auto!important;
  object-fit:contain!important;
  margin:0 0 8px!important;
}
.footer-tagline{
  margin-left:17px!important; /* optical alignment under weighted body of logo */
  margin-top:0!important;
  font-size:15px!important;
}
.footer-link-groups{
  align-self:start!important;
}
.footer-social-row{
  padding:25px 0 0!important;
}
.footer-divider{
  margin-top:24px!important;
}
.footer-bottom{
  padding:14px 0 16px!important;
}

/* Keep lower legal line visually close to divider */
.footer-bottom span{
  line-height:1.35!important;
}

/* Tablet/mobile */
@media(max-width:900px){
  .logo img{width:194px!important}
  .footer-brand-logo{width:226px!important}
  .footer-tagline{margin-left:14px!important}
  .footer-social-row{padding-top:8px!important}
  .footer-divider{margin-top:12px!important}
}

/* ===== AXESORIO V19 final refinements ===== */

/* Header logo: slightly stronger, always proportional */
.logo img{
  width:232px!important;
  height:auto!important;
  max-height:none!important;
  object-fit:contain!important;
}

/* Desktop filters: independent internal viewport from the first screen */
@media (min-width:901px){
  .filters{
    position:sticky!important;
    top:80px!important;
    height:calc(100vh - 92px)!important;
    max-height:calc(100vh - 92px)!important;
    min-height:0!important;
    overflow-y:auto!important;
    overflow-x:hidden!important;
    overscroll-behavior:contain!important;
    scrollbar-gutter:stable!important;
    box-sizing:border-box!important;
    padding-bottom:18px!important;
  }
}

/* Footer: stronger logo, deliberately smaller slogan, two separated bands */
.footer-inner{
  padding:42px 3.2% 0!important;
  grid-template-columns:minmax(360px,1.6fr) minmax(360px,.9fr)!important;
  column-gap:10vw!important;
}
.footer-brand-logo{
  width:258px!important;
  height:auto!important;
  max-height:none!important;
  object-fit:contain!important;
  margin:0 0 5px!important;
}
.footer-tagline{
  margin-left:17px!important;
  margin-top:0!important;
  font-size:13px!important;
  line-height:1.45!important;
  letter-spacing:.01em!important;
}
.footer-link-groups{align-self:start!important}

.footer-social-row{
  grid-column:1 / -1!important;
  margin-top:31px!important;
  padding:23px 0 20px!important;
  justify-content:center!important;
  gap:20px!important;
  border-top:1px solid #5A5A5A!important;
}
.footer-social-row .social-icon{
  width:27px!important;
  height:27px!important;
}
.footer-social-row .social-icon img{
  width:22px!important;
  height:22px!important;
}
.footer-divider{
  grid-column:1 / -1!important;
  margin-top:0!important;
  border-top:1px solid #5A5A5A!important;
}
.footer-bottom{
  margin:0 3.2%!important;
  padding:13px 0 15px!important;
  border-top:0!important;
}

@media(max-width:900px){
  .logo img{width:198px!important}
  .footer-inner{padding:36px 24px 0!important}
  .footer-brand-logo{width:232px!important}
  .footer-tagline{margin-left:14px!important;font-size:12.5px!important}
  .footer-social-row{
    margin-top:18px!important;
    padding:18px 0!important;
    justify-content:flex-start!important;
  }
  .footer-bottom{margin:0 24px!important;padding:12px 0 14px!important}
}

/* ===== V20: dynamic independent filter viewport + optical footer alignment ===== */

/*
   The filter panel stays in normal/sticky layout, but its visible height is
   calculated by JS from its ACTUAL top edge to the bottom of the viewport.
   This makes the internal scrollbar complete even while the page is still at
   the very top and the catalog heading is occupying vertical space.
*/
@media(min-width:901px){
  .filters{
    position:sticky!important;
    top:12px!important;
    height:auto!important;
    min-height:0!important;
    overflow-y:auto!important;
    overflow-x:hidden!important;
    overscroll-behavior:contain!important;
    box-sizing:border-box!important;
  }
}

/* Footer slogan: optical alignment with the weighted body of the A, not SVG edge */
.footer-tagline{
  margin-left:35px!important;
}
@media(max-width:900px){
  .footer-tagline{margin-left:27px!important}
}

/* ===== V21 slogan typography ===== */
@import url('https://fonts.googleapis.com/css2?family=Playfair+Display:wght@400&display=swap');

.footer-tagline{
  font-family:'Playfair Display', Georgia, serif!important;
  font-style:normal!important;
  font-weight:400!important;
  font-size:15px!important;
  line-height:1.35!important;
  letter-spacing:0!important;
  /* V20 was too far right; move back 9px for optical alignment under A */
  margin-left:26px!important;
  margin-top:0!important;
}
@media(max-width:900px){
  .footer-tagline{
    font-size:14px!important;
    margin-left:21px!important;
  }
}

/* ===== V22: final combined logo+slogan asset ===== */

/* Footer brand lockup now comes from a single SVG exactly as supplied */
.footer-brand-area{
  display:flex!important;
  align-items:flex-start!important;
}
.footer-brand-lockup{
  display:block!important;
  width:310px!important;
  height:auto!important;
  max-width:100%!important;
  object-fit:contain!important;
}

/* Hide old separate pieces if any remain */
.footer-brand-logo,
.footer-tagline{
  display:none!important;
}

/* Keep footer composition compact */
.footer-inner{
  padding-top:40px!important;
}
.footer-social-row{
  margin-top:26px!important;
}

/* Header remains on the standalone logo */
.logo img{
  width:232px!important;
  height:auto!important;
  object-fit:contain!important;
}

@media(max-width:900px){
  .footer-brand-lockup{width:270px!important}
  .logo img{width:198px!important}
}

/* ===== V24: valid footer SVG + safe light rendering ===== */
.footer-brand-lockup{
  filter:invert(93%)!important;
  width:310px!important;
  height:auto!important;
  max-width:100%!important;
  object-fit:contain!important;
}
@media(max-width:900px){
  .footer-brand-lockup{width:270px!important}
}

/* ===== V25: footer logo scale + anti-save friction ===== */

/* Slightly smaller combined footer logo+slogan, always proportional */
.footer-brand-lockup{
  width:285px!important;
  height:auto!important;
  max-width:100%!important;
  object-fit:contain!important;
  user-select:none!important;
  -webkit-user-select:none!important;
  -webkit-user-drag:none!important;
  -webkit-touch-callout:none!important;
}

/* Apply the same anti-save friction to all site brand/social/search imagery */
.logo img,
.footer-brand-lockup,
.header-whatsapp img,
.social-icon img,
.wa-real-icon,
.product-photo img,
.main-photo img,
.thumb img{
  user-select:none!important;
  -webkit-user-select:none!important;
  -webkit-user-drag:none!important;
  -webkit-touch-callout:none!important;
  pointer-events:auto;
}

@media(max-width:900px){
  .footer-brand-lockup{width:255px!important}
}

/* V26 INICIO */
.home-page{background:#fff;color:#333}.home-hero{height:calc(100vh - 80px);min-height:620px;position:relative;overflow:hidden}
.hero-slide{position:absolute;inset:0;opacity:0;visibility:hidden;transition:opacity .65s}.hero-slide.active{opacity:1;visibility:visible}
.hero-ph{position:absolute;inset:0;background:linear-gradient(125deg,#ddd9d3,#b8b5ae);display:flex;align-items:center;justify-content:center;color:#777;letter-spacing:.12em;font-size:13px}.hero-ph2{background:linear-gradient(125deg,#d9dde0,#aeb2b6)}
.hero-copy{position:absolute;z-index:2;left:5%;bottom:10%;max-width:680px}.hero-copy>p{font-size:16px;font-weight:600;letter-spacing:.08em;margin:0 0 15px}.hero-copy h1{font-size:clamp(52px,5.4vw,82px);line-height:.96;letter-spacing:-.045em;font-weight:500;margin:0 0 22px}.hero-copy>span{display:block;font-size:20px;line-height:1.45;margin-bottom:27px;max-width:570px}.hero-copy>a{display:inline-block;background:#303030;color:#fff;text-decoration:none;padding:14px 25px;font-size:15px;font-weight:600;border-radius:3px}
.hero-nav{position:absolute;z-index:4;right:3.5%;bottom:4%;display:flex;align-items:center;gap:10px}.hero-nav button,.sec-head button{width:44px;height:44px;border:0;border-radius:50%;background:#f1f1f1;color:#333;font-size:26px;cursor:pointer}.hero-nav i{width:8px;height:8px;background:#aaa;border-radius:50%}.hero-nav i.on{background:#333}#pause{font-size:14px}
.home-sec{padding:72px 3.2% 82px}.sec-head{display:flex;justify-content:space-between;align-items:center;margin-bottom:28px}.home-sec h2{font-size:clamp(34px,3vw,46px);line-height:1.05;letter-spacing:-.035em;font-weight:500;margin:0}.sec-head>div{display:flex;gap:10px;align-items:center}
.cat-track,.prod-track{display:flex;gap:14px;overflow-x:auto;scroll-snap-type:x mandatory;scrollbar-width:none}.cat-track::-webkit-scrollbar,.prod-track::-webkit-scrollbar{display:none}.cat-track>a,.home-prod{flex:0 0 calc((100% - 30px)/3.15);min-width:310px;scroll-snap-align:start;text-decoration:none;color:#333}.life{aspect-ratio:4/5;background:#e5e3df;display:flex;align-items:center;justify-content:center;color:#858585;font-size:12px;letter-spacing:.1em}.l2{background:#dad9d5}.l3{background:#e8e2dd}.l4{background:#dce0e1}.l5{background:#e4dfdc}.cat-track h3{font-size:23px;font-weight:500;margin:15px 0 0}
.featured{padding-top:58px}.feat-actions>a{font-size:18px;color:#333;text-underline-offset:4px;margin-right:10px}.home-prod-img{aspect-ratio:1;background:#f2f2f2;overflow:hidden;display:flex;align-items:center;justify-content:center}.home-prod-img img{width:100%;height:100%;object-fit:contain;-webkit-user-drag:none;user-select:none}.home-prod h3{font-size:21px;line-height:1.25;font-weight:500;margin:15px 0 5px}.home-prod p{margin:0 0 5px;font-size:16px;color:#6b6b6b}.home-prod strong{font-size:20px}
.quick{border-top:1px solid #ededed;padding-top:65px}.quick>h2{text-align:center;margin-bottom:48px}.quick-grid{display:grid;grid-template-columns:repeat(8,1fr);gap:18px;max-width:1320px;margin:auto}.quick-grid a{text-decoration:none;color:#333;text-align:center;font-size:17px;font-weight:500}.quick-grid b{height:82px;display:flex;align-items:center;justify-content:center;font-size:42px;font-weight:400;filter:grayscale(1);margin-bottom:10px}
@media(max-width:900px){.home-hero{height:calc(100svh - 72px);min-height:560px}.hero-copy{left:24px;right:24px;bottom:12%;max-width:none}.hero-copy h1{font-size:clamp(44px,12vw,64px)}.hero-copy>span{font-size:18px}.hero-nav{right:18px}.home-sec{padding:55px 24px 65px}.home-sec h2{font-size:36px}.cat-track>a,.home-prod{flex-basis:82%;min-width:0}.quick-grid{grid-template-columns:repeat(4,1fr);gap:30px 10px}.quick-grid a{font-size:15px}.quick-grid b{height:62px;font-size:34px}}
@media(max-width:520px){.quick-grid{grid-template-columns:repeat(2,1fr)}}

/* V27 navigation fixes */
a.logo{
  text-decoration:none!important;
  color:inherit!important;
  display:flex!important;
  align-items:center!important;
}

/* V28 — Inicio refinado */
.home-page{background:#f5f5f5}
.home-sec{background:#f5f5f5}
.home-hero .hero-copy{
  left:50%;
  right:auto;
  width:min(90%,900px);
  max-width:900px;
  transform:translateX(-50%);
  text-align:center;
}
.home-hero .hero-copy h1,
.home-hero .hero-copy>p{
  text-transform:uppercase;
}
.home-hero .hero-copy>span{margin-left:auto;margin-right:auto}
.home-hero .hero-copy>a{margin-left:auto;margin-right:auto}

#pause{
  display:flex!important;
  align-items:center;
  justify-content:center;
  gap:4px;
  font-size:0!important;
}
#pause span{
  display:block;
  width:3px;
  height:15px;
  background:currentColor;
  border-radius:1px;
}
#pause.is-paused span{display:none}
#pause.is-paused:after{
  content:"";
  width:0;height:0;
  border-top:7px solid transparent;
  border-bottom:7px solid transparent;
  border-left:11px solid currentColor;
  margin-left:2px;
}

/* Destacados: escritorio conserva una sola línea */
.featured .sec-head{display:flex;align-items:center;justify-content:space-between}
.featured .feat-actions{margin-left:auto;display:flex;align-items:center;gap:10px}
.featured .feat-actions>a{white-space:nowrap}

/* Las imágenes de producto mantienen fondo gris claro y producto completo */
.home-prod-img{background:#eee}
.home-prod-img img{display:block;width:100%;height:100%;object-fit:contain}

/* Móvil */
@media(max-width:900px){
  .home-hero .hero-copy{
    left:24px;
    right:24px;
    width:auto;
    max-width:none;
    transform:none;
    text-align:center;
  }
  .featured .sec-head{
    display:grid;
    grid-template-columns:1fr;
    gap:20px;
    align-items:initial;
  }
  .featured .sec-head>h2{
    grid-column:1;
  }
  .featured .feat-actions{
    width:100%;
    margin:0;
    display:grid;
    grid-template-columns:1fr auto auto;
    align-items:center;
    gap:10px;
  }
  .featured .feat-actions>a{
    justify-self:start;
    margin:0;
  }
  .featured .feat-actions .fp{
    justify-self:end;
  }
  .featured .feat-actions .fn{
    justify-self:end;
  }
}

/* V29 — routing/home/footer mobile */
.closing-banner{
  position:relative;
  height:42vh;
  min-height:360px;
  max-height:540px;
  overflow:hidden;
  background:#d9d9d9;
}
.closing-banner-bg{
  position:absolute;inset:0;
  display:flex;align-items:center;justify-content:center;
  background:linear-gradient(120deg,#d5d1cb,#aaa8a4);
  color:#777;font-size:12px;letter-spacing:.12em;
}
.closing-banner-copy{
  position:absolute;inset:0;
  display:flex;flex-direction:column;
  justify-content:center;align-items:center;
  text-align:center;padding:30px;
}
.closing-banner-copy h2{
  margin:0 0 25px;
  max-width:900px;
  font-size:clamp(38px,4vw,62px);
  line-height:1;
  letter-spacing:-.035em;
  font-weight:500;
}
.closing-banner-copy a{
  display:inline-block;background:#303030;color:#fff;
  text-decoration:none;padding:14px 25px;font-size:15px;font-weight:600;
}
.quick{padding-bottom:64px}

/* Ensure hamburger drawer is above home hero and clickable */
.menu-overlay,.menu-drawer,.mobile-menu,.side-menu{z-index:9999!important}
header{position:relative;z-index:10000}

@media(max-width:900px){
  .quick{padding-bottom:48px}
  .closing-banner{height:34svh;min-height:300px;max-height:400px}
  .closing-banner-copy h2{font-size:clamp(34px,9vw,48px)}

  /* Footer: one centered vertical composition on mobile */
  footer, .site-footer{height:auto!important;min-height:0!important}
  footer .footer-top, .site-footer .footer-top,
  footer .footer-main, .site-footer .footer-main{
    display:flex!important;
    flex-direction:column!important;
    align-items:center!important;
    justify-content:flex-start!important;
    text-align:center!important;
    gap:30px!important;
  }
  footer .footer-brand, .site-footer .footer-brand{
    width:100%!important;
    display:flex!important;
    flex-direction:column!important;
    align-items:center!important;
    text-align:center!important;
    margin:0!important;
  }
  footer .footer-links, .site-footer .footer-links{
    width:100%!important;
    display:flex!important;
    flex-direction:column!important;
    align-items:center!important;
    justify-content:center!important;
    gap:28px!important;
    margin:0!important;
  }
  footer .footer-links>div, .site-footer .footer-links>div{
    width:100%!important;text-align:center!important;
  }
  footer .socials, footer .footer-socials,
  .site-footer .socials,.site-footer .footer-socials{
    width:100%!important;
    justify-content:center!important;
    margin-left:auto!important;margin-right:auto!important;
  }
  footer .footer-bottom,.site-footer .footer-bottom{
    display:flex!important;flex-direction:column!important;
    align-items:center!important;text-align:center!important;
    gap:14px!important;
  }
  footer .footer-bottom>*,
  .site-footer .footer-bottom>*{
    margin-left:auto!important;margin-right:auto!important;text-align:center!important;
  }
}

/* V29 exact footer mobile selectors */
@media(max-width:900px){
 .site-footer .footer-inner{
   display:flex!important;flex-direction:column!important;align-items:center!important;
   text-align:center!important;padding-left:28px!important;padding-right:28px!important;
 }
 .site-footer .footer-brand-area{
   width:100%!important;display:flex!important;justify-content:center!important;
   align-items:center!important;text-align:center!important;
 }
 .site-footer .footer-brand-lockup{
   display:block!important;margin:0 auto!important;max-width:min(86%,430px)!important;height:auto!important;
 }
 .site-footer .footer-link-groups{
   width:100%!important;display:flex!important;flex-direction:column!important;
   align-items:center!important;justify-content:center!important;gap:26px!important;
   text-align:center!important;
 }
 .site-footer .footer-link-groups section{width:100%!important;text-align:center!important}
 .site-footer .footer-links{display:flex!important;flex-direction:column!important;align-items:center!important;gap:9px!important}
 .site-footer .footer-social-row{
   width:100%!important;display:flex!important;justify-content:center!important;
   align-items:center!important;margin-left:auto!important;margin-right:auto!important;
 }
}

/* ===== V30 MOBILE CLEANUP ===== */

/* Slightly tighter section rhythm */
.home-sec{padding-top:58px!important;padding-bottom:62px!important}
.quick{padding-bottom:34px!important}
.closing-banner{margin-bottom:0!important}
.home-page + .site-footer,
.closing-banner + .site-footer{margin-top:0!important}

/* robust drawer */
.ax-mobile-drawer{
  position:fixed;top:0;left:0;bottom:0;width:min(84vw,360px);
  background:#f5f5f5;z-index:20002;
  transform:translateX(-102%);transition:transform .22s ease;
  padding:92px 28px 30px;box-shadow:8px 0 28px rgba(0,0,0,.08);
}
.ax-mobile-drawer.open{transform:translateX(0)}
.ax-mobile-drawer nav{display:flex;flex-direction:column;gap:22px}
.ax-mobile-drawer nav a{font-size:22px;text-decoration:none;color:#333}
.ax-drawer-close{
  position:absolute;top:24px;right:22px;border:0;background:transparent;
  font-size:30px;line-height:1;color:#444;cursor:pointer
}
.ax-mobile-shade{position:fixed;inset:0;background:rgba(0,0,0,.18);z-index:20001;opacity:0;transition:opacity .18s}
.ax-mobile-shade.open{opacity:1}
.ax-menu-open{overflow:hidden}

/* mobile search */
.ax-mobile-search{
  position:fixed;top:0;left:0;right:0;z-index:20003;background:#fff;
  padding:16px 18px;box-shadow:0 8px 25px rgba(0,0,0,.08);
  transform:translateY(-105%);transition:transform .18s
}
.ax-mobile-search.open{transform:translateY(0)}
.ax-mobile-search-inner{
  display:flex;align-items:center;gap:12px;background:#f2f2f2;border-radius:24px;
  padding:10px 14px
}
.ax-mobile-search-inner img{width:18px;height:18px}
.ax-mobile-search-inner input{flex:1;border:0;background:transparent;outline:0;font-size:16px;min-width:0}
.ax-mobile-search-close{border:0;background:transparent;font-size:22px;color:#555}

/* Desktop remains unchanged */
@media(max-width:900px){
  /* One-row mobile header */
  header,
  .site-header{
    min-height:72px!important;
    height:72px!important;
    padding:0 18px!important;
    display:flex!important;
    align-items:center!important;
    gap:12px!important;
    background:#fff!important;
    flex-wrap:nowrap!important;
  }

  .hamburger{
    flex:0 0 34px!important;
    margin:0!important;
  }

  a.logo,.logo{
    flex:0 1 auto!important;
    margin:0!important;
    min-width:0!important;
  }
  a.logo img,.logo img{
    width:190px!important;
    max-width:42vw!important;
    height:auto!important;
  }

  .top-search{
    display:none!important;
  }
  .ax-mobile-search-trigger{
    margin-left:auto!important;
    width:36px;height:36px;border:0;background:transparent;padding:0;position:relative;
    flex:0 0 36px;
  }
  .ax-mobile-search-trigger span{
    position:absolute;width:15px;height:15px;border:2px solid #333;border-radius:50%;
    left:7px;top:6px;
  }
  .ax-mobile-search-trigger span:after{
    content:"";position:absolute;width:8px;height:2px;background:#333;right:-6px;bottom:-3px;
    transform:rotate(45deg);transform-origin:left center;
  }
  .header-whatsapp{
    flex:0 0 38px!important;
    width:38px!important;height:38px!important;
    display:flex!important;align-items:center!important;justify-content:center!important;
    margin:0!important;
  }
  .header-whatsapp img{width:26px!important;height:26px!important}

  /* Hero begins immediately below the compact header */
  .home-hero{height:calc(100svh - 72px)!important}

  /* tighter section gaps */
  .home-sec{padding:44px 24px 48px!important}
  .quick{padding-bottom:28px!important}

  /* Destacados: title + arrows same horizontal line, Ver todo below */
  .featured .sec-head{
    display:grid!important;
    grid-template-columns:1fr auto!important;
    grid-template-rows:auto auto!important;
    column-gap:12px!important;
    row-gap:8px!important;
    margin-bottom:20px!important;
  }
  .featured .sec-head>h2{
    grid-column:1!important;
    grid-row:1!important;
    margin:0!important;
    align-self:center!important;
  }
  .featured .feat-actions{
    display:contents!important;
  }
  .featured .feat-actions>a{
    grid-column:1!important;
    grid-row:2!important;
    justify-self:start!important;
    align-self:start!important;
    margin:0!important;
  }
  .featured .feat-actions .fp{
    grid-column:2!important;
    grid-row:1!important;
    justify-self:end!important;
    align-self:center!important;
    margin-right:54px!important;
  }
  .featured .feat-actions .fn{
    grid-column:2!important;
    grid-row:1!important;
    justify-self:end!important;
    align-self:center!important;
  }

  /* closing banner touches footer */
  .closing-banner{
    margin:0!important;
    min-height:280px!important;
    height:32svh!important;
  }
  .closing-banner + .site-footer{margin-top:0!important}

  /* Rebuild footer completely for mobile */
  .site-footer{
    margin-top:0!important;
    padding-top:0!important;
  }
  .site-footer .footer-inner{
    display:flex!important;
    flex-direction:column!important;
    align-items:center!important;
    text-align:center!important;
    padding:38px 24px 0!important;
    gap:0!important;
  }
  .site-footer .footer-brand-area{
    width:100%!important;
    display:flex!important;
    justify-content:center!important;
    margin:0 0 30px!important;
  }
  .site-footer .footer-brand-lockup{
    width:min(82vw,360px)!important;
    max-width:100%!important;
    height:auto!important;
    margin:0 auto!important;
  }
  .site-footer .footer-link-groups{
    width:100%!important;
    display:flex!important;
    flex-direction:column!important;
    align-items:center!important;
    gap:26px!important;
    margin:0 0 28px!important;
  }
  .site-footer .footer-link-groups section{
    width:100%!important;text-align:center!important;
  }
  .site-footer .footer-title{margin-bottom:10px!important}
  .site-footer .footer-links{
    display:flex!important;
    flex-direction:column!important;
    align-items:center!important;
    gap:8px!important;
  }
  .site-footer .footer-social-row{
    width:100%!important;
    display:flex!important;
    justify-content:center!important;
    align-items:center!important;
    gap:22px!important;
    padding:22px 0!important;
    margin:0!important;
    border-top:1px solid rgba(255,255,255,.16)!important;
    border-bottom:1px solid rgba(255,255,255,.16)!important;
  }
  .site-footer .footer-divider{display:none!important}
  .site-footer .footer-bottom{
    width:100%!important;
    display:flex!important;
    flex-direction:column!important;
    align-items:center!important;
    gap:12px!important;
    text-align:center!important;
    padding:20px 24px 24px!important;
    margin:0!important;
  }
  .site-footer .footer-bottom span{
    display:block!important;
    width:100%!important;
    text-align:center!important;
    margin:0!important;
  }
}

.ax-mobile-search-trigger{display:none!important}
@media(max-width:900px){.ax-mobile-search-trigger{display:block!important}}

/* ===== V32 CATEGORY ICONS + RESPONSIVE ===== */
.quick-grid{
  display:grid!important;
  grid-template-columns:repeat(9,minmax(0,1fr))!important;
  gap:22px 16px!important;
  max-width:1450px!important;
  margin:0 auto!important;
}
.quick-grid a{
  display:flex!important;
  flex-direction:column!important;
  align-items:center!important;
  text-align:center!important;
  text-decoration:none!important;
  color:#3A3A3A!important;
  font-size:16px!important;
  font-weight:500!important;
}
.cat-svg{
  width:100%!important;
  height:92px!important;
  display:flex!important;
  align-items:center!important;
  justify-content:center!important;
  margin-bottom:12px!important;
}
.cat-svg img{
  display:block!important;
  width:auto!important;
  height:auto!important;
  object-fit:contain!important;
  user-select:none!important;
  -webkit-user-select:none!important;
  -webkit-user-drag:none!important;
  -webkit-touch-callout:none!important;
  transition:opacity .15s ease,transform .15s ease!important;
}
/* Responsive reflow: re-arrange instead of squeeze */
@media(max-width:1200px){
  .quick-grid{grid-template-columns:repeat(5,minmax(0,1fr))!important;row-gap:30px!important}
}
@media(max-width:900px){
  .quick-grid{grid-template-columns:repeat(3,minmax(0,1fr))!important;gap:28px 14px!important}
  .quick-grid a{font-size:15px!important}
  .cat-svg{height:78px!important;margin-bottom:9px!important}
}
@media(max-width:520px){
  .quick-grid{grid-template-columns:repeat(3,minmax(0,1fr))!important;gap:24px 8px!important}
  .quick-grid a{font-size:13px!important;line-height:1.2!important}
  .cat-svg{height:68px!important}
  .cat-svg img{transform:scale(.82)!important}
  .quick-grid a:hover .cat-svg img{transform:scale(.82)!important}
}

/* ===== V33 10 CATEGORY ICONS ===== */
.quick-grid{
  grid-template-columns:repeat(10,minmax(0,1fr))!important;
  max-width:1540px!important;
}
@media(max-width:1350px){
  .quick-grid{grid-template-columns:repeat(5,minmax(0,1fr))!important}
}
@media(max-width:900px){
  .quick-grid{grid-template-columns:repeat(3,minmax(0,1fr))!important}
}
@media(max-width:520px){
  .quick-grid{grid-template-columns:repeat(2,minmax(0,1fr))!important}
}

/* ===== V34: category icons preserve the proportions supplied in the SVGs ===== */
.cat-svg{
  width:100%!important;
  height:96px!important;
  display:flex!important;
  align-items:center!important;
  justify-content:center!important;
  margin-bottom:12px!important;
}
.cat-svg img{
  display:block!important;
  width:auto!important;
  height:auto!important;
  max-width:112px!important;
  max-height:88px!important;
  object-fit:contain!important;
  transform:none!important;
}

/* Responsive: keep the same relative visual proportions, only scale the common container */
@media(max-width:900px){
  .cat-svg{height:82px!important;margin-bottom:10px!important}
  .cat-svg img{max-width:98px!important;max-height:74px!important}
}
@media(max-width:520px){
  .cat-svg{height:72px!important;margin-bottom:8px!important}
  .cat-svg img{max-width:88px!important;max-height:66px!important;transform:none!important}
}

/* ===== V35 MOBILE CATALOG RESPONSIVE ===== */

/* Mobile filter drawer */
.mobile-filters-drawer{
  position:fixed;
  top:0;left:0;bottom:0;
  width:min(92vw,390px);
  background:#f5f5f5;
  z-index:30002;
  transform:translateX(-102%);
  transition:transform .22s ease;
  display:flex;
  flex-direction:column;
  box-shadow:12px 0 30px rgba(0,0,0,.12);
}
.mobile-filters-drawer.open{transform:translateX(0)}
.mobile-filters-shade{
  position:fixed;inset:0;
  background:rgba(0,0,0,.22);
  z-index:30001;
  opacity:0;
  transition:opacity .18s ease;
}
.mobile-filters-shade.open{opacity:1}
.mobile-filter-open{overflow:hidden}
.mobile-filters-head{
  flex:0 0 auto;
  min-height:70px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  padding:0 22px;
  border-bottom:1px solid #ddd;
  background:#f5f5f5;
}
.mobile-filters-head strong{font-size:20px;letter-spacing:.01em}
.mobile-filters-close{
  border:0;background:transparent;color:#444;
  font-size:30px;line-height:1;cursor:pointer;
}
.mobile-filters-content{
  flex:1 1 auto;
  overflow-y:auto;
  overscroll-behavior:contain;
  padding:18px 18px 110px;
}
.mobile-filters-content .mobile-filter-clone{
  display:block!important;
  position:static!important;
  width:100%!important;
  height:auto!important;
  max-height:none!important;
  overflow:visible!important;
  padding:0!important;
  margin:0!important;
}
.mobile-filters-footer{
  position:absolute;
  left:0;right:0;bottom:0;
  display:grid;
  grid-template-columns:1fr 1.25fr;
  gap:10px;
  padding:14px 16px calc(14px + env(safe-area-inset-bottom));
  background:rgba(245,245,245,.98);
  border-top:1px solid #ddd;
}
.mobile-filters-footer button{
  min-height:48px;
  border:0;
  border-radius:8px;
  font-size:14px;
  font-weight:600;
}
.mobile-clear-filters{background:#e5e5e5;color:#333}
.mobile-apply-filters{background:#3a3a3a;color:#fff}

/* Drawer is desktop-hidden */
@media(min-width:901px){
  .mobile-filters-drawer,.mobile-filters-shade{display:none!important}
}

@media(max-width:900px){
  /* Header: keep brand strong; move utilities further right */
  .site-header .header-inner{
    width:100%!important;
    display:grid!important;
    grid-template-columns:38px minmax(0,1fr) 40px 40px!important;
    align-items:center!important;
    column-gap:12px!important;
    padding:0 18px!important;
  }
  .hamburger{grid-column:1!important}
  .logo{
    grid-column:2!important;
    justify-self:start!important;
    min-width:0!important;
  }
  .logo img{
    width:215px!important;
    max-width:100%!important;
    height:auto!important;
  }
  .ax-mobile-search-trigger{
    grid-column:3!important;
    justify-self:end!important;
    margin:0!important;
  }
  .header-whatsapp{
    grid-column:4!important;
    justify-self:end!important;
    margin:0!important;
  }

  /* Catalog heading / controls: no horizontal overflow */
  .catalog-toolbar,
  .catalog-controls,
  .products-toolbar,
  .sort-row{
    width:100%!important;
    max-width:100%!important;
    overflow:visible!important;
  }

  /* Keep list/grid toggles fully visible */
  .view-controls,
  .view-toggle,
  .layout-toggle{
    display:flex!important;
    flex:0 0 auto!important;
    gap:10px!important;
    margin-left:auto!important;
  }

  /* If toolbar uses generic structure, allow wrapping cleanly */
  .catalog-header-row,
  .catalog-toolbar,
  .products-toolbar{
    display:flex!important;
    flex-wrap:wrap!important;
    align-items:center!important;
    gap:14px 16px!important;
  }

  /* Mobile filter toggle should stay compact */
  #toggleFilters{
    flex:0 0 auto!important;
    white-space:nowrap!important;
  }

  /* Original sidebar stays hidden in page layout on mobile; drawer handles filters */
  .filters,
  #filters,
  .catalog-filters{
    display:none!important;
  }

  /* Product area gets full width */
  .catalog-layout,
  .catalog-main,
  .products-pane{
    grid-template-columns:1fr!important;
    width:100%!important;
    max-width:100%!important;
  }
}

@media(max-width:520px){
  .site-header .header-inner{
    grid-template-columns:34px minmax(0,1fr) 36px 36px!important;
    column-gap:10px!important;
    padding:0 14px!important;
  }
  .logo img{
    width:205px!important;
    max-width:100%!important;
  }
}

/* ===== V36 MOBILE FILTER CLEANUP ===== */
@media(max-width:900px){
  #mobileFiltersContent .mobile-duplicate-clear{
    display:none!important;
  }
  /* Footer buttons exist only in mobile drawer */
  .mobile-filters-footer{
    display:grid!important;
  }
}
@media(min-width:901px){
  .mobile-filters-footer{
    display:none!important;
  }
}

/* ===== V37: MOBILE FILTER FOOTER BUTTONS UNIFIED ===== */
@media (max-width:900px){
  .mobile-filters-footer .mobile-clear-filters,
  .mobile-filters-footer .mobile-apply-filters{
    background:#3a3a3a !important;
    color:#fff !important;
    border:1px solid #3a3a3a !important;
    box-shadow:none !important;
    font-weight:600 !important;
  }
}



/* ==========================================================
   V46 — IMPLEMENTACIÓN LIMPIA
   Escritorio queda intacto. Solo redefine móvil.
   ========================================================== */

/* Desktop: never show the mobile-only search button. */
.ax-mobile-search-trigger{display:none}

/* Ordenar por: flecha compacta y cercana al valor en TODAS las vistas. */
.sort-select{
  appearance:none!important;
  -webkit-appearance:none!important;
  border:0!important;
  outline:0!important;
  box-shadow:none!important;
  background-color:transparent!important;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6' viewBox='0 0 10 6'%3E%3Cpath d='M1 1l4 4 4-4' fill='none' stroke='%23444' stroke-width='1.4' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E")!important;
  background-repeat:no-repeat!important;
  background-position:right center!important;
  background-size:10px 6px!important;
  width:auto!important;
  padding:0 15px 0 0!important;
  margin:0!important;
}

/* Mobile drawer action buttons: same light gray as desktop Limpiar filtros. */
@media(max-width:900px){
  .mobile-filters-footer .mobile-clear-filters,
  .mobile-filters-footer .mobile-apply-filters{
    background:#e5e5e5!important;
    color:#2f2f2f!important;
    border:1px solid #e5e5e5!important;
    box-shadow:none!important;
  }

  /* HEADER MÓVIL:
     hamburguesa | logo | ESPACIO FLEXIBLE | lupa | WhatsApp */
  body .site-header{
    height:74px!important;
    min-height:74px!important;
    padding:0!important;
    background:#fff!important;
  }

  body .site-header > .header-inner{
    width:100%!important;
    height:74px!important;
    min-height:74px!important;
    display:grid!important;
    grid-template-columns:40px auto minmax(18px,1fr) 36px 36px!important;
    align-items:center!important;
    column-gap:9px!important;
    padding:0 12px!important;
    margin:0!important;
    box-sizing:border-box!important;
    flex-wrap:nowrap!important;
  }

  /* Hamburger: exactly 3 thin lines; visual smaller, tap area remains 40x44. */
  body .site-header > .header-inner > .hamburger{
    grid-column:1!important;
    justify-self:start!important;
    position:relative!important;
    width:40px!important;
    min-width:40px!important;
    height:44px!important;
    padding:0!important;
    margin:0!important;
    border:0!important;
    background:transparent!important;
    font-size:0!important;
    line-height:0!important;
    color:transparent!important;
    box-shadow:none!important;
  }
  body .site-header > .header-inner > .hamburger::before{
    content:""!important;
    position:absolute!important;
    left:5px!important;
    top:21px!important;
    width:24px!important;
    height:1.5px!important;
    background:#333!important;
    border:0!important;
    box-shadow:0 -7px 0 #333,0 7px 0 #333!important;
    transform:none!important;
  }
  body .site-header > .header-inner > .hamburger::after{
    content:none!important;
    display:none!important;
  }

  /* Logo gets the available natural width without competing with utilities. */
  body .site-header > .header-inner > .logo{
    grid-column:2!important;
    justify-self:start!important;
    display:flex!important;
    align-items:center!important;
    min-width:0!important;
    width:auto!important;
    margin:0!important;
    padding:0!important;
  }
  body .site-header > .header-inner > .logo img{
    display:block!important;
    width:clamp(180px,47vw,235px)!important;
    max-width:100%!important;
    height:auto!important;
    margin:0!important;
  }

  /* Desktop search disappears completely on mobile. */
  body .site-header > .header-inner > .top-search{
    display:none!important;
  }

  /* One real flexible spacer is column 3. */
  body .site-header > .header-inner > .ax-mobile-search-trigger{
    display:flex!important;
    grid-column:4!important;
    justify-self:end!important;
    align-items:center!important;
    justify-content:center!important;
    width:36px!important;
    min-width:36px!important;
    height:44px!important;
    padding:4px!important;
    margin:0!important;
    border:0!important;
    background:transparent!important;
    box-sizing:border-box!important;
  }
  body .site-header > .header-inner > .ax-mobile-search-trigger img{
    display:block!important;
    width:27px!important;
    height:27px!important;
    object-fit:contain!important;
  }

  body .site-header > .header-inner > .header-whatsapp{
    display:flex!important;
    grid-column:5!important;
    justify-self:end!important;
    align-items:center!important;
    justify-content:center!important;
    width:36px!important;
    min-width:36px!important;
    height:44px!important;
    padding:4px!important;
    margin:0!important;
    box-sizing:border-box!important;
  }
  body .site-header > .header-inner > .header-whatsapp img{
    display:block!important;
    width:27px!important;
    height:27px!important;
    object-fit:contain!important;
  }

  /* CATALOG TOOLBAR MOBILE:
     filters left, sort pushed right, ONE opposite-view icon at far right. */
  .title-row{
    align-items:flex-start!important;
    flex-direction:column!important;
  }
  .toolbar{
    width:100%!important;
    margin-left:0!important;
    display:grid!important;
    grid-template-columns:auto minmax(0,1fr) 26px!important;
    align-items:center!important;
    column-gap:10px!important;
    row-gap:0!important;
    white-space:nowrap!important;
    overflow:visible!important;
  }
  #toggleFilters{
    grid-column:1!important;
    justify-self:start!important;
    margin:0!important;
    white-space:nowrap!important;
  }
  .sort-wrap{
    grid-column:2!important;
    justify-self:end!important;
    display:flex!important;
    align-items:center!important;
    gap:5px!important;
    white-space:nowrap!important;
    min-width:0!important;
  }
  .sort-select{
    max-width:138px!important;
    padding-right:14px!important;
    font-size:12px!important;
  }
  .view-toggle{
    grid-column:3!important;
    justify-self:end!important;
    width:26px!important;
    min-width:26px!important;
    display:flex!important;
    align-items:center!important;
    justify-content:flex-end!important;
    gap:0!important;
    margin:0!important;
  }

  /* On mobile, the visible icon is ALWAYS the action you can switch to. */
  .view-toggle .view-btn.active{display:none!important}
  .view-toggle .view-btn:not(.active){
    display:flex!important;
    align-items:center!important;
    justify-content:center!important;
    width:24px!important;
    height:24px!important;
  }
}

@media(max-width:520px){
  body .site-header > .header-inner{
    grid-template-columns:38px auto minmax(12px,1fr) 34px 34px!important;
    column-gap:7px!important;
    padding:0 10px!important;
  }
  body .site-header > .header-inner > .logo img{
    width:clamp(172px,46vw,210px)!important;
  }
  body .site-header > .header-inner > .ax-mobile-search-trigger,
  body .site-header > .header-inner > .header-whatsapp{
    width:34px!important;
    min-width:34px!important;
  }
  body .site-header > .header-inner > .ax-mobile-search-trigger img,
  body .site-header > .header-inner > .header-whatsapp img{
    width:25px!important;
    height:25px!important;
  }
}


/* ==========================================================
   V48 HERO — imágenes responsive + controles preservados
   ========================================================== */
.home-hero .hero-picture{
  position:absolute;
  inset:0;
  display:block;
  width:100%;
  height:100%;
}
.home-hero .hero-picture img{
  display:block;
  width:100%;
  height:100%;
  object-fit:cover;
  object-position:center bottom;
  user-select:none;
  -webkit-user-drag:none;
}

/* El banner ya trae su propio texto: no hay copy ni CTA HTML. */

/* Mantener controles por encima del banner */
.home-hero .hero-nav{
  display:flex!important;
  visibility:visible!important;
  opacity:1!important;
  z-index:10!important;
}
.home-hero .hero-nav button,
.home-hero .hero-nav i{
  visibility:visible!important;
  opacity:1!important;
}

/* Móvil: header + hero llenan la primera pantalla visible */
@media(max-width:900px){
  .home-hero{
    height:calc(100svh - 74px)!important;
    min-height:calc(100svh - 74px)!important;
    max-height:none!important;
  }
  @supports(height:100dvh){
    .home-hero{
      height:calc(100dvh - 74px)!important;
      min-height:calc(100dvh - 74px)!important;
    }
  }
  .home-hero .hero-slide,
  .home-hero .hero-picture{
    width:100%!important;
    height:100%!important;
  }
  .home-hero .hero-picture img{
    width:100%!important;
    height:100%!important;
    object-fit:cover!important;
    object-position:center bottom!important;
  }
  .home-hero .hero-nav{
    right:18px!important;
    bottom:18px!important;
  }
}


/* ==========================================================
   V49 HERO — anclado abajo + SVG personalizados
   ========================================================== */
.home-hero .hero-nav button{
  background-color:rgba(255,255,255,.88)!important;
  background-repeat:no-repeat!important;
  background-position:center!important;
  background-size:22px 22px!important;
  font-size:0!important;
}
.home-hero #hp,
.home-hero #hn{
  background-image:url('/flecha.svg')!important;
}
.home-hero #hp{
  transform:rotate(180deg);
}
.home-hero #pause{
  background-image:url('/PAUSA.svg')!important;
  background-size:20px 20px!important;
}
.home-hero #pause span,
.home-hero #pause:after{display:none!important;content:none!important;}
.home-hero .hero-nav button:hover{background-color:#fff!important;}


/* ==========================================================
   V50 HERO — controles editoriales + CTA + SVG coherentes
   ========================================================== */
.home-hero .hero-dots{
  position:absolute;left:50%;bottom:22px;transform:translateX(-50%);
  z-index:12;display:flex;align-items:center;justify-content:center;gap:7px;
}
.home-hero .hero-dots i{width:7px;height:7px;border-radius:50%;background:rgba(58,58,58,.35)}
.home-hero .hero-dots i.on{background:#3a3a3a}
.home-hero .hero-nav{right:3.5%!important;bottom:18px!important;gap:10px!important}
.home-hero .hero-nav button{
  width:46px!important;height:46px!important;border-radius:50%!important;border:0!important;
  background-color:rgba(255,255,255,.88)!important;background-repeat:no-repeat!important;
  background-position:center!important;background-size:18px 18px!important;box-shadow:none!important;
}
.home-hero #hp,.home-hero #hn{background-image:url('/flecha.svg')!important}
.home-hero #hp{transform:rotate(180deg)}
.home-hero #pause{
  position:relative;background-image:url('/PAUSA.svg')!important;background-size:17px 17px!important;
  background-color:transparent!important;border:3px solid rgba(255,255,255,.92)!important;
}
.home-hero #pause .pause-progress{
  position:absolute;inset:-3px;border-radius:50%;pointer-events:none;
  background:conic-gradient(#3a3a3a 0turn, #3a3a3a 1turn, transparent 1turn);
  -webkit-mask:radial-gradient(farthest-side,transparent calc(100% - 3px),#000 0);
  mask:radial-gradient(farthest-side,transparent calc(100% - 3px),#000 0);
  animation:heroProgress 6s linear infinite;
}
.home-hero #pause.is-paused .pause-progress{animation-play-state:paused}
@keyframes heroProgress{from{transform:rotate(0deg)}to{transform:rotate(360deg)}}
.home-hero .hero-cta{
  position:absolute;z-index:12;left:3.5%;bottom:18px;display:inline-flex;align-items:center;justify-content:center;
  min-height:44px;padding:0 22px;background:rgba(58,58,58,.88);color:#fff;text-decoration:none;
  font:700 13px/1 Roboto,Arial,sans-serif;letter-spacing:.04em;border-radius:2px;
}
.home-hero .hero-cta:hover{background:#3a3a3a}
/* Flecha coherente en carruseles de secciones */
.sec-head .cp,.sec-head .cn{
  font-size:0!important;background-color:#f1f1f1!important;background-image:url('/flecha.svg')!important;
  background-repeat:no-repeat!important;background-position:center!important;background-size:15px 15px!important;
}
.sec-head .cp{transform:rotate(180deg)}
/* Flecha coherente en galería de producto */
.main-nav-arrow{font-size:0!important;background-image:url('/flecha.svg')!important;background-repeat:no-repeat!important;background-position:center!important;background-size:14px 14px!important}
.main-nav-arrow.prev{transform:translateY(-50%) rotate(180deg)!important}
/* Chevron lateral: misma geometría visual, a escala pequeña */
.filter-chevron{width:9px!important;height:9px!important;border:0!important;background:url('/flecha.svg') center/9px 9px no-repeat!important;transform:rotate(90deg)!important;margin-right:3px!important}
.filter-group.open .filter-chevron{transform:rotate(270deg)!important}
@media(max-width:900px){
  .home-hero .hero-nav{right:16px!important;bottom:16px!important;gap:8px!important}
  .home-hero .hero-nav button{width:43px!important;height:43px!important;background-size:17px 17px!important}
  .home-hero #pause{background-size:16px 16px!important}
  .home-hero .hero-dots{bottom:32px}
  .home-hero .hero-cta{left:16px;bottom:16px;min-height:42px;padding:0 16px;font-size:12px}
}

/* ==========================================================
   V51 AJUSTES VISUALES — controles coherentes y más suaves
   ========================================================== */
/* Hero: círculos menos blancos para integrarse con la imagen */
.home-hero .hero-nav button{
  background-color:rgba(255,255,255,.68)!important;
}
.home-hero .hero-nav button:hover{
  background-color:rgba(255,255,255,.86)!important;
}
/* CTA claro, integrado con los controles */
.home-hero .hero-cta{
  background:rgba(255,255,255,.76)!important;
  color:#333!important;
  border:1px solid rgba(255,255,255,.34)!important;
  box-shadow:none!important;
}
.home-hero .hero-cta:hover{background:rgba(255,255,255,.90)!important}
/* Destacados: aplicar el MISMO SVG que el hero, a menor escala */
.featured .feat-actions .fp,
.featured .feat-actions .fn{
  font-size:0!important;
  background-color:rgba(241,241,241,.72)!important;
  background-image:url('/flecha.svg')!important;
  background-repeat:no-repeat!important;
  background-position:center!important;
  background-size:14px 14px!important;
}
.featured .feat-actions .fp{transform:rotate(180deg)!important}
.featured .feat-actions .fp:hover,
.featured .feat-actions .fn:hover{background-color:rgba(241,241,241,.95)!important}
/* Progreso real del slide: el conic-gradient crece según --hero-progress */
.home-hero #pause{--hero-progress:0deg}
.home-hero #pause .pause-progress{
  animation:none!important;
  transform:none!important;
  background:conic-gradient(#3a3a3a 0deg var(--hero-progress),rgba(255,255,255,.42) var(--hero-progress) 360deg)!important;
}


/* ==========================================================
   V52 — DOS BANNERS + CTA CONTEXTUAL
   ========================================================== */
.home-hero .hero-slide{
  pointer-events:none;
}
.home-hero .hero-slide.active{
  pointer-events:auto;
}
.home-hero .hero-picture img{
  object-position:center bottom!important;
}

/* Dos indicadores centrados abajo */
.home-hero .hero-dots{
  left:50%!important;
  transform:translateX(-50%)!important;
}

/* CTA sigue claro y discreto sobre ambos fondos */
.home-hero .hero-cta{
  background:rgba(255,255,255,.76)!important;
  color:#333!important;
  border:1px solid rgba(255,255,255,.34)!important;
}
.home-hero .hero-cta:hover{
  background:rgba(255,255,255,.90)!important;
}

/* Botones de flechas: blancos menos intensos */
.home-hero #hp,
.home-hero #hn{
  background-color:rgba(255,255,255,.60)!important;
}
.home-hero #hp:hover,
.home-hero #hn:hover{
  background-color:rgba(255,255,255,.82)!important;
}

/* Pausa sin relleno. El aro muestra avance real del slide. */
.home-hero #pause{
  background-color:transparent!important;
}


/* ==========================================================
   V53 — CONTADOR CIRCULAR REAL
   El aro empieza invisible y se dibuja alrededor del botón.
   Al completarse cambia de slide y vuelve a cero.
   ========================================================== */
.home-hero #pause{
  position:relative!important;
  overflow:visible!important;
  background-color:transparent!important;
  border:0!important;
  box-shadow:none!important;
  background-image:url('/PAUSA.svg')!important;
  background-repeat:no-repeat!important;
  background-position:center!important;
  background-size:17px 17px!important;
}

/* Neutraliza el antiguo conic-gradient */
.home-hero #pause .pause-progress{
  display:none!important;
}

/* IMPORTANTE: reglas anteriores ocultaban todos los span/svg del botón */
.home-hero #pause .hero-progress-ring{
  display:block!important;
  position:absolute!important;
  inset:0!important;
  width:100%!important;
  height:100%!important;
  pointer-events:none!important;
  transform:rotate(-90deg)!important; /* empieza arriba */
}

.home-hero #pause .hero-progress-circle{
  fill:none!important;
  stroke:rgba(255,255,255,.92)!important;
  stroke-width:3!important;
  stroke-linecap:round!important;
  transition:none!important;
}

/* No hay aro base: lo que no está recorrido permanece totalmente transparente */
.home-hero #pause::before{
  content:none!important;
}

@media(max-width:900px){
  .home-hero #pause{
    background-size:16px 16px!important;
  }
}


/* ==========================================================
   V54 — TRANSICIÓN HERO: SLIDE HORIZONTAL SUAVE
   ========================================================== */
.home-hero{
  overflow:hidden!important;
}
.home-hero .hero-slide{
  position:absolute!important;
  inset:0!important;
  width:100%!important;
  height:100%!important;
  opacity:1!important;
  transform:translateX(100%);
  transition:transform 620ms cubic-bezier(.22,.61,.36,1);
  will-change:transform;
  z-index:1;
}
.home-hero .hero-slide.active{
  transform:translateX(0)!important;
  z-index:2;
}
.home-hero .hero-slide.enter-from-right{
  transform:translateX(100%)!important;
  z-index:3;
}
.home-hero .hero-slide.enter-from-left{
  transform:translateX(-100%)!important;
  z-index:3;
}
.home-hero .hero-slide.exit-to-left{
  transform:translateX(-100%)!important;
  z-index:2;
}
.home-hero .hero-slide.exit-to-right{
  transform:translateX(100%)!important;
  z-index:2;
}

/* El botón y controles permanecen fijos sobre el movimiento del banner */
.home-hero .hero-cta,
.home-hero .hero-dots,
.home-hero .hero-nav{
  z-index:20!important;
}


/* ==========================================================
   V55 — SLIDE CONTINUO SIN HUECO BLANCO
   Saliente y entrante se desplazan al mismo tiempo.
   ========================================================== */
.home-hero .hero-slide{
  display:block!important;
  visibility:visible!important;
  opacity:1!important;
  pointer-events:none;
  transition:transform 620ms cubic-bezier(.22,.61,.36,1)!important;
  backface-visibility:hidden;
  transform:translate3d(100%,0,0);
}
.home-hero .hero-slide.active{
  display:block!important;
  visibility:visible!important;
  opacity:1!important;
  transform:translate3d(0,0,0)!important;
}
.home-hero .hero-slide.is-outgoing{
  display:block!important;
  visibility:visible!important;
  opacity:1!important;
  z-index:2!important;
}
.home-hero .hero-slide.is-incoming{
  display:block!important;
  visibility:visible!important;
  opacity:1!important;
  z-index:3!important;
}
.home-hero .hero-slide.enter-from-right{
  transform:translate3d(100%,0,0)!important;
}
.home-hero .hero-slide.enter-from-left{
  transform:translate3d(-100%,0,0)!important;
}
.home-hero .hero-slide.active.is-incoming{
  transform:translate3d(0,0,0)!important;
}
.home-hero .hero-slide.active.is-outgoing.exit-to-left,
.home-hero .hero-slide.is-outgoing.exit-to-left{
  transform:translate3d(-100%,0,0)!important;
}
.home-hero .hero-slide.active.is-outgoing.exit-to-right,
.home-hero .hero-slide.is-outgoing.exit-to-right{
  transform:translate3d(100%,0,0)!important;
}


/* ==========================================================
   V56 — DIRECCIÓN CORRECTA EN AMBOS SENTIDOS
   JS anima simultáneamente el banner que sale y el que entra.
   ========================================================== */
.home-hero .hero-slide{
  display:block!important;
  visibility:visible!important;
  opacity:1!important;
  transition:none!important;
  will-change:transform;
  backface-visibility:hidden;
}
.home-hero .hero-slide:not(.active){
  z-index:1;
}

/* Las transformaciones durante el cambio se controlan por JS para
   evitar huecos blancos tanto al avanzar como al regresar. */


/* ==========================================================
   V57 — ENTRADA Y SALIDA SIMULTÁNEAS, MISMO SENTIDO
   >  actual sale a la izquierda / nuevo entra desde la derecha
   <  actual sale a la derecha  / nuevo entra desde la izquierda
   ========================================================== */

.home-hero .hero-slide{
  display:block!important;
  visibility:visible!important;
  opacity:1!important;
  position:absolute!important;
  inset:0!important;
  width:100%!important;
  height:100%!important;
  transition:transform 620ms cubic-bezier(.22,.61,.36,1)!important;
  will-change:transform!important;
  backface-visibility:hidden!important;
}

/* Estado normal */
.home-hero .hero-slide.active:not(.ax-moving-out):not(.ax-moving-in){
  transform:translate3d(0,0,0)!important;
  z-index:2!important;
}

/* Banner que SALE: sigue visible y se desplaza */
.home-hero .hero-slide.ax-moving-out{
  transform:translate3d(0,0,0)!important;
  z-index:2!important;
}
.home-hero .hero-slide.ax-moving-out.ax-exit-left{
  transform:translate3d(-100%,0,0)!important;
}
.home-hero .hero-slide.ax-moving-out.ax-exit-right{
  transform:translate3d(100%,0,0)!important;
}

/* Banner que ENTRA: empieza fuera del viewport */
.home-hero .hero-slide.ax-moving-in{
  z-index:3!important;
}
.home-hero .hero-slide.ax-moving-in.ax-enter-right{
  transform:translate3d(100%,0,0)!important;
}
.home-hero .hero-slide.ax-moving-in.ax-enter-left{
  transform:translate3d(-100%,0,0)!important;
}

/* Al quitar ax-enter-* y agregar active, entra al centro */
.home-hero .hero-slide.ax-moving-in.active{
  transform:translate3d(0,0,0)!important;
}

/* Evita que reglas antiguas del carrusel anulen la salida */
.home-hero .hero-slide.active.ax-moving-out.ax-exit-left{
  transform:translate3d(-100%,0,0)!important;
}
.home-hero .hero-slide.active.ax-moving-out.ax-exit-right{
  transform:translate3d(100%,0,0)!important;
}

@media(max-width:900px){
  .home-hero .hero-slide{
    transition:transform 620ms cubic-bezier(.22,.61,.36,1)!important;
  }
}


/* ==========================================================
   V58 — CARRUSEL COMO TIRA HORIZONTAL REAL
   No se anima cada banner por separado.
   Se mueve TODA la tira, por eso entrada y salida son simultáneas.
   ========================================================== */
.home-hero{
  overflow:hidden!important;
  position:relative!important;
}
.home-hero .hero-track{
  position:absolute!important;
  inset:0!important;
  display:flex!important;
  width:100%!important;
  height:100%!important;
  transform:translate3d(-100%,0,0);
  will-change:transform;
  z-index:1!important;
}
.home-hero .hero-track .hero-slide{
  position:relative!important;
  inset:auto!important;
  flex:0 0 100%!important;
  width:100%!important;
  height:100%!important;
  display:block!important;
  visibility:visible!important;
  opacity:1!important;
  transform:none!important;
  transition:none!important;
  z-index:auto!important;
  pointer-events:none!important;
}
.home-hero .hero-track .hero-slide .hero-picture{
  position:absolute!important;
  inset:0!important;
  width:100%!important;
  height:100%!important;
}
.home-hero .hero-track .hero-slide .hero-picture img{
  width:100%!important;
  height:100%!important;
  object-fit:cover!important;
  object-position:center bottom!important;
  display:block!important;
}

/* CTA y controles NO se mueven con la tira */
.home-hero .hero-cta,
.home-hero .hero-dots,
.home-hero .hero-nav{
  z-index:20!important;
}

/* Neutralizar reglas antiguas de movimiento por slide */
.home-hero .hero-slide.active,
.home-hero .hero-slide.ax-moving-out,
.home-hero .hero-slide.ax-moving-in,
.home-hero .hero-slide.ax-enter-right,
.home-hero .hero-slide.ax-enter-left,
.home-hero .hero-slide.ax-exit-left,
.home-hero .hero-slide.ax-exit-right,
.home-hero .hero-slide.enter-from-right,
.home-hero .hero-slide.enter-from-left,
.home-hero .hero-slide.exit-to-left,
.home-hero .hero-slide.exit-to-right{
  transform:none!important;
}

@media(max-width:900px){
  .home-hero .hero-track{
    height:100%!important;
  }
  .home-hero .hero-track .hero-slide{
    height:100%!important;
  }
}

/* V59 preview: lifestyle images in Compra por categoría */
.cat-track .life{overflow:hidden;display:block;background:#e5e3df}
.cat-track .life img{width:100%;height:100%;display:block;object-fit:cover;object-position:center}


/* V62 — carruseles secundarios infinitos */
.cat-track,.prod-track{overscroll-behavior-inline:contain;}
.cat-track .infinite-clone,.prod-track .infinite-clone{pointer-events:auto;}

/* V66 — bloque lifestyle de prueba, pegado de lado a lado */
.lifestyle-showcase{width:100%;padding:0;margin:0;overflow:hidden;background:#eee}
.lifestyle-viewport{position:relative;width:100%;overflow:hidden}
.lifestyle-track{display:flex;gap:0;will-change:transform}
.lifestyle-card{flex:0 0 50%;height:clamp(300px,28vw,480px);overflow:hidden;background:#e9e9e9}
.lifestyle-card img{width:100%;height:100%;display:block;object-fit:cover;object-position:center}
.lifestyle-prev,.lifestyle-next{position:absolute;z-index:4;top:50%;transform:translateY(-50%);width:46px;height:46px;border:0;border-radius:50%;background:rgba(255,255,255,.82);cursor:pointer;background-repeat:no-repeat;background-position:center;background-size:15px auto;backdrop-filter:blur(3px)}
.lifestyle-prev{left:20px;background-image:url('/flecha.svg');transform:translateY(-50%) rotate(180deg)}
.lifestyle-next{right:20px;background-image:url('/flecha.svg')}

/* V66 — jerarquía más contenida de títulos */
.home-sec{padding-top:58px;padding-bottom:68px}
.home-sec h2{font-size:clamp(30px,2.35vw,38px);line-height:1.08;letter-spacing:-.025em;font-weight:500}
.cat-track h3{font-size:19px;line-height:1.2;font-weight:500;margin-top:12px}
.featured{padding-top:48px}

@media(max-width:900px){
  .lifestyle-card{flex-basis:100%;height:72vw;min-height:300px;max-height:520px}
  .lifestyle-prev,.lifestyle-next{width:40px;height:40px;background-size:13px auto}
  .lifestyle-prev{left:12px}.lifestyle-next{right:12px}
  .home-sec{padding-top:46px;padding-bottom:58px}
  .home-sec h2{font-size:31px}
  .cat-track h3{font-size:18px;margin-top:10px}
}

/* ==========================================================
   V67 — AJUSTE FINAL DE JERARQUÍA TIPOGRÁFICA + LIFESTYLE
   ========================================================== */
/* Lifestyle más alto para equilibrar visualmente con las tarjetas de categoría */
.lifestyle-card{
  height:clamp(380px,34vw,620px)!important;
}

/* Títulos principales de sección */
.home-sec h2{
  font-size:32px!important;
  line-height:1.08!important;
  letter-spacing:-.02em!important;
  font-weight:500!important;
}

/* Nombres de categorías */
.cat-track h3{
  font-size:16px!important;
  line-height:1.25!important;
  font-weight:500!important;
  margin-top:10px!important;
}

/* Destacados: jerarquía más contenida */
.home-prod h3{
  font-size:16px!important;
  line-height:1.3!important;
  font-weight:500!important;
  margin:12px 0 4px!important;
}
.home-prod p{
  font-size:12px!important;
  line-height:1.3!important;
  margin:0 0 4px!important;
}
.home-prod strong{
  font-size:17px!important;
  line-height:1.15!important;
  font-weight:600!important;
}

@media(max-width:900px){
  .lifestyle-card{
    height:90vw!important;
    min-height:360px!important;
    max-height:620px!important;
  }
  .home-sec h2{font-size:26px!important;}
  .cat-track h3{font-size:15px!important;}
  .home-prod h3{font-size:15px!important;}
  .home-prod p{font-size:12px!important;}
  .home-prod strong{font-size:16px!important;}
}


/* ==========================================================
   V69 — LIFESTYLE CROSSFADE ALTERNADO, SIN DESTELLO BLANCO
   ========================================================== */
.lifestyle-showcase{background:#eee;}
.lifestyle-viewport{position:relative;width:100%;overflow:hidden;}
.lifestyle-track{
  position:relative!important;
  display:block!important;
  width:100%;
  height:clamp(380px,34vw,620px);
  overflow:hidden;
}
.lifestyle-card{
  position:absolute!important;
  top:0;
  height:100%!important;
  margin:0!important;
  opacity:0;
  pointer-events:none;
  overflow:hidden;
  transition:opacity .9s ease-in-out!important;
}
.lifestyle-card.is-active{opacity:1;pointer-events:auto;}
.lifestyle-card img{width:100%;height:100%;display:block;object-fit:cover;object-position:center;}
.lifestyle-prev,.lifestyle-next{display:none!important;}
@media(max-width:900px){
  .lifestyle-track{
    height:90vw;
    min-height:360px;
    max-height:620px;
  }
}
@media(prefers-reduced-motion:reduce){
  .lifestyle-card{transition:none!important;}
}

/* V69: cada panel mantiene siempre una imagen debajo de la entrante. */
.lifestyle-track,.lifestyle-card{background:#e9e9e9;}
.lifestyle-card.is-fading-out{pointer-events:none;}


/* ===== V70 legal pages ===== */
.footer-links a{
  color:#CECECE!important;
  text-decoration:none!important;
  font-size:12px!important;
  transition:color .15s ease, opacity .15s ease;
}
.footer-links a:hover{color:#FFFFFF!important;}
.legal-page{background:#F5F5F3;min-height:60vh;padding:64px 28px 90px;}
.legal-shell{max-width:920px;margin:0 auto;background:#FFFFFF;padding:56px 64px;box-shadow:0 1px 0 rgba(0,0,0,.04);}
.legal-eyebrow{font-size:12px;letter-spacing:.12em;text-transform:uppercase;color:#777;margin-bottom:12px;}
.legal-shell h1{font-size:36px;line-height:1.15;font-weight:500;margin:0 0 10px;color:#333;letter-spacing:-.02em;}
.legal-updated{font-size:13px;color:#777;margin:0 0 36px;}
.legal-shell h2{font-size:19px;line-height:1.3;font-weight:600;margin:34px 0 12px;color:#363636;}
.legal-shell p,.legal-shell li{font-size:15px;line-height:1.75;color:#505050;}
.legal-shell p{margin:0 0 14px;}
.legal-shell ul{margin:8px 0 16px;padding-left:22px;}
.legal-shell a{color:#333;text-decoration:underline;text-underline-offset:3px;}
.legal-contact{margin-top:30px;padding:20px 22px;background:#F3F3F1;border-left:3px solid #555;}
.legal-note{font-size:13px!important;color:#707070!important;}
@media(max-width:700px){
  .legal-page{padding:30px 14px 55px;}
  .legal-shell{padding:34px 22px;}
  .legal-shell h1{font-size:29px;}
  .legal-shell h2{font-size:18px;margin-top:28px;}
  .legal-shell p,.legal-shell li{font-size:14px;line-height:1.7;}
}


/* ==========================================================
   V71 — HOME, LEGALES, CONTACTO Y PERSONALIZACIÓN
   ========================================================== */

/* Títulos del home más contenidos; “Encuentra lo que va contigo” conserva su escala. */
.categories .sec-head>h2,
.featured .sec-head>h2,
.personalized .sec-head>h2{
  font-size:26px!important;
  line-height:1.12!important;
  letter-spacing:-.015em!important;
  font-weight:500!important;
}

/* Ritmo vertical uniforme entre lifestyle, categorías, productos y guía visual. */
.home-sec.categories{padding-top:50px!important;padding-bottom:24px!important;}
.home-sec.featured{padding-top:24px!important;padding-bottom:26px!important;}
.home-sec.quick{border-top:0!important;padding-top:30px!important;padding-bottom:52px!important;}
.home-sec.personalized{padding-top:26px!important;padding-bottom:64px!important;}
.personalized[hidden]{display:none!important;}
.personalized .sec-head{display:flex;align-items:center;justify-content:space-between;}
.personalized .personal-actions{display:flex;gap:10px;align-items:center;}
.personalized .personal-actions button{width:44px;height:44px;border:0;border-radius:50%;background:#f1f1f1;color:transparent;font-size:0;cursor:pointer;background-image:url('/flecha.svg');background-repeat:no-repeat;background-position:center;background-size:14px 14px;}
.personalized .personal-actions .yp{transform:rotate(180deg);}
.personalized .personal-actions button:hover{background-color:rgba(241,241,241,.95);}

/* Páginas legales: sin hoja blanca, lectura más compacta y fondo gris del sitio. */
.legal-page{
  background:#F5F5F3!important;
  min-height:60vh;
  padding:52px 5% 76px!important;
}
.legal-shell{
  max-width:1080px!important;
  margin:0 auto!important;
  background:transparent!important;
  padding:0!important;
  box-shadow:none!important;
}
.legal-eyebrow{display:none!important;}
.legal-shell h1{
  font-size:28px!important;
  line-height:1.16!important;
  font-weight:500!important;
  margin:0 0 8px!important;
  color:#333!important;
  letter-spacing:-.015em!important;
}
.legal-updated{font-size:12px!important;color:#777!important;margin:0 0 28px!important;}
.legal-intro{max-width:1000px;margin-bottom:26px;}
.legal-intro p{font-size:14px!important;line-height:1.68!important;color:#454545!important;}
.legal-shell h2{
  font-size:16px!important;
  line-height:1.35!important;
  font-weight:600!important;
  margin:28px 0 8px!important;
  color:#333!important;
  letter-spacing:0!important;
}
.legal-shell p,.legal-shell li{
  font-size:13.5px!important;
  line-height:1.68!important;
  color:#4d4d4d!important;
}
.legal-shell p{margin:0 0 11px!important;}
.legal-shell ul{margin:6px 0 13px!important;padding-left:20px!important;}
.legal-shell a{color:#333!important;text-decoration:underline!important;text-underline-offset:3px!important;}
.legal-contact{margin:0!important;padding:0!important;background:transparent!important;border:0!important;}
.legal-note{font-size:12px!important;color:#707070!important;margin-top:24px!important;}

/* Contacto: mismo fondo y lenguaje visual, sin tarjetas blancas pesadas. */
.contact-page{background:#F5F5F3;min-height:60vh;padding:52px 5% 76px;color:#333;}
.contact-shell{max-width:1120px;margin:0 auto;}
.contact-shell>h1{font-size:30px;line-height:1.15;font-weight:500;letter-spacing:-.02em;margin:0 0 12px;}
.contact-lead{max-width:760px;font-size:14px;line-height:1.65;color:#555;margin:0 0 44px;}
.contact-options{display:grid;grid-template-columns:repeat(3,1fr);gap:40px;}
.contact-option{border-top:1px solid #d7d7d4;padding-top:22px;min-height:230px;}
.contact-option-icon{width:28px;height:28px;object-fit:contain;margin-bottom:20px;}
.contact-option h2,.contact-social h2{font-size:17px;line-height:1.3;font-weight:600;margin:0 0 10px;}
.contact-option p,.contact-social p{font-size:13.5px;line-height:1.65;color:#555;margin:0 0 18px;}
.contact-location strong{font-size:15px;color:#333;}
.contact-action{display:inline-block;color:#333;font-size:13.5px;font-weight:600;text-decoration:underline;text-underline-offset:4px;}
.contact-social{margin-top:56px;padding-top:24px;border-top:1px solid #d7d7d4;}
.contact-social-icons{display:flex;align-items:center;gap:22px;margin-top:20px;}
.contact-social-icons a{width:24px;height:24px;display:inline-flex;align-items:center;justify-content:center;}
.contact-social-icons img{max-width:24px;max-height:24px;display:block;}

/* Social icons are real links across the whole site. */
a.social-icon{text-decoration:none!important;}

@media(max-width:900px){
  .categories .sec-head>h2,.featured .sec-head>h2,.personalized .sec-head>h2{font-size:23px!important;}
  .home-sec.categories{padding-top:42px!important;padding-bottom:20px!important;}
  .home-sec.featured{padding-top:20px!important;padding-bottom:24px!important;}
  .home-sec.quick{padding-top:26px!important;padding-bottom:46px!important;}
  .home-sec.personalized{padding-top:24px!important;padding-bottom:54px!important;}
  .personalized .sec-head{display:grid;grid-template-columns:1fr auto;gap:12px;}
  .legal-page,.contact-page{padding:34px 24px 58px!important;}
  .legal-shell h1{font-size:25px!important;}
  .legal-shell h2{font-size:15.5px!important;margin-top:25px!important;}
  .legal-shell p,.legal-shell li,.legal-intro p{font-size:13px!important;line-height:1.66!important;}
  .contact-shell>h1{font-size:27px;}
  .contact-options{grid-template-columns:1fr;gap:28px;}
  .contact-option{min-height:0;padding-bottom:4px;}
}

/* ==========================================================
   V72 — CONTACTO, MENÚ Y FACTURACIÓN
   ========================================================== */

/* Drawer: navegación completa con jerarquía visual. */
.ax-mobile-drawer .ax-drawer-nav{
  display:flex!important;
  flex-direction:column!important;
  gap:0!important;
}
.ax-mobile-drawer .ax-drawer-group{
  display:flex;
  flex-direction:column;
  gap:3px;
  padding:20px 0;
  border-top:1px solid rgba(45,45,45,.10);
}
.ax-mobile-drawer .ax-drawer-group:first-child{border-top:0;padding-top:4px;}
.ax-mobile-drawer .ax-drawer-main a{font-size:18px!important;font-weight:500!important;}
.ax-mobile-drawer .ax-drawer-label{
  font-size:11px;
  line-height:1;
  letter-spacing:.08em;
  font-weight:700;
  color:#8a8a86;
  padding:0 0 9px;
}
.ax-mobile-drawer .ax-drawer-group a{
  display:block;
  padding:8px 0!important;
  font-size:15px!important;
  line-height:1.25!important;
  font-weight:400!important;
  color:#333!important;
  text-decoration:none!important;
}
.ax-mobile-drawer .ax-drawer-secondary a{font-size:14px!important;color:#555!important;}

/* Contacto: orden visual Visítanos / Correo / WhatsApp, iconos y acciones alineadas. */
.contact-options{align-items:stretch!important;}
.contact-option{
  display:flex!important;
  flex-direction:column!important;
  min-height:238px!important;
  padding-top:24px!important;
}
.contact-option-content{display:block;}
.contact-option-icon{
  width:34px!important;
  height:34px!important;
  max-width:34px!important;
  max-height:34px!important;
  margin-bottom:22px!important;
}
.contact-action{margin-top:auto!important;padding-top:18px!important;}
.contact-social p{margin-bottom:0!important;}
.contact-social-icons{gap:25px!important;margin-top:22px!important;}
.contact-social-icons a{width:29px!important;height:29px!important;}
.contact-social-icons img{max-width:29px!important;max-height:29px!important;}

@media(max-width:900px){
  .contact-option{min-height:0!important;}
  .contact-action{margin-top:8px!important;padding-top:8px!important;}
  .contact-option-icon{width:32px!important;height:32px!important;max-width:32px!important;max-height:32px!important;}
  .contact-social-icons a{width:27px!important;height:27px!important;}
  .contact-social-icons img{max-width:27px!important;max-height:27px!important;}
}


/* ===== V73: contacto iconos ópticos + header inteligente + volver arriba ===== */
/* Contacto: igualar peso óptico, no sólo caja matemática. */
.contact-option-icon{
  display:block!important;
  object-fit:contain!important;
}
.contact-icon-location{
  width:44px!important;height:44px!important;
  max-width:44px!important;max-height:44px!important;
  margin:0 0 18px!important;
}
.contact-icon-email{
  width:48px!important;height:44px!important;
  max-width:48px!important;max-height:44px!important;
  margin:0 0 18px!important;
}
.contact-icon-whatsapp{
  width:34px!important;height:34px!important;
  max-width:34px!important;max-height:34px!important;
  margin:5px 0 23px!important;
}

/* Header: visible al inicio, se oculta al bajar y reaparece al subir.
   Sticky conserva su espacio en el flujo, por lo que el contenido no brinca. */
.site-header{
  position:sticky!important;
  top:0!important;
  z-index:10000!important;
  transform:translateY(0);
  transition:transform .26s cubic-bezier(.22,.61,.36,1)!important;
  will-change:transform;
}
.site-header.ax-header-hidden{transform:translateY(calc(-100% - 2px))!important;}
.site-header.ax-header-visible{transform:translateY(0)!important;}

/* Botón discreto para volver arriba: sólo se inserta en páginas legales. */
.ax-back-to-top{
  position:fixed;
  right:26px;
  bottom:26px;
  z-index:9500;
  width:40px;
  height:40px;
  border:1px solid rgba(65,65,65,.20);
  border-radius:50%;
  background:rgba(255,255,255,.82);
  color:#444;
  display:grid;
  place-items:center;
  padding:0;
  font:400 22px/1 Arial,sans-serif;
  cursor:pointer;
  box-shadow:0 3px 14px rgba(0,0,0,.08);
  backdrop-filter:blur(5px);
  -webkit-backdrop-filter:blur(5px);
  opacity:0;
  visibility:hidden;
  transform:translateY(8px);
  transition:opacity .2s ease,transform .2s ease,visibility .2s ease,background .2s ease;
}
.ax-back-to-top::before{content:"↑";transform:translateY(-1px);}
.ax-back-to-top.is-visible{opacity:1;visibility:visible;transform:translateY(0);}
.ax-back-to-top:hover{background:rgba(255,255,255,.98);}
.ax-back-to-top:focus-visible{outline:2px solid #555;outline-offset:3px;}

@media(max-width:900px){
  .contact-icon-location{
    width:40px!important;height:40px!important;
    max-width:40px!important;max-height:40px!important;
    margin:0 0 17px!important;
  }
  .contact-icon-email{
    width:44px!important;height:40px!important;
    max-width:44px!important;max-height:40px!important;
    margin:0 0 17px!important;
  }
  .contact-icon-whatsapp{
    width:32px!important;height:32px!important;
    max-width:32px!important;max-height:32px!important;
    margin:4px 0 21px!important;
  }
  .ax-back-to-top{right:16px;bottom:18px;width:38px;height:38px;font-size:20px;}
}

@media(prefers-reduced-motion:reduce){
  .site-header,.ax-back-to-top{transition:none!important;}
}


/* ===== V74: SVG definitivos contacto + back-to-top consistente ===== */
.contact-icon-location{width:42px!important;height:42px!important;max-width:42px!important;max-height:42px!important;margin:1px 0 19px!important;}
.contact-icon-email{width:44px!important;height:42px!important;max-width:44px!important;max-height:42px!important;margin:1px 0 19px!important;}
.ax-back-to-top{bottom:calc(30px + var(--ax-footer-lift,0px))!important;font-size:0!important;transition:opacity .2s ease,transform .2s ease,visibility .2s ease,background .2s ease,bottom .18s ease!important;}
.ax-back-to-top::before{content:none!important;}
.ax-back-to-top img{display:block;width:16px;height:16px;object-fit:contain;transform:rotate(-90deg);}
@media(max-width:900px){.contact-icon-location{width:38px!important;height:38px!important;max-width:38px!important;max-height:38px!important;}.contact-icon-email{width:40px!important;height:38px!important;max-width:40px!important;max-height:38px!important;}.ax-back-to-top{bottom:calc(22px + var(--ax-footer-lift,0px))!important;}.ax-back-to-top img{width:15px;height:15px;}}
/* V75: promociones y variantes */
.product-bottom,.home-price-row{display:flex;align-items:center;gap:9px;flex-wrap:wrap}.promo-badge{display:inline-block;font-size:10px;line-height:1;font-weight:700;letter-spacing:.08em;padding:5px 7px;border:1px solid #333}.sale-price{font-weight:700}.old-price{font-size:.82em;color:#777;text-decoration:line-through;font-weight:400}.detail-price{display:flex;align-items:center;gap:10px;flex-wrap:wrap}.detail-price .sale-price{font-size:25px}.detail-price .old-price{font-size:16px}.variant-picker{margin:18px 0 20px}.variant-label{font-size:14px;margin:13px 0 8px}.variant-colors{display:flex;gap:10px;flex-wrap:wrap}.variant-thumb{width:68px;text-decoration:none;color:#333;font-size:10px;text-align:center}.variant-thumb img{display:block;width:64px;height:64px;object-fit:contain;background:#f4f4f4;border:1px solid #ddd;margin-bottom:4px}.variant-thumb.active img{border:2px solid #333}.variant-sizes{display:flex;gap:8px;flex-wrap:wrap}.variant-size{min-width:40px;padding:8px 10px;text-align:center;border:1px solid #ccc;text-decoration:none;color:#333;font-size:13px}.variant-size.active{border-color:#333;background:#333;color:#fff}

/* V77 - Product image normalization: square white canvas, never distort/crop */
.product-photo,.home-prod-img,.main-photo,.thumb,.variant-thumb img{background:#fff!important;}
.product-photo img,.home-prod-img img,.main-photo img,.thumb img,.variant-thumb img{object-fit:contain!important;object-position:center!important;}
.product-photo,.home-prod-img{aspect-ratio:1/1!important;overflow:hidden!important;}

/* V78 - miniaturas de variantes de color en tarjetas */
.card-variant-thumbs{display:flex;align-items:center;gap:6px;margin-top:9px;min-height:38px}.card-variant-thumb{width:36px;height:36px;background:#fff;display:block;border:1px solid #e1e1e1;text-decoration:none}.card-variant-thumb img{width:100%;height:100%;object-fit:contain;display:block;background:#fff}.card-variant-thumb:hover{border-color:#777}.card-variant-more{font-size:11px;color:#666;margin-left:2px;white-space:nowrap}@media(max-width:700px){.card-variant-thumb{width:32px;height:32px}.card-variant-thumbs{gap:5px}}

/* V79 - variantes debajo de foto, 48px, sin marcos */
.card-variant-thumbs{display:flex;align-items:center;gap:6px;margin:6px 0 0;min-height:0;padding:0;background:transparent}
.card-variant-thumb{width:48px;height:48px;display:block;padding:0;margin:0;background:#fff;border:0!important;outline:0!important;box-shadow:none!important;cursor:pointer;text-decoration:none;overflow:hidden}
.card-variant-thumb img{width:100%;height:100%;object-fit:contain;display:block;background:#fff;border:0!important;outline:0!important}
.card-variant-thumb:hover,.card-variant-thumb:focus,.card-variant-thumb:active{border:0!important;outline:0!important;box-shadow:none!important}
.card-variant-more{font-size:11px;color:#666;margin-left:2px;white-space:nowrap}
@media(max-width:700px){.card-variant-thumb{width:48px;height:48px}.card-variant-thumbs{gap:6px}}


/* ===== V85 FINAL — logos de marca + herramientas sticky móvil ===== */
/* Logo de marca en ficha: mismo peso visual, no el mismo tamaño matemático. */
.detail-brand-logo{
  min-height:34px;
  margin:0 0 14px;
  display:flex;
  align-items:center;
  justify-content:flex-start;
  overflow:visible;
}
.detail-brand-logo[hidden]{display:none!important;min-height:0;margin:0;}
.detail-brand-logo-img{
  display:block;
  height:auto;
  max-height:none;
  object-fit:contain;
  object-position:left center;
}
/* Ajustes por área visual real de cada SVG (todos vienen en viewBox 800×800). */
.detail-brand-logo-img.logo-atole{width:125px;}
.detail-brand-logo-img.logo-chenson{width:156px;}
.detail-brand-logo-img.logo-goret{width:176px;}
.detail-brand-logo-img.logo-keepack{width:82px;}
.detail-brand-logo-img.logo-madison{width:80px;}
.detail-brand-logo-img.logo-ruz{width:60px;}
.detail-brand-logo-img.logo-travel-republic{width:138px;}
.detail-brand-logo-img.logo-yadatex{width:94px;}

/* En escritorio estas herramientas ya existen en la barra superior normal. */
.mobile-catalog-tools{display:none;}
@media(max-width:900px){
  .mobile-catalog-tools{
    position:sticky;
    top:var(--mobile-tools-top,74px);
    z-index:9000;
    display:grid;
    grid-template-columns:1fr 1fr;
    align-items:stretch;
    width:100%;
    margin:0 0 16px;
    background:rgba(245,245,245,.97);
    border-bottom:1px solid #dedede;
    backdrop-filter:blur(8px);
    -webkit-backdrop-filter:blur(8px);
  }
  .mobile-catalog-filter,.mobile-catalog-sort{
    min-height:46px;
    margin:0;
    border:0;
    background:transparent;
    color:#3d3d3d;
    font:500 13px "Roboto",sans-serif;
    display:flex;
    align-items:center;
    justify-content:center;
  }
  .mobile-catalog-filter{border-right:1px solid #dedede;cursor:pointer;}
  .mobile-catalog-sort{position:relative;gap:7px;}
  .mobile-catalog-sort select{
    position:absolute;
    inset:0;
    width:100%;height:100%;
    opacity:0;
    cursor:pointer;
  }
  .detail-brand-logo{min-height:30px;margin-bottom:12px;}
  .detail-brand-logo-img.logo-atole{width:112px;}
  .detail-brand-logo-img.logo-chenson{width:140px;}
  .detail-brand-logo-img.logo-goret{width:158px;}
  .detail-brand-logo-img.logo-keepack{width:74px;}
  .detail-brand-logo-img.logo-madison{width:72px;}
  .detail-brand-logo-img.logo-ruz{width:54px;}
  .detail-brand-logo-img.logo-travel-republic{width:124px;}
  .detail-brand-logo-img.logo-yadatex{width:85px;}
}

/* ===== V86 — ficha compacta: logos, variantes, acordeones y zoom ===== */
@media(min-width:901px){
  .product-detail{align-items:stretch;}
  .detail-info{height:100%;min-height:0;}
}

/* Los SVG de marca se recortan al arte real: sin espacio muerto del lienzo 800x800. */
.detail-brand-logo{
  min-height:0!important;
  height:auto;
  margin:0 0 18px!important;
  padding:0;
  display:flex;
  align-items:flex-start;
  justify-content:flex-start;
  line-height:0;
  overflow:visible;
}
.detail-brand-logo[hidden]{display:none!important;margin:0!important;}
.detail-brand-logo-img,
.detail-brand-logo-img.logo-atole,
.detail-brand-logo-img.logo-chenson,
.detail-brand-logo-img.logo-goret,
.detail-brand-logo-img.logo-keepack,
.detail-brand-logo-img.logo-madison,
.detail-brand-logo-img.logo-ruz,
.detail-brand-logo-img.logo-travel-republic,
.detail-brand-logo-img.logo-yadatex{
  display:block;
  width:auto!important;
  height:30px!important;
  max-width:225px;
  max-height:30px;
  object-fit:contain;
  object-position:left top;
}

/* Género y talla comparten la fila en escritorio cuando ambos existen. */
.variant-picker{margin:18px 0 18px;}
.variant-top-row{
  display:grid;
  grid-template-columns:minmax(0,1fr) minmax(0,1fr);
  gap:26px;
  align-items:start;
}
.variant-section{min-width:0;}
.variant-top-row .variant-label{margin-top:0;}
.variant-color-section{margin-top:14px;}

/* Información secundaria en acordeones limpios. */
.product-accordions{
  width:100%;
  margin:10px 0 18px;
  border-top:1px solid var(--line);
}
.product-accordion{border-bottom:1px solid var(--line);}
.product-accordion-trigger{
  width:100%;
  min-height:48px;
  padding:0;
  border:0;
  background:transparent;
  color:#343434;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:18px;
  font:500 14px/1.25 "Roboto",Arial,sans-serif;
  text-align:left;
  cursor:pointer;
}
.product-accordion-trigger img{
  width:12px;
  height:12px;
  flex:0 0 12px;
  transform:rotate(90deg);
  transition:transform .18s ease;
}
.product-accordion-trigger[aria-expanded="true"] img{transform:rotate(-90deg);}
.product-accordion-panel[hidden]{display:none;}
.product-accordion-content{
  padding:0 28px 16px 0;
  color:#555;
  font-size:13px;
  line-height:1.6;
  white-space:pre-line;
}

/* El CTA queda contra la base de la galería cuando los acordeones están cerrados. */
.detail-info>.wa-button{margin-top:auto!important;}

/* Zoom contenido dentro del mismo cuadro de la fotografía. */
.main-photo{cursor:zoom-in;}
.main-photo #mainImage{
  transform-origin:50% 50%;
  transition:transform .08s linear;
  will-change:transform;
}
.main-photo.is-zoomed{cursor:zoom-out;}
.main-photo.is-zoomed #mainImage{z-index:1;}
.main-photo .main-nav-arrow,.main-photo .carousel-dots{z-index:4;}

@media(max-width:900px){
  .detail-info{margin-top:22px;}
  .detail-brand-logo{margin-bottom:14px!important;}
  .detail-brand-logo-img,
  .detail-brand-logo-img.logo-atole,
  .detail-brand-logo-img.logo-chenson,
  .detail-brand-logo-img.logo-goret,
  .detail-brand-logo-img.logo-keepack,
  .detail-brand-logo-img.logo-madison,
  .detail-brand-logo-img.logo-ruz,
  .detail-brand-logo-img.logo-travel-republic,
  .detail-brand-logo-img.logo-yadatex{
    height:27px!important;
    max-height:27px;
    max-width:205px;
  }
  .variant-top-row{display:block;}
  .variant-top-row .variant-section+.variant-section{margin-top:13px;}
  .variant-color-section{margin-top:13px;}
  .product-accordions{margin-top:16px;}
  .product-accordion-trigger{min-height:46px;font-size:13px;}
  .product-accordion-content{padding-right:16px;}
  .detail-info>.wa-button{margin-top:18px!important;}
  .main-photo{cursor:default;}
}

/* ===== V87 — logos normalizados por mesa 1550x250 + Mis favoritos + breadcrumb ===== */
/* Los SVG entregados comparten la misma mesa de trabajo y ya tienen el peso visual
   ajustado. No recortamos ni compensamos marcas individualmente. */
.detail-brand-logo{
  width:190px!important;
  height:auto!important;
  min-height:0!important;
  margin:0 0 18px!important;
  padding:0!important;
  display:block!important;
  overflow:visible!important;
  line-height:0!important;
}
.detail-brand-logo[hidden]{display:none!important;margin:0!important;width:0!important;}
.detail-brand-logo-img,
.detail-brand-logo-img.logo-atole,
.detail-brand-logo-img.logo-chenson,
.detail-brand-logo-img.logo-goret,
.detail-brand-logo-img.logo-keepack,
.detail-brand-logo-img.logo-madison,
.detail-brand-logo-img.logo-ruz,
.detail-brand-logo-img.logo-travel-republic,
.detail-brand-logo-img.logo-us-urban,
.detail-brand-logo-img.logo-yadatex{
  display:block!important;
  width:190px!important;
  height:auto!important;
  max-width:none!important;
  max-height:none!important;
  object-fit:contain!important;
  object-position:left top!important;
}

/* Favoritos: botón real, discreto y consistente con el corazón existente. */
.favorite{
  appearance:none;
  -webkit-appearance:none;
  border:0;
  background:transparent;
  color:#222;
  cursor:pointer;
  line-height:1;
  padding:2px;
  font-family:Arial,sans-serif;
  z-index:3;
}
.favorite:hover{transform:scale(1.06);}
.favorite.active{color:#222;}
.favorite:focus-visible{outline:1px solid #555;outline-offset:2px;border-radius:2px;}
.favorites-empty{
  grid-column:1/-1;
  min-height:300px;
  display:flex;
  flex-direction:column;
  justify-content:center;
  align-items:center;
  gap:9px;
  text-align:center;
  color:#555;
}
.favorites-empty strong{font-size:18px;color:#222;font-weight:500;}
.favorites-empty span{font-size:14px;}
.favorites-empty a{margin-top:7px;color:#222;text-underline-offset:4px;}

/* Breadcrumb dinámico: Catálogo / Categoría / Producto. */
.breadcrumb{display:flex;align-items:center;gap:6px;min-width:0;white-space:nowrap;}
.breadcrumb a{flex:0 0 auto;}
.breadcrumb-sep{color:#8a8a8a;flex:0 0 auto;}
.breadcrumb-current{min-width:0;overflow:hidden;text-overflow:ellipsis;color:#777;}

@media(max-width:900px){
  .detail-brand-logo{width:170px!important;margin-bottom:14px!important;}
  .detail-brand-logo-img,
  .detail-brand-logo-img.logo-atole,
  .detail-brand-logo-img.logo-chenson,
  .detail-brand-logo-img.logo-goret,
  .detail-brand-logo-img.logo-keepack,
  .detail-brand-logo-img.logo-madison,
  .detail-brand-logo-img.logo-ruz,
  .detail-brand-logo-img.logo-travel-republic,
  .detail-brand-logo-img.logo-us-urban,
  .detail-brand-logo-img.logo-yadatex{width:170px!important;}
  .breadcrumb{font-size:11px;gap:5px;max-width:100%;}
  .breadcrumb-current{max-width:42vw;}
}


/* ===== V88 — ajuste óptico logos + icono favoritos + normalización de tarjetas ===== */
/* Los logos ya vienen normalizados por el usuario. Solo se reduce su presencia
   frente al nombre del producto y se aplica una corrección óptica mínima. */
.detail-brand-logo{
  width:160px!important;
  margin:4px 0 17px!important;
}
.detail-brand-logo-img,
.detail-brand-logo-img.logo-atole,
.detail-brand-logo-img.logo-chenson,
.detail-brand-logo-img.logo-goret,
.detail-brand-logo-img.logo-keepack,
.detail-brand-logo-img.logo-madison,
.detail-brand-logo-img.logo-ruz,
.detail-brand-logo-img.logo-travel-republic,
.detail-brand-logo-img.logo-us-urban,
.detail-brand-logo-img.logo-yadatex{
  width:160px!important;
}
.favorite{width:25px;height:25px;display:grid;place-items:center;padding:2px!important;}
.favorite img{display:block;width:20px;height:20px;object-fit:contain;pointer-events:none;}
.favorite.active img{width:20px;height:20px;}
.detail-title-row{display:flex;align-items:flex-start;justify-content:space-between;gap:16px;margin:0 0 0;}
.detail-title-row h1{min-width:0;flex:1 1 auto;}
.detail-favorite{position:static!important;flex:0 0 28px;margin-top:-1px;width:28px;height:28px;}
.detail-favorite img{width:22px;height:22px;}

/* El JS detecta el producto real dentro del blanco del proveedor y coloca la
   imagen sin deformarla. El overflow del contenedor recorta únicamente blanco
   sobrante; el margen de seguridad mantiene el producto completo. */
.product-photo img.catalog-normalized{
  width:100%!important;
  height:100%!important;
  max-width:100%!important;
  max-height:100%!important;
  object-fit:contain!important;
  object-position:center!important;
  transform-origin:50% 50%!important;
  transform:translate(var(--norm-x,0),var(--norm-y,0)) scale(var(--norm-scale,1))!important;
  background:#fff!important;
}

@media(max-width:900px){
  .detail-brand-logo{width:145px!important;margin:3px 0 14px!important;}
  .detail-brand-logo-img,
  .detail-brand-logo-img.logo-atole,
  .detail-brand-logo-img.logo-chenson,
  .detail-brand-logo-img.logo-goret,
  .detail-brand-logo-img.logo-keepack,
  .detail-brand-logo-img.logo-madison,
  .detail-brand-logo-img.logo-ruz,
  .detail-brand-logo-img.logo-travel-republic,
  .detail-brand-logo-img.logo-us-urban,
  .detail-brand-logo-img.logo-yadatex{width:145px!important;}
  .detail-favorite{width:26px;height:26px;flex-basis:26px;}
  .detail-favorite img{width:20px;height:20px;}
}


/* ===== V89 — favoritos, toast y barra móvil sin duplicación ===== */
.favorite-toast{
  position:fixed;left:50%;bottom:28px;z-index:20000;
  transform:translate(-50%,12px);opacity:0;pointer-events:none;
  background:#3f3f3f;color:#fff;padding:10px 16px;
  font:500 13px "Roboto",sans-serif;line-height:1.25;
  box-shadow:0 4px 16px rgba(0,0,0,.14);
  transition:opacity .18s ease,transform .18s ease;
  white-space:nowrap;
}
.favorite-toast.show{opacity:1;transform:translate(-50%,0)}
.home-prod-img{position:relative;background:#fff!important;}
.home-prod .favorite{position:absolute;right:12px;top:12px;z-index:5;width:27px;height:27px;}
.home-prod .favorite img{width:21px;height:21px;}
@media(max-width:900px){
  .mobile-catalog-tools{display:none!important;}
  .mobile-catalog-tools.is-needed{display:grid!important;}
  .favorite-toast{bottom:22px;font-size:12px;padding:9px 14px;max-width:calc(100vw - 32px);}
  .home-prod .favorite{right:8px;top:8px;width:25px;height:25px;}
  .home-prod .favorite img{width:20px;height:20px;}
}


/* ===== V90 — encuadre unificado: el lienzo de tarjeta permanece blanco ===== */
.product-photo{position:relative!important;overflow:hidden!important;background:#fff!important;}
.product-photo img.catalog-framed{
  display:block!important;
  margin:0!important;
  padding:0!important;
  object-position:center!important;
  background:#fff!important;
}
.product-photo img.catalog-contain-fallback{
  position:static!important;
  width:100%!important;height:100%!important;
  max-width:100%!important;max-height:100%!important;
  object-fit:contain!important;object-position:center!important;
  transform:none!important;background:#fff!important;
}

/* ===== V91 — datos web + familia + fotografías estables ===== */
/* El ajuste automático de fondo/zoom queda desactivado. Las fotos se muestran
   íntegras, cuadradas por el contenedor, sin deformar y con fondo blanco. */
.product-photo img,
.product-photo img.catalog-normalized,
.product-photo img.catalog-framed,
.product-photo img.catalog-contain-fallback{
  position:static!important;
  width:100%!important;
  height:100%!important;
  max-width:100%!important;
  max-height:100%!important;
  left:auto!important;top:auto!important;
  object-fit:contain!important;
  object-position:center!important;
  transform:none!important;
  background:#fff!important;
}
.complement-section{margin-top:34px;}
.complement-section[hidden]{display:none!important;}

/* ===== V93 SMART SEARCH ===== */
.top-search{position:relative;overflow:visible!important}
.ax-smart-results{display:none;position:absolute;z-index:1200;background:#fff;border:1px solid #e4e4e4;box-shadow:0 10px 28px rgba(0,0,0,.10);text-align:left;color:#222}
.ax-smart-results.show{display:grid}
.ax-smart-results.is-desktop{top:calc(100% + 12px);right:0;width:min(820px,72vw);grid-template-columns:210px 1fr;padding:20px;gap:22px}
.ax-search-label{font-size:12px;text-transform:uppercase;letter-spacing:.06em;color:#777;margin-bottom:10px}
.ax-search-suggestions{border-right:1px solid #eee;padding-right:18px}
.ax-search-suggestions button{display:block;border:0;background:none;padding:8px 0;font:inherit;text-align:left;cursor:pointer;width:100%}
.ax-search-product-list{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px}
.ax-search-product{display:grid;grid-template-columns:70px 1fr;gap:9px;text-decoration:none;color:inherit;min-width:0}
.ax-search-product img{width:70px;height:70px;object-fit:contain;background:#fff}
.ax-search-product span{display:flex;flex-direction:column;min-width:0}.ax-search-product strong{font-size:13px;line-height:1.25}.ax-search-product small{font-size:11px;color:#777;margin-top:3px}.ax-search-product b{font-size:13px;margin-top:4px}
.ax-search-all{display:inline-block;margin-top:16px;color:#222;font-size:13px;text-decoration:underline}.ax-search-empty{padding:18px;grid-column:1/-1}
.ax-mobile-search-inner{position:relative;overflow:visible!important}.ax-smart-results.is-mobile{top:calc(100% + 10px);left:0;right:0;width:100%;padding:16px;grid-template-columns:1fr;gap:16px;max-height:calc(100vh - 100px);overflow:auto}.ax-smart-results.is-mobile .ax-search-suggestions{border-right:0;border-bottom:1px solid #eee;padding:0 0 10px}.ax-smart-results.is-mobile .ax-search-product-list{grid-template-columns:1fr}.ax-smart-results.is-mobile .ax-search-product{grid-template-columns:76px 1fr}.ax-smart-results.is-mobile .ax-search-product img{width:76px;height:76px}
@media(max-width:760px){.ax-smart-results.is-desktop{display:none!important}}

/* V95 — Banner inferior responsive con transparencia integrada en el arte */
.closing-banner{
  position:relative!important;
  width:100%!important;
  height:auto!important;
  min-height:0!important;
  max-height:none!important;
  margin:0!important;
  padding:0!important;
  overflow:visible!important;
  background:transparent!important;
}
.closing-banner-link,
.closing-banner picture,
.closing-banner img{
  display:block;
  width:100%;
}
.closing-banner-link{line-height:0;text-decoration:none;}
.closing-banner img{
  height:auto!important;
  object-fit:contain!important;
  object-position:center bottom!important;
  user-select:none;
  -webkit-user-drag:none;
}
.closing-banner-bg,.closing-banner-copy{display:none!important;}
.closing-banner + .site-footer{margin-top:0!important;}
@media(max-width:700px){
  .closing-banner{height:auto!important;min-height:0!important;max-height:none!important;}
}


/* V96 — Campaña inferior: crossfade + menor separación desde Para ti */
.home-sec.personalized{padding-bottom:32px!important;}
.closing-campaign .closing-banner-link{position:relative;display:block;}
.closing-campaign .closing-slide{display:block;width:100%;opacity:0;transition:opacity .7s ease;pointer-events:none;}
.closing-campaign .closing-slide:first-child{position:relative;}
.closing-campaign .closing-slide:not(:first-child){position:absolute;inset:0;}
.closing-campaign .closing-slide.is-active{opacity:1;pointer-events:auto;}
.closing-campaign .closing-slide img{display:block;width:100%;height:auto;}
@media(max-width:700px){
  .home-sec.personalized{padding-bottom:27px!important;}
}

/* V98 — “Encuentra lo que va contigo”: carrusel uniforme, limpio y contemporáneo */
.home-sec.quick.quick-icons{
  padding-top:34px!important;
  padding-bottom:46px!important;
  overflow:hidden;
}
.quick-icons .quick-head{
  margin-bottom:26px;
  align-items:center;
}
.quick-icons .quick-head>h2{
  text-transform:none!important;
  font-size:32px!important;
  line-height:1.15!important;
  font-weight:500!important;
  letter-spacing:-.02em!important;
  color:#333;
  margin:0!important;
}
.quick-actions{display:flex;gap:10px;align-items:center;}
.quick-actions .qp,.quick-actions .qn{
  width:44px;
  height:44px;
  border:0;
  border-radius:50%;
  background-color:#f1f1f1;
  background-image:url('/flecha.svg');
  background-repeat:no-repeat;
  background-position:center;
  background-size:15px 15px;
  font-size:0;
  cursor:pointer;
}
.quick-actions .qp{transform:rotate(180deg);}
.quick-track{
  display:flex;
  gap:24px;
  width:100%;
  overflow-x:auto;
  scroll-snap-type:x mandatory;
  scrollbar-width:none;
  overscroll-behavior-inline:contain;
  -webkit-overflow-scrolling:touch;
  padding:4px 0 8px;
}
.quick-track::-webkit-scrollbar{display:none;}
.quick-track .infinite-clone{pointer-events:auto;}
.quick-icon-item{
  flex:0 0 calc((100% - 120px)/6);
  min-width:0;
  scroll-snap-align:start;
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:flex-start;
  gap:11px;
  color:#333;
  text-decoration:none;
  text-align:center;
  font-size:15px;
  line-height:1.2;
  font-weight:500;
}
.quick-icon-item .cat-svg{
  width:128px;
  height:128px;
  display:flex;
  align-items:center;
  justify-content:center;
}
.quick-icon-item .cat-svg img{
  display:block;
  width:100%;
  height:100%;
  object-fit:contain;
  transform:none!important;
  transition:opacity .2s ease!important;
}
.quick-icon-item:hover .cat-svg img{opacity:.72;transform:none!important;}
.footer-brand-home{display:inline-block;line-height:0;text-decoration:none;}

/* V98 — campaña inferior: conservar separación ajustada de V97 */
.home-sec.personalized{padding-bottom:18px!important;}

@media(max-width:1100px) and (min-width:701px){
  .quick-track{gap:22px;}
  .quick-icon-item{flex-basis:calc((100% - 88px)/5);}
  .quick-icon-item .cat-svg{width:116px;height:116px;}
}

@media(max-width:700px){
  .home-sec.quick.quick-icons{padding-top:28px!important;padding-bottom:38px!important;}
  .quick-icons .quick-head{margin-bottom:20px;}
  .quick-icons .quick-head>h2{font-size:27px!important;}
  .quick-actions{gap:8px;}
  .quick-actions .qp,.quick-actions .qn{width:38px;height:38px;background-size:13px 13px;}
  .quick-track{gap:16px;padding-top:2px;}
  .quick-icon-item{
    flex:0 0 calc((100% - 32px)/3);
    font-size:13px;
    gap:8px;
  }
  .quick-icon-item .cat-svg{width:88px;height:88px;}
  .home-sec.personalized{padding-bottom:14px!important;}
}



/* V101 — consistencia de títulos y aire de "Explora por categoría" */
.home-page .home-sec > .sec-head h2,
.home-page #forYouSection > .sec-head h2 {
  font-size: 26px !important;
  line-height: 1.2 !important;
  font-weight: 700 !important;
  letter-spacing: 0 !important;
}

/* El bloque de iconos respira igual arriba y abajo */
.home-page .quick-icons {
  margin-top: 48px !important;
  margin-bottom: 48px !important;
}

@media (max-width: 700px) {
  .home-page .home-sec > .sec-head h2,
  .home-page #forYouSection > .sec-head h2 {
    font-size: 22px !important;
    line-height: 1.2 !important;
  }

  .home-page .quick-icons {
    margin-top: 32px !important;
    margin-bottom: 32px !important;
  }
}


/* ==========================================================
   V103 — HOME: iconos + Encuentra en loop / logos / contacto
   ========================================================== */

/* Explora por categoría: más presencia sin perder aire */
.home-page .quick-icons .quick-head{
  margin-bottom:32px!important;
}
.home-page .quick-icon-item{
  color:#3f4246!important;
}
.home-page .quick-icon-item .cat-svg{
  width:151px!important;
  height:151px!important;
}
.home-page .quick-icon-item .cat-svg img{
  opacity:.72!important; /* #3A3A3A sobre fondo claro ≈ gris medio #6F7378 */
}
.home-page .quick-icon-item:hover .cat-svg img{
  opacity:.58!important;
}

@media(max-width:1100px) and (min-width:701px){
  .home-page .quick-icon-item .cat-svg{
    width:137px!important;
    height:137px!important;
  }
}
@media(max-width:700px){
  .home-page .quick-icons .quick-head{
    margin-bottom:24px!important;
  }
  .home-page .quick-icon-item .cat-svg{
    width:104px!important;
    height:104px!important;
  }
}

/* Encuentra lo que va contigo: 3 tarjetas completas en escritorio.
   En móvil se conserva una tarjeta grande con pista de la siguiente. */
@media(min-width:901px){
  .home-page #encuentra-lo-tuyo .cat-track>a{
    flex:0 0 calc((100% - 28px)/3)!important;
    min-width:0!important;
  }
}

/* Los logos AXESORIO deben ser siempre enlaces activos a Inicio */
a.logo,
.footer-brand-home{
  position:relative!important;
  z-index:6!important;
  pointer-events:auto!important;
  cursor:pointer!important;
}
.footer-brand-home{
  display:inline-block!important;
  line-height:0!important;
  text-decoration:none!important;
}

/* Contacto: el icono comparte exactamente la acción del enlace inferior */
.contact-icon-link{
  display:inline-flex!important;
  align-items:center!important;
  justify-content:center!important;
  line-height:0!important;
  text-decoration:none!important;
  cursor:pointer!important;
}
.contact-icon-link .contact-option-icon{
  cursor:pointer!important;
}
.contact-icon-link:hover .contact-option-icon{
  opacity:.68;
}


/* ==========================================================
   V104 — ajuste REAL de iconos, sin doble crecimiento
   ========================================================== */

/* Caja moderada: no acumulamos otro +18% sobre V103 */
.home-page .quick-icon-item .cat-svg{
  width:142px!important;
  height:142px!important;
}

/* El dibujo interno era el verdadero límite (112x88).
   Subimos aprox. 16-18% de forma controlada. */
.home-page .quick-icon-item .cat-svg img{
  width:auto!important;
  height:auto!important;
  max-width:132px!important;
  max-height:104px!important;
  object-fit:contain!important;
  transform:none!important;
}

/* Mantener aire respecto al título */
.home-page .quick-icons .quick-head{
  margin-bottom:32px!important;
}

@media(max-width:1100px) and (min-width:701px){
  .home-page .quick-icon-item .cat-svg{
    width:130px!important;
    height:130px!important;
  }
  .home-page .quick-icon-item .cat-svg img{
    max-width:120px!important;
    max-height:94px!important;
  }
}

@media(max-width:700px){
  .home-page .quick-icon-item .cat-svg{
    width:102px!important;
    height:102px!important;
  }
  .home-page .quick-icon-item .cat-svg img{
    max-width:98px!important;
    max-height:76px!important;
  }
}


/* ==========================================================
   V105 — Explora por categoría
   Crecimiento por BLOQUE en escritorio, sin tocar el SVG
   ========================================================== */

@media (min-width: 701px) {
  .home-page .quick-icon-item .cat-svg{
    width:154px!important;
    height:154px!important;
    flex:0 0 154px!important;
  }

  .home-page .quick-icon-item .cat-svg img{
    width:100%!important;
    height:100%!important;
    max-width:none!important;
    max-height:none!important;
    object-fit:contain!important;
    transform:none!important;
  }

  /* Conserva el aire superior aunque el bloque sea mayor */
  .home-page .quick-icons .quick-head{
    margin-bottom:32px!important;
  }
}

/* Móvil: sin crecimiento adicional */
@media (max-width: 700px) {
  .home-page .quick-icon-item .cat-svg{
    width:102px!important;
    height:102px!important;
    flex:0 0 102px!important;
  }

  .home-page .quick-icon-item .cat-svg img{
    width:auto!important;
    height:auto!important;
    max-width:98px!important;
    max-height:76px!important;
    object-fit:contain!important;
    transform:none!important;
  }
}


/* ==========================================================
   V107 — compartir producto
   ========================================================== */
.detail-actions{
  flex:0 0 30px;
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:15px;
  position:relative;
}
.detail-share-wrap{
  position:relative;
  display:flex;
  justify-content:center;
}
.detail-share{
  appearance:none;
  -webkit-appearance:none;
  width:28px;
  height:28px;
  padding:2px;
  border:0;
  background:transparent;
  display:grid;
  place-items:center;
  cursor:pointer;
  color:#222;
}
.detail-share img{
  display:block;
  width:22px;
  height:22px;
  object-fit:contain;
  pointer-events:none;
}
.detail-share:hover{transform:scale(1.06);}
.detail-share:focus-visible{outline:1px solid #555;outline-offset:2px;border-radius:2px;}

.detail-share-menu{
  position:absolute;
  right:0;
  top:36px;
  width:198px;
  padding:10px 0 8px;
  background:#fff;
  border:1px solid #dedede;
  box-shadow:0 8px 26px rgba(0,0,0,.10);
  z-index:40;
}
.detail-share-menu[hidden]{display:none!important;}
.detail-share-menu-title{
  padding:5px 14px 9px;
  font-size:13px;
  font-weight:600;
  color:#333;
}
.detail-share-option{
  width:100%;
  min-height:40px;
  border:0;
  background:transparent;
  padding:8px 14px;
  display:flex;
  align-items:center;
  gap:11px;
  color:#333;
  font:400 13px "Roboto",sans-serif;
  text-decoration:none;
  text-align:left;
  cursor:pointer;
}
.detail-share-option:hover{background:#f3f3f3;}
.detail-share-option img{
  width:19px;
  height:19px;
  object-fit:contain;
  flex:0 0 19px;
}
.detail-share-copy{appearance:none;-webkit-appearance:none;}
.detail-share-status{
  min-height:18px;
  padding:2px 14px 0 44px;
  font-size:11px;
  color:#666;
}

@media(max-width:700px){
  .detail-actions{
    gap:13px;
  }
  .detail-share{
    width:26px;
    height:26px;
  }
  .detail-share img{
    width:20px;
    height:20px;
  }
  /* Normalmente móvil usa navigator.share; este panel queda como respaldo. */
  .detail-share-menu{
    right:0;
    top:34px;
    width:190px;
  }
}

/* V112 — índice crawlable sin alterar el diseño */
.seo-product-index{position:absolute!important;width:1px!important;height:1px!important;padding:0!important;margin:-1px!important;overflow:hidden!important;clip:rect(0,0,0,0)!important;white-space:nowrap!important;border:0!important}

/* ==========================================================
   V118 — GALERÍA MÓVIL CORREGIDA
   ========================================================== */
@media(max-width:900px){
.detail-gallery-wrap{display:grid!important;grid-template-columns:44px minmax(0,1fr)!important;gap:7px!important;align-items:stretch!important;width:100%!important;max-width:none!important}
.thumb-rail{display:flex!important;grid-column:1!important;grid-row:1!important;width:44px!important;min-width:44px!important;height:100%!important;margin:0!important;overflow:hidden!important;align-items:stretch!important}
.thumbs-window{width:44px!important;height:100%!important;overflow:hidden!important}
.thumbs-track{width:44px!important;height:100%!important;display:grid!important;grid-template-rows:repeat(4,minmax(0,1fr))!important;gap:6px!important;transform:none!important;transition:none!important}
.thumb{width:44px!important;min-width:44px!important;height:auto!important;min-height:0!important;padding:0!important;overflow:hidden!important;box-sizing:border-box!important;background:#fff!important}
.thumb img{width:100%!important;height:100%!important;object-fit:contain!important;display:block!important}
.main-photo{grid-column:2!important;grid-row:1!important;min-width:0!important;width:100%!important;height:auto!important;max-width:none!important;margin:0!important}
.main-nav-arrow.prev,.main-prev{left:2px!important}.main-nav-arrow.next,.main-next{right:2px!important}
.main-photo-wrap{width:100%!important;height:100%!important;min-height:0!important;overflow:hidden!important;touch-action:pan-y!important;position:relative!important}
.main-photo-wrap.is-pinching{touch-action:none!important}
#mainImage{transform-origin:center center;will-change:transform;user-select:none;-webkit-user-drag:none}
.related h2,.complement-section h2{font-size:17px!important;line-height:1.25!important;font-weight:700!important;text-transform:none!important;letter-spacing:normal!important}
}
@media(max-width:520px){
.detail-gallery-wrap{grid-template-columns:40px minmax(0,1fr)!important;gap:6px!important}
.thumb-rail,.thumbs-window,.thumbs-track,.thumb{width:40px!important;min-width:40px!important}
.thumbs-track{gap:5px!important}
}


/* ==========================================================
   V120 — AJUSTES DE FICHA APROBADOS
   Acciones fuera del flujo, encabezado compacto y sin separador
   entre Complementa con / También te puede interesar.
   ========================================================== */

/* Las acciones no deben empujar SKU ni precio. */
.product-info{
  position:relative;
}

.product-actions{
  position:absolute!important;
  right:0!important;
  top:0!important;
  display:flex!important;
  flex-direction:column!important;
  align-items:center!important;
  gap:18px!important;
  width:34px!important;
  margin:0!important;
  z-index:4!important;
}

/* El contenido conserva espacio lateral para los iconos,
   pero no gana altura por ellos. */
.product-info > .brand,
.product-info > .product-brand,
.product-info > h1,
.product-info > .product-title,
.product-info > .sku,
.product-info > .product-sku,
.product-info > .price,
.product-info > .product-price{
  padding-right:52px;
}

/* Corazón arriba; compartir aproximadamente a la altura del nombre. */
.product-actions .favorite-btn,
.product-actions [data-favorite],
.product-actions .share-btn,
.product-actions [data-share]{
  position:relative!important;
  inset:auto!important;
  margin:0!important;
}

/* Quitar únicamente el separador entre las dos secciones relacionadas.
   No cambia sus márgenes ni el orden de bloques. */
.complement-section{
  border-bottom:0!important;
}
.related{
  border-top:0!important;
}
.complement-section + .related{
  border-top:0!important;
}
#complementSection{
  border-bottom:0!important;
}
#complementSection + .related,
#complementSection + section{
  border-top:0!important;
}

/* Los dos títulos conservan el mismo tratamiento y tipo oración. */
.complement-section h2,
.related h2{
  font-size:17px!important;
  line-height:1.25!important;
  font-weight:700!important;
  text-transform:none!important;
  letter-spacing:normal!important;
}

/* Móvil: misma lógica; acciones absolutas para no desplazar SKU/precio. */
@media(max-width:900px){
  .product-info{
    position:relative!important;
  }
  .product-actions{
    position:absolute!important;
    right:0!important;
    top:0!important;
    gap:14px!important;
  }
  .product-info > .brand,
  .product-info > .product-brand,
  .product-info > h1,
  .product-info > .product-title,
  .product-info > .sku,
  .product-info > .product-sku,
  .product-info > .price,
  .product-info > .product-price{
    padding-right:48px;
  }
}


/* ==========================================================
   V121 — CABECERA DE FICHA + RITMO DE SECCIONES
   ========================================================== */

/* La columna de información es la referencia de las acciones. */
.detail-info{position:relative!important;}

/* El título deja de cargar las acciones en su flujo. */
.detail-title-row{
  display:block!important;
  position:relative!important;
  margin:0!important;
}
.detail-title-row h1{
  display:block!important;
  width:calc(100% - 54px)!important;
  margin-right:54px!important;
}

/* Acciones flotantes:
   corazón arriba, alineado con la zona superior marca/foto;
   compartir ocupa la zona donde antes estaba el corazón.
   No empujan nombre, SKU, precio ni acordeones. */
.detail-actions{
  position:absolute!important;
  right:0!important;
  top:0!important;
  width:30px!important;
  height:auto!important;
  display:flex!important;
  flex-direction:column!important;
  align-items:center!important;
  gap:18px!important;
  margin:0!important;
  z-index:12!important;
}
.detail-favorite,
.detail-share{
  margin:0!important;
  flex:none!important;
}

/* Recuperar encabezado compacto sin reducir el logo de marca. */
.detail-brand-logo{
  margin-top:0!important;
  margin-bottom:15px!important;
}
.detail-sku{margin-top:10px!important;}
.detail-price{margin-top:10px!important;}

/* Descripción: sin línea superior; se mantienen separadores internos. */
.product-accordions{
  border-top:0!important;
  margin-top:8px!important;
}

/* Secciones inferiores: sin línea y con aire congruente. */
.complement-section{
  margin-top:34px!important;
  margin-bottom:0!important;
  padding-bottom:0!important;
  border-bottom:0!important;
}
.complement-section + .related,
.related{
  border-top:0!important;
}
.complement-section + .related{
  margin-top:48px!important;
  padding-top:0!important;
}

/* Jerarquía idéntica para ambos encabezados, tipo oración. */
.complement-section h2,
.related h2{
  margin:0 0 24px!important;
  font:700 20px/1.25 "Roboto",Arial,sans-serif!important;
  text-transform:none!important;
  letter-spacing:normal!important;
}

@media(max-width:900px){
  .detail-actions{
    top:0!important;
    right:0!important;
    gap:14px!important;
  }
  .detail-title-row h1{
    width:calc(100% - 46px)!important;
    margin-right:46px!important;
  }
  .detail-brand-logo{
    margin-top:0!important;
    margin-bottom:13px!important;
  }
  .detail-sku{margin-top:8px!important;}
  .detail-price{margin-top:8px!important;}
  .product-accordions{margin-top:7px!important;}
  .complement-section + .related{margin-top:38px!important;}
  .complement-section h2,
  .related h2{
    margin-bottom:20px!important;
    font-size:18px!important;
  }
}


/* ==========================================================
   V123 — GALERÍA MÓVIL
   5 miniaturas visibles, columna más delgada.
   Escritorio NO se modifica.
   ========================================================== */
@media (max-width:900px){
  .detail-gallery{
    --mobile-thumb-w:52px;
    --mobile-thumb-gap:7px;
  }

  .detail-gallery .thumb-rail,
  .detail-gallery .thumbs{
    width:var(--mobile-thumb-w)!important;
    min-width:var(--mobile-thumb-w)!important;
    flex:0 0 var(--mobile-thumb-w)!important;
    gap:var(--mobile-thumb-gap)!important;
    overflow:hidden!important;
  }

  .detail-gallery .thumb,
  .detail-gallery .thumb-item,
  .detail-gallery .thumbs button{
    width:var(--mobile-thumb-w)!important;
    min-width:var(--mobile-thumb-w)!important;
  }

  .detail-gallery .thumb img,
  .detail-gallery .thumb-item img,
  .detail-gallery .thumbs button img{
    width:100%!important;
    height:100%!important;
    object-fit:contain!important;
  }
}





/* ==========================================================
   V125 — SOLO MÓVIL
   5 miniaturas visibles; columna estrecha; sin afectar escritorio.
   ========================================================== */
@media (max-width:900px){
  .detail-gallery-wrap{
    grid-template-columns:48px minmax(0,1fr)!important;
    gap:6px!important;
  }

  .thumb-rail{
    display:block!important;
    width:48px!important;
    min-width:48px!important;
    height:100%!important;
    overflow:hidden!important;
    margin:0!important;
  }

  .thumbs-window{
    width:48px!important;
    height:100%!important;
    overflow:hidden!important;
  }

  .thumbs-track{
    display:grid!important;
    grid-template-rows:repeat(5,minmax(0,1fr))!important;
    width:48px!important;
    height:100%!important;
    gap:5px!important;
    transform:none!important;
    transition:none!important;
  }

  .thumb{
    display:flex!important;
    width:48px!important;
    min-width:48px!important;
    height:auto!important;
    min-height:0!important;
    aspect-ratio:auto!important;
    box-sizing:border-box!important;
    overflow:hidden!important;
    background:#fff!important;
  }

  .thumb.v125-hidden{
    display:none!important;
  }

  .thumb img{
    width:100%!important;
    height:100%!important;
    object-fit:contain!important;
    display:block!important;
  }
}

@media (max-width:520px){
  .detail-gallery-wrap{
    grid-template-columns:44px minmax(0,1fr)!important;
    gap:5px!important;
  }

  .thumb-rail,
  .thumbs-window,
  .thumbs-track,
  .thumb{
    width:44px!important;
    min-width:44px!important;
  }

  .thumbs-track{gap:4px!important;}
}


/* ==========================================================
   V126 — SOLO MÓVIL: galería sin miniaturas
   Escritorio queda exactamente como en V125.
   ========================================================== */
@media (max-width:900px){
  .detail-gallery-wrap{
    display:block!important;
    width:100%!important;
    max-width:none!important;
  }

  .thumb-rail,
  .thumbs-window,
  .thumbs-track{
    display:none!important;
    width:0!important;
    min-width:0!important;
    max-width:0!important;
    height:0!important;
    margin:0!important;
    padding:0!important;
    overflow:hidden!important;
  }

  .main-photo{
    display:block!important;
    width:100%!important;
    max-width:none!important;
    margin:0!important;
  }

  .main-photo-wrap{
    width:100%!important;
    max-width:none!important;
  }
}