:root{--brand:#198754;}
.hero .display-5 span{ text-decoration: underline wavy var(--brand) 2px; text-underline-offset: 6px; }
.btn-outline-success{border-width:2px;}
.wa-float{
  position: fixed; right: 16px; bottom: 16px; width: 56px; height: 56px;
  background: #25D366; border-radius: 50%; display: grid; place-items: center;
  box-shadow: 0 8px 30px rgba(0,0,0,.15);
}
.wa-float img{width:28px;height:28px; filter: drop-shadow(0 2px 4px rgba(0,0,0,.2));}
.card .price{ color: var(--brand); font-weight:700; }
.badge-cat{ background: rgba(25,135,84,.12); color: #106b45; }
/* ---- Mobile-only left gap for cart ---- */
@media (max-width: 480px){
  :root { --cart-gap: 48px; }             /* ← adjust this 32–56px as you like */
  #cartCanvas.offcanvas-end{
    width: calc(100vw - var(--cart-gap)) !important;
  }
  /* keep backdrop, but transparent so gap is clickable to close */
  .offcanvas-backdrop.show{ background: transparent !important; }
}

/* Use iOS dynamic viewport if available (prevents weird jumps on Safari) */
@supports (width: 1svw){
  @media (max-width: 480px){
    #cartCanvas.offcanvas-end{
      width: calc(100svw - var(--cart-gap)) !important;
    }
  }
}
/* .icon-box {
  width: 50px;
  height: 50px;
  display: flex;
  align-items: center;
  justify-content: center;
}
.icon-box svg {
  max-width: 100%;
  max-height: 100%;
} */
.hero1 {
  width: 100%;
  text-align: center;
  background: #fff; /* ya koi bhi background color */
}

.hero-image {
  max-width: 100%;
  height: auto;       /* maintain aspect ratio */
  object-fit: contain;
  border-radius: 20px;
}

.no-curly {
  text-decoration: none !important;
  font-style: normal !important;
}

.footer-credit a {
  text-decoration: none;
  color: inherit;       /* link ka color normal text jaisa ho */
  font-weight: 500;     /* thoda readable */
}

/* Offcanvas: scroll area + sticky footer */
.offcanvas-body { display: flex; flex-direction: column; padding: 0; }
.cart-scroll {
  overflow: auto;
  max-height: calc(100vh - 180px); /* header + sticky area space */
}
.cart-sticky{
  position: sticky;
  bottom: 0;
  background: #fff;
  border-top: 1px solid rgba(0,0,0,.08);
  box-shadow: 0 -6px 18px rgba(0,0,0,.06);
}

/* make subtotal block look nice if you still render it in the list */
.cart-scroll .summary h6 { margin-top: 0.75rem; }
#backToTop {
  position: fixed;
  bottom: 20px;
  left: 20px;
  display: none;         /* hidden by default */
  z-index: 9999;
  width: 45px;
  height: 45px;
  font-size: 20px;
  text-align: center;
  line-height: 20px;
  transition: opacity 0.3s ease;
}