/* ===== RESET & BASE ===== */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { font-size: 16px; }
@keyframes pageFade { from { opacity: 0; } to { opacity: 1; } }
body { font-family: 'Proxima Nova', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif; background: #ededed; color: #333; animation: pageFade .2s ease; }
a { color: inherit; text-decoration: none; }
ul { list-style: none; }
img { max-width: 100%; display: block; }

/* ===== LAYOUT HELPERS ===== */
.header-inner,
.section-inner,
.footer-inner { max-width: 1200px; margin: 0 auto; padding: 0 16px; }

/* ===== HEADER ===== */
.header { position: sticky; top: 0; z-index: 100; }

.header-top { background: #ffe600; padding: 12px 0; }

.header-inner { display: flex; align-items: center; gap: 16px; }

.logo { flex-shrink: 0; }
.logo-img { height: 44px; width: auto; object-fit: contain; display: block; }
.logo-text { font-size: 22px; font-weight: 900; color: #3483fa; letter-spacing: -0.5px; }
.logo-dot { font-size: 22px; font-weight: 900; color: #333; }
.logo-uy  { font-size: 22px; font-weight: 900; color: #333; }

.search-form { flex: 1; display: flex; max-width: 700px; border-radius: 4px; overflow: hidden; box-shadow: 0 1px 4px rgba(0,0,0,.15); }
.search-input { flex: 1; border: none; outline: none; padding: 12px 16px; font-size: 15px; }
.search-btn { background: #fff; border: none; cursor: pointer; padding: 0 16px; color: #666; display: flex; align-items: center; }
.search-btn:hover { background: #f5f5f5; }

.header-nav { display: flex; align-items: center; gap: 20px; flex-shrink: 0; font-size: 14px; }
.header-nav a { color: #333; white-space: nowrap; }
.header-nav a:hover { text-decoration: underline; }
.nav-sell { font-weight: 600; }
.nav-cart svg { display: block; }

/* CATEGORIES BAR */
.header-categories { background: #ffe600; border-bottom: 1px solid #e6c800; }
.header-categories .header-inner { display: flex; align-items: center; justify-content: space-between; }
.cat-nav { display: flex; gap: 0; flex: 1; overflow: visible; }
.cat-nav li a { display: block; padding: 10px 14px; font-size: 14px; color: #333; white-space: nowrap; }
.cat-nav li a:hover { color: #3483fa; border-bottom: 3px solid #3483fa; }

/* Dropdown Categorías */
.cat-has-dd { position: relative; }
.cat-dd-trigger { display: flex !important; align-items: center; }
.cat-dd {
  display: none; position: absolute; top: 100%; left: 0;
  background: #fff; border: 1px solid #e0e0e0; border-top: none;
  border-radius: 0 0 8px 8px; box-shadow: 0 8px 24px rgba(0,0,0,.12);
  min-width: 240px; max-height: calc(100vh - 120px); overflow-y: auto; z-index: 600;
}
.cat-dd-more {
  display: block; padding: 12px 16px; font-size: 13px; font-weight: 600;
  color: #3483fa; text-align: center; border-top: 1px solid #e8e8e8;
  background: #f5f8ff; transition: background .1s; position: sticky; bottom: 0;
}
.cat-dd-more:hover { background: #e8f0ff; }
.cat-dd.open { display: block; }
.cat-dd-loading, .cat-dd-empty { padding: 14px 16px; font-size: 13px; color: #999; }
.cat-dd-item {
  display: block; padding: 11px 16px; font-size: 14px; color: #333;
  border-bottom: 1px solid #f5f5f5; transition: background .1s;
}
.cat-dd-item:last-child { border-bottom: none; }
.cat-dd-item:hover { background: #f5f8ff; color: #3483fa; }
.cat-dd-group { border-bottom: 1px solid #f0f0f0; }
.cat-dd-parent {
  display: block; padding: 11px 16px; font-size: 14px; font-weight: 600;
  color: #333; transition: background .1s;
}
.cat-dd-parent:hover { background: #f5f8ff; color: #3483fa; }
.cat-dd-subs { padding: 0 0 6px 0; background: #fafafa; }
.cat-dd-sub {
  display: block; padding: 8px 16px 8px 28px; font-size: 13px; color: #555;
  transition: background .1s;
}
.cat-dd-sub:hover { background: #f0f4ff; color: #3483fa; }

/* Nav icons en barra de categorías */
.header-categories .header-nav { display: flex; align-items: center; gap: 4px; flex-shrink: 0; margin-left: 12px; }
.header-categories .header-nav > a { color: #333; font-size: 13px; white-space: nowrap; padding: 4px 6px; border-radius: 4px; }
.header-categories .header-nav > a:hover { background: rgba(0,0,0,.08); text-decoration: none; }
.nav-icon-btn { display: flex; align-items: center; justify-content: center; padding: 5px; border-radius: 50%; transition: background .15s; position: relative; }
.nav-icon-btn:hover { background: rgba(0,0,0,.1); }
.nav-icon-btn svg { display: block; }
.fav-badge { position: absolute; top: -3px; right: -3px; background: #3483fa; color: #fff; border-radius: 50%; min-width: 16px; height: 16px; font-size: 10px; font-weight: 700; display: flex; align-items: center; justify-content: center; padding: 0 2px; }

/* ===== HERO BANNER ===== */
.hero-banner { background: #fff; margin-bottom: 12px; overflow: hidden; position: relative; }
.hero-track { position: relative; }
.hero-slide { display: none; align-items: center; min-height: 280px; padding: 32px; position: relative; }
.hero-slide.active { display: flex; animation: heroFadeIn .38s ease; }
@keyframes heroFadeIn { from { opacity: 0; transform: translateX(18px); } to { opacity: 1; transform: translateX(0); } }
.hero-content { flex: 1; max-width: 500px; }
.hero-tag { font-size: 13px; font-weight: 700; color: #3483fa; text-transform: uppercase; letter-spacing: 1px; margin-bottom: 8px; }
.hero-title { font-size: 32px; font-weight: 300; color: #333; line-height: 1.25; margin-bottom: 20px; }
.hero-title strong { font-weight: 700; color: #3483fa; }
.hero-btn { display: inline-block; background: #3483fa; color: #fff; padding: 12px 28px; border-radius: 6px; font-size: 15px; font-weight: 600; }
.hero-btn:hover { filter: brightness(.9); }
.hero-image { flex: 1; display: flex; justify-content: center; }
.hero-img-placeholder { width: 260px; height: 200px; border-radius: 12px; background: linear-gradient(145deg, #b0c4de, #4682b4); display: flex; align-items: center; justify-content: center; }
.hero-arrow {
  position: absolute; top: 50%; transform: translateY(-50%);
  background: rgba(255,255,255,.88); border: none; border-radius: 50%;
  width: 38px; height: 38px; display: flex; align-items: center; justify-content: center;
  cursor: pointer; color: #333; z-index: 10; font-size: 22px; line-height: 1;
  box-shadow: 0 2px 8px rgba(0,0,0,.14); backdrop-filter: blur(4px);
  transition: background .15s, transform .15s;
}
.hero-arrow:hover { background: #fff; transform: translateY(-50%) scale(1.08); }
.hero-prev { left: 12px; }
.hero-next { right: 12px; }
.hero-dots { position: absolute; bottom: 12px; left: 50%; transform: translateX(-50%); display: flex; gap: 8px; }
.dot { width: 8px; height: 8px; border-radius: 50%; background: rgba(0,0,0,.2); cursor: pointer; transition: background .2s, transform .2s; }
.dot.active { background: #3483fa; transform: scale(1.3); }
.dot:hover { background: rgba(0,0,0,.4); }

/* ===== POPULAR SEARCHES ===== */
.popular-searches { background: #fff; border-bottom: 1px solid #f0f0f0; padding: 10px 0; }
.pop-searches { display: flex; align-items: center; flex-wrap: wrap; gap: 8px; }
.pop-search-label { font-size: 13px; color: #999; white-space: nowrap; }
.pop-tag { display: inline-block; padding: 5px 12px; background: #f5f5f5; border-radius: 20px; font-size: 13px; color: #555; transition: background .15s, color .15s; }
.pop-tag:hover { background: #e8f0fe; color: #3483fa; }

/* ===== QUICK CATEGORIES ===== */
.quick-cats { background: #fff; margin-bottom: 12px; padding: 20px 0; }
.quick-cats-grid { display: grid; grid-template-columns: repeat(8, 1fr); gap: 8px; }
.qcat-item { display: flex; flex-direction: column; align-items: center; gap: 8px; padding: 12px 8px; border-radius: 8px; transition: background .15s; }
.qcat-item:hover { background: #f5f5f5; }
.qcat-item span { font-size: 12px; color: #333; text-align: center; line-height: 1.3; }
.qcat-icon { width: 52px; height: 52px; border-radius: 50%; background: #e8f4fd; }
.qcat-icon.cam    { background: linear-gradient(135deg,#a8d8f0,#3483fa); }
.qcat-icon.router { background: linear-gradient(135deg,#b8e0b0,#27ae60); }
.qcat-icon.sw     { background: linear-gradient(135deg,#f0d0a8,#e67e22); }
.qcat-icon.acc    { background: linear-gradient(135deg,#d0a8f0,#8e44ad); }
.qcat-icon.alarm  { background: linear-gradient(135deg,#f0a8a8,#e74c3c); }
.qcat-icon.srv    { background: linear-gradient(135deg,#a8a8f0,#34495e); }
.qcat-icon.ups    { background: linear-gradient(135deg,#f0f0a8,#f39c12); }
.qcat-icon.cable  { background: linear-gradient(135deg,#a8f0d8,#1abc9c); }

/* ===== PRODUCT SECTIONS ===== */
.product-section { background: #fff; margin-bottom: 12px; padding: 20px 0 24px; }
.section-header { display: flex; align-items: baseline; justify-content: space-between; margin-bottom: 16px; }
.section-title { font-size: 20px; font-weight: 600; color: #333; }
.section-link { font-size: 14px; color: #3483fa; }
.section-link:hover { text-decoration: underline; }

.product-grid { display: grid; grid-template-columns: repeat(6, 1fr); gap: 12px; }

/* PRODUCT CARD */
@keyframes cardIn { from { opacity: 0; transform: translateY(12px); } to { opacity: 1; transform: translateY(0); } }
.product-card { border: 1px solid #e6e6e6; border-radius: 8px; overflow: hidden; background: #fff; transition: box-shadow .2s, transform .2s; cursor: pointer; animation: cardIn .25s ease both; }
.product-card:hover { box-shadow: 0 4px 20px rgba(0,0,0,.12); transform: translateY(-2px); }
.card-img { width: 100%; aspect-ratio: 1; background: #f5f5f5; display: flex; align-items: center; justify-content: center; overflow: hidden; }
.card-img img { width: 100%; height: 100%; object-fit: contain; padding: 8px; }
.card-img-placeholder { width: 70%; height: 70%; border-radius: 8px; }
.card-body { padding: 12px; }
.card-discount { font-size: 11px; font-weight: 700; color: #00a650; margin-bottom: 2px; }
.card-price { font-size: 18px; font-weight: 400; color: #333; margin-bottom: 2px; }
.card-price-original { font-size: 12px; color: #999; text-decoration: line-through; margin-bottom: 4px; }
.card-title { font-size: 13px; color: #666; line-height: 1.4; margin-bottom: 6px; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.card-shipping { font-size: 12px; color: #00a650; font-weight: 500; }
.card-shipping-plain { font-size: 12px; color: #999; }
.card-brand { font-size: 11px; color: #aaa; margin-top: 2px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.card-installment { font-size: 11px; color: #00a650; margin-top: 1px; }
.result-installment { font-size: 13px; color: #00a650; margin-bottom: 4px; }

/* ===== PROMO BANNER ===== */
.promo-banner { margin-bottom: 12px; }
.promo-inner { background: linear-gradient(135deg,#3483fa,#1a5276); border-radius: 8px; display: flex; align-items: center; padding: 28px 32px; min-height: 120px; }
.promo-text { flex: 1; color: #fff; }
.promo-pretitle { font-size: 13px; font-weight: 700; text-transform: uppercase; letter-spacing: 1px; opacity: .8; margin-bottom: 6px; }
.promo-text h3 { font-size: 24px; font-weight: 600; margin-bottom: 14px; }
.promo-btn { display: inline-block; background: #ffe600; color: #333; padding: 10px 22px; border-radius: 6px; font-size: 14px; font-weight: 700; }
.promo-btn:hover { background: #f0d800; }
.promo-img { width: 160px; height: 80px; background: rgba(255,255,255,.15); border-radius: 8px; flex-shrink: 0; }

/* ===== SEARCH PAGE ===== */
.search-layout { display: flex; gap: 16px; max-width: 1280px; margin: 20px auto; padding: 0 16px; }

.filters-sidebar { width: 230px; flex-shrink: 0; }
.sidebar-overlay { display: none; position: fixed; inset: 0; background: rgba(0,0,0,.4); z-index: 500; }
.sidebar-overlay.open { display: block; }
.sidebar-inner-header { display: flex; align-items: center; justify-content: space-between; padding: 10px 4px 10px 0; }
.sidebar-inner-header h3 { font-size: 15px; font-weight: 700; margin: 0; }
.sidebar-close-btn { display: none; background: none; border: none; font-size: 22px; cursor: pointer; color: #999; line-height: 1; padding: 0; }
.filter-block { background: #fff; border-radius: 8px; padding: 16px; margin-bottom: 12px; }
.filter-block h4 { font-size: 14px; font-weight: 700; margin-bottom: 12px; color: #333; border-bottom: 1px solid #f0f0f0; padding-bottom: 8px; }
.filter-item { display: flex; align-items: center; gap: 8px; padding: 5px 0; font-size: 13px; color: #555; cursor: pointer; }
.filter-item:hover { color: #3483fa; }
.filter-item input { accent-color: #3483fa; }

.search-results { width: 100%; }
#results-list.product-grid { grid-template-columns: repeat(4, 1fr); }
.search-header { background: #fff; border-radius: 8px; padding: 16px; margin-bottom: 12px; display: flex; align-items: center; justify-content: space-between; gap: 10px; flex-wrap: wrap; }
.search-header h1 { font-size: 20px; font-weight: 400; color: #333; }
.search-header h1 span { font-weight: 600; }
.search-count { font-size: 13px; color: #999; }
.sort-select { font-size: 13px; border: 1px solid #e0e0e0; border-radius: 4px; padding: 6px 10px; color: #555; }

.results-list { display: flex; flex-direction: column; gap: 8px; }
@keyframes resultIn { from { opacity: 0; transform: translateX(-8px); } to { opacity: 1; transform: translateX(0); } }
.result-card { background: #fff; border-radius: 8px; padding: 16px; display: flex; gap: 16px; border: 1px solid #e6e6e6; transition: box-shadow .2s; cursor: pointer; animation: resultIn .2s ease both; }
.result-card:hover { box-shadow: 0 2px 12px rgba(0,0,0,.1); }
.result-img { width: 180px; height: 180px; flex-shrink: 0; border-radius: 6px; background: #f5f5f5; display: flex; align-items: center; justify-content: center; overflow: hidden; }
.result-img img { width: 100%; height: 100%; object-fit: contain; padding: 8px; }
.result-img-placeholder { width: 75%; height: 75%; border-radius: 8px; }
.result-info { flex: 1; }
.result-title { font-size: 15px; color: #333; margin-bottom: 8px; line-height: 1.5; }
.result-price-original { font-size: 13px; color: #999; text-decoration: line-through; margin-bottom: 2px; }
.result-price { font-size: 24px; font-weight: 300; color: #333; margin-bottom: 2px; }
.result-discount { font-size: 14px; color: #00a650; font-weight: 600; margin-bottom: 6px; }
.result-shipping { font-size: 13px; color: #00a650; margin-bottom: 12px; }
.result-badge { display: inline-block; font-size: 11px; padding: 3px 8px; border-radius: 3px; background: #3483fa; color: #fff; font-weight: 600; }

/* ===== PRODUCT DETAIL PAGE ===== */
.pdp-layout { max-width: 1200px; margin: 20px auto; padding: 0 16px; }

/* Top bar */
.pdp-topbar { display: flex; align-items: center; justify-content: space-between; margin-bottom: 12px; flex-wrap: wrap; gap: 8px; }
.pdp-topbar-left { display: flex; align-items: center; gap: 4px; flex-wrap: wrap; min-width: 0; }
.pdp-topbar-right { display: flex; align-items: center; gap: 10px; flex-shrink: 0; }
.pdp-back { font-size: 13px; color: #3483fa; text-decoration: none; font-weight: 500; white-space: nowrap; margin-right: 6px; }
.pdp-back:hover { text-decoration: underline; }
.pdp-breadcrumb { display: flex; align-items: center; flex-wrap: wrap; gap: 0; font-size: 12px; color: #999; }
.pdp-bc-sep { margin: 0 4px; color: #ccc; }
.pdp-bc-item { color: #666; }
.pdp-bc-item:hover { color: #3483fa; text-decoration: underline; }
.pdp-share-top { display: flex; align-items: center; gap: 6px; background: none; border: 1px solid #e0e0e0; border-radius: 6px; padding: 6px 12px; font-size: 13px; color: #555; cursor: pointer; }
.pdp-share-top:hover { border-color: #3483fa; color: #3483fa; }

/* Main 3-col grid: galería | info | buy box */
.pdp-main { display: flex; flex-direction: row; gap: 16px; align-items: flex-start; }

/* Gallery */
.pdp-gallery { background: #fff; border-radius: 8px; padding: 20px; flex: 0 0 auto; width: 38%; min-width: 260px; }
.gallery-main { width: 100%; aspect-ratio: 1; border-radius: 8px; background: #f5f5f5; display: flex; align-items: center; justify-content: center; margin-bottom: 12px; overflow: hidden; }
.gallery-main img { max-width: 100%; max-height: 100%; object-fit: contain; }
.gallery-main-placeholder { width: 65%; height: 65%; border-radius: 12px; }
.gallery-thumbs { display: flex; gap: 8px; }
.gallery-thumb { width: 64px; height: 64px; border-radius: 6px; border: 2px solid #e6e6e6; background: #f5f5f5; cursor: pointer; overflow: hidden; display: flex; align-items: center; justify-content: center; }
.gallery-thumb.active { border-color: #3483fa; }
.gallery-thumb-placeholder { width: 75%; height: 75%; border-radius: 4px; }

/* Info panel */
.pdp-info { background: #fff; border-radius: 8px; padding: 22px; flex: 1 1 auto; min-width: 0; }

/* Buy box */
.pdp-buy-box { background: #fff; border-radius: 8px; padding: 22px; flex: 0 0 280px; width: 280px; min-width: 250px; }

/* Brand above title */
.pdp-brand-above { font-size: 13px; margin-bottom: 6px; }
.pdp-brand-link-above { color: #3483fa; text-decoration: none; }
.pdp-brand-link-above:hover { text-decoration: underline; }
.pdp-brand-link-above strong { font-weight: 600; }

/* Condition + sold */
.pdp-condition-row { font-size: 13px; color: #888; margin-bottom: 6px; }
.pdp-cond-badge { color: #555; font-weight: 500; }
.pdp-sold-count { color: #888; }

/* Title */
.pdp-title { font-size: 22px; font-weight: 400; color: #333; line-height: 1.4; margin-bottom: 10px; }

/* Rating + fav row */
.pdp-rating-fav-row { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 14px; }
.pdp-rating { display: flex; align-items: center; gap: 6px; font-size: 13px; color: #666; }
.pdp-fav-inline { display: flex; align-items: center; gap: 5px; background: none; border: none; color: #3483fa; font-size: 13px; cursor: pointer; padding: 0; white-space: nowrap; }
.pdp-fav-inline.active { color: #e74c3c; }
.pdp-fav-inline:hover { text-decoration: underline; }
.pdp-fav-inline svg { flex-shrink: 0; }
.pdp-fav-inline.active svg { color: #e74c3c; }

/* Price section */
.pdp-price-section { border-bottom: 1px solid #f0f0f0; padding-bottom: 16px; margin-bottom: 16px; }
.pdp-price-original { font-size: 15px; color: #999; text-decoration: line-through; margin-bottom: 2px; }
.pdp-price-row { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.pdp-price { font-size: 38px; font-weight: 300; color: #333; line-height: 1.1; }
.pdp-discount-badge { background: #f0fff4; color: #00a650; font-size: 14px; font-weight: 700; border-radius: 4px; padding: 3px 8px; }
.pdp-installment { font-size: 14px; color: #00a650; margin-top: 6px; }

/* Delivery */
.pdp-delivery { border-bottom: 1px solid #f0f0f0; padding-bottom: 14px; margin-bottom: 14px; }
.pdp-delivery-item { display: flex; align-items: flex-start; gap: 10px; margin-bottom: 8px; font-size: 13px; }
.pdp-delivery-item:last-child { margin-bottom: 0; }
.pdp-del-title { color: #333; font-weight: 500; }
.pdp-del-sub { color: #888; }

/* Stock */
.pdp-stock-row { display: flex; align-items: center; gap: 10px; margin-bottom: 10px; font-size: 14px; }
.pdp-stock-ok { color: #00a650; font-weight: 500; }

/* Social proof */
.pdp-social-proof { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; margin-bottom: 14px; }
.pdp-viewers { display: flex; align-items: center; gap: 5px; font-size: 12px; color: #aaa; }
.pdp-stock-low { display: inline-flex; align-items: center; gap: 4px; font-size: 12px; font-weight: 700; color: #e67e22; background: #fff8f0; border: 1px solid #ffe0b2; border-radius: 4px; padding: 3px 8px; }

/* Qty */
.pdp-qty { margin-bottom: 14px; }
.pdp-qty label { font-size: 13px; color: #555; margin-bottom: 6px; display: block; }

/* Buy buttons */
.btn-buy { display: block; width: 100%; padding: 14px; background: #3483fa; color: #fff; border: none; border-radius: 6px; font-size: 16px; font-weight: 600; cursor: pointer; text-align: center; margin-bottom: 10px; }
.btn-buy:hover { background: #2968c8; }
.btn-cart { display: block; width: 100%; padding: 14px; background: #d8edff; color: #3483fa; border: none; border-radius: 6px; font-size: 16px; font-weight: 600; cursor: pointer; text-align: center; margin-bottom: 14px; }
.btn-cart:hover { background: #c0e0ff; }

/* Seller card */
.pdp-seller-card { display: flex; align-items: center; gap: 12px; border: 1px solid #f0f0f0; border-radius: 8px; padding: 12px 14px; margin-bottom: 14px; }
.pdp-seller-avatar { width: 38px; height: 38px; border-radius: 50%; background: #3483fa; color: #fff; display: flex; align-items: center; justify-content: center; font-size: 17px; font-weight: 700; flex-shrink: 0; }
.pdp-seller-info { flex: 1; min-width: 0; }
.pdp-seller-info strong { font-size: 14px; color: #333; display: block; }
.pdp-seller-info p { font-size: 12px; color: #888; margin-top: 1px; }
.pdp-wa-sm { padding: 7px 12px; font-size: 13px; }

/* SKU row */
.pdp-sku-row { display: flex; align-items: center; gap: 6px; font-size: 13px; color: #aaa; }
.pdp-sku-label { color: #aaa; }
.pdp-sku-val { color: #888; }

/* Below grid: desc + specs */
.pdp-below-grid { display: block; margin-top: 16px; }
.pdp-desc-card { background: #fff; border-radius: 8px; padding: 24px; }
.pdp-desc-card h2 { font-size: 18px; font-weight: 600; margin-bottom: 16px; color: #333; border-bottom: 1px solid #f0f0f0; padding-bottom: 12px; }
.pdp-desc-card p { font-size: 14px; line-height: 1.7; color: #555; }
.pdp-no-desc { font-size: 14px; color: #aaa; }
.pdp-specs-card { background: #fff; border-radius: 8px; padding: 24px; margin-top: 16px; }
.pdp-specs-card h2 { font-size: 18px; font-weight: 600; margin-bottom: 16px; color: #333; border-bottom: 1px solid #f0f0f0; padding-bottom: 12px; }
.pdp-specs-list { display: flex; flex-direction: column; }
.pdp-spec-row { display: flex; padding: 10px 0; border-bottom: 1px solid #f7f7f7; font-size: 14px; gap: 12px; }
.pdp-spec-row:last-child { border-bottom: none; }
.pdp-spec-label { color: #888; width: 120px; flex-shrink: 0; }
.pdp-spec-value { color: #333; font-weight: 500; }

/* PDP — meta (SKU copy) */
.pdp-brand-link { color: #3483fa; text-decoration: none; }
.pdp-brand-link:hover { text-decoration: underline; }

/* PDP — skeleton */
.pdp-skeleton-box { background: #e8e8e8; border-radius: 6px; animation: pulse 1.4s ease-in-out infinite; }
@keyframes pulse { 0%,100%{ opacity:1 } 50%{ opacity:.5 } }

/* Filtros activos en search */
.active-filters { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 12px; align-items: center; }
.filter-chip { display: inline-flex; align-items: center; gap: 6px; background: #e8f0fe; color: #3483fa; border-radius: 16px; padding: 5px 12px; font-size: 13px; font-weight: 500; }
.filter-chip-x { background: none; border: none; cursor: pointer; font-size: 16px; color: #3483fa; line-height: 1; padding: 0; display: flex; align-items: center; }
.filter-chip-x:hover { color: #1a5cc8; }
.filters-clear { font-size: 13px; color: #e74c3c; cursor: pointer; background: none; border: none; padding: 0; text-decoration: underline; }

/* Íconos categorías rápidas (SVG inline) */
.qcat-icon { display: flex; align-items: center; justify-content: center; }
.qcat-icon svg { color: #fff; }

/* ===== FOOTER ===== */
.footer { background: #fff; border-top: 1px solid #e6e6e6; margin-top: 24px; }
.footer-inner { max-width: 1200px; margin: 0 auto; padding: 32px 16px; display: grid; grid-template-columns: repeat(4,1fr); gap: 24px; }
.footer-col h4 { font-size: 14px; font-weight: 700; margin-bottom: 12px; color: #333; }
.footer-col ul li { margin-bottom: 6px; }
.footer-col ul li a { font-size: 13px; color: #666; }
.footer-col ul li a:hover { color: #3483fa; text-decoration: underline; }
.footer-bottom { border-top: 1px solid #e6e6e6; padding: 16px; text-align: center; font-size: 12px; color: #999; }

/* ===== SKELETON LOADING ===== */
@keyframes shimmer {
  0%   { background-position: -600px 0; }
  100% { background-position:  600px 0; }
}
.skeleton-box,
.skeleton-line {
  background: linear-gradient(90deg, #e8e8e8 25%, #f5f5f5 50%, #e8e8e8 75%);
  background-size: 600px 100%;
  animation: shimmer 1.4s infinite;
  border-radius: 4px;
}
.skeleton-box { width: 100%; aspect-ratio: 1; }

/* ===== CART BADGE ===== */
.nav-cart { position: relative; display: flex; align-items: center; }
.cart-badge {
  position: absolute; top: -6px; right: -8px;
  background: #3483fa; color: #fff; font-size: 11px; font-weight: 700;
  min-width: 18px; height: 18px; border-radius: 9px; padding: 0 4px;
  display: flex; align-items: center; justify-content: center;
  transform-origin: center;
}
@keyframes badgePop { 0%,100%{ transform:scale(1) } 40%{ transform:scale(1.65) } 70%{ transform:scale(.88) } }
.cart-badge.pop { animation: badgePop .38s ease; }

/* ===== NAV AUTH ===== */
#nav-auth { display: flex; align-items: center; gap: 16px; }

/* Logged-out links */
#nav-auth > a { font-size: 14px; color: #333; white-space: nowrap; }
#nav-auth > a:hover { text-decoration: underline; }

/* Avatar pequeño en el botón del nav */
/* ===== SHARED DROPDOWN BASE ===== */
.nav-dropdown {
  display: none; position: absolute; top: calc(100% + 10px); right: 0;
  background: #fff; border-radius: 12px; border: 1px solid #e6e6e6;
  box-shadow: 0 8px 32px rgba(0,0,0,.16); z-index: 400;
  overflow: hidden;
}
.nav-dropdown::before {
  content: ''; position: absolute; top: -5px; right: 14px;
  width: 10px; height: 10px; background: #fff;
  border-left: 1px solid #e6e6e6; border-top: 1px solid #e6e6e6;
  transform: rotate(45deg); z-index: 1;
}
.nav-dropdown.open { display: block; animation: dropIn .18s ease; }
.notif-dropdown.open, .mc-dropdown.open { display: flex !important; flex-direction: column; animation: dropIn .18s ease; }
@keyframes dropIn { from { opacity: 0; transform: translateY(-8px); } to { opacity: 1; transform: translateY(0); } }

.nav-avatar-sm {
  display: inline-flex; align-items: center; justify-content: center;
  width: 30px; height: 30px; border-radius: 50%; background: #3483fa;
  color: #fff; font-size: 12px; font-weight: 700; flex-shrink: 0;
}

/* Botón del usuario en el nav */
.nav-user-btn {
  display: flex; align-items: center; gap: 6px; background: none; border: none;
  cursor: pointer; font-size: 14px; color: #333; padding: 4px 10px;
  border-radius: 6px; transition: background .15s; white-space: nowrap;
}
.nav-user-btn:hover { background: rgba(0,0,0,.06); }
.nav-chevron { transition: transform .2s; margin-left: 2px; }
.nav-panel.open ~ * .nav-chevron,
.nav-user-wrap.open .nav-chevron { transform: rotate(180deg); }

/* (nav-overlay deprecated: replaced by dropdown) */


.nav-user-wrap { position: relative; display: inline-flex; align-items: center; }
/* Account dropdown */
.nav-user-drop { width: 240px; }
.nav-drop-header { display: flex; align-items: center; gap: 10px; padding: 14px 16px 12px; border-bottom: 1px solid #f0f0f0; }
.nav-drop-avatar { width: 38px; height: 38px; border-radius: 50%; background: #3483fa; color: #fff; font-size: 13px; font-weight: 700; flex-shrink: 0; display: flex; align-items: center; justify-content: center; }
.nav-panel-info { flex: 1; min-width: 0; }
.nav-panel-info strong { display: block; font-size: 14px; font-weight: 700; color: #333; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.nav-panel-info span  { font-size: 12px; color: #999; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; display: block; }
.nav-panel-body { padding: 6px 0; }
.nav-panel-item { display: flex; align-items: center; gap: 12px; padding: 10px 16px; font-size: 14px; color: #333; transition: background .1s, color .1s; }
.nav-panel-item svg { flex-shrink: 0; color: #666; transition: color .1s; }
.nav-panel-item:hover { background: #f5f8ff; color: #3483fa; }
.nav-panel-item:hover svg { color: #3483fa; }
.nav-panel-sep { height: 1px; background: #f0f0f0; margin: 4px 0; }
.nav-panel-logout { color: #c0392b !important; }
.nav-panel-logout svg { color: #c0392b !important; }
.nav-panel-logout:hover { background: #fff5f5 !important; }

/* ===== BACK TO TOP ===== */
.back-to-top {
  position: fixed; bottom: 24px; right: 24px; width: 40px; height: 40px;
  border-radius: 50%; background: #3483fa; color: #fff; border: none;
  cursor: pointer; display: flex; align-items: center; justify-content: center;
  box-shadow: 0 2px 8px rgba(0,0,0,.2); opacity: 0; pointer-events: none;
  transition: opacity .2s, transform .2s; z-index: 200;
}
.back-to-top.visible { opacity: 1; pointer-events: auto; }
.back-to-top:hover { transform: translateY(-2px); }

/* ===== TOAST ===== */
.toast {
  position: fixed; bottom: 24px; left: 50%; transform: translateX(-50%) translateY(80px);
  background: #333; color: #fff; padding: 11px 20px; border-radius: 8px;
  font-size: 14px; font-weight: 500; z-index: 9000; opacity: 0;
  transition: transform .25s cubic-bezier(.34,1.56,.64,1), opacity .25s; pointer-events: none;
  display: flex; align-items: center; gap: 10px;
  max-width: 360px; box-shadow: 0 4px 16px rgba(0,0,0,.22);
}
.toast.show { transform: translateX(-50%) translateY(0); opacity: 1; }
.toast-success { background: #27ae60; }
.toast-error   { background: #e74c3c; }
.toast-cart    { background: #3483fa; }
.toast-info    { background: #333; }

/* ===== ORDER DETAIL MODAL ===== */
.od-overlay {
  display: none; position: fixed; inset: 0; background: rgba(0,0,0,.45);
  z-index: 1000; opacity: 0; transition: opacity .22s;
}
.od-overlay.open { display: block; opacity: 1; }
.od-panel {
  position: fixed; top: 0; right: 0; bottom: 0; width: 420px; max-width: 100vw;
  background: #fff; z-index: 1100; display: flex; flex-direction: column;
  box-shadow: -6px 0 32px rgba(0,0,0,.18);
  transform: translateX(100%); transition: transform .28s ease;
}
.od-panel.open { transform: translateX(0); }
.od-header {
  display: flex; align-items: center; justify-content: space-between;
  padding: 18px 20px; border-bottom: 1px solid #f0f0f0; flex-shrink: 0;
}
.od-header h3 { font-size: 16px; font-weight: 700; color: #333; }
.od-header-meta { font-size: 12px; color: #999; margin-top: 2px; }
.od-close {
  background: none; border: none; font-size: 26px; cursor: pointer;
  color: #aaa; line-height: 1; padding: 0 4px;
}
.od-close:hover { color: #333; }
.od-body { flex: 1; overflow-y: auto; padding: 16px 20px; }
.od-line {
  display: flex; align-items: flex-start; gap: 12px;
  padding: 12px 0; border-bottom: 1px solid #f5f5f5;
}
.od-line:last-child { border-bottom: none; }
.od-line-info { flex: 1; min-width: 0; }
.od-line-title { font-size: 14px; color: #333; line-height: 1.4; margin-bottom: 2px; }
.od-line-sku { font-size: 12px; color: #aaa; }
.od-line-qty { font-size: 13px; color: #666; flex-shrink: 0; }
.od-line-price { font-size: 14px; font-weight: 600; color: #333; flex-shrink: 0; min-width: 80px; text-align: right; }
.od-footer {
  border-top: 1px solid #f0f0f0; padding: 16px 20px; flex-shrink: 0; background: #fafafa;
}
.od-footer-total { display: flex; justify-content: space-between; align-items: center; margin-bottom: 14px; }
.od-footer-total span:first-child { font-size: 14px; color: #555; }
.od-footer-total span:last-child { font-size: 20px; font-weight: 700; color: #333; }
.od-footer-state { display: inline-block; font-size: 12px; font-weight: 700; padding: 4px 12px; border-radius: 12px; background: #f5f5f5; color: #888; margin-bottom: 14px; }
.od-btn-wa {
  display: flex; align-items: center; justify-content: center; gap: 8px;
  width: 100%; padding: 13px; background: #25d366; color: #fff;
  border: none; border-radius: 8px; font-size: 15px; font-weight: 700; cursor: pointer;
}
.od-btn-wa:hover { background: #1da851; }

/* ===== AUTOCOMPLETE ===== */
.search-form { position: relative; }
.autocomplete-dropdown {
  display: none; position: absolute; top: 100%; left: 0; right: 0;
  background: #fff; border: 1px solid #ddd; border-top: none;
  border-radius: 0 0 8px 8px; box-shadow: 0 6px 16px rgba(0,0,0,.1);
  z-index: 500; max-height: 360px; overflow-y: auto;
}
.ac-item {
  display: flex; align-items: center; gap: 10px; padding: 10px 14px;
  color: #333; border-bottom: 1px solid #f5f5f5; transition: background .1s;
}
.ac-item:hover { background: #f8f9fa; }
.ac-item-info { flex: 1; min-width: 0; }
.ac-item-title { font-size: 13px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ac-item-price { font-size: 13px; font-weight: 600; color: #333; margin-top: 2px; }
.ac-all {
  display: block; text-align: center; padding: 10px; font-size: 13px;
  color: #3483fa; font-weight: 600; border-top: 1px solid #f0f0f0;
}
.ac-all:hover { background: #f0f7ff; }

/* ===== LOAD MORE ===== */
.load-more-btn {
  display: inline-block; padding: 12px 32px; background: #fff;
  border: 1px solid #3483fa; color: #3483fa; border-radius: 6px;
  font-size: 15px; font-weight: 600; cursor: pointer; transition: background .15s;
}
.load-more-btn:hover { background: #f0f7ff; }
.load-more-btn:disabled { opacity: .6; cursor: not-allowed; }

/* ===== FAVORITE BUTTON ===== */
.card-img { position: relative; }
.btn-fav {
  position: absolute; top: 8px; right: 8px;
  background: rgba(255,255,255,.85); border: none; border-radius: 50%;
  width: 32px; height: 32px; display: flex; align-items: center; justify-content: center;
  cursor: pointer; color: #ccc; transition: color .15s, background .15s;
  backdrop-filter: blur(4px); z-index: 2;
}
.btn-fav:hover, .btn-fav.active { color: #e74c3c; background: #fff; }

/* Favorite button on result-card */
.result-card { position: relative; }
.result-fav {
  position: absolute; top: 12px; right: 12px;
}

/* ===== CARD QUICK-ADD BUTTON ===== */
.product-card { position: relative; display: flex; flex-direction: column; }
.card-add-btn {
  display: none; position: absolute; bottom: 0; left: 0; right: 0;
  padding: 10px; background: #3483fa; color: #fff; border: none;
  font-size: 13px; font-weight: 600; cursor: pointer; text-align: center;
  border-radius: 0 0 8px 8px; transition: background .15s;
}
.product-card:hover .card-add-btn { display: block; }
.card-add-btn:hover { background: #2968c8; }

/* ===== SHARE BUTTON ===== */
.btn-share {
  display: inline-flex; align-items: center; gap: 6px;
  margin-top: 10px; padding: 9px 16px; background: none;
  border: 1px solid #ddd; border-radius: 6px; font-size: 13px; color: #555;
  cursor: pointer; transition: border-color .15s, color .15s;
}
.btn-share:hover { border-color: #3483fa; color: #3483fa; }

/* ===== QTY CONTROL ===== */
.qty-btn {
  background: #f5f5f5; border: none; width: 36px; height: 36px;
  font-size: 20px; cursor: pointer; color: #555; transition: background .1s;
  display: flex; align-items: center; justify-content: center;
}
.qty-btn:hover { background: #e8e8e8; }
.qty-val {
  border: none; width: 48px; height: 36px; text-align: center;
  font-size: 15px; -moz-appearance: textfield;
}
.qty-val::-webkit-outer-spin-button,
.qty-val::-webkit-inner-spin-button { -webkit-appearance: none; }

/* ===== FAVORITES NAV BADGE ===== */
.nav-icon-btn { position: relative; display: inline-flex; align-items: center; }
.fav-badge {
  position: absolute; top: -6px; right: -8px;
  background: #e74c3c; color: #fff; font-size: 10px; font-weight: 700;
  min-width: 16px; height: 16px; border-radius: 8px; padding: 0 3px;
  display: flex; align-items: center; justify-content: center;
}

/* ===== TOP PROGRESS BAR ===== */
#nprogress {
  position: fixed; top: 0; left: 0; right: 0; height: 3px;
  background: #3483fa; z-index: 9999;
  transition: width .3s ease; pointer-events: none;
}

/* ===== SEARCH HIGHLIGHT ===== */
mark.hl { background: #fff176; color: #333; padding: 0 1px; border-radius: 2px; font-style: normal; font-weight: inherit; }

/* ===== CART PAGE EXTRAS ===== */
.btn-clear-cart {
  background: none; border: none; color: #c0392b; font-size: 12px; font-weight: 600;
  cursor: pointer; padding: 4px 8px; border-radius: 4px; transition: background .15s;
}
.btn-clear-cart:hover { background: #fdf0ef; }
.cart-item-title { font-size: 14px; color: #333; margin-bottom: 4px; line-height: 1.4; display: block; }
.cart-item-title:hover { color: #3483fa; }
.cart-action-row { display: flex; gap: 8px; margin-bottom: 10px; }
.btn-cart-action {
  flex: 1; display: flex; align-items: center; justify-content: center; gap: 6px;
  padding: 9px 8px; background: #f5f8ff; border: 1px solid #dde8ff; border-radius: 6px;
  font-size: 12px; font-weight: 600; color: #3483fa; cursor: pointer; transition: background .15s;
}
.btn-cart-action:hover { background: #e8f0ff; border-color: #3483fa; }

/* ===== IMAGE ZOOM OVERLAY ===== */
.img-zoom-overlay {
  display: none; position: fixed; inset: 0; background: rgba(0,0,0,.85);
  z-index: 1000; align-items: center; justify-content: center; cursor: zoom-out;
}
.img-zoom-overlay.open { display: flex; }
.img-zoom-overlay img { max-width: 90vw; max-height: 90vh; object-fit: contain; border-radius: 4px; }
.img-zoom-close {
  position: absolute; top: 16px; right: 20px; background: none; border: none;
  color: #fff; font-size: 32px; cursor: pointer; line-height: 1; opacity: .7;
}
.img-zoom-close:hover { opacity: 1; }

/* ===== GALLERY ZOOM HINT ===== */
.gallery-main { cursor: zoom-in; }

/* ===== STICKY MOBILE BUY BOX ===== */
.pdp-sticky-buy {
  display: none; position: fixed; bottom: 0; left: 0; right: 0;
  background: #fff; border-top: 1px solid #e0e0e0; padding: 10px 16px;
  box-shadow: 0 -4px 12px rgba(0,0,0,.1); z-index: 200;
  gap: 8px; align-items: center;
}
.pdp-sticky-price { font-size: 20px; font-weight: 300; color: #333; flex: 1; }
.pdp-sticky-btn {
  padding: 12px 20px; background: #3483fa; color: #fff; border: none;
  border-radius: 6px; font-size: 15px; font-weight: 600; cursor: pointer;
}
.pdp-sticky-btn:hover { background: #2968c8; }
@media (max-width: 768px) {
  .pdp-sticky-buy { display: flex; }
  body { padding-bottom: 70px; }
}

/* ===== NO RESULTS STATE ===== */
.no-results {
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  padding: 60px 20px; text-align: center; background: #fff; border-radius: 8px;
}
.no-results-icon { font-size: 56px; margin-bottom: 16px; opacity: .5; }
.no-results h3 { font-size: 20px; font-weight: 600; color: #333; margin-bottom: 8px; }
.no-results p { font-size: 14px; color: #888; margin-bottom: 20px; }
.no-results a { color: #3483fa; font-size: 14px; font-weight: 600; }
.no-results a:hover { text-decoration: underline; }

/* ===== SKELETON RESULT CARD ===== */
.skeleton-result {
  background: #fff; border-radius: 8px; padding: 16px; display: flex;
  gap: 16px; border: 1px solid #e6e6e6;
}
.skeleton-result .sk-img { width: 180px; height: 180px; flex-shrink: 0; border-radius: 6px; }
.skeleton-result .sk-body { flex: 1; display: flex; flex-direction: column; gap: 10px; padding-top: 4px; }
.skeleton-result .sk-title { height: 16px; border-radius: 4px; }
.skeleton-result .sk-title.wide { width: 85%; }
.skeleton-result .sk-title.mid { width: 60%; }
.skeleton-result .sk-price { height: 28px; width: 120px; border-radius: 4px; }
.skeleton-result .sk-ship { height: 14px; width: 100px; border-radius: 4px; }

/* ===== INFINITE SCROLL SPINNER ===== */
@keyframes spin { to { transform: rotate(360deg); } }
.load-spinner {
  width: 28px; height: 28px; border: 3px solid #e8e8e8; border-top-color: #3483fa;
  border-radius: 50%; animation: spin .7s linear infinite; margin: 16px auto;
}

/* ===== PRICE FREE INPUTS ===== */
.price-input-free {
  flex: 1; min-width: 0; border: 1px solid #e0e0e0; border-radius: 4px;
  padding: 6px 8px; font-size: 13px; color: #333; outline: none;
}
.price-input-free:focus { border-color: #3483fa; }
.price-free-btn {
  display: block; width: 100%; padding: 8px; background: #3483fa; color: #fff;
  border: none; border-radius: 4px; font-size: 13px; font-weight: 600; cursor: pointer; margin-top: 8px;
}
.price-free-btn:hover { background: #2968c8; }

/* ===== FAVORITES PAGE ===== */
.fav-page-header {
  display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 12px; margin-bottom: 20px;
}
.fav-count-label { font-size: 18px; font-weight: 400; color: #999; }
.fav-toolbar {
  display: flex; align-items: center; gap: 10px;
}
.fav-tool-btn {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 8px 14px; border-radius: 6px; font-size: 13px; font-weight: 600;
  cursor: pointer; border: 1px solid #ddd; background: #fff; color: #555;
  transition: background .15s, border-color .15s, color .15s;
}
.fav-tool-btn:hover { background: #f0f7ff; border-color: #3483fa; color: #3483fa; }
.fav-tool-clear:hover { background: #fff5f5; border-color: #e74c3c; color: #e74c3c; }
.fav-card-wrap { display: flex; flex-direction: column; }
.fav-card-wrap .product-card { flex: 1; }
@keyframes favCardOut { to { opacity: 0; transform: scale(.82); } }
.fav-card-out { animation: favCardOut .32s ease forwards; pointer-events: none; }

/* ===== SHORTCUTS MODAL ===== */
.shortcuts-overlay {
  display: none; position: fixed; inset: 0; background: rgba(0,0,0,.45);
  z-index: 1200; align-items: center; justify-content: center;
}
.shortcuts-overlay.open { display: flex; }
.shortcuts-panel {
  background: #fff; border-radius: 12px; width: 400px; max-width: calc(100vw - 32px);
  box-shadow: 0 8px 40px rgba(0,0,0,.22); overflow: hidden;
}
.shortcuts-header {
  display: flex; align-items: center; justify-content: space-between;
  padding: 16px 20px; border-bottom: 1px solid #f0f0f0;
}
.shortcuts-header h3 { font-size: 16px; font-weight: 700; color: #333; }
.shortcuts-close {
  background: none; border: none; cursor: pointer; color: #aaa; padding: 4px;
  display: flex; align-items: center; border-radius: 4px;
}
.shortcuts-close:hover { color: #333; background: #f5f5f5; }
.shortcuts-body { padding: 16px 20px 20px; }
.shortcuts-section { font-size: 11px; font-weight: 700; color: #aaa; text-transform: uppercase; letter-spacing: .5px; margin-bottom: 8px; }
.shortcuts-table { width: 100%; border-collapse: collapse; }
.shortcuts-table tr td { padding: 6px 0; font-size: 14px; color: #555; vertical-align: middle; }
.shortcuts-table tr td:first-child { width: 100px; }
kbd {
  display: inline-flex; align-items: center; justify-content: center;
  min-width: 24px; height: 22px; padding: 0 6px;
  background: #f5f5f5; border: 1px solid #d0d0d0; border-bottom-width: 2px;
  border-radius: 4px; font-size: 12px; font-family: monospace; color: #444;
  margin-right: 2px;
}

/* ===== RESPONSIVE ===== */
/* ===== RESPONSIVE ===== */
@media (max-width: 1024px) {
  .product-grid { grid-template-columns: repeat(4,1fr); }
  .quick-cats-grid { grid-template-columns: repeat(4,1fr); }
  .pdp-gallery { width: 42%; }
  /* pdp-below-grid ya es block */
}

@media (max-width: 768px) {
  .hero-image { display: none; }
  .hero-slide { min-height: 180px; padding: 20px 16px; }
  .hero-title { font-size: 22px; }
  .hero-arrow { width: 30px; height: 30px; font-size: 18px; }
  .hero-prev { left: 6px; }
  .hero-next { right: 6px; }
  .product-grid { grid-template-columns: repeat(2,1fr); }
  .quick-cats-grid { grid-template-columns: repeat(4,1fr); }
  .footer-inner { grid-template-columns: repeat(2,1fr); }
  .pdp-main { flex-direction: column; }
  .pdp-gallery { width: 100%; }
  .pdp-buy-box { width: 100%; flex: none; }
  /* pdp-below-grid ya es block */
  /* search layout handled in mobile block below */
  .cat-nav li:not(:first-child):not(:nth-child(2)) { display: none; }
  .pdp-title { font-size: 18px; }
}

/* Botón filtros — oculto en desktop, visible en mobile */
.btn-filters-toggle {
  display: none; align-items: center; gap: 6px;
  background: #fff; border: 1px solid #e0e0e0; border-radius: 6px;
  padding: 7px 14px; font-size: 13px; font-weight: 600; color: #333; cursor: pointer;
}
.btn-filters-toggle:hover { background: #f5f5f5; }
@media (max-width: 768px) {
  .btn-filters-toggle { display: inline-flex; }
  .search-layout { flex-direction: column; }
  .filters-sidebar {
    position: fixed; top: 0; left: -300px; bottom: 0; width: 280px;
    background: #fff; z-index: 600; overflow-y: auto;
    box-shadow: 4px 0 24px rgba(0,0,0,.15);
    transition: left .25s cubic-bezier(.4,0,.2,1);
  }
  .filters-sidebar.open { left: 0; }
  .sidebar-close-btn { display: block; }
}

/* ===== MINI-CART DRAWER ===== */
.mc-wrap { position: relative; display: inline-flex; align-items: center; }
.mc-dropdown { width: 380px; max-height: 520px; }
.mc-header { display: flex; align-items: center; justify-content: space-between; padding: 12px 16px; border-bottom: 1px solid #f0f0f0; flex-shrink: 0; }
.mc-header h3 { font-size: 15px; font-weight: 700; }
.mc-body { flex: 1; overflow-y: auto; min-height: 0; }
.mc-item {
  display: flex; gap: 12px; padding: 14px 16px; border-bottom: 1px solid #f5f5f5;
}
.mc-item-img {
  width: 64px; height: 64px; flex-shrink: 0; border-radius: 6px;
  background: #f5f5f5; overflow: hidden; display: flex; align-items: center; justify-content: center;
}
.mc-item-info { flex: 1; min-width: 0; }
.mc-item-title { font-size: 13px; color: #333; line-height: 1.4; margin-bottom: 6px;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.mc-item-title a { color: #333; }
.mc-item-title a:hover { color: #3483fa; }
.mc-item-sub { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.mc-item-qty-ctrl { display: flex; align-items: center; gap: 6px; }
.mc-qty-btn {
  background: #f0f0f0; border: none; width: 24px; height: 24px; border-radius: 4px;
  font-size: 16px; cursor: pointer; display: flex; align-items: center; justify-content: center;
}
.mc-qty-btn:hover { background: #e0e0e0; }
.mc-item-qty-ctrl span { font-size: 14px; min-width: 20px; text-align: center; }
.mc-item-price { font-size: 15px; font-weight: 600; }
.mc-remove { background: none; border: none; color: #c0392b; font-size: 11px; cursor: pointer; padding: 0; margin-top: 5px; }
.mc-remove:hover { text-decoration: underline; }
.mc-empty { display: flex; flex-direction: column; align-items: center; gap: 12px; padding: 48px 20px; color: #aaa; }
.mc-empty p { font-size: 15px; }
.mc-empty a { color: #3483fa; font-size: 14px; font-weight: 600; }
.mc-footer { padding: 16px; border-top: 1px solid #f0f0f0; flex-shrink: 0; }
.mc-total-row { display: flex; justify-content: space-between; font-size: 16px; font-weight: 700; margin-bottom: 14px; }
.mc-btn-wa {
  display: flex; align-items: center; justify-content: center; gap: 8px;
  width: 100%; padding: 13px; background: #25d366; color: #fff; border: none;
  border-radius: 6px; font-size: 14px; font-weight: 700; cursor: pointer; margin-bottom: 8px;
}
.mc-btn-wa:hover { background: #20b858; }
.mc-btn-go {
  display: block; text-align: center; width: 100%; padding: 12px;
  background: #f5f5f5; color: #3483fa; border-radius: 6px; font-size: 14px; font-weight: 600;
}
.mc-btn-go:hover { background: #e8e8e8; }
@media (max-width: 600px) { .mc-dropdown { width: 100vw; max-height: 70vh; border-radius: 16px 16px 0 0; position: fixed !important; top: auto !important; bottom: 0; right: 0; left: 0; } .notif-dropdown { width: 100vw; max-height: 70vh; border-radius: 16px 16px 0 0; position: fixed !important; top: auto !important; bottom: 0; right: 0; left: 0; } .nav-dropdown::before { display: none; } }

/* ===== PDP SKELETON ===== */
.pdp-sk-img { width: 100%; aspect-ratio: 1; border-radius: 8px; }
.pdp-sk-title { height: 28px; width: 80%; margin-bottom: 10px; border-radius: 4px; }
.pdp-sk-line { height: 16px; border-radius: 4px; margin-bottom: 8px; }
.pdp-sk-price { height: 40px; width: 140px; border-radius: 4px; margin: 12px 0; }
.pdp-sk-btn { height: 48px; border-radius: 6px; margin-bottom: 10px; }

/* ===== PRODUCT PAGE EXTRA ACTIONS ===== */
.btn-wa-product {
  display: flex; align-items: center; justify-content: center; gap: 8px;
  width: 100%; padding: 12px; background: #25d366; color: #fff; border: none;
  border-radius: 6px; font-size: 14px; font-weight: 700; cursor: pointer;
  margin-top: 8px; transition: background .15s;
}
.btn-wa-product:hover { background: #20b858; }

.sku-copy-btn {
  background: none; border: none; cursor: pointer; padding: 2px 6px;
  color: #aaa; border-radius: 4px; font-size: 11px; transition: color .15s, background .15s;
  display: inline-flex; align-items: center; gap: 3px;
}
.sku-copy-btn:hover { color: #3483fa; background: #e8f0fe; }
.sku-copy-btn.copied { color: #00a650; }

/* ===== VIEW TOGGLE ===== */
.view-toggle { display: flex; border: 1px solid #e0e0e0; border-radius: 6px; overflow: hidden; }
.view-btn { background: #fff; border: none; padding: 7px 10px; cursor: pointer; color: #aaa; display: flex; align-items: center; transition: background .15s, color .15s; }
.view-btn:hover { background: #f5f5f5; color: #555; }
.view-btn.active { background: #3483fa; color: #fff; }

/* ===== AUTOCOMPLETE RECIENTES ===== */
.ac-section-label { font-size: 11px; font-weight: 700; color: #aaa; text-transform: uppercase; padding: 10px 14px 4px; letter-spacing: .5px; }
.ac-recent { align-items: center; }
.ac-recent-del { background: none; border: none; color: #ccc; font-size: 18px; cursor: pointer; padding: 0 4px; line-height: 1; margin-left: auto; }
.ac-recent-del:hover { color: #e74c3c; }
.ac-clear-recent { display: block; width: 100%; text-align: center; padding: 8px; font-size: 12px; color: #e74c3c; background: none; border: none; border-top: 1px solid #f0f0f0; cursor: pointer; }
.ac-clear-recent:hover { background: #fff5f5; }

/* ===== HEADER AUTO-HIDE ===== */
.header { transition: transform .3s ease; }
.header.header-hidden { transform: translateY(-100%); }

/* ===== WHATSAPP FLOAT ===== */
#wa-float {
  position: fixed; bottom: 76px; right: 24px; width: 52px; height: 52px;
  border-radius: 50%; background: #25d366; color: #fff;
  display: flex; align-items: center; justify-content: center;
  box-shadow: 0 4px 12px rgba(37,211,102,.5); z-index: 199;
  transition: transform .2s, box-shadow .2s;
}
#wa-float:hover { transform: scale(1.08); box-shadow: 0 6px 18px rgba(37,211,102,.6); }

/* ===== AUTOCOMPLETE KEYBOARD HIGHLIGHT ===== */
.ac-item.ac-active, .ac-all.ac-active { background: #f0f7ff; }

/* ===== HEADER AUTO-HIDE ===== */
.header { transition: transform .3s ease; }
.header.header-hidden { transform: translateY(-100%); }

/* ===== VIEW TOGGLE ===== */
.view-toggle { display: flex; border: 1px solid #e0e0e0; border-radius: 6px; overflow: hidden; }
.view-btn { background: #fff; border: none; padding: 7px 10px; cursor: pointer; color: #aaa; display: flex; align-items: center; transition: background .15s, color .15s; }
.view-btn:hover { background: #f5f5f5; color: #555; }
.view-btn.active { background: #3483fa; color: #fff; }

/* ===== AUTOCOMPLETE RECIENTES ===== */
.ac-section-label { font-size: 11px; font-weight: 700; color: #aaa; text-transform: uppercase; padding: 10px 14px 4px; letter-spacing: .5px; }
.ac-recent { align-items: center; }
.ac-recent-del { background: none; border: none; color: #ccc; font-size: 18px; cursor: pointer; padding: 0 4px; line-height: 1; margin-left: auto; }
.ac-recent-del:hover { color: #e74c3c; }
.ac-clear-recent { display: block; width: 100%; text-align: center; padding: 8px; font-size: 12px; color: #e74c3c; background: none; border: none; border-top: 1px solid #f0f0f0; cursor: pointer; }
.ac-clear-recent:hover { background: #fff5f5; }

/* ===== RECENTLY VIEWED ===== */
.history-section { background: #fff; margin-bottom: 12px; padding: 20px 0 24px; }

/* ===== SIDEBAR HISTORY (search) ===== */
.sidebar-hist-item { display: flex; align-items: center; gap: 10px; padding: 8px 0; border-bottom: 1px solid #f5f5f5; text-decoration: none; }
.sidebar-hist-item:last-child { border-bottom: none; }
.sidebar-hist-item:hover .sidebar-hist-title { color: #3483fa; }
.sidebar-hist-img { width: 44px; height: 44px; border-radius: 6px; background: #f5f5f5; flex-shrink: 0; overflow: hidden; display: flex; align-items: center; justify-content: center; }
.sidebar-hist-img img { width: 100%; height: 100%; object-fit: contain; }
.sidebar-hist-info { flex: 1; min-width: 0; }
.sidebar-hist-title { font-size: 12px; color: #333; line-height: 1.4; transition: color .1s; }
.sidebar-hist-price { font-size: 13px; font-weight: 600; color: #333; margin-top: 2px; }

/* ===== STAR RATINGS ===== */
.prod-stars { color: #f39c12; font-size: 13px; letter-spacing: .5px; }
.prod-rating-val { font-size: 12px; font-weight: 700; color: #f39c12; margin-left: 4px; }
.prod-rating-count { font-size: 11px; color: #aaa; margin-left: 2px; }
.card-rating { display: flex; align-items: center; gap: 0; margin: 2px 0 4px; }
.result-rating { display: flex; align-items: center; gap: 0; margin-bottom: 6px; }
.pdp-rating { display: flex; align-items: center; gap: 0; margin-bottom: 12px; }
.pdp-rating .prod-stars { font-size: 18px; }
.pdp-rating .prod-rating-val { font-size: 14px; }
.pdp-rating .prod-rating-count { font-size: 13px; }

/* ===== PDP TABS ===== */
.pdp-tabs-block { grid-column: 1 / -1; background: #fff; border-radius: 8px; border: 1px solid #e6e6e6; overflow: hidden; }
.pdp-tabs { display: flex; border-bottom: 1px solid #e6e6e6; }
.pdp-tab { flex: 1; padding: 14px 20px; background: none; border: none; border-bottom: 3px solid transparent; font-size: 14px; font-weight: 600; color: #888; cursor: pointer; transition: color .15s, border-color .15s; white-space: nowrap; }
.pdp-tab.active { color: #3483fa; border-bottom-color: #3483fa; }
.pdp-tab:hover:not(.active) { color: #555; background: #fafafa; }
.pdp-tab-pane { padding: 20px 24px; display: none; }
.pdp-tab-pane.active { display: block; }
.pdp-no-desc { color: #bbb; font-size: 14px; text-align: center; padding: 20px 0; }
.pdp-shipping-info { display: flex; flex-direction: column; gap: 16px; }
.psi-row { display: flex; align-items: flex-start; gap: 14px; }
.psi-row div { flex: 1; }
.psi-row strong { font-size: 14px; color: #333; display: block; margin-bottom: 3px; }
.psi-row p { font-size: 13px; color: #777; line-height: 1.5; }

/* ===== CART SAVE FOR LATER ===== */
.cart-item-btns { display: flex; gap: 12px; align-items: center; }
.btn-save-later { background: none; border: none; color: #3483fa; font-size: 12px; cursor: pointer; text-decoration: underline; padding: 0; white-space: nowrap; }
.btn-save-later:hover { color: #1a5cad; }

/* ===== FILTER ACTIVE BADGE ===== */
.filter-active-badge { display: inline-flex; align-items: center; justify-content: center; background: #3483fa; color: #fff; font-size: 11px; font-weight: 700; width: 18px; height: 18px; border-radius: 50%; margin-right: 6px; line-height: 1; }

/* ===== FEATURED BRANDS ===== */
.brands-section { background: #fff; padding: 14px 0; border-bottom: 1px solid #f0f0f0; }
.brands-strip { display: flex; gap: 8px; overflow-x: auto; padding-bottom: 2px; scrollbar-width: none; -ms-overflow-style: none; }
.brands-strip::-webkit-scrollbar { display: none; }
.brand-chip { display: inline-flex; align-items: center; padding: 7px 16px; background: #f8f8f8; border-radius: 20px; font-size: 13px; font-weight: 600; color: #444; white-space: nowrap; border: 1px solid #e8e8e8; transition: background .15s, color .15s, border-color .15s; flex-shrink: 0; }
.brand-chip:hover { background: #eef4ff; color: #3483fa; border-color: #c0d5ff; }

/* ===== CARD BADGES ===== */
.card-img { position: relative; }
.card-badge { position: absolute; top: 8px; left: 8px; font-size: 10px; font-weight: 700; letter-spacing: .4px; text-transform: uppercase; padding: 3px 7px; border-radius: 4px; pointer-events: none; z-index: 2; line-height: 1.3; }
.card-badge-hot { background: #e74c3c; color: #fff; }
.card-badge-new { background: #27ae60; color: #fff; }

/* ===== NOTIFICATION PANEL ===== */
.notif-badge { position: absolute; top: -4px; right: -6px; background: #e74c3c; color: #fff; font-size: 10px; font-weight: 700; width: 17px; height: 17px; border-radius: 50%; display: flex; align-items: center; justify-content: center; pointer-events: none; }
.notif-wrap { position: relative; display: inline-flex; align-items: center; }
.notif-dropdown { width: 360px; max-height: 480px; }
.notif-drop-header { display: flex; align-items: center; justify-content: space-between; padding: 12px 16px; border-bottom: 1px solid #f0f0f0; flex-shrink: 0; }
.notif-drop-header h3 { font-size: 15px; font-weight: 700; color: #333; }
.notif-mark-all { background: none; border: 1px solid #3483fa; color: #3483fa; border-radius: 20px; font-size: 12px; padding: 4px 12px; cursor: pointer; white-space: nowrap; transition: background .15s; }
.notif-mark-all:hover { background: #eef4ff; }
.notif-close-btn { background: none; border: none; cursor: pointer; color: #999; display: flex; padding: 4px; border-radius: 50%; transition: background .15s; }
.notif-close-btn:hover { background: #f5f5f5; color: #333; }
.notif-body { flex: 1; overflow-y: auto; padding: 8px 0; }
.notif-item { display: flex; align-items: flex-start; gap: 12px; padding: 14px 18px; cursor: pointer; transition: background .12s; border-bottom: 1px solid #f5f5f5; }
.notif-item:last-child { border-bottom: none; }
.notif-item:hover { background: #f8f9fc; }
.notif-unread { background: #f0f7ff; }
.notif-unread:hover { background: #e4f0ff; }
.notif-icon-wrap { flex-shrink: 0; width: 36px; height: 36px; border-radius: 50%; display: flex; align-items: center; justify-content: center; }
.notif-text { flex: 1; min-width: 0; }
.notif-title { font-size: 13px; font-weight: 600; color: #333; line-height: 1.35; margin-bottom: 3px; }
.notif-desc { font-size: 12px; color: #666; line-height: 1.45; }
.notif-time { font-size: 11px; color: #aaa; margin-top: 4px; }
.notif-x { flex-shrink: 0; background: none; border: none; font-size: 18px; color: #ccc; cursor: pointer; line-height: 1; padding: 2px 4px; border-radius: 4px; transition: color .12s, background .12s; align-self: center; }
.notif-x:hover { color: #e74c3c; background: #fff5f5; }
.notif-empty { display: flex; flex-direction: column; align-items: center; padding: 48px 24px; color: #bbb; gap: 12px; }
.notif-empty p { font-size: 14px; }

/* ===== COOKIE CONSENT ===== */
.cookie-banner { position: fixed; bottom: 0; left: 0; right: 0; background: #222; color: #eee; font-size: 13px; padding: 14px 20px; display: flex; align-items: center; flex-wrap: wrap; gap: 12px; z-index: 1100; }
.cookie-banner p { flex: 1; min-width: 200px; line-height: 1.5; }
.cookie-banner a { color: #3483fa; text-decoration: underline; }
.cookie-ok-btn { background: #3483fa; color: #fff; border: none; border-radius: 6px; padding: 8px 20px; font-size: 13px; font-weight: 600; cursor: pointer; white-space: nowrap; }
.cookie-ok-btn:hover { background: #1a6de8; }

/* ===== PRINT (cotización) ===== */
@media print {
  .header, .footer, .cat-nav, .search-form, .wa-float, #wa-float,
  .btn-whatsapp, .cart-action-row, .btn-continue, .cart-suggestions,
  .notif-panel, .notif-overlay, .shortcuts-overlay, .header-scroll,
  .mini-cart-overlay, .mini-cart, .toast-container,
  .cookie-banner, #btt { display: none !important; }
  body { background: #fff !important; animation: none !important; }
  .cart-layout { display: block !important; }
  .cart-summary { position: static !important; box-shadow: none !important; border: 1px solid #ccc !important; margin-top: 16px; }
  .cart-item { page-break-inside: avoid; }
  .print-header { display: block !important; }
}
.print-header { display: none; margin-bottom: 16px; }
.print-header h2 { font-size: 18px; font-weight: 700; color: #3483fa; }
.print-header p { font-size: 12px; color: #888; margin-top: 4px; }
.btn-print { background: none; border: 1px solid #ccc; color: #555; border-radius: 6px; font-size: 12px; padding: 5px 12px; cursor: pointer; display: flex; align-items: center; gap: 6px; transition: border-color .15s, color .15s; }
.btn-print:hover { border-color: #3483fa; color: #3483fa; }

/* ===== TRUST BAR ===== */
.trust-bar { background: #fff; border-bottom: 1px solid #f0f0f0; padding: 12px 0; margin-bottom: 12px; }
.trust-items { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.trust-item { display: flex; align-items: center; gap: 10px; flex: 1; min-width: 0; }
.trust-item svg { flex-shrink: 0; }
.trust-item div { min-width: 0; }
.trust-item strong { display: block; font-size: 13px; font-weight: 700; color: #333; white-space: nowrap; }
.trust-item span { font-size: 12px; color: #888; white-space: nowrap; }
@media (max-width: 700px) { .trust-items { flex-wrap: wrap; } .trust-item { flex: 1 1 45%; } }
@media (max-width: 420px) { .trust-bar { display: none; } }

/* ===== PROMO TILES ===== */
.ptiles-section { margin-bottom: 12px; }
.ptiles-grid { display: grid; grid-template-columns: 2fr 1fr 1fr; gap: 10px; }
.ptile { border-radius: 12px; padding: 24px 20px; display: flex; align-items: center; justify-content: space-between; overflow: hidden; position: relative; text-decoration: none; transition: transform .15s, box-shadow .15s; min-height: 140px; }
.ptile:hover { transform: translateY(-2px); box-shadow: 0 8px 24px rgba(0,0,0,.15); }
.ptile-blue  { background: linear-gradient(135deg, #3483fa 0%, #1a5cad 100%); }
.ptile-green { background: linear-gradient(135deg, #27ae60 0%, #1a7a43 100%); }
.ptile-orange{ background: linear-gradient(135deg, #e67e22 0%, #b85d10 100%); }
.ptile-body { position: relative; z-index: 1; }
.ptile-tag { font-size: 11px; font-weight: 700; color: rgba(255,255,255,.75); text-transform: uppercase; letter-spacing: 1px; margin-bottom: 8px; }
.ptile-title { font-size: 20px; font-weight: 700; color: #fff; line-height: 1.25; margin-bottom: 14px; }
.ptile-cta { display: inline-block; background: rgba(255,255,255,.2); color: #fff; font-size: 13px; font-weight: 600; padding: 6px 14px; border-radius: 20px; border: 1px solid rgba(255,255,255,.35); transition: background .15s; }
.ptile:hover .ptile-cta { background: rgba(255,255,255,.3); }
.ptile-deco { position: absolute; right: -10px; bottom: -10px; opacity: 1; }
@media (max-width: 700px) { .ptiles-grid { grid-template-columns: 1fr 1fr; } .ptile:first-child { grid-column: 1 / -1; } }
@media (max-width: 480px) { .ptiles-grid { grid-template-columns: 1fr; } .ptile:first-child { grid-column: auto; } }

/* ===== COUNTDOWN ===== */
.countdown-wrap { display: flex; align-items: center; gap: 5px; margin-top: 4px; color: #e74c3c; font-size: 13px; font-weight: 600; }
.cd-unit { background: #e74c3c; color: #fff; border-radius: 4px; padding: 2px 6px; font-size: 13px; font-weight: 700; min-width: 26px; text-align: center; }
.cd-sep { color: #e74c3c; font-weight: 700; }

/* ===== WHY US ===== */
.why-section { background: #fff; padding: 40px 0 44px; margin-bottom: 12px; }
.why-title { font-size: 22px; font-weight: 700; color: #333; text-align: center; margin-bottom: 28px; }
.why-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 20px; }
.why-card { text-align: center; padding: 24px 16px; border-radius: 12px; background: #fafbff; border: 1px solid #eef0f8; transition: box-shadow .15s, transform .15s; }
.why-card:hover { box-shadow: 0 4px 20px rgba(52,131,250,.1); transform: translateY(-2px); }
.why-icon { width: 60px; height: 60px; border-radius: 50%; display: flex; align-items: center; justify-content: center; margin: 0 auto 14px; }
.why-icon-blue   { background: #e8f0fe; color: #3483fa; }
.why-icon-green  { background: #e8f8ee; color: #27ae60; }
.why-icon-orange { background: #fef3e8; color: #e67e22; }
.why-icon-purple { background: #f3e8fe; color: #8e44ad; }
.why-card h4 { font-size: 15px; font-weight: 700; color: #333; margin-bottom: 8px; }
.why-card p { font-size: 13px; color: #777; line-height: 1.6; }
@media (max-width: 700px) { .why-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 420px) { .why-grid { grid-template-columns: 1fr; } }

/* ===== NEWSLETTER ===== */
.newsletter-section { background: linear-gradient(135deg, #1a3a6b 0%, #3483fa 100%); padding: 40px 0; margin-bottom: 0; }
.newsletter-inner { display: flex; align-items: center; justify-content: space-between; gap: 24px; flex-wrap: wrap; }
.newsletter-text h3 { font-size: 22px; font-weight: 700; color: #fff; margin-bottom: 6px; }
.newsletter-text p { font-size: 14px; color: rgba(255,255,255,.75); }
.newsletter-form { display: flex; gap: 8px; flex-wrap: wrap; }
.newsletter-input { flex: 1; min-width: 220px; padding: 12px 16px; border: none; border-radius: 6px; font-size: 14px; outline: none; }
.newsletter-btn { background: #ffe600; color: #333; border: none; border-radius: 6px; padding: 12px 24px; font-size: 14px; font-weight: 700; cursor: pointer; white-space: nowrap; transition: background .15s; }
.newsletter-btn:hover { background: #f0d800; }
@media (max-width: 600px) { .newsletter-inner { flex-direction: column; align-items: flex-start; } .newsletter-form { width: 100%; } .newsletter-input { min-width: 0; flex: 1; } }

@media (max-width: 480px) {
  .header-top { padding: 8px 0; }
  .logo-img { height: 36px; }
  .search-input { font-size: 14px; padding: 10px 12px; }
  .product-grid { grid-template-columns: repeat(2,1fr); gap: 8px; }
  .quick-cats-grid { grid-template-columns: repeat(4,1fr); gap: 4px; }
  .qcat-icon { width: 42px; height: 42px; }
  .qcat-item span { font-size: 11px; }
  .section-title { font-size: 17px; }
  .hero-title { font-size: 19px; }
  .hero-slide { padding: 16px; }
  .cart-layout { grid-template-columns: 1fr !important; }
  .pdp-gallery { padding: 12px; }
  .footer-inner { grid-template-columns: 1fr 1fr; gap: 16px; }
  .footer-col h4 { font-size: 13px; }
  .header-categories .header-nav { gap: 2px; }
  .nav-icon-btn { padding: 4px; }
}