/* Stranica shopa (modul shop-stranica). HTML: page-templates/shop-arhiva.php
   Kartice: shop-kartica.css. Boje i razmaci: varijable u glavni.css (:root). */

/* --- Uvod ------------------------------------------------------------------ */
.shop__uvod{padding-top:var(--r8);padding-bottom:var(--r4);text-align:center}
.shop__nadnaslov{margin-bottom:var(--r2);font:600 12px/1.3 var(--sans);letter-spacing:.2em;text-transform:uppercase;color:var(--zlato-tekst)}
.shop__naslov{margin-bottom:var(--r3);font:400 clamp(34px,5vw,56px)/1.1 var(--akcent);letter-spacing:.03em}
.shop__uvod .ornament{color:var(--zlato);margin-bottom:var(--r3)}
.shop__tekst{max-width:560px;margin:0 auto;color:var(--taupe)}

/* --- Kategorije ------------------------------------------------------------- */
.shop__kategorije{display:flex;flex-wrap:wrap;justify-content:center;gap:var(--r1);padding:var(--r3) 0;border-top:1px solid var(--linija);border-bottom:1px solid var(--linija)}
/* Isti obrazac kao navigacija cjenovnika (audit P18): mobitel = pilule koje se klize, računar = tabovi sa zlatnom linijom */
.shop__kategorija{display:inline-flex;align-items:center;min-height:40px;padding:0 var(--r2);border:1px solid var(--linija);border-radius:999px;background:var(--bijela);font:600 12px/1.2 var(--sans);letter-spacing:.08em;text-transform:uppercase;text-decoration:none;color:var(--espresso);transition:background-color .2s,color .2s,border-color .2s}
.shop__kategorija:hover{border-color:var(--ponoc)}
.shop__kategorija.je-izabrano{background:var(--ponoc);border-color:var(--ponoc);color:var(--krem)}
@media (min-width:621px){
  .shop__kategorije{gap:0 24px;padding:var(--r1) 0}
  .shop__kategorija{min-height:42px;padding:0;border:0;border-bottom:2px solid transparent;border-radius:0;background:transparent;letter-spacing:.1em;color:var(--taupe)}
  .shop__kategorija:hover,.shop__kategorija:focus-visible{border-color:var(--zlato);color:var(--espresso)}
  .shop__kategorija.je-izabrano{background:transparent;border-color:var(--zlato);color:var(--ponoc)}
}
/* Red podkategorija (npr. unutar Tretmani ljepote): bez gornje linije, manje dugme */
.shop__kategorije--pod{border-top:0;padding-top:var(--r2)}
.shop__kategorije--pod .shop__kategorija{min-height:34px;font-size:11px}

/* Razmak između kategorija i mreže kartica (mreža je u shop-kartica.css) */
.shop ul.products{margin-top:var(--r4)}

/* --- Paginacija --------------------------------------------------------------- */
/* Veća specifičnost jer WooCommerce stilovi crtaju okvire oko cijele liste i svakog broja */
html body nav.woocommerce-pagination{margin:var(--r6) 0 var(--r8);text-align:center}
html body nav.woocommerce-pagination ul.page-numbers{display:flex;flex-wrap:wrap;justify-content:center;gap:var(--r1);margin:0;padding:0;list-style:none;border:0}
html body nav.woocommerce-pagination ul.page-numbers li{margin:0;padding:0;border:0;float:none;overflow:visible}
html body nav.woocommerce-pagination ul.page-numbers li a.page-numbers,html body nav.woocommerce-pagination ul.page-numbers li span.page-numbers{display:inline-flex;align-items:center;justify-content:center;min-width:44px;min-height:44px;margin:0;padding:0 var(--r1);border:1px solid var(--linija);border-radius:2px;background:var(--bijela);color:var(--ponoc);font:500 14px/1 var(--sans);text-decoration:none;transition:border-color .2s,background-color .2s}
html body nav.woocommerce-pagination ul.page-numbers li a.page-numbers:hover{border-color:var(--ponoc);background:var(--bijela);color:var(--ponoc)}
html body nav.woocommerce-pagination ul.page-numbers li span.current{background:var(--ponoc);border-color:var(--ponoc);color:var(--krem)}
html body nav.woocommerce-pagination ul.page-numbers li span.dots{border-color:transparent;background:transparent}

.shop__prazno{margin:var(--r8) 0;text-align:center;color:var(--taupe)}

@media (max-width:620px){
  .shop__uvod{padding-top:var(--r6)}
  .shop__kategorije{justify-content:flex-start;flex-wrap:nowrap;overflow-x:auto;margin:0 calc(var(--r2) * -1);padding-left:var(--r2);padding-right:var(--r2);scrollbar-width:none}
  .shop__kategorije::-webkit-scrollbar{display:none}
  .shop__kategorija{flex:0 0 auto}
}