/* =================== pdp-variants.css =================== */ /* pdp-variants — visual differences between three PDP layouts (M1/M2/M3) * driven by [data-pdp-variant] attribute on .hc-pdp and `pdp-variant-{m1,m2,m3}` * class on . M1 is the default Editorial Premium (no overrides here — * existing _pdp/* partials render in their default form). M2 is Compact * Engineering (denser hero, neutral accents). M3 is Chapters (anchor-nav * promoted to a vertical sticky sidebar). Strictly attribute/class selectors, * no override of base block files. */ /* ===================== M1 — Editorial Premium ===================== */ /* (default — no overrides) */ /* ===================== M2 — Compact Engineering ===================== */ [data-pdp-variant="m2"] .pdp-anchor-nav { padding: 6px 0; gap: 16px; font-size: 12px; } [data-pdp-variant="m2"] .hc-pdp__grid { gap: clamp(20px, 1.6vw, 28px); } [data-pdp-variant="m2"] .pdp-trust-strip { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; padding: 14px; background: linear-gradient(180deg, var(--hc-paper, #ffffff) 0%, rgba(247, 240, 226, 0.86) 100%); border: 0.5px solid rgba(141, 109, 71, 0.18); border-radius: 12px; margin: 16px 0; } [data-pdp-variant="m2"] .pdp-trust-strip__item { padding: 8px 12px; background: transparent; border: 0; font-size: 12px; } [data-pdp-variant="m2"] .pdp-trust-strip__item b { font-family: var(--hc-mono, "JetBrains Mono", monospace); font-size: 11px; font-weight: 600; letter-spacing: 0.06em; text-transform: uppercase; } [data-pdp-variant="m2"] .pdp-trust-strip__item span { font-size: 11px; } /* Visual indicator badge under breadcrumbs */ [data-pdp-variant="m2"] .pdp-anchor-nav::before { content: "M2 · Compact Engineering"; display: inline-flex; align-items: center; padding: 3px 8px; margin-right: 12px; background: rgba(26, 23, 20, 0.06); border: 0.5px solid rgba(141, 109, 71, 0.24); border-radius: 999px; font-family: var(--hc-mono, "JetBrains Mono", monospace); font-size: 9.5px; font-weight: 500; letter-spacing: 0.10em; text-transform: uppercase; color: var(--hc-ink-mid, rgba(26, 23, 20, 0.55)); } /* ===================== M3 — Chapters + Jump-nav ===================== */ [data-pdp-variant="m3"] { position: relative; } [data-pdp-variant="m3"] .pdp-anchor-nav { position: fixed; left: max(16px, calc((100vw - 1320px) / 2 + 16px)); top: 120px; width: 168px; display: flex; flex-direction: column; gap: 4px; padding: 14px; background: linear-gradient(180deg, var(--hc-paper, #ffffff) 0%, rgba(252, 248, 240, 0.96) 100%); border: 0.5px solid rgba(141, 109, 71, 0.20); border-radius: 14px; box-shadow: 0 1px 2px rgba(40, 30, 15, 0.03), 0 18px 44px -28px rgba(40, 30, 15, 0.18); z-index: 30; } [data-pdp-variant="m3"] .pdp-anchor-nav::before { content: "Главы"; display: block; padding: 0 4px 8px; margin-bottom: 4px; border-bottom: 0.5px dashed rgba(141, 109, 71, 0.28); font-family: var(--hc-mono, "JetBrains Mono", monospace); font-size: 9.5px; font-weight: 600; letter-spacing: 0.14em; text-transform: uppercase; color: var(--hc-ink-mid, rgba(26, 23, 20, 0.45)); } [data-pdp-variant="m3"] .pdp-anchor-nav a { position: relative; padding: 7px 10px 7px 18px; font-family: var(--hc-sans, "Outfit", sans-serif); font-size: 12.5px; font-weight: 500; line-height: 1.35; color: var(--hc-ink-soft, rgba(26, 23, 20, 0.7)); border-radius: 8px; transition: background 0.18s ease, color 0.18s ease, padding 0.18s ease; } [data-pdp-variant="m3"] .pdp-anchor-nav a::before { content: ""; position: absolute; left: 8px; top: 50%; transform: translateY(-50%); width: 4px; height: 4px; border-radius: 50%; background: rgba(141, 109, 71, 0.32); transition: background 0.18s ease, transform 0.18s ease; } [data-pdp-variant="m3"] .pdp-anchor-nav a:hover, [data-pdp-variant="m3"] .pdp-anchor-nav a.is-active { background: rgba(212, 184, 150, 0.16); color: var(--hc-ink, #1a1714); } [data-pdp-variant="m3"] .pdp-anchor-nav a:hover::before, [data-pdp-variant="m3"] .pdp-anchor-nav a.is-active::before { background: linear-gradient(135deg, var(--hc-gold-1, var(--hc-gold, #d4b896)), var(--hc-gold-2, #b89a6f)); transform: translateY(-50%) scale(1.4); } [data-pdp-variant="m3"] .hc-pdp .hc-wrap > :not(.pdp-anchor-nav):not(:first-child) { padding-left: clamp(0px, 14vw, 200px); } [data-pdp-variant="m3"] .pdp-anchor-nav::after { content: "M3 · Chapters"; display: inline-flex; align-items: center; margin-left: 12px; padding: 3px 8px; background: rgba(26, 23, 20, 0.06); border: 0.5px solid rgba(141, 109, 71, 0.24); border-radius: 999px; font-family: var(--hc-mono, "JetBrains Mono", monospace); font-size: 9.5px; font-weight: 500; letter-spacing: 0.10em; text-transform: uppercase; color: var(--hc-ink-mid, rgba(26, 23, 20, 0.55)); } [data-pdp-variant="m3"] .pdp-anchor-nav::after { display: none; }