/* ===================================================================
   BUN & BURNS — RESPONSIVE POLISH & UTILITIES
   =================================================================== */

/* ===================================================================
   SVG ICON SYSTEM (self-hosted, replaces external icon font)
   =================================================================== */
.ico{
  width: 1em;
  height: 1em;
  display: inline-block;
  vertical-align: -0.125em;
  fill: currentColor;
  flex-shrink: 0;
}
.ico-lg{ width: 1.3em; height: 1.3em; }

/* Loading skeleton shimmer for lazy images before they load */
img[loading="lazy"]{
  background: linear-gradient(110deg, var(--bb-black-soft) 8%, var(--bb-black-elev) 18%, var(--bb-black-soft) 33%);
  background-size: 200% 100%;
  animation: shimmer 1.6s linear infinite;
}
img[loading="lazy"].is-loaded{
  animation: none;
  background: none;
}
@keyframes shimmer{
  to{ background-position-x: -200%; }
}

/* Counter number wrapper used by JS for animated count-up */
[data-counter]{ display: inline-block; }

/* Floating decorative ember dots (CSS-only, used in section backgrounds) */
.bg-embers{
  position: absolute;
  inset: 0;
  overflow: hidden;
  pointer-events: none;
  z-index: 0;
}
.bg-embers span{
  position: absolute;
  width: 4px;
  height: 4px;
  border-radius: 50%;
  background: var(--bb-gold);
  opacity: 0.35;
  animation: emberFloat 8s ease-in-out infinite;
}
@keyframes emberFloat{
  0%{ transform: translateY(0) translateX(0); opacity: 0; }
  10%{ opacity: 0.5; }
  90%{ opacity: 0.2; }
  100%{ transform: translateY(-120px) translateX(20px); opacity: 0; }
}

/* Section that needs the relative positioning for bg-embers to anchor */
.section-relative{ position: relative; overflow: hidden; }

/* Generic two-col helper */
.split-2{
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--sp-5);
}
@media (max-width: 760px){
  .split-2{ grid-template-columns: 1fr; }
}

/* Centered narrow text block */
.prose-narrow{
  max-width: 680px;
  margin: 0 auto;
  color: var(--bb-gray);
}

/* Image zoom-on-hover utility, generic */
.zoom-frame{
  overflow: hidden;
  border-radius: var(--r-md);
}
.zoom-frame img{
  transition: transform 0.7s var(--ease-out);
}
.zoom-frame:hover img{
  transform: scale(1.08);
}

/* Lightbox (gallery click-to-expand) */
.lightbox{
  position: fixed;
  inset: 0;
  background: rgba(11,11,11,0.95);
  z-index: 4000;
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.4s ease, visibility 0.4s ease;
  padding: var(--sp-5);
}
.lightbox.is-active{ opacity: 1; visibility: visible; }
.lightbox img{
  max-width: 90vw;
  max-height: 85vh;
  border-radius: var(--r-md);
  border: 1px solid var(--bb-line);
  box-shadow: 0 30px 80px rgba(0,0,0,0.6);
  transform: scale(0.92);
  transition: transform 0.4s var(--ease-out);
}
.lightbox.is-active img{ transform: scale(1); }
.lightbox-close{
  position: absolute;
  top: 24px;
  right: 24px;
  width: 46px;
  height: 46px;
  border-radius: 50%;
  background: var(--bb-black-card);
  border: 1px solid var(--bb-line);
  color: var(--bb-white);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.2rem;
  transition: all 0.3s ease;
}
.lightbox-close:hover{ background: var(--bb-gold); color: var(--bb-black); }

/* Mobile-specific global tightening */
@media (max-width: 600px){
  :root{
    --sp-7: 4.4rem;
    --sp-6: 3.2rem;
  }
  .container{ padding: 0 1.25rem; }
}

/* Prevent layout shift: reserve aspect ratio on all key media before load */
.aspect-16-9{ aspect-ratio: 16/9; }
.aspect-4-3{ aspect-ratio: 4/3; }
.aspect-1-1{ aspect-ratio: 1/1; }

/* Touch-friendly tap targets on mobile */
@media (hover: none) and (pointer: coarse){
  .btn, .add-cart-btn, .cat-pill, .nav-toggle, .back-to-top, .whatsapp-float{
    min-height: 44px;
  }
}

/* Print styles (menu can be printed cleanly) */
@media print{
  .navbar, .whatsapp-float, .back-to-top, .nav-overlay, #preloader, footer.site-footer, .menu-toolbar, .promo-banner, .scroll-cue{
    display: none !important;
  }
  body{ background: #fff; color: #000; }
  .product-card, .card{ border: 1px solid #ccc; break-inside: avoid; }
}