/* =====================================================================
   Iske Komerc — dizajn sistem v2
   Pravila: ravne površine, tanke linije (1px), bez sjena, gradijenata,
   zamućenja i dekorativnih animacija. Sve mjere su u rem pa se cijeli
   sajt skalira zajedno s osnovnom veličinom fonta (360px → 3840px).
   ===================================================================== */

/* ---------- Tokeni ---------- */
:root {
  --red: #D32F2F;
  --red-700: #B71C1C;
  --red-50: #FBEBEB;

  --ink: #0A0A0A;
  --ink-2: #121212;
  --ink-3: #1C1C1C;
  --ink-line: #2A2A2A;

  --g-700: #3F3F3F;
  --g-600: #5A5A5A;
  --g-500: #6B6B6B;
  --g-400: #9A9A9A;
  --g-300: #BDBDBD;
  --g-200: #DCDCDC;
  --g-100: #ECECEC;
  --g-50:  #F5F5F5;
  --white: #FFFFFF;

  --ok: #1E7B3C;
  --warn: #A45B00;

  --f-head: 'Montserrat', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --f-body: 'Inter', system-ui, -apple-system, 'Segoe UI', sans-serif;

  --t-2xs: .6875rem;
  --t-xs: .75rem;
  --t-sm: .875rem;
  --t-md: 1rem;
  --t-lg: 1.125rem;
  --t-xl: 1.375rem;
  --t-2xl: 1.75rem;
  --t-3xl: clamp(1.75rem, 1.2rem + 2vw, 2.5rem);
  --t-hero: clamp(2.25rem, 1.3rem + 3.6vw, 4rem);

  --s-1: .25rem;  --s-2: .5rem;   --s-3: .75rem;  --s-4: 1rem;
  --s-5: 1.5rem;  --s-6: 2rem;    --s-7: 2.5rem;  --s-8: 3rem;
  --s-9: 4rem;    --s-10: 5rem;   --s-11: 6.5rem;

  --r-1: 2px;
  --r-2: 4px;
  --line: max(1px, .0625rem);

  --container: clamp(82rem, 72vw, 120rem);
  --gutter: clamp(1rem, 4.2vw, 2.5rem);
  --header-h: 4.5rem;
  --bar-h: 3.75rem;

  --ease: cubic-bezier(.2, .7, .2, 1);
  --dur: 160ms;
}

/* Osnovna veličina raste postepeno: 15px (mobitel) → 16px (1440) → 20px (2560) → 25px (3840) */
html { font-size: clamp(15px, calc(.357vw + 10.86px), 25px); -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }

/* ---------- Reset ---------- */
*, *::before, *::after { box-sizing: border-box; }
body, h1, h2, h3, h4, p, ol, ul, figure, dl, dd { margin: 0; }
ol, ul { padding: 0; list-style: none; }
img { display: block; max-width: 100%; height: auto; }
button, input, select { font: inherit; color: inherit; }
button { cursor: pointer; background: none; border: 0; padding: 0; }
a { color: inherit; text-decoration: none; }
[hidden] { display: none !important; }

body {
  font-family: var(--f-body);
  font-size: var(--t-md);
  line-height: 1.6;
  color: var(--ink);
  background: var(--white);
  text-rendering: optimizeLegibility;
  -webkit-font-smoothing: antialiased;
  overflow-x: clip;
}
:focus-visible { outline: 2px solid var(--red); outline-offset: 2px; }
::selection { background: var(--red); color: var(--white); }

.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.skip { position: absolute; left: var(--s-4); top: -10rem; z-index: 200; background: var(--white); color: var(--ink); padding: var(--s-2) var(--s-4); border: var(--line) solid var(--ink); }
.skip:focus { top: var(--s-4); }

.container { width: 100%; max-width: calc(var(--container) + 2 * var(--gutter)); margin-inline: auto; padding-inline: var(--gutter); }
.num { font-variant-numeric: tabular-nums; }

/* ---------- Ikone (Google Material Symbols) ---------- */
.i {
  font-family: 'Material Symbols Outlined';
  font-weight: 300;
  font-style: normal;
  font-size: 1.375rem;
  line-height: 1;
  letter-spacing: normal;
  text-transform: none;
  white-space: nowrap;
  direction: ltr;
  display: inline-block;
  flex: none;
  width: 1em;
  overflow: hidden;
  font-variation-settings: 'FILL' 0, 'wght' 300, 'GRAD' 0, 'opsz' 24;
  -webkit-font-feature-settings: 'liga';
  user-select: none;
}
.i--fill { font-variation-settings: 'FILL' 1, 'wght' 300, 'GRAD' 0, 'opsz' 24; }
.i--sm { font-size: 1.125rem; }

/* Zvanični logotipi (Simple Icons) — boja se preuzima iz teksta */
.bi { display: inline-block; flex: none; width: 1.125rem; height: 1.125rem; background: currentColor; -webkit-mask: var(--m) center / contain no-repeat; mask: var(--m) center / contain no-repeat; }
.bi--wa { --m: url(https://cdn.jsdelivr.net/npm/simple-icons@13/icons/whatsapp.svg); }
.bi--viber { --m: url(https://cdn.jsdelivr.net/npm/simple-icons@13/icons/viber.svg); }
.bi--fb { --m: url(https://cdn.jsdelivr.net/npm/simple-icons@13/icons/facebook.svg); }
.bi--ig { --m: url(https://cdn.jsdelivr.net/npm/simple-icons@13/icons/instagram.svg); }
.bi--tt { --m: url(https://cdn.jsdelivr.net/npm/simple-icons@13/icons/tiktok.svg); }

/* ---------- Tipografija ---------- */
.eyebrow {
  display: flex; align-items: center; gap: var(--s-3);
  font-family: var(--f-head); font-size: var(--t-xs); font-weight: 700;
  letter-spacing: .12em; text-transform: uppercase; color: var(--red);
}
.eyebrow::before { content: ''; width: 1.5rem; height: var(--line); background: currentColor; }
.h2 { font-family: var(--f-head); font-size: var(--t-3xl); font-weight: 800; line-height: 1.1; letter-spacing: -.015em; }
.lead { font-size: var(--t-lg); color: var(--g-600); max-width: 38rem; }

.section { padding-block: clamp(3.5rem, 2.5rem + 4vw, 6.5rem); }
.section--tint { background: var(--g-50); }
.section--dark { background: var(--ink); color: var(--white); }
.section__head { display: flex; flex-wrap: wrap; align-items: end; justify-content: space-between; gap: var(--s-5); margin-bottom: clamp(2rem, 1.5rem + 2vw, 3rem); }
.section__head .h2 { margin-top: var(--s-3); }
.section__head .lead { margin-top: var(--s-3); }

/* ---------- Dugmad i linkovi ---------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: var(--s-2);
  min-height: 3rem; padding: 0 var(--s-5);
  font-family: var(--f-head); font-size: var(--t-sm); font-weight: 700; letter-spacing: .04em; text-transform: uppercase;
  border: var(--line) solid transparent; border-radius: var(--r-1);
  transition: background-color var(--dur) var(--ease), border-color var(--dur) var(--ease), color var(--dur) var(--ease);
  white-space: nowrap;
}
.btn .i { font-size: 1.25rem; }
.btn--primary { background: var(--red); color: var(--white); }
.btn--primary:hover { background: var(--red-700); }
.btn--dark { background: var(--ink); color: var(--white); }
.btn--dark:hover { background: var(--ink-3); }
.btn--line { border-color: var(--g-300); color: var(--ink); }
.btn--line:hover { border-color: var(--ink); }
.btn--line-dark { border-color: var(--g-700); color: var(--white); }
.btn--line-dark:hover { border-color: var(--white); }
.btn[disabled] { opacity: .45; pointer-events: none; }

.link { display: inline-flex; align-items: center; gap: var(--s-1); font-weight: 600; font-size: var(--t-sm); border-bottom: var(--line) solid currentColor; padding-bottom: 1px; }
.link .i { font-size: 1.125rem; transition: transform var(--dur) var(--ease); }
.link:hover .i { transform: translateX(3px); }

/* ---------- Preloader (samo prvi posjet u sesiji) ---------- */
.pl { position: fixed; inset: 0; z-index: 1000; background: var(--ink); display: grid; place-items: center; transition: opacity 260ms var(--ease), visibility 260ms; }
.pl__inner { display: grid; justify-items: center; gap: var(--s-5); }
.pl__logo { width: min(16rem, 60vw); clip-path: inset(0 100% 0 0); animation: pl-wipe 700ms var(--ease) 80ms forwards; }
.pl__line { width: min(16rem, 60vw); height: var(--line); background: var(--ink-line); position: relative; overflow: hidden; }
.pl__line::after { content: ''; position: absolute; inset: 0; background: var(--red); transform: scaleX(0); transform-origin: left; animation: pl-line 900ms var(--ease) 250ms forwards; }
.pl--done { opacity: 0; visibility: hidden; }
html.no-pl .pl { display: none; }
@keyframes pl-wipe { to { clip-path: inset(0 0 0 0); } }
@keyframes pl-line { to { transform: scaleX(1); } }

/* ---------- Gornja informativna traka ---------- */
.util { display: none; background: var(--ink); color: var(--g-300); font-size: var(--t-xs); border-bottom: var(--line) solid var(--ink-line); }
.util__inner { display: flex; align-items: center; justify-content: space-between; min-height: 2.5rem; gap: var(--s-5); }
.util__list { display: flex; align-items: center; gap: var(--s-5); }
.util__list a, .util__list span { display: inline-flex; align-items: center; gap: var(--s-2); }
.util__list a:hover { color: var(--white); }
.util .i { font-size: 1.05rem; color: var(--g-400); }

.status { display: inline-flex; align-items: center; gap: var(--s-2); }
.status__dot { width: .5rem; height: .5rem; border-radius: 50%; background: var(--g-400); }
.status--open .status__dot { background: #2EA657; }

/* ---------- Header ---------- */
.hdr { position: sticky; top: 0; z-index: 60; background: var(--ink); color: var(--white); border-bottom: var(--line) solid var(--ink-line); }
.hdr__inner { display: flex; align-items: center; gap: var(--s-6); height: var(--header-h); }
.hdr__logo { flex: none; display: block; }
.hdr__logo img { height: 2rem; width: auto; }
.nav { display: none; }
.nav__list { display: flex; align-items: stretch; height: var(--header-h); }
.nav__list > li { display: flex; }
.nav__link {
  position: relative; display: flex; align-items: center; padding-inline: var(--s-3);
  font-family: var(--f-head); font-size: var(--t-xs); font-weight: 700; letter-spacing: .08em; text-transform: uppercase;
  color: var(--g-300); transition: color var(--dur) var(--ease);
}
.nav__link:hover, .nav__link[aria-current='page'] { color: var(--white); }
.nav__link[aria-current='page']::after { content: ''; position: absolute; left: var(--s-3); right: var(--s-3); bottom: -1px; height: 2px; background: var(--red); }
.hdr__actions { display: flex; align-items: center; gap: var(--s-1); margin-left: auto; }
.icon-btn { position: relative; display: inline-grid; place-items: center; width: 2.75rem; height: 2.75rem; border-radius: var(--r-1); color: var(--white); transition: background-color var(--dur) var(--ease); }
.icon-btn:hover { background: var(--ink-3); }
.cart-btn { display: inline-flex; align-items: center; gap: var(--s-3); height: 2.75rem; padding-inline: var(--s-3); border-radius: var(--r-1); transition: background-color var(--dur) var(--ease); }
.cart-btn:hover { background: var(--ink-3); }
.cart-btn__icon { position: relative; display: inline-grid; }
.count { position: absolute; top: -.35rem; right: -.55rem; min-width: 1.1rem; height: 1.1rem; padding: 0 .25rem; display: grid; place-items: center; font-size: .6875rem; font-weight: 700; line-height: 1; background: var(--red); color: var(--white); border-radius: var(--r-1); }
.count[data-n='0'] { background: var(--g-700); }
.cart-btn__total { display: none; font-size: var(--t-sm); font-weight: 600; }
.hdr__account { display: none; }
/* Prijavljeni korisnik: avatar s inicijalima, pozdrav i meni */
.acct { position: relative; display: none; }
.acct__btn { display: inline-flex; align-items: center; gap: var(--s-2); height: 2.75rem; padding: 0 var(--s-2) 0 .3rem; border-radius: 999px; color: var(--white); cursor: pointer; transition: background-color var(--dur) var(--ease); }
.acct__btn:hover, .acct__btn[aria-expanded='true'] { background: var(--ink-3); }
.acct__av { position: relative; flex: none; display: grid; place-items: center; width: 2.125rem; height: 2.125rem; border-radius: 50%; background: var(--red); color: var(--white); font-family: var(--f-head); font-size: .8125rem; font-weight: 800; letter-spacing: .02em; }
.acct__btn .acct__av::after { content: ''; position: absolute; right: -1px; bottom: -1px; width: .625rem; height: .625rem; border: 2px solid var(--ink); border-radius: 50%; background: #34C267; }
.acct__av--lg { width: 2.75rem; height: 2.75rem; font-size: 1rem; }
.acct__hi { display: none; flex-direction: column; line-height: 1.1; text-align: left; }
.acct__hi small { font-size: var(--t-2xs); color: var(--g-400); }
.acct__hi b { max-width: 8.5rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: var(--t-sm); font-weight: 700; }
.acct__caret { font-size: 1.125rem; color: var(--g-400); transition: transform var(--dur) var(--ease); }
.acct__btn[aria-expanded='true'] .acct__caret { transform: rotate(180deg); }
.acct__menu { position: absolute; top: calc(100% + .5rem); right: 0; z-index: 60; width: 18rem; padding: var(--s-2); border: var(--line) solid var(--g-200); border-radius: var(--r-2); background: var(--white); color: var(--ink); box-shadow: 0 18px 40px -18px rgba(0, 0, 0, .35); opacity: 0; transform: translateY(-4px); transition: opacity 140ms var(--ease), transform 140ms var(--ease); }
.acct__menu.is-open { opacity: 1; transform: none; }
.acct__head { display: flex; align-items: center; gap: var(--s-3); padding: var(--s-3); }
.acct__head b { display: block; font-size: var(--t-sm); font-weight: 700; }
.acct__head small { display: block; max-width: 12rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: var(--t-xs); color: var(--g-500); }
.acct__role { display: inline-flex; align-items: center; gap: .3rem; margin: 0 var(--s-3) var(--s-2); padding: .15rem .55rem; border-radius: 999px; background: var(--red-50); color: var(--red-700); font-size: var(--t-2xs); font-weight: 700; letter-spacing: .04em; text-transform: uppercase; }
.acct__role .i { font-size: .95rem; }
.acct__item { display: flex; align-items: center; gap: var(--s-3); padding: .625rem var(--s-3); border-radius: var(--r-1); font-size: var(--t-sm); font-weight: 600; color: var(--g-700); transition: background-color var(--dur) var(--ease), color var(--dur) var(--ease); }
.acct__item .i { font-size: 1.25rem; color: var(--g-500); }
.acct__item:hover { background: var(--g-50); color: var(--ink); }
.acct__item--admin { margin-bottom: var(--s-1); background: var(--ink); color: var(--white); }
.acct__item--admin .i { color: var(--white); }
.acct__item--admin:hover { background: var(--ink-3); color: var(--white); }
.acct__go { margin-left: auto; font-size: 1rem !important; opacity: .7; }
.acct__item--out { margin-top: var(--s-1); border-top: var(--line) solid var(--g-100); border-radius: 0; color: var(--red-700); }
.acct__item--out .i { color: var(--red); }
/* Donja traka (mobitel): inicijali umjesto ikone kad je korisnik prijavljen */
.bar__av { display: none; place-items: center; width: 1.625rem; height: 1.625rem; border-radius: 50%; background: var(--red); color: var(--white); font-family: var(--f-head); font-size: .6875rem; font-weight: 800; }
.is-prijavljen .bar__av { display: grid; }
.is-prijavljen [data-bar-racun] .bar__icon > .i { display: none; }

/* ---------- Pretraga (panel ispod headera) ---------- */
.search { position: fixed; inset: 0 0 auto; z-index: 70; background: var(--white); border-bottom: var(--line) solid var(--g-200); max-height: 100svh; overflow: auto; }
.search__bar { display: flex; align-items: center; gap: var(--s-3); height: var(--header-h); border-bottom: var(--line) solid var(--g-100); }
.search__bar .i { color: var(--g-500); }
.search__input { flex: 1; min-width: 0; height: 100%; border: 0; outline: 0; font-size: var(--t-xl); font-weight: 500; background: transparent; }
.search__input::placeholder { color: var(--g-400); }
.search__body { padding-block: var(--s-5) var(--s-7); }
.search__hint { color: var(--g-500); font-size: var(--t-sm); }
.search__results { display: grid; gap: 0; border-top: var(--line) solid var(--g-100); }
.sres { display: grid; grid-template-columns: 3.5rem 1fr auto; align-items: center; gap: var(--s-4); padding: var(--s-3) 0; border-bottom: var(--line) solid var(--g-100); }
.sres:hover .sres__name { color: var(--red); }
.sres__img { width: 3.5rem; height: 3.5rem; background: var(--g-50); object-fit: contain; padding: .25rem; }
.sres__name { font-weight: 600; font-size: var(--t-sm); line-height: 1.35; transition: color var(--dur) var(--ease); }
.sres__meta { display: block; font-size: var(--t-xs); color: var(--g-500); }
.sres__price { font-weight: 700; font-size: var(--t-sm); white-space: nowrap; }
.search__all { margin-top: var(--s-5); }
.search .icon-btn { color: var(--ink); }
.search .icon-btn:hover { background: var(--g-50); }
.scrim { position: fixed; inset: 0; z-index: 65; background: rgba(10, 10, 10, .55); opacity: 0; transition: opacity 220ms var(--ease); }
.scrim.is-on { opacity: 1; }

/* ---------- Header preko hero fotografije (naslovna) ---------- */
.hdr--over { margin-bottom: calc(-1 * var(--header-h) - var(--line)); background: transparent; border-bottom-color: transparent; transition: background-color 320ms var(--ease), border-color 320ms var(--ease); }
.hdr--over.is-solid { background: var(--ink); border-bottom-color: var(--ink-line); }
.hdr--over:not(.is-solid) .nav__link { color: rgba(255, 255, 255, .84); }
.hdr--over:not(.is-solid) .nav__link:hover { color: var(--white); }
.hdr--over:not(.is-solid) .icon-btn:hover,
.hdr--over:not(.is-solid) .cart-btn:hover { background: rgba(255, 255, 255, .12); }

/* ---------- Hero (fotografija preko cijelog ekrana) ---------- */
.hero { position: relative; background: var(--ink); color: var(--white); --rail-h: 5.25rem; }
.hero__stage {
  position: relative; isolation: isolate; overflow: hidden; display: flex; flex-direction: column;
  min-height: calc(100svh - var(--promo-h, 0px) - var(--bar-h) - env(safe-area-inset-bottom));
}
.hero__bg { position: absolute; inset: 0; z-index: -2; background: var(--ink-2); }
.hero__img { position: absolute; inset: 0; overflow: hidden; visibility: hidden; }
.hero__img img { width: 100%; height: 100%; object-fit: cover; object-position: var(--pos-m, var(--pos, 50% 50%)); transform-origin: var(--origin, 50% 50%); transform: scale(var(--zoom, 1)); }
.hero__img.is-active, .hero__img.is-leaving { visibility: visible; }
.hero__img.is-leaving { z-index: 1; }
.hero__img.is-active { z-index: 2; }
.hero__img.is-active img { animation: hero-kb 9s linear forwards; }
.hero__img.is-entering { animation: hero-wipe 1200ms cubic-bezier(.77, 0, .18, 1) both; }
.hero__img.is-entering img { animation: hero-settle 1700ms cubic-bezier(.2, .7, .2, 1) both, hero-kb 9s linear 1700ms forwards; }
.hero__img.is-leaving img { animation: hero-leave 1200ms cubic-bezier(.77, 0, .18, 1) both; }
@keyframes hero-wipe { from { clip-path: inset(0 0 0 100%); } to { clip-path: inset(0 0 0 0); } }
@keyframes hero-settle { from { transform: scale(calc(var(--zoom, 1) * 1.16)) translateX(4%); } to { transform: scale(var(--zoom, 1)); } }
@keyframes hero-kb { from { transform: scale(var(--zoom, 1)); } to { transform: scale(calc(var(--zoom, 1) * 1.06)); } }
@keyframes hero-leave { from { transform: var(--from, scale(1)); } to { transform: var(--from, scale(1)) translateX(-7%); } }
.hero__shade { position: absolute; inset: 0; z-index: -1; background: rgba(8, 8, 8, .44); }
.hero.is-paused .hero__img img { animation-play-state: paused; }
/* Pauza zaustavlja samo sporo približavanje, ulazak nove slike se uvijek završi */
.hero.is-paused .hero__img.is-entering img { animation-play-state: running, paused; }

.hero__grid { position: relative; flex: 1; display: flex; flex-direction: column; justify-content: space-between; gap: var(--s-7); padding-top: calc(var(--header-h) + var(--s-5)); padding-bottom: var(--s-6); }
.hero__top { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s-3) var(--s-6); }
.eyebrow--light { color: var(--white); }
.eyebrow--light::before { background: var(--red); height: 2px; }
.hero__meta { display: flex; align-items: center; gap: var(--s-5); font-size: var(--t-xs); color: rgba(255, 255, 255, .8); }
.hero__meta a:hover { color: var(--white); }
.hero__meta .status__dot { background: rgba(255, 255, 255, .5); }
.hero__meta .status--open .status__dot { background: #34C267; }
.hero__phone, .hero__status { display: none; }
.hero__phone { align-items: center; gap: var(--s-2); }
.hero__phone .i { font-size: 1.05rem; }
.hero__ctrl { display: flex; align-items: center; gap: var(--s-4); }
.hero__count { display: none; font-size: var(--t-xs); color: rgba(255, 255, 255, .7); font-variant-numeric: tabular-nums; letter-spacing: .1em; }
.hero__count b { color: var(--white); font-weight: 700; }

.hero__text { display: grid; container-type: inline-size; }
.hs { grid-area: 1 / 1; visibility: hidden; align-self: end; }
.hs.is-active, .hs.is-out { visibility: visible; }
.hs__brand { font-family: var(--f-head); font-size: var(--t-sm); font-weight: 800; letter-spacing: .32em; text-transform: uppercase; }
.hs__brand .mask > span::before { content: ''; display: inline-block; vertical-align: middle; width: 2rem; height: 2px; margin-right: var(--s-3); background: var(--red); translate: 0 -.15em; }
.hs__model { font-family: var(--f-head); font-weight: 800; font-size: min(clamp(3.4rem, 1.1rem + 8.6vw, 9.75rem), calc(100cqi / (var(--chars, 4) * .7))); line-height: .9; letter-spacing: -.045em; margin-top: var(--s-2); }
.hs__lead { font-size: var(--t-lg); color: rgba(255, 255, 255, .88); max-width: 30rem; margin-top: var(--s-4); }
.mask { display: block; overflow: hidden; padding-bottom: .06em; margin-bottom: -.06em; }
.mask > span { display: block; transform: translateY(108%); }
.hs.is-active .mask > span { transform: none; transition: transform 950ms cubic-bezier(.2, .8, .2, 1) var(--d, 0ms); }
.hs.is-out .mask > span { transform: translateY(-108%); transition: transform 520ms cubic-bezier(.6, 0, .4, 1); }
.hs .fade { opacity: 0; transform: translateY(.9rem); }
.hs.is-active .fade { opacity: 1; transform: none; transition: opacity 800ms var(--ease) var(--d, 0ms), transform 800ms var(--ease) var(--d, 0ms); }
.hs.is-out .fade { opacity: 0; transition: opacity 300ms var(--ease); }

.hs__stats { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); margin-top: var(--s-6); border-top: var(--line) solid rgba(255, 255, 255, .24); max-width: 44rem; }
.hs__stats > div { padding: var(--s-3) var(--s-3) var(--s-3) 0; border-bottom: var(--line) solid rgba(255, 255, 255, .14); }
.hs__stats > div:nth-child(2n) { padding-left: var(--s-4); border-left: var(--line) solid rgba(255, 255, 255, .14); }
.hs__stats dt { font-size: var(--t-2xs); font-weight: 600; letter-spacing: .12em; text-transform: uppercase; color: rgba(255, 255, 255, .64); }
.hs__stats dd { margin: .2rem 0 0; font-family: var(--f-head); font-size: var(--t-xl); font-weight: 700; font-variant-numeric: tabular-nums; letter-spacing: -.01em; white-space: nowrap; }
.hs__cta { display: flex; flex-wrap: wrap; gap: var(--s-3); margin-top: var(--s-6); }
.btn--line-light { border-color: rgba(255, 255, 255, .55); color: var(--white); }
.btn--line-light:hover { border-color: var(--white); background: rgba(255, 255, 255, .08); }

/* Traka s brendovima na dnu hero dijela */
.hero__rail { background: rgba(10, 10, 10, .8); border-top: var(--line) solid rgba(255, 255, 255, .12); }
.hero__rail-inner { display: flex; align-items: center; justify-content: space-between; gap: var(--s-4); min-height: 4rem; }
.hero__nav { display: flex; align-items: center; gap: var(--s-2); }
.hero__btn { width: 2.25rem; height: 2.25rem; flex: none; display: grid; place-items: center; border: var(--line) solid rgba(255, 255, 255, .38); border-radius: var(--r-1); color: var(--white); transition: border-color var(--dur) var(--ease), background-color var(--dur) var(--ease); }
.hero__btn:hover { border-color: var(--white); background: rgba(255, 255, 255, .08); }
.hero__btn:active { transform: scale(.94); }
.hero__btn .i { font-size: 1.25rem; }
.hero__tabs { display: flex; align-items: center; gap: .3rem; flex: 1 1 auto; min-width: 0; max-width: 34rem; }
.ht { position: relative; flex: 1 1 0; min-width: 0; height: 2.75rem; display: flex; align-items: center; }
.ht__bar { position: relative; display: block; width: 100%; height: 2px; overflow: hidden; background: rgba(255, 255, 255, .24); transition: background-color var(--dur) var(--ease), height 200ms var(--ease); }
.ht:hover .ht__bar { background: rgba(255, 255, 255, .55); height: 4px; }
.ht__bar i { position: absolute; inset: 0; background: var(--red); transform: scaleX(0); transform-origin: left; }
.ht.is-done .ht__bar i { transform: scaleX(1); background: rgba(255, 255, 255, .82); }
.ht::after {
  content: attr(data-label); position: absolute; left: 50%; bottom: calc(100% - .35rem); translate: -50% .35rem; opacity: 0; pointer-events: none;
  padding: .3rem .55rem; background: var(--white); color: var(--ink); border-radius: var(--r-1); font-size: var(--t-2xs); font-weight: 700; letter-spacing: .02em; white-space: nowrap;
  transition: opacity 180ms var(--ease), translate 180ms var(--ease);
}
.ht:hover::after, .ht:focus-visible::after { opacity: 1; translate: -50% 0; }
.ht:first-child::after { left: 0; translate: 0 .35rem; }
.ht:first-child:hover::after, .ht:first-child:focus-visible::after { translate: 0 0; }
.ht:last-child::after { left: auto; right: 0; translate: 0 .35rem; }
.ht:last-child:hover::after, .ht:last-child:focus-visible::after { translate: 0 0; }
.hero__next { display: none; min-width: 0; font-size: var(--t-xs); color: rgba(255, 255, 255, .6); white-space: nowrap; }
.hero__next b { display: block; margin-top: .1rem; font-family: var(--f-head); font-size: var(--t-sm); font-weight: 800; color: var(--white); letter-spacing: .02em; overflow: hidden; text-overflow: ellipsis; }
.hero__trust { display: none; }
.hero__trust li { display: flex; align-items: center; gap: var(--s-2); font-size: var(--t-xs); color: rgba(255, 255, 255, .8); white-space: nowrap; }
.hero__trust .i { font-size: 1.25rem; color: var(--white); }

.seg { display: inline-flex; border: var(--line) solid var(--g-300); border-radius: var(--r-1); padding: 3px; }
.seg__btn { display: inline-flex; align-items: center; gap: var(--s-2); height: 2.25rem; padding: 0 var(--s-4); font-family: var(--f-head); font-size: var(--t-xs); font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--g-600); border-radius: 1px; transition: background-color var(--dur) var(--ease), color var(--dur) var(--ease); }
.seg__btn[aria-selected='true'] { background: var(--ink); color: var(--white); }
.field { display: grid; gap: var(--s-2); min-width: 0; }
.field__label { font-size: var(--t-2xs); font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--g-500); }
.select { position: relative; }
.select select {
  width: 100%; height: 3rem; padding: 0 2.25rem 0 var(--s-3); border: var(--line) solid var(--g-300); border-radius: var(--r-1);
  background: var(--white); appearance: none; -webkit-appearance: none; font-size: var(--t-md); font-weight: 500; font-variant-numeric: tabular-nums;
  transition: border-color var(--dur) var(--ease);
}
.select select:hover { border-color: var(--g-600); }
.select select:focus-visible { outline: 0; border-color: var(--ink); box-shadow: inset 0 0 0 1px var(--ink); }
.select .i { position: absolute; right: var(--s-2); top: 50%; translate: 0 -50%; pointer-events: none; color: var(--g-500); }
.check { display: inline-flex; align-items: center; gap: var(--s-2); font-size: var(--t-sm); color: var(--g-700); cursor: pointer; user-select: none; }
.check input { width: 1.125rem; height: 1.125rem; accent-color: var(--red); margin: 0; }
.chip { display: inline-flex; align-items: center; gap: var(--s-2); height: 2.125rem; padding: 0 var(--s-3); border: var(--line) solid var(--g-200); border-radius: var(--r-1); font-size: var(--t-sm); font-weight: 600; font-variant-numeric: tabular-nums; transition: border-color var(--dur) var(--ease); }
.chip small { font-size: var(--t-xs); font-weight: 500; color: var(--g-500); }
.chip:hover { border-color: var(--ink); }

/* Zajednički: čipovi "najtraženije" i oznake */
.finder__pop { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s-2); }
.finder__pop-label { font-size: var(--t-2xs); font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: var(--g-500); }
.tile--book .eyebrow::before { background: var(--white); }
.map { overflow: hidden; }
.map__photo { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.map__ph { position: relative; z-index: 1; background: var(--white); border: var(--line) solid var(--g-200); margin: var(--s-5); max-width: 22rem; justify-self: start; align-self: end; text-align: left; justify-items: start; }

/* ---------- Pojavljivanje pri skrolanju ---------- */
.js [data-reveal] { opacity: 0; transform: translateY(1.5rem); transition: opacity 900ms cubic-bezier(.2, .7, .2, 1) var(--d, 0ms), transform 900ms cubic-bezier(.2, .7, .2, 1) var(--d, 0ms); }
.js [data-reveal].is-in { opacity: 1; transform: none; }

/* ---------- Brendovi ---------- */
.brands { display: grid; grid-template-columns: repeat(2, 1fr); border-top: var(--line) solid var(--g-200); border-left: var(--line) solid var(--g-200); }
.brand { display: grid; grid-template-columns: minmax(0, 1fr); grid-template-rows: auto 1fr; border-right: var(--line) solid var(--g-200); border-bottom: var(--line) solid var(--g-200); background: var(--white); }
.brand__media { aspect-ratio: 1; display: grid; place-items: center; padding: 12%; border-bottom: var(--line) solid var(--g-100); }
.brand__media img { width: 100%; height: 100%; object-fit: contain; transition: transform 400ms var(--ease); }
.brand:hover .brand__media img { transform: scale(1.03); }
.brand__body { display: grid; align-content: start; gap: var(--s-2); padding: var(--s-4); }
.brand__name { font-family: var(--f-head); font-size: var(--t-xl); font-weight: 800; letter-spacing: -.01em; }
.brand__meta { font-size: var(--t-sm); color: var(--g-500); font-variant-numeric: tabular-nums; }
.brand__body .link { justify-self: start; margin-top: var(--s-2); }

/* ---------- Kupujte po promjeru ---------- */
.dia { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 9.5rem), 1fr)); border-top: var(--line) solid var(--g-200); border-left: var(--line) solid var(--g-200); }
.dia__tile {
  position: relative; display: grid; align-content: space-between; gap: var(--s-4); min-height: 8.5rem; padding: var(--s-5) var(--s-4);
  border-right: var(--line) solid var(--g-200); border-bottom: var(--line) solid var(--g-200); background: var(--white);
  transition: background-color 240ms var(--ease), color 240ms var(--ease);
}
.dia__num { font-family: var(--f-head); font-size: clamp(1.75rem, 1.3rem + 1.1vw, 2.75rem); font-weight: 800; line-height: .95; letter-spacing: -.045em; font-variant-numeric: tabular-nums; }
.dia__num small { font-size: .42em; letter-spacing: 0; margin-left: .06em; vertical-align: .95em; }
.dia__meta { display: grid; gap: .1rem; font-size: var(--t-sm); color: var(--g-500); font-variant-numeric: tabular-nums; transition: color 240ms var(--ease); }
.dia__meta b { color: var(--ink); font-weight: 600; transition: color 240ms var(--ease); }
.dia__tile .i { position: absolute; bottom: var(--s-4); right: var(--s-4); color: var(--g-400); transition: color 240ms var(--ease), transform 240ms var(--ease); }
.dia__tile:hover, .dia__tile:focus-visible { background: var(--ink); color: var(--white); }
.dia__tile:hover .dia__meta, .dia__tile:focus-visible .dia__meta { color: var(--g-400); }
.dia__tile:hover .dia__meta b, .dia__tile:focus-visible .dia__meta b { color: var(--white); }
.dia__tile:hover .i, .dia__tile:focus-visible .i { color: var(--red); transform: translate(3px, -3px); }
.pcard__media img { transition: transform 600ms var(--ease); }
.pcard:hover .pcard__media img { transform: scale(1.045); }

/* ---------- Tabovi ---------- */
.tabs { display: inline-flex; gap: var(--s-5); border-bottom: var(--line) solid var(--g-200); }
.tab { position: relative; height: 2.75rem; font-family: var(--f-head); font-size: var(--t-xs); font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--g-500); transition: color var(--dur) var(--ease); }
.tab[aria-selected='true'] { color: var(--ink); }
.tab[aria-selected='true']::after { content: ''; position: absolute; left: 0; right: 0; bottom: -1px; height: 2px; background: var(--red); }

/* ---------- Kartica proizvoda ---------- */
.grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--s-4) var(--s-3); }
.pcard { display: grid; grid-template-columns: minmax(0, 1fr); grid-template-rows: auto 1fr; background: var(--white); border: var(--line) solid var(--g-200); border-radius: var(--r-2); overflow: hidden; transition: border-color var(--dur) var(--ease); }
.pcard:hover { border-color: var(--g-400); }
.pcard__media { position: relative; display: block; aspect-ratio: 1; background: var(--g-50); border-bottom: var(--line) solid var(--g-100); }
.pcard__media img { width: 100%; height: 100%; object-fit: contain; padding: 8%; mix-blend-mode: multiply; }
.pcard__body { display: flex; flex-direction: column; gap: var(--s-1); padding: var(--s-3); }
.pcard__brand { font-size: var(--t-2xs); font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--g-500); }
.pcard__title { font-family: var(--f-body); font-size: var(--t-sm); font-weight: 600; line-height: 1.35; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; min-height: 2.7em; }
.pcard__title a:hover { color: var(--red); }
.pcard__spec { font-size: var(--t-xs); color: var(--g-500); font-variant-numeric: tabular-nums; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.pcard__foot { display: flex; align-items: end; justify-content: space-between; gap: var(--s-2); margin-top: auto; padding-top: var(--s-3); }
.pcard__price strong { display: block; font-family: var(--f-head); font-size: var(--t-md); font-weight: 800; font-variant-numeric: tabular-nums; letter-spacing: -.01em; }
.pcard__price span { display: block; font-size: var(--t-2xs); color: var(--g-500); font-variant-numeric: tabular-nums; white-space: nowrap; }
.brand__meta span { display: block; white-space: nowrap; }
@media (min-width: 640px) {
  .pcard__per span, .brand__meta span { display: inline; }
  .pcard__per span + span::before, .brand__meta span + span::before { content: ' · '; }
}
.pcard__add { flex: none; width: 2.5rem; height: 2.5rem; display: grid; place-items: center; background: var(--ink); color: var(--white); border-radius: var(--r-1); transition: background-color var(--dur) var(--ease); }
.pcard__add:hover { background: var(--red); }
.pcard__add.is-done { background: var(--ok); }
.stock { display: inline-flex; align-items: center; gap: .4rem; font-size: var(--t-xs); font-weight: 600; margin-top: var(--s-2); }
.stock::before { content: ''; width: .45rem; height: .45rem; border-radius: 50%; background: currentColor; }
.stock--ok { color: var(--ok); }
.stock--low { color: var(--warn); }
.stock--none { color: var(--g-500); }

.skel { background: var(--g-100); animation: skel 1.1s ease-in-out infinite alternate; }
@keyframes skel { from { opacity: 1; } to { opacity: .55; } }
.pcard--skel .pcard__media { background: var(--g-100); }
.pcard--skel .skel-line { height: .75rem; margin-top: var(--s-2); }

/* ---------- O nama / činjenice ---------- */
.about { display: grid; gap: var(--s-7); align-items: center; }
.about__photo { aspect-ratio: 4 / 3; overflow: hidden; background: var(--g-100); }
.about__photo img { width: 100%; height: 100%; object-fit: cover; }
.about__text > p:not(.eyebrow) { margin-top: var(--s-4); color: var(--g-600); }
.facts { display: grid; grid-template-columns: repeat(2, 1fr); margin-top: var(--s-6); border-top: var(--line) solid var(--g-200); }
.fact { padding: var(--s-4) var(--s-4) var(--s-4) 0; border-bottom: var(--line) solid var(--g-200); }
.fact:nth-child(2n) { padding-left: var(--s-4); border-left: var(--line) solid var(--g-200); }
.fact__v { font-family: var(--f-head); font-size: var(--t-2xl); font-weight: 800; letter-spacing: -.02em; font-variant-numeric: tabular-nums; line-height: 1.1; }
.fact__l { font-size: var(--t-sm); color: var(--g-500); margin-top: var(--s-1); }

/* ---------- Posjetite nas ---------- */
.visit { display: grid; gap: var(--s-7); }
.visit__rows { margin-top: var(--s-6); border-top: var(--line) solid var(--g-200); }
.visit__row { display: grid; grid-template-columns: 2rem 1fr; gap: var(--s-3); padding: var(--s-4) 0; border-bottom: var(--line) solid var(--g-200); }
.visit__row .i { color: var(--red); margin-top: .1rem; }
.visit__k { font-size: var(--t-2xs); font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--g-500); }
.visit__v { font-weight: 500; margin-top: .1rem; }
.visit__v a:hover { color: var(--red); }
.hours { display: grid; grid-template-columns: auto auto; justify-content: start; gap: .15rem var(--s-6); font-size: var(--t-sm); margin-top: var(--s-1); font-variant-numeric: tabular-nums; }
.hours .is-today { font-weight: 700; }
.visit__actions { display: flex; flex-wrap: wrap; gap: var(--s-3); margin-top: var(--s-6); }
.map { position: relative; min-height: 20rem; background: var(--g-100); border: var(--line) solid var(--g-200); display: grid; place-items: center; text-align: center; }
.map iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }
.map__ph { display: grid; justify-items: center; gap: var(--s-3); padding: var(--s-6); }
.map__ph .i { font-size: 2.25rem; color: var(--red); }
.map__ph p { font-size: var(--t-sm); color: var(--g-500); max-width: 22rem; }

/* ---------- Footer ---------- */
.ftr { background: var(--ink); color: var(--g-400); font-size: var(--t-sm); }
.ftr__top { display: grid; gap: var(--s-7); padding-block: var(--s-9) var(--s-7); }
.ftr__logo img { height: 2rem; width: auto; }
.ftr__about { margin-top: var(--s-4); max-width: 22rem; line-height: 1.7; }
.ftr__social { display: flex; gap: var(--s-2); margin-top: var(--s-5); }
.ftr__social a { width: 2.5rem; height: 2.5rem; display: grid; place-items: center; border: var(--line) solid var(--ink-line); border-radius: var(--r-1); color: var(--g-300); transition: color var(--dur) var(--ease), border-color var(--dur) var(--ease); }
.ftr__social a:hover { color: var(--white); border-color: var(--g-600); }
.ftr__cols { display: grid; grid-template-columns: repeat(2, 1fr); gap: var(--s-6) var(--s-5); }
.ftr__h { font-family: var(--f-head); font-size: var(--t-2xs); font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: var(--white); margin-bottom: var(--s-4); }
.ftr__links { display: grid; gap: var(--s-2); }
.ftr__links a:hover { color: var(--white); }
.ftr__bottom { display: flex; flex-wrap: wrap; justify-content: space-between; gap: var(--s-3) var(--s-6); padding-block: var(--s-5); border-top: var(--line) solid var(--ink-line); font-size: var(--t-xs); }
.ftr__pay { display: inline-flex; align-items: center; gap: var(--s-2); }
.ftr__pay .i { font-size: 1.05rem; }

/* ---------- Donja traka (mobitel) ---------- */
.bar {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 80;
  display: grid; grid-template-columns: repeat(5, 1fr);
  height: calc(var(--bar-h) + env(safe-area-inset-bottom)); padding-bottom: env(safe-area-inset-bottom);
  background: var(--ink); border-top: var(--line) solid var(--ink-line);
}
.bar__item { position: relative; display: grid; justify-items: center; align-content: center; gap: .15rem; color: var(--g-400); font-size: var(--t-2xs); font-weight: 600; letter-spacing: .02em; }
.bar__item .i { font-size: 1.5rem; }
.bar__item[aria-current='page'], .bar__item[aria-expanded='true'] { color: var(--white); }
.bar__item[aria-current='page']::before, .bar__item[aria-expanded='true']::before { content: ''; position: absolute; top: -1px; left: 30%; right: 30%; height: 2px; background: var(--red); }
.bar__icon { position: relative; display: inline-grid; }
body.has-bar { padding-bottom: calc(var(--bar-h) + env(safe-area-inset-bottom)); }

/* ---------- Genie meni (mobitel) ---------- */
.genie {
  position: fixed; z-index: 79; left: .75rem; right: .75rem;
  bottom: calc(var(--bar-h) + env(safe-area-inset-bottom) + .75rem);
  max-height: calc(100svh - var(--bar-h) - 5rem); overflow: auto; overscroll-behavior: contain;
  background: var(--ink-2); color: var(--white); border: var(--line) solid var(--ink-line); border-radius: 6px;
  visibility: hidden;
}
.genie.is-open { visibility: visible; }
.genie__head { display: flex; align-items: center; justify-content: space-between; padding: var(--s-3) var(--s-3) var(--s-3) var(--s-5); border-bottom: var(--line) solid var(--ink-line); }
.genie__title { font-family: var(--f-head); font-size: var(--t-xs); font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: var(--g-400); }
.genie__nav a { display: flex; align-items: center; justify-content: space-between; padding: var(--s-4) var(--s-5); font-family: var(--f-head); font-size: var(--t-lg); font-weight: 700; border-bottom: var(--line) solid var(--ink-line); }
.genie__nav a .i { color: var(--g-600); }
.genie__nav a[aria-current='page'] { color: var(--red); }
.genie__sub { display: grid; grid-template-columns: 1fr 1fr; border-bottom: var(--line) solid var(--ink-line); }
.genie__sub a { padding: var(--s-3) var(--s-5); font-size: var(--t-sm); color: var(--g-300); }
.genie__sub a:nth-child(2n) { border-left: var(--line) solid var(--ink-line); }
.genie__contact { display: grid; grid-template-columns: repeat(3, 1fr); }
.genie__contact a { display: grid; justify-items: center; gap: var(--s-1); padding: var(--s-4) var(--s-2); font-size: var(--t-xs); font-weight: 600; color: var(--g-300); }
.genie__contact a + a { border-left: var(--line) solid var(--ink-line); }
.genie__contact .bi { width: 1.375rem; height: 1.375rem; }
.genie__status { padding: var(--s-3) var(--s-5); border-top: var(--line) solid var(--ink-line); font-size: var(--t-xs); color: var(--g-400); }
/* Isječci koje genie animacija koristi tokom otvaranja/zatvaranja */
.genie-fx { position: fixed; inset: 0; z-index: 81; pointer-events: none; }
.genie-fx__slice { position: absolute; overflow: hidden; transform-origin: 0 0; will-change: transform; }
.genie-fx__slice > .genie { position: absolute; visibility: visible; left: 0 !important; right: auto !important; bottom: auto !important; max-height: none; overflow: hidden; }

/* ---------- Hero: gornji red (Google ocjena, mreže) i lista dimenzija ---------- */
.hero__top { justify-content: space-between; }
.hero__top-l { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s-3) var(--s-6); }
.hero__social { display: none; align-items: center; gap: var(--s-2); }
.gbadge { display: inline-flex; align-items: center; gap: var(--s-2); height: 2.25rem; padding: 0 var(--s-3); background: var(--white); color: var(--ink); border-radius: var(--r-1); font-size: var(--t-xs); transition: background-color var(--dur) var(--ease); }
.gbadge:hover { background: var(--g-100); }
.gbadge .g-logo { width: 1.05rem; height: 1.05rem; }
.gbadge__score { font-family: var(--f-head); font-weight: 800; font-size: var(--t-sm); }
.gbadge__stars { display: inline-flex; color: #FBBC04; }
.gbadge__stars .i { font-size: .95rem; width: .95rem; }
.gbadge__n { color: var(--g-600); font-weight: 500; }
.hero__sep { width: var(--line); height: 1.5rem; background: rgba(255, 255, 255, .25); margin-inline: var(--s-2); }
.soc-ico { width: 2.25rem; height: 2.25rem; display: grid; place-items: center; color: var(--white); border: var(--line) solid rgba(255, 255, 255, .3); border-radius: var(--r-1); transition: border-color var(--dur) var(--ease), background-color var(--dur) var(--ease); }
.soc-ico:hover { border-color: var(--white); background: rgba(255, 255, 255, .1); }
.soc-ico .bi { width: 1rem; height: 1rem; }
.g-logo { display: inline-block; flex: none; }

.hero__body { display: flex; align-items: flex-end; justify-content: space-between; gap: var(--s-8); }
.hero__text { flex: 1 1 auto; min-width: 0; }
.hero__side { display: none; }
.hd { grid-area: 1 / 1; align-self: end; visibility: hidden; }
.hd.is-active, .hd.is-out { visibility: visible; }
.hd__title { font-size: var(--t-2xs); font-weight: 700; letter-spacing: .14em; text-transform: uppercase; color: rgba(255, 255, 255, .72); padding-bottom: var(--s-3); border-bottom: var(--line) solid rgba(255, 255, 255, .3); }
.hd__list li { opacity: 0; transform: translateX(1.25rem); }
.hd.is-active .hd__list li { opacity: 1; transform: none; transition: opacity 700ms var(--ease) var(--d, 0ms), transform 700ms var(--ease) var(--d, 0ms); }
.hd.is-out .hd__list li { opacity: 0; transition: opacity 250ms var(--ease); }
.hd__row { display: grid; grid-template-columns: 3.25rem 1fr auto .5rem; align-items: center; gap: var(--s-3); padding: var(--s-3) 0; border-bottom: var(--line) solid rgba(255, 255, 255, .16); transition: background-color var(--dur) var(--ease), padding var(--dur) var(--ease); }
.hd__row:hover { background: rgba(255, 255, 255, .06); padding-inline: var(--s-2); }
.hd__dim { font-family: var(--f-head); font-size: var(--t-xl); font-weight: 800; letter-spacing: -.02em; }
.hd__info { font-size: var(--t-xs); color: rgba(255, 255, 255, .72); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.hd__price { font-family: var(--f-head); font-size: var(--t-sm); font-weight: 700; white-space: nowrap; }
.hd__dot { width: .5rem; height: .5rem; border-radius: 50%; background: rgba(255, 255, 255, .28); }
.hd__dot[data-ok] { background: #34C267; }
.hd__more { display: inline-flex; align-items: center; gap: var(--s-1); margin-top: var(--s-3); font-size: var(--t-xs); font-weight: 600; color: rgba(255, 255, 255, .85); }
.hd__more:hover { color: var(--white); }

/* ---------- Pretraga po dimenziji ---------- */
.dimf-sec { border-bottom: var(--line) solid var(--g-200); }
.seg--lg .seg__btn { height: 2.75rem; padding: 0 var(--s-6); font-size: var(--t-sm); }
.dimf-sec .finder__pop { margin-top: var(--s-6); }
.dimf-sec .finder__pop-label { margin-right: var(--s-2); }
.dimf__dia { margin-top: var(--s-7); }
.dimf__dia .finder__pop-label { display: block; margin-bottom: var(--s-3); }

/* ---------- Servis: mozaik s pravim fotografijama ---------- */
.svc2__head { display: grid; gap: var(--s-5); margin-bottom: clamp(2rem, 1.5rem + 2vw, 3rem); }
.svc2__head .h2 { margin-top: var(--s-3); }
.svc2__head .lead { margin-top: var(--s-4); color: var(--g-400); }
.svc2__cta { display: grid; gap: var(--s-3); align-content: end; justify-items: start; color: var(--g-300); font-size: var(--t-sm); }
.svc2__btns { display: flex; flex-wrap: wrap; gap: var(--s-3); }
.mosaic { display: grid; grid-template-columns: minmax(0, 1fr); gap: .5rem; }
.tile { position: relative; display: block; overflow: hidden; min-height: 16rem; background: var(--ink-2); color: var(--white); }
.tile > img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; transition: transform 900ms cubic-bezier(.2, .7, .2, 1); }
a.tile:hover > img { transform: scale(1.06); }
.tile__cap { position: absolute; left: 0; bottom: 0; max-width: calc(100% - 3rem); display: grid; gap: .2rem; padding: var(--s-3) var(--s-4); background: var(--ink); }
.tile__n { font-size: var(--t-2xs); font-weight: 600; letter-spacing: .12em; color: var(--red); font-variant-numeric: tabular-nums; }
.tile__t { font-family: var(--f-head); font-size: var(--t-md); font-weight: 800; letter-spacing: -.01em; line-height: 1.2; }
.tile__d { font-size: var(--t-xs); color: var(--g-400); max-width: 26rem; }
.tile--xl .tile__cap { padding: var(--s-5); }
.tile--xl .tile__t { font-size: var(--t-xl); }
.tile--xl .tile__d { font-size: var(--t-sm); }
.tile__more { display: inline-flex; align-items: center; gap: var(--s-1); margin-top: var(--s-2); font-size: var(--t-sm); font-weight: 600; }
.tile__more .i { font-size: 1.1rem; transition: transform var(--dur) var(--ease); }
a.tile:hover .tile__more .i { transform: translateX(3px); }
.tile--book { display: grid; align-content: space-between; gap: var(--s-5); padding: var(--s-6); background: var(--red); }
.tile--book .tile__t { font-size: var(--t-2xl); }
.tile__hours { display: grid; grid-template-columns: auto auto; justify-content: start; gap: .25rem var(--s-6); font-size: var(--t-sm); }
.tile__hours dt { color: rgba(255, 255, 255, .8); }
.tile__hours dd { margin: 0; font-weight: 600; }
.tile__hours .is-today { color: var(--white); font-weight: 800; }
.tile__actions { display: flex; flex-wrap: wrap; gap: var(--s-3); }
.btn--white { background: var(--white); color: var(--ink); }
.btn--white:hover { background: var(--g-100); }
.tile--book .btn--line-light { border-color: rgba(255, 255, 255, .7); }
.steps { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); margin-top: clamp(2.5rem, 2rem + 2vw, 4rem); border-top: var(--line) solid var(--ink-line); counter-reset: none; }
.steps li { padding: var(--s-5) var(--s-4) var(--s-5) 0; border-bottom: var(--line) solid var(--ink-line); }
.steps li:nth-child(2n) { padding-left: var(--s-4); border-left: var(--line) solid var(--ink-line); }
.steps__n { font-family: var(--f-head); font-size: var(--t-2xl); font-weight: 800; color: var(--red); letter-spacing: -.02em; }
.steps__t { font-family: var(--f-head); font-size: var(--t-md); font-weight: 700; margin-top: var(--s-2); }
.steps__d { font-size: var(--t-sm); color: var(--g-400); margin-top: var(--s-1); }

/* ---------- Google recenzije ---------- */
.reviews__grid { display: grid; gap: var(--s-8); }
.reviews__score { border: var(--line) solid var(--g-200); border-radius: var(--r-2); padding: clamp(1.5rem, 1rem + 2vw, 2.75rem); }
.reviews__brand { display: flex; align-items: center; gap: var(--s-3); font-family: var(--f-head); font-weight: 700; font-size: var(--t-md); }
.reviews__brand .g-logo { width: 1.75rem; height: 1.75rem; }
.reviews__big { display: flex; align-items: center; gap: var(--s-5); margin-top: var(--s-5); }
.reviews__num { font-family: var(--f-head); font-size: clamp(3.75rem, 2.8rem + 3vw, 5.75rem); font-weight: 800; letter-spacing: -.045em; line-height: .9; }
.stars--google { color: #FBBC04; }
.stars--google .i { font-size: 1.6rem; width: 1.6rem; }
.reviews__cnt { font-size: var(--t-sm); color: var(--g-600); margin-top: var(--s-1); }
.bars { display: grid; gap: .45rem; margin-top: var(--s-6); }
.bars li { display: grid; grid-template-columns: 1rem 1fr 1.5rem; align-items: center; gap: var(--s-3); font-size: var(--t-sm); color: var(--g-600); }
.bars__bar { position: relative; height: .5rem; background: var(--g-100); border-radius: 1px; overflow: hidden; }
.bars__bar i { position: absolute; inset: 0 auto 0 0; width: 0; background: #FBBC04; transition: width 1100ms cubic-bezier(.2, .7, .2, 1) 300ms; }
.reviews__score.is-in .bars__bar i, html:not(.js) .bars__bar i { width: var(--w); }
.bars__v { text-align: right; }
.reviews__note { display: flex; gap: var(--s-2); align-items: flex-start; margin: var(--s-6) 0 var(--s-5); padding-top: var(--s-5); border-top: var(--line) solid var(--g-100); font-size: var(--t-sm); color: var(--g-700); }
.reviews__note .i { color: #1E7B3C; font-size: 1.25rem; }
.reviews__cta .h2 { margin-top: var(--s-3); }
.reviews__cta .lead { margin-top: var(--s-4); }
.reviews__actions { display: flex; flex-wrap: wrap; gap: var(--s-3); margin-top: var(--s-6); }
.gchip { display: inline-grid; place-items: center; width: 1.75rem; height: 1.75rem; background: var(--white); border-radius: 1px; margin-left: calc(-1 * var(--s-2)); }
.gchip .g-logo { width: 1.15rem; height: 1.15rem; }
.qr { display: none; align-items: center; gap: var(--s-5); margin-top: var(--s-7); padding: var(--s-5); border: var(--line) dashed var(--g-300); border-radius: var(--r-2); max-width: 30rem; }
.qr img { width: 7.5rem; height: 7.5rem; flex: none; }
.qr p { font-size: var(--t-sm); color: var(--g-600); }
.qr b { display: block; color: var(--ink); font-size: var(--t-md); margin-bottom: .2rem; }

/* ---------- Društvene mreže ---------- */
.soc { display: grid; gap: var(--s-4); }
.soc__card { display: grid; gap: var(--s-2); padding: var(--s-6); background: var(--white); border: var(--line) solid var(--g-200); border-radius: var(--r-2); transition: border-color var(--dur) var(--ease); }
.soc__card:hover { border-color: var(--ink); }
.soc__top { display: flex; align-items: center; justify-content: space-between; margin-bottom: var(--s-4); }
.soc__icon { width: 3.25rem; height: 3.25rem; display: grid; place-items: center; background: var(--ink); color: var(--white); border-radius: var(--r-1); transition: background-color 260ms var(--ease); }
.soc__icon .bi { width: 1.5rem; height: 1.5rem; }
.soc__card--fb:hover .soc__icon { background: #1877F2; }
.soc__card--ig:hover .soc__icon { background: #E4405F; }
.soc__card--tt:hover .soc__icon { background: #000000; }
.soc__stat { font-size: var(--t-sm); color: var(--g-500); }
.soc__stat b { font-family: var(--f-head); font-size: var(--t-xl); font-weight: 800; color: var(--ink); letter-spacing: -.02em; }
.soc__name { font-family: var(--f-head); font-size: var(--t-xl); font-weight: 800; }
.soc__handle { font-size: var(--t-sm); font-weight: 600; color: var(--red); }
.soc__desc { font-size: var(--t-sm); color: var(--g-600); }
.soc__btn { display: inline-flex; align-items: center; gap: var(--s-1); margin-top: var(--s-4); font-size: var(--t-sm); font-weight: 700; }
.soc__btn .i { font-size: 1.1rem; transition: transform var(--dur) var(--ease); }
.soc__card:hover .soc__btn .i { transform: translateX(3px); }

/* ---------- Genie: mreže ---------- */
.genie__social { display: flex; align-items: center; gap: var(--s-2); padding: var(--s-3) var(--s-5); border-top: var(--line) solid var(--ink-line); }
.genie__social a { width: 2.5rem; height: 2.5rem; display: grid; place-items: center; border: var(--line) solid var(--ink-line); border-radius: var(--r-1); color: var(--g-300); }
.genie__social .bi { width: 1.1rem; height: 1.1rem; }
.genie__social .genie__g { width: auto; display: inline-flex; gap: var(--s-2); padding: 0 var(--s-3); margin-left: auto; font-size: var(--t-xs); font-weight: 600; color: var(--white); }
.genie__g .g-logo { width: 1rem; height: 1rem; }

/* =====================================================================
   Dorada: prelom teksta, obavještenja, kolačići, boje brendova, "živost"
   ===================================================================== */

/* Naslovi se lome ravnomjerno (bez jedne riječi u zadnjem redu), tekst bez "udovica" */
h1, h2, h3, .h2, .lead, .hs__model, .hs__lead, .tile__t, .soc__name, .fp__title, .steps__t, .brand__name, .reviews__cta .h2 { text-wrap: balance; }
p, .tile__d, .soc__desc, .steps__d, .pcard__title { text-wrap: pretty; }

/* ---------- Obavještenja (toast) ---------- */
.toasts { position: fixed; z-index: 120; right: var(--s-5); bottom: var(--s-5); display: grid; gap: var(--s-2); width: min(24rem, calc(100vw - 2rem)); pointer-events: none; }
body.has-bar .toasts { right: 1rem; bottom: calc(var(--bar-h) + env(safe-area-inset-bottom) + var(--s-3)); }
.tst {
  position: relative; overflow: hidden; pointer-events: auto;
  display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: var(--s-3);
  padding: var(--s-3) var(--s-2) var(--s-3) var(--s-3); background: var(--ink); color: var(--white);
  border: var(--line) solid var(--ink-line); border-radius: var(--r-2); font-size: var(--t-sm); line-height: 1.4;
  animation: tst-in 360ms cubic-bezier(.2, .8, .2, 1) both;
}
.tst.is-out { animation: tst-out 260ms var(--ease) forwards; }
.tst__ico { width: 2rem; height: 2rem; display: grid; place-items: center; border-radius: var(--r-1); background: var(--red); }
.tst__ico .i { font-size: 1.15rem; }
.tst--ok .tst__ico { background: #1E7B3C; }
.tst--err .tst__ico { background: var(--red-700); }
.tst__msg a { color: var(--white); font-weight: 700; text-decoration: underline; text-underline-offset: 3px; margin-left: .25rem; white-space: nowrap; }
.tst__x { width: 2rem; height: 2rem; display: grid; place-items: center; color: var(--g-400); border-radius: var(--r-1); }
.tst__x:hover { color: var(--white); background: var(--ink-3); }
.tst__x .i { font-size: 1.1rem; }
.tst__bar { position: absolute; left: 0; right: 0; bottom: 0; height: 2px; background: rgba(255, 255, 255, .12); }
.tst__bar i { position: absolute; inset: 0; background: var(--red); transform-origin: left; animation: tst-bar var(--t, 4000ms) linear forwards; }
.tst--ok .tst__bar i { background: #34C267; }
.tst:hover .tst__bar i { animation-play-state: paused; }
@keyframes tst-in { from { opacity: 0; transform: translateY(1rem) scale(.98); } to { opacity: 1; transform: none; } }
@keyframes tst-out { to { opacity: 0; transform: translateY(.5rem) scale(.98); } }
@keyframes tst-bar { from { transform: scaleX(1); } to { transform: scaleX(0); } }

/* ---------- Kolačići: prozor na zatamnjenoj pozadini ---------- */
.cmodal { position: fixed; inset: 0; z-index: 110; display: grid; align-items: end; justify-items: center; padding: var(--s-3); background: rgba(10, 10, 10, .6); animation: cm-fade 300ms var(--ease) both; }
.cmodal.is-out { animation: cm-fade-out 260ms var(--ease) forwards; }
.cmodal__box { width: min(40rem, 100%); max-height: calc(100svh - 1.5rem); overflow: auto; background: var(--white); color: var(--ink); border-radius: var(--r-2); padding: var(--s-6); animation: cm-up 420ms cubic-bezier(.2, .8, .2, 1) both; }
.cmodal.is-out .cmodal__box { animation: cm-down 260ms var(--ease) forwards; }
.cmodal__head { display: flex; align-items: center; gap: var(--s-4); }
.cmodal__ico { width: 3rem; height: 3rem; display: grid; place-items: center; background: var(--red-50); color: var(--red); border-radius: var(--r-1); }
.cmodal__ico .i { font-size: 1.6rem; }
.cmodal__t { font-family: var(--f-head); font-size: var(--t-xl); font-weight: 800; letter-spacing: -.01em; }
.cmodal__s { font-size: var(--t-xs); color: var(--g-500); }
.cmodal__text { margin-top: var(--s-4); font-size: var(--t-sm); color: var(--g-600); }
.cmodal__opts { display: grid; margin-top: var(--s-5); border-top: var(--line) solid var(--g-100); }
.copt { display: grid; grid-template-columns: 1fr auto; gap: var(--s-1) var(--s-4); align-items: center; padding: var(--s-4) 0; border-bottom: var(--line) solid var(--g-100); }
.copt__t { font-weight: 700; font-size: var(--t-sm); }
.copt__d { grid-column: 1; font-size: var(--t-xs); color: var(--g-500); }
.copt .switch { grid-row: 1 / span 2; grid-column: 2; }
.cmodal__actions { display: grid; grid-template-columns: 1fr; gap: var(--s-2); margin-top: var(--s-6); }
.cmodal__actions .btn { width: 100%; }
.cmodal__foot { display: flex; justify-content: space-between; gap: var(--s-3); margin-top: var(--s-4); font-size: var(--t-xs); color: var(--g-500); }
.cmodal__foot a { text-decoration: underline; text-underline-offset: 3px; }
@keyframes cm-fade { from { opacity: 0; } to { opacity: 1; } }
@keyframes cm-fade-out { to { opacity: 0; } }
@keyframes cm-up { from { opacity: 0; transform: translateY(2rem); } to { opacity: 1; transform: none; } }
@keyframes cm-down { to { opacity: 0; transform: translateY(1rem); } }
html { scrollbar-gutter: stable; }
html.cm-lock { overflow: hidden; }
.ftr__btn { color: inherit; text-align: left; }
.ftr__btn:hover { color: var(--white); }

/* ---------- Prekidač ---------- */
.switch { display: inline-flex; align-items: center; gap: var(--s-3); font-size: var(--t-sm); color: var(--g-700); cursor: pointer; user-select: none; }
.switch input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.switch__ui { position: relative; flex: none; width: 2.5rem; height: 1.4rem; background: var(--g-300); border-radius: 1rem; transition: background-color 200ms var(--ease); }
.switch__ui::after { content: ''; position: absolute; top: .2rem; left: .2rem; width: 1rem; height: 1rem; background: var(--white); border-radius: 50%; transition: transform 220ms cubic-bezier(.2, .8, .2, 1); }
.switch input:checked + .switch__ui { background: var(--red); }
.switch input:checked + .switch__ui::after { transform: translateX(1.1rem); }
.switch input:focus-visible + .switch__ui { outline: 2px solid var(--red); outline-offset: 2px; }
.switch input:disabled + .switch__ui { background: #1E7B3C; opacity: .6; }

/* ---------- Boje brendova (samo gdje ima smisla) ---------- */
.btn--wa .bi { color: #25D366; }
.btn--viber .bi { color: #7360F2; }
.btn--wa:hover { background: #25D366; border-color: #25D366; color: var(--white); }
.btn--viber:hover { background: #7360F2; border-color: #7360F2; color: var(--white); }
.btn--wa:hover .bi, .btn--viber:hover .bi { color: var(--white); }
.tile--book .btn--viber .bi { color: var(--white); }
.soc-ico--fb:hover, .s-fb:hover { background: #1877F2 !important; border-color: #1877F2 !important; color: var(--white) !important; }
.soc-ico--ig:hover, .s-ig:hover { background: #E4405F !important; border-color: #E4405F !important; color: var(--white) !important; }
.soc-ico--tt:hover, .s-tt:hover { background: #000 !important; border-color: #FE2C55 !important; color: var(--white) !important; }
.s-wa:hover { background: #25D366 !important; border-color: #25D366 !important; color: var(--white) !important; }
.s-viber:hover { background: #7360F2 !important; border-color: #7360F2 !important; color: var(--white) !important; }
.genie__contact a:nth-child(2) .bi { color: #25D366; }
.genie__contact a:nth-child(3) .bi { color: #7360F2; }

/* ---------- Kopiraj ---------- */
.copy { display: inline-flex; align-items: center; gap: .25rem; margin-left: var(--s-2); padding: .15rem .45rem; font-size: var(--t-xs); font-weight: 600; color: var(--g-600); border: var(--line) solid var(--g-200); border-radius: var(--r-1); vertical-align: middle; transition: border-color var(--dur) var(--ease), color var(--dur) var(--ease); }
.copy .i { font-size: .95rem; }
.copy:hover { border-color: var(--ink); color: var(--ink); }

/* ---------- Servis na svijetloj pozadini ---------- */
.svc2 .lead { color: var(--g-600); }
.svc2__cta { color: var(--g-600); }
.svc2 { --ink-line: var(--g-200); }
.svc2 .steps__d { color: var(--g-600); }

/* ---------- "Živost" kartica ---------- */
.pcard { position: relative; transition: border-color var(--dur) var(--ease), transform 320ms cubic-bezier(.2, .8, .2, 1); }
.pcard::before { content: ''; position: absolute; left: 0; right: 0; top: 0; height: 2px; background: var(--red); transform: scaleX(0); transform-origin: left; transition: transform 420ms cubic-bezier(.2, .8, .2, 1); z-index: 1; }
.pcard:hover { transform: translateY(-3px); }
.pcard:hover::before { transform: scaleX(1); }
.pcard__brand { transition: color var(--dur) var(--ease); }
.pcard:hover .pcard__brand { color: var(--red); }
.pcard__add { transition: background-color var(--dur) var(--ease), transform 200ms var(--ease); }
.pcard__add:active { transform: scale(.92); }
.stock--low::before { animation: stock-pulse 1.8s ease-in-out infinite; }
@keyframes stock-pulse { 50% { opacity: .35; } }

.brand__media img { transition: transform 1100ms cubic-bezier(.2, .8, .2, 1); }
.brand:hover .brand__media img { transform: rotate(28deg) scale(1.03); }
.brand__name { transition: color var(--dur) var(--ease); }
.brand:hover .brand__name { color: var(--red); }
.brand .link .i, .soc__btn .i, .tile__more .i { transition: transform var(--dur) var(--ease); }
.brand:hover .link .i { transform: translateX(4px); }

.dia__num { transition: transform 320ms cubic-bezier(.2, .8, .2, 1), color 240ms var(--ease); }
.dia__tile:hover .dia__num { transform: translateY(-3px); }

.soc__card { position: relative; overflow: hidden; }
.soc__card::before { content: ''; position: absolute; left: 0; right: 0; top: 0; height: 3px; background: var(--brand, var(--ink)); transform: scaleX(0); transform-origin: left; transition: transform 420ms cubic-bezier(.2, .8, .2, 1); }
.soc__card:hover::before { transform: scaleX(1); }
.soc__card--fb { --brand: #1877F2; }
.soc__card--ig { --brand: #E4405F; }
.soc__card--tt { --brand: #FE2C55; }
.soc__card:hover .soc__handle { color: var(--brand); }

.tile__cap::before { content: ''; position: absolute; left: 0; right: 0; top: 0; height: 2px; background: var(--red); transform: scaleX(0); transform-origin: left; transition: transform 420ms cubic-bezier(.2, .8, .2, 1); }
a.tile:hover .tile__cap::before { transform: scaleX(1); }
.steps li { transition: background-color var(--dur) var(--ease); }

/* ---------- Birač dimenzija ---------- */
.picker { display: grid; gap: var(--s-4); }
.picker__sum { display: grid; gap: var(--s-4); align-content: start; padding: var(--s-6); background: var(--ink); color: var(--white); border-radius: var(--r-2); }
.picker__k { font-size: var(--t-2xs); font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: var(--g-400); }
.picker__size { display: flex; align-items: baseline; flex-wrap: nowrap; gap: .3rem; font-family: var(--f-head); font-size: clamp(1.9rem, 1.5rem + 1.2vw, 2.6rem); font-weight: 800; letter-spacing: -.03em; line-height: 1; white-space: nowrap; }
.picker__size .ps { display: inline-block; min-width: 1.4ch; color: var(--g-700); transition: color 240ms var(--ease); }
.picker__size .ps.is-set { color: var(--white); animation: ps-pop 380ms cubic-bezier(.2, .8, .2, 1); }
.picker__size .pd { color: var(--red); font-weight: 700; }
@keyframes ps-pop { from { transform: translateY(.35em); opacity: 0; } to { transform: none; opacity: 1; } }
.picker__season { display: flex; flex-wrap: wrap; gap: var(--s-2); }
.picker__season button { height: 2rem; padding: 0 var(--s-3); font-size: var(--t-xs); font-weight: 600; color: var(--g-300); border: var(--line) solid var(--ink-line); border-radius: 1rem; transition: background-color var(--dur) var(--ease), color var(--dur) var(--ease), border-color var(--dur) var(--ease); }
.picker__season button:hover { border-color: var(--g-600); color: var(--white); }
.picker__season button[aria-pressed='true'] { background: var(--white); color: var(--ink); border-color: var(--white); }
.picker__sum .switch { color: var(--g-300); }
.picker__sum .switch__ui { background: var(--g-700); }
.picker__res { font-size: var(--t-sm); color: var(--g-400); padding-top: var(--s-4); border-top: var(--line) solid var(--ink-line); }
.picker__res b { font-family: var(--f-head); font-size: var(--t-xl); color: var(--white); letter-spacing: -.02em; }
.picker__res-ns b { font-size: var(--t-md); color: #34C267; }
.picker__go { width: 100%; }
.picker__reset { display: inline-flex; align-items: center; gap: var(--s-1); justify-self: start; font-size: var(--t-xs); font-weight: 600; color: var(--g-400); }
.picker__reset:hover { color: var(--white); }
.picker__reset .i { font-size: 1rem; }
.picker__hint { font-size: var(--t-xs); color: var(--g-400); }
.picker__hint .i { font-size: 1rem; color: var(--red); vertical-align: -.2em; margin-right: .3rem; }
.picker__hint b { color: var(--white); }

.picker__cols { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--s-4); }
.pcol { display: grid; grid-template-rows: auto 1fr; min-width: 0; background: var(--white); border: var(--line) solid var(--g-200); border-radius: var(--r-2); overflow: hidden; }
.pcol__h { display: flex; align-items: center; justify-content: space-between; gap: var(--s-2); padding: var(--s-3) var(--s-4); border-bottom: var(--line) solid var(--g-100); }
.pcol__t { display: flex; align-items: center; gap: var(--s-2); font-family: var(--f-head); font-size: var(--t-sm); font-weight: 800; }
.pcol__step { width: 1.5rem; height: 1.5rem; display: grid; place-items: center; font-size: var(--t-2xs); font-weight: 700; background: var(--g-100); color: var(--g-600); border-radius: 50%; transition: background-color var(--dur) var(--ease), color var(--dur) var(--ease); }
.pcol.is-set .pcol__step { background: var(--red); color: var(--white); }
.pcol__n { font-size: var(--t-xs); color: var(--g-500); }
.pcol__list { display: grid; grid-template-columns: repeat(auto-fill, minmax(4.25rem, 1fr)); align-content: start; gap: .375rem; padding: var(--s-3); max-height: 15.5rem; overflow: auto; scrollbar-width: thin; scrollbar-color: var(--g-300) transparent; }
.pchip {
  display: grid; justify-items: center; gap: .05rem; padding: .5rem .25rem; border: var(--line) solid var(--g-200); border-radius: var(--r-1); background: var(--white);
  transition: border-color var(--dur) var(--ease), background-color var(--dur) var(--ease), color var(--dur) var(--ease), transform 160ms var(--ease);
  animation: pchip-in 320ms cubic-bezier(.2, .8, .2, 1) both; animation-delay: var(--d, 0ms);
}
.pchip:hover { border-color: var(--ink); }
.pchip:active { transform: scale(.95); }
.pchip b { font-family: var(--f-head); font-size: var(--t-md); font-weight: 800; letter-spacing: -.01em; font-variant-numeric: tabular-nums; }
.pchip small { font-size: var(--t-2xs); color: var(--g-500); font-variant-numeric: tabular-nums; }
.pchip[aria-pressed='true'] { background: var(--ink); border-color: var(--ink); color: var(--white); }
.pchip[aria-pressed='true'] small { color: var(--g-400); }
@keyframes pchip-in { from { opacity: 0; transform: translateY(.35rem); } to { opacity: 1; transform: none; } }
.pcol--wide .pcol__list { grid-template-columns: repeat(auto-fill, minmax(5.5rem, 1fr)); }

.picker { scroll-margin-top: calc(var(--header-h) + var(--s-4)); }
.finder__pop .chip { cursor: pointer; }
.finder__pop .chip:active { transform: scale(.97); }
@media (max-width: 1099px) {
  .picker__sum { order: 2; }
}
@media (min-width: 640px) and (max-width: 1099px) {
  .picker__sum { grid-template-columns: minmax(0, 1fr) minmax(0, 17rem); column-gap: var(--s-7); }
  .picker__sum > * { grid-column: 1; }
  .picker__res, .picker__go, .picker__reset { grid-column: 2; }
  .picker__res { grid-row: 1 / span 2; align-self: end; border-top: 0; padding-top: 0; }
  .picker__go { grid-row: 3; }
  .picker__reset { grid-row: 4; }
}
@media (max-width: 639px) {
  .pcol__list { grid-auto-flow: column; grid-template-rows: repeat(2, auto); grid-template-columns: none; grid-auto-columns: 4.5rem; overflow-x: auto; max-height: none; overscroll-behavior-x: contain; scroll-snap-type: x proximity; }
  .pcol--wide .pcol__list { grid-template-columns: none; grid-auto-columns: 5.75rem; }
  .pchip { scroll-snap-align: start; }
  .pcol__list.is-few { grid-template-rows: auto; }
}
@media (max-width: 479px) {
  .visit__actions { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .visit__actions .btn { width: 100%; padding-inline: var(--s-3); }
  .visit__actions .btn:first-child { grid-column: 1 / -1; }
  .steps { grid-template-columns: minmax(0, 1fr); }
  .steps li, .steps li:nth-child(2n) { display: grid; grid-template-columns: 2.75rem minmax(0, 1fr); column-gap: var(--s-3); padding: var(--s-4) 0; border-left: 0; }
  .steps__n { grid-row: span 2; font-size: var(--t-xl); line-height: 1.1; }
  .steps__t { margin-top: 0; }
  .picker__sum { padding: var(--s-5); }
}
@media (min-width: 640px) {
  .cmodal { align-items: center; }
  .cmodal__actions { display: flex; flex-wrap: wrap; }
  .cmodal__actions .btn { width: auto; flex: 1 1 auto; padding-inline: var(--s-5); }
  .picker__cols { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
@media (min-width: 1100px) {
  .picker { grid-template-columns: minmax(0, 20rem) minmax(0, 1fr); gap: var(--s-5); }
  .pcol { display: flex; flex-direction: column; }
  .pcol__list { flex: 1 1 0; contain: size; max-height: none; min-height: 12rem; }
}
@media (prefers-reduced-motion: reduce) {
  .brand:hover .brand__media img { transform: none; }
  .pchip, .tst, .cmodal, .cmodal__box { animation: none !important; }
}

/* =====================================================================
   Veći ekrani
   ===================================================================== */
@media (min-width: 640px) {
  .qr { display: flex; }
  .mosaic { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .tile--xl, .tile--wide, .tile--book { grid-column: span 2; }
  .tile--xl { min-height: 26rem; }
  .grid { gap: var(--s-5) var(--s-4); }
  .pcard__body { padding: var(--s-4); }
  .facts { grid-template-columns: repeat(4, 1fr); }
  .fact:nth-child(2n) { padding-left: 0; border-left: 0; }
  .fact + .fact { padding-left: var(--s-4); border-left: var(--line) solid var(--g-200); }
  .ftr__cols { grid-template-columns: repeat(4, 1fr); }

  .hero__rail-inner { gap: var(--s-6); }
  .hero__phone { display: inline-flex; }
  .hero__count { display: inline; }
  .hs__stats { grid-template-columns: repeat(4, auto); justify-content: start; }
  .hs__stats > div,
  .hs__stats > div:nth-child(2n) { padding: var(--s-3) var(--s-6) var(--s-2) var(--s-5); border-bottom: 0; border-left: var(--line) solid rgba(255, 255, 255, .14); }
  .hs__stats > div:first-child { padding-left: 0; border-left: 0; }
}

@media (min-width: 900px) {
  .svc2__head { grid-template-columns: minmax(0, 1fr) auto; align-items: end; gap: var(--s-8); }
  .svc2__cta { justify-items: end; }
  .mosaic { grid-template-columns: repeat(4, minmax(0, 1fr)); grid-auto-rows: minmax(17.5rem, 1fr); }
  .tile { min-height: 0; }
  .tile--xl { grid-row: span 2; min-height: 0; }
  .steps { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .steps li, .steps li:nth-child(2n) { padding: var(--s-5) var(--s-5) var(--s-5) var(--s-5); border-left: var(--line) solid var(--ink-line); border-bottom: 0; }
  .steps li:first-child { padding-left: 0; border-left: 0; }
  .reviews__grid { grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); align-items: center; gap: clamp(2.5rem, 1rem + 4vw, 5rem); }
  .soc { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .brands { grid-template-columns: repeat(4, 1fr); }
  .hero__status { display: inline-flex; }


  .about { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: clamp(2.5rem, 1rem + 4vw, 5rem); }
  .visit { grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: clamp(2.5rem, 1rem + 4vw, 5rem); }
  .map { min-height: 100%; }
  .ftr__top { grid-template-columns: minmax(0, 4fr) minmax(0, 8fr); }
}

@media (min-width: 1100px) {
  /* Desktop: glavni meni u headeru, bez donje trake */
  .bar, .genie { display: none; }
  body.has-bar { padding-bottom: 0; }
  body.has-bar .toasts { left: auto; right: var(--s-5); bottom: var(--s-5); }
  .util { display: block; }
  .nav { display: block; margin-inline: auto; }
  .hdr__account { display: inline-grid; }
  .acct { display: block; }
  .acct__hi { display: flex; }
  .cart-btn__total { display: inline; }
  .grid { grid-template-columns: repeat(4, minmax(0, 1fr)); }

  /* Hero: Google ocjena i mreže u gornjem redu, lista dimenzija desno */
  .hero__social { display: flex; }
  .hero__side { display: grid; flex: 0 0 24rem; }
  .hero__img img { object-position: var(--pos, 50% 50%); }
  .hero__stage { min-height: max(46rem, calc(100svh - var(--promo-h, 0px))); }
  .hero__rail-inner { min-height: var(--rail-h); }
}

@media (min-width: 1400px) {
  .hero__trust { display: flex; align-items: center; gap: var(--s-6); }
  .hero__next { display: block; flex: 0 1 11rem; }
}

@media (max-width: 480px) {
  .hs__cta .btn { flex: 1 1 100%; }
}
@media (max-width: 639px) {
  /* Mobitel: podaci o modelu u jednom redu, pa ostaje više fotografije */
  .hs__stats { grid-template-columns: repeat(4, auto); justify-content: space-between; margin-top: var(--s-4); border-bottom: var(--line) solid rgba(255, 255, 255, .14); }
  .hs__stats > div, .hs__stats > div:nth-child(2n) { padding: var(--s-2) 0; border: 0; }
  .hs__stats dt { font-size: .6rem; letter-spacing: .08em; }
  .hs__stats dd { font-size: var(--t-sm); }
  .hs__lead { font-size: var(--t-md); margin-top: var(--s-3); }
  .hs__cta { margin-top: var(--s-4); gap: var(--s-2); }
  .hero__grid { gap: var(--s-5); }
  .hero__tabs { gap: .2rem; }
  .hero__top .eyebrow { font-size: var(--t-2xs); letter-spacing: .08em; }
}

/* Poštuj postavku "smanji animacije" */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; }
  .hero__img img { animation: none !important; }
  .mask > span, .hs .fade, .js [data-reveal] { opacity: 1 !important; transform: none !important; }
}

/* Dok je meni otvoren, oznaku aktivne stranice u donjoj traci nosi samo dugme "Meni" */
.bar:has([aria-expanded='true']) [aria-current='page'] { color: var(--g-400); }
.bar:has([aria-expanded='true']) [aria-current='page']::before { display: none; }

/* =====================================================================
   Unutrašnje stranice: zaglavlje stranice, putanja
   ===================================================================== */
.phead { position: relative; isolation: isolate; overflow: hidden; background: var(--ink); color: var(--white); }
.phead__bg { position: absolute; inset: 0; z-index: -1; }
.phead__bg img { width: 100%; height: 100%; object-fit: cover; object-position: var(--pos, 50% 50%); animation: phead-in 1400ms cubic-bezier(.2, .7, .2, 1) both; }
.phead__bg::after { content: ''; position: absolute; inset: 0; background: rgba(8, 8, 8, .58); }
.phead__vid { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: 0; transition: opacity 900ms var(--ease); }
.phead__vid.is-on { opacity: 1; }
.phead__play { position: absolute; z-index: 2; right: max(var(--gutter), env(safe-area-inset-right)); bottom: var(--s-4); display: grid; place-items: center; width: 40px; height: 40px; border: var(--line) solid rgba(255, 255, 255, .35); border-radius: 50%; background: rgba(0, 0, 0, .35); color: var(--white); cursor: pointer; transition: background-color var(--dur) var(--ease), border-color var(--dur) var(--ease); }
.phead__play:hover { background: rgba(0, 0, 0, .6); border-color: var(--white); }
.phead__play .i { font-size: 1.25rem; }
@keyframes phead-in { from { transform: scale(1.08); } to { transform: none; } }
.phead__inner { padding-block: clamp(2.25rem, 1.5rem + 3vw, 4.5rem) clamp(2rem, 1.25rem + 2.5vw, 3.75rem); }
.crumbs { display: flex; flex-wrap: wrap; align-items: center; gap: .15rem .35rem; font-size: var(--t-xs); color: rgba(255, 255, 255, .72); }
.crumbs a:hover { color: var(--white); text-decoration: underline; text-underline-offset: 3px; }
.crumbs .i { font-size: 1rem; opacity: .6; }
.crumbs [aria-current] { color: var(--white); font-weight: 600; }
.phead__title { margin-top: var(--s-4); font-family: var(--f-head); font-size: clamp(2.4rem, 1.6rem + 3.4vw, 4.75rem); font-weight: 800; line-height: .98; letter-spacing: -.035em; }
.phead__lead { max-width: 38rem; margin-top: var(--s-4); font-size: var(--t-lg); color: rgba(255, 255, 255, .86); }
.phead__facts { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s-3) var(--s-6); margin-top: var(--s-6); padding-top: var(--s-5); border-top: var(--line) solid rgba(255, 255, 255, .2); }
.phead__facts li { display: flex; align-items: center; min-height: 2.25rem; gap: var(--s-2); line-height: 1.2; font-size: var(--t-sm); color: rgba(255, 255, 255, .78); white-space: nowrap; }
.phead__facts b { font-family: var(--f-head); font-size: var(--t-xl); font-weight: 800; line-height: 1; color: var(--white); letter-spacing: -.02em; }
.phead__facts .i { font-size: 1.25rem; color: var(--white); align-self: center; }
.phead__facts li:nth-child(n+3) { display: none; }

/* ---------- Brzi izbor iznad ponude ---------- */
.qpick { padding-block: clamp(1.75rem, 1.25rem + 2vw, 3rem) 0; }
.qpick__head { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: var(--s-2) var(--s-5); margin-bottom: var(--s-4); }
.qpick__title { font-family: var(--f-head); font-size: var(--t-xl); font-weight: 800; letter-spacing: -.01em; }
.qpick__hint { font-size: var(--t-xs); color: var(--g-500); }
.qbrands { display: grid; grid-auto-flow: column; grid-auto-columns: minmax(9rem, 1fr); gap: var(--s-3); overflow-x: auto; scrollbar-width: none; padding-bottom: 2px; }
.qbrands::-webkit-scrollbar { display: none; }
.qbrand { position: relative; display: grid; justify-items: start; gap: .1rem; padding: var(--s-3) var(--s-4) var(--s-4); text-align: left; background: var(--white); border: var(--line) solid var(--g-200); border-radius: var(--r-2); overflow: hidden; transition: border-color var(--dur) var(--ease); }
.qbrand::before { content: ''; position: absolute; left: 0; right: 0; top: 0; height: 2px; background: var(--red); transform: scaleX(0); transform-origin: left; transition: transform 420ms cubic-bezier(.2, .8, .2, 1); }
.qbrand:hover { border-color: var(--g-400); }
.qbrand:hover::before, .qbrand[aria-pressed='true']::before { transform: scaleX(1); }
.qbrand[aria-pressed='true'] { border-color: var(--ink); }
.qbrand__img { justify-self: stretch; display: grid; place-items: center; aspect-ratio: 4 / 3; margin-bottom: var(--s-2); }
.qbrand__img img { width: 78%; height: 100%; object-fit: contain; mix-blend-mode: multiply; transition: transform 900ms cubic-bezier(.2, .8, .2, 1); }
.qbrand:hover .qbrand__img img { transform: rotate(24deg); }
.qbrand__name { font-family: var(--f-head); font-size: var(--t-md); font-weight: 800; transition: color var(--dur) var(--ease); }
.qbrand:hover .qbrand__name, .qbrand[aria-pressed='true'] .qbrand__name { color: var(--red); }
.qbrand__meta { font-size: var(--t-xs); color: var(--g-500); }
.qseasons { display: grid; gap: var(--s-3); }
.qseason { position: relative; display: grid; grid-template-columns: auto minmax(0, 1fr) auto; grid-template-rows: auto auto; column-gap: var(--s-4); align-items: center; padding: var(--s-4); text-align: left; background: var(--white); border: var(--line) solid var(--g-200); border-radius: var(--r-2); overflow: hidden; transition: border-color var(--dur) var(--ease); }
.qseason::before { content: ''; position: absolute; left: 0; right: 0; top: 0; height: 2px; background: var(--red); transform: scaleX(0); transform-origin: left; transition: transform 420ms cubic-bezier(.2, .8, .2, 1); }
.qseason:hover { border-color: var(--g-400); }
.qseason:hover::before, .qseason[aria-pressed='true']::before { transform: scaleX(1); }
.qseason[aria-pressed='true'] { border-color: var(--ink); }
.qseason > .i { grid-row: span 2; width: 2.75rem; height: 2.75rem; display: grid; place-items: center; font-size: 1.5rem; background: var(--g-50); border-radius: var(--r-1); transition: background-color var(--dur) var(--ease), color var(--dur) var(--ease); }
.qseason:hover > .i, .qseason[aria-pressed='true'] > .i { background: var(--red); color: var(--white); }
.qseason__t { font-family: var(--f-head); font-size: var(--t-md); font-weight: 800; }
.qseason__d { grid-column: 2; font-size: var(--t-xs); color: var(--g-500); }
.qseason__n { grid-column: 3; grid-row: 1 / span 2; font-size: var(--t-xs); font-weight: 600; color: var(--g-600); white-space: nowrap; }

/* =====================================================================
   Webshop: raspored, filteri, rezultati
   ===================================================================== */
.shop { padding-block: clamp(1.75rem, 1.25rem + 2vw, 3rem) clamp(3rem, 2rem + 3vw, 5rem); }
.shop__layout { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--s-6); align-items: start; }
.shop__main { min-width: 0; }

/* Traka s alatima (prati skrolanje) */
.shop__bar { position: sticky; top: var(--header-h); z-index: 20; display: grid; grid-template-columns: auto minmax(0, 1fr) auto; gap: var(--s-2); align-items: center; margin-inline: calc(var(--gutter) * -1); padding: var(--s-3) var(--gutter); background: var(--white); border-bottom: var(--line) solid var(--g-200); }
.shop__fbtn { height: 2.75rem; padding-inline: var(--s-4); gap: var(--s-2); }
.shop__fbadge { display: inline-grid; place-items: center; min-width: 1.35rem; height: 1.35rem; padding: 0 .3rem; border-radius: .7rem; background: var(--red); color: var(--white); font-size: var(--t-2xs); font-weight: 700; }
.shop__search { grid-column: 1 / -1; grid-row: 2; position: relative; display: flex; align-items: center; }
.shop__search .i { position: absolute; left: var(--s-3); color: var(--g-500); font-size: 1.25rem; pointer-events: none; }
.shop__search input { width: 100%; height: 2.75rem; padding: 0 var(--s-3) 0 2.6rem; border: var(--line) solid var(--g-300); border-radius: var(--r-1); background: var(--white); font-size: var(--t-sm); transition: border-color var(--dur) var(--ease); }
.shop__search input:focus { outline: none; border-color: var(--ink); }
.shop__sort { position: relative; display: flex; align-items: center; justify-self: end; }
.shop__sort .i { position: absolute; left: var(--s-3); font-size: 1.15rem; color: var(--g-600); pointer-events: none; }
.shop__sort select { appearance: none; height: 2.75rem; max-width: 11.5rem; padding: 0 var(--s-3) 0 2.4rem; border: var(--line) solid var(--g-300); border-radius: var(--r-1); background: var(--white); font: inherit; font-size: var(--t-sm); font-weight: 600; color: var(--ink); cursor: pointer; }
.shop__sort select:focus-visible { outline: 2px solid var(--red); outline-offset: 1px; }
.shop__view { display: none; border: var(--line) solid var(--g-300); border-radius: var(--r-1); padding: 2px; }
.shop__view button { width: 2.4rem; height: 2.4rem; display: grid; place-items: center; color: var(--g-500); border-radius: 2px; transition: background-color var(--dur) var(--ease), color var(--dur) var(--ease); }
.shop__view button[aria-pressed='true'] { background: var(--ink); color: var(--white); }
.shop__view .i { font-size: 1.25rem; }

.shop__meta { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s-3) var(--s-5); padding-block: var(--s-4); }
.shop__count { font-size: var(--t-sm); color: var(--g-600); }
.shop__count b { color: var(--ink); font-family: var(--f-head); font-weight: 800; }
.shop__count span { color: var(--g-500); }
.chips { display: flex; flex-wrap: wrap; gap: var(--s-2); }
.chip--x { height: 2rem; padding: 0 var(--s-2) 0 var(--s-3); background: var(--white); animation: chip-in 280ms cubic-bezier(.2, .8, .2, 1) both; }
.chip--x .i { font-size: 1rem; color: var(--g-500); transition: color var(--dur) var(--ease); }
.chip--x:hover { border-color: var(--red); }
.chip--x:hover .i { color: var(--red); }
@keyframes chip-in { from { opacity: 0; transform: scale(.94); } to { opacity: 1; transform: none; } }
.chips__clear { font-size: var(--t-xs); font-weight: 600; color: var(--g-600); text-decoration: underline; text-underline-offset: 3px; padding-inline: var(--s-1); }
.chips__clear:hover { color: var(--red); }

.shop__grid { transition: opacity 200ms var(--ease); }
.shop__grid.is-loading { opacity: .45; pointer-events: none; }
.empty { grid-column: 1 / -1; display: grid; justify-items: center; gap: var(--s-2); padding: clamp(2.5rem, 2rem + 3vw, 4.5rem) var(--s-4); text-align: center; border: var(--line) dashed var(--g-300); border-radius: var(--r-2); }
.empty > .i { font-size: 2.5rem; color: var(--g-400); }
.empty__t { font-family: var(--f-head); font-size: var(--t-lg); font-weight: 800; }
.empty__d { max-width: 30rem; font-size: var(--t-sm); color: var(--g-600); }
.empty__a { display: flex; flex-wrap: wrap; justify-content: center; gap: var(--s-2); margin-top: var(--s-3); }

/* Lista: slika lijevo, podaci, cijena desno */
.grid--list { grid-template-columns: minmax(0, 1fr); gap: var(--s-3); }
.grid--list .pcard { grid-template-columns: 7.5rem minmax(0, 1fr); grid-template-rows: auto; }
.grid--list .pcard__media { aspect-ratio: auto; height: 100%; min-height: 7.5rem; border-bottom: 0; border-right: var(--line) solid var(--g-100); }
.grid--list .pcard__title { min-height: 0; }
.grid--list .pcard:hover { transform: none; }

/* Paginacija */
.pager { display: flex; align-items: center; justify-content: space-between; gap: var(--s-2); margin-top: var(--s-7); }
.pager:empty { display: none; }
.pager__nums { display: flex; align-items: center; gap: var(--s-1); }
.pager__btn { min-width: 2.5rem; height: 2.5rem; display: inline-flex; align-items: center; justify-content: center; gap: var(--s-1); padding: 0 var(--s-2); border: var(--line) solid var(--g-200); border-radius: var(--r-1); font-size: var(--t-sm); font-weight: 600; background: var(--white); transition: border-color var(--dur) var(--ease), background-color var(--dur) var(--ease), color var(--dur) var(--ease); }
.pager__btn:hover:not(:disabled) { border-color: var(--ink); }
.pager__btn[aria-current='page'] { background: var(--ink); border-color: var(--ink); color: var(--white); }
.pager__btn:disabled { opacity: .4; cursor: default; }
.pager__arrow .i { font-size: 1.25rem; }
.pager__lbl { display: none; }
.pager__gap { min-width: 1.25rem; text-align: center; color: var(--g-500); }

/* Pomoć ispod rezultata */
.shop__help { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: var(--s-4); align-items: center; margin-top: var(--s-7); padding: var(--s-5); background: var(--g-50); border: var(--line) solid var(--g-200); border-radius: var(--r-2); }
.shop__help-ico { width: 3rem; height: 3rem; display: grid; place-items: center; background: var(--white); border: var(--line) solid var(--g-200); border-radius: var(--r-1); color: var(--red); }
.shop__help-ico .i { font-size: 1.5rem; }
.shop__help-t { font-family: var(--f-head); font-size: var(--t-md); font-weight: 800; }
.shop__help-d { font-size: var(--t-sm); color: var(--g-600); margin-top: .15rem; }
.shop__help-a { grid-column: 1 / -1; display: flex; flex-wrap: wrap; gap: var(--s-2); }

/* ---------- Filteri ---------- */
.fscrim { position: fixed; inset: 0; z-index: 80; background: rgba(10, 10, 10, .55); opacity: 0; transition: opacity 280ms var(--ease); }
.fscrim.is-on { opacity: 1; }
.shop__side {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 90; display: grid; grid-template-rows: auto minmax(0, 1fr) auto; max-height: 88svh;
  background: var(--white); border-radius: var(--r-2) var(--r-2) 0 0; transform: translateY(102%); visibility: hidden;
  transition: transform 380ms cubic-bezier(.2, .8, .2, 1), visibility 0s linear 380ms;
}
.shop__side.is-open { transform: none; visibility: visible; transition: transform 380ms cubic-bezier(.2, .8, .2, 1), visibility 0s; }
.fsheet__head { display: flex; align-items: center; justify-content: space-between; padding: var(--s-2) var(--s-2) var(--s-2) var(--s-5); border-bottom: var(--line) solid var(--g-200); }
.fsheet__head .icon-btn { color: var(--ink); }
.fsheet__head .icon-btn:hover { background: var(--g-100); }
.fsheet__title { font-family: var(--f-head); font-size: var(--t-lg); font-weight: 800; }
.fsheet__body { overflow-y: auto; overscroll-behavior: contain; padding: 0 var(--s-5) var(--s-5); }
.fsheet__foot { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: var(--s-2); padding: var(--s-3) var(--s-5) calc(var(--s-3) + env(safe-area-inset-bottom)); border-top: var(--line) solid var(--g-200); }
.fside__top { display: none; }
.fgroup { border-bottom: var(--line) solid var(--g-200); padding-block: var(--s-4); }
.fgroup--tip { border-bottom: 0; padding-bottom: 0; }
.fgroup__h { display: flex; align-items: center; gap: var(--s-2); font-family: var(--f-head); font-size: var(--t-sm); font-weight: 800; letter-spacing: .01em; cursor: pointer; list-style: none; user-select: none; }
.fgroup__h::-webkit-details-marker { display: none; }
.fgroup__h .i { margin-left: auto; font-size: 1.25rem; color: var(--g-500); transition: transform 240ms var(--ease); }
.fgroup[open] > .fgroup__h .i { transform: rotate(180deg); }
p.fgroup__h { cursor: default; margin-bottom: var(--s-3); }
.fgroup__sel { display: inline-grid; place-items: center; min-width: 1.25rem; height: 1.25rem; padding: 0 .3rem; border-radius: .65rem; background: var(--ink); color: var(--white); font-size: .65rem; }
.fgroup[open] > :not(summary) { animation: fgroup-in 260ms var(--ease) both; }
@keyframes fgroup-in { from { opacity: 0; transform: translateY(-.35rem); } to { opacity: 1; transform: none; } }
.fchecks { display: grid; gap: 2px; margin-top: var(--s-3); }
.fcheck { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: var(--s-3); padding: .45rem var(--s-2); margin-inline: calc(var(--s-2) * -1); border-radius: var(--r-1); cursor: pointer; transition: background-color var(--dur) var(--ease); }
.fcheck:hover { background: var(--g-50); }
.fcheck input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.fcheck__box { width: 1.2rem; height: 1.2rem; display: grid; place-items: center; border: 1.5px solid var(--g-400); border-radius: 3px; transition: background-color var(--dur) var(--ease), border-color var(--dur) var(--ease); }
.fcheck__box .i { font-size: .95rem; color: var(--white); opacity: 0; transform: scale(.5); transition: opacity 160ms var(--ease), transform 200ms cubic-bezier(.2, .8, .2, 1); }
.fcheck input:checked + .fcheck__box { background: var(--ink); border-color: var(--ink); }
.fcheck input:checked + .fcheck__box .i { opacity: 1; transform: none; }
.fcheck input:focus-visible + .fcheck__box { outline: 2px solid var(--red); outline-offset: 2px; }
.fcheck__t { font-size: var(--t-sm); font-weight: 500; }
.fcheck input:checked ~ .fcheck__t { font-weight: 700; }
.fcheck__n { font-size: var(--t-xs); color: var(--g-500); }
.fcheck.is-zero { opacity: .45; }
.fchips { display: grid; grid-template-columns: repeat(auto-fill, minmax(4rem, 1fr)); gap: .375rem; margin-top: var(--s-3); }
.fchips--wide { grid-template-columns: repeat(auto-fill, minmax(5.25rem, 1fr)); }
.fchip { display: grid; justify-items: center; gap: 0; padding: .4rem .25rem; border: var(--line) solid var(--g-200); border-radius: var(--r-1); background: var(--white); transition: border-color var(--dur) var(--ease), background-color var(--dur) var(--ease), color var(--dur) var(--ease), transform 160ms var(--ease); }
.fchip:hover { border-color: var(--ink); }
.fchip:active { transform: scale(.95); }
.fchip b { font-family: var(--f-head); font-size: var(--t-sm); font-weight: 800; font-variant-numeric: tabular-nums; white-space: nowrap; }
.fchip small { font-size: var(--t-2xs); color: var(--g-500); }
.fchip[aria-pressed='true'] { background: var(--ink); border-color: var(--ink); color: var(--white); }
.fchip[aria-pressed='true'] small { color: var(--g-400); }
.fchip.is-zero { opacity: .45; }
.fmore { display: inline-flex; align-items: center; gap: .15rem; margin-top: var(--s-3); font-size: var(--t-xs); font-weight: 700; color: var(--g-700); }
.fmore:hover { color: var(--red); }
.fmore .i { font-size: 1.1rem; }
.fswitch { display: flex; width: 100%; padding-block: var(--s-4); border-bottom: var(--line) solid var(--g-200); font-weight: 600; color: var(--ink); }
.fswitch__n { margin-left: auto; font-size: var(--t-xs); font-weight: 500; color: var(--g-500); }
.fprice { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--s-2); margin-top: var(--s-3); }
.fprice label { display: flex; align-items: center; min-width: 0; gap: var(--s-1); height: 2.5rem; padding: 0 var(--s-2); border: var(--line) solid var(--g-300); border-radius: var(--r-1); font-size: var(--t-xs); color: var(--g-500); transition: border-color var(--dur) var(--ease); }
.fprice label:focus-within { border-color: var(--ink); }
.fprice input { flex: 1 1 0; width: 100%; min-width: 0; border: 0; background: none; font: inherit; font-size: var(--t-sm); font-weight: 600; color: var(--ink); text-align: right; -moz-appearance: textfield; }
.fprice input::-webkit-outer-spin-button, .fprice input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
.fprice input:focus { outline: none; }
.seg--full { display: grid; grid-template-columns: repeat(3, 1fr); width: 100%; }
.seg--full .seg__btn { justify-content: center; padding: 0; }
.seg__btn[aria-pressed='true'] { background: var(--ink); color: var(--white); }

/* ---------- Kartica: upit za artikal koji nije na stanju ---------- */
.pcard__add--ask { background: var(--white); color: #25D366; border: var(--line) solid var(--g-300); }
.pcard__add--ask .bi { width: 1.25rem; height: 1.25rem; }
.pcard__add--ask:hover { background: #25D366; border-color: #25D366; color: var(--white); }
.pcard__add.is-busy { opacity: .6; }

/* ---------- Vodič ---------- */
.guide__grid { display: grid; gap: var(--s-3); }
.guide__item { padding: var(--s-5); background: var(--white); border: var(--line) solid var(--g-200); border-radius: var(--r-2); transition: border-color var(--dur) var(--ease); }
.guide__item:hover { border-color: var(--g-400); }
.guide__item dt { display: grid; gap: var(--s-2); font-family: var(--f-head); font-size: var(--t-md); font-weight: 800; }
.guide__k { font-size: var(--t-2xl); color: var(--red); letter-spacing: -.02em; line-height: 1; }
.guide__k .i { font-size: 2rem; }
.guide__item dd { margin: var(--s-2) 0 0; font-size: var(--t-sm); color: var(--g-600); }
.guide__item dd .link { display: flex; width: fit-content; margin-top: var(--s-3); color: var(--ink); }
.guide__item--cta { background: var(--ink); border-color: var(--ink); color: var(--white); }
.guide__item--cta dd { color: rgba(255, 255, 255, .78); }
.guide__item--cta dd .link { color: var(--white); }

@media (min-width: 640px) {
  .phead__facts li:nth-child(n+3) { display: flex; }
  .qseason > .i { grid-row: span 3; align-self: start; }
  .qseason__n { grid-column: 2; grid-row: auto; margin-top: var(--s-2); }
  .shop__bar { grid-template-columns: auto minmax(0, 1fr) auto auto; }
  .shop__search { grid-column: auto; grid-row: auto; }
  .shop__view { display: flex; }
  .shop__help { grid-template-columns: auto minmax(0, 1fr) auto; }
  .shop__help-a { grid-column: auto; }
  .pager__lbl { display: inline; }
  .guide__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .grid--list .pcard { grid-template-columns: 9rem minmax(0, 1fr); }
  .grid--list .pcard__body { display: grid; grid-template-columns: minmax(0, 1fr) auto; grid-template-rows: auto auto auto 1fr; column-gap: var(--s-5); padding: var(--s-4); }
  .grid--list .pcard__body > :not(.pcard__foot) { grid-column: 1; }
  .grid--list .pcard__foot { grid-column: 2; grid-row: 1 / span 4; flex-direction: column; align-items: end; justify-content: center; margin: 0; padding: 0 0 0 var(--s-5); border-left: var(--line) solid var(--g-100); text-align: right; }
  .grid--list .stock { margin-top: auto; padding-top: var(--s-2); }
}
@media (min-width: 900px) {
  .guide__grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .qbrands { grid-auto-flow: row; grid-template-columns: repeat(6, minmax(0, 1fr)); overflow: visible; }
}
@media (min-width: 1100px) {
  .shop__layout { grid-template-columns: 17.5rem minmax(0, 1fr); gap: clamp(2rem, 1rem + 2vw, 3.5rem); }
  .fscrim { display: none; }
  .shop__side { position: sticky; top: calc(var(--header-h) + var(--s-4)); z-index: 1; display: block; max-height: calc(100svh - var(--header-h) - var(--s-7)); overflow-y: auto; overscroll-behavior: contain; scrollbar-width: thin; scrollbar-color: var(--g-300) transparent; transform: none; visibility: visible; transition: none; border-radius: 0; background: none; overflow-x: hidden; padding-inline: var(--s-2); margin-inline: calc(var(--s-2) * -1); }
  .fsheet__head, .fsheet__foot { display: none; }
  .fsheet__body { overflow: visible; padding: 0; }
  .fside__top { display: flex; align-items: center; justify-content: space-between; padding-bottom: var(--s-3); border-bottom: var(--line) solid var(--ink); }
  .fside__title { font-family: var(--f-head); font-size: var(--t-lg); font-weight: 800; }
  .fside__reset { display: inline-flex; align-items: center; gap: .2rem; font-size: var(--t-xs); font-weight: 600; color: var(--g-600); }
  .fside__reset:hover { color: var(--red); }
  .fside__reset .i { font-size: 1rem; }
  .shop__fbtn { display: none; }
  .shop__bar { grid-template-columns: minmax(0, 1fr) auto auto; margin-inline: 0; padding-inline: 0; }
  .grid.shop__grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .grid.shop__grid.grid--list { grid-template-columns: minmax(0, 1fr); }
  .grid--list .pcard { grid-template-columns: 11rem minmax(0, 1fr); }
}
@media (min-width: 1600px) {
  .grid.shop__grid { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}
@media (prefers-reduced-motion: reduce) {
  .phead__bg img, .chip--x, .fgroup[open] > :not(summary) { animation: none; }
  .shop__side { transition: none; }
}

/* =====================================================================
   Stranica proizvoda
   ===================================================================== */
.pd-crumbs { background: var(--g-50); border-bottom: var(--line) solid var(--g-200); }
.crumbs--dark { padding-block: var(--s-3); color: var(--g-500); }
.crumbs--dark a:hover { color: var(--ink); }
.crumbs--dark [aria-current] { color: var(--ink); max-width: 40ch; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pd { padding-block: clamp(1.5rem, 1rem + 2.5vw, 3.5rem); }
.pd__grid { display: grid; gap: var(--s-7); align-items: start; }
.pd__zoom { position: relative; aspect-ratio: 1; overflow: hidden; background: var(--g-50); border: var(--line) solid var(--g-200); border-radius: var(--r-2); cursor: zoom-in; }
.pd__zoom img { width: 100%; height: 100%; object-fit: contain; padding: 8%; mix-blend-mode: multiply; transition: transform 300ms var(--ease); }
.pd__zoom.is-zoom img { transform: scale(1.9); }
.pd__media-note { display: flex; gap: var(--s-2); margin-top: var(--s-3); font-size: var(--t-xs); color: var(--g-500); }
.pd__media-note .i { font-size: 1rem; }
.pd__brand { font-size: var(--t-xs); font-weight: 700; letter-spacing: .14em; text-transform: uppercase; color: var(--red); }
.pd__title { margin-top: var(--s-2); font-family: var(--f-head); font-size: clamp(1.6rem, 1.2rem + 1.6vw, 2.6rem); font-weight: 800; line-height: 1.1; letter-spacing: -.02em; text-wrap: balance; }
.pd__spec { margin-top: var(--s-2); color: var(--g-600); }
.pd__stock { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s-2) var(--s-3); margin-top: var(--s-4); font-size: var(--t-sm); font-weight: 700; }
.pd__dot { width: .55rem; height: .55rem; border-radius: 50%; background: currentColor; }
.pd__stock--ok { color: var(--ok); }
.pd__stock--low { color: var(--warn); }
.pd__stock--none { color: var(--g-600); }
.pd__eta { font-weight: 500; color: var(--g-500); }
.pd__price { margin-top: var(--s-5); padding-block: var(--s-4); border-block: var(--line) solid var(--g-200); }
.pd__amount { display: flex; align-items: baseline; gap: var(--s-2); font-family: var(--f-head); font-size: clamp(1.9rem, 1.5rem + 1.4vw, 2.6rem); font-weight: 800; letter-spacing: -.02em; }
.pd__amount span { font-family: var(--f-body); font-size: var(--t-sm); font-weight: 500; color: var(--g-500); letter-spacing: 0; }
.pd__set { font-size: var(--t-sm); color: var(--g-600); }
.pd__buy { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: var(--s-3); margin-top: var(--s-5); }
.pd__buy > .btn { grid-column: 1 / -1; width: 100%; }
.pd__buy--ask { grid-template-columns: minmax(0, 1fr); }
.pd__ask { font-size: var(--t-sm); color: var(--g-600); }
.notify { display: grid; gap: var(--s-2); padding: var(--s-4); border: 1px solid var(--g-200); border-radius: var(--r-3, 12px); background: var(--g-50, #fafafa); }
.notify__t { display: flex; align-items: center; gap: var(--s-2); font-weight: 700; color: var(--ink); }
.notify__t .i { color: var(--red); }
.notify__d { font-size: var(--t-sm); color: var(--g-600); }
.notify__row { display: flex; flex-wrap: wrap; gap: var(--s-2); }
.notify__row input { flex: 1 1 12rem; min-width: 0; height: 46px; padding: 0 var(--s-3); border: 1px solid var(--g-300); border-radius: var(--r-2, 8px); font: inherit; background: #fff; }
.notify__row input:focus { outline: 2px solid var(--ink); outline-offset: 1px; }
.notify__row .btn { flex: 0 0 auto; }
.notify__ok { display: flex; align-items: center; gap: var(--s-2); padding: var(--s-3) var(--s-4); border-radius: var(--r-2, 8px); background: #EAF7EE; color: #14532D; font-size: var(--t-sm); font-weight: 600; }
.qty { display: inline-flex; align-items: center; height: 3rem; border: var(--line) solid var(--g-300); border-radius: var(--r-1); }
.qty__btn { width: 2.75rem; height: 100%; display: grid; place-items: center; }
.qty__btn:hover { background: var(--g-50); }
.qty__input { width: 3rem; height: 100%; border: 0; text-align: center; font: inherit; font-weight: 700; -moz-appearance: textfield; }
.qty__input::-webkit-inner-spin-button, .qty__input::-webkit-outer-spin-button { -webkit-appearance: none; margin: 0; }
.pd__total { display: grid; align-content: center; font-size: var(--t-sm); color: var(--g-600); }
.pd__total b { font-family: var(--f-head); font-size: var(--t-lg); color: var(--ink); }
.pd__total small { font-size: var(--t-2xs); color: var(--g-500); }
.btn--wa-solid { background: #25D366; border-color: #25D366; color: var(--white); }
.btn--wa-solid:hover { background: #1DA851; border-color: #1DA851; }
.pd__trust { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--s-3); margin-top: var(--s-6); }
.pd__trust li { display: flex; gap: var(--s-3); align-items: flex-start; font-size: var(--t-xs); color: var(--g-600); }
.pd__trust .i { color: var(--red); font-size: 1.4rem; }
.pd__trust b { display: block; font-size: var(--t-sm); color: var(--ink); }
.pd__trust a { text-decoration: underline; text-underline-offset: 3px; }
.pd__note { margin-top: var(--s-5); font-size: var(--t-xs); color: var(--g-500); }
.pd-more__grid { display: grid; gap: var(--s-7); }
.pd-h { font-family: var(--f-head); font-size: var(--t-xl); font-weight: 800; margin-bottom: var(--s-4); }
.spec { background: var(--white); border: var(--line) solid var(--g-200); border-radius: var(--r-2); }
.spec > div { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: var(--s-4); padding: var(--s-3) var(--s-4); border-bottom: var(--line) solid var(--g-100); font-size: var(--t-sm); }
.spec > div:last-child { border-bottom: 0; }
.spec dt { color: var(--g-500); }
.spec dd { margin: 0; font-weight: 600; }
.pd-help p { color: var(--g-600); }
.pd-help__a { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s-4); margin-top: var(--s-5); }
.pd-sticky { position: fixed; left: 0; right: 0; bottom: calc(var(--bar-h) + env(safe-area-inset-bottom)); z-index: 50; display: flex; align-items: center; justify-content: space-between; gap: var(--s-3); padding: var(--s-2) var(--gutter); background: var(--white); border-top: var(--line) solid var(--g-200); animation: tst-in 280ms var(--ease) both; }
.pd-sticky[hidden] { display: none; }
.pd-sticky__txt { display: grid; font-size: var(--t-2xs); color: var(--g-500); }
.pd-sticky__txt b { font-family: var(--f-head); font-size: var(--t-md); color: var(--ink); }
.nf { display: grid; justify-items: center; gap: var(--s-4); text-align: center; }
.nf__i { font-size: 3rem; color: var(--g-400); }
.nf__a { display: flex; flex-wrap: wrap; justify-content: center; gap: var(--s-3); }
@media (min-width: 900px) {
  .pd__grid { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: clamp(2.5rem, 1rem + 4vw, 5rem); }
  .pd__media { position: sticky; top: calc(var(--header-h) + var(--s-5)); }
  .pd-more__grid { grid-template-columns: minmax(0, 3fr) minmax(0, 2fr); }
  .pd-related { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}
@media (min-width: 1100px) { .pd-sticky { display: none !important; } }

/* =====================================================================
   Svijetlo zaglavlje (košarica, narudžba, račun, pravne stranice)
   ===================================================================== */
.ph { background: var(--g-50); border-bottom: var(--line) solid var(--g-200); }
.ph__inner { padding-block: var(--s-4) var(--s-6); }
.ph__row { display: flex; flex-wrap: wrap; align-items: end; justify-content: space-between; gap: var(--s-4) var(--s-6); margin-top: var(--s-3); }
.ph__title { font-family: var(--f-head); font-size: clamp(1.9rem, 1.4rem + 2vw, 3rem); font-weight: 800; letter-spacing: -.03em; line-height: 1.05; }
.ph__lead { max-width: 42rem; margin-top: var(--s-3); color: var(--g-600); }
.steps-co { display: flex; align-items: center; gap: var(--s-2); counter-reset: none; font-size: var(--t-xs); font-weight: 600; color: var(--g-500); }
.steps-co li { display: flex; align-items: center; gap: var(--s-2); }
.steps-co li + li::before { content: ''; width: clamp(.75rem, 2vw, 2rem); height: 1px; background: var(--g-300); }
.steps-co a { display: inline-flex; align-items: center; gap: var(--s-2); }
.steps-co .num { width: 1.6rem; height: 1.6rem; display: grid; place-items: center; border: var(--line) solid var(--g-300); border-radius: 50%; background: var(--white); font-size: var(--t-2xs); font-weight: 700; }
.steps-co .num .i { font-size: .95rem; }
.steps-co [aria-current] { color: var(--ink); }
.steps-co [aria-current] .num { background: var(--ink); border-color: var(--ink); color: var(--white); }
.steps-co .is-done { color: var(--ink); }
.steps-co .is-done .num { background: var(--ok); border-color: var(--ok); color: var(--white); }

/* ---------- Raspored košarice i narudžbe ---------- */
.co { padding-block: clamp(1.5rem, 1rem + 2vw, 3rem) clamp(3rem, 2rem + 3vw, 5rem); }
.co__grid { display: grid; gap: var(--s-6); align-items: start; }
.co__main { min-width: 0; display: grid; gap: var(--s-4); }

/* Stavke u košarici */
.cart-list { display: grid; gap: var(--s-3); }
.cart-skel { height: 7.5rem; border-radius: var(--r-2); }
.citem { position: relative; display: grid; grid-template-columns: 5.5rem minmax(0, 1fr); gap: var(--s-3) var(--s-4); padding: var(--s-3); background: var(--white); border: var(--line) solid var(--g-200); border-radius: var(--r-2); transition: opacity 260ms var(--ease), transform 260ms var(--ease), border-color var(--dur) var(--ease); animation: chip-in 320ms cubic-bezier(.2, .8, .2, 1) both; }
.citem:hover { border-color: var(--g-400); }
.citem.is-leaving { opacity: 0; transform: translateX(1.5rem); }
.citem.is-out { border-color: var(--red); background: var(--red-50); }
.citem__img { grid-row: span 2; aspect-ratio: 1; background: var(--g-50); border-radius: var(--r-1); overflow: hidden; }
.citem__img img { width: 100%; height: 100%; object-fit: contain; padding: 8%; mix-blend-mode: multiply; }
.citem__body { min-width: 0; padding-right: 2rem; }
.citem__brand { font-size: var(--t-2xs); font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--g-500); }
.citem__name { font-family: var(--f-body); font-size: var(--t-sm); font-weight: 600; line-height: 1.35; }
.citem__name a:hover { color: var(--red); }
.citem__spec { font-size: var(--t-xs); color: var(--g-500); }
.citem__unit { margin-top: var(--s-1); font-size: var(--t-xs); color: var(--g-600); }
.citem__warn { display: flex; align-items: center; gap: var(--s-1); margin-top: var(--s-2); font-size: var(--t-xs); font-weight: 600; color: var(--red); }
.citem__warn .i { font-size: 1rem; }
.citem__qty { display: flex; align-items: center; justify-content: space-between; gap: var(--s-3); }
.citem__sum { font-family: var(--f-head); font-size: var(--t-md); font-weight: 800; }
.citem__rm { position: absolute; top: var(--s-2); right: var(--s-2); width: 2rem; height: 2rem; display: grid; place-items: center; border-radius: var(--r-1); color: var(--g-500); transition: background-color var(--dur) var(--ease), color var(--dur) var(--ease); }
.citem__rm:hover { background: var(--red-50); color: var(--red); }
.citem__rm .i { font-size: 1.15rem; }
.qty--sm { height: 2.5rem; }
.qty--sm .qty__btn { width: 2.25rem; }
.qty--sm .qty__input { width: 2.5rem; }
.qty__btn:disabled { opacity: .35; cursor: default; }
.cart-actions { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--s-3); }
.cart-actions .link .i { font-size: 1.1rem; }
.cart-clear { display: inline-flex; align-items: center; gap: var(--s-1); font-size: var(--t-xs); font-weight: 600; color: var(--g-600); }
.cart-clear:hover { color: var(--red); }
.cart-clear .i { font-size: 1.1rem; }
.cart-empty { background: var(--white); }

/* Pregled (desno) */
.co__side { display: grid; gap: var(--s-3); }
/* Mobitel: na narudžbi je pregled artikala iznad forme */
[data-checkout] .co__side { order: -1; }
[data-checkout] .sum__items { max-height: 12rem; }
.sum { padding: var(--s-5); background: var(--white); border: var(--line) solid var(--g-200); border-radius: var(--r-2); }
.sum__head { display: flex; align-items: baseline; justify-content: space-between; }
.sum__title { font-family: var(--f-head); font-size: var(--t-lg); font-weight: 800; }
.sum__edit { font-size: var(--t-xs); font-weight: 600; text-decoration: underline; text-underline-offset: 3px; }
.sum__rows { display: grid; gap: var(--s-2); margin-top: var(--s-4); font-size: var(--t-sm); }
.sum__rows > div { display: flex; justify-content: space-between; gap: var(--s-3); }
.sum__rows dt { color: var(--g-600); }
.sum__rows dd { margin: 0; font-weight: 600; text-align: right; }
.sum__total { display: flex; align-items: baseline; justify-content: space-between; margin-top: var(--s-4); padding-top: var(--s-4); border-top: var(--line) solid var(--g-200); font-weight: 700; }
.sum__total b { font-family: var(--f-head); font-size: var(--t-2xl); font-weight: 800; letter-spacing: -.02em; }
.sum__vat { font-size: var(--t-2xs); color: var(--g-500); text-align: right; }
.sum__go { width: 100%; margin-top: var(--s-5); }
a.is-off { opacity: .45; }
.sum__trust { display: grid; gap: var(--s-2); margin-top: var(--s-5); font-size: var(--t-xs); color: var(--g-600); }
.sum__trust li { display: flex; align-items: center; gap: var(--s-2); }
.sum__trust .i { font-size: 1.15rem; color: var(--red); }
.sum__items { display: grid; gap: var(--s-3); margin-top: var(--s-4); max-height: 22rem; overflow: auto; }
.sitem { display: grid; grid-template-columns: 3.5rem minmax(0, 1fr) auto; gap: var(--s-3); align-items: center; }
.sitem__img { position: relative; aspect-ratio: 1; background: var(--g-50); border-radius: var(--r-1); }
.sitem__img img { width: 100%; height: 100%; object-fit: contain; padding: 10%; mix-blend-mode: multiply; }
.sitem__img b { position: absolute; top: -.4rem; right: -.4rem; min-width: 1.3rem; height: 1.3rem; padding: 0 .3rem; display: grid; place-items: center; border-radius: .65rem; background: var(--ink); color: var(--white); font-size: .68rem; }
.sitem__t { min-width: 0; display: grid; font-size: var(--t-xs); }
.sitem__t b { font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sitem__t small { color: var(--g-500); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sitem__p { font-size: var(--t-sm); font-weight: 700; }
.sum-help { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s-2) var(--s-4); padding: var(--s-4) var(--s-5); background: var(--g-50); border: var(--line) solid var(--g-200); border-radius: var(--r-2); font-size: var(--t-sm); }
.sum-help p { flex: 1 1 100%; font-weight: 700; }
.sum-help a { display: inline-flex; align-items: center; gap: var(--s-1); font-weight: 600; }
.sum-help .i { font-size: 1.1rem; color: var(--red); }
.sum-help__wa .bi { color: #25D366; width: 1.1rem; height: 1.1rem; }
.co-bar { position: fixed; left: 0; right: 0; bottom: calc(var(--bar-h) + env(safe-area-inset-bottom)); z-index: 50; display: flex; align-items: center; justify-content: space-between; gap: var(--s-3); padding: var(--s-2) var(--gutter); background: var(--white); border-top: var(--line) solid var(--g-200); }
.co-bar__t { display: grid; font-size: var(--t-2xs); color: var(--g-500); }
.co-bar__t b { font-family: var(--f-head); font-size: var(--t-lg); color: var(--ink); }
.co-bar[hidden] { display: none; }

/* ---------- Forma narudžbe ---------- */
.co-alert { display: flex; gap: var(--s-3); align-items: flex-start; padding: var(--s-4); background: var(--red-50); border: var(--line) solid var(--red); border-radius: var(--r-2); color: var(--red-700); font-size: var(--t-sm); font-weight: 600; }
.co-alert[hidden] { display: none; }
.card-f { display: grid; gap: var(--s-4); margin: 0; padding: var(--s-5); min-width: 0; background: var(--white); border: var(--line) solid var(--g-200); border-radius: var(--r-2); }
.card-f__h { display: flex; align-items: center; gap: var(--s-3); padding: 0; float: left; width: 100%; font-family: var(--f-head); font-size: var(--t-lg); font-weight: 800; }
.card-f__h + * { clear: both; }
.card-f__n { width: 1.75rem; height: 1.75rem; display: grid; place-items: center; border-radius: 50%; background: var(--ink); color: var(--white); font-size: var(--t-xs); }
.card-f__note { display: flex; align-items: center; gap: var(--s-2); padding: var(--s-3); background: var(--g-50); border-radius: var(--r-1); font-size: var(--t-sm); }
.card-f__note .i { color: var(--ok); }
.seg--2 { grid-template-columns: repeat(2, 1fr); }
.seg__btn[aria-checked='true'] { background: var(--ink); color: var(--white); }
.fgrid { display: grid; gap: var(--s-3); }
.fgrid[hidden] { display: none; }
.fld { display: grid; gap: .35rem; align-content: start; min-width: 0; }
.fld > span { font-size: var(--t-xs); font-weight: 700; color: var(--g-700); }
.fld input, .fld textarea, .fld select { width: 100%; min-height: 2.9rem; padding: .65rem var(--s-3); border: var(--line) solid var(--g-300); border-radius: var(--r-1); background: var(--white); font: inherit; font-size: var(--t-sm); color: var(--ink); transition: border-color var(--dur) var(--ease), box-shadow var(--dur) var(--ease); }
.fld textarea { resize: vertical; min-height: 5.5rem; }
.fld input:focus, .fld textarea:focus, .fld select:focus { outline: none; border-color: var(--ink); box-shadow: 0 0 0 3px rgba(10, 10, 10, .08); }
.fld small { font-size: var(--t-2xs); color: var(--g-500); }
.fld.is-err input, .fld.is-err textarea { border-color: var(--red); }
.fld__err { font-style: normal; font-size: var(--t-xs); font-weight: 600; color: var(--red); animation: chip-in 200ms var(--ease) both; }
.opts { display: grid; gap: var(--s-2); }
.opt { position: relative; cursor: pointer; }
.opt input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.opt__box { display: flex; align-items: flex-start; gap: var(--s-3); padding: var(--s-4); border: 1.5px solid var(--g-200); border-radius: var(--r-2); transition: border-color var(--dur) var(--ease), background-color var(--dur) var(--ease); }
.opt__box > .i { font-size: 1.5rem; color: var(--g-500); transition: color var(--dur) var(--ease); }
.opt__t { display: grid; gap: .15rem; font-weight: 700; font-size: var(--t-sm); }
.opt__t small { font-weight: 400; font-size: var(--t-xs); color: var(--g-600); }
.opt:hover .opt__box { border-color: var(--g-400); }
.opt input:checked + .opt__box { border-color: var(--ink); background: var(--g-50); }
.opt input:checked + .opt__box > .i { color: var(--red); }
.opt input:focus-visible + .opt__box { outline: 2px solid var(--red); outline-offset: 2px; }
.opt.is-off { cursor: not-allowed; opacity: .5; }
.hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.agree { display: flex; align-items: flex-start; gap: var(--s-3); font-size: var(--t-sm); cursor: pointer; }
.agree input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.agree .fcheck__box { flex: none; margin-top: .1rem; }
.agree input:checked + .fcheck__box { background: var(--ink); border-color: var(--ink); }
.agree input:checked + .fcheck__box .i { opacity: 1; transform: none; }
.agree--test { margin-bottom: var(--s-3); padding: var(--s-3) var(--s-4); border: 1px dashed var(--warn); border-radius: var(--r-2, 8px); background: #FFF8EC; color: #5b3a06; }
.agree--test input:checked + .fcheck__box { background: var(--warn); border-color: var(--warn); }
.agree input:focus-visible + .fcheck__box { outline: 2px solid var(--red); outline-offset: 2px; }
.agree a { text-decoration: underline; text-underline-offset: 3px; font-weight: 600; }
.co__submit { width: 100%; }
.co__legal { font-size: var(--t-xs); color: var(--g-500); text-align: center; }
.spin { width: 1rem; height: 1rem; border: 2px solid rgba(255, 255, 255, .35); border-top-color: currentColor; border-radius: 50%; animation: spin 700ms linear infinite; }
@keyframes spin { to { transform: rotate(360deg); } }
.tst__act { margin-left: var(--s-2); padding: .1rem .5rem; border: var(--line) solid rgba(255, 255, 255, .5); border-radius: var(--r-1); color: var(--white); font-size: var(--t-xs); font-weight: 700; }
.tst__act:hover { background: var(--white); color: var(--ink); }

/* ---------- Potvrda narudžbe ---------- */
.done__inner { display: grid; justify-items: center; gap: var(--s-4); max-width: 44rem; text-align: center; }
.done__ico { width: 4.5rem; height: 4.5rem; display: grid; place-items: center; border-radius: 50%; background: var(--ok); color: var(--white); animation: done-pop 600ms cubic-bezier(.2, .8, .2, 1.3) both; }
.done__ico .i { font-size: 2.5rem; }
.done__ico--warn { background: var(--warn); }
@keyframes done-pop { from { transform: scale(.4); opacity: 0; } to { transform: none; opacity: 1; } }
.done__ref { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: var(--s-2) var(--s-3); padding: var(--s-4) var(--s-5); background: var(--g-50); border: var(--line) dashed var(--g-300); border-radius: var(--r-2); }
.done__ref > span { font-size: var(--t-xs); color: var(--g-600); text-transform: uppercase; letter-spacing: .1em; font-weight: 700; }
.done__ref b { font-family: var(--f-head); font-size: var(--t-2xl); font-weight: 800; letter-spacing: .04em; }
.done__steps { display: grid; gap: var(--s-3); width: 100%; margin-top: var(--s-3); text-align: left; }
.done__steps li { display: flex; gap: var(--s-4); align-items: flex-start; padding: var(--s-4); background: var(--white); border: var(--line) solid var(--g-200); border-radius: var(--r-2); }
.done__steps .i { font-size: 1.5rem; color: var(--red); }
.done__steps b { display: block; font-size: var(--t-sm); }
.done__steps span:not(.i) { font-size: var(--t-xs); color: var(--g-600); }
.done__mail { font-size: var(--t-xs); color: var(--g-500); }
.done__mail a { text-decoration: underline; }
.done__a { display: flex; flex-wrap: wrap; justify-content: center; gap: var(--s-2); }

@media (min-width: 640px) {
  .citem { grid-template-columns: 6.5rem minmax(0, 1fr) auto; align-items: center; }
  .citem__img { grid-row: auto; }
  .citem__qty { flex-direction: column; align-items: end; padding-right: 2.25rem; }
  .fgrid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .fld--full { grid-column: 1 / -1; }
  .opts { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .done__steps { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .done__steps li { flex-direction: column; gap: var(--s-2); }
}
@media (min-width: 1100px) {
  .co__grid { grid-template-columns: minmax(0, 1fr) 24rem; gap: clamp(2rem, 1rem + 2vw, 3.5rem); }
  .co__side { position: sticky; top: calc(var(--header-h) + var(--s-5)); }
  [data-checkout] .co__side { order: 0; }
  [data-checkout] .sum__items { max-height: 22rem; }
  .co-bar { display: none; }
}
@media (prefers-reduced-motion: reduce) { .citem, .done__ico { animation: none; } }

/* =====================================================================
   Informativne stranice: kontakt, usluge, o nama, novosti, članci
   ===================================================================== */
.phead__facts a:hover { text-decoration: underline; text-underline-offset: 3px; }
.phead .status { color: rgba(255, 255, 255, .86); font-size: var(--t-sm); }
.phead .status__dot { background: rgba(255, 255, 255, .5); }
.phead .status--open .status__dot { background: #34C267; }
.phead__facts .i { font-size: 1.2rem; }

/* Kontakt */
.kt { display: grid; gap: var(--s-7); align-items: start; }
.kt__quick { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--s-2); margin-bottom: var(--s-6); }
.qc { display: flex; align-items: center; gap: var(--s-3); padding: var(--s-3); background: var(--white); border: var(--line) solid var(--g-200); border-radius: var(--r-2); transition: border-color var(--dur) var(--ease), transform 220ms var(--ease); }
.qc:hover { border-color: var(--ink); transform: translateY(-2px); }
.qc__i { flex: none; width: 2.75rem; height: 2.75rem; display: grid; place-items: center; background: var(--g-50); border-radius: var(--r-1); color: var(--red); transition: background-color var(--dur) var(--ease), color var(--dur) var(--ease); }
.qc__i .bi { width: 1.35rem; height: 1.35rem; }
.qc__t { min-width: 0; display: grid; font-size: var(--t-xs); color: var(--g-500); }
.qc__t b { font-size: var(--t-sm); color: var(--ink); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.qc--wa .qc__i { color: #25D366; }
.qc--viber .qc__i { color: #7360F2; }
.qc:hover .qc__i { background: var(--red); color: var(--white); }
.qc--wa:hover .qc__i { background: #25D366; }
.qc--viber:hover .qc__i { background: #7360F2; }
.kt__sub { color: var(--g-600); font-size: var(--t-sm); margin-top: calc(var(--s-3) * -1); }
.kt__legal { font-size: var(--t-xs); color: var(--g-500); }
.kt__legal a { text-decoration: underline; }
.kt__ok { justify-items: start; }
.kt__ok[hidden] { display: none; }
.kt__form .btn--lg { width: 100%; }
.map--wide { width: 100%; aspect-ratio: 16 / 9; min-height: 20rem; }

/* Usluge: skok na uslugu */
.jump { position: sticky; top: var(--header-h); z-index: 20; background: var(--white); border-bottom: var(--line) solid var(--g-200); }
.jump__list { display: flex; gap: var(--s-1); overflow-x: auto; scrollbar-width: none; padding-block: var(--s-2); }
.jump__list::-webkit-scrollbar { display: none; }
.jump__list a { flex: none; display: inline-flex; align-items: center; gap: var(--s-2); height: 2.5rem; padding: 0 var(--s-3); border-radius: var(--r-1); font-size: var(--t-sm); font-weight: 600; color: var(--g-700); white-space: nowrap; transition: background-color var(--dur) var(--ease), color var(--dur) var(--ease); }
.jump__list a:hover { background: var(--g-50); color: var(--ink); }
.jump__list .i { font-size: 1.2rem; color: var(--red); }
.svc-list .container { display: grid; gap: clamp(3rem, 2rem + 4vw, 6rem); }
.svc { display: grid; gap: var(--s-6); align-items: center; scroll-margin-top: calc(var(--header-h) + 4rem); }
.svc__img { aspect-ratio: 4 / 3; overflow: hidden; border-radius: var(--r-2); background: var(--g-100); }
.svc__img img { width: 100%; height: 100%; object-fit: cover; transition: transform 1200ms cubic-bezier(.2, .8, .2, 1); }
.svc:hover .svc__img img { transform: scale(1.04); }
.svc__img--ico { display: grid; place-content: center; justify-items: center; gap: var(--s-2); background: var(--ink); color: var(--white); }
.svc__img--ico .i { font-size: 5rem; color: var(--red); }
.svc__ico-t { font-family: var(--f-head); font-size: var(--t-2xl); font-weight: 800; letter-spacing: .08em; }
.svc__txt .h2 { margin-top: var(--s-3); }
.svc__txt .lead { margin-top: var(--s-4); }
.svc__pts { display: grid; gap: var(--s-2); margin-top: var(--s-5); }
.svc__pts li { display: flex; align-items: flex-start; gap: var(--s-2); font-size: var(--t-sm); color: var(--g-700); }
.svc__pts .i { font-size: 1.15rem; color: var(--ok); }
.svc__a { display: flex; flex-wrap: wrap; gap: var(--s-2); margin-top: var(--s-6); }
.svc-mini { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 15rem), 1fr)); gap: var(--s-3); }
.svc-mini__i { position: relative; display: grid; gap: var(--s-1); padding: var(--s-5); background: var(--white); border: var(--line) solid var(--g-200); border-radius: var(--r-2); overflow: hidden; transition: border-color var(--dur) var(--ease); }
.svc-mini__i::before { content: ''; position: absolute; left: 0; right: 0; top: 0; height: 2px; background: var(--red); transform: scaleX(0); transform-origin: left; transition: transform 420ms cubic-bezier(.2, .8, .2, 1); }
.svc-mini__i:hover { border-color: var(--g-400); }
.svc-mini__i:hover::before { transform: scaleX(1); }
.svc-mini__i > .i { font-size: 2rem; color: var(--red); margin-bottom: var(--s-2); }
.svc-mini__i b { font-family: var(--f-head); font-size: var(--t-md); }
.svc-mini__i span:not(.i) { font-size: var(--t-sm); color: var(--g-600); }
.cta-band { display: grid; gap: var(--s-6); padding: clamp(1.75rem, 1rem + 3vw, 3.5rem); background: var(--red); color: var(--white); border-radius: var(--r-2); }
.cta-band .h2 { margin-top: var(--s-3); }
.cta-band__d { margin-top: var(--s-3); color: rgba(255, 255, 255, .88); }
.cta-band__a { display: flex; flex-wrap: wrap; gap: var(--s-2); align-content: end; }
.cta-band .btn--viber .bi, .cta-band .btn--wa .bi { color: var(--white); }
.hours--light { margin-top: var(--s-4); color: rgba(255, 255, 255, .82); }
.hours--light .is-today { color: var(--white); }

/* Novosti */
.posts { display: grid; gap: var(--s-4); }
.post { display: grid; background: var(--white); border: var(--line) solid var(--g-200); border-radius: var(--r-2); overflow: hidden; transition: border-color var(--dur) var(--ease), transform 320ms cubic-bezier(.2, .8, .2, 1); }
.post[hidden] { display: none; }
.post:hover { border-color: var(--g-400); transform: translateY(-3px); }
.post__img { aspect-ratio: 16 / 10; display: grid; place-items: center; background: var(--g-50); border-bottom: var(--line) solid var(--g-100); overflow: hidden; }
.post__img.is-cover img { object-fit: cover; padding: 0; mix-blend-mode: normal; }
.post__img img { width: 100%; height: 100%; object-fit: contain; padding: 10%; mix-blend-mode: multiply; transition: transform 800ms cubic-bezier(.2, .8, .2, 1); }
.post:hover .post__img img { transform: scale(1.05); }
.post__body { display: grid; gap: var(--s-2); align-content: start; padding: var(--s-5); }
.post__meta { display: flex; flex-wrap: wrap; gap: var(--s-1) var(--s-3); font-size: var(--t-xs); color: var(--g-500); }
.post__meta b { color: var(--red); text-transform: uppercase; letter-spacing: .08em; font-size: var(--t-2xs); align-self: center; }
.post__t { font-family: var(--f-head); font-size: var(--t-lg); font-weight: 800; line-height: 1.2; text-wrap: balance; }
.post:hover .post__t { color: var(--red); }
.post__d { color: var(--g-600); font-size: var(--t-sm); }
.post .link { margin-top: var(--s-2); justify-self: start; }
.post--big { margin-bottom: var(--s-4); }
.post--big .post__t { font-size: clamp(1.4rem, 1.1rem + 1.2vw, 2.1rem); }

/* Članak */
.art-head { max-width: 52rem; margin-top: var(--s-4); }
.art-head__meta { display: flex; flex-wrap: wrap; gap: var(--s-1) var(--s-3); font-size: var(--t-xs); color: var(--g-500); }
.art-head__meta b { color: var(--red); text-transform: uppercase; letter-spacing: .1em; }
.art-head__t { margin-top: var(--s-3); font-family: var(--f-head); font-size: clamp(1.9rem, 1.3rem + 2.4vw, 3.3rem); font-weight: 800; line-height: 1.08; letter-spacing: -.03em; text-wrap: balance; }
.art__grid { display: grid; gap: var(--s-7); align-items: start; }
.art__side { display: grid; gap: var(--s-3); }
.art-box { display: grid; gap: var(--s-3); padding: var(--s-5); background: var(--white); border: var(--line) solid var(--g-200); border-radius: var(--r-2); }
.art-box--dark { background: var(--ink); border-color: var(--ink); color: var(--white); }
.art-box__t { font-family: var(--f-head); font-weight: 800; font-size: var(--t-md); }
.art-box__d { font-size: var(--t-sm); color: var(--g-600); }
.art-box--dark .art-box__d { color: rgba(255, 255, 255, .75); }
.art-share { display: flex; gap: var(--s-2); }
.art-share .soc-ico { width: 2.75rem; height: 2.75rem; display: grid; place-items: center; border: var(--line) solid var(--g-300); border-radius: var(--r-1); color: var(--ink); transition: background-color var(--dur) var(--ease), border-color var(--dur) var(--ease), color var(--dur) var(--ease); }
.art-share .soc-ico:hover { background: var(--ink); color: var(--white); border-color: var(--ink); }
.art-share .bi { width: 1.2rem; height: 1.2rem; }
.prose { min-width: 0; max-width: 46rem; font-size: var(--t-md); line-height: 1.75; color: var(--g-700); }
.prose > * + * { margin-top: var(--s-5); }
.prose__hero { margin: 0 0 var(--s-6); aspect-ratio: 16 / 9; display: grid; place-items: center; background: var(--g-50); border: var(--line) solid var(--g-200); border-radius: var(--r-2); overflow: hidden; }
.prose__hero img { width: 100%; height: 100%; object-fit: contain; padding: 6%; mix-blend-mode: multiply; }
.prose__hero.is-cover { border: 0; }
.prose__hero.is-cover img { object-fit: cover; padding: 0; mix-blend-mode: normal; }
.prose h2 { margin-top: var(--s-8); font-family: var(--f-head); font-size: clamp(1.4rem, 1.2rem + .8vw, 1.9rem); font-weight: 800; line-height: 1.2; letter-spacing: -.02em; color: var(--ink); text-wrap: balance; }
.prose h3, .prose h4 { margin-top: var(--s-6); font-family: var(--f-head); font-size: var(--t-lg); font-weight: 800; color: var(--ink); }
.prose strong { color: var(--ink); }
.prose a { color: var(--red); text-decoration: underline; text-underline-offset: 3px; }
.prose ul, .prose ol { display: grid; gap: var(--s-2); padding-left: 1.25rem; }
.prose ul { list-style: disc; }
.prose ol { list-style: decimal; }
.prose li::marker { color: var(--red); }
.prose img { width: 100%; height: auto; border-radius: var(--r-2); background: var(--g-50); }
.prose table { width: 100%; border-collapse: collapse; font-size: var(--t-sm); display: block; overflow-x: auto; }
.prose th, .prose td { padding: var(--s-3); border-bottom: var(--line) solid var(--g-200); text-align: left; white-space: nowrap; }
.prose th { font-family: var(--f-head); color: var(--ink); background: var(--g-50); }
.prose > div:not(.bl-tags):not(.bl-autorbox) { padding: var(--s-5); background: var(--g-50); border-left: 3px solid var(--red); border-radius: 0 var(--r-2) var(--r-2) 0; }
.prose > div > * + * { margin-top: var(--s-3); }
.prose > div:not(.bl-tags):not(.bl-autorbox):has(> div) { display: grid; gap: var(--s-3); padding: 0; background: none; border: 0; }
.prose > div:not(.bl-tags):not(.bl-autorbox) > div { padding: var(--s-5); background: var(--g-50); border: var(--line) solid var(--g-200); border-radius: var(--r-2); }
.prose > div > div h4 { margin-top: 0; }
.art-tags { display: flex; flex-wrap: wrap; gap: var(--s-2); padding-top: var(--s-6); border-top: var(--line) solid var(--g-200); }
.tag { padding: .25rem .6rem; border: var(--line) solid var(--g-200); border-radius: var(--r-1); font-size: var(--t-xs); font-weight: 600; color: var(--g-600); }
.post-nav { display: grid; gap: var(--s-3); }
.post-nav__i { display: grid; gap: var(--s-1); padding: var(--s-4); border: var(--line) solid var(--g-200); border-radius: var(--r-2); transition: border-color var(--dur) var(--ease); }
.post-nav__i:hover { border-color: var(--ink); }
.post-nav__i > span { display: inline-flex; align-items: center; gap: var(--s-1); font-size: var(--t-xs); color: var(--g-500); }
.post-nav__i .i { font-size: 1rem; }
.post-nav__i b { font-family: var(--f-head); color: var(--ink); line-height: 1.25; }
.post-nav__i--next { text-align: right; justify-items: end; }

@media (min-width: 640px) {
  .kt__quick { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .posts { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .post-nav { grid-template-columns: 1fr 1fr; }
  .post--big { grid-template-columns: minmax(0, 6fr) minmax(0, 5fr); }
  .post--big .post__img { aspect-ratio: auto; border-bottom: 0; border-right: var(--line) solid var(--g-100); }
  .post--big .post__body { align-content: center; padding: var(--s-7); }
  .prose > div:has(> div) { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (min-width: 900px) {
  .kt { grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); gap: clamp(2.5rem, 1rem + 4vw, 5rem); }
  .kt__quick { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .svc { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: clamp(2.5rem, 1rem + 4vw, 5rem); }
  .svc:nth-child(even) .svc__img { order: 2; }
  .cta-band { grid-template-columns: minmax(0, 1fr) auto; align-items: end; }
  .posts { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .art__grid { grid-template-columns: minmax(0, 1fr) 19rem; gap: clamp(2.5rem, 1rem + 4vw, 5rem); }
  .art__side { position: sticky; top: calc(var(--header-h) + var(--s-5)); }
}

/* Pravne stranice */
.doc__grid { display: grid; gap: var(--s-7); align-items: start; }
.doc__side { display: none; }
.doc__h { font-size: var(--t-2xs); font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: var(--g-500); margin-bottom: var(--s-3); }
.doc__h + * + .doc__h, .doc__links { margin-top: 0; }
.doc__toc { display: grid; gap: 2px; margin-bottom: var(--s-6); counter-reset: none; }
.doc__toc a, .doc__links a { display: block; padding: .4rem var(--s-3); border-left: 2px solid var(--g-200); font-size: var(--t-sm); color: var(--g-600); transition: border-color var(--dur) var(--ease), color var(--dur) var(--ease); }
.doc__toc a:hover, .doc__links a:hover { color: var(--ink); border-color: var(--g-400); }
.doc__toc a.is-on, .doc__links a[aria-current] { color: var(--ink); font-weight: 700; border-color: var(--red); }
.doc__links { display: grid; gap: 2px; }
.doc__body h2 { scroll-margin-top: calc(var(--header-h) + var(--s-5)); }
.doc-cta, .doc-contact { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--s-3); padding: var(--s-5); background: var(--g-50); border: var(--line) solid var(--g-200); border-radius: var(--r-2); }
.doc-contact__a { display: flex; flex-wrap: wrap; gap: var(--s-2); }
.prose > .doc-cta, .prose > .doc-contact { border-left: var(--line) solid var(--g-200); }
@media (min-width: 1100px) {
  .doc__grid { grid-template-columns: 16rem minmax(0, 1fr); gap: clamp(2.5rem, 1rem + 4vw, 5rem); }
  .doc__side { display: block; position: sticky; top: calc(var(--header-h) + var(--s-5)); }
}

/* =====================================================================
   Račun: prijava, registracija, moj račun
   ===================================================================== */
.auth { display: grid; min-height: calc(100svh - var(--header-h) - var(--bar-h)); }
.auth__media { display: none; position: relative; isolation: isolate; overflow: hidden; background: var(--ink); color: var(--white); }
.auth__media img { position: absolute; inset: 0; z-index: -2; width: 100%; height: 100%; object-fit: cover; object-position: 40% 55%; }
.auth__media::after { content: ''; position: absolute; inset: 0; z-index: -1; background: rgba(8, 8, 8, .55); }
.auth__quote { position: absolute; left: clamp(2rem, 1rem + 3vw, 4rem); right: clamp(2rem, 1rem + 3vw, 4rem); bottom: clamp(2rem, 1rem + 3vw, 4rem); }
.auth__q { font-family: var(--f-head); font-size: clamp(1.5rem, 1rem + 1.6vw, 2.4rem); font-weight: 800; line-height: 1.12; letter-spacing: -.02em; max-width: 26ch; }
.auth__quote ul { display: grid; gap: var(--s-2); margin-top: var(--s-5); }
.auth__quote li { display: flex; align-items: center; gap: var(--s-2); color: rgba(255, 255, 255, .86); }
.auth__quote .i { color: var(--red); }
.auth__main { display: grid; place-items: center; padding: clamp(2rem, 1.5rem + 3vw, 4rem) var(--gutter); background: var(--g-50); }
.auth__card { width: min(100%, 30rem); display: grid; gap: var(--s-4); padding: clamp(1.5rem, 1rem + 2vw, 2.5rem); background: var(--white); border: var(--line) solid var(--g-200); border-radius: var(--r-2); }
.auth__h { font-family: var(--f-head); font-size: clamp(1.8rem, 1.4rem + 1.4vw, 2.4rem); font-weight: 800; letter-spacing: -.03em; }
.auth__lead { color: var(--g-600); font-size: var(--t-sm); margin-top: calc(var(--s-3) * -1); }
.auth__form { display: grid; gap: var(--s-4); }
.auth__form[hidden], .auth__ok[hidden] { display: none; }
.auth__form .btn--lg { width: 100%; }
.auth__forgot { justify-self: end; margin-top: calc(var(--s-2) * -1); font-size: var(--t-xs); font-weight: 600; text-decoration: underline; text-underline-offset: 3px; color: var(--g-600); }
.auth__alt { font-size: var(--t-sm); color: var(--g-600); text-align: center; }
.auth__alt a { display: inline-flex; align-items: center; gap: .2rem; font-weight: 700; color: var(--ink); text-decoration: underline; text-underline-offset: 3px; }
.auth__alt .i { font-size: 1rem; }
.auth__ok { display: grid; justify-items: start; gap: var(--s-3); }
.pw { position: relative; display: block; }
.pw input { padding-right: 3rem; }
.pw__eye { position: absolute; right: .35rem; top: 50%; translate: 0 -50%; width: 2.4rem; height: 2.4rem; display: grid; place-items: center; color: var(--g-500); border-radius: var(--r-1); }
.pw__eye:hover { color: var(--ink); background: var(--g-50); }
.pw__eye .i { font-size: 1.2rem; }
.pw-meter { display: block; height: 4px; border-radius: 2px; background: var(--g-100); overflow: hidden; }
.pw-meter i { display: block; height: 100%; width: calc(var(--snaga, 0) * 100%); background: var(--red); transition: width 260ms var(--ease), background-color 260ms var(--ease); }
[data-snaga='2'] .pw-meter i { background: var(--warn); }
[data-snaga='3'] .pw-meter i, [data-snaga='4'] .pw-meter i { background: var(--ok); }

.acc-hello { display: flex; align-items: center; gap: var(--s-4); }
.acc-hello__av { width: 3.5rem; height: 3.5rem; flex: none; display: grid; place-items: center; border-radius: 50%; background: var(--ink); color: var(--white); font-family: var(--f-head); font-weight: 800; font-size: var(--t-lg); }
.acc[hidden] { display: none; }
.acc__grid { display: grid; gap: var(--s-5); align-items: start; }
.acc__nav { display: flex; gap: var(--s-1); overflow-x: auto; scrollbar-width: none; border-bottom: var(--line) solid var(--g-200); }
.acc__nav::-webkit-scrollbar { display: none; }
.acc__nav button { flex: none; display: inline-flex; align-items: center; gap: var(--s-2); padding: var(--s-3) var(--s-4); font-size: var(--t-sm); font-weight: 600; color: var(--g-600); border-bottom: 2px solid transparent; margin-bottom: -1px; transition: color var(--dur) var(--ease), border-color var(--dur) var(--ease); }
.acc__nav button:hover { color: var(--ink); }
.acc__nav button[aria-selected='true'] { color: var(--ink); border-color: var(--red); }
.acc__nav .i { font-size: 1.2rem; }
.acc__panels, .acc__panel { display: grid; gap: var(--s-4); min-width: 0; }
.acc__panel[hidden] { display: none; }
.acc-stats { display: grid; gap: var(--s-3); }
.acc-stat { display: grid; grid-template-columns: auto 1fr; column-gap: var(--s-3); align-items: center; padding: var(--s-4) var(--s-5); background: var(--white); border: var(--line) solid var(--g-200); border-radius: var(--r-2); }
.acc-stat .i { grid-row: span 2; font-size: 1.75rem; color: var(--red); }
.acc-stat b { font-family: var(--f-head); font-size: var(--t-xl); font-weight: 800; }
.acc-stat span:not(.i) { font-size: var(--t-xs); color: var(--g-500); }
.acc-links { display: grid; gap: var(--s-3); }
.ords { display: grid; }
.ord { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: .2rem var(--s-4); align-items: center; padding-block: var(--s-3); border-bottom: var(--line) solid var(--g-100); font-size: var(--t-sm); }
.ord:last-child { border-bottom: 0; }
.ord__ref { font-weight: 700; }
.ord__d, .ord__p { font-size: var(--t-xs); color: var(--g-500); }
.ord__s { font-family: var(--f-head); text-align: right; }
.badge { justify-self: end; padding: .15rem .55rem; border-radius: 1rem; font-size: var(--t-2xs); font-weight: 700; letter-spacing: .04em; text-transform: uppercase; }
.badge--info { background: var(--g-100); color: var(--g-700); }
.badge--ok { background: #E7F4EB; color: var(--ok); }
.badge--err { background: var(--red-50); color: var(--red-700); }
.badge--warn { background: #FFF3DC; color: #8A5A00; }
@media (min-width: 640px) {
  .acc-stats, .acc-links { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .ord { grid-template-columns: 9rem minmax(0, 1fr) auto auto auto; }
  .ord__d { font-size: var(--t-sm); color: var(--g-600); }
}
@media (min-width: 1100px) {
  .auth { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
  .auth__media { display: block; }
  .acc__grid { grid-template-columns: 15rem minmax(0, 1fr); gap: clamp(2rem, 1rem + 3vw, 4rem); }
  .acc__nav { flex-direction: column; border: 0; position: sticky; top: calc(var(--header-h) + var(--s-5)); }
  .acc__nav button { border-bottom: 0; border-left: 2px solid transparent; margin: 0; padding: var(--s-3) var(--s-4); }
  .acc__nav button[aria-selected='true'] { border-left-color: var(--red); background: var(--g-50); }
}

/* 404 */
.nf__code { font-family: var(--f-head); font-size: clamp(5rem, 3rem + 9vw, 10rem); font-weight: 800; line-height: .9; letter-spacing: -.05em; color: var(--g-200); }
.nf__search { display: flex; align-items: center; gap: var(--s-2); width: min(100%, 34rem); padding: var(--s-1) var(--s-1) var(--s-1) var(--s-3); border: var(--line) solid var(--g-300); border-radius: var(--r-1); }
.nf__search .i { color: var(--g-500); }
.nf__search input { flex: 1; min-width: 0; height: 2.75rem; border: 0; font: inherit; font-size: var(--t-sm); background: none; }
.nf__search input:focus { outline: none; }
.nf .lead { max-width: 36rem; }

/* Moj račun: ulaz u administraciju za administratora */
.ph__acts { display: flex; flex-wrap: wrap; gap: var(--s-3); }
.acc-admin { display: flex; align-items: center; gap: var(--s-4); margin-bottom: var(--s-5); padding: var(--s-5); border-radius: var(--r-2); background: var(--ink); color: var(--white); transition: background-color var(--dur) var(--ease); }
.acc-admin:hover { background: var(--ink-3); }
.acc-admin__ic { flex: none; display: grid; place-items: center; width: 3rem; height: 3rem; border-radius: 50%; background: var(--red); }
.acc-admin__ic .i { font-size: 1.5rem; }
.acc-admin__t { display: grid; gap: .2rem; }
.acc-admin__t b { font-family: var(--f-head); font-size: var(--t-lg); font-weight: 800; letter-spacing: -.01em; }
.acc-admin__t span { font-size: var(--t-sm); color: var(--g-300); }
.acc-admin__go { margin-left: auto; display: inline-flex; align-items: center; gap: var(--s-2); font-family: var(--f-head); font-size: var(--t-xs); font-weight: 700; letter-spacing: .08em; text-transform: uppercase; white-space: nowrap; }
@media (max-width: 599px) { .acc-admin { flex-wrap: wrap; } .acc-admin__go { margin-left: 4rem; } }

/* ---------- Kurirske službe (dostava brzom poštom) ---------- */
.kuriri { display: grid; gap: var(--s-4); margin-top: var(--s-6); padding: var(--s-5); border: var(--line) solid var(--g-200); border-radius: var(--r-2); background: var(--g-50); }
.kuriri__t { display: flex; align-items: center; gap: var(--s-4); }
.kuriri__t > span:last-child { display: grid; gap: .15rem; min-width: 0; font-size: var(--t-sm); color: var(--g-600); text-wrap: pretty; }
.kuriri__t b { font-family: var(--f-head); font-size: var(--t-md); font-weight: 800; color: var(--ink); letter-spacing: -.01em; }
.kuriri__ic { flex: none; display: grid; place-items: center; width: 2.75rem; height: 2.75rem; border-radius: 50%; background: var(--white); border: var(--line) solid var(--g-200); color: var(--red); }
.kuriri__ic .i { font-size: 1.4rem; }
.kuriri__l { display: grid; grid-template-columns: repeat(auto-fill, minmax(7.25rem, 1fr)); gap: var(--s-2); }
.kuriri__l li { display: grid; place-items: center; height: 3.25rem; padding: 0 var(--s-3); border: var(--line) solid var(--g-200); border-radius: var(--r-2); background: var(--white); }
.kuriri__l img { width: auto; height: var(--kh, 1.5rem); max-width: 100%; object-fit: contain; }
.kuriri__l .k-ee { --kh: 1.9rem; }
.kuriri__l .k-a2b { --kh: 1.9rem; }
.kuriri__l .k-x { --kh: 1.6rem; }
.kuriri__l .k-bhp { --kh: 1.5rem; }
.kuriri__l .k-ps { --kh: 1.15rem; }
.kuriri__l .k-hp { --kh: .8rem; }
.kuriri__mini { font-size: var(--t-xs); font-weight: 700; letter-spacing: .04em; text-transform: uppercase; color: var(--g-500); }
/* manja varijanta: stranica proizvoda, košarica, checkout */
.kuriri--sm { gap: var(--s-2); margin-top: var(--s-4); padding: 0; border: 0; background: none; }
.kuriri--sm .kuriri__l { grid-template-columns: repeat(auto-fill, minmax(5.25rem, 1fr)); gap: var(--s-1); }
.kuriri--sm .kuriri__l li { height: 2.5rem; padding: 0 var(--s-2); }
.kuriri--sm .kuriri__l img { height: calc(var(--kh, 1.5rem) * .78); }
.kuriri--sum { margin-top: var(--s-5); padding-top: var(--s-4); border-top: var(--line) solid var(--g-100); }
.kuriri--doc { margin: var(--s-4) 0 var(--s-5); padding: var(--s-4); }
@media (min-width: 900px) {
  .kuriri:not(.kuriri--sm):not(.kuriri--doc) { grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr); align-items: center; gap: var(--s-6); }
  .kuriri__t b { white-space: nowrap; }
  .kuriri:not(.kuriri--sm) .kuriri__l li { height: 3.75rem; }
  .kuriri:not(.kuriri--sm) .kuriri__l img { height: calc(var(--kh, 1.5rem) * 1.12); }
  .kuriri:not(.kuriri--sm) .kuriri__l { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}
/* u footeru (tamna pozadina): bijele pločice */
.ftr__ship { display: grid; gap: var(--s-4); padding-block: var(--s-6); border-top: var(--line) solid var(--ink-line); }
.ftr__ship-t { display: flex; align-items: center; gap: var(--s-3); }
.ftr__ship-t > .i { font-size: 1.5rem; color: var(--red); }
.ftr__ship-t > span:last-child { display: grid; font-size: var(--t-sm); color: var(--g-400); }
.ftr__ship-t b { color: var(--white); font-size: var(--t-md); }
.ftr__ship .kuriri__l { grid-template-columns: repeat(auto-fill, minmax(6.5rem, 1fr)); }
.ftr__ship .kuriri__l li { height: 2.9rem; border-color: transparent; }
@media (min-width: 900px) {
  .ftr__ship { grid-template-columns: minmax(15rem, 1fr) minmax(0, 2.4fr); align-items: center; gap: var(--s-6); }
  .ftr__ship .kuriri__l { grid-template-columns: repeat(6, minmax(0, 1fr)); }
}

/* ---------- Varijante na stranici proizvoda ---------- */
.pvar { display: grid; gap: var(--s-4); margin-top: var(--s-5); padding-top: var(--s-5); border-top: var(--line) solid var(--g-200); }
.pvar__h { margin-bottom: var(--s-2); font-size: var(--t-sm); color: var(--g-600); }
.pvar__h b { color: var(--ink); font-weight: 700; }
.pvar__o { display: flex; flex-wrap: wrap; gap: var(--s-2); }
.vopt { position: relative; display: inline-flex; align-items: center; gap: .3rem; min-height: 2.5rem; min-width: 3.25rem; justify-content: center; padding: .45rem .85rem; border: var(--line) solid var(--g-300); border-radius: var(--r-2); background: var(--white); font-size: var(--t-sm); font-weight: 600; font-variant-numeric: tabular-nums; color: var(--ink); transition: border-color var(--dur) var(--ease), box-shadow var(--dur) var(--ease), background-color var(--dur) var(--ease); }
a.vopt:hover { border-color: var(--ink); background: var(--g-50); }
a.vopt:focus-visible { outline: 2px solid var(--red); outline-offset: 2px; }
.vopt.is-sel { border-color: var(--ink); box-shadow: inset 0 0 0 1px var(--ink); background: var(--ink); color: var(--white); }
.vopt.is-sel .i { font-size: 1rem; }
.vopt.is-off { color: var(--g-400); border-style: dashed; border-color: var(--g-200); background: var(--g-50); cursor: not-allowed; opacity: .7; }
.vopt.is-off::after { content: ''; position: absolute; left: 12%; right: 12%; top: 50%; border-top: var(--line) solid var(--g-300); transform: rotate(-12deg); }
.pvar__note { display: flex; align-items: center; gap: .35rem; font-size: var(--t-xs); color: var(--g-500); }
.pvar__note .i { font-size: 1rem; }
.pvar.is-loading { opacity: .55; pointer-events: none; transition: opacity 120ms; }

/* ---------- Pretraga po autu (felge, gume, webshop) ---------- */
.carpick { padding: var(--s-6) 0 0; }
.carpick__box { display: grid; gap: var(--s-4); align-items: center; padding: var(--s-5); border: 1px solid var(--g-200); border-radius: var(--r-3, 14px); background: #fff; box-shadow: 0 1px 2px rgba(0, 0, 0, .04); }
.carpick.is-on .carpick__box { border-color: var(--ink); }
.carpick__intro { display: flex; align-items: center; gap: var(--s-3); }
.carpick__ic { display: grid; place-items: center; flex: none; width: 48px; height: 48px; border-radius: 12px; background: var(--ink); color: #fff; }
.carpick__ic .i { font-size: 26px; }
.carpick__t { font-family: var(--f-head, inherit); font-size: 1.15rem; font-weight: 800; color: var(--ink); }
.carpick__d { font-size: var(--t-sm); color: var(--g-600); }
.carpick__form { display: grid; gap: var(--s-3); grid-template-columns: 1fr; }
.carpick__f { display: grid; gap: 4px; font-size: var(--t-xs, .8rem); font-weight: 700; color: var(--g-600); text-transform: uppercase; letter-spacing: .04em; }
.carpick__f select { height: 48px; padding: 0 var(--s-3); border: 1px solid var(--g-300); border-radius: var(--r-2, 8px); background: #fff; font-family: inherit; font-size: 15px; font-weight: 600; color: var(--ink); text-transform: none; letter-spacing: 0; }
.carpick__f select:disabled { background: var(--g-50, #fafafa); color: var(--g-400); }
.carpick__go { height: 48px; align-self: end; }
.carpick__info { grid-column: 1 / -1; display: flex; gap: var(--s-2); padding: var(--s-3) var(--s-4); border-radius: var(--r-2, 8px); background: #F1F5FE; color: #1E3A8A; font-size: var(--t-sm); line-height: 1.5; }
.carpick__info .i { flex: none; font-size: 20px; }
.carpick__info a { color: inherit; font-weight: 700; text-decoration: underline; }
@media (min-width: 900px) {
  .carpick__box { grid-template-columns: minmax(240px, 320px) 1fr; }
  .carpick__form { grid-template-columns: 1fr 1.4fr auto; }
}
.dimf__auto { display: inline-flex; align-items: center; gap: var(--s-2); margin-top: var(--s-3); padding: 10px 16px; border-radius: 999px; background: var(--ink); color: #fff; font-size: var(--t-sm); font-weight: 600; text-decoration: none; transition: transform .2s; }
.dimf__auto:hover { transform: translateY(-1px); }
.dimf__auto b { color: #fff; }
.dimf__auto .i { font-size: 20px; }

/* ---------- Termin za montažu ---------- */
.tm { display: grid; gap: var(--s-5); align-items: start; }
@media (min-width: 1000px) { .tm { grid-template-columns: minmax(0, 1fr) 320px; } .tm__ok { grid-column: 1; } }
.tm__form { display: grid; gap: var(--s-5); }
.tm__step { display: grid; gap: var(--s-3); }
.tm__h { display: flex; align-items: center; gap: var(--s-2); font-family: var(--f-head, inherit); font-weight: 800; font-size: 1.1rem; color: var(--ink); }
.tm__n { display: grid; place-items: center; width: 28px; height: 28px; border-radius: 50%; background: var(--ink); color: #fff; font-size: .85rem; }
.tm__usluge { display: grid; gap: var(--s-2); grid-template-columns: repeat(auto-fill, minmax(min(100%, 290px), 1fr)); }
.tm__usl { display: flex; align-items: center; gap: var(--s-2); min-height: 52px; padding: var(--s-2) var(--s-3); border: 1px solid var(--g-300); border-radius: var(--r-2, 8px); background: #fff; font: inherit; font-size: var(--t-sm); font-weight: 600; color: var(--ink); text-align: left; cursor: pointer; }
.tm__usl .i { color: var(--g-500); }
.tm__usl[aria-checked="true"], .tm__dan[aria-checked="true"], .tm__sat[aria-checked="true"] { border-color: var(--ink); box-shadow: inset 0 0 0 1px var(--ink); background: #F6F6F7; }
.tm__usl[aria-checked="true"] .i { color: var(--red); }
.tm__dani { display: flex; gap: var(--s-2); overflow-x: auto; padding-bottom: 4px; scrollbar-width: thin; }
.tm__dan { display: grid; justify-items: center; gap: 2px; flex: 0 0 76px; padding: 10px 6px; border: 1px solid var(--g-300); border-radius: var(--r-2, 8px); background: #fff; font: inherit; cursor: pointer; }
.tm__dan small { font-size: .75rem; font-weight: 700; text-transform: uppercase; color: var(--g-500); }
.tm__dan b { font-size: 1.05rem; color: var(--ink); }
.tm__dan i { font-style: normal; font-size: .72rem; color: #15803D; }
.tm__dan:disabled { opacity: .45; cursor: not-allowed; }
.tm__dan:disabled i { color: var(--g-500); }
.tm__sati { display: grid; gap: var(--s-2); grid-template-columns: repeat(auto-fill, minmax(96px, 1fr)); }
.tm__sat { display: grid; gap: 2px; padding: 10px; border: 1px solid var(--g-300); border-radius: var(--r-2, 8px); background: #fff; font: inherit; cursor: pointer; }
.tm__sat b { font-size: 1rem; color: var(--ink); }
.tm__sat small { font-size: .72rem; color: #15803D; }
.tm__sat:disabled { opacity: .45; cursor: not-allowed; text-decoration: line-through; }
.tm__sat:disabled small { color: var(--g-500); }
.tm__odabir { display: flex; align-items: center; gap: var(--s-2); padding: var(--s-3) var(--s-4); border-radius: var(--r-2, 8px); background: #EAF7EE; color: #14532D; font-size: var(--t-sm); }
.tm__skel { height: 72px; border-radius: 8px; flex: 1; }
.tm__prazno { font-size: var(--t-sm); color: var(--g-600); }
.tm__side { display: grid; gap: var(--s-3); }
.tm__card { padding: var(--s-4); border: 1px solid var(--g-200); border-radius: var(--r-3, 12px); background: #fff; }
.tm__card-t { display: flex; align-items: center; gap: var(--s-2); margin-bottom: var(--s-2); font-weight: 700; color: var(--ink); }
.tm__card-t .i { color: var(--red); }
.tm__list { display: grid; gap: 6px; padding-left: 1.1rem; font-size: var(--t-sm); color: var(--g-700); list-style: disc; }
.tm__card-d { font-size: var(--t-sm); color: var(--g-700); }
.tm__card-d a { color: var(--red); font-weight: 700; }

/* ---------- EU oznaka gume ---------- */
.eul { display: grid; gap: 10px; margin-top: var(--s-5); padding: var(--s-4); border: 1px solid var(--g-200); border-radius: var(--r-3, 12px); background: #fff; }
.eul__t { display: flex; align-items: center; gap: var(--s-2); font-weight: 800; color: var(--ink); }
.eul__eu { display: grid; place-items: center; width: 34px; height: 24px; border-radius: 4px; background: #003399; color: #FFCC00; font-size: .72rem; font-weight: 800; letter-spacing: .04em; }
.eul__red { display: grid; grid-template-columns: 24px minmax(0, 1fr) auto auto; align-items: center; gap: var(--s-2); font-size: var(--t-sm); }
.eul__red .i { color: var(--g-600); font-size: 20px; }
.eul__n { color: var(--g-700); }
.eul__v { min-width: 2.5rem; text-align: right; color: var(--ink); }
.eul__skala { display: inline-flex; gap: 2px; }
.eul__k { display: grid; place-items: center; width: 22px; height: 20px; border-radius: 3px; background: color-mix(in srgb, var(--c) 28%, #fff); color: rgba(0, 0, 0, .45); font-size: .68rem; font-weight: 800; }
.eul__k.is-on { background: var(--c); color: #111; transform: scale(1.15); box-shadow: 0 1px 3px rgba(0, 0, 0, .25); }
.eul__zn { display: flex; flex-wrap: wrap; gap: var(--s-2); }
.eul__z { display: inline-flex; align-items: center; gap: 6px; padding: 5px 10px; border-radius: 999px; background: #EFF6FF; color: #1E3A8A; font-size: .78rem; font-weight: 600; }
.eul__z .i { font-size: 16px; }
.eul__link { display: inline-flex; align-items: center; gap: 6px; font-size: .8rem; color: var(--g-600); text-decoration: underline; }
.eul__link .i { font-size: 16px; }

/* ---------- Footer: ikone uz linkove, dostava i plaćanje ---------- */
.ftr__links a, .ftr__btn, .ftr__txt { display: inline-flex; align-items: center; gap: .6rem; transition: color var(--dur) var(--ease), transform var(--dur) var(--ease); }
.ftr__links .i { flex: none; font-size: 1.05rem; color: var(--g-600); transition: color var(--dur) var(--ease); }
.ftr__links a:hover, .ftr__btn:hover { color: var(--white); transform: translateX(2px); }
.ftr__links a:hover .i, .ftr__btn:hover .i { color: var(--red); }
.ftr__links--kontakt .status { color: inherit; }
.ftr__txt { align-items: flex-start !important; }
.ftr__txt > .i { margin-top: .1rem; }
.ftr__bands { display: grid; gap: var(--s-4); padding-block: var(--s-6); border-top: var(--line) solid var(--ink-line); }
@media (min-width: 1000px) { .ftr__bands { grid-template-columns: minmax(0, 1.35fr) minmax(0, 1fr); } }
.ftr__band { display: grid; gap: var(--s-4); align-content: start; padding: var(--s-5); border: var(--line) solid var(--ink-line); border-radius: var(--r-2); background: rgba(255, 255, 255, .025); }
.ftr__band-t { display: flex; align-items: center; gap: var(--s-3); min-width: 0; }
.ftr__band-t > span:last-child { display: grid; gap: .15rem; min-width: 0; }
.ftr__band-t b { color: var(--white); font-family: var(--f-head); font-size: var(--t-md); font-weight: 800; letter-spacing: -.01em; }
.ftr__band-d { font-size: var(--t-sm); color: var(--g-400); }
@media (min-width: 560px) { .ftr__band-d, .ftr__band-t b { white-space: nowrap; } }
.ftr__band-ic { flex: none; display: grid; place-items: center; width: 2.75rem; height: 2.75rem; border-radius: 50%; background: rgba(211, 47, 47, .14); color: var(--red); }
.ftr__band-ic .i { font-size: 1.4rem; }
.ftr__band .kuriri__l { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.ftr__band .kuriri__l li { height: 2.9rem; border-color: transparent; }
.ftr__pay img { height: .95rem; width: auto; opacity: .9; }

/* ---------- Monri: kartično plaćanje uskoro ---------- */
.monri { display: flex; align-items: center; gap: var(--s-3); min-width: 0; padding: var(--s-3) var(--s-4); border: var(--line) dashed var(--g-300); border-radius: var(--r-2); background: var(--white); }
.monri__logo { flex: none; width: auto; height: 1.35rem; }
.monri__t { display: grid; gap: .1rem; min-width: 0; font-size: var(--t-xs); color: var(--g-600); line-height: 1.35; }
.monri__t b { font-size: var(--t-sm); color: var(--ink); }
.monri__badge { flex: none; margin-left: auto; padding: .3rem .6rem; border-radius: 999px; background: #EEF2FF; color: #3730A3; font-size: .7rem; font-weight: 800; letter-spacing: .05em; text-transform: uppercase; }
.monri--dark { border-color: rgba(255, 255, 255, .18); background: rgba(255, 255, 255, .04); }
.monri--dark .monri__t { color: var(--g-400); }
.monri--dark .monri__t b { color: var(--white); }
.monri--dark .monri__badge { background: rgba(129, 140, 248, .18); color: #C7D2FE; }
.monri--sm { padding: var(--s-2) var(--s-3); }
.monri--sm .monri__logo { height: 1.1rem; }
.pd__monri { margin-top: var(--s-4); }
.sum .monri { margin-top: var(--s-4); }
.opt__monri { display: inline-block; height: .95rem; width: auto; margin-left: .35rem; vertical-align: -.1rem; }

/* ---------- Profilna slika ---------- */
.acct__av, .bar__av, .acc-hello__av { overflow: hidden; }
.acct__av:not(.has-img), .acc-hello__av:not(.has-img) { background: #2A2A2E; }
.acct__av img, .bar__av img, .acc-hello__av img, .avp__img img { width: 100%; height: 100%; object-fit: cover; border-radius: 50%; }
.acct__av .i { font-size: 1.25rem; }
.acct__av--lg .i { font-size: 1.6rem; }
.bar__av .i { font-size: 1rem; }
.acc-hello__av .i { font-size: 2rem; }
.acct__btn .acct__av::after { z-index: 1; }
.avp { display: flex; align-items: center; gap: var(--s-5); margin-bottom: var(--s-4); }
.avp__img { flex: none; display: grid; place-items: center; width: 6rem; height: 6rem; border-radius: 50%; background: var(--g-100); color: var(--g-500); overflow: hidden; }
.avp__img .i { font-size: 3rem; }
.avp__t { display: grid; gap: var(--s-2); min-width: 0; }
.avp__a { display: flex; flex-wrap: wrap; gap: var(--s-2); }
@media (max-width: 480px) { .avp { flex-direction: column; text-align: center; } .avp__a { justify-content: center; } }

/* =========================== Blog =========================== */
.bl-progress { position: fixed; inset: 0 0 auto 0; z-index: 90; height: 3px; pointer-events: none; }
.bl-progress i { display: block; height: 100%; background: var(--red); transform: scaleX(0); transform-origin: left; }
.bl-hero, .bl-top__feat { position: relative; display: block; min-height: clamp(26rem, 62vh, 40rem); overflow: hidden; background: var(--ink); color: var(--white); isolation: isolate; }
.bl-hero__img { position: absolute; inset: 0; z-index: -2; width: 100%; height: 100%; object-fit: cover; transition: transform 1.2s var(--ease); }
.bl-hero::after, .bl-top__feat::after { content: ''; position: absolute; inset: 0; z-index: -1; background: linear-gradient(180deg, rgba(10, 10, 10, .25) 0%, rgba(10, 10, 10, .35) 40%, rgba(10, 10, 10, .92) 100%); }
.bl-top__feat:hover .bl-hero__img { transform: scale(1.03); }
.bl-hero__in { display: flex; flex-direction: column; justify-content: flex-end; align-items: flex-start; gap: var(--s-3); min-height: inherit; padding-block: calc(var(--s-9) + 2rem) var(--s-8); }
.bl-hero .crumbs, .bl-top .crumbs { margin-bottom: auto; color: rgba(255, 255, 255, .7); }
.bl-hero .crumbs a { color: rgba(255, 255, 255, .85); }
.bl-hero__t { max-width: 22ch; font-family: var(--f-head); font-size: clamp(1.9rem, 1.2rem + 3vw, 3.6rem); font-weight: 800; line-height: 1.08; letter-spacing: -.025em; text-wrap: balance; }
.bl-hero__lead { max-width: 60ch; font-size: clamp(1rem, .95rem + .3vw, 1.15rem); line-height: 1.6; color: rgba(255, 255, 255, .82); text-wrap: pretty; }
.bl-hero__meta { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s-3) var(--s-5); margin-top: var(--s-2); font-size: var(--t-sm); color: rgba(255, 255, 255, .8); }
.bl-hero__meta > span { display: inline-flex; align-items: center; gap: .4rem; white-space: nowrap; }
.bl-hero__meta .i { font-size: 1.1rem; }
.bl-top__lbl { display: inline-flex; align-items: center; gap: .4rem; font-size: var(--t-xs); font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: #FCA5A5; }
.bl-top__lbl .i { font-size: 1rem; }
.bl-autor { display: inline-flex; align-items: center; gap: var(--s-2); }
.bl-autor > span:last-child { display: grid; line-height: 1.25; }
.bl-autor b { color: var(--white); }
.bl-autor small { font-size: var(--t-xs); color: rgba(255, 255, 255, .65); }
.bl-autor__av { flex: none; width: 2.5rem; height: 2.5rem; overflow: hidden; border-radius: 50%; border: 2px solid rgba(255, 255, 255, .85); }
.bl-autor__av img { width: 100%; height: 100%; object-fit: cover; }
.bl-autor__av--lg { width: 4rem; height: 4rem; border-color: var(--g-200); }
.blc__kat { display: inline-flex; align-items: center; gap: .35rem; padding: .35rem .7rem; border-radius: 999px; background: rgba(10, 10, 10, .72); backdrop-filter: blur(6px); color: var(--white); font-size: .72rem; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; white-space: nowrap; }
.blc__kat .i { font-size: .95rem; color: #FCA5A5; }
.blc__kat--lg { padding: .45rem .85rem; background: var(--red); font-size: .75rem; }
.blc__kat--lg .i { color: var(--white); }
.bl-intro { display: grid; gap: var(--s-4); align-items: end; margin-bottom: var(--s-6); }
@media (min-width: 900px) { .bl-intro { grid-template-columns: minmax(0, 1fr) minmax(18rem, 24rem); } }
.bl-intro .lead { max-width: 62ch; text-wrap: pretty; }
.bl-search { display: flex; align-items: center; gap: var(--s-2); height: 3rem; padding: 0 var(--s-4); border: var(--line) solid var(--g-300); border-radius: 999px; background: var(--white); }
.bl-search:focus-within { border-color: var(--ink); }
.bl-search .i { color: var(--g-500); }
.bl-search input { flex: 1; min-width: 0; border: 0; background: none; font: inherit; outline: none; }
.bl-teme { display: grid; gap: var(--s-3); grid-template-columns: repeat(auto-fit, minmax(min(100%, 13.5rem), 1fr)); margin-bottom: var(--s-7); }
.bl-tema { display: flex; align-items: center; gap: var(--s-3); padding: var(--s-3) var(--s-4); border: var(--line) solid var(--g-200); border-radius: var(--r-2); background: var(--white); text-align: left; cursor: pointer; transition: border-color var(--dur) var(--ease), transform var(--dur) var(--ease); }
.bl-tema:hover { border-color: var(--g-400); transform: translateY(-1px); }
.bl-tema > span:nth-child(2) { display: grid; min-width: 0; line-height: 1.3; }
.bl-tema b { color: var(--ink); white-space: nowrap; }
.bl-tema small { font-size: var(--t-xs); color: var(--g-500); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.bl-tema__ic { flex: none; display: grid; place-items: center; width: 2.5rem; height: 2.5rem; border-radius: 10px; background: var(--g-100); color: var(--ink); }
.bl-tema__n { margin-left: auto; font-weight: 700; color: var(--g-500); }
.bl-tema[aria-pressed="true"] { border-color: var(--ink); box-shadow: inset 0 0 0 1px var(--ink); }
.bl-tema[aria-pressed="true"] .bl-tema__ic { background: var(--red); color: var(--white); }
.bl-feat { display: grid; gap: var(--s-4); margin-bottom: var(--s-4); }
@media (min-width: 800px) { .bl-feat { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.bl-grid { display: grid; gap: var(--s-4); grid-template-columns: repeat(auto-fill, minmax(min(100%, 20rem), 1fr)); }
.blc { position: relative; display: flex; flex-direction: column; overflow: hidden; border: var(--line) solid var(--g-200); border-radius: var(--r-3, 14px); background: var(--white); color: inherit; transition: transform .35s var(--ease), box-shadow .35s var(--ease), border-color .35s var(--ease); }
.blc:hover { transform: translateY(-4px); border-color: var(--g-300); box-shadow: 0 18px 40px -18px rgba(0, 0, 0, .28); }
.blc[hidden] { display: none; }
.blc__media { position: relative; display: block; aspect-ratio: 16 / 10; overflow: hidden; background: var(--g-100); }
.blc__media .blc__kat { position: absolute; top: var(--s-3); left: var(--s-3); }
.blc__img { width: 100%; height: 100%; object-fit: cover; transition: transform .8s var(--ease); }
.blc:hover .blc__img { transform: scale(1.05); }
.blc__body { display: flex; flex-direction: column; gap: var(--s-2); flex: 1; padding: var(--s-5); }
.blc__meta { display: flex; flex-wrap: wrap; align-items: center; gap: .35rem var(--s-4); font-size: var(--t-xs); color: var(--g-500); }
.blc__meta > span, .blc__meta > time { display: inline-flex; align-items: center; gap: .3rem; white-space: nowrap; }
.blc__meta .i { font-size: .95rem; }
.blc__t { font-family: var(--f-head); font-size: 1.2rem; font-weight: 800; line-height: 1.25; letter-spacing: -.015em; color: var(--ink); text-wrap: balance; }
.blc__d { display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; font-size: var(--t-sm); line-height: 1.6; color: var(--g-600); }
.blc__more { display: inline-flex; align-items: center; gap: .35rem; margin-top: auto; padding-top: var(--s-3); font-size: var(--t-sm); font-weight: 700; color: var(--ink); }
.blc__more .i { font-size: 1.1rem; transition: transform var(--dur) var(--ease); }
.blc:hover .blc__more .i { transform: translateX(4px); }
.blc--feat { min-height: 22rem; justify-content: flex-end; border: 0; background: var(--ink); color: var(--white); isolation: isolate; }
.blc--feat .blc__img { position: absolute; inset: 0; z-index: -2; }
.blc--feat::after { content: ''; position: absolute; inset: 0; z-index: -1; background: linear-gradient(180deg, rgba(0, 0, 0, 0) 25%, rgba(0, 0, 0, .88) 100%); }
.blc__over { display: grid; gap: var(--s-2); justify-items: start; padding: var(--s-6); }
.blc--feat .blc__t { color: var(--white); font-size: clamp(1.25rem, 1rem + .9vw, 1.65rem); }
.blc--feat .blc__meta { color: rgba(255, 255, 255, .78); }
.bl-feat[hidden] { display: none; }
.bl-prazno { display: flex; align-items: center; justify-content: center; gap: var(--s-2); padding: var(--s-8) 0; color: var(--g-500); }
.bl-prazno[hidden] { display: none; }
.bl-cta { display: grid; gap: var(--s-4); align-items: center; padding: var(--s-6); border-radius: var(--r-3, 14px); background: var(--ink); color: var(--white); }
@media (min-width: 1000px) { .bl-cta { grid-template-columns: auto minmax(0, 1fr) auto; } }
.bl-cta__ic { display: grid; place-items: center; width: 3.5rem; height: 3.5rem; border-radius: 50%; background: var(--red); }
.bl-cta__ic .i { font-size: 1.8rem; }
.bl-cta__t { font-family: var(--f-head); font-size: 1.35rem; font-weight: 800; text-wrap: balance; }
.bl-cta__d { color: rgba(255, 255, 255, .75); text-wrap: pretty; }
.bl-cta__a { display: flex; flex-wrap: wrap; gap: var(--s-2); }
.bl-cta .btn--line { border-color: rgba(255, 255, 255, .3); color: var(--white); }
.bl-art__grid { display: grid; gap: var(--s-6); align-items: start; }
@media (min-width: 1100px) { .bl-art__grid { grid-template-columns: 15rem minmax(0, 1fr) 17rem; gap: var(--s-8); } .bl-toc, .bl-side { position: sticky; top: calc(var(--hdr-h, 72px) + 1.5rem); } }
.bl-toc__box { border: var(--line) solid var(--g-200); border-radius: var(--r-2); background: var(--white); }
.bl-toc__box summary { display: flex; align-items: center; gap: var(--s-2); padding: var(--s-3) var(--s-4); font-weight: 700; color: var(--ink); cursor: pointer; list-style: none; }
.bl-toc__box summary::-webkit-details-marker { display: none; }
.bl-toc__chev { margin-left: auto; transition: transform var(--dur) var(--ease); }
.bl-toc__box[open] .bl-toc__chev { transform: rotate(180deg); }
.bl-toc ol { display: grid; gap: 2px; padding: 0 var(--s-2) var(--s-3); counter-reset: toc; list-style: none; }
.bl-toc li { counter-increment: toc; }
.bl-toc a { display: grid; grid-template-columns: 1.6rem 1fr; gap: .25rem; padding: .45rem var(--s-2); border-radius: 6px; font-size: var(--t-sm); line-height: 1.35; color: var(--g-600); }
.bl-toc a::before { content: counter(toc, decimal-leading-zero); font-size: .72rem; font-weight: 700; color: var(--g-400); padding-top: .12rem; }
.bl-toc a:hover { background: var(--g-50); color: var(--ink); }
.bl-toc a.is-on { background: #FDECEC; color: var(--ink); font-weight: 600; }
.bl-toc a.is-on::before { color: var(--red); }
.bl-prose { max-width: 46rem; font-size: 1.0625rem; line-height: 1.78; }
.bl-prose h2 { position: relative; margin-top: 2.6rem; padding-top: 1rem; scroll-margin-top: calc(var(--hdr-h, 72px) + 1.5rem); font-size: clamp(1.35rem, 1.1rem + .9vw, 1.75rem); text-wrap: balance; }
.bl-prose h2::before { content: ''; position: absolute; top: 0; left: 0; width: 2.5rem; height: 3px; border-radius: 2px; background: var(--red); }
.bl-prose > p:first-child { font-size: 1.18rem; line-height: 1.7; color: var(--g-700); }
.bl-prose img { border-radius: var(--r-2); }
.bl-tags { display: flex; flex-wrap: wrap; gap: var(--s-2); margin-top: var(--s-7); }
.bl-tag { padding: .35rem .75rem; border-radius: 999px; background: var(--g-100); font-size: var(--t-xs); font-weight: 600; color: var(--g-700); }
.bl-autorbox { display: flex; gap: var(--s-4); margin-top: var(--s-6); padding: var(--s-5); border: var(--line) solid var(--g-200); border-radius: var(--r-3, 14px); background: var(--g-50); }
.bl-autorbox b { font-family: var(--f-head); font-size: 1.05rem; color: var(--ink); }
.bl-autorbox p { margin: .35rem 0 0; font-size: var(--t-sm); line-height: 1.6; color: var(--g-600); }
.bl-autorbox__a { display: flex; flex-wrap: wrap; gap: var(--s-2); margin-top: var(--s-3); }
.bl-nav { display: grid; gap: var(--s-3); margin-top: var(--s-6); }
@media (min-width: 700px) { .bl-nav { grid-template-columns: 1fr 1fr; } }
.bl-nav__i { display: flex; align-items: center; gap: var(--s-3); padding: var(--s-3); border: var(--line) solid var(--g-200); border-radius: var(--r-2); background: var(--white); transition: border-color var(--dur) var(--ease); }
.bl-nav__i:hover { border-color: var(--ink); }
.bl-nav__i img { flex: none; width: 4.5rem; height: 4.5rem; border-radius: 8px; object-fit: cover; }
.bl-nav__i > span { display: grid; gap: .2rem; min-width: 0; }
.bl-nav__i small { display: inline-flex; align-items: center; gap: .25rem; font-size: var(--t-xs); font-weight: 700; color: var(--g-500); text-transform: uppercase; letter-spacing: .05em; }
.bl-nav__i small .i { font-size: 1rem; }
.bl-nav__i b { font-size: var(--t-sm); line-height: 1.35; color: var(--ink); text-wrap: balance; }
.bl-nav__i--next { flex-direction: row-reverse; text-align: right; }
.bl-nav__i--next small { justify-content: flex-end; }
.bl-side { display: grid; gap: var(--s-3); }
.bl-side__box { display: grid; gap: var(--s-3); padding: var(--s-5); border: var(--line) solid var(--g-200); border-radius: var(--r-3, 14px); background: var(--white); }
.bl-side__box--dark { border: 0; background: var(--ink); color: var(--white); }
.bl-side__t { font-weight: 700; color: var(--ink); }
.bl-side__box--dark .bl-side__t { font-family: var(--f-head); font-size: 1.1rem; color: var(--white); }
.bl-side__d { font-size: var(--t-sm); line-height: 1.55; color: rgba(255, 255, 255, .72); }
.bl-side__ic { display: grid; place-items: center; width: 2.75rem; height: 2.75rem; border-radius: 10px; background: var(--red); }
.btn--block { width: 100%; justify-content: center; }

.bl-autorbox > div { min-width: 0; }
@media (max-width: 700px) {
  .bl-hero::after, .bl-top__feat::after { background: linear-gradient(180deg, rgba(10, 10, 10, .45) 0%, rgba(10, 10, 10, .78) 35%, rgba(10, 10, 10, .95) 100%); }
  .bl-hero__in { padding-block: calc(var(--s-8) + 1rem) var(--s-6); }
}
.bl-prose .btn, .bl-prose .bl-nav a { text-decoration: none; }
.bl-prose .btn--dark { color: var(--white); }
.bl-prose .btn--line, .bl-prose .bl-nav a { color: var(--ink); }

/* sezone guma: tri kartice tek kad ima mjesta, na tabletu jedna ispod druge */
@media (min-width: 1000px) {
  .qseasons { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .qseason { grid-template-columns: auto minmax(0, 1fr); grid-template-rows: auto auto auto; row-gap: .1rem; }
}

/* ---------- Avatar: slika zaobljena sama, tačka "prijavljen" preko ruba ---------- */
.acct__av, .bar__av, .acc-hello__av { overflow: visible; }
.acct__av::after { box-sizing: content-box; }
.acct__btn .acct__av::after { right: -3px; bottom: -3px; width: .65rem; height: .65rem; border: 2px solid var(--ink); }

/* ---------- Mini košarica ---------- */
.mcart { position: relative; }
.mcart__pop { position: absolute; top: calc(100% + 10px); right: 0; z-index: 70; width: 24rem; max-width: calc(100vw - 2rem); padding: var(--s-4); border-radius: var(--r-3, 14px); background: var(--white); color: var(--ink); box-shadow: 0 24px 60px -20px rgba(0, 0, 0, .45), 0 0 0 1px rgba(0, 0, 0, .06); opacity: 0; visibility: hidden; transform: translateY(6px); transition: opacity .18s var(--ease), transform .18s var(--ease), visibility 0s linear .18s; }
.mcart__pop::before { content: ''; position: absolute; top: -12px; left: 0; right: 0; height: 12px; }
.mcart.is-open .mcart__pop { opacity: 1; visibility: visible; transform: none; transition-delay: 0s; }
.mcart__h { display: flex; justify-content: space-between; align-items: baseline; padding-bottom: var(--s-3); border-bottom: var(--line) solid var(--g-150, #eee); font-family: var(--f-head); font-weight: 800; }
.mcart__h span { font-family: var(--f-body, inherit); font-size: var(--t-xs); font-weight: 600; color: var(--g-500); }
.mcart__list { display: grid; max-height: 18rem; overflow-y: auto; }
.mcart__i { display: grid; grid-template-columns: 3.5rem minmax(0, 1fr) auto; gap: var(--s-3); align-items: center; padding: var(--s-3) 0; border-bottom: var(--line) solid var(--g-100); color: inherit; }
.mcart__i:hover b { color: var(--red); }
.mcart__img { width: 3.5rem; height: 3.5rem; overflow: hidden; border-radius: 8px; background: var(--g-50); }
.mcart__img img { width: 100%; height: 100%; object-fit: contain; }
.mcart__t { display: grid; gap: .1rem; min-width: 0; font-size: var(--t-xs); color: var(--g-500); }
.mcart__t b { overflow: hidden; font-size: var(--t-sm); color: var(--ink); text-overflow: ellipsis; white-space: nowrap; transition: color var(--dur) var(--ease); }
.mcart__t small { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.mcart__p { font-size: var(--t-sm); font-weight: 700; white-space: nowrap; }
.mcart__more { padding-top: var(--s-2); font-size: var(--t-xs); color: var(--g-500); }
.mcart__sum { display: grid; gap: .3rem; margin-top: var(--s-3); font-size: var(--t-sm); }
.mcart__sum > div { display: flex; justify-content: space-between; gap: var(--s-3); }
.mcart__sum dt { color: var(--g-600); }
.mcart__sum dd { margin: 0; }
.mcart__tot { margin-top: .25rem; padding-top: .5rem; border-top: var(--line) solid var(--g-200); font-weight: 800; font-size: 1rem; }
.mcart__tot dt { color: var(--ink); }
.mcart__note { display: flex; align-items: center; gap: .35rem; margin-top: var(--s-2); font-size: var(--t-xs); color: #15803D; }
.mcart__note .i { font-size: 1rem; }
.mcart__btns { display: grid; grid-template-columns: 1fr 1fr; gap: var(--s-2); margin-top: var(--s-4); }
.mcart__btns .btn { justify-content: center; }
.mcart__empty { display: grid; justify-items: center; gap: .35rem; padding: var(--s-4) 0 0; text-align: center; font-size: var(--t-sm); color: var(--g-500); }
.mcart__empty > .i { font-size: 2.2rem; color: var(--g-300); }
.mcart__empty b { font-family: var(--f-head); color: var(--ink); }
.mcart__empty .mcart__btns { width: 100%; }
@media (max-width: 1023px), (hover: none) { .mcart__pop { display: none; } }

/* ---------- Prazna košarica preko cijele širine ---------- */
.co__grid:has(> [data-cart-summary][hidden]) { grid-template-columns: minmax(0, 1fr); }
.cart-empty { display: grid; justify-items: center; gap: var(--s-2); padding: clamp(3rem, 2rem + 4vw, 6rem) var(--s-5); text-align: center; }
.cart-empty > .i { font-size: 3rem; color: var(--g-300); }
.cart-empty .empty__a { display: flex; flex-wrap: wrap; justify-content: center; gap: var(--s-2); margin-top: var(--s-3); }
.cart-empty .empty__d { max-width: 34rem; text-wrap: balance; }

/* ---------- Cloudflare Turnstile ("niste robot") ---------- */
.ts { width: 100%; min-height: 65px; margin: var(--s-2) 0 var(--s-3); }
.ts:empty { min-height: 0; margin: 0; }
.ts iframe { max-width: 100%; }