/**
 * 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;
  }
}

/* =========================================================
   PROFIHADRY V14 — DOPRAVA A PLATBA
   Logotyp metody vedle názvu, cena zarovnaná vpravo
========================================================= */

#order2 .shipping-billing-table,
#order2 .shipping-billing-table tbody {
  width: 100%;
}

#order2 .shipping-billing-table tr {
  display: grid !important;
  grid-template-columns: minmax(0, 1fr) auto auto;
  align-items: center;
  column-gap: 24px;
  width: 100%;
}

#order2 .shipping-billing-table td {
  display: block !important;
  padding-top: 18px;
  padding-bottom: 18px;
  vertical-align: middle;
}

#order2 .shipping-billing-table td:first-child {
  min-width: 0;
}

#order2 .shipping-billing-table td:first-child label,
#order2 .shipping-billing-table td:first-child .payment-info,
#order2 .shipping-billing-table td:first-child .shipping-info {
  display: inline-block;
  vertical-align: middle;
}

#order2 .shipping-billing-table td:nth-child(2) {
  justify-self: start;
  min-width: 88px;
  text-align: left;
}

#order2 .shipping-billing-table td:nth-child(2) img,
#order2 .shipping-billing-table td:nth-child(2) svg {
  display: block;
  width: auto;
  max-width: 88px;
  height: auto;
  max-height: 38px;
  object-fit: contain;
}

#order2 .shipping-billing-table td:last-child {
  justify-self: end;
  min-width: 88px;
  text-align: right;
  white-space: nowrap;
  font-weight: 700;
}

#order2 .shipping-billing-table label {
  margin: 0;
  line-height: 1.4;
}

#order2 .shipping-billing-table small,
#order2 .shipping-billing-table .description {
  display: block;
  margin-top: 4px;
}

@media (max-width: 767px) {
  #order2 .shipping-billing-table tr {
    grid-template-columns: minmax(0, 1fr) auto;
    column-gap: 14px;
    row-gap: 6px;
  }

  #order2 .shipping-billing-table td {
    padding-top: 9px;
    padding-bottom: 9px;
  }

  #order2 .shipping-billing-table td:first-child {
    grid-column: 1;
    grid-row: 1;
  }

  #order2 .shipping-billing-table td:nth-child(2) {
    grid-column: 2;
    grid-row: 1;
    justify-self: end;
    min-width: 0;
  }

  #order2 .shipping-billing-table td:last-child {
    grid-column: 1 / -1;
    grid-row: 2;
    justify-self: start;
    min-width: 0;
    padding-top: 0;
    text-align: left;
  }

  #order2 .shipping-billing-table td:nth-child(2) img,
  #order2 .shipping-billing-table td:nth-child(2) svg {
    max-width: 76px;
    max-height: 34px;
  }
}

/* ========================================================================== 
   V15 — header layout, brand-black alignment, orange navigation and mobile UX
   ========================================================================== */

:root {
  /* Sampled from the dark field in the new ProfiHadry logo. */
  --ph-logo-black: #0e1313;
  --ph-logo-black-soft: #141919;
  --ph-orange: #f6b900;
  --ph-orange-hover: #dca600;
}

/* --------------------------------------------------------------------------
   Utility strip: larger contact/opening information
   -------------------------------------------------------------------------- */
.ph-header-strip {
  min-height: 40px !important;
  border-top: 3px solid var(--ph-orange) !important;
  border-bottom: 1px solid #293030 !important;
  background: var(--ph-logo-black) !important;
  font-size: 13px !important;
  line-height: 1.35 !important;
}

.ph-header-strip__inner {
  min-height: 40px !important;
  padding-top: 7px !important;
  padding-bottom: 7px !important;
}

.ph-header-strip__contacts,
.ph-header-strip__links {
  gap: 8px 24px !important;
}

.ph-header-strip a,
.ph-header-strip small {
  font-size: 13px !important;
}

.ph-header-strip__contacts a {
  font-weight: 800 !important;
}

/* --------------------------------------------------------------------------
   Main desktop header: large logo on the left and search field beside it
   -------------------------------------------------------------------------- */
#header,
#header .header-top,
#header .header-top-wrapper {
  background: var(--ph-logo-black) !important;
}

#header .header-top-wrapper {
  display: grid !important;
  grid-template-columns: minmax(290px, 350px) minmax(360px, 1fr) auto !important;
  align-items: center !important;
  gap: clamp(24px, 3vw, 52px) !important;
  min-height: 116px !important;
  padding-top: 14px !important;
  padding-bottom: 14px !important;
}

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

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

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

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

.ph-desktop-search {
  display: flex !important;
  width: min(100%, 650px) !important;
  align-items: stretch !important;
  gap: 0 !important;
  margin: 0 !important;
}

.ph-desktop-search__input {
  width: 100% !important;
  min-width: 0 !important;
  height: 48px !important;
  min-height: 48px !important;
  padding: 0 20px !important;
  border: 1px solid #535a5a !important;
  border-right: 0 !important;
  border-radius: 10px 0 0 10px !important;
  outline: 0 !important;
  background: #f5f5f5 !important;
  color: #171717 !important;
  box-shadow: none !important;
}

.ph-desktop-search__input::placeholder {
  color: #737878 !important;
  opacity: 1 !important;
}

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

.ph-desktop-search__button {
  min-width: 116px !important;
  min-height: 48px !important;
  padding: 0 24px !important;
  border: 1px solid var(--ph-orange) !important;
  border-radius: 0 10px 10px 0 !important;
  background: var(--ph-orange) !important;
  color: var(--ph-logo-black) !important;
  font-size: 13px !important;
  font-weight: 850 !important;
  letter-spacing: 0.08em !important;
  text-transform: uppercase !important;
}

.ph-desktop-search__button:hover,
.ph-desktop-search__button:focus {
  border-color: var(--ph-orange-hover) !important;
  background: var(--ph-orange-hover) !important;
  color: var(--ph-logo-black) !important;
}

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

/* The desktop has a full search form, so the popup magnifier is mobile-only. */
@media (min-width: 901px) {
  #header .navigation-buttons > a[data-target="search"] {
    display: none !important;
  }
}

/* --------------------------------------------------------------------------
   Main navigation in the established orange Pantone-like brand tone
   -------------------------------------------------------------------------- */
#header .header-bottom,
body.desktop #header .header-bottom,
#header .header-bottom-wrapper,
#header #navigation,
#header .navigation-in,
#header .navigation-in.menu {
  background: var(--ph-orange) !important;
}

#header .header-bottom,
body.desktop #header .header-bottom {
  border-top: 1px solid var(--ph-orange) !important;
  border-bottom: 3px solid var(--ph-logo-black) !important;
}

#header .navigation-in > ul.menu-level-1 > li > a {
  border-right-color: rgba(14, 19, 19, 0.16) !important;
  background: var(--ph-orange) !important;
  color: var(--ph-logo-black) !important;
  font-weight: 850 !important;
}

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

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

/* Dropdown cards: orange hover stays inside each item, never outside it. */
#header .navigation-in ul.menu-level-2 {
  border-top: 3px solid var(--ph-orange) !important;
  background: #fff !important;
}

#header .navigation-in ul.menu-level-2 > li {
  border: 1px solid transparent !important;
  border-radius: 14px !important;
  transition: background-color 150ms ease, border-color 150ms ease !important;
}

#header .navigation-in ul.menu-level-2 > li:hover,
#header .navigation-in ul.menu-level-2 > li:focus-within {
  border-color: var(--ph-orange) !important;
  background: rgba(246, 185, 0, 0.14) !important;
}

#header .navigation-in ul.menu-level-2 .menu-image,
#header .navigation-in ul.menu-level-2 .menu-image img {
  border-radius: 12px !important;
}

#header .navigation-in ul.menu-level-2 .menu-image {
  overflow: hidden !important;
  background: #f3f3f1 !important;
}

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

/* --------------------------------------------------------------------------
   Carousel: exactly one clean chevron on each side
   -------------------------------------------------------------------------- */
.type-index #carousel .carousel-control {
  overflow: hidden !important;
}

.type-index #carousel .carousel-control::after {
  display: none !important;
  content: none !important;
}

.type-index #carousel .carousel-control::before {
  display: block !important;
  width: 14px !important;
  height: 14px !important;
  border: 0 !important;
  border-bottom: 3px solid #fff !important;
  border-left: 3px solid #fff !important;
  background: transparent !important;
  content: "" !important;
  font-family: inherit !important;
  line-height: 1 !important;
}

.type-index #carousel .carousel-control.left::before {
  transform: rotate(45deg) !important;
  margin-left: 5px !important;
}

.type-index #carousel .carousel-control.right::before {
  transform: rotate(225deg) !important;
  margin-right: 5px !important;
}

.type-index #carousel .carousel-control > span:not(.sr-only),
.type-index #carousel .carousel-control > i {
  display: none !important;
}

/* --------------------------------------------------------------------------
   Search popup: keep the page fully visible, without a dimming backdrop
   -------------------------------------------------------------------------- */
body.search-window-visible,
body.search-window-visible .overall-wrapper,
body.user-action-visible.search-window-visible .overall-wrapper {
  filter: none !important;
  opacity: 1 !important;
}

body.search-window-visible::before,
body.search-window-visible::after,
body.search-window-visible .overall-wrapper::before,
body.search-window-visible .overall-wrapper::after,
body.search-window-visible .user-action::before,
body.search-window-visible .user-action::after,
body.search-window-visible .popup-widget::before,
body.search-window-visible .popup-widget::after,
body.search-window-visible .overlay,
body.search-window-visible .popup-overlay,
body.search-window-visible .user-action-overlay {
  display: none !important;
  background: transparent !important;
  opacity: 0 !important;
  pointer-events: none !important;
}

#header .search-widget {
  box-shadow: 0 18px 50px rgba(14, 19, 19, 0.2) !important;
}

/* --------------------------------------------------------------------------
   Responsive header
   -------------------------------------------------------------------------- */
@media (max-width: 1180px) and (min-width: 901px) {
  #header .header-top-wrapper {
    grid-template-columns: minmax(235px, 285px) minmax(280px, 1fr) auto !important;
    gap: 20px !important;
  }

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

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

  .ph-desktop-search__button {
    min-width: 98px !important;
    padding-inline: 16px !important;
  }
}

/* Mobile navigation: expanded/selected category is unmistakably orange. */
@media (max-width: 900px) {
  #header .header-top-wrapper > .navigation-tools,
  #header .navigation-tools,
  .ph-desktop-search {
    display: none !important;
  }

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

  body.navigation-window-visible #header .header-bottom,
  .navigation-window-visible #header .header-bottom,
  body.navigation-window-visible #navigation,
  .navigation-window-visible #navigation,
  body.navigation-window-visible #header .navigation-in,
  .navigation-window-visible #header .navigation-in {
    background: #fff !important;
  }

  #header .navigation-in > ul.menu-level-1 > li > a {
    min-height: 54px !important;
    padding: 14px 18px !important;
    border-bottom: 1px solid #e4e5e5 !important;
    background: #fff !important;
    color: var(--ph-logo-black) !important;
    font-size: 14px !important;
  }

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

  #header .navigation-in > ul.menu-level-1 > li.exp > ul.menu-level-2 {
    border-top: 0 !important;
    border-left: 5px solid var(--ph-orange) !important;
    background: #fff8dd !important;
  }

  #header .navigation-in ul.menu-level-2 > li {
    border: 0 !important;
    border-bottom: 1px solid rgba(14, 19, 19, 0.09) !important;
    border-radius: 0 !important;
    background: transparent !important;
  }

  #header .navigation-in ul.menu-level-2 > li:hover,
  #header .navigation-in ul.menu-level-2 > li:focus-within,
  #header .navigation-in ul.menu-level-2 > li.active {
    background: rgba(246, 185, 0, 0.22) !important;
  }

  #header .navigation-in ul.menu-level-2 > li a {
    font-size: 14px !important;
    line-height: 1.35 !important;
  }
}

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

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

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

  /* Larger and fully readable category subtiles on mobile. */
  body.type-category .subcategories,
  body.type-category .subcategories.with-image,
  body.type-category .subcategories.seo-subcategories.with-image {
    grid-template-columns: 1fr !important;
    gap: 12px !important;
  }

  body.type-category .subcategories li > a {
    grid-template-columns: 74px minmax(0, 1fr) !important;
    gap: 14px !important;
    min-height: 104px !important;
    padding: 14px !important;
    border-radius: 15px !important;
  }

  body.type-category .subcategories li a .image {
    width: 74px !important;
    min-width: 74px !important;
    height: 74px !important;
    overflow: hidden !important;
    border-radius: 12px !important;
    background: #f2f3f1 !important;
  }

  body.type-category .subcategories li a .image img {
    width: 100% !important;
    max-width: 68px !important;
    height: 100% !important;
    max-height: 68px !important;
    border-radius: 10px !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: block !important;
    overflow: visible !important;
    font-size: 15px !important;
    font-weight: 800 !important;
    line-height: 1.3 !important;
    white-space: normal !important;
    word-break: normal !important;
    overflow-wrap: break-word !important;
    text-overflow: clip !important;
    -webkit-line-clamp: unset !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;
  }
}

@media (max-width: 390px) {
  #header .header-top-wrapper > .site-name,
  #header .site-name {
    width: min(150px, 39vw) !important;
    max-width: min(150px, 39vw) !important;
  }

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


/* ========================================================================== 
   V16 — header restructure, cleaner mobile menu and calmer homepage controls
   ========================================================================== */

/* Utility strip: remove contact/opening hours and spread the remaining links. */
.ph-header-strip__contacts {
  display: none !important;
}

.ph-header-strip__inner {
  justify-content: center !important;
}

.ph-header-strip__links {
  display: flex !important;
  width: min(100%, var(--ph-container)) !important;
  justify-content: space-evenly !important;
  align-items: center !important;
  gap: 12px 28px !important;
}

.ph-header-strip__links a {
  font-size: 14px !important;
  font-weight: 700 !important;
}

/* Main header: oversized logo on the left, search visually lowered, icons aligned. */
#header,
#header .header-top,
#header .header-top-wrapper {
  background: var(--ph-logo-black) !important;
}

@media (min-width: 901px) {
  #header .header-top-wrapper {
    grid-template-columns: minmax(320px, 430px) minmax(320px, 1fr) auto !important;
    grid-template-rows: auto auto !important;
    align-items: end !important;
    gap: 18px 34px !important;
    min-height: 162px !important;
    padding-top: 14px !important;
    padding-bottom: 18px !important;
  }

  #header .header-top-wrapper > .site-name,
  #header .site-name {
    grid-column: 1 !important;
    grid-row: 1 / span 2 !important;
    align-self: center !important;
    width: 100% !important;
    max-width: 420px !important;
  }

  #header .site-name a {
    align-items: center !important;
    justify-content: flex-start !important;
  }

  #header .site-name a img {
    width: 100% !important;
    max-width: 420px !important;
    max-height: 122px !important;
    object-fit: contain !important;
  }

  #header .header-top-wrapper > .navigation-tools,
  #header .navigation-tools {
    grid-column: 2 !important;
    grid-row: 2 !important;
    align-self: end !important;
    width: 100% !important;
  }

  .ph-desktop-search {
    width: min(100%, 760px) !important;
    max-width: none !important;
    margin-top: 0 !important;
  }

  .ph-desktop-search__input,
  .ph-desktop-search__button {
    height: 50px !important;
    min-height: 50px !important;
  }

  #header .header-top-wrapper > .navigation-buttons,
  #header .navigation-buttons {
    grid-column: 3 !important;
    grid-row: 2 !important;
    align-self: end !important;
    justify-self: end !important;
    gap: 8px !important;
  }
}

/* Desktop navigation: keep the brand Pantone tone, add clear separators. */
#header .header-bottom,
body.desktop #header .header-bottom,
#header .header-bottom-wrapper,
#header #navigation,
#header .navigation-in,
#header .navigation-in.menu {
  background: var(--ph-orange) !important;
}

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

#header .navigation-in > ul.menu-level-1 > li + li::before {
  content: "";
  position: absolute;
  top: 12px;
  bottom: 12px;
  left: 0;
  width: 1px;
  background: rgba(14, 19, 19, 0.18);
}

#header .navigation-in > ul.menu-level-1 > li > a {
  border-right: 0 !important;
}

/* Dropdown tiles: larger and more regular, highlight only inside the hovered card. */
#header .navigation-in ul.menu-level-2 > li {
  border-radius: 16px !important;
}

#header .navigation-in ul.menu-level-2 > li:hover,
#header .navigation-in ul.menu-level-2 > li:focus-within {
  border-color: var(--ph-orange) !important;
  background: rgba(246, 185, 0, 0.12) !important;
}

#header .navigation-in ul.menu-level-2 .menu-image,
#header .navigation-in ul.menu-level-2 .menu-image img {
  border-radius: 14px !important;
}

/* Banner arrows: force exactly one visible chevron per side and suppress duplicates. */
.type-index #carousel .carousel-control {
  overflow: hidden !important;
}

.type-index #carousel .carousel-control > *,
.type-index #carousel .carousel-control span,
.type-index #carousel .carousel-control i {
  display: none !important;
}

.type-index #carousel .carousel-control::after {
  display: none !important;
  content: none !important;
}

.type-index #carousel .carousel-control::before {
  display: block !important;
  width: 14px !important;
  height: 14px !important;
  border: 0 !important;
  border-bottom: 3px solid #fff !important;
  border-left: 3px solid #fff !important;
  background: transparent !important;
  content: "" !important;
}

.type-index #carousel .carousel-control.left::before {
  transform: rotate(45deg) !important;
  margin-left: 5px !important;
}

.type-index #carousel .carousel-control.right::before {
  transform: rotate(225deg) !important;
  margin-right: 5px !important;
}

/* Homepage / category subcategory cards: bigger, calmer, mobile-like text. */
body.type-index .subcategories,
body.type-index .subcategories.with-image,
body.type-category .subcategories,
body.type-category .subcategories.with-image,
body.type-category .subcategories.seo-subcategories.with-image {
  display: grid !important;
  width: 100% !important;
  grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
  gap: 18px !important;
  margin: 0 0 38px !important;
  padding: 0 !important;
}

body.type-index .subcategories > li,
body.type-category .subcategories > li {
  width: auto !important;
  max-width: none !important;
  margin: 0 !important;
  padding: 0 !important;
}

body.type-index .subcategories li > a,
body.type-category .subcategories li > a {
  display: grid !important;
  min-height: 118px !important;
  grid-template-columns: 78px minmax(0, 1fr) !important;
  align-items: center !important;
  gap: 18px !important;
  padding: 16px 18px !important;
  border: 1px solid var(--ph-border) !important;
  border-radius: 16px !important;
  background: var(--ph-white) !important;
  box-shadow: var(--ph-shadow-sm) !important;
  text-decoration: none !important;
}

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

body.type-index .subcategories li a .image,
body.type-category .subcategories li a .image {
  display: flex !important;
  width: 78px !important;
  height: 78px !important;
  align-items: center !important;
  justify-content: center !important;
  overflow: hidden !important;
  border-radius: 14px !important;
  background: var(--ph-soft) !important;
}

body.type-index .subcategories li a .image img,
body.type-category .subcategories li a .image img {
  max-width: 70px !important;
  max-height: 70px !important;
  object-fit: contain !important;
}

body.type-index .subcategories li a .text,
body.type-category .subcategories li a .text,
body.type-index .subcategories li a .name,
body.type-category .subcategories li a .name,
body.type-index .subcategories li a .category-name,
body.type-category .subcategories li a .category-name,
body.type-index .subcategories li > a > span:not(.image),
body.type-category .subcategories li > a > span:not(.image),
body.type-index .subcategories li > a > div:not(.image),
body.type-category .subcategories li > a > div:not(.image) {
  min-width: 0 !important;
  color: var(--ph-black) !important;
  font-size: 20px !important;
  font-weight: 760 !important;
  line-height: 1.28 !important;
  white-space: normal !important;
  overflow: visible !important;
  text-overflow: unset !important;
  word-break: break-word !important;
}

/* Mobile header and mobile menu: no orange walls, single open branch, clearer items. */
@media (max-width: 900px) {
  .ph-header-strip {
    display: block !important;
  }

  .ph-header-strip__links {
    justify-content: space-around !important;
    gap: 10px 16px !important;
    padding-inline: 12px !important;
  }

  .ph-header-strip__links a {
    font-size: 13px !important;
  }

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

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

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

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

  #header .header-top-wrapper > .navigation-buttons,
  #header .navigation-buttons {
    gap: 6px !important;
  }

  #header .header-bottom,
  body.desktop #header .header-bottom,
  #header .header-bottom-wrapper,
  #header #navigation,
  #header .navigation-in,
  #header .navigation-in.menu,
  body.navigation-window-visible #header .header-bottom,
  .navigation-window-visible #header .header-bottom {
    background: var(--ph-white) !important;
    border-top: 1px solid var(--ph-border) !important;
    border-bottom: 1px solid var(--ph-border) !important;
  }

  #header .navigation-in > ul.menu-level-1 {
    background: var(--ph-white) !important;
    padding: 0 !important;
  }

  #header .navigation-in > ul.menu-level-1 > li {
    border-bottom: 1px solid var(--ph-border) !important;
  }

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

  #header .navigation-in > ul.menu-level-1 > li > a {
    min-height: 58px !important;
    padding: 18px 16px !important;
    background: #fff !important;
    color: var(--ph-black) !important;
    font-size: 18px !important;
    font-weight: 800 !important;
  }

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

  #header .navigation-in ul.menu-level-2,
  #header .navigation-in > ul.menu-level-1 > li.exp > ul.menu-level-2 {
    background: #fbfbf8 !important;
    border-top: 1px solid var(--ph-border) !important;
    padding: 0 !important;
    box-shadow: none !important;
  }

  #header .menu-level-2 > li {
    margin: 0 !important;
    border-bottom: 1px solid var(--ph-border) !important;
    border-radius: 0 !important;
  }

  #header .menu-level-2 > li:hover,
  #header .menu-level-2 > li:focus-within {
    border-color: var(--ph-border) !important;
    background: #f6f6f3 !important;
  }

  #header .menu-level-2 > li > div > a,
  #header .menu-level-2 > li > a {
    display: grid !important;
    grid-template-columns: 74px minmax(0, 1fr) !important;
    align-items: center !important;
    gap: 14px !important;
    min-height: 88px !important;
    padding: 14px 16px !important;
    color: var(--ph-black) !important;
    text-decoration: none !important;
  }

  #header .menu-level-2 .menu-image {
    display: flex !important;
    width: 74px !important;
    height: 74px !important;
    align-items: center !important;
    justify-content: center !important;
    margin: 0 !important;
    overflow: hidden !important;
    border-radius: 14px !important;
    background: var(--ph-soft) !important;
  }

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

  #header .menu-level-2 > li > div > a,
  #header .menu-level-2 > li > div > a span,
  #header .menu-level-2 > li > a,
  #header .menu-level-2 > li > a span {
    font-size: 18px !important;
    font-weight: 760 !important;
    line-height: 1.28 !important;
    white-space: normal !important;
    overflow: visible !important;
    text-overflow: unset !important;
    word-break: break-word !important;
  }

  /* Remove stray pseudo arrows in the mobile menu body. */
  #header .menu-level-2 > li::before,
  #header .menu-level-2 > li::after,
  #header .menu-level-2 > li > a::before,
  #header .menu-level-2 > li > a::after,
  #header .menu-level-2 > li > div > a::before,
  #header .menu-level-2 > li > div > a::after,
  #header .menu-level-2 > li i,
  #header .menu-level-2 > li [class*="arrow"],
  #header .menu-level-2 > li [class*="chevron"] {
    display: none !important;
    content: none !important;
  }
}

@media (max-width: 767px) {
  body.type-index .subcategories,
  body.type-index .subcategories.with-image,
  body.type-category .subcategories,
  body.type-category .subcategories.with-image,
  body.type-category .subcategories.seo-subcategories.with-image {
    grid-template-columns: 1fr !important;
    gap: 14px !important;
  }

  body.type-index .subcategories li > a,
  body.type-category .subcategories li > a {
    min-height: 108px !important;
    grid-template-columns: 72px minmax(0, 1fr) !important;
    gap: 14px !important;
    padding: 14px 16px !important;
  }

  body.type-index .subcategories li a .image,
  body.type-category .subcategories li a .image {
    width: 72px !important;
    height: 72px !important;
  }

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

/* ========================================================================== 
   V17 — final header, mobile navigation, text-only subcategories and footer
   ========================================================================== */

/* --------------------------------------------------------------------------
   Desktop header: visibly larger cropped logo on the far left + search field
   -------------------------------------------------------------------------- */
@media (min-width: 901px) {
  #header .header-top-wrapper {
    grid-template-columns: minmax(420px, 500px) minmax(380px, 1fr) auto !important;
    grid-template-rows: 1fr !important;
    align-items: center !important;
    gap: clamp(26px, 3vw, 56px) !important;
    min-height: 172px !important;
    padding-top: 12px !important;
    padding-bottom: 12px !important;
  }

  #header .header-top-wrapper > .site-name,
  #header .site-name {
    grid-column: 1 !important;
    grid-row: 1 !important;
    justify-self: start !important;
    align-self: center !important;
    width: 100% !important;
    max-width: 500px !important;
    height: 142px !important;
    overflow: hidden !important;
  }

  #header .site-name a {
    width: 100% !important;
    height: 100% !important;
    overflow: hidden !important;
  }

  #header .site-name a img {
    width: 100% !important;
    max-width: none !important;
    height: 100% !important;
    max-height: none !important;
    object-fit: cover !important;
    object-position: center !important;
    transform: scale(1.38) !important;
    transform-origin: center !important;
  }

  #header .header-top-wrapper > .navigation-tools,
  #header .navigation-tools {
    display: flex !important;
    grid-column: 2 !important;
    grid-row: 1 !important;
    align-self: center !important;
    width: 100% !important;
    min-width: 0 !important;
  }

  .ph-desktop-search {
    display: flex !important;
    width: min(100%, 780px) !important;
    max-width: 780px !important;
    align-items: stretch !important;
    margin: 34px 0 0 !important;
  }

  .ph-desktop-search__input,
  .ph-desktop-search__button {
    height: 52px !important;
    min-height: 52px !important;
  }

  #header .header-top-wrapper > .navigation-buttons,
  #header .navigation-buttons {
    grid-column: 3 !important;
    grid-row: 1 !important;
    align-self: center !important;
    margin-top: 34px !important;
  }
}

/* --------------------------------------------------------------------------
   Main menu: each category has a subtle black frame/separator
   -------------------------------------------------------------------------- */
@media (min-width: 901px) {
  #header .navigation-in > ul.menu-level-1 {
    gap: 0 !important;
    border-top: 1px solid rgba(14, 19, 19, 0.38) !important;
    border-bottom: 1px solid rgba(14, 19, 19, 0.38) !important;
  }

  #header .navigation-in > ul.menu-level-1 > li {
    border-left: 1px solid rgba(14, 19, 19, 0.28) !important;
  }

  #header .navigation-in > ul.menu-level-1 > li:last-child {
    border-right: 1px solid rgba(14, 19, 19, 0.28) !important;
  }

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

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

/* --------------------------------------------------------------------------
   Mobile category navigation: closed by default, only one branch after click
   -------------------------------------------------------------------------- */
@media (max-width: 900px) {
  #header .navigation-in > ul.menu-level-1 > li > ul.menu-level-2,
  #header .navigation-in > ul.menu-level-1 > li.exp > ul.menu-level-2,
  #header .navigation-in > ul.menu-level-1 > li.active > ul.menu-level-2 {
    display: none !important;
  }

  #header .navigation-in > ul.menu-level-1 > li.ph-mobile-open > ul.menu-level-2 {
    display: block !important;
  }

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

  #header .navigation-in > ul.menu-level-1 > li > a {
    border-bottom: 1px solid #d8d8d3 !important;
  }

  /* Text-only submenu: no product/category photos. */
  #header .menu-level-2 .menu-image,
  #header .menu-level-2 .menu-image img {
    display: none !important;
  }

  #header .menu-level-2 > li,
  #header .menu-level-2 > li:hover,
  #header .menu-level-2 > li:focus-within {
    margin: 0 !important;
    border: 0 !important;
    border-bottom: 1px solid #deded9 !important;
    border-radius: 0 !important;
    background: #fbfbf8 !important;
  }

  #header .menu-level-2 > li > div,
  #header .menu-level-2 > li > div > a,
  #header .menu-level-2 > li > a {
    display: block !important;
    min-height: 0 !important;
    padding: 0 !important;
  }

  #header .menu-level-2 > li > div > a,
  #header .menu-level-2 > li > a,
  #header .menu-level-2 > li > div > a span,
  #header .menu-level-2 > li > a span {
    width: 100% !important;
    padding: 16px 18px !important;
    color: var(--ph-logo-black) !important;
    font-size: 17px !important;
    font-weight: 720 !important;
    line-height: 1.34 !important;
    white-space: normal !important;
    overflow: visible !important;
    text-overflow: unset !important;
    word-break: normal !important;
  }
}

/* Category-page subcategories on mobile: text only, no pictures. */
@media (max-width: 767px) {
  body.type-category .subcategories,
  body.type-category .subcategories.with-image,
  body.type-category .subcategories.seo-subcategories.with-image {
    grid-template-columns: 1fr !important;
    gap: 10px !important;
  }

  body.type-category .subcategories li > a {
    display: block !important;
    min-height: 0 !important;
    padding: 17px 18px !important;
    border-radius: 12px !important;
  }

  body.type-category .subcategories li a .image,
  body.type-category .subcategories li a .image img {
    display: none !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: block !important;
    width: 100% !important;
    font-size: 17px !important;
    font-weight: 750 !important;
    line-height: 1.32 !important;
    white-space: normal !important;
    overflow: visible !important;
    text-overflow: unset !important;
  }
}

/* --------------------------------------------------------------------------
   Footer: restore the requested three-column desktop composition
   -------------------------------------------------------------------------- */
#footer .ph-legacy-footer {
  width: 100% !important;
  padding: 62px 0 34px !important;
  background: #151515 !important;
}

#footer .ph-legacy-footer > .row {
  display: grid !important;
  width: min(100%, var(--ph-container)) !important;
  grid-template-columns: minmax(280px, 1fr) minmax(240px, 0.9fr) minmax(340px, 1.15fr) !important;
  align-items: start !important;
  gap: clamp(40px, 6vw, 92px) !important;
  margin: 0 auto !important;
  padding: 0 var(--ph-gutter) !important;
}

#footer .delivery_payment-container,
#footer #menuarticles,
#footer .vc-content_shopinfo {
  display: block !important;
  width: auto !important;
  min-width: 0 !important;
  margin: 0 !important;
  padding: 0 !important;
  color: #fff !important;
}

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

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

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

#footer .delivery_payment-container h2,
#footer #menuarticles .header,
#footer .vc-content_shopinfo .header {
  margin: 0 0 18px !important;
  color: #fff !important;
  font-size: 20px !important;
  font-weight: 820 !important;
  line-height: 1.2 !important;
}

#footer .vc-content_deliverymethods {
  margin-top: 24px !important;
}

#footer .ico {
  display: flex !important;
  flex-wrap: wrap !important;
  align-items: center !important;
  gap: 10px !important;
}

#footer .ico span {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
}

#footer .ico img {
  width: auto !important;
  max-width: 88px !important;
  height: 48px !important;
  max-height: 48px !important;
  object-fit: contain !important;
}

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

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

#footer #menuarticles a,
#footer .eshopContact,
#footer .eshopContact a {
  color: #fff !important;
  font-size: 16px !important;
  line-height: 1.55 !important;
}

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

#footer .eshopContact {
  display: grid !important;
  grid-template-columns: minmax(150px, 1fr) minmax(180px, 1fr) !important;
  gap: 28px !important;
  align-items: start !important;
}

#footer .eshopContact .prvni,
#footer .eshopContact .druhy {
  display: block !important;
  margin: 0 !important;
  padding: 0 !important;
}

#footer .eshopContact .druhy a {
  display: block !important;
  margin: 0 0 3px !important;
}

#footer #extraAdvantage {
  display: grid !important;
  width: min(100%, var(--ph-container)) !important;
  grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
  margin: 42px auto 0 !important;
  padding: 0 var(--ph-gutter) !important;
}

#footer #extraAdvantage .advan {
  display: flex !important;
  min-height: 76px !important;
  align-items: center !important;
  justify-content: center !important;
  margin: 0 !important;
  padding: 18px 16px !important;
  border: 1px solid #373737 !important;
  border-right: 0 !important;
  background: #202020 !important;
  color: #fff !important;
  font-size: 15px !important;
  font-weight: 760 !important;
  text-align: center !important;
}

#footer #extraAdvantage .advan:first-child {
  border-radius: 12px 0 0 12px !important;
}

#footer #extraAdvantage .advan:last-child {
  border-right: 1px solid #373737 !important;
  border-radius: 0 12px 12px 0 !important;
}

#footer #extraAdvantage a,
#footer #extraAdvantage span {
  color: #fff !important;
  text-decoration: none !important;
}

@media (max-width: 980px) {
  #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: 680px) {
  #footer .ph-legacy-footer > .row {
    grid-template-columns: 1fr !important;
    gap: 34px !important;
  }

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

  #footer .eshopContact {
    grid-template-columns: 1fr !important;
    gap: 16px !important;
  }

  #footer #extraAdvantage {
    grid-template-columns: 1fr !important;
    gap: 8px !important;
  }

  #footer #extraAdvantage .advan {
    border: 1px solid #373737 !important;
    border-radius: 10px !important;
  }
}

/* ========================================================================== 
   V18 — fitted logo, item-only menu frames, closable mobile accordion, footer
   ========================================================================== */

/* Desktop logo: show the complete artwork and keep it inside the header. */
@media (min-width: 901px) {
  #header .header-top-wrapper {
    grid-template-columns: minmax(330px, 390px) minmax(360px, 1fr) auto !important;
    min-height: 150px !important;
    gap: clamp(24px, 3vw, 48px) !important;
    padding-top: 14px !important;
    padding-bottom: 14px !important;
  }

  #header .header-top-wrapper > .site-name,
  #header .site-name {
    width: 100% !important;
    max-width: 390px !important;
    height: 118px !important;
    overflow: visible !important;
  }

  #header .site-name a {
    width: 100% !important;
    height: 100% !important;
    overflow: visible !important;
  }

  #header .site-name a img {
    display: block !important;
    width: 100% !important;
    max-width: 390px !important;
    height: 100% !important;
    max-height: 118px !important;
    margin: 0 !important;
    object-fit: contain !important;
    object-position: left center !important;
    transform: none !important;
  }

  .ph-desktop-search {
    margin-top: 24px !important;
  }

  #header .header-top-wrapper > .navigation-buttons,
  #header .navigation-buttons {
    margin-top: 24px !important;
  }
}

/* Frame only the real category buttons — no line continuing into empty space. */
@media (min-width: 901px) {
  #header .navigation-in > ul.menu-level-1 {
    width: max-content !important;
    max-width: 100% !important;
    margin: 0 auto !important;
    border: 0 !important;
    background: transparent !important;
  }

  #header .navigation-in > ul.menu-level-1 > li {
    border-top: 1px solid rgba(14, 19, 19, 0.34) !important;
    border-bottom: 1px solid rgba(14, 19, 19, 0.34) !important;
    border-left: 1px solid rgba(14, 19, 19, 0.34) !important;
  }

  #header .navigation-in > ul.menu-level-1 > li:last-child {
    border-right: 1px solid rgba(14, 19, 19, 0.34) !important;
  }

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

/* Mobile submenu is controlled only by ph-mobile-open. It can open and close. */
@media (max-width: 900px) {
  #header .navigation-in > ul.menu-level-1 > li > ul.menu-level-2,
  #header .navigation-in > ul.menu-level-1 > li.exp > ul.menu-level-2,
  #header .navigation-in > ul.menu-level-1 > li.active > ul.menu-level-2 {
    display: none !important;
  }

  #header .navigation-in > ul.menu-level-1 > li.ph-mobile-open > ul.menu-level-2 {
    display: block !important;
  }

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

/* Footer: exact three-column desktop grid, one-column contact, four benefits. */
#footer .ph-legacy-footer {
  padding: 58px 0 34px !important;
}

#footer .ph-legacy-footer > .row {
  display: grid !important;
  width: min(100%, 1160px) !important;
  grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
  align-items: start !important;
  gap: clamp(54px, 7vw, 112px) !important;
  margin: 0 auto !important;
  padding: 0 24px !important;
}

#footer .delivery_payment-container,
#footer #menuarticles,
#footer .vc-content_shopinfo {
  display: block !important;
  width: 100% !important;
  min-width: 0 !important;
  margin: 0 !important;
  padding: 0 !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 {
  display: block !important;
  width: 100% !important;
}

#footer .eshopContact .prvni,
#footer .eshopContact .druhy {
  display: block !important;
  width: 100% !important;
  margin: 0 !important;
  padding: 0 !important;
}

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

#footer .eshopContact .druhy a {
  display: block !important;
  margin: 0 0 2px !important;
}

#footer #extraAdvantage {
  display: grid !important;
  width: min(100%, 1160px) !important;
  grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
  margin: 42px auto 0 !important;
  padding: 0 24px !important;
}

@media (max-width: 900px) and (min-width: 681px) {
  #footer .ph-legacy-footer > .row {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 34px !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: 680px) {
  #footer .ph-legacy-footer > .row {
    grid-template-columns: 1fr !important;
    gap: 32px !important;
  }

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

  #footer #extraAdvantage {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 8px !important;
  }

  #footer #extraAdvantage .advan,
  #footer #extraAdvantage .advan:first-child,
  #footer #extraAdvantage .advan:last-child {
    border: 1px solid #373737 !important;
    border-radius: 10px !important;
  }
}

/* ========================================================================== 
   V19 — clean top area and reliable mobile category accordion
   ========================================================================== */

/* Remove the auxiliary text strip above the header. */
.ph-header-strip {
  display: none !important;
}

/* The Theme Editor can add a yellow preview label called "Záhlaví".
   JavaScript removes it dynamically; these selectors cover common wrappers. */
body.admin-logged .ph-editor-label-hidden,
body.admin-logged [data-ph-hide-editor-label="true"] {
  display: none !important;
}

/* Mobile category submenus are controlled exclusively by ph-mobile-open. */
@media (max-width: 900px) {
  #header .navigation-in > ul.menu-level-1 > li > ul.menu-level-2,
  #header .navigation-in > ul.menu-level-1 > li.exp > ul.menu-level-2,
  #header .navigation-in > ul.menu-level-1 > li.active > ul.menu-level-2 {
    display: none !important;
    visibility: hidden !important;
    max-height: 0 !important;
    overflow: hidden !important;
    opacity: 0 !important;
  }

  #header .navigation-in > ul.menu-level-1 > li.ph-mobile-open > ul.menu-level-2 {
    display: block !important;
    visibility: visible !important;
    max-height: none !important;
    overflow: visible !important;
    opacity: 1 !important;
  }

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

  #header .navigation-in > ul.menu-level-1 > li.ph-mobile-open > a .submenu-arrow {
    transform: rotate(180deg) !important;
  }
}

/* ========================================================================== 
   V20 — balanced desktop header: large logo left, search centred, icons right
   ========================================================================== */

@media (min-width: 1100px) {
  #header .header-top-wrapper {
    display: grid !important;
    grid-template-columns: minmax(390px, 1fr) minmax(420px, 700px) minmax(190px, 1fr) !important;
    grid-template-rows: 1fr !important;
    align-items: center !important;
    column-gap: clamp(24px, 3vw, 52px) !important;
    min-height: 154px !important;
    padding-top: 16px !important;
    padding-bottom: 16px !important;
  }

  #header .header-top-wrapper > .site-name,
  #header .site-name {
    grid-column: 1 !important;
    grid-row: 1 !important;
    justify-self: start !important;
    align-self: center !important;
    width: min(100%, 440px) !important;
    max-width: 440px !important;
    height: 122px !important;
    margin: 0 !important;
    overflow: visible !important;
  }

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

  #header .site-name a img {
    display: block !important;
    width: 100% !important;
    max-width: 440px !important;
    height: 100% !important;
    max-height: 122px !important;
    margin: 0 !important;
    object-fit: contain !important;
    object-position: left center !important;
    transform: none !important;
  }

  #header .header-top-wrapper > .navigation-tools,
  #header .navigation-tools {
    display: flex !important;
    grid-column: 2 !important;
    grid-row: 1 !important;
    align-self: center !important;
    justify-self: center !important;
    width: 100% !important;
    min-width: 0 !important;
    margin: 0 !important;
  }

  .ph-desktop-search {
    display: flex !important;
    width: 100% !important;
    max-width: 700px !important;
    align-items: stretch !important;
    margin: 0 auto !important;
  }

  .ph-desktop-search__input,
  .ph-desktop-search__button {
    height: 52px !important;
    min-height: 52px !important;
  }

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

/* Slightly narrower desktop previews keep the same left / centre / right logic. */
@media (min-width: 901px) and (max-width: 1099px) {
  #header .header-top-wrapper {
    display: grid !important;
    grid-template-columns: minmax(280px, 340px) minmax(320px, 1fr) auto !important;
    align-items: center !important;
    gap: 20px !important;
    min-height: 132px !important;
    padding-top: 14px !important;
    padding-bottom: 14px !important;
  }

  #header .header-top-wrapper > .site-name,
  #header .site-name {
    grid-column: 1 !important;
    justify-self: start !important;
    width: min(100%, 340px) !important;
    max-width: 340px !important;
    height: 100px !important;
    margin: 0 !important;
    overflow: visible !important;
  }

  #header .site-name a img {
    width: 100% !important;
    max-width: 340px !important;
    height: 100% !important;
    max-height: 100px !important;
    object-fit: contain !important;
    object-position: left center !important;
    transform: none !important;
  }

  #header .header-top-wrapper > .navigation-tools,
  #header .navigation-tools {
    display: flex !important;
    grid-column: 2 !important;
    justify-self: center !important;
    width: 100% !important;
    margin: 0 !important;
  }

  .ph-desktop-search {
    display: flex !important;
    width: 100% !important;
    max-width: 560px !important;
    margin: 0 auto !important;
  }

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

/* ========================================================================== 
   V21 — full-width desktop header
   Oversized logo at the far left, search centred, actions at the far right.
   ========================================================================== */

@media (min-width: 1100px) {
  #header .header-top,
  #header .header-top-wrapper {
    width: 100% !important;
    max-width: none !important;
  }

  #header .header-top-wrapper {
    position: relative !important;
    display: block !important;
    min-height: 166px !important;
    margin: 0 !important;
    padding: 16px clamp(18px, 2vw, 34px) !important;
  }

  #header .header-top-wrapper > .site-name,
  #header .site-name {
    position: absolute !important;
    top: 50% !important;
    left: clamp(12px, 1.4vw, 24px) !important;
    width: clamp(410px, 33vw, 540px) !important;
    max-width: none !important;
    height: 136px !important;
    margin: 0 !important;
    overflow: visible !important;
    transform: translateY(-50%) !important;
  }

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

  #header .site-name a img {
    display: block !important;
    width: 100% !important;
    max-width: none !important;
    height: 100% !important;
    max-height: 136px !important;
    margin: 0 !important;
    object-fit: contain !important;
    object-position: left center !important;
    transform: scale(1.08) !important;
    transform-origin: left center !important;
  }

  #header .header-top-wrapper > .navigation-tools,
  #header .navigation-tools {
    position: absolute !important;
    top: 50% !important;
    left: 50% !important;
    display: flex !important;
    width: clamp(430px, 43vw, 720px) !important;
    min-width: 0 !important;
    max-width: 720px !important;
    margin: 0 !important;
    align-items: center !important;
    justify-content: center !important;
    transform: translate(-50%, -50%) !important;
  }

  .ph-desktop-search {
    display: flex !important;
    width: 100% !important;
    max-width: none !important;
    margin: 0 !important;
  }

  .ph-desktop-search__input,
  .ph-desktop-search__button {
    height: 54px !important;
    min-height: 54px !important;
  }

  #header .header-top-wrapper > .navigation-buttons,
  #header .navigation-buttons {
    position: absolute !important;
    top: 50% !important;
    right: clamp(14px, 1.6vw, 28px) !important;
    display: flex !important;
    margin: 0 !important;
    align-items: center !important;
    justify-content: flex-end !important;
    gap: 9px !important;
    transform: translateY(-50%) !important;
  }
}

@media (min-width: 901px) and (max-width: 1099px) {
  #header .header-top,
  #header .header-top-wrapper {
    width: 100% !important;
    max-width: none !important;
  }

  #header .header-top-wrapper {
    position: relative !important;
    display: block !important;
    min-height: 138px !important;
    margin: 0 !important;
    padding: 14px 18px !important;
  }

  #header .header-top-wrapper > .site-name,
  #header .site-name {
    position: absolute !important;
    top: 50% !important;
    left: 10px !important;
    width: clamp(300px, 31vw, 355px) !important;
    max-width: none !important;
    height: 108px !important;
    margin: 0 !important;
    overflow: visible !important;
    transform: translateY(-50%) !important;
  }

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

  #header .site-name a img {
    max-width: none !important;
    max-height: 108px !important;
    object-fit: contain !important;
    object-position: left center !important;
    transform: scale(1.05) !important;
    transform-origin: left center !important;
  }

  #header .header-top-wrapper > .navigation-tools,
  #header .navigation-tools {
    position: absolute !important;
    top: 50% !important;
    left: 51% !important;
    display: flex !important;
    width: clamp(340px, 42vw, 500px) !important;
    max-width: 500px !important;
    margin: 0 !important;
    transform: translate(-50%, -50%) !important;
  }

  .ph-desktop-search {
    display: flex !important;
    width: 100% !important;
    max-width: none !important;
    margin: 0 !important;
  }

  #header .header-top-wrapper > .navigation-buttons,
  #header .navigation-buttons {
    position: absolute !important;
    top: 50% !important;
    right: 12px !important;
    display: flex !important;
    margin: 0 !important;
    align-items: center !important;
    gap: 7px !important;
    transform: translateY(-50%) !important;
  }
}

/* ========================================================================== 
   V22 — SIMPLE, STABLE HEADER AND MOBILE ACCORDION
   Final overrides only. No animated/off-canvas submenu logic.
   ========================================================================== */

/* Desktop: equal side columns make the search visually centred between
   the logo and the icon group. */
@media (min-width: 901px) {
  #header .header-top,
  #header .header-top-wrapper {
    width: 100% !important;
    max-width: none !important;
  }

  #header .header-top-wrapper {
    position: relative !important;
    display: grid !important;
    grid-template-columns: minmax(300px, 1fr) minmax(420px, 700px) minmax(300px, 1fr) !important;
    align-items: center !important;
    gap: clamp(24px, 3vw, 52px) !important;
    min-height: 142px !important;
    padding: 16px clamp(16px, 2.2vw, 34px) !important;
  }

  #header .header-top-wrapper > .site-name,
  #header .site-name {
    position: static !important;
    grid-column: 1 !important;
    justify-self: start !important;
    align-self: center !important;
    width: min(100%, 360px) !important;
    max-width: 360px !important;
    height: auto !important;
    margin: 0 !important;
    overflow: visible !important;
    transform: none !important;
  }

  #header .site-name a,
  #header .site-name a img {
    display: block !important;
    width: auto !important;
    height: auto !important;
    margin: 0 !important;
    transform: none !important;
  }

  #header .site-name a img {
    max-width: 360px !important;
    max-height: 104px !important;
    object-fit: contain !important;
    object-position: left center !important;
  }

  #header .header-top-wrapper > .navigation-tools,
  #header .navigation-tools {
    position: static !important;
    display: flex !important;
    grid-column: 2 !important;
    align-items: center !important;
    justify-content: center !important;
    width: 100% !important;
    max-width: none !important;
    margin: 0 !important;
    transform: none !important;
  }

  .ph-desktop-search {
    display: flex !important;
    width: 100% !important;
    max-width: 700px !important;
    margin: 0 auto !important;
  }

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

/* Mobile header: one uncomplicated row — logo left, icons right. */
@media (max-width: 900px) {
  #header .header-top-wrapper {
    position: relative !important;
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) auto !important;
    align-items: center !important;
    gap: 10px !important;
    min-height: 82px !important;
    padding: 10px 12px !important;
  }

  #header .header-top-wrapper > .site-name,
  #header .site-name {
    position: static !important;
    grid-column: 1 !important;
    width: min(230px, 62vw) !important;
    max-width: 230px !important;
    height: auto !important;
    margin: 0 !important;
    overflow: visible !important;
    transform: none !important;
  }

  #header .site-name a,
  #header .site-name a img {
    display: block !important;
    width: auto !important;
    height: auto !important;
    margin: 0 !important;
    transform: none !important;
  }

  #header .site-name a img {
    max-width: 100% !important;
    max-height: 62px !important;
    object-fit: contain !important;
    object-position: left center !important;
  }

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

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

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

  /* The native Shoptet navigation panel remains scrollable. */
  #header .header-bottom,
  body.navigation-window-visible #header .header-bottom,
  .navigation-window-visible #header .header-bottom {
    overflow: visible !important;
    background: #fff !important;
  }

  #header .header-bottom-wrapper,
  #header #navigation,
  #header .navigation-in,
  #header .navigation-in.menu {
    background: #fff !important;
  }

  #header #navigation {
    max-height: calc(100vh - 82px) !important;
    overflow-x: hidden !important;
    overflow-y: auto !important;
    overscroll-behavior: contain !important;
    -webkit-overflow-scrolling: touch !important;
  }

  #header .navigation-in > ul.menu-level-1 {
    display: block !important;
    width: 100% !important;
    margin: 0 !important;
    padding: 0 !important;
    background: #fff !important;
  }

  #header .navigation-in > ul.menu-level-1 > li {
    display: block !important;
    width: 100% !important;
    margin: 0 !important;
    padding: 0 !important;
    border: 0 !important;
    border-bottom: 1px solid #dedede !important;
    background: #fff !important;
  }

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

  #header .navigation-in > ul.menu-level-1 > li > a {
    display: flex !important;
    min-height: 58px !important;
    align-items: center !important;
    justify-content: space-between !important;
    gap: 12px !important;
    padding: 16px 18px !important;
    border: 0 !important;
    background: #fff !important;
    color: #171717 !important;
    font-size: 17px !important;
    font-weight: 750 !important;
    line-height: 1.3 !important;
    text-decoration: none !important;
  }

  #header .navigation-in > ul.menu-level-1 > li.ph-mobile-open > a {
    background: #f4f4f2 !important;
  }

  #header .navigation-in > ul.menu-level-1 > li > a .submenu-arrow {
    display: block !important;
    flex: 0 0 auto !important;
    margin: 0 !important;
    transform: none !important;
    transition: none !important;
  }

  #header .navigation-in > ul.menu-level-1 > li.ph-mobile-open > a .submenu-arrow {
    transform: rotate(180deg) !important;
  }

  /* Absolutely all submenus are closed until the user clicks. */
  #header .navigation-in > ul.menu-level-1 > li > 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,
  #header .navigation-in > ul.menu-level-1 > li.active > ul.menu-level-2 {
    position: static !important;
    display: none !important;
    width: 100% !important;
    max-width: none !important;
    max-height: none !important;
    margin: 0 !important;
    padding: 0 !important;
    visibility: visible !important;
    overflow: visible !important;
    border: 0 !important;
    border-top: 1px solid #e3e3e3 !important;
    border-radius: 0 !important;
    background: #fafaf8 !important;
    box-shadow: none !important;
    opacity: 1 !important;
    transform: none !important;
  }

  #header .navigation-in > ul.menu-level-1 > li.ph-mobile-open > ul.menu-level-2 {
    display: block !important;
  }

  /* Plain rolling text list — no cards, no photos, no nested arrows. */
  #header .menu-level-2 > li,
  #header .menu-level-2 > li:hover,
  #header .menu-level-2 > li:focus-within {
    display: block !important;
    width: 100% !important;
    margin: 0 !important;
    padding: 0 !important;
    border: 0 !important;
    border-bottom: 1px solid #e5e5e2 !important;
    border-radius: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
  }

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

  #header .menu-level-2 > li > div,
  #header .menu-level-2 > li > div > a,
  #header .menu-level-2 > li > a {
    display: block !important;
    width: 100% !important;
    min-height: 0 !important;
    margin: 0 !important;
    padding: 0 !important;
    color: #171717 !important;
    text-decoration: none !important;
  }

  #header .menu-level-2 > li > div > a,
  #header .menu-level-2 > li > a {
    padding: 14px 24px 14px 34px !important;
    font-size: 16px !important;
    font-weight: 650 !important;
    line-height: 1.35 !important;
    white-space: normal !important;
    word-break: normal !important;
    overflow-wrap: anywhere !important;
  }

  #header .menu-level-2 > li::before,
  #header .menu-level-2 > li::after,
  #header .menu-level-2 > li > a::before,
  #header .menu-level-2 > li > a::after,
  #header .menu-level-2 > li > div > a::before,
  #header .menu-level-2 > li > div > a::after,
  #header .menu-level-2 > li i,
  #header .menu-level-2 > li [class*="arrow"],
  #header .menu-level-2 > li [class*="chevron"] {
    display: none !important;
    content: none !important;
  }
}

/* ========================================================================== 
   V23 — symmetrical desktop header
   Large logo preserved, search between logo and actions with equal spacing.
   ========================================================================== */

@media (min-width: 901px) {
  #header .header-top,
  #header .header-top-wrapper {
    width: 100% !important;
    max-width: none !important;
  }

  #header .header-top-wrapper {
    position: relative !important;
    display: grid !important;
    grid-template-columns: 410px minmax(360px, 650px) 150px !important;
    align-items: center !important;
    justify-content: space-between !important;
    column-gap: clamp(28px, 3vw, 56px) !important;
    min-height: 152px !important;
    margin: 0 !important;
    padding: 14px clamp(14px, 1.8vw, 28px) !important;
  }

  /* Large logo — same visual scale as before, never reduced by the centre field. */
  #header .header-top-wrapper > .site-name,
  #header .site-name {
    position: static !important;
    grid-column: 1 !important;
    justify-self: start !important;
    align-self: center !important;
    width: 410px !important;
    max-width: 410px !important;
    height: 124px !important;
    margin: 0 !important;
    overflow: visible !important;
    transform: none !important;
  }

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

  #header .site-name a img {
    display: block !important;
    width: 100% !important;
    max-width: 410px !important;
    height: 100% !important;
    max-height: 124px !important;
    margin: 0 !important;
    object-fit: contain !important;
    object-position: left center !important;
    transform: none !important;
  }

  /* Search occupies the middle block and remains visually balanced. */
  #header .header-top-wrapper > .navigation-tools,
  #header .navigation-tools {
    position: static !important;
    display: flex !important;
    grid-column: 2 !important;
    width: 100% !important;
    min-width: 0 !important;
    max-width: 650px !important;
    align-items: center !important;
    justify-content: center !important;
    justify-self: center !important;
    margin: 0 !important;
    transform: none !important;
  }

  .ph-desktop-search {
    display: flex !important;
    width: 100% !important;
    max-width: 650px !important;
    margin: 0 !important;
  }

  .ph-desktop-search__input,
  .ph-desktop-search__button {
    height: 52px !important;
    min-height: 52px !important;
  }

  .ph-desktop-search__button {
    min-width: 112px !important;
    padding-inline: 22px !important;
  }

  /* Fixed action block on the right keeps both surrounding gaps identical. */
  #header .header-top-wrapper > .navigation-buttons,
  #header .navigation-buttons {
    position: static !important;
    display: flex !important;
    grid-column: 3 !important;
    width: 150px !important;
    min-width: 150px !important;
    align-items: center !important;
    justify-content: flex-end !important;
    justify-self: end !important;
    gap: 9px !important;
    margin: 0 !important;
    transform: none !important;
  }
}

/* Slightly narrower desktop previews: keep the logo large and only shorten search. */
@media (min-width: 901px) and (max-width: 1240px) {
  #header .header-top-wrapper {
    grid-template-columns: 350px minmax(300px, 1fr) 138px !important;
    column-gap: 24px !important;
  }

  #header .header-top-wrapper > .site-name,
  #header .site-name {
    width: 350px !important;
    max-width: 350px !important;
    height: 108px !important;
  }

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

  #header .header-top-wrapper > .navigation-buttons,
  #header .navigation-buttons {
    width: 138px !important;
    min-width: 138px !important;
  }
}

/* ========================================================================== 
   V24 — final symmetrical desktop header
   Larger logo, narrower search, equal breathing room on both sides.
   ========================================================================== */

@media (min-width: 901px) {
  #header .header-top-wrapper {
    display: grid !important;
    grid-template-columns: max-content minmax(0, 1fr) max-content !important;
    align-items: center !important;
    justify-content: stretch !important;
    column-gap: clamp(30px, 3vw, 48px) !important;
    min-height: 150px !important;
    padding: 14px clamp(24px, 3vw, 44px) !important;
  }

  /* Logo: slightly larger than V23, anchored firmly to the left. */
  #header .header-top-wrapper > .site-name,
  #header .site-name {
    grid-column: 1 !important;
    justify-self: start !important;
    align-self: center !important;
    width: 460px !important;
    max-width: 34vw !important;
    height: 124px !important;
    margin: 0 !important;
    overflow: visible !important;
  }

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

  #header .site-name a img {
    display: block !important;
    width: 100% !important;
    max-width: 460px !important;
    height: 100% !important;
    max-height: 124px !important;
    margin: 0 !important;
    object-fit: contain !important;
    object-position: left center !important;
    transform: scale(1.06) !important;
    transform-origin: left center !important;
  }

  /* The middle cell is the exact space between logo and icons.
     Centering inside it creates equal visual breathing room on both sides. */
  #header .header-top-wrapper > .navigation-tools,
  #header .navigation-tools {
    grid-column: 2 !important;
    justify-self: stretch !important;
    align-self: center !important;
    display: flex !important;
    width: 100% !important;
    min-width: 0 !important;
    max-width: none !important;
    align-items: center !important;
    justify-content: center !important;
    margin: 0 !important;
  }

  .ph-desktop-search {
    display: flex !important;
    width: min(100%, 540px) !important;
    max-width: 540px !important;
    margin: 0 auto !important;
  }

  .ph-desktop-search__input,
  .ph-desktop-search__button {
    height: 48px !important;
    min-height: 48px !important;
  }

  .ph-desktop-search__button {
    min-width: 104px !important;
    padding-inline: 20px !important;
  }

  #header .header-top-wrapper > .navigation-buttons,
  #header .navigation-buttons {
    grid-column: 3 !important;
    justify-self: end !important;
    align-self: center !important;
    width: auto !important;
    min-width: 146px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: flex-end !important;
    gap: 9px !important;
    margin: 0 !important;
  }
}

@media (min-width: 901px) and (max-width: 1240px) {
  #header .header-top-wrapper {
    column-gap: 26px !important;
    padding-inline: 22px !important;
  }

  #header .header-top-wrapper > .site-name,
  #header .site-name {
    width: 380px !important;
    max-width: 32vw !important;
    height: 108px !important;
  }

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

  .ph-desktop-search {
    width: min(100%, 470px) !important;
    max-width: 470px !important;
  }
}

/* ========================================================================== 
   V25 — definitive desktop header centering and repaired dropdown categories
   ========================================================================== */

@media (min-width: 1101px) {
  /* Header uses a simple left / true centre / right composition. */
  #header .header-top,
  #header .header-top-wrapper {
    width: 100% !important;
    max-width: none !important;
  }

  #header .header-top-wrapper {
    position: relative !important;
    display: flex !important;
    min-height: 150px !important;
    align-items: center !important;
    justify-content: space-between !important;
    gap: 24px !important;
    margin: 0 !important;
    padding: 18px 36px !important;
  }

  /* Slightly larger logo, fully visible and anchored left. */
  #header .header-top-wrapper > .site-name,
  #header .site-name {
    position: relative !important;
    z-index: 2 !important;
    flex: 0 0 310px !important;
    width: 310px !important;
    max-width: 310px !important;
    height: 102px !important;
    margin: 0 !important;
    overflow: visible !important;
    transform: none !important;
  }

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

  #header .site-name a img {
    display: block !important;
    width: 100% !important;
    max-width: 310px !important;
    height: 100% !important;
    max-height: 102px !important;
    margin: 0 !important;
    object-fit: contain !important;
    object-position: left center !important;
    transform: none !important;
  }

  /* True viewport centre — independent from logo and action widths. */
  #header .header-top-wrapper > .navigation-tools,
  #header .navigation-tools {
    position: absolute !important;
    top: 50% !important;
    left: 50% !important;
    z-index: 3 !important;
    display: flex !important;
    width: min(500px, 42vw) !important;
    min-width: 360px !important;
    max-width: 500px !important;
    align-items: center !important;
    justify-content: center !important;
    margin: 0 !important;
    transform: translate(-50%, -50%) !important;
  }

  .ph-desktop-search {
    display: flex !important;
    width: 100% !important;
    max-width: 500px !important;
    margin: 0 !important;
  }

  .ph-desktop-search__input,
  .ph-desktop-search__button {
    height: 48px !important;
    min-height: 48px !important;
  }

  .ph-desktop-search__button {
    min-width: 100px !important;
    padding-inline: 18px !important;
  }

  #header .header-top-wrapper > .navigation-buttons,
  #header .navigation-buttons {
    position: relative !important;
    z-index: 4 !important;
    display: flex !important;
    flex: 0 0 150px !important;
    width: 150px !important;
    min-width: 150px !important;
    align-items: center !important;
    justify-content: flex-end !important;
    gap: 9px !important;
    margin: 0 !important;
    transform: none !important;
  }

  /* The dropdown is one stable full-width panel beneath the navigation. */
  #header .header-bottom-wrapper,
  #header #navigation,
  #header .navigation-in,
  #header .navigation-in.menu,
  #header .navigation-in > ul.menu-level-1 {
    position: relative !important;
  }

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

  #header .navigation-in ul.menu-level-2 {
    position: absolute !important;
    top: 100% !important;
    right: 0 !important;
    left: 0 !important;
    z-index: 120 !important;
    display: none !important;
    width: 100% !important;
    min-width: 100% !important;
    max-width: none !important;
    max-height: 390px !important;
    grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
    grid-auto-rows: minmax(104px, auto) !important;
    gap: 14px 24px !important;
    margin: 0 !important;
    padding: 24px 30px 28px !important;
    overflow-x: hidden !important;
    overflow-y: auto !important;
    border: 0 !important;
    border-top: 3px solid var(--ph-orange) !important;
    border-radius: 0 0 20px 20px !important;
    background: #fff !important;
    box-shadow: 0 18px 36px rgba(0, 0, 0, 0.18) !important;
    transform: none !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,
  #header .navigation-in > ul.menu-level-1 > li.active > ul.menu-level-2 {
    display: grid !important;
  }

  #header .navigation-in ul.menu-level-2 > li {
    display: grid !important;
    min-width: 0 !important;
    grid-template-columns: 96px minmax(0, 1fr) !important;
    align-items: center !important;
    gap: 16px !important;
    margin: 0 !important;
    padding: 8px 12px !important;
    overflow: hidden !important;
    border: 1px solid transparent !important;
    border-radius: 14px !important;
    background: #fff !important;
  }

  #header .navigation-in ul.menu-level-2 > li:hover,
  #header .navigation-in ul.menu-level-2 > li:focus-within {
    border-color: var(--ph-orange) !important;
    background: rgba(246, 185, 0, 0.11) !important;
  }

  #header .navigation-in ul.menu-level-2 > li > .menu-image,
  #header .navigation-in ul.menu-level-2 .menu-image {
    display: flex !important;
    width: 96px !important;
    height: 82px !important;
    grid-column: 1 !important;
    align-items: center !important;
    justify-content: center !important;
    margin: 0 !important;
    padding: 6px !important;
    overflow: hidden !important;
    border-radius: 12px !important;
    background: #f4f4f1 !important;
  }

  #header .navigation-in ul.menu-level-2 .menu-image img {
    display: block !important;
    width: auto !important;
    max-width: 86px !important;
    height: auto !important;
    max-height: 72px !important;
    margin: 0 !important;
    object-fit: contain !important;
  }

  #header .navigation-in ul.menu-level-2 > li > div {
    display: flex !important;
    min-width: 0 !important;
    grid-column: 2 !important;
    align-items: center !important;
  }

  #header .navigation-in ul.menu-level-2 > li > div > a,
  #header .navigation-in ul.menu-level-2 > li > a:not(.menu-image) {
    display: block !important;
    min-width: 0 !important;
    margin: 0 !important;
    padding: 0 !important;
    color: var(--ph-logo-black) !important;
    font-size: 16px !important;
    font-weight: 760 !important;
    line-height: 1.28 !important;
    text-align: left !important;
    text-decoration: none !important;
    white-space: normal !important;
    overflow: visible !important;
    text-overflow: unset !important;
    word-break: normal !important;
    overflow-wrap: anywhere !important;
  }

  #header .navigation-in ul.menu-level-2 > li > div > a span,
  #header .navigation-in ul.menu-level-2 > li > a:not(.menu-image) span {
    color: inherit !important;
    font: inherit !important;
    line-height: inherit !important;
    white-space: normal !important;
    overflow: visible !important;
    text-overflow: unset !important;
  }
}

@media (min-width: 1101px) and (max-width: 1360px) {
  #header .header-top-wrapper {
    padding-inline: 24px !important;
  }

  #header .header-top-wrapper > .site-name,
  #header .site-name {
    flex-basis: 270px !important;
    width: 270px !important;
    max-width: 270px !important;
    height: 92px !important;
  }

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

  #header .header-top-wrapper > .navigation-tools,
  #header .navigation-tools {
    width: min(460px, 40vw) !important;
    min-width: 330px !important;
    max-width: 460px !important;
  }

  .ph-desktop-search {
    max-width: 460px !important;
  }

  #header .navigation-in ul.menu-level-2 {
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
  }
}

/* ========================================================================== 
   V26 — definitive desktop header grid and stable dropdown card layout
   ========================================================================== */

@media (min-width: 901px) {
  /* Header is a true three-column grid: logo | centred search | actions. */
  #header .header-top,
  #header .header-top-wrapper,
  #header .header-top-wrapper.container {
    background: var(--ph-logo-black, #0e1313) !important;
  }

  #header .header-top-wrapper,
  #header .header-top-wrapper.container {
    position: relative !important;
    display: grid !important;
    width: 100% !important;
    max-width: none !important;
    min-height: 138px !important;
    grid-template-columns: minmax(240px, 1fr) minmax(380px, 520px) minmax(240px, 1fr) !important;
    grid-template-rows: 1fr !important;
    align-items: center !important;
    column-gap: 26px !important;
    margin: 0 !important;
    padding: 18px 36px !important;
  }

  #header .header-top-wrapper > .site-name,
  #header .site-name {
    position: static !important;
    display: flex !important;
    width: min(100%, 310px) !important;
    max-width: 310px !important;
    height: auto !important;
    min-height: 0 !important;
    grid-column: 1 !important;
    grid-row: 1 !important;
    align-self: center !important;
    justify-self: start !important;
    margin: 0 !important;
    padding: 0 !important;
    overflow: visible !important;
    transform: none !important;
  }

  #header .site-name a {
    display: flex !important;
    width: 100% !important;
    height: auto !important;
    align-items: center !important;
    justify-content: flex-start !important;
    margin: 0 !important;
    padding: 0 !important;
  }

  #header .site-name a img {
    position: static !important;
    display: block !important;
    width: 100% !important;
    max-width: 310px !important;
    height: auto !important;
    max-height: 104px !important;
    margin: 0 !important;
    object-fit: contain !important;
    object-position: left center !important;
    transform: none !important;
  }

  #header .header-top-wrapper > .navigation-tools,
  #header .navigation-tools {
    position: static !important;
    display: flex !important;
    width: 100% !important;
    min-width: 0 !important;
    max-width: none !important;
    height: auto !important;
    grid-column: 2 !important;
    grid-row: 1 !important;
    align-self: center !important;
    align-items: center !important;
    justify-content: center !important;
    justify-self: stretch !important;
    margin: 0 !important;
    padding: 0 !important;
    transform: none !important;
  }

  #header .ph-desktop-search {
    display: flex !important;
    width: 100% !important;
    max-width: 520px !important;
    height: 48px !important;
    align-items: stretch !important;
    gap: 0 !important;
    margin: 0 auto !important;
  }

  #header .ph-desktop-search__input,
  #header .ph-desktop-search__button {
    height: 48px !important;
    min-height: 48px !important;
  }

  #header .ph-desktop-search__input {
    min-width: 0 !important;
  }

  #header .ph-desktop-search__button {
    flex: 0 0 104px !important;
    min-width: 104px !important;
    padding-inline: 16px !important;
  }

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

  /* Desktop dropdown: one full-width panel with self-contained cards. */
  #header .header-bottom-wrapper,
  #header #navigation,
  #header .navigation-in,
  #header .navigation-in.menu,
  #header .navigation-in > ul.menu-level-1 {
    position: relative !important;
  }

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

  #header .navigation-in ul.menu-level-2 {
    position: absolute !important;
    top: 100% !important;
    right: 0 !important;
    bottom: auto !important;
    left: 0 !important;
    z-index: 150 !important;
    display: none !important;
    width: 100% !important;
    min-width: 100% !important;
    max-width: none !important;
    height: auto !important;
    min-height: 0 !important;
    max-height: none !important;
    grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
    grid-auto-flow: row !important;
    grid-auto-rows: minmax(112px, auto) !important;
    gap: 16px !important;
    columns: initial !important;
    margin: 0 !important;
    padding: 24px !important;
    overflow: visible !important;
    border: 0 !important;
    border-top: 3px solid var(--ph-orange, #f6b900) !important;
    border-radius: 0 0 18px 18px !important;
    background: #fff !important;
    box-shadow: 0 18px 40px rgba(0, 0, 0, 0.18) !important;
    opacity: 1 !important;
    visibility: visible !important;
    transform: none !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,
  #header .navigation-in > ul.menu-level-1 > li.active > ul.menu-level-2 {
    display: grid !important;
  }

  #header .navigation-in ul.menu-level-2 > li {
    position: relative !important;
    top: auto !important;
    right: auto !important;
    bottom: auto !important;
    left: auto !important;
    display: grid !important;
    width: auto !important;
    min-width: 0 !important;
    max-width: none !important;
    height: auto !important;
    min-height: 112px !important;
    max-height: none !important;
    grid-template-columns: 94px minmax(0, 1fr) !important;
    grid-template-rows: 1fr !important;
    align-items: center !important;
    gap: 16px !important;
    float: none !important;
    clear: none !important;
    margin: 0 !important;
    padding: 10px 14px !important;
    overflow: hidden !important;
    border: 1px solid #e2e3e3 !important;
    border-radius: 14px !important;
    background: #fff !important;
    opacity: 1 !important;
    visibility: visible !important;
    transform: none !important;
  }

  #header .navigation-in ul.menu-level-2 > li::before,
  #header .navigation-in ul.menu-level-2 > li::after {
    display: none !important;
    content: none !important;
  }

  #header .navigation-in ul.menu-level-2 > li > a.menu-image,
  #header .navigation-in ul.menu-level-2 .menu-image {
    position: static !important;
    top: auto !important;
    right: auto !important;
    bottom: auto !important;
    left: auto !important;
    display: flex !important;
    width: 94px !important;
    min-width: 94px !important;
    max-width: 94px !important;
    height: 86px !important;
    min-height: 86px !important;
    max-height: 86px !important;
    grid-column: 1 !important;
    grid-row: 1 !important;
    align-items: center !important;
    justify-content: center !important;
    float: none !important;
    margin: 0 !important;
    padding: 7px !important;
    overflow: hidden !important;
    border: 0 !important;
    border-radius: 12px !important;
    background: #f4f4f1 !important;
    opacity: 1 !important;
    visibility: visible !important;
    transform: none !important;
  }

  #header .navigation-in ul.menu-level-2 .menu-image img {
    position: static !important;
    display: block !important;
    width: auto !important;
    max-width: 80px !important;
    height: auto !important;
    max-height: 72px !important;
    margin: 0 !important;
    object-fit: contain !important;
    opacity: 1 !important;
    visibility: visible !important;
    transform: none !important;
  }

  #header .navigation-in ul.menu-level-2 > li > div {
    position: static !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: 0 !important;
    grid-column: 2 !important;
    grid-row: 1 !important;
    align-items: center !important;
    float: none !important;
    margin: 0 !important;
    padding: 0 !important;
    overflow: visible !important;
    opacity: 1 !important;
    visibility: visible !important;
    transform: none !important;
  }

  #header .navigation-in ul.menu-level-2 > li > div > a,
  #header .navigation-in ul.menu-level-2 > li > a:not(.menu-image) {
    position: static !important;
    display: block !important;
    width: 100% !important;
    min-width: 0 !important;
    max-width: none !important;
    height: auto !important;
    margin: 0 !important;
    padding: 0 !important;
    overflow: visible !important;
    color: #171717 !important;
    font-size: 16px !important;
    font-weight: 760 !important;
    line-height: 1.3 !important;
    text-align: left !important;
    text-decoration: none !important;
    white-space: normal !important;
    text-overflow: clip !important;
    overflow-wrap: anywhere !important;
    opacity: 1 !important;
    visibility: visible !important;
    transform: none !important;
  }

  #header .navigation-in ul.menu-level-2 > li > div > a span,
  #header .navigation-in ul.menu-level-2 > li > a:not(.menu-image) span {
    display: inline !important;
    color: inherit !important;
    font: inherit !important;
    line-height: inherit !important;
    white-space: normal !important;
    overflow: visible !important;
    text-overflow: clip !important;
    opacity: 1 !important;
    visibility: visible !important;
  }
}

@media (min-width: 901px) and (max-width: 1180px) {
  #header .header-top-wrapper,
  #header .header-top-wrapper.container {
    grid-template-columns: minmax(210px, 1fr) minmax(340px, 450px) minmax(210px, 1fr) !important;
    column-gap: 18px !important;
    padding-inline: 22px !important;
  }

  #header .header-top-wrapper > .site-name,
  #header .site-name,
  #header .site-name a img {
    max-width: 270px !important;
  }

  #header .navigation-in ul.menu-level-2 {
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
  }
}

/* ========================================================================== 
   V27 — only change: slightly larger desktop logo
   ========================================================================== */
@media (min-width: 901px) {
  #header .header-top-wrapper > .site-name,
  #header .site-name {
    width: min(100%, 335px) !important;
    max-width: 335px !important;
  }

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

@media (min-width: 901px) and (max-width: 1180px) {
  #header .header-top-wrapper > .site-name,
  #header .site-name,
  #header .site-name a img {
    max-width: 290px !important;
  }
}

/* ========================================================================== 
   V28 — only change: desktop logo enlarged by 25% from V27
   ========================================================================== */
@media (min-width: 901px) {
  #header .header-top-wrapper > .site-name,
  #header .site-name {
    width: min(100%, 419px) !important;
    max-width: 419px !important;
  }

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

@media (min-width: 901px) and (max-width: 1180px) {
  #header .header-top-wrapper > .site-name,
  #header .site-name,
  #header .site-name a img {
    max-width: 363px !important;
  }
}

/* ========================================================================== 
   V29 — only change: search field vertically aligned with the logo wordmark
   ========================================================================== */
@media (min-width: 901px) {
  #header .ph-desktop-search {
    transform: translateY(8px) !important;
  }
}

/* ========================================================================== 
   V30 — only change: move the complete desktop header content slightly lower
   while preserving the current relative alignment of logo, search and icons
   ========================================================================== */
@media (min-width: 901px) {
  #header .header-top-wrapper > .site-name,
  #header .header-top-wrapper > .navigation-tools,
  #header .header-top-wrapper > .navigation-buttons {
    transform: translateY(7px) !important;
  }
}

/* ========================================================================== 
   V31 — carousel arrows and mobile navigation usability
   Desktop header/layout from V30 remains unchanged.
   ========================================================================== */

/* Carousel: clean chevrons without circular bubbles. */
.type-index #carousel .carousel-control,
.type-index #carousel .carousel-control.left,
.type-index #carousel .carousel-control.right {
  width: 58px !important;
  height: 82px !important;
  margin-top: -41px !important;
  overflow: visible !important;
  border: 0 !important;
  border-radius: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
  opacity: 1 !important;
}

.type-index #carousel .carousel-control:hover,
.type-index #carousel .carousel-control:focus,
.type-index #carousel .carousel-control:active {
  border: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
}

.type-index #carousel .carousel-control::before {
  position: absolute !important;
  top: 50% !important;
  left: 50% !important;
  display: block !important;
  width: 22px !important;
  height: 22px !important;
  margin: 0 !important;
  border: 0 !important;
  border-bottom: 4px solid #fff !important;
  border-left: 4px solid #fff !important;
  background: transparent !important;
  content: "" !important;
  filter: drop-shadow(0 2px 3px rgba(0, 0, 0, 0.65)) !important;
}

.type-index #carousel .carousel-control.left::before {
  transform: translate(-38%, -50%) rotate(45deg) !important;
}

.type-index #carousel .carousel-control.right::before {
  transform: translate(-62%, -50%) rotate(225deg) !important;
}

@media (max-width: 900px) {
  /* Slightly larger and clearer mobile logo; actions stay in their own column. */
  #header .header-top-wrapper {
    grid-template-columns: minmax(0, 1fr) auto !important;
    gap: 6px !important;
    min-height: 90px !important;
    padding: 9px 9px 9px 11px !important;
  }

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

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

  /* The menu panel itself stays fixed; only its content scrolls. */
  #header .header-bottom,
  body.navigation-window-visible #header .header-bottom,
  .navigation-window-visible #header .header-bottom {
    height: 100vh !important;
    height: 100dvh !important;
    min-height: 0 !important;
    max-height: 100vh !important;
    max-height: 100dvh !important;
    overflow: hidden !important;
  }

  #header .header-bottom-wrapper {
    position: relative !important;
    display: flex !important;
    width: 100% !important;
    height: 100% !important;
    min-height: 0 !important;
    flex-direction: column !important;
    box-sizing: border-box !important;
    padding: 66px 0 0 !important;
    overflow: hidden !important;
  }

  #header #navigation {
    position: relative !important;
    display: block !important;
    width: 100% !important;
    height: auto !important;
    min-height: 0 !important;
    max-height: none !important;
    flex: 1 1 auto !important;
    padding: 0 0 max(96px, calc(72px + env(safe-area-inset-bottom))) !important;
    overflow-x: hidden !important;
    overflow-y: auto !important;
    overscroll-behavior-y: contain !important;
    scroll-padding-top: 10px !important;
    scroll-padding-bottom: 110px !important;
    touch-action: pan-y !important;
    -webkit-overflow-scrolling: touch !important;
  }

  /* Easy-to-reach close button in the menu panel. */
  #header .ph-mobile-menu-close {
    position: absolute !important;
    top: 12px !important;
    right: 14px !important;
    z-index: 20 !important;
    display: inline-flex !important;
    width: 44px !important;
    height: 44px !important;
    align-items: center !important;
    justify-content: center !important;
    margin: 0 !important;
    padding: 0 !important;
    border: 0 !important;
    border-radius: 50% !important;
    background: #f6b900 !important;
    color: #0e1313 !important;
    box-shadow: none !important;
    cursor: pointer !important;
  }

  #header .ph-mobile-menu-close::before,
  #header .ph-mobile-menu-close::after {
    position: absolute !important;
    width: 22px !important;
    height: 2px !important;
    border-radius: 2px !important;
    background: currentColor !important;
    content: "" !important;
  }

  #header .ph-mobile-menu-close::before {
    transform: rotate(45deg) !important;
  }

  #header .ph-mobile-menu-close::after {
    transform: rotate(-45deg) !important;
  }

  /* Main category rows: reserve a fixed right zone and center every arrow. */
  #header .navigation-in > ul.menu-level-1 > li > a {
    position: relative !important;
    display: flex !important;
    width: 100% !important;
    min-height: 58px !important;
    align-items: center !important;
    justify-content: flex-start !important;
    box-sizing: border-box !important;
    padding: 14px 58px 14px 16px !important;
    text-align: left !important;
    white-space: normal !important;
    overflow-wrap: break-word !important;
  }

  #header .navigation-in > ul.menu-level-1 > li > a .submenu-arrow {
    position: absolute !important;
    top: 50% !important;
    right: 8px !important;
    display: flex !important;
    width: 42px !important;
    height: 42px !important;
    align-items: center !important;
    justify-content: center !important;
    margin: 0 !important;
    transform: translateY(-50%) !important;
    transform-origin: center !important;
  }

  #header .navigation-in > ul.menu-level-1 > li.ph-mobile-open > a .submenu-arrow {
    transform: translateY(-50%) rotate(180deg) !important;
  }

  /* Subcategories: consistent row geometry and logical multiline wrapping. */
  #header .menu-level-2 > li,
  #header .menu-level-2 > li:hover,
  #header .menu-level-2 > li:focus-within {
    min-height: 0 !important;
    overflow: visible !important;
  }

  #header .menu-level-2 > li > div {
    display: block !important;
    width: 100% !important;
    min-width: 0 !important;
  }

  #header .menu-level-2 > li > div > a,
  #header .menu-level-2 > li > a:not(.menu-image) {
    display: flex !important;
    width: 100% !important;
    min-width: 0 !important;
    min-height: 56px !important;
    align-items: center !important;
    box-sizing: border-box !important;
    padding: 11px 24px 11px 32px !important;
    font-size: 16px !important;
    font-weight: 650 !important;
    line-height: 1.32 !important;
    text-align: left !important;
    text-indent: 0 !important;
    white-space: normal !important;
    word-break: normal !important;
    overflow-wrap: break-word !important;
    hyphens: auto !important;
  }

  #header .menu-level-2 > li > div > a span,
  #header .menu-level-2 > li > a:not(.menu-image) span {
    display: block !important;
    width: 100% !important;
    min-width: 0 !important;
    line-height: inherit !important;
    text-align: inherit !important;
    white-space: normal !important;
    word-break: normal !important;
    overflow-wrap: break-word !important;
    hyphens: auto !important;
  }

  .type-index #carousel .carousel-control {
    width: 46px !important;
    height: 64px !important;
    margin-top: -32px !important;
  }

  .type-index #carousel .carousel-control::before {
    width: 18px !important;
    height: 18px !important;
    border-bottom-width: 3px !important;
    border-left-width: 3px !important;
  }
}

@media (min-width: 901px) {
  #header .ph-mobile-menu-close {
    display: none !important;
  }
}

/* ========================================================================== 
   V32 — category tiles: keep every long label inside its card
   ========================================================================== */

/* All category cards are allowed to grow with their content. */
body.type-category .subcategories,
body.type-category .subcategories.with-image,
body.type-category .subcategories.seo-subcategories.with-image {
  align-items: stretch !important;
  grid-auto-rows: auto !important;
}

body.type-category .subcategories > li {
  display: flex !important;
  min-width: 0 !important;
  height: auto !important;
  overflow: visible !important;
}

body.type-category .subcategories > li > a {
  flex: 1 1 auto !important;
  width: 100% !important;
  height: auto !important;
  min-width: 0 !important;
  box-sizing: border-box !important;
  overflow: hidden !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: block !important;
  width: 100% !important;
  min-width: 0 !important;
  max-width: 100% !important;
  height: auto !important;
  max-height: none !important;
  overflow: visible !important;
  white-space: normal !important;
  word-break: normal !important;
  overflow-wrap: anywhere !important;
  text-overflow: clip !important;
  -webkit-box-orient: initial !important;
  -webkit-line-clamp: unset !important;
  line-clamp: unset !important;
}

/* Desktop: enough vertical room even for four-line category names. */
@media (min-width: 768px) {
  body.type-category .subcategories > li > a {
    min-height: 136px !important;
    align-content: center !important;
    padding-top: 18px !important;
    padding-bottom: 18px !important;
  }
}

/* Mobile: keep the two-column layout, but let each row grow naturally. */
@media (max-width: 767px) {
  body.type-category .subcategories,
  body.type-category .subcategories.with-image,
  body.type-category .subcategories.seo-subcategories.with-image {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    align-items: stretch !important;
  }

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

  body.type-category .subcategories li a .image {
    display: flex !important;
    width: 72px !important;
    min-width: 72px !important;
    height: 72px !important;
    margin: 0 !important;
  }

  body.type-category .subcategories li a .image img {
    display: block !important;
    max-width: 66px !important;
    max-height: 66px !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: 16px !important;
    font-weight: 750 !important;
    line-height: 1.24 !important;
  }
}

@media (max-width: 390px) {
  body.type-category .subcategories > li > a {
    grid-template-columns: 58px minmax(0, 1fr) !important;
    gap: 9px !important;
    min-height: 108px !important;
    padding: 10px !important;
  }

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

  body.type-category .subcategories li a .image img {
    max-width: 54px !important;
    max-height: 54px !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: 15px !important;
    line-height: 1.22 !important;
  }
}

/* ========================================================================== 
   V33 — banner controls: arrows only, no circles or semicircles
   Everything else remains identical to V32.
   ========================================================================== */
#carousel.carousel .carousel-control,
#carousel.carousel .carousel-control.left,
#carousel.carousel .carousel-control.right,
.carousel-wrapper #carousel .carousel-control {
  position: absolute !important;
  top: 50% !important;
  z-index: 20 !important;
  display: flex !important;
  width: 64px !important;
  height: 96px !important;
  align-items: center !important;
  justify-content: center !important;
  margin: 0 !important;
  padding: 0 !important;
  border: 0 !important;
  border-radius: 0 !important;
  outline: 0 !important;
  background: none !important;
  background-color: transparent !important;
  background-image: none !important;
  box-shadow: none !important;
  opacity: 1 !important;
  overflow: visible !important;
  text-shadow: none !important;
  transform: translateY(-50%) !important;
}

#carousel.carousel .carousel-control.left,
.carousel-wrapper #carousel .carousel-control.left {
  left: 8px !important;
  right: auto !important;
}

#carousel.carousel .carousel-control.right,
.carousel-wrapper #carousel .carousel-control.right {
  right: 8px !important;
  left: auto !important;
}

#carousel.carousel .carousel-control::after,
.carousel-wrapper #carousel .carousel-control::after {
  display: none !important;
  width: 0 !important;
  height: 0 !important;
  border: 0 !important;
  border-radius: 0 !important;
  background: none !important;
  box-shadow: none !important;
  content: none !important;
}

#carousel.carousel .carousel-control::before,
.carousel-wrapper #carousel .carousel-control::before {
  position: static !important;
  display: block !important;
  width: 24px !important;
  height: 24px !important;
  margin: 0 !important;
  border: 0 !important;
  border-top: 4px solid #fff !important;
  border-left: 4px solid #fff !important;
  border-radius: 0 !important;
  background: none !important;
  box-shadow: none !important;
  content: "" !important;
  filter: drop-shadow(0 2px 3px rgba(0, 0, 0, 0.75)) !important;
}

#carousel.carousel .carousel-control.left::before,
.carousel-wrapper #carousel .carousel-control.left::before {
  margin-left: 8px !important;
  transform: rotate(-45deg) !important;
}

#carousel.carousel .carousel-control.right::before,
.carousel-wrapper #carousel .carousel-control.right::before {
  margin-right: 8px !important;
  transform: rotate(135deg) !important;
}

/* Keep the accessible labels, but remove every native visual icon. */
#carousel.carousel .carousel-control > :not(.sr-only),
.carousel-wrapper #carousel .carousel-control > :not(.sr-only) {
  display: none !important;
}

@media (max-width: 767px) {
  #carousel.carousel .carousel-control,
  .carousel-wrapper #carousel .carousel-control {
    width: 48px !important;
    height: 72px !important;
  }

  #carousel.carousel .carousel-control.left,
  .carousel-wrapper #carousel .carousel-control.left {
    left: 2px !important;
  }

  #carousel.carousel .carousel-control.right,
  .carousel-wrapper #carousel .carousel-control.right {
    right: 2px !important;
  }

  #carousel.carousel .carousel-control::before,
  .carousel-wrapper #carousel .carousel-control::before {
    width: 18px !important;
    height: 18px !important;
    border-top-width: 3px !important;
    border-left-width: 3px !important;
  }
}

/* ========================================================================== 
   V35 — checkout button spacing and aligned footer contact block
   Everything else remains identical to V34.
   ========================================================================== */

/* Keep the two checkout actions visually separate on every ordering step. */
body.type-cart .next-step,
body.type-order .next-step,
body.ordering-process .next-step,
body[class*="ordering-process"] .next-step,
body.type-cart .cart-summary .next-step,
body.type-order .cart-summary .next-step {
  gap: 10px !important;
  row-gap: 10px !important;
  column-gap: 10px !important;
}

/* Shoptet stacks the actions on narrow screens. Remove inherited touching
   margins and preserve a clear 10 px space between the buttons. */
@media (max-width: 767px) {
  body.type-cart .next-step,
  body.type-order .next-step,
  body.ordering-process .next-step,
  body[class*="ordering-process"] .next-step,
  body.type-cart .cart-summary .next-step,
  body.type-order .cart-summary .next-step {
    display: flex !important;
    flex-direction: column !important;
    gap: 10px !important;
  }

  body.type-cart .next-step > .btn,
  body.type-cart .next-step > a,
  body.type-cart .next-step > button,
  body.type-order .next-step > .btn,
  body.type-order .next-step > a,
  body.type-order .next-step > button,
  body.ordering-process .next-step > .btn,
  body.ordering-process .next-step > a,
  body.ordering-process .next-step > button,
  body[class*="ordering-process"] .next-step > .btn,
  body[class*="ordering-process"] .next-step > a,
  body[class*="ordering-process"] .next-step > button {
    width: 100% !important;
    margin: 0 !important;
  }
}

/* Align the Kontakt heading and all contact lines to one vertical axis. */
#footer .vc-content_shopinfo > .inner > .header,
#footer .vc-content_shopinfo > .inner > .content {
  box-sizing: border-box !important;
  margin-left: 0 !important;
  padding-left: 16px !important;
  padding-right: 0 !important;
  text-align: left !important;
}

#footer .vc-content_shopinfo > .inner > .content .eshopContact,
#footer .vc-content_shopinfo > .inner > .content .eshopContact .prvni,
#footer .vc-content_shopinfo > .inner > .content .eshopContact .druhy {
  margin-left: 0 !important;
  padding-left: 0 !important;
  text-align: left !important;
}

/* ========================================================================== 
   V36 — matching checkout button typography and highlighted complaint link
   Everything else remains identical to V35.
   ========================================================================== */

/* Both checkout actions use exactly the same typeface, size and weight. */
body.type-cart .next-step > .btn,
body.type-cart .next-step > a,
body.type-cart .next-step > button,
body.type-order .next-step > .btn,
body.type-order .next-step > a,
body.type-order .next-step > button,
body.ordering-process .next-step > .btn,
body.ordering-process .next-step > a,
body.ordering-process .next-step > button,
body[class*="ordering-process"] .next-step > .btn,
body[class*="ordering-process"] .next-step > a,
body[class*="ordering-process"] .next-step > button,
body.type-cart .cart-summary .next-step > .btn,
body.type-cart .cart-summary .next-step > a,
body.type-cart .cart-summary .next-step > button,
body.type-order .cart-summary .next-step > .btn,
body.type-order .cart-summary .next-step > a,
body.type-order .cart-summary .next-step > button {
  font-family: inherit !important;
  font-size: 16px !important;
  font-weight: 800 !important;
  line-height: 1.2 !important;
}

body.type-cart .next-step > .btn span,
body.type-cart .next-step > a span,
body.type-cart .next-step > button span,
body.type-order .next-step > .btn span,
body.type-order .next-step > a span,
body.type-order .next-step > button span,
body.ordering-process .next-step > .btn span,
body.ordering-process .next-step > a span,
body.ordering-process .next-step > button span,
body[class*="ordering-process"] .next-step > .btn span,
body[class*="ordering-process"] .next-step > a span,
body[class*="ordering-process"] .next-step > button span {
  font-family: inherit !important;
  font-size: inherit !important;
  font-weight: inherit !important;
  line-height: inherit !important;
}

/* The former “Reklamace/Vrácení/Problém” link is shortened and highlighted. */
a.ph-complaint-link,
#footer #menuarticles a.ph-complaint-link,
.ph-legacy-footer a.ph-complaint-link {
  color: var(--ph-orange, #f6b900) !important;
  font-weight: 800 !important;
  text-decoration: none !important;
}

a.ph-complaint-link:hover,
a.ph-complaint-link:focus,
#footer #menuarticles a.ph-complaint-link:hover,
#footer #menuarticles a.ph-complaint-link:focus {
  color: #ffc928 !important;
  text-decoration: underline !important;
}

/* ========================================================================== 
   V37 — restore the homepage Novinky group to four products in one row
   No other area is changed.
   ========================================================================== */

/* Desktop and Shoptet desktop preview: exactly four equal columns. */
@media (min-width: 768px) {
  html body.type-index .products-wrapper[data-editorid="homepageProductGroup-2"],
  html body.desktop.type-index .products-wrapper[data-editorid="homepageProductGroup-2"] {
    display: block !important;
    width: min(calc(100% - 32px), 1320px) !important;
    max-width: 1320px !important;
    margin-right: auto !important;
    margin-left: auto !important;
    overflow: visible !important;
  }

  html body.type-index #products-2,
  html body.type-index #products-2.product-slider,
  html body.type-index #products-2.ph-product-grid,
  html body.desktop.type-index #products-2 {
    position: static !important;
    display: grid !important;
    width: 100% !important;
    max-width: none !important;
    height: auto !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;
    margin: 0 !important;
    padding: 0 !important;
    overflow: visible !important;
    white-space: normal !important;
    transform: none !important;
  }

  html body.type-index #products-2 > .slick-list,
  html body.type-index #products-2 > .slick-list > .slick-track,
  html body.type-index #products-2 .slick-list,
  html body.type-index #products-2 .slick-track {
    display: contents !important;
    width: auto !important;
    height: auto !important;
    margin: 0 !important;
    padding: 0 !important;
    transform: none !important;
  }

  html body.type-index #products-2 .product,
  html body.type-index #products-2 > .product,
  html body.type-index #products-2 > .product.active,
  html body.type-index #products-2 .slick-slide.product {
    position: relative !important;
    inset: 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;
    grid-column: auto !important;
    grid-row: auto !important;
    margin: 0 !important;
    padding: 0 !important;
    opacity: 1 !important;
    visibility: visible !important;
    transform: none !important;
  }
}

/* Real phones keep the established tidy 2 × 2 layout. */
@media (max-width: 767px) {
  html body:not(.desktop).type-index #products-2,
  html body:not(.desktop).type-index #products-2.product-slider,
  html body:not(.desktop).type-index #products-2.ph-product-grid {
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  }
}

/* ========================================================================== 
   V38 — product variants displayed as individual outlined choices
   Everything else remains identical to V37.
   ========================================================================== */

/* Turn size, colour and type values below product cards into separate,
   clearly readable choices instead of one continuous line of text. */
.product .widget-parameter-wrapper,
.products .widget-parameter-wrapper,
.p-bottom .widget-parameter-wrapper {
  width: 100% !important;
  margin: 16px 0 6px !important;
  padding: 0 !important;
}

.product .widget-parameter-list,
.products .widget-parameter-list,
.p-bottom .widget-parameter-list {
  display: flex !important;
  flex-wrap: wrap !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 8px !important;
  width: 100% !important;
  margin: 0 !important;
  padding: 0 !important;
  list-style: none !important;
}

.product .widget-parameter-value,
.products .widget-parameter-value,
.p-bottom .widget-parameter-value {
  display: block !important;
  flex: 0 0 auto !important;
  width: auto !important;
  margin: 0 !important;
  padding: 0 !important;
  list-style: none !important;
}

.product .widget-parameter-value > a,
.products .widget-parameter-value > a,
.p-bottom .widget-parameter-value > a {
  box-sizing: border-box !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  min-width: 44px !important;
  min-height: 36px !important;
  padding: 7px 12px !important;
  border: 1px solid #cfcfcf !important;
  border-radius: 7px !important;
  background: #fff !important;
  color: #111 !important;
  font-size: 14px !important;
  font-weight: 700 !important;
  line-height: 1.15 !important;
  text-align: center !important;
  text-decoration: none !important;
  white-space: nowrap !important;
  overflow-wrap: normal !important;
  word-break: keep-all !important;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.04) !important;
  transition: border-color 0.18s ease, background-color 0.18s ease,
    box-shadow 0.18s ease, transform 0.18s ease !important;
}

.product .widget-parameter-value > a:hover,
.product .widget-parameter-value > a:focus-visible,
.products .widget-parameter-value > a:hover,
.products .widget-parameter-value > a:focus-visible,
.p-bottom .widget-parameter-value > a:hover,
.p-bottom .widget-parameter-value > a:focus-visible {
  border-color: var(--ph-orange, #f6b900) !important;
  background: #fff8d9 !important;
  color: #111 !important;
  box-shadow: 0 3px 10px rgba(246, 185, 0, 0.2) !important;
  transform: translateY(-1px) !important;
  outline: none !important;
}

/* Keep Shoptet's “+ další” indicator visually consistent with the choices. */
.product .widget-parameter-more,
.products .widget-parameter-more,
.p-bottom .widget-parameter-more {
  display: flex !important;
  justify-content: center !important;
  margin: 8px 0 0 !important;
}

.product .widget-parameter-more > span,
.products .widget-parameter-more > span,
.p-bottom .widget-parameter-more > span {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  min-height: 32px !important;
  padding: 5px 11px !important;
  border: 1px dashed #b8b8b8 !important;
  border-radius: 7px !important;
  background: #f7f7f7 !important;
  color: #333 !important;
  font-size: 13px !important;
  font-weight: 700 !important;
  line-height: 1.1 !important;
}

@media (max-width: 767px) {
  .product .widget-parameter-list,
  .products .widget-parameter-list,
  .p-bottom .widget-parameter-list {
    gap: 6px !important;
  }

  .product .widget-parameter-value > a,
  .products .widget-parameter-value > a,
  .p-bottom .widget-parameter-value > a {
    min-width: 40px !important;
    min-height: 34px !important;
    padding: 6px 10px !important;
    font-size: 13px !important;
  }
}

/* ========================================================================== 
   V39 — compact outlined product variants
   Keep the simple border, but show only one tidy row below listing cards.
   Product detail and every other area remain unchanged.
   ========================================================================== */

/* Undo the oversized V38 layout only inside product listing cards. */
body:not(.type-detail) .products .product .widget-parameter-wrapper,
body:not(.type-detail) .product-slider .product .widget-parameter-wrapper,
body:not(.type-detail) .products-block .product .widget-parameter-wrapper {
  box-sizing: border-box !important;
  width: 100% !important;
  margin: 10px 0 5px !important;
  padding: 0 !important;
  overflow: hidden !important;
}

body:not(.type-detail) .products .product .widget-parameter-list,
body:not(.type-detail) .product-slider .product .widget-parameter-list,
body:not(.type-detail) .products-block .product .widget-parameter-list {
  display: flex !important;
  flex-wrap: wrap !important;
  align-items: center !important;
  justify-content: center !important;
  align-content: flex-start !important;
  gap: 5px !important;
  width: 100% !important;
  max-width: 100% !important;
  height: 30px !important;
  max-height: 30px !important;
  margin: 0 !important;
  padding: 0 !important;
  overflow: hidden !important;
  list-style: none !important;
}

body:not(.type-detail) .products .product .widget-parameter-value,
body:not(.type-detail) .product-slider .product .widget-parameter-value,
body:not(.type-detail) .products-block .product .widget-parameter-value {
  display: block !important;
  flex: 0 0 auto !important;
  width: auto !important;
  max-width: 100% !important;
  height: 30px !important;
  margin: 0 !important;
  padding: 0 !important;
  overflow: hidden !important;
}

body:not(.type-detail) .products .product .widget-parameter-value > a,
body:not(.type-detail) .product-slider .product .widget-parameter-value > a,
body:not(.type-detail) .products-block .product .widget-parameter-value > a {
  box-sizing: border-box !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: auto !important;
  min-width: 34px !important;
  max-width: 120px !important;
  height: 30px !important;
  min-height: 30px !important;
  padding: 4px 8px !important;
  border: 1px solid #bfc3c7 !important;
  border-radius: 5px !important;
  background: #fff !important;
  color: #151515 !important;
  font-size: 12px !important;
  font-weight: 700 !important;
  line-height: 1 !important;
  text-align: center !important;
  text-decoration: none !important;
  white-space: nowrap !important;
  text-overflow: ellipsis !important;
  overflow: hidden !important;
  box-shadow: none !important;
  transform: none !important;
}

/* The one visible row is enough; do not add a second “more” badge below it. */
body:not(.type-detail) .products .product .widget-parameter-more,
body:not(.type-detail) .product-slider .product .widget-parameter-more,
body:not(.type-detail) .products-block .product .widget-parameter-more {
  display: none !important;
}

@media (max-width: 767px) {
  body:not(.type-detail) .products .product .widget-parameter-list,
  body:not(.type-detail) .product-slider .product .widget-parameter-list,
  body:not(.type-detail) .products-block .product .widget-parameter-list {
    gap: 4px !important;
    height: 28px !important;
    max-height: 28px !important;
  }

  body:not(.type-detail) .products .product .widget-parameter-value,
  body:not(.type-detail) .product-slider .product .widget-parameter-value,
  body:not(.type-detail) .products-block .product .widget-parameter-value,
  body:not(.type-detail) .products .product .widget-parameter-value > a,
  body:not(.type-detail) .product-slider .product .widget-parameter-value > a,
  body:not(.type-detail) .products-block .product .widget-parameter-value > a {
    height: 28px !important;
    min-height: 28px !important;
  }

  body:not(.type-detail) .products .product .widget-parameter-value > a,
  body:not(.type-detail) .product-slider .product .widget-parameter-value > a,
  body:not(.type-detail) .products-block .product .widget-parameter-value > a {
    min-width: 31px !important;
    max-width: 92px !important;
    padding: 3px 7px !important;
    font-size: 11px !important;
  }
}

/* ========================================================================== 
   V40 — center the homepage middle banner
   Only the banner position is changed; all V39 styling remains untouched.
   ========================================================================== */
.type-index .homepage-banners-full-width.middle-banners,
.type-index .middle-banners {
  box-sizing: border-box !important;
  width: 100% !important;
  max-width: none !important;
  margin-right: auto !important;
  margin-left: auto !important;
  float: none !important;
  clear: both !important;
}

.type-index .middle-banners .banners-content,
.type-index .middle-banners .body-banners,
.type-index .middle-banners .banner-wrapper,
.type-index .middle-banners .banner-wrapper > span {
  box-sizing: border-box !important;
  display: flex !important;
  width: 100% !important;
  max-width: 100% !important;
  align-items: center !important;
  justify-content: center !important;
  margin-right: auto !important;
  margin-left: auto !important;
  padding-right: 0 !important;
  padding-left: 0 !important;
  float: none !important;
  clear: both !important;
  text-align: center !important;
  transform: none !important;
}

.type-index .middle-banners .banner-wrapper img,
.type-index .middle-banners .banners-content img,
.type-index .middle-banners .body-banners img {
  box-sizing: border-box !important;
  display: block !important;
  width: auto !important;
  max-width: 100% !important;
  height: auto !important;
  margin-right: auto !important;
  margin-left: auto !important;
  float: none !important;
  object-position: center center !important;
  transform: none !important;
}

/* ========================================================================== 
   V41 — align price, variants, availability and action in homepage Novinky
   Only the desktop #products-2 card footer is changed.
   ========================================================================== */
@media (min-width: 768px) {
  /* Keep every card footer as one predictable vertical stack. */
  html body.type-index #products-2 .p-bottom {
    box-sizing: border-box !important;
    display: flex !important;
    min-height: 184px !important;
    flex: 0 0 auto !important;
    flex-direction: column !important;
    align-items: stretch !important;
    justify-content: flex-start !important;
    margin-top: auto !important;
    padding-top: 14px !important;
  }

  /* Shoptet's offer wrapper contains both the price and optional variants. */
  html body.type-index #products-2 .p-bottom > div[data-micro="offer"] {
    box-sizing: border-box !important;
    display: block !important;
    width: 100% !important;
    min-width: 0 !important;
    margin: 0 !important;
    padding: 0 !important;
  }

  /* Reserve the same space for price + one variant row on every product.
     Products without variants simply keep the second row empty, so all
     following elements remain on the same horizontal line. */
  html body.type-index #products-2 .prices {
    box-sizing: border-box !important;
    display: flex !important;
    width: 100% !important;
    min-height: 92px !important;
    flex-direction: column !important;
    align-items: center !important;
    justify-content: flex-start !important;
    margin: 0 !important;
    padding: 0 !important;
    text-align: center !important;
  }

  html body.type-index #products-2 .price-additional,
  html body.type-index #products-2 .price,
  html body.type-index #products-2 .price strong {
    width: 100% !important;
    text-align: center !important;
  }

  html body.type-index #products-2 .prices .widget-parameter-wrapper {
    box-sizing: border-box !important;
    width: 100% !important;
    height: 30px !important;
    min-height: 30px !important;
    margin: auto 0 0 !important;
    padding: 0 !important;
    overflow: hidden !important;
  }

  html body.type-index #products-2 .prices .widget-parameter-list {
    align-items: center !important;
    justify-content: center !important;
    margin: 0 auto !important;
  }

  html body.type-index #products-2 .availability {
    box-sizing: border-box !important;
    display: flex !important;
    width: 100% !important;
    min-height: 22px !important;
    align-items: center !important;
    justify-content: center !important;
    margin: 7px 0 0 !important;
    padding: 0 !important;
    text-align: center !important;
  }

  html body.type-index #products-2 .p-tools {
    display: flex !important;
    width: 100% !important;
    min-height: 42px !important;
    align-items: center !important;
    justify-content: center !important;
    align-self: center !important;
    margin: 9px 0 0 !important;
    padding: 0 !important;
    text-align: center !important;
  }

  html body.type-index #products-2 .p-tools form {
    display: flex !important;
    justify-content: center !important;
    margin: 0 !important;
  }

  html body.type-index #products-2 .p-tools .btn,
  html body.type-index #products-2 .p-tools button {
    display: inline-flex !important;
    min-width: 112px !important;
    min-height: 42px !important;
    align-items: center !important;
    justify-content: center !important;
    margin: 0 auto !important;
  }
}

/* ========================================================================== 
   V42 — homepage Novinky: action first, variants underneath
   On desktop, price/availability keep a fixed rhythm, the Detail/Cart action
   is aligned across all four cards, and optional sizes appear below it.
   ========================================================================== */
@media (min-width: 768px) {
  html body.type-index #products-2 .p-bottom {
    min-height: 176px !important;
  }

  html body.type-index #products-2 .p-bottom > div[data-micro="offer"] {
    display: flex !important;
    width: 100% !important;
    min-height: 162px !important;
    flex-direction: column !important;
    align-items: stretch !important;
    justify-content: flex-start !important;
  }

  /* Remove only the visual wrapper. Its children can then be ordered together
     with availability and the action button in one common vertical stack. */
  html body.type-index #products-2 .prices {
    display: contents !important;
    min-height: 0 !important;
  }

  html body.type-index #products-2 .price-additional {
    order: 10 !important;
    min-height: 18px !important;
    margin: 0 !important;
  }

  html body.type-index #products-2 .price {
    order: 20 !important;
    min-height: 31px !important;
    margin: 0 !important;
  }

  html body.type-index #products-2 .availability {
    order: 30 !important;
    min-height: 22px !important;
    margin: 4px 0 0 !important;
  }

  html body.type-index #products-2 .ratings-wrapper {
    order: 35 !important;
    min-height: 0 !important;
    margin: 0 !important;
  }

  /* Detail and Do košíku now occupy the same row in every product card. */
  html body.type-index #products-2 .p-tools {
    order: 40 !important;
    min-height: 42px !important;
    margin: 7px 0 0 !important;
  }

  /* Optional sizes follow the action instead of pushing it down. */
  html body.type-index #products-2 .widget-parameter-wrapper,
  html body.type-index #products-2 .prices .widget-parameter-wrapper {
    box-sizing: border-box !important;
    order: 50 !important;
    width: 100% !important;
    height: 30px !important;
    min-height: 30px !important;
    margin: 10px 0 0 !important;
    padding: 0 !important;
    overflow: hidden !important;
  }

  html body.type-index #products-2 .widget-parameter-list {
    align-items: center !important;
    justify-content: center !important;
    margin: 0 auto !important;
  }
}

/* ========================================================================== 
   V43 — homepage Novinky: exact vertical alignment across all four cards
   Only the desktop title area, separator, price block and action row change.
   ========================================================================== */
@media (min-width: 768px) {
  /* Give every product title exactly the same space. This keeps the separator
     line in one horizontal row even when one title uses three lines. */
  html body.type-index #products-2 .p-in {
    display: grid !important;
    grid-template-rows: 94px 176px !important;
    min-height: 270px !important;
    height: 270px !important;
    flex: 0 0 270px !important;
    align-content: stretch !important;
  }

  html body.type-index #products-2 .p-in-in {
    box-sizing: border-box !important;
    display: block !important;
    width: 100% !important;
    height: 94px !important;
    min-height: 94px !important;
    max-height: 94px !important;
    margin: 0 !important;
    padding: 0 !important;
    overflow: hidden !important;
  }

  html body.type-index #products-2 .name {
    display: -webkit-box !important;
    width: 100% !important;
    height: 64px !important;
    min-height: 64px !important;
    max-height: 64px !important;
    margin: 0 !important;
    padding: 0 !important;
    overflow: hidden !important;
    line-height: 1.42 !important;
    -webkit-box-orient: vertical !important;
    -webkit-line-clamp: 3 !important;
  }

  /* Fix the footer to one common height so prices and action buttons cannot
     move according to the length of the product name. */
  html body.type-index #products-2 .p-bottom {
    box-sizing: border-box !important;
    display: flex !important;
    width: 100% !important;
    height: 176px !important;
    min-height: 176px !important;
    max-height: 176px !important;
    flex: 0 0 176px !important;
    margin: 0 !important;
    padding: 14px 0 0 !important;
    border-top: 1px solid var(--ph-border) !important;
  }

  html body.type-index #products-2 .p-bottom > div[data-micro="offer"] {
    box-sizing: border-box !important;
    display: flex !important;
    width: 100% !important;
    height: 161px !important;
    min-height: 161px !important;
    max-height: 161px !important;
    flex-direction: column !important;
    align-items: stretch !important;
    justify-content: flex-start !important;
    margin: 0 !important;
    padding: 0 !important;
  }

  html body.type-index #products-2 .price-additional {
    height: 18px !important;
    min-height: 18px !important;
    max-height: 18px !important;
    line-height: 18px !important;
  }

  html body.type-index #products-2 .price {
    height: 31px !important;
    min-height: 31px !important;
    max-height: 31px !important;
    line-height: 31px !important;
  }

  html body.type-index #products-2 .price strong {
    line-height: 31px !important;
  }

  html body.type-index #products-2 .availability {
    height: 22px !important;
    min-height: 22px !important;
    max-height: 22px !important;
  }

  html body.type-index #products-2 .p-tools {
    height: 42px !important;
    min-height: 42px !important;
    max-height: 42px !important;
    flex: 0 0 42px !important;
  }
}

/* ========================================================================== 
   V44 — mobile homepage header and hero match the compact dark reference
   Desktop and all non-homepage layouts remain unchanged.
   ========================================================================== */
@media (max-width: 767px) {
  body.type-index #header,
  body.type-index #header .header-top,
  body.type-index #header .header-top-wrapper,
  body.type-index #header .navigation-wrapper {
    background: #0e1313 !important;
  }

  body.type-index #header .header-top-wrapper,
  body.type-index #header .header-top-wrapper.container {
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) auto !important;
    align-items: center !important;
    gap: 8px !important;
    width: 100% !important;
    min-height: 112px !important;
    margin: 0 !important;
    padding: 14px 14px 12px 18px !important;
    box-sizing: border-box !important;
  }

  body.type-index #header .header-top-wrapper > .site-name,
  body.type-index #header .site-name {
    position: static !important;
    display: flex !important;
    width: min(235px, 54vw) !important;
    max-width: 235px !important;
    height: 76px !important;
    align-items: center !important;
    justify-content: flex-start !important;
    margin: 0 !important;
    padding: 0 !important;
    background: transparent !important;
    transform: none !important;
  }

  body.type-index #header .site-name a {
    display: flex !important;
    width: 100% !important;
    height: 100% !important;
    align-items: center !important;
    justify-content: flex-start !important;
    margin: 0 !important;
    padding: 0 !important;
    background: transparent !important;
  }

  body.type-index #header .site-name a img {
    display: block !important;
    width: auto !important;
    max-width: 100% !important;
    height: auto !important;
    max-height: 72px !important;
    margin: 0 !important;
    padding: 0 !important;
    background: transparent !important;
    object-fit: contain !important;
    object-position: left center !important;
    transform: none !important;
  }

  body.type-index #header .navigation-buttons {
    position: static !important;
    display: flex !important;
    width: auto !important;
    align-items: center !important;
    justify-content: flex-end !important;
    gap: 8px !important;
    margin: 0 !important;
    padding: 0 !important;
    transform: none !important;
  }

  body.type-index #header .navigation-buttons > a,
  body.type-index #header .navigation-buttons > button,
  body.type-index #header .navigation-buttons .top-nav-button {
    width: 42px !important;
    min-width: 42px !important;
    height: 42px !important;
    min-height: 42px !important;
    margin: 0 !important;
    color: #fff !important;
  }

  body.type-index #header .navigation-buttons .top-nav-button-login {
    display: flex !important;
  }

  body.type-index #header .navigation-buttons .top-nav-button-cart,
  body.type-index #header .navigation-buttons .cart-count {
    background: #f6b900 !important;
    color: #0e1313 !important;
  }

  body.type-index .carousel-wrapper,
  body.type-index .wide-carousel,
  body.type-index #carousel {
    width: calc(100% - 20px) !important;
    max-width: none !important;
    margin: 0 10px !important;
    border: 3px solid #f6d900 !important;
    background: #0e1313 !important;
    box-sizing: border-box !important;
    overflow: hidden !important;
  }

  body.type-index #carousel .carousel-inner,
  body.type-index #carousel .carousel-inner > .item,
  body.type-index #carousel .carousel-inner > .item.active {
    width: 100% !important;
    height: auto !important;
    min-height: 325px !important;
    max-height: 390px !important;
    aspect-ratio: 4 / 3 !important;
    overflow: hidden !important;
    background: #111 !important;
  }

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

  body.type-index #carousel .extended-banner-texts:not(:empty) {
    position: absolute !important;
    top: auto !important;
    right: 0 !important;
    bottom: 0 !important;
    left: 0 !important;
    z-index: 8 !important;
    display: flex !important;
    width: 100% !important;
    min-height: 48% !important;
    max-height: 66% !important;
    flex-direction: column !important;
    align-items: flex-start !important;
    justify-content: center !important;
    gap: 12px !important;
    margin: 0 !important;
    padding: 28px 44px 30px !important;
    border: 0 !important;
    border-radius: 0 !important;
    background: linear-gradient(90deg, rgba(12, 12, 12, .94) 0%, rgba(12, 12, 12, .82) 68%, rgba(12, 12, 12, .54) 100%) !important;
    box-shadow: none !important;
    box-sizing: border-box !important;
    color: #fff !important;
    text-align: left !important;
    transform: none !important;
    overflow: hidden !important;
  }

  body.type-index #carousel .extended-banner-title {
    font-size: clamp(28px, 8vw, 40px) !important;
    font-weight: 850 !important;
    line-height: 1.05 !important;
    letter-spacing: -.035em !important;
    text-align: left !important;
    white-space: normal !important;
  }

  body.type-index #carousel .extended-banner-title::before {
    width: 56px !important;
    height: 4px !important;
    margin: 0 0 14px !important;
    background: #f6b900 !important;
  }

  body.type-index #carousel .extended-banner-text {
    font-size: 18px !important;
    font-weight: 700 !important;
    line-height: 1.35 !important;
    text-align: left !important;
    white-space: normal !important;
  }

  body.type-index #carousel .carousel-control,
  body.type-index .carousel-wrapper #carousel .carousel-control {
    top: 64% !important;
    z-index: 12 !important;
    width: 44px !important;
    height: 72px !important;
    margin: 0 !important;
    transform: translateY(-50%) !important;
  }

  body.type-index #carousel .carousel-control.left,
  body.type-index .carousel-wrapper #carousel .carousel-control.left {
    left: 4px !important;
  }

  body.type-index #carousel .carousel-control.right,
  body.type-index .carousel-wrapper #carousel .carousel-control.right {
    right: 4px !important;
  }

  body.type-index #carousel .carousel-control::before,
  body.type-index .carousel-wrapper #carousel .carousel-control::before {
    width: 20px !important;
    height: 20px !important;
    border-top-width: 4px !important;
    border-left-width: 4px !important;
  }
}

/* ========================================================================== 
   V45 — full-width mobile hero + complete, aligned Novinky card footers
   Only the mobile homepage carousel and homepage Novinky cards are changed.
   ========================================================================== */

/* Mobile homepage: break the hero out of inherited inner gutters, remove the
   nested yellow frames and keep one clean border around the actual carousel. */
@media (max-width: 767px) {
  html body.type-index .carousel-wrapper {
    box-sizing: border-box !important;
    width: calc(100vw - 20px) !important;
    max-width: calc(100vw - 20px) !important;
    margin-right: calc(50% - 50vw + 10px) !important;
    margin-left: calc(50% - 50vw + 10px) !important;
    padding: 0 !important;
    border: 0 !important;
    background: transparent !important;
    overflow: visible !important;
  }

  html body.type-index .carousel-wrapper > .row,
  html body.type-index .carousel-wrapper .wide-carousel {
    box-sizing: border-box !important;
    width: 100% !important;
    max-width: 100% !important;
    margin: 0 !important;
    padding: 0 !important;
    border: 0 !important;
    background: transparent !important;
    overflow: visible !important;
  }

  html body.type-index #carousel {
    box-sizing: border-box !important;
    width: 100% !important;
    max-width: 100% !important;
    margin: 0 !important;
    border: 3px solid #f6d900 !important;
    background: #0e1313 !important;
    overflow: hidden !important;
  }
}

/* Desktop Novinky: make the footer tall enough for the action and one full
   size row. All cards keep the same title, price and action baselines. */
@media (min-width: 768px) {
  html body.type-index #products-2 .p-in {
    display: grid !important;
    grid-template-rows: 94px 220px !important;
    min-height: 314px !important;
    height: 314px !important;
    flex: 0 0 314px !important;
    align-content: stretch !important;
  }

  html body.type-index #products-2 .p-bottom {
    box-sizing: border-box !important;
    display: flex !important;
    width: 100% !important;
    height: 220px !important;
    min-height: 220px !important;
    max-height: 220px !important;
    flex: 0 0 220px !important;
    margin: 0 !important;
    padding: 14px 0 10px !important;
    border-top: 1px solid var(--ph-border) !important;
    overflow: visible !important;
  }

  html body.type-index #products-2 .p-bottom > div[data-micro="offer"] {
    box-sizing: border-box !important;
    display: flex !important;
    width: 100% !important;
    height: 196px !important;
    min-height: 196px !important;
    max-height: 196px !important;
    flex-direction: column !important;
    align-items: stretch !important;
    justify-content: flex-start !important;
    margin: 0 !important;
    padding: 0 !important;
    overflow: visible !important;
  }

  html body.type-index #products-2 .widget-parameter-wrapper,
  html body.type-index #products-2 .prices .widget-parameter-wrapper {
    box-sizing: border-box !important;
    order: 50 !important;
    width: 100% !important;
    height: 30px !important;
    min-height: 30px !important;
    max-height: 30px !important;
    flex: 0 0 30px !important;
    margin: 12px 0 0 !important;
    padding: 0 !important;
    overflow: hidden !important;
  }

  html body.type-index #products-2 .widget-parameter-list {
    height: 30px !important;
    min-height: 30px !important;
    max-height: 30px !important;
    align-items: center !important;
    justify-content: center !important;
    margin: 0 auto !important;
    overflow: hidden !important;
  }
}

/* Phones: reserve the same footer height on cards with and without variants.
   This puts prices in one row and prevents cards with sizes from pulling their
   price upward or clipping the last row. */
@media (max-width: 767px) {
  html body.type-index #products-2 .p-in {
    box-sizing: border-box !important;
    display: grid !important;
    grid-template-rows: 84px 210px !important;
    min-height: 294px !important;
    height: 294px !important;
    flex: 0 0 294px !important;
    align-content: stretch !important;
    padding: 12px !important;
  }

  html body.type-index #products-2 .p-in-in {
    box-sizing: border-box !important;
    display: block !important;
    width: 100% !important;
    height: 84px !important;
    min-height: 84px !important;
    max-height: 84px !important;
    margin: 0 !important;
    padding: 0 !important;
    overflow: hidden !important;
  }

  html body.type-index #products-2 .name {
    display: -webkit-box !important;
    width: 100% !important;
    height: 62px !important;
    min-height: 62px !important;
    max-height: 62px !important;
    margin: 0 !important;
    padding: 0 !important;
    overflow: hidden !important;
    line-height: 1.38 !important;
    -webkit-box-orient: vertical !important;
    -webkit-line-clamp: 3 !important;
  }

  html body.type-index #products-2 .p-bottom {
    box-sizing: border-box !important;
    display: flex !important;
    width: 100% !important;
    height: 210px !important;
    min-height: 210px !important;
    max-height: 210px !important;
    flex: 0 0 210px !important;
    margin: 0 !important;
    padding: 10px 0 6px !important;
    border-top: 1px solid var(--ph-border) !important;
    overflow: visible !important;
  }

  html body.type-index #products-2 .p-bottom > div[data-micro="offer"] {
    box-sizing: border-box !important;
    display: flex !important;
    width: 100% !important;
    height: 194px !important;
    min-height: 194px !important;
    max-height: 194px !important;
    flex-direction: column !important;
    align-items: stretch !important;
    justify-content: flex-start !important;
    margin: 0 !important;
    padding: 0 !important;
    overflow: visible !important;
  }

  html body.type-index #products-2 .prices {
    display: contents !important;
    min-height: 0 !important;
  }

  html body.type-index #products-2 .price-additional {
    order: 10 !important;
    width: 100% !important;
    height: 18px !important;
    min-height: 18px !important;
    max-height: 18px !important;
    margin: 0 !important;
    line-height: 18px !important;
    text-align: center !important;
  }

  html body.type-index #products-2 .price {
    order: 20 !important;
    width: 100% !important;
    height: 31px !important;
    min-height: 31px !important;
    max-height: 31px !important;
    margin: 0 !important;
    line-height: 31px !important;
    text-align: center !important;
  }

  html body.type-index #products-2 .price strong {
    line-height: 31px !important;
    text-align: center !important;
  }

  html body.type-index #products-2 .availability {
    order: 30 !important;
    width: 100% !important;
    height: 22px !important;
    min-height: 22px !important;
    max-height: 22px !important;
    margin: 4px 0 0 !important;
    text-align: center !important;
  }

  html body.type-index #products-2 .ratings-wrapper {
    order: 35 !important;
    min-height: 0 !important;
    margin: 0 !important;
  }

  html body.type-index #products-2 .p-tools {
    order: 40 !important;
    display: flex !important;
    width: 100% !important;
    height: 42px !important;
    min-height: 42px !important;
    max-height: 42px !important;
    flex: 0 0 42px !important;
    align-items: center !important;
    justify-content: center !important;
    margin: 7px 0 0 !important;
  }

  html body.type-index #products-2 .widget-parameter-wrapper,
  html body.type-index #products-2 .prices .widget-parameter-wrapper {
    box-sizing: border-box !important;
    order: 50 !important;
    width: 100% !important;
    height: 28px !important;
    min-height: 28px !important;
    max-height: 28px !important;
    flex: 0 0 28px !important;
    margin: 10px 0 0 !important;
    padding: 0 !important;
    overflow: hidden !important;
  }

  html body.type-index #products-2 .widget-parameter-list {
    height: 28px !important;
    min-height: 28px !important;
    max-height: 28px !important;
    align-items: center !important;
    justify-content: center !important;
    margin: 0 auto !important;
    overflow: hidden !important;
  }
}

/* ========================================================================== 
   V46 — mobile header background, full Novinky titles and safer logo spacing
   Desktop remains identical to V45.
   ========================================================================== */
@media (max-width: 767px) {
  /* Any free area above the mobile header inherits the same dark background. */
  html,
  html body.type-index,
  html body.type-index .overall-wrapper,
  html body.type-index #header,
  html body.type-index #header .header-top,
  html body.type-index #header .header-top-wrapper,
  html body.type-index #header .navigation-wrapper {
    background-color: #0e1313 !important;
  }

  /* Keep the page content itself white below the header. */
  html body.type-index .content-wrapper,
  html body.type-index .content-wrapper-in,
  html body.type-index main,
  html body.type-index #content,
  html body.type-index .homepage-box {
    background-color: #fff !important;
  }

  /* Move only the logo slightly left, creating a safer gap before search. */
  html body.type-index #header .header-top-wrapper > .site-name,
  html body.type-index #header .site-name {
    margin-left: -10px !important;
  }

  /* Product names in mobile Novinky must remain complete, without ellipsis. */
  html body.type-index #products-2 .p-in {
    grid-template-rows: minmax(118px, auto) 210px !important;
    height: auto !important;
    min-height: 328px !important;
    max-height: none !important;
    flex-basis: auto !important;
    overflow: visible !important;
  }

  html body.type-index #products-2 .p-in-in {
    height: auto !important;
    min-height: 118px !important;
    max-height: none !important;
    overflow: visible !important;
  }

  html body.type-index #products-2 .name,
  html body.type-index #products-2 .name a {
    display: block !important;
    width: 100% !important;
    height: auto !important;
    min-height: 96px !important;
    max-height: none !important;
    overflow: visible !important;
    white-space: normal !important;
    word-break: normal !important;
    overflow-wrap: anywhere !important;
    text-overflow: clip !important;
    -webkit-box-orient: initial !important;
    -webkit-line-clamp: unset !important;
    line-clamp: unset !important;
  }
}

/* ========================================================================== 
   V47 — mobile dark background only in the header, never around the carousel
   All other V46 mobile and desktop styling remains unchanged.
   ========================================================================== */
@media (max-width: 767px) {
  /* Restore the page canvas below the header to white. V46 made these outer
     wrappers dark, which unintentionally created a black field around hero. */
  html,
  html body.type-index,
  html body.type-index .overall-wrapper,
  html body.type-index .content-wrapper,
  html body.type-index .content-wrapper-in,
  html body.type-index main,
  html body.type-index #content,
  html body.type-index .homepage-box,
  html body.type-index .carousel-wrapper,
  html body.type-index .carousel-wrapper > .row,
  html body.type-index .carousel-wrapper .wide-carousel {
    background-color: #fff !important;
    background-image: none !important;
  }

  /* Keep only the real mobile header dark. */
  html body.type-index #header,
  html body.type-index #header .header-top,
  html body.type-index #header .header-top-wrapper,
  html body.type-index #header .navigation-wrapper {
    background-color: #0e1313 !important;
    background-image: none !important;
  }

  /* The carousel keeps its own image/overlay styling, but no dark outer field. */
  html body.type-index #carousel {
    background-color: transparent !important;
  }
}

/* ========================================================================== 
   V48 — mobile: paint only the empty strip above the header dark
   The carousel and every area below the header remain white.
   ========================================================================== */
@media (max-width: 767px) {
  html body.type-index #header {
    /* The Shoptet preview leaves an empty strip above the real header.
       Extend the header colour upward only, without colouring anything below. */
    box-shadow: 0 -140px 0 #0e1313 !important;
  }

  html body.type-index .content-wrapper,
  html body.type-index .content-wrapper-in,
  html body.type-index main,
  html body.type-index #content,
  html body.type-index .carousel-wrapper,
  html body.type-index #carousel {
    background-color: #fff !important;
  }
}

/* ========================================================================== 
   V49 — mobile: fill the remaining white strip above the real header
   Only the area above the header is painted dark; content below stays white.
   ========================================================================== */
@media (max-width: 767px) {
  html body.type-index #header {
    position: relative !important;
    overflow: visible !important;
    box-shadow: none !important;
    isolation: isolate !important;
  }

  /* Paint one continuous dark field behind every empty pixel above #header. */
  html body.type-index #header::before {
    content: "" !important;
    position: absolute !important;
    z-index: 0 !important;
    left: 0 !important;
    right: 0 !important;
    bottom: 100% !important;
    height: 220px !important;
    background: #0e1313 !important;
    pointer-events: none !important;
  }

  /* Keep the actual header controls above the dark filler. */
  html body.type-index #header > * {
    position: relative !important;
    z-index: 1 !important;
  }

  /* Everything below the header remains white. */
  html body.type-index .content-wrapper,
  html body.type-index .content-wrapper-in,
  html body.type-index main,
  html body.type-index #content,
  html body.type-index .carousel-wrapper,
  html body.type-index .carousel-wrapper > .row,
  html body.type-index #carousel {
    background-color: #fff !important;
  }
}

/* ========================================================================== 
   V50 — mobile: consistent dark strip above every header, original light menu
   Desktop and all page content below the header remain unchanged.
   ========================================================================== */
@media (max-width: 767px) {
  /* Category, product and every other mobile page get the same continuous
     dark area above the real header as the homepage. */
  html body #header {
    position: relative !important;
    overflow: visible !important;
    isolation: isolate !important;
  }

  html body #header::before {
    content: "" !important;
    position: absolute !important;
    z-index: 0 !important;
    right: 0 !important;
    bottom: 100% !important;
    left: 0 !important;
    display: block !important;
    height: 220px !important;
    background: #0e1313 !important;
    pointer-events: none !important;
  }

  html body #header > * {
    position: relative !important;
    z-index: 1 !important;
  }

  /* When the navigation overlay is open, do not reuse the dark filler as the
     menu header. Restore a compact, entirely light close-button row. */
  html.navigation-window-visible body #header::before,
  html body.navigation-window-visible #header::before,
  html body .navigation-window-visible #header::before {
    display: none !important;
    content: none !important;
  }

  html.navigation-window-visible body #header .header-bottom,
  html body.navigation-window-visible #header .header-bottom,
  html body .navigation-window-visible #header .header-bottom,
  html.navigation-window-visible body #header .header-bottom-wrapper,
  html body.navigation-window-visible #header .header-bottom-wrapper,
  html body .navigation-window-visible #header .header-bottom-wrapper,
  html.navigation-window-visible body #header #navigation,
  html body.navigation-window-visible #header #navigation,
  html body .navigation-window-visible #header #navigation,
  html.navigation-window-visible body #header .navigation-in,
  html body.navigation-window-visible #header .navigation-in,
  html body .navigation-window-visible #header .navigation-in {
    background-color: #fff !important;
    background-image: none !important;
  }

  html.navigation-window-visible body #header .header-bottom,
  html body.navigation-window-visible #header .header-bottom,
  html body .navigation-window-visible #header .header-bottom {
    border-top: 0 !important;
  }

  html.navigation-window-visible body #header .header-bottom-wrapper,
  html body.navigation-window-visible #header .header-bottom-wrapper,
  html body .navigation-window-visible #header .header-bottom-wrapper {
    box-sizing: border-box !important;
    padding: 64px 0 0 !important;
  }

  html.navigation-window-visible body #header .header-bottom-wrapper::before,
  html.navigation-window-visible body #header .header-bottom-wrapper::after,
  html body.navigation-window-visible #header .header-bottom-wrapper::before,
  html body.navigation-window-visible #header .header-bottom-wrapper::after {
    display: none !important;
    content: none !important;
  }

  html.navigation-window-visible body #header .ph-mobile-menu-close,
  html body.navigation-window-visible #header .ph-mobile-menu-close,
  html body .navigation-window-visible #header .ph-mobile-menu-close {
    top: 10px !important;
    right: 14px !important;
  }
}

/* ========================================================================== 
   V51 — mobile: remove the artificial space above the header
   The header starts at the top like on desktop; everything below is unchanged.
   ========================================================================== */
@media (max-width: 767px) {
  /* Cancel all earlier decorative fillers above the mobile header. */
  html body #header::before,
  html body.type-index #header::before {
    display: none !important;
    content: none !important;
    height: 0 !important;
  }

  /* Remove inherited mobile offsets that reserve an empty strip above header. */
  html,
  html body,
  html body .overall-wrapper {
    margin-top: 0 !important;
    padding-top: 0 !important;
  }

  html body #header {
    top: 0 !important;
    margin-top: 0 !important;
    padding-top: 0 !important;
    box-shadow: none !important;
    transform: none !important;
  }

  /* Some Samba installations render an otherwise empty top-navigation row. */
  html body .top-navigation-bar,
  html body .top-navigation-bar .container,
  html body .top-navigation-contacts,
  html body .top-navigation-menu {
    display: none !important;
    width: 0 !important;
    height: 0 !important;
    min-height: 0 !important;
    max-height: 0 !important;
    margin: 0 !important;
    padding: 0 !important;
    border: 0 !important;
    overflow: hidden !important;
  }
}

/* ========================================================================== 
   V52 — mobile menu: remove the oversized gap below the close button
   Only the open mobile navigation layout is affected.
   ========================================================================== */
@media (max-width: 900px) {
  html.navigation-window-visible body #header .header-bottom-wrapper,
  html body.navigation-window-visible #header .header-bottom-wrapper,
  html body .navigation-window-visible #header .header-bottom-wrapper {
    display: grid !important;
    grid-template-rows: 66px minmax(0, 1fr) !important;
    align-content: stretch !important;
    justify-content: stretch !important;
    gap: 0 !important;
    padding: 0 !important;
  }

  html.navigation-window-visible body #header .ph-mobile-menu-close,
  html body.navigation-window-visible #header .ph-mobile-menu-close,
  html body .navigation-window-visible #header .ph-mobile-menu-close {
    grid-row: 1 !important;
    align-self: center !important;
    justify-self: end !important;
    top: auto !important;
    right: auto !important;
    margin: 0 14px 0 0 !important;
  }

  html.navigation-window-visible body #header #navigation,
  html body.navigation-window-visible #header #navigation,
  html body .navigation-window-visible #header #navigation {
    grid-row: 2 !important;
    align-self: stretch !important;
    min-height: 0 !important;
    margin: 0 !important;
    padding-top: 0 !important;
  }
}

/* ========================================================================== 
   V53 — mobile menu: always-visible close button and compact top area
   The navigation begins directly below a short close-button row.
   ========================================================================== */
@media (max-width: 900px) {
  html.navigation-window-visible body #header .header-bottom,
  html body.navigation-window-visible #header .header-bottom,
  html body .navigation-window-visible #header .header-bottom {
    position: fixed !important;
    inset: 0 !important;
    z-index: 99990 !important;
    display: block !important;
    width: 100vw !important;
    height: 100vh !important;
    height: 100dvh !important;
    min-height: 0 !important;
    max-height: none !important;
    margin: 0 !important;
    padding: 0 !important;
    border: 0 !important;
    background: #fff !important;
    overflow: hidden !important;
  }

  html.navigation-window-visible body #header .header-bottom-wrapper,
  html body.navigation-window-visible #header .header-bottom-wrapper,
  html body .navigation-window-visible #header .header-bottom-wrapper {
    position: relative !important;
    display: block !important;
    width: 100% !important;
    height: 100% !important;
    min-height: 0 !important;
    margin: 0 !important;
    padding: 0 !important;
    border: 0 !important;
    background: #fff !important;
    overflow: hidden !important;
  }

  html.navigation-window-visible body #header .ph-mobile-menu-close,
  html body.navigation-window-visible #header .ph-mobile-menu-close,
  html body .navigation-window-visible #header .ph-mobile-menu-close {
    position: absolute !important;
    top: 7px !important;
    right: 12px !important;
    z-index: 100002 !important;
    display: inline-flex !important;
    visibility: visible !important;
    opacity: 1 !important;
    width: 46px !important;
    height: 46px !important;
    align-items: center !important;
    justify-content: center !important;
    margin: 0 !important;
    padding: 0 !important;
    border: 0 !important;
    border-radius: 50% !important;
    background: #f6b900 !important;
    color: #0e1313 !important;
    transform: none !important;
    pointer-events: auto !important;
  }

  html.navigation-window-visible body #header .ph-mobile-menu-close::before,
  html.navigation-window-visible body #header .ph-mobile-menu-close::after,
  html body.navigation-window-visible #header .ph-mobile-menu-close::before,
  html body.navigation-window-visible #header .ph-mobile-menu-close::after,
  html body .navigation-window-visible #header .ph-mobile-menu-close::before,
  html body .navigation-window-visible #header .ph-mobile-menu-close::after {
    display: block !important;
    visibility: visible !important;
    opacity: 1 !important;
    content: "" !important;
  }

  html.navigation-window-visible body #header #navigation,
  html body.navigation-window-visible #header #navigation,
  html body .navigation-window-visible #header #navigation {
    position: absolute !important;
    top: 60px !important;
    right: 0 !important;
    bottom: 0 !important;
    left: 0 !important;
    z-index: 1 !important;
    display: block !important;
    width: 100% !important;
    height: auto !important;
    min-height: 0 !important;
    max-height: none !important;
    margin: 0 !important;
    padding: 0 0 max(84px, calc(64px + env(safe-area-inset-bottom))) !important;
    border-top: 1px solid #e2e2e2 !important;
    background: #fff !important;
    overflow-x: hidden !important;
    overflow-y: auto !important;
    overscroll-behavior-y: contain !important;
    -webkit-overflow-scrolling: touch !important;
  }

  html.navigation-window-visible body #header #navigation .navigation-in,
  html body.navigation-window-visible #header #navigation .navigation-in,
  html body .navigation-window-visible #header #navigation .navigation-in,
  html.navigation-window-visible body #header #navigation .menu-level-1,
  html body.navigation-window-visible #header #navigation .menu-level-1,
  html body .navigation-window-visible #header #navigation .menu-level-1 {
    position: static !important;
    width: 100% !important;
    min-height: 0 !important;
    margin: 0 !important;
    padding-top: 0 !important;
    transform: none !important;
  }
}

/* ========================================================================== 
   V59 — product-card variants: always visible, compact, native data preserved
   Based directly on V53. The original Shoptet variant markup remains untouched
   for filtering; a small visual copy is placed in a predictable card slot.
   ========================================================================== */

/* The visual variant strip generated by V59. */
body:not(.type-detail) .product .ph-v59-variants {
  box-sizing: border-box !important;
  display: flex !important;
  flex-wrap: wrap !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 6px !important;
  width: 100% !important;
  min-height: 34px !important;
  margin: 10px 0 8px !important;
  padding: 0 4px !important;
  overflow: visible !important;
}

body:not(.type-detail) .product .ph-v59-variant {
  box-sizing: border-box !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  min-width: 38px !important;
  min-height: 32px !important;
  padding: 5px 9px !important;
  border: 1px solid #c7cbd0 !important;
  border-radius: 6px !important;
  background: #fff !important;
  color: #111 !important;
  font-size: 13px !important;
  font-weight: 700 !important;
  line-height: 1 !important;
  white-space: nowrap !important;
  text-align: center !important;
  text-decoration: none !important;
  box-shadow: none !important;
}

body:not(.type-detail) .product .ph-v59-variant:hover,
body:not(.type-detail) .product .ph-v59-variant:focus-visible {
  border-color: var(--ph-orange, #f6b900) !important;
  background: #fff8d9 !important;
  color: #111 !important;
  outline: none !important;
}

body:not(.type-detail) .product .ph-v59-variant-more {
  box-sizing: border-box !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  min-height: 32px !important;
  padding: 5px 9px !important;
  border: 1px dashed #bfc3c7 !important;
  border-radius: 6px !important;
  background: #f7f7f7 !important;
  color: #444 !important;
  font-size: 12px !important;
  font-weight: 700 !important;
  line-height: 1 !important;
  white-space: nowrap !important;
}

/* Keep the original native Shoptet variant structure in the product card.
   It remains in the DOM for Shoptet's own filtering/data logic, but V59 uses
   the dedicated visual strip above so old V39–V43 fixed-height rules cannot
   clip what the customer sees. */
body:not(.type-detail) .product .widget-parameter-wrapper.ph-v59-native-source {
  position: absolute !important;
  width: 1px !important;
  height: 1px !important;
  min-width: 1px !important;
  min-height: 1px !important;
  max-width: 1px !important;
  max-height: 1px !important;
  margin: 0 !important;
  padding: 0 !important;
  border: 0 !important;
  opacity: 0 !important;
  overflow: hidden !important;
  pointer-events: none !important;
  clip-path: inset(50%) !important;
}

/* Make room for the strip even in older fixed-height card layouts. */
body:not(.type-detail) .product .p-bottom,
body:not(.type-detail) .product .p-bottom > [data-micro="offer"] {
  overflow: visible !important;
}

/* V59 keeps the previous requirement: product-list cards use Detail only. */
body:not(.type-detail) .product .p-tools {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  flex-wrap: wrap !important;
}

body:not(.type-detail) .product .p-tools > .ph-v59-original-action {
  display: none !important;
}

body:not(.type-detail) .product .p-tools > .ph-v59-detail {
  box-sizing: border-box !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 10px !important;
  min-width: 110px !important;
  min-height: 46px !important;
  padding: 9px 17px !important;
  border: 1px solid var(--ph-orange, #f6b900) !important;
  border-radius: 9px !important;
  background: #fff !important;
  color: #111 !important;
  font-weight: 700 !important;
  text-decoration: none !important;
}

/* Homepage Novinky has strict legacy heights. Let the visible V59 strip fit. */
html body.type-index #products-2 .p-in,
html body.type-index #products-2 .p-bottom,
html body.type-index #products-2 .p-bottom > [data-micro="offer"] {
  max-height: none !important;
}

html body.type-index #products-2 .p-bottom {
  height: auto !important;
  min-height: 220px !important;
}

html body.type-index #products-2 .p-bottom > [data-micro="offer"] {
  height: auto !important;
  min-height: 196px !important;
}

@media (max-width: 767px) {
  body:not(.type-detail) .product .ph-v59-variants {
    gap: 5px !important;
    min-height: 30px !important;
    margin: 8px 0 7px !important;
    padding: 0 2px !important;
  }

  body:not(.type-detail) .product .ph-v59-variant {
    min-width: 34px !important;
    min-height: 29px !important;
    padding: 4px 7px !important;
    font-size: 11px !important;
  }

  body:not(.type-detail) .product .ph-v59-variant-more {
    min-height: 29px !important;
    padding: 4px 7px !important;
    font-size: 11px !important;
  }
}

/* ========================================================================== 
   V63 — homepage Novinky: one Detail button + compact variants with "+ další"
   ========================================================================== */
html body.type-index #products-2 .product .p-tools > * {
  display: none !important;
}

html body.type-index #products-2 .product .p-tools > .ph-v63-home-detail {
  box-sizing: border-box !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 10px !important;
  min-width: 110px !important;
  min-height: 46px !important;
  margin: 0 auto !important;
  padding: 9px 17px !important;
  border: 1px solid var(--ph-orange, #f6b900) !important;
  border-radius: 9px !important;
  background: #fff !important;
  color: #111 !important;
  font-weight: 700 !important;
  line-height: 1.2 !important;
  text-decoration: none !important;
}

html body.type-index #products-2 .product .ph-v59-variants {
  display: flex !important;
  flex-wrap: nowrap !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 6px !important;
  width: 100% !important;
  min-width: 0 !important;
  overflow: hidden !important;
}

html body.type-index #products-2 .product .ph-v59-variant.ph-v63-home-hidden-variant,
html body.type-index #products-2 .product .ph-v59-variant-more {
  display: none !important;
}

html body.type-index #products-2 .product .ph-v63-home-more {
  box-sizing: border-box !important;
  display: inline-flex !important;
  flex: 0 0 auto !important;
  align-items: center !important;
  justify-content: center !important;
  min-height: 32px !important;
  padding: 5px 9px !important;
  border: 1px dashed #bfc3c7 !important;
  border-radius: 6px !important;
  background: #f7f7f7 !important;
  color: #444 !important;
  font-size: 12px !important;
  font-weight: 700 !important;
  line-height: 1 !important;
  white-space: nowrap !important;
}

@media (max-width: 767px) {
  html body.type-index #products-2 .product .ph-v63-home-more {
    min-height: 29px !important;
    padding: 4px 7px !important;
    font-size: 11px !important;
  }
}

/* ========================================================================== 
   V64 — homepage Novinky alignment + safe two-column mobile cards
   Keeps V63 behavior; only equalizes cards without variants and prevents
   mobile cards/content from being clipped by inherited slider widths.
   ========================================================================== */

/* Desktop: cards without variants reserve exactly the same visual row as
   cards with variants, so price and Detail sit on identical baselines. */
@media (min-width: 768px) {
  html body.type-index #products-2 .product .p-bottom > [data-micro="offer"]:not(:has(.ph-v59-variants))::before {
    content: "" !important;
    display: block !important;
    order: 0 !important;
    width: 100% !important;
    height: 52px !important;
    min-height: 52px !important;
    flex: 0 0 52px !important;
    margin: 0 !important;
    padding: 0 !important;
  }
}

/* Phones: true two-column cards that never retain slick/desktop widths. */
@media (max-width: 767px) {
  html body.type-index .products-wrapper[data-editorid="homepageProductGroup-2"] {
    box-sizing: border-box !important;
    width: 100% !important;
    max-width: 100% !important;
    margin-right: auto !important;
    margin-left: auto !important;
    padding-right: 8px !important;
    padding-left: 8px !important;
    overflow: visible !important;
  }

  html body.type-index #products-2,
  html body.type-index #products-2.product-slider,
  html body.type-index #products-2.ph-product-grid {
    box-sizing: border-box !important;
    display: grid !important;
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 12px !important;
    margin: 0 !important;
    padding: 0 !important;
    overflow: visible !important;
    transform: none !important;
  }

  html body.type-index #products-2 > .slick-list,
  html body.type-index #products-2 > .slick-list > .slick-track,
  html body.type-index #products-2 .slick-list,
  html body.type-index #products-2 .slick-track {
    display: contents !important;
    width: auto !important;
    max-width: none !important;
    height: auto !important;
    margin: 0 !important;
    padding: 0 !important;
    overflow: visible !important;
    transform: none !important;
  }

  html body.type-index #products-2 .product,
  html body.type-index #products-2 > .product,
  html body.type-index #products-2 .slick-slide.product {
    box-sizing: border-box !important;
    display: flex !important;
    width: 100% !important;
    min-width: 0 !important;
    max-width: 100% !important;
    height: auto !important;
    margin: 0 !important;
    overflow: hidden !important;
    float: none !important;
    transform: none !important;
  }

  html body.type-index #products-2 .product > div,
  html body.type-index #products-2 .p,
  html body.type-index #products-2 .p-in,
  html body.type-index #products-2 .p-in-in,
  html body.type-index #products-2 .p-bottom,
  html body.type-index #products-2 .p-bottom > [data-micro="offer"] {
    box-sizing: border-box !important;
    width: 100% !important;
    min-width: 0 !important;
    max-width: 100% !important;
  }

  html body.type-index #products-2 .name,
  html body.type-index #products-2 .name a {
    max-width: 100% !important;
    white-space: normal !important;
    word-break: normal !important;
    overflow-wrap: anywhere !important;
    hyphens: auto !important;
    text-overflow: clip !important;
  }

  /* Three visible sizes + '+ další' fit comfortably in one phone column. */
  html body.type-index #products-2 .product .ph-v59-variants {
    box-sizing: border-box !important;
    max-width: 100% !important;
    gap: 4px !important;
    padding-right: 0 !important;
    padding-left: 0 !important;
    overflow: hidden !important;
  }

  html body.type-index #products-2 .product .ph-v59-variant,
  html body.type-index #products-2 .product .ph-v63-home-more {
    min-width: 0 !important;
    padding-right: 6px !important;
    padding-left: 6px !important;
    font-size: 10.5px !important;
  }

  /* Cards without variants still reserve the same row, keeping prices and
     Detail buttons aligned with neighboring variant cards. */
  html body.type-index #products-2 .product .p-bottom > [data-micro="offer"]:not(:has(.ph-v59-variants))::before {
    content: "" !important;
    display: block !important;
    order: 0 !important;
    width: 100% !important;
    height: 45px !important;
    min-height: 45px !important;
    flex: 0 0 45px !important;
    margin: 0 !important;
    padding: 0 !important;
  }
}

/* ========================================================================== 
   V66 — definitive footer link color + sticky checkout recap
   Based directly on V65, replacing the V65 footer/recap patch.
   ========================================================================== */

/* Footer / legacy footer links.  Target the actual legacy blocks directly,
   because on some Shoptet pages the block can sit outside #footer briefly or
   be moved there after page load. */
html body #menuarticles a,
html body #menuarticles a:link,
html body #menuarticles a:visited,
html body .eshopContact a,
html body .eshopContact a:link,
html body .eshopContact a:visited,
html body #extraAdvantage a,
html body #extraAdvantage a:link,
html body #extraAdvantage a:visited,
html body .ph-v66-footer-link,
html body .ph-v66-footer-link:link,
html body .ph-v66-footer-link:visited {
  color: var(--ph-orange, #f6b900) !important;
  text-decoration-color: currentColor !important;
}

html body #menuarticles a *,
html body .eshopContact a *,
html body #extraAdvantage a *,
html body .ph-v66-footer-link * {
  color: inherit !important;
}

html body #menuarticles a:hover,
html body #menuarticles a:focus,
html body .eshopContact a:hover,
html body .eshopContact a:focus,
html body #extraAdvantage a:hover,
html body #extraAdvantage a:focus,
html body .ph-v66-footer-link:hover,
html body .ph-v66-footer-link:focus {
  color: #ffc928 !important;
}

/* Checkout recap product links stay orange as well. */
html body .ph-v66-order-summary a,
html body .ph-v66-order-summary a:link,
html body .ph-v66-order-summary a:visited,
html body .ph-v66-order-summary a * {
  color: var(--ph-orange, #f6b900) !important;
}

/* “1 ks” must be one black value. */
html body .ph-v66-qty-unit,
html body .ph-v66-qty-unit * {
  color: #111 !important;
}

/* Desktop checkout: keep the recap visible at the top while the customer
   scrolls the form. On phones/tablets it remains in normal document flow so
   it never covers the checkout controls. */
@media (min-width: 901px) {
  html body .ph-v66-sticky-ancestor {
    overflow: visible !important;
    overflow-x: visible !important;
    overflow-y: visible !important;
  }

  html body .ph-v66-order-summary {
    position: sticky !important;
    top: 18px !important;
    bottom: auto !important;
    align-self: flex-start !important;
    z-index: 20 !important;
    transform: none !important;
  }
}

@media (max-width: 900px) {
  html body .ph-v66-order-summary {
    position: static !important;
    top: auto !important;
    bottom: auto !important;
    transform: none !important;
  }
}

/* ========================================================================== 
   V68 — restore normal product text colors (based directly on V66)
   Keep orange only in footer / checkout recap where explicitly intended.
   ========================================================================== */

/* Product titles in category/search/home product cards must stay dark. */
html body:not(.type-order) .product .name,
html body:not(.type-order) .product .name a,
html body:not(.type-order) .product .name a:link,
html body:not(.type-order) .product .name a:visited,
html body:not(.type-order) .products .product .name,
html body:not(.type-order) .products .product .name a,
html body:not(.type-order) .product-slider .product .name,
html body:not(.type-order) .product-slider .product .name a {
  color: #111 !important;
  text-decoration-color: currentColor !important;
}

html body:not(.type-order) .product .name a:hover,
html body:not(.type-order) .product .name a:focus,
html body:not(.type-order) .products .product .name a:hover,
html body:not(.type-order) .products .product .name a:focus {
  color: #111 !important;
}

/* VAT / secondary price stays neutral gray; main price stays black. */
html body:not(.type-order) .product .price-additional,
html body:not(.type-order) .product .price-additional *,
html body:not(.type-order) .products .product .price-additional,
html body:not(.type-order) .products .product .price-additional * {
  color: #666 !important;
}

html body:not(.type-order) .product .price-final,
html body:not(.type-order) .product .price-final *,
html body:not(.type-order) .product .price,
html body:not(.type-order) .product .price * {
  color: #111 !important;
}

/* ========================================================================== 
   V69 — checkout/order buttons: force every label to stay readable
   Based directly on V68; no layout changes.
   ========================================================================== */

/* Shoptet can apply link/button color from several nested rules on individual
   checkout steps. Keep every CTA label black on the yellow buttons, including
   nested spans and icon labels. */
body.type-cart .next-step > a,
body.type-cart .next-step > button,
body.type-cart .next-step > input[type="submit"],
body.type-cart .next-step > .btn,
body.type-order .next-step > a,
body.type-order .next-step > button,
body.type-order .next-step > input[type="submit"],
body.type-order .next-step > .btn,
body.ordering-process .next-step > a,
body.ordering-process .next-step > button,
body.ordering-process .next-step > input[type="submit"],
body.ordering-process .next-step > .btn,
body[class*="ordering-process"] .next-step > a,
body[class*="ordering-process"] .next-step > button,
body[class*="ordering-process"] .next-step > input[type="submit"],
body[class*="ordering-process"] .next-step > .btn,
body.type-cart .cart-summary .next-step > a,
body.type-cart .cart-summary .next-step > button,
body.type-cart .cart-summary .next-step > input[type="submit"],
body.type-order .cart-summary .next-step > a,
body.type-order .cart-summary .next-step > button,
body.type-order .cart-summary .next-step > input[type="submit"] {
  color: #111 !important;
  -webkit-text-fill-color: #111 !important;
  font-weight: 800 !important;
  text-shadow: none !important;
  opacity: 1 !important;
  visibility: visible !important;
}

body.type-cart .next-step > a *,
body.type-cart .next-step > button *,
body.type-cart .next-step > .btn *,
body.type-order .next-step > a *,
body.type-order .next-step > button *,
body.type-order .next-step > .btn *,
body.ordering-process .next-step > a *,
body.ordering-process .next-step > button *,
body.ordering-process .next-step > .btn *,
body[class*="ordering-process"] .next-step > a *,
body[class*="ordering-process"] .next-step > button *,
body[class*="ordering-process"] .next-step > .btn *,
body.type-cart .cart-summary .next-step > a *,
body.type-cart .cart-summary .next-step > button *,
body.type-order .cart-summary .next-step > a *,
body.type-order .cart-summary .next-step > button * {
  color: #111 !important;
  -webkit-text-fill-color: #111 !important;
  font-size: inherit !important;
  font-weight: inherit !important;
  line-height: inherit !important;
  text-shadow: none !important;
  opacity: 1 !important;
  visibility: visible !important;
}

/* Also cover Shoptet conversion/back buttons when they are rendered outside
   .next-step on a later checkout stage. Limit this to ordering pages only. */
body.type-cart .btn-conversion,
body.type-order .btn-conversion,
body.ordering-process .btn-conversion,
body[class*="ordering-process"] .btn-conversion,
body.type-cart .btn-back,
body.type-order .btn-back,
body.ordering-process .btn-back,
body[class*="ordering-process"] .btn-back,
body.type-cart .btn-primary,
body.type-order .btn-primary,
body.ordering-process .btn-primary,
body[class*="ordering-process"] .btn-primary {
  color: #111 !important;
  -webkit-text-fill-color: #111 !important;
  text-shadow: none !important;
  opacity: 1 !important;
  visibility: visible !important;
}

body.type-cart .btn-conversion *,
body.type-order .btn-conversion *,
body.ordering-process .btn-conversion *,
body[class*="ordering-process"] .btn-conversion *,
body.type-cart .btn-back *,
body.type-order .btn-back *,
body.ordering-process .btn-back *,
body[class*="ordering-process"] .btn-back *,
body.type-cart .btn-primary *,
body.type-order .btn-primary *,
body.ordering-process .btn-primary *,
body[class*="ordering-process"] .btn-primary * {
  color: inherit !important;
  -webkit-text-fill-color: inherit !important;
  opacity: 1 !important;
  visibility: visible !important;
}

/* =========================================================
   V70 — readable labels on yellow CTA buttons everywhere
   Keep product-detail content buttons readable as well.
   ========================================================= */
body.type-detail a.btn,
body.type-detail button.btn,
body.type-detail .btn-primary,
body.type-detail .btn-conversion,
body.type-detail .p-detail a.btn,
body.type-detail .p-detail button,
body.type-detail .detail-description a.btn,
body.type-detail .description a.btn,
body.type-detail .product-description a.btn,
body.type-detail .extended-description a.btn,
body.type-detail .tab-content a.btn,
body.type-detail .shp-tabs-holder a.btn,
body.type-detail a.ph-force-readable-cta,
body.type-detail button.ph-force-readable-cta {
  color: #111 !important;
  -webkit-text-fill-color: #111 !important;
  font-weight: 800 !important;
  text-shadow: none !important;
  opacity: 1 !important;
  visibility: visible !important;
}

body.type-detail a.btn *,
body.type-detail button.btn *,
body.type-detail .btn-primary *,
body.type-detail .btn-conversion *,
body.type-detail .p-detail a.btn *,
body.type-detail .p-detail button *,
body.type-detail .detail-description a.btn *,
body.type-detail .description a.btn *,
body.type-detail .product-description a.btn *,
body.type-detail .extended-description a.btn *,
body.type-detail .tab-content a.btn *,
body.type-detail .shp-tabs-holder a.btn *,
body.type-detail a.ph-force-readable-cta *,
body.type-detail button.ph-force-readable-cta * {
  color: #111 !important;
  -webkit-text-fill-color: #111 !important;
  opacity: 1 !important;
  visibility: visible !important;
}

/* ========================================================================== 
   V72 — product card buttons fully orange
   Based directly on V70. Only product-list/card action buttons are changed.
   ========================================================================== */
body:not(.type-detail) .product .p-tools .btn,
body:not(.type-detail) .product .p-tools a.btn,
body:not(.type-detail) .product .p-tools button.btn,
body:not(.type-detail) .product .p-tools .ph-v59-detail,
html body.type-index #products-2 .product .p-tools .ph-v63-home-detail,
html body.type-index #products-2 .product .p-tools a,
html body.type-index #products-2 .product .p-tools button {
  border-color: var(--ph-orange, #f6b900) !important;
  background: var(--ph-orange, #f6b900) !important;
  background-color: var(--ph-orange, #f6b900) !important;
  color: #111 !important;
  -webkit-text-fill-color: #111 !important;
  box-shadow: none !important;
  text-shadow: none !important;
}

body:not(.type-detail) .product .p-tools .btn *,
body:not(.type-detail) .product .p-tools a.btn *,
body:not(.type-detail) .product .p-tools button.btn *,
body:not(.type-detail) .product .p-tools .ph-v59-detail *,
html body.type-index #products-2 .product .p-tools .ph-v63-home-detail *,
html body.type-index #products-2 .product .p-tools a *,
html body.type-index #products-2 .product .p-tools button * {
  color: #111 !important;
  -webkit-text-fill-color: #111 !important;
}

body:not(.type-detail) .product .p-tools .btn:hover,
body:not(.type-detail) .product .p-tools a.btn:hover,
body:not(.type-detail) .product .p-tools button.btn:hover,
body:not(.type-detail) .product .p-tools .ph-v59-detail:hover,
html body.type-index #products-2 .product .p-tools .ph-v63-home-detail:hover {
  border-color: var(--ph-orange, #f6b900) !important;
  background: var(--ph-orange, #f6b900) !important;
  background-color: var(--ph-orange, #f6b900) !important;
  color: #111 !important;
}

/* ========================================================================== 
   V73 — contrast safety for the black cart-count badge in the dark header
   Based directly on V72. No layout changes.
   ========================================================================== */
#header .cart-count > i[data-testid="headerCartCount"],
#header [data-testid="headerCartCount"],
#header .navigation-buttons .cart-count > i,
#header .navigation-buttons .top-nav-button-cart > i[data-testid="headerCartCount"] {
  background: #111 !important;
  background-color: #111 !important;
  color: #fff !important;
  -webkit-text-fill-color: #fff !important;
  text-shadow: none !important;
  opacity: 1 !important;
}

#header .cart-count > i[data-testid="headerCartCount"] *,
#header [data-testid="headerCartCount"] * {
  color: #fff !important;
  -webkit-text-fill-color: #fff !important;
}

/* Keep normal header icons white on the black header; the cart glyph itself
   remains black because it sits on the orange cart circle. */
#header .navigation-buttons > a:not(.cart-count),
#header .navigation-buttons > button:not(.cart-count),
#header .navigation-buttons .top-nav-button:not(.top-nav-button-cart) {
  color: #fff !important;
  -webkit-text-fill-color: #fff !important;
}

/* ========================================================================== 
   V74 — strict text-color policy
   Orange text is allowed only in the footer contact/link area.
   Product text, variants, prices and cart/order item text stay black.
   ========================================================================== */

/* Product cards / homepage / category / search: all textual product content black. */
html body .product .name,
html body .product .name *,
html body .product .p-name,
html body .product .p-name *,
html body .product .p-code,
html body .product .p-desc,
html body .product .price,
html body .product .price *,
html body .product .price-final,
html body .product .price-final *,
html body .product .price-additional,
html body .product .price-additional *,
html body .product .ph-v59-variants,
html body .product .ph-v59-variants *,
html body .product .ph-v59-variant,
html body .product .ph-v59-variant *,
html body .product .ph-v63-home-more,
html body .product .ph-v63-home-more * {
  color: #111 !important;
  -webkit-text-fill-color: #111 !important;
  text-decoration-color: currentColor !important;
}

/* Product detail: product title and normal product information stay black. */
html body.type-detail .p-detail-inner h1,
html body.type-detail .p-detail-inner h1 *,
html body.type-detail .p-detail-inner .p-final-price-wrapper,
html body.type-detail .p-detail-inner .p-final-price-wrapper *,
html body.type-detail .p-detail-inner .price-final,
html body.type-detail .p-detail-inner .price-final *,
html body.type-detail .p-detail-inner .price-additional,
html body.type-detail .p-detail-inner .price-additional *,
html body.type-detail .p-detail-inner .variant-list,
html body.type-detail .p-detail-inner .variant-list *,
html body.type-detail .p-detail-inner .variants,
html body.type-detail .p-detail-inner .variants * {
  color: #111 !important;
  -webkit-text-fill-color: #111 !important;
}

/* Cart + checkout/order recap: product/item text must never be orange. */
html body.type-cart .cart-table a,
html body.type-cart .cart-table a *,
html body.type-cart .cart-item a,
html body.type-cart .cart-item a *,
html body.type-order .cart-table a,
html body.type-order .cart-table a *,
html body.type-order .cart-item a,
html body.type-order .cart-item a *,
html body.ordering-process .cart-table a,
html body.ordering-process .cart-table a *,
html body[class*="ordering-process"] .cart-table a,
html body[class*="ordering-process"] .cart-table a *,
html body .ph-v66-order-summary a,
html body .ph-v66-order-summary a:link,
html body .ph-v66-order-summary a:visited,
html body .ph-v66-order-summary a *,
html body .ph-v66-order-summary .cart-item,
html body .ph-v66-order-summary .cart-item *,
html body .ph-v66-order-summary .cart-table,
html body .ph-v66-order-summary .cart-table * {
  color: #111 !important;
  -webkit-text-fill-color: #111 !important;
  text-decoration-color: currentColor !important;
}

/* Keep quantity including “ks” uniformly black. */
html body .ph-v66-qty-unit,
html body .ph-v66-qty-unit * {
  color: #111 !important;
  -webkit-text-fill-color: #111 !important;
}

/* Product buttons stay orange, but their labels remain black. */
html body .product .p-tools a,
html body .product .p-tools button,
html body .product .p-tools .btn,
html body .product .p-tools a *,
html body .product .p-tools button *,
html body .product .p-tools .btn * {
  color: #111 !important;
  -webkit-text-fill-color: #111 !important;
}

/* Cart badge: CSS fallback. JS below also reapplies this after V70's CTA pass. */
html body #header a[data-testid="headerCart"] > i[data-testid="headerCartCount"],
html body #header [data-testid="headerCartCount"] {
  background: #111 !important;
  background-color: #111 !important;
  color: #fff !important;
  -webkit-text-fill-color: #fff !important;
  text-shadow: none !important;
  opacity: 1 !important;
}

/* Footer is the ONLY place where orange text is intentionally kept. */
html body #footer #menuarticles a,
html body #footer #menuarticles a:link,
html body #footer #menuarticles a:visited,
html body #footer .eshopContact a,
html body #footer .eshopContact a:link,
html body #footer .eshopContact a:visited,
html body #footer #extraAdvantage a,
html body #footer #extraAdvantage a:link,
html body #footer #extraAdvantage a:visited,
html body #footer .ph-v66-footer-link,
html body #footer .ph-v66-footer-link:link,
html body #footer .ph-v66-footer-link:visited,
html body .ph-legacy-footer #menuarticles a,
html body .ph-legacy-footer .eshopContact a,
html body .ph-legacy-footer #extraAdvantage a,
html body .ph-legacy-footer .ph-v66-footer-link {
  color: var(--ph-orange, #f6b900) !important;
  -webkit-text-fill-color: var(--ph-orange, #f6b900) !important;
}

html body #footer #menuarticles a *,
html body #footer .eshopContact a *,
html body #footer #extraAdvantage a *,
html body #footer .ph-v66-footer-link *,
html body .ph-legacy-footer #menuarticles a *,
html body .ph-legacy-footer .eshopContact a *,
html body .ph-legacy-footer #extraAdvantage a *,
html body .ph-legacy-footer .ph-v66-footer-link * {
  color: inherit !important;
  -webkit-text-fill-color: inherit !important;
}

/* =========================================================
   V75 — MINICART / NÁHLED KOŠÍKU: VEŠKERÝ TEXT ČERNÝ
   Základ: V74. Patička zůstává beze změny.
   ========================================================= */
html body #cart-widget,
html body #cart-widget .cart-widget-inner,
html body #cart-widget .cart-widget-inner *,
html body .user-action-cart,
html body .user-action-cart .popup-widget-inner,
html body .user-action-cart .popup-widget-inner * {
  color: #111 !important;
  -webkit-text-fill-color: #111 !important;
  text-decoration-color: currentColor !important;
}

/* Odkazy/názvy produktů, ceny, varianty a množství v rychlém košíku. */
html body #cart-widget a,
html body #cart-widget a:link,
html body #cart-widget a:visited,
html body #cart-widget strong,
html body #cart-widget b,
html body #cart-widget .cart-widget-product-name,
html body #cart-widget .cart-widget-product-name *,
html body #cart-widget .cart-widget-product-price,
html body #cart-widget .cart-widget-product-price *,
html body #cart-widget .cart-widget-product-amount,
html body #cart-widget .cart-widget-product-amount *,
html body #cart-widget [class*="price"],
html body #cart-widget [class*="price"] *,
html body #cart-widget [class*="amount"],
html body #cart-widget [class*="amount"] *,
html body #cart-widget [class*="quantity"],
html body #cart-widget [class*="quantity"] * {
  color: #111 !important;
  -webkit-text-fill-color: #111 !important;
}

/* Také ovládání množství a odstranění položky držíme černé. */
html body #cart-widget button,
html body #cart-widget button *,
html body #cart-widget .increase,
html body #cart-widget .decrease,
html body #cart-widget .remove-item,
html body #cart-widget [class*="remove"] {
  color: #111 !important;
  -webkit-text-fill-color: #111 !important;
}

/* ========================================================================== 
   V76 — footer cleanup + desktop navigation hover
   Based directly on V75. No other layout changes.
   ========================================================================== */

/* Desktop main menu: hovering/opening a top-level item must stay yellow,
   never switch to a black tile. */
@media (min-width: 901px) {
  html body #header #navigation .navigation-in > ul.menu-level-1 > li:hover > a,
  html body #header #navigation .navigation-in > ul.menu-level-1 > li.exp > a,
  html body #header #navigation .navigation-in > ul.menu-level-1 > li:hover > a:hover,
  html body #header #navigation .navigation-in > ul.menu-level-1 > li:hover > a:focus {
    background: var(--ph-orange, #f6b900) !important;
    background-color: var(--ph-orange, #f6b900) !important;
    color: #111 !important;
    -webkit-text-fill-color: #111 !important;
  }
}

/* Footer: everything white by default. Orange is reserved only for Reklamace. */
html body #footer .ph-legacy-footer,
html body #footer .ph-legacy-footer *,
html body .ph-legacy-footer,
html body .ph-legacy-footer * {
  color: #fff !important;
  -webkit-text-fill-color: #fff !important;
  text-decoration-color: currentColor !important;
}

html body #footer .ph-legacy-footer a,
html body #footer .ph-legacy-footer a:link,
html body #footer .ph-legacy-footer a:visited,
html body .ph-legacy-footer a,
html body .ph-legacy-footer a:link,
html body .ph-legacy-footer a:visited {
  color: #fff !important;
  -webkit-text-fill-color: #fff !important;
}

html body #footer .ph-legacy-footer a.ph-v76-complaint,
html body #footer .ph-legacy-footer a.ph-v76-complaint:link,
html body #footer .ph-legacy-footer a.ph-v76-complaint:visited,
html body .ph-legacy-footer a.ph-v76-complaint,
html body .ph-legacy-footer a.ph-v76-complaint:link,
html body .ph-legacy-footer a.ph-v76-complaint:visited,
html body #footer .ph-legacy-footer a.ph-v76-complaint *,
html body .ph-legacy-footer a.ph-v76-complaint * {
  color: var(--ph-orange, #f6b900) !important;
  -webkit-text-fill-color: var(--ph-orange, #f6b900) !important;
  font-weight: 800 !important;
}

/* Contact / lower footer content aligned to the right as requested. */
html body #footer .ph-legacy-footer .eshopContact,
html body #footer .ph-legacy-footer #extraAdvantage,
html body .ph-legacy-footer .eshopContact,
html body .ph-legacy-footer #extraAdvantage {
  text-align: right !important;
}

html body #footer .ph-legacy-footer .eshopContact > *,
html body #footer .ph-legacy-footer #extraAdvantage > *,
html body .ph-legacy-footer .eshopContact > *,
html body .ph-legacy-footer #extraAdvantage > * {
  text-align: right !important;
}

/* Clear visual separation before the advice/benefit lines. */
html body #footer .ph-legacy-footer #extraAdvantage,
html body .ph-legacy-footer #extraAdvantage {
  margin-top: 24px !important;
  padding-top: 0 !important;
}

/* Headings Odkazy: / Kontakt: remain white. */
html body .ph-v76-footer-heading {
  color: #fff !important;
  -webkit-text-fill-color: #fff !important;
}

/* ========================================================================== 
   V77 — exact desktop-menu frame + definitive footer colors/alignment
   Based directly on V76. No product/cart/layout changes.
   ========================================================================== */

/* Desktop navigation: hover/open/active must not alter the tile frame at all. */
@media (min-width: 901px) {
  html body #header #navigation .navigation-in > ul.menu-level-1 > li,
  html body #header #navigation .navigation-in > ul.menu-level-1 > li:hover,
  html body #header #navigation .navigation-in > ul.menu-level-1 > li.exp,
  html body #header #navigation .navigation-in > ul.menu-level-1 > li.active {
    margin: 0 !important;
    padding: 0 !important;
    border-top: 1px solid rgba(14, 19, 19, 0.34) !important;
    border-bottom: 1px solid rgba(14, 19, 19, 0.34) !important;
    border-left: 1px solid rgba(14, 19, 19, 0.34) !important;
    background: var(--ph-orange, #f6b900) !important;
    box-shadow: none !important;
    transform: none !important;
  }

  html body #header #navigation .navigation-in > ul.menu-level-1 > li:last-child,
  html body #header #navigation .navigation-in > ul.menu-level-1 > li:last-child:hover,
  html body #header #navigation .navigation-in > ul.menu-level-1 > li:last-child.exp,
  html body #header #navigation .navigation-in > ul.menu-level-1 > li:last-child.active {
    border-right: 1px solid rgba(14, 19, 19, 0.34) !important;
  }

  html body #header #navigation .navigation-in > ul.menu-level-1 > li > a,
  html body #header #navigation .navigation-in > ul.menu-level-1 > li:hover > a,
  html body #header #navigation .navigation-in > ul.menu-level-1 > li.exp > a,
  html body #header #navigation .navigation-in > ul.menu-level-1 > li.active > a,
  html body #header #navigation .navigation-in > ul.menu-level-1 > li > a:hover,
  html body #header #navigation .navigation-in > ul.menu-level-1 > li > a:focus {
    margin: 0 !important;
    border: 0 !important;
    background: var(--ph-orange, #f6b900) !important;
    color: #111 !important;
    -webkit-text-fill-color: #111 !important;
    box-shadow: none !important;
    transform: none !important;
  }
}

/* Footer: white is the default everywhere. These selectors deliberately have
   higher specificity than older V66/V74 orange-link rules. */
html body #footer .ph-legacy-footer,
html body #footer .ph-legacy-footer .row,
html body #footer .ph-legacy-footer #menuarticles,
html body #footer .ph-legacy-footer #menuarticles .header,
html body #footer .ph-legacy-footer #menuarticles .header span,
html body #footer .ph-legacy-footer #menuarticles li,
html body #footer .ph-legacy-footer #menuarticles li a,
html body #footer .ph-legacy-footer #menuarticles li a:link,
html body #footer .ph-legacy-footer #menuarticles li a:visited,
html body #footer .ph-legacy-footer #menuarticles li a span,
html body #footer .ph-legacy-footer .vc-content_shopinfo,
html body #footer .ph-legacy-footer .vc-content_shopinfo .inner,
html body #footer .ph-legacy-footer .vc-content_shopinfo .header,
html body #footer .ph-legacy-footer .vc-content_shopinfo .header span,
html body #footer .ph-legacy-footer .vc-content_shopinfo .content,
html body #footer .ph-legacy-footer .vc-content_shopinfo .eshopContact,
html body #footer .ph-legacy-footer .vc-content_shopinfo .eshopContact *,
html body #footer .ph-legacy-footer .vc-content_shopinfo .eshopContact a,
html body #footer .ph-legacy-footer .vc-content_shopinfo .eshopContact a:link,
html body #footer .ph-legacy-footer .vc-content_shopinfo .eshopContact a:visited,
html body #footer .ph-legacy-footer #extraAdvantage,
html body #footer .ph-legacy-footer #extraAdvantage *,
html body #footer .ph-legacy-footer #extraAdvantage a,
html body #footer .ph-legacy-footer #extraAdvantage a:link,
html body #footer .ph-legacy-footer #extraAdvantage a:visited {
  color: #fff !important;
  -webkit-text-fill-color: #fff !important;
  text-decoration-color: currentColor !important;
}

/* The one and only orange footer text: Reklamace. */
html body #footer .ph-legacy-footer #menuarticles li a.ph-v76-complaint,
html body #footer .ph-legacy-footer #menuarticles li a.ph-v76-complaint:link,
html body #footer .ph-legacy-footer #menuarticles li a.ph-v76-complaint:visited,
html body #footer .ph-legacy-footer #menuarticles li a.ph-v76-complaint span {
  color: var(--ph-orange, #f6b900) !important;
  -webkit-text-fill-color: var(--ph-orange, #f6b900) !important;
  font-weight: 800 !important;
}

/* Contact + the lower advice/benefit text align to one clean right edge. */
html body #footer .ph-legacy-footer .vc-content_shopinfo,
html body #footer .ph-legacy-footer .vc-content_shopinfo .inner,
html body #footer .ph-legacy-footer .vc-content_shopinfo .header,
html body #footer .ph-legacy-footer .vc-content_shopinfo .content,
html body #footer .ph-legacy-footer .vc-content_shopinfo .eshopContact,
html body #footer .ph-legacy-footer .vc-content_shopinfo .eshopContact *,
html body #footer .ph-legacy-footer #extraAdvantage,
html body #footer .ph-legacy-footer #extraAdvantage * {
  text-align: right !important;
}

/* Clear separation before “Poradíme vám”. */
html body #footer .ph-legacy-footer #extraAdvantage {
  margin-top: 28px !important;
  padding-top: 0 !important;
}

/* ========================================================================== 
   V78 — mobile footer left alignment + definitive footer colors
   Based directly on V77. No other layout changes.
   ========================================================================== */

/* Footer color contract: everything is white, only Reklamace is orange. */
html body #footer .ph-legacy-footer,
html body #footer .ph-legacy-footer *,
html body .ph-legacy-footer,
html body .ph-legacy-footer * {
  color: #fff !important;
  -webkit-text-fill-color: #fff !important;
  text-decoration-color: currentColor !important;
}

html body #footer .ph-legacy-footer a.ph-v76-complaint,
html body #footer .ph-legacy-footer a.ph-v76-complaint:link,
html body #footer .ph-legacy-footer a.ph-v76-complaint:visited,
html body #footer .ph-legacy-footer a.ph-v76-complaint *,
html body .ph-legacy-footer a.ph-v76-complaint,
html body .ph-legacy-footer a.ph-v76-complaint:link,
html body .ph-legacy-footer a.ph-v76-complaint:visited,
html body .ph-legacy-footer a.ph-v76-complaint * {
  color: var(--ph-orange, #f6b900) !important;
  -webkit-text-fill-color: var(--ph-orange, #f6b900) !important;
  font-weight: 800 !important;
}

/* On mobile / checkout views the entire legacy footer must use one left edge. */
@media (max-width: 900px) {
  html body #footer .ph-legacy-footer,
  html body #footer .ph-legacy-footer .row,
  html body #footer .ph-legacy-footer #menuarticles,
  html body #footer .ph-legacy-footer #menuarticles *,
  html body #footer .ph-legacy-footer .vc-content_shopinfo,
  html body #footer .ph-legacy-footer .vc-content_shopinfo *,
  html body #footer .ph-legacy-footer .eshopContact,
  html body #footer .ph-legacy-footer .eshopContact *,
  html body #footer .ph-legacy-footer #extraAdvantage,
  html body #footer .ph-legacy-footer #extraAdvantage *,
  html body .ph-legacy-footer,
  html body .ph-legacy-footer .row,
  html body .ph-legacy-footer #menuarticles,
  html body .ph-legacy-footer #menuarticles *,
  html body .ph-legacy-footer .vc-content_shopinfo,
  html body .ph-legacy-footer .vc-content_shopinfo *,
  html body .ph-legacy-footer .eshopContact,
  html body .ph-legacy-footer .eshopContact *,
  html body .ph-legacy-footer #extraAdvantage,
  html body .ph-legacy-footer #extraAdvantage * {
    text-align: left !important;
  }

  html body #footer .ph-legacy-footer .vc-content_shopinfo .header,
  html body #footer .ph-legacy-footer .vc-content_shopinfo .header span,
  html body .ph-legacy-footer .vc-content_shopinfo .header,
  html body .ph-legacy-footer .vc-content_shopinfo .header span {
    text-align: left !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
    padding-left: 0 !important;
  }

  /* Keep a clear break before “Poradíme vám”, while staying left aligned. */
  html body #footer .ph-legacy-footer #extraAdvantage,
  html body .ph-legacy-footer #extraAdvantage {
    margin-top: 28px !important;
    padding-top: 0 !important;
  }
}

/* ========================================================================== 
   V81 — mobile footer parity: cart = homepage
   Based DIRECTLY on V78.
   - same payment/delivery block and icon sizing
   - same links/contact typography and colors
   - same 2x2 benefit tiles
   - no changes to text inside benefit tiles
   ========================================================================== */

@media (max-width: 900px) {
  /* The legacy project footer must have the same black canvas on every page,
     including cart / ordering pages. */
  html body .ph-legacy-footer,
  html body.type-cart .ph-legacy-footer,
  html body.type-order .ph-legacy-footer,
  html body.ordering-process .ph-legacy-footer,
  html body[class*="ordering-process"] .ph-legacy-footer {
    box-sizing: border-box !important;
    width: 100% !important;
    max-width: none !important;
    margin: 0 !important;
    padding: 34px 18px 30px !important;
    background: #151515 !important;
    color: #fff !important;
  }

  html body .ph-legacy-footer > .row {
    display: grid !important;
    width: 100% !important;
    max-width: none !important;
    grid-template-columns: 1fr !important;
    gap: 30px !important;
    margin: 0 !important;
    padding: 0 !important;
  }

  html body .ph-legacy-footer .delivery_payment-container,
  html body .ph-legacy-footer #menuarticles,
  html body .ph-legacy-footer .vc-content_shopinfo {
    display: block !important;
    width: 100% !important;
    min-width: 0 !important;
    margin: 0 !important;
    padding: 0 !important;
    text-align: left !important;
  }

  /* Payment / delivery headings and compact icons exactly like homepage. */
  html body .ph-legacy-footer .delivery_payment-container h2,
  html body .ph-legacy-footer .delivery_payment-container h2 span {
    display: block !important;
    margin: 0 0 14px !important;
    padding: 0 !important;
    color: #fff !important;
    -webkit-text-fill-color: #fff !important;
    font-size: 20px !important;
    font-weight: 800 !important;
    line-height: 1.2 !important;
    text-align: left !important;
  }

  html body .ph-legacy-footer .vc-content_deliverymethods {
    margin-top: 22px !important;
  }

  html body .ph-legacy-footer .delivery_payment-container .ico {
    display: flex !important;
    flex-wrap: wrap !important;
    align-items: center !important;
    justify-content: flex-start !important;
    gap: 10px !important;
    margin: 0 !important;
    padding: 0 !important;
  }

  html body .ph-legacy-footer .delivery_payment-container .ico span {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    margin: 0 !important;
    padding: 0 !important;
  }

  html body .ph-legacy-footer .delivery_payment-container .ico span:empty {
    display: none !important;
  }

  html body .ph-legacy-footer .delivery_payment-container .ico img {
    display: block !important;
    width: auto !important;
    max-width: 88px !important;
    height: 48px !important;
    max-height: 48px !important;
    margin: 0 !important;
    padding: 4px !important;
    border: 0 !important;
    border-radius: 6px !important;
    background: #fff !important;
    object-fit: contain !important;
  }

  /* Links section: same homepage layout, no checkout-specific bullets/colors. */
  html body .ph-legacy-footer #menuarticles .header,
  html body .ph-legacy-footer #menuarticles .header span,
  html body .ph-legacy-footer .vc-content_shopinfo .header,
  html body .ph-legacy-footer .vc-content_shopinfo .header span {
    display: block !important;
    margin: 0 0 16px !important;
    padding: 0 !important;
    color: #fff !important;
    -webkit-text-fill-color: #fff !important;
    font-size: 20px !important;
    font-weight: 800 !important;
    line-height: 1.2 !important;
    text-align: left !important;
  }

  html body .ph-legacy-footer #menuarticles ul {
    margin: 0 !important;
    padding: 0 !important;
    list-style: none !important;
  }

  html body .ph-legacy-footer #menuarticles li {
    margin: 0 0 11px !important;
    padding: 0 !important;
    list-style: none !important;
  }

  html body .ph-legacy-footer #menuarticles li::before,
  html body .ph-legacy-footer #menuarticles li::marker {
    content: none !important;
    display: none !important;
  }

  html body .ph-legacy-footer #menuarticles a,
  html body .ph-legacy-footer #menuarticles a:link,
  html body .ph-legacy-footer #menuarticles a:visited,
  html body .ph-legacy-footer .eshopContact,
  html body .ph-legacy-footer .eshopContact *,
  html body .ph-legacy-footer .eshopContact a,
  html body .ph-legacy-footer .eshopContact a:link,
  html body .ph-legacy-footer .eshopContact a:visited {
    color: #fff !important;
    -webkit-text-fill-color: #fff !important;
    font-size: 16px !important;
    line-height: 1.55 !important;
    text-align: left !important;
  }

  html body .ph-legacy-footer #menuarticles a.ph-v76-complaint,
  html body .ph-legacy-footer #menuarticles a.ph-v76-complaint:link,
  html body .ph-legacy-footer #menuarticles a.ph-v76-complaint:visited,
  html body .ph-legacy-footer #menuarticles a.ph-v76-complaint * {
    color: var(--ph-orange, #f6b900) !important;
    -webkit-text-fill-color: var(--ph-orange, #f6b900) !important;
    font-weight: 800 !important;
  }

  html body .ph-legacy-footer .eshopContact {
    display: block !important;
    width: 100% !important;
    margin: 0 !important;
    padding: 0 !important;
  }

  html body .ph-legacy-footer .eshopContact .prvni,
  html body .ph-legacy-footer .eshopContact .druhy {
    display: block !important;
    width: 100% !important;
    margin: 0 !important;
    padding: 0 !important;
    text-align: left !important;
  }

  html body .ph-legacy-footer .eshopContact .druhy {
    margin-top: 16px !important;
  }

  html body .ph-legacy-footer .eshopContact .druhy a {
    display: block !important;
    margin: 0 0 2px !important;
  }

  /* Keep the V78 benefit tiles and their internal text untouched; only make
     sure the CART gets the same 2x2 tile container and tile chrome. */
  html body .ph-legacy-footer #extraAdvantage,
  html body.type-cart #extraAdvantage,
  html body.type-order #extraAdvantage,
  html body.ordering-process #extraAdvantage,
  html body[class*="ordering-process"] #extraAdvantage {
    display: grid !important;
    width: 100% !important;
    max-width: none !important;
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 8px !important;
    margin: 28px 0 0 !important;
    padding: 0 !important;
  }

  html body .ph-legacy-footer #extraAdvantage .advan,
  html body.type-cart #extraAdvantage .advan,
  html body.type-order #extraAdvantage .advan,
  html body.ordering-process #extraAdvantage .advan,
  html body[class*="ordering-process"] #extraAdvantage .advan {
    display: flex !important;
    min-width: 0 !important;
    min-height: 84px !important;
    align-items: center !important;
    margin: 0 !important;
    padding: 14px 12px !important;
    border: 1px solid #373737 !important;
    border-radius: 10px !important;
    background: #202020 !important;
    color: #fff !important;
    -webkit-text-fill-color: #fff !important;
    box-sizing: border-box !important;
  }

  html body .ph-legacy-footer #extraAdvantage .advan a,
  html body .ph-legacy-footer #extraAdvantage .advan span,
  html body.type-cart #extraAdvantage .advan a,
  html body.type-cart #extraAdvantage .advan span,
  html body.type-order #extraAdvantage .advan a,
  html body.type-order #extraAdvantage .advan span {
    color: #fff !important;
    -webkit-text-fill-color: #fff !important;
    text-decoration: none !important;
  }
}

/* ========================================================================== 
   V82 — desktop footer contact alignment only
   Based directly on V81.
   - desktop homepage: Kontakt heading aligns with contact text below
   - desktop cart/order pages: same alignment
   - mobile footer is untouched
   ========================================================================== */
@media (min-width: 901px) {
  html body #footer .ph-legacy-footer .vc-content_shopinfo,
  html body #footer .ph-legacy-footer .vc-content_shopinfo .inner,
  html body #footer .ph-legacy-footer .vc-content_shopinfo .header,
  html body #footer .ph-legacy-footer .vc-content_shopinfo .header span,
  html body #footer .ph-legacy-footer .vc-content_shopinfo .content,
  html body #footer .ph-legacy-footer .vc-content_shopinfo .eshopContact,
  html body #footer .ph-legacy-footer .vc-content_shopinfo .eshopContact *,
  html body .ph-legacy-footer .vc-content_shopinfo,
  html body .ph-legacy-footer .vc-content_shopinfo .inner,
  html body .ph-legacy-footer .vc-content_shopinfo .header,
  html body .ph-legacy-footer .vc-content_shopinfo .header span,
  html body .ph-legacy-footer .vc-content_shopinfo .content,
  html body .ph-legacy-footer .vc-content_shopinfo .eshopContact,
  html body .ph-legacy-footer .vc-content_shopinfo .eshopContact * {
    text-align: left !important;
  }

  html body #footer .ph-legacy-footer .vc-content_shopinfo .header,
  html body #footer .ph-legacy-footer .vc-content_shopinfo .header span,
  html body .ph-legacy-footer .vc-content_shopinfo .header,
  html body .ph-legacy-footer .vc-content_shopinfo .header span {
    margin-left: 0 !important;
    margin-right: 0 !important;
    padding-left: 0 !important;
    padding-right: 0 !important;
  }

  html body #footer .ph-legacy-footer .vc-content_shopinfo .eshopContact .prvni,
  html body #footer .ph-legacy-footer .vc-content_shopinfo .eshopContact .druhy,
  html body .ph-legacy-footer .vc-content_shopinfo .eshopContact .prvni,
  html body .ph-legacy-footer .vc-content_shopinfo .eshopContact .druhy {
    margin-left: 0 !important;
    margin-right: 0 !important;
    padding-left: 0 !important;
    padding-right: 0 !important;
    text-align: left !important;
  }
}

/* ========================================================================== 
   V83 — desktop footer parity with mobile visual style
   Based directly on V82.
   - homepage + cart desktop footer use the same compact visual language
   - links block and contact block sit next to each other
   - all 4 benefit tiles are in one row
   - mobile footer stays unchanged
   ========================================================================== */
@media (min-width: 901px) {
  html body #footer .ph-legacy-footer,
  html body .ph-legacy-footer,
  html body.type-cart .ph-legacy-footer,
  html body.type-order .ph-legacy-footer,
  html body.ordering-process .ph-legacy-footer,
  html body[class*="ordering-process"] .ph-legacy-footer {
    box-sizing: border-box !important;
    width: 100% !important;
    max-width: none !important;
    margin: 0 !important;
    padding: 44px 0 34px !important;
    background: #151515 !important;
    color: #fff !important;
  }

  html body #footer .ph-legacy-footer > .row,
  html body .ph-legacy-footer > .row {
    display: grid !important;
    width: min(100%, var(--ph-container)) !important;
    max-width: none !important;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) !important;
    grid-template-areas:
      "payments payments"
      "links contact" !important;
    align-items: start !important;
    gap: 34px clamp(28px, 4vw, 64px) !important;
    margin: 0 auto !important;
    padding: 0 var(--ph-gutter) !important;
  }

  html body #footer .ph-legacy-footer .delivery_payment-container,
  html body .ph-legacy-footer .delivery_payment-container {
    grid-area: payments !important;
    display: block !important;
    width: 100% !important;
    min-width: 0 !important;
    max-width: none !important;
    margin: 0 !important;
    padding: 0 !important;
    float: none !important;
    clear: both !important;
    text-align: left !important;
  }

  html body #footer .ph-legacy-footer #menuarticles,
  html body .ph-legacy-footer #menuarticles {
    grid-area: links !important;
    display: block !important;
    width: 100% !important;
    min-width: 0 !important;
    max-width: none !important;
    margin: 0 !important;
    padding: 0 !important;
    float: none !important;
    text-align: left !important;
    justify-self: stretch !important;
    align-self: start !important;
  }

  html body #footer .ph-legacy-footer .vc-content_shopinfo,
  html body #footer .ph-legacy-footer .vc-content_shopinfo .inner,
  html body #footer .ph-legacy-footer .vc-content_shopinfo .content,
  html body .ph-legacy-footer .vc-content_shopinfo,
  html body .ph-legacy-footer .vc-content_shopinfo .inner,
  html body .ph-legacy-footer .vc-content_shopinfo .content {
    grid-area: contact !important;
    display: block !important;
    width: 100% !important;
    min-width: 0 !important;
    max-width: none !important;
    margin: 0 !important;
    padding: 0 !important;
    float: none !important;
    clear: none !important;
    text-align: left !important;
    justify-self: stretch !important;
    align-self: start !important;
  }

  html body #footer .ph-legacy-footer .delivery_payment-container h2,
  html body #footer .ph-legacy-footer .delivery_payment-container h2 span,
  html body .ph-legacy-footer .delivery_payment-container h2,
  html body .ph-legacy-footer .delivery_payment-container h2 span,
  html body #footer .ph-legacy-footer #menuarticles .header,
  html body #footer .ph-legacy-footer #menuarticles .header span,
  html body #footer .ph-legacy-footer .vc-content_shopinfo .header,
  html body #footer .ph-legacy-footer .vc-content_shopinfo .header span,
  html body .ph-legacy-footer #menuarticles .header,
  html body .ph-legacy-footer #menuarticles .header span,
  html body .ph-legacy-footer .vc-content_shopinfo .header,
  html body .ph-legacy-footer .vc-content_shopinfo .header span {
    display: block !important;
    width: auto !important;
    margin: 0 0 16px !important;
    padding: 0 !important;
    float: none !important;
    color: #fff !important;
    -webkit-text-fill-color: #fff !important;
    font-size: 20px !important;
    font-weight: 800 !important;
    line-height: 1.2 !important;
    text-align: left !important;
  }

  html body #footer .ph-legacy-footer .vc-content_deliverymethods,
  html body .ph-legacy-footer .vc-content_deliverymethods {
    margin-top: 22px !important;
  }

  html body #footer .ph-legacy-footer .delivery_payment-container .ico,
  html body .ph-legacy-footer .delivery_payment-container .ico {
    display: flex !important;
    flex-wrap: wrap !important;
    align-items: center !important;
    justify-content: flex-start !important;
    gap: 10px !important;
    margin: 0 !important;
    padding: 0 !important;
  }

  html body #footer .ph-legacy-footer .delivery_payment-container .ico span,
  html body .ph-legacy-footer .delivery_payment-container .ico span {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    margin: 0 !important;
    padding: 0 !important;
  }

  html body #footer .ph-legacy-footer .delivery_payment-container .ico img,
  html body .ph-legacy-footer .delivery_payment-container .ico img {
    display: block !important;
    width: auto !important;
    max-width: 88px !important;
    height: 48px !important;
    max-height: 48px !important;
    margin: 0 !important;
    padding: 4px !important;
    border: 0 !important;
    border-radius: 6px !important;
    background: #fff !important;
    object-fit: contain !important;
  }

  html body #footer .ph-legacy-footer #menuarticles ul,
  html body .ph-legacy-footer #menuarticles ul {
    margin: 0 !important;
    padding: 0 !important;
    list-style: none !important;
  }

  html body #footer .ph-legacy-footer #menuarticles li,
  html body .ph-legacy-footer #menuarticles li {
    margin: 0 0 11px !important;
    padding: 0 !important;
    list-style: none !important;
  }

  html body #footer .ph-legacy-footer #menuarticles li::before,
  html body #footer .ph-legacy-footer #menuarticles li::marker,
  html body .ph-legacy-footer #menuarticles li::before,
  html body .ph-legacy-footer #menuarticles li::marker {
    content: none !important;
    display: none !important;
  }

  html body #footer .ph-legacy-footer #menuarticles a,
  html body #footer .ph-legacy-footer #menuarticles a:link,
  html body #footer .ph-legacy-footer #menuarticles a:visited,
  html body #footer .ph-legacy-footer .eshopContact,
  html body #footer .ph-legacy-footer .eshopContact *,
  html body #footer .ph-legacy-footer .eshopContact a,
  html body #footer .ph-legacy-footer .eshopContact a:link,
  html body #footer .ph-legacy-footer .eshopContact a:visited,
  html body .ph-legacy-footer #menuarticles a,
  html body .ph-legacy-footer #menuarticles a:link,
  html body .ph-legacy-footer #menuarticles a:visited,
  html body .ph-legacy-footer .eshopContact,
  html body .ph-legacy-footer .eshopContact *,
  html body .ph-legacy-footer .eshopContact a,
  html body .ph-legacy-footer .eshopContact a:link,
  html body .ph-legacy-footer .eshopContact a:visited {
    color: #fff !important;
    -webkit-text-fill-color: #fff !important;
    font-size: 16px !important;
    line-height: 1.55 !important;
    text-align: left !important;
  }

  html body #footer .ph-legacy-footer #menuarticles a.ph-v76-complaint,
  html body #footer .ph-legacy-footer #menuarticles a.ph-v76-complaint:link,
  html body #footer .ph-legacy-footer #menuarticles a.ph-v76-complaint:visited,
  html body #footer .ph-legacy-footer #menuarticles a.ph-v76-complaint *,
  html body .ph-legacy-footer #menuarticles a.ph-v76-complaint,
  html body .ph-legacy-footer #menuarticles a.ph-v76-complaint:link,
  html body .ph-legacy-footer #menuarticles a.ph-v76-complaint:visited,
  html body .ph-legacy-footer #menuarticles a.ph-v76-complaint * {
    color: var(--ph-yellow, #f6b900) !important;
    -webkit-text-fill-color: var(--ph-yellow, #f6b900) !important;
    font-weight: 800 !important;
  }

  html body #footer .ph-legacy-footer .eshopContact,
  html body .ph-legacy-footer .eshopContact {
    display: block !important;
    width: 100% !important;
    margin: 0 !important;
    padding: 0 !important;
    text-align: left !important;
  }

  html body #footer .ph-legacy-footer .eshopContact .prvni,
  html body #footer .ph-legacy-footer .eshopContact .druhy,
  html body .ph-legacy-footer .eshopContact .prvni,
  html body .ph-legacy-footer .eshopContact .druhy {
    display: block !important;
    width: 100% !important;
    margin: 0 !important;
    padding: 0 !important;
    float: none !important;
    clear: both !important;
    text-align: left !important;
  }

  html body #footer .ph-legacy-footer .eshopContact .druhy,
  html body .ph-legacy-footer .eshopContact .druhy {
    margin-top: 16px !important;
  }

  html body #footer .ph-legacy-footer .eshopContact .druhy a,
  html body .ph-legacy-footer .eshopContact .druhy a {
    display: block !important;
    margin: 0 0 2px !important;
  }

  html body #footer .ph-legacy-footer #extraAdvantage,
  html body .ph-legacy-footer #extraAdvantage,
  html body.type-cart #extraAdvantage,
  html body.type-order #extraAdvantage,
  html body.ordering-process #extraAdvantage,
  html body[class*="ordering-process"] #extraAdvantage {
    display: grid !important;
    width: min(100%, var(--ph-container)) !important;
    max-width: none !important;
    grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
    gap: 12px !important;
    margin: 34px auto 0 !important;
    padding: 0 var(--ph-gutter) !important;
  }

  html body #footer .ph-legacy-footer #extraAdvantage .advan,
  html body .ph-legacy-footer #extraAdvantage .advan,
  html body.type-cart #extraAdvantage .advan,
  html body.type-order #extraAdvantage .advan,
  html body.ordering-process #extraAdvantage .advan,
  html body[class*="ordering-process"] #extraAdvantage .advan {
    display: flex !important;
    min-width: 0 !important;
    min-height: 84px !important;
    align-items: center !important;
    justify-content: flex-start !important;
    margin: 0 !important;
    padding: 14px 18px !important;
    border: 1px solid #373737 !important;
    border-right: 1px solid #373737 !important;
    border-radius: 10px !important;
    background: #202020 !important;
    color: #fff !important;
    -webkit-text-fill-color: #fff !important;
    box-sizing: border-box !important;
    text-align: left !important;
  }

  html body #footer .ph-legacy-footer #extraAdvantage .advan a,
  html body #footer .ph-legacy-footer #extraAdvantage .advan span,
  html body .ph-legacy-footer #extraAdvantage .advan a,
  html body .ph-legacy-footer #extraAdvantage .advan span,
  html body.type-cart #extraAdvantage .advan a,
  html body.type-cart #extraAdvantage .advan span,
  html body.type-order #extraAdvantage .advan a,
  html body.type-order #extraAdvantage .advan span {
    color: #fff !important;
    -webkit-text-fill-color: #fff !important;
    text-decoration: none !important;
  }
}