/* FL Trgovina — kartica proizvoda, niz proizvoda, hero banneri.
   Sve vrijednosti su ACSS tokeni (ili izvedenice tokena preko calc/color-mix). */

:root {
  /* Akcijska crvena: između ACSS danger (L 0.65) i danger-semi-dark (L 0.35),
     da bijeli tekst na njoj i ona kao tekst na bijelom prođu 4,5:1. */
  --fl-sale: color-mix(in oklch, var(--danger) 50%, var(--danger-semi-dark));
  --fl-hairline: color-mix(in oklch, var(--black) 10%, transparent);
  --fl-tap: calc(var(--text-m) * 2.75); /* ≥ 44 px */
}

/* ---------- Kartica proizvoda ---------- */

.fl-card {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: calc(var(--space-xs) * 0.75);
  block-size: 100%;
  min-inline-size: 0;
  color: var(--base);
}
.fl-card__media {
  position: relative;
  aspect-ratio: 1;
  overflow: hidden;
  background-color: var(--white);
  border: var(--border-width) var(--border-style) var(--fl-hairline);
  border-radius: var(--radius);
}
.fl-card__image {
  display: block;
  inline-size: 100%;
  block-size: 100%;
  padding: calc(var(--space-xs) * 0.75);
  object-fit: contain;
  transition: transform 0.3s ease;
}
@media (hover: hover) {
  .fl-card:hover .fl-card__image {
    transform: scale(1.04);
  }
}
.fl-card__badge {
  position: absolute;
  inset-block-start: calc(var(--space-xs) * 0.75);
  inset-inline-start: calc(var(--space-xs) * 0.75);
  padding: calc(var(--space-xs) * 0.25) calc(var(--space-xs) * 0.6);
  border-radius: var(--radius);
  font-size: var(--text-xs);
  font-weight: 700;
  line-height: 1.2;
}
.fl-card__badge--sale {
  background-color: var(--fl-sale);
  color: var(--white);
}
.fl-card__badge--new,
.fl-card__badge--member {
  background-color: var(--primary);
  color: var(--base);
}
.fl-card__badge--outlet {
  background-color: var(--base);
  color: var(--white);
  letter-spacing: 0.02em;
}
.fl-card__body {
  display: flex;
  flex: 1;
  flex-direction: column;
  gap: calc(var(--space-xs) * 0.5);
}
.fl-card__brand {
  color: var(--text-dark-muted);
  font-size: var(--text-xs);
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}
.fl-card__title {
  display: -webkit-box;
  min-block-size: calc(var(--text-s) * 1.35 * 2);
  margin: 0;
  overflow: hidden;
  font-size: var(--text-s);
  font-weight: 500;
  line-height: 1.35;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  line-clamp: 2;
}
.fl-card__link {
  color: inherit;
  text-decoration: none;
}
.fl-card__link::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
}
.fl-card__link:focus-visible {
  outline: none;
}
.fl-card:has(.fl-card__link:focus-visible) {
  outline: var(--focus-width) solid var(--focus-color);
  outline-offset: var(--focus-offset);
  border-radius: var(--radius);
}
.fl-card__price {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 0 calc(var(--space-xs) * 0.5);
  font-size: var(--text-m);
  font-weight: 700;
  line-height: 1.3;
}
.fl-card__price del {
  order: 2;
  color: var(--text-dark-muted);
  font-size: var(--text-s);
  font-weight: 400;
}
.fl-card__price ins {
  order: 1;
  color: var(--fl-sale);
  text-decoration: none;
}
.fl-card__deal {
  color: var(--fl-sale);
  font-size: var(--text-xs);
  font-weight: 700;
}
.fl-card .fl-card__button {
  position: relative;
  z-index: 2;
  display: flex;
  align-items: center;
  justify-content: center;
  min-block-size: var(--fl-tap);
  margin-block-start: auto;
  padding: 0 var(--space-s);
  background-color: var(--white);
  border: var(--border-width) solid var(--base);
  border-radius: var(--radius);
  color: var(--base);
  font-size: var(--text-s);
  font-weight: 600;
  line-height: 1.2;
  text-align: center;
  text-decoration: none;
  transition: background-color 0.2s ease, color 0.2s ease;
}
.fl-card .fl-card__button:hover,
.fl-card .fl-card__button--added {
  background-color: var(--base);
  color: var(--white);
}
.fl-card .fl-card__button:focus-visible {
  outline: var(--focus-width) solid var(--focus-color);
  outline-offset: var(--focus-offset);
}
.fl-card .fl-card__button.loading {
  opacity: 0.6;
  pointer-events: none;
}
.fl-card .fl-card__button::after {
  display: none;
}
.fl-card .added_to_cart {
  display: none;
}

/* Kartica na tamnoj traci (Outlet). */
.fl-on-dark .fl-card {
  padding: calc(var(--space-xs) * 0.75);
  background-color: var(--white);
  border-radius: var(--radius);
}
.fl-on-dark .fl-card__media {
  border-color: transparent;
}

/* ---------- Niz proizvoda: mobitel vodoravni scroll, desktop 5 stupaca ---------- */

.fl-rail {
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: calc((100% - var(--grid-gap)) / 2.2);
  gap: var(--grid-gap);
  margin-inline: calc(var(--gutter) * -1);
  padding-inline: var(--gutter);
  padding-block-end: calc(var(--space-xs) * 0.5);
  overflow-x: auto;
  overscroll-behavior-inline: contain;
  scroll-padding-inline: var(--gutter);
  scroll-snap-type: x mandatory;
  scrollbar-width: none;
}
.fl-rail::-webkit-scrollbar {
  display: none;
}
.fl-rail__item {
  min-inline-size: 0;
  scroll-snap-align: start;
}
@media (min-width: 768px) {
  .fl-rail {
    grid-auto-columns: calc((100% - var(--grid-gap) * 2) / 3.3);
  }
}
@media (min-width: 992px) {
  .fl-rail {
    grid-auto-flow: row;
    grid-template-columns: repeat(5, minmax(0, 1fr));
    margin-inline: 0;
    padding-inline: 0;
    overflow: visible;
  }
  .fl-rail__item:nth-child(n + 6) {
    display: none;
  }
}

/* ---------- Hero banneri ---------- */

.fl-hero {
  display: grid;
  gap: var(--grid-gap);
}
.fl-hero__item {
  position: relative;
  display: flex;
  min-inline-size: 0;
  overflow: hidden;
  background-color: var(--neutral-ultra-light);
  border-radius: var(--radius);
  isolation: isolate;
}
.fl-hero__item::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background-image: linear-gradient(to top, color-mix(in oklch, var(--black) 72%, transparent), color-mix(in oklch, var(--black) 20%, transparent) 55%, transparent 80%);
}
.fl-hero__media {
  position: absolute;
  inset: 0;
  z-index: -2;
}
.fl-hero__media picture {
  display: contents;
}
.fl-hero__image {
  display: block;
  inline-size: 100%;
  block-size: 100%;
  object-fit: cover;
  transition: transform 0.4s ease;
}
@media (hover: hover) {
  .fl-hero__item:hover .fl-hero__image {
    transform: scale(1.03);
  }
}
.fl-hero__body {
  display: flex;
  flex: 1;
  flex-direction: column;
  align-items: flex-start;
  justify-content: flex-end;
  gap: calc(var(--space-xs) * 0.75);
  min-inline-size: 0;
  padding: var(--space-m);
  color: var(--white);
}
.fl-hero__tag {
  padding: calc(var(--space-xs) * 0.25) calc(var(--space-xs) * 0.6);
  background-color: var(--white);
  border-radius: var(--radius);
  color: var(--base);
  font-size: var(--text-xs);
  font-weight: 700;
  letter-spacing: 0.04em;
  line-height: 1.3;
  text-transform: uppercase;
}
.fl-hero__tag--akcija {
  background-color: var(--fl-sale);
  color: var(--white);
}
.fl-hero__tag--novo,
.fl-hero__tag--proclub {
  background-color: var(--primary);
  color: var(--base);
}
.fl-hero__tag--brend {
  background-color: var(--base);
  color: var(--white);
}
.fl-hero__tag--edukacija {
  background-color: var(--primary-dark);
  color: var(--white);
}
.fl-hero__title {
  max-inline-size: 22ch;
  margin: 0;
  color: inherit;
  font-size: var(--h4);
  line-height: 1.1;
  text-wrap: balance;
}
.fl-hero__item--main .fl-hero__title {
  font-size: var(--h2);
}
.fl-hero__link {
  color: inherit;
  text-decoration: none;
}
.fl-hero__link::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
}
.fl-hero__link:focus-visible {
  outline: none;
}
.fl-hero__item:has(.fl-hero__link:focus-visible) {
  outline: var(--focus-width) solid var(--focus-color);
  outline-offset: var(--focus-offset);
}
.fl-hero__text {
  max-inline-size: 45ch;
  margin: 0;
  font-size: var(--text-m);
  line-height: 1.4;
}
.fl-hero__button {
  display: inline-flex;
  align-items: center;
  min-block-size: var(--fl-tap);
  margin-block-start: calc(var(--space-xs) * 0.5);
  padding-inline: var(--space-m);
  background-color: var(--white);
  border-radius: var(--radius);
  color: var(--base);
  font-size: var(--text-s);
  font-weight: 600;
}
.fl-hero__rest .fl-hero__button {
  display: none;
}
.fl-hero__rest .fl-hero__text {
  font-size: var(--text-s);
}

/* Mobitel: glavni 4:5, ostali vodoravni scroll (sljedeći viri). */
@media (max-width: 767px) {
  .fl-hero__item--main {
    aspect-ratio: 4 / 5;
  }
  .fl-hero__item--main .fl-hero__title {
    font-size: var(--h3);
  }
  .fl-hero__rest {
    display: flex;
    gap: var(--grid-gap);
    margin-inline: calc(var(--gutter) * -1);
    padding-inline: var(--gutter);
    overflow-x: auto;
    overscroll-behavior-inline: contain;
    scroll-padding-inline: var(--gutter);
    scroll-snap-type: x mandatory;
    scrollbar-width: none;
  }
  .fl-hero__rest::-webkit-scrollbar {
    display: none;
  }
  .fl-hero__rest .fl-hero__item {
    flex: 0 0 80%;
    aspect-ratio: 16 / 10;
    scroll-snap-align: start;
  }
  .fl-hero__rest .fl-hero__body {
    padding: var(--space-s);
  }
  .fl-hero__rest .fl-hero__text {
    display: none;
  }
}

/* Tablet i desktop: raspored po broju bannera na gridu od 12 stupaca. */
@media (min-width: 768px) {
  .fl-hero {
    grid-template-columns: repeat(12, minmax(0, 1fr));
  }
  .fl-hero__rest {
    display: contents;
  }
  .fl-hero__item--main {
    grid-column: 1 / -1;
  }
  .fl-hero--count-1 .fl-hero__item--main {
    aspect-ratio: 21 / 9;
  }
  .fl-hero--count-2 .fl-hero__item {
    aspect-ratio: 16 / 10;
  }
  .fl-hero--count-2 .fl-hero__item--main {
    grid-column: 1 / 7;
  }
  .fl-hero--count-2 .fl-hero__rest > .fl-hero__item {
    grid-column: 7 / 13;
  }
  .fl-hero--many .fl-hero__item--main {
    grid-column: 1 / 9;
    grid-row: 1 / 3;
    aspect-ratio: 2 / 1;
  }
  .fl-hero--many .fl-hero__rest > :nth-child(1) {
    grid-column: 9 / 13;
    grid-row: 1;
  }
  .fl-hero--many .fl-hero__rest > :nth-child(2) {
    grid-column: 9 / 13;
    grid-row: 2;
  }
  .fl-hero--many .fl-hero__rest > :nth-child(-n + 2) .fl-hero__body {
    padding: var(--space-s);
  }
  .fl-hero--many .fl-hero__rest > :nth-child(-n + 2) .fl-hero__text {
    display: none;
  }

  /* Banneri 4–7: red niskih kartica (sličica + oznaka + naslov). Tablet 2, desktop 4 u redu. */
  .fl-hero--many .fl-hero__rest > :nth-child(n + 3) {
    grid-column: span 6;
    grid-row: auto;
    align-items: center;
    gap: var(--space-s);
    padding: calc(var(--space-xs) * 0.75);
    border: var(--border-width) var(--border-style) var(--fl-hairline);
  }
  .fl-hero--many .fl-hero__rest > :nth-child(n + 3)::before {
    display: none;
  }
  .fl-hero--many .fl-hero__rest > :nth-child(n + 3) .fl-hero__media {
    position: relative;
    inset: auto;
    z-index: auto;
    flex: none;
    inline-size: calc(var(--text-m) * 4.5);
    aspect-ratio: 1;
    overflow: hidden;
    border-radius: var(--radius);
  }
  .fl-hero--many .fl-hero__rest > :nth-child(n + 3) .fl-hero__body {
    justify-content: center;
    gap: calc(var(--space-xs) * 0.5);
    padding: 0;
    color: var(--base);
  }
  .fl-hero--many .fl-hero__rest > :nth-child(n + 3) .fl-hero__title {
    font-size: var(--text-m);
  }
  .fl-hero--many .fl-hero__rest > :nth-child(n + 3) .fl-hero__tag {
    padding: 0;
    background: none;
    color: var(--primary-semi-dark);
  }
  .fl-hero--many .fl-hero__rest > :nth-child(n + 3) .fl-hero__tag--akcija {
    color: var(--fl-sale);
  }
  .fl-hero--many .fl-hero__rest > :nth-child(n + 3) .fl-hero__text {
    display: none;
  }
}
.fl-hero__image--empty {
  background-color: var(--neutral-ultra-light);
}

@media (min-width: 992px) {
  .fl-hero--many .fl-hero__rest > :nth-child(n + 3) {
    grid-column: span 3;
  }
}

/* ---------- Mreža proizvoda (arhiva) ---------- */

.fl-grid-wrap {
  container-type: inline-size;
}
ul.products.fl-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--space-m) var(--grid-gap);
  margin: 0;
  padding: 0;
  list-style: none;
}
ul.products.fl-grid::before,
ul.products.fl-grid::after {
  display: none;
}
ul.products.fl-grid li.product.fl-grid__item {
  float: none;
  inline-size: auto;
  min-inline-size: 0;
  margin: 0;
  padding: 0;
}
@container (min-width: 600px) {
  ul.products.fl-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}
@container (min-width: 880px) {
  ul.products.fl-grid {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }
}
@container (min-width: 1180px) {
  ul.products.fl-grid {
    grid-template-columns: repeat(5, minmax(0, 1fr));
  }
}

/* ---------- Arhiva: zaglavlje, alatna traka, paginacija, prazno stanje ---------- */

.fl-archive__head {
  display: flex;
  flex-direction: column;
  gap: var(--space-xs);
}
.fl-archive__crumbs {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0 calc(var(--space-xs) * 0.6);
  color: var(--text-dark-muted);
  font-size: var(--text-xs);
}
.fl-archive__crumbs a {
  display: inline-flex;
  align-items: center;
  min-block-size: calc(var(--fl-tap) * 0.75);
  color: inherit;
  text-decoration: underline;
  text-underline-offset: 0.2em;
}
.fl-archive__crumb-sep {
  opacity: 0.6;
}
.fl-archive__intro {
  display: flex;
  align-items: center;
  gap: var(--space-s);
}
.fl-archive__logo {
  display: flex;
  flex: none;
  align-items: center;
  justify-content: center;
  inline-size: calc(var(--text-m) * 7);
  block-size: calc(var(--text-m) * 4);
  padding: calc(var(--space-xs) * 0.75);
  background-color: var(--white);
  border: var(--border-width) var(--border-style) var(--fl-hairline);
  border-radius: var(--radius);
}
.fl-archive__logo img {
  max-inline-size: 100%;
  max-block-size: 100%;
  inline-size: auto;
  block-size: auto;
  object-fit: contain;
}
.fl-archive__text {
  display: flex;
  flex-direction: column;
  gap: calc(var(--space-xs) * 0.5);
  min-inline-size: 0;
}
.fl-archive__title {
  margin: 0;
  font-size: var(--h2);
  line-height: 1.1;
}
.fl-archive__lead {
  max-inline-size: 60ch;
  margin: 0;
  color: var(--text-dark-muted);
  font-size: var(--text-m);
}
.fl-archive__desc {
  max-inline-size: 75ch;
  color: var(--text-dark-muted);
  font-size: var(--text-s);
}
.fl-archive__desc > * {
  margin: 0;
}
.fl-archive__desc > * + * {
  margin-block-start: var(--space-xs);
}
.fl-archive__toolbar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-xs) var(--space-s);
  padding-block: var(--space-xs);
  border-block: var(--border-width) var(--border-style) var(--fl-hairline);
}
.fl-archive__count {
  margin: 0 auto 0 0;
  color: var(--text-dark-muted);
  font-size: var(--text-s);
}
.fl-archive__mobile-filters:empty {
  display: none;
}
@media (min-width: 992px) {
  .fl-archive__mobile-filters {
    display: none;
  }
}
.fl-archive__sort .woocommerce-ordering {
  margin: 0;
}
.fl-archive__sort select.orderby {
  min-block-size: var(--fl-tap);
  padding-inline: var(--space-s) calc(var(--space-s) * 2);
  background-color: var(--white);
  border: var(--border-width) var(--border-style) var(--border-color-dark);
  border-radius: var(--radius);
  color: var(--base);
  font-size: var(--text-s);
}
.fl-archive__pagination {
  display: flex;
  justify-content: center;
  margin-block-start: var(--space-l);
}
.fl-archive__pagination ul.page-numbers {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: calc(var(--space-xs) * 0.5);
  margin: 0;
  padding: 0;
  list-style: none;
}
.fl-archive__pagination ul.page-numbers > li > .page-numbers {
  display: flex;
  align-items: center;
  justify-content: center;
  min-inline-size: var(--fl-tap);
  min-block-size: var(--fl-tap);
  padding-inline: calc(var(--space-xs) * 0.75);
  border: var(--border-width) var(--border-style) var(--fl-hairline);
  border-radius: var(--radius);
  color: var(--base);
  font-size: var(--text-s);
  font-weight: 600;
  text-decoration: none;
}
.fl-archive__pagination ul.page-numbers > li > a.page-numbers:hover {
  border-color: var(--base);
}
.fl-archive__pagination ul.page-numbers > li > .current {
  background-color: var(--base);
  border-color: var(--base);
  color: var(--white);
}
.fl-archive__pagination ul.page-numbers > li > .dots {
  border-color: transparent;
}
.fl-archive__empty {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--space-xs);
  padding: var(--space-l) var(--space-m);
  background-color: var(--neutral-ultra-light);
  border-radius: var(--radius);
}
.fl-archive__empty-title {
  margin: 0;
  font-size: var(--h4);
}
.fl-archive__empty p {
  max-inline-size: 60ch;
  margin: 0;
}

/* ---------- FiboFilters (arhiva) ---------- */

:root {
  --fibofilters--colors--base: var(--base);
  --fibofilters--colors--link: var(--primary-semi-dark);
  --fibofilters--colors-input-border: var(--border-color-dark);
}
.fl-archive__aside .fibofilters-block {
  padding-block: var(--space-s);
  border-block-end: var(--border-width) var(--border-style) var(--fl-hairline);
}
.fl-archive__aside .fibofilters-block:first-child {
  padding-block-start: 0;
}
.fibofilters-block__headline-box-inner {
  font-size: var(--text-l);
}
.fibofilters-block__pre-headline {
  color: var(--text-dark-muted);
  font-size: var(--text-xs);
  letter-spacing: 0.04em;
  text-transform: uppercase;
}
.fibofilters-block__breadcrumbs {
  display: flex;
  flex-wrap: wrap;
  gap: 0 calc(var(--space-xs) * 0.4);
  color: var(--text-dark-muted);
  font-size: var(--text-xs);
}
.fibofilters-block__breadcrumbs a {
  color: var(--base);
  font-weight: 600;
  text-decoration: underline;
  text-underline-offset: 0.2em;
}
.fibofilters-block__breadcrumbs::before {
  content: "‹";
}
/* Brojač uz naziv, u zagradi: „Njega i tretmani (864)” */
.fibofilters-block .fibofilters-item {
  justify-content: flex-start;
}
.fibofilters-block .fibofilters-item--link .fibofilters-item__interactive {
  flex: 0 1 auto;
}
.fibofilters-block .fibofilters-item__counter {
  margin-inline: calc(var(--space-xs) * 0.35) 0;
  color: var(--text-dark-muted);
  font-size: var(--text-xs);
}
.fibofilters-block .fibofilters-item__counter::before {
  content: "(";
}
.fibofilters-block .fibofilters-item__counter::after {
  content: ")";
}
.fibofilters-block .fibofilters-item__counter_bracket {
  display: none;
}
.fibofilters-item--link .fibofilters-item__interactive {
  color: var(--base);
  text-decoration: none;
}
.fibofilters-item--link .fibofilters-item__interactive:hover {
  text-decoration: underline;
  text-underline-offset: 0.2em;
}
.fibofilters-block .fibofilters-item--link {
  display: flex;
  align-items: baseline;
}
.fibofilters-block .fibofilters-item--link .fibofilters-item__interactive,
.fibofilters-block .fibofilters-item__label {
  flex: 0 1 auto;
  inline-size: auto;
}
.fibofilters-block.fibofilters-block .fibofilters-block__breadcrumbs a {
  color: var(--base);
}
.fibofilters-block.fibofilters-block .fibofilters-more-less {
  color: var(--primary-semi-dark);
  font-weight: 600;
}
/* FiboFilters boje: varijable na kontejnerima (plugin ih koristi s !important). */
[class*="fibofilters-"][class*="-filters-container"],
.fibofilters-block {
  --fibofilters--colors--base: var(--base);
  --fibofilters--colors--link: var(--primary-semi-dark);
  --fibofilters--colors-input-border: var(--border-color-dark);
}
/* Mobitel: broj + sortiranje u prvom redu, FiboFilters gumbi (Kategorije, Brend, Svi filteri) ispod. */
.fl-archive__mobile-filters {
  flex-basis: 100%;
  order: 3;
  min-inline-size: 0;
}