/* Kartica usluge u shopu (modul shop-kartice). HTML: template-parts/shop/kartica.php
   Boje i razmaci dolaze iz varijabli u glavni.css (:root). */

/* --- Mreža kartica (privremeno; izgled cijele shop stranice radimo posebno) --- */
ul.products{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:var(--r3);margin:var(--r4) 0 var(--r8);padding:0;list-style:none}
@media (max-width:960px){ul.products{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:620px){ul.products{grid-template-columns:1fr;gap:var(--r2)}}

/* --- Kartica --------------------------------------------------------------- */
/* Poništava širinu i float iz WooCommerce stilova (ul.products li.product) */
html body ul.products li.product.kartica{float:none!important;width:auto!important;max-width:none!important;margin:0!important;padding:0!important}
html body ul.products::before,html body ul.products::after{display:none!important;content:none!important}
.kartica__naslov + .kartica__podnozje .kartica__cijena{border-top:0;padding-top:0}
.kartica{display:flex;flex-direction:column;margin:0;background:var(--bijela);border:1px solid var(--linija);border-radius:3px;overflow:hidden;transition:box-shadow .3s}
.kartica:hover{box-shadow:0 10px 30px rgba(28,25,22,.08)}

.kartica__medij{position:relative}
.kartica__slika{display:block;aspect-ratio:4/3;overflow:hidden;background:var(--pijesak)}
/* Znakovi salona preko slike (Amman espresso, Sultan zlato) */
.salon-znakovi{position:absolute;top:var(--r2);left:var(--r2);display:flex;gap:6px;pointer-events:none}
.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)}
.salon-znak img{width:auto;height:21px}
.salon-znak--amman{background:var(--espresso)}
.salon-znak--sultan{background:var(--zlato)}
.kartica__slika img{width:100%;height:100%;object-fit:cover;transition:transform .8s cubic-bezier(.2,.6,.2,1)}
.kartica:hover .kartica__slika img{transform:scale(1.04)}

/* Topli "svijeće" ton slika usluga: filter + amber sloj + topla vinjeta (isti za karticu i stranicu usluge).
   Vrijednosti su varijable, pa se fino podešavaju na jednom mjestu (:root ili ovdje). */
.kartica__slika,.proizvod__slika{position:relative;--ton-filter:sepia(30%) hue-rotate(-18deg) saturate(115%) brightness(96%) contrast(110%);--ton-filter-hover:sepia(12%) hue-rotate(-10deg) saturate(105%) brightness(97%) contrast(106%)}
.kartica__slika img,.proizvod__slika img{filter:var(--ton-filter);transition:filter .4s ease-in-out,transform .8s cubic-bezier(.2,.6,.2,1)}
.kartica__slika::after,.proizvod__slika::after{content:"";position:absolute;inset:0;pointer-events:none;mix-blend-mode:multiply;transition:opacity .4s ease-in-out;background:radial-gradient(ellipse at 55% 40%,rgba(255,225,190,1) 0%,rgba(250,185,140,1) 55%,rgba(190,110,80,1) 100%)}
.kartica__slika::before,.proizvod__slika::before{content:"";position:absolute;inset:0;z-index:1;pointer-events:none;mix-blend-mode:multiply;transition:opacity .4s ease-in-out;background:radial-gradient(ellipse at 50% 45%,rgba(0,0,0,0) 45%,rgba(60,20,10,.4) 100%)}
.kartica:hover .kartica__slika img{filter:var(--ton-filter-hover)}
.kartica:hover .kartica__slika::after,.kartica:hover .kartica__slika::before{opacity:.2}
/* Gotova grafika (npr. gift card, meta _spa_bez_tona): bez toplog tona i vinjete, boje kao na naslovnici */
.kartica__slika--bez-tona img,.proizvod__slika--bez-tona img,.kartica:hover .kartica__slika--bez-tona img{filter:none}
.kartica__slika--bez-tona::after,.kartica__slika--bez-tona::before,.proizvod__slika--bez-tona::after,.proizvod__slika--bez-tona::before{display:none}

.kartica__tijelo{display:flex;flex-direction:column;flex:1;padding:var(--r3)}

/* Naziv bez verzala (audit P06): dugi nazivi u verzalu su zauzimali 3 reda i teško se čitali */
.kartica__naslov{margin:0;padding-bottom:var(--r2);border-bottom:1px solid var(--linija);font:400 19px/1.3 var(--akcent);letter-spacing:.01em}
.kartica__naslov a{text-decoration:none}
.kartica__naslov a:hover{color:var(--zlato-tekst)}

.kartica__opis{margin-top:var(--r2);font-size:14px;line-height:1.65;color:var(--taupe);
  display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden}

/* Izbor trajanja / broja tretmana */
.kartica__izbor{margin-top:var(--r2)}
.kartica__izbor-naslov{margin-bottom:var(--r1);font:600 11px/1.3 var(--sans);letter-spacing:.1em;text-transform:uppercase}
.kartica__opcije{display:flex;flex-wrap:wrap;gap:var(--r1)}
.kartica__opcija{min-width:44px;min-height:40px;padding:0 var(--r1);border:1px solid var(--ponoc);border-radius:2px;background:transparent;color:var(--ponoc);font:500 14px/1 var(--sans);cursor:pointer;transition:background-color .2s,color .2s}
.kartica__opcija:hover{background:var(--pijesak)}
.kartica__opcija.je-izabrano,.kartica__opcija.je-izabrano:hover{background:var(--ponoc);color:var(--krem)}
/* Prozor "U kojem salonu?" (otvara se pri kupovini usluge koja se nudi u oba salona) */
.salon-prozor__usluga{margin-bottom:0}
.salon-prozor__izbor{display:grid;gap:var(--r2);margin-top:var(--r4)}
.salon-prozor__salon{display:flex;align-items:center;gap:var(--r3);width:100%;padding:var(--r2) var(--r3);border:1px solid var(--linija);border-radius:3px;background:var(--krem);color:var(--ponoc);text-align:left;cursor:pointer;transition:border-color .2s,background-color .2s}
.salon-prozor__salon[hidden]{display:none}
.salon-prozor__salon:hover{border-color:var(--ponoc);background:var(--pijesak)}
.salon-prozor__znak{display:inline-flex;align-items:center;justify-content:center;flex:none;width:48px;height:48px;border-radius:50%}
.salon-prozor__znak img{width:auto;height:28px}
.salon-prozor__salon--amman .salon-prozor__znak{background:var(--espresso)}
.salon-prozor__salon--sultan .salon-prozor__znak{background:var(--zlato)}
.salon-prozor__tekst{display:flex;flex-direction:column;gap:4px}
.salon-prozor__naziv{font:400 18px/1.2 var(--akcent);letter-spacing:.05em;text-transform:uppercase}
.salon-prozor__adresa{font-size:13px;line-height:1.4;color:var(--taupe)}

/* Cijena i dugmad uvijek pri dnu kartice (kartice u redu su iste visine) */
.kartica__podnozje{margin-top:auto;padding-top:var(--r2)}
.kartica__cijena{margin-bottom:var(--r2);padding-top:var(--r2);border-top:1px solid var(--linija);text-align:right;font:500 20px/1.2 var(--sans);letter-spacing:.02em;color:var(--zlato-tekst)}
/* Brojevi u nazivu: Marcellus ima starinske brojke (10 liči na "IO"), pa cifre idu u Montserratu */
.kartica__naslov .broj{font-family:var(--sans);font-size:.9em;letter-spacing:.02em}
/* Razmak prije "KM" daje već WooCommerce (položaj valute "desno sa razmakom"); dodatna margina je pravila dupli razmak (P20) */

.kartica__dugmad{display:grid;grid-template-columns:1fr 1fr;gap:var(--r1)}
.kartica__dugme{display:inline-flex;align-items:center;justify-content:center;min-height:48px;padding:0 var(--r1);border:1px solid var(--ponoc);border-radius:2px;font:600 12px/1.2 var(--sans);letter-spacing:.1em;text-transform:uppercase;text-align:center;text-decoration:none;cursor:pointer;transition:background-color .2s,color .2s,opacity .2s}
/* "Kupi vaučer" je primarno dugme: usluge se kupuju kroz vaučer (Senad 30.10.2026); "Rezerviši" je sporedno */
.kartica__dugme--vaucer{background:var(--ponoc);color:var(--krem)}
.kartica__dugme--vaucer:hover{background:var(--espresso);border-color:var(--espresso)}
.kartica__dugme--rezervisi{background:transparent;color:var(--ponoc)}
.kartica__dugme--rezervisi:hover{background:var(--pijesak)}
.kartica__dugme.ucitava{opacity:.55;pointer-events:none}
.kartica__dugme.dodano{background:var(--espresso);border-color:var(--espresso)}
/* Oznaka salona ispod naziva (P19): Amman espresso, Sultan tamno zlato (kontrast ~5,6:1 na krem) */
.kartica__saloni{margin:12px 0 0;font:600 11px/1.3 var(--sans);letter-spacing:.12em;text-transform:uppercase}
.kartica__salon--amman{color:var(--espresso)}
.kartica__salon--sultan{color:var(--zlato-tekst)}
.kartica__salon-razmak{color:var(--linija)}

.kartica__poruka{margin-top:var(--r1);font-size:13px;line-height:1.4;color:var(--zlato-tekst)}
.kartica__poruka a{font-weight:600}
.kartica__poruka.je-greska{color:#9B2C2C}

/* --- Prozor "Dodano u korpu" ------------------------------------------------ */
.korpa-prozor{width:min(480px,calc(100vw - 32px));padding:var(--r6) var(--r4) var(--r4);border:0;border-radius:3px;background:var(--bijela);color:var(--ponoc);text-align:center;box-shadow:0 20px 60px rgba(28,25,22,.25);
  opacity:0;transform:translateY(12px);transition:opacity .35s,transform .35s}
.korpa-prozor[open]{opacity:1;transform:none}
@starting-style{.korpa-prozor[open]{opacity:0;transform:translateY(12px)}}
.korpa-prozor::backdrop{background:rgba(28,25,22,.55)}
.korpa-prozor__zatvori{position:absolute;top:var(--r1);right:var(--r2);width:40px;height:40px;border:0;background:none;color:var(--ponoc);font:300 30px/1 var(--sans);cursor:pointer}
.korpa-prozor__zatvori:hover{color:var(--zlato-tekst)}
.korpa-prozor__znak{width:48px;height:1px;margin:0 auto var(--r3);background:var(--zlato)}
.korpa-prozor__naslov{font:400 26px/1.3 var(--akcent);letter-spacing:.04em;text-transform:uppercase}
.korpa-prozor__usluga{margin-top:var(--r2);font-size:15px;line-height:1.5;color:var(--taupe)}
.korpa-prozor__dugmad{display:flex;flex-wrap:wrap;align-items:center;justify-content:center;gap:var(--r3);margin-top:var(--r4)}
.korpa-prozor__nastavi{padding:var(--r1) 0;border:0;border-bottom:1px solid var(--ponoc);background:none;color:var(--ponoc);font:600 12px/1.2 var(--sans);letter-spacing:.1em;text-transform:uppercase;cursor:pointer}
.korpa-prozor__nastavi:hover{color:var(--zlato-tekst);border-color:var(--zlato-tekst)}
.korpa-prozor__korpa{display:inline-flex;align-items:center;min-height:48px;padding:0 var(--r4);background:var(--ponoc);color:var(--krem);border-radius:2px;font:600 12px/1.2 var(--sans);letter-spacing:.1em;text-transform:uppercase;text-decoration:none;transition:background-color .2s}
.korpa-prozor__korpa:hover{background:var(--espresso)}
@media (prefers-reduced-motion:reduce){.korpa-prozor{transition:none}}

@media (max-width:380px){
  .kartica__dugmad{grid-template-columns:1fr}
}
@media (prefers-reduced-motion:reduce){
  .kartica,.kartica__slika img,.kartica__dugme,.kartica__opcija{transition:none}
  .kartica:hover .kartica__slika img{transform:none}
}