/* ==========================================================================
   Jeftino.shop — dizajn sistem v2
   Paleta i logo ostaju; sve ostalo je novo. Bez gradijenata i sjena:
   dubina se gradi bojom, linijama, tipografijom i pokretom.
   Skaliranje: root font-size raste/pada s ekranom (320px → 4K), a sve
   mjere su u rem/em — tekst, ikone, razmaci i slike se skaliraju zajedno.
   ========================================================================== */

:root{
  --navy:#16213a; --navy-2:#1f2d4d; --navy-3:#2b3b60;
  --orange:#ff7a1a; --orange-d:#e85d04;
  --red:#f71522; --red-d:#c80e1a;
  --teal:#0ea5a3; --teal-d:#0b7f7e;
  --bg:#f4f6f8; --bg-2:#eef1f5; --white:#fff;
  --ink:#1e2330; --muted:#5f6675; --line:#e3e6eb; --line-2:#cfd5de;
  --bhp-blue:#1f3f8f; --bhp-yellow:#f7c600;

  --font:"Barlow", system-ui, -apple-system, "Segoe UI", sans-serif;
  --font-d:"Barlow Condensed", "Arial Narrow", sans-serif;

  --r-xs:.25rem; --r-sm:.375rem; --r:.625rem; --r-lg:1rem; --r-xl:1.5rem;
  --gutter:clamp(1rem, 3.4vw, 3.5rem);
  --container:96rem;
  --edge:max(var(--gutter), calc((100vw - var(--container)) / 2));
  --ease:cubic-bezier(.16,1,.3,1);
  --ease-io:cubic-bezier(.65,0,.35,1);
  --spring:cubic-bezier(.34,1.56,.64,1);
  --tabbar-h:0rem;
  --header-h:8.6rem;
}

/* Scrollbar: providna staza, tanka narandžasta linija */
html{ scrollbar-width:thin; scrollbar-color:var(--orange) transparent; }
::-webkit-scrollbar{ width:6px; height:6px; background:transparent; }
::-webkit-scrollbar-track{ background:transparent; }
::-webkit-scrollbar-thumb{ background:var(--orange); border-radius:6px; }
::-webkit-scrollbar-thumb:hover{ background:var(--orange-d); }
::-webkit-scrollbar-corner{ background:transparent; }

/* Fluidni root: 13.5px na mobitelu, 15px na 1440, 16px na 1920, ~23.5px na 4K */
html{ font-size:clamp(13.5px, 12.3px + .19vw, 15px); -webkit-text-size-adjust:100%; scroll-padding-top:6rem; }
@media (min-width:1440px){ html{ font-size:calc(15px + (100vw - 1440px) * .00208); } }
@media (min-width:1920px){ html{ font-size:calc(16px + (100vw - 1920px) * .0039); } }

*,*::before,*::after{ box-sizing:border-box; }
body{
  margin:0; font-family:var(--font); font-size:1rem; line-height:1.55; color:var(--ink);
  background:var(--bg); -webkit-font-smoothing:antialiased; text-rendering:optimizeLegibility;
  overflow-x:clip;
}
img{ display:block; max-width:100%; height:auto; }
a{ color:inherit; text-decoration:none; }
button{ font:inherit; color:inherit; background:none; border:0; padding:0; cursor:pointer; -webkit-tap-highlight-color:transparent; }
input,select,textarea{ font:inherit; color:inherit; }
ul,ol{ margin:0; padding:0; list-style:none; }
h1,h2,h3,h4,p{ margin:0; }
:focus-visible{ outline:.15rem solid var(--orange); outline-offset:.15rem; border-radius:.2rem; }
::selection{ background:var(--orange); color:var(--navy); }
.sr-only{ position:absolute!important; width:1px; height:1px; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; }
.skip{ position:fixed; left:1rem; top:-4rem; z-index:999; background:var(--orange); color:var(--navy); padding:.6rem 1rem; font-weight:700; border-radius:var(--r-sm); transition:top .2s; }
.skip:focus{ top:1rem; }

.wrap{ width:min(100% - 2 * var(--gutter), var(--container)); margin-inline:auto; }

/* ---------- Google Material Symbols ---------- */
.ms{
  font-family:"Material Symbols Rounded"; font-weight:400; font-style:normal; font-size:1.35em;
  line-height:1; letter-spacing:normal; text-transform:none; display:inline-block; white-space:nowrap;
  direction:ltr; width:1em; height:1em; overflow:hidden; flex:none; user-select:none;
  font-variation-settings:"FILL" 0, "wght" 400, "GRAD" 0, "opsz" 24;
  -webkit-font-smoothing:antialiased; font-feature-settings:"liga"; vertical-align:middle;
}
.ms.fill,.is-active>.ms,.is-on .ms{ font-variation-settings:"FILL" 1, "wght" 400, "GRAD" 0, "opsz" 24; }
.ms-sm{ font-size:1.1em; } .ms-lg{ font-size:1.8em; }

/* ---------- Tipografija ---------- */
.eyebrow{
  display:inline-flex; align-items:center; gap:.5em; font-size:max(10.5px, .72rem); font-weight:700;
  letter-spacing:.16em; text-transform:uppercase; color:var(--orange-d);
}
.eyebrow::before{ content:""; width:1.75em; height:.14em; background:currentColor; }
.eyebrow--light{ color:var(--orange); }
.eyebrow--plain::before{ display:none; }
.display{ font-family:var(--font-d); font-weight:800; text-transform:uppercase; line-height:.92; letter-spacing:-.005em; }
.h-sec{ font-family:var(--font-d); font-weight:800; text-transform:uppercase; font-size:clamp(1.65rem, 1rem + 1.5vw, 2.7rem); line-height:.95; color:var(--navy); }
.h-sec em{ font-style:italic; color:var(--orange-d); }
.lead{ font-size:1rem; color:var(--muted); max-width:38em; }
.muted{ color:var(--muted); }

/* ---------- Dugmad ---------- */
.btn{
  --b-bg:var(--orange); --b-fg:var(--navy); --b-hover:var(--navy); --b-hover-fg:#fff;
  position:relative; isolation:isolate; overflow:hidden;
  display:inline-flex; align-items:center; justify-content:center; gap:.55em;
  min-height:2.85rem; padding:0 1.35rem; border:.125rem solid var(--b-bg); border-radius:var(--r-sm);
  background:var(--b-bg); color:var(--b-fg); font-weight:700; font-size:.78rem; letter-spacing:.08em;
  text-transform:uppercase; white-space:nowrap; transition:color .4s var(--ease), border-color .4s var(--ease), transform .2s var(--ease);
}
.btn::before{
  content:""; position:absolute; inset:-1px; z-index:-1; background:var(--b-hover);
  transform:scaleX(0); transform-origin:100% 50%; transition:transform .5s var(--ease);
}
.btn:hover{ color:var(--b-hover-fg); border-color:var(--b-hover); }
.btn:hover::before{ transform:scaleX(1); transform-origin:0 50%; }
.btn .ms{ transition:transform .4s var(--ease); }
.btn:hover .ms:last-child{ transform:translateX(.2em); }
.btn:active{ transform:scale(.97); }
.btn[disabled]{ opacity:.55; pointer-events:none; }
.btn--navy{ --b-bg:var(--navy); --b-fg:#fff; --b-hover:var(--orange); --b-hover-fg:var(--navy); }
.btn--ghost{ --b-bg:transparent; --b-fg:#fff; --b-hover:#fff; --b-hover-fg:var(--navy); border-color:rgba(255,255,255,.55); }
.btn--line{ --b-bg:transparent; --b-fg:var(--navy); --b-hover:var(--navy); --b-hover-fg:#fff; border-color:var(--navy); }
.btn--white{ --b-bg:#fff; --b-fg:var(--navy); --b-hover:var(--navy); --b-hover-fg:#fff; }
.btn--viber{ --b-bg:#7360f2; --b-fg:#fff; --b-hover:var(--navy); }
.btn--wa{ --b-bg:#25d366; --b-fg:#0b2b17; --b-hover:var(--navy); --b-hover-fg:#fff; }
.btn--sm{ min-height:2.3rem; padding:0 .9rem; font-size:max(10px, .7rem); }
.btn--lg{ min-height:3.1rem; padding:0 1.6rem; font-size:.84rem; }
.btn--block{ width:100%; }
.brand-ico{ width:1.15em; height:1.15em; fill:currentColor; flex:none; }

.link-arrow{ display:inline-flex; align-items:center; gap:.35em; font-weight:700; font-size:.78rem; letter-spacing:.06em; text-transform:uppercase; color:var(--navy); border-bottom:.125rem solid var(--orange); padding-bottom:.15em; }
.link-arrow .ms{ transition:transform .35s var(--ease); }
.link-arrow:hover .ms{ transform:translate(.15em,-.15em); }

.icon-btn{ display:inline-grid; place-items:center; width:2.45rem; height:2.45rem; border-radius:var(--r-sm); border:1px solid var(--line); background:#fff; transition:background .2s, border-color .2s, transform .2s var(--ease); }
.icon-btn:hover{ border-color:var(--navy); }
.icon-btn:active{ transform:scale(.92); }

/* ---------- Oznake ---------- */
.tag{ display:inline-flex; align-items:center; gap:.3em; height:1.4rem; padding:0 .45rem; border-radius:var(--r-xs); font-size:max(10px, .64rem); font-weight:800; letter-spacing:.06em; text-transform:uppercase; white-space:nowrap; }
.tag--sale{ background:var(--red); color:#fff; }
.tag--new{ background:var(--teal); color:#fff; }
.tag--used{ background:var(--navy); color:#fff; }
.tag--req{ background:var(--orange); color:var(--navy); }
.tag--line{ border:1px solid var(--line-2); color:var(--navy); background:#fff; }
.dot-live{ position:relative; width:.55rem; height:.55rem; border-radius:50%; background:var(--teal); flex:none; }
.dot-live::after{ content:""; position:absolute; inset:0; border-radius:50%; background:var(--teal); animation:ping 1.8s var(--ease) infinite; }
.dot-live--off{ background:var(--muted); } .dot-live--off::after{ display:none; }
@keyframes ping{ 0%{ transform:scale(1); opacity:.7; } 80%,100%{ transform:scale(2.6); opacity:0; } }

/* ---------- Forme ---------- */
.field{ display:grid; gap:.35rem; }
.field label{ font-size:max(10.5px, .72rem); font-weight:700; letter-spacing:.04em; text-transform:uppercase; color:var(--navy); }
.field label small{ text-transform:none; letter-spacing:0; font-weight:500; color:var(--muted); }
.input{
  width:100%; min-height:2.8rem; padding:.6rem .85rem; border:1px solid var(--line-2); border-radius:var(--r-sm);
  background:#fff; font-size:max(16px, .95rem); transition:border-color .2s, background .2s;
}
textarea.input{ min-height:6rem; resize:vertical; }
.input:hover{ border-color:var(--muted); }
.input:focus{ outline:none; border-color:var(--navy); }
.field.has-error .input{ border-color:var(--red-d); background:#fff6f6; }
.field__err{ font-size:.8125rem; color:var(--red-d); font-weight:600; min-height:0; }
select.input{ appearance:none; padding-right:2.5rem; background:#fff url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%2316213a' d='M7 10l5 5 5-5z'/%3E%3C/svg%3E") no-repeat right .7rem center / 1.2rem; }
.check{ display:flex; align-items:flex-start; gap:.65rem; cursor:pointer; font-size:.95rem; }
.check input{ appearance:none; flex:none; width:1.3rem; height:1.3rem; margin-top:.1rem; border:.125rem solid var(--line-2); border-radius:.3rem; background:#fff; display:grid; place-items:center; transition:background .2s, border-color .2s; }
.check input::after{ content:""; width:.65rem; height:.35rem; border:solid #fff; border-width:0 0 .14rem .14rem; transform:rotate(-45deg) scale(0); transition:transform .25s var(--spring); margin-top:-.1rem; }
.check input:checked{ background:var(--navy); border-color:var(--navy); }
.check input:checked::after{ transform:rotate(-45deg) scale(1); }
.check a{ text-decoration:underline; text-underline-offset:.15em; }

/* ==========================================================================
   HEADER
   ========================================================================== */
.site-header{ position:sticky; top:0; z-index:50; view-transition-name:site-header; transition:transform .45s var(--ease); }
.site-header.is-compact{ transform:translateY(calc(-1 * var(--strip-h, 2.4rem))); }

.strip{ background:var(--red-d); color:#fff; font-size:max(10.5px, .74rem); font-weight:600; }
.strip__in{ display:flex; align-items:center; justify-content:space-between; gap:1.5rem; height:2.1rem; }
.strip__lead{ display:flex; align-items:center; gap:.5rem; white-space:nowrap; overflow:hidden; }
.strip__lead strong{ font-weight:800; }
.strip__lead .sep{ opacity:.6; }
.strip__links{ display:flex; align-items:center; gap:1.25rem; white-space:nowrap; }
.strip__links a{ display:inline-flex; align-items:center; gap:.35rem; opacity:.95; transition:opacity .2s; }
.strip__links a:hover{ opacity:1; text-decoration:underline; text-underline-offset:.2em; }

.hmain{ background:#fff; border-bottom:1px solid var(--line); }
.hmain__in{ display:flex; align-items:center; gap:clamp(1rem, 2.4vw, 2.6rem); height:4.4rem; }
.logo img{ height:2.35rem; width:auto; }
.search{ position:relative; flex:1; max-width:46rem; }
.search__box{ display:flex; align-items:center; height:2.75rem; border:.125rem solid var(--navy); border-radius:var(--r-sm); background:#fff; transition:border-color .2s; }
.search__box .ms{ margin-left:.85rem; color:var(--muted); }
.search__box input{ flex:1; min-width:0; height:100%; border:0; background:none; padding:0 .8rem; font-size:max(16px, .92rem); }
.search__box input:focus{ outline:none; }
.search__box button{ height:100%; padding:0 1.3rem; background:var(--navy); color:#fff; font-weight:700; letter-spacing:.08em; text-transform:uppercase; font-size:max(10px, .72rem); display:flex; align-items:center; gap:.4rem; transition:background .2s; }
.search__box button:hover{ background:var(--orange); color:var(--navy); }
.search__box:focus-within{ border-color:var(--orange); }

.suggest{ position:absolute; left:0; right:0; top:calc(100% + .5rem); z-index:60; background:#fff; border:1px solid var(--line-2); border-radius:var(--r); padding:.5rem; opacity:0; transform:translateY(-.5rem); pointer-events:none; transition:opacity .25s var(--ease), transform .35s var(--ease); max-height:70vh; overflow:auto; }
.suggest.is-open{ opacity:1; transform:none; pointer-events:auto; }
.suggest__label{ font-size:.75rem; font-weight:800; letter-spacing:.12em; text-transform:uppercase; color:var(--muted); padding:.5rem .6rem .3rem; }
.suggest__item{ display:grid; grid-template-columns:3.2rem 1fr auto; align-items:center; gap:.8rem; padding:.45rem .6rem; border-radius:var(--r-sm); }
.suggest__item img{ width:3.2rem; height:3.2rem; object-fit:cover; border-radius:var(--r-xs); background:var(--bg-2); }
.suggest__item strong{ display:block; font-size:.95rem; line-height:1.25; }
.suggest__item small{ color:var(--muted); font-size:.8rem; }
.suggest__price{ font-weight:800; color:var(--navy); white-space:nowrap; }
.suggest__item.is-active,.suggest__item:hover{ background:var(--bg-2); }
.suggest__all{ display:flex; align-items:center; justify-content:space-between; margin-top:.3rem; padding:.75rem .6rem; border-top:1px solid var(--line); font-weight:700; color:var(--navy); }
.suggest__chips{ display:flex; flex-wrap:wrap; gap:.4rem; padding:.2rem .6rem .5rem; }
.chip{ display:inline-flex; align-items:center; gap:.35rem; height:1.95rem; padding:0 .8rem; border:1px solid var(--line-2); border-radius:2rem; font-size:.8rem; font-weight:600; background:#fff; transition:background .2s, border-color .2s, color .2s; white-space:nowrap; }
.chip:hover{ border-color:var(--navy); }
.chip.is-active{ background:var(--navy); border-color:var(--navy); color:#fff; }
.chip__count{ font-size:.75rem; opacity:.65; font-weight:700; }
.suggest__empty{ padding:1rem .6rem; color:var(--muted); }

.hact{ display:flex; align-items:center; gap:.4rem; margin-left:auto; }
.hact__item{ position:relative; display:flex; align-items:center; gap:.6rem; padding:.45rem .7rem; border-radius:var(--r-sm); transition:background .2s; }
.hact__item:hover{ background:var(--bg-2); }
.hact__item .ms{ font-size:1.5rem; color:var(--navy); }
.hact__text{ display:grid; line-height:1.15; }
.hact__text small{ font-size:max(10px, .68rem); color:var(--muted); font-weight:600; }
.hact__text strong{ font-size:.84rem; color:var(--navy); white-space:nowrap; }
.badge{ position:absolute; top:.1rem; left:1.75rem; min-width:1.3rem; height:1.3rem; padding:0 .3rem; border-radius:1rem; background:var(--orange); color:var(--navy); font-size:.72rem; font-weight:800; display:grid; place-items:center; border:.125rem solid #fff; transform-origin:center; }
.badge.is-empty{ transform:scale(0); }
.badge.bump{ animation:bump .6s var(--spring); }
@keyframes bump{ 0%{ transform:scale(1); } 35%{ transform:scale(1.55); } 100%{ transform:scale(1); } }

.nav{ background:var(--navy); color:#fff; }
.nav__in{ display:flex; align-items:center; gap:.4rem; height:2.95rem; }
.nav__cats{ display:flex; align-items:center; gap:.55rem; height:100%; padding:0 1.35rem; background:var(--orange); color:var(--navy); font-weight:800; letter-spacing:.08em; text-transform:uppercase; font-size:max(10.5px, .74rem); transition:background .2s; }
.nav__cats .chev{ transition:transform .35s var(--ease); }
.nav__cats[aria-expanded="true"] .chev{ transform:rotate(180deg); }
.nav__cats:hover{ background:#fff; }
.nav__links{ display:flex; align-items:center; height:100%; margin-left:.6rem; }
.nav__link{ position:relative; display:flex; align-items:center; gap:.35rem; height:100%; padding:0 1rem; font-weight:600; font-size:.85rem; color:rgba(255,255,255,.88); transition:color .2s; }
.nav__link::after{ content:""; position:absolute; left:1rem; right:1rem; bottom:0; height:.2rem; background:var(--orange); transform:scaleX(0); transform-origin:left; transition:transform .4s var(--ease); }
.nav__link:hover,.nav__link.is-current{ color:#fff; }
.nav__link:hover::after,.nav__link.is-current::after{ transform:scaleX(1); }
.nav__link--hot{ color:#ffb27d; }
.nav__bhp{ margin-left:auto; display:flex; align-items:center; gap:.6rem; height:2.1rem; padding:0 .8rem 0 .45rem; background:#fff; color:var(--navy); border-radius:var(--r-sm); font-weight:800; font-size:.76rem; }
.nav__bhp img{ height:1.2rem; width:auto; }
.nav__bhp .sep{ width:1px; height:1.2rem; background:var(--line-2); }

/* Mega meni */
.mega{ position:absolute; left:0; right:0; top:100%; background:#fff; border-bottom:1px solid var(--line-2); color:var(--ink); clip-path:inset(0 0 100% 0); visibility:hidden; transition:clip-path .55s var(--ease), visibility 0s .55s; }
.mega.is-open{ clip-path:inset(0 0 0 0); visibility:visible; transition:clip-path .55s var(--ease), visibility 0s; }
.mega__in{ display:grid; grid-template-columns:minmax(0,1.15fr) minmax(0,1.6fr) minmax(0,.95fr); gap:1.6rem; padding-block:1.6rem; }
.mega__title{ font-family:var(--font-d); font-size:1.2rem; font-weight:800; text-transform:uppercase; color:var(--navy); margin-bottom:.9rem; }
.mega__cats{ display:grid; grid-template-columns:1fr 1fr; column-gap:1.2rem; }
.mega__cat{ display:flex; align-items:center; justify-content:space-between; gap:.8rem; padding:.6rem 0; border-bottom:1px solid var(--line); font-weight:600; transition:color .2s, padding .3s var(--ease); }
.mega__cat:hover{ color:var(--orange-d); padding-left:.4rem; }
.mega__cat-count{ font-size:.75rem; font-weight:800; color:var(--muted); background:var(--bg-2); border-radius:1rem; padding:.1rem .5rem; }
.mega__all{ margin-top:1rem; }
.mega__tiles{ display:grid; grid-template-columns:repeat(3,1fr); gap:.8rem; }
.mega__tile{ position:relative; overflow:hidden; border-radius:var(--r); aspect-ratio:4/5; background:var(--bg-2); }
.mega__tile img{ width:100%; height:100%; object-fit:cover; transition:transform .8s var(--ease); }
.mega__tile:hover img{ transform:scale(1.07); }
.mega__tile-label{ position:absolute; left:.6rem; right:.6rem; bottom:.6rem; display:flex; align-items:center; justify-content:space-between; gap:.4rem; padding:.55rem .7rem; background:#fff; border-radius:var(--r-sm); font-weight:700; font-size:.875rem; color:var(--navy); }
.mega__promo{ display:flex; flex-direction:column; justify-content:space-between; gap:1rem; padding:1.4rem; background:var(--navy); color:#fff; border-radius:var(--r); }
.mega__promo .bhp-chip{ align-self:flex-start; }
.mega__promo strong{ font-family:var(--font-d); font-size:1.9rem; line-height:.9; text-transform:uppercase; }
.mega.is-open .mega__cat, .mega.is-open .mega__tile, .mega.is-open .mega__promo{ animation:rise .6s var(--ease) both; }
.mega.is-open .mega__tile:nth-child(2){ animation-delay:.06s; } .mega.is-open .mega__tile:nth-child(3){ animation-delay:.12s; }
.mega.is-open .mega__promo{ animation-delay:.16s; }
@keyframes rise{ from{ opacity:0; transform:translateY(.9rem); } to{ opacity:1; transform:none; } }
.mega-scrim{ position:fixed; inset:0; z-index:40; background:rgba(22,33,58,.35); opacity:0; pointer-events:none; transition:opacity .4s var(--ease); }
.mega-scrim.is-open{ opacity:1; pointer-events:auto; }

.bhp-chip{ display:inline-flex; align-items:center; gap:.55rem; height:2.3rem; padding:0 .8rem 0 .55rem; background:#fff; color:var(--navy); border-radius:var(--r-sm); font-weight:800; font-size:.875rem; }
.bhp-chip img{ height:1.35rem; width:auto; }

/* Mobilna gornja traka */
.mbar-actions{ display:none; }

/* ==========================================================================
   TICKER (traka koja klizi)
   ========================================================================== */
.ticker{ background:var(--orange); color:var(--navy); overflow:hidden; border-block:1px solid var(--orange-d); }
.ticker__track{ display:flex; width:max-content; animation:ticker 38s linear infinite; }
.ticker:hover .ticker__track{ animation-play-state:paused; }
.ticker__group{ display:flex; align-items:center; }
.ticker__item{ display:flex; align-items:center; gap:.5rem; padding:0 1.5rem; height:2.6rem; font-family:var(--font-d); font-weight:800; font-size:1.02rem; text-transform:uppercase; letter-spacing:.02em; white-space:nowrap; }
.ticker__item .ms{ font-size:1.2rem; }
.ticker__item::after{ content:""; width:.5rem; height:.5rem; background:var(--navy); transform:rotate(45deg); margin-left:1.5rem; }
@keyframes ticker{ to{ transform:translateX(-50%); } }

/* ==========================================================================
   HERO — video pozadina od tri reklame (bez zvuka)
   Široki ekran: video zid  [uspravni | vodoravni | uspravni]
   Uspravni ekran (mobitel/tablet): dva uspravna videa se smjenjuju preko cijele površine
   ========================================================================== */
.hero{ position:relative; height:clamp(28rem, calc(100svh - var(--header-h) - 2rem), 44rem); background:var(--navy); color:#fff; overflow:hidden; isolation:isolate; }
.hvid{ position:absolute; inset:0; z-index:-1; }
.hvid video{ display:block; width:100%; height:100%; object-fit:cover; background:var(--navy-2); }

.hvid__wall{ display:grid; grid-template-columns:9fr 32fr 9fr; gap:.3rem; height:100%; background:var(--navy); }
.hvid__cell{ position:relative; overflow:hidden; background:var(--navy-2); opacity:0; transform:translateY(4%); transition:opacity 1s var(--ease), transform 1.4s var(--ease); }
.is-ready .hvid__cell{ opacity:1; transform:none; }
.is-ready .hvid__cell:nth-child(2){ transition-delay:.12s; }
.is-ready .hvid__cell:nth-child(3){ transition-delay:.24s; }
.hvid__solo{ display:none; position:relative; height:100%; }
.hvid__solo video{ position:absolute; inset:0; opacity:0; transition:opacity .9s var(--ease); }
.hvid__solo video.is-on{ opacity:1; }

/* uspravni prikaz: video preko cijele površine */
@media (max-aspect-ratio:1/1){
  .hvid__wall{ display:none; }
  .hvid__solo{ display:block; }
}
.hvid::after{ content:""; position:absolute; inset:0; background:rgba(12,19,35,.1); pointer-events:none; }

/* kartica s porukom */
.hero__wrap{ position:relative; z-index:2; height:100%; display:flex; align-items:flex-end; padding-bottom:clamp(1.4rem, 1rem + 1.6vw, 2.6rem); pointer-events:none; }
.hero__card{ pointer-events:auto; width:min(100%, 30rem); padding:clamp(1.3rem, 1rem + 1vw, 2rem); background:var(--navy); border-top:.22rem solid var(--orange); }
.hero__card > *{ opacity:0; transform:translateY(.9rem); transition:opacity .8s var(--ease), transform .8s var(--ease); }
.is-ready .hero__card > *{ opacity:1; transform:none; }
.is-ready .hero__card > :nth-child(1){ transition-delay:.35s; }
.is-ready .hero__card > :nth-child(2){ transition-delay:.43s; }
.is-ready .hero__card > :nth-child(3){ transition-delay:.51s; }
.is-ready .hero__card > :nth-child(4){ transition-delay:.59s; }
.hero__title{ margin-top:.7rem; font-family:var(--font-d); font-weight:800; font-style:italic; text-transform:uppercase; font-size:clamp(1.9rem, 1.2rem + 1.8vw, 3.2rem); line-height:.93; }
.hero__title em{ font-style:italic; color:var(--orange); }
.hero__text{ margin-top:.7rem; font-size:.92rem; color:rgba(255,255,255,.76); max-width:28em; }
.hero__ctas{ display:flex; flex-wrap:wrap; align-items:center; gap:.5rem 1.2rem; margin-top:1.2rem; }
.hero__link{ display:inline-flex; align-items:center; gap:.3rem; font-size:.8rem; font-weight:700; letter-spacing:.06em; text-transform:uppercase; color:#fff; border-bottom:1px solid rgba(255,255,255,.4); padding-bottom:.1rem; transition:border-color .2s, color .2s; }
.hero__link:hover{ color:var(--orange); border-color:var(--orange); }

/* pauza/pokreni (pristupačnost: pokretni sadržaj se mora moći zaustaviti) */
.hero__pause{ position:absolute; z-index:3; right:var(--edge); bottom:clamp(1.4rem, 1rem + 1.6vw, 2.6rem); width:2.6rem; height:2.6rem; display:grid; place-items:center; border-radius:50%; background:rgba(22,33,58,.72); color:#fff; transition:background .25s, transform .25s var(--spring); }
.hero__pause:hover{ background:var(--navy); transform:scale(1.06); }
.hero__pause .ms{ font-variation-settings:"FILL" 1, "wght" 500, "GRAD" 0, "opsz" 24; }

/* ==========================================================================
   SEKCIJE
   ========================================================================== */
.sec{ padding-block:clamp(2.5rem, 1.5rem + 2.6vw, 4.6rem); }
.sec--white{ background:#fff; }
.sec--tight{ padding-block:clamp(2rem, 1.2rem + 2vw, 3.4rem); }
.sec__head{ display:flex; align-items:flex-end; justify-content:space-between; gap:2rem; margin-bottom:clamp(1.1rem, .8rem + 1vw, 1.8rem); }
.sec__head-l{ display:grid; gap:.55rem; }
.sec__num{ font-family:var(--font-d); font-weight:800; font-size:1rem; color:var(--muted); letter-spacing:.1em; }

/* Kategorije — bento */
.bento{ display:grid; grid-template-columns:repeat(4, 1fr); grid-auto-rows:clamp(8.5rem, 6rem + 4.6vw, 12.5rem); grid-auto-flow:dense; gap:1rem; }
.bento__tile{ position:relative; overflow:hidden; border-radius:var(--r); background:var(--bg-2); color:#fff; display:flex; isolation:isolate; }
.bento__tile.big{ grid-column:span 2; grid-row:span 2; }
.bento__tile.wide{ grid-column:span 2; }
.bento__tile img{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; z-index:-2; transition:transform 1s var(--ease); }
.bento__tile::after{ content:""; position:absolute; inset:0; z-index:-1; background:rgba(22,33,58,.32); transition:background .5s var(--ease); }
.bento__tile:hover img{ transform:scale(1.06); }
.bento__tile:hover::after{ background:rgba(22,33,58,.5); }
.bento__label{ margin-top:auto; width:100%; display:flex; align-items:flex-end; justify-content:space-between; gap:1rem; padding:1rem; }
.bento__name{ font-family:var(--font-d); font-weight:800; font-size:clamp(1.1rem, .9rem + .5vw, 1.55rem); line-height:.95; text-transform:uppercase; }
.bento__tile.big .bento__name{ font-size:clamp(1.6rem, 1rem + 1.3vw, 2.5rem); }
.bento__count{ display:block; font-family:var(--font); font-size:.76rem; font-weight:600; text-transform:none; opacity:.85; margin-top:.35rem; }
.bento__go{ flex:none; width:2.3rem; height:2.3rem; display:grid; place-items:center; background:#fff; color:var(--navy); border-radius:50%; transition:transform .5s var(--ease), background .3s; }
.bento__tile:hover .bento__go{ transform:rotate(-45deg); background:var(--orange); }
.bento__tile--solid::after{ display:none; }
.bento__tile--orange{ background:var(--orange); color:var(--navy); }
.bento__tile--navy{ background:var(--navy); }
.bento__tile--teal{ background:var(--teal-d); }
.bento__tile--red{ background:var(--red-d); }
.bento__big{ position:absolute; top:1rem; left:1.2rem; font-family:var(--font-d); font-size:clamp(2.3rem, 1.6rem + 1.8vw, 3.6rem); font-weight:800; line-height:.85; }
.bento__tile--solid .bento__go{ background:var(--navy); color:#fff; }
.bento__tile--navy .bento__go,.bento__tile--teal .bento__go,.bento__tile--red .bento__go{ background:#fff; color:var(--navy); }
.bento__tile--solid .ms-deco{ position:absolute; right:-.1em; top:-.15em; font-size:6.5rem; opacity:.14; }

/* Akcije — panel + traka */
.deals{ display:grid; grid-template-columns:minmax(16rem, 23%) minmax(0,1fr); gap:1rem; align-items:stretch; }
.deals__panel{ display:flex; flex-direction:column; gap:.9rem; padding:1.4rem; background:var(--red-d); color:#fff; border-radius:var(--r); }
.deals__panel .eyebrow{ color:#fff; }
.deals__big{ font-family:var(--font-d); font-weight:800; font-size:clamp(3rem, 2.2rem + 2.2vw, 4.8rem); line-height:.82; }
.deals__big small{ display:block; font-size:.28em; letter-spacing:.06em; margin-top:.4em; }
.deals__panel p{ color:rgba(255,255,255,.85); }
.deals__ctrl{ display:flex; gap:.5rem; margin-top:auto; }
.deals__ctrl .icon-btn{ background:transparent; border-color:rgba(255,255,255,.4); color:#fff; }
.deals__ctrl .icon-btn:hover{ background:#fff; color:var(--navy); }

.rail{ display:grid; grid-auto-flow:column; grid-auto-columns:calc((100% - 3 * 1rem) / 4); gap:1rem; overflow-x:auto; scroll-snap-type:x mandatory; scrollbar-width:none; overscroll-behavior-x:contain; padding-bottom:.2rem; }
.rail::-webkit-scrollbar{ display:none; }
.rail > *{ scroll-snap-align:start; }
.rail--5{ grid-auto-columns:calc((100% - 4 * 1rem) / 5); }
.rail-ctrl{ display:flex; gap:.5rem; }

/* Mreža proizvoda */
.grid{ display:grid; grid-template-columns:repeat(auto-fill, minmax(min(100%, 15.5rem), 1fr)); gap:1rem; }
.grid--5{ grid-template-columns:repeat(5, minmax(0,1fr)); }
.grid--4{ grid-template-columns:repeat(4, minmax(0,1fr)); }
.grid--3{ grid-template-columns:repeat(3, minmax(0,1fr)); }

/* ---------- Kartica proizvoda ---------- */
.pcard{ position:relative; display:flex; flex-direction:column; background:#fff; border:1px solid var(--line); border-radius:var(--r); overflow:hidden; transition:border-color .3s, transform .5s var(--ease); }
.pcard:hover{ border-color:var(--navy); transform:translateY(-.3rem); }
.pcard__media{ position:relative; display:block; aspect-ratio:4/5; background:var(--bg-2); overflow:hidden; }
.pcard__img{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; transition:opacity .6s var(--ease), transform 1.1s var(--ease); }
.pcard__img--alt{ opacity:0; }
.pcard:hover .pcard__img{ transform:scale(1.05); }
.pcard:hover .pcard__img--alt{ opacity:1; }
.pcard__tags{ position:absolute; top:.7rem; left:.7rem; display:flex; flex-wrap:wrap; gap:.3rem; z-index:2; }
.pcard__wish{ position:absolute; top:.6rem; right:.6rem; z-index:3; width:2.2rem; height:2.2rem; display:grid; place-items:center; border-radius:50%; background:#fff; color:var(--navy); border:1px solid var(--line); transition:transform .3s var(--spring), color .2s, border-color .2s; }
.pcard__wish:hover{ border-color:var(--navy); }
.pcard__wish.is-on{ color:var(--red); border-color:var(--red); }
.pcard__wish.pop .ms{ animation:heart .6s var(--spring); }
@keyframes heart{ 0%{ transform:scale(1); } 30%{ transform:scale(1.45); } 60%{ transform:scale(.9); } 100%{ transform:scale(1); } }
.pcard__soldout{ position:absolute; left:0; right:0; bottom:0; padding:.6rem; background:rgba(22,33,58,.88); color:#fff; text-align:center; font-weight:800; letter-spacing:.12em; text-transform:uppercase; font-size:.78rem; z-index:2; }
.pcard__body{ display:flex; flex-direction:column; gap:.45rem; padding:.85rem .85rem .9rem; flex:1; }
.pcard__meta{ display:flex; align-items:center; justify-content:space-between; gap:.5rem; min-height:1.1rem; }
.pcard__model{ font-size:max(10px, .63rem); font-weight:800; letter-spacing:.12em; text-transform:uppercase; color:var(--muted); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.swatches{ display:flex; align-items:center; gap:.25rem; flex:none; }
.swatch{ width:.9rem; height:.9rem; border-radius:50%; border:1px solid rgba(0,0,0,.18); background:var(--c, #ccc); }
.swatch.is-current{ outline:.12rem solid var(--navy); outline-offset:.1rem; }
.swatches__more{ font-size:.72rem; font-weight:700; color:var(--muted); }
.pcard__title{ font-size:.9rem; font-weight:700; line-height:1.3; color:var(--navy); display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden; min-height:2.6em; }
.pcard__title a:hover{ color:var(--orange-d); }
.pcard__sizes{ display:flex; flex-wrap:wrap; gap:.25rem; min-height:1.4rem; }
.size-mini{ min-width:1.7rem; height:1.4rem; padding:0 .3rem; border:1px solid var(--line-2); border-radius:var(--r-xs); font-size:max(10px, .68rem); font-weight:700; display:grid; place-items:center; color:var(--ink); }
.size-mini--more{ border-style:dashed; color:var(--muted); }
.grade{ display:flex; align-items:center; gap:.5rem; font-size:max(10px, .7rem); font-weight:700; color:var(--navy); }
.grade__bars{ display:flex; gap:.15rem; }
.grade__bars i{ width:.9rem; height:.3rem; border-radius:1rem; background:var(--line-2); }
.grade__bars i.on{ background:var(--teal); }
.pcard__foot{ display:flex; align-items:flex-end; justify-content:space-between; gap:.6rem; margin-top:auto; padding-top:.4rem; }
.price{ display:grid; line-height:1.05; }
.price strong{ font-family:var(--font-d); font-weight:800; font-size:1.3rem; color:var(--navy); white-space:nowrap; }
.price s{ font-size:.74rem; color:var(--muted); white-space:nowrap; }
.price--sale strong{ color:var(--red-d); }
.price--req strong{ font-size:1rem; color:var(--orange-d); }
.pcard__add{ position:relative; display:inline-flex; align-items:center; justify-content:center; gap:.4rem; height:2.35rem; min-width:2.35rem; padding:0 .75rem; border-radius:var(--r-sm); background:var(--navy); color:#fff; font-weight:700; font-size:max(10px, .7rem); letter-spacing:.05em; text-transform:uppercase; transition:background .25s, color .25s, transform .2s var(--ease); flex:none; overflow:hidden; }
.pcard__add:hover{ background:var(--orange); color:var(--navy); }
.pcard__add:active{ transform:scale(.94); }
.pcard__add.is-done{ background:var(--teal); color:#fff; }
.pcard__add--ask{ background:var(--orange); color:var(--navy); }
.pcard__add--ask:hover{ background:var(--navy); color:#fff; }
.pcard__picker{ position:absolute; left:0; right:0; bottom:0; z-index:4; background:#fff; border-top:.2rem solid var(--navy); padding:.9rem 1rem 1rem; transform:translateY(101%); transition:transform .5s var(--ease); }
.pcard.is-picking .pcard__picker{ transform:none; }
.pcard__picker-head{ display:flex; align-items:center; justify-content:space-between; margin-bottom:.6rem; font-weight:800; font-size:.82rem; letter-spacing:.08em; text-transform:uppercase; color:var(--navy); }
.pcard__picker-sizes{ display:grid; grid-template-columns:repeat(auto-fill, minmax(2.6rem,1fr)); gap:.35rem; }
.pcard__picker-sizes button{ height:2.2rem; border:1px solid var(--line-2); border-radius:var(--r-xs); font-weight:700; transition:background .2s, color .2s, border-color .2s; }
.pcard__picker-sizes button:hover{ background:var(--navy); color:#fff; border-color:var(--navy); }

/* Skeleton */
.sk{ background:var(--bg-2); border-radius:var(--r-sm); animation:skpulse 1.3s ease-in-out infinite; }
@keyframes skpulse{ 50%{ opacity:.5; } }
.pcard--sk .pcard__media{ animation:skpulse 1.3s ease-in-out infinite; }
.pcard--sk .sk-line{ height:.85rem; margin-bottom:.5rem; }

/* BH Pošta sekcija */
.bhp{ background:#fff; border-block:1px solid var(--line); overflow:hidden; }
.bhp__grid{ display:grid; grid-template-columns:minmax(0, .9fr) minmax(0, 1.4fr); }
.bhp__main{ position:relative; padding:clamp(2.2rem, 1.4rem + 2vw, 3.8rem) clamp(1.6rem, 1rem + 2vw, 3.4rem) clamp(2.2rem, 1.4rem + 2vw, 3.8rem) 0; display:flex; flex-direction:column; gap:1rem; }
.bhp__logo{ height:clamp(2.1rem, 1.6rem + 1vw, 3rem); width:auto; align-self:flex-start; }
.bhp__price{ display:flex; align-items:flex-end; gap:1rem; }
.bhp__price strong{ font-family:var(--font-d); font-weight:800; font-size:clamp(3.8rem, 2.6rem + 3.2vw, 6.4rem); line-height:.78; color:var(--bhp-blue); letter-spacing:-.02em; }
.bhp__price span{ font-family:var(--font-d); font-weight:800; font-size:clamp(1.05rem, .9rem + .4vw, 1.4rem); line-height:1; text-transform:uppercase; color:var(--navy); padding-bottom:.4em; }
.bhp__free{ display:inline-flex; align-items:center; gap:.6rem; align-self:flex-start; padding:.7rem 1rem; border:.125rem solid var(--bhp-yellow); border-radius:var(--r-sm); font-weight:700; color:var(--navy); }
.bhp__free .ms{ color:var(--teal-d); }
.bhp__cart{ display:grid; gap:.45rem; padding:1rem 1.1rem; background:var(--bg); border-radius:var(--r); font-size:.92rem; }
.bhp__cart[hidden]{ display:none; }
.progress{ height:.5rem; border-radius:1rem; background:var(--line); overflow:hidden; }
.progress span{ display:block; height:100%; background:var(--teal); border-radius:inherit; transform-origin:left; transform:scaleX(var(--p,0)); transition:transform 1s var(--ease); }
.bhp__steps{ position:relative; background:var(--bhp-blue); color:#fff; padding:clamp(2.2rem, 1.4rem + 2vw, 3.8rem) clamp(1.4rem, 1rem + 1.6vw, 3rem); display:flex; flex-direction:column; justify-content:center; gap:1.5rem; }
.bhp__steps::before{ content:""; position:absolute; top:0; bottom:0; left:100%; width:50vw; background:var(--bhp-blue); }
.bhp__steps h3{ font-family:var(--font-d); font-size:clamp(1.35rem, 1rem + .8vw, 2rem); font-weight:800; text-transform:uppercase; line-height:1; }
.route{ position:relative; display:grid; grid-template-columns:repeat(4,1fr); gap:1.1rem; padding-top:2.8rem; }
.route__line{ position:absolute; top:1.15rem; left:1.15rem; right:1.15rem; height:.2rem; background:rgba(255,255,255,.22); }
.route__line span{ position:absolute; inset:0; background:var(--bhp-yellow); transform-origin:left; transform:scaleX(0); transition:transform 2.2s var(--ease-io); }
.route.is-in .route__line span{ transform:scaleX(1); }
.route__truck{ position:absolute; top:.1rem; left:0; width:2.2rem; height:2.2rem; display:grid; place-items:center; background:var(--bhp-yellow); color:var(--bhp-blue); border-radius:50%; transform:translateX(0); transition:transform 2.2s var(--ease-io); }
.route.is-in .route__truck{ transform:translateX(var(--truck-x, 0)); }
.route__step{ display:grid; gap:.5rem; align-content:start; opacity:.4; transition:opacity .6s var(--ease); }
.route.is-in .route__step{ opacity:1; }
.route.is-in .route__step:nth-of-type(2){ transition-delay:.5s; } .route.is-in .route__step:nth-of-type(3){ transition-delay:1s; } .route.is-in .route__step:nth-of-type(4){ transition-delay:1.5s; }
.route__step .ms{ font-size:1.6rem; color:var(--bhp-yellow); }
.route__step strong{ font-size:.92rem; line-height:1.2; }
.route__step p{ font-size:.8rem; color:rgba(255,255,255,.78); }
.route__n{ font-family:var(--font-d); font-weight:800; font-size:.95rem; letter-spacing:.1em; color:rgba(255,255,255,.6); }

/* Polovni parovi */
.used{ display:grid; grid-template-columns:minmax(0,1fr) minmax(0, 2.4fr); gap:1rem; }
.used__panel{ display:flex; flex-direction:column; gap:.9rem; padding:1.4rem; background:var(--navy); color:#fff; border-radius:var(--r); }
.used__panel .h-sec{ color:#fff; }
.used__grades{ display:grid; gap:.7rem; margin-top:.4rem; }
.used__grades li{ display:grid; grid-template-columns:auto 1fr; gap:.2rem .8rem; align-items:center; padding:.75rem .9rem; border:1px solid rgba(255,255,255,.14); border-radius:var(--r-sm); }
.used__grades .grade{ color:#fff; }
.used__grades small{ grid-column:1/-1; color:rgba(255,255,255,.65); font-size:.82rem; }

/* Barefoot edukacija */
.why{ display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1.1fr); gap:clamp(1.6rem, 1rem + 2.4vw, 3.6rem); align-items:center; }
.why__media{ position:relative; border-radius:var(--r-lg); overflow:hidden; aspect-ratio:4/3.4; background:var(--bg-2); }
.why__media img{ width:100%; height:100%; object-fit:cover; transform:scale(1.08); transition:transform 1.6s var(--ease); }
.why__media.is-in img{ transform:scale(1); }
.why__badge{ position:absolute; left:1rem; bottom:1rem; right:1rem; display:flex; gap:.9rem; align-items:center; padding:.8rem 1rem; font-size:.86rem; background:#fff; border-radius:var(--r); }
.why__badge strong{ font-family:var(--font-d); font-size:1.9rem; font-weight:800; color:var(--orange-d); line-height:1; white-space:nowrap; }
.why__list{ display:grid; gap:0; margin-top:1.3rem; border-top:1px solid var(--line-2); }
.why__item{ display:grid; grid-template-columns:2.8rem 1fr; gap:1rem; padding:1rem 0; border-bottom:1px solid var(--line-2); }
.why__ico{ width:2.8rem; height:2.8rem; border-radius:var(--r); display:grid; place-items:center; background:var(--navy); color:var(--orange); transition:transform .5s var(--spring), background .3s; }
.why__item:hover .why__ico{ transform:rotate(-8deg) scale(1.06); background:var(--orange); color:var(--navy); }
.why__ico .ms{ font-size:1.5rem; }
.why__item h3{ font-size:.98rem; color:var(--navy); margin-bottom:.2rem; }
.why__item p{ color:var(--muted); font-size:.86rem; }

/* Vodič za veličine */
.sizeg{ background:var(--navy); color:#fff; }
.sizeg__grid{ display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1.25fr); gap:clamp(1.6rem, 1rem + 2.4vw, 3.6rem); align-items:center; }
.sizeg .h-sec{ color:#fff; }
.sizeg__steps{ display:grid; grid-template-columns:1fr 1fr; gap:1px; background:rgba(255,255,255,.14); border:1px solid rgba(255,255,255,.14); border-radius:var(--r); overflow:hidden; }
.sizeg__step{ padding:1.1rem; background:var(--navy); display:grid; gap:.6rem; align-content:start; transition:background .3s; }
.sizeg__step:hover{ background:var(--navy-2); }
.sizeg__step b{ font-family:var(--font-d); font-weight:800; font-size:1.8rem; line-height:1; color:var(--orange); }
.sizeg__step strong{ font-size:.94rem; }
.sizeg__step p{ font-size:.82rem; color:rgba(255,255,255,.72); }
.ruler{ position:relative; height:2.6rem; margin-top:1.3rem; border:1px solid rgba(255,255,255,.3); border-radius:var(--r-sm); overflow:hidden; }
.ruler__ticks{ position:absolute; inset:0; display:flex; align-items:flex-start; }
.ruler__ticks i{ flex:1; border-left:1px solid rgba(255,255,255,.35); height:35%; }
.ruler__ticks i:nth-child(5n+1){ height:60%; border-color:rgba(255,255,255,.7); }
.ruler__foot{ position:absolute; top:0; bottom:0; left:0; width:78%; background:var(--orange); transform-origin:left; transform:scaleX(0); transition:transform 1.8s var(--ease); display:flex; align-items:center; justify-content:flex-end; padding-right:.8rem; color:var(--navy); font-family:var(--font-d); font-weight:800; font-size:1.05rem; }
.ruler.is-in .ruler__foot{ transform:scaleX(1); }

/* Kontakt traka */
.cta-band{ background:var(--orange); color:var(--navy); }
.cta-band__in{ display:grid; grid-template-columns:minmax(0,1.2fr) auto; gap:2rem; align-items:center; padding-block:clamp(2rem, 1.3rem + 2vw, 3.4rem); }
.cta-band h2{ font-family:var(--font-d); font-weight:800; font-size:clamp(1.7rem, 1.1rem + 1.7vw, 3rem); line-height:.92; text-transform:uppercase; }
.cta-band p{ margin-top:.8rem; font-weight:600; }
.cta-band__btns{ display:flex; flex-wrap:wrap; gap:.7rem; justify-content:flex-end; }

/* ==========================================================================
   FOOTER
   ========================================================================== */
.footer{ background:var(--navy); color:rgba(255,255,255,.78); padding-top:clamp(2.4rem, 1.6rem + 2vw, 4rem); }
.footer__grid{ display:grid; grid-template-columns:1.5fr 1fr 1fr 1.2fr; gap:clamp(2rem, 1rem + 3vw, 4rem); padding-bottom:3rem; }
.footer__logo img{ height:2.3rem; width:auto; margin-bottom:1.2rem; }
.footer p{ font-size:.86rem; max-width:26em; }
.footer h4{ font-family:var(--font-d); font-weight:800; font-size:1.05rem; text-transform:uppercase; color:#fff; margin-bottom:1rem; letter-spacing:.02em; }
.footer li{ margin-bottom:.5rem; font-size:.88rem; }
.footer a{ transition:color .2s; }
.footer a:hover{ color:var(--orange); }
.footer__contact li{ display:flex; gap:.6rem; align-items:flex-start; }
.footer__contact .ms{ color:var(--orange); }
.footer__social{ display:flex; gap:.5rem; margin-top:1.4rem; flex-wrap:wrap; }
.footer__badges{ display:grid; grid-template-columns:repeat(3,1fr); border-top:1px solid rgba(255,255,255,.12); border-bottom:1px solid rgba(255,255,255,.12); }
.fbadge{ display:flex; align-items:center; gap:.9rem; padding:1.05rem 1.3rem; font-size:.9rem; border-right:1px solid rgba(255,255,255,.12); }
.fbadge:first-child{ padding-left:0; } .fbadge:last-child{ border-right:0; }
.fbadge .ms{ font-size:1.6rem; color:var(--orange); }
.fbadge__bhp{ background:#fff; border-radius:var(--r-sm); padding:.45rem .6rem; }
.fbadge__bhp img{ height:1.35rem; width:auto; }
.fbadge strong{ display:block; color:#fff; }
.fbadge small{ font-size:.85rem; }
.footer__bottom{ display:flex; justify-content:space-between; gap:1rem; flex-wrap:wrap; padding-block:1.1rem; font-size:.78rem; }
.footer__bottom nav{ display:flex; gap:1.2rem; flex-wrap:wrap; }

/* ==========================================================================
   STRANICE — zajedničko zaglavlje
   ========================================================================== */
.phead{ background:var(--navy); color:#fff; padding-block:clamp(1.5rem, 1rem + 1.6vw, 2.8rem) clamp(1.4rem, .9rem + 1.4vw, 2.4rem); position:relative; overflow:hidden; }
.phead__deco{ position:absolute; right:-2rem; bottom:-3.5rem; font-family:var(--font-d); font-weight:800; font-style:italic; font-size:clamp(5rem, 3rem + 6vw, 11rem); line-height:1; color:rgba(255,255,255,.05); text-transform:uppercase; white-space:nowrap; pointer-events:none; }
.crumbs{ display:flex; flex-wrap:wrap; align-items:center; gap:.35rem; font-size:.78rem; color:rgba(255,255,255,.65); margin-bottom:.7rem; }
.crumbs a:hover{ color:#fff; }
.crumbs .ms{ font-size:1rem; }
.phead h1{ font-family:var(--font-d); font-weight:800; text-transform:uppercase; font-size:clamp(1.8rem, 1.1rem + 2vw, 3.2rem); line-height:.92; }
.phead p{ margin-top:.6rem; font-size:.92rem; color:rgba(255,255,255,.75); max-width:40em; }

/* ==========================================================================
   SHOP
   ========================================================================== */
.shop-head__row{ display:flex; align-items:flex-end; justify-content:space-between; gap:2rem; flex-wrap:wrap; }
.shop-head__count{ font-family:var(--font-d); font-size:1.1rem; font-weight:700; color:var(--orange); }
.catbar{ display:flex; gap:.5rem; overflow-x:auto; scrollbar-width:none; margin-top:1.2rem; padding-bottom:.2rem; }
.catbar::-webkit-scrollbar{ display:none; }
.catbar .chip{ background:transparent; color:#fff; border-color:rgba(255,255,255,.3); height:2.15rem; }
.catbar .chip:hover{ border-color:#fff; }
.catbar .chip.is-active{ background:var(--orange); color:var(--navy); border-color:var(--orange); }

.shop{ display:grid; grid-template-columns:15.5rem minmax(0,1fr); gap:1.5rem; align-items:start; padding-block:1.5rem 4rem; }
.filters{ position:sticky; top:calc(var(--header-h) - 2rem); max-height:calc(100vh - var(--header-h) + 1rem); overflow:auto; scrollbar-width:thin; background:#fff; border:1px solid var(--line); border-radius:var(--r); }
.filters__head{ display:flex; align-items:center; justify-content:space-between; padding:1rem 1.2rem; border-bottom:1px solid var(--line); }
.filters__head h2{ font-family:var(--font-d); font-weight:800; font-size:1.15rem; text-transform:uppercase; color:var(--navy); display:flex; align-items:center; gap:.4rem; }
.filters__reset{ font-size:.82rem; font-weight:700; color:var(--orange-d); text-decoration:underline; text-underline-offset:.2em; }
.fgroup{ border-bottom:1px solid var(--line); }
.fgroup:last-child{ border-bottom:0; }
.fgroup summary{ list-style:none; display:flex; align-items:center; justify-content:space-between; padding:.85rem 1.1rem; cursor:pointer; font-weight:800; font-size:max(10.5px, .72rem); letter-spacing:.1em; text-transform:uppercase; color:var(--navy); }
.fgroup summary::-webkit-details-marker{ display:none; }
.fgroup summary .ms{ transition:transform .35s var(--ease); }
.fgroup[open] summary .ms{ transform:rotate(180deg); }
.fgroup__body{ padding:0 1.1rem 1.1rem; display:grid; gap:.55rem; }
.fopt{ display:flex; align-items:center; justify-content:space-between; gap:.6rem; }
.fopt .check{ font-size:.86rem; }
.fopt__count{ font-size:.75rem; font-weight:700; color:var(--muted); }
.sizes-grid{ display:grid; grid-template-columns:repeat(4,1fr); gap:.35rem; }
.size-opt{ height:2.2rem; border:1px solid var(--line-2); border-radius:var(--r-xs); font-weight:700; font-size:.82rem; transition:background .2s, color .2s, border-color .2s; }
.size-opt:hover{ border-color:var(--navy); }
.size-opt.is-active{ background:var(--navy); color:#fff; border-color:var(--navy); }
.colors-grid{ display:flex; flex-wrap:wrap; gap:.5rem; }
.color-opt{ width:1.75rem; height:1.75rem; border-radius:50%; background:var(--c); border:1px solid rgba(0,0,0,.18); position:relative; transition:transform .25s var(--spring); }
.color-opt:hover{ transform:scale(1.12); }
.color-opt.is-active{ outline:.15rem solid var(--navy); outline-offset:.15rem; }
.price-range{ display:grid; gap:.8rem; }
.price-range__inputs{ display:grid; grid-template-columns:1fr auto 1fr; gap:.4rem; align-items:center; }
.price-range__inputs .input{ min-height:2.6rem; padding:.4rem .6rem; font-size:.92rem; }
.dual{ position:relative; height:1.6rem; }
.dual__track{ position:absolute; top:50%; left:0; right:0; height:.3rem; margin-top:-.15rem; background:var(--line); border-radius:1rem; }
.dual__fill{ position:absolute; top:50%; height:.3rem; margin-top:-.15rem; background:var(--navy); border-radius:1rem; }
.dual input{ position:absolute; inset:0; width:100%; appearance:none; background:none; pointer-events:none; margin:0; }
.dual input::-webkit-slider-thumb{ appearance:none; pointer-events:auto; width:1.35rem; height:1.35rem; border-radius:50%; background:#fff; border:.2rem solid var(--navy); cursor:grab; }
.dual input::-moz-range-thumb{ pointer-events:auto; width:1.1rem; height:1.1rem; border-radius:50%; background:#fff; border:.2rem solid var(--navy); cursor:grab; }
.toolbar{ display:flex; align-items:center; justify-content:space-between; gap:1rem; flex-wrap:wrap; margin-bottom:1rem; }
.toolbar__l{ display:flex; align-items:center; gap:.6rem; flex-wrap:wrap; }
.toolbar__count{ font-weight:700; color:var(--navy); }
.toolbar__r{ display:flex; align-items:center; gap:.6rem; }
.toolbar select.input{ min-height:2.45rem; width:auto; font-weight:600; font-size:.92rem; }
.density{ display:flex; border:1px solid var(--line-2); border-radius:var(--r-sm); overflow:hidden; background:#fff; }
.density button{ width:2.4rem; height:2.35rem; display:grid; place-items:center; color:var(--muted); transition:background .2s, color .2s; }
.density button.is-active{ background:var(--navy); color:#fff; }
.fbtn{ display:none; }
.active-chips{ display:flex; flex-wrap:wrap; gap:.4rem; margin-bottom:1rem; }
.active-chips:empty{ display:none; }
.active-chips .chip{ background:var(--navy); color:#fff; border-color:var(--navy); padding-right:.4rem; }
.active-chips .chip .ms{ font-size:1.1rem; }
.loadmore{ display:grid; justify-items:center; gap:.8rem; margin-top:2.5rem; }
.loadmore__bar{ width:14rem; }
.empty{ display:grid; justify-items:center; text-align:center; gap:.8rem; padding:3rem 1.5rem; background:#fff; border:1px dashed var(--line-2); border-radius:var(--r); grid-column:1/-1; }
.empty .ms{ font-size:2.8rem; color:var(--orange); }
.empty h3{ font-family:var(--font-d); font-weight:800; font-size:1.6rem; text-transform:uppercase; color:var(--navy); }
.empty p{ color:var(--muted); max-width:30em; }

/* grid animacija pri filtriranju */
.grid > .pcard{ animation:cardIn .55s var(--ease) both; animation-delay:calc(min(var(--i, 0), 12) * 35ms); }
@keyframes cardIn{ from{ opacity:0; transform:translateY(1rem) scale(.98); } to{ opacity:1; transform:none; } }

/* ==========================================================================
   PROIZVOD
   ========================================================================== */
.pd{ display:grid; grid-template-columns:minmax(0,1.05fr) minmax(0,1fr); gap:clamp(1.2rem, .8rem + 2.2vw, 3.4rem); padding-block:1.4rem 3rem; align-items:start; }
.pd-crumbs{ padding-top:1.1rem; display:flex; flex-wrap:wrap; align-items:center; gap:.35rem; font-size:.78rem; color:var(--muted); }
.pd-crumbs a:hover{ color:var(--navy); }
.pd-crumbs .ms{ font-size:1rem; }
.gallery{ position:sticky; top:calc(var(--header-h) - 1.4rem); display:grid; grid-template-columns:4.4rem minmax(0,1fr); gap:.7rem; }
.gallery--single{ grid-template-columns:minmax(0,1fr); }
.gallery__thumbs{ display:grid; gap:.5rem; align-content:start; max-height:calc(100svh - var(--header-h) - 3rem); overflow:auto; scrollbar-width:none; }
.gallery__thumb{ aspect-ratio:4/5; border-radius:var(--r-sm); overflow:hidden; border:.125rem solid transparent; background:var(--bg-2); opacity:.62; transition:opacity .3s, border-color .3s; }
.gallery__thumb img{ width:100%; height:100%; object-fit:cover; }
.gallery__thumb:hover{ opacity:1; }
.gallery__thumb.is-active{ border-color:var(--navy); opacity:1; }
.gallery__main{ position:relative; border-radius:var(--r-lg); overflow:hidden; background:var(--bg-2); aspect-ratio:1/1; max-height:calc(100svh - var(--header-h) - 3rem); cursor:zoom-in; }
.gallery__track{ display:flex; height:100%; overflow-x:auto; scroll-snap-type:x mandatory; scrollbar-width:none; }
.gallery__track::-webkit-scrollbar{ display:none; }
.gallery__slide{ flex:0 0 100%; height:100%; scroll-snap-align:center; overflow:hidden; }
.gallery__slide img{ width:100%; height:100%; object-fit:cover; transition:transform .25s ease-out; transform-origin:var(--zx,50%) var(--zy,50%); }
.gallery__main.is-zoom .gallery__slide img{ transform:scale(2.1); transition:transform .35s var(--ease); }
.gallery__tags{ position:absolute; top:1rem; left:1rem; display:flex; gap:.35rem; z-index:2; pointer-events:none; }
.gallery__count{ position:absolute; bottom:1rem; left:1rem; z-index:2; padding:.3rem .7rem; background:rgba(22,33,58,.85); color:#fff; border-radius:2rem; font-size:.8rem; font-weight:700; pointer-events:none; }
.gallery__expand{ position:absolute; bottom:1rem; right:1rem; z-index:2; background:#fff; }
.gallery__dots{ display:none; }

.pinfo{ display:grid; gap:1.05rem; align-content:start; }
.pinfo__tags{ display:flex; flex-wrap:wrap; gap:.4rem; align-items:center; }
.stock{ display:inline-flex; align-items:center; gap:.5rem; font-size:.85rem; font-weight:700; color:var(--teal-d); }
.stock--off{ color:var(--muted); }
.pinfo__model{ font-size:max(10.5px, .7rem); font-weight:800; letter-spacing:.16em; text-transform:uppercase; color:var(--orange-d); }
.pinfo h1{ font-family:var(--font-d); font-weight:800; text-transform:uppercase; font-size:clamp(1.6rem, 1.1rem + 1.2vw, 2.5rem); line-height:.95; color:var(--navy); margin-top:.25rem; }
.pinfo__sub{ display:flex; flex-wrap:wrap; gap:.4rem 1rem; font-size:.8rem; color:var(--muted); margin-top:.5rem; }
.pinfo__sub span{ display:inline-flex; align-items:center; gap:.3rem; }
.pprice{ display:flex; align-items:center; flex-wrap:wrap; gap:.5rem .9rem; padding:.85rem 0; border-block:1px solid var(--line); }
.pprice strong{ font-family:var(--font-d); font-weight:800; font-size:clamp(1.9rem, 1.4rem + 1vw, 2.6rem); line-height:1; color:var(--navy); }
.pprice--sale strong{ color:var(--red-d); }
.pprice s{ font-size:.95rem; color:var(--muted); }
.pprice__save{ display:inline-flex; align-items:center; gap:.3rem; padding:.35rem .7rem; background:#ffeceb; color:var(--red-d); font-weight:800; border-radius:var(--r-xs); font-size:.88rem; }
.pprice__req{ display:grid; gap:.2rem; }
.pprice__req strong{ font-size:1.8rem; color:var(--orange-d); }
.opt-label{ display:flex; align-items:center; justify-content:space-between; gap:1rem; margin-bottom:.55rem; font-size:max(10.5px, .72rem); font-weight:800; letter-spacing:.1em; text-transform:uppercase; color:var(--navy); }
.opt-label b{ font-weight:600; letter-spacing:0; text-transform:none; color:var(--ink); font-size:.86rem; }
.opt-label button,.opt-label a{ font-size:.76rem; font-weight:700; letter-spacing:0; text-transform:none; color:var(--orange-d); text-decoration:underline; text-underline-offset:.2em; display:inline-flex; align-items:center; gap:.25rem; }
.variants{ display:flex; flex-wrap:wrap; gap:.5rem; }
.variant{ position:relative; width:3.7rem; border-radius:var(--r-sm); overflow:hidden; border:.125rem solid var(--line); background:var(--bg-2); transition:border-color .25s, transform .3s var(--ease); }
.variant:hover{ border-color:var(--muted); transform:translateY(-.15rem); }
.variant.is-current{ border-color:var(--navy); }
.variant img{ width:100%; aspect-ratio:1; object-fit:cover; }
.variant__dot{ position:absolute; left:.3rem; bottom:.3rem; width:.9rem; height:.9rem; border-radius:50%; background:var(--c); border:.125rem solid #fff; }
.variant.is-out img{ opacity:.45; }
.psizes{ display:grid; grid-template-columns:repeat(auto-fill, minmax(2.9rem, 1fr)); gap:.4rem; }
.psize{ height:2.6rem; border:1px solid var(--line-2); border-radius:var(--r-sm); background:#fff; font-weight:700; font-size:.9rem; transition:background .2s, color .2s, border-color .2s, transform .2s var(--ease); }
.psize:hover{ border-color:var(--navy); }
.psize:active{ transform:scale(.94); }
.psize.is-active{ background:var(--navy); color:#fff; border-color:var(--navy); }
.psizes.shake{ animation:shake .45s var(--ease); }
@keyframes shake{ 20%,60%{ transform:translateX(-.4rem); } 40%,80%{ transform:translateX(.4rem); } }
.psize-note{ font-size:.78rem; color:var(--muted); margin-top:.6rem; display:flex; gap:.4rem; align-items:flex-start; }
.condition{ display:grid; gap:.6rem; padding:1rem 1.1rem; border:1px solid var(--line); border-left:.3rem solid var(--teal); border-radius:var(--r-sm); background:#fff; }
.condition .grade{ font-size:.95rem; }
.condition .grade__bars i{ width:1.6rem; height:.4rem; }
.condition p{ font-size:.92rem; color:var(--muted); }
.buy{ display:grid; grid-template-columns:auto minmax(0,1fr) auto; gap:.6rem; }
.qty{ display:flex; align-items:center; border:1px solid var(--line-2); border-radius:var(--r-sm); background:#fff; height:3.1rem; }
.qty button{ width:2.8rem; height:100%; display:grid; place-items:center; color:var(--navy); }
.qty button:disabled{ opacity:.3; }
.qty output{ min-width:2rem; text-align:center; font-weight:800; font-size:1.1rem; }
.buy .btn{ min-height:3.1rem; }
.wish-btn{ width:3.1rem; height:3.1rem; display:grid; place-items:center; border:1px solid var(--line-2); border-radius:var(--r-sm); background:#fff; color:var(--navy); transition:border-color .2s, color .2s; }
.wish-btn:hover{ border-color:var(--navy); }
.wish-btn.is-on{ color:var(--red); border-color:var(--red); }
.wish-btn.pop .ms{ animation:heart .6s var(--spring); }
.order-msg{ display:grid; grid-template-columns:auto 1fr 1fr; gap:.6rem; align-items:center; }
.order-msg span{ font-size:.78rem; font-weight:600; color:var(--muted); }
.order-msg .btn{ min-height:2.5rem; font-size:max(10px, .7rem); padding:0 .7rem; }
.pship{ display:grid; border:1px solid var(--line); border-radius:var(--r); background:#fff; overflow:hidden; }
.pship__row{ display:grid; grid-template-columns:auto 1fr; gap:.8rem; align-items:center; padding:.75rem 1rem; border-bottom:1px solid var(--line); font-size:.9rem; }
.pship__row:last-child{ border-bottom:0; }
.pship__row .ms{ font-size:1.45rem; color:var(--navy); }
.pship__bhp{ width:4rem; }
.pship__row strong{ display:block; color:var(--navy); line-height:1.25; }
.pship__row small{ color:var(--muted); font-size:.78rem; }
.pship .progress{ margin-top:.45rem; }
.acc{ border-top:1px solid var(--line); }
.acc__item{ border-bottom:1px solid var(--line); }
.acc__btn{ width:100%; display:flex; align-items:center; justify-content:space-between; gap:1rem; padding:.85rem 0; font-weight:800; font-size:.8rem; letter-spacing:.06em; text-transform:uppercase; color:var(--navy); text-align:left; }
.acc__btn .ms{ transition:transform .4s var(--ease); }
.acc__item.is-open .acc__btn .ms{ transform:rotate(45deg); }
.acc__panel{ display:grid; grid-template-rows:0fr; transition:grid-template-rows .5s var(--ease); }
.acc__item.is-open .acc__panel{ grid-template-rows:1fr; }
.acc__inner{ overflow:hidden; }
.acc__content{ padding-bottom:1rem; color:var(--ink); display:grid; gap:.7rem; font-size:.9rem; }
.feat-list{ display:grid; gap:.5rem; }
.feat-list li{ display:flex; gap:.6rem; align-items:flex-start; }
.feat-list .ms{ color:var(--teal-d); font-size:1.2rem; margin-top:.1rem; }
.spec{ width:100%; border-collapse:collapse; font-size:.95rem; }
.spec th,.spec td{ text-align:left; padding:.6rem 0; border-bottom:1px solid var(--line); vertical-align:top; }
.spec th{ width:42%; color:var(--muted); font-weight:600; }
.spec td{ font-weight:600; color:var(--navy); }
.share-row{ display:flex; gap:.5rem; align-items:center; font-size:.85rem; color:var(--muted); }
.inq{ display:grid; gap:.8rem; padding:1.3rem; background:#fff; border:1px solid var(--line); border-radius:var(--r); }
.inq h3{ font-family:var(--font-d); font-weight:800; font-size:1.25rem; text-transform:uppercase; color:var(--navy); }
.inq__row{ display:grid; grid-template-columns:1fr 1fr; gap:.7rem; }

.buybar{ position:fixed; left:0; right:0; bottom:var(--tabbar-h); z-index:45; display:none; align-items:center; gap:.8rem; padding:.7rem var(--gutter); background:#fff; border-top:1px solid var(--line-2); transform:translateY(110%); transition:transform .45s var(--ease); }
.buybar.is-visible{ transform:none; }
.buybar__price{ display:grid; line-height:1.1; }
.buybar__price strong{ font-family:var(--font-d); font-size:1.3rem; font-weight:800; color:var(--navy); }
.buybar__price small{ font-size:.75rem; color:var(--muted); font-weight:600; }
.buybar .btn{ flex:1; min-height:3rem; }

/* ==========================================================================
   KORPA
   ========================================================================== */
.steps{ display:flex; align-items:center; gap:.6rem; margin-top:1.4rem; flex-wrap:wrap; }
.steps__item{ display:flex; align-items:center; gap:.5rem; font-weight:700; font-size:.8rem; color:rgba(255,255,255,.55); }
.steps__item b{ width:1.8rem; height:1.8rem; display:grid; place-items:center; border-radius:50%; border:1px solid currentColor; font-size:.8rem; }
.steps__item.is-current{ color:#fff; } .steps__item.is-current b{ background:var(--orange); border-color:var(--orange); color:var(--navy); }
.steps__item.is-done{ color:#fff; } .steps__item.is-done b{ background:var(--teal); border-color:var(--teal); }
.steps__sep{ width:2.2rem; height:1px; background:rgba(255,255,255,.3); }
.cart{ display:grid; grid-template-columns:minmax(0,1fr) minmax(19rem, 25rem); gap:1.5rem; align-items:start; padding-block:1.5rem 4rem; }
.card{ background:#fff; border:1px solid var(--line); border-radius:var(--r); }
.card__head{ display:flex; align-items:center; justify-content:space-between; gap:1rem; padding:.85rem 1.1rem; border-bottom:1px solid var(--line); }
.card__head h2{ font-family:var(--font-d); font-weight:800; font-size:1.2rem; text-transform:uppercase; color:var(--navy); display:flex; align-items:center; gap:.5rem; }
.card__body{ padding:1.1rem; }
.citem{ display:grid; grid-template-columns:5rem minmax(0,1fr) auto; gap:.9rem; padding:.9rem 1.1rem; border-bottom:1px solid var(--line); align-items:center; transition:opacity .4s var(--ease), transform .4s var(--ease); }
.citem:last-child{ border-bottom:0; }
.citem.is-removing{ opacity:0; transform:translateX(2rem); }
.citem__img{ aspect-ratio:4/5; border-radius:var(--r-sm); overflow:hidden; background:var(--bg-2); }
.citem__img img{ width:100%; height:100%; object-fit:cover; }
.citem__name{ font-weight:700; color:var(--navy); line-height:1.3; }
.citem__name:hover{ color:var(--orange-d); }
.citem__meta{ display:flex; flex-wrap:wrap; gap:.3rem .8rem; font-size:.85rem; color:var(--muted); margin-top:.3rem; }
.citem__meta b{ color:var(--ink); }
.citem__issue{ display:flex; align-items:center; gap:.35rem; margin-top:.4rem; font-size:.85rem; font-weight:700; color:var(--red-d); }
.citem__ctrl{ display:flex; align-items:center; gap:.8rem; margin-top:.7rem; }
.citem__ctrl .qty{ height:2.5rem; }
.citem__ctrl .qty button{ width:2.2rem; }
.citem__rm{ display:inline-flex; align-items:center; gap:.25rem; font-size:.82rem; font-weight:700; color:var(--muted); transition:color .2s; }
.citem__rm:hover{ color:var(--red-d); }
.citem__total{ font-family:var(--font-d); font-size:1.25rem; font-weight:800; color:var(--navy); white-space:nowrap; align-self:start; }
.summary{ position:sticky; top:calc(var(--header-h) - 1.4rem); }
.sum-row{ display:flex; justify-content:space-between; gap:1rem; padding:.4rem 0; font-size:.9rem; }
.sum-row span:first-child{ color:var(--muted); display:inline-flex; align-items:center; gap:.4rem; }
.sum-row img{ height:1.1rem; width:auto; }
.sum-row--disc{ color:var(--teal-d); font-weight:700; }
.sum-row--disc span:first-child{ color:var(--teal-d); }
.sum-total{ display:flex; justify-content:space-between; align-items:baseline; margin-top:.6rem; padding-top:1rem; border-top:.125rem solid var(--navy); }
.sum-total span{ font-weight:800; text-transform:uppercase; letter-spacing:.08em; color:var(--navy); }
.sum-total strong{ font-family:var(--font-d); font-weight:800; font-size:2rem; line-height:1; color:var(--navy); }
.freeship{ display:grid; gap:.5rem; padding:1rem; margin:1rem 0; background:var(--bg); border-radius:var(--r-sm); font-size:.9rem; }
.freeship strong{ color:var(--navy); }
.coupon{ display:flex; gap:.5rem; margin-top:1rem; }
.coupon .input{ min-height:2.9rem; text-transform:uppercase; }
.coupon .btn{ min-height:2.9rem; }
.coupon-on{ display:flex; align-items:center; justify-content:space-between; gap:.5rem; margin-top:1rem; padding:.7rem .9rem; border:1px dashed var(--teal); border-radius:var(--r-sm); color:var(--teal-d); font-weight:700; }
.form-grid{ display:grid; grid-template-columns:1fr 1fr; gap:1rem; }
.form-grid .full{ grid-column:1/-1; }
.checkout-note{ display:flex; gap:.7rem; padding:1rem; background:var(--bg); border-radius:var(--r-sm); font-size:.9rem; color:var(--muted); }
.checkout-note .ms{ color:var(--teal-d); }
.form-msg{ font-weight:700; color:var(--red-d); font-size:.92rem; }
.form-msg:empty{ display:none; }
.success{ display:grid; justify-items:center; text-align:center; gap:1.2rem; padding:3rem 1.5rem 4rem; }
.success__check{ width:4.6rem; height:4.6rem; }
.success__check circle{ fill:none; stroke:var(--teal); stroke-width:3; stroke-dasharray:166; stroke-dashoffset:166; animation:draw .9s var(--ease) forwards; }
.success__check path{ fill:none; stroke:var(--teal); stroke-width:4; stroke-linecap:round; stroke-linejoin:round; stroke-dasharray:48; stroke-dashoffset:48; animation:draw .6s var(--ease) .7s forwards; }
@keyframes draw{ to{ stroke-dashoffset:0; } }
.success h2{ font-family:var(--font-d); font-weight:800; font-size:clamp(1.9rem, 1.4rem + 1.2vw, 2.8rem); text-transform:uppercase; line-height:.95; color:var(--navy); }
.success__no{ font-family:var(--font-d); font-weight:800; font-size:1.2rem; color:var(--orange-d); }
.success__box{ width:min(100%, 40rem); text-align:left; }
.timeline{ display:grid; grid-template-columns:repeat(3,1fr); gap:1px; background:var(--line); border:1px solid var(--line); border-radius:var(--r); overflow:hidden; width:min(100%, 50rem); }
.timeline li{ background:#fff; padding:1.2rem; display:grid; gap:.4rem; text-align:left; }
.timeline .ms{ font-size:1.8rem; color:var(--orange-d); }
.timeline strong{ color:var(--navy); }
.timeline small{ color:var(--muted); }

/* ==========================================================================
   KONTAKT / INFO / 404
   ========================================================================== */
.contact{ display:grid; grid-template-columns:minmax(0,1.1fr) minmax(0,1fr); gap:1.5rem; padding-block:2rem 4rem; align-items:start; }
.ctiles{ display:grid; grid-template-columns:1fr 1fr; gap:1rem; }
.ctile{ display:grid; gap:.5rem; align-content:start; padding:1.15rem; background:#fff; border:1px solid var(--line); border-radius:var(--r); transition:border-color .25s, transform .4s var(--ease); }
.ctile:hover{ border-color:var(--navy); transform:translateY(-.25rem); }
.ctile__ico{ width:2.6rem; height:2.6rem; border-radius:var(--r-sm); display:grid; place-items:center; background:var(--navy); color:#fff; }
.ctile__ico .ms{ font-size:1.7rem; }
.ctile__ico--viber{ background:#7360f2; } .ctile__ico--wa{ background:#25d366; } .ctile__ico--mail{ background:var(--orange); color:var(--navy); }
.ctile small{ font-size:.78rem; font-weight:800; letter-spacing:.1em; text-transform:uppercase; color:var(--muted); }
.ctile strong{ font-size:1rem; color:var(--navy); }
.cinfo{ grid-column:1/-1; display:grid; grid-template-columns:1fr 1fr; gap:0; overflow:hidden; }
.cinfo__list{ padding:1.4rem; display:grid; gap:1rem; align-content:start; }
.cinfo__list li{ display:flex; gap:.8rem; }
.cinfo__list .ms{ color:var(--orange-d); }
.cinfo__list strong{ display:block; color:var(--navy); }
.map{ min-height:18rem; background:var(--bg-2); }
.map iframe{ width:100%; height:100%; min-height:18rem; border:0; display:block; filter:grayscale(.2); }
.faq{ margin-top:2rem; }
.info{ display:grid; grid-template-columns:17rem minmax(0,1fr); gap:2rem; padding-block:2rem 4rem; align-items:start; }
.info-nav{ position:sticky; top:calc(var(--header-h) - 1rem); display:grid; background:#fff; border:1px solid var(--line); border-radius:var(--r); overflow:hidden; }
.info-nav__link{ padding:.85rem 1.1rem; border-bottom:1px solid var(--line); font-weight:600; transition:background .2s, color .2s; }
.info-nav__link:last-child{ border-bottom:0; }
.info-nav__link:hover{ background:var(--bg); }
.info-nav__link.is-current{ background:var(--navy); color:#fff; }
.prose{ background:#fff; border:1px solid var(--line); border-radius:var(--r); padding:clamp(1.5rem, 1rem + 2vw, 3rem); max-width:56rem; }
.prose h2{ font-family:var(--font-d); font-weight:800; text-transform:uppercase; font-size:1.4rem; color:var(--navy); margin:2rem 0 .7rem; line-height:1; }
.prose h2:first-child{ margin-top:0; }
.prose p,.prose li{ color:var(--ink); margin-bottom:.8rem; }
.prose ul{ list-style:disc; padding-left:1.3rem; margin-bottom:1rem; }
.prose ol{ list-style:decimal; padding-left:1.3rem; margin-bottom:1rem; }
.prose a{ color:var(--orange-d); text-decoration:underline; text-underline-offset:.15em; }
.prose .callout{ display:flex; gap:1rem; align-items:center; padding:1.1rem 1.2rem; margin:1.2rem 0; border:1px solid var(--line); border-left:.35rem solid var(--bhp-yellow); border-radius:var(--r-sm); background:var(--bg); }
.prose .callout img{ height:2rem; width:auto; }
.nf{ display:grid; justify-items:center; text-align:center; gap:1.2rem; padding-block:4rem 3rem; }
.nf__code{ font-family:var(--font-d); font-weight:800; font-style:italic; font-size:clamp(5rem, 3.4rem + 6vw, 10rem); line-height:.8; color:var(--navy); }
.nf__code span{ color:var(--orange); }
.nf .search{ width:min(100%, 34rem); }

/* ==========================================================================
   DRAWER (mini korpa), MODAL, LIGHTBOX, TOAST
   ========================================================================== */
.scrim{ position:fixed; inset:0; z-index:80; background:rgba(22,33,58,.5); opacity:0; pointer-events:none; transition:opacity .45s var(--ease); }
.scrim.is-open{ opacity:1; pointer-events:auto; }
.drawer{ position:fixed; top:0; right:0; bottom:0; z-index:90; width:min(100%, 25rem); background:#fff; display:flex; flex-direction:column; transform:translateX(102%); transition:transform .6s var(--ease); visibility:hidden; }
.drawer.is-open{ transform:none; visibility:visible; }
.drawer__head{ display:flex; align-items:center; justify-content:space-between; padding:1.1rem 1.3rem; border-bottom:1px solid var(--line); }
.drawer__head h2{ font-family:var(--font-d); font-weight:800; font-size:1.3rem; text-transform:uppercase; color:var(--navy); display:flex; align-items:center; gap:.5rem; }
.drawer__head h2 .ms{ color:var(--teal); }
.drawer__body{ flex:1; overflow:auto; }
.drawer__foot{ padding:1.1rem 1.3rem 1.3rem; border-top:1px solid var(--line); display:grid; gap:.7rem; }
.mini{ display:grid; grid-template-columns:4.2rem 1fr auto; gap:.9rem; padding:1rem 1.3rem; border-bottom:1px solid var(--line); align-items:center; }
.mini.is-new{ background:#f1fbfa; }
.mini img{ width:4.2rem; aspect-ratio:4/5; object-fit:cover; border-radius:var(--r-xs); background:var(--bg-2); }
.mini strong{ display:block; font-size:.95rem; color:var(--navy); line-height:1.25; }
.mini small{ color:var(--muted); font-size:.82rem; }
.mini__price{ font-weight:800; color:var(--navy); white-space:nowrap; }
.drawer .freeship{ margin:0; }

.modal{ position:fixed; inset:0; z-index:95; display:grid; place-items:center; padding:1rem; visibility:hidden; pointer-events:none; }
.modal.is-open{ visibility:visible; pointer-events:auto; }
.modal__box{ position:relative; width:min(100%, 36rem); max-height:calc(100svh - 2rem); overflow:auto; background:#fff; border-radius:var(--r-lg); padding:clamp(1.3rem, 1rem + 1.5vw, 2.2rem); opacity:0; transform:translateY(1.5rem) scale(.97); transition:opacity .4s var(--ease), transform .5s var(--ease); }
.modal.is-open .modal__box{ opacity:1; transform:none; }
.modal__close{ position:absolute; top:.8rem; right:.8rem; }
.modal h2{ font-family:var(--font-d); font-weight:800; font-size:1.6rem; text-transform:uppercase; color:var(--navy); margin-bottom:.6rem; line-height:1; padding-right:3rem; }

.lightbox{ position:fixed; inset:0; z-index:100; background:var(--navy); display:grid; grid-template-rows:auto 1fr auto; opacity:0; visibility:hidden; transition:opacity .35s var(--ease), visibility 0s .35s; }
.lightbox.is-open{ opacity:1; visibility:visible; transition:opacity .35s var(--ease); }
.lightbox__bar{ display:flex; align-items:center; justify-content:space-between; padding:.9rem 1.2rem; color:#fff; font-weight:700; }
.lightbox__bar .icon-btn{ background:transparent; color:#fff; border-color:rgba(255,255,255,.3); }
.lightbox__stage{ position:relative; overflow:hidden; display:flex; touch-action:pan-y; }
.lightbox__track{ display:flex; width:100%; height:100%; transition:transform .55s var(--ease); }
.lightbox__slide{ flex:0 0 100%; display:grid; place-items:center; padding:0 1rem; }
.lightbox__slide img{ max-width:100%; max-height:100%; object-fit:contain; border-radius:var(--r-sm); }
.lightbox__nav{ position:absolute; top:50%; transform:translateY(-50%); z-index:2; background:#fff; }
.lightbox__nav--prev{ left:1rem; } .lightbox__nav--next{ right:1rem; }
.lightbox__thumbs{ display:flex; gap:.5rem; justify-content:center; padding:1rem; overflow-x:auto; }
.lightbox__thumbs button{ width:3.6rem; aspect-ratio:4/5; border-radius:var(--r-xs); overflow:hidden; opacity:.45; border:.125rem solid transparent; flex:none; transition:opacity .2s; }
.lightbox__thumbs button.is-active{ opacity:1; border-color:var(--orange); }
.lightbox__thumbs img{ width:100%; height:100%; object-fit:cover; }

.toasts{ position:fixed; left:50%; bottom:calc(var(--tabbar-h) + 1.2rem); z-index:120; display:grid; gap:.5rem; transform:translateX(-50%); width:min(calc(100% - 2rem), 26rem); pointer-events:none; }
.toast{ display:flex; align-items:center; gap:.7rem; padding:.85rem 1rem; background:var(--navy); color:#fff; border-radius:var(--r); font-weight:600; font-size:.86rem; pointer-events:auto; animation:toastIn .5s var(--ease) both; }
.toast .ms{ color:var(--orange); }
.toast--err{ background:var(--red-d); } .toast--err .ms{ color:#fff; }
.toast a{ margin-left:auto; font-weight:800; text-transform:uppercase; font-size:.8rem; letter-spacing:.08em; color:var(--orange); white-space:nowrap; }
.toast.out{ animation:toastOut .35s var(--ease) forwards; }
@keyframes toastIn{ from{ opacity:0; transform:translateY(1rem) scale(.96); } }
@keyframes toastOut{ to{ opacity:0; transform:translateY(.6rem) scale(.96); } }

.fly{ position:fixed; z-index:130; border-radius:var(--r-sm); object-fit:cover; pointer-events:none; will-change:transform, opacity; }

/* ==========================================================================
   MOBILNA APLIKACIJA: tab bar + genie meni + pretraga
   ========================================================================== */
.tabbar{ display:none; }
.sheet{ display:none; }
.msearch{ display:none; }
.genie-stage{ position:fixed; z-index:65; pointer-events:none; overflow:visible; contain:layout style; }
.genie-strip{ position:absolute; left:0; width:100%; overflow:hidden; transform-origin:50% 50%; backface-visibility:hidden; }
.genie-strip > .genie-clone{ position:absolute; left:0; top:0; }

/* ==========================================================================
   SCROLL REVEAL (samo kad JS radi)
   ========================================================================== */
.js [data-reveal]{ opacity:0; transform:translateY(1.8rem); transition:opacity .9s var(--ease), transform .9s var(--ease); transition-delay:calc(var(--d, 0) * 90ms); }
.js [data-reveal].is-in{ opacity:1; transform:none; }
.js [data-reveal="left"]{ transform:translateX(-2rem); }
.js [data-reveal="scale"]{ transform:scale(.95); }

/* Prelaz između stranica (View Transitions API) — osjećaj aplikacije */
@view-transition{ navigation:auto; }
::view-transition-old(root){ animation:vtOut .28s var(--ease) both; }
::view-transition-new(root){ animation:vtIn .45s var(--ease) both; }
@keyframes vtOut{ to{ opacity:0; transform:translateY(-.6rem); } }
@keyframes vtIn{ from{ opacity:0; transform:translateY(1rem); } }
.tabbar{ view-transition-name:tabbar; }

/* ==========================================================================
   RESPONSIVE
   ========================================================================== */
@media (max-width:1280px){
  .rail{ grid-auto-columns:calc((100% - 2 * 1rem) / 3); }
  .rail--5{ grid-auto-columns:calc((100% - 3 * 1rem) / 4); }
  .grid--5{ grid-template-columns:repeat(4, minmax(0,1fr)); }
  .grid--5 > :nth-child(n+9){ display:none; } /* 4 kolone × 2 reda, bez praznina */
  .hact__text small{ display:none; }
  .nav__link{ padding:0 .75rem; }
  .mega__in{ grid-template-columns:1fr 1.4fr; } .mega__promo{ display:none; }
}

@media (max-width:1100px){
  .footer__grid{ grid-template-columns:1fr 1fr; }
  .shop{ grid-template-columns:15.5rem minmax(0,1fr); gap:1.4rem; }
  .grid--4{ grid-template-columns:repeat(3, minmax(0,1fr)); }
  .bhp__grid{ grid-template-columns:1fr; }
  .bhp__main{ padding-right:0; }
  .bhp__steps::before{ left:calc(-1 * var(--gutter)); right:calc(-1 * var(--gutter)); width:auto; z-index:-1; }
  .bhp__steps{ isolation:isolate; margin-inline:calc(-1 * var(--gutter)); padding-inline:var(--gutter); }
  .why{ grid-template-columns:1fr 1fr; }
  .used{ grid-template-columns:1fr; }
  .info{ grid-template-columns:1fr; } .info-nav{ position:static; display:flex; overflow-x:auto; } .info-nav__link{ white-space:nowrap; border-bottom:0; border-right:1px solid var(--line); }
}

/* ---------- Tablet i mobitel: aplikacijski prikaz ---------- */
@media (max-width:900px){
  :root{ --tabbar-h:calc(4.1rem + env(safe-area-inset-bottom)); --header-h:5.6rem; }
  body{ padding-bottom:var(--tabbar-h); }
  .strip__links{ display:none; }
  .strip__in{ height:1.95rem; justify-content:center; }
  .strip__lead{ font-size:.75rem; }
  .hmain__in{ height:3.7rem; gap:.6rem; }
  .logo img{ height:1.95rem; }
  .hmain .search, .hact, .nav{ display:none; }
  .mbar-actions{ display:flex; gap:.4rem; margin-left:auto; }
  .mbar-actions .icon-btn{ width:2.35rem; height:2.35rem; border-color:var(--line); }

  /* Tab bar */
  .tabbar{ position:fixed; left:0; right:0; bottom:0; z-index:70; display:grid; grid-template-columns:repeat(5,1fr); height:var(--tabbar-h); padding-bottom:env(safe-area-inset-bottom); background:#fff; border-top:1px solid var(--line-2); }
  .tabbar__ind{ position:absolute; top:-1px; left:0; width:20%; height:.2rem; display:flex; justify-content:center; transition:transform .55s var(--spring); pointer-events:none; }
  .tabbar__ind::before{ content:""; width:42%; height:100%; background:var(--orange); border-radius:0 0 .3rem .3rem; }
  .tab{ position:relative; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:.18rem; color:var(--muted); font-size:max(10px, .68rem); font-weight:700; letter-spacing:.02em; transition:color .25s; }
  .tab .ms{ font-size:1.55rem; transition:transform .35s var(--spring), font-variation-settings .3s; }
  .tab:active .ms{ transform:scale(.82); }
  .tab.is-active{ color:var(--navy); }
  .tab.is-active .ms{ font-variation-settings:"FILL" 1, "wght" 500, "GRAD" 0, "opsz" 24; }
  .tab--cart .tab__bubble{ position:relative; width:2.7rem; height:2.7rem; margin-top:-.9rem; display:grid; place-items:center; border-radius:var(--r); background:var(--navy); color:#fff; border:.2rem solid #fff; transition:transform .35s var(--spring), background .25s; }
  .tab--cart .tab__bubble .ms{ font-size:1.5rem; }
  .tab--cart.is-active .tab__bubble{ background:var(--orange); color:var(--navy); }
  .tab--cart .badge{ top:-.45rem; left:auto; right:-.55rem; }
  .tab .badge{ left:auto; right:calc(50% - 1.45rem); top:.35rem; }
  .tab--menu.is-open{ color:var(--navy); }

  /* Genie meni */
  .sheet{ position:fixed; left:0; right:0; top:0; bottom:var(--tabbar-h); z-index:60; display:flex; flex-direction:column; background:#fff; visibility:hidden; }
  .sheet.is-open{ visibility:visible; }
  .sheet.is-hidden-for-genie{ visibility:hidden !important; }
  .sheet__head{ display:flex; align-items:center; justify-content:space-between; gap:1rem; padding:.9rem var(--gutter); border-bottom:1px solid var(--line); background:var(--navy); color:#fff; }
  .sheet__head img{ height:1.9rem; width:auto; }
  .sheet__head .icon-btn{ background:transparent; border-color:rgba(255,255,255,.3); color:#fff; }
  .sheet__scroll{ flex:1; overflow-y:auto; overscroll-behavior:contain; -webkit-overflow-scrolling:touch; padding:1.1rem var(--gutter) 2rem; display:grid; gap:1.4rem; align-content:start; }
  .sheet__search{ display:flex; align-items:center; height:3.1rem; border:.125rem solid var(--navy); border-radius:var(--r-sm); padding-left:.8rem; gap:.5rem; }
  .sheet__search input{ flex:1; min-width:0; border:0; background:none; height:100%; font-size:1rem; }
  .sheet__search input:focus{ outline:none; }
  .sheet__label{ font-size:.75rem; font-weight:800; letter-spacing:.14em; text-transform:uppercase; color:var(--muted); margin-bottom:.6rem; }
  .sheet__quick{ display:grid; grid-template-columns:repeat(4,1fr); gap:.5rem; }
  .qtile{ display:grid; justify-items:center; gap:.35rem; padding:.85rem .3rem; border-radius:var(--r); background:var(--bg); font-size:.75rem; font-weight:700; text-align:center; color:var(--navy); }
  .qtile .ms{ font-size:1.7rem; }
  .qtile--sale{ background:var(--red-d); color:#fff; } .qtile--used{ background:var(--navy); color:#fff; } .qtile--new{ background:var(--teal-d); color:#fff; } .qtile--all{ background:var(--orange); }
  .sheet-cats{ display:grid; grid-template-columns:1fr 1fr; gap:.5rem; }
  .sheet-cat{ position:relative; display:grid; grid-template-columns:2.8rem 1fr; grid-template-rows:auto auto; column-gap:.65rem; align-items:center; padding:.5rem; border:1px solid var(--line); border-radius:var(--r-sm); }
  .sheet-cat img{ grid-row:1/3; width:2.8rem; height:2.8rem; object-fit:cover; border-radius:var(--r-xs); background:var(--bg-2); }
  .sheet-cat__name{ font-weight:700; font-size:.85rem; line-height:1.15; color:var(--navy); }
  .sheet-cat__count{ font-size:.72rem; color:var(--muted); font-weight:600; }
  .sheet-links{ display:grid; border:1px solid var(--line); border-radius:var(--r); overflow:hidden; }
  .sheet-links a{ display:flex; align-items:center; gap:.8rem; padding:.9rem 1rem; border-bottom:1px solid var(--line); font-weight:600; }
  .sheet-links a:last-child{ border-bottom:0; }
  .sheet-links a .ms:first-child{ color:var(--orange-d); }
  .sheet-links a .ms:last-child{ margin-left:auto; color:var(--muted); font-size:1.1rem; }
  .sheet__contact{ display:grid; grid-template-columns:1fr 1fr; gap:.5rem; }
  .sheet__contact .btn{ min-height:3rem; padding:0 .6rem; font-size:.78rem; }
  .sheet__contact .btn:first-child{ grid-column:1/-1; }
  .sheet__bhp{ display:flex; align-items:center; gap:1rem; padding:1rem; border-radius:var(--r); background:var(--bhp-blue); color:#fff; }
  .sheet__bhp img{ height:1.8rem; background:#fff; padding:.35rem .45rem; border-radius:var(--r-xs); width:auto; box-sizing:content-box; }
  .sheet__bhp strong{ font-family:var(--font-d); font-size:1.9rem; font-weight:800; line-height:1; display:block; }
  .sheet__bhp small{ font-size:.8rem; opacity:.85; }

  /* Mobilna pretraga */
  .msearch{ position:fixed; inset:0; z-index:110; display:flex; flex-direction:column; background:#fff; transform:translateY(-102%); transition:transform .55s var(--ease); visibility:hidden; }
  .msearch.is-open{ transform:none; visibility:visible; }
  .msearch__bar{ display:flex; gap:.5rem; align-items:center; padding:.8rem var(--gutter); border-bottom:1px solid var(--line); }
  .msearch__bar .search__box{ flex:1; height:3rem; }
  .msearch__body{ flex:1; overflow:auto; padding:.6rem calc(var(--gutter) - .6rem) 2rem; }
  .msearch .suggest{ position:static; opacity:1; transform:none; pointer-events:auto; border:0; padding:0; max-height:none; }

  /* Hero mobilni — video preko skoro cijelog ekrana, kao u aplikaciji */
  .hero{ height:clamp(30rem, calc(100svh - var(--header-h) - var(--tabbar-h) - .5rem), 46rem); }
  .hero__wrap{ padding-bottom:1rem; }
  .hero__card{ width:100%; }
  .hero__pause{ top:1rem; bottom:auto; right:var(--gutter); }

  .sec__head{ flex-direction:column; align-items:flex-start; gap:1rem; }
  .deals{ grid-template-columns:1fr; }
  .deals__panel{ display:grid; grid-template-columns:auto 1fr; align-items:center; gap:.4rem 1.2rem; padding:1.3rem; }
  .deals__panel .eyebrow,.deals__panel p,.deals__panel .deals__ctrl{ grid-column:2; }
  .deals__big{ grid-row:1/4; font-size:3.4rem; }
  .deals__ctrl{ margin-top:.3rem; }
  .rail,.rail--5{ grid-auto-columns:calc((100% - 1rem) / 2.15); }
  .grid--5,.grid--4,.grid--3{ grid-template-columns:repeat(2, minmax(0,1fr)); }
  .grid{ grid-template-columns:repeat(2, minmax(0,1fr)); gap:.7rem; }
  .bento{ grid-template-columns:repeat(2, 1fr); grid-auto-rows:9rem; gap:.6rem; }
  .route{ grid-template-columns:1fr 1fr; row-gap:2rem; padding-top:0; }
  .route__line,.route__truck{ display:none; }
  .why{ grid-template-columns:1fr; }
  .why__media{ aspect-ratio:16/11; }
  .sizeg__grid{ grid-template-columns:1fr; }
  .cta-band__in{ grid-template-columns:1fr; }
  .cta-band__btns{ justify-content:flex-start; }
  .footer__badges{ grid-template-columns:1fr; }
  .fbadge{ padding:1rem 0; border-right:0; border-bottom:1px solid rgba(255,255,255,.12); }
  .fbadge:last-child{ border-bottom:0; }

  /* Shop */
  .shop{ grid-template-columns:1fr; padding-top:1rem; }
  .filters{ position:fixed; inset:0 0 var(--tabbar-h) 0; z-index:75; max-height:none; border-radius:0; border:0; transform:translateY(102%); transition:transform .55s var(--ease); visibility:hidden; display:flex; flex-direction:column; }
  .filters.is-open{ transform:none; visibility:visible; }
  .filters__scroll{ flex:1; overflow:auto; }
  .filters__apply{ display:block !important; padding:.8rem var(--gutter); border-top:1px solid var(--line); background:#fff; }
  .fbtn{ display:inline-flex; }
  .toolbar{ position:sticky; top:calc(var(--header-h) - 2.2rem); z-index:20; background:var(--bg); padding:.6rem 0; margin-bottom:.4rem; }
  .density{ display:none; }

  /* Proizvod */
  .pd{ grid-template-columns:1fr; padding-top:.8rem; gap:1.4rem; }
  .gallery{ position:relative; top:0; grid-template-columns:1fr; margin-inline:calc(-1 * var(--gutter)); }
  .gallery__thumbs{ display:none; }
  .gallery__main{ border-radius:0; cursor:default; aspect-ratio:1/1; max-height:none; }
  .gallery__dots{ display:flex; justify-content:center; gap:.35rem; position:absolute; left:0; right:0; bottom:1.1rem; z-index:2; pointer-events:none; }
  .gallery__dots i{ width:.45rem; height:.45rem; border-radius:1rem; background:rgba(22,33,58,.3); transition:width .35s var(--ease), background .3s; }
  .gallery__dots i.is-active{ width:1.4rem; background:var(--navy); }
  .gallery__count{ bottom:auto; top:1rem; left:auto; right:1rem; }
  .gallery__tags{ top:1rem; }
  .gallery__expand{ display:none; }
  .buybar{ display:flex; }
  .order-msg{ grid-template-columns:1fr 1fr; } .order-msg span{ grid-column:1/-1; }

  /* Korpa */
  .cart{ grid-template-columns:1fr; padding-top:1rem; }
  .summary{ position:static; }
  .citem{ grid-template-columns:5rem minmax(0,1fr); padding:1rem; }
  .citem__total{ grid-column:2; font-size:1.25rem; }
  .timeline{ grid-template-columns:1fr; }

  .contact{ grid-template-columns:1fr; }
  .cinfo{ grid-template-columns:1fr; }
  .toasts{ bottom:calc(var(--tabbar-h) + .8rem); }
  .drawer{ top:auto; left:0; width:100%; max-height:85svh; border-radius:var(--r-lg) var(--r-lg) 0 0; transform:translateY(102%); }
}

@media (max-width:560px){
  .footer__grid{ grid-template-columns:1fr; }
  .ctiles{ grid-template-columns:1fr 1fr; }
  .form-grid,.inq__row{ grid-template-columns:1fr; }
  .hero__ctas .btn{ flex:1 1 auto; }
  .sizeg__steps{ grid-template-columns:1fr; }
  .route{ grid-template-columns:1fr; }
  .pcard__body{ padding:.75rem; gap:.45rem; }
  .pcard__title{ font-size:.92rem; }
  .price strong{ font-size:1.3rem; }
  .pcard__add-label{ display:none; }
  .pcard__add{ padding:0; width:2.5rem; height:2.5rem; min-width:0; }
  .pcard__wish{ width:2.2rem; height:2.2rem; }
  .size-mini{ min-width:1.6rem; height:1.4rem; font-size:.7rem; }
  .buy{ grid-template-columns:minmax(0,1fr) auto; }
  .buy .qty{ grid-column:1/-1; justify-self:start; }
  .deals__panel{ grid-template-columns:1fr; }
  .deals__panel .eyebrow,.deals__panel p,.deals__panel .deals__ctrl{ grid-column:auto; }
  .deals__big{ grid-row:auto; }
}

@media (max-width:380px){
  .grid{ gap:.5rem; }
  .tab{ font-size:10px; }
}

/* 2K / 4K — više kolona, a rem već skalira sve mjere */
@media (min-width:2200px){
  .rail--5{ grid-auto-columns:calc((100% - 5 * 1rem) / 6); }
}

@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{ animation-duration:.001ms !important; animation-iteration-count:1 !important; transition-duration:.001ms !important; scroll-behavior:auto !important; }
  .ticker__track{ animation:none; }
  .js [data-reveal]{ opacity:1; transform:none; }
}

@media print{
  .site-header,.tabbar,.footer,.cta-band,.ticker,.buybar{ display:none !important; }
}

/* PWA traka (instalacija / obavještenja) */
.pwa-bar{ position:fixed; z-index:115; left:50%; bottom:calc(var(--tabbar-h) + 1rem); width:min(calc(100% - 2rem), 30rem); display:flex; align-items:center; gap:.8rem; padding:.8rem; background:#fff; border:1px solid var(--line-2); border-left:.3rem solid var(--orange); border-radius:var(--r); transform:translate(-50%, 140%); opacity:0; transition:transform .6s var(--ease), opacity .4s var(--ease); }
.pwa-bar.is-in{ transform:translate(-50%, 0); opacity:1; }
.pwa-bar img{ width:2.8rem; height:2.8rem; border-radius:var(--r-sm); }
.pwa-bar__txt{ flex:1; display:grid; line-height:1.25; }
.pwa-bar__txt strong{ color:var(--navy); }
.pwa-bar__txt span{ font-size:.82rem; color:var(--muted); }
.pwa-bar .icon-btn{ width:2.3rem; height:2.3rem; }
.spin{ animation:spin 1s linear infinite; }
@keyframes spin{ to{ transform:rotate(360deg); } }
.filters__apply{ display:none; }
.strip__m{ display:none; }
@media (max-width:900px){ .strip__d{ display:none; } .strip__m{ display:inline; } }