/* ============================================================
   GOOD AND CHEAP — glavni stylesheet
   Sadrzaj: 1) tokeni  2) osnovno  3) dugmad/forme  4) header
            5) hero    6) sekcije  7) kartice  8) prodavnica
            9) proizvod 10) korpa/kasa 11) footer 12) responsive
   ============================================================ */

/* ---------- 1) TOKENI ---------- */
:root{
  --ink:#101828; --ink-2:#475467; --ink-3:#79839a;
  --line:#e7e9ee; --line-2:#f0f2f5;
  --bg:#ffffff; --bg-2:#f7f8fa; --bg-3:#eef1f6;
  --brand:#ff5a1f; --brand-dark:#dd460f; --brand-soft:#fff1ea;
  --navy:#0e1b33; --navy-2:#182a4a;
  --ok:#12b76a; --sale:#e11d48; --warn:#f79009;
  --r-sm:8px; --r:14px; --r-lg:20px; --r-xl:28px; --r-full:999px;
  --sh-1:0 1px 2px rgba(16,24,40,.05);
  --sh-2:0 4px 16px rgba(16,24,40,.07);
  --sh-3:0 12px 40px rgba(16,24,40,.12);
  --wrap:1240px;
  --ff:"Inter","Segoe UI",Roboto,"PingFang SC","Microsoft YaHei","Noto Sans SC",Arial,sans-serif;
  --ff-h:"Manrope","Inter","Segoe UI","PingFang SC","Microsoft YaHei",Arial,sans-serif;
  --t:.18s cubic-bezier(.4,0,.2,1);
}

/* ---------- 2) OSNOVNO ---------- */
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%; scroll-behavior:smooth}
body{
  margin:0; font-family:var(--ff); color:var(--ink); background:var(--bg);
  font-size:16px; line-height:1.6; -webkit-font-smoothing:antialiased;
}
img,svg{max-width:100%; display:block}
a{color:inherit; text-decoration:none}
h1,h2,h3,h4{font-family:var(--ff-h); font-weight:800; line-height:1.15; margin:0 0 .5em; letter-spacing:-.02em}
h1{font-size:clamp(2rem,4.4vw,3.2rem)}
h2{font-size:clamp(1.5rem,2.8vw,2.15rem)}
h3{font-size:1.15rem}
p{margin:0 0 1em}
ul{margin:0; padding:0; list-style:none}
:focus-visible{outline:3px solid rgba(255,90,31,.45); outline-offset:2px; border-radius:4px}
::selection{background:var(--brand); color:#fff}

.wrap{width:100%; max-width:var(--wrap); margin-inline:auto; padding-inline:20px}
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}
.muted{color:var(--ink-2)}
.center{text-align:center}
.stack-lg{padding-block:clamp(48px,7vw,84px)}
.stack{padding-block:clamp(36px,5vw,60px)}
.bg-2{background:var(--bg-2)}
.hide{display:none !important}

/* ---------- 3) DUGMAD I FORME ---------- */
.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:.55em;
  font-family:var(--ff-h); font-weight:700; font-size:.95rem; line-height:1;
  padding:14px 22px; border-radius:var(--r-full); border:1.5px solid transparent;
  cursor:pointer; transition:var(--t); white-space:nowrap; text-align:center;
}
.btn svg{width:18px;height:18px;flex:none}
.btn-primary{background:var(--brand); color:#fff; box-shadow:0 6px 18px rgba(255,90,31,.28)}
.btn-primary:hover{background:var(--brand-dark); transform:translateY(-1px); box-shadow:0 10px 24px rgba(255,90,31,.34)}
.btn-dark{background:var(--navy); color:#fff}
.btn-dark:hover{background:var(--navy-2); transform:translateY(-1px)}
.btn-ghost{background:#fff; color:var(--ink); border-color:var(--line)}
.btn-ghost:hover{border-color:var(--ink); background:var(--bg-2)}
.btn-light{background:rgba(255,255,255,.14); color:#fff; border-color:rgba(255,255,255,.34)}
.btn-light:hover{background:rgba(255,255,255,.24)}
.btn-wa{background:#25d366;color:#fff}
.btn-wa:hover{background:#1eb457}
.btn-vi{background:#7360f2;color:#fff}
.btn-vi:hover{background:#5f4de0}
.btn-sm{padding:10px 16px; font-size:.85rem}
.btn-lg{padding:17px 30px; font-size:1.02rem}
.btn-block{width:100%}
.btn:disabled{opacity:.55; cursor:not-allowed; transform:none !important}

.field{display:block; margin-bottom:16px}
.field > label{display:block; font-size:.85rem; font-weight:600; color:var(--ink-2); margin-bottom:6px}
.input,select.input,textarea.input{
  width:100%; font:inherit; font-size:.95rem; color:var(--ink); background:#fff;
  border:1.5px solid var(--line); border-radius:var(--r-sm); padding:12px 14px; transition:var(--t);
}
.input:hover{border-color:#d3d8e0}
.input:focus{border-color:var(--brand); outline:none; box-shadow:0 0 0 4px rgba(255,90,31,.13)}
textarea.input{min-height:110px; resize:vertical}
select.input{appearance:none; background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%23475467' stroke-width='2.5' stroke-linecap='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E"); background-repeat:no-repeat; background-position:right 12px center; padding-right:38px}
.input.err{border-color:var(--sale); box-shadow:0 0 0 4px rgba(225,29,72,.1)}
.err-msg{display:none; color:var(--sale); font-size:.8rem; margin-top:5px}
.field.has-err .err-msg{display:block}
.check{display:flex; align-items:flex-start; gap:10px; font-size:.9rem; color:var(--ink-2); cursor:pointer; margin-bottom:10px}
.check input{margin-top:3px; width:17px; height:17px; accent-color:var(--brand); flex:none; cursor:pointer}
.grid-2{display:grid; grid-template-columns:1fr 1fr; gap:0 16px}

/* ---------- 4) HEADER ---------- */
.topbar{background:var(--navy); color:#c7d0e0; font-size:.82rem}
.topbar .wrap{display:flex; align-items:center; justify-content:space-between; gap:16px; min-height:40px}
.topbar a{color:#fff}
.topbar a:hover{color:var(--brand)}
.topbar-list{display:flex; gap:22px; align-items:center}
.topbar-list li{display:flex; align-items:center; gap:7px}
.topbar svg{width:15px;height:15px;opacity:.8}

.lang{display:flex; align-items:center; gap:2px; background:rgba(255,255,255,.08); border-radius:var(--r-full); padding:3px}
.lang button{
  font:inherit; font-size:.76rem; font-weight:700; letter-spacing:.04em; color:#c7d0e0;
  background:none; border:0; padding:4px 10px; border-radius:var(--r-full); cursor:pointer; transition:var(--t);
}
.lang button:hover{color:#fff}
.lang button[aria-pressed="true"]{background:var(--brand); color:#fff}

.header{position:sticky; top:0; z-index:60; background:rgba(255,255,255,.92); backdrop-filter:saturate(160%) blur(12px); border-bottom:1px solid var(--line)}
.header .wrap{display:flex; align-items:center; gap:18px; min-height:74px}
.brand{display:flex; align-items:center; gap:11px; font-family:var(--ff-h); font-weight:800; font-size:1.18rem; letter-spacing:-.02em; flex:none}
.brand-mark{width:42px; height:42px; border-radius:12px; background:linear-gradient(135deg,var(--brand),#ff8a4c); display:grid; place-items:center; color:#fff; font-size:1.05rem; font-weight:800; box-shadow:0 4px 12px rgba(255,90,31,.3)}
.brand small{display:block; font-family:var(--ff); font-size:.63rem; font-weight:600; color:var(--ink-3); letter-spacing:.16em; text-transform:uppercase; margin-top:1px}
.brand-name{line-height:1.05}

.searchbar{flex:1; position:relative; max-width:560px}
.searchbar .input{padding-left:42px; border-radius:var(--r-full); background:var(--bg-2)}
.searchbar .input:focus{background:#fff}
.searchbar > svg{position:absolute; left:15px; top:50%; transform:translateY(-50%); width:18px; height:18px; stroke:var(--ink-3); pointer-events:none}
.suggest{position:absolute; top:calc(100% + 8px); left:0; right:0; background:#fff; border:1px solid var(--line); border-radius:var(--r); box-shadow:var(--sh-3); overflow:hidden; z-index:70; max-height:380px; overflow-y:auto}
.suggest a{display:flex; gap:12px; align-items:center; padding:10px 14px; border-bottom:1px solid var(--line-2)}
.suggest a:last-child{border-bottom:0}
.suggest a:hover{background:var(--bg-2)}
.suggest img{width:44px; height:44px; object-fit:cover; border-radius:8px; background:var(--bg-2); flex:none}
.suggest b{display:block; font-size:.9rem; font-weight:600}
.suggest span{font-size:.82rem; color:var(--brand); font-weight:700}

.head-actions{display:flex; align-items:center; gap:8px; margin-left:auto}
.icon-btn{position:relative; width:44px; height:44px; display:grid; place-items:center; border-radius:12px; border:1px solid var(--line); background:#fff; cursor:pointer; transition:var(--t); color:var(--ink)}
.icon-btn:hover{border-color:var(--ink); background:var(--bg-2)}
.icon-btn svg{width:21px; height:21px}
.cart-count{position:absolute; top:-6px; right:-6px; min-width:20px; height:20px; padding:0 5px; border-radius:var(--r-full); background:var(--brand); color:#fff; font-size:.7rem; font-weight:800; display:grid; place-items:center; box-shadow:0 0 0 2px #fff}
.cart-count[data-empty="1"]{display:none}
.burger{display:none}

.nav{border-top:1px solid var(--line-2); background:#fff}
.nav .wrap{display:flex; align-items:center; gap:4px; min-height:52px; overflow-x:auto; scrollbar-width:none}
.nav .wrap::-webkit-scrollbar{display:none}
.nav a{font-size:.92rem; font-weight:600; color:var(--ink-2); padding:9px 14px; border-radius:var(--r-full); transition:var(--t); white-space:nowrap}
.nav a:hover{background:var(--bg-2); color:var(--ink)}
.nav a.active{background:var(--brand-soft); color:var(--brand-dark)}
.nav .sep{width:1px;height:22px;background:var(--line);margin:0 8px;flex:none}

.drawer{position:fixed; inset:0; z-index:100; visibility:hidden; pointer-events:none}
.drawer.open{visibility:visible; pointer-events:auto}
.drawer-bg{position:absolute; inset:0; background:rgba(16,24,40,.5); opacity:0; transition:var(--t)}
.drawer.open .drawer-bg{opacity:1}
.drawer-panel{position:absolute; top:0; right:0; height:100%; width:min(88vw,340px); background:#fff; box-shadow:var(--sh-3); transform:translateX(100%); transition:transform .28s cubic-bezier(.4,0,.2,1); display:flex; flex-direction:column; overflow-y:auto}
.drawer.open .drawer-panel{transform:none}
.drawer-head{display:flex; align-items:center; justify-content:space-between; padding:18px 20px; border-bottom:1px solid var(--line)}
.drawer-nav{padding:12px 12px 24px}
.drawer-nav a{display:flex; align-items:center; gap:12px; padding:13px 14px; border-radius:var(--r-sm); font-weight:600; color:var(--ink)}
.drawer-nav a:hover{background:var(--bg-2)}
.drawer-nav .lbl{font-size:.72rem; text-transform:uppercase; letter-spacing:.12em; color:var(--ink-3); padding:16px 14px 6px; font-weight:700}

/* ---------- 5) HERO ---------- */
.hero{position:relative; background:var(--navy); color:#fff; overflow:hidden}
.hero::before{content:""; position:absolute; inset:0; background:
  radial-gradient(900px 480px at 82% 12%, rgba(255,90,31,.42), transparent 62%),
  radial-gradient(700px 460px at 8% 92%, rgba(59,130,246,.28), transparent 60%);}
.hero::after{content:""; position:absolute; inset:0; opacity:.5;
  background-image:linear-gradient(rgba(255,255,255,.045) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.045) 1px,transparent 1px);
  background-size:46px 46px; mask-image:linear-gradient(180deg,#000,transparent 78%)}
.hero .wrap{position:relative; z-index:2; display:grid; grid-template-columns:1.05fr .95fr; gap:44px; align-items:center; padding-block:clamp(52px,7vw,92px)}
.hero h1{color:#fff; margin-bottom:.35em}
.hero p{color:#c2cbdd; font-size:1.08rem; max-width:54ch}
.pill{display:inline-flex; align-items:center; gap:8px; background:rgba(255,255,255,.1); border:1px solid rgba(255,255,255,.2); color:#fff; font-size:.78rem; font-weight:700; letter-spacing:.06em; text-transform:uppercase; padding:7px 15px; border-radius:var(--r-full); margin-bottom:20px}
.pill .dot{width:7px; height:7px; border-radius:50%; background:var(--brand); box-shadow:0 0 0 4px rgba(255,90,31,.25)}
.hero-cta{display:flex; flex-wrap:wrap; gap:12px; margin-top:28px}
.hero-stats{display:flex; gap:36px; margin-top:40px; padding-top:26px; border-top:1px solid rgba(255,255,255,.14)}
.hero-stats b{display:block; font-family:var(--ff-h); font-size:1.75rem; font-weight:800; color:#fff; line-height:1}
.hero-stats span{font-size:.82rem; color:#9fabc4}

.hero-art{display:grid; grid-template-columns:1fr 1fr; gap:14px}
.hero-tile{background:rgba(255,255,255,.07); border:1px solid rgba(255,255,255,.13); border-radius:var(--r-lg); padding:20px; backdrop-filter:blur(6px); transition:var(--t)}
.hero-tile:hover{background:rgba(255,255,255,.12); transform:translateY(-3px)}
.hero-tile:nth-child(1),.hero-tile:nth-child(4){transform:translateY(16px)}
.hero-tile:nth-child(1):hover,.hero-tile:nth-child(4):hover{transform:translateY(13px)}
.hero-tile svg{width:30px; height:30px; stroke:var(--brand); margin-bottom:12px}
.hero-tile b{display:block; font-family:var(--ff-h); font-size:.98rem; color:#fff}
.hero-tile span{font-size:.8rem; color:#9fabc4}

/* ---------- 6) SEKCIJE ---------- */
.usp{display:grid; grid-template-columns:repeat(4,1fr); gap:1px; background:var(--line); border:1px solid var(--line); border-radius:var(--r-lg); overflow:hidden; margin-top:-34px; position:relative; z-index:5; box-shadow:var(--sh-2)}
.usp > div{background:#fff; padding:22px 20px; display:flex; gap:14px; align-items:flex-start}
.usp svg{width:24px; height:24px; stroke:var(--brand); flex:none; margin-top:2px}
.usp b{display:block; font-family:var(--ff-h); font-size:.96rem}
.usp span{font-size:.84rem; color:var(--ink-2); line-height:1.45}

.sec-head{display:flex; align-items:flex-end; justify-content:space-between; gap:24px; margin-bottom:28px}
.sec-head p{margin:0; color:var(--ink-2)}
.sec-head h2{margin-bottom:.25em}
.link-more{font-weight:700; font-size:.92rem; color:var(--brand); display:inline-flex; align-items:center; gap:6px; white-space:nowrap}
.link-more:hover{gap:10px}
.link-more svg{width:16px;height:16px}

.cat-grid{display:grid; grid-template-columns:repeat(auto-fit,minmax(180px,1fr)); gap:16px}
.cat-card{position:relative; display:flex; flex-direction:column; gap:12px; padding:24px 20px; border:1px solid var(--line); border-radius:var(--r-lg); background:#fff; transition:var(--t); overflow:hidden}
.cat-card::after{content:""; position:absolute; right:-40px; top:-40px; width:120px; height:120px; border-radius:50%; background:var(--cat-c,var(--brand)); opacity:.09; transition:var(--t)}
.cat-card:hover{border-color:transparent; box-shadow:var(--sh-3); transform:translateY(-4px)}
.cat-card:hover::after{transform:scale(1.5); opacity:.14}
.cat-ico{width:52px; height:52px; border-radius:14px; display:grid; place-items:center; background:var(--cat-c,var(--brand)); position:relative; z-index:2}
.cat-ico svg{width:26px; height:26px; stroke:#fff}
.cat-card b{font-family:var(--ff-h); font-size:1.02rem; position:relative; z-index:2}
.cat-card span{font-size:.84rem; color:var(--ink-3); position:relative; z-index:2}

.cta-band{background:linear-gradient(120deg,var(--navy),#1c3157); color:#fff; border-radius:var(--r-xl); padding:clamp(30px,4vw,52px); display:grid; grid-template-columns:1.4fr auto; gap:32px; align-items:center; position:relative; overflow:hidden}
.cta-band::after{content:""; position:absolute; right:-80px; bottom:-120px; width:340px; height:340px; border-radius:50%; background:radial-gradient(circle,rgba(255,90,31,.5),transparent 70%)}
.cta-band h2{color:#fff; margin-bottom:.3em}
.cta-band p{color:#c2cbdd; margin:0; max-width:62ch}
.cta-band .btns{display:flex; flex-wrap:wrap; gap:12px; position:relative; z-index:2}

/* ---------- 7) KARTICE PROIZVODA ---------- */
.p-grid{display:grid; grid-template-columns:repeat(auto-fill,minmax(230px,1fr)); gap:20px}
.p-card{position:relative; display:flex; flex-direction:column; background:#fff; border:1px solid var(--line); border-radius:var(--r-lg); overflow:hidden; transition:var(--t)}
.p-card:hover{box-shadow:var(--sh-3); transform:translateY(-4px); border-color:transparent}
.p-media{position:relative; aspect-ratio:1/1; background:var(--bg-2); overflow:hidden}
.p-media img{width:100%; height:100%; object-fit:cover; transition:transform .4s cubic-bezier(.4,0,.2,1)}
.p-card:hover .p-media img{transform:scale(1.06)}
.p-badges{position:absolute; top:12px; left:12px; display:flex; flex-direction:column; gap:6px; z-index:2}
.tag{font-size:.7rem; font-weight:800; letter-spacing:.05em; text-transform:uppercase; padding:5px 10px; border-radius:var(--r-full); color:#fff; background:var(--ink)}
.tag-sale{background:var(--sale)}
.tag-new{background:var(--ok)}
.tag-out{background:var(--ink-3)}
.p-body{padding:16px 16px 18px; display:flex; flex-direction:column; flex:1; gap:8px}
.p-cat{font-size:.72rem; font-weight:700; letter-spacing:.08em; text-transform:uppercase; color:var(--ink-3)}
.p-name{font-family:var(--ff-h); font-size:.97rem; font-weight:700; line-height:1.35; display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden; min-height:2.7em}
.p-card a.p-name:hover{color:var(--brand)}
.p-stock{font-size:.78rem; font-weight:600; color:var(--ok); display:flex; align-items:center; gap:6px}
.p-stock::before{content:""; width:6px; height:6px; border-radius:50%; background:currentColor}
.p-stock.low{color:var(--warn)}
.p-stock.out{color:var(--ink-3)}
.p-price{display:flex; align-items:baseline; gap:9px; flex-wrap:wrap; margin-top:auto}
.p-price b{font-family:var(--ff-h); font-size:1.22rem; font-weight:800; letter-spacing:-.02em}
.p-price s{color:var(--ink-3); font-size:.88rem}
.p-price .save{font-size:.74rem; font-weight:800; color:var(--sale); background:#fff1f3; padding:3px 8px; border-radius:var(--r-full)}
.p-wholesale{font-size:.76rem; color:var(--ink-3)}
.p-wholesale b{color:var(--ink-2)}
.p-actions{display:flex; gap:8px; margin-top:4px}
.p-actions .btn{flex:1; padding:12px 14px; font-size:.87rem}

/* ---------- 8) PRODAVNICA ---------- */
.crumbs{font-size:.85rem; color:var(--ink-3); padding-block:16px; display:flex; gap:8px; flex-wrap:wrap}
.crumbs a:hover{color:var(--brand)}
.page-head{background:var(--bg-2); border-bottom:1px solid var(--line); padding-block:8px 30px}
.page-head h1{margin:0; font-size:clamp(1.7rem,3.2vw,2.4rem)}
.page-head p{margin:.5em 0 0; color:var(--ink-2); max-width:66ch}

.shop{display:grid; grid-template-columns:266px 1fr; gap:32px; align-items:flex-start; padding-block:32px 64px}
.side{position:sticky; top:96px; border:1px solid var(--line); border-radius:var(--r-lg); background:#fff; overflow:hidden}
.side-sec{padding:18px 20px; border-bottom:1px solid var(--line-2)}
.side-sec:last-child{border-bottom:0}
.side-sec h4{font-size:.78rem; letter-spacing:.1em; text-transform:uppercase; color:var(--ink-3); margin:0 0 12px; font-weight:800}
.side-list li + li{margin-top:2px}
.side-list button{display:flex; width:100%; align-items:center; justify-content:space-between; gap:10px; font:inherit; font-size:.9rem; font-weight:600; color:var(--ink-2); background:none; border:0; padding:9px 11px; border-radius:var(--r-sm); cursor:pointer; transition:var(--t); text-align:left}
.side-list button:hover{background:var(--bg-2); color:var(--ink)}
.side-list button[aria-pressed="true"]{background:var(--brand-soft); color:var(--brand-dark)}
.side-list .n{font-size:.75rem; color:var(--ink-3); font-weight:700}
.price-row{display:flex; align-items:center; gap:8px}
.price-row .input{padding:9px 10px; font-size:.88rem}

.toolbar{display:flex; align-items:center; justify-content:space-between; gap:16px; flex-wrap:wrap; margin-bottom:20px}
.toolbar .count{font-size:.9rem; color:var(--ink-2); font-weight:600}
.toolbar .right{display:flex; align-items:center; gap:10px}
.toolbar select.input{padding:10px 34px 10px 12px; font-size:.88rem; border-radius:var(--r-full); width:auto}
.filter-toggle{display:none}
.chips{display:flex; gap:8px; flex-wrap:wrap; margin-bottom:18px}
.chip{display:inline-flex; align-items:center; gap:7px; font-size:.82rem; font-weight:600; background:var(--brand-soft); color:var(--brand-dark); border:0; padding:7px 12px; border-radius:var(--r-full); cursor:pointer}
.chip svg{width:13px;height:13px}
.chip:hover{background:#ffe3d5}

.pager{display:flex; justify-content:center; align-items:center; gap:6px; margin-top:44px; flex-wrap:wrap}
.pager button{min-width:42px; height:42px; padding:0 12px; font:inherit; font-weight:700; font-size:.9rem; border:1px solid var(--line); background:#fff; border-radius:10px; cursor:pointer; transition:var(--t)}
.pager button:hover:not(:disabled){border-color:var(--ink)}
.pager button[aria-current="true"]{background:var(--ink); color:#fff; border-color:var(--ink)}
.pager button:disabled{opacity:.4; cursor:not-allowed}

.empty{text-align:center; padding:70px 20px; border:1px dashed var(--line); border-radius:var(--r-lg); background:var(--bg-2)}
.empty svg{width:52px; height:52px; stroke:var(--ink-3); margin:0 auto 16px}
.empty h3{margin-bottom:.3em}
.empty p{color:var(--ink-2); margin-bottom:1.4em}

.skeleton{background:linear-gradient(90deg,var(--bg-3) 25%,#f7f9fc 50%,var(--bg-3) 75%); background-size:200% 100%; animation:sk 1.3s infinite; border-radius:var(--r)}
@keyframes sk{0%{background-position:200% 0}100%{background-position:-200% 0}}
.sk-card{height:360px}

/* ---------- 9) STRANICA PROIZVODA ---------- */
.pdp{display:grid; grid-template-columns:1fr 1fr; gap:48px; padding-block:24px 56px; align-items:flex-start}
.gallery-main{border:1px solid var(--line); border-radius:var(--r-lg); overflow:hidden; background:var(--bg-2); aspect-ratio:1/1}
.gallery-main img{width:100%; height:100%; object-fit:cover}
.thumbs{display:flex; gap:10px; margin-top:12px; flex-wrap:wrap}
.thumbs button{width:78px; height:78px; border-radius:12px; overflow:hidden; border:2px solid var(--line); background:var(--bg-2); padding:0; cursor:pointer; transition:var(--t)}
.thumbs button[aria-pressed="true"]{border-color:var(--brand)}
.thumbs img{width:100%;height:100%;object-fit:cover}
.pdp-title{font-size:clamp(1.5rem,2.6vw,2.1rem); margin-bottom:.35em}
.pdp-meta{display:flex; gap:18px; flex-wrap:wrap; font-size:.85rem; color:var(--ink-3); margin-bottom:18px}
.pdp-meta b{color:var(--ink-2)}
.pdp-price{display:flex; align-items:baseline; gap:12px; flex-wrap:wrap; padding:18px 0; border-block:1px solid var(--line); margin-bottom:20px}
.pdp-price b{font-family:var(--ff-h); font-size:2.1rem; font-weight:800; letter-spacing:-.03em}
.pdp-price s{color:var(--ink-3); font-size:1.05rem}
.pdp-price .save{font-size:.8rem; font-weight:800; color:#fff; background:var(--sale); padding:5px 11px; border-radius:var(--r-full)}
.qty{display:inline-flex; align-items:center; border:1.5px solid var(--line); border-radius:var(--r-full); overflow:hidden; background:#fff}
.qty button{width:44px; height:48px; border:0; background:none; font-size:1.2rem; font-weight:700; cursor:pointer; color:var(--ink-2); transition:var(--t)}
.qty button:hover{background:var(--bg-2); color:var(--ink)}
.qty input{width:52px; height:48px; border:0; text-align:center; font:inherit; font-weight:700; font-size:1rem; -moz-appearance:textfield}
.qty input::-webkit-outer-spin-button,.qty input::-webkit-inner-spin-button{-webkit-appearance:none;margin:0}
.buy-row{display:flex; gap:12px; flex-wrap:wrap; align-items:center; margin-bottom:22px}
.buy-row .btn-primary{flex:1; min-width:200px}
.note-box{background:var(--brand-soft); border:1px solid #ffd9c6; border-radius:var(--r); padding:14px 16px; font-size:.88rem; color:#8a3a12; margin-bottom:20px}
.specs{width:100%; border-collapse:collapse; font-size:.92rem}
.specs th,.specs td{text-align:left; padding:11px 0; border-bottom:1px solid var(--line-2); vertical-align:top}
.specs th{width:42%; color:var(--ink-3); font-weight:600}
.specs td{font-weight:600}
.tabs{display:flex; gap:4px; border-bottom:1px solid var(--line); margin-bottom:20px; overflow-x:auto}
.tabs button{font:inherit; font-family:var(--ff-h); font-weight:700; font-size:.95rem; color:var(--ink-3); background:none; border:0; border-bottom:2.5px solid transparent; padding:12px 16px; cursor:pointer; white-space:nowrap; margin-bottom:-1px}
.tabs button[aria-selected="true"]{color:var(--ink); border-color:var(--brand)}

/* ---------- 10) KORPA I KASA ---------- */
.cart-wrap{display:grid; grid-template-columns:1fr 372px; gap:32px; align-items:flex-start; padding-block:28px 64px}
.cart-list{border:1px solid var(--line); border-radius:var(--r-lg); background:#fff; overflow:hidden}
.cart-row{display:grid; grid-template-columns:96px 1fr auto; gap:16px; padding:18px; border-bottom:1px solid var(--line-2); align-items:center}
.cart-row:last-child{border-bottom:0}
.cart-row img{width:96px; height:96px; object-fit:cover; border-radius:12px; background:var(--bg-2)}
.cart-info b{display:block; font-family:var(--ff-h); font-size:.98rem; margin-bottom:3px}
.cart-info .sku{font-size:.78rem; color:var(--ink-3)}
.cart-info .unit{font-size:.86rem; color:var(--ink-2); margin-top:6px}
.cart-side{display:flex; flex-direction:column; align-items:flex-end; gap:10px}
.cart-side .line{font-family:var(--ff-h); font-weight:800; font-size:1.05rem; white-space:nowrap}
.rm{background:none; border:0; font:inherit; font-size:.82rem; color:var(--ink-3); cursor:pointer; display:inline-flex; align-items:center; gap:5px; padding:4px}
.rm:hover{color:var(--sale)}
.rm svg{width:14px;height:14px}
.qty.sm button{width:34px;height:38px;font-size:1rem}
.qty.sm input{width:42px;height:38px;font-size:.92rem}

.summary{position:sticky; top:96px; border:1px solid var(--line); border-radius:var(--r-lg); background:#fff; padding:24px; box-shadow:var(--sh-2)}
.summary h3{margin-bottom:18px}
.sum-row{display:flex; justify-content:space-between; gap:16px; padding:9px 0; font-size:.94rem; color:var(--ink-2)}
.sum-row b{color:var(--ink); font-weight:700}
.sum-total{border-top:1px solid var(--line); margin-top:10px; padding-top:16px; font-family:var(--ff-h); font-size:1.15rem; font-weight:800; color:var(--ink)}
.sum-total span:last-child{color:var(--brand); font-size:1.4rem}
.freebar{background:var(--bg-2); border-radius:var(--r); padding:12px 14px; font-size:.84rem; color:var(--ink-2); margin-bottom:16px}
.freebar .track{height:6px; border-radius:var(--r-full); background:var(--line); margin-top:8px; overflow:hidden}
.freebar .fill{height:100%; background:var(--ok); border-radius:var(--r-full); transition:width .4s}
.mini-list{max-height:290px; overflow-y:auto; margin-bottom:16px}
.mini-row{display:flex; gap:12px; align-items:center; padding:9px 0; border-bottom:1px solid var(--line-2); font-size:.88rem}
.mini-row:last-child{border-bottom:0}
.mini-row img{width:48px;height:48px;border-radius:10px;object-fit:cover;background:var(--bg-2)}
.mini-row .g{flex:1; min-width:0}
.mini-row b{display:block; font-weight:600; font-size:.86rem; overflow:hidden; text-overflow:ellipsis; white-space:nowrap}
.mini-row span{color:var(--ink-3); font-size:.8rem}

.pay-opts{display:grid; gap:10px; margin-bottom:6px}
.pay-opt{display:flex; gap:12px; align-items:flex-start; border:1.5px solid var(--line); border-radius:var(--r); padding:14px 16px; cursor:pointer; transition:var(--t)}
.pay-opt:hover{border-color:#d3d8e0}
.pay-opt input{margin-top:3px; accent-color:var(--brand); width:18px; height:18px; flex:none}
.pay-opt b{display:block; font-size:.95rem}
.pay-opt span{font-size:.83rem; color:var(--ink-2)}
.pay-opt:has(input:checked){border-color:var(--brand); background:var(--brand-soft)}
.card-box{border:1px solid var(--line); border-radius:var(--r-lg); background:#fff; padding:24px; margin-bottom:22px}
.card-box > h3{margin-bottom:18px; font-size:1.05rem}
.alt-send{display:flex; gap:10px; flex-wrap:wrap; margin-top:14px}
.alt-send .btn{flex:1; min-width:170px}
.divider{display:flex; align-items:center; gap:14px; color:var(--ink-3); font-size:.84rem; margin:20px 0 6px}
.divider::before,.divider::after{content:""; flex:1; height:1px; background:var(--line)}

.toast-wrap{position:fixed; right:20px; bottom:20px; z-index:200; display:flex; flex-direction:column; gap:10px; pointer-events:none}
.toast{display:flex; align-items:center; gap:11px; background:var(--ink); color:#fff; padding:13px 18px; border-radius:var(--r); box-shadow:var(--sh-3); font-size:.9rem; font-weight:600; animation:tin .25s ease-out; max-width:340px}
.toast svg{width:19px;height:19px;stroke:var(--ok);flex:none}
.toast.err svg{stroke:#fda29b}
@keyframes tin{from{opacity:0; transform:translateY(14px)}to{opacity:1;transform:none}}

.success{max-width:640px; margin-inline:auto; text-align:center; padding-block:70px 90px}
.success .ico{width:88px; height:88px; border-radius:50%; background:#e7f8f0; display:grid; place-items:center; margin:0 auto 26px}
.success .ico svg{width:44px; height:44px; stroke:var(--ok); stroke-width:2.6}
.order-no{display:inline-block; font-family:var(--ff-h); font-weight:800; font-size:1.1rem; background:var(--bg-2); border:1px dashed var(--line); border-radius:var(--r); padding:12px 22px; margin:8px 0 26px}

/* info stranice */
.prose{max-width:74ch}
.prose h2{margin-top:1.6em; font-size:1.35rem}
.prose h3{margin-top:1.4em}
.prose ul{list-style:disc; padding-left:1.3em; margin:0 0 1em}
.prose li{margin-bottom:.4em}
.info-grid{display:grid; grid-template-columns:repeat(auto-fit,minmax(260px,1fr)); gap:20px}
.info-card{border:1px solid var(--line); border-radius:var(--r-lg); padding:24px; background:#fff}
.info-card h3{display:flex; align-items:center; gap:10px; font-size:1.02rem}
.info-card svg{width:20px;height:20px;stroke:var(--brand)}
.kv{width:100%; border-collapse:collapse; font-size:.92rem}
.kv th{text-align:left; font-weight:600; color:var(--ink-3); padding:9px 14px 9px 0; width:46%; vertical-align:top}
.kv td{padding:9px 0; font-weight:600; border-bottom:1px solid var(--line-2)}
.kv tr:last-child td{border-bottom:0}

/* ---------- 11) FOOTER ---------- */
.footer{background:var(--navy); color:#a8b3c7; margin-top:auto}
.footer a:hover{color:var(--brand)}
.foot-grid{display:grid; grid-template-columns:1.6fr 1fr 1fr 1.3fr; gap:36px; padding-block:56px 40px}
.footer h4{font-family:var(--ff-h); color:#fff; font-size:.95rem; margin-bottom:16px; letter-spacing:0}
.footer .brand{color:#fff; margin-bottom:16px}
.footer .brand small{color:#7d8aa3}
.foot-list li{margin-bottom:10px; font-size:.9rem}
.foot-contact li{display:flex; gap:11px; align-items:flex-start; margin-bottom:13px; font-size:.9rem}
.foot-contact svg{width:17px; height:17px; stroke:var(--brand); flex:none; margin-top:3px}
.foot-bottom{border-top:1px solid rgba(255,255,255,.1); padding-block:20px; display:flex; justify-content:space-between; gap:18px; flex-wrap:wrap; font-size:.82rem; color:#7d8aa3}
.socials{display:flex; gap:10px; margin-top:18px}
.socials a{width:38px; height:38px; border-radius:10px; background:rgba(255,255,255,.08); display:grid; place-items:center; transition:var(--t)}
.socials a:hover{background:var(--brand)}
.socials svg{width:18px; height:18px; stroke:#fff}

.float-contact{position:fixed; right:18px; bottom:18px; z-index:90; display:flex; flex-direction:column; gap:10px}
.float-contact a{width:52px; height:52px; border-radius:50%; display:grid; place-items:center; box-shadow:var(--sh-3); transition:var(--t)}
.float-contact a:hover{transform:scale(1.08)}
.float-contact svg{width:26px;height:26px;fill:#fff}
.fc-wa{background:#25d366}
.fc-vi{background:#7360f2}

/* ---------- 12) RESPONSIVE ---------- */
@media (max-width:1080px){
  .hero .wrap{grid-template-columns:1fr; gap:36px}
  .hero-art{max-width:520px}
  .usp{grid-template-columns:1fr 1fr}
  .foot-grid{grid-template-columns:1fr 1fr; gap:30px}
  .cart-wrap{grid-template-columns:1fr}
  .summary{position:static}
}
@media (max-width:900px){
  .topbar-list li:not(:first-child){display:none}
  .header .wrap{min-height:66px; gap:12px}
  .searchbar{order:3; flex-basis:100%; max-width:none; margin-bottom:12px}
  .header .wrap{flex-wrap:wrap; padding-top:12px}
  .burger{display:grid}
  .nav{display:none}
  .shop{grid-template-columns:1fr; gap:20px}
  .side{position:static; display:none}
  .side.open{display:block}
  .filter-toggle{display:inline-flex}
  .pdp{grid-template-columns:1fr; gap:30px}
  .cta-band{grid-template-columns:1fr}
}
@media (max-width:640px){
  .usp{grid-template-columns:1fr; margin-top:-20px}
  .p-grid{grid-template-columns:repeat(auto-fill,minmax(160px,1fr)); gap:14px}
  .p-body{padding:13px}
  .p-name{font-size:.9rem}
  .p-price b{font-size:1.08rem}
  .hero-stats{gap:22px; flex-wrap:wrap}
  .foot-grid{grid-template-columns:1fr}
  .grid-2{grid-template-columns:1fr}
  .cart-row{grid-template-columns:72px 1fr; gap:12px}
  .cart-row img{width:72px;height:72px}
  .cart-side{grid-column:1/-1; flex-direction:row; align-items:center; justify-content:space-between; width:100%}
  .sec-head{flex-direction:column; align-items:flex-start; gap:10px}
  .float-contact a{width:46px;height:46px}
  .float-contact svg{width:22px;height:22px}
  .toast-wrap{left:14px; right:14px; bottom:14px}
  .toast{max-width:none}
}
@media (max-width:400px){
  .brand-name{font-size:1rem}
  .brand small{font-size:.56rem}
}
@media print{
  .header,.topbar,.nav,.footer,.float-contact,.btn{display:none !important}
}