@import url("https://fonts.googleapis.com/css2?family=Afacad:ital,wght@0,400..700;1,400..700&family=League+Spartan:wght@100..900&display=swap");
html {
  background-color: rgb(255, 255, 255);
  color: #ffffff;
  padding: 0%;
  margin: 0;
  font-family: "Afacad";
  width: 100%;
  overflow-x: hidden;
}
body {
  margin: 0%;
  overflow-x: hidden;
}

.hero {
  position: relative;
  display: flex;
  flex-direction: column;
  background-color: #2e2e2e21;
  -webkit-backdrop-filter: blur(9px);
  backdrop-filter: blur(9px);
  width: 100%;
  z-index: 100;
  overflow-x: hidden;
  overflow-y: hidden;

  /* ključ: počni ispod traka… */
  padding-top: var(--kc-headerH);
}

.hero-header-backdrop-positioner {
  position: fixed;
  left: 0;
  right: 0;
  top: var(
    --kc-headerH,
    0px
  ); /* start odmah ispod nav + (po potrebi) mobile searcha */
  height: 30dvh; /* 40% ekrana */
  height: 30svh; /* fallback */
  height: 30vh; /* fallback */
  display: flex;
  justify-content: center;
  align-items: center;
  pointer-events: none;
  z-index: 50; /* iznad videa, ispod teksta */
}

.hero-header-backdrop {
  width: clamp(90px, 20vw, 200px);
  height: auto;
}

.hero-header {
  position: relative;
  /* Jedna “glavna” veličina iz koje sve proizlazi */
  --hero-h1: clamp(5.6rem, 2rem + 2.8vmin, 7.5rem);
  /* Paragraf izračunat iz h1 (s razumnim granicama) */
  --hero-p: clamp(1rem, calc(var(--hero-h1) * 0.27523), 1.6rem);
  z-index: 100; /* iznad backdropa */
  text-align: center;
  margin-top: 12dvh; /* 20% ekrana razmaka ispod nav-a */
  margin-top: 12svh; /* fallback */
  margin-top: 12vh; /* fallback */
  margin-bottom: 12dvh;
  margin-bottom: 12svh;
  margin-bottom: 12vh;
}
.hero-header h1 {
  font-family: "League Spartan", system-ui, sans-serif;
  font-size: var(--hero-h1);
  line-height: 1.05;
  margin: 0;
}

.hero-header p {
  font-size: var(--hero-p);
  line-height: 1.15;
  margin: 0;
}

/* Overrides specific to wishlist */
.webshop {
  margin-top: 0;
}

.filter-sort.hidden {
  display: none;
}

/* === Product Modal === */
.product-modal {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.55);
  display: none;
  z-index: 999999;
}
.product-modal.is-open {
  display: grid;
  place-items: center;
}
.pm-dialog {
  width: min(900px, 92vw);
  background: #fff;
  border-radius: 16px;
  padding: 18px;
  border: 1px solid #e9eef7;
  box-shadow: 0 20px 60px rgba(0, 0, 0, 0.25);
  max-height: 90vh;
  overflow: auto;
}
.pm-head {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 10px;
}
.pm-title {
  font-family: "League Spartan";
  font-weight: 800;
  font-size: 1.6rem;
  color: #2b2b2b;
  margin: 0;
}
.pm-close {
  background: transparent;
  border: none;
  font-size: 1.8rem;
  cursor: pointer;
  line-height: 1;
}
.pm-body {
  display: grid;
  grid-template-columns: 320px 1fr;
  gap: 18px;
}
.pm-img {
  width: 100%;
  height: 280px;
  object-fit: contain;
  border: 1px solid #ebeff7;
  border-radius: 12px;
  background: #fff;
}
.pm-price .now {
  font-size: 1.6rem;
  font-weight: 800;
  color: #2b2b2b;
}
.pm-price .was {
  color: #9aa6c5;
  text-decoration: line-through;
  margin-left: 8px;
}
.pm-desc {
  color: #4d5363;
  margin-top: 6px;
}

/* tiny spacing for the toolbar */
.product-toolbar {
  display: flex;
  justify-content: flex-end;
  margin: 0 0 10px;
}

/* lijevi panel sekcije */
.fs-section + .fs-section {
  margin-top: 18px;
}
.fs-title {
  font-family: "League Spartan";
  font-weight: 800;
  color: #2b2b2b;
  font-size: 1.25rem;
  margin: 0 0 6px;
}
.fs-list {
  list-style: none;
  margin: 0;
  padding: 0;
}
.fs-list li {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px 2px;
  color: #2b2b2b;
}
.fs-list input[type="checkbox"] {
  accent-color: #22549f;
}
.fs-link {
  text-decoration: none;
  color: #2b2b2b;
}
.fs-link:hover {
  color: #22549f;
}

.product-title {
  font-family: "League Spartan";
  font-weight: 800;
  color: #2b2b2b;
  font-size: clamp(1.4rem, 2.4vw, 2rem);
  margin: 8px 0;
}

/* sort dropdown */
.sort-wrap {
  margin-left: auto;
}
.sort-select {
  border: 1px solid #d9def0;
  border-radius: 12px;
  background: #fff;
  padding: 8px 12px;
  font-family: inherit;
  color: #2b2b2b;
}

.product-container.empty {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  height: 100%;
  width: 100%;
}

.product-container .empty-wishlist {
  width: fit-content;
  border-bottom: #22549f 2px solid;
}

/* pagination button */
.shop-load-more {
  display: flex;
  justify-content: center;
  margin: 18px 0 8px;
}
.shop-load-more button {
  background: #22549f;
  color: #fff;
  border: 0;
  border-radius: 999px;
  padding: 12px 28px;
  cursor: pointer;
  box-shadow: 0 6px 16px rgba(34, 84, 159, 0.25);
}
.shop-load-more button:hover {
  background: #0a387e;
}

.shop-btn {
  background-color: #22549f;
  padding: 1rem;
  width: 10rem;
  color: #ffffff;
  text-decoration: none;
  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.596);
  transition: all ease-in-out 0.5s;
  text-align: center;
  border-radius: 5em;
  font-size: 1.2rem;
}

.shop-btn:hover {
  background-color: #0a387e;
  transform: scale(1.1);
}

:root {
  --kc-bg: #2c2c2c;
  --kc-text: #f2f2f2;
  --kc-dim: #cfcfcf;
  --kc-accent: #2f56a6;
}

@media (max-width: 980px) {
  .webshop {
    grid-template-columns: 1fr;
  }
  .webshop-col-1 {
    position: static;
  }
  .webshop {
    margin-top: 0;
  }
}
@media (max-width: 700px) {
  .pm-body {
    grid-template-columns: 1fr;
  }
}

.webshop.wl-empty {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-start;
  width: 100%;
  padding-inline: 24px;
}
.webshop.wl-empty .webshop-col-2 {
  margin-left: 0;
  max-width: min(600px, 90vw);
  width: 100%;
}
.webshop-col-1.hidden {
  display: none !important;
}
.webshop.wl-empty .product-container {
  width: 100%;
  display: flex;
  justify-content: center;
  text-align: center;
}