/* ============================================================
   THBB STOREFRONT styles  (css/shop.css)
   ------------------------------------------------------------
   Matches the main site's design language: Playfair Display +
   DM Sans, warm cream/rust palette, pill-shaped uppercase
   buttons, soft cards. Uses the site's design tokens when
   present (style.css) and falls back to literals otherwise.
   Everything is namespaced with .thbb- to avoid clashes.
   ============================================================ */

:root {
  --thbb-rust:      var(--rust, #C97441);
  --thbb-rust-deep: var(--rust-deep, #6E3A1F);
  --thbb-cream:     var(--cream, #FBF7EE);
  --thbb-paper:     var(--paper, #FDFBF5);
  --thbb-ink:       var(--ink, #2D1E14);
  --thbb-ink-soft:  var(--ink-soft, #5F4733);
  --thbb-muted:     var(--ink-muted, #9A8068);
  --thbb-gold:      var(--gold, #E0B247);
  --thbb-border:    var(--border, rgba(45,30,20,.13));
  --thbb-border-soft: var(--border-soft, rgba(45,30,20,.06));
  --thbb-display:   var(--font-display, 'Playfair Display', Georgia, serif);
  --thbb-body:      var(--font-body, 'DM Sans', system-ui, sans-serif);
  --thbb-shadow:    0 18px 50px rgba(45,30,20,.10);
  --thbb-shadow-sm: 0 6px 20px rgba(45,30,20,.07);
}

/* CRITICAL: make the [hidden] attribute win over our flex/grid displays. */
[hidden] { display: none !important; }

/* ── Buttons (pill, uppercase — matches site .btn-primary) ── */
.thbb-btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  font-family: var(--thbb-body); font-weight: 600; font-size: 13px;
  letter-spacing: 0.14em; text-transform: uppercase;
  padding: 15px 30px; border-radius: 100px; border: 1px solid transparent;
  cursor: pointer; text-decoration: none; line-height: 1; min-height: 46px;
  transition: background .25s ease, color .25s ease, transform .25s ease, box-shadow .25s ease;
}
.thbb-btn--primary { background: var(--thbb-rust-deep); color: var(--thbb-cream); border-color: var(--thbb-rust-deep); }
.thbb-btn--primary:hover { background: var(--thbb-rust); border-color: var(--thbb-rust); transform: translateY(-1px); }
.thbb-btn--ghost { background: transparent; color: var(--thbb-rust-deep); border-color: var(--thbb-border); }
.thbb-btn--ghost:hover { background: var(--thbb-cream); border-color: var(--thbb-rust); }
.thbb-btn--block { width: 100%; margin-top: 16px; }
.thbb-btn:disabled, .thbb-btn.is-disabled { opacity: .45; pointer-events: none; }

/* ── Nav icons (cart + account) ─────────────────────────── */
.thbb-nav-icon {
  position: relative; display: inline-flex; align-items: center; justify-content: center;
  width: 44px; height: 44px; border-radius: 50%; color: var(--thbb-rust-deep);
  border: 1px solid var(--thbb-border); background: transparent; cursor: pointer;
  text-decoration: none; transition: background .2s ease, border-color .2s ease;
}
.thbb-nav-icon:hover { background: var(--thbb-cream); border-color: var(--thbb-rust); }
.thbb-cart-badge {
  position: absolute; top: -3px; right: -3px; min-width: 19px; height: 19px; padding: 0 5px;
  background: var(--thbb-rust); color: #fff; font: 800 11px/19px var(--thbb-body);
  border-radius: 10px; text-align: center; box-shadow: 0 2px 6px rgba(45,30,20,.25);
}

/* ── Toast ──────────────────────────────────────────────── */
#thbb-toast-host { position: fixed; left: 50%; bottom: 30px; transform: translateX(-50%); z-index: 9999; display: flex; flex-direction: column; gap: 8px; }
.thbb-toast {
  background: var(--thbb-rust-deep); color: #fff; padding: 13px 22px; border-radius: 100px;
  font: 600 14px/1.3 var(--thbb-body); box-shadow: var(--thbb-shadow);
  opacity: 0; transform: translateY(10px); transition: .25s ease; max-width: 90vw; text-align: center;
}
.thbb-toast.show { opacity: 1; transform: translateY(0); }
.thbb-toast--err { background: #b3261e; }

/* ── Cart drawer ────────────────────────────────────────── */
.thbb-cart-overlay { position: fixed; inset: 0; background: rgba(45,30,20,.45); z-index: 1000; backdrop-filter: blur(2px); }
.thbb-cart-drawer {
  /* 100dvh = the ACTUALLY visible viewport on mobile (excludes the browser
     toolbar). Plain 100vh made the drawer taller than the screen on mobile
     Chrome/Safari, hiding the subtotal + checkout footer. Older browsers
     ignore the dvh line and keep the 100vh fallback. */
  position: fixed; top: 0; right: 0; height: 100vh; height: 100dvh; width: 420px; max-width: 92vw; z-index: 1001;
  background: var(--thbb-paper); box-shadow: -10px 0 50px rgba(45,30,20,.28);
  transform: translateX(105%); transition: transform .3s cubic-bezier(.4,0,.2,1); display: flex; flex-direction: column;
}
.thbb-cart-drawer.open { transform: translateX(0); }
.thbb-cart-head { display: flex; align-items: center; justify-content: space-between; padding: 24px 26px; border-bottom: 1px solid var(--thbb-border-soft); }
.thbb-cart-head h3 { font-family: var(--thbb-display); color: var(--thbb-rust-deep); font-size: 24px; margin: 0; font-weight: 700; }
.thbb-cart-close { background: none; border: none; font-size: 30px; line-height: 1; cursor: pointer; color: var(--thbb-muted); transition: color .2s; }
.thbb-cart-close:hover { color: var(--thbb-rust-deep); }
.thbb-cart-body { flex: 1; overflow-y: auto; padding: 14px 22px; }
.thbb-cart-empty { text-align: center; color: var(--thbb-muted); margin-top: 46px; line-height: 1.7; }
.thbb-cart-empty a { color: var(--thbb-rust); font-weight: 700; text-decoration: none; }
.thbb-cart-item { display: grid; grid-template-columns: 60px 1fr auto; gap: 14px; padding: 16px 0; border-bottom: 1px solid var(--thbb-border-soft); align-items: start; }
.thbb-cart-thumb { width: 60px; height: 60px; border-radius: 12px; overflow: hidden; background: var(--thbb-cream); }
.thbb-cart-thumb img { width: 100%; height: 100%; object-fit: cover; }
.thbb-cart-name { font-weight: 700; font-size: 14px; color: var(--thbb-ink); margin: 0; line-height: 1.3; }
.thbb-cart-price { font-size: 13px; color: var(--thbb-muted); margin: 3px 0 9px; }
.thbb-cart-line { font-weight: 800; color: var(--thbb-rust-deep); font-size: 14px; }
.thbb-qty { display: flex; align-items: center; gap: 9px; }
.thbb-qty button { width: 28px; height: 28px; border: 1px solid var(--thbb-border); background: #fff; border-radius: 8px; cursor: pointer; font-size: 16px; line-height: 1; color: var(--thbb-rust-deep); transition: .15s; }
.thbb-qty button:hover { border-color: var(--thbb-rust); background: var(--thbb-cream); }
.thbb-qty .thbb-qty-rm { width: auto; padding: 0 8px; font-size: 11px; letter-spacing: .04em; text-transform: uppercase; color: #b3261e; border: none; background: none; }
/* env(safe-area-inset-bottom) keeps the checkout button clear of the iPhone
   home-indicator bar; it's 0 everywhere else. */
.thbb-cart-foot { padding: 22px 26px calc(22px + env(safe-area-inset-bottom)); border-top: 1px solid var(--thbb-border-soft); background: var(--thbb-cream); }
.thbb-cart-subtotal { display: flex; justify-content: space-between; align-items: baseline; margin-bottom: 6px; }
.thbb-cart-subtotal span { color: var(--thbb-ink-soft); font-size: 14px; }
.thbb-cart-subtotal strong { font-size: 22px; color: var(--thbb-rust-deep); font-family: var(--thbb-display); }
.thbb-cart-note { font-size: 12px; color: var(--thbb-muted); text-align: center; margin-top: 10px; }

/* ── Legal / policy pages ───────────────────────────────── */
.thbb-legal { max-width: 820px; }
.thbb-legal .thbb-updated { color: var(--thbb-muted); font-size: 13px; margin: -8px 0 26px; }
.thbb-legal h2 { font-family: var(--thbb-display); color: var(--thbb-rust-deep); font-size: 22px; font-weight: 700; margin: 30px 0 10px; }
.thbb-legal h2:first-of-type { margin-top: 0; }
.thbb-legal p, .thbb-legal li { color: var(--thbb-ink-soft); font-size: 15px; line-height: 1.75; margin-bottom: 12px; }
.thbb-legal ul { padding-left: 22px; margin-bottom: 12px; }
.thbb-legal a { color: var(--thbb-rust); font-weight: 600; }
.thbb-legal strong { color: var(--thbb-ink); }

/* ── Partnership banner strip (top of storefront pages) ── */
.thbb-partner-bar {
  display: block; text-align: center; text-decoration: none;
  background: var(--thbb-rust-deep); color: var(--thbb-cream);
  font: 600 12.5px/1.4 var(--thbb-body); letter-spacing: .03em;
  padding: 10px 16px;
}
.thbb-partner-bar strong { color: var(--thbb-gold); font-weight: 800; white-space: nowrap; }
.thbb-partner-bar:hover strong { text-decoration: underline; }

/* ── Shared shop page chrome ────────────────────────────── */
.thbb-shop-page { background: var(--thbb-cream); min-height: 100vh; color: var(--thbb-ink); font-family: var(--thbb-body); }
.thbb-shop-header { background: rgba(253,251,245,.92); backdrop-filter: saturate(140%) blur(8px); border-bottom: 1px solid var(--thbb-border-soft); position: sticky; top: 0; z-index: 50; }
.thbb-shop-header .wrap { max-width: 1180px; margin: 0 auto; padding: 16px 28px; display: flex; align-items: center; justify-content: space-between; gap: 16px; }
.thbb-shop-header .brand { display: flex; align-items: center; gap: 12px; text-decoration: none; color: var(--thbb-rust-deep); font-family: var(--thbb-display); font-weight: 800; font-size: 19px; letter-spacing: -.01em; }
.thbb-shop-header .brand img { height: 44px; width: auto; }
.thbb-shop-header nav { display: flex; align-items: center; gap: 22px; }
.thbb-shop-header nav a { color: var(--thbb-ink); text-decoration: none; font-weight: 600; font-size: 12px; letter-spacing: .12em; text-transform: uppercase; transition: color .2s; }
.thbb-shop-header nav a:hover { color: var(--thbb-rust); }
.thbb-shop-header nav a.thbb-nav-icon { letter-spacing: 0; }
.thbb-shop-main { max-width: 1180px; margin: 0 auto; padding: 56px 28px 90px; }
.thbb-page-title { font-family: var(--thbb-display); color: var(--thbb-rust-deep); font-size: clamp(34px, 5vw, 52px); margin: 0 0 8px; font-weight: 800; letter-spacing: -.015em; }
.thbb-page-sub { color: var(--thbb-muted); margin: 0 0 36px; font-size: 16px; }

/* ── Cards / forms ──────────────────────────────────────── */
.thbb-card { background: var(--thbb-paper); border: 1px solid var(--thbb-border-soft); border-radius: 20px; padding: 30px; margin-bottom: 22px; box-shadow: var(--thbb-shadow-sm); }
.thbb-card h3 { font-family: var(--thbb-display); color: var(--thbb-rust-deep); margin: 0 0 18px; font-size: 22px; font-weight: 700; }
.thbb-center { text-align: center; }
.thbb-muted { color: var(--thbb-muted); font-size: 14px; }
.thbb-muted a { color: var(--thbb-rust); font-weight: 700; text-decoration: none; }
.thbb-grid2 { display: grid; grid-template-columns: 1fr 1fr; gap: 16px 18px; margin-bottom: 18px; }
.thbb-grid2 label { display: flex; flex-direction: column; font-size: 12px; font-weight: 700; color: var(--thbb-ink-soft); gap: 7px; letter-spacing: .04em; text-transform: uppercase; }
.thbb-grid2 .thbb-col2 { grid-column: 1 / -1; }

/* Inputs — consistent across all shop forms */
.thbb-card input,
.thbb-auth-form input {
  padding: 13px 15px; border: 1.5px solid var(--thbb-border); border-radius: 12px;
  font: 400 15px var(--thbb-body); color: var(--thbb-ink); background: #fff;
  outline: none; transition: border-color .2s, box-shadow .2s; width: 100%;
}
.thbb-card input:focus,
.thbb-auth-form input:focus { border-color: var(--thbb-rust); box-shadow: 0 0 0 3px rgba(201,116,65,.13); }

/* ── Auth panel ─────────────────────────────────────────── */
.thbb-auth { max-width: 460px; margin: 8px auto 0; background: var(--thbb-paper); border: 1px solid var(--thbb-border-soft); border-radius: 24px; padding: 36px; box-shadow: var(--thbb-shadow); }
.thbb-auth-tabs { display: flex; gap: 6px; background: var(--thbb-cream); border-radius: 100px; padding: 6px; margin-bottom: 28px; }
.thbb-auth-tabs button { flex: 1; padding: 12px; border: none; background: none; border-radius: 100px; font: 700 12px var(--thbb-body); letter-spacing: .1em; text-transform: uppercase; cursor: pointer; color: var(--thbb-muted); transition: .2s; }
.thbb-auth-tabs button.active { background: #fff; color: var(--thbb-rust-deep); box-shadow: 0 2px 8px rgba(45,30,20,.10); }
.thbb-auth-form { display: flex; flex-direction: column; gap: 16px; }
.thbb-auth-form label { display: flex; flex-direction: column; gap: 7px; font-size: 12px; font-weight: 700; color: var(--thbb-ink-soft); letter-spacing: .04em; text-transform: uppercase; }
.thbb-auth-form .thbb-btn { margin-top: 6px; }

/* ── Account dashboard ──────────────────────────────────── */
.thbb-acc-head { display: flex; justify-content: space-between; align-items: center; margin-bottom: 26px; gap: 16px; flex-wrap: wrap; }
.thbb-acc-head h2 { font-family: var(--thbb-display); color: var(--thbb-rust-deep); margin: 0; font-size: 30px; font-weight: 800; }
.thbb-addr-row, .thbb-order { display: flex; justify-content: space-between; gap: 14px; padding: 16px 0; border-bottom: 1px solid var(--thbb-border-soft); }
.thbb-addr-row:last-child, .thbb-order:last-child { border-bottom: none; }
.thbb-order { flex-direction: column; }
.thbb-order-top { display: flex; justify-content: space-between; align-items: flex-start; gap: 12px; }
.thbb-order-amt { font-weight: 800; color: var(--thbb-rust-deep); font-size: 18px; font-family: var(--thbb-display); }
.thbb-order-act { margin-top: 12px; }
.thbb-pill { background: var(--thbb-rust); color: #fff; font: 800 10px var(--thbb-body); letter-spacing: .06em; text-transform: uppercase; padding: 3px 9px; border-radius: 100px; }
.thbb-link-del { background: none; border: none; color: #b3261e; cursor: pointer; font-weight: 700; font-size: 12px; letter-spacing: .04em; text-transform: uppercase; align-self: flex-start; }
.thbb-addr-add summary { cursor: pointer; font-weight: 700; color: var(--thbb-rust); margin-top: 12px; font-size: 13px; letter-spacing: .04em; text-transform: uppercase; }
.thbb-addr-add { margin-top: 12px; }
.thbb-status { font: 800 10px var(--thbb-body); letter-spacing: .06em; padding: 3px 10px; border-radius: 100px; text-transform: uppercase; }
.thbb-status--ok { background: #e3f4e4; color: #1b7a2c; }
.thbb-status--warn { background: #fdf0d8; color: #9a6b0a; }
.thbb-status--err { background: #fbe2e0; color: #b3261e; }

/* ── Checkout ───────────────────────────────────────────── */
.thbb-checkout-grid { display: grid; grid-template-columns: 1.5fr 1fr; gap: 24px; align-items: start; }
.thbb-sticky { position: sticky; top: 100px; }
.thbb-sum-row { display: flex; justify-content: space-between; padding: 10px 0; font-size: 14px; border-bottom: 1px dashed var(--thbb-border); color: var(--thbb-ink-soft); }
.thbb-sum-total { border-bottom: none; margin-top: 8px; font-size: 17px; color: var(--thbb-ink); }
.thbb-sum-total strong { font-family: var(--thbb-display); color: var(--thbb-rust-deep); }
.thbb-pay-note { margin-top: 14px; line-height: 1.6; }
.thbb-minmsg { margin-top: 12px; background: #fdf0d8; color: #9a6b0a; border: 1px solid #f0d9a8; border-radius: 10px; padding: 10px 12px; font-size: 13px; font-weight: 600; line-height: 1.45; }
.thbb-guest-banner { background: #eef4ff; color: #2d4a7a; border: 1px solid #cdd9f0; border-radius: 10px; padding: 10px 12px; font-size: 13px; line-height: 1.45; margin: -4px 0 16px; }
.thbb-guest-banner a { color: var(--thbb-rust, #C97441); font-weight: 700; text-decoration: none; }
.thbb-guest-banner a:hover { text-decoration: underline; }

/* Order-summary line items with quantity controls */
.thbb-sum-item { display: flex; justify-content: space-between; align-items: flex-start; gap: 12px; padding: 12px 0; border-bottom: 1px dashed var(--thbb-border); }
.thbb-sum-item-img { flex-shrink: 0; width: 52px; height: 52px; border-radius: 10px; overflow: hidden; background: var(--thbb-cream); }
.thbb-sum-item-img img { width: 100%; height: 100%; object-fit: cover; display: block; }
.thbb-sum-item-main { flex: 1; display: flex; flex-direction: column; gap: 3px; }
.thbb-sum-item-name { font-weight: 700; color: var(--thbb-ink); font-size: 14px; line-height: 1.3; }
.thbb-sum-item-line { font-weight: 800; color: var(--thbb-rust-deep); font-size: 14px; white-space: nowrap; }
.thbb-sum-qty { margin-top: 5px; }
.thbb-sum-qty button { width: 26px; height: 26px; }
.thbb-sum-sub { margin-top: 6px; font-weight: 600; }
/* Packing & delivery shown visually distinct from product items */
.thbb-sum-charges { background: var(--thbb-cream); border: 1px solid var(--thbb-border-soft); border-radius: 12px; padding: 4px 14px; margin-top: 10px; }
.thbb-sum-charge { border-bottom: 1px dashed var(--thbb-border-soft); }
.thbb-sum-charges .thbb-sum-charge:last-child { border-bottom: none; }
.thbb-sum-charge span:first-child { color: var(--thbb-ink-soft); }

/* Product detail quantity stepper */
.thbb-pdp-qty { display: inline-flex; align-items: center; border: 1.5px solid var(--thbb-border); border-radius: 100px; overflow: hidden; height: 48px; }
.thbb-pdp-qty button { width: 44px; height: 100%; border: none; background: #fff; font-size: 20px; line-height: 1; cursor: pointer; color: var(--thbb-rust-deep); }
.thbb-pdp-qty button:hover { background: var(--thbb-cream); }
.thbb-pdp-qty input { width: 46px; text-align: center; border: none; outline: none; font: 700 16px var(--thbb-body); color: var(--thbb-ink); background: #fff; }
.thbb-success { text-align: center; max-width: 540px; margin: 40px auto; background: var(--thbb-paper); border: 1px solid var(--thbb-border-soft); border-radius: 24px; padding: 48px 34px; box-shadow: var(--thbb-shadow); }
.thbb-success-tick { width: 70px; height: 70px; border-radius: 50%; background: #1b7a2c; color: #fff; font-size: 38px; display: flex; align-items: center; justify-content: center; margin: 0 auto 20px; }
.thbb-success h2 { font-family: var(--thbb-display); color: var(--thbb-rust-deep); margin: 0 0 12px; font-size: 28px; font-weight: 800; }
.thbb-success-act { display: flex; gap: 12px; justify-content: center; flex-wrap: wrap; margin-top: 26px; }

/* ── Cart page ──────────────────────────────────────────── */
.thbb-cartpage-row { display: grid; grid-template-columns: 76px 1fr auto auto; gap: 18px; align-items: center; padding: 18px 0; border-bottom: 1px solid var(--thbb-border-soft); }
.thbb-cartpage-row img { width: 76px; height: 76px; object-fit: cover; border-radius: 14px; background: var(--thbb-cream); }

/* ── Shop page product grid ─────────────────────────────── */
.thbb-shop-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(248px, 1fr)); gap: 26px; }
.thbb-prod-card { background: var(--thbb-paper); border: 1px solid var(--thbb-border-soft); border-radius: 20px; overflow: hidden; box-shadow: var(--thbb-shadow-sm); display: flex; flex-direction: column; transition: transform .22s ease, box-shadow .22s ease; }
.thbb-prod-card:hover { transform: translateY(-4px); box-shadow: var(--thbb-shadow); }
.thbb-prod-media { position: relative; aspect-ratio: 1 / 1; background: var(--thbb-cream); }
.thbb-prod-media a { display: block; height: 100%; }
.thbb-prod-media img { width: 100%; height: 100%; object-fit: cover; }
.thbb-prod-tag { position: absolute; top: 14px; left: 14px; background: #fff; color: var(--thbb-rust-deep); font: 800 10px var(--thbb-body); letter-spacing: .08em; text-transform: uppercase; padding: 5px 11px; border-radius: 100px; box-shadow: var(--thbb-shadow-sm); }
.thbb-prod-tag--soon { background: var(--thbb-rust-deep); color: #fff; }
.thbb-prod-body { padding: 18px 18px 22px; display: flex; flex-direction: column; gap: 6px; flex: 1; }
.thbb-prod-name { font-family: var(--thbb-display); font-size: 19px; font-weight: 700; color: var(--thbb-ink); margin: 0; line-height: 1.2; }
.thbb-prod-name a { color: inherit; text-decoration: none; }
.thbb-prod-name a:hover { color: var(--thbb-rust); }
.thbb-prod-sub { color: var(--thbb-muted); font-size: 13px; margin: 0 0 4px; flex: 1; }
.thbb-prod-foot { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-top: 10px; }
.thbb-prod-price { font-family: var(--thbb-display); font-size: 21px; font-weight: 800; color: var(--thbb-rust-deep); }
.thbb-prod-card .thbb-btn { padding: 11px 18px; font-size: 11px; min-height: 0; }
.thbb-prod-soon { font: 700 11px var(--thbb-body); letter-spacing: .08em; text-transform: uppercase; color: var(--thbb-muted); }

/* ── Footer staff link (added to existing footers) ──────── */
.thbb-staff-link { color: inherit; opacity: .8; text-decoration: none; }
.thbb-staff-link:hover { opacity: 1; text-decoration: underline; }

/* Distinctive "Employee Login" pill placed inside the footer social row.
   Higher specificity than `.footer-social a` so it isn't a plain circle. */
.footer-social a.footer-staff-btn {
  width: auto; height: 38px; padding: 0 16px; gap: 8px; border-radius: 100px;
  background: var(--gold, #E0B247); color: var(--cocoa, #3D2417);
  border: 1px solid var(--gold, #E0B247);
  font: 700 11.5px/1 var(--font-body, 'DM Sans', sans-serif);
  letter-spacing: .08em; text-transform: uppercase; text-decoration: none; white-space: nowrap;
}
.footer-social a.footer-staff-btn:hover {
  background: var(--gold-soft, #F0CC7A); border-color: var(--gold-soft, #F0CC7A);
  color: var(--cocoa, #3D2417);
}
.footer-social a.footer-staff-btn svg { flex: none; }
@media (max-width: 520px) {
  .footer-social { flex-wrap: wrap; }
  .footer-social a.footer-staff-btn { margin-top: 6px; }
}

@media (max-width: 760px) {
  .thbb-checkout-grid { grid-template-columns: 1fr; }
  .thbb-grid2 { grid-template-columns: 1fr; }
  .thbb-sticky { position: static; }
  .thbb-cartpage-row { grid-template-columns: 56px 1fr auto; }
  .thbb-shop-header .brand span { display: none; }
  .thbb-shop-main { padding: 40px 20px 70px; }
  .thbb-auth { padding: 28px 22px; }
}

/* ── Payment progress overlay (checkout) ──────────────────────
   Purely cosmetic: shown while the order is being created and the
   Razorpay window is loading, so slow mobile connections don't look
   frozen. Removing this block only removes the visual — checkout
   still works exactly the same. */
.thbb-paywait {
  position: fixed; inset: 0; z-index: 9998;
  display: flex; align-items: center; justify-content: center;
  background: rgba(45,30,20,.55); backdrop-filter: blur(3px);
  opacity: 0; transition: opacity .25s ease;
}
.thbb-paywait.show { opacity: 1; }
.thbb-paywait-card {
  background: var(--thbb-paper); border-radius: 18px;
  box-shadow: var(--thbb-shadow); padding: 30px 28px;
  max-width: 320px; width: calc(100% - 48px); text-align: center;
}
.thbb-paywait-spin {
  width: 42px; height: 42px; margin: 0 auto 16px; border-radius: 50%;
  border: 3px solid var(--thbb-border); border-top-color: var(--thbb-rust);
  animation: thbb-payspin .8s linear infinite;
}
@keyframes thbb-payspin { to { transform: rotate(360deg); } }
.thbb-paywait-title { font: 700 16px/1.3 var(--thbb-body); color: var(--thbb-ink); margin: 0 0 6px; }
.thbb-paywait-msg { font: 500 13px/1.5 var(--thbb-body); color: var(--thbb-ink-soft); margin: 0; min-height: 20px; }