/* Base enhancements */
:root { --brand:#111; --accent:#2563eb; --ok:#16a34a; --warn:#b00020; --muted:#f3f4f6; }
#cart-drawer { will-change: transform; }
#cart-drawer.open { transform: translateX(0); }
#cart-drawer header { display:flex; align-items:center; justify-content:space-between; padding:1rem; border-bottom:1px solid #eee; }
#cart-drawer .items { max-height: 55vh; overflow:auto; padding: 0 1rem; }
#cart-drawer .footer { position: sticky; bottom:0; padding:1rem; border-top:1px solid #eee; background:#fff; }
#cart-drawer .min-warning { color:var(--warn); font-weight:600; margin-top:.5rem; }
#cart-drawer .checkout { width:100%; padding:.75rem 1rem; border-radius:.5rem; background:var(--brand); color:#fff; opacity:.6; cursor:not-allowed; transition:.2s transform; }
#cart-drawer .checkout.enabled { opacity:1; cursor:pointer; }
#cart-drawer .checkout.enabled:hover { transform: translateY(-1px); }

/* Modal */
#product-modal-root .backdrop{ position:fixed; inset:0; background:rgba(0,0,0,.45); }
#product-modal-root .dialog{ position:fixed; inset:0; display:flex; align-items:center; justify-content:center; padding:1rem; }
#product-modal-root .panel{ position:relative; background:#fff; width:min(980px, 95vw); max-height:95vh; overflow:auto; border-radius:1rem; box-shadow:0 20px 40px rgba(0,0,0,.2); display:grid; grid-template-columns: 1fr 360px; gap:1rem; }
#product-modal-root .close-x{ position:absolute; top:.5rem; right:.75rem; font-size:1.75rem; line-height:1; border:none; background:transparent; cursor:pointer; color:#444; }
#product-modal-root .close-x:hover{ color:#000; transform:scale(1.05); }
@media (max-width: 860px) {
  #product-modal-root .panel{ grid-template-columns:1fr; }
}
#product-modal-root .gallery{ padding:1rem; }
#product-modal-root .details{ padding:1rem; border-left:1px solid #f0f0f0; }
#product-modal-root .thumbs{ display:grid; grid-template-columns:repeat(4,1fr); gap:.5rem; }
#product-modal-root img{ width:100%; height:auto; display:block; }
.badge { display:inline-block; padding:.25rem .5rem; border-radius:.5rem; background:var(--muted); font-size:.75rem; }
.fav-btn { border:none; background:transparent; font-size:1.25rem; line-height:1; cursor:pointer; }
.product-card { transition: transform .2s, box-shadow .2s; }
.product-card:hover { transform: translateY(-3px); box-shadow: 0 12px 24px rgba(0,0,0,.08); }
.product-card .actions { display:flex; align-items:center; justify-content:space-between; gap:.5rem; }
.filters { display:flex; gap:.5rem; flex-wrap:wrap; margin-top:1rem; }
.filters input, .filters select { padding:.5rem .75rem; border:1px solid #ddd; border-radius:.5rem; }
.loadmore { display:block; width:100%; padding:.75rem; border:1px solid #ddd; border-radius:.5rem; background:#fff; }
.page-nav { display:flex; flex-wrap:wrap; gap:.5rem; margin-top:1rem; }
.page-nav button{ padding:.4rem .7rem; border:1px solid #ddd; background:#fff; border-radius:.4rem; }
.page-nav button.active{ background:var(--accent); color:#fff; border-color:var(--accent); }

/* Ribbons */
.ribbon {
  position:absolute; top:.5rem; left:-.5rem; background:#ef4444; color:#fff; padding:.25rem .75rem; font-size:.75rem; transform: rotate(-10deg);
  border-radius:.25rem;
}
.ribbon.blue{ background:#2563eb; }
.ribbon.green{ background:#16a34a; }
.ribbon.yellow{ background:#f59e0b; }

/* Highlight pulse when navigating from search */
@keyframes pulseRing {
  0% { box-shadow: 0 0 0 0 rgba(37,99,235,.5); }
  70% { box-shadow: 0 0 0 12px rgba(37,99,235,0); }
  100% { box-shadow: 0 0 0 0 rgba(37,99,235,0); }
}
.highlighted { animation: pulseRing 1.3s ease-out 2; border-radius: .75rem; outline: 2px solid var(--accent); }

/* Suggestion dropdown */
.search-suggest {
  position:absolute; top:110%; left:0; right:0; background:#fff; border:1px solid #e5e7eb; border-radius:.5rem; box-shadow:0 10px 24px rgba(0,0,0,.08);
  max-height: 360px; overflow:auto; z-index: 40;
}
.search-suggest .item{ display:flex; gap:.5rem; align-items:center; padding:.5rem .75rem; cursor:pointer; }
.search-suggest .item:hover{ background:#f8fafc; }
.search-suggest img{ width:40px; height:40px; object-fit:cover; border-radius:.35rem; }
.search-suggest .meta{ font-size:.8rem; color:#555; }

/* Buttons pop */
.btn { transition: transform .1s ease; }
.btn:active { transform: translateY(1px) scale(.99); }


/* Modal price coloring (specific to modal badges) */
#product-modal-root .badge.price-menor { 
  color:#16a34a; 
  background: rgba(22,163,74,.10); 
  border:1px solid #16a34a;
}
#product-modal-root .badge.price-mayor { 
  color:#14532d; 
  background: rgba(20,83,45,.10); 
  border:1px solid #14532d;
}

/* Payment logos responsive inside modal */
#product-modal-root .pay-logos { display:flex; flex-wrap:wrap; gap:.5rem; align-items:center; padding:.5rem 0; }
#product-modal-root .pay-logos img { height:24px; width:auto !important; max-width:100%; object-fit:contain; }


/* Emphasize modal prices */
#product-modal-root .badge.price-menor,
#product-modal-root .badge.price-mayor{
  font-size: .95rem;
  font-weight: 700;
  padding: .35rem .6rem;
}

.ribbon.red{ background:#ef4444; }