/* =====================================================================
   stilovi.css — OSAM STILOVA javne stranice (p.html), listopad 2026.
   Pali se atributom <html data-stil="…"> (stilovi.js → primijeni()).
   Bez atributa stranica je zadani v2 izgled iz odmoria.css, piksel u piksel.

   Svaki stil:
   1) preslika tokene odmoria.css (boje, pisma, zaobljenja) — kontrast je
      izmjeren na vlastitoj podlozi stila (svi tekstovi ≥ 4,5:1);
   2) doda svoje ukrase (oblik zaglavlja, naslovi, kartice, kalendar…).
   Raspored, podaci i logika stranice su isti u svim stilovima.
   Imena, opisi i pisma: stilovi.js (jedan izvor).
   ===================================================================== */

/* ---------- zajedničko za svaki stil ---------- */
html[data-stil]{
  --scrim:linear-gradient(180deg,rgba(var(--stil-tint),0) 0%,rgba(var(--stil-tint),.3) 32%,rgba(var(--stil-tint),.7) 56%,rgba(var(--stil-tint),.9) 100%);
}
html[data-stil] .phead{background:color-mix(in srgb,var(--bg-page) 93%,transparent)}
html[data-stil] .btn{border-radius:var(--stil-r-btn)}
html[data-stil] .btn--primary{color:var(--stil-action-ink)}
html[data-stil] .btn--primary:hover{color:var(--stil-action-ink)}
html[data-stil] .btn--inverse{background:var(--bg-surface);color:var(--text)}
html[data-stil] .pricetag{background:rgba(var(--stil-tint),.78);border-radius:var(--stil-r-btn)}
html[data-stil] .gal__more{background:rgba(var(--stil-tint),.74)}
html[data-stil] .cday.taken,html[data-stil] .cday.taken:hover{background:var(--bg-wash)}
html[data-stil] .cday.range-start{color:var(--stil-action-ink)}
html[data-stil] .lb{background:rgb(var(--stil-tint))}
html[data-stil] .hero{background:var(--stil-hero) center/cover no-repeat}
html[data-stil] .hero.has-photo{background-color:rgb(var(--stil-tint))}
html[data-stil] .contact p{color:var(--stil-inverse-ink)}
/* naslov bloka za kontakt je na tamnoj plohi — ukrasi natpisa iz stila ovdje ne vrijede */
html[data-stil] .contact .eyebrow{color:var(--text-on-inverse-accent);background:none;padding:0;font-family:var(--font-body);font-size:12px;letter-spacing:.15em;text-transform:uppercase}
html[data-stil] .contact .eyebrow::before{content:none}
html[data-stil] .contact{color:var(--stil-inverse-ink)}
html[data-stil] .contact .btn--inverse{background:var(--bg-surface);color:var(--text)}
html[data-stil] .zv{color:var(--stil-zvijezda,#B07A0A)}
/* natpis mjesta na fotografiji zaglavlja: uvijek svijetao (stil ga smije dalje urediti) */
html[data-stil] .hero__copy .eyebrow{color:#fff}
html[data-stil] .hero__copy .eyebrow::before{content:none}
html[data-stil] .tmpl button[aria-pressed="true"],html[data-stil] .chip[aria-pressed="true"]{border-color:var(--action)}

/* =====================================================================
   1. PRIRODA — lan i maslina, organski oblici, pismo domaćina
   ===================================================================== */
html[data-stil="priroda"]{
  --bg-page:#F4F0E6;--bg-surface:#FBF8F1;--bg-wash:#E9E8D6;--bg-inverse:#33402A;--bg-warm:#F1E3C6;
  --text:#33402A;--text-muted:#5B5A44;--text-accent:#4E5C33;--text-warm:#6E5440;--text-on-inverse-accent:#D6DDBE;
  --action:#56653A;--action-hover:#465330;--action-pressed:#33402A;--border:#D8CCB2;--border-control:#8C8466;--focus:#33402A;
  --font-ui:Karla,system-ui,sans-serif;--font-body:Karla,system-ui,sans-serif;--font-editorial:"Cormorant Garamond",Georgia,serif;
  --radius-control:12px;--radius-panel:18px;--radius-feature:28px;
  --stil-r-btn:999px;--stil-action-ink:#FBF8F1;--stil-tint:40,48,30;--stil-inverse-ink:#FBF8F1;
  --stil-hero:linear-gradient(160deg,#B9C29E 0%,#7F8D5A 45%,#33402A 100%);
}
html[data-stil="priroda"] .t-ed,html[data-stil="priroda"] .hero__name,html[data-stil="priroda"] .phead__name{font-style:italic;font-weight:600}
html[data-stil="priroda"] .t-ed{font-size:clamp(36px,3.6vw,52px);line-height:1.02}
html[data-stil="priroda"] .eyebrow{color:var(--text-warm);letter-spacing:.18em}
/* zaglavlje kao organski oblik */
html[data-stil="priroda"] .hero{border-radius:46% 54% 42% 58% / 9% 10% 8% 9%}
html[data-stil="priroda"] .hero__name{font-size:clamp(56px,7vw,104px)}
/* riječ domaćina kao pismo na papiru */
html[data-stil="priroda"] .letter{background:var(--bg-surface);border:1px solid var(--border);border-radius:6px;padding:48px 52px;
  box-shadow:0 1px 0 var(--border),0 18px 40px rgba(51,64,42,.08);position:relative}
html[data-stil="priroda"] .letter::after{content:"";position:absolute;right:28px;top:-22px;width:64px;height:64px;opacity:.75;
  background:no-repeat center/contain url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 64 64' fill='none' stroke='%2356653A' stroke-width='1.6' stroke-linecap='round'%3E%3Cpath d='M8 56C24 40 36 26 58 8'/%3E%3Cpath d='M22 42c-6-2-10-8-9-14 6 1 10 6 9 14z'/%3E%3Cpath d='M32 32c-1-6 2-12 8-14 1 6-2 11-8 14z'/%3E%3Cpath d='M40 24c-6 0-11-4-12-10 6-1 11 3 12 10z'/%3E%3Cpath d='M46 18c0-6 4-10 10-11 0 6-4 10-10 11z'/%3E%3C/svg%3E")}
html[data-stil="priroda"] .letter__txt{font-style:italic;font-size:28px}
html[data-stil="priroda"] .letter__sig{font:italic 600 26px/1.2 var(--font-editorial);color:var(--action)}
html[data-stil="priroda"] .gal__i{border-radius:28px}
html[data-stil="priroda"] .gal > .gal__i:first-child{border-radius:180px 180px 28px 28px}
html[data-stil="priroda"] .lrow__ic,html[data-stil="priroda"] .oops__ic{background:#E5E8D6}
html[data-stil="priroda"] .summary,html[data-stil="priroda"] .ask{box-shadow:0 18px 40px rgba(51,64,42,.08)}
html[data-stil="priroda"] .sec--wash{background:#ECE7D8}
html[data-stil="priroda"] .rule b{font:italic 600 19px/1.4 var(--font-editorial)}

/* =====================================================================
   2. LUKSUZ — crno, bjelokost i zlato; tanke linije, puno zraka
   ===================================================================== */
html[data-stil="luksuz"]{
  color-scheme:dark;
  --bg-page:#0F0E0C;--bg-surface:#191714;--bg-wash:#221F1B;--bg-inverse:#191714;--bg-warm:#2A2418;
  --text:#F3EEE5;--text-muted:#B8AFA1;--text-accent:#D8BC85;--text-warm:#E3C98F;--text-on-inverse-accent:#D8BC85;
  --action:#C6A66B;--action-hover:#D8BC85;--action-pressed:#A88A52;--border:#3A352E;--border-control:#8A8072;--focus:#D8BC85;
  --font-ui:Jost,system-ui,sans-serif;--font-body:Jost,system-ui,sans-serif;--font-editorial:"Playfair Display",Georgia,serif;
  --radius-control:2px;--radius-panel:2px;--radius-feature:2px;
  --shadow-panel:none;--shadow-raised:0 10px 30px rgba(0,0,0,.5);
  --stil-r-btn:0;--stil-action-ink:#0F0E0C;--stil-tint:8,7,6;--stil-inverse-ink:#F3EEE5;--stil-zvijezda:#D8BC85;
  --stil-hero:linear-gradient(180deg,#2A2620 0%,#0F0E0C 100%);
}
html[data-stil="luksuz"] :focus-visible{outline-color:#D8BC85}
html[data-stil="luksuz"] .eyebrow{color:var(--text-accent);letter-spacing:.32em;font-weight:500}
html[data-stil="luksuz"] .t-ed{font-weight:400;letter-spacing:.005em}
html[data-stil="luksuz"] .hero__name{font-weight:400;letter-spacing:.01em}
html[data-stil="luksuz"] .hero{border:1px solid rgba(198,166,107,.45)}
html[data-stil="luksuz"] .hero::before{content:"";position:absolute;inset:14px;border:1px solid rgba(216,188,133,.55);z-index:1;pointer-events:none}
html[data-stil="luksuz"] .btn{text-transform:uppercase;letter-spacing:.16em;font-weight:500;font-size:14px}
html[data-stil="luksuz"] .btn--secondary{background:transparent;border-color:#C6A66B;color:#F3EEE5}
html[data-stil="luksuz"] .btn--secondary:hover{background:#221F1B}
html[data-stil="luksuz"] .btn--inverse{background:transparent;color:#F3EEE5;border-color:#C6A66B}
html[data-stil="luksuz"] .card,html[data-stil="luksuz"] .summary,html[data-stil="luksuz"] .ask,html[data-stil="luksuz"] .calcard,
html[data-stil="luksuz"] .rev__i{border-color:#4A4339}
html[data-stil="luksuz"] .summary,html[data-stil="luksuz"] .ask{border-top:2px solid #C6A66B}
html[data-stil="luksuz"] .contact{border:1px solid #4A4339;border-top:2px solid #C6A66B}
html[data-stil="luksuz"] .letter__txt{font-style:italic}
html[data-stil="luksuz"] .letter{border-left:1px solid #C6A66B;padding-left:36px}
html[data-stil="luksuz"] .fact .ic,html[data-stil="luksuz"] .amen .ic{color:#D8BC85}
html[data-stil="luksuz"] .lrow__ic{background:transparent;border:1px solid #C6A66B;color:#D8BC85}
html[data-stil="luksuz"] .iconbtn,html[data-stil="luksuz"] .stepper button,html[data-stil="luksuz"] .tmpl button,
html[data-stil="luksuz"] .chip,html[data-stil="luksuz"] .fld input,html[data-stil="luksuz"] .jezik{background-color:#191714;color:#F3EEE5}
html[data-stil="luksuz"] .jezik{background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23D8BC85' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E")}
html[data-stil="luksuz"] .map{filter:grayscale(.35) contrast(.95)}
html[data-stil="luksuz"] .dock{box-shadow:0 -8px 24px rgba(0,0,0,.5)}
html[data-stil="luksuz"] .toast{background:#C6A66B;color:#0F0E0C}

/* =====================================================================
   3. SUNCE I MORE — tirkiz, pijesak, koralj; valovi i polaroidi
   ===================================================================== */
html[data-stil="more"]{
  --bg-page:#FFF6E3;--bg-surface:#FFFFFF;--bg-wash:#D4F2F6;--bg-inverse:#0B4F6C;--bg-warm:#FFE0D6;
  --text:#0B3A4E;--text-muted:#3D6070;--text-accent:#0B4F6C;--text-warm:#8A2A14;--text-on-inverse-accent:#9BE3EC;
  --action:#C93F22;--action-hover:#A9341B;--action-pressed:#8A2A14;--border:#F0DFBA;--border-control:#7C8F94;--focus:#0B3A4E;
  --font-ui:Fredoka,system-ui,sans-serif;--font-body:Nunito,system-ui,sans-serif;--font-editorial:Fredoka,system-ui,sans-serif;
  --radius-control:14px;--radius-panel:18px;--radius-feature:24px;
  --stil-r-btn:999px;--stil-action-ink:#FFFFFF;--stil-tint:11,58,78;--stil-inverse-ink:#FFFFFF;
  --stil-hero:linear-gradient(180deg,#9BE3EC 0%,#1FB5C9 45%,#0B4F6C 100%);
}
html[data-stil="more"] .t-ed,html[data-stil="more"] .hero__name,html[data-stil="more"] .phead__name{font-weight:600;letter-spacing:-.01em}
html[data-stil="more"] .eyebrow{color:#0B4F6C;background:#D4F2F6;padding:5px 12px;border-radius:999px;justify-self:start;width:fit-content}
html[data-stil="more"] .hero__copy .eyebrow{background:#FFC93C;color:#0B3A4E}
/* val ispod zaglavlja */
html[data-stil="more"] .hero{padding-bottom:84px}
html[data-stil="more"] .hero::before{content:"";position:absolute;left:0;right:0;bottom:-1px;height:46px;z-index:2;pointer-events:none;
  background:no-repeat bottom/100% 100% url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1200 46' preserveAspectRatio='none'%3E%3Cpath d='M0 22c100-26 200 26 300 0s200-26 300 0 200 26 300 0 200-26 300 0v24H0z' fill='%23FFF6E3'/%3E%3C/svg%3E")}
/* sunce */
html[data-stil="more"] .hero::after{background:radial-gradient(circle at 86% 18%,rgba(255,201,60,.55) 0 70px,transparent 72px),var(--scrim)}
/* galerija kao polaroidi */
html[data-stil="more"] .gal__i{background:#fff;padding:10px 10px 34px;box-shadow:0 10px 24px rgba(11,58,78,.14);border-radius:6px}
html[data-stil="more"] .gal__i img{position:absolute;inset:10px 10px 34px;width:calc(100% - 20px);height:calc(100% - 44px);border-radius:3px}
html[data-stil="more"] .gal > .gal__i:first-child{transform:rotate(-1.2deg)}
html[data-stil="more"] .gal__pair > .gal__i:nth-child(2){transform:rotate(1.4deg)}
html[data-stil="more"] .lrow__ic{background:#FFF0C2;color:#8A2A14}
html[data-stil="more"] .fact .ic{color:#C93F22}
html[data-stil="more"] .summary,html[data-stil="more"] .ask{border:2px solid #1FB5C9;box-shadow:6px 6px 0 #1FB5C9}
html[data-stil="more"] .cday.range-start{background:#C93F22;border-color:#C93F22}
html[data-stil="more"] .contact{background:#0B4F6C;background-image:radial-gradient(circle at 90% 20%,rgba(255,201,60,.35) 0 60px,transparent 62px)}

/* =====================================================================
   4. MODERNO — beton i crna, narančasti naglasak, numerirani blokovi
   ===================================================================== */
html[data-stil="moderno"]{
  --bg-page:#F4F3F1;--bg-surface:#FFFFFF;--bg-wash:#E9E7E3;--bg-inverse:#141414;--bg-warm:#FBE3D6;
  --text:#141414;--text-muted:#5C5A57;--text-accent:#B23A0A;--text-warm:#8A2D08;--text-on-inverse-accent:#FFB088;
  --action:#141414;--action-hover:#2E2E2E;--action-pressed:#000;--border:#D9D6D1;--border-control:#7A7772;--focus:#B23A0A;
  --font-ui:Urbanist,system-ui,sans-serif;--font-body:"Instrument Sans",system-ui,sans-serif;--font-editorial:Urbanist,system-ui,sans-serif;
  --radius-control:0px;--radius-panel:0px;--radius-feature:0px;
  --shadow-panel:none;
  --stil-r-btn:0;--stil-action-ink:#FFFFFF;--stil-tint:20,20,20;--stil-inverse-ink:#FFFFFF;
  --stil-hero:linear-gradient(135deg,#D9D6D1 0%,#8E8B86 50%,#141414 100%);
  counter-reset:blok;
}
html[data-stil="moderno"] .t-ed,html[data-stil="moderno"] .hero__name,html[data-stil="moderno"] .phead__name{font-weight:800;letter-spacing:-.035em}
html[data-stil="moderno"] .hero__name{text-transform:uppercase;font-size:clamp(48px,6.4vw,96px);line-height:.92}
/* (01)–(08): broj ispred svakog naslova odjeljka */
html[data-stil="moderno"] main .eyebrow{color:var(--text-muted)}
html[data-stil="moderno"] main .sec .eyebrow::before{counter-increment:blok;content:"(" counter(blok,decimal-leading-zero) ")  ";color:var(--text-accent);letter-spacing:.06em}
html[data-stil="moderno"] .sec{border-top:2px solid #141414}
html[data-stil="moderno"] .sec--tight{border-top:0}
html[data-stil="moderno"] .card,html[data-stil="moderno"] .summary,html[data-stil="moderno"] .ask,html[data-stil="moderno"] .calcard{border:2px solid #141414}
html[data-stil="moderno"] .btn--primary:hover{background:#B23A0A;box-shadow:none}
html[data-stil="moderno"] .btn--secondary{border:2px solid #141414}
html[data-stil="moderno"] .hero{border-bottom:10px solid #C2410C}
html[data-stil="moderno"] .facts{border-bottom:2px solid #141414}
html[data-stil="moderno"] .fact{border-left:2px solid #141414;padding-left:14px}
html[data-stil="moderno"] .fact .ic{color:#B23A0A}
html[data-stil="moderno"] .lrow__ic{border-radius:0;background:#141414;color:#fff}
html[data-stil="moderno"] .cday.range-start{background:#C2410C;border-color:#C2410C}
html[data-stil="moderno"] .letter__txt{font:500 26px/1.45 var(--font-body)}
html[data-stil="moderno"] .gal{gap:4px}
html[data-stil="moderno"] .gal__pair{gap:4px}

/* =====================================================================
   5. GRAD — gradska signalizacija: crno i žuto, ploča ulice, vozni red
   ===================================================================== */
html[data-stil="grad"]{
  --bg-page:#F7F7F2;--bg-surface:#FFFFFF;--bg-wash:#FFF3BF;--bg-inverse:#111111;--bg-warm:#FFE58A;
  --text:#111111;--text-muted:#565650;--text-accent:#111111;--text-warm:#3D3000;--text-on-inverse-accent:#FFD23F;
  --action:#111111;--action-hover:#2B2B2B;--action-pressed:#000;--border:#DADAD2;--border-control:#6E6E66;--focus:#2B59C3;
  --font-ui:"Space Grotesk",system-ui,sans-serif;--font-body:"Space Grotesk",system-ui,sans-serif;--font-editorial:"Space Grotesk",system-ui,sans-serif;
  --radius-control:4px;--radius-panel:4px;--radius-feature:6px;
  --stil-r-btn:4px;--stil-action-ink:#FFD23F;--stil-tint:17,17,17;--stil-inverse-ink:#FFFFFF;
  --stil-hero:linear-gradient(180deg,#3A3A3A 0%,#111111 100%);
}
html[data-stil="grad"] .t-ed{font-weight:700;letter-spacing:-.03em}
html[data-stil="grad"] .eyebrow,html[data-stil="grad"] .rule b,html[data-stil="grad"] .summary__price,html[data-stil="grad"] .t-meta{font-family:"JetBrains Mono",ui-monospace,monospace}
html[data-stil="grad"] .eyebrow{background:#111;color:#FFD23F;padding:4px 10px;border-radius:3px;width:fit-content;letter-spacing:.12em}
/* ime kao ploča ulice */
html[data-stil="grad"] .phead__name{font-weight:700;background:#FFD23F;color:#111;padding:4px 12px;border:3px solid #111;border-radius:6px;width:fit-content;max-width:100%}
html[data-stil="grad"] .hero__name{display:inline-block;width:fit-content;background:#FFD23F;color:#111;font-weight:700;letter-spacing:-.03em;
  padding:.08em .32em .14em;border:4px solid #111;border-radius:10px;box-shadow:0 0 0 4px #FFD23F}
html[data-stil="grad"] .hero__copy .eyebrow{background:#FFD23F;color:#111}
/* cijena kao zaslon voznog reda */
html[data-stil="grad"] .pricetag{font-family:"JetBrains Mono",ui-monospace,monospace;background:#111;color:#FFD23F;border:2px solid #FFD23F;letter-spacing:.04em}
html[data-stil="grad"] .summary__price{background:#111;color:#FFD23F;padding:14px 16px;border-radius:4px;font-size:22px}
html[data-stil="grad"] .summary,html[data-stil="grad"] .ask,html[data-stil="grad"] .calcard{border:2px solid #111;box-shadow:none}
/* okolica kao linije podzemne: obojene oznake linija */
html[data-stil="grad"] .lrow{border-bottom:2px solid #111;position:relative}
html[data-stil="grad"] .lrow__ic{background:#2B59C3;color:#fff;border-radius:50%}
html[data-stil="grad"] .lrow:nth-child(4n+2) .lrow__ic{background:#C8371A}
html[data-stil="grad"] .lrow:nth-child(4n+3) .lrow__ic{background:#1E7F3A}
html[data-stil="grad"] .lrow:nth-child(4n+4) .lrow__ic{background:#111;color:#FFD23F}
html[data-stil="grad"] .fact .ic{color:#111;background:#FFD23F;border-radius:50%;padding:6px;width:34px;height:34px}
html[data-stil="grad"] .facts{border-bottom:2px solid #111}
html[data-stil="grad"] .cday.range-start{background:#FFD23F;border-color:#111;color:#111}
html[data-stil="grad"] .cday.today{border:2px solid #2B59C3}
html[data-stil="grad"] .phead{border-bottom:4px solid #FFD23F}
html[data-stil="grad"] .contact{background:#111;border-left:12px solid #FFD23F}

/* =====================================================================
   6. SNIJEG — alpska kuća: ledeno plava, borova zelena, staklo
   ===================================================================== */
html[data-stil="snijeg"]{
  --bg-page:#F6F9FB;--bg-surface:#FFFFFF;--bg-wash:#DDEBF3;--bg-inverse:#23463A;--bg-warm:#F8E3D9;
  --text:#1B3A4E;--text-muted:#4A6575;--text-accent:#2B5A76;--text-warm:#8E3A1E;--text-on-inverse-accent:#CFE8DD;
  --action:#23463A;--action-hover:#1A372D;--action-pressed:#122820;--border:#D3E2EB;--border-control:#6F8A99;--focus:#1B3A4E;
  --font-ui:"Josefin Sans",system-ui,sans-serif;--font-body:Figtree,system-ui,sans-serif;--font-editorial:"Josefin Sans",system-ui,sans-serif;
  --radius-control:12px;--radius-panel:16px;--radius-feature:22px;
  --stil-r-btn:12px;--stil-action-ink:#FFFFFF;--stil-tint:20,44,60;--stil-inverse-ink:#FFFFFF;
  --stil-hero:linear-gradient(180deg,#DDEBF3 0%,#9DBBCD 40%,#2B5A76 75%,#1B3A4E 100%);
}
html[data-stil="snijeg"] .t-ed,html[data-stil="snijeg"] .hero__name,html[data-stil="snijeg"] .phead__name{font-weight:600;letter-spacing:.01em}
html[data-stil="snijeg"] .t-ed{text-transform:uppercase;font-size:clamp(26px,2.6vw,36px);letter-spacing:.06em}
html[data-stil="snijeg"] .hero__name{text-transform:uppercase;letter-spacing:.04em}
/* planine na dnu zaglavlja */
html[data-stil="snijeg"] .hero{padding-bottom:96px}
html[data-stil="snijeg"] .hero::before{content:"";position:absolute;left:0;right:0;bottom:-1px;height:90px;z-index:2;pointer-events:none;
  background:no-repeat bottom/100% 100% url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1200 90' preserveAspectRatio='none'%3E%3Cpath d='M0 90V60l120-40 90 30 140-50 120 55 110-35 160 45 130-50 120 40 110-20 100 25v30z' fill='%23F6F9FB' opacity='.55'/%3E%3Cpath d='M0 90V72l160-30 110 26 150-40 140 44 120-24 170 32 140-36 210 40v6z' fill='%23F6F9FB'/%3E%3C/svg%3E")}
/* staklene kartice */
html[data-stil="snijeg"] .summary,html[data-stil="snijeg"] .ask,html[data-stil="snijeg"] .calcard{
  background:rgba(255,255,255,.72);backdrop-filter:blur(14px) saturate(1.3);-webkit-backdrop-filter:blur(14px) saturate(1.3);
  border:1px solid rgba(255,255,255,.9);box-shadow:0 18px 44px rgba(27,58,78,.12),inset 0 1px 0 #fff}
html[data-stil="snijeg"] body{background:radial-gradient(circle at 12% 6%,#E8F1F7 0,transparent 40%),radial-gradient(circle at 88% 40%,#EAF2F7 0,transparent 36%),#F6F9FB}
html[data-stil="snijeg"] .lrow__ic{background:#DDEBF3;color:#23463A}
html[data-stil="snijeg"] .eyebrow{color:#23463A}
html[data-stil="snijeg"] .eyebrow::before{content:"❄ ";color:#2B5A76}
html[data-stil="snijeg"] .contact{background:linear-gradient(135deg,#23463A,#1B3A4E)}

/* =====================================================================
   7. RELAX — spa: pijesak, kamen i eukaliptus, puno mira
   ===================================================================== */
html[data-stil="relax"]{
  --bg-page:#F1ECE4;--bg-surface:#FBF9F6;--bg-wash:#DCE5DF;--bg-inverse:#4A675B;--bg-warm:#EADFD1;
  --text:#3B3833;--text-muted:#625C54;--text-accent:#4A675B;--text-warm:#6A4F3E;--text-on-inverse-accent:#DCE5DF;
  --action:#4A675B;--action-hover:#3D564B;--action-pressed:#30453C;--border:#DCD3C6;--border-control:#8C8377;--focus:#3B3833;
  --font-ui:"Albert Sans",system-ui,sans-serif;--font-body:"Albert Sans",system-ui,sans-serif;--font-editorial:Marcellus,Georgia,serif;
  --radius-control:16px;--radius-panel:24px;--radius-feature:32px;
  --shadow-panel:0 20px 50px rgba(59,56,51,.07);
  --stil-r-btn:999px;--stil-action-ink:#FFFFFF;--stil-tint:59,56,51;--stil-inverse-ink:#FFFFFF;
  --stil-hero:linear-gradient(180deg,#DCD3C6 0%,#A8B5A6 50%,#4A675B 100%);
}
html[data-stil="relax"] body{font-weight:400}
html[data-stil="relax"] .t-ed,html[data-stil="relax"] .hero__name,html[data-stil="relax"] .phead__name{font-weight:400;letter-spacing:.01em}
html[data-stil="relax"] .eyebrow{color:#4A675B;letter-spacing:.3em;font-weight:500}
/* zaglavlje kao luk, krugovi mira */
html[data-stil="relax"] .hero{border-radius:280px 280px 32px 32px;min-height:660px;justify-content:center;text-align:center;flex-direction:column;align-items:center}
html[data-stil="relax"] .hero__copy{justify-items:center}
html[data-stil="relax"] .hero__act{justify-items:center}
html[data-stil="relax"] .hero::before{content:"";position:absolute;left:50%;top:44%;width:520px;height:520px;transform:translate(-50%,-50%);border-radius:50%;z-index:1;pointer-events:none;
  box-shadow:0 0 0 1px rgba(255,255,255,.35),0 0 0 60px rgba(255,255,255,.06),0 0 0 61px rgba(255,255,255,.28),0 0 0 120px rgba(255,255,255,.04),0 0 0 121px rgba(255,255,255,.2)}
html[data-stil="relax"] .gal__i{border-radius:32px}
html[data-stil="relax"] .gal > .gal__i:first-child{border-radius:999px 999px 32px 32px}
html[data-stil="relax"] .letter{text-align:center;justify-items:center;margin-inline:auto}
html[data-stil="relax"] .letter__txt{font-size:27px;line-height:1.6}
html[data-stil="relax"] .lrow__ic{background:#DCE5DF;color:#4A675B}
html[data-stil="relax"] .sec{padding-block:96px}
html[data-stil="relax"] .summary,html[data-stil="relax"] .ask,html[data-stil="relax"] .calcard{border-color:transparent}

/* =====================================================================
   8. SEOSKA KUĆA — kockasti stolnjak, drvena ploča, školska ploča
   ===================================================================== */
html[data-stil="seoska"]{
  --bg-page:#F7F1E3;--bg-surface:#FFFCF4;--bg-wash:#EFE4CC;--bg-inverse:#2F3F2A;--bg-warm:#F2DDB6;
  --text:#2E2219;--text-muted:#665646;--text-accent:#9E2B25;--text-warm:#6B4423;--text-on-inverse-accent:#E9DFC4;
  --action:#9E2B25;--action-hover:#82221D;--action-pressed:#661A16;--border:#DCCBAA;--border-control:#8C7860;--focus:#2E2219;
  --font-ui:"Zilla Slab",Georgia,serif;--font-body:"Source Serif 4",Georgia,serif;--font-editorial:"Zilla Slab",Georgia,serif;
  --radius-control:6px;--radius-panel:8px;--radius-feature:10px;
  --stil-r-btn:6px;--stil-action-ink:#FFFFFF;--stil-tint:46,34,25;--stil-inverse-ink:#F7F1E3;
  --stil-hero:linear-gradient(180deg,#C8A27A 0%,#8A5A33 55%,#4A2E17 100%);
}
html[data-stil="seoska"] .t-ed,html[data-stil="seoska"] .hero__name,html[data-stil="seoska"] .phead__name{font-weight:700}
/* kockasti stolnjak ispod trake */
html[data-stil="seoska"] .phead{border-bottom:0}
html[data-stil="seoska"] .phead::after{content:"";position:absolute;left:0;right:0;bottom:-10px;height:10px;
  background:repeating-conic-gradient(#9E2B25 0 25%,#FFFCF4 0 50%) 0 0/20px 20px;opacity:.9}
/* ime na drvenoj ploči */
html[data-stil="seoska"] .hero__name{display:inline-block;width:fit-content;padding:.12em .45em .18em;color:#FFF6E2;border-radius:8px;
  background:repeating-linear-gradient(90deg,rgba(0,0,0,.06) 0 2px,transparent 2px 9px),linear-gradient(180deg,#8A5A33,#6B4423);
  box-shadow:0 8px 0 #4A2E17,0 14px 24px rgba(0,0,0,.35);text-shadow:0 2px 0 rgba(0,0,0,.35)}
html[data-stil="seoska"] .eyebrow{font-family:Caveat,cursive;font-size:22px;letter-spacing:0;text-transform:none;font-weight:600;color:#9E2B25}
html[data-stil="seoska"] .hero__copy .eyebrow{color:#FFF6E2}
/* riječ domaćina na školskoj ploči */
html[data-stil="seoska"] .letter{background:#2F3F2A;color:#F2EEDF;padding:44px 48px;border-radius:6px;border:12px solid #8A5A33;
  box-shadow:inset 0 0 60px rgba(0,0,0,.35),0 12px 30px rgba(46,34,25,.25)}
html[data-stil="seoska"] .letter .eyebrow{color:#F2DDB6}
html[data-stil="seoska"] .letter__txt{font:500 30px/1.4 Caveat,cursive;color:#F7F4EA}
html[data-stil="seoska"] .letter__sig{font:600 26px/1.2 Caveat,cursive;color:#F2DDB6}
/* galerija na plutu */
html[data-stil="seoska"] #gal-sec .gal{padding:18px;border-radius:8px;border:10px solid #8A5A33;
  background:#C9A06A radial-gradient(rgba(107,68,35,.35) 1px,transparent 1.5px) 0 0/9px 9px}
html[data-stil="seoska"] .gal__i{border:6px solid #FFFCF4;border-radius:2px;box-shadow:0 6px 12px rgba(46,34,25,.3)}
/* upit kao pismo s markom */
html[data-stil="seoska"] .ask{background:#FFFCF4 repeating-linear-gradient(180deg,transparent 0 31px,rgba(158,43,37,.08) 31px 32px);position:relative;border:1px solid #DCCBAA}
html[data-stil="seoska"] .ask::after{content:"";position:absolute;top:16px;right:16px;width:46px;height:56px;border:3px dotted #9E2B25;border-radius:3px;transform:rotate(6deg);
  background:#F2DDB6 no-repeat center/26px url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%239E2B25' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3 10.5 12 3l9 7.5V21H3z'/%3E%3Cpath d='M9 21v-6h6v6'/%3E%3C/svg%3E")}
html[data-stil="seoska"] .ask__title{padding-right:64px}
html[data-stil="seoska"] .lrow__ic{background:#F2DDB6;color:#6B4423;border-radius:6px}
html[data-stil="seoska"] .rev__i{background:#FFFCF4;border-left:4px solid #9E2B25}
html[data-stil="seoska"] .rev__i p{font-family:Caveat,cursive;font-size:22px;line-height:1.35}
html[data-stil="seoska"] .contact{background:#2F3F2A}

/* ---------- mobitel ---------- */
@media (max-width:760px){
  html[data-stil="priroda"] .hero{border-radius:0 0 46% 54% / 0 0 6% 6%}
  html[data-stil="priroda"] .letter{padding:32px 24px}
  html[data-stil="relax"] .hero{border-radius:0 0 32px 32px;min-height:460px}
  html[data-stil="relax"] .hero::before{width:300px;height:300px}
  html[data-stil="luksuz"] .hero::before{inset:8px}
  html[data-stil="seoska"] .letter{padding:28px 22px;border-width:8px}
  html[data-stil="seoska"] .letter__txt{font-size:25px}
  html[data-stil="seoska"] #gal-sec .gal{padding:10px;border-width:6px}
  html[data-stil="grad"] .hero__name{border-width:3px;box-shadow:0 0 0 3px #FFD23F}
  html[data-stil="more"] .hero{padding-bottom:64px}
  html[data-stil="luksuz"] .btn{letter-spacing:.08em;font-size:12.5px}
  html[data-stil="luksuz"] .hero__act .btn{padding:0 12px}
  html[data-stil="snijeg"] .hero{padding-bottom:70px}
}