/* Nuova Simonelli Polska · strony modeli /ekspresy/<slug>/ i katalog /ekspresy/. Wymaga ns.css i ns-sub.css. */

/* Hero modelu: jasne tło, duży packshot */
.p-hero{background:var(--bg-2);padding:clamp(120px,12vw,170px) 0 clamp(50px,6vw,90px);overflow:hidden}
.p-hero-grid{display:grid;grid-template-columns:1fr 1.25fr;gap:clamp(20px,4vw,60px);align-items:center}
.p-hero h1{font-size:clamp(48px,6.8vw,104px);line-height:.98;letter-spacing:-.04em;margin:18px 0 20px}
.p-hero .lead{font-size:clamp(19px,1.7vw,24px);color:var(--ink);max-width:28ch}
.p-hero .btns{margin-top:34px}
.p-hero-ph img{width:100%;filter:drop-shadow(0 34px 34px rgba(0,0,0,.16));animation:machineIn 1.2s .1s var(--ease) both}
.cfgs{display:flex;flex-wrap:wrap;gap:8px;margin-top:26px}
.cfgs span{display:inline-flex;gap:8px;align-items:baseline;padding:10px 14px;border-radius:var(--r);background:var(--surface);font-size:14px;font-weight:500}
.cfgs b{font-size:11px;letter-spacing:.08em;text-transform:uppercase;color:var(--gray);font-weight:500}
@media(max-width:900px){.p-hero{padding-top:100px}.p-hero-grid{grid-template-columns:1fr}.p-hero-ph{order:-1;margin:0 -4%}}
@media(max-width:600px){.p-hero .btn{width:100%}}

/* Opis */
.p-intro-grid{display:grid;grid-template-columns:.9fr 1.1fr;gap:clamp(30px,6vw,100px);align-items:start}
.p-intro h2{margin-top:20px}
.p-cols p{color:var(--muted);font-size:18px;line-height:1.6}
.p-cols p+p{margin-top:18px}
.p-cols p:first-child{color:var(--ink);font-size:clamp(19px,1.6vw,22px);line-height:1.5}
@media(max-width:900px){.p-intro-grid{grid-template-columns:1fr}}

/* Wyróżniki: zdjęcie + dwie karty */
.p-hl-grid{display:grid;grid-template-columns:1fr 1fr;gap:var(--gap);align-items:stretch}
.p-hl-ph{position:relative;border-radius:var(--r-lg);overflow:hidden;background:var(--bg-3);min-height:520px}
.p-hl-ph img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.hl h3::first-letter{text-transform:uppercase}
.p-hl-txt{display:flex;flex-direction:column;gap:var(--gap);justify-content:center}
.p-hl-txt .eyebrow{margin-bottom:4px}
.hl{background:var(--surface);border-radius:var(--r-lg);padding:clamp(26px,3vw,44px);display:grid;grid-template-columns:auto 1fr;gap:clamp(18px,2.4vw,34px);align-items:start}
.hl .big{font-size:clamp(56px,6vw,96px);line-height:.85;font-weight:300;letter-spacing:-.05em;color:var(--accent);min-width:1.6ch}
.hl h3{margin-bottom:10px}
.hl p{color:var(--muted);font-size:16px}
@media(max-width:900px){.p-hl-grid{grid-template-columns:1fr}.p-hl-ph{min-height:0;aspect-ratio:4/5;max-height:560px;width:100%}}
@media(max-width:520px){.hl{grid-template-columns:1fr}}

/* Galeria: karuzela ze scroll-snap i kreskowymi kropkami */
.p-gal h2{margin:20px 0 clamp(24px,3vw,44px)}
.car{position:relative;outline:none}
.car:focus-visible{outline:2px solid var(--accent);outline-offset:4px;border-radius:var(--r-lg)}
.car-track{display:flex;gap:var(--gap);overflow-x:auto;scroll-snap-type:x mandatory;scrollbar-width:none;-webkit-overflow-scrolling:touch}
.car-track::-webkit-scrollbar{display:none}
.car-track figure{flex:0 0 calc((100% - 2 * var(--gap)) / 3);scroll-snap-align:start;background:var(--bg-2);border-radius:var(--r-lg);padding:clamp(16px,2vw,30px);display:flex;flex-direction:column}
.car-track img{width:100%;aspect-ratio:3/2;object-fit:contain;margin:auto}
.car-track figcaption{font-size:12px;letter-spacing:.08em;text-transform:uppercase;color:var(--gray);font-weight:500;margin-top:10px}
.car-ui{display:none;justify-content:center;gap:8px;margin-top:22px}
.car-ui button{width:30px;height:4px;border-radius:2px;background:rgba(0,0,0,.2);padding:0;transition:background-color .3s}
:root:not([data-theme=light]) .car-ui button{background:rgba(255,255,255,.25)}
.car-ui button[aria-current=true]{background:var(--accent)}
.car.scrollable .car-ui{display:flex}
@media(max-width:900px){.car-track figure{flex-basis:78%}}

/* Cechy */
.feat-h{font-size:12px;letter-spacing:.08em;text-transform:uppercase;color:var(--gray);font-weight:500;margin:0 0 16px}
.pfeat+.feat-h{margin-top:50px}
.pfeat{list-style:none;display:grid;grid-template-columns:repeat(3,1fr);gap:12px}
.pfeat li{background:var(--bg-2);border-radius:var(--r-lg);padding:26px 26px 28px;transition:background-color .3s}
.pfeat li:hover{background:var(--bg-3)}
.pfeat h4{font-size:20px;letter-spacing:-.015em;margin-bottom:8px}
.pfeat h4::first-letter{text-transform:uppercase}
.pfeat p{color:var(--muted);font-size:15px}
.pfeat .tag{display:inline-block;font-size:11px;letter-spacing:.08em;text-transform:uppercase;font-weight:500;color:var(--accent);margin-bottom:12px}
@media(max-width:1000px){.pfeat{grid-template-columns:1fr 1fr}}
@media(max-width:600px){.pfeat{grid-template-columns:1fr}}

/* Dlaczego od nas */
.why{display:grid;grid-template-columns:repeat(3,1fr);gap:var(--gap)}
.why article{background:var(--bg-2);border-radius:var(--r-lg);padding:clamp(26px,3vw,40px)}
.why .num{display:block;font-size:13px;color:var(--accent);font-weight:500;margin-bottom:56px}
.why h3{margin-bottom:10px}
.why p{color:var(--muted);font-size:15px}
.why a.u{color:var(--ink);display:inline-block;margin-top:6px}
@media(max-width:900px){.why{grid-template-columns:1fr}.why .num{margin-bottom:24px}}

/* Karta PDF */
.dl{display:flex;justify-content:space-between;align-items:end;gap:30px;flex-wrap:wrap;background:var(--bg-2);border-radius:var(--r-lg);padding:clamp(28px,5vw,64px)}
.dl h2{margin-top:20px}
.dl .lead{margin-top:14px}
@media(max-width:600px){.dl .btn{width:100%}}

/* Zdjęcie na całą szerokość */
.p-wide img{width:100%;border-radius:var(--r-lg);aspect-ratio:1600/625;object-fit:cover}
@media(max-width:700px){.p-wide img{aspect-ratio:750/1024}}

/* Inne ekspresy */
.others{display:grid;grid-template-columns:repeat(4,1fr);gap:var(--gap)}
.ocard{display:flex;flex-direction:column;background:var(--bg-2);border-radius:var(--r-lg);padding:clamp(20px,2vw,28px);transition:background-color .4s}
.ocard:hover{background:var(--bg-3)}
.ocard img{width:100%;margin:6px 0 18px;transition:transform .6s var(--ease)}
.ocard:hover img{transform:scale(1.04)}
.ocard div{display:flex;flex-direction:column;flex:1}
.ocard h3{font-size:24px}
.ocard p{color:var(--muted);font-size:15px;margin:6px 0 18px}
.ocard .link-arr{margin-top:auto;font-size:15px}
.ocard:hover .link-arr{color:var(--accent)}
.ocard:hover .link-arr svg .ln{transform:scaleX(1)}.ocard:hover .link-arr svg .pt{transform:none}
@media(max-width:1000px){.others{grid-template-columns:1fr 1fr}}
@media(max-width:760px){
  .others{display:flex;overflow-x:auto;scroll-snap-type:x mandatory;gap:12px;margin-inline:-16px;padding:0 16px 6px;scroll-padding-inline:16px;scrollbar-width:none}
  .others::-webkit-scrollbar{display:none}
  .ocard{flex:0 0 78%;scroll-snap-align:start}
}

/* Katalog: karty modeli */
.mcards{display:grid;grid-template-columns:repeat(auto-fill,minmax(min(100%,400px),1fr));gap:var(--gap)}
.mc{background:var(--bg-2);border-radius:var(--r-lg);overflow:hidden;display:flex;flex-direction:column;scroll-margin-top:100px;transition:background-color .4s}
.mc:hover{background:var(--bg-3)}
.mc-ph{display:block;padding:clamp(20px,3vw,36px) clamp(20px,3vw,36px) 0}
.mc-ph img{width:100%;transition:transform .7s var(--ease);filter:drop-shadow(0 24px 24px rgba(0,0,0,.14))}
.mc:hover .mc-ph img{transform:scale(1.03)}
.mc-bd{padding:clamp(22px,3vw,36px);display:flex;flex-direction:column;gap:14px;flex:1}
.mc h3{font-size:clamp(26px,2.4vw,34px)}
.mc h3 a:hover{color:var(--accent)}
.mc-tag{color:var(--muted)}
.mc-spec{display:grid;grid-template-columns:auto 1fr;gap:8px 18px;font-size:15px;padding:16px 0;border-top:1px solid var(--line);border-bottom:1px solid var(--line)}
.mc-spec dt{font-size:11px;letter-spacing:.08em;text-transform:uppercase;color:var(--gray);font-weight:500;padding-top:3px}
.mc-who{font-size:15px;color:var(--muted)}
.mc-who b{color:var(--ink);font-weight:500}
.mc-note{font-size:13px;color:var(--accent)}
.mc .btns{margin-top:auto;padding-top:8px}
.mc .btn{padding:15px 22px}
.cmp td{font-size:15px;min-width:150px}
.cmp tbody th{width:auto;min-width:130px}

/* Plakietka bestseller i odesłanie w opisie */
.bs-hero{margin:14px 0 -4px}
.p-hero-txt .bs-hero{display:flex;width:max-content}
.mc-bd .bs,.ocard .bs{margin-bottom:2px}
.ocard .bs{margin-bottom:10px}
.p-cols p.p-note{font-size:16px;color:var(--muted);padding:16px 18px;background:var(--bg-2);border-radius:var(--r)}

/* Z bliska: punkty na zdjęciu + lista z opisami */
.hs{display:grid;grid-template-columns:1.35fr 1fr;gap:clamp(24px,4vw,56px);align-items:center}
.hs-ph{background:var(--bg-2);border-radius:var(--r-lg);overflow:hidden}
.hs-z{position:relative;transform:scale(1.22);transform-origin:50% 52%}
.hs-ph img{width:100%;height:auto;display:block}
.hs-pt{position:absolute;transform:translate(-50%,-50%);width:26px;height:26px;border-radius:50%;border:0;background:var(--accent);color:#fff;font-family:inherit;font-size:12px;font-weight:600;line-height:26px;padding:0;cursor:pointer;box-shadow:0 0 0 4px rgba(209,31,62,.18);transition:transform .25s,box-shadow .25s}
.hs-pt.on,.hs-pt:hover,.hs-pt:focus-visible{transform:translate(-50%,-50%) scale(1.18);box-shadow:0 0 0 8px rgba(209,31,62,.22)}
.hs-list{list-style:none;margin:0;padding:0;display:grid;gap:4px}
.hs-list button{display:flex;gap:14px;align-items:flex-start;width:100%;text-align:left;background:none;border:0;border-radius:var(--r);padding:12px 14px;cursor:pointer;color:var(--ink);font:inherit;transition:background-color .25s}
.hs-list button.on{background:var(--bg-2)}
.hs-list .n{flex:none;width:26px;height:26px;border-radius:50%;border:1px solid var(--line);display:grid;place-items:center;font-size:12px;font-weight:600;color:var(--muted);transition:background-color .25s,color .25s,border-color .25s}
.hs-list button.on .n{background:var(--accent);border-color:var(--accent);color:#fff}
.hs-list b{display:block;font-size:16px;font-weight:600;color:var(--ink-2)}
.hs-list small{display:block;font-size:14px;line-height:1.5;color:var(--muted);max-height:0;overflow:hidden;opacity:0;transition:max-height .35s,opacity .35s,margin .35s}
.hs-list button.on small{max-height:120px;opacity:1;margin-top:4px}
.hs-in{font-size:14px;color:var(--muted);margin:16px 14px 0}
@media(max-width:900px){.hs{grid-template-columns:1fr}.hs-pt{width:19px;height:19px;line-height:19px;font-size:10px;box-shadow:0 0 0 3px rgba(209,31,62,.18)}.hs-list small{max-height:none;opacity:1;margin-top:4px}}

/* Kolory: zdjęcie na stałym jasnym tle (tło zdjęć producenta), kółka z kolorami */
.p-colors{display:grid;grid-template-columns:1.4fr 1fr;gap:clamp(28px,5vw,80px);align-items:center}
.p-colors-img{background:#f4f4f4;border-radius:var(--r-lg);overflow:hidden}
.p-colors-img img{width:100%;height:auto;display:block}
.p-colors-img img[hidden]{display:none}
.p-colors .p-note{color:var(--muted);font-size:15px;line-height:1.55;margin:0 0 22px}
.p-sw{display:flex;flex-wrap:wrap;gap:14px;margin-bottom:14px}
.p-sw button{width:40px;height:40px;border-radius:50%;border:0;padding:0;cursor:pointer;background:var(--sw,#ccc);box-shadow:inset 0 0 0 1px rgba(0,0,0,.18);outline-offset:4px;position:relative}
.p-sw button[aria-pressed=true]::after{content:"";position:absolute;inset:-6px;border-radius:50%;box-shadow:0 0 0 1.5px var(--ink-2)}
.p-sw-name{font-size:18px;font-weight:500;min-height:1.6em;margin:0;color:var(--ink-2)}
@media(max-width:900px){.p-colors{grid-template-columns:1fr}}