/* ========================================================================== 
   FLORIL / SHOPTET CLASSIC — GLOBAL FOUNDATION

   Load this file first, before the CSS of individual Floril components.
   It replaces the essential layout and UI rules when Shoptet "blank CSS"
   mode is enabled. Component styles (header, banner, footer, etc.) remain
   deliberately separate.
   ========================================================================== */

/* CoconPro-Regular.woff2 ma prazdny glyf pre 7, cislo sa vobec nevykresli.
   Rozsah preto vynechava cislice a tie sa beru z nasledujuceho pisma v stacku. */
@font-face {
  font-family: "Floril Cocon Pro";
  src: url("/user/documents/assets/CoconPro-Regular.woff2") format("woff2");
  font-weight: 400 700;
  font-style: normal;
  font-display: swap;
  unicode-range: U+0-2F, U+3A-10FFFF;
}

:root {
  --fl-primary: #ec008c;
  --fl-primary-hover: #b8006e;
  --fl-primary-soft: #fdeaf3;
  --fl-teal: #6d9294;
  --fl-teal-hover: #4d7274;
  --fl-teal-soft: #eaf1f1;
  --fl-ink: #1a1a1a;
  --fl-muted: #6b6069;
  --fl-surface: #fff;
  --fl-surface-muted: #f6f4f5;
  --fl-border: #efe6ec;
  --fl-danger: #d93838;
  --fl-success: #168044;
  --fl-container: 1280px;
  --fl-content: 820px;
  --fl-radius-sm: 12px;
  --fl-radius: 18px;
  --fl-radius-lg: 24px;
  --fl-shadow: 0 16px 40px rgba(26, 26, 26, 0.09);
  --fl-font-body: "Source Sans 3", Inter, Arial, sans-serif;
  --fl-font-display: "Floril Cocon Pro", "Arial Rounded MT Bold", Arial, sans-serif;
}

html {
  box-sizing: border-box;
  scroll-behavior: smooth;
  -webkit-text-size-adjust: 100%;
}

*,
*::before,
*::after {
  box-sizing: inherit;
}

body.blank-mode-css {
  min-width: 320px;
  margin: 0;
  overflow-x: hidden;
  background: var(--fl-surface);
  color: var(--fl-ink);
  font-family: var(--fl-font-body);
  font-size: 16px;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

:where(body.blank-mode-css) img {
  max-width: 100%;
  height: auto;
}

:where(body.blank-mode-css) a {
  color: var(--fl-primary-hover);
  text-decoration-thickness: 1px;
  text-underline-offset: 3px;
}

:where(body.blank-mode-css) a:hover {
  color: var(--fl-primary);
}

:where(body.blank-mode-css) :where(h1, h2, h3, h4, h5, h6) {
  margin: 0 0 0.6em;
  color: var(--fl-ink);
  font-family: var(--fl-font-display);
  font-weight: 700;
  line-height: 1.15;
  letter-spacing: -0.01em;
}

:where(body.blank-mode-css) h1 {
  font-size: clamp(2.25rem, 5vw, 4rem);
}
:where(body.blank-mode-css) h2 {
  font-size: clamp(1.85rem, 4vw, 3rem);
}
:where(body.blank-mode-css) h3 {
  font-size: clamp(1.35rem, 2.5vw, 2rem);
}
:where(body.blank-mode-css) h4 {
  font-size: 1.2rem;
}

:where(body.blank-mode-css) :where(p, ul, ol) {
  margin: 0 0 1rem;
}

:where(body.blank-mode-css) :where(button, input, select, textarea) {
  font: inherit;
}

:where(body.blank-mode-css) :where(button, [type="button"], [type="submit"]) {
  cursor: pointer;
}

:where(body.blank-mode-css) :focus-visible {
  outline: 3px solid color-mix(in srgb, var(--fl-primary) 36%, transparent);
  outline-offset: 3px;
}

/* Layout ------------------------------------------------------------------ */

body.blank-mode-css .overall-wrapper {
  width: 100%;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  /* Sekcie cez celu sirku pouzivaju 100vw, co na desktope zahrna aj sirku
     rolovacej listy. Clip ten presah odreze; na rozdiel od hidden nevytvara
     rolovaci kontajner, takze lepiva hlavicka funguje dalej. */
  overflow-x: clip;
}

body.blank-mode-css .container {
  width: min(100%, var(--fl-container));
  margin-inline: auto;
  padding-inline: 24px;
}

/*
 * Spodne odsadenie pocita s pätičkou: jej vlna je vytiahnuta o 60 px nahor
 * (margin-top v footer.css), takze skutocny odstup od obsahu je o tolko mensi.
 * Bez toho karta prihlasenia alebo zabudnuteho hesla lezala priamo na vlne.
 */
body.blank-mode-css #content-wrapper {
  width: min(100%, var(--fl-container));
  margin-inline: auto;
  padding-block: 32px 132px;
}

body.blank-mode-css .in-index #content-wrapper,
body.blank-mode-css.in-index #content-wrapper {
  width: 100%;
  max-width: none;
  padding: 0;
}

body.blank-mode-css .content-wrapper-in {
  min-width: 0;
}

body.blank-mode-css.multiple-columns-body #content-wrapper > .content-wrapper-in {
  display: grid;
  grid-template-columns: minmax(220px, 280px) minmax(0, 1fr);
  gap: clamp(28px, 4vw, 56px);
  align-items: start;
}

body.blank-mode-css .content {
  min-width: 0;
}

body.blank-mode-css .content.wide {
  width: 100%;
}

body.blank-mode-css .content-inner,
body.blank-mode-css .article-content {
  max-width: var(--fl-content);
}

/*
 * Na stred iba tam, kde je stlpec naozaj sam. Objednavka ma vedla neho suhrn,
 * takze by sa cely obsah posunul doprava.
 */
body.blank-mode-css #content .content-inner:has(> .registration-form) {
  margin-inline: auto;
}

body.blank-mode-css .row {
  display: flex;
  flex-wrap: wrap;
}

/* Blank mode does not provide sizing for Shoptet's homepage carousel shell. */
body.blank-mode-css.in-index .homepage-box,
body.blank-mode-css.in-index .banners-row,
body.blank-mode-css.in-index .wide-carousel,
body.blank-mode-css.in-index .carousel,
body.blank-mode-css.in-index .carousel-inner,
body.blank-mode-css.in-index .carousel-inner > .item,
body.blank-mode-css.in-index .carousel-inner > .item > span {
  width: 100%;
  min-width: 0;
  display: block;
}

/* Accessibility and generic state helpers -------------------------------- */

body.blank-mode-css .sr-only,
body.blank-mode-css .no-display,
body.blank-mode-css .display-none {
  position: absolute !important;
  width: 1px !important;
  height: 1px !important;
  padding: 0 !important;
  margin: -1px !important;
  overflow: hidden !important;
  clip: rect(0, 0, 0, 0) !important;
  white-space: nowrap !important;
  border: 0 !important;
}

body.blank-mode-css .hidden,
body.blank-mode-css [hidden] {
  display: none !important;
}

/* Buttons and forms ------------------------------------------------------- */

body.blank-mode-css .btn {
  min-height: 46px;
  padding: 0 20px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  border: 1px solid var(--fl-border);
  border-radius: 999px;
  background: var(--fl-surface);
  color: var(--fl-ink);
  font-weight: 700;
  line-height: 1.2;
  text-align: center;
  text-decoration: none;
  transition:
    color 160ms ease,
    background-color 160ms ease,
    border-color 160ms ease,
    transform 160ms ease;
}

body.blank-mode-css .btn:hover {
  border-color: var(--fl-primary);
  color: var(--fl-primary-hover);
}

body.blank-mode-css .btn-primary,
body.blank-mode-css .btn-conversion,
body.blank-mode-css .btn-cart {
  border-color: var(--fl-primary);
  background: var(--fl-primary);
  color: #fff;
}

body.blank-mode-css .btn-primary:hover,
body.blank-mode-css .btn-conversion:hover,
body.blank-mode-css .btn-cart:hover {
  border-color: var(--fl-primary-hover);
  background: var(--fl-primary-hover);
  color: #fff;
}

body.blank-mode-css .btn:disabled,
body.blank-mode-css .btn.disabled {
  opacity: 0.48;
  cursor: not-allowed;
}

body.blank-mode-css .form-group {
  margin-bottom: 18px;
}

body.blank-mode-css label {
  margin-bottom: 6px;
  display: inline-block;
  color: var(--fl-ink);
  font-size: 0.9rem;
  font-weight: 700;
}

body.blank-mode-css .form-control,
body.blank-mode-css select,
body.blank-mode-css textarea {
  width: 100%;
  min-height: 48px;
  padding: 11px 14px;
  border: 1px solid var(--fl-border);
  border-radius: var(--fl-radius-sm);
  background: #fff;
  color: var(--fl-ink);
  transition:
    border-color 160ms ease,
    box-shadow 160ms ease;
}

body.blank-mode-css textarea.form-control,
body.blank-mode-css textarea {
  min-height: 130px;
  resize: vertical;
}

body.blank-mode-css .form-control:focus,
body.blank-mode-css select:focus,
body.blank-mode-css textarea:focus {
  border-color: var(--fl-primary);
  box-shadow: 0 0 0 4px color-mix(in srgb, var(--fl-primary) 12%, transparent);
  outline: 0;
}

body.blank-mode-css .form-control::placeholder {
  color: #91868d;
}

body.blank-mode-css .required-asterisk::after {
  content: " *";
  color: var(--fl-danger);
}

body.blank-mode-css .consents label {
  font-weight: 400;
}

/* Zakaznicke formulare (prihlasenie, zabudnute heslo) --------------------- */

/* Vyber podla formulara, nie podla URL, aby to platilo na kazdej jazykovej
   mutacii. #content vynechava rovnaky formular v rozbalovacom okne hlavicky. */
body.blank-mode-css #content .content-inner:has(> .login-form),
body.blank-mode-css #content .content-inner:has(> .forgotten-password-form),
body.blank-mode-css #content .content-inner:has(> form + .forgotten-password-form),
body.blank-mode-css #content .content-inner:has(> p + .forgotten-password-form) {
  width: min(100%, 520px);
  margin-inline: auto;
  text-align: center;
}

body.blank-mode-css #content .login-form,
body.blank-mode-css #content .forgotten-password-form {
  margin-top: 28px;
  padding: clamp(18px, 5vw, 28px);
  border: 1px solid var(--fl-border);
  border-radius: var(--fl-radius-lg);
  background: var(--fl-surface);
  box-shadow: var(--fl-shadow);
  text-align: left;
}

body.blank-mode-css #content .login-form fieldset,
body.blank-mode-css #content .forgotten-password-form fieldset {
  margin: 0;
  padding: 0;
  border: 0;
}

body.blank-mode-css #content .login-form .submit-wrapper,
body.blank-mode-css #content .forgotten-password-form .submit-wrapper {
  margin-bottom: 0;
}

body.blank-mode-css #content .login-form .submit-wrapper .btn,
body.blank-mode-css #content .forgotten-password-form .submit-wrapper .btn {
  width: 100%;
}

/* Shoptet dava odkazy do jedneho odseku bez medzery, splynu do jedneho slova. */
body.blank-mode-css .alternative-links {
  margin: 20px 0 0;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 8px 20px;
  font-size: 0.92rem;
}

body.blank-mode-css .alternative-links a {
  font-weight: 700;
}

/* Oznam po migracii a nativne socialne prihlasenie. */
body.blank-mode-css #content .floril-login-notice {
  margin-bottom: 28px;
  padding: clamp(16px, 4vw, 22px);
  border: 1px solid color-mix(in srgb, var(--fl-primary) 30%, var(--fl-border));
  border-radius: var(--fl-radius);
  background: var(--fl-primary-soft);
}

body.blank-mode-css #content .floril-login-notice h2 {
  margin: 0 0 10px;
  color: var(--fl-primary-hover);
  font-family: var(--fl-font-body);
  font-size: 1.25rem;
  font-weight: 700;
  line-height: 1.3;
}

body.blank-mode-css #content .floril-login-notice p {
  margin: 0 0 18px;
  font-size: 1rem;
  line-height: 1.55;
}

body.blank-mode-css #content .floril-login-notice .btn {
  max-width: 100%;
  min-height: 44px;
  padding: 10px 18px;
  border: 1px solid var(--fl-primary-hover);
  background: var(--fl-surface);
  color: var(--fl-primary-hover);
  white-space: normal;
  text-align: center;
}

body.blank-mode-css #content .floril-login-notice .btn:hover {
  background: var(--fl-primary-hover);
  color: var(--fl-surface);
}

body.blank-mode-css .social-login-buttons {
  display: grid;
  gap: 14px;
  margin-top: 22px;
}

body.blank-mode-css .social-login-buttons-divider {
  display: flex;
  align-items: center;
  gap: 14px;
  color: var(--fl-muted);
  font-size: 0.9rem;
}

body.blank-mode-css .social-login-buttons-divider::before,
body.blank-mode-css .social-login-buttons-divider::after {
  content: "";
  flex: 1;
  height: 1px;
  background: var(--fl-border);
}

body.blank-mode-css :is(.social-login-buttons, .social-login) .form-group {
  margin: 0;
}

body.blank-mode-css :is(.social-login-buttons, .social-login) .login-btn {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 12px;
  width: 100%;
  min-height: 48px;
  padding: 12px 16px;
  border: 1px solid var(--fl-border);
  border-radius: 999px;
  background: var(--fl-surface);
  color: var(--fl-ink);
  font-size: 1rem;
  line-height: 1.35;
  text-align: center;
  text-decoration: none;
}

body.blank-mode-css :is(.social-login-buttons, .social-login) .login-btn:hover {
  border-color: var(--fl-primary);
  background: var(--fl-primary-soft);
}

body.blank-mode-css :is(.social-login-buttons, .social-login) .login-btn.google::before,
body.blank-mode-css :is(.social-login-buttons, .social-login) .login-btn.facebook::before {
  content: "";
  flex: 0 0 22px;
  height: 22px;
  background-repeat: no-repeat;
  background-position: center;
  background-size: contain;
}

body.blank-mode-css :is(.social-login-buttons, .social-login) .login-btn.google::before {
  background-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2048%2048%22%3E%3Cpath%20fill%3D%22%234285F4%22%20d%3D%22M43.61%2024.46c0-1.36-.12-2.66-.35-3.92H24v7.43h11c-.48%202.39-1.92%204.41-4.08%205.78v4.8h6.6c3.86-3.56%206.09-8.81%206.09-14.09Z%22%2F%3E%3Cpath%20fill%3D%22%2334A853%22%20d%3D%22M24%2044c5.4%200%209.93-1.79%2013.24-4.85l-6.6-5.4c-1.83%201.23-4.17%201.96-6.64%201.96-5.19%200-9.59-3.5-11.16-8.21H6.03v5.58C9.32%2039.58%2016.11%2044%2024%2044Z%22%2F%3E%3Cpath%20fill%3D%22%23FBBC05%22%20d%3D%22M12.84%2027.5a11.99%2011.99%200%200%201%200-7V14.92H6.03a20%2020%200%200%200%200%2018.16l6.81-5.58Z%22%2F%3E%3Cpath%20fill%3D%22%23EA4335%22%20d%3D%22M24%2012.29c2.94%200%205.58%201.01%207.65%202.99l5.74-5.74C33.92%206.31%2029.4%204%2024%204%2016.11%204%209.32%208.42%206.03%2014.92l6.81%205.58C14.41%2015.79%2018.81%2012.29%2024%2012.29Z%22%2F%3E%3C%2Fsvg%3E");
}

body.blank-mode-css :is(.social-login-buttons, .social-login) .login-btn.facebook::before {
  background-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%3E%3Cpath%20fill%3D%22%231877F2%22%20d%3D%22M24%2012A12%2012%200%201%200%2010.125%2023.854V15.47H7.078V12h3.047V9.356c0-3.007%201.792-4.668%204.533-4.668%201.312%200%202.686.234%202.686.234v2.953h-1.513c-1.49%200-1.956.925-1.956%201.875V12h3.328l-.532%203.469h-2.796v8.385A12.003%2012.003%200%200%200%2024%2012Z%22%2F%3E%3C%2Fsvg%3E");
}

body.blank-mode-css :is(.social-login-buttons, .social-login) .login-google-icon,
body.blank-mode-css :is(.social-login-buttons, .social-login) .login-facebook-icon {
  display: none;
}

/* Registracia: rovnake tlacidlo ako pri prihlaseni, nadpis ako oddelovac. */
body.blank-mode-css .registration-form .social-login {
  display: grid;
  gap: 14px;
}

body.blank-mode-css .registration-form .social-login > h2 {
  margin: 0;
  display: flex;
  align-items: center;
  gap: 14px;
  color: var(--fl-muted);
  font-family: var(--fl-font-body);
  font-size: 0.9rem;
  font-weight: 600;
  line-height: 1.4;
}

body.blank-mode-css .registration-form .social-login > h2::before,
body.blank-mode-css .registration-form .social-login > h2::after {
  content: "";
  flex: 1;
  height: 1px;
  background: var(--fl-border);
}

body.blank-mode-css .registration-form .social-login .form-group {
  width: min(100%, 420px);
  justify-self: center;
}

/* Chyby vo formularoch: Shoptet pise text pod pole a polu da triedu error-field. */
body.blank-mode-css .validator-msg {
  margin: 6px 0 0;
  color: var(--fl-danger);
  font-size: 0.85rem;
  font-weight: 600;
  line-height: 1.4;
}

body.blank-mode-css .form-control.error-field,
body.blank-mode-css .form-control.error-field:focus {
  border-color: var(--fl-danger);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--fl-danger) 14%, transparent);
}

/* Chyba zo servera (napr. zle opisany text z obrazka) ostava nad formularom, vklada forms.js. */
body.blank-mode-css .floril-form-error {
  margin: 0;
  padding: 14px 18px;
  border: 1px solid color-mix(in srgb, var(--fl-danger) 35%, var(--fl-border));
  border-radius: var(--fl-radius);
  background: color-mix(in srgb, var(--fl-danger) 7%, #fff);
  color: var(--fl-danger);
  font-weight: 700;
  line-height: 1.45;
}

/* Diskusia ----------------------------------------------------------------- */

/*
 * Formular komentara ma byt schovany, kym zakaznik nestlaci "Pridať komentár".
 * Shoptet ho znaci triedou js-hidden a po kliku na prvok s data-unveil pridava
 * triedu visible (main-3g.js). V blank rezime nemaju obe ziadny styl, takze bol
 * formular otvoreny stale. Pravidlo je zamerne uzke: js-hidden pouziva Shoptet
 * aj inde, napriklad vo filtroch, kde sa s nim pracuje inak.
 */
body.blank-mode-css .discussion-form.js-hidden {
  display: none;
}

body.blank-mode-css .discussion-form.js-hidden.visible {
  display: block;
}

/*
 * V objednavke skryva Shoptet rovnakym sposobom bloky odkryvane zaskrtavatkom:
 * poznamku, firemne udaje aj inu dorucovaciu adresu. data-unveil aj
 * toggleAnotherShipping v main-3g.js ich ukazu pridanim triedy visible a skryju
 * jej odobratim, preto tu staci jedno pravidlo pre cely krok.
 */
body.blank-mode-css:is(.in-krok-1, .in-krok-2) .js-hidden:not(.visible) {
  display: none;
}

body.blank-mode-css .discussionContainer .add-comment {
  margin-top: 16px;
}

body.blank-mode-css .discussion-form .form-legend {
  margin-top: 20px;
}

/* Napoveda k polu ---------------------------------------------------------- */

/*
 * Shoptet posiela napovedu ako <span class="show-tooltip" title="...">. Jeho
 * vlastny tooltip v blank rezime nie je, takze bez tychto pravidiel sa ukazal
 * len systemovy popisok. Text prenesie forms/js/forms.js do data-floril-tip.
 */
body.blank-mode-css .show-tooltip,
body.blank-mode-css .question-tooltip {
  position: relative;
  width: 20px;
  height: 20px;
  margin-left: 8px;
  display: inline-grid;
  place-items: center;
  border-radius: 50%;
  background: var(--fl-primary-soft);
  color: var(--fl-primary-hover);
  font-size: 0.72rem;
  font-weight: 700;
  line-height: 1;
  vertical-align: middle;
  cursor: help;
  user-select: none;
}

body.blank-mode-css .show-tooltip:hover,
body.blank-mode-css .show-tooltip:focus-visible {
  background: var(--fl-primary);
  color: #fff;
}

body.blank-mode-css [data-floril-tip]::after {
  content: attr(data-floril-tip);
  position: absolute;
  z-index: 30;
  bottom: calc(100% + 10px);
  left: 50%;
  width: max-content;
  max-width: min(280px, 70vw);
  padding: 10px 12px;
  border-radius: var(--fl-radius-sm);
  background: var(--fl-ink);
  color: #fff;
  font-size: 0.8rem;
  font-weight: 400;
  line-height: 1.45;
  text-align: left;
  white-space: normal;
  opacity: 0;
  transform: translateX(-50%) translateY(4px);
  transition: opacity 140ms ease, transform 140ms ease;
  pointer-events: none;
}

/* Spicka bubliny. */
body.blank-mode-css [data-floril-tip]::before {
  content: "";
  position: absolute;
  z-index: 31;
  bottom: calc(100% + 4px);
  left: 50%;
  width: 10px;
  height: 10px;
  background: var(--fl-ink);
  opacity: 0;
  transform: translateX(-50%) rotate(45deg);
  transition: opacity 140ms ease;
  pointer-events: none;
}

body.blank-mode-css [data-floril-tip]:hover::after,
body.blank-mode-css [data-floril-tip]:hover::before,
body.blank-mode-css [data-floril-tip]:focus-visible::after,
body.blank-mode-css [data-floril-tip]:focus-visible::before {
  opacity: 1;
}

body.blank-mode-css [data-floril-tip]:hover::after,
body.blank-mode-css [data-floril-tip]:focus-visible::after {
  transform: translateX(-50%) translateY(0);
}

/*
 * Hlasky o min/max mnozstve ukazuje Shoptet cez Bootstrap tooltip, ktory vlozi do
 * body a umiestni podla prazdneho spanu v pocitadle. Span preto musi mat rozmer
 * tlacidla +/- a samotna bublina vzhlad ako ostatne napovedy.
 */
body.blank-mode-css :is(.add-to-cart, .cart-table, .floril-card-cart) .quantity {
  position: relative;
}

body.blank-mode-css :is(.add-to-cart, .cart-table, .floril-card-cart) .quantity > :is(.increase-tooltip, .decrease-tooltip) {
  position: absolute;
  top: 0;
  bottom: 0;
  width: 33%;
  display: block;
  visibility: hidden;
  pointer-events: none;
}

body.blank-mode-css :is(.add-to-cart, .cart-table, .floril-card-cart) .quantity > .decrease-tooltip {
  left: 0;
}

body.blank-mode-css :is(.add-to-cart, .cart-table, .floril-card-cart) .quantity > .increase-tooltip {
  right: 0;
}

body.blank-mode-css .tooltip {
  position: absolute;
  z-index: 10050;
  display: block;
  max-width: 260px;
  font-family: var(--fl-font-body);
  font-size: 0.8rem;
  line-height: 1.45;
  opacity: 0;
  transition: opacity 150ms ease;
  pointer-events: none;
}

body.blank-mode-css .tooltip.in {
  opacity: 1;
}

body.blank-mode-css .tooltip.top {
  margin-top: -6px;
  padding: 6px 0;
}

body.blank-mode-css .tooltip.bottom {
  margin-top: 6px;
  padding: 6px 0;
}

body.blank-mode-css .tooltip-inner {
  padding: 10px 12px;
  border-radius: var(--fl-radius-sm);
  background: var(--fl-ink);
  color: #fff;
  text-align: left;
  box-shadow: 0 10px 24px rgba(26, 26, 26, 0.18);
}

body.blank-mode-css .tooltip-arrow {
  position: absolute;
  width: 0;
  height: 0;
  border: 6px solid transparent;
}

body.blank-mode-css .tooltip.top .tooltip-arrow {
  bottom: -6px;
  left: 50%;
  margin-left: -6px;
  border-top-color: var(--fl-ink);
}

body.blank-mode-css .tooltip.bottom .tooltip-arrow {
  top: -6px;
  left: 50%;
  margin-left: -6px;
  border-bottom-color: var(--fl-ink);
}

/* Rozsah objednatelneho mnozstva, vklada quantity/js/quantity-limits.js. */
body.blank-mode-css .floril-quantity-hint {
  margin: 8px 0 0;
  color: var(--fl-muted);
  font-size: 0.82rem;
  font-weight: 600;
  line-height: 1.4;
}

body.blank-mode-css .cart-table .floril-quantity-hint {
  margin-top: 6px;
  font-size: 0.75rem;
}

/* Prekroceny limit mnozstva, vklada quantity/js/quantity-limits.js na par sekund. */
body.blank-mode-css .floril-quantity-warning {
  margin: 6px 0 0;
  color: var(--fl-danger);
  font-size: 0.82rem;
  font-weight: 700;
  line-height: 1.4;
}

body.blank-mode-css :is(.cart-table, .p-tools, .floril-featured__content) .floril-quantity-warning {
  font-size: 0.76rem;
}

/*
 * Dostupnost s popisom ("Do 2 týždňov") posiela Shoptet tiez v .show-tooltip.
 * Tu je to text stitku, nie otaznik, takze kruzok z pravidiel vyssie by ho
 * stlacil do 20 px; v stitkoch dostupnosti sa rusi.
 */
body.blank-mode-css :is(.availability, .availability-label, .availability-value) .show-tooltip,
body.blank-mode-css :is(.availability, .availability-label, .availability-value) .show-tooltip:hover,
body.blank-mode-css
  :is(.availability, .availability-label, .availability-value)
  .show-tooltip:focus-visible {
  width: auto;
  height: auto;
  margin: 0;
  display: inline;
  border-radius: 0;
  background: none;
  color: inherit;
  font: inherit;
  line-height: inherit;
  vertical-align: baseline;
  user-select: auto;
}

/* Na karte je stitok v rohu obrazka: bublina ide pod neho, zarovnana vlavo. */
body.blank-mode-css .products .p .availability [data-floril-tip]::after {
  top: calc(100% + 12px);
  bottom: auto;
  left: -10px;
  max-width: 220px;
  transform: translateY(-4px);
}

body.blank-mode-css .products .p .availability [data-floril-tip]::before {
  top: calc(100% + 7px);
  bottom: auto;
  left: 6px;
  transform: rotate(45deg);
}

body.blank-mode-css .products .p .availability [data-floril-tip]:hover::after {
  transform: translateY(0);
}

/*
 * Shoptet vklada otaznik za pole, takze bez pozicovania spadol pod nu. Patri
 * dovnutra pola k jeho pravemu okraju.
 */
body.blank-mode-css .form-control-wrapper {
  position: relative;
}

body.blank-mode-css .form-control-wrapper > .show-tooltip {
  position: absolute;
  top: 50%;
  right: 12px;
  margin: 0;
  transform: translateY(-50%);
}

body.blank-mode-css .form-control-wrapper:has(> .show-tooltip) .form-control {
  padding-right: 42px;
}

/* Pri pravom okraji by bublina vytrcala z karty, preto sa zarovna doprava. */
body.blank-mode-css .form-control-wrapper > .show-tooltip::after {
  right: 0;
  left: auto;
  transform: translateY(4px);
}

body.blank-mode-css .form-control-wrapper > .show-tooltip:hover::after,
body.blank-mode-css .form-control-wrapper > .show-tooltip:focus-visible::after {
  transform: translateY(0);
}

@media (prefers-reduced-motion: reduce) {
  body.blank-mode-css [data-floril-tip]::after,
  body.blank-mode-css [data-floril-tip]::before {
    transition: none;
  }
}

/* Registracia -------------------------------------------------------------- */

/*
 * Formular na stred stranky a rovnaka medzera medzi vsetkymi blokmi. Mriezka
 * je tu kvoli gap: Shoptet strieda fieldset a div.co-box, takze margin medzi
 * susedmi by sa musel pisat pre kazdu kombinaciu zvlast.
 */
body.blank-mode-css .registration-form {
  width: min(100%, 780px);
  margin-inline: auto;
  display: grid;
  gap: 20px;
  align-content: start;
}

/* Kartu dostane kazdy blok, aj ten, ktoremu Shoptet triedu box nedal. */
body.blank-mode-css .registration-form > fieldset,
body.blank-mode-css .registration-form fieldset.box {
  margin: 0;
  padding: 24px;
  border: 1px solid var(--fl-border);
  border-radius: var(--fl-radius-lg);
  background: var(--fl-surface);
}

body.blank-mode-css .registration-form fieldset > h2 {
  margin: 0 0 18px;
  font-size: 1.3rem;
}

body.blank-mode-css .registration-form .form-legend {
  margin: -8px 0 18px;
  color: var(--fl-muted);
  font-size: 0.85rem;
}

/* Vyber typu zakaznika a zaskrtavacie polia ako klikatelne karty. */
body.blank-mode-css .registration-form .form-group > input[type="radio"],
body.blank-mode-css .registration-form .form-group > input[type="checkbox"] {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip-path: inset(50%);
}

body.blank-mode-css .registration-form label.whole-width {
  width: 100%;
  margin: 0;
  padding: 14px 18px;
  display: block;
  border: 2px solid var(--fl-border);
  border-radius: var(--fl-radius);
  font-weight: 400;
  cursor: pointer;
  transition:
    border-color 160ms ease,
    background-color 160ms ease;
}

body.blank-mode-css .registration-form label.whole-width:hover {
  border-color: var(--fl-primary);
}

body.blank-mode-css .registration-form input:checked + label.whole-width {
  border-color: var(--fl-primary);
  background: var(--fl-primary-soft);
}

body.blank-mode-css .registration-form label.whole-width strong {
  display: block;
}

body.blank-mode-css
  .registration-form:has(input[name="customerGroupId"]:checked:not(.is-wholesale))
  :is(.company-shopping, #company-info, #additionalInformation.js-hidden) {
  display: none;
}

/*
 * Firemne polia (ICO, IC DPH, nazov spolocnosti) patria k zaskrtavatku
 * "Objednávam na firmu". Shoptet ich skryva triedou js-hidden, tej ale v blank
 * rezime nikto nedal styl, takze boli vidno stale. Rozhoduje tu priamo stav
 * zaskrtavatka, takze to funguje aj bez jeho skriptu.
 */
body.blank-mode-css .registration-form:has(#company-shopping:not(:checked)) #company-info {
  display: none;
}

/* Potvrdenie: suhlas s podmienkami nie je nadpis, ale beznu vetu. */
body.blank-mode-css .registration-form #floril-branch {
  margin-top: 20px;
}

body.blank-mode-css .registration-form .consents .label {
  margin: 0;
  color: var(--fl-muted);
  font-size: 0.92rem;
  font-weight: 400;
  line-height: 1.6;
}

body.blank-mode-css .registration-form .submit-wrapper {
  margin: 18px 0 0;
}

body.blank-mode-css .registration-form .submit-wrapper .btn {
  width: 100%;
}

/*
 * Dvojica poli vedla seba skrati formular asi o tretinu. Zaklad ostava jeden
 * stlpec, aby na telefone nic nezuzovalo pole na polovicu.
 */
@media (min-width: 600px) {
  body.blank-mode-css .registration-form fieldset.box {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0 18px;
    align-content: start;
  }

  body.blank-mode-css .registration-form fieldset.box > * {
    grid-column: 1 / -1;
  }

  body.blank-mode-css .registration-form .form-group:has(#password),
  body.blank-mode-css .registration-form .form-group:has(#passwordAgain),
  body.blank-mode-css .registration-form .form-group:has(#billFullName),
  body.blank-mode-css .registration-form .form-group:has(#phone),
  body.blank-mode-css .registration-form .form-group:has(#billCity),
  body.blank-mode-css .registration-form .form-group:has(#billZip),
  body.blank-mode-css .registration-form .form-group:has(#billCountryId),
  body.blank-mode-css .registration-form .form-group:has(#billRegionId),
  body.blank-mode-css .registration-form #company-info .form-group:has(#companyId),
  body.blank-mode-css .registration-form #company-info .form-group:has(#vatId) {
    grid-column: auto;
  }

  body.blank-mode-css .registration-form #company-info {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0 18px;
  }

  body.blank-mode-css .registration-form #company-info > * {
    grid-column: 1 / -1;
  }

  body.blank-mode-css .registration-form .submit-wrapper .btn {
    width: auto;
    min-width: 220px;
  }
}

/*
 * Telefon: Shoptet vlozi do stranky zoznam vsetkych krajin a spravanie riesi
 * vlastnym JS. V blank rezime nema ziadne styly, takze by sa vypisali vsetky
 * pod sebou. Zatvoreny stav ukazuje len zvolenu krajinu, po zaostreni sa
 * zoznam rozbali. Nespoliehame sa na triedy, ktore prida Shoptet.
 */
body.blank-mode-css .phone-combined-input {
  display: flex;
  align-items: stretch;
  gap: 8px;
}

body.blank-mode-css .phone-combined-input .form-control {
  flex: 1 1 auto;
}

body.blank-mode-css .phone-combined-input .country-flags {
  position: relative;
  width: 190px;
  min-height: 48px;
  flex: 0 0 auto;
  overflow: hidden;
  border: 1px solid var(--fl-border);
  border-radius: var(--fl-radius-sm);
  background: #fff;
  cursor: pointer;
}

body.blank-mode-css .phone-combined-input .country-flags:focus-within {
  overflow: visible;
  border-color: var(--fl-primary);
}

body.blank-mode-css .phone-combined-input .country-flag {
  padding: 12px 14px;
  display: none;
  align-items: center;
  gap: 8px;
  white-space: nowrap;
}

body.blank-mode-css .phone-combined-input .country-flag.selected,
body.blank-mode-css .phone-combined-input .country-flags:focus-within .country-flag {
  display: flex;
}

body.blank-mode-css .phone-combined-input .country-flags:focus-within .country-flags-inner {
  position: absolute;
  z-index: 40;
  top: 0;
  left: 0;
  width: 280px;
  max-height: 300px;
  overflow-y: auto;
  border: 1px solid var(--fl-border);
  border-radius: var(--fl-radius-sm);
  background: #fff;
  box-shadow: var(--fl-shadow);
}

body.blank-mode-css .phone-combined-input .country-flag:hover {
  background: var(--fl-primary-soft);
}

body.blank-mode-css .phone-combined-input .shp-flag-name {
  overflow: hidden;
  text-overflow: ellipsis;
}

body.blank-mode-css .phone-combined-input .country-flags svg {
  width: 22px;
  height: 22px;
  flex: 0 0 auto;
}

/* Nahradny <select> skryjeme az ked sa widget s vlajkami naozaj nainicializuje.
   Bez JavaScriptu tak zostane funkcny vyber predvolby. */
body.blank-mode-css .phone-combined-input .country-flags.initialized + select.js-phone-code {
  display: none;
}

body.blank-mode-css .form-group-tooltip {
  width: 22px;
  height: 22px;
  margin-left: 8px;
  display: inline-grid;
  place-items: center;
  border-radius: 50%;
  background: var(--fl-primary-soft);
  color: var(--fl-primary-hover);
  font-size: 0.8rem;
  font-weight: 700;
  cursor: help;
}

/* Vypis clankov (blog) styluje modul blog/css/blog.css. */

/* Zakaznicke centrum v bocnom stlpci */
body.blank-mode-css .client-center-box ul {
  margin: 0;
  padding: 0;
  display: grid;
  gap: 4px;
  list-style: none;
}

body.blank-mode-css .client-center-box a {
  padding: 9px 12px;
  display: block;
  border-radius: var(--fl-radius-sm);
  color: var(--fl-ink);
  font-weight: 700;
  text-decoration: none;
}

body.blank-mode-css .client-center-box a:hover,
body.blank-mode-css .client-center-box .active > a {
  background: var(--fl-primary-soft);
  color: var(--fl-primary-hover);
}

/*
 * Odhlasenemu zakaznikovi necha Shoptet v tomto menu jediny odkaz. Karta cez
 * celu sirku okolo neho vyzerala ako prazdny blok nad nadpisom, preto z nej
 * v tomto pripade robime obycajny odkaz.
 */
body.blank-mode-css .client-center-box:has(li:only-child) {
  padding: 0;
  border: 0;
  background: transparent;
}

body.blank-mode-css .client-center-box:has(li:only-child) a {
  padding: 0;
  display: inline-block;
  color: var(--fl-primary-hover);
  font-size: 0.92rem;
}

body.blank-mode-css .client-center-box:has(li:only-child) a:hover {
  background: transparent;
  text-decoration: underline;
}

/* Breadcrumbs ------------------------------------------------------------- */

body.blank-mode-css .breadcrumbs-wrapper {
  padding-top: 20px;
  padding-bottom: 8px;
}

body.blank-mode-css .breadcrumbs {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px;
  color: var(--fl-muted);
  font-size: 0.85rem;
}

body.blank-mode-css .breadcrumbs a {
  color: var(--fl-muted);
  text-decoration: none;
}

body.blank-mode-css .breadcrumbs a:hover {
  color: var(--fl-primary-hover);
}

body.blank-mode-css .breadcrumbs .navigation-bullet {
  margin-inline: 6px;
  color: #b9afb5;
}

body.blank-mode-css .navigation-home-icon::before {
  content: "Domov";
}

/* Sidebar and category controls ------------------------------------------ */

body.blank-mode-css .sidebar {
  min-width: 0;
}

body.blank-mode-css .sidebar-inner {
  display: grid;
  gap: 18px;
}

body.blank-mode-css .box {
  padding: 22px;
  border: 1px solid var(--fl-border);
  border-radius: var(--fl-radius);
  background: #fff;
}

body.blank-mode-css .box-bg-variant {
  background: color-mix(in srgb, var(--fl-primary-soft) 54%, #fff);
}

body.blank-mode-css .box .pageElement__heading {
  margin-bottom: 14px;
  font-size: 1.15rem;
}

body.blank-mode-css .categories ul,
body.blank-mode-css .categories,
body.blank-mode-css .menu-level-2 {
  margin: 0;
  padding: 0;
  list-style: none;
}

body.blank-mode-css .categories a {
  padding: 8px 0;
  display: block;
  color: var(--fl-ink);
  font-weight: 600;
  text-decoration: none;
}

body.blank-mode-css .categories .active > a,
body.blank-mode-css .categories a:hover {
  color: var(--fl-primary-hover);
}

body.blank-mode-css .category-title {
  margin-bottom: 28px;
}

body.blank-mode-css .subcategories {
  margin: 0 0 24px;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 12px;
  list-style: none;
}

body.blank-mode-css .subcategories > li > a {
  --fl-category-image-size: clamp(64px, 6.5vw, 76px);
  height: 100%;
  min-height: calc(var(--fl-category-image-size) + 18px);
  padding: 8px;
  gap: clamp(12px, 1.2vw, 16px);
  overflow: hidden;
  display: flex;
  align-items: center;
  border: 1px solid var(--fl-border);
  border-radius: var(--fl-radius);
  background: #fff;
  color: var(--fl-ink);
  font-weight: 700;
  text-decoration: none;
  transition:
    border-color 160ms ease,
    box-shadow 160ms ease;
}

body.blank-mode-css .subcategories > li > a:hover {
  border-color: var(--fl-primary);
  box-shadow: var(--fl-shadow);
  color: var(--fl-primary-hover);
}

body.blank-mode-css .subcategories .image {
  width: var(--fl-category-image-size);
  height: var(--fl-category-image-size);
  padding: 0;
  align-self: center;
  flex: 0 0 var(--fl-category-image-size);
  overflow: hidden;
  border: 2px solid var(--fl-primary);
  border-radius: 16px;
  background: transparent;
}

body.blank-mode-css .subcategories .fl-category-photo {
  width: 100%;
  height: 100%;
  display: block;
  overflow: hidden;
  border-radius: 14px;
}

body.blank-mode-css .subcategories .image img {
  width: 100%;
  height: 100%;
  display: block;
  object-fit: cover;
  object-position: center;
  transform: scale(var(--fl-category-photo-zoom, 1));
}

body.blank-mode-css .subcategories .text {
  min-width: 0;
  padding: 0;
  flex: 1;
  overflow-wrap: anywhere;
}

body.blank-mode-css .category-header,
body.blank-mode-css .listSorting {
  margin: 24px 0;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}

body.blank-mode-css .listSorting__controls {
  margin: 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  list-style: none;
}

body.blank-mode-css .listSorting__control {
  min-height: 40px;
  padding: 8px 14px;
  border: 1px solid var(--fl-border);
  border-radius: 999px;
  background: #fff;
  color: var(--fl-ink);
  font-size: 0.88rem;
  font-weight: 700;
}

body.blank-mode-css .listSorting__control:hover,
body.blank-mode-css .listSorting__control--current {
  border-color: var(--fl-teal);
  background: var(--fl-teal-soft);
  color: var(--fl-teal-hover);
}

body.blank-mode-css .listItemsTotal,
body.blank-mode-css .itemsTotal {
  color: var(--fl-muted);
  font-size: 0.9rem;
}

body.blank-mode-css .filters-unveil-button-wrapper {
  display: none;
}

body.blank-mode-css em.not-possible-info {
  display: none !important;
}

/* Panel filtrov. Shoptet ho vykresli ako holy blok, dizajn z neho robi kartu. */
body.blank-mode-css .filters {
  margin-bottom: 32px;
  padding: 20px;
  border: 1px solid var(--fl-border);
  border-radius: var(--fl-radius-lg);
  background: var(--fl-surface);
}

@media (min-width: 768px) {
  body.blank-mode-css .filters {
    padding: 28px;
  }
}

body.blank-mode-css .filters h4 {
  margin: 0 0 10px;
  color: var(--fl-primary-hover);
  font-family: var(--fl-font-body);
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

/*
 * Chipy parametra Vlastnosti. Nahradzaju checkboxy toho isteho parametra, ktore
 * Shoptet schova za tlacidlo "Otvoriť filter", preto ich potom skryjeme.
 */
body.blank-mode-css .floril-category-diet {
  flex-basis: 100%;
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin: 0 0 28px;
}

/* Nadpis riadku ako v Lovable ("Alergény a diéta"); nav uz ma aria-label. */
body.blank-mode-css .floril-category-diet::before {
  content: "Alergény a diéta";
  flex-basis: 100%;
  margin-bottom: 2px;
  color: var(--fl-primary-hover);
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

body.blank-mode-css .floril-category-diet a {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 8px 16px 8px 8px;
  border: 2px solid color-mix(in srgb, var(--fl-primary) 25%, transparent);
  border-radius: 999px;
  background: var(--fl-surface);
  color: var(--fl-ink);
  font-size: 0.875rem;
  font-weight: 600;
  text-decoration: none;
  transition: background-color 160ms ease, border-color 160ms ease, color 160ms ease, box-shadow 160ms ease;
}

body.blank-mode-css .floril-category-diet a:not(.floril-category-diet__reset)::before {
  content: "";
  width: 24px;
  height: 24px;
  flex: 0 0 24px;
  border-radius: 50%;
  background:
    radial-gradient(circle, var(--fl-primary) 0 3px, transparent 3.5px),
    color-mix(in srgb, var(--fl-primary) 10%, transparent);
}

body.blank-mode-css .floril-category-diet a:hover,
body.blank-mode-css .floril-category-diet a:focus-visible {
  border-color: var(--fl-primary);
  background: var(--fl-primary-soft);
}

body.blank-mode-css .floril-category-diet a.floril-category-diet__item--active,
body.blank-mode-css .floril-category-diet a.floril-category-diet__item--active:hover {
  border-color: var(--fl-primary);
  background: var(--fl-primary);
  color: #fff;
  box-shadow: 0 6px 16px rgba(236, 0, 140, 0.25);
}

body.blank-mode-css .floril-category-diet a.floril-category-diet__item--active::before {
  background:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23fff' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6 9 17l-5-5'/%3E%3C/svg%3E")
      center / 14px no-repeat,
    rgba(255, 255, 255, 0.25);
}

body.blank-mode-css .floril-category-diet a.floril-category-diet__reset {
  padding-left: 12px;
  border-color: transparent;
  background: transparent;
  color: var(--fl-muted);
  font-weight: 600;
  text-decoration: underline;
}

/* Karty "Rozvážate na moju adresu" a "Potrebujem doručiť" (category-filters.js). */
body.blank-mode-css .floril-filter-cards {
  display: grid;
  gap: 22px;
  margin: 0 0 28px;
}

@media (min-width: 768px) {
  body.blank-mode-css .floril-filter-cards {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

body.blank-mode-css .floril-filter-card {
  position: relative;
  min-width: 0;
  padding: 20px 14px 12px;
  border: 1px solid var(--fl-border);
  border-radius: 16px;
}

/* Popisok sedi na hornom okraji karty ako legenda fieldsetu v Lovable. */
body.blank-mode-css .filters .floril-filter-card__legend {
  position: absolute;
  top: 0;
  left: 14px;
  margin: 0;
  padding: 0 8px;
  background: var(--fl-surface);
  transform: translateY(-50%);
}

body.blank-mode-css .floril-filter-card__action {
  width: 100%;
  padding: 8px 6px;
  display: flex;
  align-items: center;
  gap: 12px;
  border: 0;
  border-radius: 12px;
  background: transparent;
  color: var(--fl-ink);
  text-align: left;
  cursor: pointer;
  transition: background-color 160ms ease;
}

body.blank-mode-css .floril-filter-card__action:hover {
  background: var(--fl-primary-soft);
}

body.blank-mode-css .floril-filter-card__action svg {
  width: 20px;
  height: 20px;
  flex: 0 0 20px;
  fill: none;
  stroke: var(--fl-primary);
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
}

body.blank-mode-css .floril-filter-card__action[data-state="delivers"] svg {
  stroke: #059669;
}

body.blank-mode-css .floril-filter-card__action[data-state="outside"] svg {
  stroke: #d97706;
}

body.blank-mode-css .floril-filter-card__copy {
  min-width: 0;
  display: grid;
  gap: 2px;
}

body.blank-mode-css .floril-filter-card__copy strong {
  overflow: hidden;
  font-size: 0.9rem;
  font-weight: 700;
  text-overflow: ellipsis;
  white-space: nowrap;
}

body.blank-mode-css .floril-filter-card__action[data-state="empty"] strong {
  color: var(--fl-primary-hover);
}

body.blank-mode-css .floril-filter-card__copy small {
  color: var(--fl-muted);
  font-size: 0.78rem;
  line-height: 1.35;
}

/*
 * Dodanie nahradza karta "Potrebujem doručiť". Blok ostava v DOM, pretoze
 * delivery-date.js z neho cita adresy filtra pre jednotlive lehoty. Ked je
 * niektora lehota zaskrtnuta (napriklad z odkazu), blok ostane viditelny, aby
 * zakaznik videl, co vypis zuzuje, a vedel to zrusit.
 */
body.blank-mode-css.floril-has-date-card .filter-section-parametric-id-34:not(:has(input:checked)) {
  display: none;
}

body.blank-mode-css.floril-has-category-diet .filter-section-parametric-id-28 {
  display: none;
}

body.blank-mode-css .slider-header {
  display: flex;
  justify-content: space-between;
  color: var(--fl-muted);
  font-size: 0.86rem;
}

body.blank-mode-css .slider-content {
  margin: 12px 0 20px;
}

/* Posuvnik ceny je jQuery UI widget, preto prebijeme jeho vlastne triedy. */
body.blank-mode-css .slider-content .ui-slider {
  position: relative;
  height: 6px;
  border: 0;
  border-radius: 999px;
  background: var(--fl-primary-soft);
}

body.blank-mode-css .slider-content .ui-slider-range {
  position: absolute;
  top: 0;
  height: 100%;
  border: 0;
  border-radius: 999px;
  background: var(--fl-primary);
}

body.blank-mode-css .slider-content .ui-slider-handle {
  position: absolute;
  top: 50%;
  width: 20px;
  height: 20px;
  margin-left: -10px;
  border: 2px solid var(--fl-primary);
  border-radius: 50%;
  background: #fff;
  box-shadow: 0 4px 10px rgba(26, 26, 26, 0.16);
  outline: 0;
  transform: translateY(-50%);
  cursor: grab;
}

body.blank-mode-css .slider-content .ui-slider-handle:focus-visible {
  box-shadow: 0 0 0 4px rgba(236, 0, 140, 0.22);
}

body.blank-mode-css .filter-section fieldset,
body.blank-mode-css .sidebar fieldset,
body.blank-mode-css #price-filter-form fieldset {
  margin: 0;
  padding: 0;
  border: 0;
}

/* Prepinac ovlada popisok, nativny checkbox by bol druhy ovladaci prvok. */
body.blank-mode-css .filter-section input[type="checkbox"] {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  white-space: nowrap;
}

body.blank-mode-css .filter-sections {
  display: grid;
  gap: 10px;
}

body.blank-mode-css .filter-section > .param-filter-top > form > fieldset > div {
  display: flex;
  align-items: center;
  gap: 10px;
}

body.blank-mode-css .filter-label {
  flex: 1;
  min-height: 40px;
  padding: 8px 14px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  border: 1px solid var(--fl-border);
  border-radius: 999px;
  color: var(--fl-ink);
  font-size: 0.88rem;
  font-weight: 700;
  cursor: pointer;
  transition:
    border-color 160ms ease,
    background-color 160ms ease;
}

body.blank-mode-css .filter-label:hover {
  border-color: var(--fl-primary);
  background: var(--fl-primary-soft);
}

body.blank-mode-css .filter-label.disabled {
  opacity: 0.5;
  cursor: default;
}

body.blank-mode-css .filter-label.disabled:hover {
  border-color: var(--fl-border);
  background: transparent;
}

body.blank-mode-css .filter-section input[type="checkbox"]:checked + .filter-label {
  border-color: var(--fl-primary);
  background: var(--fl-primary);
  color: #fff;
}

body.blank-mode-css .filter-count {
  color: inherit;
  font-weight: 600;
  opacity: 0.65;
}

/*
 * Moznosti parametrov (napriklad Dodanie) su cipy vedla seba, rovnako ako
 * Vlastnosti nad nimi. Cez celu sirku karty posobili ako prazdne pruhy.
 */
body.blank-mode-css .filter-section-parametric fieldset {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

body.blank-mode-css .filter-section-parametric .advanced-filters-wrapper:empty {
  display: none;
}

body.blank-mode-css .filter-section-parametric .filter-label {
  flex: 0 0 auto;
  min-height: 36px;
  padding: 6px 7px 6px 16px;
  gap: 10px;
  font-size: 0.84rem;
}

body.blank-mode-css .filter-section-parametric .filter-count {
  min-width: 24px;
  padding: 2px 8px;
  border-radius: 999px;
  background: var(--fl-surface-muted);
  color: var(--fl-muted);
  font-size: 0.74rem;
  text-align: center;
  opacity: 1;
}

body.blank-mode-css .filter-section-parametric input[type="checkbox"]:checked + .filter-label .filter-count {
  background: rgba(255, 255, 255, 0.22);
  color: #fff;
}

/*
 * Rozsirene filtre (#category-filter-hover) su v tomto dizajne otvorene stale,
 * takze prepinac "Rozbaliť filter" nic viditelne nerobi.
 */
body.blank-mode-css .filter-section-button {
  display: none;
}

/* Filter bez jedineho produktu, napriklad "Na sklade 0", sa neda pouzit. */
body.blank-mode-css .filter-section-boolean:has(.filter-label.disabled) {
  display: none;
}

/*
 * Rovnaky pocet uz ukazuje listItemsTotal hned nad kartou filtrov. V tom istom
 * bloku ma ale Shoptet pri aktivnom filtri aj jediny odkaz "Vymazať filtre",
 * preto sa skryva len pocet a cely blok iba vtedy, ked odkaz v nom nie je.
 */
body.blank-mode-css .filter-section-count .filter-total-count {
  display: none;
}

body.blank-mode-css .filter-section-count:not(:has(#clear-filters)) {
  display: none;
}

body.blank-mode-css .top-products {
  margin: 0;
  padding: 0;
  list-style: none;
}

body.blank-mode-css .top-products li {
  display: flex;
  align-items: center;
  gap: 12px;
}

body.blank-mode-css .top-products-image {
  width: 64px;
  height: 64px;
  flex: 0 0 auto;
  overflow: hidden;
  border-radius: 10px;
  background: var(--fl-primary-soft);
}

body.blank-mode-css .top-products-image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

body.blank-mode-css .top-products-content {
  min-width: 0;
  display: flex;
  flex-direction: column;
  color: var(--fl-ink);
  text-decoration: none;
}

/* Product listings -------------------------------------------------------- */

/* Hlavna mriezka vypisu produktov. Pocty stlpcov zodpovedaju dizajnu:
   1 / 2 / 3 / 4 podla sirky. Bez tohto pravidla sa karty ukladaju pod seba
   cez celu sirku, pretoze media queries nizsie uz len prepisuju stlpce. */
body.blank-mode-css .products-block {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 24px;
}

body.blank-mode-css .products-block > .product,
body.blank-mode-css .products-inline > .product {
  min-width: 0;
}

body.blank-mode-css .products-block .p,
body.blank-mode-css .products-inline .p {
  height: 100%;
  position: relative;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  border: 1px solid var(--fl-border);
  border-radius: var(--fl-radius-lg);
  background: #fff;
  transition:
    transform 220ms ease,
    box-shadow 220ms ease;
}

body.blank-mode-css .products-block .p:hover,
body.blank-mode-css .products-inline .p:hover {
  transform: translateY(-4px);
  box-shadow: var(--fl-shadow);
}

/* Karta je flex stlpec s pevnou vyskou riadku mriezky, takze bez flex:0 0 auto
   sa obrazok stlaci a kazda karta ma inak vysoky obrazok. Pomer 1:1 je z dizajnu. */
body.blank-mode-css .products .p > .image {
  position: relative;
  flex: 0 0 auto;
  aspect-ratio: 1 / 1;
  overflow: hidden;
  display: block;
  background: var(--fl-primary-soft);
}

body.blank-mode-css .products .p > .image img {
  width: 100%;
  height: 100%;
  display: block;
  object-fit: cover;
  transition: transform 400ms ease;
}

body.blank-mode-css .products .p:hover > .image img {
  transform: scale(1.04);
}

body.blank-mode-css .products .p-in {
  height: 100%;
  padding: 20px;
  display: flex;
  flex-direction: column;
}

/* Podla dizajnu ide cena hned pod nazov a tlacidlo drzi spodok karty. Volny
   priestor preto patri cene, nie hlavicke karty. */
body.blank-mode-css .products .p-in-in {
  flex: 0 0 auto;
}

body.blank-mode-css .products .p-bottom,
body.blank-mode-css .products .p-bottom > * {
  display: flex;
  flex: 1 1 auto;
  flex-direction: column;
}

body.blank-mode-css .products .prices {
  flex: 1 1 auto;
}

body.blank-mode-css .products .name {
  display: block;
  color: var(--fl-ink);
  font-family: var(--fl-font-display);
  font-size: 1.18rem;
  font-weight: 700;
  line-height: 1.25;
  text-decoration: none;
}

body.blank-mode-css .products .name:hover {
  color: var(--fl-primary-hover);
}

body.blank-mode-css .ratings-wrapper {
  margin-top: 12px;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px 12px;
}

body.blank-mode-css .availability {
  color: var(--fl-success);
  font-size: 0.86rem;
  font-weight: 700;
}

/* Dostupnost je podla dizajnu odznak nad obrazkom, nie riadok pod nazvom.
   Karta uz je position:relative, takze staci odznak vybrat z toku. */
body.blank-mode-css .products .p .ratings-wrapper {
  margin-top: 0;
}

body.blank-mode-css .products .p .availability {
  position: absolute;
  z-index: 2;
  top: 12px;
  left: 12px;
  padding: 5px 10px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.94);
  font-size: 0.72rem;
  line-height: 1.2;
  box-shadow: 0 5px 15px rgba(26, 26, 26, 0.12);
}

body.blank-mode-css .p-code {
  color: var(--fl-muted);
  font-size: 0.78rem;
}

body.blank-mode-css .products-block .p > .p-code {
  padding: 0 20px 16px;
}

body.blank-mode-css .p-bottom {
  margin-top: 18px;
}

body.blank-mode-css .prices {
  min-height: 32px;
}

body.blank-mode-css .price-final {
  color: var(--fl-ink);
  font-size: 1.5rem;
  font-weight: 800;
  line-height: 1.2;
}

body.blank-mode-css .price-standard {
  color: var(--fl-muted);
  text-decoration: line-through;
}

body.blank-mode-css .p-tools {
  margin-top: 16px;
}

body.blank-mode-css .p-tools .btn,
body.blank-mode-css .p-tools form {
  width: 100%;
}

/* Ikona nakupnej tasky pred popiskom, ako v dizajne. */
body.blank-mode-css .p-tools .btn-cart {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
}

body.blank-mode-css .p-tools .btn-cart::before {
  content: "";
  width: 18px;
  height: 18px;
  flex: 0 0 auto;
  background: currentColor;
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 8h12l1 13H5L6 8Z'/%3E%3Cpath d='M9 9V6a3 3 0 0 1 6 0v3'/%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='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 8h12l1 13H5L6 8Z'/%3E%3Cpath d='M9 9V6a3 3 0 0 1 6 0v3'/%3E%3C/svg%3E") center / contain no-repeat;
}

/* Pocitadlo na karte vklada quantity/js/quantity-limits.js; .p-tools prebija pravidla detailu pre suvisiace produkty. */
body.blank-mode-css :is(.p-tools, .floril-featured__content) {
  container-type: inline-size;
}

body.blank-mode-css :is(.p-tools, .floril-featured__content) .floril-card-cart {
  display: flex;
  align-items: stretch;
  gap: 8px;
}

body.blank-mode-css :is(.p-tools, .floril-featured__content) .floril-card-cart .btn {
  width: auto;
  min-width: 0;
  flex: 1 1 auto;
  padding-inline: 12px;
}

body.blank-mode-css :is(.p-tools, .floril-featured__content) .floril-card-cart .quantity {
  flex: 0 0 auto;
  display: grid;
  grid-template-columns: 30px 34px 30px;
  align-items: center;
  padding: 0 5px;
  border: 1px solid var(--fl-border);
  border-radius: 999px;
  background: #fff;
  transition: border-color 150ms ease;
}

body.blank-mode-css :is(.p-tools, .floril-featured__content) .floril-card-cart .quantity:focus-within {
  border-color: var(--fl-primary);
}

body.blank-mode-css :is(.p-tools, .floril-featured__content) .floril-card-cart .quantity label {
  grid-column: 2;
  grid-row: 1;
  height: 100%;
  margin: 0;
}

body.blank-mode-css :is(.p-tools, .floril-featured__content) .floril-card-cart .quantity .amount {
  width: 100%;
  height: 100%;
  padding: 0;
  border: 0;
  outline: 0;
  background: transparent;
  color: var(--fl-ink);
  font-size: 0.95rem;
  font-weight: 700;
  text-align: center;
  appearance: textfield;
}

body.blank-mode-css :is(.p-tools, .floril-featured__content) .floril-card-cart .quantity .amount::-webkit-inner-spin-button,
body.blank-mode-css :is(.p-tools, .floril-featured__content) .floril-card-cart .quantity .amount::-webkit-outer-spin-button {
  margin: 0;
  appearance: none;
}

body.blank-mode-css :is(.p-tools, .floril-featured__content) .floril-card-cart .quantity :is(.increase, .decrease) {
  width: 30px;
  height: 30px;
  padding: 0;
  display: grid;
  place-items: center;
  border: 0;
  border-radius: 50%;
  background: var(--fl-surface-muted);
  color: var(--fl-ink);
  font-size: 17px;
  font-weight: 500;
  line-height: 1;
  transition:
    background-color 150ms ease,
    color 150ms ease;
}

body.blank-mode-css :is(.p-tools, .floril-featured__content) .floril-card-cart .quantity .decrease {
  grid-column: 1;
  grid-row: 1;
}

body.blank-mode-css :is(.p-tools, .floril-featured__content) .floril-card-cart .quantity .increase {
  grid-column: 3;
  grid-row: 1;
}

body.blank-mode-css :is(.p-tools, .floril-featured__content) .floril-card-cart .quantity :is(.increase, .decrease):hover {
  background: var(--fl-primary);
  color: #fff;
}

body.blank-mode-css :is(.p-tools, .floril-featured__content) .floril-quantity-hint {
  margin: 6px 0 0;
  font-size: 0.76rem;
}

/* Karusel: tlacidlo kosika je inak len ikona na obrazku, pri pocitadle ostava viditelne. */
body.blank-mode-css .floril-featured__content .floril-card-cart {
  margin-top: auto;
  padding-top: 16px;
}

body.blank-mode-css .floril-featured .floril-featured__content .floril-card-cart .floril-featured__add {
  width: auto;
  margin-top: 0;
  display: inline-flex;
}

/* Tlacidla v jednom rade aj vtedy, ked limity ma len cast kariet v mriezke. */
body.blank-mode-css .products:has(.floril-quantity-hint) .p-tools:not(:has(.floril-quantity-hint))::after {
  content: "";
  height: calc(0.76rem * 1.4 + 6px);
  display: block;
}

body.blank-mode-css
  [data-floril-featured]:has(.floril-quantity-hint)
  .floril-featured__content:not(:has(.floril-quantity-hint))::after {
  content: "";
  height: calc(0.76rem * 1.4 + 6px);
  flex: 0 0 auto;
  display: block;
}

@container (max-width: 239px) {
  /* Miesto pre pocitadlo nad tlacidlom este pred jeho vlozenim, aby karty neposkocili. */
  body.blank-mode-css
    .p-tools
    form.pr-action:has(> input[type="hidden"][name="amount"]:not([value*="."])):not(
      :has(select, input[type="radio"])
    ) {
    padding-top: 48px;
  }

  body.blank-mode-css :is(.p-tools, .floril-featured__content) .floril-card-cart {
    flex-direction: column;
  }

  body.blank-mode-css :is(.p-tools, .floril-featured__content) .floril-card-cart .quantity {
    min-height: 40px;
    grid-template-columns: 30px minmax(0, 1fr) 30px;
  }
}

body.blank-mode-css .products-top-wrapper {
  margin-bottom: 40px;
  padding: 26px;
  border-radius: var(--fl-radius-lg);
  background: var(--fl-surface-muted);
}

body.blank-mode-css .products-top-header {
  font-size: clamp(1.4rem, 3vw, 2rem);
}

body.blank-mode-css .products-inline {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 20px;
}

body.blank-mode-css .products-top-wrapper > .button-wrapper {
  margin-top: 20px;
  text-align: center;
}

/* Tables, pagination and messages ---------------------------------------- */

body.blank-mode-css .table-responsive {
  max-width: 100%;
  overflow-x: auto;
}

body.blank-mode-css table {
  width: 100%;
  border-collapse: collapse;
}

body.blank-mode-css th,
body.blank-mode-css td {
  padding: 14px;
  border-bottom: 1px solid var(--fl-border);
  text-align: left;
}

/* Ovladacie prvky pod vypisom: tlacidlo dalsich, strankovanie, pocet, hore. */
body.blank-mode-css .listingControls {
  margin-top: 40px;
  padding-bottom: clamp(24px, 4vw, 48px);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 20px;
}

body.blank-mode-css .loadMore,
body.blank-mode-css .goToTop {
  width: 100%;
  display: flex;
  justify-content: center;
}

body.blank-mode-css .pagination {
  width: 100%;
  margin: 0;
}

body.blank-mode-css .pagination__list,
body.blank-mode-css .pagination ul {
  margin: 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 8px;
  list-style: none;
}

/* Odkazy strankovania nesu aj triedu .btn, ktora ma min-height 46px a bocny
   padding. Bez ich prepisania vznikne z kruhu ovalny tvar. */
body.blank-mode-css .pagination a,
body.blank-mode-css .pagination strong {
  width: 44px;
  min-width: 44px;
  height: 44px;
  min-height: 44px;
  padding: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 1px solid var(--fl-border);
  border-radius: 50%;
  background: var(--fl-surface);
  color: var(--fl-ink);
  font-weight: 700;
  line-height: 1;
  text-decoration: none;
}

body.blank-mode-css .pagination strong,
body.blank-mode-css .pagination a:hover {
  border-color: var(--fl-primary);
  background: var(--fl-primary);
  color: #fff;
}

/* Sipky predchadzajuca a nasledujuca nemaju ziadny text, iba aria-label,
   takze by sa vykreslili ako prazdne kolieska. */
body.blank-mode-css .pagination a:empty::before {
  content: "";
  width: 18px;
  height: 18px;
  background: currentColor;
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m9 18 6-6-6-6'/%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='black' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m9 18 6-6-6-6'/%3E%3C/svg%3E") center / contain no-repeat;
}

body.blank-mode-css .pagination a.pagination__link--prev:empty::before,
body.blank-mode-css .pagination a.pagination__link--first:empty::before {
  transform: rotate(180deg);
}

/*
 * Hlasenia Shoptetu, napriklad "Produkt bol pridaný do nákupného košíka".
 * V pravom dolnom rohu sa dali lahko prehliadnut, najma vedla plavajuceho
 * overenia rozvozu. Su preto v strede pod hlavickou, kam sa zakaznik pozera.
 * Shoptet ich sam skryje po 6 sekundach.
 */
body.blank-mode-css .messages {
  position: fixed;
  z-index: 2000;
  top: calc(var(--fh-height, 80px) + 16px);
  left: 50%;
  width: min(calc(100% - 32px), 520px);
  transform: translateX(-50%);
  pointer-events: none;
}

body.blank-mode-css .msg {
  position: relative;
  margin-bottom: 10px;
  padding: 16px 20px 16px 64px;
  border: 1px solid var(--fl-border);
  border-radius: var(--fl-radius);
  background: #fff;
  box-shadow: 0 18px 48px rgba(26, 26, 26, 0.18);
  color: var(--fl-ink);
  font-size: 1rem;
  font-weight: 600;
  line-height: 1.4;
  pointer-events: auto;
  animation: florilMsgIn 260ms ease-out;
}

body.blank-mode-css .msg .container {
  width: auto;
  margin: 0;
  padding: 0;
}

body.blank-mode-css .msg::before {
  content: "";
  position: absolute;
  top: 50%;
  left: 18px;
  width: 32px;
  height: 32px;
  border-radius: 50%;
  background:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23fff' stroke-width='2.6' stroke-linecap='round'%3E%3Cpath d='M12 8v5M12 16.5v.01'/%3E%3C/svg%3E")
      center / 18px no-repeat,
    var(--fl-primary);
  transform: translateY(-50%);
}

body.blank-mode-css .msg-success::before {
  background:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23fff' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6 9 17l-5-5'/%3E%3C/svg%3E")
      center / 16px no-repeat,
    var(--fl-success);
}

body.blank-mode-css .msg-success {
  border-color: color-mix(in srgb, var(--fl-success) 30%, var(--fl-border));
}

body.blank-mode-css .msg-error::before {
  background-color: var(--fl-danger);
}

body.blank-mode-css .msg a {
  color: var(--fl-primary-hover);
  font-weight: 700;
}

@keyframes florilMsgIn {
  from {
    opacity: 0;
    transform: translateY(-10px);
  }
}

@media (prefers-reduced-motion: reduce) {
  body.blank-mode-css .msg {
    animation: none;
  }
}

/* Popups, cookie consent and loading ------------------------------------- */

body.blank-mode-css .user-action {
  position: relative;
  z-index: 1100;
}

body.blank-mode-css .popup-widget {
  position: absolute;
  top: 12px;
  right: 24px;
  width: min(calc(100vw - 32px), 380px);
  padding: 24px;
  display: none;
  border: 1px solid var(--fl-border);
  border-radius: var(--fl-radius);
  background: #fff;
  box-shadow: var(--fl-shadow);
}

body.blank-mode-css .popup-widget.visible,
body.blank-mode-css .popup-widget.active {
  display: block;
}

body.blank-mode-css .siteCookies {
  position: fixed;
  z-index: 3000;
  right: 16px;
  bottom: 16px;
  left: 16px;
}

body.blank-mode-css .siteCookies__form {
  width: min(100%, 1040px);
  margin-inline: auto;
  padding: 18px 22px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  border-radius: var(--fl-radius);
  background: #201a1e;
  color: #fff;
  box-shadow: 0 18px 55px rgba(26, 26, 26, 0.24);
}

body.blank-mode-css .siteCookies__text,
body.blank-mode-css .siteCookies__text p {
  margin: 0;
}

body.blank-mode-css .siteCookies__buttonWrap {
  flex: 0 0 auto;
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

body.blank-mode-css .siteCookies__links {
  margin: 8px 0 0;
}

body.blank-mode-css .siteCookies__link {
  padding: 0;
  border: 0;
  border-bottom: 1px solid currentColor;
  background: transparent;
  color: #fff;
  font-size: 0.88rem;
}

body.blank-mode-css .siteCookies__button {
  min-height: 42px;
  padding: 8px 16px;
  border: 1px solid rgba(255, 255, 255, 0.36);
  border-radius: 999px;
  background: transparent;
  color: #fff;
  font-weight: 700;
}

body.blank-mode-css .siteCookies__button[value="all"] {
  border-color: var(--fl-primary);
  background: var(--fl-primary);
}

body.blank-mode-css .loader-overlay {
  display: none;
}

body.blank-mode-css .loader-wrapper.loading .loader-overlay {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  background: rgba(255, 255, 255, 0.78);
}

/* Footer fallback until footer.js activates the Floril component ---------- */

body.blank-mode-css #footer {
  margin-top: auto;
}

body.blank-mode-css #footer:not(.floril-footer) {
  padding-block: 48px 24px;
  background: var(--fl-teal);
  color: #fff;
}

body.blank-mode-css #footer:not(.floril-footer) a,
body.blank-mode-css #footer:not(.floril-footer) h2,
body.blank-mode-css #footer:not(.floril-footer) h3,
body.blank-mode-css #footer:not(.floril-footer) h4 {
  color: #fff;
}

/* Responsive -------------------------------------------------------------- */

@media (max-width: 1279px) {
  body.blank-mode-css .products-block {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

@media (max-width: 1023px) {
  body.blank-mode-css .products-block,
  body.blank-mode-css .products-inline {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 767px) {
  body.blank-mode-css .container {
    padding-inline: 16px;
  }

  body.blank-mode-css #content-wrapper {
    padding-block: 22px 48px;
  }

  body.blank-mode-css.multiple-columns-body #content-wrapper > .content-wrapper-in {
    display: block;
  }

  body.blank-mode-css .sidebar {
    margin-bottom: 28px;
  }

  body.blank-mode-css .sidebar .box:not(.box-categories),
  body.blank-mode-css .box-onlinePayments,
  body.blank-mode-css .box-topProducts {
    display: none;
  }

  body.blank-mode-css .box-categories {
    padding: 16px;
  }

  body.blank-mode-css .products-block,
  body.blank-mode-css .products-inline {
    gap: 14px;
  }

  body.blank-mode-css .products .p-in {
    padding: 15px;
  }

  body.blank-mode-css .products .name {
    font-size: 1rem;
  }

  body.blank-mode-css .price-final {
    font-size: 1.15rem;
  }

  body.blank-mode-css .products-block .p > .p-code {
    padding: 0 15px 12px;
  }

  body.blank-mode-css .products-top-wrapper {
    padding: 18px;
  }

  body.blank-mode-css .subcategories {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  body.blank-mode-css .filters-wrapper:not(:has(.floril-category-diet)) > .filters-unveil-button-wrapper {
    display: block;
  }

  body.blank-mode-css .filters-unveil-button-wrapper + .filters {
    margin-top: 18px;
  }

  body.blank-mode-css .siteCookies__form {
    align-items: stretch;
    flex-direction: column;
  }

  body.blank-mode-css .siteCookies__buttonWrap .btn {
    flex: 1 1 auto;
  }

  body.blank-mode-css .siteCookies__button {
    flex: 1 1 0;
  }
}

@media (max-width: 479px) {
  /* Aj na malom mobile dva produkty vedla seba, karta je preto kompaktnejsia. */
  body.blank-mode-css .products-block,
  body.blank-mode-css .products-inline {
    gap: 10px;
  }

  body.blank-mode-css .products .p-in {
    padding: 11px;
  }

  body.blank-mode-css .products .name {
    font-size: 0.9rem;
    line-height: 1.3;
  }

  body.blank-mode-css .products .price-final {
    font-size: 1rem;
  }

  body.blank-mode-css .products-block .p > .p-code {
    padding: 0 11px 10px;
  }

  body.blank-mode-css .products .p-tools .btn {
    min-height: 40px;
    padding-inline: 10px;
    gap: 6px;
    font-size: 0.85rem;
  }

  body.blank-mode-css .products .p-tools .btn-cart::before {
    width: 16px;
    height: 16px;
  }

  body.blank-mode-css .subcategories {
    grid-template-columns: 1fr;
  }
}

@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }

  body.blank-mode-css *,
  body.blank-mode-css *::before,
  body.blank-mode-css *::after {
    scroll-behavior: auto !important;
    transition-duration: 0.01ms !important;
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
  }
}

.personal-collection-point .em{
	display: none;
}
/* Vyskakovacie okno Shoptetu (colorbox) ------------------------------------ */

/*
 * Shoptet v nom otvara hodnotenie produktu aj lightbox obrazkov. V blank rezime
 * nema ziadne styly, takze sa vykreslilo ako holé divy cez obsah stranky.
 * Geometriu (top, left, width, height) si pocita jeho vlastny skript, preto ju
 * tu nechavame na pokoji a riesime iba vzhlad.
 */
body.blank-mode-css #cboxOverlay {
  position: fixed;
  z-index: 1100;
  inset: 0;
  background: rgba(26, 26, 26, 0.55);
}

body.blank-mode-css #colorbox {
  z-index: 1101;
  outline: 0;
}

body.blank-mode-css #cboxWrapper {
  overflow: hidden;
  border-radius: var(--fl-radius-lg);
  background: var(--fl-surface);
  box-shadow: 0 30px 80px rgba(26, 26, 26, 0.32);
}

/* Ramcek je poskladany z deviatich dielov, ktore bez obrazkov nemaju co robit. */
body.blank-mode-css :is(
  #cboxTopLeft, #cboxTopCenter, #cboxTopRight,
  #cboxMiddleLeft, #cboxMiddleRight,
  #cboxBottomLeft, #cboxBottomCenter, #cboxBottomRight,
  #cboxTitle, #cboxCurrent, #cboxSlideshow
) {
  display: none !important;
}

body.blank-mode-css #cboxContent {
  position: relative;
  background: var(--fl-surface);
}

body.blank-mode-css #cboxLoadedContent {
  margin: 0;
  padding: 28px;
  background: var(--fl-surface);
}

/*
 * Hodnotenie je jediny obsah, ktory si colorbox premeria vlastnym skriptom este
 * pred nacitanim tohto CSS. Vysiel preto uzsi aj nizsi ako jeho obsah a dostal
 * vnutornu rolovaciu listu. Geometriu tu prepiseme na obsah, u obrazkoveho
 * lightboxu ostava nedotknuta.
 */
body.blank-mode-css #colorbox.ratingDialog,
body.blank-mode-css #colorbox.ratingDialog #cboxWrapper,
body.blank-mode-css #colorbox.ratingDialog #cboxContent,
body.blank-mode-css #colorbox.ratingDialog #cboxLoadedContent {
  height: auto !important;
}

body.blank-mode-css #colorbox.ratingDialog #cboxLoadedContent {
  width: 100% !important;
  min-height: 300px;
  overflow: visible !important;
}

/* Odsadenie sedi s vnutornym paddingom obsahu, aby krizik lezal na osi nadpisu. */
body.blank-mode-css #cboxClose {
  position: absolute;
  z-index: 2;
  top: 24px;
  right: 24px;
  width: 36px;
  height: 36px;
  padding: 0;
  overflow: hidden;
  display: grid;
  /*
   * Skryty popis "Zavrieť" je druhou polozkou mriezky, takze riadky su dva.
   * place-items centruje polozku v jej riadku, nie riadky v tlacidle, preto by
   * krizik bez place-content sedel v hornej polovici kruhu.
   */
  place-content: center;
  place-items: center;
  border: 0;
  border-radius: 50%;
  background: var(--fl-primary-soft);
  color: transparent;
  font-size: 0;
  cursor: pointer;
}

body.blank-mode-css #cboxClose::before {
  content: "×";
  color: var(--fl-primary-hover);
  font-size: 22px;
  line-height: 1;
}

body.blank-mode-css #cboxClose:hover {
  background: var(--fl-primary);
}

body.blank-mode-css #cboxClose:hover::before {
  color: #fff;
}

body.blank-mode-css :is(#cboxPrevious, #cboxNext) {
  position: absolute;
  z-index: 2;
  top: 50%;
  width: 40px;
  height: 40px;
  overflow: hidden;
  border: 0;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.92);
  color: transparent;
  font-size: 0;
  transform: translateY(-50%);
  cursor: pointer;
}

body.blank-mode-css #cboxPrevious { left: 14px; }
body.blank-mode-css #cboxNext { right: 14px; }

body.blank-mode-css :is(#cboxPrevious, #cboxNext)::before {
  color: var(--fl-ink);
  font-size: 20px;
  line-height: 1;
}

body.blank-mode-css #cboxPrevious::before { content: "‹"; }
body.blank-mode-css #cboxNext::before { content: "›"; }

/* Obsah okna: nadpis a formular hodnotenia. */
body.blank-mode-css #cboxLoadedContent .content-modal > h2 {
  margin: 0 0 6px;
  padding-right: 44px;
  font-size: 1.4rem;
}

body.blank-mode-css #cboxLoadedContent .rating-stars-description {
  margin: 0 0 14px;
  color: var(--fl-muted);
  font-size: 0.92rem;
  font-weight: 400;
}

body.blank-mode-css #cboxLoadedContent .rating-stars-wrapper {
  display: flex;
  gap: 8px;
}

body.blank-mode-css #cboxLoadedContent .rating-star {
  margin: 0;
  cursor: pointer;
}

body.blank-mode-css #cboxLoadedContent .rating-star input {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip-path: inset(50%);
}

body.blank-mode-css #cboxLoadedContent .rating-star::before {
  content: "★";
  color: var(--fl-border);
  font-size: 34px;
  line-height: 1;
  transition: color 140ms ease;
}

body.blank-mode-css #cboxLoadedContent .rating-star:hover::before,
body.blank-mode-css #cboxLoadedContent .rating-star:has(input:checked)::before {
  color: var(--fl-primary);
}

body.blank-mode-css #cboxLoadedContent .dialog__actionButtons {
  margin: 20px 0 0;
}

/* Rozbalenie košíka -------------------------------------------------------
 * Je to Shoptetove okno #cart-widget bez zmien v markupe: body dostane triedu
 * cart-window-visible, obsah aj formulare mnozstva a odobrania riadi Shoptet.
 * Sami mu len nastavujeme --fl-cart-top a --fl-cart-right, aby sedelo pod
 * ikonou kosika, ktoru sklada header.js.
 */
body.blank-mode-css.cart-window-visible #cart-widget {
  position: fixed;
  z-index: 10030;
  top: var(--fl-cart-top, 88px);
  right: var(--fl-cart-right, 16px);
  bottom: auto;
  left: auto;
  width: min(380px, calc(100vw - 24px));
  max-width: none;
  max-height: calc(100dvh - var(--fl-cart-top, 88px) - 20px);
  padding: 0;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  border: 1px solid var(--fl-border);
  border-radius: 20px;
  background: var(--fl-surface);
  box-shadow: 0 24px 60px rgba(26, 26, 26, 0.18);
  animation: florilCartDropIn 160ms ease-out;
}

body.blank-mode-css.cart-window-visible #cart-widget .popup-widget-inner {
  min-height: 0;
  margin: 0;
  padding: 6px 18px;
  flex: 1 1 auto;
  overflow-y: auto;
  overscroll-behavior: contain;
  padding-right: 16px;
  padding-left: 16px;
}

/* Product image, name, native quantity controls and price. */
body.blank-mode-css .cart-widget-product {
  padding: 9px 0;
  display: grid;
  grid-template-columns: 70px 108px minmax(0, 1fr);
  grid-template-areas: "image name name"
    "image amount unit";
  align-items: center;
  gap: 4px 12px;
  border-bottom: 1px solid var(--fl-border);
}

body.blank-mode-css .cart-widget-products-inner > .cart-widget-product:last-child {
  border-bottom: 0;
}

body.blank-mode-css .cart-widget-product-image {
  grid-area: image;
  width: 70px;
  height: 70px;
  overflow: hidden;
  border: 1px solid var(--fl-border);
  border-radius: 16px;
  background: var(--fl-surface);
}

body.blank-mode-css .cart-widget-product-image img {
  width: 100%;
  height: 100%;
  display: block;
  border-radius: inherit;
  object-fit: cover;
  transform: scale(1.45);
}

body.blank-mode-css .cart-widget-product-name {
  grid-area: name;
  min-width: 0;
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
}

body.blank-mode-css .cart-widget-product-name strong {
  min-width: 0;
}

body.blank-mode-css .cart-widget-product-name a {
  color: var(--fl-ink);
  font-size: 0.9rem;
  font-weight: 700;
  line-height: 1.3;
  text-decoration: none;
}

body.blank-mode-css .cart-widget-product-name a:hover {
  color: var(--fl-primary-hover);
}

body.blank-mode-css :is(.cart-widget-product-variant, .cart-widget-product-surcharges) {
  display: block;
  color: var(--fl-muted);
  font-size: 0.75rem;
  font-weight: 400;
}

body.blank-mode-css .cart-widget-product-name > span {
  flex: 0 0 auto;
  font-size: 0.9rem;
  font-weight: 700;
  white-space: nowrap;
}

body.blank-mode-css .cart-widget-product-amount {
  grid-area: amount;
  min-width: 0;
}

body.blank-mode-css .cart-widget-product-unit {
  grid-area: unit;
  color: var(--fl-muted);
  font-size: 0.8rem;
}

/* Native Shoptet quantity controls remain responsible for min/max/step. */
body.blank-mode-css .cart-widget-product-amount :is(.increase-tooltip, .decrease-tooltip),
body.blank-mode-css .cart-widget-product-delete {
  display: none !important;
}

body.blank-mode-css .cart-widget-product-amount label {
  margin: 0;
}

body.blank-mode-css .cart-widget-product-amount .amount {
  width: 40px !important;
  min-width: 0 !important;
  padding: 0;
  text-align: center;
  border: 0;
  background: transparent;
  color: var(--fl-ink);
  font-size: 0.85rem;
  appearance: textfield;
  display: block;
  max-width: 40px;
  height: 32px;
  min-height: 0;
  font-weight: 700;
  box-shadow: none;
}

body.blank-mode-css #cart-widget .cart-widget-product-image a {
  display: block;
  width: 100%;
  height: 100%;
}

body.blank-mode-css #cart-widget .floril-cart-total {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
  margin-top: 5px;
  padding: 13px 0 4px;
  border-top: 1px solid var(--fl-border);
  color: var(--fl-ink);
  font-size: 0.95rem;
  font-weight: 700;
}

body.blank-mode-css #cart-widget .floril-cart-total__price {
  white-space: nowrap;
  font-size: 1.05rem;
}

body.blank-mode-css #cart-widget .floril-cart-total + .floril-cart-progress {
  margin-top: 6px;
  padding-top: 0;
  border-top: 0;
}

body.blank-mode-css #cart-widget .cart-widget-product-amount .quantity {
  display: inline-flex !important;
  align-items: center;
  width: 104px !important;
  min-width: 0 !important;
  max-width: 104px;
  height: 34px;
  min-height: 0;
  overflow: visible;
  padding: 0;
  border: 1px solid var(--fl-border);
  border-radius: 999px;
  background: var(--fl-surface);
  box-shadow: none;
}

body.blank-mode-css #cart-widget .cart-widget-product-amount .quantity > label {
  order: 1;
  flex: 0 0 40px;
  display: block;
  width: 40px;
  height: 32px;
  margin: 0;
  padding: 0;
}

body.blank-mode-css #cart-widget .cart-widget-product-amount .quantity > .decrease,
body.blank-mode-css #cart-widget .cart-widget-product-amount .quantity > .increase {
  display: inline-flex !important;
  align-items: center;
  justify-content: center;
  flex: 0 0 31px;
  width: 31px;
  min-width: 31px;
  height: 32px;
  min-height: 0;
  margin: 0;
  padding: 0;
  border: 0;
  border-radius: 999px;
  background: transparent;
  color: var(--fl-ink);
  font-size: 1rem;
  font-weight: 500;
  line-height: 1;
  transform: none;
  cursor: pointer;
}

body.blank-mode-css #cart-widget .cart-widget-product-amount .quantity > .decrease {
  order: 0;
}

body.blank-mode-css #cart-widget .cart-widget-product-amount .quantity > .increase {
  order: 2;
}

body.blank-mode-css #cart-widget .cart-widget-product-amount .quantity > :is(.decrease, .increase):hover {
  background: var(--fl-primary-soft);
  color: var(--fl-primary-hover);
  transform: none;
}

body.blank-mode-css #cart-widget .cart-widget-product-amount .quantity > :is(.decrease, .increase):disabled {
  opacity: 0.4;
  cursor: not-allowed;
}

body.blank-mode-css #cart-widget .cart-widget-product-amount .quantity > :is(.decrease, .increase):focus-visible {
  outline: 2px solid var(--fl-primary);
  outline-offset: 1px;
}

body.blank-mode-css .cart-widget-product-amount .amount::-webkit-inner-spin-button,
body.blank-mode-css .cart-widget-product-amount .amount::-webkit-outer-spin-button {
  margin: 0;
  appearance: none;
}

body.blank-mode-css.cart-window-visible #cart-widget .cart-widget-button {
  padding: 14px 18px;
  flex: 0 0 auto;
  border-top: 1px solid var(--fl-border);
  background: var(--fl-surface);
}

body.blank-mode-css.cart-window-visible #cart-widget .cart-widget-button .btn {
  width: 100%;
}

/* Rovnaky ukazovatel dopravy zadarmo ako v suhrne kosika. */
body.blank-mode-css .floril-cart-progress {
  margin: 12px 0 4px;
  padding: 14px 0 0;
  border-top: 1px solid var(--fl-border);
}

body.blank-mode-css .floril-cart-progress__message {
  margin: 0 0 8px;
  color: var(--fl-ink);
  font-size: 0.75rem;
  font-weight: 700;
}

body.blank-mode-css .floril-cart-progress__track {
  height: 7px;
  overflow: hidden;
  border-radius: 999px;
  background: var(--fl-primary-soft);
}

body.blank-mode-css .floril-cart-progress__fill {
  height: 100%;
  border-radius: inherit;
  background: var(--fl-primary);
  transition: width 400ms ease;
}

body.blank-mode-css .floril-cart-progress.is-completed .floril-cart-progress__fill {
  background: #16a34a;
}

/* Kym Shoptet donacita obsah, drzi v zasuvke miesto tocici sa indikator. */
body.blank-mode-css #cart-widget .loader-overlay {
  padding: 48px 0;
  display: grid;
  place-items: center;
}

body.blank-mode-css #cart-widget .loader {
  width: 28px;
  height: 28px;
  border: 3px solid var(--fl-border);
  border-top-color: var(--fl-primary);
  border-radius: 50%;
  animation: florilCartSpin 900ms linear infinite;
}

@keyframes florilCartDropIn {
  from {
    transform: translateY(-8px);
    opacity: 0;
  }
}

@keyframes florilCartSpin {
  to {
    transform: rotate(360deg);
  }
}

/* Na mobile by sa rozbalenie sirky 390 px nezmestilo vedla ikony. */
@media (max-width: 575px) {
  body.blank-mode-css.cart-window-visible #cart-widget {
    right: 12px;
    left: 12px;
    width: min(380px, calc(100vw - 24px));
  }
}

@media (max-width: 575px) {
  body.blank-mode-css.cart-window-visible #cart-widget .popup-widget-inner {
    padding-right: 14px;
    padding-left: 14px;
  }

  body.blank-mode-css #cart-widget .cart-widget-product {
    grid-template-columns: 64px 104px minmax(0, 1fr);
    column-gap: 10px;
  }

  body.blank-mode-css #cart-widget .cart-widget-product-image {
    width: 64px;
    height: 64px;
    border-radius: 14px;
  }
}

@media (max-width: 360px) {
  body.blank-mode-css #cart-widget .cart-widget-product {
    grid-template-columns: 58px 104px minmax(0, 1fr);
    column-gap: 8px;
  }

  body.blank-mode-css #cart-widget .cart-widget-product-image {
    width: 58px;
    height: 58px;
    border-radius: 12px;
  }
}

@media (prefers-reduced-motion: reduce) {
  body.blank-mode-css.cart-window-visible #cart-widget {
    animation: none;
  }
}