/* ============================================================
   inpik — Store (catalog + product detail)
   Matches the site identity: black canvas · red-orange (#e73604)
   accents · glass cards. Self-contained (no Tailwind utilities
   beyond the shared body classes) so it renders even though
   tw.css is precompiled.
   ============================================================ */

.store-wrap {
  width: 100%;
  max-width: 80rem;
  margin: 0 auto;
  padding: 8px 1px 64px;
  position: relative;
  /* Above the shared footer (also z-index:10). The mobile sticky buy-bar is fixed INSIDE this wrapper,
     so its stacking context must outrank the footer — otherwise the footer (later in the DOM) paints
     over the Pay button. */
  z-index: 20;
}

/* ---- page heading ---- */
.store-head {
  text-align: center;
  margin: 18px auto 34px;
  max-width: 44rem;
}
/* eyebrow pill above the title — sets the "premium" tone up top */
.store-eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: #ff8a4c;
  background: rgba(231, 54, 4, 0.12);
  border: 1px solid rgba(231, 54, 4, 0.28);
  padding: 6px 14px;
  border-radius: 999px;
  margin-bottom: 16px;
}
.store-eyebrow-dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: #ff6a2c;
  box-shadow: 0 0 0 4px rgba(255, 106, 44, 0.22);
  animation: store-pulse 2.4s ease-in-out infinite;
}
@keyframes store-pulse { 0%, 100% { opacity: 1; } 50% { opacity: 0.35; } }
@media (prefers-reduced-motion: reduce) { .store-eyebrow-dot { animation: none; } }

.store-title {
  font-family: "Ultra", "Plus Jakarta Sans", Georgia, serif;
  font-weight: 400;
  letter-spacing: -0.01em;
  font-size: clamp(2.1rem, 6vw, 3.4rem);
  line-height: 1.1;
  background: linear-gradient(115deg, #ff8a4c 0%, #ff6a2c 40%, var(--gold) 70%, var(--amber) 100%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  padding-bottom: 0.1em;
  text-wrap: balance;
}
.store-sub {
  margin: 12px auto 0;
  max-width: 34rem;
  color: #a1a1aa;
  font-size: 1.02rem;
  line-height: 1.6;
}

/* trust strip under the hero — mirrors the pack benefits, builds confidence before scrolling */
.store-trust {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 8px 10px;
  margin-top: 22px;
}
.trust-badge {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  font-size: 0.8rem;
  font-weight: 600;
  color: #d4d4d8;
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid rgba(255, 255, 255, 0.09);
  border-radius: 999px;
  padding: 7px 13px;
}
.trust-badge svg { width: 15px; height: 15px; color: #ff7a45; flex-shrink: 0; }

/* ---- toolbar (result count) ---- */
.store-bar {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  margin-bottom: 22px;
}
.store-count {
  color: #a1a1aa;
  font-size: 0.8rem;
  font-weight: 600;
  letter-spacing: 0.03em;
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid rgba(255, 255, 255, 0.08);
  padding: 5px 13px;
  border-radius: 999px;
}

/* ---- product grid ---- */
.store-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(230px, 1fr));
  gap: 20px;
}
@media (max-width: 480px) {
  .store-grid { grid-template-columns: repeat(2, 1fr); gap: 13px; }
}

/* ---- product card ---- */
.pcard {
  position: relative;
  display: flex;
  flex-direction: column;
  border: 1px solid rgba(255, 255, 255, 0.08);
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.055), rgba(255, 255, 255, 0.02));
  border-radius: 1.15rem;
  overflow: hidden;
  text-decoration: none;
  color: inherit;
  -webkit-backdrop-filter: blur(6px);
  backdrop-filter: blur(6px);
  transition: transform 0.28s cubic-bezier(0.16, 1, 0.3, 1), border-color 0.28s ease, box-shadow 0.28s ease;
}
.pcard:hover {
  transform: translateY(-6px);
  border-color: rgba(231, 54, 4, 0.5);
  box-shadow: 0 28px 60px -26px rgba(255, 84, 11, 0.6), 0 0 0 1px rgba(231, 54, 4, 0.12);
}
.pcard-thumb {
  position: relative;
  aspect-ratio: 16 / 9; /* 1280×720 landscape — matches the uploaded thumbnail so nothing is cropped */
  background: #0b0b0b;
  overflow: hidden;
}
.pcard-thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: transform 0.5s cubic-bezier(0.16, 1, 0.3, 1);
}
.pcard:hover .pcard-thumb img { transform: scale(1.06); }
.pcard-body {
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding: 13px 15px 15px;
  flex: 1;
}
.pcard-name {
  font-family: "Plus Jakarta Sans", Roboto, sans-serif;
  font-weight: 700;
  font-size: 1rem;
  color: #fff;
  line-height: 1.3;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.pcard-desc {
  color: #a1a1aa;
  font-size: 0.82rem;
  line-height: 1.5;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  min-height: 2.4em;
}
/* price row + persistent arrow affordance, pinned to the card bottom */
.pcard-foot {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  margin-top: auto;
  padding-top: 8px;
}
.pcard-go {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 34px;
  height: 34px;
  flex-shrink: 0;
  border-radius: 50%;
  color: #ff7a45;
  background: rgba(231, 54, 4, 0.12);
  border: 1px solid rgba(231, 54, 4, 0.28);
  transition: background 0.24s ease, color 0.24s ease, transform 0.24s ease;
}
.pcard-go svg { width: 16px; height: 16px; }
.pcard:hover .pcard-go {
  background: linear-gradient(135deg, var(--gold), var(--amber));
  color: #fff;
  transform: translateX(2px);
}
.price-row {
  display: flex;
  align-items: baseline;
  gap: 8px;
}
.price-now {
  font-weight: 800;
  font-size: 1.15rem;
  color: #fff;
}
.price-was {
  font-size: 0.85rem;
  color: #71717a;
  text-decoration: line-through;
}

/* ---- skeleton shimmer ---- */
.sk {
  position: relative;
  overflow: hidden;
  background: rgba(255, 255, 255, 0.05);
}
.sk::after {
  content: "";
  position: absolute;
  inset: 0;
  transform: translateX(-100%);
  background: linear-gradient(
    90deg,
    transparent 0,
    rgba(255, 255, 255, 0.08) 45%,
    rgba(255, 255, 255, 0.13) 50%,
    rgba(255, 255, 255, 0.08) 55%,
    transparent 100%
  );
  animation: shimmer 1.3s infinite;
}
@keyframes shimmer { 100% { transform: translateX(100%); } }
.sk-line { height: 12px; border-radius: 6px; }
@media (prefers-reduced-motion: reduce) {
  .sk::after { animation: none; }
}

/* ---- states (empty / error) ---- */
.store-msg {
  text-align: center;
  color: #a1a1aa;
  padding: 60px 20px;
  font-size: 0.95rem;
}
.store-msg .retry-btn {
  display: inline-flex;
  margin-top: 14px;
  cursor: pointer;
}

/* ---- pagination ---- */
.store-pager {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  margin-top: 36px;
}
.pager-btn {
  border: 1px solid rgba(255, 255, 255, 0.15);
  background: rgba(255, 255, 255, 0.05);
  color: #fff;
  padding: 9px 18px;
  border-radius: 12px;
  font-size: 0.9rem;
  font-weight: 600;
  cursor: pointer;
  transition: border-color 0.2s ease, color 0.2s ease, opacity 0.2s ease;
}
.pager-btn:hover:not(:disabled) { border-color: rgba(231, 54, 4, 0.6); color: #ff5a2a; }
.pager-btn:disabled { opacity: 0.4; cursor: not-allowed; }
.pager-info { color: #a1a1aa; font-size: 0.88rem; }

/* ============================================================
   Product detail
   ============================================================ */
.pd-back {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  color: #a1a1aa;
  text-decoration: none;
  font-size: 0.9rem;
  margin-bottom: 18px;
  transition: color 0.2s ease;
}
.pd-back:hover { color: #ff5a2a; }

/* Themed panel that holds the product details (hero + body). Dark, warm-tinted surface so the
   details sit in a contained "card" instead of floating on the pure-black page. Reviews & FAQ
   stay OUTSIDE this panel as their own full-width sections. */
.pd-panel {
  margin-top: 4px;
  padding: 20px;
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 1.5rem;
  background:
    radial-gradient(120% 90% at 0% 0%, rgba(231, 54, 4, 0.09), transparent 55%),
    rgba(255, 255, 255, 0.028);
}
@media (min-width: 860px) { .pd-panel { padding: 30px 34px; } }

/* hero: image + buy-info side by side. Only SHORT content lives here (title, price, CTA, trust),
   so both columns stay a similar height → no big empty column. The long content moves to .pd-body. */
.pd-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 28px;
  align-items: center;
}
@media (min-width: 860px) {
  .pd-grid { grid-template-columns: minmax(0, 460px) 1fr; gap: 48px; align-items: center; }
}

.pd-media-col { width: 100%; }
.pd-media {
  position: relative;
  border: 1px solid rgba(255, 255, 255, 0.1);
  background: rgba(255, 255, 255, 0.04);
  border-radius: 1.35rem;
  overflow: hidden;
  aspect-ratio: 16 / 9; /* 1280×720 landscape — no crop */
  max-width: 460px;
  margin-inline: auto;
  width: 100%;
  box-shadow:
    0 40px 90px -40px rgba(255, 84, 11, 0.5),
    0 0 0 1px rgba(255, 255, 255, 0.04) inset;
}
.pd-media img { width: 100%; height: 100%; object-fit: cover; display: block; }
/* subtle warm glow ring behind the media */
.pd-media::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  border-radius: inherit;
  box-shadow: inset 0 -60px 80px -50px rgba(0, 0, 0, 0.55);
}
.pd-info { min-width: 0; }
.pd-eyebrow {
  display: inline-block;
  font-size: 0.68rem;
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: #ff8a4c;
  margin-bottom: 10px;
}
.pd-name {
  font-family: "Plus Jakarta Sans", Roboto, sans-serif;
  font-weight: 800;
  font-size: clamp(1.5rem, 3.6vw, 2.15rem);
  color: #fff;
  line-height: 1.18;
  letter-spacing: -0.01em;
  text-wrap: balance;
}
.pd-price-row {
  display: flex;
  align-items: baseline;
  flex-wrap: wrap;
  gap: 10px;
  margin-top: 18px;
}
.pd-price-now { font-weight: 800; font-size: 2rem; color: #fff; letter-spacing: -0.01em; }
.pd-price-was { font-size: 1.05rem; color: #71717a; text-decoration: line-through; }
.pd-off {
  align-self: center;
  background: linear-gradient(135deg, var(--gold), var(--amber));
  color: #fff;
  font-size: 0.78rem;
  font-weight: 800;
  padding: 4px 10px;
  border-radius: 999px;
  box-shadow: 0 8px 20px -8px rgba(255, 84, 11, 0.8);
}
/* "You save ₹X" — the only place green appears (semantic savings signal, not the accent) */
.pd-save {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  margin-top: 12px;
  font-size: 0.85rem;
  color: #4ade80;
  background: rgba(34, 197, 94, 0.1);
  border: 1px solid rgba(34, 197, 94, 0.22);
  border-radius: 10px;
  padding: 7px 12px;
}
.pd-save svg { width: 15px; height: 15px; flex-shrink: 0; }
.pd-save b { color: #86efac; font-weight: 800; }
.pd-desc {
  margin-top: 18px;
  color: #d4d4d8;
  font-size: 1rem;
  line-height: 1.7;
  white-space: pre-wrap;
}

/* full-width content below the hero (description, benefits, chips, guarantee) */
.pd-body { margin-top: 40px; }
.pd-body .pd-desc { margin-top: 0; max-width: 70ch; } /* keep the paragraph at a readable measure */
.pd-body .wyg { margin-top: 28px; }
.pd-body .pd-inside-title { margin-top: 30px; }
.pd-body .pd-guarantee { margin-top: 26px; }

/* "What's inside" chips */
.pd-inside-title {
  margin: 26px 0 12px;
  font-size: 0.8rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: #71717a;
}
.pd-chips { display: flex; flex-wrap: wrap; gap: 10px; }
.pd-chip {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  border: 1px solid rgba(255, 255, 255, 0.1);
  background: rgba(255, 255, 255, 0.04);
  border-radius: 12px;
  padding: 9px 13px;
  font-size: 0.85rem;
  color: #e4e4e7;
}
.pd-chip b { color: #fff; font-weight: 800; }
.pd-chip svg { width: 16px; height: 16px; color: var(--brand-500); }

/* ---- "You may also like" recommendations ---- */
.rec-wrap {
  margin-top: 56px;
  padding-top: 32px;
  border-top: 1px solid rgba(255, 255, 255, 0.1);
}
.rec-title {
  font-family: "Plus Jakarta Sans", Roboto, sans-serif;
  font-weight: 800;
  font-size: 1.25rem;
  color: #fff;
  margin-bottom: 18px;
}

/* ---- "What You Get" — premium benefits panel (static) ---- */
/* "What You Get" — compact CHECKLIST (no big tiles, no hero, no per-item cards) so it stays small.
   Just a tight two-column list of small icon + label rows. */
.wyg { margin-top: 26px; }
.wyg-head { margin-bottom: 12px; }
.wyg-kicker {
  display: inline-block;
  font-size: 0.64rem;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: #ff7a45;
  background: rgba(231, 54, 4, 0.14);
  padding: 3px 9px;
  border-radius: 999px;
  margin-bottom: 8px;
}
.wyg-title {
  font-family: "Plus Jakarta Sans", Roboto, sans-serif;
  font-weight: 800;
  font-size: 1.1rem;
  color: #fff;
  line-height: 1.15;
}
.wyg-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 3px 26px;      /* tight rows, comfortable column gap */
}
@media (max-width: 560px) { .wyg-grid { grid-template-columns: 1fr; } }
.wyg-item {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 7px 0;      /* compact row — no border/background */
}
.wyg-ic {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 26px;
  height: 26px;
  flex-shrink: 0;
  border-radius: 8px;
  color: #ff7a45;
  background: rgba(231, 54, 4, 0.14);
}
.wyg-ic svg { width: 15px; height: 15px; }
.wyg-text { color: #d4d4d8; font-size: 0.88rem; font-weight: 500; line-height: 1.4; }

.pd-actions { margin-top: 30px; display: flex; flex-wrap: wrap; gap: 14px 18px; align-items: center; }
.pd-buy { cursor: pointer; }
.pd-secure {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  color: #71717a;
  font-size: 0.8rem;
}
.pd-secure svg { width: 15px; height: 15px; color: #22c55e; }

/* trust row under the CTA — reassurance right where the buyer decides */
.pd-trust {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 10px;
  margin-top: 20px;
  padding-top: 20px;
  border-top: 1px solid rgba(255, 255, 255, 0.08);
}

/* ---- star rating (under the title) ---- */
.pd-rating {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-top: 12px;
  flex-wrap: wrap;
}
.pd-stars { display: inline-flex; gap: 2px; }
.pd-stars svg { width: 16px; height: 16px; color: #ff8a4c; }
.pd-stars svg.is-empty { color: rgba(255, 255, 255, 0.16); }
.pd-rating-num { font-weight: 800; color: #fff; font-size: 0.95rem; }
.pd-rating-count { color: #a1a1aa; font-size: 0.85rem; }

/* ---- limited-time urgency banner ---- */
.pd-urgency {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-top: 16px;
  padding: 11px 14px;
  border-radius: 12px;
  background: linear-gradient(135deg, rgba(231, 54, 4, 0.16), rgba(255, 84, 11, 0.06));
  border: 1px solid rgba(231, 54, 4, 0.32);
  color: #ffd7c2;
  font-size: 0.9rem;
  font-weight: 600;
}
.pd-urgency-ic { display: inline-flex; color: #ff8a4c; flex-shrink: 0; }
.pd-urgency-ic svg { width: 18px; height: 18px; }
.pd-urgency b { color: #fff; font-weight: 800; }
.pd-countdown {
  font-variant-numeric: tabular-nums;
  font-weight: 800;
  color: #fff;
  background: rgba(0, 0, 0, 0.35);
  padding: 2px 8px;
  border-radius: 7px;
  letter-spacing: 0.03em;
  white-space: nowrap;
}

/* ---- guarantee / secure-purchase card ---- */
.pd-guarantee {
  display: flex;
  gap: 13px;
  align-items: flex-start;
  margin-top: 20px;
  padding: 15px 16px;
  border-radius: 14px;
  background: rgba(255, 255, 255, 0.03);
  border: 1px solid rgba(255, 255, 255, 0.1);
}
.pd-guarantee-ic {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  flex-shrink: 0;
  border-radius: 11px;
  color: #4ade80;
  background: rgba(34, 197, 94, 0.12);
  box-shadow: inset 0 0 0 1px rgba(34, 197, 94, 0.22);
}
.pd-guarantee-ic svg { width: 20px; height: 20px; }
.pd-guarantee-title { font-weight: 800; color: #fff; font-size: 0.98rem; }
.pd-guarantee-text { color: #a1a1aa; font-size: 0.85rem; line-height: 1.5; margin: 3px 0 0; }

/* ============================================================
   Product-detail sales sections (testimonials + FAQ)
   ============================================================ */
.pd-section {
  margin-top: 56px;
  padding-top: 34px;
  border-top: 1px solid rgba(255, 255, 255, 0.1);
}
.pd-section-head { margin-bottom: 22px; }
.pd-section-kicker {
  display: inline-block;
  font-size: 0.68rem;
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: #ff8a4c;
  margin-bottom: 8px;
}
.pd-section-title {
  font-family: "Plus Jakarta Sans", Roboto, sans-serif;
  font-weight: 800;
  font-size: clamp(1.3rem, 3vw, 1.7rem);
  color: #fff;
  line-height: 1.2;
  letter-spacing: -0.01em;
  text-wrap: balance;
}
.pd-section-rating {
  margin-top: 10px;
  display: flex;
  align-items: center;
  gap: 8px;
  color: #a1a1aa;
  font-size: 0.9rem;
  flex-wrap: wrap;
}
.pd-section-rating b { color: #fff; }

/* testimonial cards */
.tgrid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(270px, 1fr));
  gap: 16px;
}
.tcard {
  display: flex;
  flex-direction: column;
  gap: 12px;
  border: 1px solid rgba(255, 255, 255, 0.08);
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.055), rgba(255, 255, 255, 0.02));
  border-radius: 1.1rem;
  padding: 18px;
}
.tcard-stars { display: inline-flex; gap: 2px; }
.tcard-stars svg { width: 15px; height: 15px; color: #ff8a4c; }
.tcard-stars svg.is-empty { color: rgba(255, 255, 255, 0.16); }
.tcard-text { color: #d4d4d8; font-size: 0.9rem; line-height: 1.6; margin: 0; }
.tcard-user { display: flex; align-items: center; gap: 11px; margin-top: auto; }
.tcard-avatar {
  width: 38px;
  height: 38px;
  border-radius: 50%;
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 800;
  color: #fff;
  font-size: 1rem;
  background: linear-gradient(135deg, var(--gold), var(--amber));
}
.tcard-meta { display: flex; flex-direction: column; min-width: 0; }
.tcard-name { font-weight: 700; color: #fff; font-size: 0.9rem; }
.tcard-loc { color: #71717a; font-size: 0.78rem; }
.tcard-verified { color: #4ade80; font-weight: 600; }

/* FAQ accordion (native <details>) */
.faq-list { display: flex; flex-direction: column; gap: 10px; }
.faq-item {
  border: 1px solid rgba(255, 255, 255, 0.09);
  background: rgba(255, 255, 255, 0.03);
  border-radius: 13px;
  overflow: hidden;
}
.faq-item[open] { border-color: rgba(231, 54, 4, 0.32); background: rgba(255, 255, 255, 0.045); }
.faq-q {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  cursor: pointer;
  list-style: none;
  padding: 15px 17px;
  font-weight: 700;
  color: #fff;
  font-size: 0.95rem;
}
.faq-q::-webkit-details-marker { display: none; }
.faq-ic { display: inline-flex; flex-shrink: 0; color: #ff8a4c; transition: transform 0.25s ease; }
.faq-ic svg { width: 18px; height: 18px; }
.faq-item[open] .faq-ic { transform: rotate(180deg); }
.faq-a { padding: 0 17px 16px; color: #a1a1aa; font-size: 0.9rem; line-height: 1.65; }
@media (prefers-reduced-motion: reduce) { .faq-ic { transition: none; } }

/* gold-button as a <button> element (used by purchase CTAs) */
button.gold-button { border: 0; cursor: pointer; font-family: inherit; }

/* ---- purchase modal (email / paying / success) ---- */
.buy-modal {
  position: fixed;
  inset: 0;
  z-index: 120;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 20px;
  background: rgba(0, 0, 0, 0.72);
  -webkit-backdrop-filter: blur(6px);
  backdrop-filter: blur(6px);
}
/* WHITE-themed purchase modal (matches the white store / payment card). */
.bm-card {
  position: relative;
  width: 100%;
  max-width: 384px;
  background: #fff;
  border: 1px solid #ececec;
  border-radius: 18px;
  padding: 26px 24px 24px;
  color: #18181b;
  box-shadow: 0 40px 90px -30px rgba(0, 0, 0, 0.4);
}
.bm-x { position: absolute; top: 12px; right: 12px; width: 30px; height: 30px; border-radius: 50%; border: 0; background: #f4f4f5; color: #52525b; font-size: 18px; line-height: 1; cursor: pointer; }
.bm-x:hover { background: #e4e4e7; }
.bm-title { font-size: 1.2rem; font-weight: 800; margin: 2px 0 6px; color: #18181b; }
.bm-sub { color: #52525b; font-size: 0.9rem; margin: 0 0 16px; line-height: 1.5; }
.bm-input { width: 100%; box-sizing: border-box; background: #fff; border: 1px solid #d4d4d8; border-radius: 11px; padding: 12px 13px; color: #18181b; font-size: 1rem; outline: none; }
.bm-input:focus { border-color: var(--dp-accent, #e73604); box-shadow: 0 0 0 3px rgba(231,54,4,0.14); }
.bm-err { color: #dc2626; font-size: 0.82rem; margin: 8px 0 0; }

/* desktop "continue on your phone" — QR + copy-link */
.bm-phone { text-align: center; }
.bm-qr-wrap { display: inline-flex; padding: 12px; background: #fff; border: 1px solid #ececec; border-radius: 14px; margin: 4px auto 14px; box-shadow: 0 10px 30px -14px rgba(0,0,0,0.2); }
.bm-qr { display: block; width: 200px; height: 200px; border-radius: 6px; }
.bm-linkrow { display: flex; gap: 8px; }
.bm-linkinput { flex: 1; min-width: 0; background: #f4f4f5; border: 1px solid #d4d4d8; border-radius: 10px; padding: 10px 12px; color: #3f3f46; font-size: 0.82rem; outline: none; }
.bm-linkinput:focus { border-color: var(--dp-accent, #e73604); }
.bm-copy { flex-shrink: 0; border: 0; border-radius: 10px; padding: 0 16px; font-family: inherit; font-weight: 700; font-size: 0.85rem; color: #fff; background: #e73604; cursor: pointer; }
.bm-copy:hover { background: #cf3104; }

/* iOS UPI app chooser — one tappable row per app (Google Pay / PhonePe / Paytm / Other) */
.bm-upi-apps { display: flex; flex-direction: column; gap: 10px; margin-top: 4px; }
.bm-upi-btn {
  display: flex; align-items: center; justify-content: space-between; gap: 10px; width: 100%;
  border: 1px solid #e4e4e7; background: #fff; border-radius: 12px; padding: 14px 16px;
  font: inherit; font-size: 15px; font-weight: 700; color: #18181b; cursor: pointer;
  transition: border-color .18s ease, background .18s ease, transform .12s ease;
}
.bm-upi-btn:hover { border-color: var(--dp-accent, #e73604); background: #fafafa; }
.bm-upi-btn:active { transform: scale(0.99); }
.bm-upi-go { display: inline-flex; color: #a1a1aa; }
.bm-upi-go svg { width: 18px; height: 18px; }

/* product context + labelled email field in the purchase modal */
.bm-prod { display: flex; align-items: center; gap: 12px; margin-bottom: 18px; padding: 10px; border-radius: 13px; background: #f8f8f8; border: 1px solid #ececec; }
.bm-prod-img { width: 46px; height: 46px; border-radius: 9px; object-fit: cover; flex-shrink: 0; background: #ececec; display: block; }
.bm-prod-info { min-width: 0; }
.bm-prod-name { font-size: 0.92rem; font-weight: 700; color: #18181b; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.bm-prod-price { display: flex; align-items: baseline; gap: 7px; margin-top: 2px; }
.bm-ph-now { font-size: 1.05rem; font-weight: 800; color: #e73604; }
.bm-ph-was { font-size: 0.8rem; color: #a1a1aa; text-decoration: line-through; }
.bm-label { display: block; font-size: 0.78rem; font-weight: 600; color: #52525b; margin: 2px 0 6px; }
.bm-field { position: relative; }
.bm-field-ic { position: absolute; left: 12px; top: 50%; transform: translateY(-50%); color: #a1a1aa; display: flex; }
.bm-field-ic svg { width: 17px; height: 17px; }
.bm-input--icon { padding-left: 38px; }
.bm-hint { color: #71717a; font-size: 0.78rem; margin: 8px 0 0; }
.bm-btn { width: 100%; justify-content: center; margin-top: 14px; }
/* processing state for the purchase CTA — disabled + inline spinner (prevents double-submit) */
button.gold-button:disabled { cursor: progress; opacity: 0.8; transform: none; box-shadow: none; }
.gold-button.is-loading { pointer-events: none; }
.bm-btn-spin {
  width: 16px;
  height: 16px;
  border-radius: 50%;
  border: 2px solid rgba(255, 255, 255, 0.45);
  border-top-color: #fff;
  animation: bm-spin 0.7s linear infinite;
}
.bm-secure, .bm-note { text-align: center; color: #71717a; font-size: 0.78rem; margin: 12px 0 0; }
.bm-center { text-align: center; }
.bm-ok { width: 52px; height: 52px; border-radius: 50%; background: rgba(34,197,94,0.14); color: #16a34a; display: flex; align-items: center; justify-content: center; font-size: 26px; margin: 2px auto 12px; }
.bm-spin { width: 34px; height: 34px; border-radius: 50%; border: 3px solid #e4e4e7; border-top-color: #e73604; margin: 8px auto 16px; animation: bm-spin 1s linear infinite; }
@keyframes bm-spin { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) { .bm-spin, .bm-btn-spin { animation: none; } }

/* ---- sticky mobile purchase bar (hidden on desktop; inline .pd-actions is used there) ---- */
.pd-buybar { display: none; transition: transform 0.32s cubic-bezier(0.16, 1, 0.3, 1); }
@media (max-width: 640px) {
  .pd-actions { display: none; }          /* on mobile the sticky bar is the CTA */
  .pd-buybar {
    display: flex;
    align-items: center;
    gap: 14px;
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 60;
    padding: 11px 16px;
    padding-bottom: calc(11px + env(safe-area-inset-bottom));
    background: rgba(9, 9, 11, 0.94);
    -webkit-backdrop-filter: blur(14px);
    backdrop-filter: blur(14px);
    border-top: 1px solid rgba(255, 255, 255, 0.12);
    box-shadow: 0 -12px 30px -18px rgba(0, 0, 0, 0.9);
  }
  /* When the footer scrolls into view, tuck the bar off-screen (JS toggles .is-tucked via an
     IntersectionObserver on the footer) so the Terms / Privacy / Contact links are fully tappable
     — the fixed bar used to sit on top of them and swallow the taps. */
  .pd-buybar.is-tucked { transform: translateY(150%); pointer-events: none; }
  .pd-buybar-btn { flex: 1; justify-content: center; padding: 0.9rem 1rem; font-size: 1rem; white-space: nowrap; }
  /* Fallback clearance for browsers without IntersectionObserver: keep the footer's last links above
     the fixed bar. Includes the SAME safe-area inset the bar adds (notch phones). */
  .store-detail .site-footer { padding-bottom: calc(88px + env(safe-area-inset-bottom)); }
}
@media (prefers-reduced-motion: reduce) { .pd-buybar { transition: none; } }

/* ============================================================
   Dynamic product detail (WHITE, earlycaves-style) — rendered by store.js detailHtml().
   Mirrors the admin StorePreview: a centered white column of admin-authored sections with a
   sticky CTA. On the detail view the dark site chrome (header/footer/ambient glows) is hidden
   so the product page stands alone, exactly like the preview.
   ============================================================ */
body.store-detail { background: #fff; }
body.store-detail .glow { display: none !important; }
body.store-detail .site-header,
body.store-detail .site-footer { display: none !important; }
.store-detail .store-wrap { max-width: none; padding: 0; background: #fff; }

.dp {
  --dp-accent: #e73604;
  --dp-btn: #e73604;
  max-width: 640px;
  margin: 0 auto;
  padding: 18px 16px 104px; /* mobile: extra bottom space so content clears the fixed CTA */
  color: #18181b;
  -webkit-font-smoothing: antialiased;
}
/* One consistent vertical rhythm for every top-level block (profile, title, cover, each section,
   notes) — a single flex gap instead of per-element margins that used to differ (26px sections vs
   16px notes vs bespoke title/profile margins). Gives an even top-to-bottom flow. */
.dp-main { min-width: 0; display: flex; flex-direction: column; gap: 24px; }
.dp-side { display: none; } /* shown only on desktop (see media query) */

/* Desktop: a CENTERED cluster — content (left) + white pay card (right) with an even gap. A full-height
   brand-colour dotted band bleeds from the card's centre to the viewport's right edge, so the card
   straddles a half-white / half-theme backdrop. */
@media (min-width: 980px) {
  .dp {
    position: relative;
    max-width: 1200px;
    margin: 0 auto;
    display: grid;
    grid-template-columns: minmax(0, 1fr) 384px;
    gap: 56px;
    align-items: stretch; /* the side column spans full height so the card can stick */
    padding: 36px 40px 72px;
  }
  .dp::before {
    content: "";
    position: absolute; top: 0; bottom: 0;
    left: calc(100% - 232px);        /* card horizontal centre (right padding 40 + half of 384) */
    right: calc(50% - 50vw);         /* bleed to the viewport's right edge at any width */
    background-color: var(--dp-accent);
    background-image: radial-gradient(rgba(255, 255, 255, 0.25) 1.5px, transparent 1.5px);
    background-size: 18px 18px;
    z-index: 0;
  }
  .dp-main { position: relative; z-index: 1; }
  .dp-side { display: block; position: relative; z-index: 1; }
  .dp-pay { position: sticky; top: 36px; }
  .dp-cta { display: none; } /* the card replaces the fixed bar on desktop */
}

/* Creator/profile header (top) */
.dp-profile { display: flex; align-items: center; gap: 12px; }
.dp-profile-av { width: 46px; height: 46px; border-radius: 999px; object-fit: cover; flex-shrink: 0; }
.dp-profile-av--ph { display: inline-flex; align-items: center; justify-content: center; color: #fff; font-weight: 700; font-size: 18px; }
.dp-profile-meta { min-width: 0; }
.dp-profile-title { font-size: 15px; font-weight: 700; line-height: 1.25; color: #18181b; }
.dp-profile-sub { font-size: 13px; line-height: 1.3; color: #71717a; margin-top: 2px; }

.dp-title { font-size: 22px; line-height: 1.28; font-weight: 800; color: #18181b; margin: 0; }

/* Payment Details card (desktop) */
.dp-pay { background: #fff; border: 1px solid #ececec; border-radius: 16px; padding: 24px 22px; box-shadow: 0 24px 60px -34px rgba(0, 0, 0, 0.4); }
.dp-pay-title { font-size: 20px; font-weight: 800; color: #18181b; margin: 0 0 14px; }
.dp-pay-label { display: block; font-size: 13px; font-weight: 600; color: #52525b; margin: 14px 0 6px; }
.dp-pay-label span { color: #ef4444; }
.dp-pay-input {
  width: 100%; box-sizing: border-box; border: 1px solid #d4d4d8; border-radius: 10px;
  padding: 11px 12px; font: inherit; font-size: 14px; color: #18181b; background: #fff; outline: none;
}
.dp-pay-input:focus { border-color: var(--dp-accent); box-shadow: 0 0 0 3px rgba(231, 54, 4, 0.12); }
.dp-pay-note { font-size: 12px; color: #71717a; margin: 12px 0 0; }
.dp-pay-sum { border-top: 1px solid #ececec; margin-top: 16px; padding-top: 14px; }
.dp-pay-row { display: flex; align-items: center; justify-content: space-between; font-size: 14px; color: #3f3f46; padding: 4px 0; }
.dp-pay-total { font-weight: 800; color: #18181b; font-size: 15px; }
.dp-pay-disc { color: #16a34a; }
.dp-pay-was { color: #a1a1aa; text-decoration: line-through; font-size: 12px; margin-right: 6px; }
.dp-pay-btn {
  position: relative; overflow: hidden;
  display: flex; align-items: center; justify-content: center; gap: 8px; width: 100%;
  margin-top: 16px; border: 0; cursor: pointer; border-radius: 12px; padding: 14px 18px;
  font: inherit; font-size: 15px; font-weight: 700; color: #fff; background: var(--dp-btn);
}
.dp-pay-btn svg { width: 18px; height: 18px; }
.dp-pay-btn:disabled { opacity: .75; cursor: progress; }
.dp-pay-err { color: #dc2626; font-size: 13px; margin-top: 10px; }
.dp-pay-secure { text-align: center; font-size: 12px; color: #71717a; margin: 12px 0 0; }
.dp-pay-logos { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 8px 12px; margin-top: 14px; padding-top: 14px; border-top: 1px solid #f0f0f0; }
.dp-pay-logos img { height: 22px; width: auto; object-fit: contain; }
.dp-cover { border-radius: 16px; overflow: hidden; background: #f4f4f5; aspect-ratio: 16 / 9; }
.dp-cover img { width: 100%; height: 100%; object-fit: cover; display: block; }

.dp-sec { margin: 0; } /* spacing comes from .dp-main's flex gap */
.dp-sec-title { font-size: 17px; font-weight: 800; color: #18181b; margin: 0 0 12px; }

/* Rich HTML (description / terms / disclaimer) — normal weight by default */
.dp-html { font-size: 15px; line-height: 1.7; color: #3f3f46; font-weight: 400; }
.dp-html h1 { font-size: 1.25rem; font-weight: 800; margin: .5em 0; color: #18181b; }
.dp-html h2 { font-size: 1.1rem; font-weight: 800; margin: .5em 0; color: #18181b; }
.dp-html h3 { font-size: 1rem; font-weight: 700; margin: .5em 0; color: #18181b; }
.dp-html p { margin: .5em 0; }
/* Lists start on the SAME vertical line as the section title — the bullet/number sits at the heading's
   left edge (inside marker, no left padding) instead of the old 1.3em indent that pushed content right. */
.dp-html ul { list-style: disc inside; padding-left: 0; margin: .5em 0; }
.dp-html ol { list-style: decimal inside; padding-left: 0; margin: .5em 0; }
.dp-html li { margin: .15em 0; }
.dp-html a { color: var(--dp-accent); text-decoration: underline; }
.dp-html img { max-width: 100%; border-radius: 10px; }
/* Content starts & ends FLUSH with its section title — kill the first block's top margin (which used
   to add a stray leading gap so the text didn't align under the heading) and the last block's bottom
   margin. Blank paragraphs pasted content leaves behind are hidden so there's no empty first line. */
.dp-html > :first-child { margin-top: 0; }
.dp-html > :last-child { margin-bottom: 0; }
.dp-html p:empty { display: none; }

/* FAQ accordion — animated open/close (grid-rows 0fr → 1fr) */
.dp-faq { display: flex; flex-direction: column; gap: 10px; }
.dp-faq-item { border: 1px solid #e4e4e7; border-radius: 12px; padding: 0 14px; }
.dp-faq-q {
  display: flex; align-items: center; justify-content: space-between; gap: 10px; width: 100%;
  background: none; border: 0; cursor: pointer; text-align: left; font: inherit;
  padding: 14px 0; font-size: 15px; font-weight: 600; color: #18181b;
}
.dp-chev { width: 18px; height: 18px; flex-shrink: 0; color: #a1a1aa; transition: transform .25s ease; }
.dp-faq-item.is-open .dp-chev { transform: rotate(180deg); }
.dp-faq-a-wrap { display: grid; grid-template-rows: 0fr; transition: grid-template-rows .28s ease; }
.dp-faq-item.is-open .dp-faq-a-wrap { grid-template-rows: 1fr; }
.dp-faq-a { overflow: hidden; min-height: 0; }
.dp-faq-a-in { padding: 0 0 14px; font-size: 14px; line-height: 1.6; color: #52525b; }

/* Benefits — check-cards in a responsive 2-column grid */
.dp-benefits { display: grid; grid-template-columns: 1fr; gap: 10px; }
@media (min-width: 560px) { .dp-benefits { grid-template-columns: 1fr 1fr; } }
.dp-benefit {
  display: flex; align-items: center; gap: 11px;
  padding: 12px 14px; border: 1px solid #ececec; border-radius: 12px; background: #fafafa;
}
.dp-benefit-ic {
  flex-shrink: 0; width: 22px; height: 22px; border-radius: 999px;
  background: #22c55e; color: #fff; display: inline-flex; align-items: center; justify-content: center;
}
.dp-benefit-ic svg { width: 13px; height: 13px; }
.dp-benefit-t { font-size: 14px; line-height: 1.4; color: #3f3f46; }

/* Gallery — one image at a time with ‹ / › arrows */
.dp-gallery { position: relative; }
.dp-gal-view { overflow: hidden; border-radius: 14px; border: 1px solid #e4e4e7; background: #f4f4f5; }
.dp-gal-track { display: flex; transition: transform .4s ease; }
.dp-gal-slide { width: 100%; flex-shrink: 0; aspect-ratio: 16 / 9; }
/* contain (not cover) so the whole image shows, centered, and nothing gets cropped — the light grey
   view background fills any letterbox area cleanly. */
.dp-gal-slide img { width: 100%; height: 100%; object-fit: contain; object-position: center; display: block; }
.dp-gal-arrow {
  position: absolute; top: 50%; transform: translateY(-50%); z-index: 2;
  width: 34px; height: 34px; border-radius: 999px;
  background: #fff; border: 1px solid #e4e4e7; color: #18181b;
  display: inline-flex; align-items: center; justify-content: center; cursor: pointer;
  box-shadow: 0 3px 12px rgba(0, 0, 0, 0.18);
}
.dp-gal-arrow svg { width: 18px; height: 18px; }
.dp-gal-arrow:hover { background: #f4f4f5; }
/* Straddle the image edge — half over the image, half outside (sits in the page's side padding). */
.dp-gal-prev { left: -16px; }
.dp-gal-next { right: -16px; }

/* Horizontal slider (proof) */
.dp-slider {
  display: flex; gap: 12px; overflow-x: auto; padding-bottom: 4px;
  scroll-snap-type: x mandatory; -webkit-overflow-scrolling: touch; scrollbar-width: none;
}
.dp-slider::-webkit-scrollbar { display: none; }
.dp-slide { scroll-snap-align: center; flex-shrink: 0; overflow: hidden; border: 1px solid #e4e4e7; background: #f4f4f5; }
/* contain so full proof screenshots show centered without cropping (portrait/landscape both fit). */
.dp-slide img { width: 100%; height: 100%; object-fit: contain; object-position: center; display: block; }
.dp-slide--sq { width: 180px; aspect-ratio: 1 / 1; border-radius: 12px; }

/* Reviews carousel (one card, auto-advance) */
.dp-reviews { overflow: hidden; }
.dp-rev-track { display: flex; transition: transform .5s ease; }
.dp-review { width: 100%; flex-shrink: 0; }
.dp-review-in { border: 1px solid #e4e4e7; background: #fafafa; border-radius: 14px; padding: 16px; }
.dp-review-head { display: flex; align-items: center; gap: 10px; }
.dp-review-av { width: 42px; height: 42px; border-radius: 999px; object-fit: cover; flex-shrink: 0; }
.dp-review-av--ph { display: inline-flex; align-items: center; justify-content: center; color: #fff; font-weight: 700; font-size: 16px; }
.dp-review-id { min-width: 0; }
.dp-review-name { font-size: 14px; font-weight: 600; color: #18181b; }
.dp-review-loc { font-weight: 400; color: #a1a1aa; }
.dp-stars { display: inline-flex; gap: 2px; margin-top: 3px; }
.dp-stars svg { width: 15px; height: 15px; }
.dp-review-text { margin: 12px 0 0; font-size: 14px; line-height: 1.6; color: #3f3f46; }
.dp-dots { display: flex; justify-content: center; gap: 6px; margin-top: 14px; }
.dp-dot { width: 6px; height: 6px; border: 0; padding: 0; border-radius: 999px; background: #d4d4d8; cursor: pointer; transition: all .2s ease; }
.dp-dot.is-on { width: 18px; background: var(--dp-accent); }

/* Support details */
.dp-support { display: flex; flex-direction: column; gap: 8px; font-size: 15px; color: #52525b; }
.dp-support-row { display: flex; align-items: center; gap: 8px; }
.dp-support-row svg { width: 16px; height: 16px; color: #a1a1aa; flex-shrink: 0; }
.dp-support-row a { color: inherit; text-decoration: none; }
.dp-support-row a:hover { color: var(--dp-accent); }

/* Social pills */
.dp-social { display: flex; flex-wrap: wrap; gap: 8px; }
.dp-social a {
  display: inline-flex; align-items: center; border: 1px solid #e4e4e7; border-radius: 999px;
  padding: 7px 14px; font-size: 13px; color: #3f3f46; text-decoration: none; text-transform: capitalize;
}
.dp-social a:hover { border-color: var(--dp-accent); color: var(--dp-accent); }

/* Terms / disclaimer cards */
.dp-note { border: 1px solid #e4e4e7; border-radius: 14px; padding: 16px; margin: 0; } /* spacing from .dp-main flex gap */
.dp-note-title { font-size: 14px; font-weight: 700; color: #18181b; margin-bottom: 8px; }
.dp-note .dp-html { font-size: 13px; color: #71717a; }

/* Fixed CTA — always visible at the bottom. Inherits --dp-btn from the .dp ancestor. */
.dp-cta {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 40;
  background: #fff; border-top: 1px solid #ececec;
  padding: 12px 16px calc(12px + env(safe-area-inset-bottom));
  box-shadow: 0 -8px 24px -16px rgba(0, 0, 0, 0.35);
}
.dp-cta-in { max-width: 640px; margin: 0 auto; }
.dp-cta-btn {
  position: relative; overflow: hidden;
  display: flex; align-items: center; justify-content: center; gap: 8px; width: 100%;
  border: 0; cursor: pointer; border-radius: 14px; padding: 15px 18px;
  font: inherit; font-size: 15px; font-weight: 700; color: #fff; background: var(--dp-btn);
}
.dp-cta-btn svg { width: 18px; height: 18px; }
.dp-cta-btn:disabled { opacity: .7; cursor: default; }

/* ---- attractive purchase-button animation (shine sweep + gentle pulse + hover lift) ---- */
.dp-pay-btn, .dp-cta-btn {
  animation: dp-btn-pulse 2.6s ease-in-out infinite;
  transition: transform .18s ease, filter .18s ease, box-shadow .18s ease;
}
/* diagonal light sweep that glides across every few seconds */
.dp-pay-btn::after, .dp-cta-btn::after {
  content: "";
  position: absolute; top: 0; left: -75%; width: 45%; height: 100%;
  background: linear-gradient(100deg, transparent, rgba(255, 255, 255, 0.45), transparent);
  transform: skewX(-20deg);
  animation: dp-btn-shine 3s ease-in-out infinite;
  pointer-events: none;
}
.dp-pay-btn:hover, .dp-cta-btn:hover { transform: translateY(-1px); filter: brightness(1.07) saturate(1.05); }
.dp-pay-btn:active, .dp-cta-btn:active { transform: translateY(0) scale(0.99); }
/* stop the attention animation once it's processing/disabled */
.dp-pay-btn:disabled, .dp-cta-btn:disabled { animation: none; }
.dp-pay-btn:disabled::after, .dp-cta-btn:disabled::after { display: none; }
@keyframes dp-btn-pulse {
  0%, 100% { box-shadow: 0 6px 18px -8px rgba(231, 54, 4, 0.55); }
  50%      { box-shadow: 0 12px 28px -8px rgba(231, 54, 4, 0.9); }
}
@keyframes dp-btn-shine {
  0%       { left: -75%; }
  60%, 100% { left: 130%; }
}
@media (prefers-reduced-motion: reduce) {
  .dp-pay-btn, .dp-cta-btn { animation: none; }
  .dp-pay-btn::after, .dp-cta-btn::after { display: none; }
}

/* Skeleton (white) */
.dp-sk { background: #ececec; border-radius: 8px; }
.dp-sk-title { height: 26px; width: 70%; margin: 6px 0 14px; }
.dp-sk-block { background: #ececec; }
.dp-sk-line { height: 12px; margin-top: 10px; }

@media (prefers-reduced-motion: reduce) { .dp-rev-track, .dp-gal-track, .dp-faq-a-wrap, .dp-chev, .dp-dot { transition: none; } }