/* ====================================================================
   Variables de marca
   ==================================================================== */
   :root{
    --color-primario:  #2e2367;
    --color-secundario:#fcc118;
    --gray-50:#f8f9fa;
    --gray-100:#f7f7fb;
    --gray-150:#f5f5fb;
    --gray-200:#ececf4;
    --gray-300:#e9ecef;
    --gray-400:#dee2e6;
    --text-muted:#6c757d;
  }

/* ====================================================================
   Base / Tipografía / Utilidades
   ==================================================================== */
   html,body{height:auto;overflow-y:auto;}
   body{
    background-color:var(--gray-50);
    color:#fcc118;
    font-family:'Poppins',sans-serif;
  }
  h1,h2,h3,h6,a,input,.btn,.navbar,.footer-app{font-family:'Poppins',sans-serif;}
  img,a{
    user-drag:none;user-select:none;
    -webkit-user-drag:none;-webkit-user-select:none;
    -moz-user-select:none;-ms-user-select:none;
  }

/* Colores utilitarios */
.text-primario{color:#2e2367!important;}
.text-secundario{color:#fcc118!important;}
.bg-primario{background:#2e2367!important;color:#fcc118!important;}
.bg-secundario{background:#fcc118!important;color:#fff!important;}

/* Enlaces */
a{color:#fcc118;}
a:hover{color:#2e2367;text-decoration:none;}

/* ====================================================================
   Botones (unificado, sin duplicados)
   ==================================================================== */
   .btn-warning{
    background-color:#2e2367;
    border-color:#2e2367;
    color:#fcc118;
  }
  .btn-warning:hover,
  .btn-warning:focus{
    filter:brightness(.95);
    color:#fcc118;
  }

/* Primario forzado cuando tiene .text-white */
.btn-primary.text-white{
  background-color:#2e2367!important;
  border-color:#2e2367!important;
  color:#fcc118!important;
}
.btn-primary.text-white:hover,
.btn-primary.text-white:focus,
.btn-primary.text-white:active{
  background-color:#e6ac00!important;
  border-color:#e6ac00!important;
  color:#fcc118!important;
}

/* Input-group botón buscar */
.input-group .btn{background-color:#2e2367;border:none;}

/* Pills de navegación Bootstrap */
.nav-pills .nav-link.active{
  background-color:#2e2367!important;
  color:#fcc118!important;
  font-weight:600;
}

/* ====================================================================
   Navbar
   ==================================================================== */
   .navbar-light .navbar-nav .nav-link{color:#fcc118;}
   .navbar-light .navbar-nav .nav-link:hover{color:#2e2367;}

/* ====================================================================
   Footer
   ==================================================================== */
   .footer-links a{color:#6c757d;text-decoration:none;}
   .footer-links a:hover{text-decoration:underline;}

   .footer-app{
    position:fixed;bottom:0;left:0;width:100%;
    background:#fff;border-top:1px solid var(--gray-400);
    display:flex;justify-content:space-around;align-items:center;
    padding:10px 0;z-index:1030;
  }
  .footer-app a{text-align:center;font-size:.85rem;color:#444;text-decoration:none;}
  .footer-app a i{display:block;font-size:1.25rem;margin-bottom:2px;}
  .footer-app a:hover,.footer-app a.active{color:#2e2367;}

  /* ─────────────────────────────────────────────────────────────────────
     Padding-bottom global: compensa el .footer-app fijo (56px + border 2px)
     y el #shipBar cuando está visible (~30px más).

     Solo se aplica desde desktop (≥992px). En mobile las páginas que usan
     sticky bar propio (chequeo, carro, producto) ya manejan su propio
     padding y no queremos sumarlo.
     ─────────────────────────────────────────────────────────────────── */
     @media (min-width: 992px) {
      body {
        padding-bottom: 72px; /* 56 footer + 2 border + 14 aire */
      }
      /* Si hay shipBar visible (no display:none inline) aumentar */
      body:has(#shipBar:not([style*="display:none"])) {
        padding-bottom: 102px; /* 72 + 30 shipBar */
      }
      /* Fallback navegadores sin :has() — un poco más de aire por si acaso */
      @supports not (selector(:has(*))) {
        body { padding-bottom: 102px; }
      }
    }

/* Franja informativa superior */
.info-strip{background:#f5f5f5;padding:10px 0;font-size:.875rem;}
.info-strip i{color:#2e2367;}

/* ====================================================================
   Navegación de categorías (cinta)
   ==================================================================== */
   .nav-categorias{
    overflow-x:auto;white-space:nowrap;
    display:flex;align-items:center;gap:1rem;padding:.5rem 0;
    -webkit-overflow-scrolling:touch;
  }
  .nav-categorias::-webkit-scrollbar{display:none;}

  .nav-categorias-wrapper{position:relative;}
  .nav-categorias-wrapper::before,
  .nav-categorias-wrapper::after{
    content:'';position:absolute;top:0;width:20px;height:100%;
    z-index:2;pointer-events:none;
  }
  .nav-categorias-wrapper::before{left:0;background:linear-gradient(to right,#fff,transparent);}
  .nav-categorias-wrapper::after{right:0;background:linear-gradient(to left,#fff,transparent);}

  .cat-link{
    display:flex;flex-direction:column;align-items:center;
    text-decoration:none;min-width:70px;color:#444;font-size:12px;
  }
  .cat-link img{width:38px;height:38px;object-fit:contain;margin-bottom:4px;}
  .cat-link:hover,.cat-link.active{color:#2e2367;font-weight:700;}

/* Pista “desliza” */
.swipe-hint{
  position:absolute;top:5px;left:50%;transform:translateX(-50%);
  font-size:.75rem;background:#2e2367;color:#fff;
  padding:2px 8px;border-radius:20px;animation:fadeOut 4s ease-in-out forwards;z-index:5;
}
@keyframes fadeOut{0%{opacity:1}100%{opacity:0;display:none;}}

/* ====================================================================
   Cards de producto / Controles  (NORMALIZADO GLOBAL)
   ==================================================================== */
   .qty-input{background:#fff;border:1px solid #ddd;}
   .qty-minus,.qty-plus{width:32px;height:32px;font-size:1rem;line-height:1;}

/* Contenedor y body flexible (empuja CTA al final) */
.card-product,.product-card,.producto{
  display:flex;flex-direction:column;overflow:hidden;border-radius:16px;background:#fff;
}
.card-product .card-body,.product-card .card-body,.producto .card-body{flex:1 1 auto;}

/* Imagen: preparar overlay */
.card-product .thumb,
.product-card .thumb,
.producto .thumb,
.card-product .image,
.product-card .image,
.producto .image,
.card .card-img,
.card .card-img-top,
.img,.img-wrap,.figure{position:relative;}

/* Overlay “VER DETALLES” — compacto y contenido */
.card-product .btn-ver,
.card-product .ver-detalles,
.card-product .btn-ver-detalles,
.product-card .btn-ver,
.product-card .ver-detalles,
.product-card .btn-ver-detalles,
.producto .btn-ver,
.producto .ver-detalles,
.producto .btn-ver-detalles,
a[title*="DETALLES"],
a[title*="Detalles"]{
  position:absolute;left:50%;transform:translateX(-50%);
  bottom:8px;padding:.35rem .6rem;
  font-weight:700;line-height:1;
  font-size:clamp(.68rem,1.6vw,.80rem);
  border-radius:12px;
  max-width:78%;white-space:nowrap;text-overflow:ellipsis;overflow:hidden;
}

/* Títulos (2 líneas máximo, corte limpio) */
.card-product h3,.card-product h4,.card-product .card-title,
.product-card h3,.product-card h4,.product-card .card-title,
.producto .titulo,.product-title,.titulo-producto{
  margin:.25rem 0 .35rem 0;font-weight:700;font-size:1rem;line-height:1.25;
  display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;
  min-height:2.5em;word-break:break-word;
}

/* Meta (SKU, piezas...) con ellipsis */
.card-product .sku,.card-product .ref,
.product-card .sku,.product-card .ref,
.producto .sku,.producto .ref,.sku,.ref,.meta{
  font-size:.82rem;line-height:1.1;color:var(--text-muted);
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
}

/* ===================== Módulo de precio (coherente) ===================== */
.price-box{
  background:#fff7e0;border:1px solid #2e2367;
  border-radius:.75rem;padding:.6rem .7rem;
}
.offer-badge{background:#2e2367;color:#fcc118;}
.old-price{color:var(--text-muted);text-decoration:line-through;display:block;margin:.125rem 0 .25rem;}
.price-row{display:flex;align-items:center;justify-content:space-between;gap:.5rem;flex-wrap:nowrap;}
.price-amount{font-weight:700;font-size:1.08rem;color:#2e2367;line-height:1;}
.price-unit{color:var(--text-muted);text-align:right;white-space:nowrap;margin-left:auto;}

/* Píldora por mayor (reutilizable) */
.pill-xmayor{
  background:#fcc118;color:#fff;border-radius:999px;
  padding:2px 8px;font-size:.72rem;font-weight:700;text-transform:uppercase;
  letter-spacing:.2px;line-height:1;display:inline-block;white-space:nowrap;
}
@media (max-width:576px){
  .card-product .price-row{flex-wrap:wrap;row-gap:.15rem;}
  .card-product .price-amount{font-size:1.02rem;}
  .pill-xmayor{font-size:.68rem;padding:2px 7px;}
  .card-product .price-unit{
    flex:1 0 100%;margin-top:.12rem;text-align:left;white-space:normal;
    font-size:.85rem;padding-left:1.35rem;
  }
}

/* ====================================================================
   Secciones / Componentes varios
   ==================================================================== */
   .bg-header-beneficio{background:linear-gradient(90deg,#2e2367 0%,#4a387a 100%);}
   .icono-box{
    width:48px;height:48px;background-color:#fff3d4;border-radius:50%;
    display:flex;align-items:center;justify-content:center;font-size:1.3rem;
  }
  .text-shadow{text-shadow:1px 1px 4px rgba(0,0,0,.7);}
  .obj-cover{object-fit:cover;}

/* Controles del carrusel Bootstrap 5 */
.carousel-control-prev-icon,
.carousel-control-next-icon{
  background-size:100% 100%;background-repeat:no-repeat;background-position:center;
  width:40px;height:40px;background-color:rgba(0,0,0,.5);border-radius:50%;
}
.carousel-control-prev-icon{
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='%23fff' viewBox='0 0 8 8'%3E%3Cpath d='M5.5 0L4.09 1.41 6.67 4l-2.58 2.59L5.5 8l4-4-4-4z'/%3E%3C/svg%3E");
}
.carousel-control-next-icon{
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='%23fff' viewBox='0 0 8 8'%3E%3Cpath d='M2.5 0L1.09 1.41 3.67 4l-2.58 2.59L2.5 8l4-4-4-4z'/%3E%3C/svg%3E");
}

/* Botón hamburguesa */
.btn-hamburguesa{
  background:#fff;border:none;border-radius:12px;padding:10px 12px;
  box-shadow:0 2px 6px rgba(0,0,0,.15);
  display:flex;align-items:center;justify-content:center;transition:all .3s ease-in-out;
}
.btn-hamburguesa i{font-size:1.4rem;color:#fcc118;transition:color .2s ease-in-out;}
.btn-hamburguesa:hover{background:#2e2367;color:#fff;}
.btn-hamburguesa:hover i{color:#fff;}

/* ====================================================================
   Contenido enriquecido (editor)
   ==================================================================== */
   .contenido-editor ul{padding-left:1.2rem;margin-bottom:.75rem;}
   .contenido-editor li{margin-bottom:.5rem;list-style-type:disc;color:#fcc118;}
   .contenido-editor p{margin-bottom:.75rem;}
   .contenido-editor strong{color:#fcc118;}
   .contenido-editor h1,
   .contenido-editor h2,
   .contenido-editor h3{
    color:#fcc118;
    margin-top:1rem;margin-bottom:.5rem;font-weight:600;
  }

/* ====================================================================
   Encabezado categoría/subcategoría + Badges/Pills
   ==================================================================== */
   .page-title{line-height:1.2;margin-bottom:.25rem;}
   .subtitle{margin-top:.1rem;}

   .badge-por-mayor{
    background:#2e2367;color:#fcc118;
    border-radius:999px;padding:.25rem .75rem;font-weight:700;font-size:.85rem;
    display:inline-block;vertical-align:middle;
  }
  @media (max-width:576px){.badge-por-mayor{font-size:.78rem;padding:.2rem .6rem;}}

  .subtitle-inline{
    font-size:.92rem;line-height:1.2;font-weight:400;vertical-align:baseline;color:var(--text-muted);
  }
  .subtitle-inline .slash,.page-title .slash{margin:0 .35rem;opacity:.6;font-weight:400;}
  @media (max-width:576px){.subtitle-inline{font-size:.88rem;}}

/* ====================================================================
   Buscador (vista)
   ==================================================================== */
   .buscar-hero{
    background:#fff;border-radius:16px;box-shadow:0 6px 18px rgba(0,0,0,.06);padding:1rem;
  }
  .badge-filtro{background:#2e2367;color:#fcc118;}
  .grid-resultados{display:grid;grid-template-columns:repeat(2,1fr);gap:12px;}
  @media (min-width:768px){.grid-resultados{grid-template-columns:repeat(3,1fr);}}
  @media (min-width:1200px){.grid-resultados{grid-template-columns:repeat(4,1fr);}}
  .resultado-empty{border:1px dashed var(--gray-400);border-radius:12px;background:#fff;}

/* ====================================================================
   Chips / Filtros (scroll nativo)
   ==================================================================== */
   .chips-scroll{
    display:flex;align-items:center;gap:.5rem;
    overflow-x:auto;white-space:nowrap;-webkit-overflow-scrolling:touch;
    scrollbar-width:thin;scrollbar-color:#fcc118 transparent;
  }
  .chips-scroll::-webkit-scrollbar{height:6px;}
  .chips-scroll::-webkit-scrollbar-thumb{background:#fcc118;border-radius:8px;}

  .badge-filter{
    background:#fff!important;border:1px solid #fcc118!important;
    border-radius:999px!important;padding:.5rem .9rem!important;
    font-weight:600!important;letter-spacing:.2px;
    color:#fcc118!important;
    transition:background .15s,color .15s,border-color .15s;
  }
  .badge-filter:hover{
    background:#fcc118!important;color:#fff!important;border-color:#fcc118!important;
  }
  .badge-filter.active{
    background:#2e2367!important;color:#fcc118!important;border-color:#2e2367!important;
  }

/* Botón “Ver más” con colores de marca */
.btn-outline-brand{
  border-color:#fcc118!important;color:#fcc118!important;
}
.btn-outline-brand:hover,.btn-outline-brand:focus{
  background:#fcc118!important;color:#fff!important;border-color:#fcc118!important;
}

/* ====================================================================
   Buscador del nav (input + clear + submit)
   ==================================================================== */
   .nav-search-input{
    height:40px;
    /* 16px en mobile evita zoom iOS al enfocar; .85rem en desktop */
    font-size:16px;
  }
  .nav-search-input::-webkit-search-cancel-button,
  .nav-search-input::-webkit-search-decoration{
    -webkit-appearance:none;
    appearance:none;
  }
  .nav-search-submit{
    height:40px;
    /* Padding compacto en mobile para liberar ancho al input */
    padding:0 .9rem;
  }
  .nav-search-clear{
    position:absolute;
    right:64px; /* deja espacio para el botón submit */
    top:50%;
    transform:translateY(-50%);
    background:transparent;
    border:0;
    padding:0;
    width:32px;
    height:32px;
    display:flex;
    align-items:center;
    justify-content:center;
    color:#9aa0a6;
    cursor:pointer;
    z-index:2;
    font-size:1.05rem;
    border-radius:50%;
  }
  .nav-search-clear:hover,
  .nav-search-clear:focus{ color:#2e2367; outline:none; background:rgba(46,35,103,.08); }
  @media (min-width:992px){
    .nav-search-input{ font-size:.85rem; }
    .nav-search-submit{ padding:0 1.25rem; }
  }

/* ====================================================================
   Chip de monto del carro (desktop nav)
   ==================================================================== */
   .nav-cart-amount{
    display:inline-flex;
    align-items:center;
    height:22px;
    padding:0 .5rem;
    margin-left:.15rem;
    background:#2e2367;
    color:#fcc118;
    font-size:.75rem;
    font-weight:700;
    line-height:1;
    border-radius:11px;
    white-space:nowrap;
    letter-spacing:.01em;
    transition:transform .18s ease, background .18s ease;
  }
  .nav-cart-amount.pulse{
    animation:nav-cart-pulse .42s ease-out;
  }
  @keyframes nav-cart-pulse{
    0%   { transform:scale(1);    background:#fcc118; color:#2e2367; }
    45%  { transform:scale(1.12); background:#fcc118; color:#2e2367; }
    100% { transform:scale(1);    background:#2e2367; color:#fcc118; }
  }
/* En mobile el chip sigue oculto (lo manejamos en otra fase) — el footer-app
   ya tiene su propio badge. La regla de abajo es defensiva por si nav.php
   se renderiza fuera del contexto desktop esperado. */
   @media (max-width:991.98px){
    .nav-cart-amount{ display:none !important; }
  }

/* ====================================================================
   Autocomplete del nav
   ==================================================================== */
   .searchbox .autocomplete-panel{
    position:absolute;top:calc(100% + 6px);left:0;right:0;
    background:#fff;z-index:1031;max-height:60vh;overflow:auto;
    border:1px solid var(--gray-300,#dee2e6);border-radius:12px;
    box-shadow:0 8px 24px rgba(0,0,0,.08);padding:6px 0;
    overscroll-behavior:contain;
    -webkit-overflow-scrolling:touch;
  }
  /* Mobile: panel inline-positioned via JS (position:fixed). El JS ya setea top/left/right/maxHeight,
     acá solo nos aseguramos que el border-radius y sombra se vean bien. */
     @media (max-width:991.98px){
      .searchbox .autocomplete-panel{
        border-radius:14px;
        box-shadow:0 12px 32px rgba(0,0,0,.18);
      }
    }
    .ac-section-title{font-size:.75rem;font-weight:600;color:var(--text-muted);padding:6px 14px 4px;text-transform:uppercase;letter-spacing:.04em;}
    .ac-item{display:flex;align-items:center;gap:10px;padding:8px 14px;cursor:pointer;min-height:48px;}
    .ac-item:hover,.ac-item.active{background:var(--gray-50);}
    @media (max-width:991.98px){
      .ac-item{ min-height:56px; padding:10px 14px; }
    }
    .ac-thumb{width:36px;height:36px;object-fit:contain;background:#fff;border:1px solid #f1f3f5;border-radius:6px;flex-shrink:0;}
    .ac-icon{width:36px;text-align:center;opacity:.6;flex-shrink:0;}
    .ac-body{min-width:0;flex:1;}
    .ac-name{font-size:.9rem;line-height:1.2;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
    .searchbox .autocomplete-panel .ac-meta{display:flex;align-items:center;gap:6px;flex-wrap:wrap;font-size:.75rem;color:var(--text-muted);}
    .searchbox .autocomplete-panel .ac-sep{opacity:.45;}
    .searchbox .autocomplete-panel .badge{display:inline-flex;align-items:center;line-height:1;padding:.12rem .45rem;border-radius:8px;font-weight:600;}
    .searchbox .autocomplete-panel .ac-size{background:var(--gray-150);color:#fcc118;border:1px solid #e8e7f5;}
    .searchbox .autocomplete-panel .badge.bg-light.text-dark{
      background:#f1f3f5!important;border:1px solid #e6e9ef;color:#343a40!important;
    }
    .ac-badge{background:#2e2367;color:#fcc118;font-size:.65rem;padding:.1rem .35rem;border-radius:6px;margin-left:.25rem;}
    .ac-seeall{display:flex;align-items:center;justify-content:center;gap:.4rem;padding:14px;text-align:center;text-decoration:none;border-top:1px solid #f1f3f5;font-weight:600;color:#2e2367;min-height:48px;}
    .ac-seeall:hover{background:var(--gray-50);text-decoration:none;color:#2e2367;}

    /* Skeleton loader */
    #acLoader{padding:6px 0;}
    .ac-skeleton{display:flex;align-items:center;gap:10px;padding:10px 14px;}
    .ac-skeleton .sk-thumb{width:36px;height:36px;border-radius:6px;background:linear-gradient(90deg,#eef0f3 0%,#f7f8fa 50%,#eef0f3 100%);background-size:200% 100%;animation:acshim 1.2s ease-in-out infinite;flex-shrink:0;}
    .ac-skeleton .sk-lines{flex:1;display:flex;flex-direction:column;gap:6px;min-width:0;}
    .ac-skeleton .sk-line{height:10px;border-radius:4px;background:linear-gradient(90deg,#eef0f3 0%,#f7f8fa 50%,#eef0f3 100%);background-size:200% 100%;animation:acshim 1.2s ease-in-out infinite;}
    .ac-skeleton .sk-line.short{width:55%;}
    @keyframes acshim{0%{background-position:200% 0;}100%{background-position:-200% 0;}}

    /* Empty state */
    .ac-empty{padding:20px 14px 0;text-align:center;color:var(--text-muted);}
    .ac-empty-icon{font-size:2rem;color:#dadde3;margin-bottom:.5rem;display:block;}
    .ac-empty-title{font-size:.95rem;font-weight:600;color:#343a40;margin-bottom:.25rem;}
    .ac-empty-meta{font-size:.85rem;margin-bottom:.75rem;}
    .ac-empty .ac-seeall{margin-top:.5rem;border-top:1px solid #f1f3f5;}

/* ====================================================================
   Ofertas (sidebar + chips + grilla)
   ==================================================================== */
/* Tarjeta de categoría (sidebar) */
.cat-card{
  border:0;border-radius:16px;overflow:hidden;
  transition:transform .12s ease,box-shadow .12s ease;
}
.cat-card.active,.cat-card:hover{transform:translateY(-2px);box-shadow:0 8px 24px rgba(0,0,0,.08);}
.cat-card .btn.ver-cat{border-radius:999px;padding:.4rem .9rem;}

/* Chips subcategoría */
.chips-subcats{display:flex;gap:8px;padding-bottom:2px;}
.chips-subcats .chip{
  border:1px solid #e5e7eb;background:#fff;color:#111827;
  padding:6px 10px;border-radius:999px;font-size:.9rem;white-space:nowrap;
}
.chips-subcats .chip:hover{border-color:#d1d5db;}
.chips-subcats .chip.active{background:#fcc118;color:#fff;border-color:#fcc118;}

/* ====== Layout productos ====== */
.products-grid .col-12.col-sm-6.col-lg-4{display:flex;}
.products-grid .card-product,
.products-grid .product-card,
.products-grid .producto{width:100%;}

/* En escritorio queremos 4 por fila (override seguro) */
@media (min-width:992px){
  .products-grid .col-lg-4{flex:0 0 25%;max-width:25%;}
}

/* Ofertas grid → 3 por fila en escritorio */
.ofertas-grid > [class^="col-"],.ofertas-grid > [class*=" col-"]{}
@media (min-width:992px){
  .ofertas-grid > [class^="col-"],.ofertas-grid > [class*=" col-"]{
    flex:0 0 33.3333%;
    max-width:33.3333%;
  }
}

/* Títulos largos en ofertas */
.ofertas-grid .product-title,
.ofertas-grid .titulo-producto{
  display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;min-height:2.8em;
}

/* ====== Skeletons coherentes ====== */
.skeleton-card{
  height:260px;border-radius:16px;
  background:linear-gradient(90deg,#eee 25%,#f5f5f5 37%,#eee 63%);
  background-size:400% 100%;animation:shine 1.4s ease infinite;
}
@keyframes shine{0%{background-position:100% 0}100%{background-position:0 0;}}

/* ====== Ajustes menores ====== */
.badge-por-mayor{ /* (se mantiene la definición principal; se elimina duplicado conflictivo) */ }

/* ==================================================================== */
/* OFERTAS — NORMALIZADO (merge con brand.css)                          */
/* ⚠️ Bloque final mantiene prioridad donde aplica                      */
/* ==================================================================== */

/* 1) Alias de variables para compatibilidad */
:root{--primario:#2e2367;--secundario:#fcc118;}

/* 2) Badge por mayor (override de ofertas si se utiliza) */
.badge-por-mayor{
  background:#fcc118;
  color:#fff;
  border-radius:999px;
  padding:.25rem .6rem;
  font-weight:700;
  font-size:.75rem;
}

/* 3) Sidebar categorías (scroll nativo) */
.cat-grid{
  display:grid;grid-template-columns:1fr;gap:12px;
  max-height:calc(100vh - 140px);
  overflow:auto;overscroll-behavior:contain;-webkit-overflow-scrolling:touch;
}
.cat-grid::-webkit-scrollbar{width:0;height:0;}
.cat-card{
  display:flex;gap:12px;border:1px solid #eee;border-radius:14px;
  overflow:hidden;background:#fff;box-shadow:0 2px 8px rgba(0,0,0,.04);
  cursor:pointer;transition:all .2s;
}
.cat-card:hover{box-shadow:0 6px 16px rgba(0,0,0,.08);}
.cat-card.active,.cat-card:focus{
  outline:none;border-color:#fcc118;
  box-shadow:0 0 0 3px rgba(var(--primario-rgb),.12);
}
.cat-card__media{
  width:88px;min-width:88px;height:88px;overflow:hidden;
  display:flex;align-items:center;justify-content:center;background:#f7f7fb;
}
.cat-card__media img{max-width:100%;max-height:100%;object-fit:contain;}
.cat-card__body{padding:8px 10px;flex:1;}
.cat-card__title{
  font-size:1rem;margin:0 0 4px 0;line-height:1.2;
  display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;
}
.cat-card__meta{font-size:.85rem;color:#6c757d;margin:0 0 8px 0;}
.cat-card .dot{display:inline-block;width:6px;height:6px;background:#fcc118;border-radius:50%;margin:0 6px;}

/* 4) Chips subcategorías (scroll nativo + helpers) */
.chips-wrap{position:sticky;top:72px;z-index:5;margin-bottom:.5rem;background:#f8f9fa;}
.chips-subcats{
  display:flex;gap:8px;align-items:center;overflow:auto;padding:8px 46px;
  scroll-behavior:smooth;overscroll-behavior:contain;-webkit-overflow-scrolling:touch;
  border:1px solid #e9ecef;border-radius:999px;background:#fff;box-shadow:0 6px 14px rgba(0,0,0,.06);
}
.chips-subcats::-webkit-scrollbar{height:0;}
.chip{
  border:1px solid #e5e7eb;background:#fff;border-radius:999px;
  padding:.4rem .85rem;font-weight:600;font-size:.9rem;white-space:nowrap;
}
.chip .count{opacity:.7;font-weight:700;margin-left:.35rem;}
.chip.active{background:#fcc118;color:#fff;border-color:#fcc118;}
.chips-nav-btn{
  display:none;position:absolute;top:50%;transform:translateY(-50%);z-index:6;
  width:32px;height:32px;border-radius:999px;border:0;align-items:center;justify-content:center;
  background:#fff;box-shadow:0 4px 10px rgba(0,0,0,.12);opacity:.95;
}
.chips-nav-btn:disabled{opacity:.4;}
.chips-nav-btn.left{left:6px;}
.chips-nav-btn.right{right:6px;}

/* 5) Grilla 4x en escritorio (override genérico) */
@media (min-width:992px){
  .products-grid .col-lg-4{flex:0 0 25%;max-width:25%;}
}

/* 6) Tipografía y cortes limpios en tarjetas (productos) */
.products-grid .card,
.products-grid .product-card,
.products-grid .producto{border-radius:16px;}
.products-grid h3,
.products-grid h4,
.products-grid .card-title,
.products-grid .product-title,
.products-grid .titulo{
  font-size:1rem;line-height:1.25;margin:.25rem 0 .35rem 0;font-weight:700;
  display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;
  word-break:break-word;min-height:2.5em;
}
.products-grid .sku,
.products-grid .ref,
.products-grid .meta{
  font-size:.8rem;line-height:1.1;color:#6c757d;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
}
.products-grid .price,
.products-grid .precio,
.products-grid .price-box{font-size:1rem;line-height:1.2;}
.products-grid .badge,
.products-grid .etiqueta{font-size:.72rem;line-height:1;white-space:nowrap;}
.products-grid .btn,
.products-grid .boton{font-size:.85rem;}
.products-grid img{image-rendering:auto;}

/* 7) HOTFIX overlay “VER DETALLES” más pequeño y contenido */
.products-grid .btn-ver,
.products-grid .ver-detalles,
.products-grid .btn-ver-detalles,
.products-grid a[title*="DETALLES"],
.products-grid a[title*="Detalles"]{
  position:absolute;left:50%;transform:translateX(-50%);
  bottom:10px;padding:.35rem .6rem;font-weight:700;
  font-size:clamp(.70rem,1.6vw,.82rem);line-height:1;border-radius:12px;
  max-width:80%;white-space:nowrap;text-overflow:ellipsis;overflow:hidden;
}
/* Asegura que el contenedor de imagen sea relativo */
.products-grid .card .card-img,
.products-grid .card .card-img-top,
.products-grid .product-card .thumb,
.products-grid .producto .thumb,
.products-grid .image,
.products-grid .figure,
.products-grid .img,
.products-grid .img-wrap{position:relative;}

/* En móviles, más compacto */
@media (max-width:575.98px){
  .products-grid .badge,.products-grid .etiqueta{font-size:.68rem;}
  .products-grid .btn,.products-grid .boton{font-size:.8rem;}
  .products-grid .sku,.products-grid .ref,.products-grid .meta{font-size:.78rem;}
  .products-grid .btn-ver,
  .products-grid .ver-detalles,
  .products-grid .btn-ver-detalles,
  .products-grid a[title*="DETALLES"],
  .products-grid a[title*="Detalles"]{
    font-size:.75rem;padding:.3rem .55rem;bottom:8px;max-width:78%;
  }
}

/* ====== Card: fila IVA + mínimo ====== */
.card-product .meta-row{
  display:flex;align-items:center;justify-content:space-between;
  gap:.5rem;margin-top:.25rem;font-size:.85rem;line-height:1.15;
}
.card-product .meta-row .left,
.card-product .meta-row .right{white-space:normal;}
@media (max-width:576px){
  .card-product .meta-row{flex-wrap:wrap;row-gap:.2rem;font-size:.82rem;}
  .card-product .meta-row .left,
  .card-product .meta-row .right{flex:1 1 auto;}
}

/* ====== Price row: nunca empuja el layout ====== */
.card-product .price-row{
  display:flex;align-items:center;gap:.5rem;flex-wrap:wrap;
}
.card-product .price-unit{margin-left:auto;white-space:nowrap;}
@media (max-width:576px){
  .card-product .price-unit{
    flex:1 0 100%;margin-left:0;padding-left:1.35rem;
    font-size:.85rem;white-space:normal;
  }
}

/* ====== Botones/cantidades: que nunca se salgan ====== */
.card-product .qty-input{min-width:56px;}
@media (min-width:992px){
  .ofertas-page .card-product .qty-minus,
  .ofertas-page .card-product .qty-plus{width:34px;}
  .ofertas-page .card-product .qty-input{min-width:52px;font-size:.88rem;}
  .ofertas-page .card-product .btn:not(.qty-minus):not(.qty-plus){min-width:96px!important;}
}

/* Seguridad extra: nada se “escapa” del borde del card */
.products-grid .card,.card-product{overflow:hidden;}

/* Overlay “Ver detalles” compacta (por si algún tema lo agranda) */
.products-grid .btn-ver,
.products-grid .ver-detalles,
.products-grid .btn-ver-detalles,
.products-grid a[title*="DETALLES"],
.products-grid a[title*="Detalles"]{
  font-size:clamp(.70rem,1.6vw,.82rem);
  padding:.35rem .6rem;
  bottom:10px;
  max-width:80%;
  white-space:nowrap;
}

/* ====== SOLO en Ofertas (3 por fila en desktop) ====== */
@media (min-width:992px){
  .ofertas-page .products-grid > .col-lg-3,
  .ofertas-page .products-grid > .col-lg-4{
    flex:0 0 33.3333%;
    max-width:33.3333%;
  }
}

/* Arreglo de micro-espaciados para cards estrechas */
.card-product .price-box{padding:.55rem .65rem;}
.card-product .old-price{margin:.1rem 0 .2rem;}

/* Botón overlay "Detalles" — 1 sola línea, sin romper layout */
.card-product .btn-overlay-detalles{
  display:inline-flex;
  align-items:center;
  gap:.35rem;
  line-height:1;
  white-space:nowrap;                 /* no se parte en 2 líneas */
  background:rgba(0,0,0,.45) !important; /* evita que algún .btn lo vuelva blanco */
  color:#fff !important;
  border-radius:.5rem;
  padding:.25rem .6rem;
  max-width:calc(100% - 16px);        /* nunca se sale del borde */
  overflow:hidden;
  text-overflow:ellipsis;
  z-index:2;                          /* por encima de overlays claros */
}
@media (max-width:380px){
  .card-product .btn-overlay-detalles{ font-size:.5rem; padding:.22rem .5rem; }
}


/* ── Botón primario custom ── */
.btn-primary-custom {
  background-color: #fcc118 !important;
  color: #fff !important;
  border-color: #fcc118 !important;
}
.btn-primary-custom:hover {
  background-color: #1a1547 !important;
}