/* =====================================================
   Storefront theme — separate from the admin dashboard CSS.
   Mobile-first, CSS variables so Theme Customize settings can
   drive colors without touching this file.
   ===================================================== */
:root {
  --store-primary: #1a7a3c;
  --store-primary-dark: #145c2d;
  --store-primary-light: #e8f7ec;
  --store-text: #1a1f2b;
  --store-text-muted: #6b7280;
  --store-border: #e8e9ec;
  --store-bg: #ffffff;
  --store-bg-alt: #f7f8f9;
  --store-danger: #dc2626;
  --store-radius: 10px;
  --store-radius-lg: 18px;
  --store-font: 'Segoe UI', system-ui, -apple-system, sans-serif;
  --store-shadow-sm: 0 1px 3px rgba(16,24,40,.06), 0 1px 2px rgba(16,24,40,.04);
  --store-shadow-md: 0 4px 14px rgba(16,24,40,.08);
  --store-shadow-lg: 0 16px 40px rgba(16,24,40,.16);
}

html { scroll-behavior: smooth; }
.store-body { margin: 0; font-family: var(--store-font); color: var(--store-text); background: var(--store-bg); -webkit-font-smoothing: antialiased; }
.store-body * { box-sizing: border-box; }
.store-body ::-webkit-scrollbar { width: 8px; height: 8px; }
.store-body ::-webkit-scrollbar-track { background: transparent; }
.store-body ::-webkit-scrollbar-thumb { background: #d1d5db; border-radius: 8px; }
.store-body ::-webkit-scrollbar-thumb:hover { background: #b7bcc4; }
.store-container { max-width: 1280px; margin: 0 auto; padding: 0 16px; }

/* ── Announcement bar ─────────────────────────────────── */
.announcement-bar { background: var(--store-primary); color: #fff; font-size: 0.82rem; overflow: hidden; white-space: nowrap; }
.announcement-track { display: inline-flex; padding: 8px 0; animation: announcement-scroll 18s linear infinite; }
.announcement-track span { padding: 0 32px; flex-shrink: 0; }
@keyframes announcement-scroll { 0% { transform: translateX(0); } 100% { transform: translateX(-50%); } }
@media (prefers-reduced-motion: reduce) { .announcement-track { animation: none; } }

/* ── Header ────────────────────────────────────────────── */
.store-header { border-bottom: 1px solid var(--store-border); background: var(--store-header-bg, #fff); position: sticky; top: 0; z-index: 40; }
.store-header-inner { display: flex; align-items: center; gap: 12px; padding: 12px 16px; max-width: 1280px; margin: 0 auto; }
.store-logo {
  font-size: 1.3rem; font-weight: 800; color: var(--store-primary); text-decoration: none;
  display: flex; align-items: center; gap: 6px; white-space: nowrap; overflow: hidden;
  text-overflow: ellipsis; min-width: 0; flex-shrink: 1;
}
@media (max-width: 400px) {
  .store-header-inner { gap: 6px; padding: 10px 12px; }
  .store-logo { font-size: 1.05rem; }
  .store-header-icons { gap: 2px; }
}
.store-logo img { height: 34px; }
.store-nav { display: none; gap: 22px; margin-left: 24px; flex: 1; }
.store-nav a { color: var(--store-header-text, var(--store-text)); text-decoration: none; font-size: 0.92rem; font-weight: 500; }
.store-nav a:hover { color: var(--store-primary); }
.store-header-icons { display: flex; align-items: center; gap: 8px; margin-left: auto; }
.store-icon-btn {
  background: none; border: none; cursor: pointer; font-size: 1.05rem; color: var(--store-header-text, var(--store-text)); position: relative;
  width: 38px; height: 38px; display: flex; align-items: center; justify-content: center; border-radius: 50%; transition: background .15s ease;
}
.store-icon-btn:hover { background: var(--store-bg-alt); }
.store-cart-count {
  position: absolute; top: 2px; right: 2px; background: var(--store-primary); color: #fff;
  font-size: 0.6rem; font-weight: 700; border-radius: 50%; width: 15px; height: 15px; display: flex; align-items: center; justify-content: center;
}
.store-menu-toggle { background: none; border: none; font-size: 1.25rem; cursor: pointer; width: 38px; height: 38px; border-radius: 50%; color: var(--store-header-text, var(--store-text)); transition: background .15s ease; }
.store-menu-toggle:hover { background: var(--store-bg-alt); }
@media (min-width: 900px) {
  .store-nav { display: flex; }
  .store-menu-toggle { display: none; }
}
@media (max-width: 899px) {
  .store-nav.store-nav-open {
    display: flex; flex-direction: column; gap: 0; position: absolute; top: 100%; left: 0; right: 0;
    background: var(--store-header-bg, #fff); border-bottom: 1px solid var(--store-border); padding: 8px 16px 16px; margin: 0; z-index: 39;
  }
  .store-nav.store-nav-open a { padding: 10px 0; border-bottom: 1px solid var(--store-border); }
  /* Logo centered on mobile: taken out of the flex row entirely (menu toggle
     stays pinned left, cart icon stays pinned right via its own margin-left:
     auto) so it centers on the header's own width regardless of how wide the
     two side buttons are. */
  .store-header-inner { position: relative; }
  .store-header-inner .store-logo {
    position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%);
    max-width: 60%; flex: none;
  }
}

/* ── Product grid ──────────────────────────────────────── */
.store-section { padding-top: 28px; padding-bottom: 28px; }
.store-section-title { font-size: 1.3rem; font-weight: 700; margin: 0 0 18px; }
.product-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 14px; }
@media (min-width: 640px) { .product-grid { grid-template-columns: repeat(3, 1fr); gap: 18px; } }
@media (min-width: 1000px) { .product-grid { grid-template-columns: repeat(4, 1fr); } }

.product-card { text-decoration: none; color: inherit; display: block; }
.product-card-img {
  aspect-ratio: 1; border-radius: var(--store-radius); overflow: hidden; background: var(--store-bg-alt);
  margin-bottom: 10px; box-shadow: var(--store-shadow-sm); transition: box-shadow .2s ease, transform .2s ease;
}
.product-card-img img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform .35s ease; }
.product-card:hover .product-card-img { box-shadow: var(--store-shadow-md); transform: translateY(-2px); }
.product-card:hover .product-card-img img { transform: scale(1.06); }
.product-card-title { font-size: 0.88rem; line-height: 1.4; margin-bottom: 5px; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; color: var(--store-text); }
.product-card-price { font-size: 0.9rem; color: var(--store-text-muted); }
.product-card-price strong { color: var(--store-primary); font-weight: 700; }

/* ── Home page (configurable via Theme Settings -> Home Page) ──────────── */
.home-section {
  max-width: 1280px; margin: 0 auto;
  padding-top: var(--home-pad-top-mobile, 28px); padding-bottom: var(--home-pad-bottom-mobile, 28px);
  padding-left: var(--home-pad-left-mobile, 16px); padding-right: var(--home-pad-right-mobile, 16px);
}
@media (min-width: 1000px) {
  .home-section {
    padding-top: var(--home-pad-top-desktop, 28px); padding-bottom: var(--home-pad-bottom-desktop, 28px);
    padding-left: var(--home-pad-left-desktop, 16px); padding-right: var(--home-pad-right-desktop, 16px);
  }
}
.home-banner { display: block; margin-bottom: 24px; border-radius: var(--store-radius); overflow: hidden; box-shadow: var(--store-shadow-sm); }
.home-banner img { width: 100%; height: auto; display: block; }

.home-product-grid { grid-template-columns: repeat(var(--home-grid-cols-mobile, 2), 1fr); gap: var(--home-grid-gap-mobile, 14px); }
@media (min-width: 1000px) { .home-product-grid { grid-template-columns: repeat(var(--home-grid-cols-desktop, 5), 1fr); gap: var(--home-grid-gap-desktop, 18px); } }
.home-product-grid .product-card-img { aspect-ratio: var(--home-thumb-aspect, 1); }
.home-product-grid .product-card-title { font-size: var(--home-title-size, 0.88rem); }

.store-view-all { display: flex; justify-content: center; margin-top: 28px; }
.btn-store {
  display: inline-flex; align-items: center; justify-content: center; gap: 7px; padding: 13px 26px;
  border-radius: 12px; font-weight: 600; font-size: 0.94rem; text-decoration: none; cursor: pointer;
  border: 1px solid transparent; transition: transform .12s ease, box-shadow .2s ease, background .15s ease;
}
.btn-store:active { transform: scale(.98); }
.btn-store-primary { background: var(--store-primary); color: #fff; box-shadow: 0 4px 12px rgba(26,122,60,.28); }
.btn-store-primary:hover { background: var(--store-primary-dark); box-shadow: 0 6px 16px rgba(26,122,60,.34); }
.btn-store-outline { background: #fff; color: var(--store-text); border-width: 2px; border-color: #c3c7ce; }
.btn-store-outline:hover { border-color: #9aa0aa; background: var(--store-bg-alt); }
.btn-store-dark { background: #14161a; color: #fff; }
.btn-store-dark:hover { background: #000; }
.btn-store-full { width: 100%; }
.btn-store:disabled { opacity: .5; cursor: not-allowed; box-shadow: none; }

/* ── Footer ────────────────────────────────────────────── */
.store-footer { background: var(--store-footer-bg, #14171c); color: var(--store-footer-text, #cbd0d8); padding-top: 52px; padding-bottom: 24px; margin-top: 56px; }
.store-footer-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 32px 20px; padding-bottom: 40px; }
.store-footer-grid > div:first-child { grid-column: 1 / -1; }
@media (min-width: 800px) {
  .store-footer-grid { grid-template-columns: 1.4fr 1fr 1fr 1.4fr; gap: 24px; }
  .store-footer-grid > div:first-child { grid-column: auto; }
}
.store-footer .store-logo { color: #fff; }
.store-footer-tagline { font-size: .84rem; color: var(--store-footer-text, #8b93a1); margin: 10px 0 16px; line-height: 1.6; max-width: 260px; }
.store-footer h3 { font-size: 0.82rem; margin: 0 0 16px; color: #fff; font-weight: 700; text-transform: uppercase; letter-spacing: .06em; }
.store-footer ul { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 11px; }
.store-footer a { color: var(--store-footer-text, #9aa1ab); text-decoration: none; font-size: 0.87rem; transition: color .15s ease; }
.store-footer a:hover { color: #fff; }
.store-footer li { font-size: .87rem; color: var(--store-footer-text, #9aa1ab); line-height: 1.6; }
.store-social { display: flex; gap: 10px; margin-top: 4px; }
.store-social a {
  width: 36px; height: 36px; border-radius: 50%; background: rgba(255,255,255,.08);
  display: flex; align-items: center; justify-content: center; font-size: 1rem; color: #fff;
  transition: background .15s ease, transform .15s ease;
}
.store-social a:hover { background: var(--store-primary); transform: translateY(-2px); }
.store-footer-bottom {
  text-align: center; font-size: 0.78rem; color: var(--store-footer-text, #8b93a1); padding-top: 22px;
  border-top: 1px solid rgba(255,255,255,.08);
}

/* ── Product detail ────────────────────────────────────── */
/* minmax(0, 1fr), not bare 1fr — a bare fr track has an implicit min-width:auto,
   so a wide child (e.g. a gallery with many thumbnails) grows the whole grid
   column instead of clipping inside it, defeating overflow-x:auto entirely.
   Same trap fixed once before in this codebase (product-edit's TinyMCE panel). */
/* padding-bottom deliberately much smaller than padding-top (not the
   symmetric 20px this used to be) — the space below this block is mostly
   owned by .pd-trust-points' own configurable margin-bottom now (see
   store.css's .pd-trust-points rule); this is just a small fallback
   baseline for when trust-points is empty or the optional WhatsApp button
   (.pd-whatsapp, which supplies its own small margin-top) is shown instead. */
.product-detail { display: grid; grid-template-columns: minmax(0, 1fr); gap: 24px; padding: 20px 0 8px; }
@media (min-width: 900px) { .product-detail { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 40px; } }

/* Product page container — configurable via Theme Settings -> Product Page. */
.pd-page-container {
  max-width: 1280px; margin: 0 auto;
  padding-top: var(--pdpage-pad-top-mobile, 0px); padding-bottom: var(--pdpage-pad-bottom-mobile, 0px);
  padding-left: var(--pdpage-pad-left-mobile, 16px); padding-right: var(--pdpage-pad-right-mobile, 16px);
}
@media (min-width: 900px) {
  .pd-page-container {
    padding-top: var(--pdpage-pad-top-desktop, 0px); padding-bottom: var(--pdpage-pad-bottom-desktop, 0px);
    padding-left: var(--pdpage-pad-left-desktop, 16px); padding-right: var(--pdpage-pad-right-desktop, 16px);
  }
}

.pd-gallery-main { border-radius: var(--store-radius-lg); overflow: hidden; background: var(--store-bg-alt); box-shadow: var(--store-shadow-sm); }
.pd-gallery-main img { width: 100%; height: auto; display: block; }
.pd-gallery-thumbs-wrap { position: relative; margin-top: 12px; }
.pd-gallery-thumbs { display: flex; gap: 10px; overflow-x: auto; padding-bottom: 2px; scroll-behavior: smooth; scrollbar-width: none; }
.pd-gallery-thumbs::-webkit-scrollbar { display: none; }
.pd-gallery-thumbs img { width: 64px; height: 64px; object-fit: cover; border-radius: 10px; cursor: pointer; border: 2px solid transparent; flex-shrink: 0; opacity: .7; transition: all .15s ease; }
.pd-gallery-thumbs img:hover { opacity: 1; }
.pd-gallery-thumbs img.active { border-color: var(--store-primary); opacity: 1; box-shadow: var(--store-shadow-sm); }
/* Arrows only ever take up layout space / render at all once JS confirms the
   row actually overflows (see pdUpdateThumbArrows()) — avoids a dead-looking
   button when every thumbnail already fits. */
.pd-thumbs-arrow {
  position: absolute; top: 32px; transform: translateY(-50%); z-index: 2;
  width: 28px; height: 28px; border-radius: 50%; border: 1px solid var(--store-border);
  background: var(--store-bg); box-shadow: var(--store-shadow-sm);
  display: none; align-items: center; justify-content: center;
  cursor: pointer; font-size: 17px; line-height: 1; color: var(--store-text); padding: 0;
}
.pd-thumbs-arrow:hover { background: var(--store-bg-alt); }
.pd-thumbs-arrow-prev { left: -4px; }
.pd-thumbs-arrow-next { right: -4px; }
.pd-gallery-thumbs-wrap.has-overflow .pd-thumbs-arrow.show { display: flex; }

.pd-title { font-size: var(--pdpage-title-text-size, 1.5rem); font-weight: var(--pdpage-title-font-weight, 700); margin: 0 0 10px; line-height: 1.35; letter-spacing: -.01em; }
.pd-price { font-size: var(--pdpage-price-text-size, 1.4rem); color: var(--pdpage-price-color, var(--store-primary)); font-weight: var(--pdpage-price-font-weight, 800); margin-bottom: 18px; margin-left: 8px; letter-spacing: -.01em; }
.pd-price .compare { color: var(--pdpage-compare-color, var(--store-text-muted)); text-decoration: line-through; font-weight: var(--pdpage-compare-font-weight, 400); font-size: var(--pdpage-compare-text-size, 1rem); margin-left: 10px; }

.pd-option-group { margin-bottom: 18px; }
.pd-option-label { font-weight: 600; font-size: 0.88rem; margin-bottom: 9px; display: block; color: var(--store-text); }
.pd-pills { display: flex; flex-wrap: wrap; gap: 9px; }
.pd-pill {
  padding: 9px 18px; border-radius: 10px; border: 2px solid #c3c7ce; background: #fff; color: var(--store-text);
  font-size: 0.86rem; font-weight: 500; cursor: pointer; transition: all .15s ease;
}
.pd-pill:hover:not(.active):not(:disabled) { border-color: var(--store-text); }
.pd-pill.active { background: #14161a; color: #fff; border-color: #14161a; box-shadow: var(--store-shadow-sm); }
.pd-pill:disabled { opacity: .35; cursor: not-allowed; text-decoration: line-through; }

.pd-offer-tiers { display: flex; flex-direction: column; gap: 10px; margin: 4px 0 16px; }
#checkoutOfferTiers.pd-offer-tiers { gap: 7px; margin: 0 0 10px; }
#checkoutOfferTiers .pd-offer-tier { padding: 8px 12px; }
#checkoutOfferTiers .pd-offer-tier-title { font-size: 0.87rem; }
#checkoutOfferTiers .pd-offer-tier-price { font-size: 0.88rem; }
#checkoutOfferTiers .pd-offer-tag { font-size: 0.66rem; padding: 2px 8px; }
#checkoutOfferTiers .pd-offer-label { top: -9px; font-size: 0.6rem; padding: 2px 8px; }
.pd-offer-tier {
  position: relative; display: flex; align-items: center; gap: 12px; padding: 12px 16px;
  border: 2px solid var(--store-border); border-radius: 12px; cursor: pointer; background: #fff;
  transition: border-color .15s ease, background .15s ease, box-shadow .15s ease;
}
.pd-offer-tier:hover { border-color: #c7cad1; }
.pd-offer-tier.active { border-color: var(--store-primary); background: var(--store-primary-light); box-shadow: 0 2px 10px rgba(26,122,60,.14); }
.pd-offer-radio { flex-shrink: 0; width: 20px; height: 20px; border-radius: 50%; border: 2px solid #c7cad1; position: relative; transition: border-color .15s ease; }
.pd-offer-tier.active .pd-offer-radio { border-color: var(--store-primary); }
.pd-offer-tier.active .pd-offer-radio::after { content: ''; position: absolute; inset: 3px; border-radius: 50%; background: var(--store-primary); }
.pd-offer-tier-main { flex: 1; display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.pd-offer-tier-title { font-weight: 700; font-size: 0.94rem; color: var(--store-text); }
.pd-offer-tag { font-size: 0.72rem; font-weight: 700; color: #fff; padding: 3px 9px; border-radius: 999px; }
.pd-offer-tier-price { font-weight: 800; font-size: 0.98rem; color: var(--store-text); text-align: right; white-space: nowrap; }
.pd-offer-tier-price .compare { display: block; text-decoration: line-through; color: var(--store-text-muted); font-weight: 400; font-size: 0.78rem; }
.pd-offer-label {
  position: absolute; top: -11px; right: 14px; background: var(--store-danger); color: #fff;
  font-size: 0.68rem; font-weight: 700; padding: 3px 10px; border-radius: 999px; box-shadow: var(--store-shadow-sm);
}

.pd-stock-msg { font-size: 0.85rem; margin-bottom: 16px; font-weight: 500; }
.pd-stock-msg.low { color: #b45309; }
.pd-stock-msg.out { color: var(--store-danger); }
.pd-stock-msg.ok { color: var(--store-primary); }

.pd-qty { display: inline-flex; align-items: center; border: 1px solid var(--store-border); border-radius: 10px; margin-bottom: 18px; overflow: hidden; }
.pd-qty button { width: 42px; height: 42px; border: none; background: var(--store-primary-light); color: var(--store-primary-dark); font-size: 1.15rem; font-weight: 600; cursor: pointer; transition: background .15s ease; }
.pd-qty button:hover { background: #d5f0dc; }
.pd-qty button:last-child { background: var(--store-primary); color: #fff; }
.pd-qty button:last-child:hover { background: var(--store-primary-dark); }
.pd-qty input { width: 50px; text-align: center; border: none; font-size: 0.98rem; font-weight: 600; -moz-appearance: textfield; }

.pd-actions { display: flex; flex-direction: column; gap: 11px; margin-bottom: 22px; }
.pd-trust-badges { display: none; justify-content: space-between; text-align: center; padding: 10px 4px; background: var(--store-bg-alt); border-radius: var(--store-radius); margin-bottom: 18px; }
@media (min-width: 1000px) { .pd-trust-badges { display: flex; } }
.pd-trust-badges > div { flex: 1; font-size: 0.76rem; color: var(--store-text-muted); font-weight: 500; }
.pd-trust-badges .icon {
  font-size: 1.15rem; display: flex; align-items: center; justify-content: center; margin: 0 auto 6px;
  width: 38px; height: 38px; border-radius: 50%; background: #fff; box-shadow: var(--store-shadow-sm);
}
/* margin-bottom is the single, admin-configurable (Theme Settings -> Product
   Page) source of the space before whatever follows (usually .pd-tabs) —
   .product-detail's own padding-bottom and .pd-tabs' own margin-top used to
   *also* each add their own independent space here, three unrelated rules
   stacking into a gap much bigger than any one of them suggested alone. */
.pd-trust-points { display: flex; flex-direction: column; gap: 8px; margin-bottom: var(--pdpage-trust-points-gap, 16px); font-size: var(--pdpage-trust-points-text-size, 0.87rem); font-weight: var(--pdpage-trust-points-font-weight, 400); }
.pd-trust-points p { margin: 0; }
@media (min-width: 1000px) { .pd-trust-points { display: none; } }
.pd-whatsapp { margin-top: 6px; }

/* Mobile default: accordion — each item is a full-width bar that expands its
   own content directly below it when active. Every color/size here reads
   from a --pdtabs-mobile-* CSS variable (injected by Theme Settings ->
   Product Tabs, with a fallback matching the original hardcoded design so
   nothing changes visually until an admin customizes it). */
/* margin-top: 0 deliberately — .pd-trust-points' own margin-bottom (see
   above) is now the single configured source of the space before this
   section, not a second, independent contributor stacking on top of it. */
.pd-tabs { display: flex; flex-direction: column; gap: 8px; margin-top: 0; }
.pd-tab-item { border-radius: var(--pdtabs-mobile-radius, 9px); overflow: hidden; }
.pd-tab-btn {
  width: 100%; display: flex; align-items: center; justify-content: space-between; gap: 8px;
  background: var(--pdtabs-mobile-inactive-bg, var(--store-primary-dark));
  color: var(--pdtabs-mobile-inactive-text, #fff);
  border: 1px solid var(--pdtabs-mobile-border, transparent); border-radius: var(--pdtabs-mobile-radius, 9px);
  padding: var(--pdtabs-mobile-btn-padding-v, 11px) var(--pdtabs-mobile-btn-padding-h, 15px);
  font-size: var(--pdtabs-mobile-text-size, 0.82rem); font-weight: 700; cursor: pointer; text-align: left;
  transition: background .15s ease;
}
.pd-tab-btn:hover { background: var(--pdtabs-mobile-hover-bg, var(--store-primary)); }
.pd-tab-btn.active {
  background: var(--pdtabs-mobile-active-bg, var(--store-primary-dark));
  color: var(--pdtabs-mobile-active-text, #fff);
}
.pd-tab-btn-label { display: flex; align-items: center; gap: 7px; }
.pd-tab-icon { font-size: 0.9rem; }
.pd-chevron { transition: transform .2s ease; flex-shrink: 0; font-size: .85rem; }
.pd-tab-btn.active .pd-chevron { transform: rotate(180deg); }
/* height (0 <-> the real content height, JS-measured) animates instead of
   display:none/block, so the page's total height changes gradually instead
   of snapping in one frame — that snap was what made the footer visibly
   jump on iOS Safari when switching from a long pane (e.g. this product's
   own description) to a short one. Padding/border/font live on
   .pd-tab-pane-inner, deliberately NOT on .pd-tab-pane itself: padding and
   border are never compressed below their own set values no matter what
   height says (even with box-sizing:border-box), so a collapsed pane with
   its padding still attached renders as a small but very much visible
   leftover box, not the true zero it looks like on paper — this was a real,
   reproduced bug (a previous version of this shipped, then got reverted
   after breaking the desktop layout, where .pd-tab-item's display:contents
   turns all three panes into siblings sharing the same flex slot, so three
   of these leftover boxes stacked up at once and the page looked
   scrambled). .is-animating is added only from pdShowTab() (product_view.js)
   right when a tab is actually clicked, never during the page's initial
   render — the transition would otherwise also apply to the very first
   time the default-open pane's height gets set on page load, producing a
   visible "pop open" animation on every page load that has nothing to do
   with any click. */
.pd-tab-pane { overflow: hidden; height: 0; }
.pd-tab-pane.is-animating { transition: height .3s ease; }
.pd-tab-pane-inner {
  padding: var(--pdtabs-mobile-content-padding-v, 16px) var(--pdtabs-mobile-content-padding-h, 15px);
  background: #fff;
  border: 1px solid var(--pdtabs-mobile-border, var(--store-border)); border-top: none;
  border-radius: 0 0 var(--pdtabs-mobile-radius, 9px) var(--pdtabs-mobile-radius, 9px);
  font-size: var(--pdtabs-mobile-content-text-size, 0.87rem); line-height: 1.75;
  color: var(--pdtabs-mobile-content-text-color, #374151);
}
.pd-tab-pane.active .pd-tab-pane-inner { animation: pd-fade-in .2s ease; }

/* Desktop: segmented pill tabs, same --pdtabs-desktop-* variable pattern.
   Flexbox (not CSS Grid) so each tab only takes the width its own label
   needs — grid's "auto" tracks absorb and stretch across any leftover
   container width, which forced all three buttons to stretch full-width
   edge-to-edge. The pane gets flex-basis:100% + order so it always wraps
   onto its own full-width line below the button row (still in normal flow,
   so it pushes Related Products/the footer down like the old grid-row did —
   position:absolute would take it out of flow and the footer would render
   on top of it). */
@media (min-width: 720px) {
  .pd-tabs {
    display: flex; flex-direction: row; flex-wrap: wrap; gap: 6px; margin-top: 36px;
    border-bottom: 1px solid var(--pdtabs-desktop-border, var(--store-border));
  }
  .pd-tab-item { display: contents; }
  .pd-tab-btn {
    flex: 0 0 auto; width: auto;
    background: var(--pdtabs-desktop-inactive-bg, var(--store-bg-alt));
    color: var(--pdtabs-desktop-inactive-text, var(--store-text-muted));
    border: 1px solid var(--pdtabs-desktop-border, transparent);
    border-radius: var(--pdtabs-desktop-radius, 9px);
    padding: var(--pdtabs-desktop-btn-padding-v, 11px) var(--pdtabs-desktop-btn-padding-h, 20px);
    font-size: var(--pdtabs-desktop-text-size, 0.87rem); font-weight: 600;
  }
  .pd-tab-btn:hover { background: var(--pdtabs-desktop-hover-bg, #eceef1); color: var(--store-text); }
  .pd-tab-btn.active {
    background: var(--pdtabs-desktop-active-bg, var(--store-primary));
    color: var(--pdtabs-desktop-active-text, #fff);
    box-shadow: 0 4px 12px rgba(26,122,60,.28);
  }
  .pd-chevron { display: none; }
  .pd-tab-pane { flex: 0 0 100%; order: 1; margin-top: 8px; }
  .pd-tab-pane-inner {
    padding: var(--pdtabs-desktop-content-padding-v, 22px) var(--pdtabs-desktop-content-padding-h, 22px);
    border-radius: var(--pdtabs-desktop-radius, var(--store-radius));
    border: 1px solid var(--pdtabs-desktop-border, var(--store-border));
    font-size: var(--pdtabs-desktop-content-text-size, 0.92rem);
    color: var(--pdtabs-desktop-content-text-color, #374151);
  }
}
@keyframes pd-fade-in { from { opacity: 0; transform: translateY(4px); } to { opacity: 1; transform: translateY(0); } }

/* Customer reviews — between the info tabs and Related Products. */
.pd-reviews { margin-top: 32px; }
@media (min-width: 720px) { .pd-reviews { margin-top: 48px; } }

.pdrev-summary {
  display: flex; flex-direction: column; align-items: center; gap: 20px; text-align: center;
  padding: 28px 22px; border-radius: var(--store-radius-lg); background: var(--store-bg-alt);
  border: 1px solid var(--store-border);
}
@media (min-width: 720px) {
  .pdrev-summary { flex-direction: row; align-items: center; text-align: left; gap: 36px; padding: 32px 36px; }
}
.pdrev-avg { flex-shrink: 0; }
.pdrev-avg-num { font-size: 2.4rem; font-weight: 800; color: var(--store-text); line-height: 1; letter-spacing: -0.02em; }
.pdrev-avg-num span { font-size: 1.1rem; font-weight: 500; color: var(--store-text-muted); }
.pdrev-avg-stars { color: var(--store-primary); font-size: 1.2rem; letter-spacing: 2px; margin: 8px 0 6px; }
.pdrev-avg-count { font-size: 0.82rem; color: var(--store-text-muted); font-weight: 500; display: flex; align-items: center; justify-content: center; gap: 6px; }
@media (min-width: 720px) { .pdrev-avg-count { justify-content: flex-start; } }
.pdrev-verified { font-size: 0.85rem; }
.pdrev-divider { display: none; }
@media (min-width: 720px) { .pdrev-divider { display: block; width: 1px; align-self: stretch; background: var(--store-border); } }
.pdrev-breakdown { display: flex; flex-direction: column; gap: 7px; width: 100%; max-width: 300px; }
.pdrev-bar-row { display: flex; align-items: center; gap: 10px; font-size: 0.8rem; color: var(--store-text-muted); font-weight: 500; }
.pdrev-bar-label { width: 78px; flex-shrink: 0; color: var(--store-primary); letter-spacing: 1px; font-size: 0.82rem; }
.pdrev-bar-track { flex: 1; height: 8px; background: #fff; border: 1px solid var(--store-border); border-radius: 5px; overflow: hidden; }
.pdrev-bar-fill { height: 100%; background: var(--store-primary); border-radius: 5px; transition: width .4s ease; }
.pdrev-bar-count { width: 22px; flex-shrink: 0; text-align: right; }
.pdrev-cta { flex-shrink: 0; }
@media (min-width: 720px) { .pdrev-cta { margin-left: auto; } }
.pdrev-summary .btn-store { white-space: nowrap; padding: 12px 26px; box-shadow: var(--store-shadow-md); }

.pdrev-form {
  max-width: 520px; margin: 24px auto 0; padding: 28px 26px; border: 1px solid var(--store-border);
  border-radius: var(--store-radius-lg); background: #fff; box-shadow: var(--store-shadow-md);
}
.pdrev-form h3 { text-align: center; font-size: 1.08rem; font-weight: 700; margin-bottom: 20px; color: var(--store-text); }
.pdrev-form-group { margin-bottom: 16px; }
.pdrev-form-group label {
  display: block; font-size: 0.72rem; font-weight: 700; color: var(--store-text-muted); margin-bottom: 7px;
  text-align: center; text-transform: uppercase; letter-spacing: 0.06em;
}
.pdrev-form-group input[type="text"], .pdrev-form-group input[type="email"], .pdrev-form-group textarea {
  width: 100%; padding: 11px 14px; border: 1px solid var(--store-border); border-radius: 9px;
  font-size: 0.9rem; font-family: inherit; background: #fff; color: var(--store-text);
  transition: border-color .15s ease, box-shadow .15s ease;
}
.pdrev-form-group input[type="text"]:focus, .pdrev-form-group input[type="email"]:focus, .pdrev-form-group textarea:focus {
  outline: none; border-color: var(--store-primary); box-shadow: 0 0 0 3px var(--store-primary-light);
}
.pdrev-form-group textarea { resize: vertical; }
.pdrev-form-group .pdrev-file-label {
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 6px;
  border: 1.5px dashed var(--store-border); border-radius: 9px; padding: 18px; cursor: pointer;
  color: var(--store-text-muted); font-size: 0.78rem; font-weight: 400; text-transform: none; letter-spacing: normal;
  transition: border-color .15s ease, background .15s ease;
}
.pdrev-file-label:hover { border-color: var(--store-primary); background: var(--store-primary-light); }
.pdrev-file-label .icon { font-size: 1.4rem; }
.pdrev-form-group input[type="file"] { display: none; }
.pdrev-star-picker { display: flex; justify-content: center; gap: 6px; font-size: 1.9rem; color: var(--store-primary); cursor: pointer; user-select: none; }
.pdrev-star-picker span { transition: transform .12s ease; }
.pdrev-star-picker span:hover { transform: scale(1.2); }
.pdrev-disclaimer { font-size: 0.74rem; color: var(--store-text-muted); text-align: center; line-height: 1.6; margin: 18px 0; }
.pdrev-form-actions { display: flex; gap: 10px; }
.pdrev-form-actions .btn-store { flex: 1; }

.pdrev-sort { display: flex; align-items: center; gap: 8px; margin-top: 26px; padding-top: 18px; border-top: 1px solid var(--store-border); }
.pdrev-sort label { font-size: 0.82rem; color: var(--store-text-muted); }
.pdrev-sort select {
  border: none; background: none; color: var(--store-primary); font-weight: 600; font-size: 0.88rem;
  cursor: pointer; padding: 4px 20px 4px 2px;
  appearance: none; -webkit-appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 24 24' fill='none' stroke='%231a7a3c' stroke-width='2'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-position: right center;
}
.pdrev-list { display: flex; flex-direction: column; gap: 14px; margin-top: 18px; }
.pdrev-item {
  padding: 20px 22px; border: 1px solid var(--store-border); border-radius: var(--store-radius);
  background: #fff; box-shadow: var(--store-shadow-sm); transition: box-shadow .15s ease;
}
.pdrev-item:hover { box-shadow: var(--store-shadow-md); }
.pdrev-item-top { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.pdrev-item-stars { color: var(--store-primary); letter-spacing: 1.5px; font-size: 0.95rem; }
.pdrev-item-date { font-size: 0.76rem; color: var(--store-text-muted); flex-shrink: 0; white-space: nowrap; }
.pdrev-item-author-row { display: flex; align-items: center; gap: 9px; margin-top: 10px; }
.pdrev-avatar {
  display: inline-flex; align-items: center; justify-content: center; width: 30px; height: 30px; flex-shrink: 0;
  border-radius: 50%; background: var(--store-bg-alt); color: var(--store-text-muted);
}
.pdrev-avatar svg { width: 16px; height: 16px; }
.pdrev-item-author { font-weight: 700; font-size: 0.88rem; color: var(--store-text); }
.pdrev-item-title { font-weight: 700; margin-top: 12px; font-size: 0.94rem; color: var(--store-text); }
.pdrev-item-content { margin-top: 5px; font-size: 0.87rem; line-height: 1.7; color: var(--store-text-muted); }
.pdrev-item-image { margin-top: 12px; max-width: 140px; max-height: 140px; border-radius: 9px; object-fit: cover; box-shadow: var(--store-shadow-sm); }

.pd-related { margin-top: 28px; }
@media (min-width: 720px) { .pd-related { margin-top: 44px; } }
.pd-related-grid { grid-template-columns: repeat(var(--pdpage-related-cols-mobile, 2), 1fr); gap: var(--pdpage-related-gap-mobile, 14px); }
@media (min-width: 1000px) { .pd-related-grid { grid-template-columns: repeat(var(--pdpage-related-cols-desktop, 5), 1fr); gap: var(--pdpage-related-gap-desktop, 18px); } }
.pd-related-grid .product-card-title { font-size: var(--pdpage-related-title-size, 0.88rem); }

@media (max-width: 480px) {
  .pd-trust-badges { font-size: 0.68rem; }
  .pd-title { font-size: 1.25rem; }
  .pd-price { font-size: 1.2rem; }
}

/* ── Cart drawer + checkout popup (shared overlay pattern) ─────────────── */
.drawer-overlay {
  position: fixed; inset: 0; background: rgba(17,20,26,.5); backdrop-filter: blur(1px); z-index: 100;
  opacity: 0; pointer-events: none; transition: opacity .25s ease;
}
.drawer-overlay.show { opacity: 1; pointer-events: auto; }

.cart-drawer {
  position: fixed; top: 0; right: 0; height: 100%; width: 100%; max-width: 400px;
  background: #fff; z-index: 101; display: flex; flex-direction: column;
  transform: translateX(100%); transition: transform .3s cubic-bezier(.22,.68,0,1); box-shadow: var(--store-shadow-lg);
}
.cart-drawer.show { transform: translateX(0); }
.cart-drawer-header { display: flex; align-items: center; justify-content: space-between; padding: 20px 22px; border-bottom: 1px solid var(--store-border); }
.cart-drawer-header h3 { margin: 0; font-size: 1.2rem; font-weight: 700; }
.cart-drawer-header button { background: var(--store-bg-alt); border: none; width: 32px; height: 32px; border-radius: 50%; font-size: 1rem; cursor: pointer; transition: background .15s ease; }
.cart-drawer-header button:hover { background: #eceef1; }
.cart-drawer-body { flex: 1; overflow-y: auto; padding: 8px 22px; scroll-behavior: smooth; -webkit-overflow-scrolling: touch; }
.cart-line { display: flex; gap: 14px; padding: 16px 0; border-bottom: 1px solid var(--store-border); }
.cart-line img { width: 68px; height: 68px; object-fit: cover; border-radius: 10px; background: var(--store-bg-alt); flex-shrink: 0; box-shadow: var(--store-shadow-sm); }
.cart-line-title { font-size: 0.87rem; font-weight: 600; margin-bottom: 3px; line-height: 1.35; }
.cart-line-variant { font-size: 0.78rem; color: var(--store-text-muted); margin-bottom: 8px; }
.cart-line-qty { display: inline-flex; align-items: center; border: 1px solid var(--store-border); border-radius: 8px; overflow: hidden; }
.cart-line-qty button { width: 28px; height: 28px; border: none; background: var(--store-bg-alt); cursor: pointer; font-weight: 600; }
.cart-line-qty span { width: 28px; text-align: center; font-size: .85rem; display: inline-block; font-weight: 600; }
.cart-line-remove { background: none; border: none; cursor: pointer; color: var(--store-text-muted); align-self: flex-start; padding: 2px; transition: color .15s ease; }
.cart-line-remove:hover { color: var(--store-danger); }
.cart-line-total { margin-left: auto; font-weight: 700; font-size: .87rem; white-space: nowrap; color: var(--store-primary); }
.cart-drawer-footer { padding: 18px 22px 22px; border-top: 1px solid var(--store-border); background: var(--store-bg-alt); }
.cart-drawer-total { display: flex; justify-content: space-between; margin-bottom: 14px; font-size: .98rem; font-weight: 600; }
.cart-empty { text-align: center; color: var(--store-text-muted); padding: 60px 0; font-size: .9rem; }

/* Architecture matches EasySell's real COD-form widget (checked its shipped CSS for
   reference): the overlay itself is the scroll container (full page, overflow-y:auto),
   and the modal is a normal-flow block centered by margin inside it — NOT a fixed-size
   box with its own internal scrollbar. This is what makes it feel like a soft page
   rather than a small boxed-in "frame". */
/* padding: 0 by default — same reasoning as .checkout-modal's own
   width:100% below: any top/bottom padding here leaves the backdrop
   visible above the modal before it starts, same visible-gap complaint as
   the left/right one, just on the other axis. Padding comes back only on
   desktop (the >=640px query below), where there's enough vertical room
   for it to read as intentional breathing space instead of an odd gap. */
.checkout-overlay {
  position: fixed; inset: 0; background: rgba(17,20,26,.5); z-index: 100;
  overflow-y: auto; -webkit-overflow-scrolling: touch; scroll-behavior: smooth;
  opacity: 0; visibility: hidden; transition: opacity .25s ease, visibility 0s linear .25s;
  padding: 0;
}
.checkout-overlay.show { opacity: 1; visibility: visible; transition: opacity .25s ease; }
/* width:100% by default — edge-to-edge on mobile, matching how
   .checkout-overlay's own left/right padding is already 0 (only top/bottom).
   The narrower, rounded "card" treatment (width:92%, max-width:440px) is
   pushed into the >=640px query below instead of applying unconditionally,
   since a fixed 92% of a narrow phone screen still left a visible strip of
   backdrop down both sides — 100% is what removes it, not a wider percentage.
   Still uses a small radius by default (not 0) even though the modal
   touches both edges — corners rounding off a full-bleed sheet is a normal,
   deliberately requested look, not a leftover from the narrower card
   version. Both width and radius (mobile and desktop separately) are
   admin-configurable — Theme Settings -> Checkout -> Appearance -> "COD
   box" fields — so the literal fallback values here only matter if that
   settings save is ever somehow skipped. */
.checkout-modal {
  width: var(--checkout-cod-box-mobile-width, 100%); margin: 0 auto;
  background: var(--checkout-body-bg, #f4fbf6); border-radius: var(--checkout-cod-box-mobile-radius, 10px);
  box-shadow: 0 24px 60px rgba(16,24,40,.28), 0 4px 16px rgba(16,24,40,.12);
  transform: translateY(14px); opacity: 0; transition: transform .25s cubic-bezier(.22,.68,0,1), opacity .25s ease;
  overflow: hidden;
}
.checkout-overlay.show .checkout-modal { transform: translateY(0); opacity: 1; }
@media (min-width: 640px) {
  .checkout-overlay { padding: 3% 0; }
  .checkout-modal { width: var(--checkout-cod-box-desktop-width, 92%); max-width: 440px; border-radius: var(--checkout-cod-box-desktop-radius, 18px); }
}
.checkout-modal-header {
  position: relative; display: flex; align-items: center; justify-content: center; padding: 18px 46px 12px;
  background: var(--checkout-body-bg, #f4fbf6);
}
.checkout-modal-header h3 { margin: 0; font-size: var(--checkout-title-size, 1.05rem); line-height: 1.4; font-weight: 800; color: var(--checkout-title-color, #1a7a3c); text-align: center; }
.checkout-modal-header button {
  position: absolute; top: 14px; right: 16px;
  background: #fff; color: var(--store-text); border: none; width: 28px; height: 28px; border-radius: 50%;
  font-size: .9rem; cursor: pointer; flex-shrink: 0; box-shadow: 0 1px 3px rgba(16,24,40,.12); transition: background .15s ease;
}
.checkout-modal-header button:hover { background: #eceef1; }
.checkout-modal-body { padding: 14px 20px 14px; }
.checkout-field {
  display: flex; align-items: center; gap: 9px; background: var(--checkout-field-bg, #fff);
  border: 1.5px solid var(--checkout-field-border, #b7ddc4); border-radius: 12px;
  padding: var(--checkout-field-pad, 4px) 14px var(--checkout-field-pad, 4px) var(--checkout-field-pad, 4px);
  margin-bottom: 7px; box-shadow: 0 1px 3px rgba(16,24,40,.05);
  transition: border-color .15s ease, box-shadow .15s ease;
}
.checkout-field:focus-within { border-color: var(--store-primary); box-shadow: 0 0 0 3px var(--store-primary-light); }
.checkout-field.invalid { border-color: var(--store-danger); }
.checkout-field.invalid:focus-within { box-shadow: 0 0 0 3px rgba(220,38,38,.15); }
.checkout-field .checkout-icon {
  flex-shrink: 0; width: var(--checkout-field-icon-size, 32px); height: var(--checkout-field-icon-size, 32px);
  border-radius: 9px; background: var(--checkout-icon-bg, #eef0f2); color: var(--checkout-icon-color, #3a3f47);
  display: flex; align-items: center; justify-content: center;
  box-shadow: inset 0 0 0 1px rgba(16,24,40,.05);
}
.checkout-field .checkout-icon svg { width: 50%; height: 50%; }
.checkout-field input, .checkout-field select {
  border: none; background: none; padding: 6px 0; width: 100%;
  font-size: var(--checkout-field-font, .87rem); font-weight: 500; color: var(--checkout-field-text, var(--store-text));
}
.checkout-field input:focus, .checkout-field select:focus { outline: none; }
.checkout-field input::placeholder { color: #9aa1ab; font-weight: 400; }

.checkout-items-summary {
  background: transparent; padding: 6px 0; margin: 10px 0; box-shadow: none;
  border-top: 1px solid rgba(16,24,40,.14); border-bottom: 1px solid rgba(16,24,40,.14);
}
.checkout-item-row { display: flex; gap: 11px; align-items: center; padding: 6px 0; }
.checkout-item-row + .checkout-item-row { border-top: 1px solid rgba(16,24,40,.08); padding-top: 10px; margin-top: 4px; }
.checkout-item-thumb { position: relative; flex-shrink: 0; width: 38px; height: 38px; }
.checkout-item-thumb img { width: 100%; height: 100%; border-radius: 8px; object-fit: cover; display: block; background: var(--store-bg-alt); }
.checkout-item-thumb .qty-badge {
  position: absolute; top: -6px; left: -6px; background: #3a3a3a; color: #fff; border-radius: 50%;
  width: 18px; height: 18px; font-size: .64rem; font-weight: 700; display: flex; align-items: center; justify-content: center;
  box-shadow: 0 1px 3px rgba(0,0,0,.35); border: 2px solid #fff;
}
.checkout-item-info { flex: 1; min-width: 0; }
.checkout-item-title { font-size: .81rem; font-weight: 600; color: var(--store-text); line-height: 1.35; }
.checkout-item-variant { font-size: .72rem; color: var(--store-text-muted); margin-top: 2px; }
.checkout-item-row .price { font-size: .81rem; font-weight: 700; white-space: nowrap; color: var(--store-text); text-align: right; }

.checkout-delivery { margin: 9px 0 7px; }
.checkout-delivery-label {
  font-size: var(--checkout-delivery-label-size, .68rem); font-weight: 700; text-transform: uppercase; letter-spacing: .05em;
  margin-bottom: 6px; display: block; color: var(--checkout-delivery-label-color, var(--store-primary-dark));
}
.checkout-delivery-options { border: 1px solid rgba(16,24,40,.14); border-radius: 10px; overflow: hidden; }
.checkout-radio {
  display: flex; align-items: center; gap: 10px; padding: 10px 12px; font-weight: 500; cursor: pointer;
  background: transparent; border-radius: 0; margin-bottom: 0; border: none; border-bottom: 1px solid rgba(16,24,40,.14);
  box-shadow: none; transition: background .15s ease;
}
.checkout-delivery-options .checkout-radio:last-child { border-bottom: none; }
.checkout-radio:has(input:checked) { background: var(--store-primary-light); }
.checkout-radio input[type="radio"] { appearance: none; width: 17px; height: 17px; border-radius: 50%; border: 2px solid #c7cad1; flex-shrink: 0; position: relative; cursor: pointer; transition: border-color .15s ease; }
.checkout-radio input[type="radio"]:checked { border-color: var(--store-primary); }
.checkout-radio input[type="radio"]:checked::after { content: ''; position: absolute; inset: 2.5px; border-radius: 50%; background: var(--store-primary); }
.checkout-radio span { color: var(--checkout-zone-label-color, var(--store-text)); font-size: var(--checkout-zone-label-size, .86rem); }
.checkout-radio strong { margin-left: auto; font-weight: 700; font-size: .86rem; color: var(--store-text); }

.checkout-totals { background: #fff; border-radius: 11px; padding: 9px 14px; margin-bottom: 9px; font-size: .83rem; box-shadow: 0 1px 3px rgba(16,24,40,.05); }
.checkout-totals > div { display: flex; justify-content: space-between; padding: 3px 0; color: var(--store-text-muted); }
.checkout-totals > div span:last-child { color: var(--store-text); font-weight: 600; }
.checkout-grand-total { border-top: 1px dashed var(--store-border); margin-top: 3px; padding-top: 7px !important; font-weight: 800 !important; font-size: .97rem !important; color: var(--store-text) !important; }
.checkout-grand-total span:last-child { color: var(--store-primary); font-size: 1.08rem; }
.checkout-discount-row span:last-child { color: var(--store-danger) !important; }
.checkout-item-row .price .compare { display: block; text-decoration: line-through; color: var(--store-text-muted); font-weight: 400; font-size: .72rem; }

.checkout-confirm { display: flex; align-items: flex-start; gap: 8px; margin-bottom: 9px; cursor: pointer; line-height: 1.4; }
.checkout-confirm span { color: var(--checkout-confirm-color, var(--store-text)); font-size: var(--checkout-confirm-size, .76rem); }
.checkout-confirm input[type="checkbox"] { appearance: none; width: 16px; height: 16px; border-radius: 5px; border: 2px solid #c7cad1; flex-shrink: 0; margin-top: 1px; position: relative; cursor: pointer; transition: all .15s ease; }
.checkout-confirm input[type="checkbox"]:checked { background: var(--store-primary); border-color: var(--store-primary); }
.checkout-confirm input[type="checkbox"]:checked::after { content: '✓'; position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; color: #fff; font-size: .66rem; font-weight: 700; }
.checkout-confirm.invalid input[type="checkbox"] { border-color: var(--store-danger); }
.checkout-confirm.invalid span { color: var(--store-danger); }

/* District "type to search" dropdown — mirrors the admin's product-title
   autocomplete box (assets/css/app.css .ac-box), storefront-themed. */
.co-ac-box {
  position: fixed; z-index: 210; background: #fff; border: 1px solid var(--store-border);
  border-radius: 10px; box-shadow: var(--store-shadow-md); max-height: 220px; overflow-y: auto;
}
.co-ac-item { padding: 10px 14px; font-size: .87rem; color: var(--store-text); cursor: pointer; border-bottom: 1px solid var(--store-border); }
.co-ac-item:last-child { border-bottom: none; }
.co-ac-item:hover, .co-ac-item.active { background: var(--store-bg-alt); }
.co-ac-empty { padding: 10px 14px; font-size: .85rem; color: var(--store-text-muted); }
.checkout-submit-btn {
  background: var(--checkout-btn-bg, #14161a) !important; color: var(--checkout-btn-text, #fff) !important; border-radius: 10px !important;
  font-size: var(--checkout-btn-font, .95rem); font-weight: 700; letter-spacing: .01em; padding: var(--checkout-btn-pad, 13px);
  box-shadow: 0 4px 14px rgba(16,20,26,.28) !important; transition: transform .12s ease, box-shadow .2s ease, background .15s ease, filter .15s ease;
}
.checkout-submit-btn:hover { filter: brightness(0.85); transform: translateY(-1px); box-shadow: 0 6px 18px rgba(16,20,26,.36) !important; }
.checkout-hint { font-size: var(--checkout-hint-size, .68rem); color: var(--checkout-hint-color, var(--store-primary)); font-weight: 500; text-align: center; margin-top: 7px; line-height: 1.35; }

/* While the OTP box is showing, the modal's own outer chrome (colored
   background, shadow, rounded corners, body padding) is flattened away via
   this class — .checkout-otp already draws its own white card with its own
   border/radius, so the outer wrapper is made fully transparent instead of
   layering a second box around it. */
.checkout-modal.otp-active { background: transparent; box-shadow: none; }
.checkout-modal.otp-active .checkout-modal-header { background: transparent; padding: 6px 40px 0; }
.checkout-modal.otp-active .checkout-modal-body { padding: 0; }

.checkout-otp {
  background: #fff; border: 2px solid #d7dee9; border-radius: 14px; padding: 14px 18px 24px;
  font-family: 'Noto Sans Bengali', 'Segoe UI', Arial, sans-serif; text-align: center;
}
.checkout-otp .co-circle {
  width: 66px; height: 66px; border-radius: 50%; background: #2f7ef8;
  margin: 0 auto 14px; display: flex; align-items: center; justify-content: center;
}
.checkout-otp .co-title { font-size: 23px; font-weight: 700; color: #0f172a; margin: 0 0 8px; letter-spacing: -.3px; }
.checkout-otp .co-sub { font-size: 14.5px; color: #64748b; line-height: 1.6; margin: 0 0 16px; }
.checkout-otp .co-phone {
  display: inline-flex; align-items: center; gap: 8px; background: #f8fafc;
  border: 1px solid #e2e8f0; border-radius: 12px; padding: 9px 18px;
  font-size: 15.5px; color: #334155; margin-bottom: 18px; font-weight: 500;
}
.checkout-otp .co-warn { color: #dc2626; font-size: 13px; margin: 0 0 14px; }
.checkout-otp .co-cell-row { display: flex; gap: 8px; justify-content: center; margin-bottom: 16px; flex-wrap: nowrap; }
.checkout-otp .co-cell {
  width: 42px; height: 54px; border: 2px solid #d7dee9; border-radius: 12px;
  font-size: 22px; font-weight: 600; text-align: center; outline: none;
  background: #fff; color: #0f172a; transition: all .15s; font-family: inherit; box-sizing: border-box;
}
.checkout-otp .co-cell:focus { border-color: #2f7ef8; box-shadow: 0 0 0 4px rgba(47,126,248,.14); }
.checkout-otp .co-cell.filled { border-color: #2f7ef8; }
.checkout-otp .co-error { display: none; color: #dc2626; font-size: 13px; margin-bottom: 12px; }
.checkout-otp .co-verify-btn {
  width: 100%; padding: 14px; background: linear-gradient(90deg, #93b8f5 0%, #7fa3e8 100%);
  color: #fff; border: none; border-radius: 12px; font-size: 17px; font-weight: 600;
  cursor: not-allowed; transition: all .2s; font-family: inherit;
}
.checkout-otp .co-verify-btn.active { background: linear-gradient(90deg, #3b82f6 0%, #1d4ed8 100%); box-shadow: 0 4px 14px rgba(37,99,235,.35); cursor: pointer; }
.checkout-otp .co-verify-btn.done { background: linear-gradient(90deg, #22c55e, #16a34a); }
.checkout-otp .co-resend-wrap { margin-top: 14px; font-size: 15px; }
.checkout-otp .co-timer { color: #8a94a3; }
.checkout-otp .co-resend-btn { display: none; background: none; border: none; color: #2563eb; font-size: 15px; font-weight: 600; cursor: pointer; font-family: inherit; }
.checkout-otp .co-rlimit { display: none; color: #dc2626; font-size: 12px; }
@media (max-width: 380px) {
  .checkout-otp .co-cell { width: 36px; height: 48px; font-size: 19px; }
  .checkout-otp .co-cell-row { gap: 6px; }
}

/* Thank-you page order summary (store/thank-you.php) — custom properties are
   scoped to .thankyou-page, not :root, so they never affect the rest of the
   storefront's own theming. */
.thankyou-page {
  --ty-border: #cbd5e1; --ty-text-main: #0f172a; --ty-text-muted: #374151;
  --ty-accent-bg: #f8fafc; --ty-table-header: #e2e8f0;
  padding: 24px 0 40px;
}
.thankyou-page #ty-table {
  background: #fff; border-radius: 14px; font-family: 'Noto Sans Bengali', 'Segoe UI', Arial, sans-serif;
  overflow: hidden; max-width: 640px; margin: 0 auto; box-shadow: 0 2px 14px rgba(0,0,0,.06); border: 1px solid var(--ty-border);
}
.thankyou-page .ty-head { text-align: center; padding: 24px 18px 4px; }
.thankyou-page .ty-circle {
  width: 60px; height: 60px; border-radius: 50%; background: #22c55e;
  margin: 0 auto 10px; display: flex; align-items: center; justify-content: center;
}
.thankyou-page .ty-subtitle { font-size: 14.5px; color: var(--ty-text-muted); line-height: 1.7; margin: 0; font-weight: 500; }
.thankyou-page .ty-body { padding: 14px 18px 24px; }
.thankyou-page .ty-details-box { background: var(--ty-accent-bg); border: 1px solid var(--ty-border); border-radius: 8px; padding: 10px 12px; margin-bottom: 14px; }
.thankyou-page .ty-detail-row { display: flex; justify-content: space-between; align-items: baseline; padding: 5px 0; border-bottom: 1px dashed var(--ty-border); gap: 10px; }
.thankyou-page .ty-detail-row:first-child { padding-top: 0; }
.thankyou-page .ty-detail-row:last-child { padding-bottom: 0; border-bottom: none; }
.thankyou-page .ty-detail-label { color: var(--ty-text-muted); font-size: 14px; font-weight: 600; min-width: 90px; }
.thankyou-page .ty-detail-value { font-weight: 700; font-size: 14px; text-align: right; word-break: break-word; color: var(--ty-text-main); }
.thankyou-page .ty-table-wrapper { width: 100%; overflow-x: auto; }
.thankyou-page .ty-order-table { width: 100%; border-collapse: collapse; margin-bottom: 8px; border: 1px solid var(--ty-border); }
.thankyou-page .ty-order-table th {
  background-color: var(--ty-table-header); color: var(--ty-text-main); font-size: 14px; font-weight: 700;
  padding: 10px 8px; border: 1px solid var(--ty-border); text-align: left;
}
.thankyou-page .ty-order-table th:last-child, .thankyou-page .ty-order-table td:last-child { text-align: right; }
.thankyou-page .ty-order-table th:nth-child(2), .thankyou-page .ty-order-table td:nth-child(2) { text-align: center; }
.thankyou-page .ty-order-table td {
  padding: 10px 8px; border: 1px solid var(--ty-border); font-size: 14px; color: var(--ty-text-main);
  font-weight: 600; vertical-align: top; background-color: #fff;
}
.thankyou-page .ty-order-table tbody tr:nth-child(even) td { background-color: var(--ty-accent-bg); }
.thankyou-page .ty-variant-style { display: block; font-size: 13px; color: #475569; margin-top: 2px; font-weight: 500; }
.thankyou-page .ty-summary-row td { padding: 8px; font-size: 14px; background-color: #fff !important; }
.thankyou-page .ty-summary-row strong { font-weight: 700; }
.thankyou-page .ty-total-row td { background-color: #f1f5f9 !important; padding: 12px 8px; font-size: 16px; font-weight: 800; color: var(--ty-text-main); }
.thankyou-page .ty-order-table td:last-child { white-space: nowrap; }
.thankyou-page .ty-back-wrap { text-align: center; margin: 14px 0 6px; }
.thankyou-page .ty-back-button {
  display: inline-block; background: var(--store-primary, #6b21a8); color: #fff !important; padding: 12px 24px;
  border-radius: 30px; text-decoration: none !important; font-size: 15px; font-weight: 700; box-shadow: 0 4px 12px rgba(0,0,0,.15);
}
.thankyou-page .ty-back-button:hover { opacity: .92; }
@media (max-width: 500px) {
  .thankyou-page .ty-head { padding: 20px 14px 4px; }
  .thankyou-page .ty-body { padding: 10px 4px 20px; }
  .thankyou-page .ty-details-box { padding: 8px 10px; margin-bottom: 12px; }
  .thankyou-page .ty-detail-row { padding: 4px 0; gap: 8px; }
  .thankyou-page .ty-detail-label { font-size: 13px; min-width: 75px; }
  .thankyou-page .ty-detail-value { font-size: 13px; }
  .thankyou-page .ty-order-table th, .thankyou-page .ty-order-table td { padding: 8px 6px; font-size: 13px; }
  .thankyou-page .ty-total-row td { font-size: 15px; padding: 10px 6px; }
}