/* ==========================================================================
   Stranice od ugrađenih blokova – raspored Senadovog prijedloga naslovnice,
   boje i fontovi po branding booku (nacrt v0.1, usvojeno na naslovnici 19.10.2026):
   krem/pijesak osnova, ponoć, Amman espresso, Sultan mat zlato; Marcellus + Montserrat.
   Isti fajl se učitava i u editoru blokova, da izgled u adminu bude isti.
   ========================================================================== */

:root{
  /* Paleta (ista kao u glavni.css i theme.json) */
  --ponoc:#1C1916; --krem:#FAF7F2; --pijesak:#F1EBE1; --linija:#E2D9CC; --taupe:#6F665D;
  --espresso:#4A3426; --orah:#8B6A50; --zlato:#B8955A; --zlato-tekst:#7A5E30; --zlato-svijetlo:#EDE6DA;
  --zvjezdice:#F2C14E; /* ocjene (zvjezdice) – blizu Google žute, samo za ocjene */
  /* Fontovi: veliki naslovi Marcellus, sve ostalo Montserrat */
  --f-naslov:Marcellus,Georgia,serif; --f-tekst:Montserrat,system-ui,sans-serif;
  /* Ikone (maska, boja = boja teksta) */
  --ik-sat:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.4'%3E%3Ccircle cx='12' cy='12' r='9'/%3E%3Cpath d='M12 7v5l3 3'/%3E%3C/svg%3E");
  --ik-poklon:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.2'%3E%3Crect x='3' y='8' width='18' height='5'/%3E%3Cpath d='M5 13v8h14v-8M12 8v13M12 8C10 4 6 4 6 7s6 1 6 1zM12 8c2-4 6-4 6-1s-6 1-6 1z'/%3E%3C/svg%3E");
  --ik-info:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill-rule='evenodd' d='M12 2a10 10 0 1 0 0 20 10 10 0 1 0 0-20zM10.8 10h2.4v7.5h-2.4zM10.8 6h2.4v2.4h-2.4z'/%3E%3C/svg%3E");
  --ik-korpa:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M2 3h3l1 3h15l-1.6 9H7.5z'/%3E%3Ccircle cx='9' cy='20' r='1.8'/%3E%3Ccircle cx='18' cy='20' r='1.8'/%3E%3C/svg%3E");
  --ik-kvacica:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='3.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 12.5l5 5L20 6.5'/%3E%3C/svg%3E");
  --ik-lokacija:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M21 3 3 10.5l7.5 2.5L13 21z'/%3E%3C/svg%3E");
  --ik-telefon:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M5 2.5h4l2 5-2.5 1.6a11 11 0 0 0 6.4 6.4L16.5 13l5 2v4a2.2 2.2 0 0 1-2.3 2.2A17.5 17.5 0 0 1 2.8 4.8 2.2 2.2 0 0 1 5 2.5z'/%3E%3C/svg%3E");
  --ik-sat-tanki:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2'%3E%3Ccircle cx='12' cy='12' r='9'/%3E%3Cpath d='M12 7v5l3 2'/%3E%3C/svg%3E");
  /* Hover i tekst na tamnoj podlozi (izvedeno iz palete; audit P25) */
  --espresso-hover:#3A281D; --zlato-hover:#C9A86E; --tekst-na-tamnom:#D7CFC4; --tekst-na-tamnom-2:#BDB3A6; --tekst-na-tamnom-3:#A99F92;
}

/* --- Osnova stranice ------------------------------------------------------ */
body.sp-blokovi{background:var(--krem)}
.sp-blokovi__sadrzaj{font:400 16px/1.7 var(--f-tekst);color:var(--taupe)}
.sp-blokovi__sadrzaj > *{margin-block:0}
.sp-blokovi__sadrzaj a{color:var(--zlato-tekst)}

/* --- Prozirna traka (meni + korpa), fiksna iznad sadržaja ----------------- */
.sp-traka{position:fixed;top:0;left:0;right:0;z-index:60;display:flex;align-items:center;justify-content:space-between;padding:20px;pointer-events:none;transition:background-color .3s,padding .3s}
/* Nakon skrolanja traka dobija tamnu podlogu, da se meni i korpa vide i na svijetlim sekcijama */
.sp-traka.je-skrolano{background:rgba(28,25,22,.88);padding-top:10px;padding-bottom:10px}
.admin-bar .sp-traka{top:32px}
.sp-traka > *{pointer-events:auto}
.sp-traka__meni.zaglavlje__meni-dugme{display:flex;width:44px;height:40px;padding:8px 4px}
.sp-traka__meni span{background:#fff;height:3px;border-radius:2px}
.sp-traka__sredina{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);display:flex;align-items:center;gap:12px;max-width:calc(100% - 150px);color:#fff;text-decoration:none;white-space:nowrap}
.sp-traka__sredina .logo{flex:0 0 auto;height:24px;width:auto;color:var(--zlato-svijetlo)}
.sp-traka__tekst{font:400 16px/1 var(--f-naslov);letter-spacing:.14em;text-transform:uppercase;overflow:hidden;text-overflow:ellipsis}
.sp-traka__sredina:hover,.sp-traka__sredina:focus-visible{color:var(--zlato-svijetlo)}
.sp-traka__korpa{position:relative;display:flex;width:30px;height:30px;margin-right:18px;color:#fff}
.sp-traka__korpa svg{width:100%;height:100%;fill:currentColor}
.sp-traka__broj{position:absolute;top:-6px;right:-8px;min-width:18px;height:18px;padding:0 4px;border-radius:9px;background:var(--zlato);color:var(--ponoc);font:700 10px/18px var(--f-tekst);text-align:center}
/* Meni (hamburger): mirno klizanje slijeva uz blago zatamnjenje pozadine; stavke se pojavljuju jedna za drugom */
.sp-traka__panel{position:fixed;top:0;bottom:0;left:0;width:min(340px,86vw);padding:80px 28px 32px;background:var(--ponoc);overflow-y:auto;
  transform:translateX(-100%);opacity:.6;visibility:hidden;box-shadow:0 0 0 100vmax rgba(28,25,22,0);
  transition:transform .3s cubic-bezier(.55,.06,.68,.19),opacity .3s ease,box-shadow .3s ease,visibility 0s linear .3s}
.sp-traka__panel.je-otvoren{transform:none;opacity:1;visibility:visible;box-shadow:0 0 0 100vmax rgba(28,25,22,.5);
  transition:transform .45s cubic-bezier(.22,.61,.36,1),opacity .45s ease,box-shadow .45s ease,visibility 0s}
.sp-traka__panel .sp-traka__logotipi,.sp-traka__panel .meni li{opacity:0;transform:translateX(-12px);transition:opacity .2s ease,transform .3s ease}
.sp-traka__panel.je-otvoren .sp-traka__logotipi,.sp-traka__panel.je-otvoren .meni li{opacity:1;transform:none;transition:opacity .4s ease,transform .45s cubic-bezier(.22,.61,.36,1)}
.sp-traka__panel.je-otvoren .sp-traka__logotipi{transition-delay:.1s}
.sp-traka__panel.je-otvoren .meni li:nth-child(1){transition-delay:.14s}
.sp-traka__panel.je-otvoren .meni li:nth-child(2){transition-delay:.18s}
.sp-traka__panel.je-otvoren .meni li:nth-child(3){transition-delay:.22s}
.sp-traka__panel.je-otvoren .meni li:nth-child(4){transition-delay:.26s}
.sp-traka__panel.je-otvoren .meni li:nth-child(n+5){transition-delay:.3s}
.sp-traka__meni span{transition:transform .5s cubic-bezier(.22,.61,.36,1),opacity .4s ease}
@media (prefers-reduced-motion:reduce){.sp-traka__panel,.sp-traka__panel *{transition:none!important}}
.sp-traka__meni[aria-expanded="true"]{position:relative;z-index:2}
/* Oba logotipa u jednoj liniji, zajedno ~80% širine menija; link na početnu */
.sp-traka__logotipi{display:flex;flex-direction:row;align-items:center;gap:6%;width:80%;margin-bottom:28px;color:var(--zlato);text-decoration:none}
.sp-traka__logotipi .logo{flex:1 1 0;min-width:0;width:auto;height:auto}
.sp-traka__logotipi:hover,.sp-traka__logotipi:focus-visible{color:var(--zlato-svijetlo)}
/* Boje salona (audit P17): zlato pripada Sultanu, Amman je na tamnoj podlozi krem */
.sp-traka__logotipi .logo--amman-horiz{color:var(--krem)}
.sp-traka__logotipi:hover .logo--amman-horiz{color:var(--zlato-svijetlo)}
.sp-traka__panel .meni{display:block;list-style:none;margin:0;padding:0}
.sp-traka__panel .meni a{display:block;padding:14px 0;border-bottom:1px solid rgba(237,230,218,.14);color:var(--zlato-svijetlo);font:600 14px/1.2 var(--f-tekst);letter-spacing:.1em;text-transform:uppercase;text-decoration:none}
.sp-traka__panel .meni a:hover{color:var(--zlato)}
/* Podmeni u panelu naslovnice: uvučene podstavke, uvijek otvorene */
.sp-traka__panel .meni .sub-menu{display:block;margin:0;padding:0 0 0 18px;list-style:none}
.sp-traka__panel .meni .sub-menu a{padding:11px 0;font-size:12px;font-weight:500;color:rgba(237,230,218,.8)}

/* Puni meni u traci (računar, nakon heroja; audit P05): logo lijevo, meni i "Rezervišite" desno, hamburger se skriva.
   Od 1025 px: do 1024 px uključivo glavni.css ima mobilni meni (.meni u koloni), pa bi se na tačno 1024 px (iPad položen)
   oba pravila preklopila i meni u traci bio okomit. */
.sp-traka__nav,.sp-traka__rezervisi,.sp-traka__sredina--iza-heroja{display:none}
.sp-traka.je-iza-heroja .sp-traka__sredina--iza-heroja{display:flex;animation:sp-traka-oznaka .3s ease-out}
.sp-traka.je-iza-heroja{background:rgba(28,25,22,.96)}   /* tekst sekcija se ne prozire kroz traku sa menijem */
@keyframes sp-traka-oznaka{from{opacity:0}to{opacity:1}}
@media (min-width:1025px){
  .sp-traka.je-iza-heroja{justify-content:flex-start;gap:28px;padding-left:32px;padding-right:32px}
  .sp-traka.je-iza-heroja .sp-traka__meni{display:none}
  .sp-traka.je-iza-heroja .sp-traka__sredina{position:static;transform:none;flex:0 0 auto;max-width:none}
  .sp-traka.je-iza-heroja .sp-traka__nav{display:block;margin-left:auto;animation:sp-traka-nav .3s ease-out}
  .sp-traka.je-iza-heroja .sp-traka__rezervisi{display:inline-flex;animation:sp-traka-nav .3s ease-out}
  .sp-traka.je-iza-heroja .jezici--traka{margin:0}
  .sp-traka.je-iza-heroja .sp-traka__korpa{margin-right:0}
  @keyframes sp-traka-nav{from{opacity:0}to{opacity:1}}
  .sp-traka__nav .meni{display:flex;align-items:center;gap:26px;margin:0;padding:0;list-style:none}
  .sp-traka__nav .meni>li{position:relative}
  .sp-traka__nav .meni a{display:block;padding:12px 0;color:var(--zlato-svijetlo);font:600 12px/1.2 var(--f-tekst);letter-spacing:.1em;text-transform:uppercase;text-decoration:none;transition:color .2s}
  .sp-traka__nav .meni a:hover,.sp-traka__nav .meni a:focus-visible,.sp-traka__nav .current-menu-item>a{color:var(--zlato)}
  .sp-traka__nav .menu-item-has-children>a::after{content:"";display:inline-block;width:5px;height:5px;margin:0 0 3px 8px;border:solid currentColor;border-width:0 1.5px 1.5px 0;transform:rotate(45deg)}
  .sp-traka__nav .sub-menu{position:absolute;top:100%;left:-18px;z-index:5;min-width:240px;margin:0;padding:8px 0;list-style:none;background:var(--ponoc);border-top:2px solid var(--zlato);box-shadow:0 14px 30px rgba(0,0,0,.3);
    opacity:0;visibility:hidden;transform:translateY(6px);transition:opacity .2s,transform .2s,visibility 0s linear .2s}
  .sp-traka__nav li:hover>.sub-menu,.sp-traka__nav li:focus-within>.sub-menu{opacity:1;visibility:visible;transform:none;transition:opacity .2s,transform .2s,visibility 0s}
  .sp-traka__nav .sub-menu a{padding:10px 18px;font-weight:500;letter-spacing:.08em;color:rgba(237,230,218,.85)}
  .sp-traka__nav .sub-menu .sub-menu{display:none}
}
/* Uži računar: samo znakovi salona bez naziva sajta, da meni stane u jedan red */
@media (min-width:1025px) and (max-width:1279px){
  .sp-traka.je-iza-heroja .sp-traka__tekst{display:none}
  .sp-traka__nav .meni{gap:20px}
}


/* --- Dugmad: zlatno (zadano), espresso (Amman), ponoć; ikona lijevo ------- */
.sp-dugme .wp-block-button__link{display:inline-flex;align-items:center;gap:8px;min-height:48px;padding:12px 24px;border-radius:3px;background:var(--zlato);color:var(--ponoc);font:600 13px/1 var(--f-tekst);letter-spacing:.08em;text-transform:uppercase;transition:background-color .2s,transform .2s}
.sp-dugme .wp-block-button__link:hover{background:var(--zlato-hover);color:var(--ponoc)}
.sp-dugme-crno .wp-block-button__link{background:var(--espresso);color:#fff}
.sp-dugme-crno .wp-block-button__link:hover{background:var(--espresso-hover);color:#fff}
.sp-dugme[class*="sp-ikona-"] .wp-block-button__link::before{content:"";width:15px;height:15px;flex:0 0 15px;background:currentColor;-webkit-mask:var(--ikona) center/contain no-repeat;mask:var(--ikona) center/contain no-repeat}
.sp-ikona-sat{--ikona:var(--ik-sat)} .sp-ikona-poklon{--ikona:var(--ik-poklon)} .sp-ikona-info{--ikona:var(--ik-info)} .sp-ikona-korpa{--ikona:var(--ik-korpa)}
.wp-block-buttons:has(.sp-dugme){gap:16px 20px}

/* --- Zajednički naslovi sekcija ------------------------------------------- */
.sp-sekcija{padding:80px 30px}
.sp-nadnaslov{margin:0;font:600 13px/1 var(--f-tekst);letter-spacing:.18em;color:var(--orah)}
.sp-naslov{margin:16px 0 0;font:400 36px/1.2 var(--f-naslov);letter-spacing:.02em;color:var(--ponoc)}
.sp-podnaslov{margin:12px 0 0;font:400 17px/1.6 var(--f-tekst)}

/* --- 1. Hero --------------------------------------------------------------- */
.sp-hero.wp-block-cover{padding:10px;align-items:stretch}
/* Čitljivost: zatamnjenje u boji "ponoć" koje je jače iza teksta (gore i u sredini), a fotografija ostaje vidljiva po rubovima */
.sp-hero .wp-block-cover__background{background-color:transparent!important;opacity:1!important;
  background-image:radial-gradient(ellipse 70% 60% at 50% 45%,rgba(28,25,22,.62) 0%,rgba(28,25,22,.35) 70%,rgba(28,25,22,.25) 100%),
                   linear-gradient(180deg,rgba(28,25,22,.45) 0%,rgba(28,25,22,.15) 45%,rgba(28,25,22,.55) 100%)}
/* Raspored: naslov odmaknut od vrha (pogled ide na njega), dugmad pri dnu ekrana */
.sp-hero .wp-block-cover__inner-container{width:100%;display:flex;flex-direction:column;min-height:calc(100vh - 20px)}
.sp-hero-gore{display:flex;flex-direction:column;align-items:center;gap:22px;padding-top:clamp(90px,17vh,200px)}
.sp-hero-dole{flex:1;display:flex;flex-direction:column;align-items:center;gap:24px;padding:clamp(36px,7vh,90px) 30px clamp(36px,8vh,96px)}
.sp-hero-dole > .wp-block-buttons{margin-top:auto}
/* Naslov u krem boji (najveći kontrast u paleti); zlato ostaje kao ukras ispod naslova i u traci */
.sp-hero-naslov.wp-block-heading{margin:0;font:400 60px/1.1 var(--f-naslov);letter-spacing:4px;color:var(--krem);text-shadow:0 2px 3px rgba(0,0,0,.55),0 0 28px rgba(0,0,0,.45)}
/* Ornament ispod naslova: linija – romb – linija (mat zlato, kao u branding booku) */
.sp-hero-naslov.wp-block-heading::after{content:"";display:block;width:180px;height:12px;margin:22px auto 0;
  background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 180 12' fill='none' stroke='%23B8955A'%3E%3Cpath d='M0 6h78M102 6h78'/%3E%3Cpath d='M90 1.5 94.5 6 90 10.5 85.5 6z'/%3E%3C/svg%3E") center/contain no-repeat}
.sp-hero-logotipi{gap:24px 48px}
.sp-hero-logo{gap:10px;align-items:center}
.sp-hero-logo .sp-znak{margin:0}
.sp-hero-logo .sp-znak img{width:60px;height:60px;object-fit:contain}
.sp-hero-logo p{margin:0;font:600 44px/70px var(--f-tekst);text-transform:uppercase;color:#fff}
/* Traka usluga: tiha oznaka bez pilule (pilula je izgledala kao dugme i bila veća od uvoda; audit P10) */
.sp-hero-traka{margin:0;padding:0;font:400 24px/1.5 var(--f-naslov);letter-spacing:.04em;color:var(--zlato-hover);text-shadow:0 1px 3px rgba(0,0,0,.85),0 0 20px rgba(0,0,0,.65);text-wrap:balance}
.sp-hero-uvod{margin:0;max-width:900px;font:400 24px/1.6 var(--f-tekst);color:var(--krem);text-shadow:0 1px 2px rgba(0,0,0,.6),0 0 18px rgba(0,0,0,.5)}
.sp-hero-logo p{text-shadow:0 1px 2px rgba(0,0,0,.5),0 0 20px rgba(0,0,0,.4)}

/* --- 2. Lokacije (Amman = espresso, Sultan = zlato) ------------------------ */
.sp-lokacije{background:var(--krem)}
.sp-lokacije-kartice{margin-top:30px;gap:24px}
.sp-lokacija{padding:0 0 28px;display:flex;flex-direction:column;align-items:center;background:#fff;border:1px solid var(--linija)}
.sp-lokacija-slika{margin:0 0 20px;width:100%}
.sp-lokacija-slika img{width:100%;height:300px;object-fit:cover}
.sp-lokacija-naslov.wp-block-heading{margin:0 20px 12px;font:400 30px/1.3 var(--f-naslov);color:var(--ponoc)}
.sp-lokacija-opis{margin:0 24px 22px;font:400 16px/1.7 var(--f-tekst);color:var(--taupe)}
.sp-lokacija-opis strong{display:inline-block;margin-top:6px;font-weight:600;letter-spacing:.06em;color:var(--ponoc)}
.sp-lokacija .wp-block-buttons{margin-top:auto}
.sp-lokacija-amman{border-top:3px solid var(--espresso)}
.sp-lokacija-amman .sp-dugme .wp-block-button__link{background:var(--espresso);color:#fff}
.sp-lokacija-amman .sp-dugme .wp-block-button__link:hover{background:var(--espresso-hover)}
.sp-lokacija-amman .sp-lokacija-opis strong{color:var(--espresso)}
.sp-lokacija-sultan{border-top:3px solid var(--zlato)}
.sp-lokacija-sultan .sp-lokacija-opis strong{color:var(--zlato-tekst)}

/* --- 3. Usluge ------------------------------------------------------------- */
.sp-usluge{background:var(--pijesak)}
.sp-usluge-mreza.wp-block-columns{margin:30px 0;gap:16px}
.sp-usluga{background:#fff;border:1px solid var(--linija);position:relative}
/* cijela kartica je klikabilna: link iz naslova se razvlači preko kartice */
.sp-usluga h3 a{color:inherit;text-decoration:none}
.sp-usluga h3 a::after{content:"";position:absolute;inset:0;z-index:1}
.sp-usluga h3 a:focus-visible::after{outline:2px solid var(--ponoc);outline-offset:-4px}
.sp-usluga .wp-block-image{margin:0}
.sp-usluga img{width:100%;height:300px;object-fit:cover}
.sp-usluga h3{margin:18px 12px 6px;font:400 22px/1.3 var(--f-naslov);color:var(--ponoc)}
.sp-usluga p{margin:0 14px 22px;font:400 15px/1.6 var(--f-tekst);color:var(--taupe)}

/* --- 4. Poklon vaučer (ponoć + zlato) ------------------------------------- */
.sp-poklon{background:var(--ponoc)}
.sp-poklon .sp-naslov{color:var(--zlato-svijetlo)}
.sp-poklon .sp-podnaslov{color:var(--tekst-na-tamnom-2)}
.sp-poklon-slika{margin:34px 0 24px}
.sp-poklon-slika img{width:100%}
.sp-poklon-red{gap:28px;margin-bottom:24px}
.sp-lista{list-style:none;margin:0;padding:0}
.sp-lista li{display:flex;align-items:center;gap:12px}
.sp-lista li::before{content:"";width:20px;height:20px;flex:0 0 20px;background:currentColor;-webkit-mask:var(--ikona) center/contain no-repeat;mask:var(--ikona) center/contain no-repeat}
.sp-kvacice li{--ikona:var(--ik-kvacica);margin-bottom:18px;font:500 18px/1.5 var(--f-tekst);color:var(--zlato-svijetlo)}
.sp-kvacice li::before{background:var(--zlato)}
.sp-poklon-tekst{padding:24px;background:var(--pijesak);color:var(--ponoc);border-radius:3px;font-size:15px}
.sp-poklon-tekst p{margin:0 0 14px}
.sp-poklon-tekst p:last-child{margin:0}

/* --- 5. Recenzije (espresso) ------------------------------------------------ */
/* Svijetla varijanta (audit P14, 30.10.2026): pijesak + krem kartice; ranije espresso sa karticama u boji ponoć,
   pa su tri tamne sekcije stajale zaredom (poklon, recenzije, podnožje) */
.sp-recenzije{background:var(--pijesak)}
.sp-recenzije .sp-naslov{margin-bottom:34px;color:var(--ponoc)}
.sp-recenzije-okvir{background:transparent;padding:0}
.sp-recenzije-red.wp-block-columns{gap:24px;margin:0 0 24px}
.sp-recenzije-red:last-child{margin-bottom:0}
.sp-recenzija{padding:28px 22px;text-align:center;background:var(--krem);border:1px solid var(--linija);border-radius:3px;color:var(--taupe);font-size:15px}
.sp-recenzija p{margin:0 0 14px}
.sp-avatar{margin:0 auto 14px}
.sp-avatar img{width:90px;height:90px;border-radius:50%;object-fit:cover;margin:0 auto;border:2px solid var(--zlato)}
/* Zvjezdice ocjene: svjetlija, toplija zlatna (blizu Google ocjena), jedina funkcionalna boja izvan palete */
.sp-zvjezdice{color:var(--zvjezdice);letter-spacing:3px;font-size:18px;margin-bottom:10px!important}
.sp-autor{color:var(--taupe);font-size:14px}
.sp-autor strong{color:var(--ponoc);font-weight:600}
/* Mobitel: svih 6 recenzija u jednom redu koji se klizi prstom (ranije ~2.700 px skrolanja; audit P13), bez JS-a */
@media (max-width:700px){
  .sp-recenzije-okvir{display:flex;gap:14px;margin-inline:-18px;padding:0 18px 6px;overflow-x:auto;scroll-snap-type:x mandatory;scroll-padding-inline:18px;scrollbar-width:none;overscroll-behavior-x:contain}
  .sp-recenzije-okvir::-webkit-scrollbar{display:none}
  .sp-recenzije-okvir>.sp-recenzije-red{display:contents}
  .sp-recenzije-okvir .sp-recenzije-red>.sp-recenzija.wp-block-column{flex:0 0 84%!important;scroll-snap-align:start}
}

/* --- 6. Blog ---------------------------------------------------------------- */
.sp-blog{background:var(--krem)}
.sp-blog-clanci{margin-top:34px}
.sp-blog-clanci .wp-block-post-template{gap:24px}
.sp-blog-clanci .wp-block-post{background:#fff;border:1px solid var(--linija);padding-bottom:18px}
.sp-clanak-slika{position:relative}
.sp-clanak-slika .wp-block-post-featured-image{margin:0}
.sp-clanak-slika img{width:100%;height:auto!important;aspect-ratio:8/5;object-fit:cover}
.sp-datum{position:absolute;top:15px;left:15px;min-width:52px;padding:7px 8px;background:var(--krem);text-align:center;line-height:1}
.sp-datum-dan{font:600 22px/1.1 var(--f-tekst);color:var(--ponoc)}
.sp-datum-mjesec{font:600 11px/1.2 var(--f-tekst);letter-spacing:.08em;color:var(--orah);text-transform:uppercase}
.sp-blog-clanci .wp-block-post-title{margin:18px 16px 10px;font:400 20px/1.35 var(--f-naslov)}
.sp-blog-clanci .wp-block-post-title a{color:var(--ponoc);text-decoration:none}
.sp-blog-clanci .wp-block-post-title a:hover{color:var(--zlato-tekst)}
.sp-blog-clanci .wp-block-post-excerpt{margin:0 16px;font:400 15px/1.6 var(--f-tekst);color:var(--taupe)}
.sp-blog-clanci .wp-block-post-excerpt__more-text{display:none}

/* --- 7. Kontakt (ponoć) ----------------------------------------------------- */
.sp-kontakt{background:var(--ponoc);padding:50px 30px}
.sp-kontakt-salon{display:flex;flex-direction:column;align-items:center}
.sp-kontakt-logo{margin:0 0 22px!important}
.sp-kontakt-logo img{width:260px;max-width:100%}
.sp-kontakt-lista li{margin-bottom:8px;font:400 16px/1.6 var(--f-tekst);color:var(--zlato-svijetlo)}
.sp-kontakt-lista li::before{width:18px;height:18px;flex-basis:18px;background:var(--zlato)}
.sp-kontakt-lista li:nth-child(1){--ikona:var(--ik-lokacija)}
.sp-kontakt-lista li:nth-child(2){--ikona:var(--ik-telefon)}
.sp-kontakt-lista li:nth-child(3){--ikona:var(--ik-sat-tanki)}
.sp-kontakt-lista a{color:var(--zlato-svijetlo);text-decoration:none}

/* --- Tablet (701–781 px): WordPress slaže kolone (core CSS) tek do 781 px; tablet ih dobija jednu do druge kao i
   od 782 px. Izuzetak su redovi sa inline flex-basis (poklon 70/30, Dijamant 58/42): ostaju složeni do 781 px. --- */
@media (min-width:701px) and (max-width:781px){
  .wp-block-columns:not(.is-not-stacked-on-mobile):not(:has(>.wp-block-column[style*="flex-basis"])){flex-wrap:nowrap!important}
  .wp-block-columns:not(.is-not-stacked-on-mobile):not(:has(>.wp-block-column[style*="flex-basis"]))>.wp-block-column{flex-basis:0!important;flex-grow:1}
}
/* WordPress traka admina je viša do 782 px */
@media (max-width:782px){.admin-bar .sp-traka{top:46px}}

/* --- Mobitel (do 700 px; tablet je 701–1024 px) ----------------------------- */
@media (max-width:700px){
  .sp-traka,.sp-traka.je-skrolano{padding:10px}
  .sp-traka{gap:8px}
  .sp-traka__korpa{flex:0 0 auto;width:24px;height:24px;margin-right:8px}
  /* Logo u toku reda (ne apsolutno), da se ne preklapa sa jezikom i korpom */
  .sp-traka__sredina{position:static;transform:none;flex:1 1 auto;min-width:0;justify-content:center;gap:8px;max-width:none}
  .sp-traka__sredina .logo{height:22px}
  .sp-traka__tekst{font-size:12.5px;letter-spacing:.08em}
  .sp-traka .jezici--traka{margin:0 6px 0 0;flex:0 0 auto}
  .sp-traka__meni.zaglavlje__meni-dugme{flex:0 0 auto;width:36px}
  /* Na mobitelu je u prijedlogu druga (uspravna) fotografija */
  .sp-hero .wp-block-cover__image-background{content:url("/wp-content/uploads/2026/09/spa-2-1-768x1439.jpg.webp")}
  .sp-hero.wp-block-cover{padding:20px}
  .sp-hero .wp-block-cover__inner-container{min-height:calc(100svh - 40px)}
  .sp-hero-gore{gap:12px;padding-top:clamp(56px,11svh,110px)}
  .sp-hero-dole{gap:14px;padding:24px 10px clamp(20px,5svh,48px)}
  .sp-hero-naslov.wp-block-heading{padding:20px 10px 10px;font-size:32px;letter-spacing:2px}
  .sp-hero-naslov.wp-block-heading::after{width:140px;margin-top:14px}
  .sp-hero-logotipi{gap:10px 18px}
  .sp-hero-logo{gap:6px}
  .sp-hero-logo .sp-znak img{width:22px;height:22px}
  .sp-hero-logo p{font-size:17px;line-height:1.4}
  .sp-hero-traka{font-size:min(14px,3.7vw);letter-spacing:0;white-space:nowrap}   /* jedan red i na 360 px */
  .sp-hero-uvod{font-size:16px;line-height:1.5}
  .sp-hero .wp-block-buttons{flex-direction:column;align-items:stretch;width:100%;gap:10px}
  .sp-hero .sp-dugme .wp-block-button__link{width:100%;justify-content:center}
  .sp-dugme .wp-block-button__link{padding:10px 16px;font-size:12px}
  .sp-sekcija{padding:56px 18px}
  .sp-naslov{font-size:28px}
  .sp-lokacije-kartice{gap:20px}
  .sp-lokacija{padding-bottom:20px;border-radius:4px;overflow:hidden}
  .sp-lokacija-slika img{height:180px}
  .sp-lokacija-naslov.wp-block-heading{font-size:24px}
  .sp-lokacija-opis{font-size:15px;margin:0 16px 18px}
  .sp-usluge-mreza.wp-block-columns{display:grid;grid-template-columns:1fr 1fr;gap:10px}
  .sp-usluga img{height:120px}
  .sp-usluga h3{font-size:17px;margin:12px 8px 4px}
  .sp-usluga p{font-size:12.5px;margin:0 10px 14px}
  .sp-poklon-tekst{padding:18px}
  .sp-recenzije-red.wp-block-columns{gap:16px}
  .sp-blog-clanci .wp-block-post-template{grid-template-columns:1fr!important}
  .sp-kontakt{padding:50px 25px}
  .sp-kontakt .wp-block-columns{gap:40px}
}

/* ==========================================================================
   Animacije (samo na stranici, ne u editoru; uključuje ih klasa html.sp-anim iz inc/blokovi.php)
   Fino i kratko: pojavljivanje + blagi pomak naviše, bez klizanja sa strane.
   Ko je u sistemu isključio animacije (prefers-reduced-motion), vidi sve odmah.
   ========================================================================== */
@media (prefers-reduced-motion:no-preference){
  @keyframes sp-pojava{from{opacity:0;transform:translateY(12px)}to{opacity:1;transform:none}}
  /* Naslov kreće od .01, ne 0: Chrome ne broji potpuno proziran element za LCP, pa bi se LCP pomjerio na kraj animacije */
  @keyframes sp-pojava-lcp{from{opacity:.01;transform:translateY(12px)}to{opacity:1;transform:none}}
  @keyframes sp-zoom{from{transform:scale(1.08)}to{transform:scale(1)}}
  @keyframes sp-linija{from{opacity:0;transform:scaleX(0)}to{opacity:1;transform:scaleX(1)}}

  /* Hero pri učitavanju: fotografija se polako "smiruje", sadržaj se pojavljuje redom.
     Kratko (30.10.2026, audit P24): sve je vidljivo za ~1 s, dugmad ne čekaju (ranije ~2 s) */
  html.sp-anim .sp-hero .wp-block-cover__image-background{animation:sp-zoom 12s cubic-bezier(.2,.6,.2,1) both}
  html.sp-anim .sp-hero-naslov{animation:sp-pojava-lcp .6s cubic-bezier(.2,.7,.2,1) both}
  html.sp-anim .sp-hero-naslov::after{animation:sp-linija .6s .3s ease-out both}
  html.sp-anim .sp-hero-logo:nth-child(1){animation:sp-pojava .6s .1s ease-out both}
  html.sp-anim .sp-hero-logo:nth-child(2){animation:sp-pojava .6s .15s ease-out both}
  html.sp-anim .sp-hero-traka{animation:sp-pojava .6s .2s ease-out both}
  html.sp-anim .sp-hero-uvod{animation:sp-pojava .6s .3s ease-out both}
  html.sp-anim .sp-hero-dole > .wp-block-buttons{animation:sp-pojava .6s .4s ease-out both}

  /* Sekcije ispod: elementi se otkrivaju dok skrolate (glavni.js dodaje .sp-otkrij i .je-vidljiv) */
  html.sp-anim .sp-otkrij{opacity:0;transform:translateY(16px);transition:opacity .6s ease-out,transform .6s cubic-bezier(.2,.7,.2,1);transition-delay:var(--kasnjenje,0s)}
  html.sp-anim .sp-otkrij.je-vidljiv,html.sp-anim-gotovo .sp-otkrij{opacity:1;transform:none}
  /* Fotografije u karticama: blagi zoom pri prelasku mišem */
  .sp-lokacija-slika img,.sp-usluga img,.sp-clanak-slika img{transition:transform .8s cubic-bezier(.2,.7,.2,1)}
  .sp-lokacija:hover .sp-lokacija-slika img,.sp-usluga:hover img,.sp-blog-clanci .wp-block-post:hover .sp-clanak-slika img{transform:scale(1.04)}
  .sp-lokacija-slika,.sp-usluga .wp-block-image,.sp-clanak-slika .wp-block-post-featured-image{overflow:hidden}
}

/* ==========================================================================
   Stranice salona i "O nama" (Amman Spa, Sultan Spa, O nama): redizajn/stranica-*.html
   Hero sa fotografijom, tekst + slika, činjenice, galerija, rezervacija i dolazak.
   ========================================================================== */
.sp-ikona-lokacija{--ikona:var(--ik-lokacija)}
.sp-dugme-prozirno .wp-block-button__link{background:transparent;border:1px solid rgba(250,247,242,.7);color:var(--krem)}
.sp-dugme-prozirno .wp-block-button__link:hover{background:rgba(250,247,242,.14);color:var(--krem)}

/* Hero: niži od naslovnice; tekst u sredini, zatamnjenje u boji "ponoć" iza teksta */
.sp-str-hero.wp-block-cover{padding:0;align-items:center}
.sp-str-hero .wp-block-cover__background{background-color:transparent!important;opacity:1!important;
  background-image:radial-gradient(ellipse 70% 70% at 50% 55%,rgba(28,25,22,.6) 0%,rgba(28,25,22,.3) 75%),
                  linear-gradient(180deg,rgba(28,25,22,.5) 0%,rgba(28,25,22,.1) 40%,rgba(28,25,22,.6) 100%)}
.sp-str-hero .wp-block-cover__inner-container{width:100%;max-width:900px;padding:120px 24px 64px;text-align:center}
.sp-str-nadnaslov{margin:0 0 18px;font:600 12px/1.3 var(--f-tekst);letter-spacing:.24em;color:var(--zlato-svijetlo)}
.sp-str-naslov.wp-block-heading{margin:0;font:400 clamp(36px,5.6vw,64px)/1.1 var(--f-naslov);letter-spacing:.03em;color:var(--krem);text-shadow:0 2px 3px rgba(0,0,0,.5),0 0 28px rgba(0,0,0,.4)}
.sp-str-naslov.wp-block-heading::after{content:"";display:block;width:180px;height:12px;margin:22px auto 0;
  background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 180 12' fill='none' stroke='%23B8955A'%3E%3Cpath d='M0 6h78M102 6h78'/%3E%3Cpath d='M90 1.5 94.5 6 90 10.5 85.5 6z'/%3E%3C/svg%3E") center/contain no-repeat}
.sp-str-tagline{margin:22px auto 30px;max-width:640px;font:400 clamp(17px,2vw,21px)/1.6 var(--f-tekst);color:var(--krem);text-shadow:0 1px 2px rgba(0,0,0,.6)}
.sp-str-hero .wp-block-buttons{margin-top:6px}

/* Sekcije */
.sp-str-sekcija{padding:96px 30px;background:var(--krem)}
.sp-str-sekcija .sp-nadnaslov{text-align:left}
.sp-str-sekcija .has-text-align-center.sp-nadnaslov{text-align:center}
.sp-str-sekcija .sp-naslov{margin-bottom:24px}
.sp-str-dvije.wp-block-columns{gap:clamp(32px,6vw,88px);margin-bottom:0}
.sp-str-tekst{margin:0 0 18px;font:400 16px/1.85 var(--f-tekst);color:var(--taupe)}
.sp-str-tekst strong{font-weight:600;color:var(--ponoc)}
.sp-str-uvod{margin:0 0 32px;font:400 clamp(20px,2.4vw,26px)/1.6 var(--f-naslov);letter-spacing:.01em;color:var(--ponoc)}
.sp-str-uvod strong{font-weight:400;color:var(--zlato-tekst)}
/* Duži tekst se čita lakše poravnat lijevo, u redu do ~68 znakova (audit P11, 30.10.2026); naslovi i nadnaslovi
   ostaju centrirani, kao i kratki uvodi ispod naslova sekcija (sp-ms-uvodni) na računaru */
.sp-blokovi__sadrzaj .sp-str-tekst{text-align:left;max-width:68ch;margin-inline:auto}
.sp-blokovi__sadrzaj .sp-str-tekst.sp-ms-uvodni{text-align:center}
@media (max-width:700px){
  .sp-blokovi__sadrzaj .sp-str-tekst.sp-ms-uvodni,.sp-blokovi__sadrzaj .sp-str-uvod{text-align:left}
  .sp-blokovi__sadrzaj .sp-str-tekst{line-height:1.75}
}
.sp-str-slika{margin:0}
.sp-str-slika img{width:100%;height:560px;object-fit:cover;border-radius:3px}
.sp-str-slika-visoka img{height:640px}
.sp-str-amman .sp-nadnaslov{color:var(--espresso)}
.sp-str-sultan .sp-nadnaslov{color:var(--zlato-tekst)}

/* Činjenice (brojevi / popis sadržaja) */
.sp-str-cinjenice-sek{background:var(--pijesak)}
.sp-str-cinjenice.wp-block-columns{margin:40px 0 56px;gap:20px}
.sp-str-cinjenica{padding:30px 20px;background:var(--krem);border:1px solid var(--linija);border-top:3px solid var(--zlato);border-radius:3px}
.sp-str-amman~.sp-str-cinjenice-sek .sp-str-cinjenica{border-top-color:var(--espresso)}
.sp-str-broj{margin:0 0 6px;font:400 54px/1 var(--f-naslov);color:var(--espresso)}
.sp-str-opis{margin:0;font:500 15px/1.5 var(--f-tekst);letter-spacing:.02em;color:var(--ponoc)}
.sp-str-cinjenice-tekst .sp-str-cinjenica{padding:34px 22px}
.sp-str-cinjenice-tekst .sp-str-opis{font-size:16px}
.sp-str-dvije-tekst.wp-block-columns{gap:clamp(24px,5vw,72px)}
.sp-str-podnaslov.wp-block-heading{margin:0 0 14px;font:400 24px/1.3 var(--f-naslov);color:var(--ponoc)}

/* Galerija preko cijele širine */
.sp-str-galerija-sek{padding:0;background:var(--ponoc)}
.sp-str-galerija.wp-block-columns{margin:0;gap:4px}
.sp-str-galerija .wp-block-image{margin:0}
.sp-str-galerija img{width:100%;height:440px;object-fit:cover;transition:transform .8s cubic-bezier(.2,.6,.2,1)}
.sp-str-galerija .wp-block-column{overflow:hidden}
.sp-str-galerija .wp-block-column:hover img{transform:scale(1.04)}

/* Rezervacija i dolazak (tamna traka; Amman espresso, Sultan ponoć + zlato) */
.sp-str-rezervacija .sp-naslov,.sp-str-rezervacija .sp-nadnaslov{color:var(--zlato-svijetlo)}
.sp-str-rezervacija .sp-nadnaslov{color:var(--zlato)}
.sp-str-rezervacija .sp-str-tekst{color:rgba(250,247,242,.8)}
.sp-str-rezervacija .sp-str-tekst strong{color:var(--krem)}
.sp-str-rezervacija-amman{background:var(--espresso)}
.sp-str-rezervacija-sultan{background:var(--ponoc)}
.sp-str-dugmad{gap:16px 20px;margin-top:30px}
.sp-str-podaci{padding:32px;border:1px solid rgba(184,149,90,.4);border-radius:3px;font:500 17px/1.5 var(--f-tekst);color:var(--krem)}
.sp-str-podaci li{margin-bottom:18px}
.sp-str-podaci li:last-child{margin-bottom:0}
.sp-str-podaci li::before{background:var(--zlato)}
.sp-str-podaci a{color:var(--krem);text-decoration:none}
.sp-str-podaci a:hover{color:var(--zlato)}
.sp-pod-lokacija{--ikona:var(--ik-lokacija)} .sp-pod-telefon{--ikona:var(--ik-telefon)} .sp-pod-sat{--ikona:var(--ik-sat-tanki)}

/* O nama: dvije slike kao veze prema salonima */
.sp-str-izbor{background:var(--pijesak)}
.sp-str-karte.wp-block-columns{margin-top:34px;gap:28px}
.sp-str-karta{overflow:hidden;background:var(--bijela,#fff);border:1px solid var(--linija);padding-bottom:26px}
.sp-str-karta-amman{border-top:3px solid var(--espresso)}
.sp-str-karta-sultan{border-top:3px solid var(--zlato)}
.sp-str-karta-slika{margin:0 0 22px;overflow:hidden}
.sp-str-karta-slika a{display:block}
.sp-str-karta-slika img{width:100%;height:380px;object-fit:cover;transition:transform .9s cubic-bezier(.2,.6,.2,1)}
.sp-str-karta:hover .sp-str-karta-slika img{transform:scale(1.05)}
.sp-str-karta-naslov.wp-block-heading{margin:0 20px 6px;font:400 28px/1.3 var(--f-naslov)}
.sp-str-karta-naslov a{color:var(--ponoc);text-decoration:none}
.sp-str-karta-naslov a::after{content:" →";color:var(--zlato-tekst)}
.sp-str-karta-naslov a:hover{color:var(--zlato-tekst)}
.sp-str-karta-adresa{margin:0;font:600 12px/1.4 var(--f-tekst);letter-spacing:.14em;text-transform:uppercase;color:var(--taupe)}

@media (max-width:700px){
  .sp-str-hero .wp-block-cover__inner-container{padding:96px 20px 48px}
  .sp-str-sekcija{padding:64px 20px}
  .sp-str-slika img,.sp-str-slika-visoka img{height:380px}
  .sp-str-galerija.wp-block-columns{flex-wrap:wrap}
  .sp-str-galerija img{height:280px}
  .sp-str-podaci{padding:24px}
  .sp-str-karta-slika img{height:260px}
  .sp-str-broj{font-size:44px}
}

/* ==========================================================================
   Stranica "Masaža Sarajevo" (redizajn/stranica-masaza-sarajevo.html): vrste masaža, kartice usluga, cjenovnik, FAQ
   ========================================================================== */
.sp-ms-vrste-sek,.sp-ms-saloni,.sp-ms-faq-sek{background:var(--pijesak)}
.sp-ms-ponuda,.sp-ms-cijene-sek{background:var(--krem)}
.sp-ms-vrste.wp-block-group{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:24px;margin-top:40px}
.sp-ms-vrsta{display:flex;flex-direction:column;padding:30px 28px 26px;background:#fff;border:1px solid var(--linija);border-top:3px solid var(--zlato);border-radius:3px}
.sp-ms-vrsta-naslov.wp-block-heading{margin:0 0 14px;font:400 24px/1.3 var(--f-naslov);letter-spacing:.02em;color:var(--ponoc)}
.sp-ms-vrsta-naslov a{color:inherit;text-decoration:none;transition:color .2s}
.sp-ms-vrsta-naslov a:hover{color:var(--zlato-tekst)}
.sp-ms-vrsta p{margin:0 0 16px;font:400 15px/1.8 var(--f-tekst);color:var(--taupe)}
.sp-ms-vrsta .sp-ms-vrsta-link{margin:auto 0 0;padding-top:8px}
.sp-ms-vrsta-link a{display:inline-block;padding-bottom:3px;border-bottom:1px solid var(--zlato);font:600 12px/1.4 var(--f-tekst);letter-spacing:.12em;text-transform:uppercase;text-decoration:none;color:var(--ponoc)}
.sp-ms-vrsta-link a::after{content:" →"}
.sp-ms-vrsta-link a:hover{color:var(--zlato-tekst)}

/* Kartice usluga unutar stranice (shortcode [products]) */
.sp-ms-uvodni{max-width:860px;margin:18px auto 0!important}
.sp-ms-ponuda .woocommerce ul.products{margin:40px 0 32px}
.sp-ms-ponuda .wp-block-buttons{margin-bottom:0}

/* Saloni */
.sp-ms-karta-tekst{margin:0 24px 14px;font:400 15px/1.75 var(--f-tekst);color:var(--taupe)}
.sp-ms-karta-veze{margin:0 24px;font:500 14px/1.9 var(--f-tekst);color:var(--taupe)}
.sp-ms-karta-veze strong{color:var(--ponoc)}
.sp-ms-karta-veze a{color:var(--zlato-tekst)}

/* Cjenovnik (tabela) */
.sp-ms-cijene-okvir{margin:36px 0 32px;border:1px solid var(--linija);border-radius:3px;background:#fff;overflow:hidden}
.sp-ms-cijene{width:100%;margin:0;border-collapse:collapse;font:400 15px/1.5 var(--f-tekst)}
.sp-ms-cijene thead th{padding:14px 20px;background:var(--ponoc);color:var(--zlato-svijetlo);font:600 11px/1.4 var(--f-tekst);letter-spacing:.14em;text-align:left;text-transform:uppercase}
.sp-ms-cijene tbody th,.sp-ms-cijene tbody td{padding:14px 20px;border-bottom:1px solid var(--linija);text-align:left;vertical-align:middle}
.sp-ms-cijene tbody tr:nth-child(even){background:var(--krem)}
.sp-ms-cijene tbody tr:last-child th,.sp-ms-cijene tbody tr:last-child td{border-bottom:0}
.sp-ms-cijene tbody th{font:400 17px/1.4 var(--f-naslov);letter-spacing:.02em;width:42%}
.sp-ms-cijene tbody th a{color:var(--ponoc);text-decoration:none}
.sp-ms-cijene tbody th a:hover{color:var(--zlato-tekst)}
.sp-ms-trajanja{display:flex;flex-wrap:wrap;gap:6px 22px;margin:0;padding:0;list-style:none}
.sp-ms-trajanja span{color:var(--taupe)}
.sp-ms-trajanja strong{margin-left:4px;font-weight:600;color:var(--zlato-tekst)}
.sp-ms-cijene td>strong{font-weight:600;color:var(--zlato-tekst)}
.sp-str-tekst strong{white-space:nowrap}

/* Česta pitanja */
.sp-ms-faq{margin-top:34px}
.sp-ms-pitanje{border-bottom:1px solid var(--linija);background:transparent}
.sp-ms-pitanje:first-child{border-top:1px solid var(--linija)}
.sp-ms-pitanje summary{position:relative;padding:20px 44px 20px 4px;list-style:none;cursor:pointer;font:400 21px/1.4 var(--f-naslov);letter-spacing:.01em;color:var(--ponoc);transition:color .2s}
.sp-ms-pitanje summary::-webkit-details-marker{display:none}
.sp-ms-pitanje summary::after{content:"";position:absolute;right:10px;top:50%;width:9px;height:9px;margin-top:-7px;border:solid var(--zlato-tekst);border-width:0 1.5px 1.5px 0;transform:rotate(45deg);transition:transform .25s}
.sp-ms-pitanje[open] summary::after{transform:rotate(225deg);margin-top:-2px}
.sp-ms-pitanje summary:hover{color:var(--zlato-tekst)}
.sp-ms-pitanje p{margin:0;padding:0 44px 22px 4px;font:400 16px/1.85 var(--f-tekst);color:var(--taupe)}

@media (max-width:1024px){
  .sp-ms-vrste.wp-block-group{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media (max-width:700px){
  .sp-ms-vrste.wp-block-group{grid-template-columns:1fr;gap:16px}
  .sp-ms-vrsta{padding:24px 20px 22px}
  .sp-ms-cijene thead{display:none}
  .sp-ms-cijene,.sp-ms-cijene tbody,.sp-ms-cijene tr,.sp-ms-cijene tbody th,.sp-ms-cijene tbody td{display:block;width:auto}
  .sp-ms-cijene tbody tr{padding:14px 16px;border-bottom:1px solid var(--linija)}
  .sp-ms-cijene tbody tr:last-child{border-bottom:0}
  .sp-ms-cijene tbody th,.sp-ms-cijene tbody td{padding:0;border:0}
  .sp-ms-cijene tbody th{margin-bottom:6px;width:auto}
  .sp-ms-pitanje summary{font-size:18px}
}

/* Ispravke: boje veza unutar sadržaja blokova ne smiju prebojiti dugmad kartica ni tekst na tamnoj traci */
/* "Kupi vaučer" puno dugme, "Rezerviši" okvir (isto kao kartice u shopu) */
.sp-blokovi__sadrzaj a.kartica__dugme--rezervisi{color:var(--ponoc)}
.sp-blokovi__sadrzaj a.kartica__dugme--vaucer{color:var(--krem)}
.sp-blokovi__sadrzaj .kartica__naslov a{color:var(--ponoc)}
.sp-blokovi__sadrzaj .kartica__naslov a:hover{color:var(--zlato-tekst)}
.sp-str-rezervacija .sp-str-tekst a{color:var(--zlato)}
.sp-ms-vrste.wp-block-group>*{margin-block-start:0;margin-block-end:0}
/* Zadnja (sedma) kartica vrsta masaža zauzima cijeli red, da ne ostane sama u koloni */
.sp-ms-vrste.wp-block-group>.sp-ms-vrsta:last-child:nth-child(3n+1){grid-column:1/-1}
@media (max-width:1024px) and (min-width:701px){
  .sp-ms-vrste.wp-block-group>.sp-ms-vrsta:last-child:nth-child(3n+1){grid-column:auto}
  .sp-ms-vrste.wp-block-group>.sp-ms-vrsta:last-child:nth-child(odd){grid-column:1/-1}
}

/* Redovi masaža: slika lijevo, opis desno, ispod dva dugmeta (Kupi vaučer / Rezerviši termin) */
.sp-ms-masaze{background:var(--pijesak)}
.sp-ms-red{display:grid;grid-template-columns:minmax(0,340px) minmax(0,1fr);gap:clamp(24px,4vw,56px);align-items:start;max-width:1040px;margin:0 auto;padding:36px 0;border-bottom:1px solid var(--linija)}
.sp-ms-red:first-of-type{margin-top:16px;border-top:1px solid var(--linija)}
.sp-ms-red__medij{position:relative;overflow:hidden;border-radius:3px;background:#fff}
.sp-ms-red__medij>img{display:block;width:100%;aspect-ratio:4/3;height:auto;object-fit:cover}
.sp-ms-red__naslov{margin:0 0 10px;font:400 clamp(24px,2.4vw,30px)/1.25 var(--f-naslov);letter-spacing:.02em;color:var(--ponoc)}
.sp-ms-red__naslov a{color:inherit;text-decoration:none;transition:color .2s}
.sp-ms-red__naslov a:hover{color:var(--zlato-tekst)}
.sp-ms-red__info{display:flex;flex-wrap:wrap;gap:6px 18px;margin:0 0 14px;font:500 13px/1.4 var(--f-tekst);letter-spacing:.06em;text-transform:uppercase;color:var(--taupe)}
.sp-ms-red__info strong{margin-left:4px;font-weight:600;color:var(--zlato-tekst)}
.sp-ms-red__tekst p{margin:0 0 12px;font:400 15px/1.8 var(--f-tekst);color:var(--taupe)}
.sp-ms-red__tekst p.sp-ms-red__kratki{font-weight:500;color:var(--ponoc)}
.sp-ms-red__dugmad{display:flex;flex-wrap:wrap;gap:12px;margin-top:18px}
.sp-ms-dugme{display:inline-flex;align-items:center;justify-content:center;min-height:46px;padding:0 26px;border:1px solid var(--ponoc);border-radius:2px;font:600 12px/1.2 var(--f-tekst);letter-spacing:.1em;text-transform:uppercase;text-decoration:none;cursor:pointer;transition:background-color .2s,color .2s,border-color .2s}
.sp-blokovi__sadrzaj a.sp-ms-dugme--vaucer{background:var(--ponoc);color:var(--krem)}
.sp-blokovi__sadrzaj a.sp-ms-dugme--vaucer:hover{background:var(--espresso);border-color:var(--espresso);color:var(--krem)}
.sp-blokovi__sadrzaj a.sp-ms-dugme--rezervisi{background:transparent;color:var(--ponoc)}
.sp-blokovi__sadrzaj a.sp-ms-dugme--rezervisi:hover{background:var(--pijesak);color:var(--ponoc)}
/* Znakovi salona preko slike (isti izgled kao na karticama shopa) */
.sp-ms-red .salon-znakovi{position:absolute;top:12px;left:12px;display:flex;gap:6px;pointer-events:none}
.sp-ms-red .salon-znak{display:inline-flex;align-items:center;justify-content:center;width:36px;height:36px;border-radius:50%;box-shadow:0 2px 8px rgba(28,25,22,.25)}
.sp-ms-red .salon-znak img{width:auto;height:21px}
.sp-ms-red .salon-znak--amman{background:var(--espresso)}
.sp-ms-red .salon-znak--sultan{background:var(--zlato)}
@media (max-width:700px){
  .sp-ms-red{grid-template-columns:1fr;gap:20px;padding:28px 0}
  .sp-ms-red__medij>img{aspect-ratio:16/10}
  .sp-ms-dugme{flex:1 1 100%}
}

/* ==========================================================================
   Hammam stranica (audit P12, 30.10.2026): ritual u 4 koraka, kartica paketa Dijamant, naizmjenične pozadine
   (ranije četiri tekstualne sekcije iste pozadine i rasporeda zaredom). Tekst je isti, samo raspoređen.
   ========================================================================== */
.sp-str-sekcija.sp-pozadina-pijesak{background:var(--pijesak)}
.sp-ritual-koraci{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:20px;margin-top:40px}
.sp-ritual-koraci>*{margin:0!important}
.sp-ritual-korak{padding:28px 24px 26px;background:var(--krem);border:1px solid var(--linija);border-top:2px solid var(--zlato);border-radius:3px}
/* Broj koraka u Montserratu (Marcellus "01" izgleda kao "OI") */
.sp-ritual-broj{margin:0 0 14px;font:300 34px/1 var(--f-tekst);letter-spacing:.04em;color:var(--zlato-tekst)}
.sp-ritual-naslov.wp-block-heading{margin:0 0 10px;font:600 14px/1.35 var(--f-tekst);letter-spacing:.1em;text-transform:uppercase;color:var(--ponoc)}
.sp-ritual-tekst{margin:0;font:400 15px/1.7 var(--f-tekst);color:var(--taupe)}
@media (max-width:959px){.sp-ritual-koraci{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:600px){.sp-ritual-koraci{grid-template-columns:1fr;gap:12px;margin-top:28px}.sp-ritual-korak{padding:22px 20px}}

/* Kartica paketa Dijamant: fotografija lijevo, tekst, cijena iz proizvoda i dugmad desno */
.sp-dijamant-karta.wp-block-columns{gap:0;margin:0;background:var(--pijesak);border:1px solid var(--linija);border-radius:3px;overflow:hidden}
.sp-dijamant-medij.wp-block-column{align-self:stretch}
.sp-dijamant-medij figure{height:100%;margin:0}
.sp-dijamant-medij figure a{display:block;height:100%}
.sp-dijamant-medij img{display:block;width:100%;height:100%;min-height:340px;object-fit:cover}
.sp-dijamant-tekst.wp-block-column{padding:40px 44px}
.sp-dijamant-tekst .sp-naslov{margin:12px 0 18px}
.sp-blokovi__sadrzaj .sp-dijamant-tekst .sp-str-tekst{max-width:none;margin:0 0 18px}
.sp-dijamant-cijena{margin:0 0 22px;font:500 13px/1.4 var(--f-tekst);letter-spacing:.1em;text-transform:uppercase;color:var(--taupe)}
.sp-dijamant-cijena strong{margin-left:6px;font-size:24px;font-weight:600;letter-spacing:.02em;text-transform:none;color:var(--zlato-tekst)}
.sp-dijamant-tekst .wp-block-buttons{gap:12px}
/* Sporedno dugme sa okvirom (na svijetloj podlozi) */
.sp-dugme-okvir .wp-block-button__link{background:transparent;border:1px solid var(--ponoc);color:var(--ponoc)}
.sp-dugme-okvir .wp-block-button__link:hover{background:var(--krem);color:var(--ponoc)}
/* Do 781 px (ne 700): Dijamant kartica ima inline flex-basis, pa je WordPress slaže do 781 px */
@media (max-width:781px){
  .sp-dijamant-tekst.wp-block-column{padding:26px 22px 28px}
  .sp-dijamant-medij img{min-height:220px;max-height:300px}
}