/* ==========================================================================
   Capitan PSN Plan PDP — minimal, conversion-focused, responsive
   Scoped to body[data-page="psn-pdp"]
   ========================================================================== */

body[data-page="psn-pdp"] {
  --ppdp-ink: #0B1220;
  --ppdp-muted: #5C6570;
  --ppdp-line: rgba(15, 23, 42, 0.08);
  --ppdp-surface: #ffffff;
  --ppdp-bg: #F6F7F9;
  --ppdp-accent: #E11D48;
  --ppdp-tone: #1ED6B5;
  --ppdp-tone-soft: rgba(30, 214, 181, 0.12);
  --ppdp-tone-deep: #0B8F78;
  --ppdp-radius: 22px;
  --ppdp-radius-sm: 14px;
  --ppdp-shadow: 0 1px 0 rgba(15, 23, 42, 0.04), 0 20px 48px rgba(15, 23, 42, 0.07);
  --ppdp-ease: cubic-bezier(0.22, 1, 0.36, 1);
  background: var(--ppdp-bg);
  color: var(--ppdp-ink);
}

body[data-page="psn-pdp"] .app-main {
  background: transparent;
  padding-bottom: calc(88px + var(--safe-bottom, 0px));
}

body[data-page="psn-pdp"] .pdp-sticky-bar {
  display: none !important;
}

.ppdp--royal {
  --ppdp-tone: #4F5CFF;
  --ppdp-tone-soft: rgba(79, 92, 255, 0.12);
  --ppdp-tone-deep: #3A45D4;
}

.ppdp--gold {
  --ppdp-tone: #D4A017;
  --ppdp-tone-soft: rgba(212, 160, 23, 0.14);
  --ppdp-tone-deep: #A67C0A;
}

.ppdp--emerald {
  --ppdp-tone: #12B89A;
  --ppdp-tone-soft: rgba(18, 184, 154, 0.14);
  --ppdp-tone-deep: #0A8A74;
}

.ppdp {
  max-width: 1080px;
  margin-inline: auto;
  padding-block: 8px 40px;
}

.ppdp .breadcrumb {
  margin-bottom: 18px;
}

/* ---- Hero ---- */
.ppdp-hero {
  display: grid;
  grid-template-columns: minmax(0, 0.95fr) minmax(0, 1.05fr);
  gap: clamp(20px, 4vw, 40px);
  align-items: start;
  padding: clamp(16px, 3vw, 28px);
  background: var(--ppdp-surface);
  border: 1px solid var(--ppdp-line);
  border-radius: calc(var(--ppdp-radius) + 4px);
  box-shadow: var(--ppdp-shadow);
}

.ppdp-hero__media {
  position: relative;
}

.ppdp-hero__glow {
  position: absolute;
  inset: 12% 8% auto;
  height: 55%;
  border-radius: 50%;
  background: radial-gradient(circle, var(--ppdp-tone-soft), transparent 70%);
  filter: blur(8px);
  pointer-events: none;
}

.ppdp-hero__frame {
  position: relative;
  aspect-ratio: 1;
  border-radius: var(--ppdp-radius);
  overflow: hidden;
  background:
    linear-gradient(160deg, var(--ppdp-tone-soft), transparent 55%),
    #EEF1F5;
  display: flex;
  align-items: center;
  justify-content: center;
}

.ppdp-hero__img,
.ppdp-hero__frame picture,
.ppdp-hero__frame img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.ppdp-hero__fallback {
  width: 100%;
  height: 100%;
  display: grid;
  place-items: center;
  background: linear-gradient(145deg, var(--ppdp-tone-deep), var(--ppdp-tone));
}

.ppdp-hero__mark {
  width: 88px;
  height: 88px;
  border-radius: 28px;
  background: rgba(255, 255, 255, 0.18);
  border: 1px solid rgba(255, 255, 255, 0.28);
  display: grid;
  place-items: center;
  font-family: var(--font-display);
  font-size: 2rem;
  color: #fff;
}

.ppdp--royal .ppdp-hero__mark::before { content: "ر"; }
.ppdp--gold .ppdp-hero__mark::before { content: "ط"; }
.ppdp--emerald .ppdp-hero__mark::before { content: "ز"; }
.ppdp--default .ppdp-hero__mark::before { content: "P"; }

.ppdp-hero__chips {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 8px;
  margin: 14px 0 0;
  padding: 0;
  list-style: none;
}

.ppdp-hero__chips li {
  display: flex;
  flex-direction: column;
  gap: 2px;
  padding: 10px 12px;
  border-radius: 12px;
  background: var(--ppdp-bg);
  border: 1px solid var(--ppdp-line);
  text-align: center;
}

.ppdp-hero__chips strong {
  font-size: 15px;
  font-weight: 800;
  color: var(--ppdp-ink);
  font-variant-numeric: tabular-nums;
}

.ppdp-hero__chips span {
  font-size: 11px;
  color: var(--ppdp-muted);
}

.ppdp-hero__chips-wide {
  grid-column: 1 / -1;
}

.ppdp-hero__topline {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 12px;
}

.ppdp-badge {
  display: inline-flex;
  align-items: center;
  min-height: 28px;
  padding: 0 10px;
  border-radius: 999px;
  font-size: 12px;
  font-weight: 700;
  color: var(--ppdp-tone-deep);
  background: var(--ppdp-tone-soft);
}

.ppdp-back {
  font-size: 13px;
  font-weight: 700;
  color: var(--ppdp-muted);
  text-decoration: none;
}

.ppdp-back:hover {
  color: var(--ppdp-accent);
}

.ppdp-title {
  margin: 0 0 10px;
  font-family: var(--font-display);
  font-size: clamp(1.45rem, 2.6vw, 2rem);
  font-weight: 400;
  line-height: 1.35;
  letter-spacing: -0.01em;
  color: var(--ppdp-ink);
}

.ppdp-lead {
  margin: 0 0 20px;
  font-size: 15px;
  line-height: 1.85;
  color: var(--ppdp-muted);
}

.ppdp-price {
  padding: 16px 18px;
  border-radius: var(--ppdp-radius-sm);
  background: linear-gradient(180deg, #FAFBFC, #F3F5F8);
  border: 1px solid var(--ppdp-line);
  margin-bottom: 16px;
}

.ppdp-price__usd {
  display: flex;
  align-items: baseline;
  gap: 6px;
  flex-wrap: wrap;
}

.ppdp-price__sign {
  font-size: 1.25rem;
  font-weight: 800;
  color: var(--ppdp-tone-deep);
}

.ppdp-price__num {
  font-size: clamp(2rem, 4vw, 2.6rem);
  font-weight: 800;
  line-height: 1;
  font-variant-numeric: tabular-nums;
  color: var(--ppdp-ink);
}

.ppdp-price__unit {
  font-size: 13px;
  font-weight: 700;
  color: var(--ppdp-muted);
}

.ppdp-price__toman {
  margin: 8px 0 0;
  font-size: 14px;
  color: var(--ppdp-muted);
}

.ppdp-price__toman strong {
  color: var(--ppdp-ink);
  font-weight: 800;
  font-variant-numeric: tabular-nums;
}

.ppdp-trust {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px 14px;
  margin: 0 0 20px;
  padding: 0;
  list-style: none;
}

.ppdp-trust li {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  font-size: 13px;
  line-height: 1.45;
  color: var(--ppdp-muted);
}

.ppdp-trust svg,
.ppdp-trust [data-lucide] {
  width: 16px;
  height: 16px;
  flex-shrink: 0;
  margin-top: 2px;
  color: var(--ppdp-tone-deep);
}

.ppdp-cta {
  display: grid;
  grid-template-columns: 1.3fr 1fr;
  gap: 10px;
}

.ppdp-cta__primary,
.ppdp-cta__secondary {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  min-height: 50px;
  padding: 0 16px;
  border-radius: 14px;
  font-size: 15px;
  font-weight: 800;
  text-decoration: none;
  transition: transform 160ms var(--ppdp-ease), box-shadow 160ms ease, background 160ms ease;
  cursor: pointer;
}

.ppdp-cta__primary {
  color: #fff;
  background: linear-gradient(135deg, #16A34A 0%, #15803D 100%);
  border: 0;
  box-shadow: 0 10px 28px rgba(22, 163, 74, 0.28);
  font: inherit;
}

.ppdp-cta__primary:hover {
  transform: translateY(-1px);
  box-shadow: 0 14px 32px rgba(22, 163, 74, 0.34);
  color: #fff;
  filter: brightness(1.03);
}

.ppdp-cta__secondary {
  color: var(--ppdp-ink);
  background: #fff;
  border: 1px solid var(--ppdp-line);
}

.ppdp-cta__secondary:hover {
  border-color: rgba(15, 23, 42, 0.16);
  background: #F8F9FB;
  color: var(--ppdp-ink);
}

.ppdp-cta__primary svg,
.ppdp-cta__secondary svg,
.ppdp-cta__primary [data-lucide],
.ppdp-cta__secondary [data-lucide] {
  width: 18px;
  height: 18px;
}

.ppdp-cta__hint {
  margin: 10px 0 0;
  font-size: 12.5px;
  color: var(--ppdp-muted);
  line-height: 1.5;
}

/* ---- Sections ---- */
.ppdp-section-head {
  margin-bottom: 16px;
}

.ppdp-section-head h2 {
  margin: 0 0 6px;
  font-family: var(--font-display);
  font-size: clamp(1.2rem, 2vw, 1.45rem);
  font-weight: 400;
  color: var(--ppdp-ink);
}

.ppdp-section-head p {
  margin: 0;
  font-size: 14px;
  color: var(--ppdp-muted);
  line-height: 1.7;
}

.ppdp-section-head--row {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 16px;
}

.ppdp-link {
  flex-shrink: 0;
  font-size: 13px;
  font-weight: 700;
  color: var(--ppdp-accent);
  text-decoration: none;
}

.ppdp-link:hover {
  text-decoration: underline;
}

.ppdp-specs,
.ppdp-steps,
.ppdp-content,
.ppdp-faq,
.ppdp-siblings,
.ppdp-guides {
  margin-top: 28px;
  padding: clamp(18px, 3vw, 26px);
  background: var(--ppdp-surface);
  border: 1px solid var(--ppdp-line);
  border-radius: var(--ppdp-radius);
  box-shadow: 0 1px 0 rgba(15, 23, 42, 0.03);
}

.ppdp-specs__grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0;
  margin: 0;
}

.ppdp-specs__row {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  padding: 12px 4px;
  border-bottom: 1px solid var(--ppdp-line);
}

.ppdp-specs__row:nth-last-child(-n+2) {
  border-bottom: none;
}

.ppdp-specs__row dt {
  font-size: 13px;
  color: var(--ppdp-muted);
}

.ppdp-specs__row dd {
  margin: 0;
  font-size: 13.5px;
  font-weight: 700;
  color: var(--ppdp-ink);
  text-align: end;
}

.ppdp-steps__list {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 14px;
  margin: 0;
  padding: 0;
  list-style: none;
  counter-reset: none;
}

.ppdp-steps__list li {
  display: flex;
  flex-direction: column;
  gap: 12px;
  padding: 16px;
  border-radius: var(--ppdp-radius-sm);
  background: var(--ppdp-bg);
  border: 1px solid var(--ppdp-line);
}

.ppdp-steps__num {
  width: 32px;
  height: 32px;
  border-radius: 10px;
  display: grid;
  place-items: center;
  font-size: 14px;
  font-weight: 800;
  color: var(--ppdp-tone-deep);
  background: var(--ppdp-tone-soft);
}

.ppdp-steps__list strong {
  display: block;
  margin-bottom: 4px;
  font-size: 14.5px;
  color: var(--ppdp-ink);
}

.ppdp-steps__list p {
  margin: 0;
  font-size: 13px;
  line-height: 1.7;
  color: var(--ppdp-muted);
}

.ppdp-content__body {
  font-size: 15px;
  line-height: 1.9;
  color: var(--ppdp-ink);
}

.ppdp-content__body h2 {
  margin: 1.5em 0 0.55em;
  font-family: var(--font-display);
  font-size: 1.15rem;
  font-weight: 400;
}

.ppdp-content__body h2:first-child {
  margin-top: 0;
}

.ppdp-content__body ul,
.ppdp-content__body ol {
  padding-inline-start: 1.2em;
}

.ppdp-content__body a {
  color: var(--ppdp-accent);
  font-weight: 700;
}

.ppdp-content__body .psn-pdp__lead {
  font-size: 1.02rem;
  line-height: 1.85;
  color: var(--ppdp-muted);
}

.ppdp-content__body .psn-pdp__cta-box {
  margin-top: 1.4em;
  padding: 16px 18px;
  border-radius: 14px;
  border: 1px solid var(--ppdp-tone-soft);
  background: var(--ppdp-tone-soft);
}

.ppdp-content__body .psn-pdp__cta-box p {
  margin: 0 0 0.45em;
}

.ppdp-content__body .psn-pdp__cta-box p:last-child {
  margin-bottom: 0;
}

.ppdp-faq__list {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.ppdp-faq__item {
  border: 1px solid var(--ppdp-line);
  border-radius: 14px;
  background: #fff;
  overflow: hidden;
}

.ppdp-faq__item summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 14px 16px;
  cursor: pointer;
  list-style: none;
  font-size: 14.5px;
  font-weight: 700;
  color: var(--ppdp-ink);
}

.ppdp-faq__item summary::-webkit-details-marker {
  display: none;
}

.ppdp-faq__item summary svg,
.ppdp-faq__item summary [data-lucide] {
  width: 18px;
  height: 18px;
  flex-shrink: 0;
  color: var(--ppdp-muted);
  transition: transform 180ms ease;
}

.ppdp-faq__item[open] summary svg,
.ppdp-faq__item[open] summary [data-lucide] {
  transform: rotate(180deg);
}

.ppdp-faq__body {
  padding: 0 16px 16px;
  font-size: 14px;
  line-height: 1.8;
  color: var(--ppdp-muted);
}

.ppdp-siblings__grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
}

.ppdp-sibling {
  display: grid;
  grid-template-columns: 1fr auto;
  grid-template-rows: auto auto;
  gap: 4px 12px;
  padding: 16px;
  border-radius: 14px;
  border: 1px solid var(--ppdp-line);
  background: var(--ppdp-bg);
  text-decoration: none;
  color: inherit;
  transition: border-color 160ms ease, transform 160ms var(--ppdp-ease);
}

.ppdp-sibling:hover {
  border-color: rgba(15, 23, 42, 0.16);
  transform: translateY(-1px);
}

.ppdp-sibling__name {
  grid-column: 1;
  font-size: 14.5px;
  font-weight: 800;
  color: var(--ppdp-ink);
}

.ppdp-sibling__price {
  grid-column: 2;
  grid-row: 1 / span 2;
  align-self: center;
  font-size: 1.1rem;
  font-weight: 800;
  color: var(--ppdp-tone-deep);
  font-variant-numeric: tabular-nums;
}

.ppdp-sibling__cta {
  grid-column: 1;
  font-size: 12.5px;
  font-weight: 700;
  color: var(--ppdp-muted);
}

.ppdp-guides__list {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.ppdp-guides__link {
  display: inline-flex;
  align-items: center;
  min-height: 38px;
  padding: 0 14px;
  border-radius: 999px;
  border: 1px solid var(--ppdp-line);
  background: #fff;
  font-size: 13px;
  font-weight: 700;
  color: var(--ppdp-ink);
  text-decoration: none;
  transition: background 160ms ease, border-color 160ms ease;
}

.ppdp-guides__link:hover {
  background: var(--ppdp-bg);
  border-color: rgba(15, 23, 42, 0.14);
}

/* ---- Sticky bar ---- */
.ppdp-sticky {
  position: fixed;
  inset-inline: 12px;
  bottom: calc(12px + var(--safe-bottom, 0px));
  z-index: 90;
  display: grid;
  grid-template-columns: 1.4fr 1fr;
  gap: 8px;
  align-items: center;
  padding: 10px 12px;
  border-radius: 18px;
  background: rgba(255, 255, 255, 0.92);
  border: 1px solid var(--ppdp-line);
  box-shadow: 0 12px 40px rgba(15, 23, 42, 0.16);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
}

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

  body[data-page="psn-pdp"] .app-main {
    padding-bottom: var(--space-4, 24px);
  }
}

.ppdp-sticky__price {
  display: flex;
  flex-direction: column;
  gap: 1px;
  min-width: 0;
}

.ppdp-sticky__price strong {
  font-size: 16px;
  font-weight: 800;
  color: var(--ppdp-ink);
  font-variant-numeric: tabular-nums;
}

.ppdp-sticky__price small {
  font-size: 11px;
  color: var(--ppdp-muted);
}

.ppdp-sticky__call,
.ppdp-sticky__wa {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  min-height: 42px;
  padding: 0 14px;
  border-radius: 12px;
  font-size: 13px;
  font-weight: 800;
  text-decoration: none;
  white-space: nowrap;
  border: 0;
  cursor: pointer;
  font-family: inherit;
}

.ppdp-sticky__call {
  color: #fff;
  background: linear-gradient(135deg, #16A34A 0%, #15803D 100%);
}

.ppdp-sticky__call .btn__cart-icon,
.ppdp-sticky__call .btn__cart-icon svg {
  width: 15px;
  height: 15px;
  flex-shrink: 0;
}

.ppdp-sticky__wa {
  color: #fff;
  background: #128C7E;
}

/* ---- Responsive ---- */
@media (max-width: 900px) {
  .ppdp-hero {
    grid-template-columns: 1fr;
  }

  .ppdp-hero__media {
    max-width: 420px;
    margin-inline: auto;
    width: 100%;
  }

  .ppdp-steps__list {
    grid-template-columns: 1fr;
  }

  .ppdp-specs__grid {
    grid-template-columns: 1fr;
  }

  .ppdp-specs__row:nth-last-child(-n+2) {
    border-bottom: 1px solid var(--ppdp-line);
  }

  .ppdp-specs__row:last-child {
    border-bottom: none;
  }
}

@media (max-width: 640px) {
  .ppdp-trust {
    grid-template-columns: 1fr;
  }

  .ppdp-cta {
    grid-template-columns: 1fr;
  }

  .ppdp-siblings__grid {
    grid-template-columns: 1fr;
  }

  .ppdp-section-head--row {
    flex-direction: column;
    align-items: flex-start;
  }

  .ppdp-hero {
    padding: 14px;
  }

  .ppdp-hero__chips {
    grid-template-columns: 1fr 1fr;
  }
}

@media (prefers-reduced-motion: reduce) {
  .ppdp-cta__primary,
  .ppdp-cta__secondary,
  .ppdp-sibling,
  .ppdp-faq__item summary svg {
    transition: none;
  }
}

/* Tabbar clearance on mobile shop pages */
@media (max-width: 767px) {
  body[data-page="psn-pdp"] .ppdp-sticky {
    bottom: calc(12px + var(--tabbar-height, 60px) + var(--safe-bottom, 0px));
  }

  body[data-page="psn-pdp"] .app-main {
    padding-bottom: calc(88px + var(--tabbar-height, 60px) + var(--safe-bottom, 0px));
  }
}