/* =========================================================================
   dobrunoc.eu — brandova vrstva nad temou Hummingbird
   =========================================================================
   Tento subor sa registruje ako 'theme-custom' s prioritou 1000, cize sa
   nacita AZ PO hummingbird/assets/css/theme.css. Preto tu staci predefinovat
   Bootstrap 5.3 custom properties a netreba prepisovat ani jeden subor
   rodicovskej temy. Aktualizacia Hummingbirdu tento subor neprepise.

   Farby vychadzaju z povodneho dizajnu z r. 2015 (modra #00a6ee, cervena
   #ec443c), ale su posunute do odtienov, ktore splnaju WCAG 2.1 AA:
     biely text na #d93b33 ....... 4,54:1  AA
     #c9352d na bielej ........... 5,21:1  AA
     #0079b3 na bielej ........... 4,79:1  AA
     biely text na #0a86c4 ....... 4,02:1  AA pre velky text
   Povodna #00a6ee ma s bielym textom len 2,73:1, takze sa pouziva vylucne
   ako dekoracia (linky, podklady bez textu), nikdy pod text.
   ========================================================================= */

:root {
  /* --- znacka ------------------------------------------------------------ */
  --dn-blue: #00a6ee;           /* dekoracia, logo, akcenty bez textu */
  --dn-blue-600: #0a86c4;       /* podklad pod velky biely text */
  --dn-blue-700: #0079b3;       /* modry text na bielej */
  --dn-red: #ec443c;            /* znackova cervena, velke plochy */
  --dn-red-600: #d93b33;        /* podklad tlacidiel, biely text */
  --dn-red-700: #c9352d;        /* odkazy a text na bielej */
  --dn-ink: #2b2b2b;
  --dn-muted: #6b7280;
  --dn-line: #e4e6ea;
  --dn-surface: #f7f8fa;

  /* --- mapovanie na Bootstrap ------------------------------------------- */
  --bs-primary: var(--dn-red-600);
  --bs-primary-rgb: 217, 59, 51;
  --bs-primary-text-emphasis: var(--dn-red-700);
  --bs-primary-bg-subtle: #fdecea;
  --bs-primary-border-subtle: #f5b8b3;

  --bs-link-color: var(--dn-red-700);
  --bs-link-color-rgb: 201, 53, 45;
  --bs-link-hover-color: #a82a23;
  --bs-link-hover-color-rgb: 168, 42, 35;

  --bs-body-color: var(--dn-ink);
  --bs-body-color-rgb: 43, 43, 43;
  --bs-secondary-color: var(--dn-muted);
  --bs-border-color: var(--dn-line);

  /* Hummingbird ma 0.5rem vsade; jemnejsi radius posobi menej "buttonovo" */
  --bs-border-radius: 0.375rem;
  --bs-border-radius-sm: 0.25rem;
  --bs-border-radius-lg: 0.625rem;

  /* --- vlastne tokeny pre tuto temu -------------------------------------- */
  /* Akcentovy pruh pod nadpismi — farby odobrate priamo z loga:
     #303030 wordmark "DOBRU", #00A0E0 "NOC", #E04030 ".EU".
     Ostre prechody na tretiny: plynuly gradient sa na 72 px zlial
     do jednej skvrny a tri farby nebolo vidiet. */
  --dn-accent-bar: linear-gradient(
    90deg,
    #303030 0 33.333%,
    var(--dn-blue) 33.333% 66.667%,
    var(--dn-red) 66.667% 100%
  );

  --dn-shadow-card: 0 1px 2px rgb(16 24 40 / 6%), 0 1px 3px rgb(16 24 40 / 10%);
  --dn-shadow-card-hover: 0 8px 24px rgb(16 24 40 / 10%), 0 2px 6px rgb(16 24 40 / 6%);
  --dn-transition: 180ms cubic-bezier(0.4, 0, 0.2, 1);
}

/* =========================================================================
   1. Typografia — plynula skala cez clamp(), bez media queries
   ========================================================================= */

h1, .h1 { font-size: clamp(1.75rem, 1.35rem + 1.6vw, 2.5rem); }
h2, .h2 { font-size: clamp(1.4rem, 1.15rem + 1vw, 1.875rem); }
h3, .h3 { font-size: clamp(1.15rem, 1.02rem + 0.55vw, 1.375rem); }

h1, h2, h3, .h1, .h2, .h3 {
  font-weight: 650;
  letter-spacing: -0.015em;
  line-height: 1.2;
  text-wrap: balance;      /* zabrani osamotenemu slovu na poslednom riadku */
}

p, .cms-content li { text-wrap: pretty; }

/* =========================================================================
   2. Hlavicka
   ========================================================================= */

/* Horny sluzobny pas — tmava textura z povodneho webu (themes/dobrunoc/img/
   menu-bg-gray.jpg, dlazdica 128x128, 1,5 kB). Pod nou je plna farba, aby
   text drzal kontrast aj keby sa obrazok nenacital. */
.header-top {
  background-color: #2f2f2f;
  background-image: url("../img/topbar-texture.jpg");
  background-repeat: repeat;
  color: #fff;
  font-size: 0.875rem;
}

/* Tri zony: vlavo kontakt, v strede hladanie, vpravo ucet a kosik.
   Stredna zona je flex:1 s max-width, takze pole ostava opticky v strede
   aj ked su bocne zony rozne siroke. */
.header-top__row {
  display: flex;
  align-items: center;
  gap: 1.5rem;
  min-height: 3rem;
}

.header-top__left,
.header-top__right {
  display: flex;
  align-items: center;
  flex-wrap: nowrap;
}

/* Lavu zonu (kontakt) necháme zmrstit sa, pravú (ucet, kosik) nie —
   inak sa pri uzsich oknach zalomi na dva riadky a stitok s poctom
   poloziek skonci pod popiskom kosika. */
.header-top__left {
  flex: 1 1 auto;
  min-width: 0;
}

.header-top__right {
  flex: 0 0 auto;
  justify-content: flex-end;
}

.header-top__right .header-block,
.header-top__right .header-block__action-btn { white-space: nowrap; }

.header-top__search {
  flex: 1 1 auto;
  min-width: 9rem;
  max-width: 30rem;
}

/* Vsetok text v tmavom pase musi byt biely. Pozor na .blockcart — jeho
   popisku farbi Hummingbird specifickejsim selektorom, takze samotne
   `.header-top a` na nu nestaci a popiska "Kosik" ostala tmava na tmavom. */
.header-top a,
.header-top .ps-contactinfo__email,
.header-top .material-icons,
.header-top .header-block__title,
.header-top .blockcart .header-block__title,
.header-top .header-block__action-btn,
.header-top .ps-customersignin,
.header-top .ps-contactinfo { color: #fff; }

/* Ziadne podciarkovanie — namiesto neho modry "badge" pri prejdeni mysou. */
.header-top a { text-decoration: none; font-weight: 600; }

.header-top .header-block__action-btn,
.header-top .ps-customersignin a,
.header-top .ps-contactinfo a {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  padding: 0.3rem 0.7rem;
  border-radius: 999px;
  transition: background-color var(--dn-transition), color var(--dn-transition);
}

.header-top .header-block__action-btn:hover,
.header-top .ps-customersignin a:not(.dropdown-item):hover,
.header-top .ps-contactinfo a:hover,
.header-top .header-block__action-btn:focus-visible,
.header-top .ps-customersignin a:not(.dropdown-item):focus-visible {
  background-color: var(--dn-blue);
  color: #fff;
  text-decoration: none;
}

/* --- Rozbalovacie menu prihlaseneho zakaznika -------------------------
   Vyssie pravidla farbia vsetok text v tmavom pase na bielo a davaju
   odkazom pilulkove odsadenie. Polozky dropdownu ale lezia na BIELOM
   podklade — biely text na bielom je necitatelny a pilulka ich zbytocne
   roztiahne. Dropdown preto vynimame a stylujeme samostatne. */
.header-top .dropdown-menu {
  padding-block: 0.375rem;
  border: 1px solid var(--dn-line);
  border-radius: var(--bs-border-radius);
  box-shadow: var(--dn-shadow-card-hover);
  min-width: 13rem;
}

.header-top .dropdown-menu .dropdown-item {
  display: flex;
  align-items: center;
  width: auto;
  padding: 0.45rem 0.9rem;
  border-radius: 0;
  color: var(--dn-ink);
  font-weight: 500;
  white-space: nowrap;
}

.header-top .dropdown-menu .dropdown-item:hover,
.header-top .dropdown-menu .dropdown-item:focus-visible {
  background-color: var(--dn-surface);
  color: var(--dn-red-700);
  text-decoration: none;
}

.header-top .dropdown-menu .material-icons {
  color: var(--dn-muted);
  font-size: 1.125rem;
}

.header-top .dropdown-menu .dropdown-item:hover .material-icons { color: var(--dn-red-700); }

.header-top .dropdown-divider {
  margin-block: 0.375rem;
  border-top-color: var(--dn-line);
}

/* Spodny pas: logo vlavo, menu zarovnane vpravo. */
.header-bottom { background: #fff; border-bottom: 1px solid var(--dn-line); }

.header-bottom__row { align-items: center; }

/* Logo je 468x100. renderLogo mu dava atributy width/height podla
   konfiguracie obchodu, ktore nemusia sedit — preto pomer drzime tu. */
.header-bottom__logo .logo {
  width: auto;
  height: clamp(2.5rem, 1.9rem + 2.4vw, 3.25rem);
  aspect-ratio: 468 / 100;
  object-fit: contain;
  max-width: 100%;
}

/* Hlavne menu.
   POZOR na nazvy tried: desktopove menu pouziva .ps-mainmenu__tree-link,
   kdezto .menu__link patri mobilnemu offcanvas menu. Zamena znamena, ze
   pravidlo ticho nerobi nic. */
/* .ps-mainmenu--desktop je flex kontajner a <nav> v nom je flex item, takze
   sa zmrsti na obsah. Zarovnanie doprava preto patri sem, nie na <ul> —
   justify-content na zozname nema co zarovnavat, ked ma zoznam sirku obsahu. */
.ps-mainmenu--desktop { justify-content: flex-end; }

.ps-mainmenu--desktop .ps-mainmenu__tree {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 0.25rem;
  margin-bottom: 0;
}

.ps-mainmenu__tree-link {
  font-weight: 600;
  font-size: 0.875rem;
  letter-spacing: 0.02em;
  text-transform: uppercase;
  white-space: nowrap;
  color: var(--dn-ink);
  text-decoration: none;
  position: relative;
  padding-block: 1.1rem;
  padding-inline: 0.625rem;
}

.ps-mainmenu__tree-link::after {
  content: "";
  position: absolute;
  inset-inline: 0.625rem;
  bottom: 0.75rem;
  height: 2px;
  border-radius: 2px;
  background: var(--dn-red);
  transform: scaleX(0);
  transform-origin: center;
  transition: transform var(--dn-transition);
}

.ps-mainmenu__tree-link:hover,
.ps-mainmenu__tree-link[aria-current],
.ps-mainmenu__tree-item--current > .ps-mainmenu__tree-link { color: var(--dn-red-700); }

.ps-mainmenu__tree-link:hover::after,
.ps-mainmenu__tree-item:focus-within > .ps-mainmenu__tree-link::after { transform: scaleX(1); }

/* Sipka rozbalovacieho podmenu — bez ramceka a bez pozadia.
   Odsadenie od textu polozky je polovicne oproti povodnemu. */
.ps-mainmenu__tree-dropdown-toggle {
  border: 0;
  background: transparent;
  box-shadow: none;
  color: var(--dn-muted);
  padding-inline: 0;
  margin-inline-start: -0.1rem;
}

/* Sipka je SUROZENEC odkazu vnutri .ps-mainmenu__tree-item-wrapper, nie
   potomok .ps-mainmenu__tree-item — preto sa na nu mieri cez susedsky
   selektor. Polozke so sipkou zrusime prave odsadenie, aby ikona sedela
   tesne pri texte. */
.ps-mainmenu__tree-link:has(+ .ps-mainmenu__tree-dropdown-toggle) {
  padding-inline-end: 0.1rem;
}

/* Podmenu ako dlazdice — nahlad + text, rovnaky jazyk ako podkategorie
   na stranke kategorie. Menu ma len dve urovne, takze ziadne taby. */
.submenu--tiles { padding-block: 1.5rem; }

.submenu__tiles {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(14rem, 1fr));
  gap: 0.75rem;
}

.submenu__tile {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  padding: 0.5rem 0.75rem;
  border: 1px solid var(--dn-line);
  border-radius: var(--bs-border-radius);
  background: #fff;
  color: var(--dn-ink);
  text-decoration: none;
  font-size: 0.9375rem;
  line-height: 1.3;
  transition: border-color var(--dn-transition), box-shadow var(--dn-transition),
              color var(--dn-transition);
}

.submenu__tile:hover,
.submenu__tile:focus-visible {
  border-color: transparent;
  box-shadow: var(--dn-shadow-card-hover);
  color: var(--dn-red-700);
}

.submenu__tile-thumb {
  flex: 0 0 auto;
  width: 3rem;
  height: 3rem;
  object-fit: cover;
  border-radius: var(--bs-border-radius-sm);
  background: var(--dn-surface);
}

/* Kategorie bez obrazka dostanu prazdne miesto rovnakej velkosti, aby
   sa dlazdice v mriezke neposunuli. */
.submenu__tile-thumb--empty {
  display: block;
  border: 1px dashed var(--dn-line);
}

.submenu__tile-label { font-weight: 500; }

/* Vyhladavacie pole v tmavom pase */
.ps-searchbar__input {
  border-radius: 999px;
  background: rgb(255 255 255 / 12%);
  border: 1px solid rgb(255 255 255 / 18%);
  color: #fff;
  width: 100%;

  /* Rovnaka velkost pisma ako ostatny text v pase (0.875rem) a nizsia
     vyplna — povodnych 42 px bolo na sluzobny pas privela. */
  font-size: 0.875rem;
  line-height: 1.4;
  padding-block: 0.3rem;
  padding-inline: 2.25rem 1rem;
  height: auto;
}

.header-top .ps-searchbar__magnifier { font-size: 1.125rem; }

.ps-searchbar__input::placeholder { color: rgb(255 255 255 / 60%); }

.header-top .ps-searchbar__magnifier { color: rgb(255 255 255 / 70%); }

.ps-searchbar__input:focus {
  background: rgb(255 255 255 / 96%);
  border-color: var(--dn-blue);
  color: var(--dn-ink);
  box-shadow: 0 0 0 3px rgb(0 166 238 / 30%);
}

.ps-searchbar__input:focus::placeholder { color: var(--dn-muted); }

/* Pocitadlo v kosiku — modre, aby pri hoveri splynulo s modrym badgeom
   pod odkazom. Cervena by sa s nim bila. */
.header-block__badge {
  background: var(--dn-blue);
  color: #fff;
  font-weight: 700;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

/* Ikona kosika a pocitadlo zarovnane na stred bloku */
.header-block__action-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

/* Pri hoveri je pod odkazom modra plocha v rovnakom odtieni, takze stitok
   do nej splynie a zostane citatelne len cislo. */
.header-top .header-block__action-btn:hover .header-block__badge {
  background: transparent;
}

/* =========================================================================
   3. Tlacidla
   ========================================================================= */

.btn {
  font-weight: 600;
  letter-spacing: 0.01em;
  transition: background-color var(--dn-transition), border-color var(--dn-transition),
              color var(--dn-transition), transform var(--dn-transition),
              box-shadow var(--dn-transition);
}

.btn-primary {
  --bs-btn-bg: var(--dn-red-600);
  --bs-btn-border-color: var(--dn-red-600);
  --bs-btn-hover-bg: var(--dn-red-700);
  --bs-btn-hover-border-color: var(--dn-red-700);
  --bs-btn-active-bg: #b32c25;
  --bs-btn-active-border-color: #b32c25;
  --bs-btn-disabled-bg: #e9a19c;
  --bs-btn-disabled-border-color: #e9a19c;
}

.btn-outline-primary {
  --bs-btn-color: var(--dn-red-700);
  --bs-btn-border-color: var(--dn-red-600);
  --bs-btn-hover-bg: var(--dn-red-600);
  --bs-btn-hover-border-color: var(--dn-red-600);
}

.btn-primary:hover:not(:disabled) { transform: translateY(-1px); }
.btn-primary:active:not(:disabled) { transform: translateY(0); }

/* --- Focus ------------------------------------------------------------
   Hummingbird kresli obrys na :focus, nie na :focus-visible. Po kliknuti
   mysou tak okolo polozky menu ostal ramcek — a ked sme --bs-link-color
   prefarbili na znackovu cervenu, zdedil ju aj ten obrys.
   Riesenie: obrys na :focus zrusit uplne a vratit ho len pre :focus-visible
   (klavesnica), v modrej. Pristupnost tym neutrpi — myslou ovladany
   pouzivatel obrys nepotrebuje, klavesnicou ovladany ho stale dostane. */
:where(a, button, .btn, [tabindex]):focus:not(:focus-visible) {
  outline: none;
  box-shadow: none;
}

.btn:focus-visible,
a:focus-visible,
button:focus-visible,
.form-control:focus-visible,
.form-select:focus-visible {
  outline: 3px solid rgb(0 166 238 / 55%);
  outline-offset: 2px;
  box-shadow: none;
}

/* =========================================================================
   4. Nadpisy sekcii — nastupca modreho pruhu "VYBERAME Z PONUKY OBLIECOK"
   ========================================================================= */

.section-title,
.block__title {
  position: relative;
  text-transform: uppercase;
  font-size: clamp(1.05rem, 0.95rem + 0.45vw, 1.3rem);
  font-weight: 700;
  letter-spacing: 0.06em;
  padding-bottom: 0.75rem;
  margin-bottom: 1.75rem;
}

.section-title::after,
.page-title-section::after {
  content: "";
  position: absolute;
  inset-inline-start: 0;
  bottom: 0;
  width: 4.5rem;
  height: 3px;
  border-radius: 3px;
  background: var(--dn-accent-bar);
}

/* H1 kategorie / stranky dostava rovnaky akcent ako nadpisy sekcii. */
.page-title-section {
  position: relative;
  padding-bottom: 0.75rem;
}

/* =========================================================================
   4b. Zahlavie kategorie
   -------------------------------------------------------------------------
   Popis kategorie dedil modru farbu odkazov a tucne pismo, co ho robilo
   dolezitejsim nez nadpis. Je to sprievodny text — patri mu seda a normalna
   hrubka.
   ========================================================================= */

/* Spravna trieda je .category__description (dve podtrzniky), nie
   .category-description — predchadzajuce pravidlo nesedelo na nic. */
.category__description {
  color: var(--dn-muted);
  font-weight: 400;
  font-size: 0.9375rem;
  line-height: 1.6;
  max-width: 75ch;      /* dlhy riadok sa cita zle */
}

.category__description p {
  color: inherit;
  font-weight: inherit;
  margin-bottom: 0.75rem;
}

.category__description p:last-child { margin-bottom: 0; }

.category__description strong { font-weight: 600; color: var(--dn-ink); }

/* Vlastny obrazok kategorie (1000x750 pod popisom) — v zozname produktov
   len tlaci obsah nadol a nic nehovori. */
.category__cover-image { display: none; }

/* Vacsi odstup popisu od dlazdic s podkategoriami */
.category__header .category__description { margin-bottom: 2rem; }

/* Odstup a tenka linka pred vypisom produktov */
.category__header {
  padding-bottom: 2rem;
  margin-bottom: 2rem;
  border-bottom: 1px solid var(--dn-line);
}

.category__header .subcategory__list { margin-bottom: 0; }

/* =========================================================================
   4c. Textove stranky (CMS)
   -------------------------------------------------------------------------
   Obsah pochadza z editora a kazda stranka bola formatovana inak — niektore
   mali vlastny <h1> duplikujuci nazov stranky, ine zacinali na <h3>, dalsie
   nemali nadpisy vobec. Struktura je zjednotena v obsahu (h2 pre podnadpisy),
   tu uz len zjednocujeme vzhlad.
   ========================================================================= */

.page-content--cms {
  font-size: 1rem;
  line-height: 1.65;
  color: var(--dn-body, var(--dn-ink));
  max-width: 75ch;
}

.page-content--cms > :first-child { margin-top: 0; }
.page-content--cms > :last-child { margin-bottom: 0; }

.page-content--cms p { margin-bottom: 1rem; }

.page-content--cms h2 {
  font-size: clamp(1.15rem, 1.05rem + 0.45vw, 1.375rem);
  font-weight: 650;
  line-height: 1.3;
  margin-top: 2rem;
  margin-bottom: 0.75rem;
}

.page-content--cms h3 {
  font-size: 1.0625rem;
  font-weight: 650;
  margin-top: 1.5rem;
  margin-bottom: 0.5rem;
}

/* Hummingbird resetuje list-style-type na none globalne — v textovom
   obsahu znacky potrebujeme, takze ich vraciame explicitne. */
.page-content--cms ul,
.page-content--cms ol {
  margin: 0 0 1rem;
  padding-inline-start: 1.5rem;
}

.page-content--cms ul { list-style-type: disc; }
.page-content--cms ol { list-style-type: decimal; }
.page-content--cms ul ul { list-style-type: circle; }

.page-content--cms li { margin-bottom: 0.375rem; }
.page-content--cms li::marker { color: var(--dn-blue-700); }

.page-content--cms a {
  color: var(--dn-red-700);
  text-decoration: underline;
  text-underline-offset: 0.15em;
}

.page-content--cms strong { font-weight: 650; color: var(--dn-ink); }

.page-content--cms img { height: auto; border-radius: var(--bs-border-radius); }

.page-content--cms table {
  width: 100%;
  margin-bottom: 1.25rem;
  border-collapse: collapse;
}

.page-content--cms th,
.page-content--cms td {
  padding: 0.5rem 0.75rem;
  border: 1px solid var(--dn-line);
  text-align: start;
}

.page-content--cms th { background: var(--dn-surface); font-weight: 650; }

/* Stranka "O nas" ma trojstlpcovy layout — tam plna sirka. */
.page-content--cms:has(.row) { max-width: none; }

.page-content--cms .cms-box { margin-bottom: 1.5rem; }

/* =========================================================================
   4d. Detail produktu
   ========================================================================= */

/* Kod produktu pod nazvom, ako mal povodny web. */
.product__reference {
  font-size: 0.875rem;
  color: var(--dn-muted);
  margin-bottom: 0.5rem;
}

.product__reference-value { color: var(--dn-ink); font-weight: 600; }

/* Ked v sekcii "Detaily produktu" neostane ziadna polozka, netreba ju
   zobrazovat vobec — kod sme presunuli do zahlavia. */
#product_details:not(:has(.details__item)) { display: none; }

/* =========================================================================
   5. Produktova karta
   ========================================================================= */

.product-miniature__inner {
  background: #fff;
  border: 1px solid var(--dn-line);
  border-radius: var(--bs-border-radius-lg);
  overflow: hidden;
  height: 100%;
  transition: box-shadow var(--dn-transition), transform var(--dn-transition),
              border-color var(--dn-transition);
}

.product-miniature:hover .product-miniature__inner {
  border-color: transparent;
  box-shadow: var(--dn-shadow-card-hover);
  transform: translateY(-3px);
}

/* Fotka od okraja po okraj a pevnej vysky, aby boli karty rovnake.
   PrestaShop pri zmensovani nikdy neoreze — pri PS_IMAGE_GENERATION_METHOD=0
   doplni biele okraje, preto je nastavena 1 (nahlad si nechá pomer)
   a orez robi az object-fit nizsie. */
.product-miniature__top,
.product-miniature__image-container,
.product-miniature__image-link {
  display: block;
  padding: 0;
  margin: 0;
  line-height: 0;   /* zrusi medzeru pod inline obrazkom */
  height: clamp(13rem, 10rem + 12vw, 17rem);
  overflow: hidden;
}

.product-miniature__image-container { background: var(--dn-surface); }

/* Nahlad je uprostred karty — zaoblenie patri len hornym rohom.
   Spodne zaoblenie drzi uz .product-miniature__inner.
   Zaoblenie si nesie kazda z troch vrstiev zvlast (__image-link ma vlastnych
   6 px), takze pravidlo musi platit na vsetky — inak sa spodne rohy vratia. */
.product-miniature__top,
.product-miniature__image-container,
.product-miniature__image-link {
  border-start-start-radius: var(--bs-border-radius-lg);
  border-start-end-radius: var(--bs-border-radius-lg);
  border-end-start-radius: 0;
  border-end-end-radius: 0;
}

/* Rychly nahlad preč */
.product-miniature__quickview-button,
.product-miniature__quickview-touch { display: none !important; }

.product-miniature__image {
  transition: transform 400ms cubic-bezier(0.4, 0, 0.2, 1);
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
}

.product-miniature:hover .product-miniature__image { transform: scale(1.04); }

/* __bottom ma vlastnu vypln 16px/8px a __infos dalsich 16px po stranach —
   text bol odsadeny dvakrat. Bocnu vypln drzi uz len __infos. */
.product-miniature__bottom { padding: 0; }

.product-miniature__infos { padding: 1.125rem 1rem 0.875rem; }

/* Blok s mnozstvom a kosikom nemal ziadnu vypln a zarovnaval doprava
   (justify-content: normal). */
.product-miniature__actions { padding: 0 1rem 1.125rem; }

.product-miniature__form {
  justify-content: center;
  gap: 0.5rem;
}

/* pozor: .product-miniature__title je samotny <a>, nie obal */
a.product-miniature__title,
.product-miniature__title {
  color: var(--dn-ink);
  font-weight: 600;
  font-size: 0.9375rem;
  line-height: 1.4;
  text-decoration: none;

  /* nazvy obliecok su dlhe — orez na 2 riadky drzi mriezku zarovnanu */
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

a.product-miniature__title:hover { color: var(--dn-red-700); }

.product-miniature__price {
  font-size: 1.125rem;
  font-weight: 700;
  color: var(--dn-ink);
}

.product-miniature__discount-price {
  color: var(--dn-muted);
  text-decoration: line-through;
  font-weight: 400;
  font-size: 0.9375rem;
}

/* Stitky "Len online", "Zlava" a pod. */
.product-flags .product-flag {
  background: var(--dn-blue-600);
  color: #fff;
  font-size: 0.6875rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  border-radius: 999px;
  padding: 0.25rem 0.625rem;
}

.product-flags .product-flag.discount,
.product-flags .product-flag.on-sale { background: var(--dn-red-600); }

/* =========================================================================
   5b. USP pas pod hlavickou (obsah modulu ps_customtext)
   -------------------------------------------------------------------------
   Markup je v administracii: Moduly → Custom text block. Ikony su inline SVG,
   takze nezavisia na ziadnom ikonovom fonte (povodny obsah pouzival
   FontAwesome, ktory Hummingbird uz nenacitava — preto bola ikona neviditelna).
   ========================================================================= */

.ps-customtext { padding-block: clamp(1.5rem, 1rem + 2vw, 2.5rem); }

.dn-usp {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(15rem, 1fr));
  gap: clamp(0.75rem, 0.5rem + 1vw, 1.5rem);
  margin: 0;
  padding: 0;
  list-style: none;
}

.dn-usp__item {
  display: flex;
  align-items: flex-start;
  gap: 0.875rem;
  padding: 1.125rem 1.25rem;
  background: var(--dn-surface);
  border: 1px solid var(--dn-line);
  border-radius: var(--bs-border-radius-lg);
}

.dn-usp__icon {
  flex: 0 0 auto;
  color: var(--dn-blue-700);
  margin-top: 0.125rem;
}

.dn-usp__title {
  font-size: 0.9375rem;
  font-weight: 700;
  margin: 0 0 0.25rem;
  letter-spacing: 0;
  text-transform: none;
}

.dn-usp__text {
  font-size: 0.875rem;
  line-height: 1.5;
  color: var(--dn-muted);
  margin: 0;
}

/* =========================================================================
   5c. Newsletter
   ========================================================================= */

/* Modra dlazdica z povodneho webu (menu-bg-blue.jpg, 128x128).
   Priemerna farba je #0DAAEE. Biely text by na nej mal kontrast 2,62:1,
   takze text je tu ZAMERNE tmavy — ten ma 5,40:1. Povodny web mal na
   modrom pruhu biely text a nespĺňal AA.
   `bg-body-tertiary` z rodicovskej sablony prebijame. */
.ps-emailsubscription--dn {
  margin-top: clamp(2rem, 1.25rem + 3vw, 4rem);
  background-color: #0daaee;
  background-image: url("../img/newsletter-texture.jpg");
  background-repeat: repeat;
  color: var(--dn-ink);

  /* py-3/py-lg-4 z rodica je 1rem/1.5rem — tu o polovicu viac */
  /* Povodne py-3/py-lg-4 = 1rem/1.5rem, tu o polovicu viac. Utility
     triedy sme zo sablony odstranili, takze staci obycajne pravidlo. */
  padding-block: clamp(1.5rem, 1.1rem + 1.6vw, 2.25rem);
  border-top: 1px solid rgb(255 255 255 / 28%);
  border-bottom: 1px solid rgb(0 0 0 / 20%);
}

.ps-emailsubscription--dn .ps-emailsubscription__heading,
.ps-emailsubscription--dn p { color: var(--dn-ink); }

.ps-emailsubscription__heading {
  font-weight: 650;
  line-height: 1.35;
  letter-spacing: -0.01em;
  margin-bottom: 0.5rem;
}

/* Podmienky pod formularom — tmave, ale tlmene. Vlastna trieda namiesto
   bootstrapovskej .text-body-secondary, s ktorou by sme sa prebijali. */
/* Pozor na alfu: 62 % ciernej sa na #0DAAEE zmiesa na ~rgb(5,65,90), co je
   len 4,16:1 — pod hranicou pre bezny text. 75 % dava 5,63:1. */
.ps-emailsubscription--dn .ps-emailsubscription__note { color: rgb(0 0 0 / 75%); }

.ps-emailsubscription--dn .form-control {
  border: 1px solid rgb(0 0 0 / 25%);
  background: rgb(255 255 255 / 94%);
}

.ps-emailsubscription--dn .form-control:focus {
  background: #fff;
  box-shadow: 0 0 0 3px rgb(0 0 0 / 18%);
}

/* =========================================================================
   6. Paticka
   ========================================================================= */

/* Tmava dlazdica, rovnaka ako v hornom pase hlavicky (menu-bg-gray.jpg,
   priemer #383838). Pod nou je plna farba pre pripad, ze sa obrazok
   nenacita. Biely text ma na nej 11,73:1, bootstrapovska gray-300 9,00:1 —
   obe bezpecne nad AA. */
.footer {
  background-color: #2f2f2f;
  background-image: url("../img/topbar-texture.jpg");
  background-repeat: repeat;
  border-top: 0;
  color: #ced4da;
}

/* Vlastne odkazy v stlpci Kontakty (obchodny register a spol.) */
.ps-contactinfo__form-link { margin-bottom: 0.75rem; }

.ps-contactinfo__company {
  font-weight: 600;
  color: #fff;
  margin-bottom: 0.25rem;
}

.ps-contactinfo__infos { margin-bottom: 0.5rem; }

.ps-contactinfo__legal {
  list-style: none;
  margin: 0.875rem 0 0;
  padding: 0;
}

.ps-contactinfo__legal li { margin-bottom: 0.3rem; }

.ps-contactinfo__legal a,
.ps-contactinfo__form-link a {
  color: #ced4da;
  text-decoration: none;
  font-size: 0.9375rem;
}

.ps-contactinfo__legal a:hover,
.ps-contactinfo__form-link a:hover { color: #fff; text-decoration: underline; }

/* 4. stlpec paticky — dva infoboxy.
   Ostatne stlpce zacinaju nadpisom (20 px) s odstupom 24 px, takze boxy
   posunieme o 44 px nizsie, aby lícovali s textom stlpcov, nie s nadpismi.
   Na mobile sa stlpce skladaju pod seba a nadpisy su zbalene, tam posun
   nedava zmysel. */
@media (min-width: 768px) {
  .dn-footer-usp { padding-top: 2.75rem; }
}

.dn-footer-usp__item {
  display: flex;
  align-items: center;      /* ikona na zvislom strede */
  gap: 0.75rem;
  margin-bottom: 0.75rem;
  padding: 0.8125rem 1rem;
  border: 1px solid rgb(255 255 255 / 12%);
  border-radius: var(--bs-border-radius-lg);

  /* Cierna s nizkou alfou + jemny vnutorny tien — box posobi zapusteny
     do tmavej textury namiesto toho, aby na nej lezal. */
  background: rgb(0 0 0 / 22%);
  box-shadow: inset 0 1px 2px rgb(0 0 0 / 25%);
}

.dn-footer-usp__item:last-child { margin-bottom: 0; }

.dn-footer-usp__icon {
  flex: 0 0 auto;
  color: #fff;              /* farba nadpisov */
}

.dn-footer-usp__title {
  font-size: 0.8125rem;
  font-weight: 700;
  letter-spacing: 0.07em;
  text-transform: uppercase;
  color: #fff;
  margin: 0 0 0.3rem;
}

.dn-footer-usp__text {
  font-size: 0.9375rem;
  line-height: 1.5;
  color: #ced4da;           /* ako odkazy v paticke */
  margin: 0;
}

/* Copyright — bez odkazu, takze mu dame tichsi vzhlad. */
.copyright {
  color: #9aa0a6;
  font-size: 0.875rem;
  border-top: 1px solid rgb(255 255 255 / 10%);
}

.footer-block__title,
.footer-block__title--toggle {
  text-transform: uppercase;
  font-size: 0.8125rem;
  font-weight: 700;
  letter-spacing: 0.07em;
  color: #fff;
}

/* Na tmavej paticke uz Hummingbirdova gray-300 (#dee2e6) sedi — je to
   presne odtien, pre ktory bola navrhnuta (9,00:1). Preto tu neprefarbujeme
   odkazy nasilu, len zjednotime tie miesta, kde si tema berie tmavu farbu
   z --bs-body-color. */
.footer,
.footer-block__content,
.footer-block__list a,
.footer .ps-contactinfo,
.footer .ps-contactinfo a,
.footer .ps-contactinfo__infos,
.footer .ps-customeraccountlinks a,
.footer .ps-customeraccountlinks li {
  color: #ced4da;
}

.footer-block__list a,
.footer .ps-contactinfo a,
.footer .ps-customeraccountlinks a {
  text-decoration: none;
  font-size: 0.9375rem;
  transition: color var(--dn-transition);
}

/* Znackova cervena je na tmavom podklade necitatelna (#c9352d na #2f2f2f
   je 2,4:1), takze hover riesime zosvetlenim na bielu. */
.footer-block__list a:hover,
.footer .ps-contactinfo a:hover,
.footer .ps-customeraccountlinks a:hover {
  color: #fff;
  text-decoration: underline;
}

.footer .ps-contactinfo__infos { font-style: normal; line-height: 1.6; }

/* Textove skratky namiesto ikon pri telefone a e-maile. Pevna sirka
   drzi hodnoty pod sebou zarovnane. Farbu dedia od okoliteho textu. */
.ps-contactinfo__label {
  display: inline-block;
  width: 1.35rem;
  font-weight: 400;
  color: inherit;
}

.ps-contactinfo__phone,
.ps-contactinfo__email { margin-bottom: 0.2rem; }

/* =========================================================================
   6b. Lista so suhlasom s cookies
   ========================================================================= */

.dn-cookie {
  position: fixed;
  inset-inline: 0;
  bottom: 0;
  z-index: 1080;          /* nad patickou, pod modalmi bootstrapu (1055+) */
  background: #2f2f2f;
  background-image: url("../img/topbar-texture.jpg");
  color: #ced4da;
  border-top: 1px solid rgb(255 255 255 / 14%);
  box-shadow: 0 -4px 16px rgb(0 0 0 / 18%);
}

.dn-cookie__inner {
  display: flex;
  align-items: center;
  gap: clamp(0.75rem, 0.5rem + 1.5vw, 2rem);
  flex-wrap: wrap;
  max-width: 1140px;
  margin-inline: auto;
  padding: 0.875rem 1rem;
}

.dn-cookie__text {
  flex: 1 1 22rem;
  margin: 0;
  font-size: 0.875rem;
  line-height: 1.5;
}

.dn-cookie__text a { color: #fff; text-decoration: underline; }

.dn-cookie__actions {
  display: flex;
  gap: 0.5rem;
  flex: 0 0 auto;
  margin-inline-start: auto;
}

/* Tlmene tlacidlo musi byt citatelne na tmavom podklade — bootstrapovska
   secondary je na nom prislabá. */
.dn-cookie .btn-outline-secondary {
  --bs-btn-color: #ced4da;
  --bs-btn-border-color: rgb(255 255 255 / 35%);
  --bs-btn-hover-bg: rgb(255 255 255 / 12%);
  --bs-btn-hover-color: #fff;
  --bs-btn-hover-border-color: rgb(255 255 255 / 55%);
}

@media (max-width: 575.98px) {
  .dn-cookie__actions { width: 100%; margin-inline-start: 0; }
  .dn-cookie__actions .btn { flex: 1 1 0; }
}

/* =========================================================================
   6c. Titulka
   -------------------------------------------------------------------------
   Sekcie: hero → vyhody → hlavne kategorie → nahodny vyber produktov.
   Rozlozenie riesi index.tpl, tu je len vzhlad.
   ========================================================================= */

.page-content--home > * { margin-bottom: clamp(2.5rem, 1.5rem + 3vw, 4.5rem); }

.page-content--home > :last-child { margin-bottom: 0; }

/* Banner a vyhody tvoria jeden blok — obal drzi len ich spolocny odstup
   od zvysku stranky, ziadny vlastny podklad nema. */
.dn-home-intro { margin-top: 1.5rem; }

/* --- Hero ---------------------------------------------------------------
   Banner je na sirku obsahu, nie cez celu sirku okna — sekcia okolo neho
   je .container.

   Pozadie ma dve vrstvy: hore fotka z --dn-hero-img, pod nou znackovy
   podklad. Ked fotka chyba, vrstva sa nevykresli a ostane podklad.

   Text nesedi priamo na fotke. Fotka je svetla (priemerny jas ~0,8), takze
   biely text by mal aj pod 55% ciernym zavojom len 2,6:1. Namiesto
   zatmavovania celej fotky nesie text svetly panel s tmavym pismom. */
.dn-hero {
  --dn-hero-img: none;

  position: relative;
  display: flex;
  align-items: center;
  overflow: hidden;
  min-height: clamp(19rem, 13rem + 20vw, 27rem);
  padding: clamp(1.25rem, 0.5rem + 3vw, 3rem);
  border: 1px solid var(--dn-line);
  border-radius: var(--bs-border-radius-lg);

  background-image: var(--dn-hero-img),
    linear-gradient(135deg, #2b2b2b 0%, #3a3a3a 55%, var(--dn-blue-700) 100%);
  background-size: cover;
  background-position: center;
}

.dn-hero__panel {
  max-width: 34rem;
  padding: clamp(1.5rem, 1rem + 1.5vw, 2.25rem);
  border-radius: var(--bs-border-radius-lg);

  /* Nepriehladnost 92 % drzi kontrast tmaveho pisma nad akoukolvek fotkou;
     rozostrenie je len bonus tam, kde ho prehliadac vie. */
  background: rgb(255 255 255 / 92%);
  backdrop-filter: blur(6px);
  box-shadow: 0 8px 32px rgb(16 24 40 / 12%);
}

/* Znackovy pruh nad nadpisom — rovnaky akcent ako pri nadpisoch sekcii. */
.dn-hero__panel::before {
  content: "";
  display: block;
  width: 4.5rem;
  height: 3px;
  margin-bottom: 1.25rem;
  border-radius: 3px;
  background: var(--dn-accent-bar);
}

.dn-hero__title {
  margin-bottom: 0.875rem;
  font-size: clamp(1.5rem, 1.1rem + 1.7vw, 2.25rem);
  font-weight: 700;
  line-height: 1.2;
  color: var(--dn-ink);      /* 13,5:1 na paneli */
}

.dn-hero__text {
  margin-bottom: 1.5rem;
  font-size: clamp(1rem, 0.95rem + 0.25vw, 1.0625rem);
  line-height: 1.6;
  color: var(--dn-muted);    /* 5,4:1 na paneli */
}

.dn-hero__cta { margin-bottom: 0; }

/* --- Vyhody -------------------------------------------------------------
   Rovnake texty aj ikony ako v paticke. Odstup od bannera je zamerne maly
   — obe sekcie maju tvorit jeden blok. */
.dn-usp { margin-top: clamp(1rem, 0.75rem + 1vw, 1.5rem); }

.dn-usp__grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(16rem, 1fr));
  gap: 1.25rem;
}

/* Antracit s rovnakou dlazdicou ako horny pas hlavicky a paticka — tri
   tmave bloky, ktore drzia titulku pokope so zvyskom stranky.
   Biely nadpis ma na nom 11,73:1, svetlosivy text 9,00:1. */
.dn-usp__item {
  display: flex;
  align-items: center;
  gap: 1rem;
  padding: 1.25rem 1.375rem;
  border-radius: var(--bs-border-radius-lg);
  background-color: #2f2f2f;
  background-image: url("../img/topbar-texture.jpg");
  background-repeat: repeat;
}

.dn-usp__icon {
  flex: 0 0 auto;
  width: 2rem;
  height: 2rem;
  color: #fff;
}

/* Vyplnena ikona ma pri rovnakej velkosti menej "atramentu" nez obrysova
   s 1,6 hrubkou — mierne zvacsenie vyrovna opticku vahu trojice. */
.dn-usp__icon--filled { width: 2.25rem; height: 2.25rem; }

.dn-footer-usp__icon--filled { width: 27px; height: 27px; }

.dn-usp__title {
  margin: 0 0 0.35rem;
  font-size: 0.875rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: #fff;
}

.dn-usp__text {
  margin: 0;
  font-size: 0.9375rem;
  line-height: 1.5;
  color: #ced4da;
}

/* --- Karty hlavnych kategorii ------------------------------------------- */
.dn-cats__grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(15rem, 1fr));
  gap: 1.5rem;
}

.dn-cats__card {
  display: flex;
  flex-direction: column;
  overflow: hidden;
  border: 1px solid var(--dn-line);
  border-radius: var(--bs-border-radius-lg);
  background: #fff;
  box-shadow: var(--dn-shadow-card);
  text-decoration: none;
  color: inherit;
  transition: box-shadow var(--dn-transition), transform var(--dn-transition);
}

.dn-cats__card:hover {
  box-shadow: var(--dn-shadow-card-hover);
  transform: translateY(-2px);
  color: inherit;
}

/* Horna vrstva je obrazok kategorie. Ak subor neexistuje, prehliadac ju
   preskoci a vykresli sa len znackovy podklad pod nou. */
.dn-cats__media {
  display: block;
  height: clamp(9rem, 7rem + 9vw, 13rem);

  background-image: var(--dn-cat-img),
    linear-gradient(135deg, var(--dn-surface) 0%, #e8edf2 100%);
  background-size: cover;
  background-position: center;
}

.dn-cats__body {
  display: block;
  padding: 1.125rem 1.25rem 1.375rem;
}

.dn-cats__name {
  display: block;
  margin-bottom: 0.35rem;
  font-size: 1.0625rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--dn-ink);
  transition: color var(--dn-transition);
}

.dn-cats__card:hover .dn-cats__name { color: var(--dn-red-700); }

.dn-cats__text {
  display: block;
  font-size: 0.9375rem;
  line-height: 1.5;
  color: var(--dn-muted);
}

/* =========================================================================
   7. Doplnky pristupnosti a tlac
   ========================================================================= */

@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }

  .product-miniature:hover .product-miniature__inner,
  .btn-primary:hover:not(:disabled) { transform: none; }

  .product-miniature:hover .product-miniature__image { transform: none; }
}

@media print {
  .header-top,
  .ps-mainmenu,
  .footer,
  .ps-searchbar { display: none !important; }
}