/* product.css — оформление статических страниц товара /p/<id>.html
   Тёмная люксовая палитра берётся из styles.css (:root). Здесь — раскладка страницы. */
.pp { min-height: 100%; }
.pp-sr { position:absolute; width:1px; height:1px; overflow:hidden; clip:rect(0 0 0 0); }
.pp-skip { position:absolute; left:-9999px; top:0; background:var(--gold,#c9a86a); color:#1a1611; padding:10px 16px; z-index:20; border-radius:0 0 8px 0; }
.pp-skip:focus { left:0; }

.pp-header { position:sticky; top:0; z-index:10; background:rgba(11,10,9,.86); backdrop-filter:blur(12px); border-bottom:1px solid var(--line,rgba(201,168,106,.22)); }
.pp-header__inner { display:flex; align-items:center; justify-content:space-between; gap:20px; height:64px; }
.pp-logo { font-family:var(--serif,"Cormorant Garamond",serif); font-size:1.45rem; letter-spacing:.16em; color:var(--cream,#f3ede2); }
.pp-header__nav { display:flex; align-items:center; gap:22px; font-size:.92rem; }
.pp-header__nav a { color:var(--cream-dim,#cfc7b8); transition:color .2s; }
.pp-header__nav a:hover { color:var(--gold,#c9a86a); }
.pp-header__cta { border:1px solid var(--line,rgba(201,168,106,.4)); padding:8px 16px; border-radius:999px; color:var(--gold,#c9a86a)!important; }
.pp-header__cta:hover { background:var(--gold,#c9a86a); color:#1a1611!important; }

.pp-main { padding:34px 0 80px; }
.pp-crumbs { display:flex; flex-wrap:wrap; align-items:center; gap:8px; font-size:.82rem; color:var(--muted,#a89e8e); margin-bottom:28px; }
.pp-crumbs a { color:var(--muted,#a89e8e); }
.pp-crumbs a:hover { color:var(--gold,#c9a86a); }
.pp-crumbs span[aria-current] { color:var(--cream,#f3ede2); }

.pp-grid { display:grid; grid-template-columns:minmax(0,440px) minmax(0,1fr); gap:48px; align-items:start; }
.pp-media { position:relative; border:1px solid var(--line,rgba(201,168,106,.22)); border-radius:20px; padding:48px; display:flex; align-items:center; justify-content:center; min-height:420px;
  background:
    radial-gradient(120% 90% at 30% 20%, color-mix(in srgb, var(--c2,#9a7048) 26%, transparent), transparent 60%),
    radial-gradient(120% 120% at 80% 100%, color-mix(in srgb, var(--c1,#5a3a1f) 30%, transparent), transparent 55%),
    var(--bg-card,#16130f); }
.pp-media .bottle { width:auto; height:340px; max-width:100%; filter:drop-shadow(0 24px 40px rgba(0,0,0,.5)); }
.pp-media .bottle-img { width:auto; max-height:380px; border-radius:12px; }
.pp-badge { position:absolute; top:18px; left:18px; background:var(--gold,#c9a86a); color:#1a1611; font-weight:600; font-size:.8rem; padding:5px 11px; border-radius:999px; letter-spacing:.02em; }

.pp-info { padding-top:6px; }
.pp-brand { font-size:.82rem; letter-spacing:.26em; text-transform:uppercase; color:var(--gold,#c9a86a); margin-bottom:12px; }
.pp-niche { color:var(--cream-dim,#cfc7b8); }
.pp-title { font-family:var(--serif,"Cormorant Garamond",serif); font-weight:300; font-size:clamp(2rem,1rem + 4vw,3.3rem); line-height:1.05; color:var(--cream,#f3ede2); }
.pp-sub { margin-top:10px; color:var(--cream-dim,#cfc7b8); font-size:1rem; }
.pp-rate { margin-top:14px; font-size:.9rem; color:var(--cream-dim,#cfc7b8); display:flex; flex-wrap:wrap; align-items:center; gap:8px; }
.pp-star { color:var(--gold,#c9a86a); }
.pp-rev { color:var(--muted,#a89e8e); }
.pp-meta-sep { color:var(--line,rgba(201,168,106,.5)); }
.pp-sku { color:var(--muted,#a89e8e); }
.pp-stock { color:#7bbf8a; }

.pp-price { margin-top:24px; display:flex; align-items:baseline; gap:12px; }
.pp-price__from { color:var(--muted,#a89e8e); font-size:.92rem; }
.pp-price__now { font-family:var(--serif,"Cormorant Garamond",serif); font-size:2.5rem; color:var(--cream,#f3ede2); line-height:1; }
.pp-price__old { color:var(--muted,#a89e8e); text-decoration:line-through; font-size:1.2rem; }

.pp-vols { width:100%; margin-top:20px; border-collapse:collapse; font-size:.95rem; }
.pp-vols caption { text-align:left; }
.pp-vols th { text-align:left; font-weight:500; color:var(--muted,#a89e8e); font-size:.78rem; text-transform:uppercase; letter-spacing:.08em; padding:0 0 8px; border-bottom:1px solid var(--line-soft,rgba(243,237,226,.1)); }
.pp-vols td { padding:11px 0; border-bottom:1px solid var(--line-soft,rgba(243,237,226,.08)); color:var(--cream,#f3ede2); }
.pp-vols__price s { color:var(--muted,#a89e8e); margin-left:6px; font-size:.85em; }
.pp-off { color:var(--gold,#c9a86a); font-weight:600; }

.pp-notes { margin-top:26px; display:grid; gap:1px; background:var(--line-soft,rgba(243,237,226,.1)); border:1px solid var(--line-soft,rgba(243,237,226,.1)); border-radius:14px; overflow:hidden; }
.pp-note { background:var(--bg-soft,#100e0c); padding:16px 18px; }
.pp-note span { display:block; font-size:.72rem; letter-spacing:.16em; text-transform:uppercase; color:var(--gold,#c9a86a); margin-bottom:6px; }
.pp-note p { color:var(--cream-dim,#cfc7b8); font-size:.96rem; line-height:1.5; }

.pp-desc { margin-top:26px; color:var(--cream-dim,#cfc7b8); font-size:1.05rem; line-height:1.7; }

.pp-cta { margin-top:30px; display:flex; flex-wrap:wrap; gap:12px; }
.pp-btn { display:inline-flex; align-items:center; justify-content:center; padding:15px 28px; border-radius:999px; font-weight:500; font-size:.98rem; letter-spacing:.02em; transition:transform .15s, box-shadow .2s, background .2s; }
.pp-btn--gold { background:linear-gradient(135deg,var(--gold-soft,#dcc08a),var(--gold,#c9a86a)); color:#1a1611; box-shadow:0 10px 30px rgba(201,168,106,.22); }
.pp-btn--gold:hover { transform:translateY(-2px); box-shadow:0 16px 38px rgba(201,168,106,.32); }
.pp-btn--ghost { border:1px solid var(--line,rgba(201,168,106,.4)); color:var(--cream,#f3ede2); }
.pp-btn--ghost:hover { border-color:var(--gold,#c9a86a); color:var(--gold,#c9a86a); }
.pp-applink { margin-top:16px; font-size:.95rem; }
.pp-applink a { color:var(--gold,#c9a86a); border-bottom:1px solid var(--line,rgba(201,168,106,.4)); padding-bottom:1px; }
.pp-applink a:hover { border-color:var(--gold,#c9a86a); }
.pp-delivery { margin-top:22px; font-size:.9rem; color:var(--cream-dim,#cfc7b8); }
.pp-fresh { margin-top:8px; font-size:.9rem; color:#7bbf8a; }

.pp-related { margin-top:72px; }
.pp-related__title, .pp-about__title { font-family:var(--serif,"Cormorant Garamond",serif); font-weight:300; font-size:clamp(1.6rem,1rem + 2.4vw,2.4rem); color:var(--cream,#f3ede2); margin-bottom:24px; }
.pp-related__grid { display:grid; grid-template-columns:repeat(4,1fr); gap:16px; }
.pp-rcard { display:flex; flex-direction:column; align-items:center; text-align:center; padding:22px 14px; border:1px solid var(--line-soft,rgba(243,237,226,.1)); border-radius:16px; background:var(--bg-card,#16130f); transition:border-color .2s, transform .2s; }
.pp-rcard:hover { border-color:var(--line,rgba(201,168,106,.4)); transform:translateY(-3px); }
.pp-rcard__media { height:130px; display:flex; align-items:center; justify-content:center; margin-bottom:14px; }
.pp-rcard__media .bottle { height:130px; width:auto; }
.pp-rcard__media .bottle-img { max-height:130px; width:auto; border-radius:8px; }
.pp-rcard__brand { font-size:.72rem; letter-spacing:.16em; text-transform:uppercase; color:var(--gold,#c9a86a); }
.pp-rcard__name { margin-top:5px; color:var(--cream,#f3ede2); font-size:.98rem; line-height:1.25; }
.pp-rcard__price { margin-top:9px; color:var(--cream-dim,#cfc7b8); font-size:.9rem; }

.pp-about { margin-top:72px; padding:34px; border:1px solid var(--line-soft,rgba(243,237,226,.1)); border-radius:18px; background:var(--bg-soft,#100e0c); }
.pp-about p { color:var(--cream-dim,#cfc7b8); max-width:760px; line-height:1.7; }
.pp-about a { color:var(--gold,#c9a86a); border-bottom:1px solid var(--line,rgba(201,168,106,.4)); }

.pp-footer { border-top:1px solid var(--line,rgba(201,168,106,.22)); padding:40px 0 56px; margin-top:60px; }
.pp-footer__inner { display:flex; flex-wrap:wrap; gap:24px; justify-content:space-between; align-items:flex-start; }
.pp-footer__brand p { color:var(--muted,#a89e8e); font-size:.9rem; margin-top:8px; }
.pp-footer__links { display:flex; flex-wrap:wrap; gap:20px; font-size:.92rem; }
.pp-footer__links a { color:var(--cream-dim,#cfc7b8); }
.pp-footer__links a:hover { color:var(--gold,#c9a86a); }
.pp-footer__copy { margin-top:26px; color:var(--muted,#a89e8e); font-size:.82rem; }

@media (max-width:880px) {
  .pp-grid { grid-template-columns:1fr; gap:28px; }
  .pp-media { min-height:320px; padding:34px; }
  .pp-media .bottle { height:260px; }
  .pp-related__grid { grid-template-columns:repeat(2,1fr); }
  .pp-header__nav a:not(.pp-header__cta) { display:none; }
}
@media (max-width:420px) {
  .pp-cta .pp-btn { flex:1 1 100%; }
}