/* product-v2.css, "Reportaż" variant for Single Product Page
 Extends single-portfolio-v2.css with product-specific blocks:
 - Hero name layout (3 sizes), price chip + dual CTAs, photo badges
 - Techniki numbered cards (3-up grid on dark)
 - Full editorial Specs table (2-column dl) */


/* ─── Hero title, product-specific 3-line stack ─────────────── */
.pv2-hero-h {
 display: flex;
 flex-direction: column;
 gap: 4px;
 font-family: var(--font-display);
 line-height: 0.95;
 letter-spacing: -0.03em;
 margin: 0;
 color: inherit;
}
.pv2-hero-name {
 font-weight: 900;
 font-size: clamp(48px, 6vw, 84px);
 letter-spacing: -0.035em;
 line-height: 0.92;
 color: var(--fg-on-light-1);
}
.pv2-hero-capacity {
 font-family: var(--font-display);
 font-weight: 500;
 font-style: italic;
 font-size: clamp(22px, 2vw, 28px);
 color: var(--brass-600);
 letter-spacing: -0.015em;
 line-height: 1;
 margin-top: 14px;
 font-variant-numeric: tabular-nums;
}
.pv2-hero-sub {
 font-family: var(--font-heading);
 font-weight: 400;
 font-style: normal;
 font-size: clamp(15px, 1.1vw, 17px);
 color: var(--fg-on-light-3);
 letter-spacing: 0.005em;
 line-height: 1.3;
 margin-top: 12px;
}
.sn-r2-hero-dark .pv2-hero-name { color: var(--fg-on-dark-1); }
.sn-r2-hero-dark .pv2-hero-capacity { color: var(--brass-400); }
.sn-r2-hero-dark .pv2-hero-sub { color: var(--fg-on-dark-3); }

/* Multi-paragraph lede support (3+ paragraphs in opis) */
.sn-r2-zapytanie-lede {
 font-family: var(--font-heading);
 font-weight: 400;
 font-size: clamp(18px, 1.6vw, 22px);
 line-height: 1.55;
 color: var(--fg-on-light-2);
 text-wrap: pretty;
}
.sn-r2-zapytanie-lede p { margin: 0; }
.sn-r2-zapytanie-lede p + p {
 margin-top: 1em;
 text-indent: 1.5em;
}

/* Hero photo badges, overlay, top-left of square photo */
.pv2-hero-badges {
 position: absolute;
 top: 16px;
 left: 16px;
 display: flex;
 flex-wrap: wrap;
 gap: 8px;
 z-index: 1;
}
.pv2-hero-badge {
 font-family: var(--font-body);
 font-size: var(--fs-nano);
 font-weight: 600;
 letter-spacing: var(--ls-cta);
 text-transform: uppercase;
 padding: 6px 11px;
 border-radius: 3px;
 line-height: 1;
 white-space: nowrap;
 backdrop-filter: blur(8px);
 -webkit-backdrop-filter: blur(8px);
}
.pv2-hero-badge-bestseller {
 background: var(--brass-500);
 color: #fff;
}
.pv2-hero-badge-new {
 background: rgba(122, 31, 43, 0.92);
 color: #fff;
}
.pv2-hero-badge- {
 background: rgba(14, 10, 7, 0.85);
 color: var(--brass-400);
 border: 1px solid var(--brass-500);
}
.pv2-hero-badge-stock {
 background: rgba(72, 138, 84, 0.82);
 color: #fff;
}


/* Hero media column wraps photo + thumbnail strip together.
 IMPORTANT: when sn-r2-hero-photo-left swaps columns, it moves THIS wrapper
 (not the inner figure) so thumbs stay BELOW the photo, not stacked above. */
.pv2-hero-media {
 display: flex;
 flex-direction: column;
 gap: 14px;
}
/* Reset inherited order from .sn-r2-hero-photo-left rule (would otherwise
 push photo below the thumbs inside this flex column) */
.pv2-hero-media .sn-r2-hero-photo { order: 0; }
/* Move the whole media column instead, when photo-left is requested */
.sn-r2-hero-photo-left .pv2-hero-media { order: 1; }

/* Thumbnail strip, robust for 1–N photos.
 Fixed flex basis = 4-across max width; smaller galleries gather to the left;
 7+ photos wrap to a second row. Each thumb stays a clean square. */
.pv2-hero-thumbs {
 display: flex;
 flex-wrap: wrap;
 gap: 10px;
 justify-content: flex-start;
}
.pv2-hero-thumb {
 appearance: none;
 flex: 0 0 calc((100% - 30px) / 4);
 max-width: 96px;
 background: var(--ink-800);
 border: 1px solid rgba(20, 17, 13, 0.12);
 border-radius: 0;
 padding: 0;
 cursor: pointer;
 overflow: hidden;
 aspect-ratio: 1 / 1;
 position: relative;
 transition: border-color 220ms;
}
.pv2-hero-thumb img {
 width: 100%;
 height: 100%;
 object-fit: cover;
 display: block;
 opacity: 0.7;
 transition: opacity 220ms;
}
.pv2-hero-thumb:hover { border-color: var(--brass-500); }
.pv2-hero-thumb:hover img { opacity: 1; }
.pv2-hero-thumb.is-active {
 border-color: var(--brass-500);
 box-shadow: 0 0 0 1px var(--brass-500);
}
.pv2-hero-thumb.is-active img { opacity: 1; }

/* Dark hero overrides for thumbs */
.sn-r2-hero-dark .pv2-hero-thumb {
 border-color: rgba(255, 255, 255, 0.12);
 background: var(--ink-700);
}
.sn-r2-hero-dark .pv2-hero-thumb:hover,
.sn-r2-hero-dark .pv2-hero-thumb.is-active {
 border-color: var(--brass-400);
 box-shadow: 0 0 0 1px var(--brass-400);
}


/* ─── Hero price + CTAs ─────────────────────────────────────── */
.pv2-price-row {
 margin-top: clamp(28px, 3vw, 40px);
 padding-top: clamp(24px, 3vw, 32px);
 border-top: 1px solid var(--r2-rule);
 display: grid;
 grid-template-columns: auto 1fr;
 gap: clamp(28px, 4vw, 48px);
 align-items: flex-end;
}

.pv2-price { display: flex; flex-direction: column; gap: 4px; }
.pv2-price-eyebrow {
 font-family: var(--font-body);
 font-size: var(--fs-nano);
 font-weight: 700;
 letter-spacing: var(--ls-loose);
 text-transform: uppercase;
 color: var(--brass-600);
}
.pv2-price-amount {
 display: flex;
 align-items: baseline;
 gap: 6px;
 margin-top: 2px;
}
.pv2-price-val {
 font-family: var(--font-display);
 font-weight: 900;
 font-style: italic;
 font-size: clamp(42px, 4.4vw, 60px);
 line-height: 0.9;
 letter-spacing: -0.04em;
 color: var(--fg-on-light-1);
 font-variant-numeric: tabular-nums;
}
.pv2-price-cur {
 font-family: var(--font-heading);
 font-weight: 500;
 font-size: 18px;
 color: var(--fg-on-light-3);
 letter-spacing: 0.02em;
}
.pv2-price-meta {
 font-family: var(--font-body);
 font-size: 12px;
 color: var(--fg-on-light-3);
 letter-spacing: 0.01em;
}

.pv2-hero-ctas {
 display: flex;
 flex-direction: column;
 gap: 12px;
 align-items: stretch;
}
.pv2-cta-primary {
 display: inline-flex;
 align-items: center;
 justify-content: center;
 gap: 10px;
 padding: 14px 22px;
 background: var(--brass-500);
 color: var(--ink-1000);
 font-family: var(--font-body);
 font-weight: 600;
 font-size: 12px;
 letter-spacing: var(--ls-cta);
 text-transform: uppercase;
 text-decoration: none;
 border-radius: 3px;
 box-shadow: 0 1px 0 rgba(255,255,255,0.18) inset, 0 6px 14px rgba(176, 144, 88, 0.18);
 transition: background 220ms, transform 220ms, box-shadow 220ms;
 white-space: nowrap;
}
.pv2-cta-primary:hover {
 background: var(--brass-400);
 transform: translateY(-1px);
 box-shadow: 0 1px 0 rgba(255,255,255,0.22) inset, 0 8px 20px rgba(176, 144, 88, 0.30);
}
.pv2-cta-primary svg { width: 14px; height: 14px; transition: transform 200ms; }
.pv2-cta-primary:hover svg { transform: translateX(3px); }

.pv2-cta-secondary {
 display: inline-flex;
 align-items: center;
 justify-content: center;
 gap: 8px;
 padding: 12px 18px;
 font-family: var(--font-body);
 font-weight: 600;
 font-size: var(--fs-mini);
 letter-spacing: 0.14em;
 text-transform: uppercase;
 color: var(--fg-on-light-2);
 text-decoration: none;
 border: 1px solid rgba(20, 17, 13, 0.18);
 border-radius: 3px;
 background: transparent;
 transition: background 200ms, border-color 200ms, color 200ms;
}
.pv2-cta-secondary:hover {
 border-color: var(--brass-500);
 color: var(--brass-600);
 background: rgba(176, 144, 88, 0.06);
}
.pv2-cta-secondary svg { width: 14px; height: 14px; }

/* Dark hero overrides for CTAs and price */
.sn-r2-hero-dark .pv2-price-eyebrow { color: var(--brass-400); }
.sn-r2-hero-dark .pv2-price-val { color: var(--fg-on-dark-1); }
.sn-r2-hero-dark .pv2-price-cur { color: var(--fg-on-dark-3); }
.sn-r2-hero-dark .pv2-price-meta { color: var(--fg-on-dark-3); }

.sn-r2-hero-dark .pv2-cta-secondary {
 color: var(--fg-on-dark-2);
 border-color: rgba(255, 255, 255, 0.22);
}
.sn-r2-hero-dark .pv2-cta-secondary:hover {
 color: var(--brass-300);
 border-color: var(--brass-400);
 background: rgba(176, 144, 88, 0.10);
}


/* ─── Techniki znakowania, numbered cards on dark ────────────── */
/* The wrapping .sn-r2-process gives us the dark band + chapter head. */
.pv2-tech-grid {
 display: grid;
 grid-template-columns: repeat(3, 1fr);
 gap: clamp(24px, 3vw, 36px);
 margin-top: clamp(16px, 2vw, 24px);
}

.pv2-tech-card {
 display: flex;
 flex-direction: column;
 background: rgba(255, 255, 255, 0.03);
 border: 1px solid rgba(255, 255, 255, 0.08);
 border-radius: 3px;
 overflow: hidden;
 transition: border-color 240ms, transform 240ms;
}
.pv2-tech-card:hover {
 border-color: rgba(176, 144, 88, 0.45);
 transform: translateY(-3px);
}

.pv2-tech-photo {
 width: 100%;
 aspect-ratio: 1 / 1;
 overflow: hidden;
 background: var(--ink-800);
}
.pv2-tech-photo img {
 width: 100%;
 height: 100%;
 object-fit: cover;
 display: block;
 transition: transform 600ms var(--ease-out);
}
.pv2-tech-card:hover .pv2-tech-photo img { transform: scale(1.03); }

.pv2-tech-body {
 padding: clamp(24px, 2.5vw, 32px);
 display: flex;
 flex-direction: column;
 gap: 12px;
 flex: 1;
}
.pv2-tech-no {
 font-family: var(--font-display);
 font-weight: 900;
 font-style: italic;
 font-size: clamp(36px, 3.6vw, 48px);
 line-height: 1;
 letter-spacing: -0.03em;
 color: var(--brass-400);
}
.pv2-tech-name {
 font-family: var(--font-heading);
 font-weight: 700;
 font-size: clamp(20px, 1.8vw, 24px);
 letter-spacing: -0.01em;
 color: var(--fg-on-dark-1);
 margin: 0;
}
.pv2-tech-desc {
 font-family: var(--font-body);
 font-size: 14px;
 line-height: 1.6;
 color: var(--fg-on-dark-2);
 margin: 0;
 flex: 1;
 text-wrap: pretty;
}
.pv2-tech-meta {
 font-family: var(--font-body);
 font-size: var(--fs-nano);
 font-weight: 700;
 letter-spacing: var(--ls-eyebrow);
 text-transform: uppercase;
 color: var(--brass-400);
 padding-top: 14px;
 border-top: 1px solid rgba(255, 255, 255, 0.10);
 margin-top: 6px;
}


/* ─── Full Specs, editorial 2-column table ────────────────────── */
.pv2-specs-section { padding: clamp(80px, 9vw, 120px) 0; }

.pv2-specs-grid {
 display: grid;
 grid-template-columns: repeat(2, 1fr);
 gap: 0 clamp(48px, 6vw, 96px);
 margin-top: clamp(16px, 2vw, 24px);
}

.pv2-specs-col {
 margin: 0;
 padding: 0;
 display: flex;
 flex-direction: column;
}

.pv2-spec-row {
 display: grid;
 grid-template-columns: 1fr auto;
 gap: 24px;
 padding: 18px 0;
 border-top: 1px solid var(--r2-rule);
 align-items: baseline;
}
.pv2-spec-row:last-child { border-bottom: 1px solid var(--r2-rule); }

.pv2-spec-row dt {
 font-family: var(--font-body);
 font-size: 13px;
 font-weight: 500;
 letter-spacing: 0.04em;
 color: var(--fg-on-light-3);
}
.pv2-spec-row dd {
 font-family: var(--font-heading);
 font-weight: 600;
 font-size: 15px;
 letter-spacing: -0.005em;
 color: var(--fg-on-light-1);
 margin: 0;
 text-align: right;
 font-variant-numeric: tabular-nums;
}

.pv2-specs-note {
 margin: clamp(32px, 4vw, 48px) 0 0;
 font-family: var(--font-body);
 font-size: 13px;
 line-height: 1.6;
 color: var(--fg-on-light-3);
 max-width: 720px;
 text-wrap: pretty;
}
.pv2-specs-link {
 color: var(--brass-600);
 text-decoration: none;
 border-bottom: 1px solid var(--brass-500);
 padding-bottom: 1px;
 transition: color 200ms;
}
.pv2-specs-link:hover { color: var(--brass-700, #8A6F40); }


/* ─── Responsive ─────────────────────────────────────────────── */
@media (max-width: 1100px) {
 .pv2-price-row {
 grid-template-columns: 1fr;
 gap: 24px;
 align-items: stretch;
 }
 .pv2-hero-ctas { flex-direction: row; flex-wrap: wrap; }
 .pv2-cta-primary, .pv2-cta-secondary { flex: 1 1 auto; }

 .pv2-tech-grid { grid-template-columns: 1fr; }

 .pv2-specs-grid { grid-template-columns: 1fr; gap: 0; }
}

@media (max-width: 720px) {
 .pv2-hero-ctas { flex-direction: column; }
 .pv2-cta-primary, .pv2-cta-secondary { width: 100%; }
}

/* ─── Sticky CTA (G7.5) — pasek „Wyceń ten model" po przewinięciu hero ─── */
.sn-sticky-cta {
 position: fixed; left: 0; right: 0; bottom: 0; z-index: 80;
 background: var(--ink-900, #14110d); color: #f3efe7;
 border-top: 1px solid rgba(233,201,138,.18);
 box-shadow: 0 -8px 30px rgba(20,17,13,.28);
 transform: translateY(110%); transition: transform 280ms ease;
 padding: 10px 0;
}
.sn-sticky-cta.is-visible { transform: translateY(0); }
.sn-sticky-inner { display: flex; align-items: center; gap: 16px; }
.sn-sticky-thumb {
 width: 46px; height: 46px; object-fit: contain; flex: none;
 background: rgba(255,255,255,.06); border-radius: 6px; padding: 4px;
}
.sn-sticky-meta { display: flex; flex-direction: column; gap: 1px; margin-right: auto; min-width: 0; }
.sn-sticky-title {
 font-family: var(--font-heading); font-weight: 600; font-size: 15px; color: #fff;
 white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.sn-sticky-price { font-family: var(--font-body); font-size: 12.5px; color: var(--brass-300, #e9c98a); }
.sn-sticky-action {
 flex: none; display: inline-flex; align-items: center; gap: 9px;
 padding: 13px 22px; font-size: 13px;
}
.sn-sticky-action svg { width: 13px; height: 13px; }
@media (max-width: 640px) {
 .sn-sticky-thumb { display: none; }
 .sn-sticky-price { display: none; }
 .sn-sticky-action { padding: 12px 16px; }
 .sn-sticky-title { font-size: 14px; }
}

/* ── ADR-011 pkt 3: „Tak może wyglądać z Twoim znakiem" (sekcja konwersji na ciemnym panelu) ── */
.pv2-brand-lede {
 max-width: 720px; margin: clamp(12px,1.6vw,18px) 0 clamp(28px,3vw,40px);
 font-family: var(--font-body); font-size: clamp(15px,1.3vw,18px); line-height: 1.6;
 color: var(--fg-on-dark-2); text-wrap: pretty;
}
.pv2-brand-lede strong { color: var(--fg-on-dark-1); font-weight: 600; }
.pv2-brand-stage {
 display: grid; grid-template-columns: minmax(0,0.9fr) minmax(0,1.1fr);
 gap: clamp(24px,3vw,44px); align-items: start;
}
.pv2-brand-shot {
 position: relative; margin: 0; border-radius: 4px; overflow: hidden;
 background: var(--ink-800, #14110d); border: 1px solid rgba(255,255,255,0.08);
 aspect-ratio: 4 / 3; display: flex; align-items: center; justify-content: center;
}
.pv2-brand-shot img { width: 100%; height: 100%; object-fit: contain; padding: 24px; display: block; }
.pv2-brand-shot-glyph { font-family: var(--font-display); font-style: italic; font-weight: 900;
 font-size: 96px; color: rgba(255,255,255,0.12); }
.pv2-brand-tag {
 position: absolute; left: 12px; bottom: 12px; right: 12px;
 padding: 8px 12px; border-radius: 3px;
 background: rgba(20,17,13,0.72); backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px);
 font-family: var(--font-body); font-size: 11.5px; font-weight: 600; line-height: 1.35;
 letter-spacing: .01em; color: var(--fg-on-dark-2);
}
.pv2-brand-copy { display: flex; flex-direction: column; gap: 14px; }
.pv2-brand-eyebrow {
 font-family: var(--font-body); font-size: 10px; font-weight: 700;
 letter-spacing: var(--ls-eyebrow); text-transform: uppercase; color: var(--brass-400);
}
.pv2-brand-techs { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 12px; }
.pv2-brand-tech {
 display: flex; flex-wrap: wrap; align-items: baseline; gap: 6px 10px;
 padding-bottom: 12px; border-bottom: 1px dotted rgba(255,255,255,0.14);
}
.pv2-brand-tech-name {
 font-family: var(--font-heading); font-weight: 600; font-size: 15px; color: var(--fg-on-dark-1);
 text-decoration: none;
}
.pv2-brand-tech-name:hover { color: var(--brass-400); }
.pv2-brand-tech-meta {
 font-family: var(--font-body); font-size: 11px; font-weight: 700; letter-spacing: .02em;
 text-transform: uppercase; color: var(--brass-300); white-space: nowrap;
}
.pv2-brand-tech-desc { flex: 1 1 100%; font-family: var(--font-body); font-size: 12.5px;
 line-height: 1.5; color: var(--fg-on-dark-3); text-wrap: pretty; }
.pv2-brand-links { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; margin-top: 4px; }
.pv2-brand-links-lbl { font-family: var(--font-body); font-size: 12px; color: var(--fg-on-dark-3); }
.pv2-brand-link {
 display: inline-flex; align-items: center; gap: 7px;
 font-family: var(--font-heading); font-size: 13px; font-weight: 600; color: var(--fg-on-dark-1);
 text-decoration: none; padding: 8px 14px; border-radius: 999px;
 border: 1px solid rgba(255,255,255,0.16); background: rgba(255,255,255,0.03);
}
.pv2-brand-link:hover { border-color: var(--brass-400); color: var(--brass-300); }
.pv2-brand-link svg { width: 13px; height: 13px; }
.pv2-brand-cta { align-self: flex-start; margin-top: 8px; }
.pv2-brand-cta svg { width: 16px; height: 16px; }
@media (max-width: 860px) {
 .pv2-brand-stage { grid-template-columns: 1fr; gap: clamp(20px,4vw,28px); }
}