:root{
  --amazon-navy:#131921;
  --amazon-navy2:#232F3E;
  --amazon-orange:#FF9900;
  --amazon-orange2:#f3a847;
  --bg:#eaeded;
  --card:#ffffff;
  --text:#0f1111;
  --muted:#565959;
  --border:#d5d9d9;
  --link:#007185;
  --ok:#067d62;
  --warn:#b12704;
  --shadow:0 2px 10px rgba(15,17,17,.18);
  --radius:12px;
  --mono: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono","Courier New", monospace;
  --sans: Arial, Helvetica, sans-serif;
}

*{box-sizing:border-box}
html,body{height:100%}
body{margin:0;font-family:var(--sans);color:var(--text);background:var(--bg)}
a{color:inherit;text-decoration:none}
img{max-width:100%;display:block}

/* ===== TOP NAV (top1) ===== */
.top1{background:#fff;color:#fff}
.wrap{max-width:1200px;margin:0 auto;padding:0 14px}
.row{display:flex;align-items:center;gap:14px;min-height:60px}
.brand{display:flex;align-items:center;gap:10px;padding:8px 10px;border-radius:10px}
.brand:hover{outline:1px solid rgba(255,255,255,.35)}
.logo{width:34px;height:34px;border-radius:8px;background:linear-gradient(135deg,var(--amazon-orange),#ffd08a)}
.name{font-weight:700}
.pill{font-size:12px;color:#111;background:var(--amazon-orange);padding:3px 8px;border-radius:999px}

.search{flex:1;display:flex;align-items:center;background:#fff;border-radius:10px;overflow:hidden;min-height:40px}
.search select{border:0;outline:0;background:#f3f3f3;padding:0 10px;height:40px;font-size:13px;color:#111}
.search input{border:0;outline:0;flex:1;padding:0 12px;height:40px;font-size:14px;color:#111}
.search input::placeholder{color:#666}
.search button{border:0;outline:0;background:var(--amazon-orange);height:40px;width:48px;cursor:pointer;font-size:18px}
.search button:hover{background:var(--amazon-orange2)}

.navlinks{display:flex;align-items:center;gap:12px}
.navitem{display:flex;flex-direction:column;line-height:1.1;padding:6px 8px;border-radius:10px}
.navitem:hover{outline:1px solid rgba(255,255,255,.35)}
.navitem small{opacity:.85;font-size:11px}

.cartbtn{display:flex;align-items:center;gap:8px;padding:8px 10px;border-radius:10px;cursor:pointer}
.cartbtn:hover{outline:1px solid rgba(255,255,255,.35)}
.count{display:inline-flex;align-items:center;justify-content:center;min-width:22px;height:18px;border-radius:999px;background:var(--amazon-orange);color:#111;font-weight:700;font-size:12px}

/* ===== SECOND BAR (top2) ===== */
.top2{background:var(--amazon-navy2);color:#fff}
.top2 .row{min-height:46px}
.chip{display:inline-flex;align-items:center;gap:6px;padding:8px 10px;border-radius:999px;font-size:13px}
.chip:hover{background:rgba(255,255,255,.08)}

/* ===== MAIN GRID ===== */
.main{padding:18px 0}
.grid{display:grid;grid-template-columns:340px 1fr;gap:16px;align-items:start}
@media (max-width: 980px){
  .grid{grid-template-columns:1fr}
  .navlinks{display:none}
}

/* ===== MOBILE HEADER — search en segunda fila ===== */
@media (max-width: 640px){
  .top1 .row{flex-wrap:wrap;min-height:auto;padding:8px 0;gap:8px}
  .top1 .search{order:3;width:100%;min-width:0}
  .top1 .brand .name,.top1 .brand .pill{display:none}
}

/* ===== HAMBURGER BUTTON ===== */
.hamburger-btn{
  display:none;
  flex-direction:column;
  justify-content:center;
  align-items:center;
  gap:5px;
  width:40px;height:40px;
  padding:6px;
  background:transparent;
  border:1px solid rgba(255,255,255,.25);
  border-radius:8px;
  cursor:pointer;
  flex-shrink:0;
}
.hamburger-btn:hover{background:rgba(255,255,255,.1)}
.hamburger-line{
  display:block;width:20px;height:2px;
  background:#fff;border-radius:2px;
}
@media(max-width:980px){
  .hamburger-btn{display:flex}
}

/* ===== MOBILE NAV DRAWER ===== */
.nav-drawer-overlay{
  position:fixed;inset:0;
  background:rgba(0,0,0,.55);
  z-index:199;
}
.nav-drawer{
  position:fixed;top:0;left:0;
  width:280px;max-width:85vw;
  height:100vh;height:100dvh;
  background:#fff;
  color:#fff;
  display:flex;flex-direction:column;
  transform:translateX(-100%);
  transition:transform .25s ease;
  z-index:200;
  overflow-y:auto;
  pointer-events:none;
}
.nav-drawer--open{transform:translateX(0);pointer-events:auto}
.nav-drawer-header{
  display:flex;align-items:center;justify-content:space-between;
  padding:16px;
  border-bottom:1px solid rgba(255,255,255,.12);
  flex-shrink:0;
}
.nav-drawer-title{font-weight:700;font-size:15px}
.nav-drawer-close{
  background:transparent;border:none;color:#fff;
  font-size:20px;line-height:1;cursor:pointer;
  padding:4px 8px;border-radius:6px;
}
.nav-drawer-close:hover{background:rgba(255,255,255,.1)}
.nav-drawer-links{
  display:flex;flex-direction:column;
  padding:8px 0;flex:1;
}
.nav-drawer-link{
  display:flex;align-items:center;gap:12px;
  padding:14px 20px;
  font-size:15px;color:#fff;
  background:transparent;border:none;
  text-align:left;width:100%;cursor:pointer;
  text-decoration:none;
}
.nav-drawer-link:hover{background:rgba(255,255,255,.08)}
.nav-drawer-icon{font-size:16px;width:22px;text-align:center;flex-shrink:0}
.nav-drawer-badge{
  margin-left:auto;
  display:inline-flex;align-items:center;justify-content:center;
  min-width:22px;height:18px;border-radius:999px;
  background:var(--amazon-orange);color:#111;
  font-weight:700;font-size:12px;padding:0 4px;
}
.nav-drawer-divider{
  border:none;border-top:1px solid rgba(255,255,255,.12);
  margin:8px 0;
}
.nav-drawer-link--logout{color:rgba(255,255,255,.75)}
.nav-drawer-link--logout:hover{background:rgba(220,50,50,.15);color:#ff8080}

/* Hero/Banner */
.hero{display:grid;grid-template-columns:2fr 1fr;gap:16px;align-items:stretch}
@media (max-width: 980px){.hero{grid-template-columns:1fr}}

.hero .banner{background:linear-gradient(180deg,#fff,rgba(255,255,255,.65));border-radius:var(--radius);box-shadow:var(--shadow);padding:16px}
.hero h1{margin:0 0 6px;font-size:22px}
.hero p{margin:0;color:var(--muted);font-size:13px}
.kpis{display:flex;gap:10px;margin-top:12px;flex-wrap:wrap}
.kpi{background:#fff;border:1px solid var(--border);border-radius:10px;padding:10px 12px;min-width:120px}
.kpi b{display:block;font-size:12px;color:var(--muted)}
.kpi span{display:block;margin-top:4px;font-weight:700}

/* Card */
.card{margin-top:14px;background:var(--card);border:1px solid var(--border);border-radius:var(--radius);box-shadow:var(--shadow);overflow:hidden}
.hd{padding:12px 14px;border-bottom:1px solid var(--border);background:#fafafa}
.bd{padding:14px}

.formrow{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.formrow label{display:block;font-size:12px;color:var(--muted);margin-bottom:6px}
.formrow input, .formrow select{
  width:100%;height:38px;border:1px solid var(--border);border-radius:10px;
  padding:0 10px;outline:none;background:#fff
}
.formrow input:focus, .formrow select:focus{border-color:#b9c3c3;box-shadow:0 0 0 3px rgba(0,113,133,.12)}

.note{font-size:13px;color:var(--muted);line-height:1.35}

/* Slider */
.rangeRow{margin-top:14px}
.rangeRow label{display:block;color:var(--muted);font-size:12px;margin-bottom:8px}
input[type="range"]{width:100%;height:4px}
.rangeMeta{margin-top:10px;color:var(--muted);font-size:13px}

/* Buttons */
.btn{
  height:38px;padding:0 14px;border-radius:999px;border:1px solid var(--border);
  background:#fff;cursor:pointer;font-weight:600
}
.btn:hover{background:#f6f6f6}
.btn.primary{background:var(--amazon-orange);border-color:#d28a00}
.btn.primary:hover{background:var(--amazon-orange2)}
.btn:disabled{opacity:.55;cursor:not-allowed}

/* ===== PRODUCTS LIST ===== */
/* con sidebar (filtros activos) — 4 columnas */
.products{display:grid;grid-template-columns:repeat(4,1fr);gap:14px}
@media (max-width: 1100px){ .products{grid-template-columns:repeat(3,1fr)} }
@media (max-width: 700px){ .products{grid-template-columns:repeat(2,1fr)} }
@media (max-width: 480px){ .products{grid-template-columns:1fr} }

/* sin sidebar (home sin filtros) — 5 columnas ancho completo */
.products-wide{display:grid;grid-template-columns:repeat(4,1fr);gap:16px}
@media (max-width: 900px){  .products-wide{grid-template-columns:repeat(3,1fr)} }
@media (max-width: 600px){  .products-wide{grid-template-columns:repeat(2,1fr)} }

.product{
  background:#fff;border:1px solid var(--border);border-radius:var(--radius);box-shadow:var(--shadow);
  padding:14px;position:relative
}
.img{height:130px;border-radius:10px;background:linear-gradient(135deg,#e9ecef,#f8f9fa);border:1px solid #eef0f2}
.title{margin-top:10px;font-weight:800;font-size:13px;letter-spacing:.3px}
.meta{margin-top:8px;font-size:12px;color:var(--muted)}
.meta b{color:#222}
.price{margin-top:10px;font-size:18px;font-weight:800;color:#111}

.badge{
  position:absolute;top:12px;right:12px;
  font-size:11px;font-weight:800;padding:5px 8px;border-radius:999px
}
.badge.ok{background:#e9f7f2;color:var(--ok);border:1px solid rgba(6,125,98,.25)}
.badge.out{background:#fff1f0;color:var(--warn);border:1px solid rgba(177,39,4,.25)}

/* Pagination */
.pages{display:flex;gap:10px;justify-content:center;margin:18px 0 6px}
.pagebtn{
  height:38px;padding:0 14px;border-radius:999px;border:1px solid var(--border);
  background:#fff;cursor:pointer;font-weight:700
}
.pagebtn.on{background:#f6f6f6}
.pagebtn:disabled{opacity:.55;cursor:not-allowed}


/* ===== AMAZON-LIKE RANGE SLIDER (filled track) ===== */
.rangeRow input[type="range"]{
  -webkit-appearance:none;
  appearance:none;
  width:100%;
  height:6px;
  border-radius:999px;
  background:
    linear-gradient(#007185,#007185) 0/var(--fill,0%) 100% no-repeat,
    #d5d9d9;
  outline:none;
  margin:6px 0 0;
}

/* WebKit track */
.rangeRow input[type="range"]::-webkit-slider-runnable-track{
  height:6px;
  border-radius:999px;
  background:transparent;
}

/* WebKit thumb */
.rangeRow input[type="range"]::-webkit-slider-thumb{
  -webkit-appearance:none;
  appearance:none;
  width:18px;
  height:18px;
  border-radius:50%;
  background:#fff;
  border:2px solid #007185;
  box-shadow:0 1px 3px rgba(0,0,0,.25);
  margin-top:-6px;
  cursor:pointer;
}

/* Firefox track */
.rangeRow input[type="range"]::-moz-range-track{
  height:6px;
  border-radius:999px;
  background:#d5d9d9;
}

/* Firefox fill */
.rangeRow input[type="range"]::-moz-range-progress{
  height:6px;
  border-radius:999px;
  background:#007185;
}

/* Firefox thumb */
.rangeRow input[type="range"]::-moz-range-thumb{
  width:18px;
  height:18px;
  border-radius:50%;
  background:#fff;
  border:2px solid #007185;
  box-shadow:0 1px 3px rgba(0,0,0,.25);
  cursor:pointer;
}

/* Focus ring */
.rangeRow input[type="range"]:focus::-webkit-slider-thumb{
  box-shadow:0 0 0 4px rgba(0,113,133,.18), 0 1px 3px rgba(0,0,0,.25);
}


/* ===== AMAZON-LIKE CAROUSEL (from Plataforma 2.html) ===== */
.carousel{margin-top:14px;overflow:hidden}
.caro-viewport{position:relative}
.caro-track{display:flex;transition:transform .35s ease;will-change:transform}
.caro-slide{min-width:100%;height:260px;position:relative;display:flex;align-items:flex-end;justify-content:flex-start}
@media (max-width: 980px){.caro-slide{height:220px}}
.caro-slide img{width:100%;height:100%;object-fit:cover;display:block}
.caro-overlay{
  position:absolute;inset:0;
  background:linear-gradient(180deg, rgba(0,0,0,.05), rgba(0,0,0,.35));
}
.caro-copy{
  position:absolute;left:16px;bottom:16px;right:16px;
  background:rgba(255,255,255,.92);
  border:1px solid var(--border);
  border-radius:14px;
  padding:12px 12px;
  box-shadow: 0 10px 30px rgba(0,0,0,.18);
  max-width: 620px;
}
.caro-copy h3{margin:0;font-size:16px}
.caro-copy p{margin:6px 0 0;color:var(--muted);font-size:13px;line-height:1.35}
.caro-btn{
  position:absolute;top:50%;transform:translateY(-50%);
  border:1px solid var(--border);
  background:rgba(255,255,255,.92);
  width:40px;height:60px;border-radius:10px;
  cursor:pointer;font-size:28px;line-height:1;
  display:flex;align-items:center;justify-content:center;
  box-shadow: 0 6px 18px rgba(0,0,0,.18);
  user-select:none;
}
.caro-btn.left{left:10px}
.caro-btn.right{right:10px}
.caro-btn:hover{background:#fff}
.caro-dots{display:flex;gap:8px;justify-content:center;padding:10px 0 12px;background:#fff}
.dot{
  width:10px;height:10px;border-radius:999px;
  border:1px solid var(--border);
  background:#fff;cursor:pointer;
}
.dot.on{background:var(--amazon-orange);border-color:rgba(255,153,0,.7)}

/* Hero: igualar altura de ambas columnas (banner y card) */
.hero > .banner{height:100%}
.hero > .card{height:100%;display:flex;flex-direction:column}

/* Hero: igualar altura + distribución interna del banner */
.hero > .banner{display:flex;flex-direction:column}
.hero > .banner .kpis{margin-top:12px}
.hero > .banner .footer{margin-top:auto}

/* Hero: forzar que el card derecho "rellene" la altura */
.hero > .card .bd{flex:1}

/* Hero: altura fija tipo demo (igualdad estricta) */
@media (min-width: 981px){
  .hero{min-height:340px}
  .hero > .banner{overflow:auto}
}

/* Hero: ocultar scrollbar pero mantener scroll */
@media (min-width: 981px){
  .hero > .banner{scrollbar-width:none;-ms-overflow-style:none}
  .hero > .banner::-webkit-scrollbar{width:0;height:0}
}

/* Banner promo: más altura */
.card.promo .bd{
  padding-top: 32px;
  padding-bottom: 32px;
}

/* Banner promo: alto aproximado 250px (desktop) */
@media (min-width: 981px){
  .card.promo .bd{min-height:250px}
}

/* Banner promo: imagen de fondo + overlay */
.card.promo{position:relative; overflow:hidden}
.card.promo::before{
  content:"";
  position:absolute; inset:0;
  background:
    linear-gradient(90deg, rgba(19,25,33,.78) 0%, rgba(19,25,33,.35) 55%, rgba(19,25,33,.10) 100%),
    url("/banners/promo.jpg") center/cover no-repeat;
  z-index:0;
}
.card.promo .bd{position:relative; z-index:1}
.card.promo .bd, .card.promo .bd *{color:#fff}
.card.promo .note{opacity:.92}
.card.promo .btn.primary{filter:brightness(1.03)}

/* Banner promo: tipografía Ultra (solo título) */
.promoTitle{
  font-family: "Inter", system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
  letter-spacing: .2px;
}

/* Hero: solo módulo "Mis vehículos" (oculta columna banner/KPIs) */
@media (min-width: 981px){
  .hero{grid-template-columns:1fr !important}
  .hero > .banner{display:none !important}
}

/* ===== HERO STATIC (1 imagen + overlay fitment) ===== */
.heroStatic{
  width:100%;
  max-width:none;
  margin-top:14px;
  overflow:hidden;
  border-radius:12px;
  position:relative;
}

.heroStatic-bg{
  position:relative;
  height:520px;
}

.heroStatic-bg img{
  width:100%;
  height:100%;
  object-fit:cover;
  display:block;
}

.heroStatic-overlay{
  position:absolute;
  inset:0;
  background:linear-gradient(180deg, rgba(0,0,0,.15) 0%, rgba(0,0,0,.35) 100%);
}

/* Montar el módulo sobre la imagen (centrado) */
.heroStatic .fitmentOverlay{
  position:absolute;
  left:50%;
  top:46%;
  transform:translate(-50%,-50%);
  width:min(1100px, calc(100% - 28px));
  z-index:6;
}

/* “Glass” para que no se vea pesado encima */
.heroStatic .fitmentOverlay .card.fitment{
  margin:0 !important;
  background:rgba(255,255,255,.14);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  border:1px solid rgba(255,255,255,.22);
  box-shadow:0 8px 22px rgba(0,0,0,.12);
}

.heroStatic .fitmentOverlay .card.fitment .bd,
.heroStatic .fitmentOverlay .card.fitment .bd *{ color:#fff; }

.heroStatic .fitmentOverlay .card.fitment .fitmentSub{ opacity:.92; }

.heroStatic .fitmentOverlay .card.fitment select,
.heroStatic .fitmentOverlay .card.fitment input{
  background:rgba(255,255,255,.92);
  color:#111;
  border:1px solid rgba(255,255,255,.25);
}

/* Mobile: baja el overlay debajo de la imagen */
@media (max-width: 980px){
  .heroStatic-bg{height:360px;}
  .heroStatic .fitmentOverlay{
    position:static;
    transform:none;
    width:auto;
    margin:14px 14px 0;
  }
  .heroStatic .fitmentOverlay .card.fitment{
    background:#fff;
    backdrop-filter:none;
    -webkit-backdrop-filter:none;
  }
  .heroStatic .fitmentOverlay .card.fitment .bd,
  .heroStatic .fitmentOverlay .card.fitment .bd *{ color:var(--text); }
}

/* ===== PARTS-HERO: FULL WIDTH WRAP ===== */
.heroFull{
  max-width:none !important;
  width:100% !important;
  padding-left:0 !important;
  padding-right:0 !important;
}
.heroFull .heroStatic{
  width:100% !important;
  max-width:none !important;
  border-radius:0 !important;
}


/* ===== PARTS-HERO: look tipo MercadoLibre (solo CSS) ===== */

/* el hero ocupa alto consistente */
.heroStatic-bg{ height:520px; }
@media (max-width:980px){ .heroStatic-bg{ height:360px; } }

/* overlay centrado y ancho “card” */
.heroStatic .fitmentOverlay{
  position:absolute;
  left:50%;
  top:50%;
  transform:translate(-50%,-50%);
  width:min(1100px, calc(100% - 28px));
  z-index:10;
}

/* tarjeta clara (no glass) */
.heroStatic .fitmentOverlay .card.fitment{
  background:#fff !important;
  border:1px solid var(--border) !important;
  box-shadow:0 10px 30px rgba(0,0,0,.18) !important;
}

/* texto normal (oscuro) */
.heroStatic .fitmentOverlay .card.fitment .bd,
.heroStatic .fitmentOverlay .card.fitment .bd *{ color:var(--text) !important; }

/* en mobile, que baje a flujo normal debajo de la imagen */
@media (max-width:980px){
  .heroStatic{ overflow:visible; }
  .heroStatic .fitmentOverlay{
    position:static;
    transform:none;
    width:auto;
    margin:14px 14px 0;
  }
}


/* ===== MOBILE HERO TUNING ===== */
@media (max-width: 980px){
  .heroFull{
    padding-left: 0 !important;
    padding-right: 0 !important;
  }

  .heroStatic{
    margin-top: 10px !important;
    border-radius: 0 !important;
    overflow: visible !important;
  }

  .heroStatic-bg{
    height: 240px !important;
  }

  .heroStatic .fitmentOverlay{
    position: static !important;
    transform: none !important;
    width: auto !important;
    margin: 0 !important;
    padding: 0 12px;
  }

  .heroStatic .fitmentOverlay .card.fitment{
    margin-top: -10px !important;
    border-radius: 16px !important;
    box-shadow: 0 8px 24px rgba(0,0,0,.10) !important;
  }

  .heroStatic .fitmentOverlay .card.fitment .bd{
    padding: 14px !important;
  }

  .heroStatic .fitmentOverlay .formrow{
    grid-template-columns: 1fr !important;
    gap: 10px !important;
  }

  .heroStatic .fitmentOverlay .row{
    gap: 8px !important;
  }

  .heroStatic .fitmentOverlay .fitmentTitle{
    font-size: 16px !important;
    line-height: 1.25 !important;
  }

  .heroStatic .fitmentOverlay .fitmentSub{
    font-size: 13px !important;
    line-height: 1.35 !important;
  }
}

/* ===== MOBILE TOP NAV FIX ===== */
@media (max-width: 980px){
  .top2 .wrap{
    padding-left: 8px !important;
    padding-right: 8px !important;
  }

  .top2 .row{
    min-height: auto !important;
    display: grid !important;
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
    gap: 6px !important;
    padding: 6px 0 !important;
    overflow: visible !important;
    align-items: stretch !important;
  }

  .top2 .chip{
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    min-width: 0 !important;
    white-space: nowrap !important;
    padding: 8px 6px !important;
    font-size: 12px !important;
    line-height: 1.1 !important;
    text-align: center !important;
  }
}

/* ===== DESKTOP HERO TUNING ===== */
@media (min-width: 981px){
  .heroStatic-bg{
    height: 620px !important;
  }

  .heroStatic .fitmentOverlay{
    left: 50% !important;
    top: 52% !important;
    transform: translate(-50%, -50%) !important;
    width: min(860px, calc(100% - 120px)) !important;
    z-index: 10 !important;
  }

  .heroStatic .fitmentOverlay .card.fitment{
    border-radius: 18px !important;
    box-shadow: 0 16px 40px rgba(0,0,0,.18) !important;
  }
}

/* ===== DESKTOP HERO TUNING V2 ===== */
@media (min-width: 981px){
  .heroFull{
    max-width: 1440px !important;
    margin-left: auto !important;
    margin-right: auto !important;
    padding-left: 24px !important;
    padding-right: 24px !important;
  }

  .heroStatic{
    border-radius: 18px !important;
    overflow: hidden !important;
  }

  .heroStatic-bg{
    height: 640px !important;
  }

  .heroStatic .fitmentOverlay{
    left: 46% !important;
    top: 54% !important;
    transform: translate(-50%, -50%) !important;
    width: min(760px, calc(100% - 220px)) !important;
  }

  .heroStatic .fitmentOverlay .card.fitment{
    border-radius: 18px !important;
    box-shadow: 0 18px 46px rgba(0,0,0,.20) !important;
  }
}

/* ===== DESKTOP HERO TUNING V3 ===== */
@media (min-width: 981px){
  .heroFull{
    width: calc(100vw - 48px) !important;
    max-width: 1520px !important;
    margin-left: calc(50% - 50vw + 24px) !important;
    margin-right: 0 !important;
    padding-left: 0 !important;
    padding-right: 0 !important;
  }

  .heroStatic{
    border-radius: 18px !important;
    overflow: hidden !important;
  }

  .heroStatic-bg{
    height: 660px !important;
  }

  .heroStatic .fitmentOverlay{
    left: 44% !important;
    top: 54% !important;
    transform: translate(-50%, -50%) !important;
    width: min(720px, calc(100% - 260px)) !important;
  }
}

/* ===== DESKTOP HORIZONTAL FITMENT ===== */
@media (min-width: 981px){
  .heroStatic .fitmentOverlay .card.fitment .hd{
    padding-bottom: 8px !important;
  }

  .heroStatic .fitmentOverlay .card.fitment .bd{
    padding: 16px 18px 18px !important;
  }

  .heroStatic .fitmentOverlay .fitmentIntro{
    display: flex !important;
    align-items: center !important;
    gap: 10px !important;
    margin-bottom: 12px !important;
  }

  .heroStatic .fitmentOverlay .fitmentIcon{
    font-size: 20px !important;
    line-height: 1 !important;
  }

  .heroStatic .fitmentOverlay .fitmentTitle{
    font-size: 15px !important;
    line-height: 1.2 !important;
    margin: 0 !important;
  }

  .heroStatic .fitmentOverlay .fitmentSub{
    font-size: 12px !important;
    line-height: 1.25 !important;
    margin-top: 2px !important;
  }

  .heroStatic .fitmentOverlay .formrow{
    grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
    gap: 10px !important;
    align-items: end !important;
  }

  .heroStatic .fitmentOverlay .formrow label{
    font-size: 11px !important;
    margin-bottom: 4px !important;
  }

  .heroStatic .fitmentOverlay .formrow select,
  .heroStatic .fitmentOverlay .formrow input{
    height: 42px !important;
    padding: 0 12px !important;
  }

  .heroStatic .fitmentOverlay .row{
    margin-top: 12px !important;
    gap: 10px !important;
    align-items: center !important;
  }

  .heroStatic .fitmentOverlay .row .btn{
    height: 42px !important;
    padding: 0 18px !important;
  }

  .heroStatic .fitmentOverlay .note{
    font-size: 12px !important;
  }
}

/* ===== DESKTOP COMPACT FITMENT ===== */
@media (min-width: 981px){
  .heroStatic .fitmentOverlay .card.fitment .hd{
    padding: 10px 16px !important;
  }

  .heroStatic .fitmentOverlay .card.fitment .hd b{
    font-size: 14px !important;
  }

  .heroStatic .fitmentOverlay .card.fitment .bd{
    padding: 12px 16px 14px !important;
  }

  .heroStatic .fitmentOverlay .fitmentIntro{
    margin-bottom: 8px !important;
  }

  .heroStatic .fitmentOverlay .fitmentIcon{
    font-size: 16px !important;
  }

  .heroStatic .fitmentOverlay .fitmentTitle{
    font-size: 13px !important;
    line-height: 1.15 !important;
  }

  .heroStatic .fitmentOverlay .fitmentSub{
    display: none !important;
  }

  .heroStatic .fitmentOverlay .formrow{
    gap: 8px !important;
  }

  .heroStatic .fitmentOverlay .formrow label{
    font-size: 10px !important;
    margin-bottom: 3px !important;
  }

  .heroStatic .fitmentOverlay .formrow select,
  .heroStatic .fitmentOverlay .formrow input{
    height: 40px !important;
    font-size: 13px !important;
  }

  .heroStatic .fitmentOverlay .row{
    margin-top: 10px !important;
    gap: 8px !important;
  }

  .heroStatic .fitmentOverlay .row .btn{
    height: 40px !important;
    padding: 0 16px !important;
  }

  .heroStatic .fitmentOverlay .note:last-child{
    display: none !important;
  }
}

/* ===== DESKTOP NARROW HERO ===== */
@media (min-width: 981px){
  .heroFull{
    width: min(1280px, calc(100% - 64px)) !important;
    max-width: 1280px !important;
    margin-left: auto !important;
    margin-right: auto !important;
    padding-left: 0 !important;
    padding-right: 0 !important;
  }

  .heroStatic{
    border-radius: 18px !important;
    overflow: hidden !important;
  }

  .heroStatic-bg{
    height: 590px !important;
  }

  .heroStatic .fitmentOverlay{
    left: 44% !important;
    top: 54% !important;
    transform: translate(-50%, -50%) !important;
    width: min(680px, calc(100% - 220px)) !important;
  }
}

/* ===== FITMENT NASA STYLE ===== */
.heroStatic .fitmentOverlay .card.fitment .bd.fitmentNasa{
  padding: 18px 20px !important;
}

.fitmentNasaHead{
  text-align: center;
  margin-bottom: 14px;
}

.fitmentNasaHead .fitmentTitle{
  font-size: 24px !important;
  font-weight: 800 !important;
  line-height: 1.1 !important;
  margin: 0 !important;
}

.fitmentNasaHead .fitmentSub{
  font-size: 12px !important;
  letter-spacing: 2px !important;
  text-transform: uppercase;
  opacity: .9;
  margin-top: 6px !important;
}

.fitmentNasaRow{
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr)) 180px;
  gap: 10px;
  align-items: end;
}

.fitmentField label{
  display: block;
  font-size: 11px;
  margin-bottom: 6px;
  color: var(--muted);
}

.fitmentField select,
.fitmentField input{
  width: 100%;
  height: 46px;
  border-radius: 10px;
  border: 1px solid var(--border);
  background: #fff;
  padding: 0 12px;
  font-size: 14px;
  outline: none;
}

.fitmentActions{
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.fitmentActions .btn{
  width: 100%;
  height: 46px !important;
  justify-content: center;
}

.fitmentNasa #vehActive{
  display: block;
  text-align: center;
  margin-top: 12px;
}

.fitmentNasa > .note:last-child{
  display: none;
}

@media (max-width: 980px){
  .heroStatic .fitmentOverlay .card.fitment .bd.fitmentNasa{
    padding: 14px !important;
  }

  .fitmentNasaHead{
    margin-bottom: 10px;
  }

  .fitmentNasaHead .fitmentTitle{
    font-size: 18px !important;
  }

  .fitmentNasaHead .fitmentSub{
    font-size: 11px !important;
    letter-spacing: 1px !important;
  }

  .fitmentNasaRow{
    grid-template-columns: 1fr;
    gap: 10px;
  }

  .fitmentActions{
    flex-direction: row;
  }

  .fitmentActions .btn{
    flex: 1 1 auto;
  }
}

/* ===== FITMENT NASA LIKE - DESKTOP ===== */
@media (min-width: 981px){
  .heroStatic .fitmentOverlay{
    left: 50% !important;
    top: 54% !important;
    transform: translate(-50%, -50%) !important;
    width: min(1120px, calc(100% - 120px)) !important;
  }

  .heroStatic .fitmentOverlay .card.fitment{
    background: transparent !important;
    border: 0 !important;
    box-shadow: none !important;
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
    overflow: visible !important;
  }

  .heroStatic .fitmentOverlay .card.fitment .hd{
    display: none !important;
  }

  .heroStatic .fitmentOverlay .card.fitment .bd.fitmentNasa{
    padding: 0 !important;
  }

  .fitmentNasaHead{
    text-align: center !important;
    margin-bottom: 28px !important;
  }

  .fitmentNasaHead .fitmentTitle{
    font-size: 56px !important;
    line-height: 1.05 !important;
    font-weight: 800 !important;
    color: #fff !important;
    letter-spacing: 0 !important;
    margin: 0 !important;
  }

  .fitmentNasaHead .fitmentSub{
    display: block !important;
    margin-top: 12px !important;
    font-size: 18px !important;
    line-height: 1.2 !important;
    letter-spacing: 3px !important;
    text-transform: uppercase !important;
    color: #fff !important;
    opacity: 1 !important;
  }

  .fitmentNasaRow{
    display: grid !important;
    grid-template-columns: repeat(4, minmax(0, 1fr)) 200px !important;
    gap: 14px !important;
    align-items: end !important;
  }

  .fitmentField label{
    display: none !important;
  }

  .fitmentField select,
  .fitmentField input{
    width: 100% !important;
    height: 54px !important;
    border-radius: 0 !important;
    border: 0 !important;
    background: rgba(255,255,255,.96) !important;
    color: #222 !important;
    padding: 0 16px !important;
    font-size: 18px !important;
    box-shadow: none !important;
  }

  .fitmentActions{
    display: flex !important;
    flex-direction: column !important;
    gap: 10px !important;
  }

  .fitmentActions .btn{
    width: 100% !important;
    height: 54px !important;
    border-radius: 0 !important;
    justify-content: center !important;
    font-size: 18px !important;
    font-weight: 700 !important;
  }

  .fitmentActions .btn.primary{
    background: #f39c12 !important;
    border-color: #d88709 !important;
    color: #111 !important;
  }

  .fitmentActions .btn:not(.primary){
    background: rgba(255,255,255,.92) !important;
    border-color: transparent !important;
    color: #222 !important;
  }

  .fitmentNasa #vehActive{
    display: none !important;
  }

  .fitmentNasa > .note:last-child{
    display: none !important;
  }
}


/* ===== FITMENT NASA FINAL OVERRIDE ===== */
@media (min-width: 981px){
  .heroStatic .fitmentOverlay{
    left: 50% !important;
    top: 52% !important;
    transform: translate(-50%, -50%) !important;
    width: min(1180px, calc(100% - 120px)) !important;
  }

  .heroStatic .fitmentOverlay .card.fitment{
    background: transparent !important;
    border: 0 !important;
    box-shadow: none !important;
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
    overflow: visible !important;
  }

  .heroStatic .fitmentOverlay .card.fitment .hd{
    display: none !important;
  }

  .heroStatic .fitmentOverlay .card.fitment .bd.fitmentNasa{
    padding: 0 !important;
  }

  .fitmentNasaHead{
    text-align: center !important;
    margin-bottom: 28px !important;
  }

  .fitmentNasaHead .fitmentTitle{
    font-size: 54px !important;
    line-height: 1.05 !important;
    font-weight: 800 !important;
    color: #fff !important;
    margin: 0 !important;
  }

  .fitmentNasaHead .fitmentSub{
    display: block !important;
    margin-top: 10px !important;
    font-size: 16px !important;
    line-height: 1.2 !important;
    letter-spacing: 3px !important;
    text-transform: uppercase !important;
    color: #fff !important;
    opacity: 1 !important;
  }

  .fitmentNasaRow{
    display: grid !important;
    grid-template-columns: repeat(4, minmax(0, 1fr)) 190px !important;
    gap: 12px !important;
    align-items: end !important;
  }

  .fitmentField label{
    display: none !important;
  }

  .fitmentField select,
  .fitmentField input{
    width: 100% !important;
    height: 54px !important;
    border-radius: 0 !important;
    border: 0 !important;
    background: rgba(255,255,255,.96) !important;
    color: #222 !important;
    padding: 0 16px !important;
    font-size: 18px !important;
    box-shadow: none !important;
  }

  .fitmentActions{
    display: flex !important;
    flex-direction: column !important;
    gap: 10px !important;
  }

  .fitmentActions .btn{
    width: 100% !important;
    height: 54px !important;
    border-radius: 0 !important;
    justify-content: center !important;
    font-size: 18px !important;
    font-weight: 700 !important;
  }

  .fitmentActions .btn.primary{
    background: #f39c12 !important;
    border-color: #d88709 !important;
    color: #111 !important;
  }

  .fitmentActions .btn:not(.primary){
    background: rgba(255,255,255,.92) !important;
    border-color: transparent !important;
    color: #222 !important;
  }

  .fitmentNasa #vehActive{
    display: none !important;
  }

  .fitmentNasa > .note:last-child{
    display: none !important;
  }
}


/* ===== FITMENT ACTIONS ALIGN RIGHT ===== */
@media (min-width: 981px){
  .fitmentNasaRow{
    align-items: end !important;
  }

  .fitmentActions{
    display: grid !important;
    grid-template-rows: 54px 54px !important;
    align-self: end !important;
    gap: 10px !important;
  }

  .fitmentActions .btn{
    width: 100% !important;
    height: 54px !important;
    margin: 0 !important;
  }

  .fitmentActions .btn.primary{
    align-self: end !important;
  }

  .fitmentActions .btn:not(.primary){
    align-self: start !important;
  }
}


/* ===== FITMENT ACTIONS FINAL POSITION ===== */
@media (min-width: 981px){
  .fitmentNasaRow{
    display: grid !important;
    grid-template-columns: repeat(4, minmax(0, 1fr)) 190px !important;
    gap: 12px !important;
    align-items: end !important;
  }

  .fitmentActions{
    display: grid !important;
    grid-template-rows: 54px 54px !important;
    gap: 10px !important;
    align-self: end !important;
    margin: 0 !important;
  }

  .fitmentActions .btn{
    width: 100% !important;
    height: 54px !important;
    margin: 0 !important;
  }

  .fitmentActions .btn.primary{
    grid-row: 1 !important;
  }

  .fitmentActions .btn:not(.primary){
    grid-row: 2 !important;
  }
}


/* ===== FITMENT ACTIONS TOP-ALIGNED WITH SELECTS ===== */
@media (min-width: 981px){
  .fitmentNasaRow{
    display: grid !important;
    grid-template-columns: repeat(4, minmax(0, 1fr)) 190px !important;
    gap: 12px !important;
    align-items: end !important;
  }

  .fitmentActions{
    display: grid !important;
    grid-template-rows: 54px 54px !important;
    gap: 10px !important;
    align-self: end !important;
    margin: 0 !important;
    padding-top: 0 !important;
  }

  .fitmentActions .btn{
    width: 100% !important;
    height: 54px !important;
    margin: 0 !important;
  }

  .fitmentActions .btn.primary{
    grid-row: 1 !important;
    transform: translateY(0) !important;
  }

  .fitmentActions .btn:not(.primary){
    grid-row: 2 !important;
    transform: translateY(0) !important;
  }

  .fitmentField{
    display: flex !important;
    flex-direction: column !important;
    justify-content: flex-end !important;
  }

  .fitmentField select,
  .fitmentField input{
    margin: 0 !important;
  }
}


/* ===== FITMENT ACTIONS EXACT ALIGN ===== */
@media (min-width: 981px){
  .fitmentNasaRow{
    display: grid !important;
    grid-template-columns: repeat(4, minmax(0, 1fr)) 190px !important;
    gap: 12px !important;
    align-items: start !important;
  }

  .fitmentField{
    align-self: start !important;
  }

  .fitmentActions{
    display: grid !important;
    grid-template-rows: 54px 54px !important;
    gap: 10px !important;
    align-self: start !important;
    margin: 0 !important;
    padding: 0 !important;
  }

  .fitmentActions .btn{
    width: 100% !important;
    height: 54px !important;
    margin: 0 !important;
  }

  .fitmentActions .btn.primary{
    grid-row: 1 !important;
  }

  .fitmentActions .btn:not(.primary){
    grid-row: 2 !important;
  }
}


/* ===== FITMENT ACTIONS HARD ALIGN ===== */
@media (min-width: 981px){
  .fitmentNasaRow{
    display: grid !important;
    grid-template-columns: repeat(4, minmax(0, 1fr)) 190px !important;
    gap: 12px !important;
    align-items: end !important;
  }

  .fitmentField{
    display: flex !important;
    flex-direction: column !important;
    justify-content: flex-end !important;
  }

  .fitmentField label{
    display: none !important;
  }

  .fitmentField select,
  .fitmentField input{
    height: 54px !important;
    margin: 0 !important;
  }

  .fitmentActions{
    display: grid !important;
    grid-template-columns: 1fr !important;
    grid-template-rows: 54px 54px !important;
    gap: 10px !important;
    align-self: end !important;
    justify-self: stretch !important;
    margin: 0 !important;
    padding: 0 !important;
    transform: translateY(0) !important;
  }

  .fitmentActions .btn{
    width: 100% !important;
    height: 54px !important;
    margin: 0 !important;
    align-self: stretch !important;
  }

  .fitmentActions .btn.primary{
    grid-row: 1 !important;
  }

  .fitmentActions .btn:not(.primary){
    grid-row: 2 !important;
  }
}


/* ===== HERO NEW IMAGE + WIDE SHORT DESKTOP ===== */
@media (min-width: 981px){
  .heroFull{
    width: min(1380px, calc(100% - 48px)) !important;
    max-width: 1380px !important;
    margin-left: auto !important;
    margin-right: auto !important;
    padding-left: 0 !important;
    padding-right: 0 !important;
  }

  .heroStatic-bg{
    height: 500px !important;
  }

  .heroStatic-bg img{
    object-fit: cover !important;
    object-position: center center !important;
  }

  .heroStatic .fitmentOverlay{
    width: min(1180px, calc(100% - 100px)) !important;
    top: 54% !important;
  }
}


/* ===== HERO FULL WIDTH PAGE ===== */
@media (min-width: 981px){
  .heroFull{
    width: 100vw !important;
    max-width: 100vw !important;
    margin-left: calc(50% - 50vw) !important;
    margin-right: calc(50% - 50vw) !important;
    padding-left: 0 !important;
    padding-right: 0 !important;
  }

  .heroStatic{
    border-radius: 0 !important;
  }

  .heroStatic-bg{
    height: 520px !important;
  }
}


/* ===== LOGO BRAND CAROUSEL ===== */
.brandsStrip{
  margin-top: 14px;
}

.brandsStripTrack{
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: 205px;
  gap: 10px;
  overflow-x: auto;
  overflow-y: hidden;
  padding: 4px 2px 8px;
  scrollbar-width: none;
  -webkit-overflow-scrolling: touch;
}

.brandsStripTrack::-webkit-scrollbar{
  display: none;
}

.brandLogoCard{
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 150px;
  background: #fff;
  border: 1px solid var(--border);
  border-radius: 12px;
  box-shadow: var(--shadow);
  overflow: hidden;
  transition: transform .18s ease, box-shadow .18s ease;
}

.brandLogoCard:hover{
  transform: translateY(-2px);
  box-shadow: 0 10px 22px rgba(0,0,0,.08);
}

.brandLogoCard img{
  width: 170px;
  height: 130px;
  object-fit: contain;
  display: block;
}

@media (max-width: 980px){
  .brandsStripTrack{
    grid-auto-columns: 170px;
    gap: 8px;
  }

  .brandLogoCard{
    min-height: 130px;
    border-radius: 10px;
  }

  .brandLogoCard img{
    width: 140px;
    height: 105px;
  }
}


/* ===== FULL WIDTH MOVING BRAND CAROUSEL ===== */
.brandsStrip{
  width: 100vw !important;
  max-width: 100vw !important;
  margin-left: calc(50% - 50vw) !important;
  margin-right: calc(50% - 50vw) !important;
  overflow: hidden;
}

.brandsStripViewport{
  width: 100%;
  overflow: hidden;
  padding: 6px 0 10px;
}

.brandsStripTrack--marquee{
  display: flex !important;
  gap: 10px;
  width: max-content;
  animation: brandsMarquee 28s linear infinite;
  will-change: transform;
}

.brandsStripTrack--marquee:hover{
  animation-play-state: paused;
}

.brandLogoCard{
  flex: 0 0 205px;
}

@keyframes brandsMarquee{
  from { transform: translateX(0); }
  to { transform: translateX(calc(-50% - 5px)); }
}

@media (max-width: 980px){
  .brandsStripTrack--marquee{
    animation-duration: 20s;
  }

  .brandLogoCard{
    flex-basis: 170px;
  }
}


/* ===== BRAND CARD SIZE 170x130 ===== */
.brandLogoCard{
  flex: 0 0 170px !important;
  width: 170px !important;
  min-width: 170px !important;
  min-height: 130px !important;
  height: 130px !important;
}

.brandLogoCard img{
  width: 170px !important;
  height: 130px !important;
  object-fit: contain !important;
}


/* ===== BRANDS STRIP REDESIGN ===== */
.brandsStrip{
  width: 100vw !important;
  max-width: 100vw !important;
  margin: 18px calc(50% - 50vw) 0 !important;
  padding: 10px 0 !important;
  background: linear-gradient(180deg, #fff, #fafafa) !important;
  border-top: 1px solid #ececec;
  border-bottom: 1px solid #ececec;
  overflow: hidden !important;
}

.brandsStripViewport{
  width: 100% !important;
  overflow: hidden !important;
  padding: 0 !important;
}

.brandsStripTrack--marquee{
  display: flex !important;
  align-items: center !important;
  gap: 14px !important;
  width: max-content !important;
  animation: brandsMarquee 34s linear infinite !important;
  will-change: transform;
}

.brandsStripTrack--marquee:hover{
  animation-play-state: paused !important;
}

.brandLogoCard{
  flex: 0 0 170px !important;
  width: 170px !important;
  min-width: 170px !important;
  height: 130px !important;
  min-height: 130px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  background: #fff !important;
  border: 1px solid #e9e9e9 !important;
  border-radius: 10px !important;
  box-shadow: 0 2px 8px rgba(0,0,0,.04) !important;
  overflow: hidden !important;
  transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease !important;
}

.brandLogoCard:hover{
  transform: translateY(-2px) !important;
  border-color: #d9d9d9 !important;
  box-shadow: 0 8px 18px rgba(0,0,0,.08) !important;
}

.brandLogoCard img{
  width: 170px !important;
  height: 130px !important;
  object-fit: contain !important;
  display: block !important;
  filter: saturate(.96);
}

@media (max-width: 980px){
  .brandsStrip{
    margin-top: 14px !important;
    padding: 8px 0 !important;
  }

  .brandsStripTrack--marquee{
    gap: 10px !important;
    animation-duration: 24s !important;
  }

  .brandLogoCard{
    flex-basis: 150px !important;
    width: 150px !important;
    min-width: 150px !important;
    height: 112px !important;
    min-height: 112px !important;
    border-radius: 8px !important;
  }

  .brandLogoCard img{
    width: 150px !important;
    height: 112px !important;
  }
}


/* ===== BRANDS STRIP REDESIGN V2 ===== */
.brandsStrip{
  width: 100vw !important;
  max-width: 100vw !important;
  margin: 10px calc(50% - 50vw) 0 !important;
  padding: 8px 0 !important;
  background: #f7f7f7 !important;
  border-top: 1px solid #e7e7e7 !important;
  border-bottom: 1px solid #e7e7e7 !important;
  overflow: hidden !important;
}

.brandsStripViewport{
  width: 100% !important;
  overflow: hidden !important;
  padding: 0 !important;
}

.brandsStripTrack--marquee{
  display: flex !important;
  align-items: center !important;
  gap: 12px !important;
  width: max-content !important;
  animation: brandsMarquee 32s linear infinite !important;
  will-change: transform !important;
}

.brandsStripTrack--marquee:hover{
  animation-play-state: paused !important;
}

.brandLogoCard{
  flex: 0 0 132px !important;
  width: 132px !important;
  min-width: 132px !important;
  height: 56px !important;
  min-height: 56px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  background: #ffffff !important;
  border: 1px solid #ececec !important;
  border-radius: 12px !important;
  box-shadow: none !important;
  overflow: hidden !important;
  padding: 0 !important;
  transition: border-color .18s ease, transform .18s ease !important;
}

.brandLogoCard:hover{
  border-color: #d7d7d7 !important;
  transform: translateY(-1px) !important;
  box-shadow: none !important;
}

.brandLogoCard img{
  max-width: 84px !important;
  max-height: 24px !important;
  width: auto !important;
  height: auto !important;
  object-fit: contain !important;
  display: block !important;
  padding: 0 !important;
  filter: none !important;
}

@media (max-width: 980px){
  .brandsStrip{
    margin-top: 8px !important;
    padding: 6px 0 !important;
  }

  .brandsStripTrack--marquee{
    gap: 8px !important;
    animation-duration: 28s !important;
  }

  .brandLogoCard{
    flex-basis: 104px !important;
    width: 104px !important;
    min-width: 104px !important;
    height: 48px !important;
    min-height: 48px !important;
    border-radius: 10px !important;
  }

  .brandLogoCard img{
    max-width: 70px !important;
    max-height: 20px !important;
    width: auto !important;
    height: auto !important;
    padding: 0 !important;
  }
}



/* ===================================================
   AMAZON-STYLE PRODUCT CARDS  (amz* prefix)
   Usadas por /parts — solo rediseño visual,
   toda la funcionalidad del carrito se mantiene.
   =================================================== */

/* override padding del .product base */
.amzCard{padding:0 !important;display:flex;flex-direction:column;overflow:hidden;transition:box-shadow .18s,transform .18s}
.amzCard:hover{box-shadow:0 4px 18px rgba(15,17,17,.2);transform:translateY(-2px)}

/* imagen */
.amzImg{
  height:180px;
  background:linear-gradient(135deg,#f0f2f2,#fafafa);
  display:flex;align-items:center;justify-content:center;
  font-size:3rem;position:relative;
  border-bottom:1px solid #eef0f2;
  flex-shrink:0;
}
.amzImg img{width:100%;height:100%;object-fit:contain;padding:12px}

/* badges sobre imagen */
.amzBadgeShip{
  position:absolute;top:10px;left:10px;
  background:#067d62;color:#fff;
  font-size:10px;font-weight:800;
  padding:3px 8px;border-radius:4px;
  letter-spacing:.3px;
}
.amzBadgeNew{
  position:absolute;top:10px;left:10px;
  background:#e47911;color:#fff;
  font-size:10px;font-weight:800;
  padding:3px 8px;border-radius:4px;
}

/* body */
.amzBody{padding:10px 12px 8px;flex:1;display:flex;flex-direction:column;gap:4px}

.amzBrand{font-size:11px;color:var(--muted);text-transform:uppercase;letter-spacing:.4px;font-weight:600}

.amzTitle{
  font-size:14px;font-weight:600;line-height:1.45;
  display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;
  color:var(--link);
}
.amzCard:hover .amzTitle{text-decoration:underline}

/* stars */
.amzStarRow{display:flex;align-items:center;gap:4px}
.amzStars{color:#f5a623;font-size:14px;letter-spacing:1px}
.amzStarCount{font-size:12px;color:var(--link)}

/* precio */
.amzPrice{font-size:24px;font-weight:900;color:#0f1111;margin-top:4px;letter-spacing:-.5px}
.amzPriceSub{font-size:12px;color:var(--ok);font-weight:700;margin-top:1px}
.amzOutStock{font-size:12px;font-weight:700;color:var(--warn)}

/* footer */
.amzFoot{padding:0 12px 12px;display:flex;flex-direction:column;gap:6px}

.amzBtnCart{
  width:100%;background:var(--amazon-orange);color:#111;
  border:1px solid #d28a00;border-radius:999px;
  height:40px;font-weight:800;font-size:14px;
  cursor:pointer;display:flex;align-items:center;justify-content:center;gap:7px;
  transition:background .15s;
  font-family:var(--sans);
}
.amzBtnCart:hover{background:var(--amazon-orange2)}
.amzBtnCart:disabled{
  background:#e3e6e6;border-color:#d5d9d9;
  color:#aab7b8;cursor:not-allowed;transform:none
}

.amzMoreOffers{
  text-align:center;font-size:12px;color:var(--link);cursor:pointer;
}
.amzMoreOffers:hover{text-decoration:underline}

/* hide the old absolute badge when using amzCard */
.amzCard .badge{display:none}


/* ===================================================
   HOME SECTIONS & CATEGORY CHIPS
   =================================================== */

/* sección genérica con título */
.homeSection { margin-top: 24px; }

.homeSectionHd { margin-bottom: 14px; }
.homeSectionTitle {
  font-size: 20px;
  font-weight: 800;
  color: #0f1111;
  margin: 0 0 4px;
}
.homeSectionSub {
  font-size: 13px;
  color: var(--muted);
  margin: 0;
}

/* ── Category chips row ── */
.catChipsRow {
  display: flex;
  gap: 10px;
  overflow-x: auto;
  padding-bottom: 4px;
  scrollbar-width: none;
}
.catChipsRow::-webkit-scrollbar { display: none; }

.catChip {
  flex: 0 0 auto;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  padding: 12px 16px;
  background: #fff;
  border: 1.5px solid var(--border);
  border-radius: var(--radius);
  cursor: pointer;
  transition: border-color .15s, box-shadow .15s, background .15s;
  min-width: 90px;
  font-family: var(--sans);
}
.catChip:hover {
  border-color: var(--amazon-orange);
  box-shadow: 0 2px 8px rgba(15,17,17,.12);
}
.catChip.active {
  border-color: var(--amazon-orange);
  background: #fff8ee;
  box-shadow: 0 0 0 2px var(--amazon-orange);
}
.catChipIcon { font-size: 1.6rem; line-height: 1; }

/* ===== FITMENT MOBILE: selector integrado en hero ===== */
@media (max-width: 640px) {
  /* Hero = flex column: franja de imagen arriba + formulario abajo */
  .heroStatic {
    overflow: hidden !important;
    display: flex !important;
    flex-direction: column !important;
  }

  /* Franja decorativa más corta — el formulario es el protagonista */
  .heroStatic-bg {
    height: 140px !important;
    flex-shrink: 0 !important;
  }

  /* Overlay en flujo normal, ancho completo, sin márgenes extra */
  .heroStatic .fitmentOverlay {
    position: static !important;
    transform: none !important;
    width: 100% !important;
    margin: 0 !important;
    padding: 0 !important;
  }

  /* Elimina la "tarjeta dentro de tarjeta" — queda plano y continuo */
  .heroStatic .fitmentOverlay .card.fitment {
    margin-top: 0 !important;
    border-radius: 0 !important;
    box-shadow: none !important;
    border: none !important;
    border-top: 1px solid rgba(0,0,0,.07) !important;
    background: #fff !important;
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
  }
}
.catChipLabel {
  font-size: 11px;
  font-weight: 700;
  color: #0f1111;
  text-align: center;
  white-space: nowrap;
}

/* ===================================================
   CATEGORY NAV BAR (top2 dynamic)
   =================================================== */
.catNavBar{
  display:flex;align-items:center;gap:2px;
  overflow-x:auto;scrollbar-width:none;
  padding:4px 0;min-height:46px;
}
.catNavBar::-webkit-scrollbar{display:none}
.catNavItem{
  flex:0 0 auto;
  background:none;border:none;
  color:#fff;font-size:13px;font-weight:500;
  padding:6px 12px;border-radius:4px;
  cursor:pointer;white-space:nowrap;
  font-family:var(--sans);transition:background .12s;
}
.catNavItem:hover{background:rgba(255,255,255,.12);outline:1px solid rgba(255,255,255,.6)}
.catNavItem.active{outline:1px solid #fff;background:rgba(255,255,255,.08)}

/* ===================================================
   CATEGORY SECTION GRID (4 cols, carousel on mobile)
   =================================================== */
.catSectionGrid{
  display:grid;
  grid-template-columns:repeat(4,1fr);
  gap:14px;
}
.catSectionGrid .product.amzCard{min-width:0;width:100%}
.catSectionGrid .amzImg{height:180px;font-size:3rem}
@media(max-width:1100px){.catSectionGrid{grid-template-columns:repeat(3,minmax(0,1fr))}}
@media(max-width:700px){
  .catSectionGrid{
    display:flex;overflow-x:auto;gap:12px;
    scrollbar-width:none;padding-bottom:6px;
  }
  .catSectionGrid::-webkit-scrollbar{display:none}
  .catSectionGrid .product.amzCard{flex:0 0 200px;min-width:200px}
  .catSectionGrid .amzImg{height:150px}
}

.homeSectionHdRow{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-bottom:14px;flex-wrap:wrap}
.homeSectionLink{
  font-size:13px;font-weight:700;color:var(--link);
  text-decoration:none;white-space:nowrap;
}
.homeSectionLink:hover{text-decoration:underline}

/* ── Filter sidebar responsive ─────────────────────────────── */
.filterSidebar { display: none; }
@media (min-width: 768px) {
  .filterSidebar { display: block; }
  .filterSidebarMobileBtn { display: none !important; }
}

/* ── catNavItem as anchor (category pages) ──────────────────── */
a.catNavItem{
  display:inline-flex;align-items:center;gap:5px;
  padding:5px 12px;border-radius:8px;
  font-size:.85rem;font-weight:600;
  color:#fff;text-decoration:none;
  border:1px solid transparent;
  transition:background .15s,outline .1s;
  white-space:nowrap;cursor:pointer;
}
a.catNavItem:hover{background:rgba(255,255,255,.12);outline:1px solid rgba(255,255,255,.6)}
a.catNavItem.active{outline:1px solid #fff;background:rgba(255,255,255,.08)}

/* ── Brand carousel cards — typographic style ──────────────── */
.brandLogoCard{
  flex: 0 0 auto !important;
  width: auto !important;
  min-width: unset !important;
  height: 44px !important;
  min-height: 44px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  background: transparent !important;
  border: none !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  padding: 0 20px !important;
  text-decoration: none !important;
  font-size: 14px !important;
  font-weight: 500 !important;
  color: #64748b !important;
  letter-spacing: .2px !important;
  white-space: nowrap !important;
  transition: color .15s ease !important;
  cursor: pointer !important;
}
.brandLogoCard:hover{
  color: #0f1111 !important;
  transform: none !important;
  box-shadow: none !important;
  border: none !important;
}
.brandLogoCard img{ display: none !important; }
.brandLogoCard .brandName{ display: none !important; }

/* ── Mobile fixes ─────────────────────────────────────────── */
@media (max-width: 640px) {
  /* Hero: imagen más pequeña en mobile */
  .heroStatic-bg { height: 200px !important; }

  /* Selector de vehículo: compacto debajo de la imagen */
  .heroStatic .fitmentOverlay {
    position: static !important;
    transform: none !important;
    width: 100% !important;
    margin: 0 !important;
    padding: 0 12px 12px !important;
  }
  .fitmentNasaHead { display: none !important; }
  .fitmentNasaRow {
    display: grid !important;
    grid-template-columns: 1fr 1fr !important;
    gap: 8px !important;
  }
  .fitmentActions {
    grid-column: 1 / -1 !important;
    display: flex !important;
    gap: 8px !important;
  }
  .fitmentActions .btn { flex: 1 !important; }
  .fitmentField label { font-size: 11px !important; }
  .fitmentField select { font-size: 13px !important; padding: 6px 8px !important; }

  /* Tarjetas: imagen más pequeña */
  .products-wide { grid-template-columns: repeat(2, 1fr) !important; gap: 8px !important; }
  .amzImg { height: 120px !important; overflow: hidden; }
  .amzImg img { height: 120px !important; object-fit: contain; }
}

@media (max-width: 640px) {
  a.amzImg, .amzImg { height: 100px !important; min-height: 100px !important; max-height: 100px !important; }
  a.amzImg img, .amzImg img { height: 100px !important; max-height: 100px !important; }
}

/* ── RESPONSIVE MOBILE ── */
@media (max-width: 768px) {

  /* NAV — ocultar navlinks de escritorio en mobile */
  .navlinks { display: none !important; }

  /* HERO — texto más pequeño */
  section h1 { font-size: 28px !important; letter-spacing: -0.5px !important; }
  section p { font-size: 14px !important; }
  section > div { padding: 40px 16px 32px !important; }

  /* HERO STATS — 2x2 grid */
  section > div > div:last-child {
    display: grid !important;
    grid-template-columns: 1fr 1fr !important;
    gap: 12px !important;
    padding-top: 24px !important;
  }
  section > div > div:last-child > div {
    border-right: none !important;
    padding: 12px !important;
    background: rgba(255,255,255,0.06) !important;
    border-radius: 8px !important;
    border: 1px solid rgba(255,255,255,0.1) !important;
  }

  /* CATEGORIAS GRID — 3 columnas */
  .cat-grid-home, [style*="minmax(140px"] {
    grid-template-columns: repeat(3, 1fr) !important;
    gap: 8px !important;
  }

  /* PRODUCTOS — 2 columnas */
  .products-wide {
    grid-template-columns: repeat(2, 1fr) !important;
    gap: 8px !important;
  }
  .products {
    grid-template-columns: repeat(2, 1fr) !important;
    gap: 8px !important;
  }

  /* VALUE PROPS — 1 columna */
  [style*="minmax(220px"] {
    grid-template-columns: 1fr !important;
  }

  /* SELLER CTA — apilado */
  [style*="44px 40px"] {
    flex-direction: column !important;
    padding: 28px 20px !important;
    text-align: center !important;
  }

  /* HERO BOTONES — más compactos */
  section a[href="/home?q="], section a[href="/seller-apply"] {
    padding: 10px 20px !important;
    font-size: 13px !important;
    width: 100% !important;
    text-align: center !important;
    box-sizing: border-box !important;
  }

  /* Mostrar buscador mobile, ocultar en desktop */
  .mobile-search-bar { display: block !important; }

  /* BOTTOM NAV space */
  body { padding-bottom: 0; }
}

/* Ocultar buscador mobile en desktop */
.mobile-search-bar { display: none !important; }