/* ============================================================================
* sn-overrides.css — JEDINI ručno pisan CSS sloj S-Nautica teme.
*
* Kaskada (partials/head.php): sn-fonts → sn-theme (kompajlirani Tailwind,
* NIKAD se ručno ne edituje) → cookieconsent → auth → flex-toast → OVAJ FAJL.
* Per-strana shop/tour/charter CSS se učitava kasnije, u — zato se
* `--sh-*` remap radi kroz `:root:root` (vidi §5).
*
* Sekcije 1-5 su redoslijed propisan planom E-tema-asseti.md §9 Faza 3.
* Sekcije 6-9 su dodate zato što su izmjerene kao stvarni regresi poslije
* reza; svaka nosi obrazloženje i uslov pod kojim se briše.
* 1. host `--c-*` tokeni (bloker B-9) <- BEZ OVOGA SHOP OSTAJE BEZ BOJA
* 2. `--sn-*` tokeni (S-Nautica paleta, imenovano)
* 3. body background / boja teksta
* 4. re-skin FlexCMS widgeta (cookie bar, toast, auth modal)
* 5. `--sh-*` remap površina (bijele kartice na tamnoj podlozi)
* 6. `.container` — layout primitiv koji je otišao sa theme-base.css
* 7. PRIVREMENI most za naslijeđeni header/footer markup
* 8. popravka PDP galerije (flexbox `min-width:auto` + Swiper)
* 9. čitljivost native kontrola na tamnoj podlozi
* 10. forma upita (katalog režim) — samo stanja greške, koja izvor nema
*
* Sve boje su doslovno iz `html/css/style.css` (kompajlirani Tailwind output);
* nijedna nije izmišljena. Referenca vrijednosti:
* ink #0A1722 - ink-soft #0E1E2C - accent #B08D57 - accent-dark #977639
* heading #F4F6F8 - body #AEB7C2 - silver #C3CBD3 - silver-dark #8A95A1
*
* Cache-busting: ručni `?v=` literal u tagu (plan §3 — nema helpera,
* nema build koraka). Bump PATCH pri svakoj izmjeni ovog fajla.
* ========================================================================== */
/* ============================================================================
* 1. HOST TOKENI (bloker B-9)
* ----------------------------------------------------------------------------
* `theme-base.css:11-33` je izašao iz load-a, a njegov `:root` blok je bio
* jedini izvor ovih 20 tokena. Shop CSS ih koristi na 286 mjesta BEZ fallback
* vrijednosti (provjereno programski nad fajlovima koji ostaju u load-u:
* shop-tokens/components/plp/pdp/cart/checkout/reviews). Bez ovog bloka
* shop nije "off-brand" — on je slomljen (crn tekst, oštri uglovi, bez sjenki).
*
* Imena su DOSLOVNO ista kao u theme-base.css; vrijednosti su S-Nautica.
* Vrijednosti su literalne (ne var(--sn-*)) namjerno — ovaj blok mora
* preživjeti i ako se sekcija 2 ikad razdvoji u zaseban fajl.
*
* 12 od 20 tokena se stvarno koristi bez fallbacka (--c-navy, --c-blue,
* --c-blue-d, --c-text, --c-muted, --c-border, --c-bg-soft, --radius-sm,
* --radius, --radius-lg, --shadow, --ease). Preostalih 8 se deklariše po
* odluci D4 — troše ih fajlovi koji izlaze iz load-a, ali set mora biti
* kompletan da ponovno uključivanje bilo kog fajla ne vrati AirJet boje.
* ========================================================================== */
:root {
/* --- površine ----------------------------------------------------- */
--c-navy: #0A1722; /* ink — bivše #0a1733 */
--c-navy-2: #0E1E2C; /* ink-soft — bivše #0e1c3d */
--c-bg: #0A1722; /* ink — bivše #ffffff */
--c-bg-soft: #0E1E2C; /* ink-soft — bivše #f1f4f9 */
--c-bg-cookie: #0E1E2C; /* ink-soft — bivše #1e5bd6 */
/* --- akcent -------------------------------------------------------
U shopu je `--c-blue` semantički "primarna akcija", ne boja. Mapira se
na S-Nautica mesing. `--c-blue-d` = rgb(151 118 57) postoji u izvornom
style.css (tamnija varijanta akcenta) — nije izmišljena. */
--c-blue: #B08D57; /* accent — bivše #2b5bd7 */
--c-blue-d: #977639; /* accent-dark — bivše #1f49b8 */
--c-accent: #B08D57; /* accent — bivše #3b82f6 */
/* --- tipografija --------------------------------------------------- */
--c-text: #F4F6F8; /* heading — bivše #0f172a */
--c-muted: #8A95A1; /* silver-dark — bivše #64748b */
/* --- linije --------------------------------------------------------
Izvor koristi border-white/10 i border-white/15 na tamnoj podlozi;
.12 je sredina tog raspona i jedini ekvivalent svijetlom #e3e7ee. */
--c-border: rgba(255, 255, 255, .12);
/* --- geometrija -----------------------------------------------------
Izvor nema imenovane radijus tokene (Tailwind ih peče u utility klase),
pa se AirJet vrijednosti zadržavaju kao funkcionalno ekvivalentne. */
--radius-sm: 8px;
--radius: 12px;
--radius-lg: 18px;
/* Sjenke: original je računat za bijelu podlogu (rgba(15,23,42,.06)) i na
tamnoj je nevidljiv. Prebačeno na crnu sa većom alfom — ista geometrija,
vidljivo na ink podlozi. */
--shadow-sm: 0 2px 6px rgba(0, 0, 0, .35);
--shadow: 0 8px 24px rgba(0, 0, 0, .45);
/* .wrap iz style.css: max-width:1340px; padding-left/right:1.25rem = 20px. */
--container: 1340px; /* bivše 1500px */
--pad: 20px;
--header-h: 80px;
/* cubic-bezier(.22,1,.36,1) postoji u izvornom style.css. */
--ease: cubic-bezier(.22, 1, .36, 1);
}
/* ============================================================================
* 2. `--sn-*` TOKENI — imenovana S-Nautica paleta
* ----------------------------------------------------------------------------
* Postoje da se ručno pisana pravila ispod (i budući šabloni) ne oslanjaju na
* `--c-*` imena koja su naslijeđena od AirJeta i semantički pogrešna
* ("blue" = mesing). sn-theme.css ih NE koristi — Tailwind je boje ispekao u
* literale — pa ovaj blok ne može ništa pregaziti.
* ========================================================================== */
:root {
--sn-ink: #0A1722; /* rgb(10 23 34) — pozadina sajta */
--sn-ink-soft: #0E1E2C; /* rgb(14 30 44) — sekcije/kartice */
--sn-accent: #B08D57; /* rgb(176 141 87) — mesing/zlato */
--sn-accent-dark: #977639; /* rgb(151 118 57) — tamnija varijanta */
--sn-heading: #F4F6F8; /* rgb(244 246 248) */
--sn-body: #AEB7C2; /* rgb(174 183 194) */
--sn-silver: #C3CBD3; /* rgb(195 203 211) */
--sn-silver-dark: #8A95A1; /* rgb(138 149 161) */
--sn-hairline: rgba(255, 255, 255, .10);
--sn-hairline-2: rgba(255, 255, 255, .15);
--sn-font-body: Inter, system-ui, sans-serif;
--sn-font-display: 'Cormorant Garamond', serif;
}
/* ============================================================================
* 3. BODY
* ----------------------------------------------------------------------------
* sn-theme.css već nosi `body{background-color:rgb(10 23 34/…);font-family:
* Inter…;color:rgb(174 183 194/…)}` — statički izvor to postiže klasom
* `bg-ink` na , a FlexCMS `$bodyClass` emituje samo kad je neprazan
* (default.php:68). Ovo je isti izraz kroz tokene, bez izmjene PHP-a
* (plan §6.3, opcija A) i bez oslanjanja na to da Tailwind base sloj ostane.
* ========================================================================== */
body {
background-color: var(--sn-ink);
color: var(--sn-body);
}
/* ============================================================================
* 4. RE-SKIN FLEXCMS WIDGETA
* ========================================================================== */
/* --- 4.1 Cookie bar (Orest Bida CookieConsent v3) -------------------------
* Vendor izlaže `--cc-*` custom property-je; postavljaju se na `#cc-main`
* (korijen widgeta) umjesto na `:root` da ne mogu iscuriti na ostatak sajta.
* Sva imena su provjerena u `:root` bloku cookieconsent.css. */
#cc-main {
--cc-bg: var(--sn-ink-soft);
--cc-primary-color: var(--sn-heading);
--cc-secondary-color: var(--sn-body);
--cc-btn-primary-bg: var(--sn-accent);
--cc-btn-primary-color: var(--sn-ink);
--cc-btn-primary-hover-bg: var(--sn-accent-dark);
--cc-btn-primary-hover-color: var(--sn-ink);
--cc-btn-secondary-bg: rgba(255, 255, 255, .08);
--cc-btn-secondary-hover-bg: rgba(255, 255, 255, .14);
--cc-btn-secondary-hover-color: var(--sn-heading);
--cc-btn-secondary-border-color: var(--sn-hairline-2);
--cc-btn-secondary-hover-border-color: var(--sn-hairline-2);
--cc-separator-border-color: var(--sn-hairline);
--cc-cookie-category-block-bg: rgba(255, 255, 255, .04);
--cc-cookie-category-block-border: var(--sn-hairline);
--cc-cookie-category-block-hover-bg: rgba(255, 255, 255, .07);
--cc-cookie-category-block-hover-border: var(--sn-hairline-2);
--cc-cookie-category-expanded-block-hover-bg: rgba(255, 255, 255, .07);
--cc-toggle-off-bg: var(--sn-silver-dark);
--cc-toggle-readonly-bg: rgba(255, 255, 255, .18);
--cc-toggle-readonly-knob-bg: var(--sn-ink-soft);
--cc-toggle-readonly-knob-icon-color: var(--sn-ink-soft);
--cc-footer-bg: var(--sn-ink);
--cc-footer-color: var(--sn-body);
--cc-footer-border-color: var(--sn-hairline);
--cc-overlay-bg: rgba(10, 23, 34, .72);
--cc-font-family: var(--sn-font-body);
}
/* --- 4.2 Flex Toast -------------------------------------------------------
* `border-left-color` se NE dira: `.flex-toast--success/--error/--warning/
* --info` ga postavljaju u flex-toast.css, koji je ranije u kaskadi — pa bi
* `border` ili `border-color` shorthand ovdje pojeo semantičku traku.
* Zato tri longhanda umjesto shorthanda. */
.flex-toast {
background: var(--sn-ink-soft);
color: var(--sn-heading);
border-top-color: var(--sn-hairline-2);
border-right-color: var(--sn-hairline-2);
border-bottom-color: var(--sn-hairline-2);
box-shadow: var(--shadow);
}
.flex-toast__msg { color: var(--sn-heading); }
.flex-toast__close { color: var(--sn-silver-dark); }
.flex-toast__close:hover { color: var(--sn-heading); }
/* --- 4.3 Auth modali ------------------------------------------------------
* ODSTUPANJE OD PLANA (§1.6.2), namjerno i provjereno:
* plan predlaže `.auth-modal-title{color:var(--sn-heading)}`, ali `.auth-modal`
* ima `background:var(--white,#fff)` (auth.css:279) i cijela unutrašnjost je
* hardkodovana za svijetlu podlogu (#333 labele, #888 hint, #adb5bd
* placeholder, #666 close/switch). Svijetao naslov na bijeloj kartici bio bi
* nevidljiv, a potpuni tamni re-skin traži prepisivanje auth.css — što je
* izvan opsega Faze 3 (§6.4 auth modale ionako vodi kao svjesno off-brand).
*
* Zato se ovdje mijenja SAMO ono što je brand-netačno a kontrastno bezbjedno:
* (a) zlatna paleta koju auth.css čita kroz `var(--gold*, …)` fallback-e
* -> S-Nautica mesing, (b) tipografija -> Inter + Cormorant za naslov.
* `members_enabled = 0` u flex_podesavanja, pa se ovaj markup danas i ne
* renderuje — blok je pripremljen za trenutak kad se članovi uključe. */
:root {
--gold: #B08D57;
--gold-dark: #977639;
--gold-gradient: linear-gradient(135deg, #C3A06A 0%, #B08D57 50%, #977639 100%);
--shadow-gold: 0 4px 20px rgba(176, 141, 87, .18);
--dark: #0A1722;
}
.auth-modal, .auth-modal * { font-family: var(--sn-font-body); }
.auth-modal-title {
font-family: var(--sn-font-display);
font-size: 32px;
font-weight: 500;
letter-spacing: 0;
}
/* ============================================================================
* 5. `--sh-*` REMAP — površine shopa
* ----------------------------------------------------------------------------
* shop-tokens.css se učitava PER-STRANU, iz (npr. shop/catalog/index.php
* :91), dakle POSLIJE ovog fajla. Njegov selektor je `:root` (specifičnost
* 0,1,0), pa bi obično `:root` ovdje izgubilo. `:root:root` (0,2,0) dobija.
*
* Remapiraju se samo tri tokena, i to iz nužde, ne iz estetike:
* --sh-surface #ffffff -> bijele kartice + `--c-text` (sad svijetao) = bijeli
* tekst na bijelom. Ovo je čitljivost, ne stil.
* --sh-overlay rgba(10,23,51,.55) -> AirJet navy scrim.
* --sh-focus #2b5bd7 -> doslovna AirJet brand plava u focus ringu.
* Semantičke boje (--sh-sale/-success/-warning/-danger/-star/-b2b i njihove
* `-bg` parice) se NE diraju — one su WCAG parovi i mijenjaju se tek kad se
* shop view-ovi prepišu (webshop plan).
* `--sh-surface-2` i `--sh-price` prate automatski (već su var(--c-bg-soft)
* odnosno var(--c-text)).
* ========================================================================== */
:root:root {
--sh-surface: var(--sn-ink-soft);
--sh-overlay: rgba(10, 23, 34, .72);
--sh-focus: var(--sn-accent);
}
/* ============================================================================
* 6. `.container` — layout primitiv koji je otišao sa theme-base.css
* ----------------------------------------------------------------------------
* `.container` NIJE stil, nego jedini horizontalni layout primitiv koji
* FlexCMS view-ovi koriste: `class="container"` se javlja u 64 view fajla
* (shop PLP/PDP/cart/checkout/home, tours, charter, pages, header, footer).
* Njegovo jedino pravilo je živjelo u `theme-base.css:63-68` — kad je taj fajl
* izašao iz load-a, cio sadržaj je pao uz ivicu viewporta.
*
* Geometrija je preslikana sa `.wrap` iz izvornog style.css (max-width:1340px;
* padding 1.25rem / 2rem ≥640px / 2.5rem ≥1024px) — dakle iz izvora, a ne
* AirJet varijanta (1500px + fiksnih 20px). Tako `.container` i buduci
* S-Nautica `.wrap` daju IDENTIČAN okvir, pa se strane mogu prevoditi jedna
* po jedna bez skoka širine.
* ========================================================================== */
.container {
width: 100%;
max-width: var(--container);
margin-left: auto;
margin-right: auto;
padding-left: 1.25rem;
padding-right: 1.25rem;
}
@media (min-width: 640px) {
.container { padding-left: 2rem; padding-right: 2rem; }
}
@media (min-width: 1024px) {
.container { padding-left: 2.5rem; padding-right: 2.5rem; }
}
/* ============================================================================
* 7. PRIVREMENI MOST ZA NASLIJEĐENI HEADER MARKUP
* ----------------------------------------------------------------------------
* !! OVAJ BLOK SE BRIŠE čim `partials/header.php` bude prepisan na S-Nautica
* markup. Ne dograđivati ga.
*
* Zašto postoji: theme-header.css (7 151 B) i theme-footer.css (2 720 B) su
* izašli iz load-a zajedno sa ostatkom AirJet teme (plan §1.5), ali PHP
* partiali još emituju AirJet markup (`.site-header`, `.header-inner`,
* `.main-nav`, `.hamburger`…). Bez ijednog pravila header postaje neuređen
* niz elemenata. Ovo NIJE dizajn — ovo je minimum da sajt ostane upotrebljiv
* između dvije faze: raspored + kontrast, ništa više.
*
* Selektori su isključivo legacy imena klasa kojih u S-Nautica markupu nema
* (izvor koristi `.header`, `.wrap`, `.nav-link`, `.mobile-menu`), pa kad se
* partiali prepišu ovaj blok prestane da se poklapa sam od sebe.
*
* FOOTER DIO JE OBRISAN (2026-08-01): `partials/footer.php` je prepisan na
* izvorni markup (`html/partials/footer.html`) i više ne emituje nijednu od
* `.site-footer` / `.footer-top` / `.footer-grid` / `.footer-side` /
* `.footer-bottom` / `.payments` / `.footer-legal` klasa — sva ta pravila su
* postala mrtva. Novi footer stilove uzima iz `sn-theme.css` (`.wrap`,
* `.overline`, `.footer-link`, `.social`, `.text-body-sm` + utility klase).
*
* Boje su isključivo iz palete gore. Nijedna vrijednost nije nova.
* ========================================================================== */
/* HEADER DIO JE OBRISAN (2026-08-01): `partials/header.php` je prepisan na
izvorni markup (`html/partials/header.html`) i više ne emituje nijednu od
`.site-header` / `.header-inner` / `.main-nav` / `.hamburger` / `.icon-btn` /
`.header-lang` / `.btn-sign-in` klasa — sva ta pravila su postala mrtva.
Nova traka stilove uzima iz `sn-theme.css` (`.header`, `.wrap`, `.nav-link`,
`.lang-btn`, `.tap-target`, `.skip-link` + utility klase), pa most za header
više ne postoji. */
/* Footer: nema ga više ovdje — v. napomenu u zaglavlju §7. */
/* ============================================================================
* 8. POPRAVKA: PDP galerija — flexbox `min-width:auto` + Swiper
* ----------------------------------------------------------------------------
* Simptom: na `/plovila//` je `` bio širok 40 120 px umjesto
* 1 265 px, galerija je gurala info kolonu van ekrana i pojavljivao se
* horizontalni scrollbar.
*
* Mehanizam (izmjereno u browseru, ne pretpostavljeno):
* `.sh-pdp__top{display:flex;flex-direction:row}` (shop-pdp.css:500-504)
* `.sh-pdp__gallery{flex:1 1 52%}` (:505-510) — flex stavka bez `min-width`,
* dakle `min-width:auto`. Automatski minimum je min-content sadržaja, a to
* je zbir intrinzičnih širina slajd-slika (1800 px svaka; `max-width:100%`
* se u intrinzičnom računu ignoriše jer je procenat). Swiper pri init-u
* pročita tu naduvanu `clientWidth` i UPIŠE je inline na svaki
* `.swiper-slide` (`style="width:9968px"`), čime se stanje zaključa.
*
* Ovo je latentan defekt u `shop-pdp.css`, ne u S-Nautica temi — ranije ga je
* maskirao `body{overflow-x:hidden}` iz `theme-base.css` (:53), koji je
* sakrivao scrollbar. Popravka je standardni flexbox lijek, jedna linija, i
* ostaje ovdje dok se ne prenese u sam `shop-pdp.css`.
*
* Provjereno poslije popravke: galerija 625 px, info 512 px,
* `document.documentElement.scrollWidth == clientWidth` (nema prelijevanja).
* ========================================================================== */
.sh-pdp__gallery,
.sh-pdp__info { min-width: 0; }
/* ============================================================================
* 9. ČITLJIVOST NA TAMNOJ PODLOZI — native kontrole i preostale bijele plohe
* ----------------------------------------------------------------------------
* Posljedica obrtanja palete (§1): `--c-text` je iz tamnog (#0f172a) postao
* svijetao (#F4F6F8). Svaka ploha koja je ostala bijela sad nosi svijetao
* tekst na bijelom = nečitljivo. Tri su izvora takvih ploha:
*
* (a) NATIVE kontrole bez ijednog CSS pravila za pozadinu (npr.
* `.sh-qty__input` — shop-pdp.css:314-323 i shop-cart.css:31-40 postavljaju
* sve osim `background`, pa vrijedi UA default = bijela). Rješava se
* `color-scheme: dark` na `:root`: to je standardni signal browseru da je
* dokument taman, pa UA sam prebojava inpute, `