/* FL Trgovina — vlastiti prikaz pretrage (23.10.2026., Marko, wireframe). Sve vrijednosti iz ACSS tokena.
   .fl-pr--desk: dropdown u zaglavlju (unutar .fl-header__search), .fl-pr--mob: overlay preko cijelog ekrana. */

html:not(.dwc-mobile) .fl-header__search { position: relative; }

.fl-pr { --fl-pr-pad: var(--space-s); color: var(--base); font-size: var(--text-s); line-height: 1.3; }
.fl-pr[hidden] { display: none !important; }
.fl-pr a { color: inherit; text-decoration: none; }
.fl-pr b { font-weight: 700; }
.fl-pr__muted { color: var(--text-dark-muted); font-weight: 400; }

/* ---------- desktop ---------- */
.fl-pr--desk {
  position: absolute;
  inset-block-start: calc(100% + var(--space-xs) * 0.5);
  inset-inline-start: 0;
  z-index: 1200;
  display: grid;
  grid-template-columns: minmax(0, 3fr) minmax(0, 2fr);
  grid-template-rows: minmax(0, 1fr) auto;
  inline-size: 100%;
  max-block-size: calc(100dvh - var(--fl-sticky-top, 0px) - var(--space-xl));
  background-color: var(--white);
  border: var(--border-width) var(--border-style) var(--fl-hairline);
  border-radius: var(--radius);
  box-shadow: var(--box-shadow-2, var(--box-shadow-1));
  overflow: hidden;
}
.fl-pr--desk .fl-pr__top { display: none; }
.fl-pr--desk .fl-pr__body { display: contents; }
.fl-pr--desk .fl-pr__main { grid-column: 1; grid-row: 1; min-block-size: 0; overflow: auto; padding: var(--fl-pr-pad) var(--fl-pr-pad) calc(var(--space-xs) * 0.5); }
.fl-pr--desk .fl-pr__panel { grid-column: 2; grid-row: 1 / span 2; min-block-size: 0; overflow: auto; padding: var(--fl-pr-pad); background-color: var(--neutral-ultra-light); border-inline-start: var(--border-width) var(--border-style) var(--fl-hairline); }
.fl-pr--desk .fl-pr__panel[hidden] { display: none; }
.fl-pr--desk:has(.fl-pr__panel[hidden]) { grid-template-columns: minmax(0, 1fr); }
.fl-pr--desk .fl-pr__foot { grid-column: 1; grid-row: 2; padding: calc(var(--space-xs) * 0.5) var(--fl-pr-pad) var(--fl-pr-pad); }
.fl-pr--desk .fl-pr__foot[hidden] { display: none; }
.fl-pr.is-loading .fl-pr__main { opacity: 0.6; transition: opacity var(--transition-duration) var(--transition-timing); }

/* ---------- mobitel ---------- */
.fl-pr--mob {
  position: fixed;
  inset: 0;
  z-index: 100000;
  display: flex;
  flex-direction: column;
  background-color: var(--white);
}
html.fl-pr-otvoreno { overflow: hidden; }
.fl-pr--mob .fl-pr__top {
  display: flex;
  flex: none;
  align-items: center;
  gap: var(--space-xs);
  padding: var(--space-xs) var(--fl-pr-pad);
  padding-block-start: calc(var(--space-xs) + env(safe-area-inset-top));
  border-block-end: var(--border-width) var(--border-style) var(--fl-hairline);
}
.fl-pr__polje { position: relative; flex: 1 1 auto; min-inline-size: 0; }
.fl-pr__input {
  inline-size: 100%;
  block-size: var(--fl-tap);
  margin: 0;
  padding-inline: var(--space-s) calc(var(--fl-tap) * 0.9);
  background-color: var(--white);
  border: calc(var(--border-width) * 2) var(--border-style) var(--base);
  border-radius: var(--radius);
  color: var(--base);
  font-size: var(--text-m);
  -webkit-appearance: none;
  appearance: none;
}
.fl-pr__input::-webkit-search-cancel-button { -webkit-appearance: none; appearance: none; }
.fl-pr__input:focus { outline: none; box-shadow: none; }
.fl-pr__ocisti {
  position: absolute;
  inset-block: 0;
  inset-inline-end: 0;
  inline-size: calc(var(--fl-tap) * 0.9);
  padding: 0;
  background: none;
  border: 0;
  color: var(--text-dark-muted);
  cursor: pointer;
}
.fl-pr__ocisti::before, .fl-pr__ocisti::after { content: ""; position: absolute; inset-block-start: 50%; inset-inline-start: 50%; inline-size: calc(var(--text-m) * 0.9); block-size: calc(var(--border-width) * 2); background-color: currentColor; transform: translate(-50%, -50%) rotate(45deg); }
.fl-pr__ocisti::after { transform: translate(-50%, -50%) rotate(-45deg); }
.fl-pr__ocisti[hidden] { display: none; }
.fl-pr__odustani { flex: none; min-block-size: var(--fl-tap); padding: 0 calc(var(--space-xs) * 0.5); background: none; border: 0; color: var(--base); font: inherit; font-size: var(--text-m); font-weight: 600; cursor: pointer; }
.fl-pr--mob .fl-pr__body { flex: 1 1 auto; min-block-size: 0; overflow: auto; -webkit-overflow-scrolling: touch; }
.fl-pr--mob .fl-pr__main { padding: var(--space-xs) var(--fl-pr-pad) var(--space-m); }
.fl-pr--mob .fl-pr__panel { padding: 0 var(--fl-pr-pad) var(--space-m); }
.fl-pr--mob .fl-pr__panel:empty, .fl-pr--mob .fl-pr__panel[hidden] { display: none; }
.fl-pr--mob .fl-pr__panel .fl-pr__ctx--hint, .fl-pr--mob .fl-pr__det { display: none; }
/* Mobitel: kontekstni panel samo kad nosi radnju (Pitaj AI kod „nema rezultata”, prečaci kod praznog polja). */
.fl-pr--mob .fl-pr__panel:not(:has([data-ai], .fl-pr__precaci)) { display: none; }
/* Mobitel: čipovi (linije, kategorije) u jednom redu koji klizi prstom. */
.fl-pr--mob .fl-pr__main .fl-pr__chips { flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; margin-inline: calc(var(--fl-pr-pad) * -1); padding-inline: var(--fl-pr-pad); padding-block-end: calc(var(--space-xs) * 0.25); }
.fl-pr--mob .fl-pr__main .fl-pr__chips::-webkit-scrollbar { display: none; }
.fl-pr--mob .fl-pr__foot { flex: none; padding: calc(var(--space-xs) * 0.75) var(--fl-pr-pad); padding-block-end: calc(var(--space-xs) * 0.75 + env(safe-area-inset-bottom)); background-color: var(--white); border-block-start: var(--border-width) var(--border-style) var(--fl-hairline); }
.fl-pr--mob .fl-pr__foot[hidden] { display: none; }
.fl-pr--mob .fl-pr__sve { display: flex; align-items: center; justify-content: center; inline-size: 100%; min-block-size: var(--fl-tap); background-color: var(--base); border-color: var(--base); color: var(--white); }

/* ---------- sekcije i naslovi ---------- */
.fl-pr__sec + .fl-pr__sec { margin-block-start: var(--space-s); }
.fl-pr__lab {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--space-xs);
  margin-block-end: calc(var(--space-xs) * 0.5);
  color: var(--text-dark-muted);
  font-size: calc(var(--text-xs) * 0.9);
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}
.fl-pr__lab--mt { margin-block-start: var(--space-s); }
.fl-pr__lab-r { font-weight: 400; letter-spacing: 0; text-transform: none; font-size: var(--text-xs); }
.fl-pr__lab-btn { padding: 0; background: none; border: 0; color: var(--text-dark-muted); font: inherit; text-decoration: underline; text-underline-offset: var(--fl-underline-offset); cursor: pointer; }
.fl-pr__lab-inline { margin-inline-end: calc(var(--space-xs) * 0.25); color: var(--text-dark-muted); font-size: calc(var(--text-xs) * 0.9); font-weight: 600; letter-spacing: 0.04em; text-transform: uppercase; }
.fl-pr__prazno { margin: var(--space-xs) 0; }

/* ---------- redovi proizvoda ---------- */
.fl-pr__row {
  display: grid;
  grid-template-columns: var(--fl-tap) minmax(0, 1fr) auto;
  gap: var(--space-xs);
  align-items: start;
  min-block-size: var(--fl-tap);
  padding: calc(var(--space-xs) * 0.6) calc(var(--space-xs) * 0.5);
  margin-inline: calc(var(--space-xs) * -0.5);
  border-radius: var(--radius);
  border-block-start: var(--border-width) var(--border-style) var(--fl-hairline);
}
.fl-pr__sec .fl-pr__row:first-of-type { border-block-start: 0; }
.fl-pr__row:hover, .fl-pr__row.is-akt { background-color: color-mix(in oklch, var(--primary) 12%, var(--white)); }
.fl-pr__img { display: block; inline-size: var(--fl-tap); block-size: var(--fl-tap); background-color: var(--white); border: var(--border-width) var(--border-style) var(--fl-hairline); border-radius: var(--radius); overflow: hidden; }
.fl-pr__img img { display: block; inline-size: 100%; block-size: 100%; object-fit: contain; padding: calc(var(--space-xs) * 0.15); }
.fl-pr__txt { min-inline-size: 0; }
.fl-pr__name { display: -webkit-box; overflow: hidden; -webkit-box-orient: vertical; -webkit-line-clamp: 2; line-clamp: 2; font-size: var(--text-s); line-height: 1.3; }
.fl-pr__name b { font-weight: 700; }
.fl-pr__pre { color: var(--text-dark-muted); }
.fl-pr__diff { font-weight: 600; }
.fl-pr__sku { display: block; margin-block-start: calc(var(--space-xs) * 0.15); color: var(--text-dark-muted); font-size: var(--text-xs); font-weight: 400; }
.fl-pr__price { text-align: end; font-size: var(--text-s); font-weight: 600; white-space: nowrap; }
.fl-pr__price ins { background: none; color: var(--fl-sale, var(--danger)); text-decoration: none; }
.fl-pr__price del { display: block; color: var(--text-dark-muted); font-size: var(--text-xs); font-weight: 400; }
.fl-pr__price .screen-reader-text { position: absolute; inline-size: 1px; block-size: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

/* oznake Akcija / Outlet / Novo */
.fl-pr__oz { display: inline-block; margin-inline-start: calc(var(--space-xs) * 0.5); padding: calc(var(--space-xs) * 0.1) calc(var(--space-xs) * 0.4); border-radius: calc(var(--radius) * 0.5); font-size: calc(var(--text-xs) * 0.8); font-weight: 700; line-height: 1.3; vertical-align: middle; white-space: nowrap; }
.fl-pr__oz--akcija { background-color: var(--fl-offer-sale-accent, var(--primary)); color: var(--fl-offer-sale-accent-fg, var(--base)); }
.fl-pr__oz--big { margin: calc(var(--space-xs) * 0.5) 0; padding: calc(var(--space-xs) * 0.3) calc(var(--space-xs) * 0.6); font-size: var(--text-xs); }

/* ---------- čipovi ---------- */
.fl-pr__chips { display: flex; flex-wrap: wrap; gap: calc(var(--space-xs) * 0.5); align-items: center; }
.fl-pr__chips--suzeno { margin-block: calc(var(--space-xs) * 0.75) var(--space-s); }
/* „Popularno sada”: na desktopu se lomi u redove (sve vidljivo, nema što klizati); na mobitelu klizi kao i ostali
   redovi čipova (pravilo gore, fade iz scroll-fade.php) */
.fl-pr__chip {
  display: inline-flex;
  align-items: center;
  gap: calc(var(--space-xs) * 0.4);
  min-block-size: calc(var(--fl-tap) * 0.75);
  padding-inline: calc(var(--space-xs) * 0.9);
  background-color: var(--white);
  border: var(--border-width) var(--border-style) var(--border-color-dark);
  border-radius: var(--radius);
  font-size: var(--text-xs);
  font-weight: 600;
  line-height: 1.2;
  white-space: nowrap;
}
.fl-pr__chip b { color: var(--text-dark-muted); font-weight: 400; }
.fl-pr__chip:hover, .fl-pr__chip.is-akt { border-color: var(--base); background-color: var(--neutral-ultra-light); }
.fl-pr__chip.is-on { border-color: var(--base); }
.fl-pr__chip.is-muted { color: var(--text-dark-muted); font-weight: 400; }
.fl-pr__chip--vise { border-style: dashed; color: var(--text-dark-muted); font-weight: 400; }

/* ---------- kartica brenda / linije ---------- */
.fl-pr__kart {
  display: grid;
  grid-template-columns: calc(var(--fl-tap) * 1.1) minmax(0, 1fr) auto;
  gap: var(--space-xs);
  align-items: center;
  padding: calc(var(--space-xs) * 0.5);
  margin: 0 calc(var(--space-xs) * -0.5) calc(var(--space-xs) * 0.75);
  border-radius: var(--radius);
}
.fl-pr__kart:hover, .fl-pr__kart.is-akt { background-color: color-mix(in oklch, var(--primary) 12%, var(--white)); }
.fl-pr__logo { display: flex; align-items: center; justify-content: center; inline-size: calc(var(--fl-tap) * 1.1); block-size: calc(var(--fl-tap) * 1.1); background-color: var(--white); border: var(--border-width) var(--border-style) var(--fl-hairline); border-radius: var(--radius); overflow: hidden; font-size: var(--text-l); font-weight: 700; }
.fl-pr__logo img { display: block; inline-size: 100%; block-size: 100%; object-fit: contain; padding: calc(var(--space-xs) * 0.3); }
.fl-pr__kart-txt { min-inline-size: 0; }
.fl-pr__kart-naziv { display: block; font-size: var(--text-m); font-weight: 700; line-height: 1.2; }
.fl-pr__kart-n { color: var(--text-dark-muted); font-size: var(--text-xs); font-weight: 400; }
.fl-pr__kart-opis { display: block; margin-block-start: calc(var(--space-xs) * 0.2); color: var(--text-dark-muted); font-size: var(--text-xs); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.fl-pr__kart-brend { color: var(--base); font-weight: 600; }
.fl-pr__kart-link { font-size: var(--text-xs); font-weight: 600; white-space: nowrap; text-decoration: underline; text-underline-offset: var(--fl-underline-offset); }
.fl-pr--mob .fl-pr__kart-link { display: none; }

/* ---------- namjera (Akcije · Šamponi) ---------- */
.fl-pr__namjera {
  display: flex;
  align-items: center;
  gap: var(--space-xs);
  min-block-size: var(--fl-tap);
  padding: calc(var(--space-xs) * 0.75) var(--space-xs);
  background-color: color-mix(in oklch, var(--fl-offer-sale-accent, var(--primary)) 18%, var(--white));
  border: var(--border-width) var(--border-style) color-mix(in oklch, var(--fl-offer-sale-accent, var(--primary)) 60%, var(--white));
  border-radius: var(--radius);
}
.fl-pr__namjera--outlet { background-color: var(--neutral-ultra-light); border-color: var(--border-color-dark); }
.fl-pr__namjera--novo { background-color: color-mix(in oklch, var(--success) 12%, var(--white)); border-color: color-mix(in oklch, var(--success) 40%, var(--white)); }
.fl-pr__namjera.is-akt { outline: var(--focus-width) solid var(--primary-semi-dark); }
.fl-pr__namjera-ik { flex: none; inline-size: var(--icon-size-m); block-size: var(--icon-size-m); }

/* Ikone Akcije / Outlet / Novo: iste SVG ikone i boje kao brzi gumbi u mobilnom izborniku (header 21503) —
   maska + currentColor. */
.fl-pr__namjera-ik, .fl-pr__precac-ik {
  --_ik: url("/wp-content/uploads/2026/08/akcije-ikona.svg");
  color: var(--warning-semi-light);
  background-color: currentColor;
  -webkit-mask: var(--_ik) center / contain no-repeat;
          mask: var(--_ik) center / contain no-repeat;
}
.fl-pr__namjera--outlet .fl-pr__namjera-ik, .fl-pr__precac--outlet .fl-pr__precac-ik { --_ik: url("/wp-content/uploads/2026/08/outlet-ikona.svg"); color: var(--base); }
.fl-pr__namjera--novo .fl-pr__namjera-ik, .fl-pr__precac--novo .fl-pr__precac-ik { --_ik: url("/wp-content/uploads/2026/08/novo-ikona.svg"); color: var(--success); }
.fl-pr__namjera-txt { flex: 1 1 auto; min-inline-size: 0; }
.fl-pr__namjera-txt b { display: block; font-size: var(--text-s); }
.fl-pr__namjera-txt span { display: block; color: var(--text-dark-muted); font-size: var(--text-xs); }

/* ---------- bez rezultata ---------- */
.fl-pr__nema-h { font-size: var(--text-m); font-weight: 700; line-height: 1.3; }
.fl-pr__kats { display: flex; flex-direction: column; gap: calc(var(--space-xs) * 0.5); margin-block: calc(var(--space-xs) * 0.75) var(--space-s); }
.fl-pr__kat {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-xs);
  min-block-size: var(--fl-tap);
  padding: calc(var(--space-xs) * 0.6) var(--space-xs);
  background-color: var(--white);
  border: var(--border-width) var(--border-style) var(--border-color-dark);
  border-radius: var(--radius);
  color: var(--base);
  font: inherit;
  text-align: start;
  cursor: pointer;
}
.fl-pr__kat:hover, .fl-pr__kat.is-akt { border-color: var(--base); }
.fl-pr__kat b { display: block; font-size: var(--text-s); }
.fl-pr__kat-n { flex: none; color: var(--text-dark-muted); font-size: var(--text-xs); white-space: nowrap; }
.fl-pr__kat--btn { inline-size: 100%; border-color: var(--base); }
.fl-pr button.fl-pr__kat--btn { display: flex; justify-content: flex-start; text-align: start; line-height: 1.3; }

/* ---------- prazno polje ---------- */
.fl-pr__rec { display: flex; align-items: center; gap: var(--space-xs); min-block-size: var(--fl-tap); padding: 0 calc(var(--space-xs) * 0.5); margin-inline: calc(var(--space-xs) * -0.5); border-radius: var(--radius); border-block-start: var(--border-width) var(--border-style) var(--fl-hairline); font-size: var(--text-s); }
.fl-pr__sec .fl-pr__rec:first-of-type { border-block-start: 0; }
.fl-pr__rec:hover, .fl-pr__rec.is-akt { background-color: var(--neutral-ultra-light); }
.fl-pr__rec-ik { flex: none; inline-size: var(--text-m); block-size: var(--text-m); background-color: currentColor; color: var(--text-dark-muted); -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='9'/%3E%3Cpath d='M12 7v5l3 2'/%3E%3C/svg%3E") center / contain no-repeat; mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='9'/%3E%3Cpath d='M12 7v5l3 2'/%3E%3C/svg%3E") center / contain no-repeat; }
.fl-pr__rec-str { margin-inline-start: auto; color: var(--text-dark-muted); }
.fl-pr__logos { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: calc(var(--space-xs) * 0.5); }
.fl-pr--mob .fl-pr__logos { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.fl-pr__logo-k { display: flex; align-items: center; justify-content: center; block-size: calc(var(--fl-tap) * 1.2); padding: calc(var(--space-xs) * 0.4); background-color: var(--white); border: var(--border-width) var(--border-style) var(--fl-hairline); border-radius: var(--radius); font-size: var(--text-xs); font-weight: 600; text-align: center; }
.fl-pr__logo-k:hover, .fl-pr__logo-k.is-akt { border-color: var(--base); }
.fl-pr__logo-k img { max-inline-size: 100%; max-block-size: 100%; object-fit: contain; }
.fl-pr__logo-k--sve { border-style: dashed; color: var(--text-dark-muted); }
.fl-pr__precaci { display: flex; flex-direction: column; gap: calc(var(--space-xs) * 0.5); }
.fl-pr--mob .fl-pr__precaci { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); }
.fl-pr__precac { display: flex; align-items: center; gap: var(--space-xs); min-block-size: var(--fl-tap); padding: calc(var(--space-xs) * 0.6) var(--space-xs); background-color: var(--white); border: var(--border-width) var(--border-style) var(--fl-hairline); border-radius: var(--radius); }
.fl-pr--mob .fl-pr__precac { flex-direction: column; align-items: flex-start; gap: calc(var(--space-xs) * 0.4); }
.fl-pr__precac:hover, .fl-pr__precac.is-akt { border-color: var(--base); }
.fl-pr__precac b { display: block; font-size: var(--text-s); }
.fl-pr__precac-ik { flex: none; inline-size: var(--icon-size-m); block-size: var(--icon-size-m); }

/* ---------- gumb „Prikaži sve” ---------- */
.fl-pr__sve { display: inline-flex; align-items: center; min-block-size: var(--fl-tap); padding-inline: var(--space-s); background-color: var(--white); border: var(--border-width) var(--border-style) var(--border-color-dark); border-radius: var(--radius); font-size: var(--text-s); font-weight: 600; }
.fl-pr__sve:hover, .fl-pr__sve.is-akt { border-color: var(--base); }

/* ---------- kontekstni panel ---------- */
.fl-pr__ctx-h { font-size: var(--text-m); font-weight: 700; line-height: 1.2; }
.fl-pr__ctx-p { margin: calc(var(--space-xs) * 0.4) 0 0; max-inline-size: none; color: var(--text-dark); font-size: var(--text-xs); line-height: 1.45; }
.fl-pr__ctx-link { display: inline-block; margin-block-start: calc(var(--space-xs) * 0.75); font-size: var(--text-xs); font-weight: 600; text-decoration: underline; text-underline-offset: var(--fl-underline-offset); }
.fl-pr__ctx-link.is-akt { outline: var(--focus-width) solid var(--primary-semi-dark); outline-offset: var(--focus-offset); }

/* Detalj proizvoda iz FiboSearcha (wc-ajax=dgwt_wcas_result_details) u našem panelu: stilovi reda (trgovina.css) vrijede,
   FiboSearchov položaj/okvir ne. */
.fl-pr .dgwt-wcas-details-wrapp.fl-pr__det { position: static; display: block; inline-size: auto; min-block-size: 0; padding: 0; margin: 0; background: none; border: 0; box-shadow: none; }
.fl-pr .fl-pr__det .dgwt-wcas-details-inner.dgwt-wcas-details-inner { display: block; padding: 0; }