/* ============================================================
   Naslovnica 6a — "approved" reskin (Poppins + finalna paleta)
   ============================================================ */
:root{
  /* Razmak između zadnje sekcije stranice i podnožja. Sve četiri podstranice su ga imale 0,
     pa je „Učitaj još" na popisu bloga doslovno dodirivao podnožje (izmjereno: 0 px), a
     kartice povezanih objava stajale 8 px od njega. Jedna vrijednost da se ne raziđu. */
  --stranica-dno: clamp(56px, 7vw, 96px);
  --pg-plum-950:#2b1313; --pg-plum-900:#3f1c1c; --pg-plum-800:#532525; --pg-plum-700:#842c2c;
  --pg-brick-800:#6b2323; --pg-brick-600:#842c2c;
  --pg-leaf-700:#4a670d; --pg-leaf-600:#5e8311; --pg-leaf-500:#75b600; --pg-leaf-400:#93cf3d;
  --pg-leaf-200:#d3ec9f; --pg-leaf-100:#eaf6d2; --pg-leaf-50:#f5fbe9;
  --pg-magenta-600:#a92c8e; --pg-magenta-500:#ca36ab; --pg-purple-700:#642b6e;
  --pg-sand-50:#f8f4ed; --pg-sand-100:#f1ebe1; --pg-sand-200:#e6ddcf; --pg-sand-300:#d6cab6;
  --brick:#842c2c; --plum:#532525; --leaf:#75b600; --leaf-d:#5e8311; --leaf-l:#93cf3d;
  --ink:#4a3030; --muted:#6f5757; --faint:#8f8272;
  --page:#efeae2;
  --cw:min(1680px, 90vw);
  --motion-distance-sm:8px; --motion-distance-md:16px;
  --dur-slider:680ms; --dur-ambient:6000ms; --dur-ambient-slow:7500ms;
  --hero-autoplay:7000ms; --hero-image-motion:8200ms;
}

*{box-sizing:border-box}

html,body{margin:0;overflow-x:clip}

body{background:var(--page);color:var(--ink);font-family:'Poppins',system-ui,sans-serif;-webkit-font-smoothing:antialiased}

h1,h2,h3,h4{font-family:'Poppins',system-ui,sans-serif;color:var(--plum);margin:0}

button,input,textarea{font-family:inherit}

a{color:inherit;text-decoration:none}

.i{display:inline-block;background:currentColor;flex:none}

img{display:block;max-width:100%}

.sr-only{position:absolute!important;width:1px!important;height:1px!important;padding:0!important;margin:-1px!important;overflow:hidden!important;clip:rect(0,0,0,0)!important;white-space:nowrap!important;border:0!important}

.skip-link{position:fixed;top:10px;left:10px;z-index:120;padding:10px 14px;border-radius:var(--radius-control);background:var(--plum);color:#fff;font:600 13px/1 'Poppins',sans-serif;transform:translateY(-160%);transition:transform var(--dur-fast) var(--ease-out)}

.skip-link:focus{transform:none}

:where(a,button,input,textarea,summary):focus-visible{outline:2px solid var(--leaf);outline-offset:3px}

.wrap{width:var(--cw);margin:0 auto}

.overline{font:600 11px/1 'Poppins',sans-serif;letter-spacing:.14em;text-transform:uppercase;color:var(--leaf-d)}

/* --sticky-nav-space mjeri syncStickyNavSpace() u app-shell.js: 0 dok je ljepljiva navigacija
   skrivena, inače njena stvarna visina (raste kad uz nju stoji obavijest o akciji). Pad na
   78px vrijedi dok se prvi put ne izmjeri i na stranicama koje ljepljivu navigaciju nemaju. */
#main-content,#katalog,#proizvodi,#akcija,#enciklopedija,#savjetnik,#newsletter,#kontakt{scroll-margin-top:calc(var(--sticky-nav-space, 64px) + 14px)}


/* ---------- Buttons ---------- */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;padding:11px 22px;border:1px solid transparent;border-radius:var(--radius-control);
  font:600 13px/1 'Poppins',sans-serif;letter-spacing:.06em;text-transform:uppercase;cursor:pointer;transition:var(--transition-control),transform var(--dur-instant) var(--ease-out);white-space:nowrap}

.btn:active{transform:translateY(1px)}

.btn.sm{padding:8px 15px;font-size:11px;gap:6px}

.btn.lg{padding:15px 28px;font-size:14px;gap:10px}

.btn.full{display:flex;width:100%}

.btn.primary{background:var(--leaf);color:#fff;border-color:var(--leaf)}

.btn.primary:hover{background:var(--leaf-d);border-color:var(--leaf-d)}

.btn.secondary{background:var(--plum);color:#fff;border-color:var(--plum)}

.btn.secondary:hover{background:#3f1c1c}

.btn.outline{background:transparent;color:var(--plum);border-color:var(--pg-sand-300)}

.btn.outline:hover{background:var(--pg-sand-100)}

.btn.ondark{background:#fff;color:var(--plum);border-color:#fff}

.btn.ondark:hover{background:var(--pg-sand-100)}


/* ---------- Price / Badge ---------- */
.price{display:inline-flex;align-items:baseline;gap:8px}

.price .now{font:600 17px/1 'Poppins',sans-serif;color:var(--plum)}

.price.sale .now{color:var(--brick)}

.price .was{font:400 13px/1 'Poppins',sans-serif;color:var(--faint);text-decoration:line-through}

.badge{display:inline-block;padding:4px 9px 3px;border-radius:var(--radius-xs);font:600 11px/1.1 'Poppins',sans-serif;letter-spacing:.1em;text-transform:uppercase;color:#fff}

.badge.spring{background:var(--leaf)}
 .badge.summer{background:var(--pg-magenta-500)}
 .badge.autumn{background:var(--brick)}

.badge.winter{background:var(--pg-purple-700)}
 .badge.sale{background:var(--brick)}


/* ---------- Product card ---------- */
.pcard{display:flex;flex-direction:column;background:#fff;border:1px solid var(--border-hairline);border-radius:var(--radius-card);overflow:hidden;box-shadow:var(--shadow-xs);transition:var(--transition-card)}

.pcard:hover{box-shadow:var(--shadow-md);transform:translateY(-3px)}

.pcard .ph{position:relative;aspect-ratio:4/3;background:var(--pg-sand-100);overflow:hidden}

.pcard .ph img{width:100%;height:100%;object-fit:cover;transition:transform var(--dur-slow) var(--ease-out)}

.pcard:hover .ph img{transform:scale(1.04)}

.pcard .fav{position:absolute;top:8px;right:8px;background:#fff;box-shadow:var(--shadow-xs);opacity:0;transition:opacity var(--dur-fast) var(--ease-out)}

.pcard:hover .fav,.pcard .fav.active{opacity:1}

.pcard .badge{position:absolute;top:12px;left:12px}

.pcard .body{display:flex;flex-direction:column;gap:6px;padding:16px;flex:1}

.pcard .latin{font:400 13px/1.4 'Poppins',sans-serif;font-style:italic;color:var(--faint)}

.pcard h3{font:600 18px/1.2 'Poppins',sans-serif;color:var(--plum)}

.pcard .pot{font:300 13px/1.4 'Poppins',sans-serif;color:var(--muted)}

.pcard .foot{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-top:auto;padding-top:12px}

/* Redak s mogućnostima koje je kartica dobila da bi izjednačila s karticom kategorije:
   stepper lijevo, „Usporedi" desno. Stepper i gumb nose .kg-* klase iz product-card.css
   (naslovnica ga zato učitava) — ovdje je SAMO raspored tog retka, ne njihov izgled. */
.pcard .pcard-tools{display:flex;align-items:center;justify-content:space-between;gap:8px;flex-wrap:wrap;margin-top:auto;padding-top:12px}

/* Bez ovoga bi i .pcard-tools i .foot imali margin-top:auto, pa bi si slobodan prostor
   podijelili i razmaknuli se po sredini kartice umjesto da oba sjednu na dno. */
.pcard .pcard-tools+.foot{margin-top:0;padding-top:8px}

/* .kg-qty u product-card.css nosi margin-bottom:12px za raspored .kg-card; ovdje razmak
   drži .pcard-tools, pa bi taj margin bio dvostruk. */
.pcard .pcard-tools .kg-qty{margin-bottom:0}

/* Naslov je sad poveznica na stranicu proizvoda. Namjerno BEZ rastegnute ::after preklopke
   kakvu ima .kg-link — .pcard u istom prostoru ima i srce i stepper i „Usporedi", pa bi
   preklopka progutala njihove klikove. */
.pcard .pcard-link{color:inherit;text-decoration:none}

.pcard .pcard-link:hover{color:var(--leaf-d);text-decoration:underline;text-underline-offset:3px}

.pcard .pcard-link:focus-visible{outline:2px solid var(--leaf-d);outline-offset:3px;border-radius:var(--radius-xs)}

/* „Ušteda X €" je treći član cjenovnog bloka; bez wrapa bi na uskoj kartici gurnuo gumb. */
.pcard .price{flex-wrap:wrap;row-gap:2px}


/* ---------- Tabs / Field ---------- */
.tabs{display:flex;gap:24px;border-bottom:1px solid var(--border-hairline)}

.tab{padding:10px 2px 12px;background:none;border:none;border-bottom:2px solid transparent;margin-bottom:-1px;font:600 12px/1 'Poppins',sans-serif;letter-spacing:.08em;text-transform:uppercase;color:var(--muted);cursor:pointer;transition:var(--transition-control)}

.tab.active{border-bottom-color:var(--leaf);color:var(--plum)}

.field{position:relative;display:flex;align-items:center}

.field>.i{position:absolute;left:12px;color:var(--faint)}

.field input{width:100%;padding:10px 14px 10px 36px;font:400 14px/1.4 'Poppins',sans-serif;color:var(--ink);background:#fff;border:1px solid var(--pg-sand-300);border-radius:var(--radius-control);outline:none;transition:var(--transition-control)}

.field input:focus{border-color:var(--leaf);box-shadow:var(--ring-focus)}

.field.sm input{padding:8px 12px 8px 34px;font-size:13px}

.field.has-submit input{padding-left:16px;padding-right:54px}

@keyframes heroImageSettle{from{transform:scale(1.055)}to{transform:scale(1)}}

@keyframes heroProgress{to{transform:translateY(-50%) scaleX(1)}}

/* botanical sway */
@keyframes sway{0%,100%{transform:rotate(-1.7deg)}50%{transform:rotate(1.7deg)}}

@keyframes sway2{0%,100%{transform:rotate(1.3deg)}50%{transform:rotate(-1.3deg)}}

/* „slika" na tamnim podlogama → bijela silueta (kao stari logo-mono-white) */
body[data-logo="slika"][data-header="prozirno"] .brand img,body[data-logo="slika"] .kal-bar .brand img,body[data-logo="slika"] footer .brand img,body[data-logo="slika"] .fp-links .lg-img,body[data-logo="slika"] .fk-brand>img{filter:brightness(0) invert(1)}

.count-badge{position:absolute;top:-3px;right:-3px;min-width:16px;height:16px;padding:0 4px;border-radius:8px;background:var(--pg-magenta-500);color:#fff;font:600 10px/1 'Poppins',sans-serif;display:grid;place-items:center;pointer-events:none}


/* dropdown base — matches nav style everywhere */
.dd{position:absolute;background:#fff;border:1px solid var(--border-hairline);border-radius:var(--radius-lg);box-shadow:var(--shadow-lg);z-index:45;animation:ddIn var(--dur-fast) var(--ease-out)}

@keyframes ddIn{from{opacity:0;transform:translateY(calc(var(--motion-distance-sm) * -1))}to{opacity:1;transform:translateY(0)}}

.chips{display:flex;flex-wrap:wrap;gap:8px}

.chip{padding:7px 14px;background:#fff;color:var(--ink);border:1px solid var(--border-hairline);border-radius:999px;font:400 13px/1.2 'Poppins',sans-serif;cursor:pointer}

.chip:hover{background:var(--pg-leaf-50)}

/* traka se „odmotava" iz vrha navigacije prema dolje umjesto da pada s vrha ekrana */
@keyframes searchUnfold{from{opacity:.4;clip-path:inset(0 0 100% 0 round var(--radius-card))}to{opacity:1;clip-path:inset(0 0 0 0 round var(--radius-card))}}

/* bočni stup: akcijski baner je puna gornja traka; poruka se prelama u dva ili više redaka (bez rezanja) */
body[data-header="bocni"] .akcija-banner--traka{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:5px 14px;align-items:center;width:100%;max-width:none;margin:0;height:auto;min-height:44px;padding:9px 16px 9px 22px;border-radius:0;box-shadow:var(--shadow-sm)}

body[data-header="bocni"] .akcija-banner--traka .ab-primary{grid-column:1;grid-row:1;flex-wrap:wrap}

body[data-header="bocni"] .akcija-banner--traka .ab-message{grid-column:1/-1;grid-row:2}

body[data-header="bocni"] .akcija-banner--traka .ab-close{grid-column:2;grid-row:1;align-self:start}

body[data-header="bocni"] .akcija-banner--traka .m{white-space:normal;overflow:visible;text-overflow:clip}


/* ===== Akcija bar integrated per nav variant ===== */
/* Police + Kalendar have full-width header cards → banner attaches flush, full width */
body[data-header="police"] .hd-police,body[data-header="kalendar"] .hd-kalendar{border-radius:var(--radius-card) var(--radius-card) 0 0}

body[data-header="kalendar"] .kal-months{border-radius:0}

body[data-header="police"] .akcija-banner--traka,body[data-header="kalendar"] .akcija-banner--traka{width:100%;max-width:none;margin-top:0;padding-top:0;border-radius:0 0 var(--radius-card) var(--radius-card);height:44px;box-shadow:var(--shadow-md)}

/* Prozirno floats on the photo → translucent brick strip so it reads over any image */
body[data-header="prozirno"] .akcija-banner--traka{width:100%;max-width:none;margin-top:10px;padding-top:0;height:42px;background:rgb(132 44 44 / .9);backdrop-filter:blur(6px);border-radius:var(--radius-control);box-shadow:var(--shadow-md)}

body.promo-sticky{padding-bottom:60px}

.overline.light{color:var(--leaf-l)}

@keyframes cat-prog{from{transform:scaleX(0)}to{transform:scaleX(1)}}


/* ---------- Enciklopedija: nove varijante ---------- */
@keyframes en-prog{from{transform:scaleX(0)}to{transform:scaleX(1)}}

@keyframes en-fade{from{opacity:0}to{opacity:1}}

@keyframes en-drift{0%,100%{transform:translateY(0) rotate(0)}50%{transform:translateY(30px) rotate(4deg)}}

@keyframes en-wipeup{from{opacity:0;transform:translateY(28px)}to{opacity:1;transform:none}}

/* ---------- Podnožje: nove varijante ---------- */
.btn.ghost{background:transparent;color:#fff;border-color:rgb(255 255 255 / .35)}

.btn.ghost:hover{background:rgb(255 255 255 / .1);border-color:#fff}


/* ---------- Cart drawer ---------- */
.scrim{position:fixed;inset:0;z-index:70;background:rgb(43 19 19 / .62)}

@keyframes slideIn{from{transform:translateX(100%)}to{transform:translateX(0)}}

/* bočni stup: lista želja izlazi ISPOD raila i klizne udesno; ostatak se postupno zatamni kako panel izlazi */
body[data-header="bocni"] .wishlist-drawer{left:216px;right:auto;animation:slideInLeft var(--dur-slow) var(--ease-settle)}

body[data-header="bocni"].wish-open .side-rail{z-index:80}

body[data-header="bocni"] #wishMount .scrim{animation:scrimFade var(--dur-slow) var(--ease-out)}

@keyframes slideInLeft{from{transform:translateX(-100%)}to{transform:translateX(0)}}

@keyframes scrimFade{from{opacity:0}to{opacity:1}}

.empty{padding:40px 0;text-align:center;color:var(--muted);font:300 15px/1.6 'Poppins',sans-serif}

.site-status{position:fixed;left:50%;bottom:28px;z-index:110;max-width:min(440px,calc(100vw - 32px));padding:12px 16px;border-radius:999px;background:var(--plum);box-shadow:var(--shadow-overlay);color:#fff;font:500 13px/1.4 'Poppins',sans-serif;text-align:center;opacity:0;transform:translate(-50%,18px);pointer-events:none;transition:opacity var(--dur-base) var(--ease-out),transform var(--dur-base) var(--ease-settle)}

.site-status.on{opacity:1;transform:translate(-50%,0)}

@keyframes gpDetailIn{from{opacity:0;transform:translateX(14px)}to{opacity:1;transform:none}}


/* ===== Sekcija: Posebna ponuda (Posebna ponuda sekcije.dc.html) ===== */
@keyframes po-rise{from{opacity:0;transform:translateY(20px)}to{opacity:1;transform:none}}

@keyframes po-fade{from{opacity:0}to{opacity:1}}

@keyframes po-grow{from{transform:scaleX(0)}to{transform:scaleX(1)}}

@keyframes po-wipe{from{clip-path:inset(0 100% 0 0)}to{clip-path:inset(0 0 0 0)}}

/* search hero: the action-cluster search icon shows on every viewport, beside wishlist/profile/cart */
body.hero-search .mob-search{display:grid}

body.hero-search .hd3a .hd-actions .mob-search{display:grid}

@keyframes fadeIn{from{opacity:0}to{opacity:1}}

@keyframes mnIn{from{transform:translateX(-100%)}to{transform:translateX(0)}}
@media (max-width:1024px){

  /* police: akcijski baner ne smije prelijevati iz okvira kad se ekran suzi — pusti ga da se prelomi */
  body[data-header="police"] .akcija-banner--traka{height:auto;min-height:44px}

  body[data-header="bocni"] .wishlist-drawer{left:68px}

  /* rail je na mobitelu 68px (ne 216px) — sadržaj zato ne smije koristiti desktop računicu širine */
  body.nav-bocni{--cw:calc(100vw - 68px - 28px)}
}
@media (max-width:760px){

  :root{--cw:calc(100vw - 24px)}

  .tabs{gap:20px;overflow-x:auto;overscroll-behavior-x:contain;scrollbar-width:none}

  .tabs::-webkit-scrollbar{display:none}

  .tab{flex:none}

  .pcard .fav{opacity:1}

  .pcard .body{padding:15px}

  .pcard .foot{gap:8px}

  .pcard .foot .btn{padding-left:12px;padding-right:12px}

  body[data-header="bocni"] .wishlist-drawer{left:68px;width:calc(100% - 68px)}
}

@keyframes hxkb{from{transform:scale(1)}to{transform:scale(1.12)}}

@keyframes hxsweep{0%{transform:translateX(-60%) skewX(-14deg);opacity:0}40%{opacity:.5}100%{transform:translateX(520%) skewX(-14deg);opacity:0}}

@keyframes hxrise{0%{opacity:0;transform:translateY(22px)}100%{opacity:1;transform:translateY(0)}}

@keyframes hxfade{0%{opacity:0}100%{opacity:1}}

@keyframes hxmarq{0%{transform:translateX(0)}100%{transform:translateX(-50%)}}

@keyframes hxswaymob{0%{transform:rotateY(-6deg) rotateX(2.5deg)}100%{transform:rotateY(6deg) rotateX(-2.5deg)}}

@keyframes hxsheen{0%{transform:translateX(-130%) rotate(18deg);opacity:0}30%{opacity:.55}100%{transform:translateX(230%) rotate(18deg);opacity:0}}

.gs-sec{font:600 11.5px/1.3 'Poppins',sans-serif;color:var(--muted)}

.gs-var{font:600 12px/1.3 'Poppins',sans-serif;color:var(--plum);text-align:right}