.stock-line{display:flex;align-items:center;gap:7px;min-height:22px;margin:6px 0 10px;font-size:.76rem;font-weight:700}.stock-line.in-stock{color:#2e7d32}.stock-line.low-stock{color:#a65f00}.stock-line.out-stock{color:#c62828}.stock-dot{width:8px;height:8px;border-radius:50%;background:currentColor;flex:0 0 auto}.product-actions button:disabled,.btn:disabled{opacity:.55;cursor:not-allowed;filter:grayscale(.2)}.qr-live-image{display:block;width:100%;height:100%;object-fit:contain;border-radius:10px}.qr-upi{font-size:.78rem;color:var(--text-muted);margin-top:5px;overflow-wrap:anywhere}.checkout-error{padding:11px 13px;border:1px solid #ffcdd2;background:#ffebee;color:#9f1f1f;border-radius:10px;margin-bottom:12px;font-size:.84rem}.product-detail-shell{display:grid;grid-template-columns:minmax(0,.95fr) minmax(0,1.05fr);gap:clamp(26px,5vw,56px);align-items:start}.product-detail-media{overflow:hidden;border:1px solid var(--border);border-radius:20px;background:var(--bg-tint);box-shadow:var(--shadow)}.product-media-main img{width:100%;aspect-ratio:1/1;object-fit:contain;background:var(--white)}.product-detail-copy .product-cat{display:inline-block;margin-bottom:8px}.product-detail-copy h1{color:var(--navy);font-size:clamp(1.65rem,4vw,2.7rem);line-height:1.18;margin-bottom:14px}.product-detail-copy .lead{color:var(--text-muted);margin-bottom:20px;line-height:1.7}.product-detail-price{display:flex;align-items:baseline;flex-wrap:wrap;gap:10px;margin:16px 0}.product-detail-price .price-now{font-size:1.75rem}.product-detail-actions{display:flex;gap:12px;flex-wrap:wrap;margin-top:22px}.product-detail-actions .btn{min-width:min(190px,100%)}.product-benefits{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px;margin-top:26px}.product-benefit{display:flex;align-items:center;gap:10px;padding:12px;border:1px solid var(--border);border-radius:12px;color:var(--navy);font-size:.84rem;font-weight:600}.product-benefit i{color:var(--green)}@media(max-width:992px){.product-detail-shell{grid-template-columns:1fr}.product-detail-media{max-width:620px;width:100%;margin-inline:auto}}@media(max-width:600px){.product-benefits{grid-template-columns:1fr}}@media(max-width:430px){.stock-line{font-size:.8rem}.product-actions button{min-height:46px}.product-detail-actions{flex-direction:column}.product-detail-actions .btn{width:100%}}.variant-picker{margin:16px 0}.variant-picker-label{display:block;font-size:.8rem;font-weight:700;color:var(--navy);margin-bottom:8px}.variant-chips{display:flex;flex-wrap:wrap;gap:8px}.variant-chip{padding:9px 16px;border:2px solid var(--border);border-radius:50px;background:var(--white);color:var(--text-dark);font-weight:600;font-size:.85rem;cursor:pointer;transition:border-color .15s,background .15s,color .15s}.variant-chip:hover{border-color:var(--green)}.variant-chip.active{border-color:var(--green);background:var(--green);color:var(--white)}
.reviews-section{margin-top:44px;padding-top:28px;border-top:1px solid var(--border)}
.reviews-section h2{color:var(--navy);font-size:1.2rem;margin-bottom:6px}
.reviews-summary{display:flex;align-items:center;gap:12px;flex-wrap:wrap;margin-bottom:20px}
.reviews-avg{font-size:1.8rem;font-weight:800;color:var(--navy);line-height:1}
.stars{color:#f5a623;letter-spacing:1px;font-size:.95rem}
.stars .off{color:var(--border)}
.reviews-count{color:var(--text-muted);font-size:.85rem}
.review-item{padding:14px 0;border-bottom:1px solid var(--border)}
.review-item:last-child{border-bottom:none}
.review-head{display:flex;align-items:center;gap:10px;flex-wrap:wrap;margin-bottom:5px}
.review-author{font-weight:700;color:var(--navy);font-size:.9rem}
.review-date{color:var(--text-muted);font-size:.76rem;margin-left:auto}
.review-verified{background:var(--green-soft);color:var(--green);font-size:.66rem;font-weight:700;padding:2px 8px;border-radius:50px}
.review-title{font-weight:700;color:var(--text-dark);font-size:.9rem;margin-bottom:3px}
.review-body{color:var(--text-muted);font-size:.88rem;line-height:1.6}
.review-form{margin-top:24px;padding:20px;border:1px solid var(--border);border-radius:var(--radius);background:var(--bg-soft)}
.review-form h3{color:var(--navy);font-size:1rem;margin-bottom:14px}
.star-picker{display:flex;gap:4px;margin-bottom:12px}
.star-picker button{background:none;border:0;font-size:1.6rem;color:var(--border);cursor:pointer;padding:0;line-height:1;transition:color .12s}
.star-picker button.on{color:#f5a623}
.review-msg{font-size:.82rem;margin-top:10px}
.review-msg.ok{color:var(--green);font-weight:600}
.review-msg.err{color:var(--danger)}
.review-gate{margin-top:24px;padding:16px 18px;border:1px dashed var(--border);border-radius:var(--radius);background:var(--bg-soft);color:var(--text-muted);font-size:.88rem;line-height:1.6}
.review-gate i{color:var(--green);margin-right:6px}
.review-gate a{color:var(--green);font-weight:700;text-decoration:underline}
.review-verified-note{display:inline-flex;align-items:center;gap:6px;color:var(--green);font-size:.78rem;font-weight:700;margin-bottom:14px}
.share-popover-overlay{display:none;position:fixed;inset:0;background:rgba(15,26,77,.5);z-index:1001;align-items:flex-end;justify-content:center;padding:0}
.share-popover-overlay.open{display:flex}
.share-popover{width:100%;max-width:420px;background:var(--white);border-radius:20px 20px 0 0;padding:22px 20px 28px;box-shadow:0 -10px 40px rgba(0,0,0,.2);animation:sharePopIn .25s ease}
@keyframes sharePopIn{from{transform:translateY(30px);opacity:0}to{transform:translateY(0);opacity:1}}
.share-popover-head{display:flex;align-items:center;justify-content:space-between;margin-bottom:18px}
.share-popover-head h3{color:var(--navy);font-size:1.05rem;margin:0}
.share-popover-close{width:34px;height:34px;border-radius:50%;background:var(--bg-tint);color:var(--navy);display:flex;align-items:center;justify-content:center;border:0;cursor:pointer}
.share-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:14px 8px}
.share-option{display:flex;flex-direction:column;align-items:center;gap:8px;color:var(--text-dark);font-size:.76rem;font-weight:600;border:0;background:none;cursor:pointer;padding:0}
.share-icon{width:52px;height:52px;border-radius:50%;display:flex;align-items:center;justify-content:center;color:var(--white);font-size:1.3rem}
.share-icon.wa{background:#25d366}
.share-icon.fb{background:#1877f2}
.share-icon.tg{background:#26a5e4}
.share-icon.tw{background:#0f1419}
.share-icon.copy{background:var(--navy)}
@media (min-width:600px){.share-popover-overlay{align-items:center}.share-popover{border-radius:20px}}
/* --- Checkout: sticky Place Order bar (mobile) ------------------------- */
/* The real submit button sits about 2000px down the checkout page, below the
   QR block and the screenshot uploader. This keeps the total and the action
   reachable at any scroll position. Desktop already shows the summary card
   alongside the form, so it stays mobile-only. */
.checkout-sticky-bar { display: none; }

@media (max-width: 900px) {
  .checkout-sticky-bar {
    display: flex;
    position: fixed;
    left: 0; right: 0; bottom: 0;
    z-index: 60;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 10px 14px calc(10px + env(safe-area-inset-bottom));
    background: #fff;
    border-top: 1px solid var(--border, #e3e8e6);
    box-shadow: 0 -6px 22px rgba(15, 26, 77, .12);
    transform: translateY(0);
    transition: transform .18s ease, opacity .18s ease;
  }
  .checkout-sticky-bar.is-hidden {
    transform: translateY(110%);
    opacity: 0;
    pointer-events: none;
  }
  .csb-total { display: flex; flex-direction: column; line-height: 1.2; min-width: 0; }
  .csb-total span { font-size: .72rem; color: var(--text-muted, #697386); font-weight: 600; }
  .csb-total strong { font-size: 1.15rem; color: var(--navy, #0f1a4d); font-variant-numeric: tabular-nums; }
  .checkout-sticky-bar .btn { flex: 0 0 auto; min-height: 46px; padding-inline: 20px; white-space: nowrap; }

  /* Room so the bar never covers the last of the form. */
  body:has(.checkout-sticky-bar) { padding-bottom: 78px; }
}

@media (prefers-reduced-motion: reduce) {
  .checkout-sticky-bar { transition: none; }
}

/* --- Product description: clamp to 3 lines with a More toggle ---------- */
/* A long description used to push the price and Add to Cart off the first
   screen on a phone. Three lines keeps the buying controls in view; the full
   text is one tap away. */
.pd-desc-wrap { margin: 0 0 4px; }
.pd-desc {
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
  margin-bottom: 0;
}
.pd-desc.open {
  -webkit-line-clamp: unset;
  display: block;
  overflow: visible;
}
.pd-desc-toggle {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin-top: 6px;
  padding: 4px 0;
  background: none;
  border: 0;
  cursor: pointer;
  color: var(--green, #43a047);
  font-weight: 700;
  font-size: 0.88rem;
  font-family: inherit;
}
.pd-desc-toggle:hover { text-decoration: underline; }
.pd-desc-toggle:focus-visible { outline: 2px solid var(--green, #43a047); outline-offset: 3px; border-radius: 4px; }
.pd-desc-toggle i { font-size: 0.72rem; }

/* --- Checkout: Delivery Details wizard ---------------------------------- */
/* One field per screen instead of a form requiring a scroll past several
   fields plus the QR/screenshot sections below just to see what's left. */
.cf-wizard { margin-bottom: 22px; }

.cf-progress-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 18px;
  flex-wrap: wrap;
}
.cf-progress-text {
  font-size: 0.78rem;
  font-weight: 700;
  color: var(--text-muted);
  white-space: nowrap;
}
.cf-dots { display: flex; gap: 6px; }
.cf-dot {
  width: 26px; height: 26px;
  border-radius: 50%;
  border: 1.5px solid var(--border);
  background: #fff;
  color: var(--text-muted);
  font-size: 0.72rem;
  font-weight: 800;
  display: grid;
  place-items: center;
  cursor: pointer;
  transition: background .15s ease, border-color .15s ease, color .15s ease, transform .15s ease;
}
.cf-dot:disabled { cursor: default; opacity: .55; }
.cf-dot.done { background: var(--green-soft); border-color: var(--green); color: var(--green); }
.cf-dot.active { background: var(--green); border-color: var(--green); color: #fff; transform: scale(1.12); }
.cf-dot:not(:disabled):hover { border-color: var(--green); }
.cf-dot:focus-visible { outline: 2px solid var(--green); outline-offset: 2px; }

.cf-step { min-height: 92px; }
/* Re-fires every time a step becomes visible (hidden -> not-hidden), which is
   exactly the moment that deserves a little motion. */
.cf-step:not([hidden]) { animation: cfStepIn .22s ease; }
@keyframes cfStepIn {
  from { opacity: 0; transform: translateX(10px); }
  to { opacity: 1; transform: translateX(0); }
}

.cf-hi {
  font-weight: 500;
  color: var(--text-muted);
  font-size: 0.86em;
}

.cf-nav {
  display: flex;
  gap: 10px;
  margin-top: 6px;
}
.cf-nav #cfNext { flex: 1; }
.cf-nav #cfBack { flex: 0 0 auto; }

.cf-rest:not([hidden]) { animation: cfRestIn .25s ease; }
@keyframes cfRestIn {
  from { opacity: 0; transform: translateY(6px); }
  to { opacity: 1; transform: translateY(0); }
}

/* Sticky Place Order bar stays fully hidden (not just slid away) until the
   wizard above hands off — see checkout.php's wireCheckoutWizard(). */
.checkout-sticky-bar.cf-locked { display: none !important; }

@media (prefers-reduced-motion: reduce) {
  .cf-step:not([hidden]), .cf-rest:not([hidden]) { animation: none; }
  .cf-dot { transition: none; }
}

@media (max-width: 480px) {
  .cf-dots { gap: 4px; }
  .cf-dot { width: 23px; height: 23px; font-size: 0.68rem; }
}

/* --- Checkout: compact Payment/Screenshot section ----------------------- */
/* Previously ~990px tall on a 375px phone (a 168px QR box, a 5-line
   instruction list, a padded dropzone) — nothing here needed to be that
   tall, so once this section is revealed it should read in one screen with
   no scrolling, matching the one-field-per-screen wizard above it. */
#cfRest h3 { margin-bottom: 10px; font-size: 0.98rem; }

#cfRest .payment-methods { margin-bottom: 10px; gap: 6px; }
#cfRest .pm-option {
  flex: 1 1 0;
  min-width: 0;
  padding: 9px 6px;
  font-size: 0.74rem;
  gap: 5px;
  justify-content: center;
  text-align: center;
  /* The site-wide overflow-wrap:anywhere reset (production.css) otherwise
     fragments these short pill labels character-by-character the moment
     three of them have to share one narrow row — the same failure mode
     hit on the Categories cards earlier. */
  overflow-wrap: normal;
  word-break: normal;
}
#cfRest .pm-option i { font-size: 1rem; }

@media (max-width: 360px) {
  #cfRest .pm-option { font-size: 0.68rem; padding: 8px 4px; }
}

#cfRest .pay-block { margin-bottom: 10px; }

/* COD stays a compact horizontal row — an icon and two lines of text, never
   competing with anything else on screen since only one payment block shows
   at a time. */
#cfRest .qr-box {
  display: flex;
  align-items: center;
  gap: 12px;
  text-align: left;
  padding: 12px 14px;
}
#cfRest #codBlock > i {
  flex: 0 0 auto;
  font-size: 1.6rem;
  color: var(--green);
}
.qr-box-right { flex: 1; min-width: 0; }
#cfRest .qr-box .amount { font-size: 1.1rem; margin-bottom: 1px; }
#cfRest .qr-box .qr-upi { margin: 0 0 2px; }
.qr-hint { margin: 0; font-size: 0.78rem; line-height: 1.4; color: var(--text-muted); }

/* QR Code is its own dedicated screen now rather than squeezed beside a
   second payment option, so it can afford to be a size someone can actually
   scan — back to centered and vertical instead of a small horizontal thumb. */
#cfRest #qrPaymentBlock {
  flex-direction: column;
  text-align: center;
}
#cfRest #qrPaymentBlock .qr-placeholder {
  width: 136px; height: 136px;
  margin: 0 auto;
}
#cfRest #qrPaymentBlock .qr-placeholder i { font-size: 2.1rem; }
#cfRest #qrPaymentBlock .qr-placeholder span { font-size: 0.66rem; }
#cfRest #qrPaymentBlock .qr-box-right { text-align: center; }
#cfRest #qrPaymentBlock .amount { font-size: 1.25rem; margin-top: 8px; }

/* UPI-direct: amount, one button that hands off to whichever UPI app is
   installed, one line explaining what happens. */
#upiPayBlock {
  text-align: center;
  background: var(--bg-tint);
  border: 2px dashed #b9c6be;
  border-radius: var(--radius);
  padding: 16px;
}
#upiPayBlock .amount { font-size: 1.3rem; font-weight: 800; color: var(--navy); margin-bottom: 10px; }
#upiPayBlock .btn { margin-bottom: 8px; }

#cfRest #screenshotSection { margin-bottom: 10px; }
#cfRest .file-upload { padding: 12px 14px; }
#cfRest .file-upload i { font-size: 1.25rem; margin-bottom: 4px; }
#cfRest .file-upload > span { font-size: 0.85rem; }
#cfRest .file-upload > span .opt { font-size: 0.76rem; font-weight: 400; color: var(--text-muted); }

/* --- Checkout: Order Summary waits for the wizard on mobile ------------- */
/* Below 992px, .checkout-layout stacks into one column, which put Order
   Summary directly beneath the Delivery Details card — scrolling past step
   1 landed straight on it, adding length to a flow that was just shortened.
   On the two-column desktop layout it sits beside the form instead of below
   it, so hiding it there would just leave an empty gap for no benefit. */
#summaryCard[hidden] { display: none; }
@media (min-width: 993px) {
  #summaryCard[hidden] { display: block !important; }
}

/* --- Checkout: back out of the payment screen -------------------------- */
.cf-rest-back {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  border: 0;
  background: none;
  padding: 0;
  margin-bottom: 14px;
  color: var(--green);
  font-weight: 700;
  font-size: 0.85rem;
  cursor: pointer;
}
.cf-rest-back:hover { text-decoration: underline; }
.cf-rest-back:focus-visible { outline: 2px solid var(--green); outline-offset: 3px; border-radius: 4px; }
.cf-rest-back i { font-size: 0.75rem; }

/* --- Checkout: tap the inline QR to zoom it full-size ------------------- */
/* The inline QR sits next to the amount/hint text, sized to fit that row —
   too small to scan comfortably. A small expand badge marks it tappable;
   the actual enlargement is a modal (see #qrModal below and wireQrModal()
   in checkout.php), not a CSS zoom, so it also works from a screen reader
   or keyboard (role="button", tabindex, Enter/Space). */
#cfRest #qrPaymentBlock .qr-placeholder {
  cursor: pointer;
  position: relative;
}
#cfRest #qrPaymentBlock .qr-placeholder:focus-visible {
  outline: 2px solid var(--green);
  outline-offset: 2px;
}
#cfRest #qrPaymentBlock .qr-placeholder::after {
  content: "\f065";
  font-family: "Font Awesome 6 Free";
  font-weight: 900;
  position: absolute;
  bottom: -6px;
  right: -6px;
  width: 22px;
  height: 22px;
  background: var(--navy);
  color: var(--white);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 0.62rem;
  pointer-events: none;
  box-shadow: 0 2px 5px rgba(15, 26, 77, .3);
}

.qr-modal-box {
  position: relative;
  padding: 30px 24px 26px;
  max-width: 340px;
}
.modal-close {
  position: absolute;
  top: 10px;
  right: 10px;
  width: 34px;
  height: 34px;
  border: 0;
  border-radius: 50%;
  background: var(--bg-tint);
  color: var(--navy);
  font-size: 1rem;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
}
.modal-close:hover { background: var(--border); }
.qr-modal-image {
  width: min(260px, 100%);
  aspect-ratio: 1 / 1;
  margin: 6px auto 16px;
  background: var(--white);
  border: 1.5px solid var(--border);
  border-radius: 12px;
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
}
.qr-modal-image img { width: 100%; height: 100%; object-fit: contain; }
#qrModalAmount { font-size: 1.25rem; font-weight: 800; color: var(--navy); margin-bottom: 4px; }