@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;}
}