/*
Theme Name:   4CHEF Child
Theme URI:    https://4chef.hr
Description:  Dizajn 4CHEF za WooCommerce B2B. Child tema za Blocksy.
Author:       Perasma
Author URI:   https://perasma.dev
Template:     blocksy
Version:      3.5.0
Text Domain:  4chef-child
*/

:root{
 /* BRAND */
 --ink:#160606; --acc:#E65224; --acc-d:#C4400F; --acc-t:#FDF1EC;
 /* NEUTRALS izvedeni iz ink */
 --n900:#160606; --n700:#3B2A26; --n500:#7A6A65; --n300:#D8CFCB; --n200:#EAE3E0; --n100:#F5F1EF; --paper:#FFFFFF; --bg:#FBF9F8;
 --grn:#2C6B45; --red:#9A3B3B;
 /* RADIUS / MOTION */
 --r:16px; --rs:11px; --rp:999px;
 --sp:.34s cubic-bezier(.32,.72,0,1);      /* spring-like, critically damped */
 --sp-b:.42s cubic-bezier(.22,1.12,.36,1);  /* slight overshoot, momentum only */
 --t:.16s cubic-bezier(.32,.72,0,1);
 --fd:'Archivo',system-ui,sans-serif; --fb:'DM Sans',system-ui,sans-serif;
 --max:1320px;
}
*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}
body{background:var(--bg);color:var(--n700);font-family:var(--fb);font-size:1rem;line-height:1.65;-webkit-font-smoothing:antialiased;padding-bottom:0}
a{color:inherit;text-decoration:none} img{max-width:100%;display:block}
button,input,select,textarea{font:inherit;color:inherit}
::selection{background:var(--acc);color:#fff}

/* TYPE — tracking je specifičan za veličinu */
h1,h2,h3,h4{font-family:var(--fd);color:var(--n900);font-weight:800;font-optical-sizing:auto}
h1{font-size:clamp(2.3rem,4.6vw,4.1rem);line-height:1.02;letter-spacing:-.034em}
h2{font-size:clamp(1.85rem,3.2vw,2.85rem);line-height:1.06;letter-spacing:-.028em}
h3{font-size:1.28rem;line-height:1.2;letter-spacing:-.016em;font-weight:700}
h4{font-size:1.03rem;line-height:1.28;letter-spacing:-.01em;font-weight:700}
.dsp{font-size:clamp(2.7rem,5.4vw,5rem);line-height:.98;letter-spacing:-.04em}
.eb{font-size:.66rem;letter-spacing:.2em;text-transform:uppercase;color:var(--acc);font-weight:700}
.lead{font-size:1.06rem;line-height:1.6;letter-spacing:.002em}
small,.sm{font-size:.8rem;letter-spacing:.008em}
.prose p{margin-bottom:.95rem;max-width:70ch}
.prose h3{margin:1.9rem 0 .7rem}
.wrap{width:min(calc(100% - 2.75rem),var(--max));margin:auto}

.mut{color:var(--n500)}

/* PRESS FEEDBACK — odmah, na pritisak */
.btn,.padd,.ibtn,.cbtn,.chip,.fpill,.pgn a{touch-action:manipulation}
.btn:active,.padd:active,.ibtn:active,.cbtn:active{transform:scale(.972);transition:transform .1s ease-out}

.btn{display:inline-flex;align-items:center;justify-content:center;gap:.55rem;background:var(--acc);color:#fff;border:1.5px solid var(--acc);border-radius:var(--rp);padding:.92rem 1.85rem;font-weight:700;font-size:.86rem;letter-spacing:.02em;cursor:pointer;transition:background var(--t),border-color var(--t),color var(--t),transform var(--t)}
.btn:hover{background:var(--acc-d);border-color:var(--acc-d)}
.btn.dk{background:var(--n900);border-color:var(--n900)}.btn.dk:hover{background:var(--acc);border-color:var(--acc)}
.btn.gh{background:transparent;color:var(--n900);border-color:var(--n900)}.btn.gh:hover{background:var(--n900);color:#fff}
.btn.wh{background:transparent;color:#fff;border-color:rgba(255,255,255,.5)}.btn.wh:hover{background:#fff;color:var(--n900);border-color:#fff}
.btn.ln{background:transparent;color:var(--n700);border-color:var(--n300)}.btn.ln:hover{border-color:var(--n900);color:var(--n900)}
.btn.mt{background:var(--n200);border-color:var(--n200);color:var(--n500);cursor:not-allowed}
.btn.f{width:100%}.btn.s{padding:.62rem 1.1rem;font-size:.76rem}

/* HEADER — translucentni sloj, scroll edge umjesto tvrde linije */
header{position:sticky;top:0;z-index:60;background:rgba(251,249,248,.72);backdrop-filter:blur(22px) saturate(180%);-webkit-backdrop-filter:blur(22px) saturate(180%)}
header::after{content:"";position:absolute;left:0;right:0;bottom:-1.4rem;height:1.4rem;background:linear-gradient(rgba(251,249,248,.55),rgba(251,249,248,0));pointer-events:none}
.tb{height:5.4rem;display:flex;align-items:center;gap:2.6rem}
.logo{flex-shrink:0;display:block}
.logo img{height:2.55rem;width:auto}
.nav{display:flex;gap:2.2rem;font-size:.9rem;font-weight:500}
.nav a{padding:.35rem 0;position:relative;color:var(--n700);transition:color var(--t)}
.nav a::after{content:"";position:absolute;left:0;right:0;bottom:0;height:2px;background:var(--acc);border-radius:2px;transform:scaleX(0);transform-origin:left;transition:transform var(--sp)}
.nav a:hover{color:var(--n900)}.nav a:hover::after,.nav a.on::after{transform:scaleX(1)}
.nav a.on{color:var(--n900);font-weight:700}
.hact{display:flex;gap:.6rem;align-items:center;margin-left:auto}
.srch{position:relative;width:16rem}
.srch input{width:100%;border:1px solid var(--n200);background:var(--paper);border-radius:var(--rp);padding:.65rem 1rem .65rem 2.4rem;font-size:.84rem;transition:border-color var(--t),box-shadow var(--t)}
.srch input:focus{outline:none;border-color:var(--acc);box-shadow:0 0 0 3px var(--acc-t)}
.srch svg{position:absolute;left:.9rem;top:.72rem;stroke:var(--n500)}
.ibtn{width:2.65rem;height:2.65rem;border:1px solid var(--n200);background:var(--paper);border-radius:50%;display:grid;place-items:center;cursor:pointer;transition:border-color var(--t),transform var(--t)}
.ibtn:hover{border-color:var(--n900)}
.cbtn{display:flex;align-items:center;gap:.55rem;background:var(--n900);color:#fff;border:none;border-radius:var(--rp);padding:.72rem 1.2rem;font-size:.84rem;font-weight:700;cursor:pointer;position:relative;transition:background var(--t),transform var(--t)}
.cbtn:hover{background:var(--acc)}
.cbtn i{position:absolute;top:-.25rem;left:.6rem;background:var(--acc);color:#fff;font-style:normal;font-size:.6rem;font-weight:700;border-radius:var(--rp);padding:.05rem .32rem;border:2px solid var(--bg)}

/* HERO */
.hero{padding:1.6rem 0 0}
.hcard{border-radius:26px;overflow:hidden;position:relative;min-height:38rem;display:flex;align-items:center;background:#100403}
.himg{position:absolute;inset:0;background-size:cover;background-position:center;
 background-image:linear-gradient(96deg,rgba(14,4,3,.95) 0%,rgba(14,4,3,.82) 44%,rgba(14,4,3,.3) 84%,rgba(14,4,3,.45) 100%),url('https://images.unsplash.com/photo-1517248135467-4c7edcad34c4?auto=format&fit=crop&w=1900&q=85')}
.hin{position:relative;z-index:2;padding:4.4rem;max-width:52rem;width:100%}
.hin h1{color:#fff;margin:1.15rem 0 1.4rem}
.hin p{color:rgba(255,255,255,.78);max-width:35rem;font-size:1.06rem;letter-spacing:.004em}
.hbtns{display:flex;gap:.7rem;margin-top:1.9rem;flex-wrap:wrap}
.hmeta{display:flex;gap:2.7rem;margin-top:3rem;padding-top:1.6rem;border-top:1px solid rgba(255,255,255,.22);flex-wrap:wrap}
.hmeta b{display:block;font-family:var(--fd);font-size:1.7rem;color:#fff;font-weight:700;letter-spacing:-.02em}
.hmeta span{font-size:.66rem;color:rgba(255,255,255,.58);text-transform:uppercase;letter-spacing:.13em}

.sec{padding:5.4rem 0}
.shd{display:flex;justify-content:space-between;align-items:flex-end;gap:1.6rem;margin-bottom:2.2rem;flex-wrap:wrap}
.shd h2{margin-top:.5rem}
.shd p{font-size:.97rem;color:var(--n500);margin-top:.6rem;max-width:38rem}
.lnk{font-size:.85rem;font-weight:700;color:var(--acc);display:inline-flex;gap:.45rem;align-items:center;white-space:nowrap;transition:gap var(--sp)}
.lnk:hover{gap:.75rem}
.seo{max-width:52rem}
.seo p{font-size:1.01rem}

/* KATEGORIJE */
.cgrid{display:grid;grid-template-columns:repeat(4,1fr);gap:1.1rem}
.ccard{position:relative;overflow:hidden;border-radius:var(--r);aspect-ratio:4/3.4;background:var(--n200);display:block}
.ccard .ph{position:absolute;inset:0;background-size:cover;background-position:center;transition:transform .62s cubic-bezier(.32,.72,0,1)}
.ccard:hover .ph{transform:scale(1.055)}
.ccard::after{content:"";position:absolute;inset:0;background:linear-gradient(rgba(22,6,6,.02) 34%,rgba(22,6,6,.82))}
.cinf{position:absolute;z-index:2;left:1.35rem;right:1.35rem;bottom:1.25rem;color:#fff}
.cinf small{letter-spacing:.14em;text-transform:uppercase;opacity:.74;font-weight:700;font-size:.62rem}
.cinf h3{color:#fff;font-size:1.32rem;margin-top:.3rem}
.cinf p{color:rgba(255,255,255,.66);font-size:.78rem;margin-top:.25rem;line-height:1.45}

/* PROIZVOD */
.pgrid{display:grid;grid-template-columns:repeat(3,1fr);gap:1.15rem}
.pgrid.c4{grid-template-columns:repeat(4,1fr)}
.prod{background:var(--paper);border:1px solid var(--n200);border-radius:var(--r);overflow:hidden;display:flex;flex-direction:column;transition:border-color var(--t),box-shadow var(--sp),transform var(--sp)}
.prod:hover{border-color:var(--n300);box-shadow:0 .4rem 1.5rem rgba(22,6,6,.06);transform:translateY(-2px)}
.pvis{aspect-ratio:16/11;position:relative;overflow:hidden;background:var(--n100)}
.pvis .ph{position:absolute;inset:0;background-size:cover;background-position:center;transition:transform .55s cubic-bezier(.32,.72,0,1)}
.prod:hover .pvis .ph{transform:scale(1.05)}
.pvis .noimg{position:absolute;inset:0;display:grid;place-items:center;font-size:.62rem;letter-spacing:.14em;color:var(--n300);font-weight:700}
.bdg{position:absolute;left:.7rem;top:.7rem;background:var(--acc);color:#fff;font-size:.58rem;font-weight:700;letter-spacing:.09em;padding:.32rem .62rem;border-radius:7px;text-transform:uppercase;z-index:2}
.bdg.d{background:rgba(22,6,6,.88)}.bdg.g{background:var(--grn)}
.pack{position:absolute;left:.7rem;bottom:.7rem;background:rgba(255,255,255,.94);backdrop-filter:blur(8px);color:var(--n900);font-size:.66rem;font-weight:700;padding:.32rem .62rem;border-radius:7px;z-index:2}
.pbody{padding:1.05rem 1.15rem 1.15rem;display:flex;flex-direction:column;flex:1}
.pbrand{font-size:.6rem;letter-spacing:.14em;text-transform:uppercase;color:var(--acc);font-weight:700;margin-bottom:.38rem}
.prod h3{font-size:1rem;line-height:1.28;margin-bottom:.25rem;min-height:2.56em;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.pit{font-size:.75rem;font-style:italic;color:var(--n500);margin-bottom:.7rem;min-height:1.6em;display:-webkit-box;-webkit-line-clamp:1;-webkit-box-orient:vertical;overflow:hidden}
.pstk{font-size:.72rem;font-weight:700;display:flex;gap:.32rem;align-items:center;margin-bottom:.8rem;color:var(--grn)}
.prow{display:flex;justify-content:space-between;align-items:flex-end;gap:.7rem;margin-top:auto;padding-top:.8rem;border-top:1px solid var(--n200)}
.ppr{font-family:var(--fd);font-size:1.25rem;font-weight:800;color:var(--n900);line-height:1.1;letter-spacing:-.02em}
.ppr del{font-size:.84rem;font-weight:500;color:var(--n500);margin-left:.38rem;font-family:var(--fb)}
.pvat{font-size:.63rem;color:var(--n500);margin-top:.12rem}
.padd{background:var(--n900);color:#fff;border:none;border-radius:var(--rp);padding:.55rem .95rem;font-size:.72rem;font-weight:700;display:inline-flex;gap:.35rem;align-items:center;cursor:pointer;white-space:nowrap;transition:background var(--t),transform var(--t)}
.padd:hover{background:var(--acc)}
.pq{font-size:.75rem;color:var(--n500);margin-bottom:.5rem}

/* SPLIT / USP */
.split{display:grid;grid-template-columns:1fr 1fr;gap:1.15rem;align-items:stretch}
.sph{min-height:30rem;border-radius:22px;background-size:cover;background-position:center}
.scp{background:var(--n900);color:#fff;border-radius:22px;padding:3.4rem;display:flex;flex-direction:column;justify-content:center}
.scp h2{color:#fff;margin-bottom:1.1rem}
.scp p{color:rgba(255,255,255,.7);margin-bottom:.85rem;font-size:.98rem}
.quote{border-left:3px solid var(--acc);padding-left:1.25rem;margin-top:1.5rem}
.quote b{display:block;font-family:var(--fd);font-size:1.25rem;color:#fff;font-style:italic;font-weight:600;line-height:1.35;letter-spacing:-.015em}
.quote small{letter-spacing:.14em;text-transform:uppercase;color:rgba(255,255,255,.48);font-weight:700;font-size:.62rem}
.usp,.vals{display:grid;grid-template-columns:repeat(4,1fr);gap:1rem}
.uc,.val{background:var(--paper);border:1px solid var(--n200);border-radius:var(--r);padding:1.7rem}
.uc .ic,.val .ic{width:2.5rem;height:2.5rem;border-radius:12px;background:var(--acc-t);color:var(--acc);display:grid;place-items:center;margin-bottom:1rem}
.uc h4,.val h4{margin-bottom:.45rem}
.uc p,.val p{font-size:.85rem;color:var(--n500);line-height:1.6}

/* PAGE HEAD */
.crumb{font-size:.72rem;color:var(--n500);padding-top:1.7rem}
.phd{padding:.85rem 0 1.85rem;display:flex;justify-content:space-between;align-items:flex-end;gap:1.5rem;flex-wrap:wrap;border-bottom:1px solid var(--n200)}
.phd p{font-size:.95rem;color:var(--n500);margin-top:.7rem;max-width:40rem}

/* SHOP */
.shop{display:grid;grid-template-columns:15.5rem 1fr;gap:2.1rem;padding:1.7rem 0 5.4rem}
.fpanel{background:var(--paper);border:1px solid var(--n200);border-radius:var(--r);padding:1.25rem;position:sticky;top:6.6rem}
.fpanel h4{font-size:.82rem;display:flex;gap:.5rem;align-items:center;padding-bottom:.85rem;border-bottom:1px solid var(--n200);margin-bottom:.3rem}
.fgrp{padding:1rem 0;border-bottom:1px solid var(--n200)}
.fgrp:last-of-type{border:none}
.fgrp h5{font-size:.63rem;letter-spacing:.13em;text-transform:uppercase;color:var(--n500);font-weight:700;margin-bottom:.65rem}
.fgrp label{display:flex;gap:.55rem;align-items:center;font-size:.82rem;padding:.3rem 0;cursor:pointer}
.fgrp label .n{margin-left:auto;font-size:.7rem;color:var(--n500)}
.fgrp input[type=checkbox]{accent-color:var(--acc);width:.9rem;height:.9rem}
.fsearch{position:relative}
.fsearch input{width:100%;border:1px solid var(--n200);border-radius:var(--rs);padding:.55rem .7rem .55rem 1.95rem;font-size:.82rem;background:var(--bg)}
.fsearch svg{position:absolute;left:.62rem;top:.62rem;stroke:var(--n500)}
.rng{width:100%;accent-color:var(--acc);margin:.35rem 0}
.tbar{display:flex;justify-content:space-between;align-items:center;gap:.9rem;margin-bottom:1.1rem;flex-wrap:wrap}
.tbar .cnt{font-size:.85rem;color:var(--n500)}
.sel{border:1px solid var(--n200);border-radius:var(--rp);padding:.55rem .9rem;font-size:.78rem;background:var(--paper)}
.chips{display:flex;gap:.42rem;flex-wrap:wrap;margin-bottom:1rem}
.chip{display:inline-flex;gap:.42rem;align-items:center;border:1px solid var(--n200);background:var(--paper);border-radius:var(--rp);padding:.35rem .75rem;font-size:.72rem}
.chip b{cursor:pointer;color:var(--n500);font-weight:400}
.pgn{display:flex;gap:.35rem;justify-content:center;padding:2.4rem 0 0}
.pgn a{width:2.35rem;height:2.35rem;display:grid;place-items:center;border:1px solid var(--n200);border-radius:50%;font-size:.82rem;font-weight:700;background:var(--paper);transition:background var(--t),color var(--t)}
.pgn a.on,.pgn a:hover{background:var(--n900);color:#fff;border-color:var(--n900)}

/* PDP */
.pdp{display:grid;grid-template-columns:1.05fr .95fr;gap:3.4rem;padding:1.9rem 0 0}
.gal{display:grid;grid-template-columns:5.2rem 1fr;gap:.75rem}
.thmb{display:flex;flex-direction:column;gap:.6rem}
.thmb div{aspect-ratio:1;border:1px solid var(--n200);border-radius:var(--rs);background-size:cover;background-position:center;cursor:pointer;transition:border-color var(--t),transform var(--t)}
.thmb div.on,.thmb div:hover{border-color:var(--n900)}
.thmb div:active{transform:scale(.96)}
.gmain{border-radius:20px;background-size:cover;background-position:center;min-height:34rem;position:relative;border:1px solid var(--n200)}
.pdp h1{font-size:clamp(1.85rem,3.4vw,2.85rem);margin:.55rem 0 .7rem;letter-spacing:-.028em}
.pmeta{display:flex;flex-wrap:wrap;gap:.45rem;margin-bottom:1.1rem}
.tag{border:1px solid var(--n200);background:var(--paper);border-radius:var(--rp);padding:.35rem .8rem;font-size:.72rem;color:var(--n500)}
.tag b{color:var(--n900)}
.pdesc{font-size:1rem;max-width:35rem;margin-bottom:1.5rem}
.buy{background:var(--paper);border:1px solid var(--n200);border-radius:var(--r);padding:1.5rem;margin-bottom:1.4rem}
.buy.hot{border-color:var(--acc);background:var(--acc-t)}
.bprice{font-family:var(--fd);font-size:2.4rem;font-weight:800;color:var(--n900);line-height:1;letter-spacing:-.03em}
.bprice del{font-size:1.35rem;font-weight:500;color:var(--n500);margin-left:.55rem;font-family:var(--fb)}
.bvat{font-size:.78rem;color:var(--n500);margin-top:.38rem}
.brow{display:flex;gap:.6rem;margin-top:1.25rem}
.qty{display:flex;border:1px solid var(--n200);border-radius:var(--rp);overflow:hidden;background:var(--paper)}
.qty button{width:2.5rem;background:none;border:none;font-size:1.05rem;cursor:pointer;color:var(--n700);transition:background var(--t)}
.qty button:hover{background:var(--n100)}
.qty input{width:2.9rem;text-align:center;border:none;background:none}
.tiers{width:100%;border-collapse:collapse;font-size:.82rem;margin-top:1.2rem}
.tiers th{text-align:left;font-size:.6rem;letter-spacing:.12em;text-transform:uppercase;color:var(--n500);padding-bottom:.5rem;border-bottom:1px solid var(--n200);font-weight:700}
.tiers td{padding:.55rem 0;border-bottom:1px solid var(--n200)}
.tiers td:last-child{text-align:right;font-weight:700;color:var(--n900)}
.ilines{display:grid;gap:.55rem;font-size:.78rem;color:var(--n500);margin-top:1.05rem}
.ilines div{display:flex;gap:.5rem;align-items:center}
.specs{display:grid;grid-template-columns:1fr 1fr;border-top:1px solid var(--n200);margin-top:1.9rem}
.spec{padding:.85rem 0;border-bottom:1px solid var(--n200);font-size:.88rem;color:var(--n900);font-weight:500}
.spec:nth-child(odd){padding-right:1.1rem}
.spec b{display:block;font-size:.6rem;text-transform:uppercase;letter-spacing:.12em;color:var(--n500);margin-bottom:.22rem;font-weight:700}
.tabs{display:flex;gap:1.75rem;border-bottom:1px solid var(--n200);margin:3.2rem 0 1.5rem;overflow-x:auto}
.tabs button{background:none;border:none;font-family:var(--fd);font-size:1.05rem;font-weight:700;color:var(--n500);padding:0 0 .8rem;cursor:pointer;border-bottom:2px solid transparent;margin-bottom:-1px;white-space:nowrap;letter-spacing:-.012em;transition:color var(--t)}
.tabs button.on{color:var(--n900);border-color:var(--acc)}
.tc{display:none}.tc.on{display:block}

/* CART / CHECKOUT */
.clay{display:grid;grid-template-columns:1fr 23.5rem;gap:2.75rem;padding:1.6rem 0 5.4rem}
.citems{border-top:1px solid var(--n200)}
.citem{display:grid;grid-template-columns:6.5rem 1fr auto auto;gap:1.1rem;padding:1.15rem 0;border-bottom:1px solid var(--n200);align-items:center}
.cimg{aspect-ratio:1;border-radius:var(--rs);background-size:cover;background-position:center;border:1px solid var(--n200)}
.citem h3{font-size:1.05rem;margin-bottom:.15rem}
.citem .sm2{font-size:.72rem;color:var(--n500)}
.citem .rm{font-size:.72rem;color:var(--n500);margin-top:.5rem;cursor:pointer;display:inline-block}
.citem .rm:hover{color:var(--red)}
.citem .tot{font-family:var(--fd);font-size:1.18rem;font-weight:800;color:var(--n900);white-space:nowrap;text-align:right;letter-spacing:-.02em}
.sumbox{background:var(--n900);color:#fff;border-radius:var(--r);padding:1.75rem;position:sticky;top:6.6rem;height:max-content}
.sumbox h3{color:#fff;font-size:1.45rem;margin-bottom:1.1rem}
.sl{display:flex;justify-content:space-between;padding:.55rem 0;font-size:.85rem;color:rgba(255,255,255,.72)}
.sl b{color:#fff;font-weight:700}
.sl.gr{color:#7FBF95}
.stot{display:flex;justify-content:space-between;align-items:baseline;border-top:1px solid rgba(255,255,255,.2);padding-top:1.05rem;margin-top:.7rem;font-size:.88rem;color:#fff;font-weight:700}
.stot b{font-family:var(--fd);font-size:1.85rem;font-weight:800;letter-spacing:-.028em}
.sumbox .btn{margin-top:1.1rem;background:#fff;color:var(--n900);border-color:#fff}
.sumbox .btn:hover{background:var(--acc);border-color:var(--acc);color:#fff}
.snote{font-size:.68rem;color:rgba(255,255,255,.48);text-align:center;margin-top:.75rem;line-height:1.5}
.cardbox{background:var(--paper);border:1px solid var(--n200);border-radius:var(--r);padding:1.65rem;margin-bottom:1.1rem}
.cardbox h3{font-size:1.22rem;margin-bottom:1.1rem;display:flex;gap:.55rem;align-items:center}
.fgrid{display:grid;grid-template-columns:1fr 1fr;gap:.95rem}
.fld{display:grid;gap:.35rem}.fld.w{grid-column:1/-1}
.fld label{font-size:.63rem;letter-spacing:.1em;text-transform:uppercase;font-weight:700;color:var(--n500)}
.fld label i{color:var(--acc);font-style:normal}
.fld input,.fld select,.fld textarea{border:1px solid var(--n200);background:var(--bg);border-radius:var(--rs);padding:.75rem .82rem;font-size:.88rem;outline:none;transition:border-color var(--t),box-shadow var(--t),background var(--t)}
.fld input:focus,.fld textarea:focus,.fld select:focus{border-color:var(--acc);background:var(--paper);box-shadow:0 0 0 3px var(--acc-t)}
.fld .hint{font-size:.72rem;color:var(--n500)}
.opt label{display:flex;gap:.75rem;align-items:flex-start;border:1px solid var(--n200);border-radius:var(--rs);padding:.95rem;margin-bottom:.62rem;cursor:pointer;transition:border-color var(--t),background var(--t)}
.opt label:hover{border-color:var(--n900)}
.opt label.on{border-color:var(--acc);background:var(--acc-t)}
.opt input{accent-color:var(--acc);margin-top:.25rem}
.opt b{display:block;font-size:.88rem;color:var(--n900)}
.opt span{font-size:.78rem;color:var(--n500)}
.hub{background:var(--bg);border:1px dashed var(--acc);border-radius:var(--rs);padding:.85rem;margin-top:.75rem;font-size:.78rem;font-family:ui-monospace,monospace;line-height:1.8}
.hub b{font-family:var(--fb)}
.steps{display:flex;gap:2rem;padding:1.4rem 0;border-bottom:1px solid var(--n200);flex-wrap:wrap;margin-bottom:1.6rem}
.steps div{display:flex;gap:.55rem;align-items:center;font-size:.78rem;color:var(--n500)}
.steps div i{width:1.5rem;height:1.5rem;border-radius:50%;border:1.5px solid var(--n200);display:grid;place-items:center;font-size:.68rem;font-style:normal;font-weight:700}
.steps div.on{color:var(--n900);font-weight:700}
.steps div.on i{background:var(--acc);border-color:var(--acc);color:#fff}
.steps div.dn i{background:var(--grn);border-color:var(--grn);color:#fff}

/* STATES */
.cst{text-align:center;padding:5rem 1.5rem;max-width:40rem;margin:auto}
.cst .ci{width:4.6rem;height:4.6rem;border-radius:50%;background:var(--grn);color:#fff;display:grid;place-items:center;margin:0 auto 1.5rem}
.cst p{font-size:1rem;color:var(--n500)}
.okbox{background:#EEF6F0;border:1px solid #C9E2D2;border-radius:var(--r);padding:1.75rem;text-align:center;max-width:52rem;margin:0 auto 1.6rem}
.okbox h1{font-size:clamp(1.6rem,3.2vw,2.35rem)}
.obox{background:var(--paper);border:1px solid var(--n200);border-radius:var(--r);max-width:52rem;margin:0 auto;overflow:hidden}
.oh{display:grid;grid-template-columns:repeat(4,1fr);gap:1rem;padding:1.35rem 1.6rem;border-bottom:1px solid var(--n200)}
.oh div small{display:block;font-size:.6rem;letter-spacing:.1em;text-transform:uppercase;color:var(--n500);font-weight:700;margin-bottom:.3rem}
.oh div b{font-size:.9rem;color:var(--n900)}
.ob{padding:1.6rem}
.paybox{background:var(--n900);color:#fff;border-radius:var(--r);padding:1.35rem;margin-bottom:1.4rem}
.paybox .ph2{display:flex;justify-content:space-between;align-items:center;gap:.75rem;margin-bottom:1rem;flex-wrap:wrap}
.paybox h4{color:#fff;font-size:.92rem}
.paybox .lim{background:var(--acc);color:#fff;font-size:.62rem;font-weight:700;padding:.25rem .62rem;border-radius:7px}
.paygrid{display:grid;grid-template-columns:repeat(3,1fr);gap:1.1rem;font-family:ui-monospace,monospace;font-size:.8rem}
.paygrid small{display:block;font-family:var(--fb);font-size:.6rem;letter-spacing:.09em;text-transform:uppercase;color:rgba(255,255,255,.48);font-weight:700;margin-bottom:.3rem}
.paygrid b{color:#fff}.paygrid .a2{color:#F2895E;font-size:1rem}
.paynote{font-size:.75rem;color:rgba(255,255,255,.58);margin-top:1rem;padding-top:.85rem;border-top:1px solid rgba(255,255,255,.14);font-family:var(--fb)}
.orow{display:flex;justify-content:space-between;gap:1rem;padding:.75rem 0;border-bottom:1px solid var(--n200);font-size:.88rem;align-items:center}
.orow .oi{width:2.75rem;height:2.75rem;border-radius:9px;background-size:cover;background-position:center;flex-shrink:0}
.two{display:grid;grid-template-columns:1fr 1fr;gap:1rem;margin-top:1.4rem}
.mini{background:var(--bg);border:1px solid var(--n200);border-radius:var(--rs);padding:1.1rem;font-size:.85rem;line-height:1.75}
.mini h5{font-size:.68rem;letter-spacing:.1em;text-transform:uppercase;color:var(--acc);font-weight:700;margin-bottom:.55rem;display:flex;gap:.42rem;align-items:center}
.empty{background:var(--paper);border:1px solid var(--n200);border-radius:var(--r);text-align:center;padding:4.4rem 1.6rem}
.empty h3{font-size:1.6rem;margin:1.1rem 0 .55rem}
.empty p{color:var(--n500);margin-bottom:1.4rem}

/* ACCOUNT */
.acc{display:grid;grid-template-columns:14.4rem 1fr;gap:2.1rem;padding:1.6rem 0 5.4rem}
.anav{background:var(--paper);border:1px solid var(--n200);border-radius:var(--r);padding:.5rem;position:sticky;top:6.6rem;height:max-content}
.anav a{display:block;padding:.72rem .85rem;font-size:.88rem;border-radius:var(--rs);transition:background var(--t),color var(--t)}
.anav a:hover{background:var(--n100)}
.anav a.on{background:var(--n900);color:#fff;font-weight:700}
.stats{display:grid;grid-template-columns:repeat(3,1fr);gap:.9rem;margin-bottom:1.1rem}
.stat{background:var(--paper);border:1px solid var(--n200);border-radius:var(--r);padding:1.35rem}
.stat small{font-size:.62rem;letter-spacing:.11em;text-transform:uppercase;color:var(--n500);font-weight:700}
.stat b{display:block;font-family:var(--fd);font-size:1.85rem;color:var(--n900);margin-top:.4rem;letter-spacing:-.028em}
.stat.hot{background:var(--acc-t);border-color:var(--acc)}.stat.hot b{color:var(--acc)}
.otbl{width:100%;border-collapse:collapse;font-size:.88rem;background:var(--paper);border:1px solid var(--n200);border-radius:var(--r);overflow:hidden}
.otbl th{text-align:left;font-size:.6rem;letter-spacing:.12em;text-transform:uppercase;color:var(--n500);padding:.95rem 1.1rem;border-bottom:1px solid var(--n200);font-weight:700}
.otbl td{padding:1rem 1.1rem;border-bottom:1px solid var(--n200)}
.otbl tr:last-child td{border:none}
.pill{display:inline-block;font-size:.68rem;font-weight:700;padding:.3rem .75rem;border-radius:var(--rp)}
.pill.w{background:#FBEEDF;color:#8C5518}.pill.g{background:#E7F2EA;color:var(--grn)}.pill.r{background:#F9EAE8;color:var(--red)}

/* ABOUT / CONTACT */
.ahero{padding:5.2rem 0 0}
.ahero h1{max-width:60rem}
.ahero p{font-size:1.15rem;max-width:41rem;margin-top:1.6rem}
.logi{background:var(--n900);color:#fff;border-radius:22px;padding:2.9rem;display:grid;grid-template-columns:1.25fr .75fr;gap:2.6rem}
.logi h2{color:#fff;margin-bottom:1.1rem}
.zones{display:grid;grid-template-columns:1fr 1fr;gap:.75rem;margin-top:1.4rem}
.zone{background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.12);border-radius:var(--rs);padding:1rem}
.zone b{display:block;color:#fff;font-size:.88rem;margin-bottom:.22rem}
.zone span{font-size:.78rem;color:rgba(255,255,255,.62)}
.cbox{background:var(--paper);border:1px solid var(--n200);border-radius:var(--r);padding:1.65rem;margin-bottom:1rem}
.cbox .row{display:flex;gap:.85rem;align-items:flex-start;margin-bottom:1rem}
.cbox .ic{width:2.9rem;height:2.9rem;border-radius:13px;background:var(--n900);color:#fff;display:grid;place-items:center;flex-shrink:0}
.cline{display:flex;gap:.62rem;align-items:center;padding:.5rem 0;font-size:.85rem;border-top:1px solid var(--n200)}
.cline svg{color:var(--n500);flex-shrink:0}
.warn{background:var(--acc-t);border:1px solid #F2D4C6;border-radius:var(--r);padding:1.35rem;font-size:.85rem;line-height:1.7}
.warn b{color:var(--acc);display:block;margin-bottom:.42rem;font-family:var(--fd);font-size:.95rem}
.faq{border-top:1px solid var(--n200)}
.faq details{border-bottom:1px solid var(--n200)}
.faq summary{padding:1.15rem 0;font-family:var(--fd);font-size:1.05rem;font-weight:700;color:var(--n900);cursor:pointer;list-style:none;display:flex;justify-content:space-between;gap:1rem;letter-spacing:-.012em}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:"+";color:var(--acc);font-size:1.35rem;line-height:1}
.faq details[open] summary::after{content:"−"}
.faq p{padding:0 0 1.25rem;max-width:70ch;font-size:.94rem}

/* FOOTER */
footer{background:var(--n900);color:#fff;padding:4.4rem 0 1.5rem}
.fg{display:grid;grid-template-columns:1.6fr 1fr 1fr 1fr;gap:2.6rem;padding-bottom:2.5rem;border-bottom:1px solid rgba(255,255,255,.14)}
.fg img{height:2.35rem;width:auto}
footer h4{font-size:.62rem;letter-spacing:.14em;text-transform:uppercase;color:rgba(255,255,255,.44);margin-bottom:1rem;font-weight:700}
footer a{display:block;margin:.62rem 0;font-size:.82rem;color:rgba(255,255,255,.72);transition:color var(--t)}
footer a:hover{color:#fff}
.fbot{padding-top:1.25rem;font-size:.68rem;color:rgba(255,255,255,.42);display:flex;justify-content:space-between;gap:1rem;flex-wrap:wrap}

/* DRAWER — ulazi i izlazi istim putem, s dim scrimom */
.dov{position:fixed;inset:0;background:rgba(22,6,6,.42);backdrop-filter:blur(2px);z-index:120;opacity:0;pointer-events:none;transition:opacity var(--sp)}
.dov.on{opacity:1;pointer-events:auto}
.drw{position:fixed;top:0;right:0;bottom:0;width:min(27.5rem,100%);background:var(--bg);z-index:130;transform:translateX(100%);transition:transform var(--sp);display:flex;flex-direction:column;box-shadow:-1rem 0 3rem rgba(22,6,6,.14)}
.drw.on{transform:none}
.dhd{padding:1.4rem 1.5rem;border-bottom:1px solid var(--n200);display:flex;justify-content:space-between;align-items:center}
.dhd h3{font-size:1.22rem;display:flex;gap:.6rem;align-items:center}
.dhd .cx{background:var(--n100);border:1px solid var(--n200);border-radius:var(--rp);padding:.15rem .62rem;font-size:.68rem;font-weight:700;color:var(--n500)}
.dhd button{background:none;border:none;font-size:1.5rem;color:var(--n500);cursor:pointer;line-height:1;transition:color var(--t),transform var(--t)}
.dhd button:active{transform:scale(.9)}
.ship{background:var(--n900);color:#fff;padding:.85rem 1.5rem}
.ship .r{display:flex;justify-content:space-between;font-size:.78rem;font-weight:700;margin-bottom:.55rem}
.ship .r .g{color:#7FBF95;display:flex;gap:.42rem;align-items:center}
.bar{height:5px;background:rgba(255,255,255,.16);border-radius:var(--rp);overflow:hidden}
.bar i{display:block;height:100%;background:var(--acc);border-radius:var(--rp);transition:width var(--sp)}
.dbody{flex:1;overflow-y:auto;padding:.6rem 1.5rem;overscroll-behavior:contain}
.ditem{display:grid;grid-template-columns:4.6rem 1fr;gap:.85rem;padding:1.1rem 0;border-bottom:1px solid var(--n200)}
.dimg{aspect-ratio:1;border-radius:var(--rs);background-size:cover;background-position:center;border:1px solid var(--n200)}
.ditem h4{font-size:.92rem;margin-bottom:.22rem;line-height:1.3}
.ditem .br{font-size:.72rem;color:var(--acc);font-weight:700}
.ditem .rw{display:flex;justify-content:space-between;align-items:center;margin-top:.62rem}
.ditem .pz{font-family:var(--fd);font-size:1rem;font-weight:800;color:var(--n900);text-align:right;letter-spacing:-.02em}
.ditem .pz small{display:block;font-family:var(--fb);font-size:.66rem;color:var(--n500);font-weight:400}
.ditem .del{background:none;border:none;color:var(--n500);cursor:pointer}
.coup{background:#EEF6F0;border:1px solid #C9E2D2;border-radius:var(--rs);padding:.8rem .92rem;display:flex;justify-content:space-between;align-items:center;gap:.75rem;font-size:.8rem;margin:.85rem 0}
.coup b{color:var(--grn)}
.coup a{font-size:.72rem;color:var(--n500);text-decoration:underline}
.dfoot{padding:1.25rem 1.5rem;border-top:1px solid var(--n200);background:var(--paper)}
.dl{display:flex;justify-content:space-between;padding:.35rem 0;font-size:.85rem}
.dl.g{color:var(--grn);font-weight:700}
.dtot{display:flex;justify-content:space-between;align-items:baseline;padding-top:.8rem;margin-top:.55rem;border-top:1.5px solid var(--n900);font-weight:700}
.dtot b{font-family:var(--fd);font-size:1.6rem;color:var(--acc);font-weight:800;letter-spacing:-.028em}
.dsec{font-size:.68rem;color:var(--n500);text-align:center;margin-top:.7rem}

@media(max-width:1180px){.nav{gap:1.5rem}.srch{width:12rem}.tb{gap:1.6rem}}
@media(max-width:1080px){
 .hin{padding:2.6rem}
 .cgrid,.pgrid,.pgrid.c4,.usp,.vals{grid-template-columns:repeat(2,1fr)}
 .shop,.clay,.acc,.pdp,.split,.logi{grid-template-columns:1fr;gap:1.6rem}
 .fpanel,.sumbox,.anav{position:static}
 .nav,.srch{display:none}
 .gal{grid-template-columns:1fr}.thmb{flex-direction:row}.thmb div{flex:1}
 .gmain{min-height:22rem}
 .oh,.two,.fg{grid-template-columns:1fr 1fr}
 .paygrid{grid-template-columns:1fr;gap:.85rem}
 .citem{grid-template-columns:5rem 1fr}.citem>*:nth-child(3),.citem>*:nth-child(4){grid-column:2}
 .fgrid,.specs,.zones{grid-template-columns:1fr}
}
@media(max-width:620px){
 .wrap{width:calc(100% - 1.75rem)}
 .hcard{min-height:32rem}.hin{padding:1.75rem}
 .cgrid,.pgrid,.pgrid.c4,.usp,.vals,.stats,.two,.fg,.oh{grid-template-columns:1fr}
 .sec{padding:3.4rem 0}
}
/* PRISTUPAČNOST */
:focus-visible{outline:2px solid var(--acc);outline-offset:2px;border-radius:4px}
@media(prefers-reduced-motion:reduce){
 *{animation:none!important}
 .drw{transition:opacity .2s ease;transform:none;opacity:0;pointer-events:none}
 .drw.on{opacity:1;pointer-events:auto}
 .prod:hover,.ccard:hover .ph,.prod:hover .pvis .ph{transform:none}
 .btn:active,.padd:active{transform:none}
}
@media(prefers-reduced-transparency:reduce){
 header{background:var(--bg);backdrop-filter:none}
 header::after{display:none;}
 .dov{backdrop-filter:none}
 
}
@media(prefers-contrast:more){
 header{background:var(--bg);border-bottom:1px solid var(--n900)}
 .prod,.cardbox,.uc,.val{border-color:var(--n500)}
}


/* =========================================================
   4CHEF REDESIGN — visual refinement layer
   Brand-led, restrained, responsive, interaction-first.
   ========================================================= */
:root{
  --shadow-sm:0 8px 30px rgba(22,6,6,.045);
  --shadow-md:0 18px 55px rgba(22,6,6,.075);
  --shadow-lg:0 30px 90px rgba(22,6,6,.12);
  --hairline:rgba(22,6,6,.09);
}
html{scroll-behavior:auto}
body{background:var(--bg);color:var(--n700)}
.wrap{width:min(calc(100% - 5.5rem),var(--max))}
h1,h2,h3,h4{font-family:var(--fd);font-optical-sizing:auto}
h1{letter-spacing:-.034em}
h2{letter-spacing:-.028em}
h3{letter-spacing:-.016em}
.eb{font-size:.66rem;letter-spacing:.2em}

/* Header: floating translucent chrome */
header{
  background:rgba(251,249,248,.78);
  box-shadow:0 1px 0 rgba(22,6,6,.025);
}
header::after{
  bottom:-1.8rem;height:1.8rem;
  background:linear-gradient(rgba(251,249,248,.52),rgba(251,249,248,0));
}
.tb{height:5.9rem;gap:2.8rem}
.logo img{height:2.45rem}
.nav{gap:2rem;font-size:.86rem}
.nav a{padding:.5rem 0}
.nav a::after{height:2px}
.srch{width:17rem}
.srch input{
  background:rgba(255,255,255,.72);
  border-color:var(--n200);
  padding:.72rem 1rem .72rem 2.45rem;
}
.ibtn{background:rgba(255,255,255,.78)}
.cbtn{padding:.78rem 1.18rem;box-shadow:var(--shadow-sm)}
.mobile-nav-btn{display:none}

/* Hero */
.hero{padding-top:1.15rem}
.hcard{
  min-height:40rem;
  border-radius:26px;
  box-shadow:var(--shadow-lg);
  isolation:isolate;
}
.himg{
  background-image:
    linear-gradient(90deg,rgba(14,4,3,.97) 0%,rgba(14,4,3,.86) 38%,rgba(14,4,3,.42) 72%,rgba(14,4,3,.22) 100%),
    url('https://images.unsplash.com/photo-1556911220-e15b29be8c8f?auto=format&fit=crop&w=1900&q=85');
  transform:scale(1.01);
}
.hin{padding:5rem 4.5rem;max-width:58rem}
.hin h1{
  max-width:49rem;
  font-size:clamp(2.8rem,5.4vw,5rem);
  line-height:.98;
  margin:1.1rem 0 1.5rem;
}
.hin p{max-width:37rem;line-height:1.65}
.hbtns{gap:.75rem;margin-top:2rem}
.hmeta{
  gap:0;
  margin-top:3.2rem;
  padding-top:1.35rem;
  max-width:47rem;
  justify-content:space-between;
}
.hmeta>div{min-width:7rem}
.hmeta b{font-size:1.55rem}
.hmeta span{font-size:.62rem}

/* The page now moves directly from hero into content — no marquee. */
.sec{padding:5.4rem 0}
.shd{margin-bottom:2.1rem}
.shd p{max-width:36rem}
.lnk{
  color:var(--n900);
  font-size:.84rem;
  border-bottom:1px solid var(--n300);
  padding-bottom:.2rem;
  transition:color var(--t),border-color var(--t),gap var(--sp);
}
.lnk:hover{color:var(--acc-d);border-color:var(--acc-d)}

/* Intro / SEO block */
.intro2{
  display:grid;
  grid-template-columns:1.15fr .85fr;
  gap:3.2rem;
  align-items:center;
}
.seo{max-width:62rem}
.seo h2{max-width:54rem}
.seo p{max-width:68ch}
.intro2-img{
  min-height:28rem;
  border-radius:26px;
  background-size:cover;
  background-position:center;
  background-image:
    linear-gradient(135deg,rgba(22,6,6,.08),rgba(22,6,6,.2)),
    url('https://images.unsplash.com/photo-1542838132-92c53300491e?auto=format&fit=crop&w=1200&q=85');
  box-shadow:var(--shadow-sm);
}

/* Category cards: calmer, more editorial */
.cgrid{grid-template-columns:repeat(4,1fr);gap:1.125rem}
.ccard{
  aspect-ratio:1.08/1;
  background:var(--n100);
  box-shadow:var(--shadow-sm);
}
.ccard .ph{transition:transform .55s cubic-bezier(.32,.72,0,1),filter .34s cubic-bezier(.32,.72,0,1)}
.ccard::after{
  background:linear-gradient(180deg,rgba(22,6,6,0) 34%,rgba(22,6,6,.84) 100%);
}
.ccard:hover .ph{transform:scale(1.05);filter:saturate(1.03)}
.cinf{left:1.3rem;right:1.3rem;bottom:1.25rem}
.cinf small{font-size:.6rem;color:rgba(255,255,255,.7)}
.cinf h3{font-size:1.22rem}
.cinf p{font-size:.76rem}

/* Product cards */
.pgrid{gap:1.125rem}
.prod{
  border-color:var(--n200);
  box-shadow:0 1px 0 rgba(22,6,6,.02);
}
.prod:hover{
  border-color:var(--n300);
  box-shadow:var(--shadow-md);
  transform:translateY(-3px);
}
.pvis{background:var(--n100)}
.pvis .ph{transition:transform .55s cubic-bezier(.32,.72,0,1)}
.pbody{padding:1.1rem 1.15rem 1.15rem}
.pbrand{font-size:.6rem}
.prod h3{font-size:1rem}
.pit{font-size:.74rem}
.pstk{font-size:.7rem}
.prow{padding-top:.9rem}
.ppr{font-size:1.28rem}
.padd{padding:.62rem 1rem}
.bdg{border-radius:999px;padding:.34rem .65rem}
.pack{border-radius:999px;padding:.34rem .65rem}

/* Split feature */
.split{gap:1.15rem}
.sph{min-height:31rem;border-radius:26px;box-shadow:var(--shadow-sm)}
.scp{
  border-radius:26px;
  padding:3.5rem;
  box-shadow:var(--shadow-md);
}
.scp h2{max-width:28rem}
.quote{border-left-width:2px}

/* USP */
.usp,.vals{gap:1.125rem}
.uc,.val{
  padding:1.6rem;
  box-shadow:0 1px 0 rgba(22,6,6,.02);
  transition:transform var(--sp),box-shadow var(--sp),border-color var(--t);
}
.uc:hover,.val:hover{
  transform:translateY(-2px);
  box-shadow:var(--shadow-sm);
  border-color:var(--n300);
}
.uc .ic,.val .ic{
  width:2.7rem;height:2.7rem;
  border-radius:13px;
}

/* Forms and state surfaces */
.cardbox,.empty,.fpanel,.stat,.otbl{
  box-shadow:0 1px 0 rgba(22,6,6,.02);
}
.cardbox{border-color:var(--n200)}
.fld input,.fld select,.fld textarea{
  background:var(--paper);
}
.fld input:focus,.fld textarea:focus,.fld select:focus{
  box-shadow:0 0 0 3px var(--acc-t);
}
.phd{border-bottom-color:var(--hairline)}
.crumb{color:var(--n500)}

/* Product detail */
.pdp{gap:4rem}
.gmain{border-radius:26px;box-shadow:var(--shadow-sm)}
.buy{box-shadow:var(--shadow-sm)}
.buy.hot{box-shadow:none}
.tabs{gap:2rem}
.tabs button{font-size:1rem}

/* Cart / checkout */
.sumbox{
  box-shadow:var(--shadow-lg);
  border-radius:18px;
}
.steps{gap:2.25rem}
.steps div{min-height:44px}

/* Footer */
footer{
  margin-top:2rem;
  padding:5rem 0 1.5rem;
}
.fg{padding-bottom:3rem}
footer a{transition:color var(--t),transform var(--t)}
footer a:hover{transform:translateX(2px)}

/* Mobile navigation */
.mobile-nav{
  display:none;
}

/* Accessibility + motion discipline */
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{
    animation:none!important;
    transition-duration:.16s!important;
  }
  .prod:hover,.uc:hover,.val:hover,.ccard:hover .ph{transform:none}
}
@media (prefers-reduced-transparency:reduce){
  header{background:var(--bg);backdrop-filter:none}
}
@media (prefers-contrast:more){
  header{background:var(--bg);border-bottom:1px solid var(--n900)}
}

/* Responsive */
@media(max-width:1180px){
  .wrap{width:min(calc(100% - 3.5rem),var(--max))}
  .tb{gap:1.4rem}
  .nav{gap:1.25rem}
  .srch{width:13rem}
  .hin{padding:3.5rem}
}
@media(max-width:1080px){
  .intro2{grid-template-columns:1fr;gap:2rem}
  .intro2-img{min-height:22rem}
  .wrap{width:min(calc(100% - 3rem),var(--max))}
  .mobile-nav-btn{display:grid}
  .nav,.srch{display:none}
  .mobile-nav{
    position:fixed;
    top:5.9rem;left:1rem;right:1rem;
    z-index:110;
    display:block;
    padding:1rem;
    background:rgba(251,249,248,.96);
    border:1px solid var(--n200);
    border-radius:18px;
    box-shadow:var(--shadow-lg);
    opacity:0;
    transform:translateY(-8px) scale(.985);
    pointer-events:none;
    transition:opacity var(--sp),transform var(--sp);
  }
  .mobile-nav.on{
    opacity:1;transform:none;pointer-events:auto;
  }
  .mobile-nav-head{
    display:flex;justify-content:space-between;align-items:center;
    padding:.25rem .25rem .9rem;
    font-family:var(--fd);font-weight:700;
  }
  .mobile-nav nav{display:grid;gap:.25rem}
  .mobile-nav nav a{
    min-height:44px;display:flex;align-items:center;
    padding:.7rem .8rem;border-radius:11px;
    font-weight:700;
  }
  .mobile-nav nav a:hover{background:var(--n100)}
  .mobile-nav>.btn{margin-top:.75rem}
  .hcard{min-height:37rem}
  .hmeta{justify-content:flex-start;gap:1.7rem}
}
@media(max-width:620px){
  .wrap{width:calc(100% - 2rem)}
  .tb{height:5.2rem}
  .logo img{height:2.2rem}
  .cbtn{padding:.72rem .85rem;font-size:.78rem}
  .cbtn span{display:none}
  .mobile-nav{top:5.2rem}
  .hero{padding-top:.7rem}
  .hcard{min-height:34rem;border-radius:22px}
  .himg{
    background-image:
      linear-gradient(180deg,rgba(14,4,3,.38) 0%,rgba(14,4,3,.88) 63%,rgba(14,4,3,.98) 100%),
      url('https://images.unsplash.com/photo-1556742049-0cfed4f6a45d?auto=format&fit=crop&w=1200&q=85');
  }
  .hin{padding:2rem 1.45rem 1.7rem;align-self:flex-end}
  .hin h1{font-size:clamp(2.35rem,11vw,3.3rem);margin:.85rem 0 1rem}
  .hin p{font-size:.94rem}
  .hbtns{display:grid;grid-template-columns:1fr}
  .hbtns .btn{width:100%}
  .hmeta{
    margin-top:1.8rem;padding-top:1.1rem;
    display:grid;grid-template-columns:1fr 1fr;gap:1rem;
  }
  .hmeta b{font-size:1.35rem}
  .hmeta span{font-size:.56rem}
  .sec{padding:3.6rem 0}
  .shd{align-items:flex-start}
  .shd h2{max-width:22rem}
  .cgrid{grid-template-columns:1fr 1fr;gap:.75rem}
  .ccard{aspect-ratio:1/1.05}
  .cinf{left:.95rem;right:.95rem;bottom:.95rem}
  .cinf h3{font-size:1rem}
  .cinf p{display:none}
  .pgrid,.pgrid.c4{grid-template-columns:1fr}
  .prod h3{font-size:1rem}
  .split{gap:.75rem}
  .sph{min-height:19rem;border-radius:22px}
  .scp{border-radius:22px;padding:2rem 1.45rem}
  .usp,.vals{grid-template-columns:1fr}
  .pdp{gap:2rem}
  .gmain{min-height:20rem}
  .tabs{gap:1.2rem}
  .clay{gap:1.2rem}
  footer{padding-top:3.5rem}
  .fg{grid-template-columns:1fr!important;gap:1.8rem}
}

/* ================================================================
   WORDPRESS — integracija
   ================================================================ */
/* Blocksyjev header/footer ne koristimo (zamijenjeni u child temi) */
.ct-header,footer.ct-footer,#main-container>.ct-container>.ct-sidebar{display:none!important}
.ct-container,.ct-container-full{max-width:none!important;padding:0!important}

/* Simetrična mreža kategorija (stupce postavlja front-page.php) */
.cgrid.cgrid-2{grid-template-columns:repeat(2,1fr)}
.cgrid.cgrid-3{grid-template-columns:repeat(3,1fr)}
.cgrid.cgrid-4{grid-template-columns:repeat(4,1fr)}
@media(max-width:1080px){.cgrid.cgrid-3,.cgrid.cgrid-4{grid-template-columns:repeat(2,1fr)}}
@media(max-width:620px){.cgrid.cgrid-2,.cgrid.cgrid-3,.cgrid.cgrid-4{grid-template-columns:1fr}}

.cbtn i:empty{display:none}
button.btn{font-family:var(--fb);cursor:pointer;border:none}

/* ================================================================
   MOST: WooCommerce → izgled kartice .prod iz dizajna
   ================================================================ */
.woocommerce ul.products{
  display:grid;grid-template-columns:repeat(3,1fr);gap:1.15rem;
  margin:0;padding:0;list-style:none}
.woocommerce ul.products.columns-4{grid-template-columns:repeat(4,1fr)}
.woocommerce ul.products::before,.woocommerce ul.products::after{display:none!important}

.woocommerce ul.products li.product{
  width:auto!important;margin:0!important;float:none!important;padding:0!important;
  background:var(--paper);border:1px solid var(--n200);border-radius:var(--r);
  overflow:hidden;display:flex;flex-direction:column;position:relative;text-align:left;
  transition:border-color var(--t),box-shadow var(--sp),transform var(--sp)}
.woocommerce ul.products li.product:hover{
  border-color:var(--n300);box-shadow:var(--shadow-md);transform:translateY(-3px)}

.woocommerce ul.products li.product img{
  width:100%!important;aspect-ratio:16/11;object-fit:cover;
  margin:0!important;display:block;background:var(--n100);
  transition:transform .55s cubic-bezier(.32,.72,0,1)}
.woocommerce ul.products li.product:hover img{transform:scale(1.05)}
.woocommerce ul.products li.product img[src*="woocommerce-placeholder"]{
  opacity:.2;object-fit:contain;padding:2.2rem}

/* Dosljedan unutarnji razmak za sve tekstualne elemente */
.woocommerce ul.products li.product .pbrand,
.woocommerce ul.products li.product .woocommerce-loop-product__title,
.woocommerce ul.products li.product .pstk,
.woocommerce ul.products li.product .price,
.woocommerce ul.products li.product .button,
.woocommerce ul.products li.product .added_to_cart,
.woocommerce ul.products li.product .b2b-login,
.woocommerce ul.products li.product .b2b-upit{
  margin-left:1.15rem;margin-right:1.15rem}

.woocommerce ul.products li.product .pbrand{
  font-family:var(--fb);font-size:.6rem;letter-spacing:.14em;text-transform:uppercase;
  color:var(--acc);font-weight:700;margin-top:1.05rem;margin-bottom:.38rem}

.woocommerce ul.products li.product .woocommerce-loop-product__title{
  font-family:var(--fd)!important;font-size:1rem!important;font-weight:700!important;
  line-height:1.28!important;letter-spacing:-.016em;color:var(--n900);
  padding:0!important;margin-bottom:.45rem;min-height:2.56em;
  display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}

.woocommerce ul.products li.product .pstk{
  font-family:var(--fb);font-size:.72rem;font-weight:700;
  margin-bottom:.8rem;display:flex;gap:.32rem;align-items:center}
.woocommerce ul.products li.product .pstk.in{color:var(--grn)}
.woocommerce ul.products li.product .pstk.in::before{content:"✓"}
.woocommerce ul.products li.product .pstk.out{color:var(--red)}
.woocommerce ul.products li.product .pstk.out::before{content:"—"}
.woocommerce ul.products li.product .pstk.pred{color:var(--n500)}
.woocommerce ul.products li.product .pstk.pred::before{content:"◷"}

.woocommerce ul.products li.product .price{
  font-family:var(--fd)!important;font-size:1.25rem!important;font-weight:800!important;
  color:var(--n900)!important;letter-spacing:-.02em;line-height:1.1;
  margin-top:auto;padding-top:.8rem;border-top:1px solid var(--n200)}
.woocommerce ul.products li.product .price del{
  font-family:var(--fb);font-size:.8rem;font-weight:500;
  color:var(--n500);margin-left:.4rem;opacity:1}
.woocommerce ul.products li.product .price ins{
  text-decoration:none;color:var(--acc);background:none}

.woocommerce ul.products li.product .button,
.woocommerce ul.products li.product .added_to_cart{
  background:var(--n900);color:#fff;border:none;border-radius:var(--rp);
  padding:.55rem .95rem;font-family:var(--fb);font-size:.72rem;font-weight:700;
  margin-top:.75rem;margin-bottom:1.15rem;
  display:inline-flex;align-items:center;gap:.35rem;width:max-content;
  transition:background var(--t),transform var(--t)}
.woocommerce ul.products li.product .button:hover{background:var(--acc)}
.woocommerce ul.products li.product .button:active{transform:scale(.972)}
.woocommerce ul.products li.product .added_to_cart{background:transparent;color:var(--acc)}

.woocommerce span.onsale{
  position:absolute;left:.7rem;top:.7rem;right:auto;
  background:var(--acc);color:#fff;font-family:var(--fb);
  font-size:.58rem;font-weight:700;letter-spacing:.09em;text-transform:uppercase;
  padding:.32rem .62rem;border-radius:7px;
  min-height:auto;min-width:auto;line-height:1.6;margin:0;z-index:2}
.p-flag{
  position:absolute;right:.7rem;top:.7rem;z-index:2;
  background:rgba(255,255,255,.94);backdrop-filter:blur(8px);
  color:var(--n900);font-family:var(--fb);font-size:.62rem;font-weight:700;
  padding:.3rem .58rem;border-radius:7px;line-height:1.6}
.p-flag.var{color:var(--acc)}

/* ── B2B stanja ── */
.b2b-login{
  display:flex;flex-direction:column;gap:.25rem;
  margin-top:auto;padding-top:.8rem;margin-bottom:1.15rem;
  border-top:1px solid var(--n200);font-family:var(--fb)}
.b2b-login a{
  font-family:var(--fd);font-size:.92rem;font-weight:700;
  color:var(--n900);letter-spacing:-.012em;text-decoration:none}
.b2b-login a::after{content:" →";color:var(--acc)}
.b2b-login a:hover{color:var(--acc)}
.b2b-login small{font-size:.66rem;color:var(--n500);font-weight:500;line-height:1.5}

.b2b-upit{margin-top:auto;padding-top:.8rem;margin-bottom:1.15rem;
  border-top:1px solid var(--n200)}
.b2b-upit a{
  display:inline-flex;align-items:center;gap:.35rem;
  background:transparent;color:var(--n900);
  border:1.5px solid var(--n900);border-radius:var(--rp);
  padding:.52rem .95rem;font-family:var(--fb);
  font-size:.72rem;font-weight:700;text-decoration:none;
  transition:background var(--t),color var(--t),border-color var(--t)}
.b2b-upit a:hover{background:var(--acc);border-color:var(--acc);color:#fff}
.b2b-upit a::after{content:"→"}

.p-unit{display:block;font-family:var(--fb);font-size:.63rem;
  font-weight:500;color:var(--n500);letter-spacing:0;margin-top:.12rem}

.b2b-bar{
  background:var(--n900);color:#fff;border-radius:var(--r);
  padding:1.15rem 1.5rem;margin:0 0 1.9rem;
  display:flex;align-items:center;justify-content:space-between;
  gap:1.2rem;flex-wrap:wrap}
.b2b-bar p{margin:0;font-family:var(--fb);font-size:.84rem;
  color:rgba(255,255,255,.78);line-height:1.6;max-width:52ch}
.b2b-bar b{color:#fff;font-family:var(--fd);font-weight:700;
  display:block;font-size:1rem;letter-spacing:-.014em;margin-bottom:.2rem}

/* ── Katalog: filtri + raspored ── */
.shop{display:grid;grid-template-columns:16.5rem 1fr;gap:1.6rem;align-items:start;
  padding-top:1.5rem;padding-bottom:4rem}
.woocommerce-page .shop main{min-width:0}
.tbar{display:flex;justify-content:space-between;align-items:center;
  gap:1rem;flex-wrap:wrap;margin-bottom:1.2rem}

/* ── WooCommerce ostalo ── */
.woocommerce-message,.woocommerce-info,.woocommerce-error{
  border-top-color:var(--acc);border-radius:var(--rs);
  font-family:var(--fb);font-size:.88rem}
.woocommerce-message{border-top-color:var(--grn)}
.woocommerce .woocommerce-breadcrumb{
  font-family:var(--fb);font-size:.72rem;color:var(--n500);padding:1.7rem 0 0}
.woocommerce .woocommerce-breadcrumb a{color:var(--n500)}
.woocommerce .woocommerce-breadcrumb a:hover{color:var(--acc)}
.woocommerce .woocommerce-result-count{font-family:var(--fb);font-size:.8rem;color:var(--n500);margin:0}
.woocommerce .woocommerce-ordering{margin:0}
.woocommerce .woocommerce-ordering select{
  font-family:var(--fb);font-size:.8rem;color:var(--n700);
  border:1px solid var(--n200);border-radius:var(--rs);padding:.45rem .8rem;background:var(--paper)}

/* Obrasci (prijava, registracija, kontakt) */
.woocommerce form .form-row label{
  font-family:var(--fb);font-size:.72rem;font-weight:700;
  letter-spacing:.04em;text-transform:uppercase;color:var(--n700);margin-bottom:.4rem}
.woocommerce form .form-row input.input-text,
.woocommerce form .form-row select{
  border:1px solid var(--n300);border-radius:var(--rs);
  padding:.72rem .9rem;font-family:var(--fb);font-size:.92rem;background:#fff}
.woocommerce form .form-row input.input-text:focus{
  outline:none;border-color:var(--acc);box-shadow:0 0 0 3px rgba(230,82,36,.12)}
.woocommerce .button,.woocommerce button.button,.woocommerce input.button{
  background:var(--n900);color:#fff;border:none;border-radius:var(--rp);
  padding:.8rem 1.5rem;font-family:var(--fb);font-size:.78rem;font-weight:700}
.woocommerce .button:hover,.woocommerce button.button:hover{background:var(--acc)}

@media(max-width:1080px){
  .woocommerce ul.products,.woocommerce ul.products.columns-4{grid-template-columns:repeat(2,1fr)}
  .shop{grid-template-columns:1fr}}
@media(max-width:620px){
  .woocommerce ul.products,.woocommerce ul.products.columns-4{grid-template-columns:1fr}
  .b2b-bar{flex-direction:column;align-items:flex-start}}


/* ================================================================
   4CHEF v3.1 — final visual alignment with supplied design
   ================================================================ */

/* No marquee: the reference design moves directly from hero into content. */

/* Product cards: compact, stable and whole-pack visibility */
.woocommerce ul.products li.product{
  border-radius:var(--r);
}
.woocommerce ul.products li.product img{
  aspect-ratio:4/3;
  object-fit:contain!important;
  object-position:center;
  padding:1rem;
  transform:none!important;
  transition:none!important;
}
.woocommerce ul.products li.product:hover img{
  transform:none!important;
}
.woocommerce ul.products li.product .pbrand{
  margin-top:.82rem;
  margin-bottom:.28rem;
}
.woocommerce ul.products li.product .woocommerce-loop-product__title{
  margin-bottom:.3rem;
  min-height:2.45em;
}
.woocommerce ul.products li.product .pstk{
  margin-bottom:.58rem;
}
.woocommerce ul.products li.product .price{
  padding-top:.65rem;
}
.woocommerce ul.products li.product .button,
.woocommerce ul.products li.product .added_to_cart{
  margin-top:.6rem;
  margin-bottom:.9rem;
  padding:.5rem .85rem;
}

/* Compact success state: one centered visual unit, no orphaned subtitle. */
.contact-success{
  min-height:12rem;
  padding:1.25rem 1rem;
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  text-align:center;
}
.contact-success__icon{
  width:2.9rem;
  height:2.9rem;
  border-radius:50%;
  background:var(--grn);
  color:#fff;
  display:grid;
  place-items:center;
  margin:0 auto .8rem;
}
.contact-success h3{
  margin:0 0 .25rem;
  font-size:1.1rem;
}
.contact-success p{
  margin:0 auto;
  max-width:30rem;
  color:var(--n500);
  font-size:.8rem;
  line-height:1.5;
}

@media(max-width:800px){
  .intro2{grid-template-columns:1fr;gap:1.5rem}
  .intro2-img{min-height:20rem}
}
@media(max-width:620px){
  .woocommerce ul.products li.product img{padding:.75rem}
  .contact-success{min-height:10rem;padding:1rem .75rem}
}

/* ================================================================
   4CHEF v3.3 — product card polish
   ================================================================ */

/* Kategorija pripada fotografiji, ne dnu informativnog dijela. */
.woocommerce ul.products li.product .p-cat-badge{
  position:absolute;
  top:.7rem;
  right:.7rem;
  z-index:5;
  display:inline-flex;
  align-items:center;
  max-width:calc(100% - 1.4rem);
  padding:.34rem .62rem;
  border:1px solid rgba(234,227,224,.9);
  border-radius:7px;
  background:rgba(255,255,255,.92);
  backdrop-filter:blur(9px);
  -webkit-backdrop-filter:blur(9px);
  color:var(--n700);
  font-family:var(--fb);
  font-size:.59rem;
  line-height:1.35;
  font-weight:700;
  letter-spacing:.02em;
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
}

/* Ukloni eventualnu Blocksy/Woo kategoriju koja se ispisuje ispod kartice. */
.woocommerce ul.products li.product .product-categories,
.woocommerce ul.products li.product .posted_in,
.woocommerce ul.products li.product .cat-links,
.woocommerce ul.products li.product .ct-product-meta .product-categories{
  display:none!important;
}

/* Fotografija: nema "JPG kvadrata" — bijela pozadina slike se vizualno
   stapa s neutralnom površinom kartice, a proizvod ostaje čitljiv. */
.woocommerce ul.products li.product img{
  aspect-ratio:16/11;
  width:100%!important;
  height:100%!important;
  min-height:0;
  object-fit:contain!important;
  object-position:center;
  padding:0!important;
  margin:0!important;
  background:transparent!important;
  mix-blend-mode:multiply;
  transform:scale(1.16)!important;
  transform-origin:center;
  transition:transform .45s cubic-bezier(.32,.72,0,1)!important;
}
.woocommerce ul.products li.product:hover img{
  transform:scale(1.2)!important;
}

/* Sam vizual je topliji i bliži referentnom dizajnu. */
.woocommerce ul.products li.product .woocommerce-loop-product__link,
.woocommerce ul.products li.product > a:first-child{
  background:var(--n100);
}

/* Bez SKU-a: brand prostor ne smije ostati prazan ako tema nema brand podatak. */
.woocommerce ul.products li.product .pbrand:empty{display:none}