/**
 * PROFIHADRY.cz — Shoptet Template 14 / Samba
 * Clean Samba redesign, version 11
 * Built against the actual HTML exported from the theme preview.
 * No @font-face, no @import, no external stylesheet dependencies.
 */

:root {
  --ph-yellow: #f6b900;
  --ph-yellow-hover: #dca600;
  --ph-black: #151515;
  --ph-text: #202020;
  --ph-muted: #666b70;
  --ph-border: #e3e4e5;
  --ph-soft: #f5f5f3;
  --ph-white: #fff;
  --ph-success: #2f8a13;
  --ph-danger: #c93232;
  --ph-container: 1240px;
  --ph-gutter: clamp(16px, 2.4vw, 32px);
  --ph-radius-sm: 8px;
  --ph-radius: 14px;
  --ph-radius-lg: 22px;
  --ph-shadow-sm: 0 5px 18px rgba(21, 21, 21, 0.07);
  --ph-shadow: 0 14px 38px rgba(21, 21, 21, 0.11);
  --ph-font: Inter, ui-sans-serif, -apple-system, BlinkMacSystemFont, "Segoe UI", Arial, sans-serif;
}

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

html {
  scroll-behavior: smooth;
}

body,
.external-fonts-loaded body,
body.blank-mode {
  margin: 0;
  overflow-x: hidden;
  background: var(--ph-white);
  color: var(--ph-text);
  font-family: var(--ph-font) !important;
  font-size: 16px;
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

body.ready {
  visibility: visible !important;
}

img {
  max-width: 100%;
  height: auto;
}

a {
  color: inherit;
  text-underline-offset: 3px;
}

a:hover,
a:focus {
  color: var(--ph-black);
}

button,
input,
select,
textarea {
  font: inherit;
}

h1,
h2,
h3,
h4,
h5,
h6,
.h1,
.h2,
.h3,
.h4,
.h5,
.h6,
.external-fonts-loaded h1,
.external-fonts-loaded h2,
.external-fonts-loaded h3,
.external-fonts-loaded h4,
.external-fonts-loaded h5,
.external-fonts-loaded h6 {
  color: var(--ph-black);
  font-family: var(--ph-font) !important;
  font-weight: 800;
  line-height: 1.16;
  letter-spacing: -0.025em;
}

.container,
.container-full-width {
  padding-right: var(--ph-gutter);
  padding-left: var(--ph-gutter);
}

.btn,
a.btn,
button.btn,
.external-fonts-loaded .btn {
  display: inline-flex;
  min-height: 44px;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 10px 18px;
  border: 1px solid var(--ph-yellow);
  border-radius: var(--ph-radius-sm);
  background: var(--ph-yellow);
  color: var(--ph-black) !important;
  box-shadow: none;
  font-family: var(--ph-font) !important;
  font-size: 13px;
  font-weight: 800;
  line-height: 1.2;
  letter-spacing: 0.01em;
  text-align: center;
  text-decoration: none;
  text-transform: none;
  transition: background-color 160ms ease, border-color 160ms ease, transform 160ms ease;
}

.btn:hover,
a.btn:hover,
button.btn:hover,
.btn:focus,
a.btn:focus,
button.btn:focus {
  border-color: var(--ph-yellow-hover);
  background: var(--ph-yellow-hover);
  color: var(--ph-black) !important;
  transform: translateY(-1px);
}

.form-control,
input[type="text"],
input[type="email"],
input[type="search"],
input[type="password"],
input[type="tel"],
select,
textarea {
  min-height: 46px;
  border: 1px solid #cfd2d4;
  border-radius: var(--ph-radius-sm);
  background: var(--ph-white);
  color: var(--ph-text);
  box-shadow: none;
}

.form-control:focus,
input:focus,
select:focus,
textarea:focus {
  border-color: var(--ph-yellow);
  outline: 3px solid rgba(246, 185, 0, 0.22);
  box-shadow: none;
}

/* ========================================================================== 
   HEADER — exact Template 14 markup
   ========================================================================== */

#header {
  position: relative !important;
  z-index: 1000;
  min-height: 0 !important;
  background: var(--ph-white) !important;
  box-shadow: 0 1px 0 var(--ph-border);
}

#header .header-top {
  display: block !important;
  height: auto !important;
  min-height: 0 !important;
  padding: 0 !important;
  background: var(--ph-white) !important;
}

#header .header-top-wrapper {
  position: relative !important;
  display: grid !important;
  width: min(100%, var(--ph-container)) !important;
  min-height: 108px !important;
  grid-template-columns: minmax(120px, 1fr) 320px minmax(220px, 1fr) !important;
  align-items: center !important;
  gap: 24px !important;
  margin: 0 auto !important;
  padding: 16px var(--ph-gutter) !important;
}

#header .header-top-wrapper > .navigation-tools {
  display: block !important;
  grid-column: 1 !important;
  min-width: 0 !important;
}

#header .header-top-wrapper > .site-name,
#header .site-name {
  position: static !important;
  display: block !important;
  grid-column: 2 !important;
  justify-self: center !important;
  width: 320px !important;
  max-width: 100% !important;
  height: auto !important;
  margin: 0 !important;
  padding: 0 !important;
  transform: none !important;
}

#header .site-name a {
  display: flex !important;
  width: 100% !important;
  align-items: center !important;
  justify-content: center !important;
}

#header .site-name a img {
  display: block !important;
  width: 100% !important;
  max-width: 320px !important;
  height: auto !important;
  max-height: 82px !important;
  margin: 0 auto !important;
  object-fit: contain !important;
}

#header .header-top-wrapper > .navigation-buttons,
#header .navigation-buttons {
  position: static !important;
  display: flex !important;
  grid-column: 3 !important;
  justify-self: end !important;
  width: auto !important;
  min-width: 0 !important;
  height: auto !important;
  align-items: center !important;
  justify-content: flex-end !important;
  gap: 8px !important;
  margin: 0 !important;
  padding: 0 !important;
  transform: none !important;
}

#header .navigation-buttons > a,
#header .navigation-buttons > button,
#header .navigation-buttons .top-nav-button,
#header .navigation-buttons .cart-count {
  position: relative !important;
  display: inline-flex !important;
  width: 44px !important;
  min-width: 44px !important;
  height: 44px !important;
  min-height: 44px !important;
  align-items: center !important;
  justify-content: center !important;
  margin: 0 !important;
  padding: 0 !important;
  border: 1px solid transparent !important;
  border-radius: 50% !important;
  background: transparent !important;
  color: var(--ph-black) !important;
  box-shadow: none !important;
  font-size: 20px !important;
  line-height: 1 !important;
  transform: none !important;
}

#header .navigation-buttons > a:hover,
#header .navigation-buttons > button:hover {
  border-color: var(--ph-border) !important;
  background: var(--ph-soft) !important;
}

#header .navigation-buttons .cart-count {
  border-color: var(--ph-yellow) !important;
  background: var(--ph-yellow) !important;
}

#header .navigation-buttons .cart-count:hover {
  border-color: var(--ph-yellow-hover) !important;
  background: var(--ph-yellow-hover) !important;
}

#header .navigation-buttons [class^="icon-"],
#header .navigation-buttons [class*=" icon-"],
#header .navigation-buttons .icon-cart {
  position: static !important;
  display: inline-block !important;
  margin: 0 !important;
  color: currentColor !important;
  font-size: 20px !important;
  line-height: 1 !important;
}

#header .cart-count > i[data-testid="headerCartCount"] {
  position: absolute !important;
  top: -3px !important;
  right: -3px !important;
  display: flex !important;
  width: 18px !important;
  min-width: 18px !important;
  height: 18px !important;
  align-items: center !important;
  justify-content: center !important;
  padding: 0 !important;
  border: 2px solid var(--ph-white) !important;
  border-radius: 50% !important;
  background: var(--ph-black) !important;
  color: var(--ph-white) !important;
  font-size: 10px !important;
  font-style: normal !important;
  font-weight: 800 !important;
  line-height: 1 !important;
}

#header .header-top-wrapper > .user-action {
  position: absolute !important;
  top: 100% !important;
  right: 0 !important;
  left: 0 !important;
  z-index: 1010 !important;
  width: 100% !important;
  height: 0 !important;
  min-height: 0 !important;
  margin: 0 !important;
  padding: 0 !important;
  pointer-events: none;
}

#header .user-action .popup-widget {
  pointer-events: auto;
}

#header .header-bottom,
body.desktop #header .header-bottom {
  position: relative !important;
  display: block !important;
  width: 100% !important;
  height: auto !important;
  min-height: 52px !important;
  overflow: visible !important;
  border-top: 1px solid var(--ph-border) !important;
  border-bottom: 2px solid var(--ph-yellow) !important;
  background: var(--ph-white) !important;
  opacity: 1 !important;
  visibility: visible !important;
  transform: none !important;
}

#header .header-bottom-wrapper {
  position: relative !important;
  display: block !important;
  width: min(100%, var(--ph-container)) !important;
  max-width: var(--ph-container) !important;
  height: auto !important;
  margin: 0 auto !important;
  padding: 0 var(--ph-gutter) !important;
}

#header #navigation,
#header .navigation-in,
#header .navigation-in.menu {
  position: static !important;
  display: block !important;
  width: 100% !important;
  height: auto !important;
  min-height: 52px !important;
  max-height: none !important;
  overflow: visible !important;
  margin: 0 !important;
  padding: 0 !important;
  border: 0 !important;
  background: transparent !important;
  opacity: 1 !important;
  visibility: visible !important;
  transform: none !important;
}

#header .navigation-in > ul.menu-level-1 {
  position: static !important;
  display: flex !important;
  width: 100% !important;
  height: auto !important;
  min-height: 52px !important;
  max-height: none !important;
  align-items: stretch !important;
  justify-content: center !important;
  gap: 0 !important;
  margin: 0 !important;
  padding: 0 !important;
  overflow: visible !important;
  list-style: none !important;
  opacity: 1 !important;
  visibility: visible !important;
  transform: none !important;
}

#header .navigation-in > ul.menu-level-1 > li {
  position: relative !important;
  display: block !important;
  flex: 0 1 auto !important;
  width: auto !important;
  height: auto !important;
  margin: 0 !important;
  padding: 0 !important;
  border: 0 !important;
  opacity: 1 !important;
  visibility: visible !important;
}

#header .navigation-in > ul.menu-level-1 > li > a {
  position: relative !important;
  display: flex !important;
  min-height: 52px !important;
  align-items: center !important;
  justify-content: center !important;
  padding: 10px clamp(7px, 0.85vw, 13px) !important;
  border: 0 !important;
  border-radius: 0 !important;
  background: transparent !important;
  color: var(--ph-black) !important;
  font-size: clamp(11px, 0.88vw, 13px) !important;
  font-weight: 700 !important;
  line-height: 1.25 !important;
  letter-spacing: 0 !important;
  text-align: center !important;
  text-decoration: none !important;
  text-transform: none !important;
  white-space: nowrap !important;
  opacity: 1 !important;
  visibility: visible !important;
}

#header .navigation-in > ul.menu-level-1 > li > a b {
  font-weight: 700 !important;
}

#header .navigation-in > ul.menu-level-1 > li > a::after {
  content: "";
  position: absolute;
  right: 10px;
  bottom: 0;
  left: 10px;
  height: 3px;
  border-radius: 3px 3px 0 0;
  background: var(--ph-yellow);
  transform: scaleX(0);
  transform-origin: center;
  transition: transform 160ms ease;
}

#header .navigation-in > ul.menu-level-1 > li:hover > a::after,
#header .navigation-in > ul.menu-level-1 > li.exp > a::after {
  transform: scaleX(1);
}

#header .navigation-in .submenu-arrow {
  margin-left: 6px;
}

#header .navigation-in ul.menu-level-2 {
  position: absolute !important;
  top: calc(100% - 1px) !important;
  left: 50% !important;
  z-index: 1020 !important;
  display: none !important;
  width: min(980px, calc(100vw - 32px)) !important;
  max-height: min(72vh, 620px) !important;
  grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
  gap: 10px !important;
  margin: 0 !important;
  padding: 16px !important;
  overflow-y: auto !important;
  border: 1px solid var(--ph-border) !important;
  border-top: 4px solid var(--ph-yellow) !important;
  border-radius: 0 0 var(--ph-radius) var(--ph-radius) !important;
  background: var(--ph-white) !important;
  box-shadow: var(--ph-shadow) !important;
  list-style: none !important;
  opacity: 1 !important;
  visibility: visible !important;
  transform: translateX(-50%) !important;
}

#header .navigation-in > ul.menu-level-1 > li:hover > ul.menu-level-2,
#header .navigation-in > ul.menu-level-1 > li.exp > ul.menu-level-2 {
  display: grid !important;
}

#header .menu-level-2 > li {
  display: grid !important;
  min-width: 0 !important;
  grid-template-columns: 64px minmax(0, 1fr) !important;
  align-items: center !important;
  gap: 10px !important;
  margin: 0 !important;
  padding: 8px !important;
  border: 1px solid transparent !important;
  border-radius: var(--ph-radius-sm) !important;
  background: var(--ph-white) !important;
}

#header .menu-level-2 > li:hover {
  border-color: #eadca8 !important;
  background: #fffaf0 !important;
}

#header .menu-level-2 .menu-image {
  display: block !important;
  width: 64px !important;
  min-width: 64px !important;
  height: 52px !important;
  min-height: 52px !important;
  padding: 0 !important;
  overflow: hidden !important;
  border-radius: 7px !important;
  background: var(--ph-soft) !important;
}

#header .menu-level-2 .menu-image img {
  display: block !important;
  width: 100% !important;
  height: 100% !important;
  object-fit: contain !important;
}

#header .menu-level-2 > li > div > a {
  display: block !important;
  padding: 6px 4px !important;
  background: transparent !important;
  color: var(--ph-black) !important;
  font-size: 13px !important;
  font-weight: 750 !important;
  line-height: 1.3 !important;
  text-decoration: none !important;
  text-transform: none !important;
}

#header .menu-helper {
  display: none !important;
}

@media (min-width: 1101px) {
  #header [data-testid="hamburgerMenu"] {
    display: none !important;
  }
}

/* Search popup */
#header .search-widget {
  border: 1px solid var(--ph-border);
  border-radius: var(--ph-radius);
  background: var(--ph-white);
  box-shadow: var(--ph-shadow);
}

#header .search-form-input-group {
  display: flex;
  gap: 8px;
}

#header .search-input {
  min-height: 48px;
}

/* ========================================================================== 
   HOMEPAGE HERO
   ========================================================================== */

.type-index .carousel-wrapper,
.type-index .carousel-wrapper .row,
.type-index .wide-carousel,
.type-index #carousel {
  width: 100% !important;
  max-width: none !important;
  margin: 0 !important;
  padding: 0 !important;
}

.type-index .carousel-wrapper .row {
  margin-right: 0 !important;
  margin-left: 0 !important;
}

.type-index #carousel {
  overflow: hidden !important;
  border-bottom: 2px solid var(--ph-yellow);
  background: #dfe3e5;
}

.type-index #carousel .carousel-inner {
  position: relative !important;
  width: 100% !important;
  overflow: hidden !important;
  background: #dfe3e5 !important;
}

.type-index #carousel .carousel-inner > .item {
  position: relative !important;
  display: none;
  width: 100% !important;
  min-height: 0 !important;
  aspect-ratio: 1920 / 580;
  overflow: hidden !important;
}

.type-index #carousel .carousel-inner > .item.active {
  display: block !important;
}

.type-index #carousel .carousel-inner > .item > a,
.type-index #carousel .carousel-inner > .item > img,
.type-index #carousel .carousel-inner > .item > a > img {
  display: block !important;
  width: 100% !important;
  height: 100% !important;
  max-width: none !important;
  min-height: 0 !important;
  object-fit: cover !important;
  object-position: center !important;
}

.type-index #carousel .carousel-inner > .item > a {
  position: relative !important;
}

.type-index #carousel .extended-banner-texts:empty {
  display: none !important;
}

.type-index #carousel .extended-banner-texts:not(:empty) {
  position: absolute !important;
  top: 50% !important;
  left: max(var(--ph-gutter), calc((100% - var(--ph-container)) / 2 + var(--ph-gutter))) !important;
  z-index: 3 !important;
  display: flex !important;
  width: min(500px, 44vw) !important;
  height: auto !important;
  flex-direction: column !important;
  align-items: flex-start !important;
  gap: 14px !important;
  margin: 0 !important;
  padding: clamp(24px, 3vw, 42px) !important;
  border: 1px solid rgba(255, 255, 255, 0.2) !important;
  border-radius: var(--ph-radius-lg) !important;
  background: rgba(21, 21, 21, 0.82) !important;
  box-shadow: var(--ph-shadow) !important;
  color: var(--ph-white) !important;
  transform: translateY(-50%) !important;
}

.type-index #carousel .extended-banner-title,
.type-index #carousel .extended-banner-text,
.type-index #carousel .extended-banner-link {
  position: static !important;
  display: block !important;
  width: 100% !important;
  max-width: none !important;
  height: auto !important;
  margin: 0 !important;
  padding: 0 !important;
  border: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
  color: var(--ph-white) !important;
  transform: none !important;
}

.type-index #carousel .extended-banner-title {
  font-size: clamp(34px, 4vw, 64px) !important;
  font-weight: 850 !important;
  line-height: 1 !important;
  letter-spacing: -0.045em !important;
}

.type-index #carousel .extended-banner-title::before {
  content: "";
  display: block;
  width: 46px;
  height: 4px;
  margin-bottom: 18px;
  border-radius: 4px;
  background: var(--ph-yellow);
}

.type-index #carousel .extended-banner-text {
  font-size: clamp(15px, 1.4vw, 20px) !important;
  font-weight: 650 !important;
  line-height: 1.45 !important;
}

.type-index #carousel .carousel-control {
  position: absolute !important;
  top: 50% !important;
  z-index: 5 !important;
  display: flex !important;
  width: 48px !important;
  height: 48px !important;
  align-items: center !important;
  justify-content: center !important;
  margin-top: -24px !important;
  border: 1px solid rgba(255, 255, 255, 0.8) !important;
  border-radius: 50% !important;
  background: rgba(21, 21, 21, 0.3) !important;
  color: var(--ph-white) !important;
  opacity: 1 !important;
  text-shadow: none !important;
}

.type-index #carousel .carousel-control.left {
  left: 18px !important;
}

.type-index #carousel .carousel-control.right {
  right: 18px !important;
}

/* ========================================================================== 
   HOMEPAGE PRODUCTS — static four-column grid, slider disabled intentionally
   ========================================================================== */

.type-index #content-wrapper,
.type-index #content-wrapper.container,
.type-index #content,
.type-index #content.content {
  width: 100% !important;
  max-width: none !important;
  margin: 0 !important;
  padding-right: 0 !important;
  padding-left: 0 !important;
}

.type-index .homepage-group-title {
  position: relative;
  width: min(calc(100% - 2 * var(--ph-gutter)), var(--ph-container)) !important;
  max-width: var(--ph-container) !important;
  margin: clamp(58px, 7vw, 92px) auto 38px !important;
  padding: 0 !important;
  color: var(--ph-black) !important;
  font-size: clamp(28px, 3vw, 42px) !important;
  font-weight: 850 !important;
  line-height: 1.15 !important;
  text-align: center !important;
  text-transform: none !important;
}

.type-index .homepage-group-title::after {
  content: "";
  display: block;
  width: 54px;
  height: 4px;
  margin: 16px auto 0;
  border-radius: 4px;
  background: var(--ph-yellow);
}

.type-index .products-wrapper {
  width: min(calc(100% - 2 * var(--ph-gutter)), var(--ph-container)) !important;
  max-width: var(--ph-container) !important;
  margin: 0 auto !important;
  padding: 0 !important;
  overflow: visible !important;
}

.type-index #products-2,
.type-index #products-2.product-slider,
.type-index #products-2.ph-product-grid {
  position: static !important;
  display: grid !important;
  width: 100% !important;
  max-width: none !important;
  height: auto !important;
  min-height: 0 !important;
  grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
  gap: 22px !important;
  margin: 0 !important;
  padding: 0 !important;
  overflow: visible !important;
  white-space: normal !important;
  opacity: 1 !important;
  visibility: visible !important;
  transform: none !important;
}

.type-index #products-2 > .product,
.type-index #products-2.product-slider > .product,
.type-index #products-2.ph-product-grid > .product,
.type-index #products-2 > .product.active {
  position: relative !important;
  top: auto !important;
  right: auto !important;
  bottom: auto !important;
  left: auto !important;
  display: flex !important;
  width: auto !important;
  min-width: 0 !important;
  max-width: none !important;
  height: auto !important;
  min-height: 100% !important;
  float: none !important;
  margin: 0 !important;
  padding: 0 !important;
  overflow: visible !important;
  border: 0 !important;
  background: transparent !important;
  opacity: 1 !important;
  visibility: visible !important;
  transform: none !important;
}

.type-index #products-2 .p {
  position: relative !important;
  display: flex !important;
  width: 100% !important;
  min-width: 0 !important;
  min-height: 100% !important;
  flex-direction: column !important;
  margin: 0 !important;
  padding: 0 !important;
  overflow: hidden !important;
  border: 1px solid var(--ph-border) !important;
  border-radius: var(--ph-radius) !important;
  background: var(--ph-white) !important;
  box-shadow: var(--ph-shadow-sm) !important;
  transition: border-color 160ms ease, box-shadow 160ms ease, transform 160ms ease;
}

.type-index #products-2 .p:hover {
  border-color: #d6c479 !important;
  box-shadow: var(--ph-shadow) !important;
  transform: translateY(-3px) !important;
}

.type-index #products-2 .p > a.image {
  position: relative !important;
  display: flex !important;
  width: 100% !important;
  height: 260px !important;
  min-height: 260px !important;
  align-items: center !important;
  justify-content: center !important;
  margin: 0 !important;
  padding: 16px !important;
  overflow: hidden !important;
  border: 0 !important;
  border-radius: 0 !important;
  background: var(--ph-soft) !important;
}

.type-index #products-2 .p > a.image img {
  display: block !important;
  width: 100% !important;
  max-width: 100% !important;
  height: 100% !important;
  max-height: 100% !important;
  margin: 0 !important;
  padding: 0 !important;
  object-fit: contain !important;
  transform: none !important;
}

.type-index #products-2 .p-in {
  display: flex !important;
  width: 100% !important;
  min-width: 0 !important;
  min-height: 220px !important;
  flex: 1 1 auto !important;
  flex-direction: column !important;
  padding: 18px !important;
}

.type-index #products-2 .p-in-in {
  width: 100% !important;
}

.type-index #products-2 .name {
  display: block !important;
  min-height: 3.15em !important;
  margin: 0 0 14px !important;
  padding: 0 !important;
  color: var(--ph-black) !important;
  font-size: 15px !important;
  font-weight: 750 !important;
  line-height: 1.42 !important;
  text-align: left !important;
  text-decoration: none !important;
  text-transform: none !important;
}

.type-index #products-2 .p-bottom {
  display: flex !important;
  width: 100% !important;
  flex: 1 1 auto !important;
  flex-direction: column !important;
  justify-content: flex-end !important;
  margin: 0 !important;
  padding: 14px 0 0 !important;
  border-top: 1px solid var(--ph-border) !important;
}

.type-index #products-2 .p-bottom > div {
  display: grid !important;
  width: 100% !important;
  grid-template-columns: minmax(0, 1fr) auto !important;
  align-items: end !important;
  gap: 10px !important;
}

.type-index #products-2 .prices {
  min-width: 0 !important;
  text-align: left !important;
}

.type-index #products-2 .price-additional {
  margin-bottom: 2px !important;
  color: var(--ph-muted) !important;
  font-size: 11px !important;
  line-height: 1.25 !important;
  text-align: left !important;
}

.type-index #products-2 .price,
.type-index #products-2 .price strong {
  color: var(--ph-black) !important;
  font-size: 18px !important;
  font-weight: 850 !important;
  line-height: 1.2 !important;
  text-align: left !important;
}

.type-index #products-2 .availability {
  grid-column: 1 / -1 !important;
  margin-top: 8px !important;
  color: var(--ph-success) !important;
  font-size: 12px !important;
  font-weight: 700 !important;
  text-align: left !important;
}

.type-index #products-2 .ratings-wrapper {
  display: none !important;
}

.type-index #products-2 .p-tools {
  align-self: end !important;
  margin: 0 !important;
  padding: 0 !important;
  text-align: right !important;
}

.type-index #products-2 .p-tools form {
  margin: 0 !important;
}

.type-index #products-2 .p-tools .btn,
.type-index #products-2 .p-tools button {
  min-height: 40px !important;
  padding: 8px 12px !important;
  border-radius: 7px !important;
  font-size: 12px !important;
  white-space: nowrap !important;
}

.type-index #products-2 .flags,
.type-index #products-2 .flags-default {
  position: absolute !important;
  top: 12px !important;
  left: 12px !important;
  z-index: 4 !important;
  display: flex !important;
  flex-wrap: wrap !important;
  gap: 5px !important;
}

.type-index #products-2 .flag {
  display: inline-flex !important;
  min-height: 24px !important;
  align-items: center !important;
  padding: 4px 8px !important;
  border-radius: 6px !important;
  background: var(--ph-yellow) !important;
  color: var(--ph-black) !important;
  font-size: 10px !important;
  font-weight: 850 !important;
  line-height: 1 !important;
  text-transform: uppercase !important;
}

.type-index #products-2 .flag-tip {
  background: var(--ph-black) !important;
  color: var(--ph-white) !important;
}

/* Hide slider-specific UI because products are intentionally a grid. */
.type-index .products-wrapper .product-slider-navigation,
.type-index .products-wrapper .product-slider-pagination,
.type-index .products-wrapper .carousel-control,
.type-index .products-wrapper .slick-arrow,
.type-index .products-wrapper .slick-dots {
  display: none !important;
}

/* ========================================================================== 
   HOMEPAGE CONTENT BANNER
   ========================================================================== */

.type-index .middle-banners {
  width: 100% !important;
  margin: clamp(72px, 9vw, 120px) 0 0 !important;
  padding: 0 !important;
}

.type-index .middle-banners .banners-content,
.type-index .middle-banners .banner-wrapper,
.type-index .middle-banners .banner-wrapper > span {
  display: block !important;
  width: 100% !important;
  margin: 0 !important;
  padding: 0 !important;
}

.type-index .middle-banners .parallax_content {
  width: 100% !important;
  background: var(--ph-black) !important;
  color: #ddd !important;
}

.type-index .middle-banners .parallax_content > .container {
  width: min(100%, var(--ph-container)) !important;
  max-width: var(--ph-container) !important;
  margin: 0 auto !important;
  padding: clamp(56px, 8vw, 96px) var(--ph-gutter) !important;
}

.type-index .middle-banners .parallax_content h1,
.type-index .middle-banners .parallax_content h1 span {
  display: block !important;
  width: 100% !important;
  max-width: 780px !important;
  margin: 0 0 24px !important;
  padding: 0 !important;
  color: var(--ph-yellow) !important;
  font-family: var(--ph-font) !important;
  font-size: clamp(30px, 4vw, 50px) !important;
  font-weight: 850 !important;
  line-height: 1.1 !important;
  letter-spacing: -0.035em !important;
  text-transform: none !important;
}

.type-index .middle-banners .parallax_content p {
  max-width: 860px !important;
  margin: 0 0 14px !important;
  color: #d6d6d6 !important;
  font-size: 16px !important;
  line-height: 1.7 !important;
}

.type-index .middle-banners .parallax_content p a:not(.moreInfo) {
  color: var(--ph-yellow) !important;
  font-weight: 700 !important;
}

.type-index .middle-banners .moreInfo {
  display: inline-flex !important;
  min-height: 44px !important;
  align-items: center !important;
  margin: 12px 0 0 !important;
  padding: 10px 18px !important;
  border: 1px solid var(--ph-yellow) !important;
  border-radius: var(--ph-radius-sm) !important;
  background: var(--ph-yellow) !important;
  color: var(--ph-black) !important;
  font-size: 13px !important;
  font-weight: 800 !important;
  text-decoration: none !important;
  text-transform: none !important;
}

/* ========================================================================== 
   LATEST REVIEWS
   ========================================================================== */

.type-index .homepage-latest-contribution-full-width {
  width: 100% !important;
  padding: clamp(64px, 8vw, 100px) 0 !important;
  background: var(--ph-soft) !important;
}

.type-index .homepage-latest-contribution {
  width: min(100%, var(--ph-container)) !important;
  max-width: var(--ph-container) !important;
  margin: 0 auto !important;
  padding: 0 var(--ph-gutter) !important;
}

.type-index .latest-contribution-wrapper {
  display: grid !important;
  width: 100% !important;
  grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  gap: 22px !important;
  margin: 0 !important;
}

.type-index .latest-contribution {
  min-width: 0 !important;
}

.type-index .latest-contribution > h2:not(.latest-contribution-placeholder) {
  grid-column: 1 / -1;
  margin: 0 0 24px !important;
  color: var(--ph-black) !important;
  font-size: clamp(26px, 3vw, 38px) !important;
  text-align: left !important;
}

.type-index .latest-contribution-placeholder {
  display: none !important;
}

.type-index .latest-contribution-inner {
  display: grid !important;
  min-height: 180px !important;
  grid-template-columns: 110px minmax(0, 1fr) !important;
  gap: 18px !important;
  align-items: center !important;
  padding: 20px !important;
  border: 1px solid var(--ph-border) !important;
  border-radius: var(--ph-radius) !important;
  background: var(--ph-white) !important;
  box-shadow: var(--ph-shadow-sm) !important;
  color: var(--ph-text) !important;
  text-decoration: none !important;
}

.type-index .latest-contribution-image img {
  width: 100px !important;
  height: 100px !important;
  object-fit: contain !important;
}

.type-index .latest-contribution-product {
  margin: 0 0 8px !important;
  color: var(--ph-black) !important;
  font-size: 16px !important;
  line-height: 1.35 !important;
}

.type-index .latest-contribution-info {
  display: flex !important;
  flex-wrap: wrap !important;
  gap: 6px !important;
  align-items: center !important;
  margin-bottom: 8px !important;
  color: var(--ph-muted) !important;
  font-size: 12px !important;
}

.type-index .latest-contribution-description {
  color: var(--ph-text) !important;
  font-size: 14px !important;
  line-height: 1.55 !important;
}

/* ========================================================================== 
   NEWSLETTER & FOOTER
   ========================================================================== */

.footer-newsletter-full-width {
  width: 100% !important;
  padding: clamp(44px, 6vw, 72px) 0 !important;
  background: var(--ph-yellow) !important;
}

.footer-newsletter-full-width .container-full-width {
  width: min(100%, var(--ph-container)) !important;
  max-width: var(--ph-container) !important;
  margin: 0 auto !important;
  padding: 0 var(--ph-gutter) !important;
}

.footer-newsletter {
  display: grid !important;
  grid-template-columns: minmax(220px, 0.65fr) minmax(420px, 1.35fr) !important;
  gap: 40px !important;
  align-items: center !important;
}

.footer-newsletter h2 {
  margin: 0 !important;
  color: var(--ph-black) !important;
  font-size: clamp(28px, 3vw, 42px) !important;
}

.footer-newsletter form,
.footer-newsletter fieldset {
  width: 100% !important;
  margin: 0 !important;
  padding: 0 !important;
  border: 0 !important;
}

.footer-newsletter fieldset {
  display: grid !important;
  grid-template-columns: minmax(0, 1fr) auto !important;
  gap: 10px !important;
  align-items: start !important;
}

.footer-newsletter .form-group {
  margin: 0 !important;
}

.footer-newsletter .smart-label-wrapper {
  grid-column: 1 !important;
}

.footer-newsletter .consents {
  grid-column: 1 / -1 !important;
  grid-row: 2 !important;
}

.footer-newsletter .consents .label,
.footer-newsletter .consents p {
  margin: 6px 0 0 !important;
  color: rgba(21, 21, 21, 0.72) !important;
  font-size: 11px !important;
  line-height: 1.4 !important;
}

.footer-newsletter .form-control {
  min-height: 50px !important;
  border-color: rgba(21, 21, 21, 0.35) !important;
  background: var(--ph-white) !important;
}

.footer-newsletter button.btn {
  min-height: 50px !important;
  border-color: var(--ph-black) !important;
  background: var(--ph-black) !important;
  color: var(--ph-white) !important;
}

#footer {
  margin: 0 !important;
  padding: 0 !important;
  background: var(--ph-black) !important;
  color: #c7c7c7 !important;
}

/* The full-width newsletter above is the primary one. */
#footer .footer-rows,
#footer .custom-footer__newsletter {
  display: none !important;
}

/* Legacy project footer is moved here by V5 JavaScript. */
#footer .ph-legacy-footer {
  width: 100% !important;
  max-width: none !important;
  margin: 0 !important;
  padding: clamp(48px, 7vw, 80px) var(--ph-gutter) 36px !important;
  background: var(--ph-black) !important;
  color: #c7c7c7 !important;
}

#footer .ph-legacy-footer > .row {
  display: grid !important;
  width: min(100%, var(--ph-container)) !important;
  max-width: var(--ph-container) !important;
  grid-template-columns: 1fr 0.8fr 1.4fr !important;
  gap: clamp(30px, 4vw, 60px) !important;
  margin: 0 auto !important;
}

#footer .delivery_payment-container,
#footer #menuarticles,
#footer .vc-content_shopinfo {
  width: auto !important;
  min-width: 0 !important;
  float: none !important;
  margin: 0 !important;
  padding: 0 !important;
}

#footer .delivery_payment-container h2,
#footer #menuarticles .header,
#footer .vc-content_shopinfo .header {
  margin: 0 0 18px !important;
  color: var(--ph-white) !important;
  font-size: 16px !important;
  font-weight: 800 !important;
  letter-spacing: 0 !important;
  text-transform: none !important;
}

#footer #menuarticles ul {
  margin: 0 !important;
  padding: 0 !important;
  list-style: none !important;
}

#footer #menuarticles li {
  margin: 0 0 8px !important;
}

#footer #menuarticles a,
#footer .eshopContact a {
  margin: 0 !important;
  color: #c7c7c7 !important;
  font-size: 14px !important;
  line-height: 1.5 !important;
  text-decoration: none !important;
}

#footer #menuarticles a:hover,
#footer .eshopContact a:hover {
  color: var(--ph-yellow) !important;
}

#footer #menuarticles a::before,
#footer .eshopContact a::before {
  display: none !important;
}

#footer .eshopContact {
  display: grid !important;
  grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  gap: 22px !important;
  color: #c7c7c7 !important;
  font-size: 14px !important;
  line-height: 1.8 !important;
}

#footer .eshopContact .prvni,
#footer .eshopContact .druhy {
  width: auto !important;
  margin: 0 !important;
}

#footer .eshopContact .druhy a {
  display: block !important;
}

#footer .ico {
  display: flex !important;
  flex-wrap: wrap !important;
  gap: 8px !important;
}

#footer .ico span {
  display: inline-flex !important;
  margin: 0 !important;
}

#footer .ico img {
  width: auto !important;
  max-width: 62px !important;
  height: 38px !important;
  padding: 4px !important;
  border-radius: 6px !important;
  background: var(--ph-white) !important;
  object-fit: contain !important;
}

#footer #extraAdvantage {
  display: grid !important;
  width: min(100%, var(--ph-container)) !important;
  max-width: var(--ph-container) !important;
  grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
  gap: 1px !important;
  margin: 44px auto 0 !important;
  overflow: hidden !important;
  border: 1px solid #343434 !important;
  border-radius: var(--ph-radius) !important;
  background: #343434 !important;
}

#footer #extraAdvantage .advan {
  display: flex !important;
  min-height: 76px !important;
  align-items: center !important;
  justify-content: center !important;
  padding: 16px !important;
  background: #1d1d1d !important;
  color: var(--ph-white) !important;
  font-size: 14px !important;
  font-weight: 750 !important;
  text-align: center !important;
}

#footer #extraAdvantage a {
  color: var(--ph-white) !important;
  text-decoration: none !important;
}

#footer #extraAdvantage a:hover {
  color: var(--ph-yellow) !important;
}

#footer .comGate:empty {
  display: none !important;
}

#footer .footer-bottom-full-width {
  border-top: 1px solid #303030 !important;
  background: #101010 !important;
}

#footer .footer-bottom {
  display: flex !important;
  width: min(100%, var(--ph-container)) !important;
  min-height: 64px !important;
  align-items: center !important;
  justify-content: space-between !important;
  gap: 20px !important;
  margin: 0 auto !important;
  padding: 16px var(--ph-gutter) !important;
  background: transparent !important;
  color: #979797 !important;
  font-size: 12px !important;
}

#footer .footer-bottom a {
  color: #bdbdbd !important;
}

/* Before JavaScript moves the legacy footer, keep it readable and full width. */
body > .container:has(#menuarticles) {
  width: 100% !important;
  max-width: none !important;
  margin: 0 !important;
  padding: 48px var(--ph-gutter) !important;
  background: var(--ph-black) !important;
  color: #c7c7c7 !important;
}

/* ========================================================================== 
   RESPONSIVE
   ========================================================================== */

@media (max-width: 1199px) {
  #header .header-top-wrapper {
    grid-template-columns: minmax(80px, 1fr) 280px minmax(190px, 1fr) !important;
  }

  #header .header-top-wrapper > .site-name,
  #header .site-name {
    width: 280px !important;
  }

  #header .site-name a img {
    max-width: 280px !important;
  }

  #header .navigation-in > ul.menu-level-1 > li > a {
    padding-right: 7px !important;
    padding-left: 7px !important;
    font-size: 11px !important;
  }

  .type-index #products-2,
  .type-index #products-2.product-slider,
  .type-index #products-2.ph-product-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
  }
}

@media (max-width: 1100px) {
  #header .header-top-wrapper {
    min-height: 86px !important;
    grid-template-columns: minmax(0, 1fr) auto !important;
  }

  #header .header-top-wrapper > .navigation-tools {
    display: none !important;
  }

  #header .header-top-wrapper > .site-name,
  #header .site-name {
    grid-column: 1 !important;
    justify-self: start !important;
    width: 230px !important;
  }

  #header .site-name a img {
    max-width: 230px !important;
    max-height: 64px !important;
  }

  #header .header-top-wrapper > .navigation-buttons,
  #header .navigation-buttons {
    grid-column: 2 !important;
  }

  #header [data-testid="hamburgerMenu"] {
    display: inline-flex !important;
  }

  #header .header-bottom,
  body.desktop #header .header-bottom {
    position: fixed !important;
    top: 0 !important;
    right: 0 !important;
    bottom: 0 !important;
    left: auto !important;
    z-index: 1500 !important;
    display: none !important;
    width: min(420px, 92vw) !important;
    min-height: 100vh !important;
    overflow-y: auto !important;
    border: 0 !important;
    background: var(--ph-white) !important;
    box-shadow: -12px 0 36px rgba(21, 21, 21, 0.18) !important;
  }

  body.navigation-window-visible #header .header-bottom,
  .navigation-window-visible #header .header-bottom {
    display: block !important;
  }

  #header .header-bottom-wrapper {
    width: 100% !important;
    padding: 70px 20px 30px !important;
  }

  #header .navigation-in > ul.menu-level-1 {
    display: block !important;
  }

  #header .navigation-in > ul.menu-level-1 > li,
  #header .navigation-in > ul.menu-level-1 > li > a {
    width: 100% !important;
  }

  #header .navigation-in > ul.menu-level-1 > li > a {
    min-height: 48px !important;
    justify-content: space-between !important;
    padding: 12px 10px !important;
    border-bottom: 1px solid var(--ph-border) !important;
    font-size: 14px !important;
    text-align: left !important;
  }

  #header .navigation-in ul.menu-level-2,
  #header .navigation-in > ul.menu-level-1 > li:hover > ul.menu-level-2,
  #header .navigation-in > ul.menu-level-1 > li.exp > ul.menu-level-2 {
    position: static !important;
    display: none !important;
    width: 100% !important;
    max-height: none !important;
    grid-template-columns: 1fr !important;
    padding: 8px !important;
    border: 0 !important;
    border-radius: 0 !important;
    box-shadow: none !important;
    transform: none !important;
  }

  #header .navigation-in > ul.menu-level-1 > li.exp > ul.menu-level-2 {
    display: grid !important;
  }

  #header .menu-level-2 .menu-image {
    display: none !important;
  }

  #header .menu-level-2 > li {
    display: block !important;
  }

  .footer-newsletter {
    grid-template-columns: 1fr !important;
    gap: 24px !important;
  }

  #footer .ph-legacy-footer > .row {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  }

  #footer .vc-content_shopinfo {
    grid-column: 1 / -1 !important;
  }
}

@media (max-width: 767px) {
  body,
  .external-fonts-loaded body,
  body.blank-mode {
    font-size: 15px;
  }

  #header .header-top-wrapper {
    min-height: 74px !important;
    padding-top: 10px !important;
    padding-bottom: 10px !important;
  }

  #header .header-top-wrapper > .site-name,
  #header .site-name {
    width: min(190px, 44vw) !important;
  }

  #header .site-name a img {
    max-width: 100% !important;
    max-height: 54px !important;
  }

  #header .navigation-buttons > a,
  #header .navigation-buttons > button,
  #header .navigation-buttons .top-nav-button,
  #header .navigation-buttons .cart-count {
    width: 40px !important;
    min-width: 40px !important;
    height: 40px !important;
    min-height: 40px !important;
  }

  #header .top-nav-button-login {
    display: none !important;
  }

  .type-index #carousel .carousel-inner > .item {
    aspect-ratio: 16 / 9;
  }

  .type-index #carousel .extended-banner-texts:not(:empty) {
    top: auto !important;
    right: 18px !important;
    bottom: 18px !important;
    left: 18px !important;
    width: auto !important;
    padding: 20px !important;
    transform: none !important;
  }

  .type-index #carousel .extended-banner-title {
    font-size: clamp(28px, 8vw, 42px) !important;
  }

  .type-index #carousel .extended-banner-text {
    font-size: 14px !important;
  }

  .type-index #carousel .carousel-control {
    width: 40px !important;
    height: 40px !important;
    margin-top: -20px !important;
  }

  .type-index #products-2,
  .type-index #products-2.product-slider,
  .type-index #products-2.ph-product-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 12px !important;
  }

  .type-index #products-2 .p > a.image {
    height: 190px !important;
    min-height: 190px !important;
    padding: 10px !important;
  }

  .type-index #products-2 .p-in {
    min-height: 230px !important;
    padding: 13px !important;
  }

  .type-index #products-2 .name {
    font-size: 13px !important;
  }

  .type-index #products-2 .p-bottom > div {
    display: flex !important;
    flex-direction: column !important;
    align-items: stretch !important;
  }

  .type-index #products-2 .p-tools,
  .type-index #products-2 .p-tools form,
  .type-index #products-2 .p-tools .btn {
    width: 100% !important;
  }

  .type-index .latest-contribution-wrapper {
    grid-template-columns: 1fr !important;
  }

  .footer-newsletter fieldset {
    grid-template-columns: 1fr !important;
  }

  .footer-newsletter .consents,
  .footer-newsletter button.btn {
    grid-column: 1 !important;
  }

  .footer-newsletter button.btn {
    width: 100% !important;
  }

  #footer .ph-legacy-footer > .row,
  #footer .eshopContact,
  #footer #extraAdvantage {
    grid-template-columns: 1fr !important;
  }

  #footer .vc-content_shopinfo {
    grid-column: auto !important;
  }

  #footer .footer-bottom {
    flex-direction: column !important;
    text-align: center !important;
  }
}

@media (max-width: 459px) {
  #header .navigation-buttons > a[data-target="search"] {
    display: none !important;
  }

  .type-index #carousel .carousel-inner > .item {
    aspect-ratio: 4 / 3;
  }

  .type-index #products-2,
  .type-index #products-2.product-slider,
  .type-index #products-2.ph-product-grid {
    grid-template-columns: 1fr !important;
  }

  .type-index #products-2 .p > a.image {
    height: 260px !important;
  }
}

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


/* ========================================================================== 
   V6 FINAL ALIGNMENT PATCH
   Dark desktop header, stable homepage grid and corrected legacy footer grid.
   ========================================================================== */

/* The legacy Bootstrap row creates ::before/::after pseudo-elements. When the
   row becomes a CSS grid, those pseudo-elements otherwise consume grid cells. */
#footer .ph-legacy-footer > .row::before,
#footer .ph-legacy-footer > .row::after {
  display: none !important;
  content: none !important;
}

/* --------------------------------------------------------------------------
   Dark desktop header, based on the requested reference
   -------------------------------------------------------------------------- */
.ph-header-strip {
  display: block;
  width: 100%;
  border-top: 3px solid var(--ph-yellow);
  border-bottom: 1px solid #303030;
  background: #0d0d0d;
  color: #bdbdbd;
  font-size: 11px;
  line-height: 1.25;
}

.ph-header-strip__inner {
  display: flex;
  width: min(100%, var(--ph-container));
  min-height: 30px;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  margin: 0 auto;
  padding: 5px var(--ph-gutter);
}

.ph-header-strip__contacts,
.ph-header-strip__links {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px 20px;
}

.ph-header-strip a {
  color: #bdbdbd !important;
  text-decoration: none !important;
}

.ph-header-strip__contacts a {
  color: var(--ph-yellow) !important;
  font-weight: 750;
}

.ph-header-strip a:hover {
  color: var(--ph-yellow) !important;
}

#header,
#header .header-top {
  background: #181818 !important;
  color: var(--ph-white) !important;
}

#header {
  border: 0 !important;
  box-shadow: none !important;
}

#header .header-top-wrapper {
  min-height: 90px !important;
  grid-template-columns: minmax(230px, 280px) minmax(320px, 1fr) auto !important;
  gap: clamp(20px, 3vw, 44px) !important;
  padding-top: 13px !important;
  padding-bottom: 13px !important;
}

#header .header-top-wrapper > .site-name,
#header .site-name {
  grid-column: 1 !important;
  justify-self: start !important;
  width: min(100%, 250px) !important;
}

#header .site-name a img {
  width: auto !important;
  max-width: 250px !important;
  max-height: 66px !important;
  margin: 0 !important;
}

#header .header-top-wrapper > .navigation-tools {
  display: flex !important;
  grid-column: 2 !important;
  width: 100% !important;
  align-items: center !important;
  justify-content: center !important;
}

.ph-desktop-search {
  display: flex;
  width: min(100%, 500px);
  align-items: center;
  gap: 8px;
  margin: 0;
}

.ph-desktop-search__input {
  width: 100%;
  min-width: 0;
  height: 42px !important;
  min-height: 42px !important;
  padding: 0 18px !important;
  border: 1px solid #5a5a5a !important;
  border-radius: 24px !important;
  outline: 0 !important;
  background: #565656 !important;
  color: var(--ph-white) !important;
  box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.32) !important;
}

.ph-desktop-search__input::placeholder {
  color: #b7b7b7;
  opacity: 1;
}

.ph-desktop-search__input:focus {
  border-color: var(--ph-yellow) !important;
  outline: 3px solid rgba(246, 185, 0, 0.18) !important;
}

.ph-desktop-search__button {
  flex: 0 0 auto;
  min-height: 42px !important;
  padding: 0 22px !important;
  border-radius: 24px !important;
  letter-spacing: 0.12em !important;
  text-transform: uppercase !important;
}

#header .header-top-wrapper > .navigation-buttons,
#header .navigation-buttons {
  grid-column: 3 !important;
}

#header .navigation-buttons > a,
#header .navigation-buttons > button,
#header .navigation-buttons .top-nav-button {
  color: var(--ph-white) !important;
}

#header .navigation-buttons > a:hover,
#header .navigation-buttons > button:hover {
  border-color: #474747 !important;
  background: #2b2b2b !important;
  color: var(--ph-yellow) !important;
}

#header .navigation-buttons > a[data-target="search"] {
  display: none !important;
}

#header .navigation-buttons .cart-count {
  color: var(--ph-black) !important;
}

#header .cart-count > i[data-testid="headerCartCount"] {
  border-color: #181818 !important;
}

#header .header-bottom,
body.desktop #header .header-bottom {
  border-top-color: #303030 !important;
  border-bottom: 2px solid var(--ph-yellow) !important;
  background: #202020 !important;
}

#header #navigation,
#header .navigation-in,
#header .navigation-in.menu {
  background: #202020 !important;
}

#header .navigation-in > ul.menu-level-1 > li > a {
  color: #f5f5f5 !important;
}

#header .navigation-in > ul.menu-level-1 > li > a:hover,
#header .navigation-in > ul.menu-level-1 > li.active > a,
#header .navigation-in > ul.menu-level-1 > li.exp > a {
  background: #2b2b2b !important;
  color: var(--ph-yellow) !important;
}

/* Keep dropdowns light and readable. */
#header .navigation-in ul.menu-level-2 {
  background: var(--ph-white) !important;
  color: var(--ph-black) !important;
}

/* --------------------------------------------------------------------------
   Product slider: support both original markup and dynamically added wrappers
   -------------------------------------------------------------------------- */
.type-index #products-2 > .slick-list,
.type-index #products-2 > .slick-list > .slick-track {
  display: contents !important;
  width: auto !important;
  height: auto !important;
  margin: 0 !important;
  padding: 0 !important;
  transform: none !important;
}

.type-index #products-2 .slick-slide.product,
.type-index #products-2 .slick-track > .product {
  display: flex !important;
  width: auto !important;
  min-width: 0 !important;
  height: auto !important;
  float: none !important;
  margin: 0 !important;
  opacity: 1 !important;
  visibility: visible !important;
  transform: none !important;
}

.type-index #products-2 .slick-arrow,
.type-index #products-2 .slick-dots,
.type-index #products-2 .slick-cloned {
  display: none !important;
}

/* --------------------------------------------------------------------------
   Footer alignment
   -------------------------------------------------------------------------- */
#footer .ph-legacy-footer {
  padding-top: 54px !important;
}

#footer .ph-legacy-footer > .row {
  justify-content: start !important;
  grid-template-columns: minmax(230px, 0.85fr) minmax(230px, 0.85fr) minmax(360px, 1.3fr) !important;
  gap: clamp(32px, 5vw, 72px) !important;
}

#footer .delivery_payment-container,
#footer #menuarticles,
#footer .vc-content_shopinfo {
  align-self: start !important;
  justify-self: start !important;
  text-align: left !important;
}

#footer .delivery_payment-container {
  grid-column: 1 !important;
}

#footer #menuarticles {
  grid-column: 2 !important;
}

#footer .vc-content_shopinfo {
  grid-column: 3 !important;
}

#footer .eshopContact {
  grid-template-columns: minmax(150px, 1fr) minmax(180px, 1fr) !important;
}

@media (max-width: 1100px) {
  .ph-header-strip__links {
    display: none;
  }

  #header .header-top-wrapper {
    grid-template-columns: minmax(190px, 230px) minmax(0, 1fr) auto !important;
  }

  #header .header-top-wrapper > .site-name,
  #header .site-name {
    grid-column: 1 !important;
    width: 220px !important;
  }

  #header .site-name a img {
    max-width: 220px !important;
  }

  #header .header-top-wrapper > .navigation-tools {
    display: flex !important;
    grid-column: 2 !important;
  }

  #header .header-top-wrapper > .navigation-buttons,
  #header .navigation-buttons {
    grid-column: 3 !important;
  }

  #header [data-testid="hamburgerMenu"] {
    display: inline-flex !important;
  }

  #header .header-bottom,
  body.desktop #header .header-bottom {
    background: var(--ph-white) !important;
  }

  #header #navigation,
  #header .navigation-in,
  #header .navigation-in.menu {
    background: var(--ph-white) !important;
  }

  #header .navigation-in > ul.menu-level-1 > li > a {
    color: var(--ph-black) !important;
  }

  #footer .ph-legacy-footer > .row {
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
    gap: 28px !important;
  }

  #footer .vc-content_shopinfo {
    grid-column: 3 !important;
  }
}

@media (max-width: 900px) {
  #header .header-top-wrapper {
    grid-template-columns: minmax(170px, 1fr) auto !important;
  }

  #header .header-top-wrapper > .navigation-tools,
  .ph-desktop-search {
    display: none !important;
  }

  #header .header-top-wrapper > .site-name,
  #header .site-name {
    grid-column: 1 !important;
  }

  #header .header-top-wrapper > .navigation-buttons,
  #header .navigation-buttons {
    grid-column: 2 !important;
  }

  #header .navigation-buttons > a[data-target="search"] {
    display: inline-flex !important;
  }

  #footer .ph-legacy-footer > .row {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  }

  #footer .delivery_payment-container {
    grid-column: 1 !important;
  }

  #footer #menuarticles {
    grid-column: 2 !important;
  }

  #footer .vc-content_shopinfo {
    grid-column: 1 / -1 !important;
  }
}

@media (max-width: 767px) {
  .ph-header-strip {
    display: none;
  }

  #header .header-top-wrapper {
    min-height: 72px !important;
  }

  #header .header-top-wrapper > .site-name,
  #header .site-name {
    width: min(185px, 45vw) !important;
  }

  #header .site-name a img {
    max-width: 100% !important;
    max-height: 52px !important;
  }

  #footer .ph-legacy-footer > .row {
    grid-template-columns: 1fr !important;
  }

  #footer .delivery_payment-container,
  #footer #menuarticles,
  #footer .vc-content_shopinfo {
    grid-column: 1 !important;
  }
}

/* ========================================================================== 
   V7 LAYOUT REFINEMENT
   Restores the balanced V5 header composition while keeping the V6 dark
   palette. Also aligns homepage sections and enlarges category navigation.
   ========================================================================== */

/* --------------------------------------------------------------------------
   Header: V5 composition + V6 colours
   -------------------------------------------------------------------------- */
.ph-desktop-search {
  display: none !important;
}

@media (min-width: 1101px) {
  #header .header-top-wrapper {
    min-height: 108px !important;
    grid-template-columns: minmax(120px, 1fr) 320px minmax(220px, 1fr) !important;
    gap: 24px !important;
    padding-top: 16px !important;
    padding-bottom: 16px !important;
  }

  #header .header-top-wrapper > .navigation-tools {
    display: block !important;
    grid-column: 1 !important;
    width: auto !important;
  }

  #header .header-top-wrapper > .site-name,
  #header .site-name {
    grid-column: 2 !important;
    justify-self: center !important;
    width: 320px !important;
    max-width: 100% !important;
  }

  #header .site-name a img {
    width: 100% !important;
    max-width: 320px !important;
    max-height: 82px !important;
    margin: 0 auto !important;
  }

  #header .header-top-wrapper > .navigation-buttons,
  #header .navigation-buttons {
    grid-column: 3 !important;
    justify-self: end !important;
  }

  #header .navigation-buttons > a[data-target="search"] {
    display: inline-flex !important;
  }

  #header [data-testid="hamburgerMenu"] {
    display: none !important;
  }
}

/* --------------------------------------------------------------------------
   Homepage products: always four cards on a normal desktop preview
   -------------------------------------------------------------------------- */
@media (min-width: 960px) {
  .type-index #products-2,
  .type-index #products-2.product-slider,
  .type-index #products-2.ph-product-grid {
    grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
    gap: 16px !important;
  }

  .type-index #products-2 .p > a.image {
    height: 230px !important;
    min-height: 230px !important;
  }

  .type-index #products-2 .p-in {
    min-height: 230px !important;
  }
}

/* --------------------------------------------------------------------------
   Latest ratings: shared heading and equal-height cards on one baseline
   -------------------------------------------------------------------------- */
.type-index .latest-contribution-wrapper {
  align-items: stretch !important;
}

.type-index .latest-contribution-wrapper::before {
  content: "Poslední hodnocení";
  display: block;
  grid-column: 1 / -1;
  margin: 0 0 4px !important;
  color: var(--ph-black) !important;
  font-family: var(--ph-font) !important;
  font-size: clamp(26px, 3vw, 38px) !important;
  font-weight: 850 !important;
  line-height: 1.15 !important;
  text-align: left !important;
}

.type-index .latest-contribution > h2,
.type-index .latest-contribution-placeholder {
  display: none !important;
}

.type-index .latest-contribution {
  display: flex !important;
  min-height: 100% !important;
}

.type-index .latest-contribution-inner {
  width: 100% !important;
  height: 100% !important;
  min-height: 205px !important;
  align-content: center !important;
}

/* --------------------------------------------------------------------------
   Newsletter: heading, input and button aligned on one horizontal axis
   -------------------------------------------------------------------------- */
.footer-newsletter {
  grid-template-columns: auto minmax(480px, 720px) !important;
  justify-content: center !important;
  gap: clamp(36px, 6vw, 78px) !important;
  align-items: center !important;
}

.footer-newsletter h2 {
  white-space: nowrap !important;
  line-height: 1.05 !important;
}

.footer-newsletter fieldset {
  align-items: end !important;
}

.footer-newsletter button.btn {
  align-self: end !important;
}

/* --------------------------------------------------------------------------
   Category subcategories: larger, easier-to-scan tiles
   -------------------------------------------------------------------------- */
.type-category .subcategories,
.type-category .subcategories.with-image,
.type-category .subcategories.seo-subcategories.with-image {
  display: grid !important;
  width: 100% !important;
  grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
  gap: 16px !important;
  margin: 0 0 38px !important;
  padding: 0 !important;
}

.type-category .subcategories > li,
.type-category .subcategories.with-image > li,
.type-category .subcategories.seo-subcategories.with-image > li {
  display: block !important;
  width: auto !important;
  max-width: none !important;
  margin: 0 !important;
  padding: 0 !important;
}

.type-category .subcategories li > a {
  display: grid !important;
  min-height: 92px !important;
  grid-template-columns: 64px minmax(0, 1fr) 18px !important;
  align-items: center !important;
  gap: 14px !important;
  padding: 12px 14px !important;
  overflow: hidden !important;
  border: 1px solid var(--ph-border) !important;
  border-radius: 12px !important;
  background: var(--ph-white) !important;
  color: var(--ph-black) !important;
  box-shadow: var(--ph-shadow-sm) !important;
  text-decoration: none !important;
}

.type-category .subcategories li > a:hover {
  border-color: var(--ph-yellow) !important;
  box-shadow: var(--ph-shadow) !important;
  transform: translateY(-2px) !important;
}

.type-category .subcategories li > a::after {
  content: "›";
  grid-column: 3;
  color: var(--ph-black);
  font-size: 28px;
  font-weight: 400;
  line-height: 1;
  text-align: center;
}

.type-category .subcategories li a .image {
  display: flex !important;
  width: 64px !important;
  height: 64px !important;
  grid-column: 1 !important;
  align-items: center !important;
  justify-content: center !important;
  margin: 0 !important;
  overflow: hidden !important;
  border-radius: 9px !important;
  background: var(--ph-soft) !important;
}

.type-category .subcategories li a .image img {
  width: 100% !important;
  max-width: 58px !important;
  height: 100% !important;
  max-height: 58px !important;
  object-fit: contain !important;
}

.type-category .subcategories li a .text {
  grid-column: 2 !important;
  min-width: 0 !important;
  color: var(--ph-black) !important;
  font-size: 15px !important;
  font-weight: 750 !important;
  line-height: 1.3 !important;
  text-align: left !important;
}

/* --------------------------------------------------------------------------
   Category bestsellers: larger three-column product cards
   Markup follows the current Shoptet .products-top structure.
   -------------------------------------------------------------------------- */
.type-category .products-top-wrapper {
  width: 100% !important;
  margin: 44px 0 52px !important;
  padding-top: 32px !important;
  border-top: 1px solid var(--ph-border) !important;
}

.type-category .products-top-header {
  margin: 0 0 26px !important;
  color: var(--ph-black) !important;
  font-size: clamp(28px, 3vw, 38px) !important;
  font-weight: 850 !important;
  line-height: 1.15 !important;
  text-align: center !important;
}

.type-category #productsTop.products-top,
.type-category .products.products-inline.products-top {
  display: grid !important;
  width: 100% !important;
  grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
  gap: 18px !important;
  margin: 0 !important;
  padding: 0 !important;
}

.type-category #productsTop > .product,
.type-category .products-top > .product {
  display: flex !important;
  width: auto !important;
  min-width: 0 !important;
  margin: 0 !important;
  padding: 0 !important;
}

.type-category #productsTop > .product.inactive:not(.revealed),
.type-category .products-top > .product.inactive:not(.revealed) {
  display: none !important;
}

.type-category #productsTop .p,
.type-category .products-top .p {
  display: grid !important;
  width: 100% !important;
  min-height: 180px !important;
  grid-template-columns: 118px minmax(0, 1fr) !important;
  align-items: center !important;
  gap: 16px !important;
  padding: 18px !important;
  border: 1px solid var(--ph-border) !important;
  border-radius: 14px !important;
  background: var(--ph-white) !important;
  box-shadow: var(--ph-shadow-sm) !important;
}

.type-category #productsTop .image,
.type-category .products-top .image {
  display: flex !important;
  width: 118px !important;
  height: 118px !important;
  align-items: center !important;
  justify-content: center !important;
  margin: 0 !important;
  padding: 8px !important;
  overflow: hidden !important;
  border-radius: 10px !important;
  background: var(--ph-soft) !important;
}

.type-category #productsTop .image img,
.type-category .products-top .image img {
  width: 100% !important;
  height: 100% !important;
  object-fit: contain !important;
}

.type-category #productsTop .p-in,
.type-category .products-top .p-in {
  min-width: 0 !important;
  padding: 0 !important;
}

.type-category #productsTop .name,
.type-category .products-top .name {
  display: block !important;
  margin: 0 0 9px !important;
  color: var(--ph-black) !important;
  font-size: 15px !important;
  font-weight: 800 !important;
  line-height: 1.35 !important;
  text-decoration: none !important;
}

.type-category #productsTop .availability,
.type-category .products-top .availability {
  margin: 0 0 7px !important;
  font-size: 13px !important;
  font-weight: 750 !important;
}

.type-category #productsTop .price,
.type-category .products-top .price,
.type-category #productsTop .price strong,
.type-category .products-top .price strong {
  color: var(--ph-black) !important;
  font-size: 20px !important;
  font-weight: 850 !important;
}

.type-category .products-top-wrapper .button-wrapper {
  margin-top: 24px !important;
  text-align: center !important;
}

/* --------------------------------------------------------------------------
   Responsive refinements
   -------------------------------------------------------------------------- */
@media (max-width: 1100px) and (min-width: 768px) {
  .type-category .subcategories,
  .type-category .subcategories.with-image,
  .type-category .subcategories.seo-subcategories.with-image {
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
  }

  .type-category #productsTop.products-top,
  .type-category .products.products-inline.products-top {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  }
}

@media (max-width: 900px) {
  .footer-newsletter {
    grid-template-columns: 1fr !important;
    justify-items: stretch !important;
  }

  .footer-newsletter h2 {
    white-space: normal !important;
  }
}

@media (max-width: 767px) {
  .type-index .latest-contribution-wrapper::before {
    text-align: center !important;
  }

  .type-category .subcategories,
  .type-category .subcategories.with-image,
  .type-category .subcategories.seo-subcategories.with-image {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 10px !important;
  }

  .type-category .subcategories li > a {
    min-height: 78px !important;
    grid-template-columns: 48px minmax(0, 1fr) 14px !important;
    gap: 9px !important;
    padding: 9px !important;
  }

  .type-category .subcategories li a .image {
    width: 48px !important;
    height: 48px !important;
  }

  .type-category .subcategories li a .image img {
    max-width: 44px !important;
    max-height: 44px !important;
  }

  .type-category .subcategories li a .text {
    font-size: 13px !important;
  }

  .type-category #productsTop.products-top,
  .type-category .products.products-inline.products-top {
    grid-template-columns: 1fr !important;
  }
}

/* ========================================================================== 
   PROFIHADRY V8 — targeted desktop alignment fixes
   - larger logo
   - larger, more readable desktop navigation
   - submenu anchored directly below its parent category
   - four homepage news products in one row
   ========================================================================== */

@media (min-width: 1024px) {
  /* Larger logo while preserving the V5/V7 centered header composition. */
  #header .header-top-wrapper {
    min-height: 124px !important;
    grid-template-columns: minmax(120px, 1fr) 380px minmax(250px, 1fr) !important;
    gap: 28px !important;
    padding-top: 14px !important;
    padding-bottom: 14px !important;
  }

  #header .header-top-wrapper > .site-name,
  #header .site-name {
    grid-column: 2 !important;
    justify-self: center !important;
    width: 380px !important;
    max-width: 380px !important;
  }

  #header .site-name a img {
    width: 100% !important;
    max-width: 380px !important;
    max-height: 96px !important;
  }

  #header .header-top-wrapper > .navigation-buttons,
  #header .navigation-buttons {
    grid-column: 3 !important;
    justify-self: end !important;
  }

  #header [data-testid="hamburgerMenu"] {
    display: none !important;
  }

  /* Keep the desktop menu visible inside the narrower Theme Editor preview. */
  #header .header-bottom,
  body.desktop #header .header-bottom {
    position: relative !important;
    top: auto !important;
    right: auto !important;
    bottom: auto !important;
    left: auto !important;
    display: block !important;
    width: 100% !important;
    min-height: 58px !important;
    overflow: visible !important;
    background: #171717 !important;
    box-shadow: none !important;
  }

  #header .header-bottom-wrapper {
    width: 100% !important;
    max-width: none !important;
    padding: 0 24px !important;
  }

  #header #navigation,
  #header .navigation-in,
  #header .navigation-in.menu,
  #header .navigation-in > ul.menu-level-1 {
    min-height: 58px !important;
  }

  #header .navigation-in > ul.menu-level-1 {
    display: flex !important;
    align-items: stretch !important;
    justify-content: center !important;
    gap: 2px !important;
  }

  #header .navigation-in > ul.menu-level-1 > li {
    position: relative !important;
    display: block !important;
    flex: 0 0 auto !important;
    width: auto !important;
  }

  #header .navigation-in > ul.menu-level-1 > li > a {
    min-height: 58px !important;
    padding: 12px clamp(10px, 1vw, 17px) !important;
    background: #1d1d1d !important;
    color: #fff !important;
    font-size: clamp(12px, 0.95vw, 14px) !important;
    font-weight: 800 !important;
    line-height: 1.15 !important;
    text-transform: uppercase !important;
  }

  #header .navigation-in > ul.menu-level-1 > li:hover > a,
  #header .navigation-in > ul.menu-level-1 > li.exp > a,
  #header .navigation-in > ul.menu-level-1 > li.active > a {
    background: var(--ph-yellow) !important;
    color: var(--ph-black) !important;
  }

  #header .navigation-in > ul.menu-level-1 > li > a::after {
    display: none !important;
  }

  /* The dropdown starts at the left edge of the selected category,
     instead of being centered far to the left. */
  #header .navigation-in ul.menu-level-2 {
    top: 100% !important;
    left: 0 !important;
    right: auto !important;
    width: min(1040px, calc(100vw - 48px)) !important;
    max-width: none !important;
    grid-template-columns: repeat(4, minmax(190px, 1fr)) !important;
    gap: 14px !important;
    padding: 20px !important;
    transform: none !important;
  }

  /* Prevent the final categories from overflowing the right viewport edge. */
  #header .navigation-in > ul.menu-level-1 > li:nth-last-child(-n + 3) > ul.menu-level-2 {
    right: 0 !important;
    left: auto !important;
  }

  #header .menu-level-2 > li {
    min-height: 82px !important;
    grid-template-columns: 76px minmax(0, 1fr) !important;
    gap: 13px !important;
    padding: 10px 12px !important;
  }

  #header .menu-level-2 .menu-image {
    width: 76px !important;
    min-width: 76px !important;
    height: 62px !important;
    min-height: 62px !important;
  }

  #header .menu-level-2 .menu-image img {
    max-width: 72px !important;
    max-height: 58px !important;
  }

  #header .menu-level-2 > li > div > a {
    font-size: 14px !important;
    line-height: 1.3 !important;
  }

  /* Four products must stay in one row even when the editor side panel
     reduces the preview width below the old 1200 px breakpoint. */
  .type-index .products-wrapper {
    width: min(calc(100% - 32px), 1240px) !important;
    max-width: 1240px !important;
  }

  .type-index #products-2,
  .type-index #products-2.product-slider,
  .type-index #products-2.ph-product-grid {
    grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
    gap: 14px !important;
  }

  .type-index #products-2 > .product,
  .type-index #products-2.product-slider > .product,
  .type-index #products-2.ph-product-grid > .product,
  .type-index #products-2 > .product.active {
    width: 100% !important;
    min-width: 0 !important;
    max-width: none !important;
  }

  .type-index #products-2 .p > a.image {
    height: clamp(190px, 18vw, 250px) !important;
    min-height: 190px !important;
  }

  .type-index #products-2 .p-in {
    min-height: 250px !important;
  }
}

/* Three cards only on an actual tablet, not inside the desktop editor preview. */
@media (min-width: 768px) and (max-width: 1023px) {
  .type-index #products-2,
  .type-index #products-2.product-slider,
  .type-index #products-2.ph-product-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
  }
}

/* ========================================================================== 
   PROFIHADRY V9 — stable mega menu + fixed four-column homepage products
   ========================================================================== */

@media (min-width: 1024px) {
  /* One shared positioning context for every dropdown. This prevents each
     category from shifting its submenu according to the parent item's width. */
  #header .header-bottom-wrapper {
    position: relative !important;
    width: 100% !important;
    max-width: none !important;
    margin: 0 auto !important;
    padding-right: clamp(28px, 3.5vw, 60px) !important;
    padding-left: clamp(28px, 3.5vw, 60px) !important;
    overflow: visible !important;
  }

  #header #navigation,
  #header .navigation-in,
  #header .navigation-in.menu,
  #header .navigation-in > ul.menu-level-1,
  #header .navigation-in > ul.menu-level-1 > li {
    position: static !important;
  }

  #header .navigation-in > ul.menu-level-1 {
    width: 100% !important;
    max-width: 1600px !important;
    margin-right: auto !important;
    margin-left: auto !important;
  }

  /* Every submenu opens as the same centered full-width panel directly below
     the whole navigation bar — matching the supplied reference screenshot. */
  #header .navigation-in ul.menu-level-2,
  #header .navigation-in > ul.menu-level-1 > li:nth-last-child(-n + 3) > ul.menu-level-2 {
    position: absolute !important;
    top: 100% !important;
    right: auto !important;
    left: 50% !important;
    width: min(1592px, calc(100vw - 72px)) !important;
    max-width: 1592px !important;
    max-height: none !important;
    grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
    align-content: start !important;
    gap: 18px 34px !important;
    margin: 0 !important;
    padding: 26px 34px 30px !important;
    overflow: visible !important;
    border: 0 !important;
    border-top: 2px solid var(--ph-yellow) !important;
    border-radius: 0 0 24px 24px !important;
    background: #fff !important;
    box-shadow: 0 18px 42px rgba(0, 0, 0, 0.18) !important;
    transform: translateX(-50%) !important;
  }

  #header .menu-level-2 > li {
    display: grid !important;
    min-width: 0 !important;
    min-height: 82px !important;
    grid-template-columns: 112px minmax(0, 1fr) !important;
    align-items: center !important;
    gap: 18px !important;
    margin: 0 !important;
    padding: 7px 10px !important;
    border: 0 !important;
    border-radius: 12px !important;
    background: transparent !important;
  }

  #header .menu-level-2 > li:hover {
    border: 0 !important;
    background: #f6f6f4 !important;
  }

  #header .menu-level-2 .menu-image {
    display: flex !important;
    width: 112px !important;
    min-width: 112px !important;
    height: 70px !important;
    min-height: 70px !important;
    align-items: center !important;
    justify-content: center !important;
    padding: 4px !important;
    overflow: hidden !important;
    border-radius: 10px !important;
    background: #f4f4f2 !important;
  }

  #header .menu-level-2 .menu-image img {
    width: 100% !important;
    max-width: 104px !important;
    height: 100% !important;
    max-height: 64px !important;
    object-fit: contain !important;
  }

  #header .menu-level-2 > li > div > a {
    padding: 4px 0 !important;
    color: #222 !important;
    font-size: 16px !important;
    font-weight: 750 !important;
    line-height: 1.18 !important;
    text-decoration: underline !important;
    text-decoration-thickness: 1px !important;
    text-underline-offset: 2px !important;
  }
}

/* Shoptet marks the desktop editor preview with body.desktop. Force a true
   four-column grid there even if the editor sidebar narrows the preview. */
body.desktop.type-index .products-wrapper[data-editorid="homepageProductGroup-2"] {
  width: min(calc(100% - 32px), 1240px) !important;
  max-width: 1240px !important;
  margin-right: auto !important;
  margin-left: auto !important;
  overflow: visible !important;
}

body.desktop.type-index #products-2,
body.desktop.type-index #products-2.product-slider,
body.desktop.type-index #products-2.ph-product-grid {
  display: grid !important;
  width: 100% !important;
  max-width: none !important;
  grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
  grid-auto-flow: row !important;
  grid-auto-rows: 1fr !important;
  align-items: stretch !important;
  gap: 18px !important;
  margin: 0 !important;
  padding: 0 !important;
  overflow: visible !important;
}

body.desktop.type-index #products-2 > .product,
body.desktop.type-index #products-2 > .product.active,
body.desktop.type-index #products-2.product-slider > .product,
body.desktop.type-index #products-2.ph-product-grid > .product {
  position: relative !important;
  top: auto !important;
  right: auto !important;
  bottom: auto !important;
  left: auto !important;
  display: flex !important;
  width: auto !important;
  min-width: 0 !important;
  max-width: none !important;
  height: auto !important;
  min-height: 100% !important;
  clear: none !important;
  float: none !important;
  flex: none !important;
  grid-column: auto !important;
  grid-row: auto !important;
  margin: 0 !important;
  padding: 0 !important;
  opacity: 1 !important;
  visibility: visible !important;
  transform: none !important;
}

body.desktop.type-index #products-2 > .slick-list,
body.desktop.type-index #products-2 > .slick-list > .slick-track {
  display: contents !important;
}

@media (max-width: 1023px) {
  body:not(.desktop).type-index #products-2,
  body:not(.desktop).type-index #products-2.product-slider,
  body:not(.desktop).type-index #products-2.ph-product-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  }
}

@media (max-width: 640px) {
  body:not(.desktop).type-index #products-2,
  body:not(.desktop).type-index #products-2.product-slider,
  body:not(.desktop).type-index #products-2.ph-product-grid {
    grid-template-columns: 1fr !important;
  }
}

/* ========================================================================== 
   PROFIHADRY V10 — exact four news products + repaired mobile layout
   ========================================================================== */

/* Only four real products belong to the homepage Novinky group. */
.type-index #products-2 > .product:nth-of-type(n + 5),
.type-index #products-2 > .ph-product-extra {
  display: none !important;
}

@media (min-width: 1024px) {
  body.type-index .products-wrapper[data-editorid="homepageProductGroup-2"] {
    width: min(calc(100% - 32px), 1320px) !important;
    max-width: 1320px !important;
    margin-inline: auto !important;
  }

  body.type-index #products-2,
  body.type-index #products-2.product-slider,
  body.type-index #products-2.ph-product-grid {
    display: grid !important;
    grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
    grid-auto-flow: row !important;
    grid-auto-rows: 1fr !important;
    align-items: stretch !important;
    gap: clamp(14px, 1.5vw, 22px) !important;
    width: 100% !important;
    margin: 0 !important;
    overflow: visible !important;
  }

  body.type-index #products-2 > .product {
    display: flex !important;
    min-width: 0 !important;
    width: auto !important;
    height: 100% !important;
    clear: none !important;
    float: none !important;
    margin: 0 !important;
  }

  body.type-index #products-2 > .product > .p {
    display: flex !important;
    width: 100% !important;
    height: 100% !important;
    flex-direction: column !important;
  }

  body.type-index #products-2 .p-in {
    display: flex !important;
    flex: 1 1 auto !important;
    flex-direction: column !important;
  }

  body.type-index #products-2 .p-bottom {
    margin-top: auto !important;
  }
}

/* Mobile header: the logo and all four controls get their own columns and
   therefore cannot cover one another. */
@media (max-width: 767px) {
  .ph-header-strip {
    display: none !important;
  }

  #header,
  #header .header-top {
    background: #181818 !important;
  }

  #header .header-top-wrapper {
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) auto !important;
    align-items: center !important;
    gap: 8px !important;
    min-height: 72px !important;
    padding: 8px 10px !important;
  }

  #header .header-top-wrapper > .navigation-tools,
  #header .navigation-tools {
    display: none !important;
  }

  #header .header-top-wrapper > .site-name,
  #header .site-name {
    position: static !important;
    grid-column: 1 !important;
    grid-row: 1 !important;
    justify-self: start !important;
    width: min(170px, 42vw) !important;
    max-width: min(170px, 42vw) !important;
    margin: 0 !important;
    transform: none !important;
  }

  #header .site-name a {
    display: block !important;
    width: 100% !important;
  }

  #header .site-name a img {
    display: block !important;
    width: 100% !important;
    max-width: 170px !important;
    max-height: 54px !important;
    object-fit: contain !important;
  }

  #header .header-top-wrapper > .navigation-buttons,
  #header .navigation-buttons {
    position: static !important;
    display: flex !important;
    grid-column: 2 !important;
    grid-row: 1 !important;
    align-items: center !important;
    justify-self: end !important;
    gap: 3px !important;
    width: auto !important;
    margin: 0 !important;
    transform: none !important;
  }

  #header .navigation-buttons > a,
  #header .navigation-buttons > button,
  #header .navigation-buttons .top-nav-button,
  #header .navigation-buttons .cart-count {
    position: relative !important;
    display: inline-flex !important;
    width: 38px !important;
    min-width: 38px !important;
    height: 38px !important;
    min-height: 38px !important;
    align-items: center !important;
    justify-content: center !important;
    margin: 0 !important;
    padding: 0 !important;
  }

  #header .navigation-buttons > a[data-target="search"],
  #header .top-nav-button-login,
  #header [data-testid="hamburgerMenu"] {
    display: inline-flex !important;
  }

  #header .navigation-buttons .cart-count {
    border-radius: 50% !important;
    background: var(--ph-yellow) !important;
    color: #111 !important;
  }

  /* Two usable product columns on phones. The group still contains exactly
     four products, so it forms a tidy 2 × 2 block instead of thin columns. */
  body.type-index .products-wrapper[data-editorid="homepageProductGroup-2"] {
    width: calc(100% - 20px) !important;
    max-width: none !important;
    margin-inline: auto !important;
    overflow: visible !important;
  }

  body.type-index #products-2,
  body.type-index #products-2.product-slider,
  body.type-index #products-2.ph-product-grid {
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    grid-auto-flow: row !important;
    grid-auto-rows: 1fr !important;
    gap: 10px !important;
    width: 100% !important;
    margin: 0 !important;
    overflow: visible !important;
  }

  body.type-index #products-2 > .product,
  body.type-index #products-2 > .product.active {
    display: flex !important;
    width: auto !important;
    min-width: 0 !important;
    max-width: none !important;
    height: 100% !important;
    clear: none !important;
    float: none !important;
    margin: 0 !important;
  }

  body.type-index #products-2 > .product > .p {
    display: flex !important;
    width: 100% !important;
    height: 100% !important;
    min-width: 0 !important;
    flex-direction: column !important;
  }

  body.type-index #products-2 .p > a.image {
    height: 145px !important;
    min-height: 145px !important;
    padding: 8px !important;
  }

  body.type-index #products-2 .p-in {
    display: flex !important;
    min-height: 220px !important;
    flex: 1 1 auto !important;
    flex-direction: column !important;
    padding: 12px !important;
  }

  body.type-index #products-2 .name {
    display: -webkit-box !important;
    overflow: hidden !important;
    font-size: 14px !important;
    line-height: 1.28 !important;
    -webkit-box-orient: vertical !important;
    -webkit-line-clamp: 3 !important;
  }

  body.type-index #products-2 .p-bottom {
    margin-top: auto !important;
  }

  body.type-index #products-2 .p-tools,
  body.type-index #products-2 .p-tools form,
  body.type-index #products-2 .p-tools .btn,
  body.type-index #products-2 .p-tools button {
    width: 100% !important;
    min-width: 0 !important;
  }

  /* Category subtiles: remove the arrow, reserve the space for text and allow
     a readable two-line label instead of P… / H… truncation. */
  body.type-category .subcategories,
  body.type-category .subcategories.with-image,
  body.type-category .subcategories.seo-subcategories.with-image {
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 10px !important;
    width: 100% !important;
    padding: 0 !important;
  }

  body.type-category .subcategories > li {
    min-width: 0 !important;
    width: auto !important;
    margin: 0 !important;
  }

  body.type-category .subcategories li > a {
    display: grid !important;
    grid-template-columns: 52px minmax(0, 1fr) !important;
    align-items: center !important;
    gap: 10px !important;
    min-width: 0 !important;
    min-height: 88px !important;
    padding: 10px !important;
  }

  body.type-category .subcategories li > a::after,
  body.type-category .subcategories li > a::before,
  body.type-category .subcategories li > a > i,
  body.type-category .subcategories li .subcategory-arrow,
  body.type-category .subcategories li .icon-chevron-right {
    display: none !important;
    content: none !important;
  }

  body.type-category .subcategories li a .image {
    display: flex !important;
    width: 52px !important;
    min-width: 52px !important;
    height: 52px !important;
    align-items: center !important;
    justify-content: center !important;
    margin: 0 !important;
  }

  body.type-category .subcategories li a .image img {
    width: 100% !important;
    max-width: 48px !important;
    height: 100% !important;
    max-height: 48px !important;
    object-fit: contain !important;
  }

  body.type-category .subcategories li a .text,
  body.type-category .subcategories li a .name,
  body.type-category .subcategories li a .category-name,
  body.type-category .subcategories li > a > span:not(.image),
  body.type-category .subcategories li > a > div:not(.image) {
    display: -webkit-box !important;
    min-width: 0 !important;
    max-width: 100% !important;
    overflow: hidden !important;
    color: #161616 !important;
    font-size: 13px !important;
    font-weight: 750 !important;
    line-height: 1.25 !important;
    white-space: normal !important;
    word-break: normal !important;
    overflow-wrap: anywhere !important;
    text-overflow: clip !important;
    -webkit-box-orient: vertical !important;
    -webkit-line-clamp: 2 !important;
  }
}

@media (max-width: 380px) {
  #header .header-top-wrapper {
    gap: 4px !important;
    padding-inline: 7px !important;
  }

  #header .header-top-wrapper > .site-name,
  #header .site-name {
    width: min(142px, 38vw) !important;
    max-width: min(142px, 38vw) !important;
  }

  #header .site-name a img {
    max-width: 142px !important;
  }

  #header .navigation-buttons > a,
  #header .navigation-buttons > button,
  #header .navigation-buttons .top-nav-button,
  #header .navigation-buttons .cart-count {
    width: 35px !important;
    min-width: 35px !important;
    height: 35px !important;
    min-height: 35px !important;
  }

  body.type-category .subcategories li > a {
    grid-template-columns: 44px minmax(0, 1fr) !important;
    gap: 7px !important;
    min-height: 82px !important;
    padding: 8px !important;
  }

  body.type-category .subcategories li a .image {
    width: 44px !important;
    min-width: 44px !important;
    height: 44px !important;
  }

  body.type-category .subcategories li a .image img {
    max-width: 40px !important;
    max-height: 40px !important;
  }

  body.type-category .subcategories li a .text,
  body.type-category .subcategories li a .name,
  body.type-category .subcategories li a .category-name,
  body.type-category .subcategories li > a > span:not(.image),
  body.type-category .subcategories li > a > div:not(.image) {
    font-size: 12px !important;
  }
}


/* ========================================================================== 
   V13 — final micro-alignment fixes
   ========================================================================== */

/* Add breathing room between the payment icons and the delivery-method title. */
#footer .delivery_payment-container .vc-content_deliverymethods {
  margin-top: 18px !important;
}

#footer .delivery_payment-container .vc-content_deliverymethods h2 {
  margin-top: 0 !important;
}

/* Centre the shared heading above both latest-review cards. */
body.type-index .latest-contribution-wrapper::before {
  width: 100% !important;
  text-align: center !important;
}

/* Shoptet renders both its native cart glyph and an inline <i> glyph.
   Keep the outer/native glyph (the one farther from the label) only. */
button.btn-cart.add-to-cart-button > span {
  display: inline-flex !important;
  align-items: center !important;
}

button.btn-cart.add-to-cart-button > span > i.icon-cart {
  display: none !important;
}

/* ========================================================================== 
   V13 — footer contact alignment and single subcategory arrow
   ========================================================================== */

/* Keep the Contact heading aligned with the text block below it. */
#footer .vc-content_shopinfo .header {
  margin-left: 18px !important;
}

/* Put phone, e-mail and website below the postal address in one column. */
#footer .eshopContact {
  display: block !important;
}

#footer .eshopContact .prvni,
#footer .eshopContact .druhy {
  display: block !important;
  width: 100% !important;
  max-width: none !important;
}

#footer .eshopContact .druhy {
  margin-top: 14px !important;
}

#footer .eshopContact .druhy a {
  display: block !important;
  width: fit-content !important;
}

/* Remove Shoptet's extra/native chevrons and keep one controlled arrow only. */
body.type-category .subcategories > li::before,
body.type-category .subcategories > li::after,
body.type-category .subcategories li > a::before,
body.type-category .subcategories li > a > i,
body.type-category .subcategories li > a > .subcategory-arrow,
body.type-category .subcategories li > a > .icon-chevron-right,
body.type-category .subcategories li > a [class*="chevron"],
body.type-category .subcategories li > a [class*="arrow"] {
  display: none !important;
  content: none !important;
}

body.type-category .subcategories li > a::after {
  display: block !important;
  content: "›" !important;
}

@media (max-width: 767px) {
  /* Mobile layout intentionally has no arrows, leaving more room for labels. */
  body.type-category .subcategories li > a::after {
    display: none !important;
    content: none !important;
  }

  #footer .vc-content_shopinfo .header {
    margin-left: 0 !important;
  }
}