/*
 * PLAyful Prints — storefront, KONCEPT G „Litofan studio".
 *
 * Boje su boja upaljenog litofana, ne boja teme: tamna zelena i toplo svjetlo.
 * Nijedna datoteka izvana — ni font, ni okvir. Izgled ne smije ovisiti o
 * tudem posluzitelju, a jedan CSS je jedini blokirajuci zahtjev na stranici
 * (stari shop ih je imao 65).
 */

:root {
  --paper:  #FBFAF7;
  --ink:    #12231C;
  --green:  #16493A;
  --glow:   #FFE9BE;
  --gold:   #C98A00;
  --muted:  #5C6B64;
  --line:   #E2DED4;
  --card:   #FFFFFF;
  --focus:  #C98A00;
  --warn:   #8A5A00;
  /* Crvena za potez koji nesto ZATVARA (odjava, brisanje). Nije alarm:
     greske u obrascu imaju svoj okvir. Prije 02.09.2026. je `.linkish.danger`
     nosio zakovan `#A33`, koji u tamnoj temi pada na 2,4:1 — pa je jedva citljiv. */
  --danger: #B3261E;
  /* Ispune u konfiguratoru: laganija i jaca. Ne smiju biti tvrde boje —
     panel od 01.09.2026. prati temu, nije vise tamna ploca. */
  --fill:   rgba(18, 35, 28, .05);
  --fill-2: rgba(18, 35, 28, .09);
  /* Platno na kojem stoji proizvod. Damir 01.09.2026.: „platno bih isto
     stavio svijetlije — pretamno je ovako". Ne ide skroz u bijelo: upaljena
     kugla je krem, pa bi na bijelome izgubila sjaj. */
  /* Damir 02.09.2026., DVA kruga po snimkama svijetle teme: platno je bilo
     mutno sivo-maslinasto (#F1EEE6 → #D5D0C3), pa i dalje „previse sivo"
     (#FAF8F3 → #E4E0D6). Trazena mjera je njegova: „tek toliko da se vidi
     razlika izmedu ostatka pozadine stranice i toga" — dakle rub se NAZIRE
     (stranica je #FBFAF7), ne cita se kao siva ploca.
     Cijena je poznata i svjesno placena: na ovoliko svijetlom platnu sjaj
     upaljene kugle nosi manje nego prije. U tamnoj temi je netaknut. */
  --canvas-a: #FDFCFA;
  --canvas-b: #F3F0E9;
  --radius: 14px;
  --shell:  min(1180px, 100% - 2.5rem);

  /* `color-scheme` ne smije biti `light dark`: to prepusta OS-u kako ce
     preglednik nacrtati SVOJE kontrole (polje za broj, gumb bez boje,
     klizace). Kupac s tamnim OS-om je 01.09.2026. na svijetloj stranici
     dobivao CRNO polje za kolicinu i BIJEL tekst gumba na bijelome.
     Zato ide tocno jedna vrijednost, ista ona koju nosi tema. */
  color-scheme: light;
}

/*
 * Tamna tema ima TRI stanja, ne dva: „kako uredaj kaze" (bez `data-theme`),
 * pa izricit izbor kupca. Zato se tamne vrijednosti pisu dvaput — jednom
 * pod upitom uredaja (ali samo dok kupac nije rekao „svijetlo"), jednom pod
 * izricitim izborom. Bez druge kopije prekidac ne moze pobijediti uredaj.
 */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    color-scheme: dark;
    --warn:  #E8B44A;
    --danger: #E8877F;
    --fill:   rgba(239, 237, 231, .06);
    --fill-2: rgba(239, 237, 231, .12);
    --canvas-a: #1b2f26;
    --canvas-b: #0a120e;
    --paper: #101713;
    --ink:   #EFEDE7;
    --green: #7FBFA4;
    --muted: #A6B3AC;
    --line:  #26332C;
    --card:  #16211B;
  }
}

:root[data-theme="dark"] {
  color-scheme: dark;
  --warn:  #E8B44A;
  --danger: #E8877F;
  --fill:   rgba(239, 237, 231, .06);
  --fill-2: rgba(239, 237, 231, .12);
  --canvas-a: #1b2f26;
  --canvas-b: #0a120e;
  --paper: #101713;
  --ink:   #EFEDE7;
  --green: #7FBFA4;
  --muted: #A6B3AC;
  --line:  #26332C;
  --card:  #16211B;
}



* { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font: 16px/1.6 system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  font-synthesis-weight: none;
}

h1, h2, h3 {
  line-height: 1.12;
  letter-spacing: -0.025em;
  margin: 0 0 .5rem;
  font-weight: 800;
}

h1 { font-size: clamp(1.9rem, 1.2rem + 2.4vw, 3rem); }
h2 { font-size: clamp(1.3rem, 1rem + 1.2vw, 1.9rem); }

p { margin: 0 0 1rem; }

a { color: inherit; }

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

:focus-visible { outline: 3px solid var(--focus); outline-offset: 3px; border-radius: 4px; }

.skip {
  position: absolute; left: -9999px; top: 0; z-index: 50;
  background: var(--ink); color: var(--paper); padding: .7rem 1rem; border-radius: 0 0 8px 0;
}
.skip:focus { left: 0; position: fixed; }

/* ------------------------------------------------------------------ zaglavlje */

.top {
  display: flex; align-items: center; gap: 1.5rem; flex-wrap: wrap;
  width: var(--shell); margin: 0 auto; padding: 1.1rem 0;
  border-bottom: 1px solid var(--line);
}
/* Zaglavlje stoji gore pri skrolanju, na desktopu i mobitelu (Damir
   23.10.2026.). Omotac je preko cijele sirine, pa pozadina ide do rubova
   ekrana, a izbornik kotacica ispod zaglavlja se ne reze. Traka roka
   (`.season-bar`) NE stoji: odlazi sa skrolanjem, da na mobitelu ne jede ekran. */
.top-sticky { position: sticky; top: 0; z-index: 40; background: var(--paper); }
/* Sidra (`#studio`, `#sadrzaj`) ne smiju pasti ispod zaglavlja. */
html { scroll-padding-top: 6rem; }
/* Na uskom ekranu zaglavlje ima drugi redak (podnaslov): 101 px na 390, 142 na 320 (razbij 24.10.).
   Granica je ista kao pravilo zaglavlja u dva retka (620px), iznad je zaglavlje 75 px. */
@media (max-width: 620px) { html { scroll-padding-top: 9.5rem; } }
/* Ispis: zaglavlje ne stoji, inace pada preko sadrzaja na drugoj stranici (razbij 24.10.). */
@media print { .top-sticky { position: static; } }
.brand { text-decoration: none; font-weight: 800; letter-spacing: -0.03em; font-size: 1.15rem; }
/* „PLA" u bojama filamenta iz PRAVOG loga (Damir 02.09.2026.: „probaj
   koristiti boje za PLA zelena-zuta-crvena"). Vrijednosti su OCITANE s loga na
   naljepnicama (`PROJEKTI/naljepnice/kutijne/kutijne_naljepnice.html`, `LOGO2`),
   nisu birane od oka: #42C03E · #F4B810 · #CB2F09.
   Slika loga je probana i pala (Damir isti dan) — ne vracati je bez
   njegove rijeci. */
/* Marka se pojavljuje i USRED RECENICE (stranica „hvala"), ne samo u zaglavlju.
   Ondje ne nasljeduje `.brand`, pa debljinu nosi sama — inace bi „PLA" bilo
   obojeno ali tanko, a „yful Prints" obicno, i ime ne bi izgledalo kao marka. */
.brand-mark, .brand-rest { font-weight: 800; }
.brand-mark i { font-style: normal; }
.brand-mark i:nth-child(1) { color: #2FA22C; }
/* Zuta je IZMJERENO najslabija boja u paleti na svijetloj podlozi: sama s
   loga (`#F4B810`) daje 1,72:1 na `#FBFAF7`, a `#D79E00` koji je ovdje stajao
   do 02.09.2026. samo 2,29:1 — dok su zelena (3,18) i crvena (5,09) citljive.
   Srednje slovo je zato blijedjelo na jeftinom zaslonu, i to se ne vidi na
   dobrom monitoru. `#A87200` daje 3,97:1 i jos uvijek cita kao zlatna.
   Vrijedi SAMO za svijetlu temu — u tamnoj puna `#F4B810` ima 10,15:1. */
.brand-mark i:nth-child(2) { color: #A87200; }
.brand-mark i:nth-child(3) { color: #CB2F09; }
/* Zuta i zelena s loga su na BIJELOJ podlozi preslabe (logo ih nosi na
   svojoj), pa svijetla tema uzima za nijansu tamnije; u tamnoj temi idu pune. */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .brand-mark i:nth-child(1) { color: #42C03E; }
  :root:not([data-theme="light"]) .brand-mark i:nth-child(2) { color: #F4B810; }
  :root:not([data-theme="light"]) .brand-mark i:nth-child(3) { color: #E8451C; }
}
:root[data-theme="dark"] .brand-mark i:nth-child(1) { color: #42C03E; }
:root[data-theme="dark"] .brand-mark i:nth-child(2) { color: #F4B810; }
:root[data-theme="dark"] .brand-mark i:nth-child(3) { color: #E8451C; }
.shelves { display: flex; gap: 1.25rem; flex: 1; flex-wrap: wrap; }
/* Slogan na mjestu izbornika: tekst, ne poveznica, pa nema crte ni hovera. */
.tagline { flex: 1; margin: 0; color: var(--muted); font-size: .95rem; }
/* Crta pod policom se UVLACI, ne pali se (Damir 02.09.2026.: „sad je 1-0").
   Do tada je bila `border-bottom-color: transparent -> gold`, dakle skok u
   jednom kadru.
   Rasteze se `scaleX`-om, ne `width`-om: sirina tjera preglednik da u
   SVAKOM kadru ponovno rasporedi redak polica, a `transform` ide po GPU-u i
   ne dira layout.
   Ishodiste se PREBACUJE — crta ulazi slijeva, a izlazi udesno, pa pokret
   prati smjer citanja umjesto da se vrati odakle je dosao. Na `scaleX(0)` je
   crta nevidljiva, pa se promjena ishodista ne vidi kao skok.
   Razmak vise ne rezervira prozirni rub nego PADDING (`.2rem + 2px`) —
   inace bi rezerva i crta bile dvije stvari koje se moraju slagati.
   `prefers-reduced-motion: reduce` (nize) gasi prijelaz, pa crta ostaje
   ista — samo se pojavi odjednom. */
.shelves a {
  position: relative; text-decoration: none; color: var(--muted);
  padding: .2rem 0 calc(.2rem + 2px);
  transition: color .18s ease;
}
.shelves a::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 2px;
  background: var(--gold); border-radius: 2px;
  transform: scaleX(0); transform-origin: right center;
  transition: transform .24s cubic-bezier(.4, 0, .2, 1);
}
.shelves a:hover, .shelves a:focus-visible, .shelves a[aria-current] { color: var(--ink); }
.shelves a:hover::after, .shelves a:focus-visible::after { transform: scaleX(1); transform-origin: left center; }
/* Otvorena polica NIJE hover — njena crta stoji i ne uvlaci se. */
.shelves a[aria-current]::after { transform: scaleX(1); }
.top-right { display: flex; align-items: center; gap: 1rem; }

/* Ikona kosarice s brojem, pa kotacic za postavke (Damir 01.09.2026.).
   Tekst „Kosarica" je maknut — ostaje kao `aria-label`, da citac ekrana i
   dalje zna sto je to i koliko je unutra. */
.cart-link {
  position: relative; display: inline-flex; align-items: center; justify-content: center;
  width: 2.4rem; height: 2.4rem; border-radius: 999px; color: var(--ink);
  border: 1px solid var(--line); background: var(--card); text-decoration: none;
}
.cart-link:hover { border-color: var(--green); color: var(--green); }
.cart-link .count {
  position: absolute; top: -.35rem; right: -.35rem; min-width: 1.15rem; height: 1.15rem;
  padding: 0 .25rem; border-radius: 999px; background: var(--gold); color: #12231C;
  font-size: .7rem; font-weight: 800; line-height: 1.15rem; text-align: center;
}

/* Kotacic je `<details>`: izbornik radi i BEZ JavaScripta, pa jezik ostaje
   dostupan i kad skripta zakaze. Samo redak s temom trazi JS. */
.gear { position: relative; }
.gear > summary {
  list-style: none; cursor: pointer;
  display: inline-flex; align-items: center; justify-content: center;
  width: 2.4rem; height: 2.4rem; border-radius: 999px;
  border: 1px solid var(--line); background: var(--card); color: var(--ink);
}
.gear > summary::-webkit-details-marker { display: none; }
.gear > summary:hover { border-color: var(--green); color: var(--green); }
.gear > summary:focus-visible { outline: 2px solid var(--focus); outline-offset: 2px; }
.gear[open] > summary { border-color: var(--green); color: var(--green); }
.gear .menu {
  position: absolute; right: 0; top: calc(100% + .5rem); z-index: 30;
  min-width: 15rem; padding: .6rem; display: grid; gap: .5rem;
  background: var(--card); border: 1px solid var(--line); border-radius: var(--radius);
  box-shadow: 0 14px 34px rgba(0, 0, 0, .18);
}
.gear .sub > summary {
  list-style: none; cursor: pointer; display: flex; align-items: center; justify-content: space-between;
  gap: .6rem; padding: .4rem .5rem; border-radius: 9px; font-size: .88rem; color: var(--ink);
}
.gear .sub > summary::-webkit-details-marker { display: none; }
.gear .sub > summary b { color: var(--green); font-size: .8rem; letter-spacing: .04em; }
.gear .sub > summary:hover { background: var(--paper); }
.gear .row { padding: .4rem .5rem; display: grid; gap: .4rem; }
.gear .row-label { font-size: .88rem; }
.gear .choice { display: flex; gap: .3rem; flex-wrap: wrap; }
.gear .choice button {
  font: inherit; font-size: .78rem; cursor: pointer; padding: .3rem .55rem; border-radius: 999px;
  border: 1px solid var(--line); background: var(--card); color: var(--muted);
}
.gear .choice button:hover { border-color: var(--green); color: var(--ink); }
.gear .choice button[aria-pressed="true"] {
  background: var(--green); border-color: var(--green); color: var(--paper);
}

.langs { display: grid; gap: .25rem; padding: .2rem .5rem .4rem; }
.langs a {
  display: flex; align-items: center; gap: .5rem;
  text-decoration: none; font-size: .78rem; font-weight: 700; letter-spacing: .04em;
  color: var(--muted); padding: .3rem .5rem; border: 1px solid var(--line); border-radius: 9px;
}
.langs a span { font-weight: 500; letter-spacing: 0; }
.langs a:hover { border-color: var(--green); color: var(--ink); }
.langs a[aria-current] { color: var(--paper); background: var(--green); border-color: var(--green); }

main { width: var(--shell); margin: 0 auto; padding: 2.5rem 0 4rem; }

/* ----------------------------------------------------------------- naslovnica */

/* Izlog prije alata (02.10.2026., `HomeView`): prvi ekran nosi naslov, gumb u
   konfigurator i par slika ugaseno/upaljeno; konfigurator je nize. */
.hero {
  display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.05fr); gap: 2rem;
  align-items: center; margin-bottom: 3rem;
}
.hero .lead, .shelf-head .lead { color: var(--muted); font-size: 1.08rem; }
.hero .cta { margin: .4rem 0 1.2rem; }
.hero-facts { list-style: none; padding: 0; margin: 0; display: grid; gap: .35rem; font-size: .92rem; }
.hero-facts li { display: flex; align-items: baseline; gap: .55rem; }
.hero-facts li::before { content: ""; flex: none; width: .5rem; height: .5rem; border-radius: 50%; background: var(--glow); transform: translateY(-.1rem); }
.hero-pair { display: grid; grid-template-columns: 1fr 1fr; gap: .8rem; }
.hero-pair figure, .live figure { margin: 0; }
.live-photo { display: block; width: 100%; height: auto; aspect-ratio: 1 / 1; object-fit: cover; border-radius: var(--radius); }
.hero-photo { display: block; width: 100%; height: auto; aspect-ratio: 4 / 5; border-radius: var(--radius); }
.hero-pair figcaption, .live figcaption { color: var(--muted); font-size: .85rem; margin-top: .4rem; text-align: center; }
/* Okvir za fotografiju koja se snima: omjer dolazi iz trazene mjere (inline). */
.ph.slot { height: auto; width: 100%; border-radius: var(--radius); }
@media (max-width: 52rem) {
  .hero { grid-template-columns: minmax(0, 1fr); gap: 1.4rem; }
  .hero .cta { display: block; text-align: center; }
}

.occasions, .live { margin-bottom: 3rem; }
.occasion-grid { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: .8rem; }
.occasion { text-decoration: none; color: var(--ink); font-weight: 700; display: grid; gap: .4rem; text-align: center; }
.occasion .ph.slot { font-size: .7rem; padding: .5rem; }
.occasion:hover .ph.slot { border-color: var(--green); }
.occasion .live-photo { aspect-ratio: 1 / 1; }
.occasion:hover .live-photo { outline: 2px solid var(--green); outline-offset: 2px; }
@media (max-width: 60rem) { .occasion-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.live-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1rem; }
@media (max-width: 40rem) { .live-grid { grid-template-columns: minmax(0, 1fr); } }
.studio { scroll-margin-top: 1rem; margin-bottom: 3rem; }
/* Gumb prvog ekrana vodi u konfigurator GLATKIM skrolom, ne fadeom: kupac
   vidi da je ostao na istoj stranici (Damir 02.10.2026.). Tko trazi manje
   gibanja, skace odmah. */
@media (prefers-reduced-motion: no-preference) {
  html { scroll-behavior: smooth; }
  .studio.arrived .drop { animation: drop-arrive 1.4s ease-out .5s; }
}
@media (prefers-reduced-motion: reduce) {
  .studio.arrived .drop { animation: drop-arrive 1.4s ease-out; }
}
@keyframes drop-arrive {
  0%, 100% { box-shadow: none; }
  35%      { border-color: var(--glow); box-shadow: 0 0 0 3px rgba(255, 233, 190, .35), inset 0 0 28px rgba(255, 233, 190, .22); }
}

.studio {
  display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr); gap: 1.5rem;
  /* Damir 01.09.2026.: panel konfiguratora prati temu — na svijetloj
     stranici vise ne stoji tamna ploca. Iznimka je PLATNO: litofan se vidi
     samo na tamnom, pa ono ostaje tamno u obje teme. */
  background: var(--card); border: 1px solid var(--line);
  border-radius: var(--radius); padding: 1.5rem;
  color: var(--ink); margin-bottom: 3.5rem;
}
.studio .stage { position: relative; display: flex; flex-direction: column; gap: .9rem; min-width: 0; }
.studio .side { min-width: 0; }
.studio canvas {
  /* Kvadrat za sve oblike (Damir 23.10.2026.: kugla i lampion u velicini kao
     cestitka); do tada 5 / 4, a samo cestitka kvadrat. */
  width: 100%; height: auto; aspect-ratio: 1 / 1; border-radius: 10px;
  background: radial-gradient(circle at 50% 45%, var(--canvas-a) 0%, var(--canvas-b) 75%);
  /* Povlacenje vrti proizvod — bez ovoga bi na dodir skrolalo stranicu. */
  touch-action: pan-y; cursor: grab;
}
.studio canvas.grabbing { cursor: grabbing; }
.studio canvas:focus-visible { outline: 2px solid var(--focus); outline-offset: 2px; }
/* Savjeti ispod platna. Do 02.09.2026. su ovdje stajala CETIRI odlomka jednake
   velicine i boje (uputa o vrtnji, omjer, plohe kutije, ograda) - stupac teksta
   koji je Damir sa snimke opisao kao „ne izgleda ok". Uputa o vrtnji preselila
   je na platno, uz strelicu; ostatak je jedan uzi blok po sredini. */
.stage-tips { display: grid; gap: .2rem; max-width: 46ch; margin: .7rem auto 0; text-align: center; }
.stage-tips p { margin: 0; }
.spin-hint { font-size: .78rem; color: var(--muted); }
/* Prikaz je racun, ne fotografija gotovog komada — to mora pisati svugdje
   gdje se render vidi (Damir 01.09.2026.). Prigusen je, ali nije skriven. */
.disclaimer { font-size: .72rem; line-height: 1.45; color: var(--muted); margin: .5rem 0 0; }
.studio .disclaimer { max-width: 46ch; margin-inline: auto; text-align: center; opacity: .85; }

/* Zona za ispustanje pokriva TOCNO canvas — vezana uz stupac se pomicala
   cim bi se polje za ime pojavilo ili nestalo (Damir 01.09.2026.). */
.studio .frame { position: relative; }
/*
 * SVJETLO SE NALIJEVA, ne prebacuje (Damir 03.09.2026.: „daj svjetlo animiraj
 * isto - nek ima fade in - opcenito i ovako i na prekidac").
 *
 * Sam render je BINARAN: platno se crta ili kroz `lit()` ili kroz `unlit()`,
 * i medustanja nema. Zato se prijelaz radi OVDJE, toplim naljevom preko
 * okvira: dok bljesak raste, ispod se zamijeni kadar, pa oko vidi paljenje
 * umjesto preskoka. Naljev NE PRIMA klikove, inace bi progutao dropzonu.
 */
.studio .frame::after {
  content: ""; position: absolute; inset: 0; border-radius: 10px;
  pointer-events: none; opacity: 0;
  background: radial-gradient(ellipse at 50% 52%,
    rgba(255, 226, 163, .55) 0%, rgba(255, 214, 130, .22) 45%, rgba(255, 208, 120, 0) 72%);
}
.studio .frame.flash::after { opacity: 1; transition: opacity .28s ease-out; }
.studio .frame.flash-out::after { opacity: 0; transition: opacity .55s ease-in; }
/*
 * NALAZ 02.09.2026.: „konfigurator je previse siv" NIJE bilo platno nego
 * OVAJ ZASTOR. `.drop` pokriva `inset: 0` cijelog okvira dok fotografije nema,
 * a zastor je bio TAMAN u obje teme — pa je na svijetloj stranici ploca
 * izgledala kao siva ploha, iako je `--canvas-*` bio gotovo bijel.
 * Dva puta sam zato mijenjao krivu stvar (`--canvas-b`), a Damir je oba puta
 * javio isto. Zastor mora pratiti temu, kao i sve ostalo u konfiguratoru.
 * Zastor se ne smije maknuti: bez njega natpis stoji ravno na kugli i ne
 * cita se (Damirova snimka 01.09.2026.).
 */
.drop {
  position: absolute; inset: 0; display: grid; place-items: center; text-align: center;
  border: 2px dashed rgba(18, 35, 28, .28); border-radius: 10px; cursor: pointer;
  padding: 1.5rem; color: var(--ink);
  background: radial-gradient(ellipse at 50% 50%, rgba(251, 250, 247, .88) 0%, rgba(251, 250, 247, .5) 72%);
}
.drop > span { text-shadow: 0 1px 3px rgba(255, 255, 255, .8); }
.drop b { display: block; font-size: 1.05rem; margin-bottom: .35rem; }
.drop span span { color: var(--muted); font-size: .85rem; }
.drop .fine { display: block; margin-top: .35rem; font-size: .74rem; opacity: .85; }
.drop.over { border-color: var(--gold); background: rgba(255, 233, 190, .5); }
/* Tamna tema zadrzava stari, tamni zastor — ondje je bio ispravan. */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .drop {
    border-color: rgba(239, 237, 231, .38); color: #EFEDE7;
    background: radial-gradient(ellipse at 50% 50%, rgba(8, 17, 13, .82) 0%, rgba(8, 17, 13, .34) 70%);
  }
  :root:not([data-theme="light"]) .drop > span { text-shadow: 0 1px 3px rgba(0, 0, 0, .85); }
  :root:not([data-theme="light"]) .drop span span { color: rgba(239, 237, 231, .68); }
  :root:not([data-theme="light"]) .drop.over { border-color: var(--glow); background: rgba(255, 233, 190, .09); }
}
:root[data-theme="dark"] .drop {
  border-color: rgba(239, 237, 231, .38); color: #EFEDE7;
  background: radial-gradient(ellipse at 50% 50%, rgba(8, 17, 13, .82) 0%, rgba(8, 17, 13, .34) 70%);
}
:root[data-theme="dark"] .drop > span { text-shadow: 0 1px 3px rgba(0, 0, 0, .85); }
:root[data-theme="dark"] .drop span span { color: rgba(239, 237, 231, .68); }
:root[data-theme="dark"] .drop.over { border-color: var(--glow); background: rgba(255, 233, 190, .09); }
.drop.hidden { display: none; }
/* Datoteka povucena nad model kad su strane vec popunjene: zastor se vrati dok traje povlacenje. */
.drop.hidden.drag-in { display: grid; }
/* Zastor se POJAVLJUJE mekano, pet sekundi nakon sto se svjetlo upali samo
   (Damir 03.09.2026.: „na pocetku ga nema i pojavi se tek 5 sekundi iza
   upaljenog svjetla" + „napravi animaciju da ima neki fade in").
   Dok traje predstavljanje nosi klasu `demo-bare` i nevidljiv je; skida se
   pri odbrojavanju ili cim kupac pride misem.
   Gasi se VIDLJIVOST, ne meta: `pointer-events` ostaje, pa klik i dok je
   proziran otvara izbor datoteke. */
.drop {
  opacity: 1; transform: translateY(0);
  transition: opacity .8s ease-out, transform .8s ease-out;
}
.studio.demo-bare .drop { opacity: 0; transform: translateY(8px); }
/* Pretinci za fotografije: kutija ima cetiri plohe s litofanom, kugla jednu
   sliku. Traka stoji i kod kugle — inace nema vidljivog nacina da se vec
   ubacena fotografija zamijeni, jer se dropzona sakrije cim slika postoji. */
.faces { display: flex; flex-wrap: wrap; gap: .5rem; justify-content: center; }
.faces .slot {
  font: inherit; cursor: pointer; color: inherit; text-align: center;
  background: var(--fill); border: 1px solid var(--line);
  border-radius: 10px; padding: .5rem; display: grid; gap: .15rem; justify-items: center;
  /* Fiksna sirina: s jednim pretincem (kugla) bi rastezljivi gumb pojeo cijeli redak. */
  flex: 0 0 7rem;
}
.faces .slot[aria-pressed="true"] { border-color: var(--green); background: var(--fill-2); }
.faces .slot.over { border-color: var(--green); background: var(--fill-2); }
.faces .slot .thumb {
  width: 100%; aspect-ratio: 1 / 1; max-width: 3.6rem; border-radius: 7px; overflow: hidden;
  display: grid; place-items: center; font-size: 1.4rem; line-height: 1;
  background: var(--fill); color: var(--muted);
  border: 1px dashed var(--line);
}
.faces .slot.has .thumb { border-style: solid; border-color: var(--line); }
.faces .slot .thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }
.faces .slot b { font-size: .78rem; font-weight: 600; }
.faces .slot span { font-size: .72rem; color: var(--muted); }
/* Ime se upisuje uz sliku — pregled ga mora pokazati, ne samo obecati. */
/* 02.09.2026. preseljeno iz stupca s platnom u desni stupac, uz gumb
   kosarice: ime je ono STO SE NARUCUJE, kao i oblik, pa stoji uz njih. */
/* Ime i datum stoje jedno pod drugim i moraju se poklapati (Damir
   05.09.2026.). Zato oba retka nose ISTU mrezu s fiksnim stupcem za natpis:
   natpis stoji IZNAD polja, pa se poravnanje ne lomi o duljinu teksta i oba
   polja drze istu sirinu. Isti oblik nose i polja na stranici cestitke, da
   isti posao ne izgleda na dva nacina.
   Recenica koja je stajala izmedu njih je maknuta - gurala je datum od imena
   i objasnjavala ono sto se na renderu ionako vidi. */
.studio .side .named { margin-top: .55rem; }
.studio .side .named:first-of-type { margin-top: 1rem; }
.named { display: grid; gap: .25rem; }
.named label { font-size: .85rem; color: var(--ink); }
.named input, .named textarea {
  font: inherit; border-radius: 8px; padding: .45rem .7rem; width: 100%;
  border: 1px solid var(--line); background: var(--paper); color: var(--ink);
}
/* Tekst cestitke: do tri retka, pa polje odmah pokazuje tri. */
.named textarea { resize: none; line-height: 1.35; }
.named input::placeholder, .named textarea::placeholder { color: var(--muted); }
.named input:focus-visible, .named textarea:focus-visible { outline: 2px solid var(--focus); outline-offset: 1px; }
/* Velicina slova stoji uz tekst na koji se odnosi. */
.card-size { display: grid; gap: .25rem; margin-top: .35rem; }
.named[hidden] { display: none; }


/* ZARULJA U KUTU PLATNA (Damir 02.09.2026.) — do tada red pune sirine
   ispod platna. `absolute` znaci da ne zauzima nijedan piksel razmaka,
   pa se ostatak stupca ne pomice kad se natpis pojavi ili nestane. */
.bulb {
  position: absolute; left: .7rem; bottom: .7rem; z-index: 2;
  display: inline-flex; align-items: center; gap: .5rem;
  font: inherit; font-size: .82rem; font-weight: 600; cursor: pointer;
  padding: .45rem .75rem; border-radius: 999px;
  /* Zastor: gumb lezi na renderu, pa mu treba vlastita podloga da se cita
     i preko svijetlog i preko tamnog dijela slike. */
  background: rgba(10, 18, 14, .58); border: 1px solid rgba(239, 237, 231, .22);
  color: rgba(239, 237, 231, .72);
  backdrop-filter: blur(3px);
  transition: color .18s ease, background .18s ease, border-color .18s ease;
}
.bulb:hover { background: rgba(10, 18, 14, .74); color: #EFEDE7; }
/* Znak vrtnje i zarulja leze na renderu, pa im podloga ostaje tamna u OBJE
   teme — ne prate zastor, jer render ispod njih nije ni svijetao ni taman. */
.bulb:focus-visible { outline: 2px solid var(--focus); outline-offset: 2px; }
/* Ugasena je SIVA, upaljena ZUTA — to je jedini nositelj stanja na ekranu,
   jer natpis nestaje cim se upali. */
.bulb[aria-pressed="true"] {
  color: #FFE9BE; border-color: rgba(255, 233, 190, .55);
  background: rgba(60, 44, 10, .62);
}
.bulb[aria-pressed="true"] svg { filter: drop-shadow(0 0 6px rgba(255, 216, 130, .85)); }
/* Natpis je POZIV, ne etiketa: stoji dok je ugaseno, nestaje kad je upaljeno. */
.bulb[aria-pressed="true"] .bulb-hint { display: none; }
@media (prefers-reduced-motion: no-preference) {
  .bulb[aria-pressed="false"] svg { animation: bulb-nudge 2.6s ease-in-out infinite; }
}
@keyframes bulb-nudge {
  0%, 72%, 100% { opacity: .62; }
  84%           { opacity: 1; }
}

/* Znak da se model VRTI. Gasi se na prvo povlacenje (`studio.js`). */
.spin-cue {
  position: absolute; left: 50%; bottom: .8rem; transform: translateX(-50%); z-index: 2;
  display: inline-flex; align-items: center; gap: .45rem; padding: .3rem .7rem; border-radius: 999px;
  background: rgba(10, 18, 14, .5); color: rgba(239, 237, 231, .8);
  border: 1px solid rgba(239, 237, 231, .18);
  pointer-events: none;
}
.spin-cue[hidden] { display: none; }
.spin-cue .cue-text { font-size: .76rem; white-space: nowrap; }
@media (max-width: 22rem) { .spin-cue .cue-text { display: none; } }
/* Na uskom platnu (mobitel, 390 px) zarulja i znak vrtnje dijele donji rub i
   preklapaju se (snimka 02.10.2026.). Znak vrtnje zato ide na gornji rub. */
@media (max-width: 30rem) { .spin-cue { bottom: auto; top: .7rem; } }
@media (prefers-reduced-motion: no-preference) {
  .spin-cue svg { animation: spin-cue 2.4s ease-in-out infinite; }
}
@keyframes spin-cue {
  0%, 100% { transform: translateX(-4px); }
  50%      { transform: translateX(4px); }
}

/* Stanje svjetla se ne vidi, ali se mora CUTI — zarulja je inace samo boja. */
.sr-only {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

.studio .side { display: flex; flex-direction: column; }
.studio .side h2 { font-size: 1.15rem; }
.studio .side .lead { color: var(--muted); font-size: .92rem; }
.shapes { display: grid; grid-template-columns: repeat(auto-fit, minmax(9rem, 1fr)); gap: .6rem; }
.shapes .shape {
  font: inherit; cursor: pointer; text-align: left; color: inherit;
  background: var(--fill); border: 1px solid var(--line);
  border-radius: 10px; padding: .75rem; display: grid; gap: .3rem;
  justify-items: start;
}
.shapes .shape[aria-pressed="true"] { border-color: var(--green); background: var(--fill-2); }
/* Gumb nosi fotografiju proizvoda; crtez je pao zajedno sa siluetom. */
.shapes .shape img {
  width: 48px; height: 64px; object-fit: contain; display: block; margin-bottom: .15rem;
}
.shapes .shape b { font-size: .9rem; }
.shapes .shape span { color: var(--muted); font-size: .85rem; }
/* Cijena na dnu kartice: naslovi su razlicite duljine (kugla ima cetiri
   retka, kutija tri), pa su cijene bez ovoga skakale (Damir 29.09.2026.). */
.shapes .shape { grid-template-rows: auto 1fr auto; align-items: start; }
.shapes .shape span { align-self: end; }

.included { margin-top: 1.2rem; }
.included .label, .sec .label {
  text-transform: uppercase; letter-spacing: .08em; font-size: .72rem; color: var(--muted);
  font-weight: 700; margin-bottom: .5rem;
}

.included ul, .steps { margin: 0; padding-left: 1.1rem; }
.included li, .steps li { margin-bottom: .3rem; font-size: .92rem; }

.total {
  margin-top: auto; padding-top: 1.2rem; border-top: 1px solid var(--line);
  display: flex; align-items: center; gap: 1rem; flex-wrap: wrap;
}
.total .price { font-size: 1.85rem; font-weight: 800; letter-spacing: -0.04em; }
/* Cijena je nakon micanja veze "Pogledajte" ostala sama u redu i drzala lijevi
   rub (Damir 02.09.2026.). Poravnanje ide na `.studio .total`, jer klasu
   `.total` nose i zbrojevi kosarice, blagajne i detalja narudzbe. */
.studio .total { justify-content: flex-end; text-align: right; }
.to-cart { margin-top: .9rem; display: grid; gap: .4rem; }
.to-cart .cta { width: 100%; text-align: center; border: 0; font: inherit; font-weight: 700; cursor: pointer; }
.to-cart .note { margin: 0; font-size: .78rem; color: var(--muted); min-height: 1.1em; }

/* Ime i datum na cestitki. Polja stoje unutar obrasca za kosaricu, iznad
   gumba: kupac ih mora vidjeti prije nego naruci, a drugog ekrana nema jer
   konfigurator crta kuglu i kutiju, ne cestitku. Oblik je isti kakav nose
   polja blagajne, da se za isti posao ne izmislja drugi izgled polja. */
.personalise { display: grid; gap: .5rem; margin: .2rem 0 .3rem; }
.personalise .pf { display: grid; gap: .25rem; font-size: .88rem; font-weight: 600; }
.personalise .pf input {
  padding: .7rem .8rem; border-radius: 10px; font: inherit; width: 100%;
  border: 1px solid var(--line); background: var(--paper); color: var(--ink);
}
.personalise .pf input:focus-visible { outline: 2px solid var(--focus); outline-offset: 1px; }
.personalise .hint { margin: 0; font-size: .8rem; font-weight: 400; color: var(--muted); }

/* --- kosarica ------------------------------------------------------------ */
.cart h1 { margin-bottom: .3rem; }
.cart-items { display: grid; gap: 1rem; margin: 1.4rem 0; }
.cart-item {
  display: grid; grid-template-columns: auto minmax(0, 1fr) auto; gap: 1rem; align-items: start;
  border: 1px solid var(--line); border-radius: var(--radius); padding: 1rem;
}
/* Kutija nosi CETIRI plohe, pa slicice idu 2x2: u redu od tri je cetvrta
   padala sama u drugi red i izgledalo je kao da nesto fali (snimka 156). */
.cart-item .shots { display: grid; grid-template-columns: repeat(2, 4.4rem); gap: .4rem; }
.cart-item .shots figure { margin: 0; width: 4.4rem; }
.cart-item .shots img {
  width: 4.4rem; height: 4.4rem; object-fit: cover; border-radius: 8px; display: block;
}
.cart-item .shots figcaption { font-size: .68rem; color: var(--muted); margin-top: .15rem; }
.cart-item h2 { font-size: 1.05rem; margin: 0 0 .3rem; }
.cart-item .meta { margin: .15rem 0; font-size: .88rem; color: var(--muted); }
/* Prazna ploha se mora VIDJETI prije placanja, ne poslije. */
.cart-item .warn { margin: .35rem 0; font-size: .84rem; color: var(--warn); }
/* Poruka umjesto gumba na blagajnu (stavka vise nije u prodaji): istog tona kao uz stavku. */
.cart-sum .warn { margin: .6rem 0 0; color: var(--warn); font-weight: 600; }
.cart-item .line { font-weight: 800; white-space: nowrap; }
.cart-item form { display: inline-flex; align-items: center; gap: .4rem; margin-top: .5rem; }
.cart-item form + form { margin-left: .8rem; }
.cart-item label { font-size: .82rem; color: var(--muted); }
/* `background`/`color` su OBAVEZNI: bez njih preglednik crta svoje boje po
   OS-u, pa je gumb bio bijel na bijelome (Damir 01.09.2026.). */
.cart-item input[type="number"] {
  font: inherit; width: 4rem; padding: .3rem .4rem; border-radius: 7px;
  border: 1px solid var(--line); background: var(--card); color: var(--ink);
}
.cart-item button {
  font: inherit; font-size: .84rem; cursor: pointer; border-radius: 7px; padding: .3rem .6rem;
  background: var(--card); color: var(--ink); border: 1px solid var(--line);
}
.cart-item button:hover { border-color: var(--green); }
.cart-sum { border-top: 1px solid var(--line); padding-top: 1rem; display: grid; gap: .4rem; max-width: 26rem; margin-left: auto; }
.cart-sum .sum-line { display: flex; justify-content: space-between; gap: 1rem; }
.cart-sum .sum-line.total { font-size: 1.3rem; font-weight: 800; }
.cart-sum .note { margin: .2rem 0; font-size: .8rem; color: var(--muted); }
.cart-sum .cta[disabled] { opacity: .55; cursor: not-allowed; }
@media (max-width: 640px) {
  .cart-item { grid-template-columns: minmax(0, 1fr); }
  /* Na mobitelu je gumb visio uz desni rub (`.cta { margin-left: auto }`) dok
     je sve ostalo bilo lijevo poravnato — vidjeno na snimci 161. Palcu je
     lakse pogoditi gumb pune sirine. */
  .cart-sum .cta { margin-left: 0; text-align: center; display: block; }
}
.total .brk { font-size: .8rem; color: var(--muted); }
.cta {
  margin-left: auto; text-decoration: none; font-weight: 700; border: 0; border-radius: 999px;
  padding: .8rem 1.5rem; background: var(--glow); color: #12231C; font: inherit; font-weight: 700;
  cursor: pointer; display: inline-block;
}
.cta[disabled] { background: var(--line); color: var(--muted); cursor: not-allowed; }
.cta[disabled]:hover { background: var(--line); }

/* Sporedna radnja pokraj gumba. Dva jednaka gumba ne kazu sto je vaznije —
   na potvrdi narudzbe je placanje glavno, povratak u studio nije. */
.quiet-link { color: var(--muted); text-decoration: underline; font-weight: 500; }
.quiet-link:hover { color: var(--ink); }

/* ---------------------------------------------------------------------- police */

.shelf { margin-bottom: 3rem; }
/* Sekcije naslovne odvojene crtom (Damir 03.10.2026.: „sve je kao jedna
   cjelina, a zapravo nije"). Ista tanka crta kao na stranici artikla, s vise
   zraka iznad; konfigurator ima svoju plocu, pa crta iznad njega ne treba. */
.hero ~ .shelf, .hero ~ .occasions, .hero ~ .live {
  border-top: 1px solid var(--line); padding-top: 2.6rem; margin-top: 3rem;
}
.shelf-bar { display: flex; align-items: baseline; gap: 1rem; margin-bottom: 1rem; }
.shelf-bar a { color: var(--green); text-decoration: none; font-weight: 700; font-size: .9rem; }
.shelf-head { margin-bottom: 1.5rem; }
/* Redak preko cijele sirine ekrana se ne cita; oko 65 znakova je granica
   iza koje oko gubi pocetak sljedeceg retka. */
.shelf-head .lead { max-width: 62ch; }
.shelf-head .count { color: var(--muted); font-size: .9rem; }

.grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(15rem, 1fr)); gap: 1.2rem; }
/* Personalizirana polica ide preko cijele sirine. Do 29.09.2026. dvije
   kartice po redu (Damir 02.09.2026.); s cestitkom je artikala tri, pa su tri
   u redu (Damir 29.09.2026.). Ispod 60rem dvije, ispod 40rem jedna. */
.grid.wide { grid-template-columns: repeat(3, minmax(0, 1fr)); }
/* Slike artikala su 4:5 (fotografije 07.10.2026.); polozen okvir im je rezao
   vrh i dno, pa se od kugle vidjela samo gornja polovica. */
.grid.wide .im { aspect-ratio: 4 / 5; }
@media (max-width: 60rem) { .grid.wide { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 40rem) { .grid.wide { grid-template-columns: minmax(0, 1fr); } }
.card { background: var(--card); border: 1px solid var(--line); border-radius: var(--radius); overflow: hidden; }
/* Cijena stoji na dnu svake kartice, bez obzira na duljinu opisa: inace u istom
   redu jedna cijena visi na sredini, a druga pri dnu, pa se dvije kartice ne
   daju usporediti pogledom niz stupac. Drzi je `margin-top:auto` u stupcu, a ne
   fiksna visina kartice - fiksna bi rezala dulji opis. */
.card-link { text-decoration: none; display: flex; flex-direction: column; height: 100%; }
.card .im { flex: none; aspect-ratio: 4 / 5; background: var(--fill); overflow: hidden; }
.card .im img { width: 100%; height: 100%; object-fit: cover; }
.ph {
  display: grid; place-items: center; text-align: center; height: 100%;
  border: 2px dashed var(--line); color: var(--muted); font-size: .8rem; padding: 1rem;
  background: repeating-linear-gradient(45deg, transparent 0 8px, rgba(22, 73, 58, .04) 8px 16px);
}
/* `height:100%` iz `.ph` + `aspect-ratio` = sirina se racuna IZ VISINE reda,
   a visinu diktira dulji desni stupac → okvir se prelije preko teksta.
   Sirina se zato zadaje izricito, a visina slijedi omjer. */
.ph.big { aspect-ratio: 1 / 1; border-radius: var(--radius); width: 100%; height: auto; }
.card .bd { padding: .9rem 1rem 1.1rem; display: flex; flex-direction: column; gap: .35rem; flex: 1; }
.fit { color: var(--green); font-size: .78rem; font-weight: 700; }
.card .nm { font-weight: 700; letter-spacing: -0.02em; }
.card .why { color: var(--muted); font-size: .88rem; }
/* Sidrena cijena je u retku ISPOD cijene i trake boja, ne unutar cijene: dok je
   stajala u `.pr`, traka boja joj je uzimala sirinu, pa se na kugli lomila u dva
   retka, a na cestitki (bez boja) ne - i cijene dviju kartica nisu bile u razini
   (Damir 28.09.2026., snimka). Puna sirina = isti broj redaka na svakoj kartici. */
.card .rw { display: flex; flex-wrap: wrap; align-items: center; column-gap: .6rem; margin-top: auto; padding-top: .5rem; }
.card .pr { font-weight: 800; font-size: 1.1rem; }
/* Traka boja NA KARTICI police - gura se desno, uz cijenu.
   Zvala se `.sw` i to je 03.09.2026. bio kvar pred kupcem: pilule izbora na
   stranici artikla nose `class="opt sw"`, pa ih je ovo pravilo pogadalo i
   `margin-left: auto` ih je razbacao po retku. Izmjereno u pregledniku:
   gap 7,2 px, a stvarni razmaci 93 i 92 px. Ime je zato dobilo svoj pojam -
   traka boja i pilula koja ima boju nisu ista stvar. */
.swatch-row { display: flex; gap: .25rem; margin-left: auto; }
.swatch-row i { width: 14px; height: 14px; border-radius: 50%; border: 1px solid var(--line); }

/* --------------------------------------------------------------------- filtri */

.filters {
  display: flex; flex-wrap: wrap; gap: 1.2rem; align-items: flex-start;
  border: 1px solid var(--line); border-radius: var(--radius); padding: 1rem 1.2rem; margin-bottom: 1.8rem;
  background: var(--card);
}
.filters h2 { font-size: .95rem; width: 100%; margin: 0; }
.filters fieldset { border: 0; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: .4rem; align-items: center; }
.filters legend {
  padding: 0; font-size: .72rem; text-transform: uppercase; letter-spacing: .08em;
  color: var(--muted); font-weight: 700; width: 100%; margin-bottom: .35rem;
}
.chip {
  display: inline-flex; align-items: center; gap: .4rem; cursor: pointer;
  border: 1px solid var(--line); border-radius: 999px; padding: .35rem .7rem; font-size: .88rem;
}
.chip.on { border-color: var(--green); background: rgba(22, 73, 58, .07); }
.chip input { margin: 0; }
.chip i { width: 12px; height: 12px; border-radius: 50%; border: 1px solid var(--line); }
.filters input[type="number"], .filters select {
  font: inherit; padding: .4rem .55rem; border: 1px solid var(--line); border-radius: 8px;
  background: var(--paper); color: var(--ink); max-width: 11rem;
}
.filter-actions { display: flex; align-items: center; gap: .8rem; margin-left: auto; align-self: flex-end; }
.filter-actions button {
  font: inherit; font-weight: 700; cursor: pointer; border: 0; border-radius: 999px;
  padding: .5rem 1.1rem; background: var(--green); color: #fff;
}
.filter-actions a { color: var(--muted); font-size: .88rem; }
.empty { color: var(--muted); }
.empty a { color: inherit; }

/* ------------------------------------------------------------------- proizvod */

.crumbs { display: flex; gap: .5rem; align-items: center; color: var(--muted); font-size: .85rem; margin-bottom: 1.2rem; }
.crumbs a { color: var(--muted); text-decoration: none; }
.crumbs a:hover { color: var(--ink); }

.pdp { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr); gap: 2.5rem; align-items: start; }
/* Okvir glavne slike je stalan 4:5 (Damir 07.10.2026.): slika drugog omjera
   (lepeza je 1:1) se reze u okvir, umjesto da stranica skoci pri listanju. */
.pdp .shot img.big { border-radius: var(--radius); width: 100%; height: auto; aspect-ratio: 4 / 5; object-fit: cover; }
/* Video je 9:16 u istom okviru 4:5: upisuje se (contain) na boju pozadine
   videa, jer bi rezanje odsjeklo korak gore i adresu dolje. */
.pdp .shot video.big { display: block; border-radius: var(--radius); width: 100%; height: auto; aspect-ratio: 4 / 5; object-fit: contain; background: #F5F1EA; }
.pdp .thumbs a.vid { position: relative; }
.pdp .thumbs .play { position: absolute; inset: 0; margin: auto; width: 2rem; height: 2rem; border-radius: 50%; background: rgba(22, 32, 28, .72); }
.pdp .thumbs .play::after { content: ""; position: absolute; left: 55%; top: 50%; transform: translate(-50%, -50%); border-style: solid; border-width: .45rem 0 .45rem .7rem; border-color: transparent transparent transparent #fff; }
.pdp .thumbs { display: flex; gap: .5rem; margin-top: .6rem; }
.pdp .thumbs img { width: 5rem; height: 5rem; object-fit: cover; border-radius: 8px; border: 1px solid var(--line); }
.pdp .info .short { color: var(--muted); }
.pdp .price { display: flex; align-items: baseline; gap: .8rem; flex-wrap: wrap; margin: 1rem 0 1.5rem; }
.pdp .price .pr { font-size: 2.1rem; font-weight: 800; letter-spacing: -0.04em; }
.pdp .price .cmp { color: var(--muted); font-size: .85rem; }

/* Sidrena (dodatna) cijena — cijena koju smo za artikl primjenjivali na
   referentni dan, koja se po odluci Vlade istice uz aktualnu.
   Uvijek u VLASTITOM retku: uz cijenu bi se citala kao dio nje. */
.anchor-price { color: var(--muted); font-size: .82rem; font-weight: 500; line-height: 1.35; }
.card .rw .anchor-price { flex-basis: 100%; margin-top: .15rem; font-size: .8rem; }
.pdp .price .anchor-price { flex-basis: 100%; margin: .1rem 0 0; }
.pdp .price .anchor-price b { font-weight: 700; }
.total .anchor-price { margin-top: .2rem; }
.sec { margin-bottom: 1.4rem; }
.opts { display: flex; flex-wrap: wrap; gap: .45rem; }
.opt {
  border: 1px solid var(--line); border-radius: 999px; padding: .35rem .8rem; font-size: .88rem;
}
/* Motiv se bira OKOM, ne citanjem. Natpis „Motiv 1" kupcu ne znaci nista, a
   snjegovic mu znaci sve - zato mogucnost koja ima svoju fotografiju izgleda
   kao slicica, a ne kao pilula. Natpis ostaje ispod, jer slika sama ne kaze
   kako se motiv zove kad ga kupac spominje u poruci. */
.opt.pic {
  border-radius: 12px; padding: .35rem; display: flex; flex-direction: column;
  align-items: center; gap: .3rem; width: 6.2rem; text-align: center;
}
.opt.pic img { width: 5.4rem; height: 5.4rem; object-fit: cover; border-radius: 8px; display: block; }
/* Motiv koji jos nema fotografiju: prazan okvir iste mjere, da red ne skace
   i da se VIDI kako slika nedostaje. */
.opt.pic .ph.thumb { width: 5.4rem; height: 5.4rem; border-radius: 8px; padding: 0; }
.opt.pic .cap { font-size: .78rem; line-height: 1.25; color: var(--muted); }
.opt.pic.on .cap { color: inherit; font-weight: 700; }

/* Slicice galerije su VEZE (do 03.09.2026. su bile obicne slike na koje se
   klikalo bez ucinka), pa im treba i vidljiv fokus. */
.pdp .thumbs a { display: block; border-radius: 8px; }
.pdp .thumbs a:focus-visible { outline: 2px solid var(--ink); outline-offset: 2px; }
.pdp .thumbs a[aria-current] img { border: 2px solid var(--ink); }
.pdp .thumbs a:not([aria-current]) img { opacity: .75; }
.pdp .thumbs a:hover img { opacity: 1; }
/* Dok se izbor dohvaca, blokovi malo posivje. Bez toga na sporoj vezi
   nista ne kaze da je klik primljen, pa kupac klikne drugi put.
   Prijelaz gasi blok za smanjeni pokret na dnu ove datoteke. */
.pdp .shot, .pdp .info { transition: opacity .12s ease; }
.pdp[aria-busy="true"] .shot, .pdp[aria-busy="true"] .info { opacity: .55; }

/* Boja se pokazuje TOCKOM, ne pozadinom cijele pilule: crvena pozadina s
   crnim tekstom pala bi na kontrastu, a bijeli tekst na zutoj jos gore. */
.opt.sw { position: relative; padding-left: 1.9rem; }
.opt.sw::before {
  content: ""; position: absolute; left: .55rem; top: 50%; transform: translateY(-50%);
  width: 14px; height: 14px; border-radius: 50%; background: var(--sw, var(--line));
  border: 1px solid rgba(18, 35, 28, .3);
}
/* Izbor mogucnosti je VEZA (bez JS-a) ili gumb (u konfiguratoru) — u oba
   slucaja mora izgledati kao nesto sto se klika, i mora se vidjeti sto je
   izabrano. Do 02.09.2026. je ovdje stajao <span>, koji se ne da kliknuti. */
a.opt, .swatch { cursor: pointer; text-decoration: none; color: inherit; }
a.opt:hover, .swatch:hover { border-color: var(--ink); }
.opt.on, .swatch[aria-pressed="true"] {
  border-color: var(--ink); box-shadow: inset 0 0 0 1px var(--ink);
}
.swatch {
  border: 1px solid var(--line); border-radius: 999px; padding: .35rem .8rem .35rem 1.9rem;
  font-size: .88rem; background: none; position: relative; font: inherit; line-height: 1.4;
}
.swatch::before {
  content: ""; position: absolute; left: .55rem; top: 50%; transform: translateY(-50%);
  width: 14px; height: 14px; border-radius: 50%; background: var(--sw, var(--line));
  border: 1px solid rgba(18, 35, 28, .3);
}
/* Mramor je svijetla podloga s tamnim mrljicama, silk ima odsjaj — jedan hex
   to ne moze reci, pa slicica nosi i uzorak. Kod vrijednosti dolazi iz baze. */
.opt.sw[data-opt="mramor"]::before, .swatch[data-opt="mramor"]::before {
  background-image: radial-gradient(circle at 30% 35%, rgba(40,36,32,.85) 0 1px, transparent 1.4px),
                    radial-gradient(circle at 68% 62%, rgba(40,36,32,.75) 0 1px, transparent 1.4px),
                    radial-gradient(circle at 46% 78%, rgba(40,36,32,.6) 0 .8px, transparent 1.2px);
}
.opt.sw[data-opt="titan-siva"]::before, .swatch[data-opt="titan-siva"]::before {
  background-image: linear-gradient(130deg, rgba(255,255,255,.42) 18%, rgba(255,255,255,0) 52%);
}

/* Boja postolja stoji ISPOD kartica oblika, s razmakom - zalijepljena za njih
   izgleda kao dio kartice, a ona je vlastiti izbor (Damir javio 02.09.2026.). */
.colour-label { margin-top: 1.4rem; }
/* Stil lampiona je rijec, ne boja: bez kruzica (23.10.2026.). */
.swatch.style { padding-left: .8rem; }
.swatch.style::before { content: none; }
.colour-opts { margin-bottom: 1.6rem; }

/* --- cestitka u konfiguratoru (29.09.2026.) --------------------------------
   Nema svjetla ni vrtnje: zarulja, znak vrtnje i savjet o omjeru kugle se
   skrivaju klasom, pa se njihovo stanje za kuglu ne gubi. */
.studio.is-card .bulb,
.studio.is-card .spin-cue,
.studio.is-card [data-ratio],
.studio.is-card [data-faces-hint],
.studio.is-card #studio-state { display: none; }
.studio.is-card canvas { cursor: default; aspect-ratio: 1 / 1; }
/* Vlastita fotografija na cestitki se vuce u okviru (Damir 30.09.2026.): tada
   dodir pripada slici u oba smjera, inace bi okomito povlacenje skrolalo. */
.studio.is-card.can-pan canvas { cursor: grab; touch-action: none; }
.studio.is-card.can-pan canvas.grabbing { cursor: grabbing; }
.studio .faces[hidden] { display: none; }

/* Izbor slike: prvo „Vasa fotografija", pa motivi po prigodi. Slicica je
   uspravna (2:3), kao slika na cestitki; motiv se bira okom, kao na polici. */
.card-picks { margin-top: 1.4rem; }
.card-picks[hidden] { display: none; }
.card-picks .label {
  text-transform: uppercase; letter-spacing: .08em; font-size: .72rem; color: var(--muted);
  font-weight: 700; margin-bottom: .5rem;
}
/* Red prigoda, ispod paleta samo izabrane prigode (03.10.2026.): do tada je
   svih 7 prigoda stajalo u mrezi odjednom, a s vise slika po prigodi to bi bio
   zid slicica iznad cijene i gumba za kosaricu. */
.motifs { display: grid; gap: .6rem; }
.card-occasions { display: flex; flex-wrap: wrap; gap: .35rem; }
.motif-row { display: flex; flex-wrap: wrap; gap: .35rem; }
.motif-row[hidden] { display: none; }
.motif {
  font: inherit; color: inherit; cursor: pointer; background: var(--fill);
  border: 1px solid var(--line); border-radius: 10px; padding: .25rem;
  display: grid; place-items: center;
}
.motif img { width: 2.9rem; height: 4.35rem; object-fit: cover; border-radius: 6px; display: block; }
.motif:hover { border-color: var(--ink); }
.motif[aria-pressed="true"] { border-color: var(--ink); box-shadow: inset 0 0 0 1px var(--ink); background: var(--fill-2); }
.motif:focus-visible { outline: 2px solid var(--focus); outline-offset: 2px; }
.motif.own { grid-column: 1 / -1; justify-self: start; padding: .55rem .9rem; font-size: .88rem; font-weight: 600; }

/* Pozicija teksta: iste pilule kao boja, jer je to isti posao (izbor jednog). */
.card-position .label {
  font-size: .85rem; color: var(--ink); text-transform: none; letter-spacing: 0;
  font-weight: 400; margin: 0;
}
.card-position .opt, .card-fit .opt, .card-base .opt, .card-occasions .opt { font: inherit; font-size: .88rem; background: none; color: inherit; cursor: pointer; }
.card-position .opt:hover, .card-fit .opt:hover, .card-base .opt:hover, .card-occasions .opt:hover { border-color: var(--ink); }
.card-position .opt[aria-pressed="true"], .card-fit .opt[aria-pressed="true"], .card-base .opt[aria-pressed="true"], .card-occasions .opt[aria-pressed="true"] { border-color: var(--ink); box-shadow: inset 0 0 0 1px var(--ink); }
/* Mjesto teksta: mreza 3 x 3 kao birac poravnanja u uredivacu teksta.
   Tockica je mjesto na ploci, izabrana je popunjena; oblik mreze prati
   uspravnu plocu (uza nego visa). */
.card-align { display: flex; align-items: center; gap: 1rem; flex-wrap: wrap; }
.align-grid {
  display: grid; grid-template-columns: repeat(3, 1.9rem); grid-template-rows: repeat(3, 2.3rem);
  gap: .2rem; padding: .3rem; border: 1px solid var(--line); border-radius: 10px; background: var(--fill);
}
.align-grid .cell {
  display: grid; place-items: center; border: 0; border-radius: 6px; background: none;
  cursor: pointer; padding: 0; color: var(--muted);
}
.align-grid .cell i {
  width: .5rem; height: .5rem; border-radius: 50%; border: 1.5px solid currentColor; display: block;
}
.align-grid .cell:hover { background: var(--fill-2); color: var(--ink); }
.align-grid .cell[aria-pressed="true"] { color: var(--ink); background: var(--fill-2); }
.align-grid .cell[aria-pressed="true"] i { background: currentColor; width: .65rem; height: .65rem; }
.align-grid .cell:focus-visible { outline: 2px solid var(--focus); outline-offset: 1px; }
/* Zakret nije izbor jednog od mjesta nego potez, pa stoji uz mrezu. */
.card-position .opt.rotate { background: var(--fill); }
.card-fit, .card-base { margin-bottom: .9rem; }

/* Pomak i povecanje vlastite fotografije: uputa, klizac, vracanje. */
.card-crop { display: flex; align-items: center; gap: .6rem 1rem; flex-wrap: wrap; margin-bottom: .9rem; min-width: 0; }
.card-crop[hidden] { display: none; }
.card-crop .hint { flex: 1 1 100%; font-size: .85rem; color: var(--muted); margin: 0; }
.card-crop label { display: flex; align-items: center; gap: .5rem; font-size: .88rem; flex: 1 1 12rem; min-width: 0; }
.card-crop input[type="range"] { flex: 1 1 auto; min-width: 0; accent-color: var(--ink); }
.card-crop .opt { font: inherit; font-size: .88rem; background: none; color: inherit; cursor: pointer; }
.card-crop .opt:hover { border-color: var(--ink); }
.card-crop .opt:disabled { opacity: .45; cursor: default; }
.ball-crop { display: flex; align-items: center; gap: .6rem 1rem; flex-wrap: wrap; margin: .6rem 0 .9rem; min-width: 0; }
.ball-crop[hidden] { display: none; }
/* Izrez je LIST uz lampion (Damir 23.10.2026.): otvori se nakon fotografije,
   „U redu" ga zatvori. Na sirokom ekranu lezi preko desnog stupca i otvara
   se s lijeva kao list knjige; na uskom pada prema dolje ispod platna, preko
   traka strana. Lampion ostaje na vidiku dok se izrez namjesta. */
.studio .stage, .studio .side { position: relative; }
.studio .ball-crop:not([hidden]) {
  position: absolute; z-index: 6; left: 0; right: 0;
  margin: 0; padding: 1rem 1.1rem 1.1rem;
  background: var(--card); border: 1px solid var(--line); border-radius: var(--radius);
  box-shadow: 0 18px 40px rgba(0, 0, 0, .45);
}
.crop-side .ball-crop:not([hidden]) { top: 0; transform-origin: left center; }
/* Sidro odmah ispod platna: nulte visine, list visi s njega preko traka strana. */
.crop-anchor { position: relative; height: 0; margin-top: -.9rem; z-index: 6; }
.crop-anchor .ball-crop:not([hidden]) { top: .5rem; transform-origin: top center; }
.crop-done {
  margin-left: auto; font: inherit; font-weight: 700; cursor: pointer;
  border: 0; border-radius: 999px; padding: .55rem 1.4rem;
  background: var(--glow); color: #12231C;
}
@media (prefers-reduced-motion: no-preference) {
  .crop-side .ball-crop:not([hidden]) { animation: crop-page .65s cubic-bezier(.2, .7, .2, 1); }
  .crop-anchor .ball-crop:not([hidden]) { animation: crop-drop .55s cubic-bezier(.2, .7, .2, 1); }
}
@keyframes crop-page {
  from { transform: perspective(1200px) rotateY(-80deg); opacity: 0; }
  to   { transform: perspective(1200px) rotateY(0); opacity: 1; }
}
@keyframes crop-drop {
  from { transform: perspective(1200px) rotateX(-70deg); opacity: 0; }
  to   { transform: perspective(1200px) rotateX(0); opacity: 1; }
}
.ball-crop .hint { flex: 1 1 100%; font-size: .85rem; color: var(--muted); margin: 0; }
/* Izrez nosi omjer FOTOGRAFIJE: `aspect-ratio` platna studija (1 / 1) ga je do
   23.10.2026. spljostio (uspravna 9:16 je bila kvadrat, Damir javio). Sirinu
   postavlja `drawBallView`, da uspravna fotografija ne bude visa od ~40 %
   ekrana i lampion ostane na vidiku dok se izrez povlaci. */
.ball-crop canvas { display: block; flex: 0 0 auto; width: 100%; max-width: 26rem; height: auto; aspect-ratio: auto; border-radius: 6px; cursor: grab; touch-action: none; }
.ball-crop canvas.grabbing { cursor: grabbing; }
.ball-crop label { display: flex; align-items: center; gap: .5rem; font-size: .88rem; flex: 1 1 12rem; min-width: 0; }
.ball-crop input[type="range"] { flex: 1 1 auto; min-width: 0; accent-color: var(--ink); }
.ball-crop .opt { font: inherit; font-size: .88rem; background: none; color: inherit; cursor: pointer; }
.ball-crop .opt:hover { border-color: var(--ink); }
.ball-crop .opt:disabled { opacity: .45; cursor: default; }

/* Boja teksta je silk filament: tocka nosi odsjaj, ne samo ton. */
.swatch[data-opt="zlatna"]::before,
.swatch[data-opt="srebrna"]::before {
  background-image: linear-gradient(130deg, rgba(255,255,255,.55) 15%, rgba(255,255,255,0) 50%, rgba(0,0,0,.12) 85%);
}

/* Cinjenice o kupnji stoje odmah ispod gumba, jer se ondje odlucuje: cijena
   dostave, rok izrade i sto je s povratom. Prije su bile razasute po stranici
   ili nigdje. */
.buy-facts { margin: .2rem 0 1.6rem; display: grid; gap: .45rem; }
.buy-facts .fact { display: flex; gap: .7rem; font-size: .88rem; line-height: 1.45; }
.buy-facts dt { color: var(--muted); flex: none; min-width: 6.5rem; }
.buy-facts dd { margin: 0; }
.buy-facts a { color: inherit; }

.specs { margin: 0; display: grid; gap: .35rem; }
.spec { display: flex; gap: .8rem; border-bottom: 1px dotted var(--line); padding-bottom: .3rem; }
.spec dt { color: var(--muted); min-width: 9rem; }
.spec dd { margin: 0; font-weight: 600; }
.pending { color: var(--muted); font-size: .85rem; margin-top: .6rem; }
.badges { display: grid; gap: .35rem; margin-top: 1.4rem; color: var(--green); font-size: .88rem; }
.story { max-width: 42rem; margin-top: 3rem; }
/* Opis je TRECE dijete mreze, ne dio stupca sa slikom: na sirokom ekranu sjeda
   pod sliku i popunjava prazninu koju je desni stupac ostavljao, a na uskom
   pada iza gumba. Kad je bio unutar `.shot`, na mobitelu je gurao gumb 563 px
   nize (izmjereno sondom, 02.09.2026.).

   Desni stupac se proteze kroz OBA reda, inace visina prvog reda ostaje visina
   duljeg stupca i opis pocinje tek ispod njega — s prazninom od pola ekrana. */
.pdp .shot  { grid-column: 1; grid-row: 1; }
.pdp .info  { grid-column: 2; grid-row: 1 / span 2; }
/* Desni stupac je ploca s okvirom (Damir 03.10.2026.: „jel bi i ovdje trebalo
   nekako podjeliti?"): opis lijevo je tekst o proizvodu, ploca desno su podaci
   za kupnju. Okomita crta bi visjela u prazno, jer su stupci razlicite visine. */
.pdp .info {
  background: var(--card); border: 1px solid var(--line);
  border-radius: var(--radius); padding: 1.6rem 1.6rem 1.4rem;
}
.pdp .story { grid-column: 1; grid-row: 2; margin-top: 2rem; }
.pdp .wish-form { margin-bottom: 1.6rem; }
/* Hijerarhija ploce (Damir 03.10.2026.: „sve je jednako vazno, ustvari izgleda
   vise nevazno nego vazno"). Glavno je gumb: puna sirina. Odmah ispod su
   cinjenice o kupnji u istaknutom polju. Popis zelja je sporedna radnja, pa je
   poveznica, ne drugi gumb. Podaci, koraci i znacke su sekcije s crtom iznad;
   koraci dobivaju brojeve, znacke su pilule. */
.pdp .info .cta { display: block; width: 100%; margin: 0; text-align: center; padding: 1rem 1.5rem; font-size: 1.05rem; }
.pdp .info .pending { margin: .6rem 0 0; font-size: .82rem; text-align: center; }
.pdp .info .buy-facts { margin: 1.2rem 0 0; padding: 1rem 1.1rem; background: var(--fill); border-radius: 12px; gap: .55rem; }
.pdp .info .buy-facts dd { font-weight: 500; }
.pdp .info .wish-form { margin: .8rem 0 0; }
/* Popis zelja je sporedan GUMB, ne poveznica (Damir 03.10.2026.: kao poveznica
   „ne izgleda kao da zelimo da stave na popis zelja"): puna sirina kao glavni
   gumb, ali s okvirom umjesto boje, i srce u crvenoj s loga. Prazno srce dok
   artikl nije spremljen, puno kad jest. */
.pdp .info .wish-btn {
  display: flex; align-items: center; justify-content: center; gap: .5rem; width: 100%;
  padding: .75rem 1.5rem; border: 1px solid var(--line); border-radius: 999px;
  font-size: .95rem; font-weight: 600; color: var(--ink); background: none;
}
.pdp .info .wish-btn:hover { border-color: #CB2F09; color: var(--ink); }
.pdp .info .wish-btn::before { content: "\2661"; font-size: 1.3rem; line-height: 1; color: #CB2F09; }
.pdp .info .wish-btn.is-on { background: var(--fill); border-color: var(--line); color: var(--ink); }
.pdp .info .wish-btn.is-on::before { content: "\2665"; }
/* Podaci o artiklu u dva stupca iste sirine, pa vrijednosti (i kvacica) stoje
   jedna ispod druge i kad je naziv dulji („LED svjetlo s daljinskim"). */
.pdp .info .spec { display: grid; grid-template-columns: 12.5rem minmax(0, 1fr); }
.pdp .info .spec dt { min-width: 0; }
.spec dd.yes { color: var(--green); font-weight: 800; }
@media (max-width: 480px) { .pdp .info .spec { grid-template-columns: 9.5rem minmax(0, 1fr); } }
.pdp .info .buy-facts ~ .sec, .pdp .info .badges {
  border-top: 1px solid var(--line); padding-top: 1.3rem; margin-top: 1.5rem; margin-bottom: 0;
}
.pdp .info .steps { list-style: none; padding: 0; margin: 0; counter-reset: step; display: grid; gap: .55rem; }
.pdp .info .steps li { counter-increment: step; display: flex; align-items: center; gap: .7rem; margin: 0; }
.pdp .info .steps li::before {
  content: counter(step); flex: none; width: 2rem; height: 2rem; border-radius: 50%;
  background: var(--glow); color: #12231C; font-weight: 700; font-size: .8rem;
  display: grid; place-items: center;
}
/* Ikone umjesto brojeva (Damir 03.10.2026.: „neke fora ikonice"). Koraci su
   redci iz admina, pa ikona ide po POZICIJI: 1 fotografija (s fotografijom)
   ili izbor (gotov motiv), 2 izrada u slojevima, 3 paket.
   Cetvrti i dalji korak ostaju s brojem. Crtez je nas, inline, bez vanjske
   biblioteke; tamni potez na svijetlom krugu vidi se u obje teme. */
.pdp .info .steps li:nth-child(-n+3)::before { content: ""; background: var(--glow) center / 1.1rem no-repeat; }
.pdp .info .steps-photo li:nth-child(1)::before { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2312231C' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3' y='3' width='18' height='18' rx='2'/%3E%3Ccircle cx='9' cy='9' r='2'/%3E%3Cpath d='m21 15-3.1-3.1a2 2 0 0 0-2.8 0L6 21'/%3E%3C/svg%3E"); }
.pdp .info .steps-ready li:nth-child(1)::before { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2312231C' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 3l1.9 5.8L20 11l-6.1 2.2L12 19l-1.9-5.8L4 11l6.1-2.2z'/%3E%3C/svg%3E"); }
.pdp .info .steps li:nth-child(2)::before { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2312231C' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 2 2 7l10 5 10-5-10-5z'/%3E%3Cpath d='m2 17 10 5 10-5'/%3E%3Cpath d='m2 12 10 5 10-5'/%3E%3C/svg%3E"); }
.pdp .info .steps li:nth-child(3)::before { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2312231C' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M21 16V8a2 2 0 0 0-1-1.7l-7-4a2 2 0 0 0-2 0l-7 4A2 2 0 0 0 3 8v8a2 2 0 0 0 1 1.7l7 4a2 2 0 0 0 2 0l7-4A2 2 0 0 0 21 16z'/%3E%3Cpath d='M3.3 7 12 12l8.7-5'/%3E%3Cpath d='M12 22V12'/%3E%3C/svg%3E"); }
.pdp .info .badges { display: flex; flex-wrap: wrap; gap: .4rem; }
.pdp .info .badges span { background: var(--fill); border-radius: 999px; padding: .3rem .75rem; font-size: .8rem; }
.story p { color: var(--ink); }
/* Oblikovanje opisa artikla (od 04.09.2026.): podnaslov, popis, podebljano.
   Popis nosi svoju tocku - do danas su stavke bile obicni redci koji su
   POCINJALI plusom, pa ni citac ekrana ni trazilica nisu znali da je to popis. */
/* Svaki podnaslov otvara sekciju s crtom iznad (Damir 03.10.2026.: „object page
   mora imati neke dividere sekcija - ovako je nepregledno"); prvi je bez crte. */
.story h2 {
  font-size: 1.15rem; margin: 2rem 0 .6rem; padding-top: 1.4rem;
  border-top: 1px solid var(--line); letter-spacing: -0.01em;
}
.story > h2:first-child { margin-top: 0; padding-top: 0; border-top: 0; }
.story ul, .story ol { margin: .6rem 0 1rem; padding-left: 1.3rem; color: var(--ink); }
.story li { margin: .25rem 0; }
.story strong { font-weight: 700; }

.oops { max-width: 34rem; padding: 3rem 0; }

/* -------------------------------------------------------------------- podnozje */

.bottom {
  width: var(--shell); margin: 0 auto; padding: 2rem 0 3rem;
  border-top: 1px solid var(--line); color: var(--muted); font-size: .88rem;
}
.footer-rights { margin: 0; text-align: center; }

/* Instagram iznad prava: jedna veza, bez reda ikona za mreze koje nemamo. */
.footer-social { margin: 0 0 1rem; text-align: center; }
.footer-social a {
  display: inline-flex; align-items: center; gap: .4rem;
  color: var(--ink); text-decoration: none; min-height: 44px;
}
.footer-social a span { border-bottom: 1px solid var(--line); }
.footer-social a:hover, .footer-social a:focus-visible { color: var(--green); }
.footer-social a:hover span, .footer-social a:focus-visible span { border-bottom-color: currentColor; }

/* Pravne veze u podnozju. Nisu ukras: bez njih shop krsi Zakon o
   elektronickoj trgovini i ZZP cl. 57. Zato stoje IZNAD ostatka podnozja i
   nose punu boju teksta, ne prigusenu. */
.footer-legal { margin: 0 0 1.2rem; }
.footer-legal ul {
  list-style: none; margin: 0; padding: 0;
  display: flex; flex-wrap: wrap; gap: .35rem 1.1rem;
  /* Damir 02.09.2026.: „pravni linkovi bi trebali biti poravnati po sredini". */
  justify-content: center;
}
.footer-legal a { color: var(--ink); text-decoration: none; border-bottom: 1px solid var(--line); }
.footer-legal a:hover, .footer-legal a:focus-visible { color: var(--green); border-bottom-color: currentColor; }

/* --------------------------------------------------------------- pravne stranice */

/* Mjera retka je namjerno uza od ostatka shopa (~34 em): ovo su dugi tekstovi
   koji se stvarno citaju, a ne pregledavaju. */
.legal { width: min(38rem, 100%); margin: 0 auto; padding: 2.5rem 0 3rem; }
.legal h1 { margin: 0 0 .5rem; }
.legal .lead { color: var(--muted); margin: 0 0 2rem; }
.legal h2 { margin: 2.2rem 0 .6rem; font-size: 1.08rem; }
.legal p { margin: 0 0 .9rem; line-height: 1.65; }
.legal-list { margin: 0 0 1.1rem; padding-left: 1.2rem; }
.legal-list li { margin-bottom: .45rem; line-height: 1.6; }

/* Isticanje: ono sto kupac mora vidjeti i ako preleti stranicu (prag dostave,
   „nije igracka", dugmasta baterija, nema jednostranog raskida). */
.legal-note {
  margin: 1.1rem 0; padding: .9rem 1.1rem;
  border-left: 3px solid var(--green); background: color-mix(in srgb, var(--green) 7%, transparent);
  border-radius: 0 8px 8px 0;
}

/* Tablica se VODORAVNO KLIZI, ne lomi — tablica podataka iz izjave o
   privatnosti ima cetiri stupca i lomljenjem postaje necitljiva bas na
   mobitelu, gdje se najvise cita. */
.legal-table-wrap { overflow-x: auto; margin: 0 0 1.3rem; }
.legal-table { border-collapse: collapse; width: 100%; font-size: .92rem; }
.legal-table th, .legal-table td {
  text-align: left; vertical-align: top; padding: .55rem .7rem;
  border-bottom: 1px solid var(--line);
}
.legal-table th { color: var(--muted); font-weight: 600; white-space: nowrap; }

.legal-version { margin-top: 2.2rem; color: var(--muted); font-size: .85rem; }
.legal-back { margin: 0; }

/* --------------------------------------------------- stranica „hvala"
   Do nje se dolazi SAMO QR kodom s kartice iz paketa: mobitel u ruci, dnevno
   svjetlo, covjek koji prepisuje kod u drugu ruku.

   SVE JE CENTRIRANO (Damir 03.09.2026.): stranica ima jednu poruku i dva
   gumba, pa lijevo poravnat stupac izgleda kao odsjecen dio nekog sireg
   rasporeda. Mjera retka je uza od pravnih stranica (30 rem): ovdje nema
   dugog teksta koji bi se citao u redovima. */
.thanks {
  width: min(30rem, 100%); margin: 0 auto; padding: 2.5rem 0 3rem;
  text-align: center;
}
/* Naslov je manji nego drugdje jer je i stupac uzi: zadana velicina naslova
   ovdje je lomila recenicu u tri retka, a naslov u tri retka na sredini
   izgleda kao greska u ispisu. */
.thanks h1 { margin: 0 0 .9rem; font-size: clamp(1.5rem, 4.6vw, 1.95rem); line-height: 1.2; }
.thanks h2 { margin: 2.4rem 0 .5rem; font-size: 1.08rem; }
.thanks p { margin: 0 0 .7rem; line-height: 1.6; }

/* Isprekidan okvir je preuzet s tiskane kartice (kartica_hvala.html): tko
   dolazi s papira treba isti oblik prepoznati na ekranu. */
.thanks-code {
  margin: 1.8rem 0 .9rem; padding: 1.4rem 1.1rem;
  border: 2px dashed var(--green); border-radius: 14px;
  background: color-mix(in srgb, var(--green) 6%, transparent);
}
.thanks-code p { margin: 0; }
.thanks-code-label {
  font-size: .78rem; font-weight: 700;
  letter-spacing: .12em; text-transform: uppercase; color: var(--muted);
}
/* Prepisuje se rukom, pa ide monospace: u proporcionalnom pismu se 0 i O, te
   1 i l, na mobitelu razlikuju tesko. `user-select: all` daje kopiranje jednim
   dodirom onome tko stranicu drzi otvorenu do blagajne. */
.thanks-code-value {
  margin: .35rem 0 .5rem !important;
  font-family: ui-monospace, "SFMono-Regular", Menlo, Consolas, monospace;
  font-size: clamp(1.7rem, 9vw, 2.4rem); font-weight: 700; letter-spacing: .16em;
  line-height: 1.15; word-break: break-all; user-select: all; color: var(--ink);
}
.thanks-code-gives { font-size: 1.05rem; font-weight: 700; }
.thanks-code-min { margin-top: .45rem !important; font-size: .9rem; color: var(--muted); }

.thanks-hint { color: var(--muted); font-size: .92rem; }

/* Gumb ide preko cijele sirine: na mobitelu je to jedina radnja u tom dijelu
   stranice, a palac gada sredinu. */
.thanks-cta { margin: 1.4rem 0 .4rem !important; }
.thanks-cta .cta { display: block; margin-left: 0; text-align: center; }

/* Raskrizje: sedam dokumenata s jednom recenicom objasnjenja svaki. */
.legal-index { list-style: none; margin: 0; padding: 0; display: grid; gap: .8rem; }
.legal-index a {
  display: grid; gap: .2rem; padding: .9rem 1.1rem;
  border: 1px solid var(--line); border-radius: 12px;
  color: var(--ink); text-decoration: none;
}
.legal-index a:hover, .legal-index a:focus-visible { border-color: var(--green); }
.legal-index span { color: var(--muted); font-size: .9rem; }

/* ------------------------------------------------------------------- uski ekran */

/* Uski ekran: naziv u svoj red, police u svoj — inace se lome oko naziva i
   ispada kao da tekst pluta (Damir 01.09.2026.). */

/* ------------------------------------------------------------------ racun */
/* Damir 01.09.2026.: „pokraj ikone kosarice avatar prijavljenog kupca i meni
   za profil". Avatar je isti krug kao kosarica i kotacic — tri jednaka kruga u
   nizu, jer su tri jednako vazne stvari. */
.account-link {
  display: inline-flex; align-items: center; justify-content: center;
  width: 2.4rem; height: 2.4rem; border-radius: 999px; color: var(--ink);
  border: 1px solid var(--line); background: var(--card); text-decoration: none;
}
.account-link:hover { border-color: var(--green); color: var(--green); }
.account-menu .avatar {
  display: inline-flex; align-items: center; justify-content: center;
  width: 100%; height: 100%; border-radius: 999px;
  font-size: .82rem; font-weight: 800; letter-spacing: .02em; color: var(--green);
}
.account-menu .who {
  margin: 0; padding: .1rem .5rem .4rem; font-weight: 700;
  border-bottom: 1px solid var(--line);
}
.account-menu .langs a { display: block; padding: .4rem .5rem; border-radius: 9px; }

.account, .account-form { max-width: 34rem; margin: 2.4rem auto; display: grid; gap: 1rem; }
.account h1, .account-form h1 { margin: 0; }
.account .lead, .account-form .lead { margin: 0; color: var(--muted); }
.account-form form { display: grid; gap: .4rem; }
.account-form label { font-size: .88rem; font-weight: 600; }
.account-form input {
  padding: .7rem .8rem; border-radius: 10px; font: inherit;
  border: 1px solid var(--line); background: var(--card); color: var(--ink);
}
.account-form input:focus-visible { outline: 2px solid var(--focus); outline-offset: 1px; }
.account-form .hint { margin: 0 0 .4rem; font-size: .84rem; color: var(--muted); }
.account-form .switch { font-size: .9rem; color: var(--muted); }
.account-form .cta { margin-top: .6rem; }
.account-facts { display: grid; grid-template-columns: auto 1fr; gap: .3rem 1rem; margin: 0; }
.account-facts dt { color: var(--muted); font-size: .88rem; }
.account-facts dd { margin: 0; font-weight: 600; }
.account .pending {
  display: grid; gap: .5rem; padding: 1rem; border-radius: var(--radius);
  border: 1px solid var(--warn); background: var(--card);
}
.account .pending h2 { margin: 0; font-size: 1.05rem; }
.account .ok, .account-form .ok { margin: 0; color: var(--green); font-weight: 600; }
.account .warn, .account-form .warn { margin: 0; color: var(--warn); font-weight: 600; }
.account .sign-out { margin-top: .6rem; }
/* Gumbi na racunu su sporedni potezi (odjava, nova poruka) — ne `cta`, koji
   je rezerviran za potez zbog kojeg je stranica tu. Bez ovoga ih preglednik
   crta svojim sivim gumbom, koji u tamnoj temi izgleda kao kvar. */
.account button {
  justify-self: start; cursor: pointer; font: inherit; font-weight: 600;
  padding: .55rem 1rem; border-radius: 999px;
  border: 1px solid var(--line); background: var(--card); color: var(--ink);
}
.account button:hover { border-color: var(--green); color: var(--green); }
.account button:focus-visible { outline: 2px solid var(--focus); outline-offset: 2px; }

/* Honeypot: polje koje covjek ne vidi, a stroj popuni. Ne `display:none` —
   dio botova preskace skrivena polja, a ovako je polje "vidljivo" njima i
   nevidljivo covjeku (i citacu zaslona, koji ima aria-hidden na omotacu). */
.hp {
  position: absolute; left: -9999px; width: 1px; height: 1px;
  overflow: hidden; opacity: 0;
}

@media (max-width: 620px) {
  .top { gap: .7rem 1rem; padding: .9rem 0; }
  .brand { flex: 0 0 100%; }
  .shelves { flex: 0 0 100%; gap: 1rem; }
  .top-right { flex: 0 0 100%; justify-content: space-between; }
  /* Sa sloganom umjesto izbornika: logo i ikone u prvom redu, slogan ispod. */
  .top:has(.tagline) .brand { flex: 1 1 auto; }
  .top:has(.tagline) .top-right { flex: 0 0 auto; }
  .tagline { order: 3; flex: 0 0 100%; font-size: .85rem; }
}
/* Na 320 px logo i tri ikone ne stanu u red s razmakom od 1rem, pa se zaglavlje
   lomilo u tri retka (142 px) i prekrivalo lampion dok je list izreza otvoren;
   izbornik kotacica je tada izlazio preko lijevog ruba (razbij 24.10.). */
@media (max-width: 360px) {
  .top { column-gap: .6rem; }
  .top-right { gap: .4rem; }
}

@media (max-width: 860px) {
  /* `minmax(0, …)` umjesto golog `1fr`: stupac inace nosi min-width:auto pa ga
     canvas rastegne svojom intrinzicnom sirinom (`width="800"`) i na mobitelu
     je sve ogromno. Damir je potvrdio da ovo rjesava („sad pase na mobitel",
     01.09.2026.). Moje A/B mjerenje u iframeu NIJE vidjelo razliku — iframe
     ne primjenjuje viewport meta, pa nije mjerio ono sto mu je ime. */
  .studio, .pdp { grid-template-columns: minmax(0, 1fr); }
  /* Jedan stupac: raspored po redovima se PONISTAVA, inace slika i opis ostanu
     u istoj koloni a gumb odleti ispod cijelog opisa. */
  .pdp .shot, .pdp .info, .pdp .story { grid-column: auto; grid-row: auto; }
  .filter-actions { margin-left: 0; }
}

@media (prefers-reduced-motion: reduce) {
  /* `*` NE POGADA PSEUDO-ELEMENTE — univerzalni selektor bira elemente, a
     `::before`/`::after` to nisu. Izmjereno 02.09.2026.: crta pod policom zivi
     u `::after` i pod `reduce` se i dalje **uvlacila** (1,8 px 20 ms nakon
     hovera, umjesto pune sirine odmah). Blok je dakle dvije godine tvrdio da
     gasi pokret, a gasio je samo onaj na elementima. */
  *, *::before, *::after { transition: none !important; animation: none !important; }
}

/* ── Blagajna ────────────────────────────────────────────────────────────────
   Obrazac je dug (kontakt, adresa, paketomat, pravna obavijest, zbroj), pa
   se na sirokom zaslonu dijeli u dva stupca: lijevo se upisuje, desno stoji
   zbroj. Na uskom ostaje jedan stupac i zbroj pada na dno, gdje mu je mjesto
   neposredno prije gumba. */
.checkout { max-width: 60rem; margin: 2.4rem auto; display: grid; gap: 1rem; }
.checkout h1 { margin: 0; }
.checkout .lead { margin: 0; color: var(--muted); }
.checkout > .warn {
  margin: 0; padding: .8rem 1rem; list-style: none; display: grid; gap: .3rem;
  border: 1px solid var(--warn); border-radius: var(--radius); background: var(--card);
  color: var(--warn); font-weight: 600;
}
.checkout-form { display: grid; gap: 1.2rem; align-items: start; }
@media (min-width: 52rem) {
  .checkout-form { grid-template-columns: 1fr 22rem; }
  .checkout-form fieldset { grid-column: 1; }
  .checkout-sum { grid-column: 2; grid-row: 1 / span 4; position: sticky; top: 1rem; }
}
/* Prelijevanje od 22 px na 320 px (izmjereno 03.09.2026., zatvoreno 05.09.):
   `.checkout` je grid, a grid stavka se po zadanom NE smije smanjiti ispod
   svoje min-sirine (`min-width: auto`). `fieldset` uz to u svim preglednicima
   nosi `min-width: min-content` i ignorira `width` dok mu se ne postavi
   `min-width: 0`. Zato je stupac narastao na 322 px, a naslov i obrazac su se
   samo RASTEGNULI na njega — pa je krivac izgledao kao `h1`, koji je zapravo
   bio zrtva. Mjereno lancem `html -> body -> main -> .checkout -> h1`. */
.checkout > *,
.checkout-form > *,
.checkout-form fieldset > *,
.checkout-form input { min-width: 0; }

.checkout-form fieldset {
  margin: 0; display: grid; gap: .4rem; min-width: 0;
  border: 1px solid var(--line); border-radius: var(--radius); padding: 1rem 1.1rem 1.2rem;
  background: var(--card);
}
.checkout-form legend { padding: 0 .4rem; font-weight: 800; font-size: .95rem; }
.checkout-form label { font-size: .88rem; font-weight: 600; }
.checkout-form input[type="text"],
.checkout-form input[type="email"],
.checkout-form input[type="tel"] {
  padding: .7rem .8rem; border-radius: 10px; font: inherit; width: 100%;
  border: 1px solid var(--line); background: var(--paper); color: var(--ink);
}
.checkout-form input:focus-visible { outline: 2px solid var(--focus); outline-offset: 1px; }
.checkout-form .hint { margin: 0 0 .4rem; font-size: .84rem; color: var(--muted); }
.checkout-form .meta { margin: 0; font-weight: 600; }
/* Honeypot: nikad `display:none` — dio robota preskace bas takva polja.
   Makne se iz vidokruga, a ostaje u stablu. */
.checkout-form .hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.checkout-form .legal p { margin: 0 0 .5rem; font-size: .86rem; color: var(--muted); line-height: 1.55; }
.checkout-form .legal .check {
  display: flex; gap: .55rem; align-items: flex-start;
  font-size: .9rem; font-weight: 600; cursor: pointer;
}
.checkout-form .legal .check input { margin-top: .2rem; flex: 0 0 auto; }
.checkout-sum {
  display: grid; gap: .4rem; padding: 1rem 1.1rem;
  border: 1px solid var(--line); border-radius: var(--radius); background: var(--card);
}
.checkout-sum h2 { margin: 0 0 .3rem; font-size: 1.05rem; }
.checkout-sum .sum-line { display: flex; justify-content: space-between; gap: 1rem; }
/* Iznos se NE prelama: u uskom stupcu sazetka je "45,00 €" padao u dva retka
   ("45,00" pa "€"), pa je kupac cijenu citao preko dva retka. Vidjeno na
   snimci 157, testovi to ne vide. */
.cart-sum .sum-line > b, .checkout-sum .sum-line > b { white-space: nowrap; }
.checkout-sum .sum-line small { display: block; font-weight: 400; color: var(--muted); font-size: .78rem; }
.checkout-sum .sum-line.total { font-size: 1.3rem; font-weight: 800; margin-top: .3rem; }
.checkout-sum .note { margin: .3rem 0; font-size: .8rem; color: var(--muted); }
.checkout-sum .cta { margin-top: .4rem; text-align: center; }
.checkout.done { max-width: 34rem; text-align: center; }
.checkout.done .order-number {
  margin: .4rem 0; padding: 1rem; border-radius: var(--radius);
  border: 1px dashed var(--green); background: var(--card);
}
.checkout.done .order-number span { display: block; font-size: .82rem; color: var(--muted); }
.checkout.done .order-number b { font-size: 1.8rem; letter-spacing: .06em; }

/* --- Izbor BoxNow paketomata (blagajna) ---------------------------------
   Popis je RADIO, ne padajuci izbornik: 869 paketomata u `<select>`-u je
   popis kroz koji se ne da doci, a na mobitelu ni to. Trazi se pa bira.
   Nema karte — karta znaci tudi JS i tudje slojeve u produkciji. */
.locker-find { display: flex; gap: .5rem; align-items: stretch; margin-bottom: .3rem; }
.locker-find input[type="search"] { flex: 1 1 auto; min-width: 0; }
.locker-find .ghost {
  flex: 0 0 auto; padding: .55rem .9rem; border-radius: var(--radius);
  border: 1px solid var(--line); background: var(--card); color: inherit;
  font-weight: 700; font-size: .86rem; cursor: pointer;
}
.locker-find .ghost:hover { border-color: var(--green); }
.locker-chosen {
  margin: .5rem 0; padding: .6rem .8rem; border-radius: var(--radius);
  border: 1px dashed var(--green); background: var(--card); font-size: .9rem;
}
.locker-chosen span { display: block; font-size: .78rem; color: var(--muted); }
/* Popis se ograniceno pomice: dvanaest pogodaka ne smije gurnuti zbroj i gumb
   „Naruci" izvan zaslona. */
.locker-list { display: grid; gap: .3rem; max-height: 22rem; overflow-y: auto; }
.locker-list:not(:empty) { margin-top: .5rem; }
.locker-option {
  display: flex; gap: .6rem; align-items: flex-start; padding: .55rem .7rem;
  border: 1px solid var(--line); border-radius: var(--radius);
  background: var(--card); cursor: pointer; font-weight: 400;
}
.locker-option:hover { border-color: var(--green); }
.locker-option input { margin-top: .25rem; flex: 0 0 auto; }
.locker-option b { display: block; font-size: .9rem; }
.locker-option small { display: block; color: var(--muted); font-size: .8rem; }
.locker-option .locker-full { font-size: .76rem; color: var(--warn); font-style: normal; font-weight: 700; }
.locker-option:has(input:checked) { border-color: var(--green); box-shadow: inset 0 0 0 1px var(--green); }

/* ── izbor nacina dostave i prag besplatne dostave (01.09.2026.) ──────────
   Radi BEZ JS-a: nacin je `radio`, cijela ploha je `<label>`. */
.ship-methods { display: grid; gap: .5rem; margin-bottom: .8rem; }
.ship-method {
  display: grid; grid-template-columns: auto 1fr auto; gap: .6rem; align-items: center;
  padding: .7rem .9rem; border: 1px solid var(--line); border-radius: var(--radius);
  cursor: pointer;
}
.ship-method.is-chosen { border-color: var(--green); box-shadow: inset 0 0 0 1px var(--green); }
.ship-method .ship-name { font-weight: 600; }
.ship-method .ship-price { text-align: right; white-space: nowrap; }
/* Napomena ide u puni redak ispod, ne uz cijenu — ondje bi gurala iznos. */
.ship-method .ship-note { grid-column: 2 / -1; font-size: .85rem; color: var(--muted); }
.ship-method s.was { color: var(--muted); font-weight: 400; margin-right: .3rem; }
/* Gumb „Osvjezi cijenu dostave" postoji SAMO bez JS-a. Bez ovog pravila
   `.ghost` nema stil izvan `.locker-find`, pa se razvuce u sivu traku preko
   cijele sirine — izgledalo je kao kvar (snimka `89-blagajna-dostava.png`). */
.ship-methods + .ghost {
  display: inline-block; margin-bottom: .8rem; padding: .5rem .9rem;
  border: 1px solid var(--line); border-radius: var(--radius);
  background: var(--card); color: inherit; font: inherit; font-size: .85rem; cursor: pointer;
}
.ship-methods + .ghost:hover { border-color: var(--green); }
/* `hidden` bez ovog pravila NE SAKRIVA: pravilo iznad postavlja `display`,
   a autorski `display` pobjeduje `[hidden]` iz preglednikova stila. Uz JS gumb
   se sakriva (`checkout.js`), pa bi bez ovoga ostao vidljiv i bez posla. */
.ship-methods + .ghost[hidden] { display: none; }

/* Dok se cijena osvjezava, blok se pritamni — kupac ne smije misliti da je
   brojka koju gleda vec nova. */
.is-refreshing { opacity: .55; transition: opacity .12s ease; }

/* Prag koji se ne vidi ne mijenja nista — zato natpis ima svoju boju i tezinu. */
.free-shipping {
  margin: .4rem 0 0; padding: .5rem .7rem; border-radius: var(--radius);
  font-size: .9rem; background: var(--fill); color: var(--ink);
}
/* `--glow` je SVIJETAO i u tamnoj temi, a `--ink` je ondje takoder svijetao —
   pa je natpis na snimci `89-blagajna-dostava.png` bio necitljiv (svijetlo na
   svijetlom). Tekst je zato tvrdo taman, isto kao na `.cta`, koja stoji na istoj
   podlozi. Uhvaceno GLEDANJEM SNIMKE — svih 494 testa bilo je zeleno. */
.free-shipping.is-free { background: var(--glow); color: #12231C; font-weight: 600; }

/* Kod za popust: polje i gumb u jednom redu, ali se LOME na uskom ekranu —
   gumb koji istisne polje ispod 200 px cini upis koda tezim od prepisivanja.
   Gumb NE nosi `type=submit` sam po sebi kao jedini u obrascu: ime `apply_coupon`
   ga razdvaja od narucivanja, pa pritisak Entera u polju ne izda narudzbu. */
.coupon-row { display: flex; flex-wrap: wrap; gap: .5rem; align-items: stretch; }
.coupon-row input { flex: 1 1 12rem; min-width: 0; text-transform: uppercase; }
.coupon-row .btn { flex: 0 0 auto; }
.checkout fieldset.coupon .warn { margin: .4rem 0 0; color: var(--warn); font-weight: 600; }

/* ── racun: narudzbe (6C.1) ───────────────────────────────
   Damir 02.09.2026.: „user profile — gdje korisnik moze vidjeti sve svoje
   narudzbe". Do tada je iza prijave stajala samo adresa e-poste i odjava.
   Po istrazivanju (Baymard, 1.026 kupaca) pracenje narudzbe je NAJVAZNIJA
   stavka takvog prostora (51 %), a naslovna racuna je polaziste (52 %). */
/* Cetiri KARTICE, ne cetiri pilule (Damir 02.09.2026.). Mreza je 2×2:
   stupac racuna je uzak, pa bi cetiri kartice u redu bile uze od naslova.
   Na mobitelu ide jedna u redu. */
.account-nav { display: grid; gap: .6rem; grid-template-columns: 1fr; margin: .2rem 0 0; }
@media (min-width: 40rem) { .account-nav { grid-template-columns: 1fr 1fr; } }
.account-nav a {
  display: grid; gap: .15rem; align-content: start;
  padding: .85rem 1rem; border: 1px solid var(--line); border-radius: var(--radius);
  background: var(--card); text-decoration: none; color: var(--ink);
}
.account-nav a:hover { border-color: var(--green); }
.account-nav .nm { font-weight: 700; font-size: 1rem; }
.account-nav .hi { color: var(--muted); font-size: .86rem; line-height: 1.35; }

/* Odjava ostaje gumb kakav je bio, ali nosi crvenu notu: potez nesto
   zatvara, pa se ne smije citati kao jos jedna kartica. */
.account .sign-out button { border-color: var(--danger); color: var(--danger); }
.account .sign-out button:hover { border-color: var(--danger); color: var(--danger); background: var(--fill); }
.account .sign-out-note { margin: .35rem 0 0; color: var(--muted); font-size: .84rem; }

.account .orders { list-style: none; margin: 0; padding: 0; display: grid; gap: .5rem; }
.order-row a {
  display: grid; grid-template-columns: auto 1fr auto auto; gap: .5rem 1rem; align-items: baseline;
  padding: .75rem .9rem; border: 1px solid var(--line); border-radius: 12px;
  text-decoration: none; color: var(--ink);
}
/* Redak BEZ veze (stranica narudzbi otvorena potpisom iz poruke: ondje
   detalja nema, pa nema ni `<a>`). Do 05.09.2026. je raspored visio iskljucivo
   o `.order-row a`, pa su se broj, stanje, datum i iznos slijevali u jedan
   neprekinut niz. Isti raspored, drugi nosilac. */
.order-row.plain {
  display: grid; grid-template-columns: auto 1fr auto auto; gap: .5rem 1rem; align-items: baseline;
  padding: .75rem .9rem; border: 1px solid var(--line); border-radius: 12px;
}
.order-row.plain .wask { grid-column: 1 / -1; }

.order-row a:hover { border-color: var(--green); }
.order-row .onum { font-variant-numeric: tabular-nums; font-weight: 700; }
.order-row .ostatus { color: var(--muted); font-size: .9rem; }
.order-row .odate { color: var(--muted); font-size: .9rem; font-variant-numeric: tabular-nums; }
.order-row .ototal { font-weight: 700; font-variant-numeric: tabular-nums; }

/* „Zatrazen raskid" mora se vidjeti I U POPISU — inace kupac ponovi zahtjev
   jer ne vidi da je stigao (nalaz iz istrazivanja, 02.09.2026.). */
/* Zahtjev za raskid na stranici otvorenoj potpisom: popis narudzbi ostaje
   popis, a obrazac ceka klik. Bez JS-a - `details` je nativan. */
.wask { margin-top: .6rem; }
.wask summary { cursor: pointer; color: var(--muted); font-size: .9rem; }
.wask summary:hover { color: var(--ink); }
.wask textarea { width: 100%; }

.wbadge {
  display: inline-block; margin-left: .4rem; padding: .05rem .45rem;
  border-radius: 999px; background: var(--glow); color: #12231C;
  font-size: .78rem; font-weight: 700;
}

.order-detail h2 { margin: 1.2rem 0 .4rem; font-size: 1.05rem; }
.order-items { list-style: none; margin: 0; padding: 0; display: grid; gap: .35rem; }
.order-items li { display: grid; grid-template-columns: 1fr auto auto; gap: .8rem; }
.order-items .iqty, .order-items .iprice { font-variant-numeric: tabular-nums; color: var(--muted); }
.order-detail .total { font-size: 1.05rem; }
.order-detail form { display: grid; gap: .4rem; max-width: 32rem; }
.order-detail textarea { font: inherit; padding: .6rem; border: 1px solid var(--line); border-radius: 10px; }
.account .empty { color: var(--muted); }
.account .mono { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; }

/* Na uskom zaslonu redak narudzbe prelazi u dva reda — ne klizi vodoravno. */
@media (max-width: 560px) {
  .order-row a,
  .order-row.plain { grid-template-columns: 1fr auto; }
  .order-row .ostatus { grid-column: 1 / -1; }
}

/* Zbroj narudzbe: roba + dostava + ukupno. Bez retka dostave zbroj ne stima,
   a kupac ne zna odakle razlika (nadeno gledanjem snimke 02.09.2026.). */
/* Razmak medu stupcima je 0, a zrak dolazi iz `padding`-a: s `column-gap`
   je crta iznad „Ukupno" imala PREKID u sredini i izgledala kao greska u
   prikazu (vidjeno na snimci 112). */
.order-sums { display: grid; grid-template-columns: 1fr auto; row-gap: .25rem; column-gap: 0; margin: .6rem 0 0; }
.order-sums dt { color: var(--muted); padding-right: 1rem; }
.order-sums dd { margin: 0; font-variant-numeric: tabular-nums; text-align: right; }
.order-sums .sum { font-weight: 700; color: var(--ink); border-top: 1px solid var(--line); padding-top: .3rem; margin-top: .2rem; }
/* Naslov detalja je REDNI BROJ, ne marketinski naslov — storefront h1 je za
   njega prevelik i lomio se u dva reda na 1280 px. */
.order-detail h1 { font-size: clamp(1.3rem, 2.4vw, 1.8rem); line-height: 1.2; }

/* ── racun: adresar (6C.2) ────────────────────────────────
   Adresar je BILJEZNICA za sljedecu narudzbu; adresa na vec izdanoj narudzbi
   je zamrznuta i ovdje se ne dira. Ekran to i kaze, jer je to prvo pitanje. */
.addr-list { list-style: none; margin: 0; padding: 0; display: grid; gap: .6rem; }
.addr {
  border: 1px solid var(--line); border-radius: 12px; padding: .8rem .9rem;
  display: grid; gap: .35rem;
}
.addr.is-default { border-color: var(--green); }
.addr-head { display: flex; align-items: baseline; gap: .5rem; flex-wrap: wrap; }
.addr-head b { font-size: 1rem; }
.addr .tag {
  padding: .05rem .45rem; border-radius: 999px; background: var(--green); color: #fff;
  font-size: .72rem; font-weight: 700; text-transform: lowercase;
}
.addr-body { margin: 0; }
.addr-actions { display: flex; gap: .8rem; align-items: baseline; flex-wrap: wrap; }
.addr-actions form { display: inline; }
/* Potez koji izgleda kao veza, ali JE gumb — jer mijenja stanje i mora ici
   POST-om. Globalni stil za `button` daje pilulu i okvir, pa se ovdje
   NAMJERNO ponistava sve: bez toga je „Obrisite" izgledalo kao gumb pokraj
   „Uredite" koje je veza, i dva ista poteza izgledala su kao dvije vrste
   (vidjeno na snimci 116). */
/* `.account button` (klasa + element) pobjeduje nad golim `.linkish`, pa se
   ovdje mora imenovati oba mjesta — inace „Maknite s popisa" opet dobije okvir
   pilule i izgleda kao drugi rod poteza nego veza pokraj njega (snimka 119). */
.account .linkish, .addr-actions .linkish, .linkish {
  background: none; border: 0; border-radius: 0; box-shadow: none;
  padding: 0; margin: 0; min-height: 0; font: inherit; font-weight: 400;
  color: var(--green); text-decoration: underline; cursor: pointer;
}
.account .linkish:hover, .addr-actions .linkish:hover, .linkish:hover {
  background: none; border-color: transparent; color: var(--green);
}
.account .linkish.danger:hover, .linkish.danger:hover { color: var(--danger); }
.linkish.danger { color: var(--danger); }
.address-form { display: grid; gap: .4rem; max-width: 32rem; margin-top: .6rem; }
.address-form label { font-size: .88rem; font-weight: 600; }
.address-form input[type="text"], .address-form input[type="tel"] {
  font: inherit; padding: .55rem .65rem; border: 1px solid var(--line); border-radius: 10px;
}
.address-form small { color: var(--muted); }
.address-form .checkline { display: flex; align-items: center; gap: .45rem; font-weight: 400; }
.account .error { color: #A33; }

/* Adrese iz racuna na blagajni (6C.2). Izbor je OBICNA VEZA — blagajna mora
   raditi i bez skripte; `checkout.js` je samo pojacanje. */
.saved-addresses { display: flex; flex-wrap: wrap; gap: .4rem .6rem; align-items: baseline; margin-bottom: .4rem; }
.addr-pick {
  padding: .25rem .7rem; border: 1px solid var(--line); border-radius: 999px;
  font-size: .86rem; text-decoration: none; color: var(--ink);
}
.addr-pick:hover { border-color: var(--green); }
.addr-pick.is-on { background: var(--green); border-color: var(--green); color: #fff; }
.saved-hint a { color: var(--green); }

/* ── popis zelja (6C.3) ───────────────────────────────────
   Preseljen iz faze 7 na Damirov zahtjev (02.09.2026.), jer je dio racuna.
   Gumb VIDI I GOST — skriven ne bi rekao da mogucnost postoji; klik ga
   vodi na prijavu i vraca natrag. */
.wish-form { margin: .5rem 0 0; }
.wish-btn {
  background: none; border: 1px solid var(--line); border-radius: 999px;
  padding: .45rem 1rem; font: inherit; color: var(--ink); cursor: pointer;
}
.wish-btn:hover { border-color: var(--green); color: var(--green); }
.wish-btn.is-on { background: var(--glow); border-color: var(--glow); color: #12231C; font-weight: 600; }

.wish-list { list-style: none; margin: 0; padding: 0; display: grid; gap: .5rem; }
.wish {
  display: grid; grid-template-columns: 1fr auto auto; gap: .8rem; align-items: baseline;
  padding: .7rem .9rem; border: 1px solid var(--line); border-radius: 12px;
}
.wish-name { font-weight: 600; text-decoration: none; color: var(--ink); }
.wish-name:hover { color: var(--green); }
.wish-price { font-variant-numeric: tabular-nums; }
@media (max-width: 520px) {
  .wish { grid-template-columns: 1fr auto; }
  .wish form { grid-column: 1 / -1; }
}

/* ── racun: podaci i sigurnost (6C.4) ─────────────────────
   Tri odvojena obrasca: ime, lozinka, izvoz podataka. Namjerno NISU jedan —
   promjena imena ne smije moci dirati lozinku, a izvoz je potez za sebe. */
.settings form { display: grid; gap: .4rem; max-width: 32rem; margin: 0 0 1.6rem; }
.settings h2 { margin: 1.4rem 0 .3rem; font-size: 1.05rem; }
.settings label { font-size: .88rem; font-weight: 600; }
.settings input[type="text"], .settings input[type="password"] {
  font: inherit; padding: .55rem .65rem; border: 1px solid var(--line); border-radius: 10px;
}
.settings small { color: var(--muted); }
.settings button { justify-self: start; }

/* Rok narudzbe i „popunjeno" (Damir 19.10.2026.). Traka je ispod zaglavlja,
   na svakoj stranici shopa; ugasena se ne iscrtava (`SeasonBar`). Topli sjaj
   je boja upaljene kugle, pa traka pripada shopu, a ne vici. */
.season-bar {
  background: var(--glow);
  color: #12231C;
  text-align: center;
  padding: .55rem 1rem;
  font-size: .95rem;
  line-height: 1.4;
}
.season-bar p { margin: 0; max-width: var(--shell); margin-inline: auto; }

.schedule-note { margin: .65rem 0 0; font-size: .95rem; line-height: 1.45; }
/* U retku narudzbe (stranica s potpisom) redak ide preko cijelog grida, inace
   prvi stupac naraste na sirinu recenice i retci se razidu. */
.order-row.plain .schedule-note { grid-column: 1 / -1; margin-top: .25rem; }
.schedule-note.deadline { color: var(--green); font-weight: 600; }
.schedule-note.sold-out {
  color: var(--ink);
  border-left: 3px solid var(--gold);
  padding: .35rem 0 .35rem .7rem;
  background: var(--fill);
}