:root{--iv:#F8F5ED;--wh:#FFFFFF;--ink:#262722;--be:#E9E1D4;--go:#B69A62;--mu:#5c5b53;--serif:"Cormorant Garamond",Georgia,"Times New Roman",serif;--sans:"DM Sans",system-ui,-apple-system,"Segoe UI",sans-serif;--w:1240px;--gx:clamp(1.25rem,5vw,3.5rem);color-scheme:light;box-sizing:border-box;padding-top:env(safe-area-inset-top,0px);padding-bottom:env(safe-area-inset-bottom,0px)}
*,*::before,*::after{box-sizing:inherit}
html{scroll-padding-top:calc(env(safe-area-inset-top,0px) + 76px);-webkit-text-size-adjust:100%;background:var(--iv)}
@media(prefers-reduced-motion:no-preference){html{scroll-behavior:smooth}}
body{margin:0;background:var(--iv);color:var(--ink);font:400 1.0625rem/1.65 var(--sans)}
body::before{content:"";position:fixed;inset:0 0 auto;height:env(safe-area-inset-top,0px);background:var(--iv);z-index:25}
img{display:block;max-width:100%;height:auto}
.wrap{width:min(var(--w),100% - 2*var(--gx));margin-inline:auto}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.skip{position:absolute;left:1rem;top:-5rem;background:var(--ink);color:var(--iv);padding:.6rem 1rem;z-index:40}
.skip:focus{top:calc(env(safe-area-inset-top,0px) + .5rem)}
:focus-visible{outline:2px solid var(--ink);outline-offset:3px}
h1,h2,h3{font-family:var(--serif);font-weight:500;line-height:1.04;margin:0;letter-spacing:-.01em}
h1{font-size:clamp(3.1rem,7.6vw,6.6rem)}
h2{font-size:clamp(2.3rem,4.8vw,4rem)}
h3{font-size:1.75rem}
em{font-style:italic;font-weight:400}
.tag{display:block;font-size:.85rem;color:var(--mu);margin:0 0 .5rem;padding-left:1.9rem;position:relative}
.tag::before{content:"";position:absolute;left:0;top:.8em;width:1.3rem;height:1px;background:var(--go)}

.hd{position:sticky;top:env(safe-area-inset-top,0px);z-index:20;background:rgba(248,245,237,.94);-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);transition:box-shadow .3s}
.hd-in{display:flex;align-items:center;gap:2.5rem;padding-block:1.4rem;transition:padding .3s}
.hd.sm{box-shadow:0 1px 0 rgba(38,39,34,.1)}.hd.sm .hd-in{padding-block:.7rem}
.logo{margin-right:auto}.logo img{height:2.4rem;width:auto;transition:height .3s}.hd.sm .logo img{height:1.9rem}
nav{display:flex;gap:2.4rem}
nav a,.link{color:inherit;text-decoration:none;font-size:.95rem;position:relative}
nav a::after,.link::after{content:"";position:absolute;left:0;right:0;bottom:-4px;height:1px;background:var(--go);transform:scaleX(0);transform-origin:left;transition:transform .35s}
nav a:hover::after,.link:hover::after{transform:scaleX(1)}
.btn{display:inline-block;font:500 .95rem var(--sans);padding:.95rem 1.8rem;background:var(--ink);color:var(--iv);border:1px solid var(--ink);text-decoration:none;cursor:pointer;transition:background .3s,color .3s,border-color .3s}
.btn:hover{background:transparent;color:var(--ink);border-color:var(--go)}
.btn-o{background:transparent;color:var(--ink);padding:.65rem 1.3rem;font-size:.9rem}.btn-o:hover{background:var(--ink);color:var(--iv);border-color:var(--ink)}
.burger{display:none;position:relative;width:2.75rem;height:2.75rem;background:none;border:0;cursor:pointer}
.burger i{position:absolute;left:.7rem;right:.7rem;height:1.5px;background:var(--ink);transition:transform .3s}
.burger i:first-of-type{top:1.05rem}.burger i:last-of-type{top:1.6rem}
.burger[aria-expanded=true] i:first-of-type{transform:translateY(.27rem) rotate(45deg)}
.burger[aria-expanded=true] i:last-of-type{transform:translateY(-.28rem) rotate(-45deg)}

.lead{max-width:30rem;color:var(--mu);font-size:1.15rem;margin:1.8rem 0 2.4rem}
.cta{display:flex;align-items:center;gap:2.2rem;flex-wrap:wrap}

.sec{padding-block:clamp(4.5rem,10vw,9rem)}
.sec-h{max-width:40rem;margin-bottom:clamp(2.5rem,6vw,5rem)}
.sec-h p{color:var(--mu);margin:1.2rem 0 0}

.p{margin:0}
.ph{overflow:hidden;background:var(--be)}
.ph img{width:100%;height:100%;object-fit:cover;transition:transform 1.1s cubic-bezier(.2,.7,.2,1)}
.p:hover .ph img{transform:scale(1.035)}
figcaption{padding-top:1.3rem;max-width:26rem}
figcaption p{color:var(--mu);margin:.6rem 0 1.1rem;font-size:1rem}
.more,.lnk{background:none;border:0;border-bottom:1px solid var(--go);padding:0 0 2px;font:inherit;font-size:.92rem;color:var(--ink);cursor:pointer;text-decoration:none;transition:border-color .3s,letter-spacing .3s}
.more:hover,.lnk:hover{border-color:var(--ink)}

.origin{display:grid;grid-template-columns:5fr 6fr;gap:clamp(2rem,7vw,7rem);align-items:center}
.o-i{margin:0}.o-i img{width:100%;aspect-ratio:3/4;object-fit:cover}
.o-t h2{margin-bottom:2rem}.o-t p{color:var(--mu);max-width:34rem}

.proc{background:var(--wh)}
.proc-in{display:grid;grid-template-columns:1fr 1fr;column-gap:clamp(2rem,6vw,6rem);align-items:start}
.pr-h p{color:var(--mu);max-width:30rem;margin:1.4rem 0 2.5rem}
.pr-i{margin:0;grid-column:2;grid-row:1/3}.pr-i img{width:100%;aspect-ratio:3/4;object-fit:cover}
.steps{list-style:none;margin:0;padding:0;grid-column:1}
.steps li{display:grid;grid-template-columns:3.4rem 1fr;column-gap:1rem;padding:1.6rem 0;border-top:1px solid var(--be)}
.steps span{font:italic 500 1.8rem/1.2 var(--serif)}
.steps h3{font-size:1.55rem}.steps h3,.steps p{grid-column:2}.steps p{margin:.4rem 0 0;color:var(--mu)}


.nl{background:var(--be)}
.nl-in{display:grid;grid-template-columns:1fr 1fr;gap:clamp(2rem,6vw,6rem);align-items:center}
.nl p{color:var(--mu)}.nl h2+p{margin:1.2rem 0 0;max-width:30rem}
.row{display:flex;gap:.6rem;flex-wrap:wrap}
.row input{flex:1 1 15rem;font:inherit;padding:.95rem 1.1rem;background:var(--wh);border:1px solid transparent;color:var(--ink);min-width:0}
.consent{display:flex;gap:.7rem;margin-top:1.1rem;font-size:.9rem;color:var(--ink)}
.consent input{accent-color:var(--ink);margin-top:.3rem;flex:none;width:1rem;height:1rem}
#nl-msg{min-height:1.6rem;margin:.9rem 0 0;font-size:.95rem;color:var(--ink)}
.fine{font-size:.85rem;margin:.4rem 0 0}

footer{padding-block:clamp(3.5rem,7vw,6rem) 2.5rem;border-top:1px solid var(--go)}
.ft{display:grid;grid-template-columns:1.4fr 1fr 1fr;gap:3rem}
.ft img{height:2.6rem;width:auto}.st{font:italic 400 1.7rem var(--serif);margin:1.2rem 0 0}
.ft h4{font:500 .9rem var(--sans);color:var(--mu);margin:0 0 1rem}
.ft ul{list-style:none;margin:0;padding:0;display:grid;gap:.55rem;justify-items:start}
.ft a{color:inherit;text-decoration:none}.ft a:hover{text-decoration:underline;text-decoration-color:var(--go);text-underline-offset:4px}
.todo{border-bottom:1px dashed var(--mu);color:var(--mu)}
.legal{margin-top:3.5rem;padding-top:1.5rem;border-top:1px solid var(--be);display:flex;flex-wrap:wrap;gap:.6rem 2rem;justify-content:space-between;font-size:.85rem;color:var(--mu)}

dialog{border:0;padding:2rem;max-width:min(92vw,50rem);max-height:88vh;background:var(--iv);color:var(--ink)}
dialog::backdrop{background:rgba(38,39,34,.6)}
#lb{padding:0;background:var(--wh)}#lb img{max-height:72vh;width:auto;max-width:100%;margin:auto}#lb p{margin:0;padding:1rem 1.5rem;font-size:.95rem}
.x{position:absolute;top:.5rem;right:.6rem;width:2.5rem;height:2.5rem;font-size:1.8rem;line-height:1;background:rgba(248,245,237,.92);border:0;cursor:pointer;color:var(--ink)}
#priv h2{font-size:2.2rem;margin-bottom:1rem}#priv p{font-size:.95rem;color:var(--mu)}

@media(prefers-reduced-motion:no-preference){
.js .rv{opacity:0;transform:translateY(18px);transition:opacity .9s ease,transform .9s cubic-bezier(.2,.7,.2,1)}
.js .rv.in{opacity:1;transform:none}}

@media(max-width:860px){
.hd-cta{display:none}.burger{display:block}
nav{display:none;position:absolute;left:0;right:0;top:100%;flex-direction:column;gap:0;background:var(--iv);padding:.3rem var(--gx) 1.2rem;border-bottom:1px solid var(--be)}
nav.open{display:flex}nav a{padding:.95rem 0;font-size:1.1rem;border-bottom:1px solid var(--be)}nav a::after{display:none}
.hero,.origin,.proc-in,.nl-in,.ft{grid-template-columns:1fr}
.pr-i{grid-column:1;grid-row:auto;margin-bottom:2rem}.steps{grid-column:1}
.o-i img{aspect-ratio:4/3.4}}

/* Hero z ozadjem */
.hero{position:relative;isolation:isolate;display:flex;align-items:center;min-height:max(34rem,calc(100svh - 5.5rem));overflow:hidden}
.hero-bg{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:75% 50%;z-index:-2}
.hero::after{content:"";position:absolute;inset:0;z-index:-1;background:linear-gradient(90deg,rgba(248,245,237,.97) 0%,rgba(248,245,237,.9) 40%,rgba(248,245,237,.3) 72%,rgba(248,245,237,0) 100%)}
.hero-t{padding-block:clamp(3rem,8vw,6rem)}.hero-t>*{max-width:37rem}
.hero h1{font-size:clamp(3.2rem,7vw,6rem)}
.facts{list-style:none;display:flex;flex-wrap:wrap;gap:.4rem 1.6rem;padding:0;margin:2.4rem 0 0;font-size:.92rem}
.facts li{position:relative;padding-left:1.1rem}.facts li::before{content:"";position:absolute;left:0;top:.75em;width:.55rem;height:1px;background:var(--go)}
/* Izdelki */
.pg{display:grid;grid-template-columns:repeat(4,1fr);gap:clamp(1rem,2.5vw,2rem)}
.pc{display:flex;flex-direction:column}.pc .ph{aspect-ratio:4/5}
.pc figcaption{padding-top:1rem;max-width:none;display:flex;flex-direction:column;flex:1}
.pc h3{font-size:1.5rem}.pc p{font-size:.95rem;margin:.4rem 0 .9rem}.pc .more{align-self:flex-start;margin-top:auto}
/* Zgodba */
.origin{align-items:start}.o-i{position:sticky;top:6rem}
.o-t .tag{margin-bottom:1rem}.o-t .quote{font:italic 400 clamp(1.4rem,2.4vw,1.9rem)/1.3 var(--serif);color:var(--ink);margin-top:2rem;padding-top:1.6rem;border-top:1px solid var(--go)}
/* Postopek */
.pr-top{max-width:46rem;margin-bottom:clamp(2.5rem,5vw,4rem)}.pr-top .big{font-size:1.2rem;color:var(--ink);margin:1.4rem 0 0}
.pr-in{display:grid;grid-template-columns:6fr 5fr;gap:clamp(2rem,6vw,6rem);align-items:start}
.pr-in .steps{grid-column:auto}.pr-in figure{margin:0;position:sticky;top:6rem}
.pr-in figure img{width:100%;aspect-ratio:3/4;object-fit:cover}.pr-in figcaption{font-size:.9rem;color:var(--mu);padding-top:.8rem}
.cmp{width:100%;border-collapse:collapse;margin-top:clamp(3rem,6vw,5rem)}
.cmp caption{text-align:left;font:500 clamp(1.8rem,3vw,2.4rem)/1.1 var(--serif);padding-bottom:1.2rem}
.cmp th,.cmp td{text-align:left;padding:1rem 1rem 1rem 0;border-top:1px solid var(--be);vertical-align:top}
.cmp thead th{font-size:.9rem;color:var(--mu);font-weight:500}.cmp tbody th{font-weight:500;width:26%}
.use{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(1.2rem,3vw,3rem);margin-top:clamp(3rem,6vw,5rem);padding-top:2rem;border-top:1px solid var(--go)}
.use h3{font-size:1.5rem;margin-bottom:.5rem}.use p{margin:0;color:var(--mu);font-size:.98rem}
/* Povpraševanje */
.inq{background:var(--wh)}.inq-in{display:grid;grid-template-columns:5fr 6fr;gap:clamp(2rem,6vw,6rem);align-items:start}
.inq p{color:var(--mu)}.inq h2+p{margin:1.2rem 0 1.6rem;max-width:30rem}
.how{list-style:none;margin:0;padding:0;counter-reset:h;display:grid;gap:.8rem}
.how li{counter-increment:h;padding-left:2.2rem;position:relative}.how li::before{content:counter(h);position:absolute;left:0;font:italic 500 1.4rem/1.2 var(--serif)}
#inq{display:grid;gap:1.4rem}#inq fieldset{border:0;padding:0;margin:0}
#inq legend{font-size:.9rem;color:var(--mu);margin-bottom:.6rem;padding:0}
#inq fieldset label{display:inline-flex;gap:.55rem;align-items:center;margin:0 1.4rem .5rem 0}
#inq input[type=checkbox],#inq input[type=radio]{accent-color:var(--ink);width:1.05rem;height:1.05rem}
.f2{display:grid;grid-template-columns:1fr 1fr;gap:1rem}
#inq>label,.f2 label{display:grid;gap:.4rem;font-size:.9rem;color:var(--mu)}
#inq input:not([type=checkbox]):not([type=radio]),#inq textarea{font:inherit;color:var(--ink);padding:.9rem 1rem;background:var(--iv);border:1px solid var(--be);width:100%;min-width:0}
#inq .btn{justify-self:start}#inq-msg{min-height:1.4rem;margin:0;color:var(--ink);font-size:.95rem}
@media(max-width:860px){
.hero{align-items:flex-start;min-height:0}.hero-bg{inset:0 0 auto;height:23rem;object-position:50% 50%}.hero::after{inset:0 0 auto;height:23rem;background:linear-gradient(180deg,rgba(248,245,237,0) 45%,rgba(248,245,237,.85) 80%,#F8F5ED 100%)}.hero-t{padding-top:16rem;padding-bottom:3rem}
.pg{grid-template-columns:1fr 1fr}.o-i,.pr-in figure{position:static}
.pr-in,.inq-in,.use,.f2{grid-template-columns:1fr}.cmp tbody th{width:auto}}

.o-i{margin:0}.o-i img{object-position:50% 25%}.o-i figcaption{font-size:.9rem;color:var(--mu);padding-top:.8rem}

/* Izdelki: enake velikosti, 3 + 2 na sredini */
.pg{grid-template-columns:repeat(6,1fr)}
.pc{grid-column:span 2}.pc .ph{aspect-ratio:4/5}
.pc:nth-child(4){grid-column:2/4}.pc:nth-child(5){grid-column:4/6}
.pc .pair{color:var(--ink);padding-top:.7rem;border-top:1px solid var(--be);margin:0 0 1rem}
@media(max-width:860px){.pg{grid-template-columns:repeat(4,1fr)}.pc,.pc:nth-child(4){grid-column:span 2}.pc:nth-child(5){grid-column:2/4}}
@media(max-width:560px){.pg{grid-template-columns:1fr}.pc,.pc:nth-child(4),.pc:nth-child(5){grid-column:auto}}