/* =========================================
   CSS Variables
   ========================================= */
   :root {
    /* Colors - Bapmic inspired */
    --bg: #f5f5f5;                  /* Fondo claro gris */
    --surface: #1d1d1d;             /* Tabla oscura */
    --header-bg: #ffffff;           /* Header blanco */
    --text: #e0e0e0;                /* Texto en tabla */
    --text-dark: #333333;           /* Texto oscuro para header */
    --accent: #333333;              /* Gris oscuro */
    --atento: #25d366;              /* Verde WhatsApp */
    --accent-dark: #555555;         /* Gris hover */
    --special: #666666;             /* Gris medio */
    --border: #dddddd;              /* Bordes claros */
    --border-dark: #2c2c2c;         /* Bordes oscuros tabla */
    --row-alt: #1a1a1a;             /* Filas pares */
    --row-hover: #272727;           /* Hover filas */
    
    /* Spacing & sizing */
    --radius: 6px;
    --transition: 0.2s ease;
    --spacing: 16px;
    --z-sticky: 1000;
  }
  
  /* =========================================
     Reset & Global Styles
     ========================================= */
  * {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    transition: background var(--transition), color var(--transition);
  }
  body {
      background: var(--bg);
      color: var(--text-dark);
      font-family: "Helvetica Neue", Arial, sans-serif;
      line-height: 1.5;
      padding-top: 80px; /* Espacio para el header fijo - evita que el contenido se oculte */
      /* NUEVO: Degradado sutil para modernizar fondo general */
      background: linear-gradient(180deg,#fafafa 0%, #f1f3f4 60%, #e9ecef 100%);
      /* background: linear-gradient(90deg, #dbdada 0%, #d7d9e4 60%, #dbdada 100%); */
    }
  main {
      padding: var(--spacing);
      /* El main ya no necesita margin-top porque el body tiene padding-top */
    }
  



  @media (max-width: 768px) {
    .brand-logo {
      height: 35px;
    }
    .page-title {
      font-size: 1.2rem;
    }
  }

  /* =========================================
     Header Bar Principal (Estilo Bapmic)
     - Header blanco que se mantiene fijo al hacer scroll
     - Contiene: Logo, Buscador y Carrito
     - Sticky para navegación siempre visible
     ========================================= */
  .shop-bar {
    width: 100%;
    background: var(--header-bg); /* Fondo blanco */
    padding: var(--spacing);
    display: flex;
    align-items: center;
    justify-content: space-between;
    box-shadow: 0 2px 8px rgba(0,0,0,0.15); /* Sombra más pronunciada para efecto fijo */
    position: fixed; /* FIJO - Se mantiene siempre visible al hacer scroll */
    top: 0; /* Pegado al top de la ventana */
    left: 0; /* Pegado al lado izquierdo */
    right: 0; /* Se extiende hasta el lado derecho */
    z-index: 1000; /* Alto z-index para estar sobre otros elementos */
    /* Transición suave para efectos visuales */
    transition: box-shadow 0.2s ease;
  }
  
  .header-left {
    flex-shrink: 0;
  }
  
  .brand-name {
    font-size: 2rem;
    font-weight: bold;
    color: var(--text-dark);
    margin: 0;
  }
  
  /* =========================================
     Sección Derecha del Header
     - Contiene el carrito de compras
     - Muestra total y contador de items
     ========================================= */
  .header-right {
    display: flex;
    align-items: center;
    gap: 15px;
    flex-shrink: 0; /* No se encoge en pantallas pequeñas */
  }

  /* =========================================
     Barra de Búsqueda Central
     - Estilo similar a Bapmic
     - Responsive y centrada
     - Icono de lupa integrado
     ========================================= */
  .search-container {
    position: relative;
    flex: 1; /* Ocupa el espacio disponible */
    max-width: 600px;
    margin: 0 var(--spacing);
  }
  
  /* Campo de texto de búsqueda */
  .search-container input {
    width: 100%;
    padding: 12px 16px;
    padding-left: 44px; /* Espacio para el icono de lupa */
    border-radius: 4px;
    border: 2px solid var(--border);
    background: #ffffff;
    color: var(--text-dark);
    font-size: 1rem;
    outline: none;
    transition: border-color 0.3s ease, box-shadow 0.3s ease;
  }
  
  /* Efecto focus en el buscador */
  .search-container input:focus {
    border-color: var(--accent);
    box-shadow: 0 0 0 3px rgba(51, 51, 51, 0.1);
  }
  
  /* Icono de lupa dentro del buscador */
  .search-container .search-icon {
    position: absolute;
    left: 12px; 
    top: 50%;
    transform: translateY(-50%);
    font-size: 1.2rem;
    color: var(--accent);
    pointer-events: none; /* No interfiere con el click */
  }

  .carrito-icon {
    font-size: 1.2rem;    /* antes estaba en ~1.5rem, prueba con este valor */
  }
  
  /* =========================================
     Icono del Carrito de Compras
     - Muestra total en dinero y cantidad de items
     - Badge verde para el contador
     - Enlace directo al carrito
     ========================================= */
  .header-right .carrito-icon {
    position: relative;
    display: inline-flex;
    align-items: center;
    font-size: 1.8rem;
    color: var(--text-dark);
    text-decoration: none;
    transition: all var(--transition);
    gap: 8px;
    padding: 8px; /* Área de click más grande */
    border-radius: 6px;
  }
  
  /* Efecto hover del carrito */
  .header-right .carrito-icon:hover {
    color: var(--accent-dark);
    background: rgba(51, 51, 51, 0.05);
    transform: translateY(-1px);
  }
  
  /* Total en dinero del carrito */
  .header-right .carrito-icon #cart-total {
    font-size: 1rem;
    font-weight: 500;
    color: var(--text-dark);
  }
  
  /* Badge con número de items en el carrito */
  .header-right .carrito-icon #carrito-count {
    position: absolute;
    top: 2px; 
    right: 2px;
    background: #0e64c7; /* Verde WhatsApp */
    color: #ffffff;
    border-radius: 50%;
    padding: 2px 6px;
    font-size: 0.75rem;
    min-width: 18px;
    text-align: center;
    font-weight: bold;
    border: 2px solid var(--header-bg); /* Borde blanco para contraste */
  }



  @media (max-width: 768px) {
    .carrito-icon {
      font-size: 1.5rem;    /* antes estaba en ~1.5rem, prueba con este valor */
    }
    /* Ajustes móviles: mantener estilo consistente y evitar que #cart-total se vuelva burbuja */
    .shop-bar .carrito-icon { font-size: 1.8rem; }
    .shop-bar .carrito-icon #cart-total { font-size: .95rem; margin-right: 4px; position: static; background: transparent; padding:0; }
    /* Solo el contador (items) es badge */
    .shop-bar .carrito-icon #carrito-count {
      position: absolute;
      top: -6px; right: -6px;
      background: var(--accent);
      color: var(--bg);
      border-radius: 50%;
      padding: 2px 6px;
      font-size: 0.7rem;
      line-height: 1;
    }

  }

  /* =========================================
     (DEPRECATED) Estilos de tabla eliminados 2025-10
     Reemplazados por layout de cards horizontales.
     Se mantiene bloque comentado para referencia histórica.
     ========================================= */
  /* table, thead, th, td, tbody { display:none; }  <- no se usa */

  /* =========================================
     NUEVO LAYOUT LISTA DE PRODUCTOS 2025-10
     - Contenedor principal .productos-list
     - Cada ítem: .producto-row (flex) => imagen + info + acciones
     - Mobile: se apilan columnas
     ========================================= */
  .catalog-wrapper { 
    max-width: 1400px; 
    margin: 0 auto; 
    display: flex; 
    flex-direction: column; 
    gap: 12px; 
  }
  .catalog-header { 
    display:flex; 
    justify-content: space-between; 
    align-items:center; 
    padding:4px 4px 0; 
  }
  .catalog-meta { font-size:0.85rem; color:#666; font-weight:500; }

  /* Lista */
  .productos-list { 
    display:flex; 
    flex-direction:column; 
    gap:10px; 
    background:#ffffff00; /* NUEVO: fondo más oscuro para contraste */
    padding:6px; 
    border-radius:14px; 
    box-shadow: 0px 0px 18px 1px rgba(255, 255, 255, 0);
    border: 1px solid #18181800;
  }
  /* Estado vacío */
  .productos-empty { 
    text-align:center; 
    padding:40px 20px; 
    color:#666; 
    font-weight:500; 
  }

  /* Row/Card (estilo inspirado en listados modernos B2B) */
  .producto-row { 
    --rowPad:14px; 
    display:grid; 
    grid-template-columns: 110px 1fr 120px 110px; /* img | desc | marca | precio */
    gap:18px; 
    align-items:stretch; 
    background:linear-gradient(135deg, #e7e7e7 0%, #e6e6e6 60%, #dcdcdc 100%);
    border:1px solid #e6e6e68f; 
    border-radius:5px; 
    padding:var(--rowPad) clamp(10px,1.8vw,28px); 
    position:relative; 
    isolation:isolate; 
    cursor:pointer; 
    overflow:hidden; 
  }
  /* =========================================
     NUEVO GRID SUPPLIER-LIKE (override)
     Columns: img | title | OEM | OE | Brand | Application | Price
     ========================================= */
  .product-grid {
    /* img | title(meta) | cross | app | brand | price */
    grid-template-columns: 110px minmax(250px,1fr) 180px 200px 120px 140px;
    align-items: flex-start;
  }
  @media (max-width: 1280px){
    .product-grid { grid-template-columns: 100px minmax(260px, 1fr) 130px 170px 100px 140px; }
  }
  @media (max-width: 1100px){
    .product-grid { grid-template-columns: 90px 240px 120px minmax(160px,1fr) 100px 120px; }
  }
  @media (max-width: 980px){
    .product-grid { grid-template-columns: 90px 1fr 120px 110px; }
    .product-grid .pg-app, .product-grid .pg-cross { display:none; }
  }
  @media (max-width: 820px){
    .product-grid { grid-template-columns: 85px 1fr 120px; }
    .product-grid .pg-app, .product-grid .pg-cross { display:none; }
  }
  @media (max-width: 620px) {
    .product-grid { grid-template-columns: 80px 1fr; }
    .product-grid .pg-brand { display:none; }
    .brand-wrapper-mobile { display:flex; }
    .brand-wrapper-mobile .brand-logo-img { max-width:50px; max-height:25px; }
  }
  .product-grid .col-label { font-size:.8rem; letter-spacing:.6px; font-weight:700; color:#555; text-transform:uppercase; margin-bottom:6px; }
  .product-grid h3 { font-size:1.05rem; margin:0 0 6px; color:#000; line-height:1.2; }
  .pg-meta-stack { display:flex; flex-direction:column; gap:2px; margin-top:4px; }
  .pg-meta-stack .meta-line { font-size:.8rem; color:#222; font-weight:600; letter-spacing:.4px; }
  .pg-meta-stack .meta-line strong { font-weight:700; }
  .pg-meta-stack .sku-line { margin-top:4px; }
  .product-grid .pg-sku { font-size:.7rem; font-weight:600; letter-spacing:.5px; background:#cfd2d5; padding:4px 6px 3px; display:inline-block; border-radius:4px; color:#0a0a0a; }
  .product-grid .pg-cat { font-size:.55rem; background:#1d1d1d; color:#e0e0e0; padding:4px 6px 3px; border-radius:4px; display:inline-block; letter-spacing:.5px; }
  .pg-img { display:flex; align-items:center; justify-content:center; background:#b4b19f8f; border:1px solid #e6e6e67a; border-radius:10px; overflow:hidden; width:100%; aspect-ratio:1/1; }
  .pg-img img { width:100%; height:100%; object-fit:cover; }
  .fallback-code { font-size:.63rem; color:#555; font-weight:600; padding:4px; text-align:center; }
  .pg-cross .cross-box { display:flex; flex-direction:column; align-items:flex-start; gap:6px; }
  .cross-toggle { font-size:.75rem; font-weight:700; background:#222; color:#fff; border:1px solid #333; padding:6px 10px 5px; border-radius:6px; cursor:pointer; letter-spacing:.5px; }
  .cross-toggle.open { background:#555; }
  .cross-list { display:flex; flex-wrap:wrap; gap:4px; max-width:100%; }
  .cross-list span { font-size:.55rem; background:#2b2b2b; color:#e0e0e0; padding:4px 6px 3px; border-radius:4px; border:1px solid #353535; }
  .cross-code { display:inline-block; font-size:.5rem; font-weight:600; background:#2b2b2b; color:#eee; padding:3px 6px 3px; border-radius:5px; border:1px solid #3a3a3a; margin:0 4px 4px 0; letter-spacing:.4px; }
  .cross-more { font-size:.68rem; font-weight:600; background:#11111100; color:#5cc625; border:1px solid #2d2d2d1c; padding:3px 7px 3px; border-radius:5px; cursor:pointer; }
  .cross-more:hover { background:#000; }
  .cross-label-nowrap { white-space:nowrap; }
  .cross-bullets { list-style:disc; padding-left:18px; margin:0; display:flex; flex-direction:column; gap:4px; }
  .cross-bullets li { font-size:.75rem; font-weight:600; color:#161616; }
  /* Quitar viñeta al contenedor del botón 'más/menos' */
  .cross-bullets li.toggle-holder,
  .app-bullets li.toggle-holder { list-style:none; }
  /* Unificado botón toggle (equivalencias / vehículos) */
  .toggle-more-btn { font-size:.75rem; background:#e9f5e900; color:#239923; border:0px solid #a9d5b0; padding:1.5px 1px 1.5px; border-radius:4px; cursor:pointer; font-weight:600; }
  .toggle-more-btn:hover { background:#bfe0bf; color:#0c4e0c;}
  /* Estado colapsado: mostrar sólo 2 ítems de datos, ocultando del 3º en adelante */
  .cross-bullets.collapsed li.data-item:nth-of-type(n+3),
  .app-bullets.collapsed li.data-item:nth-of-type(n+3){ display:none; }
  .brand-pill { display:inline-block; font-size:.65rem; background:#2a2a2a; color:#dedede; padding:6px 8px 5px; border-radius:6px; border:1px solid #343434; letter-spacing:.5px; }
  .brand-logo-img { max-width:90px; max-height:42px; object-fit:contain; mix-blend-mode:normal; filter:contrast(1.05); }
  .brand-wrapper { display:flex; align-items:center; justify-content:center; min-height:48px; }
.pg-app .app-wrapper {
  /* Match cross-box look and layout */
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 6px;
  background: transparent;           /* remove card-ish background */
  border: none;                       /* remove old border */
  padding: 0;                         /* remove inner padding */
  max-height: none;                   /* let content size naturally */
  overflow: visible;                  /* no clipping */
}
.app-bullets {
  list-style: disc;
  padding-left: 18px;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.app-bullets li {
  font-size: .75rem;
  font-weight: 600;
  color: #161616;
}
.pg-app .pg-app-expand {
  margin-top: 6px;
  font-size: .7rem;
  background: #e9f5e9;
  color: #1a801a;
  border: 1px solid #a9d5b0;
  padding: 3px 10px 3px;
  border-radius: 4px;
  cursor: pointer;
}
.pg-app .pg-app-expand:hover { background: #d8efd8; }
  .app-full { white-space:pre-wrap; font-size:.62rem; }
  .pg-price { display:flex; flex-direction:column; align-items:flex-end; justify-content:center; gap:8px; }
  .brand-wrapper-mobile { display:none; align-items:center; justify-content:flex-end; margin-top:4px; }
  .brand-wrapper-mobile .brand-logo-img { max-width:60px; max-height:30px; }
  .brand-wrapper-mobile .brand-pill { font-size:.55rem; padding:3px 6px 2px; }

  .producto-row:before { /* halo */
    content:""; position:absolute; inset:0; background:radial-gradient(circle at 15% 30%,rgba(255,255,255,.08),transparent 60%); opacity:0; transition:.35s ease; pointer-events:none;
  }
  .producto-row:hover { border-color:#2f2f2f; box-shadow:0 6px 18px -8px rgba(0,0,0,.55); transform:translateY(-2px); }
  .producto-row:hover:before { opacity:1; }
  .producto-row:active { transform:translateY(0); }

  /* Sub-secciones */
  .pr-imgWrap { display:flex; align-items:center; justify-content:center; background:#b4b19f8f; border: 1px solid #e6e6e67a; border-radius:10px; overflow:hidden; }
  .pr-imgWrap img { width:100%; height:100%; object-fit:cover; aspect-ratio:1/1; display:block; }
  .pr-info { display:flex; flex-direction:column; justify-content:space-between; gap:4px; min-width:0; }
  .pr-info h3 { font-size:clamp(.95rem,1.05rem,1.1rem); font-weight:600; line-height:1.25; color:#131313; letter-spacing:.2px; margin-bottom:4px; }
  /* Nuevo contenedor unificado de chips (códigos) */
  .pr-codes { display:flex; flex-wrap:wrap; gap:6px; align-items:center; }
  .chip { 
    --chip-bg:#262626; --chip-bd:#303030; --chip-color:#c9d1d9; 
    font-size:.62rem; letter-spacing:.5px; font-weight:600; text-transform:uppercase; 
    padding:5px 8px 4px; border-radius:6px; border:1px solid var(--chip-bd); background:var(--chip-bg); color:var(--chip-color); line-height:1; position:relative; 
    display:inline-flex; gap:4px; align-items:center; max-width:100%;
  }
  .chip-main { --chip-bg:#333; --chip-bd:#3d3d3d; --chip-color:#fff; box-shadow:0 0 0 1px rgba(255,255,255,0.05), inset 0 0 0 1px rgba(255,255,255,0.05); }
  .chip-oem { --chip-bg:#162e47; --chip-bd:#204867; --chip-color:#c4deff; }
  .chip-oe  { --chip-bg:#452444; --chip-bd:#5a3158; --chip-color:#f5d4f1; }
  .chip-cross { --chip-bg:#2c2c2c; --chip-bd:#3a3a3a; --chip-color:#d9dde3; }
  .chip:hover { filter:brightness(1.08); }
  .chip:active { transform:scale(.96); }
  .pr-extra { margin-top:6px; display:flex; flex-wrap:wrap; gap:6px; }
  .pr-extra .ex-cat, .pr-extra .ex-veh { font-size:.55rem; letter-spacing:.5px; background:#1d1d1d; border:1px solid #292929; padding:4px 6px 3px; border-radius:5px; color:#9fa7b0; text-transform:uppercase; }
  .pr-marca { display:flex; flex-direction:column; align-items:flex-start; justify-content:center; gap:4px; font-size:.8rem; font-weight:600; color:#d0d0d0; }
  .pr-marca span { background:#2a2a2a; padding:6px 10px 5px; border-radius:8px; border:1px solid #343434; font-size:.7rem; letter-spacing:.5px; }
  .pr-precioWrap { display:flex; flex-direction:column; justify-content:center; align-items:flex-end; gap:8px; }
  .pr-precio { font-size:1.5rem; font-weight:700; color:#000000; letter-spacing:.5px; text-shadow:0 0 0px rgba(0,0,0,.4); }
  .pr-stock { font-size:.65rem; font-weight:600; letter-spacing:.5px; padding:4px 7px 3px; border-radius:6px; background:#223a24; color:#6ddf7d; border:1px solid #2b5b33; }
  .pr-stock.out { background:#3a2222; color:#f07d7d; border-color:#5b2b2b; }

  /* Responsive ajustes */
  @media (max-width: 1024px) {
    .producto-row { grid-template-columns: 90px 1fr 100px 90px; }
  }
  @media (max-width: 820px) {
    .producto-row { grid-template-columns: 90px 1fr 90px; grid-template-areas: "img info precio"; }
    .pr-marca { display:none; }
  }
  @media (max-width: 620px) {
    .producto-row {  grid-template-areas: "img info" "img precio"; row-gap:10px; }
    .pr-precioWrap { align-items:flex-start; }
  }
  @media (max-width: 480px) {
    .productos-list { padding:4px; gap:8px; }
    .producto-row { --rowPad:12px; gap:14px; }
    .pr-info h3 { font-size:.9rem; }
    .pr-precio { font-size:1rem; }
    .brand-wrapper-mobile { display:flex; }
    .brand-wrapper-mobile .brand-logo-img { max-width:60px; max-height:32px; }
    .brand-wrapper-mobile .brand-pill { font-size:.5rem; padding:2px 5px 1px; }
  }

  /* Utilidades de animación de entrada */
  .fade-in { animation: fadeIn .45s ease both; }
  @keyframes fadeIn { from { opacity:0; transform:translateY(6px); } to { opacity:1; transform:translateY(0); } }
  
  /* =========================================
     Hide alternative columns on mobile
     ========================================= */
  @media (max-width: 768px) {
    .col-codigo-alt,
    .col-marca {
      display: none;
    }
  }
  
  /* =========================================
     Product Detail & Carousel
     ========================================= */
  #productos-table img {
    border-radius: 2.5px;      /* ajusta el valor a tu gusto */
    object-fit: cover;       /* mantiene proporción y recorta si hace falta */
  }   
  #producto-detalle {
    /* padding: var(--spacing);
    background: var(--surface); */
    border-radius: var(--radius);
    margin-bottom: var(--spacing);
    box-shadow: 0 0px 0px rgba(0,0,0);
  }
  .product-detail-container {
    display: flex;
    gap: var(--spacing);
    align-items: flex-start;
  }
  .product-image-container,
  .carousel-main {
    flex-shrink: 0;
    max-width: 300px;
  }
  .carousel-main img {
    width: 100%;
    border-radius: var(--radius);
    border: 1px solid var(--border);
  }
  .carousel-thumbs {
    display: flex;
    justify-content: center;
    gap: 8px;
    margin-top: 8px;
  }
  .carousel-thumbs img {
    width: 85px; height: 85px;
    object-fit: cover;
    border-radius: var(--radius);
    border: 2px solid transparent;
    cursor: pointer;
  }
  .carousel-thumbs img.selected {
    border-color: var(--accent);
  }
  .carousel-nav button {
    background: rgba(0,0,0,0.6);
    color: #fff;
    border: none;
    padding: 6px 12px;
    margin: 0 4px;
    border-radius: var(--radius);
    cursor: pointer;
    transition: background var(--transition);
  }
  .carousel-nav button:hover {
    background: rgba(0,0,0,0.8);
  }

    /* en tu style.css */
  .carousel-nav {
    display: none;
  }
  
  /* =========================================
     Product Info & Action Buttons
     ========================================= */
  .product-info-container {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 12px;
  }
  .botones-accion {
    display: flex;
    gap: 16px;
    justify-content: center;
    margin-top: var(--spacing);
  }

  .btn-whatsapp {
    display: inline-flex;      /* convierte el botón en flexbox */
    align-items: center;       /* centra verticalmente icono y texto */
    justify-content: center;   /* (opcional) centra también en horizontal */
    gap: 0.5em;                 /* separa icono y texto */
    padding: 0.5em 1em;         /* ajusta el relleno a tu gusto */
  }
  .btn-whatsapp svg,
  .btn-whatsapp .fa-whatsapp {
    /* margin-right: 2px; */
    color: #25D366; /* verde WhatsApp */
    flex-shrink: 0;             /* evita que el icono se encoja */
    font-size: 2em;           /* ajusta tamaño del icono */
    text-shadow:
    0.4px  0 currentColor,
   -0.4px  0 currentColor,
    0  0.4px currentColor,
    0 -0.4px currentColor;
  }
  
  
  /* =========================================
     Buttons & Forms
     ========================================= */
  button {
    background: var(--accent);
    color: var(--bg);
    border: none;
    border-radius: var(--radius);
    padding: 10px 20px;
    font-size: 1rem;
    cursor: pointer;
    transition: background var(--transition);
  }
  button:hover {
    background: var(--accent-dark);
  }
  form {
    display: flex;
    flex-direction: column;
    max-width: 400px;
    margin: 0 auto;
  }
  form label {
    margin-top: 12px;
    color: var(--text);
  }
  form input {
    padding: 8px;
    margin-top: 6px;
    border: 1px solid var(--border);
    border-radius: var(--radius);
    background: var(--bg);
    color: var(--text);
  }
  
  /* =========================================
     Utilities & Clickable Elements
     ========================================= */
  .clickable {
    cursor: pointer;
  }

  /* layout en cart.html: texto a la izquierda, foto a la derecha */
.cart-item {
  display: flex;
  justify-content: space-between;
  align-items: center;
  border: 1px solid #444;
  padding: 15px;
  margin-bottom: 10px;
  gap: 20px;
}
.cart-item-info {
  flex: 1;
}
.cart-item-image-container img {
  max-width: 120px;
  height: auto;
  border-radius: 4px;
  border: 1px solid #444;
}

  /* .cart-item {
    background: var(--surface);
    border: 2px solid var(--border);
    border-radius: var(--radius);
    padding: var(--spacing);
    margin-bottom: var(--spacing);
  } */
  
  /* ==================================================================================
     AJUSTES RESPONSIVE - Adaptación para móviles y tablets
     - Header se reorganiza verticalmente en pantallas pequeñas
     - Logo y elementos se ajustan proporcionalmente
     ================================================================================== */
  @media (max-width: 768px) {
    /* NUEVO (ajuste móvil): Primera fila logo+carrito, segunda fila buscador 100% */
    .shop-bar { flex-direction: row; flex-wrap: wrap; align-items: center; padding: 10px 12px 12px; gap: 8px; }
    body { padding-top: 130px; }
    /* Producto sin buscador: menos alto */
    body.page-product { padding-top: 70px; }
    body.page-product .shop-bar { flex-wrap: nowrap; padding: 10px 12px; }
    body.page-product .search-container { display:none !important; }
    .header-left { order: 0; align-self: center; }
    .header-right { order: 1; margin-left: auto; align-self: center; }
    .search-container { order: 2; flex: 1 1 100%; max-width: 100%; margin: 4px 0 0; }
    .search-container input { font-size: 1rem; }
    .brand-logo { height: 38px; }
    .product-detail-container { flex-direction: column; align-items: center; }
    .carousel-main, .product-image-container { width: 90vw; }
    .product-info-container { width:100%; max-width:520px; text-align:left; }
  }
  /* ==================================================================================
     AJUSTES PARA MÓVILES PEQUEÑOS (480px y menos)
     - Elementos más compactos para pantallas muy pequeñas
     ================================================================================== */
  @media (max-width: 480px) {
    
    /* Header más compacto en móviles pequeños - MANTENER FIJO */
    .shop-bar {
      padding: 8px;
      gap: 8px;
      position: fixed; /* Asegurar que siga siendo fijo */
      top: 0;
      left: 0;
      right: 0;
    }
    
    /* Ajustar padding para móviles pequeños */
    body {
      padding-top: 100px; /* Menos espacio para móviles pequeños */
    }
    
    /* Logo aún más pequeño */
    .brand-logo {
      height: 30px;
    }
    
    /* Tabla más compacta */
    th, td {
      padding: 8px;
      font-size: 0.8rem;
    }
    
    /* Botones más pequeños */
    button {
      padding: 8px 16px;
      font-size: 0.9rem;
    }
    
    /* Contenido principal más compacto */
    main {
      /* padding: 20px; */
      padding-top: 20px;
      padding-right: 8px;
      padding-bottom: 20px;
      padding-left: 8px;
    }
    
    /* Carrito más compacto */
    .header-right .carrito-icon {
      font-size: 1.5rem;
      padding: 6px;
    }
    
    /* Badge del carrito más pequeño */
    .header-right .carrito-icon #carrito-count {
      font-size: 0.7rem;
      min-width: 16px;
      padding: 1px 4px;
    }
  }
  


/* ───────────────────────────────────────────────────────────────────────────
   1) Flecha “back” en header-bar, no en el zócalo
────────────────────────────────────────────────────────────────────────── */


  /* =========================================
     Sección Izquierda del Header
     - Contiene el logo de IMPEXAR
     - Enlaza a la página principal
     ========================================= */
  .header-left {
    display: flex;
    align-items: center;
    gap: 15px;
    flex-shrink: 0; /* No se encoge en pantallas pequeñas */
  }
  
  /* Enlace del logo principal */
  .brand-logo-link {
    display: flex;
    align-items: center;
    text-decoration: none;
    transition: opacity var(--transition);
  }
  
  /* Efecto hover del logo */
  .brand-logo-link:hover {
    opacity: 0.8;
    transform: scale(1.02); /* Ligero zoom al hacer hover */
  }
  
  /* Logo de IMPEXAR en el header */
  .brand-logo {
    height: 45px; /* Tamaño desktop */
    width: auto;
    transition: transform 0.2s ease;
  }
  
  .page-title {
    font-size: 1.5rem;
    color: var(--text-dark);
    margin: 0 0 0 15px;
    font-weight: 600;
  }/* Asegúrate de que tu HTML ponga la flecha dentro de .header-bar, justo antes del <h1> */
.header-left .back-arrow {
  display: inline-flex;
  font-size: 1.5rem;
  color: var(--text-dark);
  text-decoration: none;
  transition: color var(--transition);
}
.header-left .back-arrow:hover {
  color: var(--accent-dark);
}


/* ==================================================================================
  Estilos base para el toast/popup
================================================================================== */
.toast {
  position: fixed;
  /* bottom: 20px; */
  top: 20px;                   /* lo situamos 20px debajo del top */
  left: 50%;
  transform: translateX(-50%) translateY(100%);
  background: var(--special);
  color: var(--bg);
  padding: 0.75em 1.25em;
  border-radius: var(--radius);
  box-shadow: 0 4px 12px rgba(0,0,0,0.15);
  opacity: 0;
  transition: transform 0.3s ease, opacity 0.3s ease;
  z-index: 1000;
}
/* Cuando añades la clase 'show', sube y aparece */
.toast.show {
  transform: translateX(-50%) translateY(0);
  opacity: 1;
}


/* ───────── Botones deshabilitados ───────── */
button:disabled {
  background: #555 !important;
  color: #999 !important;
  cursor: not-allowed !important;
}

/* ───────── Widget flotante WhatsApp ───────── */
.whatsapp-float {
  position: fixed;
  bottom: 20px;
  right: 20px;
  width: 60px;
  height: 60px;
  background-color: #25d366;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 4px 12px rgba(37, 211, 102, 0.4);
  z-index: 1000;
  transition: all 0.3s ease;
  animation: whatsapp-pulse 2s infinite;
}

@keyframes whatsapp-pulse {
  0% {
    box-shadow: 0 4px 12px rgba(37, 211, 102, 0.4);
  }
  50% {
    box-shadow: 0 4px 20px rgba(37, 211, 102, 0.7);
  }
  100% {
    box-shadow: 0 4px 12px rgba(37, 211, 102, 0.4);
  }
}

.whatsapp-float:hover {
  transform: scale(1.1);
  background-color: #20c05c;
}

.whatsapp-float a {
  color: #fff;
  font-size: 30px;
  text-decoration: none;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 100%;
}

.whatsapp-float a:hover {
  color: #fff;
}

/* Responsive WhatsApp button */
@media (max-width: 768px) {
  .whatsapp-float {
    width: 55px;
    height: 55px;
    bottom: 15px;
    right: 15px;
  }
  .whatsapp-float a {
    font-size: 26px;
  }
}

/* =========================================
   Detalle de producto (2025-10) – Unificación paleta con listado
   - Se abandona fondo negro para usar mismo gradiente claro que .producto-row
   - Tipografía y badges replican estilos de la lista (precio negro, stock pill verde, etc.)
   ========================================= */
.product-detail-main { max-width:1400px; margin:0 auto; }
.pd-wrapper {
  display:flex;flex-wrap:wrap;gap:2rem;padding:1.75rem;
  background:linear-gradient(135deg, #e7e7e7 0%, #e6e6e6 60%, #dcdcdc 100%);
  color:#131313;border-radius:10px;
  border:1px solid #e6e6e68f;box-shadow:0 6px 18px -8px rgba(0,0,0,.25);
  position:relative;isolation:isolate;
}
.pd-gallery{flex:1 1 420px;min-width:320px;display:flex;flex-direction:column;gap:.85rem}
.pd-gallery .pd-img{display:none;justify-content:center;align-items:center;background:#f5f5f5;padding:1rem;border-radius:12px;min-height:320px;border:1px solid #e6e6e6}
.pd-gallery .pd-img.active{display:flex}
.pd-gallery img{max-width:100%;max-height:380px;object-fit:contain;}
.pd-thumbs{display:flex;gap:.5rem;flex-wrap:wrap}
.pd-thumb{background:#ffffff;border:1px solid #d0d0d0;padding:4px;border-radius:8px;cursor:pointer;box-shadow:0 2px 4px -2px rgba(0,0,0,.18);}
.pd-thumb:hover{background:#f1f1f1}
.pd-thumb img{width:70px;height:70px;object-fit:contain;display:block}
.pd-info{flex:1 1 460px;min-width:320px;display:flex;flex-direction:column;gap:.9rem}
.pd-title{margin:0;font-size:1.9rem;line-height:1.15;color:#000;font-weight:700}
.pd-sku,.pd-cat,.pd-brand,.pd-oe-line{font-size:.85rem;color:#222;font-weight:600;letter-spacing:.4px}
.pd-price-stock{display:flex;gap:1.25rem;align-items:center;margin-top:.25rem;flex-wrap:wrap}
.pd-price{font-size:2rem;font-weight:700;color:#000;letter-spacing:.5px;text-shadow:none}
.pd-stock{font-size:.65rem;font-weight:600;letter-spacing:.5px;padding:4px 12px 4px;border-radius:20px;background:#223a24;color:#6ddf7d;border:1px solid #2b5b33}
.pd-stock.out{background:#3a2222;color:#f07d7d;border-color:#5b2b2b}
/* Bloques antiguos de códigos se reemplazan por secciones apiladas */
.pd-codes{display:none}
/* Info lines */
.pd-oem-line{font-size:.85rem;color:#222;font-weight:600;letter-spacing:.4px;margin-top:.15rem}
.pd-section{margin-top:1.25rem;}
.pd-section h3{margin:0 0 .55rem;font-size:.8rem;letter-spacing:.6px;color:#555;text-transform:uppercase;font-weight:700}
/* Grid 3 columnas adaptable - para equivalencias */
.pd-grid-3{display:grid;grid-template-columns:repeat(auto-fill,minmax(140px,1fr));gap:.4rem 1.2rem;list-style:disc;margin:0 0 0 1.1rem;padding:0;max-height:280px;overflow:auto;font-size:.75rem}
.pd-grid-3 li{font-weight:600;color:#161616;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
/* Grid 2 columnas para aplicaciones en desktop */
.pd-aplicaciones .pd-grid-3{display:grid;grid-template-columns:1fr 1fr;gap:.4rem 1.2rem;max-height:340px}
/* Grid 1 columna para aplicaciones en mobile */
@media (max-width: 768px) {
  .pd-aplicaciones .pd-grid-3{grid-template-columns:1fr;gap:.4rem;}
}
.pd-brand-logo{max-height:40px;width:auto;vertical-align:middle;margin-left:6px;filter:contrast(1.05);}
/* Scrollbar suave claro/oscuro híbrido */
.pd-block ul::-webkit-scrollbar{width:6px}
.pd-block ul::-webkit-scrollbar-track{background:#d0d0d0;border-radius:10px}
.pd-block ul::-webkit-scrollbar-thumb{background:#a5a5a5;border-radius:10px}
/* Compatibilidad usa mismo grid ahora */
.pd-compat ul{display:none}
.pd-fallback{display:flex;align-items:center;justify-content:center;background:#f5f5f5;border:1px dashed #c7c7c7;font-size:1.2rem;border-radius:8px;min-height:320px;padding:1rem;color:#777}
.pd-empty{padding:2rem;background:#f1f1f1;color:#333;border-radius:8px;text-align:center;border:1px solid #ddd}
/* Ajuste responsive nuevo */
@media (max-width:860px){
  .pd-wrapper{padding:1.2rem}
  .pd-gallery .pd-img{min-height:260px}
  .pd-gallery img{max-height:300px}
  .pd-title{font-size:1.55rem}
}

@media (max-width:860px){
  .pd-wrapper{padding:.9rem}
  .pd-price{font-size:1.55rem}
  .pd-gallery .pd-img{min-height:220px}
}