/**
 * SINEV - Catálogo global (catalogo_global.php)
 * Mercado Verde - Productos y Servicios
 */
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700;800&display=swap');

:root{
  --brand:#00a650;
  --brand-2:#019146;
  --brand-light:#e8f5e9;
  --ink:#0f172a; --muted:#64748b;
  --bg:#f8faf9; --card:#fff; --bd:#e2e8e6;
  --pill:#e8f5e9; --pill-bd:#a5d6a7;
  --radius:20px; --radius-sm:12px;
  --shadow:0 4px 20px rgba(0,166,80,.08);
  --shadow-hover:0 12px 40px rgba(0,166,80,.15);
  --yellow:#fff59d;
  --gradient-brand:linear-gradient(135deg, #00a650 0%, #019146 100%);
  --gradient-bg:linear-gradient(135deg, #f8faf9 0%, #f0f5f2 100%);
}

*{box-sizing:border-box}
body{
  font-family:'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  background:var(--gradient-bg);
  color:var(--ink);
  line-height:1.6;
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
}
a{ color:#2968c8; text-decoration:none; transition:color .2s ease }
a:hover{ color:#184a96 }

.topbar{
  position:sticky; top:0; z-index:1030;
  background:var(--gradient-brand);
  color:#fff;
  box-shadow:0 4px 20px rgba(0,0,0,.1);
  backdrop-filter:blur(10px);
}
.topbar .container,
.topbar .topbar-inner{
  display:flex; align-items:center; gap:16px;
  padding:.5rem 1.5rem;
  min-width:0;
  max-width:1280px;
  margin-left:auto;
  margin-right:auto;
  width:100%;
  box-sizing:border-box;
}
.topbar-logo{
  display:flex; align-items:center;
  flex-shrink:0;
  line-height:0;
}
.topbar-logo img{
  height:44px;
  width:auto;
  max-width:160px;
  object-fit:contain;
  transition:opacity .2s ease;
}
.topbar-logo:hover img{ opacity:.9; }
.brand{
  display:flex; align-items:center; gap:.75rem;
  font-weight:800;
  font-size:1.1rem;
  color:#fff;
  letter-spacing:-0.02em;
}
.brand .dot{
  width:14px;height:14px;
  border-radius:50%;
  background:#fff;
  box-shadow:0 0 0 3px rgba(255,255,255,.3);
  animation:pulse 2s infinite;
}
@keyframes pulse{
  0%,100%{transform:scale(1);opacity:1}
  50%{transform:scale(1.1);opacity:.8}
}
.searchbar{flex:1; max-width:600px; min-width:0}
.search{
  background:#fff;
  border:2px solid rgba(255,255,255,.2);
  border-radius:999px;
  display:flex;
  align-items:center;
  gap:.6rem;
  padding:.45rem 1rem;
  box-shadow:0 4px 15px rgba(0,0,0,.1);
  transition:all .3s ease;
}
.search:focus-within{
  border-color:rgba(255,255,255,.5);
  box-shadow:0 6px 25px rgba(0,0,0,.15);
  transform:translateY(-1px);
}
.search i{color:var(--muted); font-size:1rem}
.search input{
  border:0; outline:0; flex:1;
  font-size:.9rem;
  background:transparent;
  font-family:inherit;
  min-width:0;
}
.search input::placeholder{color:#94a3b8}
.top-actions{
  display:flex;
  align-items:center;
  gap:.6rem;
  flex-shrink:0;
}
.top-actions .btn,
.top-actions .btn-topbar{
  border-radius:999px;
  font-weight:600;
  padding:.4rem .9rem;
  font-size:.875rem;
  white-space:nowrap;
  transition:all .2s ease;
  border:2px solid rgba(255,255,255,.4);
  display:inline-flex;
  align-items:center;
  min-height:38px;
}
.top-actions .btn-empresas-verdes{
  background:rgba(255,255,255,.95);
  color:var(--brand);
  border-color:rgba(255,255,255,.6);
}
.top-actions .btn-empresas-verdes:hover{
  background:#fff;
  color:var(--brand-2);
  border-color:#fff;
}
.top-actions .btn-login-topbar{
  background:rgba(255,255,255,.95);
  color:var(--brand);
  border-color:rgba(255,255,255,.6);
}
.top-actions .btn-login-topbar:hover{
  background:#fff;
  color:var(--brand-2);
  border-color:#fff;
}
.top-actions .btn:hover{
  transform:translateY(-1px);
  box-shadow:0 4px 12px rgba(0,0,0,.15);
}

.nav-underline{
  border-bottom:2px solid var(--bd);
  margin-bottom:1.5rem;
}
.nav-underline .nav-link{
  color:var(--muted);
  font-weight:500;
  padding:.75rem 1.25rem;
  border-bottom:3px solid transparent;
  transition:all .2s ease;
  position:relative;
}
.nav-underline .nav-link:hover{
  color:var(--brand);
  background:var(--brand-light);
  border-radius:var(--radius-sm) var(--radius-sm) 0 0;
}
.nav-underline .nav-link.active{
  color:var(--brand);
  border-bottom-color:var(--brand);
  font-weight:700;
  background:transparent;
}
.nav-underline .badge{
  margin-left:.5rem;
  font-size:.75rem;
  padding:.25rem .5rem;
  border-radius:999px;
  background:var(--brand-light);
  color:var(--brand);
  font-weight:600;
}

.sidebar{
  position:sticky; top:0; max-height:100vh;
  overflow-y:auto; overflow-x:hidden;
  background:var(--card);
  border:1px solid var(--bd);
  border-radius:var(--radius);
  padding:1.5rem;
  box-shadow:var(--shadow);
  backdrop-filter:blur(10px);
}
.sidebar::-webkit-scrollbar{width:6px}
.sidebar::-webkit-scrollbar-track{background:transparent}
.sidebar::-webkit-scrollbar-thumb{background:var(--bd);border-radius:3px}
.sidebar::-webkit-scrollbar-thumb:hover{background:var(--muted)}
.side-title{
  font-weight:700;
  font-size:.95rem;
  color:var(--ink);
  margin-bottom:1rem;
  display:flex;
  align-items:center;
  gap:.5rem;
}
.side-title i{color:var(--brand);font-size:1.1rem}
.tag-chip{
  display:flex;
  justify-content:space-between;
  align-items:center;
  border:2px solid var(--bd);
  border-radius:999px;
  padding:.5rem .85rem;
  cursor:pointer;
  user-select:none;
  transition:all .2s ease;
  margin-bottom:.5rem;
  background:#fff;
}
.tag-chip:hover{
  background:var(--brand-light);
  border-color:var(--brand);
  transform:translateX(4px);
}
.tag-chip.active{
  border-color:var(--brand);
  background:var(--gradient-brand);
  color:#fff;
  font-weight:600;
  box-shadow:0 2px 8px rgba(0,166,80,.2);
}
.tag-chip.active .badge{
  background:rgba(255,255,255,.3);
  color:#fff;
}
.filter-block{
  border:1px solid var(--bd);
  border-radius:var(--radius);
  padding:1.25rem;
  background:linear-gradient(135deg, #fff 0%, #f8faf9 100%);
  margin-top:1.5rem;
}
.form-control, .form-select{
  border:2px solid var(--bd);
  border-radius:var(--radius-sm);
  padding:.6rem .85rem;
  transition:all .2s ease;
  font-family:inherit;
}
.form-control:focus, .form-select:focus{
  border-color:var(--brand);
  box-shadow:0 0 0 3px rgba(0,166,80,.1);
}
.form-range{ margin:.75rem 0; }
.form-range::-webkit-slider-thumb{
  background:var(--brand);
  border:2px solid #fff;
  box-shadow:0 2px 6px rgba(0,166,80,.3);
}

/* Catálogo y barra: mismo ancho máximo centrado con espacio a los lados */
@media (min-width:992px){
  .catalog-main.container{
    max-width:1280px;
    margin-left:auto;
    margin-right:auto;
    padding-left:1.5rem;
    padding-right:1.5rem;
  }
  /* Fila normal de Bootstrap: no limitar ancho del row para que filtros y catálogo no se choquen */
  .catalog-main .tab-content .tab-pane > .row .catalog-content-col{
    min-width:0;
    display:flex;
    flex-direction:column;
    align-items:center;
  }
  .catalog-content-col .controls-bar,
  .catalog-content-col #pWrap,
  .catalog-content-col #sWrap{
    width:100%;
    max-width:980px;
    min-width:0;
    box-sizing:border-box;
  }
}
@media (min-width:992px){
  body.catalog-filters-hidden .catalog-content-col .controls-bar,
  body.catalog-filters-hidden .catalog-content-col #pWrap,
  body.catalog-filters-hidden .catalog-content-col #sWrap{
    max-width:1100px;
  }
}
/* Ocultar filtros en escritorio (toggle) */
@media (min-width:992px){
  body.catalog-filters-hidden .catalog-sidebar-col{
    display:none !important;
  }
  body.catalog-filters-hidden .catalog-content-col{
    flex:0 0 100%;
    max-width:100%;
  }
}
/* Solo en escritorio se ocultan los filtros con el toggle; en móvil el drawer sigue funcionando */

.controls-bar{
  display:flex; gap:1rem; align-items:center;
  justify-content:space-between;
  background:var(--card);
  border:1px solid var(--bd);
  border-radius:var(--radius);
  padding:1rem 1.25rem;
  box-shadow:var(--shadow);
  flex-wrap:wrap;
  margin-bottom:1.5rem;
}
.chip{
  display:inline-flex;
  align-items:center;
  gap:.4rem;
  padding:.4rem .75rem;
  border:2px solid var(--pill-bd);
  background:var(--pill);
  border-radius:999px;
  font-size:.875rem;
  font-weight:500;
}
.chip .dot{
  width:10px;height:10px;
  border-radius:999px;
  background:var(--brand);
  box-shadow:0 0 0 2px rgba(0,166,80,.2);
}

.btn{
  border-radius:var(--radius-sm);
  font-weight:500;
  padding:.6rem 1.25rem;
  transition:all .2s ease;
  border:2px solid transparent;
}
.btn-success{
  background:var(--gradient-brand);
  border-color:var(--brand);
  color:#fff;
  box-shadow:0 4px 12px rgba(0,166,80,.2);
}
.btn-success:hover{
  background:var(--brand-2);
  border-color:var(--brand-2);
  transform:translateY(-2px);
  box-shadow:0 6px 20px rgba(0,166,80,.3);
  color:#fff;
}
.btn-outline-success{
  color:var(--brand);
  border-color:var(--brand);
  background:transparent;
}
.btn-outline-success:hover{
  color:#fff;
  background:var(--gradient-brand);
  border-color:var(--brand);
  transform:translateY(-2px);
  box-shadow:0 4px 12px rgba(0,166,80,.2);
}
.btn-light{
  background:#fff;
  border-color:var(--bd);
  color:var(--ink);
}
.btn-light:hover{
  background:var(--brand-light);
  border-color:var(--brand);
  color:var(--brand);
  transform:translateY(-1px);
}
.btn-sm{ padding:.4rem .85rem; font-size:.875rem; }

.card-ecom{
  background:var(--card);
  border:1px solid var(--bd);
  border-radius:var(--radius);
  box-shadow:var(--shadow);
  overflow:visible;
  height:100%;
  cursor:pointer;
  transition:all .3s cubic-bezier(0.4, 0, 0.2, 1);
  position:relative;
}
.card-ecom::before{
  content:'';
  position:absolute;
  top:0;left:0;right:0;
  height:4px;
  background:var(--gradient-brand);
  transform:scaleX(0);
  transition:transform .3s ease;
}
.card-ecom:hover{
  transform:translateY(-6px);
  box-shadow:var(--shadow-hover);
  border-color:var(--brand);
}
.card-ecom:hover::before{ transform:scaleX(1); }
.card-ecom .imgwrap{
  background:linear-gradient(135deg, #f0f5f2 0%, #e8f5e9 100%);
  display:block;
  position:relative;
  overflow:visible;
}
.card-ecom .imgwrap::after{
  content:'';
  position:absolute;
  top:0;left:0;right:0;bottom:0;
  background:linear-gradient(to bottom, transparent 0%, rgba(0,0,0,.05) 100%);
  opacity:0;
  transition:opacity .3s ease;
}
.card-ecom:hover .imgwrap::after{ opacity:1; }
.card-ecom .imgwrap img{
  width:100%;
  height:200px;
  object-fit:cover;
  transition:transform .4s cubic-bezier(0.4, 0, 0.2, 1);
}
.card-ecom:hover .imgwrap img{ transform:scale(1.08); }

/* Zoom solo en modal de detalle, no en tarjetas del listado */
#detailCarouselWrap .detail-zoom-wrap {
  position: relative;
  overflow: hidden;
  width: 100%;
  height: 380px;
  cursor: zoom-in;
  background: #f1f5f9;
}
#detailCarouselWrap .detail-zoom-wrap img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  display: block;
}

/* Cuadro de zoom que sigue el mouse (sin círculo) */
.zoom-result.zoom-result-follow {
  position: fixed;
  width: 380px;
  height: 380px;
  left: 0;
  top: 0;
  transform: none;
  border: 3px solid var(--brand);
  border-radius: var(--radius);
  box-shadow: 0 10px 40px rgba(0, 0, 0, 0.35);
  background: #fff;
  overflow: hidden;
  display: none;
  z-index: 10000;
  pointer-events: none;
}
.zoom-result.zoom-result-follow img {
  position: absolute;
  left: 0;
  top: 0;
  transform-origin: 0 0;
}
.card-ecom .imgwrap { position: relative; overflow: visible; }
@media (max-width: 768px) {
  .zoom-result.zoom-result-follow { display: none !important; }
}
.zoom-result img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transform-origin: 0 0;
  background: transparent;
}

/* Lightbox: imagen completa con zoom y pan */
.image-lightbox {
  position: fixed;
  inset: 0;
  z-index: 10050;
  background: rgba(0,0,0,.92);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 3rem;
}
.image-lightbox__close {
  position: absolute;
  top: 1rem;
  right: 1rem;
  width: 48px;
  height: 48px;
  border: none;
  background: rgba(255,255,255,.2);
  color: #fff;
  border-radius: 50%;
  font-size: 1.25rem;
  cursor: pointer;
  transition: background .2s;
  z-index: 2;
}
.image-lightbox__close:hover {
  background: var(--brand);
}
.image-lightbox__wrap {
  flex: 1;
  width: 100%;
  max-height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  cursor: grab;
}
.image-lightbox__wrap:active { cursor: grabbing; }
.image-lightbox__img {
  max-width: 100%;
  max-height: calc(100vh - 8rem);
  object-fit: contain;
  transform-origin: center center;
  transition: transform .05s ease-out;
  user-select: none;
  pointer-events: none;
}
.image-lightbox__hint {
  position: absolute;
  bottom: 1rem;
  left: 50%;
  transform: translateX(-50%);
  margin: 0;
  font-size: .85rem;
  color: rgba(255,255,255,.7);
}

.card-ecom .body{ padding:1.25rem; }
.price{
  font-weight:800;
  font-size:1.35rem;
  color:var(--brand);
  background:var(--brand-light);
  display:inline-block;
  padding:.25rem .75rem;
  border-radius:var(--radius-sm);
  margin-bottom:.5rem;
}
.title{
  font-weight:600;
  font-size:1rem;
  line-height:1.4;
  min-height:2.8rem;
  color:var(--ink);
  margin-bottom:.75rem;
}
.meta{ font-size:.875rem; color:var(--muted); margin-bottom:.5rem; }
.badge-dest{
  background:linear-gradient(135deg, #fff59d 0%, #ffeb3b 100%);
  color:#1f2937;
  font-weight:600;
  padding:.3rem .6rem;
  border-radius:999px;
  font-size:.75rem;
  box-shadow:0 2px 6px rgba(255,235,59,.3);
}

.thumbs-below{
  display:flex; gap:.5rem; padding:.75rem 1rem .5rem;
  flex-wrap:wrap;
  border-top:1px solid var(--bd);
  background:linear-gradient(to bottom, #fff 0%, #f8faf9 100%);
}
.thumbs-below .thumb{
  width:60px; height:60px;
  border:2px solid var(--bd);
  border-radius:var(--radius-sm);
  background:#fff;
  overflow:hidden;
  flex:0 0 auto;
  cursor:pointer;
  transition: all .2s ease;
  position:relative;
}
.thumbs-below .thumb::after{
  content:'';
  position:absolute;
  inset:0;
  border:2px solid var(--brand);
  border-radius:var(--radius-sm);
  opacity:0;
  transition:opacity .2s ease;
}
.thumbs-below .thumb:hover{
  transform:translateY(-2px) scale(1.05);
  box-shadow:0 4px 12px rgba(0,166,80,.2);
  border-color:var(--brand);
}
.thumbs-below .thumb:hover::after{ opacity:1; }
.thumbs-below .thumb img{ width:100%; height:100%; object-fit:cover; }

.list .col-card{flex:0 0 100%}
.list .card-ecom{display:flex; gap:20px; align-items:stretch}
.list .card-ecom .imgwrap{flex:0 0 280px; border-radius:var(--radius) 0 0 var(--radius)}
.list .card-ecom img{height:100%; min-height:200px; border-radius:0}

.modal-content{
  border-radius:var(--radius);
  border:1px solid var(--bd);
  box-shadow:0 20px 60px rgba(0,0,0,.2);
}
.modal-header{ border-bottom:2px solid var(--bd); padding:1.5rem; }
.modal-title{ font-weight:700; font-size:1.5rem; color:var(--ink); }
.modal-body{ padding:1.5rem; }
.modal-body.position-relative{ position:relative; min-height:200px; }
.detail-loading{
  position:absolute;
  inset:0;
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  background:rgba(255,255,255,.95);
  border-radius:var(--radius-sm);
  z-index:5;
  padding:2rem;
}
.detail-loading__spinner{
  width:56px;
  height:56px;
  border:4px solid var(--bd);
  border-top-color:var(--brand);
  border-radius:50%;
  animation:detail-spin .9s linear infinite;
}
.detail-loading__text{
  font-size:1rem;
  font-weight:500;
  color:var(--muted);
}
@keyframes detail-spin{
  to{ transform:rotate(360deg); }
}
.modal-footer{ border-top:2px solid var(--bd); padding:1.25rem 1.5rem; }
.modal-footer .btn-group a:hover,.modal-footer .btn-group button:hover{ transform:translateY(-1px); }
.detail-more-card:hover{ transform:translateY(-4px); box-shadow:var(--shadow-hover); }
.carousel-item img{
  width:100%;
  height:400px;
  object-fit:cover;
  border-radius:var(--radius-sm);
}
#detailCarouselWrap .carousel-item{
  height:380px;
}
#detailCarouselWrap .carousel-inner,
#detailCarouselWrap .carousel-item .detail-zoom-wrap{
  height:100%;
}
.carousel-control-prev, .carousel-control-next{
  width:50px;
  height:50px;
  background:rgba(0,0,0,.5);
  border-radius:50%;
  top:50%;
  transform:translateY(-50%);
  opacity:.8;
  transition:all .2s ease;
}
.carousel-control-prev:hover, .carousel-control-next:hover{
  opacity:1;
  background:var(--brand);
}
.tag{
  display:inline-block;
  border:2px solid var(--bd);
  border-radius:999px;
  padding:.35rem .75rem;
  margin:.25rem .35rem .25rem 0;
  background:var(--pill);
  color:var(--ink);
  font-size:.875rem;
  font-weight:500;
  transition:all .2s ease;
}
.tag:hover{
  border-color:var(--brand);
  background:var(--brand-light);
  transform:translateY(-1px);
}

/* Barra móvil: solo botón "Filtros y ordenar" (drawer solo en móvil) */
.catalog-mobile-bar{
  padding:.5rem 0;
  position:sticky;
  top:56px;
  z-index:1025;
  background:var(--gradient-bg);
  margin:0 -0.25rem;
  padding-left:.25rem;
  padding-right:.25rem;
  box-shadow:0 4px 12px rgba(0,0,0,.06);
}
.catalog-mobile-bar .btn{
  width:100%;
  max-width:100%;
  background:var(--brand);
  color:#fff;
  border-color:var(--brand);
  font-weight:600;
}
.catalog-mobile-bar .btn:hover{
  background:var(--brand-2);
  color:#fff;
  border-color:var(--brand-2);
}

/* Overlay para cerrar drawer de filtros */
.catalog-filters-overlay{
  display:none;
  position:fixed;
  inset:0;
  background:rgba(0,0,0,.4);
  z-index:1040;
  opacity:0;
  transition:opacity .25s ease;
}
body.filters-open-ml .catalog-filters-overlay{
  display:block;
  opacity:1;
}

/* Encabezado del drawer móvil (logo + cerrar) */
.catalog-drawer-header{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:1rem;
  padding:1rem 0;
  margin:0 -1.5rem 1rem -1.5rem;
  padding-left:1.5rem;
  padding-right:1.5rem;
  border-bottom:1px solid var(--bd);
  background:var(--card);
  flex-shrink:0;
}
.catalog-drawer-brand{
  display:flex;
  align-items:center;
  min-width:0;
  text-decoration:none;
}
.catalog-drawer-logo{
  height:42px;
  width:auto;
  max-width:180px;
  object-fit:contain;
  display:block;
}
.btn-close-drawer{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  width:40px;
  height:40px;
  padding:0;
  border:none;
  border-radius:50%;
  background:var(--pill);
  color:var(--muted);
  transition:background .2s ease, color .2s ease;
}
.btn-close-drawer:hover{
  background:var(--bd);
  color:var(--ink);
}
.btn-close-drawer i{ font-size:1.1rem; }

@media (max-width:991px){
  /* Drawer de filtros solo en móvil */
  .catalog-sidebar-col{
    position:fixed;
    top:0;
    left:0;
    width:85%;
    max-width:300px;
    height:100vh;
    z-index:1050;
    background:#fff;
    box-shadow:4px 0 20px rgba(0,0,0,.2);
    transform:translateX(-100%);
    transition:transform .25s ease;
    overflow-y:auto;
    overflow-x:hidden;
    margin:0;
    padding:0 1rem 1rem 1rem;
    box-sizing:border-box;
  }
  body.filters-open-ml .tab-pane.active .catalog-sidebar-col{
    transform:translateX(0);
  }
  .catalog-sidebar-col .sidebar{ max-width:100%; min-width:0; padding-top:0; }
  .catalog-drawer-header{
    margin-top:0;
    margin-left:-1rem;
    margin-right:-1rem;
    padding:0.75rem 1rem 1rem 1rem;
    border-bottom:1px solid var(--bd);
    background:var(--card);
  }
  .catalog-sidebar-col .form-select,
  .catalog-sidebar-col .form-control,
  .catalog-sidebar-col input{ max-width:100%; box-sizing:border-box; }
  .tab-pane:not(.active) .catalog-sidebar-col{ visibility:hidden; }
  .catalog-content-col{ max-width:100%; flex:0 0 100%; }
  /* Grid 2 columnas en móvil: forzar 50% para mejor percepción de productos */
  #pGrid,
  #sGrid{
    display:flex;
    flex-wrap:wrap;
    margin:0 -0.25rem;
    gap:0;
  }
  #pGrid .col-card,
  #sGrid .col-card{
    flex:0 0 50%;
    max-width:50%;
    width:50%;
    min-width:0;
    box-sizing:border-box;
    padding:.25rem;
  }
  /* En móvil siempre 2 columnas aunque esté en vista lista */
  #pWrap.list #pGrid .col-card,
  #sWrap.list #sGrid .col-card{
    flex:0 0 50% !important;
    max-width:50% !important;
  }
  #pWrap.list .card-ecom,
  #sWrap.list .card-ecom{
    flex-direction:column;
  }
  #pWrap.list .card-ecom .imgwrap,
  #sWrap.list .card-ecom .imgwrap{
    flex:0 0 auto;
    max-width:100%;
  }
  .card-ecom .imgwrap img{ height:140px; object-fit:cover; }
  .card-ecom .body{ padding:.5rem .6rem; }
  .card-ecom .title{ font-size:.85rem; min-height:2.4em; line-height:1.3; display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden; }
  .card-ecom .meta{ font-size:.75rem; }
  .card-ecom .d-flex.gap-2.mt-3{ margin-top:.4rem !important; }
  .card-ecom .btn{ font-size:.75rem; padding:.25rem .4rem; }
}

@media (max-width:768px){
  .topbar .container{
    flex-wrap:wrap;
    gap:.75rem;
    padding:.5rem .5rem;
  }
  .topbar .brand{
    flex:0 0 auto;
    font-size:1rem;
  }
  .searchbar{
    max-width:100%;
    order:3;
    width:100%;
    flex:1 1 100%;
    min-width:0;
  }
  .top-actions{
    order:2;
    margin-left:auto;
    flex-wrap:wrap;
    justify-content:flex-end;
    gap:.5rem;
    min-width:0;
  }
  .top-actions .btn,
  .top-actions .btn-topbar{
    padding:.5rem .75rem;
    font-size:.8125rem;
    min-height:44px;
    display:inline-flex;
    align-items:center;
    justify-content:center;
  }
  .top-actions .btn-login-topbar::before{ left:-.75rem; }
  .top-actions .btn-login-topbar{ margin-left:1.5rem; padding-left:.75rem; }
  .controls-bar{flex-direction:column;align-items:stretch}
  .card-ecom .imgwrap img{height:140px}
}
@media (max-width:576px){
  .topbar .container{ padding:.45rem .4rem; gap:.5rem; }
  .topbar .brand{ font-size:.95rem; }
  .topbar .brand .dot{ width:12px; height:12px; }
  .top-actions .btn,
  .top-actions .btn-topbar{
    padding:.45rem .6rem;
    font-size:.75rem;
  }
  .top-actions .btn-login-topbar{ margin-left:1rem; padding-left:.6rem; }
  .top-actions .btn-login-topbar::before{ left:-.5rem; height:45%; }
  .search input{ font-size:.85rem; }
  .search{ padding:.4rem .75rem; }
}
@media (max-width:400px){
  .top-actions{
    width:100%;
    justify-content:center;
    margin-left:0;
    gap:.4rem;
  }
  .top-actions .btn,
  .top-actions .btn-topbar{
    flex:1 1 auto;
    min-width:0;
    max-width:48%;
  }
  .top-actions .btn-login-topbar::before{ display:none; }
  .top-actions .btn-login-topbar{ margin-left:0; padding-left:.45rem; min-width:44px; }
}