/* Shared product page layout (every bar, English and Arabic). Matches the MSS buyback palette.
   Pages are single-language: /products/<bar> in English, /ar/products/<bar> in Arabic (dir=rtl). */
.pd-page { --pd-ink:#272722; --pd-muted:#5e5b52; --pd-accent:#285e63; --pd-gold:#85651e; --pd-line:#ddd8ca; --pd-surface:#f7f5ef; --pd-bg:#fff; margin:0; background:var(--pd-bg); color:var(--pd-ink); font-size:14px; line-height:1.7; color-scheme:light dark; scrollbar-color:var(--pd-muted) var(--pd-bg); }
.pd-page *, .pd-page *::before, .pd-page *::after { box-sizing:border-box; }
.pd-page [hidden] { display:none !important; }
.pd-page span { font-size:inherit; font-weight:inherit; color:inherit; }
.pd-page [lang="ar"] { font-family:'Cairo',sans-serif; letter-spacing:normal; }
.pd-page a { color:var(--pd-accent); text-underline-offset:4px; }
.pd-page a:hover { text-decoration-thickness:2px; }
.pd-page :is(a,button,summary):focus-visible { outline:3px solid var(--pd-accent); outline-offset:5px; }
.pd-page ::selection { background:#ddc58c; color:#272722; }
.pd-page .top-header-btn { min-width:44px; min-height:44px; }
.pd-page .scroll-nav { overflow-x:auto; }
.pd-page .scroll-nav a { flex-shrink:0; }
.pd-skip { position:fixed; top:8px; left:12px; z-index:1200; padding:12px; background:var(--pd-bg); transform:translateY(-200%); }
.pd-skip:focus { transform:translateY(0); }
.pd-main { max-width:1248px; padding:118px 32px 64px; margin:auto; }
.pd-main :is(h1,h2) { font-family:'Urbanist',sans-serif; font-weight:600; text-wrap:balance; letter-spacing:-.025em; color:var(--pd-ink); }
.pd-main h1 { font-size:clamp(40px,4vw,56px); line-height:1.08; margin:0 0 18px; }
.pd-main h1 > span { display:block; margin-top:12px; font-size:27px; line-height:1.5; text-align:start; }
.pd-main h2 { font-size:34px; line-height:1.2; margin:0 0 20px; }
.pd-main h2 > span { display:block; font-size:23px; margin-top:8px; line-height:1.6; }
.pd-main p { margin:0; }
.pd-breadcrumb { display:flex; flex-wrap:wrap; gap:12px; font-size:12px; margin-bottom:30px; color:var(--pd-muted); }
/* One language per page; the other language is one tap away. */
.pd-topline { display:flex; align-items:center; justify-content:space-between; gap:16px; margin-bottom:30px; }
.pd-topline .pd-breadcrumb { margin-bottom:0; }
.pd-page .pd-lang { display:inline-flex; align-items:center; flex-shrink:0; min-height:44px; padding:0 18px; border:1px solid var(--pd-line); border-radius:999px; color:var(--pd-accent); text-decoration:none; font-size:14px; line-height:1; }
.pd-page .pd-lang:hover { background:var(--pd-surface); border-color:var(--pd-accent); }
.pd-page .pd-lang[lang="ar"] { font-family:'Cairo',sans-serif; font-size:15px; font-weight:600; }
.pd-page .pd-lang[lang="en"] { font-family:'Urbanist',sans-serif; font-weight:600; }
.pd-breadcrumb a { color:var(--pd-muted); }
.pd-hero { display:grid; grid-template-columns:minmax(0,1.05fr) minmax(0,1fr); gap:64px; align-items:start; }
.pd-gallery { min-width:0; }
.pd-stage { background:var(--pd-surface); border-radius:12px; min-height:520px; display:grid; place-items:center; padding:32px; }
.pd-stage img { display:block; height:456px; max-width:100%; width:auto; object-fit:contain; filter:drop-shadow(0 16px 14px rgba(0,0,0,.18)); }
.pd-gallery-controls { display:flex; justify-content:center; gap:12px; margin-top:18px; }
.pd-gallery-controls button { background:transparent; color:var(--pd-muted); font:inherit; border:1px solid var(--pd-line); border-radius:6px; padding:8px 20px; min-height:44px; cursor:pointer; }
.pd-gallery-controls button span { margin-inline-start:8px; }
.pd-gallery-controls button[aria-pressed="true"] { border-color:var(--pd-accent); color:var(--pd-accent); background:var(--pd-bg); }
.pd-gallery-controls button:hover { background:var(--pd-surface); }
.pd-caption { font-size:11px; color:var(--pd-muted); text-align:center; margin-top:12px !important; }
.pd-caption span { display:block; }
.pd-fineness { color:var(--pd-gold); font-size:15px; display:flex; flex-wrap:wrap; gap:8px 18px; }
.pd-price-block { padding:24px 0 22px; margin-top:22px; border-top:1px solid var(--pd-line); }
.pd-price-label { display:flex; flex-wrap:wrap; justify-content:space-between; gap:8px; font-size:12px; color:var(--pd-muted); }
.pd-page .pd-price { font-family:'Urbanist',sans-serif; font-size:clamp(36px,4vw,56px); font-weight:700; line-height:1.15; letter-spacing:-.02em; font-variant-numeric:tabular-nums; margin:10px 0 12px; }
.pd-page .pd-price.pd-price-unavailable { font-family:monospace; font-size:22px; line-height:1.6; }
.pd-price-note { font-size:12px; color:var(--pd-muted); }
.pd-price-note > span { display:block; margin-top:3px; }
.pd-price-status { font-size:11px; color:var(--pd-muted); margin-top:10px !important; }
.pd-page .pd-button { display:flex; align-items:center; justify-content:space-between; gap:16px; background:var(--pd-accent); color:white; padding:15px 22px; border-radius:6px; text-decoration:none; min-height:62px; font-weight:700; }
.pd-button > span { display:flex; flex-wrap:wrap; gap:5px 18px; align-items:center; }
.pd-button svg { width:22px; height:22px; flex-shrink:0; }
.pd-page .pd-button:hover { text-decoration:underline; }
.pd-secondary { display:flex; justify-content:space-between; gap:16px; margin:14px 0 22px; font-size:12px; }
.pd-secondary a { display:flex; flex-direction:column; padding-block:4px; }
.pd-service-list { margin:0; }
.pd-service-list > div { display:flex; justify-content:space-between; gap:20px; padding:13px 0; border-top:1px solid var(--pd-line); font-size:12px; }
.pd-service-list dt { font-weight:700; }
.pd-service-list dd { margin:0; text-align:end; color:var(--pd-muted); }
.pd-service-list span { display:block; margin-top:2px; }
.pd-compare { display:grid; grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr); gap:64px; padding-block:64px; margin-top:56px; border-top:1px solid var(--pd-line); }
.pd-section-intro p { max-width:40ch; color:var(--pd-muted); margin-bottom:18px; }
.pd-section-intro p span { display:block; margin-top:8px; }
.pd-section-intro > a { display:block; width:fit-content; font-size:13px; padding-block:3px; }
.pd-weight-list { align-self:center; }
.pd-weight { display:grid; grid-template-columns:118px 1fr auto; align-items:center; gap:20px; padding:22px 16px; border-top:1px solid var(--pd-line); text-decoration:none; }
.pd-weight:last-child { border-bottom:1px solid var(--pd-line); }
.pd-weight strong { font-family:'Urbanist',sans-serif; font-size:32px; font-weight:600; color:var(--pd-ink); }
.pd-weight > span { font-size:13px; }
.pd-weight > span > span { display:block; margin-top:3px; }
.pd-current { background:var(--pd-surface); }
.pd-weight .pd-selected { color:var(--pd-gold); font-size:11px; text-align:end; }
.pd-details { display:grid; grid-template-columns:1fr 1fr; gap:80px; padding:56px 0; border-top:1px solid var(--pd-line); }
.pd-specs { margin:28px 0 20px; }
.pd-specs > div { display:flex; justify-content:space-between; gap:20px; padding:14px 0; border-bottom:1px solid var(--pd-line); font-size:13px; }
.pd-specs dt { color:var(--pd-muted); }
.pd-specs dd { margin:0; text-align:end; }
.pd-specs dd span { display:block; }
.pd-guide-links { display:flex; flex-direction:column; align-items:flex-start; gap:6px; font-size:12px; }
.pd-faq details { padding:20px 0; border-bottom:1px solid var(--pd-line); }
.pd-faq details:first-child { border-top:1px solid var(--pd-line); }
.pd-faq summary { cursor:pointer; font-weight:700; font-size:15px; }
.pd-faq summary span { display:block; margin-top:4px; font-size:14px; font-weight:400; }
.pd-faq summary::marker { color:var(--pd-gold); }
.pd-faq details p { margin-top:16px; font-size:13px; line-height:1.9; color:var(--pd-muted); }
.pd-faq details > a, .pd-faq .pd-guide-links { display:block; margin-top:16px; font-size:12px; }
.pd-faq .pd-guide-links a { display:block; margin-top:5px; }
.pd-visit { display:flex; align-items:center; justify-content:space-between; gap:32px; padding:32px; background:var(--pd-surface); border-radius:12px; }
.pd-visit h2 { font-size:28px; margin-bottom:12px; }
.pd-visit h2 span { font-size:21px; }
.pd-visit p { font-size:13px; color:var(--pd-muted); }
.pd-visit p span { display:block; margin-top:4px; }
.pd-visit-links { display:flex; flex-direction:column; gap:16px; font-size:13px; }
.pd-small { font-size:12px; }
.pd-small span { display:block; }
.pd-page .site-footer { margin-top:0; }
@media(prefers-color-scheme:dark) {
 .pd-page { --pd-ink:#eeeae1; --pd-muted:#bcb5a6; --pd-accent:#8adce2; --pd-gold:#d8ba73; --pd-line:#474138; --pd-surface:#24231f; --pd-bg:#171715; }
 .pd-page .pd-button { color:#122729; }
}
@media(max-width:1000px) {
 .pd-hero,.pd-compare { gap:32px; }
 .pd-details { gap:40px; }
 .pd-stage { min-height:460px; padding:28px; }
 .pd-stage img { height:400px; }
 .pd-weight { grid-template-columns:104px 1fr; gap:14px; }
 .pd-weight > span:last-child { display:none; }
}
@media(max-width:700px) {
 .pd-main { padding:112px 20px 40px; }
 .pd-breadcrumb { font-size:11px; margin-bottom:20px; }
 .pd-hero { grid-template-columns:1fr; gap:28px; }
 .pd-stage { min-height:0; height:310px; padding:20px; }
 .pd-stage img { height:270px; }
 .pd-gallery-controls { margin-top:12px; }
 .pd-gallery-controls button { font-size:12px; padding:6px 16px; }
 .pd-caption { display:none; }
 .pd-main h1 { font-size:40px; }
 .pd-main h1 > span { font-size:25px; margin-top:8px; }
 .pd-fineness { font-size:13px; }
 .pd-price-block { margin-top:18px; padding-block:20px; }
 .pd-page .pd-price { font-size:48px; }
 .pd-button > span { gap:4px 14px; font-size:13px; }
 .pd-service-list > div { font-size:11px; gap:12px; }
 .pd-compare { grid-template-columns:1fr; gap:28px; margin-top:40px; padding-block:40px; }
 .pd-main h2 { font-size:30px; }
 .pd-main h2 > span { font-size:22px; }
 .pd-weight { grid-template-columns:92px 1fr; padding:18px 12px; }
 .pd-weight strong { font-size:26px; }
 .pd-details { grid-template-columns:1fr; gap:36px; padding-block:40px; }
 .pd-visit { flex-direction:column; align-items:flex-start; padding:24px; gap:20px; }
 .pd-visit-links { gap:12px; }
 .pd-page .top-header-brand { font-size:12px; }
 .pd-page .top-header-right { gap:2px; }
 .pd-page .top-header-btn { min-width:40px; width:40px; }
}
/* Arabic pages: Cairo throughout, mirrored layout, numerals kept in Urbanist */
.pd-page[dir="rtl"] { font-family:'Cairo',sans-serif; line-height:1.9; }
.pd-page[dir="rtl"] .pd-main :is(h1,h2) { font-family:'Cairo',sans-serif; font-weight:700; letter-spacing:normal; line-height:1.45; }
.pd-page[dir="rtl"] .pd-price { font-family:'Urbanist','Cairo',sans-serif; }
.pd-page[dir="rtl"] .pd-weight strong { font-family:'Cairo',sans-serif; font-weight:700; }
.pd-page[dir="rtl"] :is(.pd-breadcrumb, .pd-caption, .pd-price-status, .pd-service-list > div, .pd-secondary) { font-size:13px; }
.pd-page[dir="rtl"] .pd-faq summary { font-size:16px; }
.pd-page[dir="rtl"] .pd-button svg { transform:scaleX(-1); }
.pd-page[dir="rtl"] .pd-skip { left:auto; right:12px; }
.pd-page[dir="rtl"] .scroll-nav > a:not(:first-child)::before { left:auto; right:-2px; }
/* Weight switcher: every bar one tap away, like the original product pages */
.pd-sizes { display:flex; gap:8px; margin:0 0 30px; padding:2px 2px 6px; overflow-x:auto; scrollbar-width:thin; scroll-padding-inline:24px; }
.pd-page .pd-sizes a { flex-shrink:0; display:inline-flex; align-items:center; min-height:44px; padding:0 16px; border:1px solid var(--pd-line); border-radius:999px; color:var(--pd-ink); text-decoration:none; font-size:13px; white-space:nowrap; font-variant-numeric:tabular-nums; }
.pd-page .pd-sizes a:hover { border-color:var(--pd-accent); color:var(--pd-accent); }
.pd-page .pd-sizes a[aria-current="page"] { background:var(--pd-accent); border-color:var(--pd-accent); color:var(--pd-bg); font-weight:700; }

/* Exact weight under the title, for bars not named in grams (1 oz, tola) */
.pd-grams { display:flex; flex-wrap:wrap; align-items:baseline; gap:4px 18px; margin-top:16px; }
.pd-page .pd-grams-figure { font-family:'Urbanist',sans-serif; font-size:44px; font-weight:600; line-height:1.05; letter-spacing:-.02em; color:var(--pd-gold); font-variant-numeric:tabular-nums; }
.pd-page .pd-grams-figure span { display:inline; font-size:.55em; font-weight:500; margin-inline-start:.12em; letter-spacing:0; }
.pd-grams-note { font-size:12px; color:var(--pd-muted); }
.pd-page[dir="rtl"] .pd-grams-figure span { font-family:'Cairo',sans-serif; font-size:.5em; margin-inline-start:.25em; }
.pd-page[dir="rtl"] .pd-grams-note { font-size:13px; }
.pd-page[dir="rtl"] .pd-sizes a { font-size:14px; }
@media(max-width:700px) {
 .pd-sizes { width:calc(100% + 40px); max-width:none; margin-inline:-20px; padding-inline:20px; margin-bottom:22px; }
 .pd-page .pd-grams-figure { font-size:40px; }
}
@media(prefers-reduced-motion:reduce) { .pd-page *, .pd-page *::before, .pd-page *::after { animation:none !important; scroll-behavior:auto !important; transition:none !important; } }
.pd-mobile-order { display:none; }
@media(max-width:700px) {
 .pd-mobile-order { display:block; position:fixed; inset-inline:0; bottom:0; padding:10px 16px max(10px, env(safe-area-inset-bottom)); border-top:1px solid var(--pd-line); background:var(--pd-bg); z-index:997; }
 .pd-mobile-order .pd-button { min-height:48px; justify-content:center; gap:12px; padding:12px; font-size:12px; }
 .pd-page .site-footer { padding-bottom:100px; }
 .pd-page :is(a,button,summary) { scroll-margin-block:115px 105px; }
}
