/* ============================================================
   Red Gold — Product Detail (redesign · calm editorial)
   هم‌زبان با صفحهٔ خانه: فضای سفید، خطوط مویی، یک لهجهٔ رنگی،
   سلسله‌مراتب روشن. سه چیدمان: editorial · rail · hero
   پیشوند کلاس‌ها: rgp-
   ============================================================ */

:root{ --rgp-stick: 123px; }            /* ارتفاع هدر چسبان (۱۱۱px) + فاصله */

.rgp{ max-width:var(--maxw); margin:0 auto; width:100%;
  padding:22px 24px 140px; }            /* فضای پایین برای نوار خرید چسبان */

/* ---------- breadcrumb ---------- */
.rgp-crumb{ display:flex; align-items:center; gap:7px; flex-wrap:wrap;
  font-size:13px; color:var(--muted); margin-bottom:22px }
.rgp-crumb span{ display:inline-flex; align-items:center; gap:7px }
.rgp-crumb a{ cursor:pointer; transition:color .15s }
.rgp-crumb a:hover{ color:var(--amber-deep) }
.rgp-crumb .here{ color:var(--ink-2); font-weight:700 }
.rgp-crumb svg{ color:var(--line-2) }

/* ---------- shared layout grid ---------- */
.rgp-head{ margin-bottom:30px; padding-bottom:24px; border-bottom:1px solid var(--line) }
.rgp-head .rgp-title{ margin-top:4px }
.rgp-grid{ display:grid; gap:46px; align-items:start }
/* rail column areas — gallery + sticky buy card + details */
[data-pdp=rail] .rgp-gal-col{ grid-area:gallery }
[data-pdp=rail] .rgp-buy-col{ grid-area:buy }
[data-pdp=rail] .rgp-det-col{ grid-area:details }
.rgp-grid>*{ min-width:0 }
.rgp-sticky{ position:sticky; top:var(--rgp-stick) }

/* ===========================================================
   GALLERY
   =========================================================== */
.rgp-gal{ display:flex; flex-direction:column; gap:14px }
.rgp-stage{ position:relative; border-radius:var(--r-xl); overflow:hidden;
  aspect-ratio:1/1; background:
    radial-gradient(120% 100% at 28% 14%, #FBF7EF 0%, #F1EADD 60%, #ECE3D2 100%);
  border:1px solid var(--line);
  box-shadow:0 40px 80px -50px rgba(70,48,12,.4), inset 0 1px 0 rgba(255,255,255,.6) }
.rgp-stage-glow{ position:absolute; inset:0; z-index:1; pointer-events:none;
  transition:background .5s cubic-bezier(.2,.7,.2,1) }
.rgp-stage img{ position:relative; z-index:2; width:100%; height:100%;
  object-fit:cover; display:block; transition:opacity .55s }
/* single, quiet edition seal — only ONE limited-edition signal in the gallery */
.rgp-seal{ position:absolute; top:18px; left:18px; z-index:3;
  display:inline-flex; align-items:center; gap:7px; padding:7px 14px; border-radius:999px;
  font-size:12px; font-weight:800;
  color:var(--garnet); background:rgba(255,255,255,.9); backdrop-filter:blur(8px);
  border:1px solid rgba(133,18,28,.16); box-shadow:0 6px 18px -10px rgba(40,30,12,.4) }
.rgp-seal svg{ color:var(--ok) }

/* design swatches — gallery thumbnails AND the design selector, unified into one control */
.rgp-sw{ display:flex; gap:12px }
.rgp-sw-btn{ flex:1; display:flex; flex-direction:column; gap:0; padding:0;
  background:none; border:none; cursor:pointer; font-family:inherit; text-align:center;
  --a:var(--garnet) }
.rgp-sw-thumb{ position:relative; aspect-ratio:1/1; border-radius:14px; overflow:hidden;
  background:#F1EADD; border:1.5px solid var(--line); transition:.2s }
.rgp-sw-thumb img{ width:100%; height:100%; object-fit:cover; opacity:.66; transition:.2s }
.rgp-sw-btn:hover .rgp-sw-thumb{ border-color:color-mix(in srgb,var(--a) 55%,var(--line)); transform:translateY(-2px) }
.rgp-sw-btn:hover .rgp-sw-thumb img{ opacity:.9 }
.rgp-sw-btn.on .rgp-sw-thumb{ border-color:var(--a);
  box-shadow:0 0 0 3px color-mix(in srgb,var(--a) 20%,transparent) }
.rgp-sw-btn.on .rgp-sw-thumb img{ opacity:1 }
.rgp-sw-dot{ position:absolute; top:8px; right:8px; width:9px; height:9px; border-radius:50%;
  background:var(--a); box-shadow:0 0 0 2px rgba(255,255,255,.85) }
.rgp-sw-lab{ margin-top:9px; font-size:12.5px; font-weight:700; color:var(--ink-2); transition:color .2s }
.rgp-sw-fee{ font-size:11px; font-weight:600; color:var(--muted); margin-top:1px; font-family:var(--font-num) }
.rgp-sw-btn.on .rgp-sw-lab{ color:var(--ink) }

/* ===========================================================
   INFO COLUMN — type & hierarchy borrowed from home (mh-*)
   =========================================================== */
.rgp-eyebrow{ font-size:13px; font-weight:700; letter-spacing:.015em;
  color:var(--amber-deep); margin-bottom:12px; display:flex; align-items:center; gap:8px }
.rgp-title{ font-size:clamp(28px,3.3vw,44px); font-weight:900; line-height:1.16;
  letter-spacing:-.02em; color:var(--ink); margin:0 }
.rgp-title .num{ font-family:var(--font-num) }

.rgp-rate{ display:flex; align-items:center; gap:12px; margin-top:16px;
  color:var(--muted); font-size:14px }
.rgp-stars{ display:inline-flex; color:var(--amber); gap:2px }
.rgp-rate b{ color:var(--ink); font-weight:800; font-family:var(--font-num) }
.rgp-rate .dot{ width:3px; height:3px; border-radius:50%; background:var(--line-2) }
.rgp-stock{ display:inline-flex; align-items:center; gap:5px; color:var(--ok); font-weight:700; white-space:nowrap }
.rgp-avail{ color:var(--muted) }

/* hairline rule */
.rgp-rule{ height:1px; border:none; margin:26px 0;
  background:linear-gradient(90deg,var(--line-2),transparent) }
.rgp-rule.center{ background:linear-gradient(90deg,transparent,var(--gold-line),transparent) }

/* ---------- price — one clean treatment, no boxed gradient panel ---------- */
.rgp-price{ margin-top:24px }
.rgp-price-cap{ font-size:12.5px; font-weight:700; letter-spacing:.04em;
  color:var(--amber-deep); display:flex; align-items:center; gap:8px; margin-bottom:8px }
.rgp-price-row{ display:flex; align-items:baseline; gap:12px; flex-wrap:wrap }
.rgp-price-val{ font-family:var(--font-num); font-variant-numeric:tabular-nums;
  font-size:clamp(30px,3.4vw,44px); font-weight:900; color:var(--ink); line-height:1 }
.rgp-price-unit{ font-size:18px; font-weight:800; color:var(--garnet) }
.rgp-price-gram{ font-size:13px; color:var(--muted); font-family:var(--font-num) }
.rgp-price-gram b{ color:var(--ink-2); font-weight:700 }

/* ---------- edition — the SINGLE limited-edition meter ---------- */
.rgp-ed{ margin-top:22px }
.rgp-ed-head{ display:flex; justify-content:space-between; align-items:baseline;
  font-size:12.5px; font-weight:700; margin-bottom:8px }
.rgp-ed-head .lab{ color:var(--garnet); display:inline-flex; align-items:center; gap:6px }
.rgp-ed-head .num{ color:var(--muted); font-family:var(--font-num) }
.rgp-ed-bar{ height:5px; border-radius:4px; background:var(--line); overflow:hidden }
.rgp-ed-bar i{ display:block; height:100%; border-radius:4px;
  background:linear-gradient(90deg,var(--garnet-2),var(--garnet));
  transition:width 1.1s cubic-bezier(.2,.8,.2,1) }

/* ---------- design block label ---------- */
.rgp-block-head{ display:flex; align-items:baseline; justify-content:space-between;
  margin-bottom:13px }
.rgp-block-head .t{ font-weight:800; font-size:15px; color:var(--ink) }
.rgp-block-head .s{ font-size:12.5px; color:var(--muted) }
.rgp-dnote{ display:flex; align-items:center; gap:8px; margin-top:13px;
  font-size:13px; color:var(--ink-2); line-height:1.6 }
.rgp-dnote svg{ color:var(--amber-deep); flex:0 0 auto }

/* ---------- quantity + actions ---------- */
.rgp-buy{ margin-top:26px }
.rgp-buyrow{ display:flex; align-items:stretch; gap:12px; flex-wrap:wrap }
.rgp-qty{ display:inline-flex; align-items:center; border:1.5px solid var(--line-2);
  border-radius:14px; overflow:hidden; background:#fff; flex:0 0 auto }
.rgp-qty button{ width:46px; height:54px; border:none; background:transparent; cursor:pointer;
  color:var(--ink-2); display:flex; align-items:center; justify-content:center; transition:.15s }
.rgp-qty button:hover{ background:var(--amber-soft); color:var(--amber-deep) }
.rgp-qty button:disabled{ opacity:.35; cursor:not-allowed }
.rgp-qty .n{ min-width:48px; text-align:center; font-weight:900; font-size:18px;
  font-family:var(--font-num); font-variant-numeric:tabular-nums }
.rgp-add{ flex:1 1 200px }
.rgp-quick{ margin-top:12px }

/* ---------- trust — slim hairline row, not 4 boxes ---------- */
.rgp-trust{ display:grid; grid-template-columns:repeat(4,1fr); gap:0;
  border:1px solid var(--line); border-radius:16px; overflow:hidden;
  background:rgba(255,255,255,.55) }
.rgp-trust-it{ display:flex; flex-direction:column; align-items:center; gap:7px;
  text-align:center; padding:16px 10px; border-left:1px solid var(--line) }
.rgp-trust-it:first-child{ border-left:none }
.rgp-trust-it svg{ color:var(--amber-deep) }
.rgp-trust-it span{ font-size:12.5px; font-weight:700; color:var(--ink-2); line-height:1.35 }

/* ---------- specs — editorial definition list, hairline rows ---------- */
.rgp-sec-h{ font-size:18px; font-weight:900; color:var(--ink); letter-spacing:-.01em;
  margin-bottom:14px; display:flex; align-items:center; gap:10px }
.rgp-sec-h::before{ content:""; width:18px; height:3px; border-radius:3px;
  background:linear-gradient(90deg,var(--amber),var(--gold-line)) }
.rgp-about{ }
.rgp-desc{ font-size:15px; line-height:2.05; color:var(--ink-2); text-wrap:pretty; margin-bottom:14px }
.rgp-desc b{ color:var(--ink); font-weight:800 }
.rgp-about-grid{ display:grid; grid-template-columns:1fr; gap:26px }
.rgp-about-feats .rgp-sec-h{ margin-bottom:14px }
.rgp-feat{ display:grid; grid-template-columns:1fr 1fr; gap:14px; margin-top:0 }
.rgp-feat-it{ display:flex; gap:13px; align-items:flex-start; padding:16px 16px;
  background:rgba(255,255,255,.55); border:1px solid var(--line); border-radius:16px; transition:.2s }
.rgp-feat-it:hover{ border-color:var(--gold-line); background:rgba(255,255,255,.8) }
.rgp-feat-ic{ flex:0 0 auto; width:44px; height:44px; border-radius:12px;
  background:linear-gradient(160deg,#FCEFCF,#F4DFA8); border:1px solid var(--gold-line);
  display:flex; align-items:center; justify-content:center; color:var(--amber-deep);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.7) }
.rgp-feat-t{ font-size:14.5px; font-weight:800; color:var(--ink); line-height:1.3 }
.rgp-feat-d{ font-size:12.5px; line-height:1.7; color:var(--muted); margin-top:4px; text-wrap:pretty }
.rgp-specs-h{ font-size:13px; font-weight:700; letter-spacing:.12em; text-transform:uppercase;
  color:var(--amber-deep); margin-bottom:6px }
.rgp-specs{ display:grid; grid-template-columns:1fr 1fr; gap:0 40px }
.rgp-spec{ display:flex; justify-content:space-between; align-items:center; gap:12px;
  padding:14px 0; border-top:1px solid var(--line); font-size:14.5px }
.rgp-spec .k{ color:var(--muted) }
.rgp-spec .v{ font-weight:800; color:var(--ink); font-family:var(--font-num);
  font-variant-numeric:tabular-nums; text-align:left }

/* ===========================================================
   STICKY PURCHASE CARD (layout: rail)
   =========================================================== */
.rgp-card{ background:var(--card); border:1px solid var(--line); border-radius:var(--r-xl);
  box-shadow:var(--shadow-md); padding:26px }
.rgp-card .rgp-price{ margin-top:6px }
.rgp-card-nm{ font-size:15.5px; font-weight:800; color:var(--ink); line-height:1.45;
  padding-bottom:14px; margin-bottom:4px; border-bottom:1px solid var(--line) }
.rgp-card-design{ margin-top:14px; padding:10px 13px; border-radius:12px;
  background:var(--amber-soft); color:var(--ink-2) }
.rgp-card-design b{ color:var(--ink); font-weight:800 }
.rgp-card .rgp-ed{ margin-top:20px }
.rgp-assure{ display:flex; flex-direction:column; gap:11px; margin-top:20px;
  padding-top:18px; border-top:1px solid var(--line) }
.rgp-assure-it{ display:flex; align-items:center; gap:10px; font-size:12.5px;
  font-weight:600; color:var(--ink-2) }
.rgp-assure-it svg{ color:var(--ok); flex:0 0 auto }
/* rail: gallery sits in the wide main column — landscape crop reads the whole card */
[data-pdp=rail] .rgp-stage{ aspect-ratio:4/3 }

/* ===========================================================
   FULL-BLEED HERO (layout: hero)
   =========================================================== */
.rgp-hero{ position:relative; overflow:hidden; isolation:isolate;
  margin-bottom:44px; border-radius:var(--r-xl);
  background:
    radial-gradient(120% 90% at 82% 8%, rgba(246,169,30,.14), transparent 52%),
    radial-gradient(110% 90% at 6% 100%, rgba(133,18,28,.10), transparent 50%),
    linear-gradient(180deg,#FBF7EF,#F2EBDD) }
.rgp-hero-wm{ position:absolute; top:50%; left:6%; transform:translateY(-50%);
  font-family:var(--serif); font-weight:700; font-size:min(34vw,400px); line-height:1;
  color:rgba(133,18,28,.05); z-index:0; pointer-events:none; user-select:none }
.rgp-hero-grid{ position:relative; z-index:1; display:grid;
  grid-template-columns:.92fr 1.08fr; gap:34px; align-items:center; padding:40px 46px }
.rgp-hero-copy{ display:flex; flex-direction:column; align-items:flex-start }
.rgp-hero .rgp-title{ font-size:clamp(26px,3vw,42px); line-height:1.2 }
.rgp-hero .rgp-rate{ margin-top:18px }
.rgp-hero-stage{ position:relative; border-radius:var(--r-lg); overflow:hidden;
  aspect-ratio:4/3; box-shadow:var(--shadow-lg); border:1px solid rgba(255,255,255,.5) }
.rgp-hero-stage img{ width:100%; height:100%; object-fit:cover; display:block; transition:opacity .55s }
.rgp-hero-seal{ position:absolute; top:16px; left:16px; z-index:3 }
.rgp-hero-body{ display:grid; grid-template-columns:1.15fr .85fr; gap:46px;
  max-width:1000px; margin:0 auto; align-items:start }

/* ===========================================================
   STICKY BUY BAR — appears when inline CTA scrolls away (mobile + laptop)
   =========================================================== */
.rgp-bar{ position:fixed; left:0; right:0; bottom:46px; z-index:58;
  background:rgba(251,247,240,.94); backdrop-filter:blur(14px) saturate(1.1);
  border-top:1px solid var(--line-2); box-shadow:0 -10px 30px -16px rgba(45,30,8,.34);
  padding:11px 0 }
.rgp-bar-in{ max-width:var(--maxw); margin:0 auto; padding:0 24px;
  display:flex; align-items:center; gap:16px }
.rgp-bar-thumb{ width:48px; height:48px; border-radius:12px; overflow:hidden; flex:0 0 auto;
  border:1px solid var(--line); background:#F1EADD }
.rgp-bar-thumb img{ width:100%; height:100%; object-fit:cover }
.rgp-bar-meta{ min-width:0; flex:1 }
.rgp-bar-nm{ font-size:13.5px; font-weight:800; color:var(--ink); white-space:nowrap;
  overflow:hidden; text-overflow:ellipsis }
.rgp-bar-pr{ font-size:15px; font-weight:900; color:var(--garnet); font-family:var(--font-num) }
.rgp-bar .rgp-qty{ border-radius:12px }
.rgp-bar .rgp-qty button{ height:46px; width:42px }
.rgp-bar-add{ flex:0 0 auto }

/* ===========================================================
   RESPONSIVE
   =========================================================== */
@media(min-width:861px){
  [data-pdp=editorial] .rgp-grid{ grid-template-columns:0.94fr 1.06fr }
  [data-pdp=rail] .rgp-grid{ grid-template-columns:1.12fr 0.88fr;
    grid-template-areas:"gallery buy" "details details"; column-gap:46px; row-gap:48px }
  [data-pdp=rail] .rgp-about-grid{ grid-template-columns:1.04fr .96fr; gap:48px; align-items:start }
  [data-pdp=rail] .rgp-det-col .rgp-specs{ grid-template-columns:1fr 1fr; gap:0 56px }
}

/* laptop / small desktop */
@media(max-width:1100px){
  .rgp-grid{ gap:34px }
  .rgp-hero-grid{ padding:32px 34px; gap:24px }
}

/* tablet & below — single column, gallery first */
@media(max-width:860px){
  .rgp{ padding:18px 18px 130px }
  .rgp-grid{ grid-template-columns:1fr !important; gap:28px }
  [data-pdp=rail] .rgp-grid{ grid-template-areas:"gallery" "buy" "details" !important }
  [data-pdp=rail] .rgp-det-col{ border-top:1px solid var(--line); padding-top:26px }
  .rgp-sticky{ position:static }
  .rgp-card{ padding:22px }
  .rgp-hero-grid{ grid-template-columns:1fr; padding:26px 22px 8px; text-align:center }
  .rgp-hero-copy{ align-items:center }
  .rgp-hero-stage{ order:-1; aspect-ratio:16/11; max-width:520px; margin:0 auto 6px; width:100% }
  .rgp-hero-body{ grid-template-columns:1fr; gap:28px }
  .rgp-specs{ grid-template-columns:1fr }
}

@media(max-width:560px){
  .rgp{ padding:14px 15px 124px }
  .rgp-crumb{ margin-bottom:14px; font-size:12px }
  .rgp-head{ margin-bottom:22px; padding-bottom:18px }
  .rgp-rate{ flex-wrap:wrap; gap:8px 10px }
  [data-pdp=rail] .rgp-gal{ max-width:320px; margin-inline:auto }
  .rgp-trust{ grid-template-columns:1fr 1fr }
  .rgp-trust-it:nth-child(2){ border-left:none }
  .rgp-trust-it:nth-child(3),.rgp-trust-it:nth-child(4){ border-top:1px solid var(--line) }
  .rgp-sw{ gap:9px }
  .rgp-sw-lab{ font-size:11.5px }
  .rgp-feat{ grid-template-columns:1fr; gap:11px }
  .rgp-desc{ font-size:14.5px; line-height:1.95 }
  .rgp-sec-h{ font-size:16.5px }
  .rgp-bar-meta{ display:none }              /* جا برای دکمه روی موبایل کوچک */
  .rgp-bar-thumb{ width:44px; height:44px }
  .rgp-bar-add{ flex:1 }
  .rgp-buyrow{ gap:10px }
  .rgp-add{ flex:1 1 100% }
}