/* Karta produktu: ten sam język co scena. Tło z koloru sofy, wielka nazwa za nią, dalej liczby, zdjęcia i narzędzie „czy się zmieści”. */
:root{--tlo:#e4dccf;--wielka:#c9bba6;--tekst:#1d2523;--szary:#2d3430;--papier:#f6f1e8;--linia:rgba(29,37,35,.2);--t:29,37,35;--d:min(94vw,calc(70svh*1.5),1180px)}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}}
html,body{margin:0}
body{font-family:Lato,Verdana,Arial,sans-serif;color:var(--tekst);background:var(--papier);overflow-x:hidden}
a{color:inherit}
button{font:inherit;color:inherit}
a:focus-visible,button:focus-visible{outline:3px solid var(--tekst);outline-offset:3px}
input:focus{outline:0}
.pole:focus-within{box-shadow:0 0 0 1.5px var(--tekst)}
h1,h2,h3{font-family:"Bricolage Grotesque",Georgia,sans-serif;font-weight:800;letter-spacing:-.025em;margin:0}
.wnetrze{padding:clamp(48px,6vw,88px) clamp(16px,3vw,40px)}
h2{font-size:clamp(30px,4vw,56px);line-height:1}

.gora{display:grid;grid-template-columns:1fr auto;align-items:center;gap:16px;padding:18px clamp(16px,3vw,40px);position:relative;z-index:50}
.gora img{display:block;height:clamp(38px,6vh,56px);width:auto;filter:brightness(.2)}
.gora nav{display:flex;gap:clamp(12px,2vw,28px);font-weight:700;font-size:16px}
.gora nav a{text-decoration:none;text-underline-offset:3px}
.gora nav a:hover{text-decoration:underline}
.powrot{position:relative;z-index:50;align-self:flex-start;display:inline-flex;align-items:center;gap:.5em;min-height:44px;margin:-6px clamp(16px,3vw,40px) 0;font-weight:700;font-size:17px;text-decoration:none;text-underline-offset:3px}
/* Po najechaniu podkreślony jest sam napis, strzałka zostaje bez kreski (uwaga Marty 05.11). */
.powrot:hover .napis,.powrot:focus-visible .napis{text-decoration:underline;text-underline-offset:3px}
.powrot .strzalka{font-size:1.25em;line-height:1}

/* Pierwszy ekran */
.start{min-height:100vh;min-height:100svh;display:flex;flex-direction:column;background:radial-gradient(70% 60% at 50% 62%,rgba(255,255,255,.34) 0,transparent 75%),var(--tlo)}
.scena{position:relative;flex:1;min-height:clamp(300px,50svh,640px);overflow-x:clip;clip-path:inset(0 0 -220px 0)}
#nazwa{position:absolute;left:50%;top:0;transform:translateX(-50%);white-space:nowrap;font-weight:800;line-height:.86;letter-spacing:-.045em;color:var(--wielka);margin:0}
#nazwa span{display:inline-block;animation:litera .55s cubic-bezier(.2,.8,.2,1) both;animation-delay:calc(var(--n)*35ms)}
@keyframes litera{from{transform:translateY(24%);opacity:0}to{transform:none;opacity:1}}
.sofa{padding:0;border:0;background:none;cursor:zoom-in;position:absolute;left:50%;bottom:5%;width:min(calc(var(--d)*.86),92vw);transform:translateX(-50%);animation:wjazd .7s cubic-bezier(.2,.8,.2,1) both}
@keyframes wjazd{from{transform:translate(-50%,5%);opacity:0}to{transform:translateX(-50%);opacity:1}}
.sofa img{display:block;width:100%;height:auto}
.sofa img.cien{position:absolute;left:-8%;top:0;width:116%;max-width:none;height:auto;pointer-events:none}
.sofa img:has(+ .cien:not([hidden])){visibility:hidden}
.sofa img.cien[hidden]{display:none}
.dol{position:relative;z-index:1;display:grid;grid-template-columns:minmax(0,1fr) auto;align-items:center;gap:16px clamp(16px,2.4vw,36px);padding:0 clamp(16px,3vw,40px) clamp(16px,2.4vw,30px)}
.dol .rodzaj{margin:0;font-family:"Bricolage Grotesque",Georgia,sans-serif;font-weight:800;font-size:clamp(22px,2.1vw,30px);line-height:1.05;letter-spacing:-.02em}
.dol .haslo{margin:.3em 0 0;font-size:clamp(15px,1.15vw,17px);color:var(--szary)}
.do-galerii{background:none;border:0;padding:0 0 0 .6em;font-weight:700;font-size:inherit;text-decoration:underline;text-underline-offset:3px;cursor:pointer}
.kupno{display:flex;align-items:center;gap:clamp(12px,1.6vw,24px)}
.cena-blok{text-align:right}
.cena{font-family:"Bricolage Grotesque",Georgia,sans-serif;font-weight:800;font-size:clamp(30px,3.2vw,46px);line-height:1;white-space:nowrap;letter-spacing:-.02em}
.dostawa{margin:.25em 0 0;font-size:14px;color:var(--szary)}
.guzik{border:0;cursor:pointer;display:inline-flex;align-items:center;justify-content:center;height:48px;padding:0 1.5em;border-radius:999px;background:var(--tekst);color:var(--papier);font-weight:700;font-size:16px;text-decoration:none;white-space:nowrap}
.guzik:hover{opacity:.86}

/* Liczby */
.liczby{display:grid;grid-template-columns:repeat(var(--ile,4),minmax(0,1fr));background:var(--tlo);border-top:1px solid var(--linia)}
.liczba{padding:clamp(20px,2.6vw,36px) clamp(16px,3vw,40px);border-left:1px solid var(--linia)}
.liczba:first-child{border-left:0}
.liczba b{display:block;font-family:"Bricolage Grotesque",Georgia,sans-serif;font-weight:800;font-size:clamp(34px,4.6vw,68px);line-height:1;letter-spacing:-.035em;white-space:nowrap}
.liczba b small{font-size:.42em;letter-spacing:-.01em;margin-left:.15em}
.liczba span{display:block;margin-top:.5em;font-size:15px;color:var(--szary)}

/* Opis */
.opis{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.5fr);gap:24px clamp(24px,5vw,80px)}
/* Oryginalne zdjęcie bez wycinania: jego biel znika w tle strony, zostaje sofa i prawdziwy cień ze zdjęcia. */
.opis-foto{display:block;width:100%;margin-top:clamp(24px,3vw,40px);padding:0;border:0;background:none;cursor:zoom-in}
.opis-foto img{display:block;width:100%;height:auto;mix-blend-mode:multiply}
.opis-tekst p{margin:0 0 1em;font-size:clamp(17px,1.3vw,19px);line-height:1.55;max-width:62ch}
.opis-tekst p:first-child{font-family:"Bricolage Grotesque",Georgia,sans-serif;font-weight:500;font-size:clamp(24px,2.5vw,36px);line-height:1.18;letter-spacing:-.015em}

/* Zdjęcia */
/* Zdjęcia: równe kwadraty przewijane w bok, następne wystaje z prawej. Klik otwiera galerię na cały ekran. */
.zdjecia{--kafel:color-mix(in srgb,var(--tlo) 45%,#fff);margin-bottom:clamp(48px,6vw,88px)}
.pas{display:flex;gap:2px;overflow-x:auto;scroll-snap-type:x proximity;scrollbar-width:thin}
.zdjecie{position:relative;flex:none;display:block;width:clamp(300px,42vw,620px);aspect-ratio:1;padding:0;border:0;background:var(--kafel);cursor:zoom-in;overflow:hidden;scroll-snap-align:start}
.zdjecie img{display:block;width:100%;height:100%;object-fit:contain;mix-blend-mode:multiply;transition:transform .4s cubic-bezier(.2,.8,.2,1)}
.zdjecie img.wnetrze{object-fit:cover;mix-blend-mode:normal}
.zdjecie:hover img{transform:scale(1.03)}
.powieksz{position:absolute;right:14px;bottom:14px;display:inline-flex;align-items:center;gap:7px;height:38px;padding:0 14px;border-radius:999px;background:var(--tekst);color:var(--papier);font-size:14px;font-weight:700;line-height:1;pointer-events:none}
.powieksz svg{width:16px;height:16px;fill:none;stroke:currentColor;stroke-width:2.4;stroke-linecap:round}
.okragla{display:grid;place-items:center;width:48px;height:48px;padding:0;border:0;border-radius:50%;background:var(--tekst);color:var(--papier);cursor:pointer}
.okragla svg{width:46%;height:46%;fill:none;stroke:currentColor;stroke-width:2.6;stroke-linecap:round;stroke-linejoin:round}
.pas-ster{display:flex;justify-content:flex-end;gap:8px;padding:12px clamp(16px,3vw,40px) 0}
@media (max-width:760px){.zdjecie{width:84vw}}

/* Galeria na cały ekran. Tło z koloru sofy, a białe tło zdjęć wtapia się w nie przez multiply. */
#powiekszenie{border:0;padding:0;margin:0;width:100vw;height:100vh;height:100dvh;max-width:none;max-height:none;background:var(--tlo);overflow:hidden}
#powiekszenie[open]{display:grid;place-items:center}
#powiekszenie::backdrop{background:var(--tlo)}
#powiekszone{display:block;max-width:min(88vw,calc(100dvh - 40px));max-height:calc(100dvh - 40px);width:auto;height:auto;mix-blend-mode:multiply}
.zamknij,.gal-strzalka{position:fixed;display:grid;place-items:center;padding:0;border:0;border-radius:50%;background:var(--tekst);color:var(--papier);cursor:pointer}
.zamknij{right:18px;top:18px;width:48px;height:48px;font-size:28px;line-height:1}
.gal-strzalka{top:50%;width:clamp(44px,4.4vw,60px);aspect-ratio:1;transform:translateY(-50%)}
.gal-strzalka svg{width:46%;height:46%;fill:none;stroke:currentColor;stroke-width:2.6;stroke-linecap:round;stroke-linejoin:round}
#gal-wstecz{left:clamp(10px,2vw,32px)}
#gal-dalej{right:clamp(10px,2vw,32px)}
.gal-licznik{position:fixed;left:50%;bottom:16px;margin:0;transform:translateX(-50%);padding:.35em .9em;border-radius:999px;background:var(--tekst);color:var(--papier);font-size:14px;font-weight:700}
.zamknij:focus-visible,.gal-strzalka:focus-visible{outline-offset:3px}

/* Czy się zmieści */
.miara{background:var(--tlo)}
.miara{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.5fr);align-items:center;gap:32px clamp(24px,5vw,80px)}
.miara h2{margin-bottom:.7em}
.miara label{display:block;font-weight:700;font-size:15px;margin-bottom:6px}
.pole{display:inline-flex;align-items:center;gap:8px;background:var(--papier);border:1.5px solid var(--tekst);border-radius:999px;height:52px;padding:0 20px}
.pole input{width:88px;border:0;background:none;font-family:"Bricolage Grotesque",Georgia,sans-serif;font-weight:800;font-size:24px;color:var(--tekst)}
.rysunek{position:relative;padding-bottom:8px}
.sciana{height:10px;background:var(--tekst);border-radius:2px;transition:width .4s cubic-bezier(.2,.8,.2,1)}
.sciana-opis{margin:6px 0 clamp(16px,2vw,26px);font-size:15px;color:var(--szary)}
.miara-sofa{position:relative;transition:width .4s cubic-bezier(.2,.8,.2,1)}
.miara-sofa img{display:block;width:116%;max-width:none;height:auto;margin:0 -8% -6%}
.miara-linia{display:flex;align-items:center;gap:8px;margin-top:10px;font-weight:700;font-size:15px;white-space:nowrap}
.miara-linia::before,.miara-linia::after{content:"";flex:1;height:0;border-top:1.5px solid var(--tekst)}
#werdykt{margin:clamp(16px,2vw,24px) 0 0;font-family:"Bricolage Grotesque",Georgia,sans-serif;font-weight:800;font-size:clamp(24px,3vw,42px);line-height:1.05;letter-spacing:-.02em}
.miara small{display:block;margin-top:.6em;font-size:14px;color:var(--szary)}

/* Tkanina i specyfikacja */
.dwie{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:40px clamp(24px,5vw,80px)}
.dwie h2{margin-bottom:.6em}
.tkanina-foto{display:block;width:100%;aspect-ratio:16/9;object-fit:cover;margin-bottom:clamp(18px,2vw,26px)}
.tkanina h3{font-size:clamp(20px,1.7vw,24px);margin-bottom:.6em;letter-spacing:-.015em}
.tkanina p{margin:0 0 1em;font-size:17px;line-height:1.55;max-width:60ch}
.spec{margin:0}
.spec div{display:flex;justify-content:space-between;gap:20px;padding:.7em 0;border-top:1px solid var(--linia);font-size:16px}
.spec dt{color:var(--szary)}
.spec dd{margin:0;font-weight:700;text-align:right}
.przypis{margin:14px 0 0;font-size:14px;line-height:1.45;color:var(--szary)}
.pomoc{margin-top:28px;padding-top:20px;border-top:1px solid var(--linia);font-size:16px}
.pomoc b{display:block;font-family:"Bricolage Grotesque",Georgia,sans-serif;font-size:22px;letter-spacing:-.015em;margin-bottom:.2em}

/* Następne modele */
.nastepne h2{padding:0 clamp(16px,3vw,40px) clamp(20px,2.4vw,32px)}
.rzad{display:grid;grid-template-columns:minmax(0,1.25fr) minmax(170px,.8fr) 130px;align-items:center;gap:clamp(12px,2vw,32px);min-height:clamp(112px,9.5vw,150px);padding:8px clamp(16px,3vw,40px);border-top:1px solid var(--linia);text-decoration:none;transition:background-color .2s}
.rzad:hover,.rzad:focus-visible{background:var(--r-tlo)}
.rzad b{font-family:"Bricolage Grotesque",Georgia,sans-serif;font-weight:800;line-height:1;letter-spacing:-.045em;font-size:clamp(44px,6.4vw,96px)}
.rzad span{height:clamp(90px,8vw,128px);display:flex;align-items:flex-end;justify-content:center}
.rzad img{display:block;max-width:100%;max-height:100%;width:auto;height:auto}
.rzad i{font-style:normal;text-align:right;font-family:"Bricolage Grotesque",Georgia,sans-serif;font-weight:800;font-size:clamp(22px,2vw,28px);letter-spacing:-.02em;white-space:nowrap}
.wszystkie{padding:clamp(24px,3vw,40px) clamp(16px,3vw,40px) clamp(96px,10vw,120px);border-top:1px solid var(--linia);font-weight:700;font-size:17px}
.wszystkie a{text-underline-offset:3px}

/* Pasek kupna po przewinięciu */
.pasek{position:fixed;left:0;right:0;bottom:0;z-index:60;display:flex;align-items:center;gap:14px;padding:10px clamp(16px,3vw,40px);background:var(--tekst);color:var(--papier);transform:translateY(100%);transition:transform .25s}
.pasek.widoczny{transform:none}
.pasek b{font-family:"Bricolage Grotesque",Georgia,sans-serif;font-size:20px;letter-spacing:-.015em}
.pasek .pasek-cena{margin-left:auto;font-family:"Bricolage Grotesque",Georgia,sans-serif;font-weight:800;font-size:22px;white-space:nowrap}
.pasek .guzik{background:var(--papier);color:var(--tekst);height:42px;font-size:15px}
.pasek a:focus-visible{outline-color:var(--papier)}

@media (max-width:900px){
  .opis,.dwie,.miara{grid-template-columns:1fr}
  .liczby{grid-template-columns:repeat(2,minmax(0,1fr))}
  .liczba:nth-child(odd){border-left:0}
  .liczba:nth-child(n+3){border-top:1px solid var(--linia)}
}
@media (max-width:760px){
  :root{--d:min(118vw,600px)}
  .gora nav a:not(:last-child):not(.pytanie):not(.sklep){display:none}
  .start{min-height:0}
  .scena{flex:none;min-height:0;height:88vw}
  .dol{grid-template-columns:1fr}
  .cena-blok{text-align:left}
  .kupno{justify-content:space-between}
  .rzad{grid-template-columns:minmax(0,1fr) 116px;gap:2px 10px;padding:14px 16px}
  .rzad b{grid-column:1;font-size:clamp(38px,11vw,52px)}
  .rzad span{grid-column:2;grid-row:1/3;height:76px}
  .rzad i{grid-column:1;text-align:left}
  .pasek b{display:none}
  .pasek .pasek-cena{margin-left:0}
  .pasek .guzik{margin-left:auto}
}
@media (prefers-reduced-motion:reduce){#nazwa span,.sofa{animation:none}.sciana,.miara-sofa,.zdjecie img,.rzad,.pasek{transition:none}}

/* Dodatki motywu: elementy, których makieta nie miała */
#product.karta{background:var(--papier)}
#product.karta h1{text-transform:none}
button.guzik{font-family:inherit}
#kup-forma{display:contents}
.termin .taniasofa-delivery-time{display:block!important;margin:.25em 0 0!important;padding:0!important;border:0!important;border-radius:0!important;background:none!important;font-size:14px!important;color:var(--szary)!important}
.termin .taniasofa-delivery-time strong{font-weight:400}
.termin .taniasofa-delivery-time i{display:none}
.termin .social-sharing,.termin .product-additional-info>*:not(.taniasofa-delivery-time){display:none}
.strona-wybor{border:0;margin:0 0 12px;padding:0;display:flex;align-items:center;gap:8px;flex-wrap:wrap;justify-content:flex-end}
.strona-wybor legend{float:left;padding:0;margin-right:6px;font-size:14px;color:var(--szary)}
.strona-wybor label{cursor:pointer}
.strona-wybor input{position:absolute;opacity:0;width:1px;height:1px}
.strona-wybor span{display:inline-flex;align-items:center;height:38px;padding:0 1em;border:1.5px solid var(--tekst);border-radius:999px;font-size:14px;font-weight:700}
.strona-wybor input:checked+span{background:var(--tekst);color:var(--papier)}
.strona-wybor input:focus-visible+span{outline:3px solid var(--tekst);outline-offset:3px}
.kup-kolumna{display:flex;flex-direction:column}
.tkanina .js-product-details,.tkanina .product-features{display:none}
/* Treść ze sklepu bywa wklejona z innych stron: jeden wygląd niezależnie od budowy opisu. */
.tkanina #tkanina-tekst p,.tkanina #tkanina-tekst div,.tkanina #tkanina-tekst h3{margin:0 0 1em;font-family:inherit;font-weight:400;font-size:17px;line-height:1.55;letter-spacing:0;max-width:60ch}
.tkanina #tkanina-tekst div:has(p,div){margin:0;max-width:none}
.tkanina #tkanina-tekst strong,.tkanina #tkanina-tekst b{font-weight:700}
.tkanina #tkanina-tekst .tkanina-tytul,.tkanina #tkanina-tekst .tkanina-tytul *{margin-bottom:.6em;font-family:"Bricolage Grotesque",Georgia,sans-serif;font-weight:800;font-size:clamp(20px,1.7vw,24px);line-height:1.2;letter-spacing:-.015em}
.opis-tekst p,.opis-tekst div,.opis-tekst h3{margin:0 0 1em;font-family:inherit;font-weight:400;font-size:clamp(17px,1.3vw,19px);line-height:1.55;letter-spacing:0;max-width:62ch}
.opis-tekst div:has(p,div){margin:0;max-width:none}
.opis-tekst strong,.opis-tekst b{font-weight:700}
.opis-tekst p:first-child{font-family:inherit;font-weight:400;font-size:clamp(17px,1.3vw,19px);line-height:1.55;letter-spacing:0}
.opis-tekst .opis-start.opis-start,.opis-tekst .opis-start.opis-start *{font-family:"Bricolage Grotesque",Georgia,sans-serif;font-weight:500;font-size:clamp(24px,2.5vw,36px);line-height:1.18;letter-spacing:-.015em}
/* Stopka sama ustawia padding i ładuje się później, stąd mocniejszy selektor: pasek kupna nie może jej zasłaniać. */
body.karta .ts-prawne{padding-bottom:calc(28px + 72px)}
.licznik-koszyka:not(:empty)::before{content:" ("}
.licznik-koszyka:not(:empty)::after{content:")"}
@media (max-width:760px){.strona-wybor{justify-content:flex-start}}
/* Kafelki-obrazki wklejone w opisy sklepu: makieta ich nie pokazuje. */
.opis-tekst img,.tkanina #tkanina-tekst img{display:none}
.opis-tekst p:has(>img:only-child),.tkanina #tkanina-tekst p:has(>img:only-child){display:none}

/* Telefon: Sklep musi zostać w menu, bo logo prowadzi na stronę główną. Trzy pozycje mieszczą się dzięki mniejszemu logo. */
@media (max-width:430px){
  .gora{gap:10px}
  .gora nav{gap:11px;font-size:15px}
  .gora nav a{white-space:nowrap}
  .gora img{height:auto;width:clamp(72px,calc(100vw - 225px),124px);max-width:100%}
}