/* outlet.css — ADR-011 aneks C: strona „szkło ze stocku" (Outlet).
Wizualnie ODRÓŻNIONA od katalogu premium: cieplejszy amber, estetyka „mądrej okazji",
nie bazar. Reużywa szkieletu sn-r2-*/sn-kt2-* + własne sn-outlet-*. */
/* ── Hero card (prawa strona) ── */
.sn-outlet-hero-card {
position: relative; width: 100%; aspect-ratio: 1 / 1;
display: flex; flex-direction: column; justify-content: center; gap: 14px;
padding: clamp(28px, 3vw, 48px); border-radius: var(--radius-tight);
background:
radial-gradient(circle at 0% 100%, rgba(214, 158, 74, 0.18) 0%, transparent 55%),
linear-gradient(160deg, #2a2118 0%, var(--ink-800, #14110d) 70%);
border: 1px solid rgba(214, 158, 74, 0.22);
overflow: hidden;
}
.sn-outlet-hero-eyebrow {
font-family: var(--font-body); font-size: 10px; font-weight: 700;
letter-spacing: var(--ls-eyebrow); text-transform: uppercase; color: var(--brass-400, #d9b066);
}
.sn-outlet-hero-big {
font-family: var(--font-display); font-weight: 800; font-style: italic;
font-size: clamp(28px, 3.4vw, 44px); line-height: 1.02; letter-spacing: -0.02em;
color: #fff; margin: 0;
}
.sn-outlet-hero-big em { color: var(--brass-300, #e9c98a); font-style: italic; }
.sn-outlet-hero-note {
font-family: var(--font-body); font-size: 13.5px; line-height: 1.55;
color: var(--fg-on-dark-2); margin: 0; max-width: 36ch; text-wrap: pretty;
}
/* ── Ramka framująca (pas pod hero) ── */
.sn-outlet-ribbon { background: linear-gradient(90deg, #f3e7d0 0%, #efe0c4 100%); border-top: 2px solid var(--brass-500, #c79a4e); border-bottom: 1px solid rgba(176,144,88,0.35); }
.sn-outlet-ribbon-in { display: flex; align-items: center; gap: 16px; padding: 18px 0; }
.sn-outlet-ribbon-ic {
flex: none; width: 30px; height: 30px; border-radius: 50%;
display: inline-flex; align-items: center; justify-content: center;
background: var(--brass-600, #a9802f); color: #fff;
font-family: var(--font-display); font-weight: 900; font-style: italic; font-size: 18px;
}
.sn-outlet-ribbon-txt {
margin: 0; font-family: var(--font-body); font-size: clamp(13px, 1.1vw, 15px); line-height: 1.5;
color: #5a4423;
}
.sn-outlet-ribbon-txt strong { color: #3d2d14; font-weight: 700; }
/* ── Empty-state ── */
.sn-outlet-empty {
max-width: 760px; margin: clamp(20px,2.5vw,32px) 0 clamp(28px,3vw,40px);
padding: clamp(28px, 4vw, 48px);
border: 1px solid rgba(176,144,88,0.30); border-radius: 12px;
background: linear-gradient(180deg, rgba(243,231,208,0.5) 0%, var(--paper-2, #f6f4ef) 100%);
}
.sn-outlet-empty-eyebrow {
display: inline-block; margin-bottom: 12px;
font-family: var(--font-body); font-size: 12px; font-weight: 700;
letter-spacing: var(--ls-loose, .08em); text-transform: uppercase; color: var(--brass-600, #a9802f);
}
.sn-outlet-empty-h {
font-family: var(--font-heading); font-weight: 700; font-size: clamp(22px, 2.4vw, 30px);
line-height: 1.15; letter-spacing: -0.01em; color: var(--fg-on-light-1); margin: 0 0 12px;
}
.sn-outlet-empty-p {
font-family: var(--font-body); font-size: clamp(15px,1.3vw,17px); line-height: 1.6;
color: var(--fg-on-light-2); margin: 0 0 24px; text-wrap: pretty;
}
.sn-outlet-empty-acts { display: flex; flex-wrap: wrap; align-items: center; gap: 14px; }
.sn-outlet-empty-link {
font-family: var(--font-heading); font-size: 14px; font-weight: 600; color: var(--brass-600, #a9802f);
text-decoration: none; padding: 10px 14px; border: 1px solid var(--brass-300, #e0c79a); border-radius: 8px;
}
.sn-outlet-empty-link:hover { background: rgba(169,128,47,0.08); }
/* ── Siatka kafelków (szkielet docelowy, teraz ghost „wkrótce") ── */
.sn-outlet-grid {
display: grid; grid-template-columns: repeat(3, 1fr); gap: clamp(16px, 2vw, 24px);
margin-top: clamp(20px, 2.5vw, 32px);
}
.sn-outlet-tile {
display: flex; flex-direction: column;
border: 1px solid rgba(176,144,88,0.28); border-radius: 8px; overflow: hidden;
background: #fff;
}
.sn-outlet-tile-img {
position: relative; aspect-ratio: 4 / 3;
background:
repeating-linear-gradient(135deg, transparent 0, transparent 14px, rgba(176,144,88,0.06) 14px, rgba(176,144,88,0.06) 15px),
#f3ece0;
display: flex; align-items: flex-start; justify-content: flex-end;
}
.sn-outlet-tile-badge {
margin: 10px; padding: 4px 10px; border-radius: 999px;
background: var(--brass-600, #a9802f); color: #fff;
font-family: var(--font-body); font-size: 10px; font-weight: 700;
letter-spacing: var(--ls-eyebrow); text-transform: uppercase;
}
.sn-outlet-tile-body { padding: 16px 18px 20px; display: flex; flex-direction: column; gap: 4px; }
.sn-outlet-tile-kind {
font-family: var(--font-display); font-weight: 700; font-style: italic; font-size: 18px;
color: var(--fg-on-light-1);
}
.sn-outlet-tile-meta { font-family: var(--font-body); font-size: 12.5px; color: var(--fg-on-light-3); }
.sn-outlet-tile.is-ghost { opacity: 0.62; }
@media (max-width: 900px) { .sn-outlet-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 560px) {
.sn-outlet-grid { grid-template-columns: 1fr; }
.sn-outlet-ribbon-in { align-items: flex-start; }
}
/* ════════════════════════════════════════════════════════════════════
G20 — LANDING OUTLETU per kategoria (np. /outlet/szklanki-do-piwa/).
Port makiety Claude Design „Outlet · Szklanki do piwa", zscope'owany
pod .sn-outlet2. Pełny full-bleed breakout (main motywu = constrained).
Fonty (Anton/Exo/Inter) ładuje już globalny sn-fonts.
════════════════════════════════════════════════════════════════════ */
.sn-outlet2{
/* lokalna paleta makiety (świadomie cieplejsza niż katalog) */
--o-paper:#F4EFE7; --o-paper-2:#EBE3D6;
--o-line:#2B2927; --o-line-soft:#C7BCAA;
--o-ink-1:#1A1612; --o-ink-2:#56524E; --o-ink-3:#8A8270;
--o-gold:#A37C3D; --o-ember:#C2521A; --o-white:#FFFFFF;
--o-mono:ui-monospace,"SF Mono",Menlo,Consolas,monospace;
/* full-bleed: main motywu jest constrained → wyłamujemy na pełną szerokość */
width:100vw; margin-left:calc(50% - 50vw); overflow-x:clip;
background:var(--o-paper); color:var(--o-ink-1);
font-family:"Inter",system-ui,sans-serif; -webkit-font-smoothing:antialiased;
}
.sn-outlet2 *{box-sizing:border-box;}
/* usuń „szary pasek" pod menu = blockGap między headerem a treścią (prześwituje ciemne body) */
.wp-site-blocks > main.wp-block-group:has(.sn-outlet2),
main.wp-block-group:has(.sn-outlet2){margin-block-start:0 !important;padding-block-start:0 !important;}
/* ── HERO — rama pełnej szerokości; ZDJĘCIE w kontenerze (cała szklanka widoczna na wysokość).
Boczne gradienty czerń→przezroczystość wchodzą z brzegów okna NA zdjęcie (przyciemniają krawędzie)
+ ciemny pas u góry (spójny z resztą serwisu). Teksty ujednolicone z money pages. ── */
.sn-outlet2 .page-hero{position:relative;width:100%;overflow:hidden;background:#0d0a07;}
.sn-outlet2 .page-hero .bg{display:block;width:min(1280px,100%);height:auto;aspect-ratio:2501/1061;margin:0 auto;}
/* pas u góry + boczne gradienty WCHODZĄCE na zdjęcie (lewa ~100px, prawa ~50px, czerń na samej
krawędzi → brzeg znika) + przyciemnienie pod tekstem. Stopki liczone calc od krawędzi zdjęcia. */
.sn-outlet2 .page-hero .scrim{position:absolute;inset:0;z-index:1;pointer-events:none;background:
linear-gradient(180deg, rgba(13,10,7,0.85) 0%, rgba(13,10,7,0) 30%),
linear-gradient(90deg,
rgba(13,10,7,0.96) 0,
rgba(13,10,7,0.96) calc((100% - min(1280px,100%))/2),
rgba(13,10,7,0.36) calc((100% - min(1280px,100%))/2 + 130px),
rgba(13,10,7,0.14) calc((100% - min(1280px,100%))/2 + 340px),
rgba(13,10,7,0) calc((100% - min(1280px,100%))/2 + 560px),
rgba(13,10,7,0) calc(100% - (100% - min(1280px,100%))/2 - 180px),
rgba(13,10,7,0.40) calc(100% - (100% - min(1280px,100%))/2 - 60px),
rgba(13,10,7,0.96) calc(100% - (100% - min(1280px,100%))/2),
rgba(13,10,7,0.96) 100%),
linear-gradient(90deg, rgba(13,10,7,0.55) 0%, rgba(13,10,7,0.10) 42%, rgba(13,10,7,0) 60%);}
/* WCIĘCIE + teksty 1:1 z money page hero (.sn-mga): inner 1200/clamp(24,2.5vw,44), h1 Anton */
.sn-outlet2 .page-hero .inner{position:absolute;inset:0;z-index:2;max-width:1200px;margin:0 auto;padding:0 clamp(24px,2.5vw,44px);width:100%;display:flex;flex-direction:column;justify-content:center;}
.sn-outlet2 .page-hero .col{max-width:640px;}
/* eyebrow = .sn-mga__eyebrow: Inter 12/0.22em/600, kreska 30×1 */
.sn-outlet2 .hero-eyebrow{font-family:"Inter",sans-serif;font-weight:600;font-size:12px;letter-spacing:0.22em;text-transform:uppercase;color:#E6803C;display:inline-flex;align-items:center;gap:10px;margin-bottom:22px;}
.sn-outlet2 .hero-eyebrow::before{content:"";width:30px;height:1px;background:var(--o-ember);}
/* h1 = .sn-mga__h1: Anton (=--font-poster) wersaliki, clamp(42,4.8vw,80), 400, lh1.06, ls.005 */
.sn-outlet2 h1.hero-h{font-family:"Anton",system-ui,sans-serif;font-weight:400;text-transform:uppercase;font-size:clamp(42px,4.8vw,80px);line-height:1.06;letter-spacing:0.005em;margin:0;color:#fff;}
/* lede = .sn-mga__lede: clamp(15,1.15vw,18), lh1.62, 47ch */
.sn-outlet2 .hero-lead{font-family:"Inter",sans-serif;font-size:clamp(15px,1.15vw,18px);line-height:1.62;color:#C8C0B2;margin:24px 0 0;max-width:47ch;text-wrap:pretty;}
.sn-outlet2 .hero-lead b{color:#fff;font-weight:600;}
.sn-outlet2 .hero-jump{display:inline-flex;align-items:center;gap:10px;margin-top:28px;font-weight:600;font-size:13px;letter-spacing:0.14em;text-transform:uppercase;color:#fff;text-decoration:none;}
.sn-outlet2 .hero-jump .dot{width:30px;height:30px;border:1.5px solid rgba(255,255,255,0.4);border-radius:999px;display:flex;align-items:center;justify-content:center;}
.sn-outlet2 .hero-jump:hover .dot{background:var(--o-ember);border-color:var(--o-ember);}
/* ── SEKCJA PRODUKTU (moodboard) ── */
.sn-outlet2 .prod-sec{background:var(--o-paper);padding:clamp(52px,7vw,96px) 0 clamp(60px,8vw,104px);}
/* wyrównanie do .sn-container (1280/48) — żeby treść l1:1 z linią logo, bez „wcięcia" */
.sn-outlet2 .prod-sec .wrap{max-width:1280px;margin:0 auto;padding:0 clamp(24px,4vw,48px);}
.sn-outlet2 .chap{display:flex;align-items:center;gap:12px;margin-bottom:26px;}
.sn-outlet2 .chap .no{font-family:var(--o-mono);font-size:14px;font-weight:700;color:var(--o-ember);letter-spacing:0.1em;}
.sn-outlet2 .chap .lbl{font-weight:600;font-size:13px;letter-spacing:0.2em;text-transform:uppercase;color:var(--o-ink-3);}
.sn-outlet2 .chap .ln{flex:1;height:1px;background:var(--o-line-soft);}
.sn-outlet2 .prod-head{display:flex;justify-content:space-between;align-items:flex-end;gap:24px;margin-bottom:30px;flex-wrap:wrap;}
.sn-outlet2 .prod-name{font-family:"Exo",sans-serif;font-weight:700;font-size:clamp(26px,3vw,38px);letter-spacing:-0.015em;color:var(--o-ink-1);margin:0;line-height:1.04;}
.sn-outlet2 .prod-name .ml{color:var(--o-ink-3);font-weight:400;}
.sn-outlet2 .prod-orna{display:flex;align-items:center;gap:14px;margin-top:14px;}
.sn-outlet2 .prod-orna .rule{height:1px;width:46px;background:var(--o-gold);flex:none;}
.sn-outlet2 .prod-orna p{margin:0;font-family:"Exo",sans-serif;font-style:italic;font-weight:400;font-size:18px;color:var(--o-ink-2);line-height:1.45;}
.sn-outlet2 .prod-tag{font-weight:500;text-transform:uppercase;font-size:13px;letter-spacing:0.12em;color:var(--o-ink-3);border:1.5px solid var(--o-line-soft);border-radius:999px;padding:7px 14px;white-space:nowrap;}
/* kafle zdjęć */
.sn-outlet2 .ph{position:relative;border-radius:2px;overflow:hidden;display:flex;align-items:center;justify-content:center;min-height:0;}
.sn-outlet2 .ph img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;display:block;max-width:none;}
.sn-outlet2 .ph.framed{background:var(--o-white);border:1.5px solid var(--o-gold);padding:16px;}
.sn-outlet2 .ph.framed img{position:relative;inset:auto;object-fit:contain;}
.sn-outlet2 .scene{position:absolute;top:0;left:0;z-index:2;white-space:nowrap;font-size:12px;font-weight:600;letter-spacing:0.13em;text-transform:uppercase;padding:6px 10px;color:var(--o-white);background:rgba(43,41,39,0.82);}
.sn-outlet2 .scene.gold{background:var(--o-gold);}
.sn-outlet2 .scene.ember{background:rgba(194,82,26,0.92);}
.sn-outlet2 .cluster{display:grid;grid-template-columns:repeat(12,1fr);grid-auto-rows:42px;gap:16px;}
.sn-outlet2 .cluster > *{min-width:0;}
.sn-outlet2 .vrule{grid-area:1/1/8/2;justify-self:center;width:1.5px;background:linear-gradient(var(--o-line-soft),transparent);}
.sn-outlet2 .scap{display:flex;flex-direction:column;justify-content:flex-start;gap:8px;padding-top:6px;}
.sn-outlet2 .scap .code{font-family:var(--o-mono);font-size:13px;letter-spacing:0.14em;text-transform:uppercase;color:var(--o-ink-3);}
.sn-outlet2 .scap .nm{font-family:"Exo",sans-serif;font-weight:600;font-size:23px;letter-spacing:-0.01em;color:var(--o-ink-1);line-height:1.05;}
.sn-outlet2 .scap .ds{font-size:17px;color:var(--o-ink-2);line-height:1.55;}
.sn-outlet2 .scap .price-blk{display:flex;flex-direction:column;gap:4px;margin-top:10px;}
.sn-outlet2 .scap .price-lbl{font-weight:600;font-size:13px;letter-spacing:0.14em;text-transform:uppercase;color:var(--o-ink-3);}
.sn-outlet2 .scap .price-val{font-family:"Exo",sans-serif;font-weight:700;font-size:clamp(30px,3vw,38px);line-height:1;letter-spacing:-0.02em;color:var(--o-ink-1);display:inline-flex;align-items:baseline;gap:5px;}
.sn-outlet2 .scap .price-val .cur{font-weight:500;font-size:0.46em;letter-spacing:0.02em;color:var(--o-gold);text-transform:lowercase;}
.sn-outlet2 .word{display:flex;flex-direction:column;justify-content:center;gap:10px;}
.sn-outlet2 .word .big{font-family:"Exo",system-ui,sans-serif;font-weight:800;text-transform:uppercase;font-size:clamp(24px,2.6vw,32px);line-height:1.08;letter-spacing:-0.005em;color:var(--o-ink-1);}
.sn-outlet2 .word .big em{font-style:italic;font-weight:800;color:var(--o-ember);}
.sn-outlet2 .word .mono-sm{font-weight:600;font-size:13px;letter-spacing:0.16em;text-transform:uppercase;color:var(--o-ink-3);}
.sn-outlet2 .word .hr{height:1px;background:var(--o-line-soft);width:40px;}
.sn-outlet2 .incl-txt{align-self:flex-start;display:inline-flex;align-items:center;gap:8px;color:#876230;font-weight:600;font-size:16px;letter-spacing:0.02em;}
.sn-outlet2 .incl-txt::before{content:"";width:7px;height:7px;border-radius:999px;background:var(--o-gold);flex:none;}
/* kafel producenta (Ritzenhoff) */
.sn-outlet2 .producer-tile{display:flex;flex-direction:column;justify-content:flex-start;gap:12px;padding-left:2px;}
.sn-outlet2 .producer-tile .pt-eye{font-weight:600;font-size:13px;letter-spacing:0.16em;text-transform:uppercase;color:var(--o-ink-3);}
.sn-outlet2 .producer-tile .pt-logo img{width:100%;max-width:188px;height:auto;display:block;mix-blend-mode:multiply;}
.sn-outlet2 .producer-tile .pt-txt{margin:0;font-size:16px;line-height:1.55;color:var(--o-ink-2);text-wrap:pretty;}
.sn-outlet2 .producer-tile .pt-meta{font-family:var(--o-mono);font-size:13px;letter-spacing:0.08em;color:var(--o-ink-3);}
/* ── CENNIK ── */
.sn-outlet2 .price-sec{margin-top:clamp(46px,6vw,76px);}
/* Exo (sekcyjne H2 jak .sn-kt2-h) — Anton tylko w hero */
.sn-outlet2 .price-cta{font-family:"Exo",system-ui,sans-serif;font-weight:900;text-transform:none;font-size:clamp(32px,4vw,56px);line-height:1.06;letter-spacing:-0.025em;color:var(--o-ink-1);margin:0 0 28px;}
.sn-outlet2 .price-cta em{font-style:italic;font-weight:900;color:var(--o-gold);}
.sn-outlet2 .ptable-wrap{overflow-x:auto;}
.sn-outlet2 .ptable{width:100%;border-collapse:collapse;min-width:560px;}
.sn-outlet2 .ptable thead th{font-weight:600;font-size:13px;letter-spacing:0.12em;text-transform:uppercase;color:var(--o-ink-3);text-align:right;padding:0 8px 14px;border-bottom:2px solid var(--o-line);}
.sn-outlet2 .ptable thead th.tech-h{text-align:left;color:var(--o-ink-1);padding-left:0;}
.sn-outlet2 .ptable thead th .qsub{display:block;font-weight:500;font-size:12px;letter-spacing:0.08em;color:var(--o-ink-3);margin-top:3px;text-transform:none;}
.sn-outlet2 .ptable tbody td{padding:20px 0;border-bottom:1px solid var(--o-line-soft);text-align:right;font-family:"Exo",sans-serif;font-weight:700;font-size:clamp(19px,1.9vw,23px);letter-spacing:-0.01em;color:var(--o-ink-1);white-space:nowrap;}
.sn-outlet2 .ptable tbody td .u{font-weight:500;font-size:12px;color:var(--o-ink-3);margin-left:3px;font-family:"Inter",sans-serif;}
.sn-outlet2 .ptable tbody td.tech{text-align:left;}
.sn-outlet2 .ptable .tech-cell{display:flex;flex-direction:column;gap:4px;}
.sn-outlet2 .ptable .tech-cell .t-nm{font-family:"Exo",sans-serif;font-weight:600;font-size:18px;letter-spacing:-0.01em;color:var(--o-ink-1);}
.sn-outlet2 .ptable .tech-cell .t-tag{display:inline-flex;align-items:center;gap:7px;font-weight:600;font-size:13px;letter-spacing:0.1em;text-transform:uppercase;}
.sn-outlet2 .ptable .tech-cell .t-tag::before{content:"";width:7px;height:7px;border-radius:999px;flex:none;}
.sn-outlet2 .ptable .tech-cell .t-tag.gr{color:#876230;}.sn-outlet2 .ptable .tech-cell .t-tag.gr::before{background:var(--o-gold);}
.sn-outlet2 .ptable .tech-cell .t-tag.nd{color:var(--o-ember);}.sn-outlet2 .ptable .tech-cell .t-tag.nd::before{background:var(--o-ember);}
.sn-outlet2 .ptable tbody tr:last-child td{border-bottom:2px solid var(--o-line);}
/* CENNIK: instrukcja 3-krokowa + KLIKALNE kafelki cen (klik → /kontakt/ z prefillem zapytania) */
.sn-outlet2 .ptable-steps{display:flex;flex-wrap:wrap;gap:12px;margin:0 0 28px;}
.sn-outlet2 .ptable-step{display:inline-flex;align-items:center;gap:10px;font-size:15px;line-height:1.3;color:var(--o-ink-2);background:#fff;border:1px solid var(--o-line-soft);border-radius:999px;padding:9px 18px 9px 9px;}
.sn-outlet2 .ptable-step b{flex:none;width:25px;height:25px;display:inline-flex;align-items:center;justify-content:center;border-radius:999px;background:var(--o-ember);color:#fff;font-family:"Exo",sans-serif;font-weight:700;font-size:14px;}
.sn-outlet2 .ptable-step em{font-style:normal;color:var(--o-ink-1);font-weight:600;}
/* każda cena = wyraźny przycisk; klik prowadzi do formularza z gotowym zapytaniem */
.sn-outlet2 .ptable tbody td{border-bottom:none;}
.sn-outlet2 .ptable tbody tr:last-child td{border-bottom:none;}
.sn-outlet2 .ptable tbody td.tech{padding:14px 16px 14px 0;vertical-align:middle;}
.sn-outlet2 .ptable tbody td:not(.tech){padding:7px 5px;}
.sn-outlet2 .ptable .ptd{display:flex;align-items:baseline;justify-content:flex-end;gap:3px;padding:14px 16px;background:rgba(163,124,61,0.09);border:1.5px solid rgba(163,124,61,0.34);border-radius:8px;text-decoration:none;color:var(--o-ink-1);transition:background .14s ease,border-color .14s ease,color .14s ease,transform .14s ease,box-shadow .14s ease;cursor:pointer;}
.sn-outlet2 .ptable .ptd:hover,.sn-outlet2 .ptable .ptd:focus-visible{background:var(--o-gold);border-color:var(--o-gold);color:#1A1612;transform:translateY(-1px);outline:none;box-shadow:0 5px 16px rgba(163,124,61,0.30);}
.sn-outlet2 .ptable .ptd:hover .u,.sn-outlet2 .ptable .ptd:focus-visible .u{color:#3d2d14;}
.sn-outlet2 .price-legal{margin-top:28px;display:flex;flex-direction:column;gap:6px;}
.sn-outlet2 .price-legal p{margin:0;font-size:14.5px;line-height:1.6;color:var(--o-ink-3);max-width:96ch;text-wrap:pretty;}
.sn-outlet2 .price-legal p.vat{font-weight:600;color:var(--o-ink-2);}
/* ── RESPONSYWNOŚĆ ── */
@media(max-width:880px){
/* na telefonie zdjęcie w naturalnej proporcji byłoby za niskie → wracamy do cover + min-height */
.sn-outlet2 .page-hero{min-height:440px;}
.sn-outlet2 .page-hero .bg{position:absolute;inset:0;width:100%;height:100%;margin:0;aspect-ratio:auto;object-fit:cover;object-position:72% center;}
/* mobile: bez bocznych gradientów (tekst potrzebuje szerokości) — pas u góry + dół pod tekstem */
.sn-outlet2 .page-hero .scrim{background:linear-gradient(180deg, rgba(13,10,7,0.80) 0%, rgba(13,10,7,0) 26%),linear-gradient(0deg, rgba(13,10,7,0.94) 6%, rgba(13,10,7,0.55) 46%, rgba(13,10,7,0.16) 100%);}
.sn-outlet2 .page-hero .inner{justify-content:flex-end;padding:36px 24px 42px;}
}
@media(max-width:780px){
.sn-outlet2 .cluster{grid-auto-rows:30px;gap:10px;}
}
/* Moodboard nie reflowuje (siatka 12-kol z grid-area) → stack 2-kolumnowy. */
@media(max-width:720px){
.sn-outlet2 .cluster{grid-template-columns:1fr 1fr;grid-auto-rows:auto;gap:12px;}
.sn-outlet2 .cluster > *{grid-area:auto !important;}
.sn-outlet2 .vrule{display:none;}
.sn-outlet2 .ph{aspect-ratio:1/1;}
.sn-outlet2 .ph.framed{aspect-ratio:4/5;}
.sn-outlet2 .scap,
.sn-outlet2 .word,
.sn-outlet2 .producer-tile{grid-column:1 / -1 !important;}
.sn-outlet2 .word{align-items:flex-start !important;text-align:left !important;margin-top:2px;}
.sn-outlet2 .word .incl-txt{align-self:flex-start !important;}
}
@media(max-width:420px){
.sn-outlet2 .cluster{grid-template-columns:1fr;}
}
/* ════════════════════════════════════════════════════════════════════
G20 whisky — moodboard WIELOPRODUKTOWY w stylu kolażu piwa (.cluster):
4 packshoty jako kafle framed + placeholdery scen (do dorenderowania) +
edytorska legenda fasonów z opisami pod kolażem.
════════════════════════════════════════════════════════════════════ */
/* placeholder sceny WEWNĄTRZ kolażu (kafel .ph bez ![]()
) — do zastąpienia renderem */
.sn-outlet2 .ph.wph{background:repeating-linear-gradient(135deg,transparent 0,transparent 12px,rgba(163,124,61,0.07) 12px,rgba(163,124,61,0.07) 13px),var(--o-paper-2);border:1.5px dashed var(--o-line-soft);}
.sn-outlet2 .ph.wph .wph-note{position:relative;z-index:1;font-weight:600;font-size:12.5px;letter-spacing:0.04em;color:var(--o-ink-3);text-align:center;padding:0 12px;}
/* legenda fasonów pod kolażem — edytorska (nie kafle) */
.sn-outlet2 .wlegend{display:grid;grid-template-columns:repeat(4,1fr);gap:22px 32px;margin-top:clamp(30px,4vw,48px);padding-top:26px;border-top:1px solid var(--o-line-soft);}
.sn-outlet2 .wlegend-3{grid-template-columns:repeat(3,1fr);}
.sn-outlet2 .wleg{display:flex;flex-direction:column;gap:6px;}
.sn-outlet2 .wleg-top{display:flex;align-items:baseline;gap:10px;flex-wrap:wrap;}
.sn-outlet2 .wleg-nm{font-family:"Exo",sans-serif;font-weight:700;font-size:19px;letter-spacing:-0.01em;color:var(--o-ink-1);}
.sn-outlet2 .wleg-cap{font-family:var(--o-mono);font-size:12px;letter-spacing:0.06em;color:var(--o-gold);}
.sn-outlet2 .wleg-code{font-family:var(--o-mono);font-size:11px;letter-spacing:0.1em;text-transform:uppercase;color:var(--o-ink-3);white-space:nowrap;}
.sn-outlet2 .wleg-ds{font-size:14.5px;line-height:1.5;color:var(--o-ink-2);text-wrap:pretty;}
.sn-outlet2 .wleg-brand{display:flex;align-items:center;gap:10px;margin-top:7px;}
.sn-outlet2 .wleg-brand img{height:15px;width:auto;opacity:0.8;mix-blend-mode:multiply;}
.sn-outlet2 .wleg-brand-meta{font-family:var(--o-mono);font-size:11px;letter-spacing:0.06em;color:var(--o-ink-3);}
@media(max-width:900px){.sn-outlet2 .wlegend{grid-template-columns:repeat(2,1fr);gap:20px 32px;}}
@media(max-width:520px){.sn-outlet2 .wlegend{grid-template-columns:1fr;gap:16px;}}
/* ════════════════════════════════════════════════════════════════════
G20 — WARIANT UKŁADU „.sn-outlet3" (grid produktów + osobny pas lifestyle).
Nakładany NA .sn-outlet2 (strona nosi obie klasy) → dziedziczy hero/cennik/
typografię; tu tylko style gridu produktów i pasa lifestyle/technik.
Cel: rozdzielić „co kupuję" (grid) od „jak wygląda" (lifestyle), bo moodboard
je mieszał i klienci się gubili.
════════════════════════════════════════════════════════════════════ */
/* 01 — GRID PRODUKTÓW: karty katalogu (.sn-kt2-prod* z category-v2.css, packshot 1:1),
ale w skali money page: 3 kolumny (jak qc-grid) + typografia zrównana z .qc-card. */
.sn-outlet3 .sn-kt2-prods{grid-template-columns:repeat(3,1fr);gap:clamp(22px,2.2vw,32px) clamp(18px,1.8vw,26px);}
/* fonty karty = money page (.qc-name 21 / .qc-desc 12 / cap 15 / cena 18) */
.sn-outlet3 .sn-kt2-prod-code{font-size:11px;}
.sn-outlet3 .sn-kt2-prod-name{font-size:21px;line-height:1.05;}
.sn-outlet3 .sn-kt2-prod-desc{font-size:13px;line-height:1.5;}
.sn-outlet3 .sn-kt2-prod-cap{font-size:18px;}
.sn-outlet3 .sn-kt2-prod-cap-sub{font-size:11px;}
.sn-outlet3 .sn-kt2-prod-price{font-size:14px;}
.sn-outlet3 .sn-kt2-prod-price strong{font-size:15px;}
/* wiersz tagów technik (grawer/nadruk) — kropki jak w cenniku */
.sn-outlet3 .sn-kt2-prod-tech{display:flex;flex-wrap:wrap;gap:5px 14px;margin-top:2px;}
.sn-outlet3 .sn-kt2-prod-tech .tt{display:inline-flex;align-items:center;gap:6px;font-family:"Inter",sans-serif;font-size:12px;font-weight:600;letter-spacing:0.06em;text-transform:uppercase;}
.sn-outlet3 .sn-kt2-prod-tech .tt::before{content:"";width:6px;height:6px;border-radius:999px;flex:none;}
.sn-outlet3 .sn-kt2-prod-tech .tt.gr{color:#876230;}.sn-outlet3 .sn-kt2-prod-tech .tt.gr::before{background:var(--o-gold);}
.sn-outlet3 .sn-kt2-prod-tech .tt.nd{color:var(--o-ember);}.sn-outlet3 .sn-kt2-prod-tech .tt.nd::before{background:var(--o-ember);}
@media(max-width:820px){.sn-outlet3 .sn-kt2-prods{grid-template-columns:repeat(2,1fr);}}
@media(max-width:480px){.sn-outlet3 .sn-kt2-prods{grid-template-columns:1fr;}}
/* 02 — PAS LIFESTYLE/TECHNIK: osobno, każde zdjęcie opisane (nie udaje produktu).
Wspólny dla wariantów grid (.sn-outlet3) i listing (.sn-outlet4). */
:is(.sn-outlet3,.sn-outlet4) .lifewrap{margin-top:clamp(46px,6vw,76px);}
:is(.sn-outlet3,.sn-outlet4) .techduo{display:grid;grid-template-columns:1fr 1fr;gap:clamp(16px,2vw,24px);}
:is(.sn-outlet3,.sn-outlet4) .lb-tile{margin:0;display:flex;flex-direction:column;gap:12px;}
:is(.sn-outlet3,.sn-outlet4) .lb-tile .ph{aspect-ratio:16/10;}
:is(.sn-outlet3,.sn-outlet4) .lb-cap{font-size:15px;line-height:1.55;color:var(--o-ink-2);text-wrap:pretty;}
:is(.sn-outlet3,.sn-outlet4) .lb-cap b{color:var(--o-ink-1);font-weight:700;}
:is(.sn-outlet3,.sn-outlet4) .realstrip{display:grid;grid-template-columns:1fr 1fr;gap:clamp(16px,2vw,24px);margin-top:clamp(16px,2vw,24px);}
:is(.sn-outlet3,.sn-outlet4) .realstrip .ph{aspect-ratio:3/2;}
@media(max-width:620px){
:is(.sn-outlet3,.sn-outlet4) .techduo,:is(.sn-outlet3,.sn-outlet4) .realstrip{grid-template-columns:1fr;}
}
/* ════════════════════════════════════════════════════════════════════
G20 — WARIANT „.sn-outlet4" (LISTING: mini-landing per fason, zig-zag).
Teza: brak podstron → to jedyne miejsce decyzji zakupu, więc każdy fason
dostaje markę/korzyści/cenę/CTA. Dziedziczy hero/cennik/lifestyle po wyżej.
════════════════════════════════════════════════════════════════════ */
.sn-outlet4 .listing{display:flex;flex-direction:column;}
.sn-outlet4 .lrow{display:grid;grid-template-columns:minmax(0,0.92fr) minmax(0,1.08fr);gap:clamp(28px,4vw,64px);align-items:center;}
.sn-outlet4 .lrow + .lrow{margin-top:clamp(38px,5vw,64px);padding-top:clamp(38px,5vw,64px);border-top:1px solid var(--o-line-soft);}
.sn-outlet4 .lrow--rev .lmediacol{order:2;}
.sn-outlet4 .lmediacol{display:flex;flex-direction:column;gap:12px;min-width:0;}
.sn-outlet4 .lmedia{width:100%;} /* .sn-kt2-prod-img: kwadrat/kratka/ramka/contain */
.sn-outlet4 .lbody{display:flex;flex-direction:column;align-items:flex-start;}
.sn-outlet4 .leyebrow{display:inline-flex;align-items:center;gap:10px;font-weight:600;font-size:12px;letter-spacing:0.14em;text-transform:uppercase;color:var(--o-gold);margin-bottom:14px;}
.sn-outlet4 .leyebrow-logo{height:16px;width:auto;mix-blend-mode:multiply;opacity:0.9;}
.sn-outlet4 .leyebrow--txt{color:var(--o-ink-3);}
.sn-outlet4 .lname{font-family:"Exo",sans-serif;font-weight:700;font-size:clamp(28px,3.2vw,40px);line-height:1.02;letter-spacing:-0.02em;color:var(--o-ink-1);margin:0;}
.sn-outlet4 .lname .lcap{font-family:var(--o-mono);font-weight:400;font-size:0.4em;letter-spacing:0.02em;color:var(--o-gold);vertical-align:middle;margin-left:8px;}
.sn-outlet4 .lcode{font-family:var(--o-mono);font-size:12px;letter-spacing:0.1em;text-transform:uppercase;color:var(--o-ink-3);margin-top:8px;}
.sn-outlet4 .lpitch{font-size:16px;line-height:1.6;color:var(--o-ink-2);margin:14px 0 0;max-width:52ch;text-wrap:pretty;}
.sn-outlet4 .lbenefits{list-style:none;margin:18px 0 0;padding:0;display:flex;flex-direction:column;gap:10px;}
.sn-outlet4 .lbenefits li{position:relative;padding-left:26px;font-size:15px;line-height:1.45;color:var(--o-ink-1);text-wrap:pretty;}
.sn-outlet4 .lbenefits li::before{content:"";position:absolute;left:3px;top:2px;width:7px;height:12px;border:solid var(--o-gold);border-width:0 2px 2px 0;transform:rotate(45deg);}
.sn-outlet4 .ltech{display:flex;flex-wrap:wrap;align-items:center;gap:8px 16px;margin-top:20px;}
.sn-outlet4 .ltech .tt{display:inline-flex;align-items:center;gap:6px;font-size:12px;font-weight:600;letter-spacing:0.06em;text-transform:uppercase;}
.sn-outlet4 .ltech .tt::before{content:"";width:6px;height:6px;border-radius:999px;flex:none;}
.sn-outlet4 .ltech .tt.gr{color:#876230;}.sn-outlet4 .ltech .tt.gr::before{background:var(--o-gold);}
.sn-outlet4 .ltech .tt.nd{color:var(--o-ember);}.sn-outlet4 .ltech .tt.nd::before{background:var(--o-ember);}
.sn-outlet4 .ltech-note{font-size:12px;color:var(--o-ink-3);letter-spacing:0.02em;}
.sn-outlet4 .lfoot{display:flex;flex-wrap:wrap;align-items:center;gap:16px 28px;margin-top:24px;}
.sn-outlet4 .lprice{font-family:"Exo",sans-serif;font-weight:400;font-size:16px;color:var(--o-ink-2);display:inline-flex;align-items:baseline;gap:6px;}
.sn-outlet4 .lprice strong{font-weight:800;font-size:28px;letter-spacing:-0.02em;color:var(--o-ink-1);}
.sn-outlet4 .lprice small{font-size:12px;font-weight:500;color:var(--o-ink-3);letter-spacing:0.01em;}
.sn-outlet4 .lcta{display:inline-flex;align-items:center;gap:8px;font-weight:600;font-size:14px;letter-spacing:0.02em;color:#fff;background:var(--o-ink-1);border-radius:8px;padding:13px 22px;text-decoration:none;transition:background .15s ease,transform .15s ease;}
.sn-outlet4 .lcta:hover{background:var(--o-ember);transform:translateY(-1px);}
@media(max-width:780px){
.sn-outlet4 .lrow{grid-template-columns:1fr;gap:20px;}
.sn-outlet4 .lrow--rev .lmediacol{order:0;}
.sn-outlet4 .lmediacol{max-width:440px;}
}
/* ── pkt 10: pasek miniatur znakowania pod packshotem (placeholdery → Lightbox po zdjęciach) ── */
.sn-outlet4 .lthumbs{display:grid;grid-template-columns:repeat(4,1fr);gap:8px;}
.sn-outlet4 .lthumb{position:relative;aspect-ratio:1/1;border-radius:4px;display:flex;align-items:center;justify-content:center;text-align:center;padding:4px;overflow:hidden;}
.sn-outlet4 .lthumb.is-ph{background:repeating-linear-gradient(135deg,transparent 0,transparent 7px,rgba(163,124,61,0.10) 7px,rgba(163,124,61,0.10) 8px),var(--o-paper-2);border:1px dashed var(--o-line-soft);}
.sn-outlet4 .lthumb.is-ph span{font-size:10px;font-weight:600;letter-spacing:0.02em;color:var(--o-ink-3);line-height:1.15;}
/* realne miniatury (klik → lightbox) — 3 zdjęcia w rzędzie */
.sn-outlet4 .lthumbs.is-real{grid-template-columns:repeat(3,1fr);}
.sn-outlet4 .lthumb.is-real{padding:0;border:1px solid var(--o-line-soft);background:var(--o-paper-2);cursor:zoom-in;font:inherit;color:inherit;transition:transform .18s ease,box-shadow .18s ease;}
.sn-outlet4 .lthumb.is-real img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;display:block;}
.sn-outlet4 .lthumb.is-real:hover,.sn-outlet4 .lthumb.is-real:focus-visible{transform:translateY(-2px);box-shadow:0 6px 18px rgba(26,13,4,0.22);outline:none;}
/* lightbox (native