/* ==========================================================================
   Product detail page (PDP)
   Loaded only on Product/Details. Brand tokens come from front.css.

   Each product template (rudraksha, gemstone, mala, yantra, bracelet) sets its
   own --pdp-accent pair on .pdp, so the same layout reads differently per
   category without duplicating a single rule.
   ========================================================================== */
.pdp {
  --pdp-accent: var(--brand-primary);
  --pdp-accent-2: var(--brand-primary-dark);
  --pdp-accent-soft: rgba(138, 38, 164, 0.08);
  --pdp-gap: 3rem;
}

.pdp-theme-rudraksha {
  --pdp-accent: #8A5A22;
  --pdp-accent-2: #B8721A;
  --pdp-accent-soft: rgba(184, 114, 26, 0.1);
}

.pdp-theme-gemstone {
  --pdp-accent: #8A26A4;
  --pdp-accent-2: #48439F;
  --pdp-accent-soft: rgba(138, 38, 164, 0.09);
}

.pdp-theme-mala {
  --pdp-accent: #4A5F6B;
  --pdp-accent-2: #2F6B3A;
  --pdp-accent-soft: rgba(74, 95, 107, 0.1);
}

.pdp-theme-yantra {
  --pdp-accent: #A16207;
  --pdp-accent-2: #6B1F2A;
  --pdp-accent-soft: rgba(161, 98, 7, 0.1);
}

.pdp-theme-bracelet {
  --pdp-accent: #6B1F2A;
  --pdp-accent-2: #8A26A4;
  --pdp-accent-soft: rgba(107, 31, 42, 0.09);
}

/* ==========================================================================
   Breadcrumb
   ========================================================================== */
.pdp-breadcrumb {
  background: linear-gradient(120deg, var(--pdp-accent), var(--pdp-accent-2));
  padding: 0.9rem 0;
}

.pdp-breadcrumb ol {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.5rem;
  margin: 0;
  padding: 0;
  list-style: none;
  font-size: 0.85rem;
  color: rgba(255, 255, 255, 0.82);
}

.pdp-breadcrumb li + li::before {
  content: "/";
  margin-right: 0.5rem;
  color: rgba(255, 255, 255, 0.45);
}

.pdp-breadcrumb a {
  color: #fff;
  text-decoration: none;
  border-bottom: 1px solid rgba(255, 255, 255, 0.35);
  transition: border-color var(--brand-transition);
}

.pdp-breadcrumb a:hover {
  border-bottom-color: #fff;
}

.pdp-breadcrumb li[aria-current] {
  color: rgba(255, 255, 255, 0.9);
  font-weight: 500;
}

/* ==========================================================================
   Hero (gallery + buy box)
   ========================================================================== */
.pdp-hero {
  padding: 2.5rem 0 1rem;
}

.pdp-hero-grid {
  display: grid;
  gap: 2.5rem;
  grid-template-columns: 1fr;
  align-items: start;
}

/* Grid items default to `min-width: auto`, which sizes the column to the widest
   thing inside it - a long thumbnail strip then widened the whole track and the
   page scrolled sideways instead of the strip scrolling on its own. Pinning the
   minimum to 0 lets the inner scroll containers clip as intended. */
.pdp-hero-media,
.pdp-hero-info {
  min-width: 0;
}

@media (min-width: 992px) {
  .pdp-hero-grid {
    grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr);
    gap: 3.5rem;
  }

  .pdp-hero-media {
    position: sticky;
    top: 1.5rem;
  }
}

/* ==========================================================================
   Gallery
   ========================================================================== */
.pdp-stage {
  position: relative;
  aspect-ratio: 1 / 1;
  /* A full-width square ran the gallery to 909px in a 900px viewport, so the
     thumbnail strip fell off the bottom and short screens lost the buy box
     entirely. Tying the cap to the viewport keeps gallery and buy box on screen
     together; the image is `contain`, so nothing is cropped by the smaller
     frame - it just renders smaller with more of the gradient around it. */
  max-height: min(56vh, 540px);
  border-radius: 18px;
  overflow: hidden;
  background: linear-gradient(150deg, var(--pdp-accent-soft), var(--brand-surface) 62%);
  border: 1px solid var(--brand-border);
  box-shadow: var(--brand-shadow-soft);
}

/* Catalogue photos arrive in mixed aspect ratios — a wide bead shot in a square
   frame was being cropped past both edges by `cover`, so the whole product is
   fitted inside the frame instead and the gradient fills what is left over. */
.pdp-stage-img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  padding: 1.25rem;
  transition: transform 260ms ease;
  transform-origin: center center;
}

@media (hover: hover) and (min-width: 992px) {
  .pdp-stage:hover .pdp-stage-img {
    transform: scale(1.6);
  }
}

.pdp-stage-badges {
  position: absolute;
  inset: 0.9rem 0.9rem auto 0.9rem;
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem;
  z-index: 2;
  pointer-events: none;
}

.pdp-badge {
  display: inline-flex;
  align-items: center;
  gap: 0.3rem;
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 0.02em;
  padding: 0.32rem 0.65rem;
  border-radius: 999px;
  color: #fff;
  box-shadow: 0 4px 12px rgba(33, 29, 54, 0.16);
}

.pdp-badge svg {
  width: 13px;
  height: 13px;
}

.pdp-badge-save { background-color: var(--brand-success); }
.pdp-badge-certified { background-color: var(--brand-primary); }
.pdp-badge-energized { background-color: var(--brand-accent); }

.pdp-zoom-hint {
  position: absolute;
  right: 0.9rem;
  bottom: 0.9rem;
  z-index: 2;
  width: 2.4rem;
  height: 2.4rem;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 1px solid var(--brand-border);
  border-radius: 999px;
  background-color: rgba(255, 255, 255, 0.92);
  color: var(--pdp-accent);
  cursor: pointer;
  transition: background-color var(--brand-transition), color var(--brand-transition), transform var(--brand-transition);
}

.pdp-zoom-hint svg {
  width: 18px;
  height: 18px;
}

.pdp-zoom-hint:hover {
  background-color: var(--pdp-accent);
  color: #fff;
  transform: scale(1.06);
}

/* A product can carry a dozen photos; the strip scrolls inside the gallery
   rather than growing the page. `max-width` is the second line of defence in
   case an ancestor is ever content-sized, and the vertical padding keeps the
   active thumb's focus ring out of the clip. */
.pdp-thumbs {
  display: flex;
  gap: 0.6rem;
  margin-top: 0.9rem;
  max-width: 100%;
  overflow-x: auto;
  overflow-y: hidden;
  overscroll-behavior-x: contain;
  padding: 4px 0 0.45rem;
  scrollbar-width: thin;
  scrollbar-color: var(--pdp-accent) var(--brand-border);
}

/* WebKit/Blink keep the bar hidden until something scrolls it; drawing it
   permanently is the only cue on a phone that more photos are off to the side. */
.pdp-thumbs::-webkit-scrollbar {
  height: 6px;
}

.pdp-thumbs::-webkit-scrollbar-track {
  background-color: var(--brand-border);
  border-radius: 999px;
}

.pdp-thumbs::-webkit-scrollbar-thumb {
  background-color: var(--pdp-accent);
  border-radius: 999px;
}

.pdp-thumb {
  flex: 0 0 auto;
  width: 74px;
  height: 74px;
  padding: 0;
  border-radius: 12px;
  overflow: hidden;
  border: 2px solid var(--brand-border);
  background-color: var(--brand-surface);
  cursor: pointer;
  transition: border-color var(--brand-transition), transform var(--brand-transition);
}

.pdp-thumb img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  padding: 3px;
}

.pdp-thumb:hover {
  transform: translateY(-2px);
  border-color: var(--pdp-accent);
}

.pdp-thumb.is-active {
  border-color: var(--pdp-accent);
  box-shadow: 0 0 0 3px var(--pdp-accent-soft);
}

/* Lightbox */
.pdp-lightbox {
  position: fixed;
  inset: 0;
  z-index: 1080;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 2rem 1rem;
  background-color: rgba(20, 16, 32, 0.92);
}

.pdp-lightbox[hidden] {
  display: none;
}

.pdp-lightbox img {
  max-width: min(92vw, 900px);
  max-height: 86vh;
  object-fit: contain;
  border-radius: 12px;
}

.pdp-lightbox-close,
.pdp-lightbox-nav {
  position: absolute;
  border: 0;
  background-color: rgba(255, 255, 255, 0.12);
  color: #fff;
  border-radius: 999px;
  cursor: pointer;
  line-height: 1;
  transition: background-color var(--brand-transition);
}

.pdp-lightbox-close:hover,
.pdp-lightbox-nav:hover {
  background-color: rgba(255, 255, 255, 0.28);
}

.pdp-lightbox-close {
  top: 1.2rem;
  right: 1.2rem;
  width: 2.6rem;
  height: 2.6rem;
  font-size: 1.6rem;
}

.pdp-lightbox-nav {
  top: 50%;
  transform: translateY(-50%);
  width: 2.9rem;
  height: 2.9rem;
  font-size: 2rem;
}

.pdp-lightbox-prev { left: 1rem; }
.pdp-lightbox-next { right: 1rem; }

/* ==========================================================================
   Buy box
   ========================================================================== */
.pdp-eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
  font-size: 0.74rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--pdp-accent);
  margin-bottom: 0.65rem;
}

.pdp-eyebrow-mark {
  width: 26px;
  height: 2px;
  border-radius: 999px;
  background: linear-gradient(90deg, var(--pdp-accent), var(--pdp-accent-2));
}

.pdp-eyebrow-sep {
  color: var(--brand-border);
}

.pdp-title {
  font-family: var(--font-heading);
  font-size: clamp(1.65rem, 3.4vw, 2.3rem);
  line-height: 1.2;
  margin-bottom: 0.6rem;
}

.pdp-meta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.5rem 1rem;
  margin-bottom: 1rem;
}

.pdp-rating-link {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  text-decoration: none;
  color: var(--brand-fg);
  font-size: 0.86rem;
  font-weight: 600;
}

.pdp-rating-link .testimonial-stars svg {
  width: 15px;
  height: 15px;
  color: var(--brand-accent);
}

.pdp-rating-count {
  color: var(--brand-muted);
  font-weight: 400;
}

.pdp-sku {
  font-size: 0.78rem;
  color: var(--brand-muted);
  letter-spacing: 0.03em;
}

.pdp-price-row {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 0.6rem;
  margin-bottom: 0.25rem;
}

.pdp-price {
  font-size: clamp(1.75rem, 3.6vw, 2.15rem);
  font-weight: 700;
  color: var(--brand-fg);
  letter-spacing: -0.01em;
}

.pdp-price-was {
  font-size: 1rem;
  color: var(--brand-muted);
  text-decoration: line-through;
}

.pdp-price-save {
  font-size: 0.76rem;
  font-weight: 700;
  padding: 0.24rem 0.6rem;
  border-radius: 999px;
  color: var(--brand-success);
  background-color: rgba(47, 107, 58, 0.1);
}

.pdp-price-note {
  font-size: 0.78rem;
  color: var(--brand-muted);
  margin-bottom: 0.75rem;
}

.pdp-stock {
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
  font-size: 0.85rem;
  font-weight: 600;
  margin: 0.35rem 0 1rem;
}

.pdp-stock-dot {
  width: 8px;
  height: 8px;
  border-radius: 999px;
  background-color: currentColor;
  box-shadow: 0 0 0 4px currentColor;
  opacity: 0.95;
}

.pdp-stock.is-in { color: var(--brand-success); }
.pdp-stock.is-low { color: #B45309; }
.pdp-stock.is-out { color: #B3261E; }

.pdp-stock .pdp-stock-dot {
  box-shadow: 0 0 0 4px color-mix(in srgb, currentColor 18%, transparent);
}

.pdp-summary {
  color: var(--brand-muted);
  font-size: 0.95rem;
  line-height: 1.65;
  margin-bottom: 1.25rem;
}

/* Template-specific key facts — the row that changes most between a rudraksha
   (Mukhi / bead size) and a gemstone (carat / cut / treatment). */
.pdp-highlights {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(120px, 1fr));
  gap: 0.6rem;
  list-style: none;
  padding: 0;
  margin: 0 0 1.5rem;
}

.pdp-highlight {
  display: flex;
  flex-direction: column;
  gap: 0.15rem;
  padding: 0.65rem 0.8rem;
  border-radius: 12px;
  border: 1px solid var(--brand-border);
  background: linear-gradient(160deg, var(--pdp-accent-soft), transparent);
}

.pdp-highlight-label {
  font-size: 0.68rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--brand-muted);
}

.pdp-highlight-value {
  font-size: 0.92rem;
  font-weight: 600;
  color: var(--brand-fg);
}

/* Actions */
.pdp-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: stretch;
  gap: 0.6rem;
  margin-bottom: 1.5rem;
}

.pdp-qty {
  display: inline-flex;
  align-items: center;
  border: 1px solid var(--brand-border);
  border-radius: var(--brand-radius-pill);
  background-color: var(--brand-surface);
  overflow: hidden;
  flex: 0 0 auto;
}

.pdp-qty-btn {
  width: 2.4rem;
  height: 2.9rem;
  border: 0;
  background: transparent;
  color: var(--brand-fg);
  font-size: 1.1rem;
  line-height: 1;
  cursor: pointer;
  transition: background-color var(--brand-transition), color var(--brand-transition);
}

.pdp-qty-btn:hover:not(:disabled) {
  background-color: var(--pdp-accent-soft);
  color: var(--pdp-accent);
}

.pdp-qty-btn:disabled {
  opacity: 0.35;
  cursor: not-allowed;
}

.pdp-qty-input {
  width: 2.6rem;
  height: 2.9rem;
  border: 0;
  text-align: center;
  font-weight: 600;
  color: var(--brand-fg);
  background: transparent;
  -moz-appearance: textfield;
}

.pdp-qty-input::-webkit-outer-spin-button,
.pdp-qty-input::-webkit-inner-spin-button {
  -webkit-appearance: none;
  margin: 0;
}

.pdp-qty-input:focus {
  outline: 0;
}

.pdp-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.45rem;
  min-height: 2.9rem;
  padding: 0.55rem 1.4rem;
  border-radius: var(--brand-radius-pill);
  font-weight: 600;
  font-size: 0.92rem;
  transition: transform var(--brand-transition), box-shadow var(--brand-transition),
              background-color var(--brand-transition), color var(--brand-transition);
}

.pdp-btn svg {
  width: 17px;
  height: 17px;
}

.pdp-btn-primary {
  flex: 1 1 10rem;
  border: 0;
  color: #fff;
  background: linear-gradient(120deg, var(--pdp-accent), var(--pdp-accent-2));
  box-shadow: 0 10px 22px color-mix(in srgb, var(--pdp-accent) 28%, transparent);
}

.pdp-btn-primary:hover:not(:disabled),
.pdp-btn-primary:focus:not(:disabled) {
  color: #fff;
  transform: translateY(-2px);
  box-shadow: 0 14px 28px color-mix(in srgb, var(--pdp-accent) 38%, transparent);
}

.pdp-btn-primary:disabled {
  background: var(--brand-border);
  color: var(--brand-muted);
  box-shadow: none;
}

.pdp-btn-outline {
  flex: 1 1 10rem;
  border: 1.5px solid var(--pdp-accent);
  color: var(--pdp-accent);
  background-color: transparent;
}

.pdp-btn-outline:hover,
.pdp-btn-outline:focus {
  background-color: var(--pdp-accent);
  color: #fff;
  transform: translateY(-2px);
}

.pdp-wish {
  flex: 0 0 auto;
  width: 2.9rem;
  height: 2.9rem;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 1px solid var(--brand-border);
  border-radius: 999px;
  background-color: var(--brand-surface);
  color: var(--brand-muted);
  cursor: pointer;
  transition: color var(--brand-transition), border-color var(--brand-transition), transform var(--brand-transition);
}

.pdp-wish svg {
  width: 19px;
  height: 19px;
}

.pdp-wish:hover {
  color: var(--pdp-accent);
  border-color: var(--pdp-accent);
  transform: scale(1.06);
}

.pdp-wish.is-active {
  color: #e0245e;
  border-color: #e0245e;
}

.pdp-wish.is-active svg {
  fill: currentColor;
}

/* Trust strip */
.pdp-trust {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(155px, 1fr));
  gap: 0.5rem;
  list-style: none;
  padding: 1.1rem 0 0;
  margin: 0;
  border-top: 1px solid var(--brand-border);
}

.pdp-trust-item {
  display: flex;
  align-items: center;
  gap: 0.55rem;
  font-size: 0.78rem;
  color: var(--brand-muted);
}

.pdp-trust-item svg {
  flex: 0 0 auto;
  width: 22px;
  height: 22px;
  padding: 0.22rem;
  border-radius: 8px;
  color: var(--pdp-accent);
  background-color: var(--pdp-accent-soft);
}

.pdp-trust-item strong {
  display: block;
  font-size: 0.82rem;
  color: var(--brand-fg);
  font-weight: 600;
}

.pdp-cert-link {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  margin-top: 1rem;
  font-size: 0.82rem;
  font-weight: 600;
  color: var(--pdp-accent);
  text-decoration: none;
}

.pdp-cert-link svg {
  width: 15px;
  height: 15px;
  transition: transform var(--brand-transition);
}

.pdp-cert-link:hover svg {
  transform: translateX(3px);
}

/* ==========================================================================
   Sections
   ========================================================================== */
.pdp-section {
  padding: var(--pdp-gap) 0;
}

.pdp-section-content {
  padding-top: 1.5rem;
}

.pdp-related,
.pdp-reviews {
  background-color: var(--brand-surface);
  border-top: 1px solid var(--brand-border);
}

.pdp-section-head {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  justify-content: space-between;
  gap: 1rem;
  margin-bottom: 1.75rem;
}

.pdp-section-eyebrow {
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--pdp-accent);
  margin-bottom: 0.3rem;
}

.pdp-section-title {
  font-family: var(--font-heading);
  font-size: clamp(1.4rem, 2.6vw, 1.9rem);
  margin-bottom: 0;
}

.pdp-section-link {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  font-size: 0.86rem;
  font-weight: 600;
  color: var(--pdp-accent);
  text-decoration: none;
}

.pdp-section-link svg {
  width: 16px;
  height: 16px;
  transition: transform var(--brand-transition);
}

.pdp-section-link:hover svg {
  transform: translateX(3px);
}

/* ==========================================================================
   Content tabs
   ========================================================================== */
.pdp-tabs {
  border: 1px solid var(--brand-border);
  border-radius: 18px;
  background-color: var(--brand-surface);
  box-shadow: var(--brand-shadow-soft);
  overflow: hidden;
}

.pdp-tablist {
  display: flex;
  gap: 0.25rem;
  padding: 0.5rem 0.5rem 0;
  overflow-x: auto;
  scrollbar-width: none;
  border-bottom: 1px solid var(--brand-border);
  background: linear-gradient(180deg, var(--pdp-accent-soft), transparent);
}

.pdp-tablist::-webkit-scrollbar {
  display: none;
}

.pdp-tab {
  flex: 0 0 auto;
  position: relative;
  border: 0;
  background: transparent;
  padding: 0.8rem 1.1rem;
  font-size: 0.88rem;
  font-weight: 600;
  color: var(--brand-muted);
  white-space: nowrap;
  cursor: pointer;
  transition: color var(--brand-transition);
}

.pdp-tab::after {
  content: "";
  position: absolute;
  left: 1.1rem;
  right: 1.1rem;
  bottom: -1px;
  height: 3px;
  border-radius: 999px 999px 0 0;
  background: linear-gradient(90deg, var(--pdp-accent), var(--pdp-accent-2));
  transform: scaleX(0);
  transition: transform var(--brand-transition);
}

.pdp-tab:hover {
  color: var(--brand-fg);
}

.pdp-tab.is-active {
  color: var(--pdp-accent);
}

.pdp-tab.is-active::after {
  transform: scaleX(1);
}

.pdp-panels {
  padding: 1.75rem;
}

.pdp-panel {
  display: none;
  animation: pdp-fade-in 260ms ease;
}

.pdp-panel.is-active {
  display: block;
}

@keyframes pdp-fade-in {
  from { opacity: 0; transform: translateY(6px); }
  to { opacity: 1; transform: none; }
}

/* Tag chips sit under the tab card, outside its border: they lead away from this
   product rather than describing it, so they should not read as another panel. */
.pdp-tags {
  margin-top: 1.25rem;
  padding: 0 0.25rem;
}

/* The summary is the whole collapsed state, so it carries the hit area and the
   only affordance - the default disclosure triangle is replaced by the chevron. */
.pdp-tags-summary {
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
  padding: 0.25rem 0;
  cursor: pointer;
  list-style: none;
  color: var(--brand-muted);
  transition: color var(--brand-transition);
}

.pdp-tags-summary::-webkit-details-marker {
  display: none;
}

.pdp-tags-summary:hover,
.pdp-tags-summary:focus-visible {
  color: var(--pdp-accent);
}

.pdp-tags-label {
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: inherit;
}

.pdp-tags-count {
  font-size: 0.7rem;
  font-weight: 700;
  line-height: 1;
  padding: 0.18rem 0.42rem;
  border-radius: 999px;
  border: 1px solid var(--brand-border);
  background-color: var(--brand-surface);
  color: inherit;
}

.pdp-tags-chevron {
  width: 0.95rem;
  height: 0.95rem;
  transition: transform var(--brand-transition);
}

.pdp-tags[open] .pdp-tags-chevron {
  transform: rotate(180deg);
}

.pdp-tag-list {
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem;
  margin: 0.6rem 0 0;
  padding: 0;
  list-style: none;
  animation: pdp-fade-in 260ms ease;
}

.pdp-tag {
  display: inline-block;
  font-size: 0.78rem;
  font-weight: 600;
  color: var(--brand-muted);
  text-decoration: none;
  padding: 0.28rem 0.68rem;
  border: 1px solid var(--brand-border);
  border-radius: 999px;
  background-color: var(--brand-surface);
  transition: color var(--brand-transition), border-color var(--brand-transition),
              background-color var(--brand-transition);
}

.pdp-tag:hover,
.pdp-tag:focus-visible {
  color: var(--pdp-accent);
  border-color: var(--pdp-accent);
  background: var(--pdp-accent-soft);
}

/* On narrow screens the tab strip turns into stacked sections — every panel is
   shown and the tab row is hidden, which reads better than horizontal scrolling. */
.pdp-panel-title {
  font-family: var(--font-heading);
  font-size: 1.1rem;
  margin-bottom: 0.9rem;
  display: none;
}

.pdp-panel-body {
  color: var(--brand-fg);
  font-size: 0.95rem;
  line-height: 1.75;
}

.pdp-panel-body .content-point-list li::marker {
  color: var(--pdp-accent);
}

/* CMS copy arrives as its own markup, so the panel styles the elements it may contain
   instead of assuming a single paragraph. */
.pdp-panel-body p {
  margin-bottom: 0.85rem;
}

.pdp-panel-body ul,
.pdp-panel-body ol {
  padding-left: 1.25rem;
  margin-bottom: 0.85rem;
}

.pdp-panel-body li + li {
  margin-top: 0.35rem;
}

.pdp-panel-body h2,
.pdp-panel-body h3,
.pdp-panel-body h4,
.pdp-panel-body h5,
.pdp-panel-body h6 {
  font-size: 1.05rem;
  font-weight: 600;
  margin: 1.25rem 0 0.5rem;
}

.pdp-panel-body a {
  color: var(--pdp-accent);
}

/* Editors paste images and tables sized for a desktop viewport; neither is allowed
   to push the page wider than the phone it is being read on. */
.pdp-panel-body img {
  max-width: 100%;
  height: auto;
}

.pdp-panel-body table {
  display: block;
  width: 100%;
  overflow-x: auto;
}

.pdp-panel-body > :last-child {
  margin-bottom: 0;
}

@media (max-width: 575.98px) {
  .pdp-tablist {
    display: none;
  }

  .pdp-panel {
    display: block;
    padding-bottom: 1.25rem;
    margin-bottom: 1.25rem;
    border-bottom: 1px solid var(--brand-border);
  }

  .pdp-panel:last-child {
    padding-bottom: 0;
    margin-bottom: 0;
    border-bottom: 0;
  }

  .pdp-panel-title {
    display: block;
  }

  .pdp-panels {
    padding: 1.25rem;
  }
}

/* ==========================================================================
   Specifications
   ========================================================================== */
.pdp-spec-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: 1rem;
}

.pdp-spec-card {
  border: 1px solid var(--brand-border);
  border-radius: 14px;
  padding: 1.1rem 1.25rem;
  background: linear-gradient(170deg, var(--pdp-accent-soft), transparent 55%);
}

.pdp-spec-title {
  font-family: var(--font-heading);
  font-size: 0.98rem;
  margin-bottom: 0.75rem;
  color: var(--pdp-accent);
}

.pdp-spec-list {
  margin: 0;
}

.pdp-spec-row {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 1rem;
  padding: 0.45rem 0;
  border-bottom: 1px dashed var(--brand-border);
}

.pdp-spec-row:last-child {
  border-bottom: 0;
  padding-bottom: 0;
}

.pdp-spec-row dt {
  font-size: 0.82rem;
  font-weight: 500;
  color: var(--brand-muted);
}

.pdp-spec-row dd {
  margin: 0;
  font-size: 0.86rem;
  font-weight: 600;
  color: var(--brand-fg);
  text-align: right;
}

/* Certificate number doubles as the link to the verification page. */
.pdp-spec-verify {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  color: var(--pdp-accent);
  text-decoration: none;
}

.pdp-spec-verify-value {
  text-decoration: underline;
  text-decoration-style: dotted;
  text-underline-offset: 3px;
}

.pdp-spec-verify-cta {
  display: inline-flex;
  align-items: center;
  gap: 0.2rem;
  padding: 0.1rem 0.4rem;
  border: 1px solid var(--pdp-accent);
  border-radius: 999px;
  font-size: 0.68rem;
  font-weight: 600;
  letter-spacing: 0.02em;
  white-space: nowrap;
}

.pdp-spec-verify-cta svg {
  width: 12px;
  height: 12px;
  transition: transform var(--brand-transition);
}

.pdp-spec-verify:hover .pdp-spec-verify-cta {
  background: var(--pdp-accent);
  color: #fff;
}

.pdp-spec-verify:hover .pdp-spec-verify-cta svg {
  transform: translateX(2px);
}

/* ==========================================================================
   Related products rail
   ========================================================================== */
.pdp-related-rail {
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: minmax(215px, 1fr);
  gap: 1rem;
  overflow-x: auto;
  padding-bottom: 0.75rem;
  scroll-snap-type: x mandatory;
  scrollbar-width: thin;
}

.pdp-related-item {
  scroll-snap-align: start;
}

/* Inherits .product-card from front.css; only the rounding and the accent it
   picks up on hover are page-specific. */
.pdp-related-item .product-card {
  border-radius: 14px;
}

.pdp-related-item .product-card:hover {
  border-color: var(--pdp-accent);
}

/* ==========================================================================
   Reviews
   ========================================================================== */
.pdp-review-score-card {
  border: 1px solid var(--brand-border);
  border-radius: 18px;
  padding: 1.5rem;
  background: linear-gradient(175deg, var(--pdp-accent-soft), transparent 45%);
}

/* Only worth pinning once the reviews sit beside it — stacked on a phone it is
   simply the first block of a single column. */
@media (min-width: 992px) {
  .pdp-review-score-card {
    position: sticky;
    top: 1.5rem;
  }
}

.pdp-score-head {
  display: flex;
  align-items: center;
  gap: 0.9rem;
  margin-bottom: 1.1rem;
}

.pdp-score-value {
  font-family: var(--font-heading);
  font-size: 2.6rem;
  line-height: 1;
  font-weight: 700;
  color: var(--pdp-accent);
}

.pdp-score-head .testimonial-stars svg {
  width: 15px;
  height: 15px;
  color: var(--brand-accent);
}

.pdp-score-count {
  font-size: 0.78rem;
  color: var(--brand-muted);
  margin-top: 0.25rem;
}

.pdp-score-bars {
  list-style: none;
  padding: 0;
  margin: 0 0 1.5rem;
  display: grid;
  gap: 0.4rem;
}

.pdp-score-bars li {
  display: grid;
  grid-template-columns: 2.4rem 1fr 1.75rem;
  align-items: center;
  gap: 0.5rem;
  font-size: 0.74rem;
  color: var(--brand-muted);
}

.pdp-score-bar-label {
  color: var(--brand-accent);
  font-weight: 600;
}

.pdp-score-bar-track {
  height: 7px;
  border-radius: 999px;
  background-color: var(--brand-border);
  overflow: hidden;
}

.pdp-score-bar-fill {
  display: block;
  height: 100%;
  border-radius: 999px;
  background: linear-gradient(90deg, var(--pdp-accent), var(--pdp-accent-2));
}

.pdp-score-bar-count {
  text-align: right;
}

.pdp-score-empty {
  display: flex;
  align-items: center;
  gap: 0.7rem;
  font-size: 0.84rem;
  color: var(--brand-muted);
  margin-bottom: 1.5rem;
}

.pdp-score-empty svg {
  flex: 0 0 auto;
  width: 30px;
  height: 30px;
  color: var(--brand-accent);
}

.pdp-review-form {
  border-top: 1px solid var(--brand-border);
  padding-top: 1.25rem;
}

.pdp-review-form-title {
  font-family: var(--font-heading);
  font-size: 1.05rem;
  margin-bottom: 0.25rem;
}

.pdp-review-form-note {
  font-size: 0.78rem;
  color: var(--brand-muted);
  margin-bottom: 1rem;
}

.pdp-review-card {
  height: 100%;
  border: 1px solid var(--brand-border);
  border-radius: 14px;
  padding: 1.2rem;
  background-color: var(--brand-surface);
  transition: transform var(--brand-transition), box-shadow var(--brand-transition), border-color var(--brand-transition);
}

.pdp-review-card:hover {
  transform: translateY(-3px);
  border-color: var(--pdp-accent);
  box-shadow: var(--brand-shadow-soft);
}

.pdp-review-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.5rem;
  margin-bottom: 0.75rem;
}

.pdp-review-top .testimonial-stars svg {
  width: 14px;
  height: 14px;
  color: var(--brand-accent);
}

.pdp-review-top time {
  font-size: 0.74rem;
  color: var(--brand-muted);
}

.pdp-review-text {
  font-size: 0.9rem;
  line-height: 1.7;
  color: var(--brand-fg);
  margin-bottom: 1rem;
}

.pdp-review-text::before { content: "\201C"; }
.pdp-review-text::after { content: "\201D"; }

.pdp-review-author {
  display: flex;
  align-items: center;
  gap: 0.6rem;
}

.pdp-review-avatar {
  width: 2.1rem;
  height: 2.1rem;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 999px;
  font-weight: 700;
  font-size: 0.82rem;
  color: #fff;
  background: linear-gradient(135deg, var(--pdp-accent), var(--pdp-accent-2));
}

.pdp-review-name {
  display: block;
  font-size: 0.84rem;
  font-weight: 600;
}

.pdp-review-verified {
  display: inline-block;
  margin-top: 0.15rem;
  font-size: 0.66rem;
  font-weight: 700;
  letter-spacing: 0.03em;
  padding: 0.12rem 0.45rem;
  border-radius: 999px;
  color: var(--brand-success);
  background-color: rgba(47, 107, 58, 0.12);
}

.pdp-reviews-empty {
  border: 1px dashed var(--brand-border);
  border-radius: 14px;
  padding: 2rem;
  text-align: center;
  color: var(--brand-muted);
  font-size: 0.9rem;
}

.pdp-reviews-more {
  font-size: 0.82rem;
  color: var(--brand-muted);
  margin: 1rem 0 0;
}

/* ==========================================================================
   Mobile sticky buy bar
   ========================================================================== */
.pdp-sticky-bar {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 1040;
  display: flex;
  align-items: center;
  gap: 0.75rem;
  padding: 0.65rem 0.9rem calc(0.65rem + env(safe-area-inset-bottom));
  background-color: var(--brand-surface);
  border-top: 1px solid var(--brand-border);
  border-radius: 1.1rem 1.1rem 0 0;
  box-shadow: 0 -10px 28px rgba(33, 29, 54, 0.16);
  transform: translateY(100%);
  transition: transform 240ms ease;
}

/* Translucent only where the blur is actually supported — a plain rgba surface
   without it would let the page text bleed through behind the price. */
@supports ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  .pdp-sticky-bar {
    background-color: rgba(255, 255, 255, 0.88);
    -webkit-backdrop-filter: blur(14px) saturate(1.4);
    backdrop-filter: blur(14px) saturate(1.4);
  }
}

.pdp-sticky-bar[hidden] {
  display: none;
}

.pdp-sticky-bar.is-visible {
  transform: none;
}

.pdp-sticky-info {
  flex: 1 1 auto;
  min-width: 0;
}

.pdp-sticky-name {
  display: block;
  font-size: 0.74rem;
  line-height: 1.25;
  color: var(--brand-muted);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  margin-bottom: 0.12rem;
}

/* Price, struck MRP and the discount pill sit on one baseline; the row may wrap
   on very narrow phones rather than squeezing the pill off-screen. */
.pdp-sticky-price-row {
  display: flex;
  align-items: baseline;
  flex-wrap: wrap;
  gap: 0.3rem 0.4rem;
}

.pdp-sticky-price {
  font-size: 1.2rem;
  font-weight: 800;
  line-height: 1.15;
  letter-spacing: -0.015em;
  color: var(--brand-fg);
  font-variant-numeric: tabular-nums;
}

.pdp-sticky-cur {
  font-size: 0.72em;
  font-weight: 600;
  color: var(--brand-muted);
  margin-right: 0.18rem;
}

.pdp-sticky-was {
  font-size: 0.78rem;
  font-weight: 500;
  color: var(--brand-muted);
  text-decoration: line-through;
  text-decoration-thickness: 1px;
  font-variant-numeric: tabular-nums;
}

.pdp-sticky-off {
  align-self: center;
  font-size: 0.68rem;
  font-weight: 700;
  letter-spacing: 0.02em;
  text-transform: uppercase;
  padding: 0.16rem 0.45rem;
  border-radius: 999px;
  color: var(--brand-success);
  background-color: rgba(47, 107, 58, 0.12);
}

.pdp-sticky-cta {
  flex: 0 0 auto;
  min-width: 8.5rem;
  border-radius: 999px;
  font-weight: 700;
  /* Tracks the category accent like the rest of the primary buttons - a fixed purple
     would read as a stray next to the brown rudraksha or slate mala themes. */
  box-shadow: 0 6px 16px color-mix(in srgb, var(--pdp-accent) 28%, transparent);
}

@media (min-width: 768px) {
  .pdp-sticky-bar {
    display: none;
  }
}

/* ==========================================================================
   Responsive
   The layout is single-column below 992px; these rules tighten the spacing and
   the touch targets so the buy box is reachable without a long scroll.
   ========================================================================== */
@media (max-width: 991.98px) {
  .pdp {
    --pdp-gap: 2.5rem;
  }

  .pdp-hero {
    padding: 1.75rem 0 0.5rem;
  }

  .pdp-hero-grid {
    gap: 1.75rem;
  }
}

@media (max-width: 767.98px) {
  .pdp {
    --pdp-gap: 2rem;
  }

  .pdp-breadcrumb {
    padding: 0.7rem 0;
  }

  .pdp-breadcrumb ol {
    font-size: 0.78rem;
    gap: 0.35rem;
  }

  /* A full square stage swallows most of a phone screen before the price comes
     into view, so the frame is capped and the image fits itself to what is left. */
  .pdp-stage {
    border-radius: 14px;
    max-height: 58vh;
  }

  .pdp-stage-img {
    padding: 0.9rem;
  }

  .pdp-stage-badges {
    inset: 0.6rem 0.6rem auto 0.6rem;
  }

  .pdp-zoom-hint {
    right: 0.6rem;
    bottom: 0.6rem;
  }

  .pdp-thumbs {
    gap: 0.45rem;
    margin-top: 0.65rem;
    scroll-snap-type: x proximity;
    -webkit-overflow-scrolling: touch;
  }

  .pdp-thumb {
    width: 60px;
    height: 60px;
    scroll-snap-align: start;
  }

  .pdp-trust {
    grid-template-columns: repeat(auto-fit, minmax(138px, 1fr));
  }

  .pdp-related-rail {
    grid-auto-columns: minmax(168px, 1fr);
  }

  .pdp-lightbox {
    padding: 1rem 0.5rem;
  }

  .pdp-lightbox img {
    max-width: 94vw;
    max-height: 72vh;
  }

  .pdp-lightbox-close {
    top: 0.75rem;
    right: 0.75rem;
    width: 2.2rem;
    height: 2.2rem;
    font-size: 1.35rem;
  }

  .pdp-lightbox-nav {
    width: 2.4rem;
    height: 2.4rem;
    font-size: 1.6rem;
  }

  .pdp-lightbox-prev { left: 0.4rem; }
  .pdp-lightbox-next { right: 0.4rem; }

  /* The fixed buy bar floats over the end of the page; the footer grows by its
     height so nothing is left trapped underneath it. The class is set from JS
     only when the bar is actually rendered. `pb-4` on the footer is a Bootstrap
     utility, hence the override. */
  body.pdp-has-sticky-bar .brand-footer {
    padding-bottom: 5.5rem !important;
  }
}

@media (max-width: 575.98px) {
  .pdp-title {
    margin-bottom: 0.5rem;
  }

  .pdp-meta {
    gap: 0.35rem 0.75rem;
    margin-bottom: 0.75rem;
  }

  .pdp-highlights {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0.5rem;
    margin-bottom: 1.15rem;
  }

  /* Quantity, Add to Cart and the wishlist share the first row; Buy Now takes the
     full width beneath them rather than wrapping into an odd half-width stub. */
  .pdp-actions {
    gap: 0.5rem;
  }

  .pdp-actions .pdp-qty { order: 1; }

  .pdp-actions .pdp-btn-outline {
    order: 2;
    flex: 1 1 auto;
    min-width: 0;
  }

  .pdp-actions .pdp-wish { order: 3; }

  /* :not(.w-100) leaves the out-of-stock button — its own full-width row already. */
  .pdp-actions .pdp-btn-primary:not(.w-100) {
    order: 4;
    flex: 1 1 100%;
  }

  .pdp-btn {
    padding: 0.55rem 0.9rem;
  }

  .pdp-qty-btn { width: 2.1rem; }
  .pdp-qty-input { width: 2.2rem; }

  .pdp-section-head {
    margin-bottom: 1.25rem;
  }

  .pdp-spec-grid {
    grid-template-columns: minmax(0, 1fr);
  }

  .pdp-spec-row {
    gap: 0.75rem;
  }

  .pdp-spec-row dd {
    min-width: 0;
    overflow-wrap: anywhere;
  }

  .pdp-review-score-card {
    padding: 1.15rem;
  }

  .pdp-score-value {
    font-size: 2.1rem;
  }

  /* Give the price row back the width the CTA was holding, so the struck MRP and
     the discount pill stay on the same line as the price on a 360px phone. */
  .pdp-sticky-bar {
    padding-left: 0.75rem;
    padding-right: 0.75rem;
    gap: 0.6rem;
  }

  .pdp-sticky-cta {
    min-width: 7.25rem;
    padding-left: 0.75rem;
    padding-right: 0.75rem;
  }
}

@media (prefers-reduced-motion: reduce) {
  .pdp-stage-img,
  .pdp-btn,
  .pdp-thumb,
  .pdp-review-card,
  .pdp-sticky-bar,
  .pdp-panel {
    transition: none;
    animation: none;
  }

  .pdp-stage:hover .pdp-stage-img {
    transform: none;
  }
}