/* Oleaster – koncept C „Vrt”. Izvor: design/C-*.html (tokeni CLAUDE.md §7.2). Fontovi (@font-face) dolaze iz theme.json. */

:root{
	--bg:#FBFBF7;--ink:#1D2A1F;--muted:#5D6A5F;--brand:#557A2F;--brand-ink:#47652A;--on-brand:#fff;
	--card:#EEF3E8;--pill:#E6EEDA;--line:#DFE5DA;--field:#fff;--on-dark-accent:#9FD3A9;
	--ft-bg:#1D2A1F;--ft-ink:#E6EDE2;
	--sans:'Outfit',system-ui,-apple-system,'Segoe UI',sans-serif;--serif:'Instrument Serif',Georgia,serif;
	--r-btn:99px;--r-card:28px;--r-hero:36px;--r-img:20px;--r-in:14px;
	--ph-a:#86b48e;--ph-sky:#cfe3d2;
	--ease:cubic-bezier(.2,.7,.2,1);
}

/* ---------- osnova ---------- */
*,*::before,*::after{box-sizing:border-box}
*{margin:0;padding:0}
html{-webkit-font-smoothing:antialiased;scroll-behavior:smooth;scroll-padding-top:20px}
body{background:var(--bg);color:var(--ink);font-family:var(--sans);font-size:17px;line-height:1.6;width:100%;overflow-x:hidden}
img,svg{display:block;max-width:100%}
img{height:auto}
a{color:inherit;text-decoration:none}
ul,ol{list-style:none}
button,input,select,textarea{font:inherit;color:inherit}
button{cursor:pointer;background:none;border:0}
.wrap{max-width:1240px;margin:0 auto;padding:0 40px}
main:focus{outline:0}

h1,h2,h3{font-family:var(--sans);font-weight:500;line-height:1.05;letter-spacing:-.03em}
h2{font-size:clamp(34px,4vw,54px)}
h3{font-size:22px;line-height:1.2}
h1 em,h2 em{font-family:var(--serif);font-style:italic;font-weight:400;color:var(--brand);letter-spacing:-.01em}
.muted{color:var(--muted)}
section{padding:110px 0}

/* pristupačnost */
.sr,.screen-reader-text{position:absolute!important;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}
.skip{position:absolute;left:16px;top:-60px;z-index:100;background:var(--ink);color:#fff;padding:10px 16px;border-radius:10px;font-weight:600;transition:top .15s}
.skip:focus{top:12px}
:focus-visible{outline:2.5px solid var(--brand);outline-offset:3px;border-radius:6px}
.key :focus-visible,.ft :focus-visible{outline-color:var(--on-dark-accent)}

/* ---------- komponente ---------- */
.ph{position:relative;overflow:hidden;background:linear-gradient(160deg,var(--ph-sky),var(--ph-a))}
.ph img{width:100%;height:100%;object-fit:cover;transition:transform .6s var(--ease)}
.ph-label{position:absolute;left:14px;bottom:12px;display:flex;gap:6px;align-items:center;font:600 11px/1 var(--sans);letter-spacing:.06em;text-transform:uppercase;color:#fff;background:rgba(0,0,0,.36);padding:6px 9px;border-radius:99px;-webkit-backdrop-filter:blur(4px);backdrop-filter:blur(4px)}
.o-logo-img{height:54px;width:auto}

.btn{display:inline-flex;align-items:center;gap:10px;font-weight:650;font-size:15px;line-height:1.2;padding:14px 22px;border-radius:var(--r-btn);background:var(--brand);color:var(--on-brand);white-space:nowrap;transition:background-color .2s,transform .2s var(--ease),box-shadow .2s}
.btn svg{transition:transform .2s var(--ease)}
.btn:hover{background:var(--brand-ink)}
.btn:hover svg{transform:translateX(3px)}
.btn.ghost{background:transparent;color:inherit;box-shadow:inset 0 0 0 1.5px currentColor}
.btn.ghost:hover{background:rgba(85,122,47,.08)}

.kicker{display:inline-flex;align-items:center;gap:8px;background:var(--pill);color:var(--brand-ink);padding:8px 14px;border-radius:99px;font:600 12px/1.2 var(--sans);letter-spacing:.08em;text-transform:uppercase}
.kicker .leaf{color:var(--brand);flex:none}
.kicker+h1,.kicker+h2,.kicker+.prog-naslov{margin-top:20px}
.head-row{display:flex;justify-content:space-between;align-items:end;gap:30px}
.head-row>.muted{max-width:26em}

/* ---------- zaglavlje ---------- */
.hd{position:sticky;top:0;z-index:20;background:rgba(251,251,247,.94);-webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px);transition:box-shadow .3s,background-color .3s}
.hd.is-scrolled{box-shadow:0 6px 24px rgba(29,42,31,.08)}
.hd>.wrap{transition:height .3s var(--ease)}
.hd.is-scrolled>.wrap{height:76px}
.admin-bar .hd{top:32px}
.hd>.wrap{display:flex;align-items:center;justify-content:space-between;height:96px;gap:20px}
.hd-logo{flex:none}
.nav{background:var(--card);padding:10px 12px;border-radius:99px}
.nav__list{display:flex;gap:6px;font-weight:550;font-size:15px}
.nav__list a{display:block;padding:8px 16px;border-radius:99px;transition:background-color .2s,color .2s}
.nav__list a:hover{background:rgba(255,255,255,.6)}
.nav__list .current-menu-item>a,.nav__list .current_page_item>a,.nav__list .current-menu-ancestor>a{background:#fff;color:var(--ink);box-shadow:0 2px 8px rgba(30,60,35,.08)}
.nav__list .sub-menu{display:none}
.hd-r{display:flex;gap:22px;align-items:center;font-weight:600;font-size:15px}
.hd-r .tel{display:flex;gap:8px;align-items:center;white-space:nowrap}
.hd-r .tel:hover{color:var(--brand)}
.burger{display:none;width:44px;height:44px;border-radius:12px;align-items:center;justify-content:center;box-shadow:inset 0 0 0 1.5px currentColor}
.burger__z{display:none}
.burger[aria-expanded="true"] .burger__o{display:none}
.burger[aria-expanded="true"] .burger__z{display:block}
.mnav{border-top:1px solid var(--line);background:var(--bg);padding:14px 0 24px;box-shadow:0 18px 30px rgba(29,42,31,.08)}
.mnav__nav .nav__list{flex-direction:column;gap:2px;font-size:19px;font-weight:550}
.mnav__nav .nav__list a{padding:12px 14px;border-radius:14px}
.mnav__nav .current-menu-item>a{background:var(--card)}
.mnav__acts{display:grid;gap:10px;margin-top:16px}
.mnav__acts .btn{justify-content:center}

/* ---------- hero naslovnice ---------- */
.hero{padding:10px 0 90px}
.hero .box{position:relative;border-radius:var(--r-hero);overflow:hidden;height:680px}
.hero .box>.ph{position:absolute;inset:0}
.hero .card{position:absolute;left:36px;bottom:36px;width:560px;max-width:calc(100% - 72px);background:var(--bg);border-radius:var(--r-card);padding:40px 42px}
.hero h1{font-size:clamp(44px,5vw,74px);line-height:1;margin:20px 0 18px}
.hero .lead{font-size:18px;color:var(--muted)}
.hero .acts,.acts{display:flex;gap:12px;margin-top:28px;flex-wrap:wrap}
.acts--centar{justify-content:center}
.hero .float{position:absolute;right:36px;top:36px;background:rgba(251,251,247,.92);border-radius:22px;padding:18px 22px;display:flex;gap:14px;align-items:center;font-weight:500}
.hero .float b{font-size:30px;line-height:1;color:var(--brand);font-weight:600}
.hero .float span{font-size:14px;color:var(--muted);line-height:1.3}

/* ---------- o nama ---------- */
.intro .wrap{display:grid;grid-template-columns:1fr 1fr;gap:70px;align-items:center}
.intro p{margin-top:22px;color:var(--muted);font-size:18px}
.intro .stack{display:grid;grid-template-columns:1fr 1fr;gap:16px}
.intro .stack .ph{border-radius:24px;aspect-ratio:3/4}
.intro .stack .ph:nth-child(2){margin-top:60px}

/* ---------- usluge ---------- */
.usluge{padding-top:110px}
.svc{display:grid;grid-template-columns:repeat(3,1fr);gap:28px;margin-top:56px}
.svc .card{display:block;background:var(--card);border-radius:var(--r-card);padding:14px 14px 30px;transition:transform .3s var(--ease),box-shadow .3s}
.svc .card .ph{aspect-ratio:4/3;border-radius:var(--r-img)}
.svc .card h3{margin:22px 0 10px;padding:0 14px}
.svc .card p{color:var(--muted);font-size:15.5px;padding:0 14px}

/* ---------- ključ u ruke ---------- */
.key .inner{background:var(--ink);color:var(--ft-ink);border-radius:var(--r-hero);padding:70px;display:grid;grid-template-columns:1.1fr 1fr;gap:60px;align-items:center}
.key h2{margin-top:20px}
.key h2 em{color:var(--on-dark-accent)}
.key p{font-size:18px;opacity:.85;margin-top:22px}
.key .kicker{background:rgba(255,255,255,.1);color:#cfe8d3}
.key .ph{border-radius:24px;aspect-ratio:4/3}
.key__cta{margin-top:34px}

/* ---------- projekti ---------- */
.radovi{padding-top:110px}
.pj-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:28px;margin-top:48px}
.pj{display:block;background:var(--card);border-radius:var(--r-card);padding:12px 12px 24px;transition:transform .3s var(--ease),box-shadow .3s}
.pj .ph{aspect-ratio:4/3;border-radius:var(--r-img)}
.pj .meta{display:flex;justify-content:space-between;gap:12px;margin-top:18px;padding:0 12px;font-size:13px;color:var(--muted);font-weight:600;letter-spacing:.04em;text-transform:uppercase}
.pj h3{margin-top:8px;padding:0 12px}
.pj-lok{color:var(--muted);font-size:15px;margin-top:4px;padding:0 12px}
.pj[hidden]{display:none}

/* hover: podizanje kartice 4 px, zoom slike 1.03 */
@media (hover:hover){
	.svc .card:hover,.pj:hover{transform:translateY(-4px);box-shadow:0 14px 30px rgba(29,42,31,.08)}
	.svc .card:hover img,.pj:hover img,.gal a:hover img{transform:scale(1.03)}
}

/* ---------- koraci ---------- */
.koraci{padding-top:20px}
.steps{display:grid;grid-template-columns:repeat(3,1fr);gap:28px;margin-top:56px;counter-reset:none}
.step{background:var(--card);border-radius:var(--r-card);padding:32px}
.step .n{display:inline-flex;width:52px;height:52px;border-radius:50%;background:#fff;align-items:center;justify-content:center;font:600 26px/1 var(--sans);color:var(--brand)}
.step h3{margin:18px 0 8px}

/* ---------- kontakt ---------- */
.ct-box{background:var(--card);border-radius:var(--r-hero);padding:70px}
.ct{display:grid;grid-template-columns:1fr 1.1fr;gap:70px;align-items:start}
.ct-naslov{font-size:clamp(34px,4vw,54px);margin-top:20px}
h1.ct-naslov{font-size:clamp(46px,6vw,84px)}
.ct-lead{color:var(--muted);margin-top:20px;font-size:18px}
.ct dl{margin-top:34px;display:grid;gap:22px}
.ct dt{font-size:12.5px;letter-spacing:.14em;text-transform:uppercase;color:var(--muted);font-weight:650}
.ct dd{font-size:21px;font-weight:600;margin-top:4px}
.ct dd a:hover{color:var(--brand)}

.form{display:grid;gap:14px;padding:36px;border-radius:var(--r-card);background:#fff}
.form__naslov{margin-bottom:8px}
.form .row{display:grid;grid-template-columns:1fr 1fr;gap:14px}
.form .fld{display:grid}
.field{width:100%;border:0;border-radius:var(--r-in);background:var(--field);padding:16px 18px;font-size:15px;color:var(--ink);box-shadow:inset 0 0 0 1px var(--line);transition:box-shadow .2s}
.field::placeholder{color:var(--muted);opacity:1}
.field:focus{outline:0;box-shadow:inset 0 0 0 2px var(--brand)}
select.field{appearance:none;-webkit-appearance:none;padding-right:44px;background:#fff url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8'%3E%3Cpath d='M1 1l5 5 5-5' stroke='%235D6A5F' stroke-width='1.8' fill='none' stroke-linecap='round'/%3E%3C/svg%3E") no-repeat right 18px center}
select.field:invalid,select.field option[value=""]{color:var(--muted)}
.field.ta{height:120px;min-height:120px;resize:vertical}
.fld.has-err .field{box-shadow:inset 0 0 0 2px #B3261E}
.form .chk{font-size:13px;color:var(--muted);display:flex;gap:10px;align-items:flex-start;line-height:1.45}
.form .chk input{flex:none;width:18px;height:18px;margin-top:1px;accent-color:var(--brand)}
.form .chk a{color:var(--brand-ink);text-decoration:underline}
.form .chk.has-err{color:#B3261E}
.form .hp{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}
.form__status:empty{display:none}
.form__status{border-radius:var(--r-in);padding:14px 16px;font-size:15px;font-weight:550}
.form__status.is-ok{background:var(--pill);color:var(--brand-ink)}
.form__status.is-err{background:#FBE9E7;color:#8C1D18}
.form .btn[disabled]{opacity:.6;pointer-events:none}
.form{position:relative}

/* ---------- podnožje ---------- */
.ft{padding:70px 0 40px;background:var(--ft-bg);color:var(--ft-ink)}
.ft .cols{display:grid;grid-template-columns:1.4fr 1fr 1fr 1.2fr;gap:40px}
.ft .o-logo-img{height:64px}
.ft-opis{margin-top:18px;max-width:20em;font-size:15px;opacity:.85}
.ft-h{font-size:12.5px;letter-spacing:.14em;text-transform:uppercase;opacity:.6;margin-bottom:14px;font-weight:650;line-height:1.4}
.ft li,.ft ul{font-size:15px;line-height:1.9}
.ft li{opacity:.85}
.ft a:hover{color:#fff;text-decoration:underline;text-underline-offset:3px}
.ft-mreze{display:flex;gap:16px;margin-top:14px}
.ft .bot{margin-top:50px;padding-top:24px;border-top:1px solid rgba(255,255,255,.14);display:flex;justify-content:space-between;gap:20px;font-size:13px;opacity:.6}
.mbar{display:none}

/* ---------- zaglavlja podstranica ---------- */
.pghero{padding:40px 0 10px;text-align:center}
.pghero h1{font-size:clamp(46px,6vw,84px);margin-top:20px;line-height:1}
.pghero>.wrap>p{font-size:19px;color:var(--muted);margin:16px auto 0;max-width:34em}
.pghero--lijevo{text-align:left}
.pghero--lijevo>.wrap>p,.pghero--lijevo .projekt-opis{margin-left:0}
.pghero--uska h1{font-size:clamp(40px,5vw,64px)}
.chips{display:flex;gap:10px;flex-wrap:wrap;margin-top:36px;justify-content:center}
.chip{white-space:nowrap;padding:10px 18px;border-radius:99px;font-size:14px;font-weight:600;background:var(--card);transition:background-color .2s,color .2s}
.chip:hover{background:var(--pill)}
.chip.on{background:var(--brand);color:#fff}

/* ---------- naši radovi ---------- */
.radovi-popis{padding-top:30px}
.prog{margin-top:70px;display:flex;justify-content:space-between;align-items:end;gap:30px;padding-bottom:18px;border-bottom:1px solid var(--line)}
.grupa:first-child .prog{margin-top:20px}
.prog-naslov{font-size:26px;line-height:1.2}
.prog-broj{font-weight:600;white-space:nowrap}
.grupa[hidden]{display:none}
.prazno{text-align:center;color:var(--muted);font-size:18px;padding:40px 0}

/* ---------- projekt ---------- */
.projekt-opis{max-width:40em;margin-top:16px;font-size:19px;color:var(--muted)}
.facts{display:flex;gap:46px;margin-top:30px;flex-wrap:wrap}
.facts dt{display:block;font-size:12px;letter-spacing:.14em;text-transform:uppercase;color:var(--muted);font-weight:650}
.facts dd{font-size:18px;font-weight:700}
.projekt-galerija{padding-top:30px}
.gal{display:grid;grid-template-columns:repeat(4,1fr);grid-auto-rows:230px;grid-auto-flow:dense;gap:14px;margin-top:40px}
.gal .ph{height:100%;border-radius:var(--r-img)}
.gal .w2{grid-column:span 2}
.gal .h2{grid-row:span 2}
.gal .w4{grid-column:span 4}
.gal a{display:block;height:100%;cursor:zoom-in}
.pager{display:grid;grid-template-columns:1fr auto 1fr;gap:20px;margin-top:60px;padding-top:28px;border-top:1px solid var(--line);font-weight:650}
.pager>:last-child{text-align:right}
.pager a:hover{color:var(--brand)}

/* ---------- sadržaj iz uređivača ---------- */
.stranica{padding-top:40px}
.stranica--uvod{padding-bottom:0}
.prose{max-width:760px}
.prose>*+*{margin-top:1.1em}
.prose h2{font-size:clamp(28px,3vw,38px);margin-top:1.8em}
.prose h3{margin-top:1.6em}
.prose a{color:var(--brand-ink);text-decoration:underline;text-underline-offset:3px}
.prose ul{list-style:disc;padding-left:1.3em}
.prose ol{list-style:decimal;padding-left:1.3em}
.prose img{border-radius:var(--r-img)}
.popis{display:grid;gap:22px;max-width:760px}
.popis a{font-size:21px;font-weight:600}

/* ---------- lightbox ---------- */
.lb{position:fixed;inset:0;z-index:100;background:rgba(17,25,19,.94);display:flex;align-items:center;justify-content:center;touch-action:pan-y}
.lb[hidden]{display:none}
.lb img{max-width:calc(100vw - 140px);max-height:calc(100vh - 120px);width:auto;height:auto;border-radius:12px;user-select:none}
.lb button{position:absolute;width:52px;height:52px;border-radius:50%;background:rgba(255,255,255,.12);color:#fff;display:flex;align-items:center;justify-content:center;transition:background-color .2s}
.lb button:hover{background:rgba(255,255,255,.24)}
.lb__x{top:18px;right:18px}
.lb__p{left:18px;top:50%;transform:translateY(-50%)}
.lb__n{right:18px;top:50%;transform:translateY(-50%)}
.lb__c{position:absolute;bottom:20px;left:0;right:0;text-align:center;color:rgba(255,255,255,.75);font-size:14px;font-weight:600}
body.lb-open{overflow:hidden}

/* ---------- animacije (fade/slide-up na scroll, uz postupno kašnjenje u gridovima) ---------- */
.js [data-reveal]{opacity:0;transform:translateY(26px);transition:opacity .8s var(--ease),transform .8s var(--ease);transition-delay:var(--d,0s)}
.js [data-reveal].is-visible{opacity:1;transform:none}

/* hero: fotografija se lagano „smiri”, kartica izroni, godine se odbroje */
.js .hero .box>.ph img{transform:scale(1.1);transition:transform 2.2s var(--ease)}
.js .hero.is-in .box>.ph img{transform:none}
.js .hero .card[data-reveal]{--d:.15s}
.js .hero .float[data-reveal]{--d:.55s;transform:translateX(18px)}
.js .hero .float[data-reveal].is-visible{transform:none}
.hero .kicker .leaf{transform-origin:20% 90%;animation:list 5s ease-in-out infinite}
@keyframes list{0%,100%{transform:rotate(0)}50%{transform:rotate(-12deg)}}

/* slike u blokovima: zoom-out pri pojavljivanju */
.js .intro .stack[data-reveal] .ph img,.js .key .inner[data-reveal] .ph img{transform:scale(1.14);transition:transform 1.6s var(--ease) .1s}
.js .intro .stack[data-reveal].is-visible .ph img,.js .key .inner[data-reveal].is-visible .ph img{transform:none}
.intro .stack .ph:nth-child(2){will-change:transform}

/* naslovi: kurziv lagano „upiše” boju */
.js [data-reveal] h2 em,.js [data-reveal] h1 em{background:linear-gradient(90deg,var(--brand) 50%,rgba(85,122,47,.25) 50%) 100% 0/200% 100% no-repeat;-webkit-background-clip:text;background-clip:text;color:transparent;transition:background-position 1.1s var(--ease) .35s}
.js .key [data-reveal] h2 em,.js .key .inner[data-reveal] h2 em{background-image:linear-gradient(90deg,var(--on-dark-accent) 50%,rgba(159,211,169,.25) 50%)}
.js [data-reveal].is-visible h2 em,.js [data-reveal].is-visible h1 em{background-position:0 0}

/* koraci: broj se „upali” */
.js .step .n{transition:background-color .5s,color .5s;transition-delay:calc(var(--d,0s) + .35s)}
.js .step.is-visible .n{background:var(--brand);color:#fff}

/* filtriranje radova */
.pj.is-filtered-in{animation:pjIn .45s var(--ease)}
@keyframes pjIn{from{opacity:0;transform:translateY(12px) scale(.98)}to{opacity:1;transform:none}}

@media (prefers-reduced-motion:reduce){
	.hero .kicker .leaf{animation:none}
	.js .hero .box>.ph img,.js .intro .stack .ph img,.js .key .inner .ph img{transform:none!important;transition:none}
	.js [data-reveal] h2 em,.js [data-reveal] h1 em{background:none;color:var(--brand)}
	.js .key [data-reveal] h2 em{color:var(--on-dark-accent)}
	html{scroll-behavior:auto}
	.js [data-reveal]{opacity:1;transform:none;transition:none}
	*,*::before,*::after{transition-duration:.01ms!important;animation-duration:.01ms!important}
}

/* ---------- tablet ---------- */
@media (max-width:1100px){
	.nav__list a{padding:8px 11px}
	.hd-r .tel{display:none}
	.intro .wrap,.ct{gap:44px}
	.key .inner,.ct-box{padding:50px}
}
@media (max-width:960px){
	.nav,.hd-r>.btn{display:none}
	.burger{display:flex}
	.svc,.pj-grid,.steps{grid-template-columns:1fr 1fr}
	.ct,.intro .wrap,.key .inner{grid-template-columns:1fr}
	.ft .cols{grid-template-columns:1fr 1fr}
}

/* ---------- mobitel ---------- */
@media screen and (max-width:782px){.admin-bar .hd{top:46px}}
@media screen and (max-width:600px){.admin-bar .hd{top:0}}
@media (max-width:700px){
	body{font-size:16px}
	.wrap{padding:0 20px}
	section{padding:64px 0}
	.hd>.wrap,.hd.is-scrolled>.wrap{height:72px}
	.o-logo-img{height:44px}
	.svc,.pj-grid,.steps,.ft .cols,.form .row{grid-template-columns:1fr}
	.svc,.pj-grid{gap:34px}
	.head-row{flex-direction:column;align-items:start}
	.usluge,.radovi{padding-top:64px}
	.koraci{padding-top:10px}

	.hero{padding:0 0 60px}
	.hero .box{height:640px;border-radius:26px}
	.hero .card{left:12px;right:12px;bottom:12px;width:auto;max-width:none;padding:26px 24px;border-radius:22px}
	.hero h1{font-size:42px}
	.hero .acts{flex-direction:column}
	.hero .acts .btn{justify-content:center}
	.hero .float{right:12px;top:12px;padding:12px 16px}
	.hero .float b{font-size:22px}

	.intro .wrap{gap:36px}
	.key .inner{padding:34px 24px;gap:30px;border-radius:26px}
	.ct{gap:40px}
	.ct-box{padding:30px 20px;border-radius:26px}
	.form{padding:22px}
	.ct dd{font-size:19px;overflow-wrap:anywhere}

	.pghero h1{font-size:44px}
	.chips{flex-wrap:nowrap;overflow-x:auto;justify-content:flex-start;margin-left:-20px;margin-right:-20px;padding:0 20px 6px;scrollbar-width:none}
	.chips::-webkit-scrollbar{display:none}
	.prog{flex-direction:column;align-items:start;gap:10px}
	.gal{grid-template-columns:1fr 1fr;grid-auto-rows:150px;gap:10px}
	.gal .w2,.gal .w4{grid-column:span 2}
	.facts{gap:22px}
	.pager{grid-template-columns:1fr 1fr;font-size:15px}
	.pager>:nth-child(2){grid-column:1 / -1;grid-row:2;text-align:center}
	.lb img{max-width:100vw;max-height:calc(100vh - 140px);border-radius:0}
	.lb__p,.lb__n{top:auto;bottom:12px;transform:none}

	.ft{padding-bottom:110px}
	.ft .bot{flex-direction:column}
	.mbar{display:grid;grid-template-columns:1fr 1fr;gap:10px;position:fixed;left:0;right:0;bottom:0;padding:12px 16px calc(12px + env(safe-area-inset-bottom));background:var(--bg);box-shadow:0 -8px 24px rgba(0,0,0,.08);z-index:30}
	.mbar .btn{justify-content:center}
}