/* ==========================================================================
   InfraPlus 9.16 — "Cinematic" site layer (Claude, 2026-10-28)
   Loads AFTER infraplus-redesign-v730.css. Every rule is gated by html.ipx
   (class set by infraplus-site-v9-2.js) → remove the JS/CSS = instant rollback.
   Visual only: no text, URL, price, title or structured data is changed.
   Palette: ink #0b0c0e · text #1d1d1f · grey #6e6e73/#86868b · line #e8e8ed
            lime #b8f03a (#dcff86 → #9bd61f) · volt #3d6bff → #8b5cf6 (mini)
   ========================================================================== */

html.ipx {
  --x-ink: #0b0c0e;
  --x-text: #1d1d1f;
  --x-body: #424245;
  --x-mute: #6e6e73;
  --x-mute2: #86868b;
  --x-line: rgba(0, 0, 0, .08);
  --x-soft: #f5f5f7;
  --x-lime: #b8f03a;
  --x-lime-hi: #dcff86;
  --x-lime-lo: #9bd61f;
  --x-green: #62bb1a;
  --x-volt-a: #3d6bff;
  --x-volt-b: #8b5cf6;
  --x-ease: cubic-bezier(.2, .7, .1, 1);
  --x-ease-out: cubic-bezier(.16, 1, .3, 1);
  --x-font: 'IP Inter', Inter, -apple-system, BlinkMacSystemFont, 'SF Pro Display', 'Segoe UI', Roboto, Arial, sans-serif;
  --x-r: 24px;
}

html.ipx.ipx.ipx body {
  background: #fff;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
}

html.ipx.ipx.ipx ::selection { background: var(--x-lime); color: var(--x-ink); }

/* --------------------------------------------------------------------------
   1. Announcement strip + utility row
   -------------------------------------------------------------------------- */
html.ipx.ipx.ipx body.template-11 .site-msg.information {
  min-height: 34px;
  color: rgba(255, 255, 255, .78) !important;
  background: var(--x-ink) !important;
}
html.ipx.ipx.ipx body.template-11 .site-msg.information .container { min-height: 34px; padding-block: 6px; }
html.ipx.ipx.ipx body.template-11 .site-msg.information .text {
  font-size: 12px;
  font-weight: 500;
  letter-spacing: 0;
  color: rgba(255, 255, 255, .78);
}
html.ipx.ipx.ipx body.template-11 .site-msg.information .text strong,
html.ipx.ipx.ipx body.template-11 .site-msg.information .text b { color: #fff; font-weight: 650; letter-spacing: .06em; }
html.ipx.ipx.ipx body.template-11 .site-msg.information .text a {
  color: var(--x-lime) !important;
  font-weight: 600;
  text-decoration: none;
  background: none !important;
}
html.ipx.ipx.ipx body.template-11 .site-msg.information .text a:hover { color: var(--x-lime-hi) !important; }
html.ipx.ipx.ipx body.template-11 .site-msg.information .close,
html.ipx.ipx.ipx body.template-11 .site-msg.information .close::before,
html.ipx.ipx.ipx body.template-11 .site-msg.information .close::after { color: rgba(255, 255, 255, .6); }

html.ipx.ipx.ipx body.template-11 .top-navigation-bar {
  height: 34px;
  min-height: 34px;
  color: var(--x-mute);
  background: #fff;
  border: 0;
  font-size: 11.5px;
  font-weight: 500;
  letter-spacing: .01em;
}
html.ipx.ipx.ipx body.template-11 .top-navigation-bar a,
html.ipx.ipx.ipx body.template-11 .top-navigation-bar .top-nav-button,
html.ipx.ipx.ipx body.template-11 .top-navigation-bar button { color: var(--x-mute) !important; transition: color .2s; }
html.ipx.ipx.ipx body.template-11 .top-navigation-bar a:hover,
html.ipx.ipx.ipx body.template-11 .top-navigation-bar .top-nav-button:hover { color: var(--x-text) !important; }
html.ipx.ipx.ipx body.template-11 .top-navigation-bar svg,
html.ipx.ipx.ipx body.template-11 .top-navigation-bar [class*="icon"]::before { opacity: .7; }

/* --------------------------------------------------------------------------
   2. Header — frosted glass, borderless, hairline only after scroll
   -------------------------------------------------------------------------- */
html.ipx.ipx.ipx body.template-11 #header {
  background: rgba(255, 255, 255, .72) !important;
  backdrop-filter: saturate(180%) blur(20px) !important;
  -webkit-backdrop-filter: saturate(180%) blur(20px) !important;
  border-bottom: 1px solid transparent !important;
  box-shadow: none !important;
  transition: background-color .35s var(--x-ease), border-color .35s var(--x-ease), box-shadow .35s var(--x-ease);
}
html.ipx.ipx.ipx.ip-scrolled body.template-11 #header {
  background: rgba(255, 255, 255, .8) !important;
  border-bottom-color: rgba(0, 0, 0, .06) !important;
  box-shadow: 0 10px 30px -18px rgba(11, 12, 14, .22) !important;
}
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  html.ipx.ipx.ipx body.template-11 #header { background: rgba(255, 255, 255, .97) !important; }
}

/* top-level menu links */
@media (min-width: 768px) {
  html.ipx.ipx.ipx body.template-11 #navigation .menu-level-1 > li > a {
    position: relative;
    color: var(--x-text) !important;
    opacity: .78;
    font-size: 13.5px !important;
    font-weight: 500 !important;
    letter-spacing: -.005em !important;
    background: transparent !important;
    border: 0 !important;
    box-shadow: none !important;
    transition: opacity .25s var(--x-ease);
  }
  html.ipx.ipx.ipx body.template-11 #navigation .menu-level-1 > li > a::after {
    content: "";
    position: absolute;
    left: 50%;
    bottom: 10px;
    width: 0;
    height: 2px;
    border-radius: 2px;
    background: linear-gradient(90deg, var(--x-lime), var(--x-lime-lo));
    transform: translateX(-50%);
    transition: width .35s var(--x-ease-out);
    pointer-events: none;
  }
  html.ipx.ipx.ipx body.template-11 #navigation .menu-level-1 > li > a:hover,
  html.ipx.ipx.ipx body.template-11 #navigation .menu-level-1 > li:focus-within > a,
  html.ipx.ipx.ipx body.template-11 #navigation .menu-level-1 > li.active > a,
  html.ipx.ipx.ipx body.template-11 #navigation .menu-level-1 > li.ip-is-current > a { opacity: 1; }
  html.ipx.ipx.ipx body.template-11 #navigation .menu-level-1 > li > a:hover::after,
  html.ipx.ipx.ipx body.template-11 #navigation .menu-level-1 > li.active > a::after,
  html.ipx.ipx.ipx body.template-11 #navigation .menu-level-1 > li.ip-is-current > a::after { width: 18px; }
}

/* header buttons (search, cart) */
html.ipx.ipx.ipx body.template-11 #header .navigation-buttons .btn,
html.ipx.ipx.ipx body.template-11 #header .navigation-buttons a,
html.ipx.ipx.ipx body.template-11 #header .search .btn {
  border: 0 !important;
  box-shadow: none !important;
  background-color: var(--x-soft) !important;
  color: var(--x-text) !important;
  border-radius: 999px !important;
  transition: background-color .25s var(--x-ease), color .25s var(--x-ease), transform .25s var(--x-ease);
}
html.ipx.ipx.ipx body.template-11 #header .navigation-buttons .btn:hover,
html.ipx.ipx.ipx body.template-11 #header .navigation-buttons a:hover {
  background-color: var(--x-ink) !important;
  color: #fff !important;
}
html.ipx.ipx.ipx body.template-11 #header .navigation-buttons a:hover *,
html.ipx.ipx.ipx body.template-11 #header .navigation-buttons .btn:hover * { color: #fff !important; }
html.ipx.ipx.ipx body.template-11 #header .cart-count .cart-price { font-weight: 600; letter-spacing: -.01em; }
html.ipx.ipx.ipx body.template-11 #header .cart-count i,
html.ipx.ipx.ipx body.template-11 #header .cart-count .cart-count-items {
  background: var(--x-lime) !important;
  color: var(--x-ink) !important;
  font-weight: 700;
}

/* scroll progress (ip7) */
html.ipx.ipx.ipx .ip-progress {
  height: 2px !important;
  background: linear-gradient(90deg, var(--x-lime), var(--x-lime-lo) 60%, var(--x-volt-a)) !important;
  box-shadow: 0 0 12px rgba(184, 240, 58, .55);
}

/* --------------------------------------------------------------------------
   3. Logo — drawn on load, alive on hover (JS adds pathLength + .ipx-draw)
   -------------------------------------------------------------------------- */
html.ipx.ipx.ipx .ip-lockup svg { overflow: visible; }
html.ipx.ipx.ipx .ip-lockup .ipx-mark path { stroke-dasharray: 1; stroke-dashoffset: 0; }
html.ipx.ipx.ipx .ip-lockup.ipx-draw .ipx-hex {
  transform-box: fill-box;
  transform-origin: 50% 50%;
  animation: ipxHex .9s var(--x-ease-out) both;
}
html.ipx.ipx.ipx .ip-lockup.ipx-draw .ipx-mark path { animation: ipxDraw 1.1s var(--x-ease-out) both; }
html.ipx.ipx.ipx .ip-lockup.ipx-draw .ipx-mark path:nth-child(1) { animation-delay: .25s; }
html.ipx.ipx.ipx .ip-lockup.ipx-draw .ipx-mark path:nth-child(2) { animation-delay: .55s; }
html.ipx.ipx.ipx .ip-lockup.ipx-draw .ipx-mark path:nth-child(3) { animation-delay: .68s; }
html.ipx.ipx.ipx .ip-lockup.ipx-draw .ipx-mark path:nth-child(4) { animation-delay: .81s; }
html.ipx.ipx.ipx .ip-lockup .ip-logo__dot { transform-box: fill-box; transform-origin: 50% 50%; }
html.ipx.ipx.ipx .ip-lockup.ipx-draw .ip-logo__dot { animation: ipxDot .7s var(--x-ease-out) 1.05s both; }
html.ipx.ipx.ipx .ip-lockup.ipx-draw text { animation: ipxFade .8s var(--x-ease) .2s both; }

/* hover: waves pulse outward one after another, dot glows */
html.ipx.ipx.ipx a:hover > .ip-lockup .ipx-mark path:nth-child(n+2),
html.ipx.ipx.ipx .ip-footer-brandmark:hover .ipx-mark path:nth-child(n+2) { animation: ipxWave 1.2s var(--x-ease) both; }
html.ipx.ipx.ipx a:hover > .ip-lockup .ipx-mark path:nth-child(3),
html.ipx.ipx.ipx .ip-footer-brandmark:hover .ipx-mark path:nth-child(3) { animation-delay: .12s; }
html.ipx.ipx.ipx a:hover > .ip-lockup .ipx-mark path:nth-child(4),
html.ipx.ipx.ipx .ip-footer-brandmark:hover .ipx-mark path:nth-child(4) { animation-delay: .24s; }
html.ipx.ipx.ipx a:hover > .ip-lockup .ip-logo__dot { animation: ipxDot .6s var(--x-ease-out) both; filter: drop-shadow(0 0 3px rgba(120, 217, 43, .9)); }

@keyframes ipxDraw { from { stroke-dashoffset: 1; } to { stroke-dashoffset: 0; } }
@keyframes ipxHex { from { opacity: 0; transform: scale(.82) rotate(-8deg); } to { opacity: 1; transform: none; } }
@keyframes ipxDot { 0% { transform: scale(0); } 60% { transform: scale(1.6); } 100% { transform: scale(1); } }
@keyframes ipxFade { from { opacity: 0; } to { opacity: 1; } }
@keyframes ipxWave { 0%, 100% { opacity: 1; } 45% { opacity: .25; } }

/* --------------------------------------------------------------------------
   4. Megamenu — frosted sheet, borderless
   -------------------------------------------------------------------------- */
@media (min-width: 992px) {
  html.ipx.ipx.ipx body.template-11 #navigation .ip-products-mega {
    background: rgba(255, 255, 255, .9) !important;
    backdrop-filter: saturate(180%) blur(24px);
    -webkit-backdrop-filter: saturate(180%) blur(24px);
    border: 0 !important;
    border-radius: 0 0 28px 28px !important;
    box-shadow: 0 40px 80px -40px rgba(11, 12, 14, .35), 0 1px 0 rgba(0, 0, 0, .05) inset !important;
  }
  html.ipx.ipx.ipx body.template-11 #navigation .ip-products-mega a { transition: color .2s, opacity .2s, transform .3s var(--x-ease-out); }
  html.ipx.ipx.ipx body.template-11 #navigation .ip-products-mega .menu-level-3 a:hover { transform: translateX(3px); }
}

/* --------------------------------------------------------------------------
   5. Breadcrumbs
   -------------------------------------------------------------------------- */
html.ipx.ipx.ipx body.template-11 .breadcrumbs,
html.ipx.ipx.ipx body.template-11 #navigation-breadcrumbs,
html.ipx.ipx.ipx body.template-11 .breadcrumbs-wrapper {
  background: transparent !important;
  border: 0 !important;
  box-shadow: none !important;
}
html.ipx.ipx.ipx body.template-11 .breadcrumbs a,
html.ipx.ipx.ipx body.template-11 .breadcrumbs span:not(.navigation-bullet):not(.sr-only) {
  color: var(--x-mute2) !important;
  font-size: 12px !important;
  font-weight: 500 !important;
  background: transparent !important;
  border: 0 !important;
}
html.ipx.ipx.ipx body.template-11 .breadcrumbs a:hover { color: var(--x-text) !important; }
html.ipx.ipx.ipx body.template-11 .breadcrumbs > span:last-of-type span:not(.navigation-bullet),
html.ipx.ipx.ipx body.template-11 .breadcrumbs [aria-current] { color: var(--x-text) !important; }

/* --------------------------------------------------------------------------
   6. Category hero
   -------------------------------------------------------------------------- */
html.ipx.ipx.ipx body.type-category .category-top { padding-top: clamp(8px, 2vw, 28px); }

html.ipx.ipx.ipx .ipx-eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  margin: 0 0 18px;
  color: var(--x-mute);
  font: 600 11.5px/1 var(--x-font);
  letter-spacing: .09em;
  text-transform: uppercase;
}
html.ipx.ipx.ipx .ipx-eyebrow::before {
  content: "";
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: #78d92b;
  box-shadow: 0 0 0 4px rgba(120, 217, 43, .16);
  animation: ipxPulse 2.6s var(--x-ease) infinite;
}
html.ipx.ipx.ipx .ipx-eyebrow b { color: var(--x-text); font-weight: 650; }
@keyframes ipxPulse { 0%, 100% { box-shadow: 0 0 0 0 rgba(120, 217, 43, .35); } 60% { box-shadow: 0 0 0 7px rgba(120, 217, 43, 0); } }

html.ipx.ipx.ipx body.type-category .category-title,
html.ipx.ipx.ipx body.type-category #content h1 {
  max-width: 18ch;
  margin: 0 0 22px !important;
  font: 700 clamp(40px, 5.6vw, 76px)/1.02 var(--x-font) !important;
  letter-spacing: -.048em !important;
  color: var(--x-ink);
  background: linear-gradient(180deg, #0b0c0e 30%, #7c818a 118%);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  padding-bottom: .06em;
}
html.ipx.ipx.ipx body.type-category .category-perex {
  max-width: 720px;
  margin-bottom: clamp(28px, 4vw, 56px);
}
html.ipx.ipx.ipx body.type-category .category-perex p {
  color: var(--x-mute) !important;
  font-size: clamp(16.3px, 1.35vw, 19.2px) !important;
  line-height: 1.55 !important;
  letter-spacing: -.012em;
}
html.ipx.ipx.ipx body.type-category .category-perex p:first-child,
html.ipx.ipx.ipx body.type-category .category-perex .lead { color: var(--x-text) !important; }
html.ipx.ipx.ipx body.type-category .category-perex strong { color: var(--x-text); font-weight: 600; }

/* subcategory tiles → cinematic image tiles with overlaid label */
html.ipx.ipx.ipx body.template-11 .subcategories.with-image { margin-bottom: clamp(36px, 5vw, 72px) !important; }
html.ipx.ipx.ipx body.template-11 .subcategories.with-image > li { padding: 0 6px 12px !important; }
html.ipx.ipx.ipx body.template-11 .subcategories.with-image > li > a {
  position: relative;
  display: block !important;
  overflow: hidden;
  padding: 0 !important;
  aspect-ratio: 4 / 3.4;
  border: 0 !important;
  border-radius: var(--x-r) !important;
  background: #121316 !important;
  box-shadow: none !important;
  isolation: isolate;
  transition: transform .5s var(--x-ease-out);
}
html.ipx.ipx.ipx body.template-11 .subcategories.with-image > li > a .image {
  position: absolute !important;
  inset: 0;
  width: 100% !important;
  height: 100% !important;
  margin: 0 !important;
  padding: 0 !important;
  background: transparent !important;
  border-radius: 0 !important;
}
html.ipx.ipx.ipx body.template-11 .subcategories.with-image > li > a .image img {
  width: 100% !important;
  height: 100% !important;
  max-height: none !important;
  object-fit: cover !important;
  transform: scale(1.01);
  transition: transform 1.1s var(--x-ease-out), filter .6s;
}
html.ipx.ipx.ipx body.template-11 .subcategories.with-image > li > a::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
  background: linear-gradient(180deg, rgba(11, 12, 14, 0) 45%, rgba(11, 12, 14, .78) 100%);
  pointer-events: none;
}
html.ipx.ipx.ipx body.template-11 .subcategories.with-image > li > a .text {
  position: absolute !important;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 2;
  display: flex !important;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 18px 20px !important;
  color: #fff !important;
  background: transparent !important;
  border: 0 !important;
  font: 650 clamp(14px, 1.15vw, 16.5px)/1.25 var(--x-font) !important;
  letter-spacing: -.015em;
  text-align: left !important;
}
html.ipx.ipx.ipx body.template-11 .subcategories.with-image > li > a .text::after {
  content: "";
  flex: 0 0 30px;
  height: 30px;
  border-radius: 50%;
  background: rgba(255, 255, 255, .14) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3E%3Cpath d='M5 10h9m-3.5-3.5L14 10l-3.5 3.5' fill='none' stroke='%23fff' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center/16px no-repeat;
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  transition: background-color .35s var(--x-ease), transform .45s var(--x-ease-out);
}
html.ipx.ipx.ipx body.template-11 .subcategories.with-image > li > a:hover .image img { transform: scale(1.06); }
html.ipx.ipx.ipx body.template-11 .subcategories.with-image > li > a:hover .text::after {
  background-color: var(--x-lime);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3E%3Cpath d='M5 10h9m-3.5-3.5L14 10l-3.5 3.5' fill='none' stroke='%230b0c0e' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  transform: translateX(3px);
}
/* subcategories without image: clean pills */
html.ipx.ipx.ipx body.template-11 .subcategories:not(.with-image) > li > a {
  border: 0 !important;
  border-radius: 999px !important;
  background: var(--x-soft) !important;
  box-shadow: none !important;
  color: var(--x-text) !important;
  font-weight: 600;
}
html.ipx.ipx.ipx body.template-11 .subcategories:not(.with-image) > li > a:hover { background: var(--x-ink) !important; color: #fff !important; }

/* --------------------------------------------------------------------------
   7. Bestsellers strip, filters, sorting — borderless
   -------------------------------------------------------------------------- */
html.ipx.ipx.ipx body.template-11 .products-top-wrapper {
  padding: 0 !important;
  margin-bottom: clamp(32px, 4vw, 56px) !important;
  background: transparent !important;
  border: 0 !important;
  box-shadow: none !important;
}
html.ipx.ipx.ipx body.template-11 .products-top-header,
html.ipx.ipx.ipx body.template-11 #productsTopHeading {
  margin: 0 0 18px !important;
  font: 600 11.5px/1 var(--x-font) !important;
  letter-spacing: .09em !important;
  text-transform: uppercase;
  color: var(--x-mute) !important;
}
html.ipx.ipx.ipx body.template-11 .products-top .product,
html.ipx.ipx.ipx body.template-11 .products-top .product .p {
  background: transparent !important;
  border: 0 !important;
  box-shadow: none !important;
}
html.ipx.ipx.ipx body.template-11 .products-top .product .p {
  padding: 10px !important;
  border-radius: 20px !important;
  transition: background-color .3s var(--x-ease);
}
html.ipx.ipx.ipx body.template-11 .products-top .product .p:hover { background: var(--x-soft) !important; }
html.ipx.ipx.ipx body.template-11 .products-top .product .image { border-radius: 14px !important; overflow: hidden; }
html.ipx.ipx.ipx body.template-11 .products-top-wrapper .button-wrapper .btn {
  border: 0 !important;
  background: var(--x-soft) !important;
  border-radius: 999px !important;
  box-shadow: none !important;
  font-weight: 600;
}

html.ipx.ipx.ipx body.template-11 #filters-wrapper,
html.ipx.ipx.ipx body.template-11 .box-filters {
  background: transparent !important;
  border: 0 !important;
  box-shadow: none !important;
}
html.ipx.ipx.ipx body.template-11 #filters-wrapper {
  padding: 22px 0 !important;
  border-top: 1px solid var(--x-line) !important;
  border-bottom: 1px solid var(--x-line) !important;
  border-radius: 0 !important;
}
html.ipx.ipx.ipx body.template-11 .box-filters .box,
html.ipx.ipx.ipx body.template-11 .box-filters fieldset,
html.ipx.ipx.ipx body.template-11 .box-filters .filter-section {
  background: transparent !important;
  border: 0 !important;
  box-shadow: none !important;
}
html.ipx.ipx.ipx body.template-11 .box-filters h4,
html.ipx.ipx.ipx body.template-11 .box-filters .filter-section h4,
html.ipx.ipx.ipx body.template-11 .box-filters legend {
  color: var(--x-mute) !important;
  font: 600 11px/1.2 var(--x-font) !important;
  letter-spacing: .09em !important;
  text-transform: uppercase;
}
html.ipx.ipx.ipx body.template-11 .box-filters .ui-slider { height: 2px !important; background: rgba(0, 0, 0, .12) !important; border: 0 !important; }
html.ipx.ipx.ipx body.template-11 .box-filters .ui-slider-range { background: var(--x-ink) !important; }
html.ipx.ipx.ipx body.template-11 .box-filters .ui-slider-handle {
  width: 20px !important;
  height: 20px !important;
  top: -9px !important;
  border: 0 !important;
  border-radius: 50% !important;
  background: #fff !important;
  box-shadow: 0 2px 10px rgba(0, 0, 0, .22), 0 0 0 1px rgba(0, 0, 0, .06) !important;
  cursor: grab;
}
html.ipx.ipx.ipx body.template-11 .box-filters label,
html.ipx.ipx.ipx body.template-11 .box-filters .filter-label { border-radius: 999px !important; }

html.ipx.ipx.ipx body.template-11 #category-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  margin: clamp(22px, 3vw, 36px) 0 clamp(18px, 2.4vw, 30px) !important;
  padding: 0 !important;
  background: transparent !important;
  border: 0 !important;
  box-shadow: none !important;
}
html.ipx.ipx.ipx body.template-11 .listSorting__controls {
  display: inline-flex !important;
  gap: 2px;
  padding: 4px !important;
  background: var(--x-soft) !important;
  border: 0 !important;
  border-radius: 999px !important;
  box-shadow: none !important;
}
html.ipx.ipx.ipx body.template-11 .listSorting__controls > li { margin: 0 !important; border: 0 !important; }
html.ipx.ipx.ipx body.template-11 .listSorting__control,
html.ipx.ipx.ipx body.template-11 .listSorting__controls a,
html.ipx.ipx.ipx body.template-11 .listSorting__controls button {
  padding: 9px 16px !important;
  color: var(--x-mute) !important;
  background: transparent !important;
  border: 0 !important;
  border-radius: 999px !important;
  box-shadow: none !important;
  font: 550 13px/1 var(--x-font) !important;
  transition: color .2s, background-color .25s var(--x-ease), box-shadow .25s;
}
html.ipx.ipx.ipx body.template-11 .listSorting__controls a:hover,
html.ipx.ipx.ipx body.template-11 .listSorting__controls button:hover { color: var(--x-text) !important; }
html.ipx.ipx.ipx body.template-11 .listSorting__control--current,
html.ipx.ipx.ipx body.template-11 .listSorting__controls .active > a,
html.ipx.ipx.ipx body.template-11 .listSorting__controls [aria-current],
html.ipx.ipx.ipx body.template-11 .listSorting__controls .current {
  color: var(--x-text) !important;
  background: #fff !important;
  box-shadow: 0 1px 3px rgba(0, 0, 0, .1), 0 0 0 .5px rgba(0, 0, 0, .04) !important;
}
html.ipx.ipx.ipx body.template-11 .listItemsTotal { color: var(--x-mute2) !important; font-size: 12.5px !important; background: none !important; border: 0 !important; }
html.ipx.ipx.ipx body.template-11 .listItemsTotal strong { color: var(--x-text); font-weight: 650; }

/* --------------------------------------------------------------------------
   8. Product cards — borderless, slate image, spotlight, round CTA
   -------------------------------------------------------------------------- */
html.ipx.ipx.ipx body.template-11 #products .product,
html.ipx.ipx.ipx body.template-11 .products-block .product {
  border: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
}
html.ipx.ipx.ipx body.template-11 #products .product .p,
html.ipx.ipx.ipx body.template-11 .products-block .product .p {
  position: relative;
  padding: 0 0 8px !important;
  background: transparent !important;
  border: 0 !important;
  border-radius: 0 !important;
  box-shadow: none !important;
}
html.ipx.ipx.ipx body.template-11 #products .product .p:hover,
html.ipx.ipx.ipx body.template-11 .products-block .product .p:hover { box-shadow: none !important; transform: none !important; }

html.ipx.ipx.ipx body.template-11 #products .product a.image,
html.ipx.ipx.ipx body.template-11 .products-block .product a.image {
  position: relative;
  display: block !important;
  overflow: hidden;
  margin: 0 0 18px !important;
  padding: 0 !important;
  aspect-ratio: 4 / 3;
  border: 0 !important;
  border-radius: 22px !important;
  background: #16171a !important;
  isolation: isolate;
}
html.ipx.ipx.ipx body.template-11 #products .product a.image img,
html.ipx.ipx.ipx body.template-11 .products-block .product a.image img {
  width: 100% !important;
  height: 100% !important;
  max-height: none !important;
  object-fit: cover !important;
  transition: transform 1.1s var(--x-ease-out);
}
html.ipx.ipx.ipx body.template-11 #products .product .p:hover a.image img,
html.ipx.ipx.ipx body.template-11 .products-block .product .p:hover a.image img { transform: scale(1.045); }
/* cursor spotlight (vars from JS); NVIDIA-ish lime light leak */
html.ipx.ipx.ipx body.template-11 #products .product a.image::after,
html.ipx.ipx.ipx body.template-11 .products-block .product a.image::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 2;
  opacity: 0;
  background:
    radial-gradient(420px circle at var(--mx, 50%) var(--my, 40%), rgba(220, 255, 134, .16), transparent 55%),
    linear-gradient(180deg, transparent 60%, rgba(11, 12, 14, .18));
  mix-blend-mode: screen;
  transition: opacity .45s var(--x-ease);
  pointer-events: none;
}
html.ipx.ipx.ipx body.template-11 #products .product .p:hover a.image::after,
html.ipx.ipx.ipx body.template-11 .products-block .product .p:hover a.image::after { opacity: 1; }

html.ipx.ipx.ipx body.template-11 #products .product .p-in,
html.ipx.ipx.ipx body.template-11 #products .product .p-in-in,
html.ipx.ipx.ipx body.template-11 #products .product .p-bottom,
html.ipx.ipx.ipx body.template-11 .products-block .product .p-in,
html.ipx.ipx.ipx body.template-11 .products-block .product .p-bottom {
  padding: 0 4px !important;
  background: transparent !important;
  border: 0 !important;
}
html.ipx.ipx.ipx body.template-11 #products .product a.name,
html.ipx.ipx.ipx body.template-11 .products-block .product a.name {
  display: -webkit-box !important;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  min-height: 2.7em;
  margin: 0 0 8px !important;
  color: var(--x-text) !important;
  font: 600 15.5px/1.35 var(--x-font) !important;
  letter-spacing: -.016em !important;
  text-decoration: none !important;
}
html.ipx.ipx.ipx body.template-11 #products .product a.name:hover span { background: linear-gradient(currentColor, currentColor) 0 100% / 100% 1px no-repeat; }
html.ipx.ipx.ipx body.template-11 #products .product .availability,
html.ipx.ipx.ipx body.template-11 .products-block .product .availability {
  font: 550 12.5px/1.2 var(--x-font) !important;
  letter-spacing: 0 !important;
}
/* listing description in Shoptet comes as one glued string → hide on cards (product pages hold the text) */
html.ipx.ipx.ipx body.template-11 #products .product .p-desc,
html.ipx.ipx.ipx body.template-11 .products-block .product .p-desc { display: none !important; }

html.ipx.ipx.ipx body.template-11 #products .product .p-bottom > div,
html.ipx.ipx.ipx body.template-11 .products-block .product .p-bottom > div {
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  gap: 12px;
  margin-top: 14px !important;
}
html.ipx.ipx.ipx body.template-11 #products .product .prices,
html.ipx.ipx.ipx body.template-11 .products-block .product .prices { padding: 0 !important; }
html.ipx.ipx.ipx body.template-11 #products .product .price-final,
html.ipx.ipx.ipx body.template-11 #products .product .price-final strong,
html.ipx.ipx.ipx body.template-11 .products-block .product .price-final,
html.ipx.ipx.ipx body.template-11 .products-block .product .price-final strong {
  color: var(--x-ink) !important;
  font: 700 20px/1 var(--x-font) !important;
  letter-spacing: -.03em !important;
  font-variant-numeric: tabular-nums;
}
/* Detail button → round arrow (text stays for screen readers) */
html.ipx.ipx.ipx body.template-11 #content .product a.ip-product-detail-button {
  position: relative;
  display: inline-flex !important;
  align-items: center;
  justify-content: center;
  width: 42px !important;
  min-width: 0 !important;
  height: 42px !important;
  padding: 0 !important;
  overflow: hidden;
  border: 0 !important;
  border-radius: 50% !important;
  background: var(--x-ink) !important;
  box-shadow: none !important;
  color: transparent !important;
  transition: background-color .3s var(--x-ease), transform .45s var(--x-ease-out);
}
html.ipx.ipx.ipx body.template-11 #content .product a.ip-product-detail-button span {
  position: absolute !important;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
}
html.ipx.ipx.ipx body.template-11 #content .product a.ip-product-detail-button::before {
  content: "";
  width: 18px;
  height: 18px;
  position: static !important;
  display: block !important;
  width: 18px !important;
  height: 18px !important;
  margin: 0 !important;
  -webkit-mask: none !important;
  mask: none !important;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3E%3Cpath d='M5 10h9m-3.5-3.5L14 10l-3.5 3.5' fill='none' stroke='%23fff' stroke-width='1.9' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center/contain no-repeat !important;
  transition: transform .45s var(--x-ease-out);
}
html.ipx.ipx.ipx body.template-11 #content .product .p:hover a.ip-product-detail-button { background: var(--x-lime) !important; }
html.ipx.ipx.ipx body.template-11 #content .product .p:hover a.ip-product-detail-button::before {
  transform: translateX(2px);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3E%3Cpath d='M5 10h9m-3.5-3.5L14 10l-3.5 3.5' fill='none' stroke='%230b0c0e' stroke-width='1.9' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") !important;
}
html.ipx.ipx.ipx body.template-11 #products .product .p-code,
html.ipx.ipx.ipx body.template-11 .products-block .product .p-code {
  display: block;
  margin: 10px 4px 0 !important;
  color: var(--x-mute2) !important;
  font: 600 10.5px/1 var(--x-font) !important;
  letter-spacing: .08em !important;
  text-transform: uppercase;
  border: 0 !important;
  background: none !important;
}

/* flags (štítky) — glass pills with signal dot, floating on the image */
html.ipx.ipx.ipx body.template-11 .product .flags,
html.ipx.ipx.ipx body.template-11 .p-image .flags,
html.ipx.ipx.ipx body.template-11 .p-detail .flags {
  z-index: 3;
  gap: 6px;
}
html.ipx.ipx.ipx body.template-11 .flag {
  display: inline-flex !important;
  align-items: center;
  gap: 7px;
  padding: 7px 11px 7px 10px !important;
  color: #fff !important;
  background: rgba(11, 12, 14, .62) !important;
  backdrop-filter: saturate(160%) blur(12px);
  -webkit-backdrop-filter: saturate(160%) blur(12px);
  border: 0 !important;
  border-radius: 999px !important;
  box-shadow: 0 0 0 .5px rgba(255, 255, 255, .14) inset !important;
  font: 650 10.5px/1 var(--x-font) !important;
  letter-spacing: .07em !important;
  text-transform: uppercase;
}
html.ipx.ipx.ipx body.template-11 .flag::before {
  content: "";
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--x-lime);
  box-shadow: 0 0 8px rgba(184, 240, 58, .8);
}
html.ipx.ipx.ipx body.template-11 .flag-action::before,
html.ipx.ipx.ipx body.template-11 .flag-discount::before,
html.ipx.ipx.ipx body.template-11 .flag-sale::before { background: #ff8a3d; box-shadow: 0 0 8px rgba(255, 138, 61, .8); }

/* staggered reveal for listing (JS sets --ipx-i) */
html.ipx.ipx.ipx body.template-11 #products .product[data-ip-reveal],
html.ipx.ipx.ipx body.template-11 .products-block .product[data-ip-reveal] {
  transition: opacity .8s var(--x-ease-out) calc(var(--ipx-i, 0) * 60ms), transform .9s var(--x-ease-out) calc(var(--ipx-i, 0) * 60ms) !important;
}

/* pagination / load more / back to top */
html.ipx.ipx.ipx body.template-11 .pagination-wrapper,
html.ipx.ipx.ipx body.template-11 .listingControls { border: 0 !important; background: none !important; }
html.ipx.ipx.ipx body.template-11 .pagination > a,
html.ipx.ipx.ipx body.template-11 .pagination > span,
html.ipx.ipx.ipx body.template-11 .pagination a,
html.ipx.ipx.ipx body.template-11 .pagination strong,
html.ipx.ipx.ipx body.template-11 .load-products,
html.ipx.ipx.ipx body.template-11 .js-backToTop,
html.ipx.ipx.ipx body.template-11 .pagination-loader .btn {
  border: 0 !important;
  background: var(--x-soft) !important;
  color: var(--x-text) !important;
  border-radius: 999px !important;
  box-shadow: none !important;
  font-weight: 600 !important;
  transition: background-color .25s var(--x-ease), color .25s;
}
html.ipx.ipx.ipx body.template-11 .pagination strong,
html.ipx.ipx.ipx body.template-11 .pagination .current,
html.ipx.ipx.ipx body.template-11 .pagination a:hover,
html.ipx.ipx.ipx body.template-11 .load-products:hover,
html.ipx.ipx.ipx body.template-11 .pagination-loader .btn:hover { background: var(--x-ink) !important; color: #fff !important; }

/* --------------------------------------------------------------------------
   9. Category SEO text (below listing) — editorial column
   -------------------------------------------------------------------------- */
html.ipx.ipx.ipx body.type-category .category__secondDescription,
html.ipx.ipx.ipx body.type-category .category-content-wrapper > .basic-description,
html.ipx.ipx.ipx body.type-category .ipx-longtext {
  max-width: 780px;
  margin: clamp(56px, 8vw, 120px) 0 0;
  padding-top: clamp(40px, 5vw, 72px);
  border-top: 1px solid var(--x-line);
}
html.ipx.ipx.ipx body.type-category .ipx-longtext h2 {
  margin: 1.6em 0 .55em !important;
  color: var(--x-ink) !important;
  font: 700 clamp(28px, 3.2vw, 44px)/1.06 var(--x-font) !important;
  letter-spacing: -.04em !important;
}
html.ipx.ipx.ipx body.type-category .ipx-longtext h2:first-child { margin-top: 0 !important; }
html.ipx.ipx.ipx body.type-category .ipx-longtext h3 {
  margin: 1.5em 0 .5em !important;
  color: var(--x-text) !important;
  font: 650 clamp(17.6px, 1.6vw, 21.6px)/1.25 var(--x-font) !important;
  letter-spacing: -.02em !important;
}
html.ipx.ipx.ipx body.type-category .ipx-longtext p,
html.ipx.ipx.ipx body.type-category .ipx-longtext li {
  color: var(--x-body) !important;
  font-size: 17px !important;
  line-height: 1.62 !important;
  letter-spacing: -.01em;
}
html.ipx.ipx.ipx body.type-category .ipx-longtext strong { color: var(--x-text); font-weight: 600; }
html.ipx.ipx.ipx body.type-category .ipx-longtext ul { padding-left: 0 !important; list-style: none !important; }
html.ipx.ipx.ipx body.type-category .ipx-longtext ul > li { position: relative; padding-left: 22px; margin: .5em 0; }
html.ipx.ipx.ipx body.type-category .ipx-longtext ul > li::before {
  content: "";
  position: absolute;
  left: 2px;
  top: .62em;
  width: 7px;
  height: 7px;
  border-radius: 2px;
  background: linear-gradient(135deg, var(--x-lime-hi), var(--x-lime-lo));
}
html.ipx.ipx.ipx body.type-category .ipx-longtext a:not(.btn) {
  color: var(--x-text) !important;
  text-decoration: none !important;
  background: linear-gradient(90deg, var(--x-lime), var(--x-lime-lo)) 0 100% / 100% 2px no-repeat;
  transition: background-size .3s var(--x-ease);
}
html.ipx.ipx.ipx body.type-category .ipx-longtext a:not(.btn):hover { background-size: 100% 100%; }
html.ipx.ipx.ipx body.type-category .ipx-longtext table { border-collapse: collapse; width: 100%; font-size: 15px; }
html.ipx.ipx.ipx body.type-category .ipx-longtext th,
html.ipx.ipx.ipx body.type-category .ipx-longtext td { padding: 12px 10px; border: 0 !important; border-bottom: 1px solid var(--x-line) !important; text-align: left; }
html.ipx.ipx.ipx body.type-category .ipx-longtext th { color: var(--x-mute); font-weight: 600; font-size: 12px; letter-spacing: .06em; text-transform: uppercase; }

/* --------------------------------------------------------------------------
   10. Homepage polish (ip7 sections)
   -------------------------------------------------------------------------- */
html.ipx.ipx.ipx .ip-home .ip-pcard {
  background: transparent !important;
  border: 0 !important;
  box-shadow: none !important;
  padding: 0 !important;
}
html.ipx.ipx.ipx .ip-home .ip-pcard__media {
  position: relative;
  overflow: hidden;
  border-radius: 22px !important;
  background: #16171a;
}
html.ipx.ipx.ipx .ip-home .ip-pcard__media img { transition: transform 1.1s var(--x-ease-out); }
html.ipx.ipx.ipx .ip-home .ip-pcard:hover .ip-pcard__media img { transform: scale(1.045); }
html.ipx.ipx.ipx .ip-home .ip-pcard__name { color: var(--x-text) !important; font-weight: 600 !important; letter-spacing: -.016em; }
html.ipx.ipx.ipx .ip-home .ip-pcard__price { color: var(--x-ink) !important; font-weight: 700 !important; letter-spacing: -.03em; font-size: 19px !important; }
html.ipx.ipx.ipx .ip-home .ip-sec--soft { background: var(--x-soft) !important; }
html.ipx.ipx.ipx .ip-home .ip-rail-btn {
  border: 0 !important;
  background: rgba(0, 0, 0, .06) !important;
  color: var(--x-text) !important;
  box-shadow: none !important;
  transition: background-color .25s var(--x-ease), color .25s;
}
html.ipx.ipx.ipx .ip-home .ip-rail-btn:hover { background: var(--x-ink) !important; color: #fff !important; }
html.ipx.ipx.ipx .ip-home .ip-help__card {
  border: 0 !important;
  box-shadow: none !important;
  background: #fff !important;
  border-radius: var(--x-r) !important;
  transition: transform .5s var(--x-ease-out);
}
html.ipx.ipx.ipx .ip-home .ip-help__card:hover { transform: translateY(-4px); }
/* hero: slow thermal aura behind the reel */
html.ipx.ipx.ipx .ip-home .ip-hero__glow {
  background:
    radial-gradient(40% 50% at 72% 44%, rgba(184, 240, 58, .18), transparent 70%),
    radial-gradient(30% 40% at 84% 70%, rgba(61, 107, 255, .10), transparent 70%) !important;
  animation: ipxAura 14s var(--x-ease) infinite alternate;
}
@keyframes ipxAura { from { transform: translate3d(-2%, 0, 0) scale(1); } to { transform: translate3d(2%, -2%, 0) scale(1.08); } }

/* spotlight on dark surfaces (JS sets --sx/--sy on [data-ipx-spot]) */
html.ipx.ipx.ipx [data-ipx-spot] { position: relative; isolation: isolate; }
html.ipx.ipx.ipx [data-ipx-spot]::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 0;
  border-radius: inherit;
  opacity: var(--so, 0);
  background: radial-gradient(520px circle at var(--sx, 50%) var(--sy, 50%), rgba(184, 240, 58, .085), transparent 60%);
  transition: opacity .6s var(--x-ease);
  pointer-events: none;
}
html.ipx.ipx.ipx [data-ipx-spot] > * { position: relative; z-index: 1; }

/* --------------------------------------------------------------------------
   11. Footer — dark cinematic stage, giant wordmark
   -------------------------------------------------------------------------- */
html.ipx.ipx.ipx body.template-11 #footer {
  position: relative;
  overflow: hidden;
  margin-top: clamp(64px, 9vw, 140px) !important;
  padding: 0 !important;
  color: rgba(255, 255, 255, .62);
  background:
    radial-gradient(60% 55% at 12% 0%, rgba(184, 240, 58, .10), transparent 70%),
    radial-gradient(45% 50% at 92% 8%, rgba(61, 107, 255, .09), transparent 70%),
    var(--x-ink) !important;
  border: 0 !important;
}
html.ipx.ipx.ipx body.template-11 #footer::before {
  /* fine dot grid, faded toward the bottom */
  content: "" !important;
  position: absolute !important;
  inset: 0 !important;
  top: 0 !important;
  left: 0 !important;
  width: auto !important;
  height: auto !important;
  transform: none !important;
  background: radial-gradient(rgba(255, 255, 255, .07) 1px, transparent 1.2px) 0 0 / 22px 22px !important;
  -webkit-mask-image: linear-gradient(180deg, #000, transparent 70%);
  mask-image: linear-gradient(180deg, #000, transparent 70%);
  pointer-events: none;
}
html.ipx.ipx.ipx body.template-11 #footer > .container { position: relative; z-index: 1; }
html.ipx.ipx.ipx body.template-11 #footer .footer-rows > .site-name { display: none !important; }
html.ipx.ipx.ipx body.template-11 #footer .ip-footer-shell { padding: 0 !important; }

/* hero band inserted by JS */
html.ipx.ipx.ipx .ipx-fhero {
  display: grid;
  grid-template-columns: minmax(0, 1.4fr) auto;
  align-items: end;
  gap: 32px;
  padding: clamp(64px, 9vw, 128px) 0 clamp(48px, 6vw, 80px);
  border-bottom: 1px solid rgba(255, 255, 255, .08);
}
html.ipx.ipx.ipx .ipx-fhero__k {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  margin: 0 0 22px;
  color: rgba(255, 255, 255, .55);
  font: 600 11.5px/1 var(--x-font);
  letter-spacing: .09em;
  text-transform: uppercase;
}
html.ipx.ipx.ipx .ipx-fhero__k::before {
  content: "";
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--x-lime);
  box-shadow: 0 0 10px rgba(184, 240, 58, .9);
}
html.ipx.ipx.ipx .ipx-fhero__t {
  margin: 0;
  color: #fff;
  font: 700 clamp(38.4px, 5.6vw, 78.4px)/1 var(--x-font);
  letter-spacing: -.05em;
}
html.ipx.ipx.ipx .ipx-fhero__t em {
  display: block;
  font-style: normal;
  background: linear-gradient(180deg, var(--x-lime-hi), var(--x-lime-lo));
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  padding-bottom: .08em;
}
html.ipx.ipx.ipx .ipx-fhero__cta { display: flex; flex-wrap: wrap; gap: 10px; }
html.ipx.ipx.ipx .ipx-btn {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  min-height: 50px;
  padding: 0 24px;
  border-radius: 999px;
  font: 600 15px/1 var(--x-font);
  letter-spacing: -.01em;
  text-decoration: none !important;
  transition: transform .45s var(--x-ease-out), background-color .3s var(--x-ease), color .3s, box-shadow .4s;
}
html.ipx.ipx.ipx .ipx-btn--lime { color: var(--x-ink) !important; background: var(--x-lime); box-shadow: 0 0 0 0 rgba(184, 240, 58, 0); }
html.ipx.ipx.ipx .ipx-btn--lime:hover { background: var(--x-lime-hi); box-shadow: 0 12px 40px -10px rgba(184, 240, 58, .55); transform: translateY(-2px); }
html.ipx.ipx.ipx .ipx-btn--ghost { color: #fff !important; background: rgba(255, 255, 255, .08); }
html.ipx.ipx.ipx .ipx-btn--ghost:hover { background: rgba(255, 255, 255, .16); transform: translateY(-2px); }
html.ipx.ipx.ipx .ipx-btn svg { width: 16px; height: 16px; transition: transform .45s var(--x-ease-out); }
html.ipx.ipx.ipx .ipx-btn:hover svg { transform: translateX(3px); }

/* trust row → quiet inline signals */
html.ipx.ipx.ipx body.template-11 #footer .ip-footer-trust {
  display: flex !important;
  flex-wrap: wrap;
  gap: 10px 28px !important;
  margin: 0 !important;
  padding: 26px 0 !important;
  border-bottom: 1px solid rgba(255, 255, 255, .08);
}
html.ipx.ipx.ipx body.template-11 #footer .ip-footer-trust span {
  min-height: 0 !important;
  padding: 0 0 0 16px !important;
  color: rgba(255, 255, 255, .72) !important;
  background: none !important;
  border: 0 !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  font: 500 13.5px/1.3 var(--x-font) !important;
}
html.ipx.ipx.ipx body.template-11 #footer .ip-footer-trust span::before {
  left: 0 !important;
  top: .5em !important;
  width: 6px !important;
  height: 6px !important;
  border-radius: 50% !important;
  background: var(--x-lime) !important;
  box-shadow: none !important;
  transform: none !important;
}

/* grid */
html.ipx.ipx.ipx body.template-11 #footer .ip-footer-grid {
  gap: clamp(28px, 4vw, 64px) !important;
  padding: clamp(44px, 5vw, 72px) 0 !important;
}
html.ipx.ipx.ipx body.template-11 #footer .ip-footer-brand p {
  max-width: 34ch;
  color: rgba(255, 255, 255, .58) !important;
  font-size: 14.5px !important;
  line-height: 1.6 !important;
}
html.ipx.ipx.ipx body.template-11 #footer .ip-footer-brandmark { color: #fff !important; }
html.ipx.ipx.ipx body.template-11 #footer .ip-footer-brandmark .ip-logo { height: 46px; width: auto; }
html.ipx.ipx.ipx body.template-11 #footer .ip-footer-brandmark .ip-logo__sub { fill: rgba(255, 255, 255, .45); }
html.ipx.ipx.ipx body.template-11 #footer .ip-footer-contact a {
  color: #fff !important;
  font-weight: 600 !important;
  letter-spacing: -.01em;
}
html.ipx.ipx.ipx body.template-11 #footer .ip-footer-contact address,
html.ipx.ipx.ipx body.template-11 #footer .ip-footer-company {
  color: rgba(255, 255, 255, .42) !important;
  font-size: 12.5px !important;
  line-height: 1.6 !important;
  font-style: normal;
}
html.ipx.ipx.ipx body.template-11 #footer .ip-footer-col h3,
html.ipx.ipx.ipx body.template-11 #footer .ip-footer-col h3 button {
  color: rgba(255, 255, 255, .45) !important;
  font: 600 11px/1.2 var(--x-font) !important;
  letter-spacing: .1em !important;
  text-transform: uppercase !important;
  background: none !important;
  border: 0 !important;
}
html.ipx.ipx.ipx body.template-11 #footer .ip-footer-col h3::before { display: none !important; }
html.ipx.ipx.ipx body.template-11 #footer .ip-footer-col ul a {
  display: inline-block;
  padding: 5px 0;
  color: rgba(255, 255, 255, .78) !important;
  font: 500 14.5px/1.35 var(--x-font) !important;
  letter-spacing: -.01em;
  text-decoration: none !important;
  background: linear-gradient(90deg, var(--x-lime), var(--x-lime-lo)) 0 calc(100% - 2px) / 0 1.5px no-repeat !important;
  transition: color .25s, background-size .4s var(--x-ease-out) !important;
}
html.ipx.ipx.ipx body.template-11 #footer .ip-footer-col ul a:hover { color: #fff !important; background-size: 100% 1.5px !important; }

/* giant watermark wordmark (aria-hidden, inserted by JS) */
html.ipx.ipx.ipx .ipx-fmark {
  display: block;
  margin: 0 auto -0.2em;
  padding: 0;
  font: 700 clamp(80px, 21.5vw, 352px)/.8 var(--x-font);
  letter-spacing: -.07em;
  text-align: center;
  white-space: nowrap;
  color: transparent;
  background:
    radial-gradient(38% 90% at var(--fx, 50%) 0%, rgba(184, 240, 58, .5), transparent 70%),
    linear-gradient(180deg, rgba(255, 255, 255, .12), rgba(255, 255, 255, 0) 92%);
  -webkit-background-clip: text;
  background-clip: text;
  user-select: none;
  pointer-events: none;
}
html.ipx.ipx.ipx .ipx-fmark span { font-weight: 380; }

html.ipx.ipx.ipx body.template-11 #footer .footer-bottom {
  position: relative;
  z-index: 2;
  padding: 22px 0 28px !important;
  color: rgba(255, 255, 255, .38) !important;
  border-top: 1px solid rgba(255, 255, 255, .08) !important;
  font-size: 12px !important;
  background: none !important;
}
html.ipx.ipx.ipx body.template-11 #footer .footer-bottom a { color: rgba(255, 255, 255, .55) !important; }
html.ipx.ipx.ipx body.template-11 #footer .footer-bottom a:hover { color: #fff !important; }

@media (max-width: 991px) {
  html.ipx.ipx.ipx .ipx-fhero { grid-template-columns: 1fr; align-items: start; }
}
@media (max-width: 767px) {
  html.ipx.ipx.ipx body.template-11 #footer .ip-footer-col { border-bottom: 1px solid rgba(255, 255, 255, .08); }
  html.ipx.ipx.ipx body.template-11 #footer .ip-footer-col h3 button { width: 100%; padding: 16px 0 !important; text-align: left; color: rgba(255, 255, 255, .8) !important; }
  html.ipx.ipx.ipx .ipx-fhero__cta .ipx-btn { flex: 1 1 auto; justify-content: center; }
  html.ipx.ipx.ipx body.template-11 .subcategories.with-image > li > a { aspect-ratio: 1 / 1; }
  html.ipx.ipx.ipx body.template-11 .subcategories.with-image > li > a .text { padding: 12px 12px !important; font-size: 13px !important; }
  html.ipx.ipx.ipx body.template-11 .subcategories.with-image > li > a .text::after { flex-basis: 24px; height: 24px; background-size: 13px; }
  html.ipx.ipx.ipx body.template-11 #category-header { flex-direction: column; align-items: flex-start; }
  html.ipx.ipx.ipx body.template-11 .listSorting__controls { max-width: 100%; overflow-x: auto; scrollbar-width: none; }
  html.ipx.ipx.ipx body.template-11 .listSorting__control,
  html.ipx.ipx.ipx body.template-11 .listSorting__controls a,
  html.ipx.ipx.ipx body.template-11 .listSorting__controls button { padding: 8px 12px !important; white-space: nowrap; }
  html.ipx.ipx.ipx body.template-11 #products .product a.image { border-radius: 16px !important; margin-bottom: 12px !important; }
  html.ipx.ipx.ipx body.template-11 #products .product a.name { font-size: 14px !important; }
  html.ipx.ipx.ipx body.template-11 #products .product .price-final,
  html.ipx.ipx.ipx body.template-11 #products .product .price-final strong { font-size: 17px !important; }
  html.ipx.ipx.ipx body.template-11 #content .product a.ip-product-detail-button { width: 36px !important; height: 36px !important; }
}


/* --- header specificity fixes (v730 targets these with #header + extra classes) --- */
html.ipx.ipx.ipx body.template-11 #header #navigation .menu-level-1 > li > a[href],
html.ipx.ipx.ipx body.template-11 #header #navigation .menu-level-1 > li.splitted > a[href] {
  background: transparent !important;
  box-shadow: none !important;
  border: 0 !important;
}
html.ipx.ipx.ipx body.template-11 #header .navigation-buttons a.btn.btn-icon,
html.ipx.ipx.ipx body.template-11 #header .navigation-buttons .btn.btn-icon,
html.ipx.ipx.ipx body.template-11 #header .navigation-buttons .cart-count,
html.ipx.ipx.ipx body.template-11 #header .search button,
html.ipx.ipx.ipx body.template-11 #header .search .btn,
html.ipx.ipx.ipx body.template-11 #header .search-form button {
  background-color: var(--x-soft) !important;
  box-shadow: none !important;
  border: 0 !important;
  border-radius: 999px !important;
}
html.ipx.ipx.ipx body.template-11 #header .navigation-buttons a.btn.btn-icon:hover,
html.ipx.ipx.ipx body.template-11 #header .navigation-buttons .cart-count:hover,
html.ipx.ipx.ipx body.template-11 #header .search button:hover,
html.ipx.ipx.ipx body.template-11 #header .search .btn:hover {
  background-color: var(--x-ink) !important;
  color: #fff !important;
}
html.ipx.ipx.ipx body.template-11 #header .search button:hover *,
html.ipx.ipx.ipx body.template-11 #header .navigation-buttons .cart-count:hover * { color: #fff !important; fill: currentColor; }
/* filters: inner grey panel + "Rozbalit filtr" */
html.ipx.ipx.ipx body.template-11 #filters-wrapper .filters-wrapper,
html.ipx.ipx.ipx body.template-11 #filters-wrapper .slider-wrapper,
html.ipx.ipx.ipx body.template-11 #filters-wrapper .filter-sections {
  background: transparent !important;
  border: 0 !important;
  box-shadow: none !important;
  padding-left: 0 !important;
  padding-right: 0 !important;
}
html.ipx.ipx.ipx body.template-11 #filters-wrapper .slider-content { background: rgba(0, 0, 0, .12) !important; height: 2px !important; }
html.ipx.ipx.ipx body.template-11 #filters-wrapper a.btn.unveil-button,
html.ipx.ipx.ipx body.template-11 #filters-wrapper .btn {
  background: var(--x-soft) !important;
  box-shadow: none !important;
  border: 0 !important;
  border-radius: 999px !important;
  font-weight: 600 !important;
}
html.ipx.ipx.ipx body.template-11 #filters-wrapper a.btn.unveil-button:hover { background: var(--x-ink) !important; color: #fff !important; }
html.ipx.ipx.ipx body.template-11 #filters-wrapper .filter-section label,
html.ipx.ipx.ipx body.template-11 #filters-wrapper fieldset label,
html.ipx.ipx.ipx body.template-11 #filters-wrapper .filter-label {
  background: var(--x-soft) !important;
  box-shadow: none !important;
  border: 0 !important;
}
/* bestsellers: kill separators */
html.ipx.ipx.ipx body.template-11 .products-top .product::before,
html.ipx.ipx.ipx body.template-11 .products-top .product::after,
html.ipx.ipx.ipx body.template-11 .products-top .product .p::before,
html.ipx.ipx.ipx body.template-11 .products-top .product .p::after { display: none !important; }

/* --------------------------------------------------------------------------
   12. Motion safety
   -------------------------------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
  html.ipx.ipx.ipx *,
  html.ipx.ipx.ipx *::before,
  html.ipx.ipx.ipx *::after {
    animation: none !important;
    transition-duration: .01ms !important;
  }
  html.ipx.ipx.ipx .ip-lockup .ipx-mark path { stroke-dashoffset: 0 !important; }
}

html.ipx.ipx.ipx body.template-11 #content .product a.ip-product-detail-button::after { display: none !important; }
html.ipx.ipx.ipx body.template-11 #content .product .p-bottom > div { flex-wrap: nowrap !important; }
html.ipx.ipx.ipx body.template-11 #content .product .p-bottom .prices { flex: 1 1 auto !important; width: auto !important; min-width: 0; }
html.ipx.ipx.ipx body.template-11 #content .product .p-bottom .p-tools { flex: 0 0 auto !important; width: auto !important; margin: 0 !important; }

html.ipx.ipx.ipx body.template-11 .site-msg.information .text,
html.ipx.ipx.ipx body.template-11 .site-msg.information .text span { color: rgba(255, 255, 255, .74) !important; }
html.ipx.ipx.ipx body.template-11 .site-msg.information .text strong,
html.ipx.ipx.ipx body.template-11 .site-msg.information .text b { color: #fff !important; }

html.ipx.ipx.ipx body.template-11 #content .products-top,
html.ipx.ipx.ipx body.template-11 #content .products-top .product .p { background: transparent !important; }
html.ipx.ipx.ipx body.template-11 #content .products-top .product .p:hover { background: var(--x-soft) !important; }

/* footer fixes: v730 paints footer text grey with !important */
html.ipx.ipx.ipx body.template-11 #footer .ipx-fhero__t { color: #fff !important; }
html.ipx.ipx.ipx body.template-11 #footer .ipx-fhero__k { color: rgba(255, 255, 255, .55) !important; }
html.ipx.ipx.ipx body.template-11 #footer .ipx-fhero__t em {
  color: transparent !important;
  -webkit-text-fill-color: transparent !important;
}
html.ipx.ipx.ipx body.template-11 #footer .ip-lockup,
html.ipx.ipx.ipx body.template-11 #footer .ip-lockup svg { color: #fff !important; }
html.ipx.ipx.ipx body.template-11 #footer .ipx-fmark {
  color: transparent !important;
  -webkit-text-fill-color: transparent !important;
  background:
    radial-gradient(34% 120% at var(--fx, 50%) 0%, rgba(184, 240, 58, .32), transparent 72%),
    linear-gradient(180deg, rgba(255, 255, 255, .09), rgba(255, 255, 255, 0) 88%) !important;
  -webkit-background-clip: text !important;
  background-clip: text !important;
}
html.ipx.ipx.ipx body.template-11 #footer .ipx-btn--lime { color: #0b0c0e !important; }
html.ipx.ipx.ipx body.template-11 #footer .ipx-btn--ghost { color: #fff !important; }

/* card titles: hard 2-line clamp at every width (v730 sets its own line-height/height) */
html.ipx.ipx.ipx body.template-11 #content .product a.name,
html.ipx.ipx.ipx body.template-11 .products-block .product a.name {
  line-height: 1.35 !important;
  height: auto !important;
  min-height: 0 !important;
  max-height: calc(2em * 1.35) !important;
}
html.ipx.ipx.ipx body.template-11 #content .product a.name span { display: inline !important; }
html.ipx.ipx.ipx body.template-11 #footer .footer-bottom strong,
html.ipx.ipx.ipx body.template-11 #footer .footer-bottom span,
html.ipx.ipx.ipx body.template-11 #footer .footer-bottom b { color: rgba(255, 255, 255, .6) !important; }

/* --------------------------------------------------------------------------
   9.1 — feature chips on cards + hover preview (second photo)
   -------------------------------------------------------------------------- */
html.ipx.ipx.ipx body.template-11 .product a.image .ipx-chips {
  position: absolute;
  left: 12px;
  right: 12px;
  bottom: 12px;
  z-index: 3;
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  pointer-events: none;
  transition: transform .5s var(--x-ease-out), opacity .4s var(--x-ease);
}
html.ipx.ipx.ipx body.template-11 .product .ipx-chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  height: 26px;
  padding: 0 10px;
  color: #fff;
  background: rgba(11, 12, 14, .58);
  backdrop-filter: saturate(160%) blur(14px);
  -webkit-backdrop-filter: saturate(160%) blur(14px);
  border-radius: 999px;
  box-shadow: inset 0 0 0 .5px rgba(255, 255, 255, .16);
  font: 600 11px/1 var(--x-font);
  letter-spacing: .01em;
  white-space: nowrap;
}
html.ipx.ipx.ipx body.template-11 .product .ipx-chip--w {
  color: var(--x-ink);
  background: var(--x-lime);
  box-shadow: none;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
}
html.ipx.ipx.ipx body.template-11 .product .ipx-chip--wifi::before,
html.ipx.ipx.ipx body.template-11 .product .ipx-chip--led::before {
  content: "";
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: #8fb8ff;
  box-shadow: 0 0 8px rgba(120, 160, 255, .9);
}
html.ipx.ipx.ipx body.template-11 .product .ipx-chip--led::before { background: #ffe2a8; box-shadow: 0 0 8px rgba(255, 214, 140, .95); }
html.ipx.ipx.ipx body.template-11 .product .p:hover .ipx-chips { transform: translateY(-2px); }

/* second photo crossfade */
html.ipx.ipx.ipx body.template-11 .product a.image img.ipx-alt {
  position: absolute !important;
  inset: 0;
  z-index: 1;
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;
  opacity: 0;
  transform: scale(1.02);
  transition: opacity .6s var(--x-ease), transform 1.1s var(--x-ease-out) !important;
}
html.ipx.ipx.ipx body.template-11 .product .p:hover a.image.ipx-has-alt img.ipx-alt { opacity: 1; transform: scale(1.045); }

@media (max-width: 767px) {
  html.ipx.ipx.ipx body.template-11 .product a.image .ipx-chips { left: 8px; right: 8px; bottom: 8px; gap: 4px; }
  html.ipx.ipx.ipx body.template-11 .product .ipx-chip { height: 22px; padding: 0 8px; font-size: 10px; }
  html.ipx.ipx.ipx body.template-11 .product .ipx-chip:nth-child(n+3) { display: none; }
}

/* --------------------------------------------------------------------------
   9.2 — landing-page heroes (Kontakty, FAQ, Kalkulačka, Jak fungují, Servis):
   open, borderless stage instead of a grey box; same headline system
   -------------------------------------------------------------------------- */
html.ipx.ipx.ipx body.template-11 #content section.ip-spot-host {
  background: transparent !important;
  border: 0 !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  padding-left: 0 !important;
  padding-right: 0 !important;
  overflow: visible !important;
}
html.ipx.ipx.ipx body.template-11 #content section.ip-spot-host::before,
html.ipx.ipx.ipx body.template-11 #content section.ip-spot-host::after { display: none !important; }
html.ipx.ipx.ipx body.template-11 #content section.ip-spot-host h1,
html.ipx.ipx.ipx body.template-11 #content section.ip-spot-host h2[class$="-title"] {
  font-size: clamp(40px, 5.4vw, 74px) !important;
  line-height: 1.02 !important;
  letter-spacing: -.048em !important;
  font-weight: 700 !important;
  color: var(--x-ink);
  background: linear-gradient(180deg, #0b0c0e 30%, #7c818a 118%);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  padding-bottom: .06em;
}
html.ipx.ipx.ipx body.template-11 #content section.ip-spot-host p:not([class*="eyebrow"]):not([class*="kicker"]) {
  color: var(--x-mute) !important;
  font-size: clamp(16px, 1.3vw, 19px) !important;
  line-height: 1.55 !important;
  letter-spacing: -.012em;
}
/* light content cards on those pages: softer, no hairlines */
html.ipx.ipx.ipx body.template-11 #content .ip-contact-route,
html.ipx.ipx.ipx body.template-11 #content .ip-faq-decision,
html.ipx.ipx.ipx body.template-11 #content .ip-guide-cta-light,
html.ipx.ipx.ipx body.template-11 #content .ip-faq-section-dark {
  background: var(--x-soft) !important;
  border: 0 !important;
  box-shadow: none !important;
  border-radius: 32px !important;
}
html.ipx.ipx.ipx body.template-11 #content .ipcalc-panel,
html.ipx.ipx.ipx body.template-11 #content .ip-guide-visual,
html.ipx.ipx.ipx body.template-11 #content .ip-contact-native-form {
  border: 0 !important;
  box-shadow: 0 30px 80px -40px rgba(11, 12, 14, .28), 0 0 0 1px rgba(0, 0, 0, .04) !important;
}

/* 9.4 hotfix — "Nejprodávanější" after "Zobrazit více": Shoptet flex 1 1 0 squeezed all 12 into one row */
html.ipx.ipx.ipx body.template-11 #content #productsTop.products-top {
  display: grid !important;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 6px 18px;
  margin: 0 !important;
}
html.ipx.ipx.ipx body.template-11 #content #productsTop.products-top > .product {
  width: auto !important;
  max-width: none !important;
  flex: none !important;
  margin: 0 !important;
  padding: 0 !important;
}
html.ipx.ipx.ipx body.template-11 #content #productsTop.products-top > .product .p {
  display: grid !important;
  grid-template-columns: 112px minmax(0, 1fr);
  align-items: center;
  gap: 16px;
}
html.ipx.ipx.ipx body.template-11 #content #productsTop.products-top > .product .p > * { width: auto !important; max-width: none !important; margin: 0 !important; }
html.ipx.ipx.ipx body.template-11 #content #productsTop.products-top .image { display: block; aspect-ratio: 4 / 3; overflow: hidden; }
html.ipx.ipx.ipx body.template-11 #content #productsTop.products-top .image img { width: 100% !important; height: 100% !important; object-fit: cover; }
html.ipx.ipx.ipx body.template-11 #content #productsTop.products-top .name {
  display: -webkit-box !important;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  font: 600 14px/1.35 var(--x-font) !important;
  letter-spacing: -.012em;
  color: var(--x-text) !important;
}
@media (max-width: 991px) { html.ipx.ipx.ipx body.template-11 #content #productsTop.products-top { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 600px) {
  html.ipx.ipx.ipx body.template-11 #content #productsTop.products-top { grid-template-columns: 1fr; }
  html.ipx.ipx.ipx body.template-11 #content #productsTop.products-top > .product .p { grid-template-columns: 96px minmax(0, 1fr); }
}

/* 9.5 hotfix — mobile drawer: backdrop-filter on #header traps the fixed drawer
   (it becomes see-through). Below 992px the bar is solid, never blurred. */
@media (max-width: 991px) {
  html.ipx.ipx.ipx body.template-11 #header,
  html.ipx.ipx.ipx.ip-scrolled body.template-11 #header {
    background: rgba(255, 255, 255, .98) !important;
    -webkit-backdrop-filter: none !important;
    backdrop-filter: none !important;
  }
}
html.ipx.ipx.ipx body.template-11.navigation-window-visible #header {
  -webkit-backdrop-filter: none !important;
  backdrop-filter: none !important;
}

/* ==========================================================================
   9.6 — ETAPA 1: global chrome (megamenu, search, buttons, forms,
   breadcrumbs, 404, empty cart, empty blog)
   ========================================================================== */
html.ipx.ipx.ipx { --x-arrow-ink: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3E%3Cpath d='M5 10h9m-3.5-3.5L14 10l-3.5 3.5' fill='none' stroke='%230b0c0e' stroke-width='1.9' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E"); }

/* --- Megamenu -------------------------------------------------------- */
@media (min-width: 992px) {
  html.ipx.ipx.ipx body.template-11 #navigation .ip-products-mega {
    background: rgba(255, 255, 255, .94) !important;
    -webkit-backdrop-filter: saturate(180%) blur(28px) !important;
    backdrop-filter: saturate(180%) blur(28px) !important;
    border-radius: 0 0 32px 32px !important;
    box-shadow: 0 50px 100px -50px rgba(11, 12, 14, .4), inset 0 1px 0 rgba(0, 0, 0, .05) !important;
    animation: ipxMegaIn .38s var(--x-ease-out) both;
  }
  @keyframes ipxMegaIn { from { opacity: 0; transform: translateY(-6px); } to { opacity: 1; transform: none; } }
  /* rail (left) */
  html.ipx.ipx.ipx body.template-11 #navigation .ip-products-mega > li.ip-products-group > a {
    background: transparent !important;
    box-shadow: none !important;
    border: 0 !important;
    border-radius: 14px !important;
    color: var(--x-mute) !important;
    font-weight: 550 !important;
    transition: color .25s, background-color .25s !important;
  }
  html.ipx.ipx.ipx body.template-11 #navigation .ip-products-mega > li.ip-products-group > a::before { display: none !important; }
  html.ipx.ipx.ipx body.template-11 #navigation .ip-products-mega > li.ip-products-group.is-active > a,
  html.ipx.ipx.ipx body.template-11 #navigation .ip-products-mega > li.ip-products-group > a:hover {
    color: var(--x-ink) !important;
    background: var(--x-soft) !important;
  }
  html.ipx.ipx.ipx body.template-11 #navigation .ip-products-mega .ip-mi {
    background: transparent !important;
    box-shadow: none !important;
    color: currentColor !important;
  }
  html.ipx.ipx.ipx body.template-11 #navigation .ip-products-mega > li.ip-products-group.is-active > a .ip-mi {
    background: var(--x-lime) !important;
    color: var(--x-ink) !important;
    border-radius: 9px !important;
  }
  /* category links (middle) */
  html.ipx.ipx.ipx body.template-11 #navigation .ip-products-mega .menu-level-3 > li > a {
    background: transparent !important;
    box-shadow: none !important;
    border: 0 !important;
    border-radius: 14px !important;
    color: var(--x-text) !important;
    font-weight: 550 !important;
  }
  html.ipx.ipx.ipx body.template-11 #navigation .ip-products-mega .menu-level-3 > li > a:hover { background: var(--x-soft) !important; transform: none !important; }
  html.ipx.ipx.ipx body.template-11 #navigation .ip-products-mega .menu-level-3 > li > a::after { background: linear-gradient(90deg, var(--x-lime), var(--x-lime-lo)) !important; }
  html.ipx.ipx.ipx body.template-11 #navigation .ip-products-mega .menu-level-3 .menu-image,
  html.ipx.ipx.ipx body.template-11 #navigation .ip-products-mega .menu-level-3 a > i,
  html.ipx.ipx.ipx body.template-11 #navigation .ip-products-mega .menu-level-3 a > span:first-child:empty {
    background-color: var(--x-soft) !important;
    background-image: none !important;
    box-shadow: none !important;
    border: 0 !important;
    color: var(--x-ink) !important;
  }
  html.ipx.ipx.ipx body.template-11 #navigation .ip-products-mega .menu-level-3 > li > a:hover .menu-image,
  html.ipx.ipx.ipx body.template-11 #navigation .ip-products-mega .menu-level-3 > li > a:hover > i {
    background-color: var(--x-lime) !important;
    color: var(--x-ink) !important;
  }
  /* catalogue card (right) — cinema */
  html.ipx.ipx.ipx body.template-11 #navigation .ip-products-overview > a {
    position: relative;
    overflow: hidden;
    color: #fff !important;
    background:
      radial-gradient(120% 90% at 100% 0%, rgba(184, 240, 58, .28), transparent 55%),
      radial-gradient(90% 90% at 0% 100%, rgba(61, 107, 255, .16), transparent 60%),
      var(--x-ink) !important;
    border: 0 !important;
    border-radius: 24px !important;
    box-shadow: none !important;
  }
  html.ipx.ipx.ipx body.template-11 #navigation .ip-products-overview > a::before { color: rgba(255, 255, 255, .55) !important; }
  html.ipx.ipx.ipx body.template-11 #navigation .ip-products-overview > a::after {
    background: var(--x-lime) var(--x-arrow-ink) center / 18px no-repeat !important;
    -webkit-mask: none !important;
    mask: none !important;
    border-radius: 50% !important;
    box-shadow: 0 0 24px rgba(184, 240, 58, .45) !important;
    transition: transform .45s var(--x-ease-out) !important;
  }
  html.ipx.ipx.ipx body.template-11 #navigation .ip-products-overview > a:hover::after { transform: translateX(4px) !important; }
  html.ipx.ipx.ipx body.template-11 #navigation .ip-mega-cta > a {
    background: var(--x-soft) !important;
    border: 0 !important;
    box-shadow: none !important;
    border-radius: 18px !important;
  }
  html.ipx.ipx.ipx body.template-11 #navigation .ip-mega-cta > a:hover { background: #ececf0 !important; }
}

/* --- Search ---------------------------------------------------------- */
html.ipx.ipx.ipx body.template-11 #header .search .search-input,
html.ipx.ipx.ipx body.template-11 #header .search .query-input {
  border-radius: 999px !important;
  font-weight: 500 !important;
}
html.ipx.ipx.ipx.ip-search-open body.template-11 #header .search .query-input,
html.ipx.ipx.ipx body.template-11 #header .search .query-input:focus {
  outline: 0 !important;
  background: #fff !important;
  box-shadow: 0 0 0 1px rgba(0, 0, 0, .06), 0 0 0 5px rgba(184, 240, 58, .35), 0 20px 50px -20px rgba(11, 12, 14, .35) !important;
}
html.ipx.ipx.ipx body.template-11 #header .search-whisperer {
  padding: 10px !important;
  border: 0 !important;
  border-radius: 26px !important;
  background: rgba(255, 255, 255, .96) !important;
  -webkit-backdrop-filter: saturate(180%) blur(24px);
  backdrop-filter: saturate(180%) blur(24px);
  box-shadow: 0 60px 120px -40px rgba(11, 12, 14, .45), 0 0 0 1px rgba(0, 0, 0, .05) !important;
}
html.ipx.ipx.ipx body.template-11 #header .search-whisperer-document {
  background: transparent !important;
  border: 0 !important;
  box-shadow: none !important;
  border-radius: 14px !important;
  transition: background-color .2s !important;
}
html.ipx.ipx.ipx body.template-11 #header .search-whisperer-document:hover,
html.ipx.ipx.ipx body.template-11 #header .search-whisperer-products a:hover,
html.ipx.ipx.ipx body.template-11 #header .search-whisperer-products li.active a { background: var(--x-soft) !important; }
html.ipx.ipx.ipx body.template-11 #header .search-whisperer-document em {
  color: var(--x-mute2) !important;
  font: 600 10px/1 var(--x-font) !important;
  letter-spacing: .09em !important;
  text-transform: uppercase;
  font-style: normal !important;
}
html.ipx.ipx.ipx body.template-11 #header .search-whisperer-products,
html.ipx.ipx.ipx body.template-11 #header .search-whisperer-products li { border: 0 !important; background: transparent !important; box-shadow: none !important; }
html.ipx.ipx.ipx body.template-11 #header .search-whisperer-products a { border-radius: 16px !important; border: 0 !important; }
html.ipx.ipx.ipx body.template-11 #header .search-whisperer-image {
  overflow: hidden;
  border-radius: 12px !important;
  background: #16171a !important;
  border: 0 !important;
}
html.ipx.ipx.ipx body.template-11 #header .search-whisperer-products .price-final { color: var(--x-ink) !important; font-weight: 700 !important; letter-spacing: -.02em; }
html.ipx.ipx.ipx body.template-11 #header .search-whisperer .whisperer-trigger {
  display: inline-flex !important;
  margin: 6px auto 2px;
  padding: 12px 20px !important;
  background: var(--x-ink) !important;
  color: #fff !important;
  border-radius: 999px !important;
  font-weight: 600 !important;
}
html.ipx.ipx.ipx body.template-11 #header .search-whisperer .whisperer-trigger:hover { background: var(--x-lime) !important; color: var(--x-ink) !important; }

/* --- Buttons (site-wide, not header) ------------------------------- */
html.ipx.ipx.ipx body.template-11 #content .btn.btn-primary,
html.ipx.ipx.ipx body.template-11 #content .btn.btn-conversion,
html.ipx.ipx.ipx body.template-11 #content .btn.add-to-cart-button,
html.ipx.ipx.ipx body.template-11 #content button.add-to-cart-button,
html.ipx.ipx.ipx body.template-11 #content .btn.btn-cart,
html.ipx.ipx.ipx body.template-11 #content .next-step-button,
html.ipx.ipx.ipx body.template-11 #content .btn.btn-secondary.next-step {
  border: 0 !important;
  border-radius: 999px !important;
  background: var(--x-ink) !important;
  color: #fff !important;
  box-shadow: none !important;
  font-weight: 600 !important;
  letter-spacing: -.01em !important;
  transition: background-color .3s var(--x-ease), color .3s, box-shadow .4s, transform .45s var(--x-ease-out) !important;
}
html.ipx.ipx.ipx body.template-11 #content .btn.btn-primary:hover,
html.ipx.ipx.ipx body.template-11 #content .btn.btn-conversion:hover,
html.ipx.ipx.ipx body.template-11 #content .btn.add-to-cart-button:hover,
html.ipx.ipx.ipx body.template-11 #content button.add-to-cart-button:hover,
html.ipx.ipx.ipx body.template-11 #content .btn.btn-cart:hover,
html.ipx.ipx.ipx body.template-11 #content .next-step-button:hover {
  background: var(--x-lime) !important;
  color: var(--x-ink) !important;
  box-shadow: 0 14px 40px -12px rgba(184, 240, 58, .6) !important;
  transform: translateY(-1px);
}
html.ipx.ipx.ipx body.template-11 #content .btn.btn-default:not(.ip-product-detail-button):not(.unveil-button),
html.ipx.ipx.ipx body.template-11 #content .btn.btn-secondary:not(.next-step) {
  border: 0 !important;
  border-radius: 999px !important;
  background: var(--x-soft) !important;
  color: var(--x-text) !important;
  box-shadow: none !important;
  font-weight: 600 !important;
}
html.ipx.ipx.ipx body.template-11 #content .btn.btn-default:not(.ip-product-detail-button):not(.unveil-button):hover,
html.ipx.ipx.ipx body.template-11 #content .btn.btn-secondary:not(.next-step):hover { background: var(--x-ink) !important; color: #fff !important; }

/* --- Forms ---------------------------------------------------------- */
html.ipx.ipx.ipx body.template-11 #content .form-control,
html.ipx.ipx.ipx body.template-11 #content input[type="text"],
html.ipx.ipx.ipx body.template-11 #content input[type="email"],
html.ipx.ipx.ipx body.template-11 #content input[type="tel"],
html.ipx.ipx.ipx body.template-11 #content input[type="number"],
html.ipx.ipx.ipx body.template-11 #content input[type="search"],
html.ipx.ipx.ipx body.template-11 #content textarea,
html.ipx.ipx.ipx body.template-11 #content select {
  border: 0 !important;
  border-radius: 14px !important;
  background-color: var(--x-soft) !important;
  box-shadow: inset 0 0 0 1px rgba(0, 0, 0, .04) !important;
  color: var(--x-text) !important;
  transition: box-shadow .25s var(--x-ease), background-color .25s !important;
}
html.ipx.ipx.ipx body.template-11 #content .form-control:focus,
html.ipx.ipx.ipx body.template-11 #content input:focus,
html.ipx.ipx.ipx body.template-11 #content textarea:focus,
html.ipx.ipx.ipx body.template-11 #content select:focus {
  outline: 0 !important;
  background-color: #fff !important;
  box-shadow: inset 0 0 0 1px rgba(0, 0, 0, .12), 0 0 0 4px rgba(184, 240, 58, .4) !important;
}
html.ipx.ipx.ipx body.template-11 #content input[type="checkbox"],
html.ipx.ipx.ipx body.template-11 #content input[type="radio"] { accent-color: #0b0c0e; }

/* --- Breadcrumb home -------------------------------------------------- */
html.ipx.ipx.ipx body.template-11 .breadcrumbs .navigation-home-icon {
  display: inline-grid !important;
  place-items: center;
  width: 30px !important;
  height: 30px !important;
  border-radius: 50% !important;
  background: var(--x-soft) !important;
  box-shadow: none !important;
  border: 0 !important;
  transition: background-color .25s !important;
}
html.ipx.ipx.ipx body.template-11 .breadcrumbs .navigation-home-icon:hover { background: var(--x-lime) !important; }

/* --- 404 ------------------------------------------------------------- */
html.ipx.ipx.ipx body.in-404 #content .empty-content-404 {
  position: relative;
  max-width: 880px;
  margin: clamp(24px, 4vw, 64px) auto clamp(48px, 7vw, 120px);
  padding: clamp(48px, 8vw, 120px) clamp(20px, 5vw, 80px);
  text-align: center;
  color: rgba(255, 255, 255, .7);
  background:
    radial-gradient(60% 70% at 50% 0%, rgba(184, 240, 58, .22), transparent 70%),
    radial-gradient(40% 50% at 90% 100%, rgba(61, 107, 255, .14), transparent 70%),
    var(--x-ink);
  border-radius: 36px;
  overflow: hidden;
  isolation: isolate;
}
html.ipx.ipx.ipx body.in-404 #content .empty-content-404::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background: radial-gradient(rgba(255, 255, 255, .08) 1px, transparent 1.2px) 0 0 / 22px 22px;
  -webkit-mask-image: radial-gradient(70% 70% at 50% 40%, #000, transparent);
  mask-image: radial-gradient(70% 70% at 50% 40%, #000, transparent);
}
html.ipx.ipx.ipx body.in-404 #content .empty-content-404 h1 {
  margin: 0 0 12px !important;
  color: #fff !important;
  font: 700 clamp(28px, 3.6vw, 44px)/1.08 var(--x-font) !important;
  letter-spacing: -.035em !important;
}
html.ipx.ipx.ipx body.in-404 #content .empty-content-404 h1::before {
  content: "404" !important;
  display: block !important;
  position: static !important;
  margin: 0 0 6px !important;
  font: 700 clamp(110px, 20vw, 240px)/.9 var(--x-font) !important;
  letter-spacing: -.07em !important;
  background: linear-gradient(180deg, #fff 20%, rgba(255, 255, 255, .18)) !important;
  -webkit-background-clip: text !important;
  background-clip: text !important;
  -webkit-text-fill-color: transparent !important;
  color: transparent !important;
  opacity: 1 !important;
  transform: none !important;
}
html.ipx.ipx.ipx body.in-404 #content .empty-content-404 h2 {
  margin: 0 0 6px !important;
  color: rgba(255, 255, 255, .78) !important;
  font: 600 18px/1.4 var(--x-font) !important;
  letter-spacing: -.01em !important;
}
html.ipx.ipx.ipx body.in-404 #content .empty-content-404 p { color: rgba(255, 255, 255, .62) !important; font-size: 17px !important; }
html.ipx.ipx.ipx body.in-404 #content .empty-content-404 > p:last-of-type:not(:first-of-type) { display: none !important; }
html.ipx.ipx.ipx .ipx-cta-row { display: flex; flex-wrap: wrap; justify-content: center; gap: 10px; margin-top: 28px; }

/* --- Empty cart ------------------------------------------------------ */
html.ipx.ipx.ipx body.template-11 .cart-empty .cart-heading {
  font: 700 clamp(34px, 4.6vw, 60px)/1.04 var(--x-font) !important;
  letter-spacing: -.045em !important;
  color: var(--x-ink) !important;
}
html.ipx.ipx.ipx body.template-11 .cart-empty .empty-cart-boxes > *,
html.ipx.ipx.ipx body.template-11 .cart-empty .empty-cart-boxes > * > *,
html.ipx.ipx.ipx body.template-11 .cart-empty .box,
html.ipx.ipx.ipx body.template-11 .cart-empty .cart-content {
  background: transparent !important;
  border: 0 !important;
  box-shadow: none !important;
}
html.ipx.ipx.ipx body.template-11 .cart-empty .empty-cart-boxes a,
html.ipx.ipx.ipx body.template-11 .cart-empty .cart-content a:not(.btn) {
  border: 0 !important;
  box-shadow: none !important;
}
html.ipx.ipx.ipx body.template-11 .cart-empty .empty-cart-boxes ul a,
html.ipx.ipx.ipx body.template-11 .cart-empty .empty-cart-boxes li a {
  display: inline-flex;
  padding: 9px 16px !important;
  background: var(--x-soft) !important;
  border-radius: 999px !important;
  color: var(--x-text) !important;
  font-weight: 600;
}
html.ipx.ipx.ipx body.template-11 .cart-empty .empty-cart-boxes ul a:hover,
html.ipx.ipx.ipx body.template-11 .cart-empty .empty-cart-boxes li a:hover { background: var(--x-ink) !important; color: #fff !important; }

/* --- Empty blog stage (JS) ------------------------------------------ */
html.ipx.ipx.ipx .ipx-stage {
  position: relative;
  margin: clamp(20px, 3vw, 40px) 0 clamp(40px, 6vw, 96px);
  padding: clamp(36px, 6vw, 88px) clamp(24px, 5vw, 72px);
  color: rgba(255, 255, 255, .66);
  background:
    radial-gradient(60% 80% at 100% 0%, rgba(184, 240, 58, .2), transparent 60%),
    radial-gradient(50% 60% at 0% 100%, rgba(61, 107, 255, .12), transparent 60%),
    var(--x-ink);
  border-radius: 36px;
  overflow: hidden;
}
html.ipx.ipx.ipx .ipx-stage__k { display: inline-flex; align-items: center; gap: 10px; margin: 0 0 18px; color: rgba(255, 255, 255, .55); font: 600 11.5px/1 var(--x-font); letter-spacing: .09em; text-transform: uppercase; }
html.ipx.ipx.ipx .ipx-stage__k::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: var(--x-lime); box-shadow: 0 0 10px rgba(184, 240, 58, .9); }
html.ipx.ipx.ipx .ipx-stage__t { margin: 0 0 14px; color: #fff; font: 700 clamp(30px, 4.4vw, 56px)/1.04 var(--x-font); letter-spacing: -.045em; }
html.ipx.ipx.ipx .ipx-stage__t em { font-style: normal; background: linear-gradient(180deg, var(--x-lime-hi), var(--x-lime-lo)); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; }
html.ipx.ipx.ipx .ipx-stage__p { max-width: 56ch; margin: 0; font-size: 17px; line-height: 1.6; }
html.ipx.ipx.ipx .ipx-stage .ipx-cta-row { justify-content: flex-start; }
html.ipx.ipx.ipx .ipx-btn--light { color: var(--x-ink) !important; background: #fff; }
html.ipx.ipx.ipx .ipx-btn--light:hover { background: var(--x-lime); transform: translateY(-2px); }

/* ==========================================================================
   9.7 — ETAPA 2: homepage cinema
   ========================================================================== */
html.ipx.ipx.ipx .ip-home .ip-hero.ipx-hidden { display: none !important; }

html.ipx.ipx.ipx .ipx-hero {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  justify-items: center;
  min-height: min(980px, calc(100svh - 60px));
  margin: 0 calc(50% - 50vw);
  padding: clamp(56px, 8vw, 112px) 20px clamp(28px, 4vw, 48px);
  color: rgba(255, 255, 255, .7);
  background:
    radial-gradient(60% 50% at 50% 62%, rgba(184, 240, 58, .10), transparent 70%),
    radial-gradient(40% 40% at 85% 10%, rgba(61, 107, 255, .10), transparent 70%),
    #08090b;
  text-align: center;
}
html.ipx.ipx.ipx .ipx-hero { border-radius: 0 0 clamp(28px, 4vw, 56px) clamp(28px, 4vw, 56px); }
html.ipx.ipx.ipx .ipx-hero__bg {
  position: absolute;
  inset: 0;
  z-index: -1;
  background: radial-gradient(rgba(255, 255, 255, .06) 1px, transparent 1.2px) 0 0 / 24px 24px;
  -webkit-mask-image: radial-gradient(70% 60% at 50% 45%, #000, transparent);
  mask-image: radial-gradient(70% 60% at 50% 45%, #000, transparent);
}
html.ipx.ipx.ipx .ipx-hero__rings {
  position: absolute;
  left: 50%;
  top: 64%;
  width: 0;
  height: 0;
}
html.ipx.ipx.ipx .ipx-hero__rings i {
  position: absolute;
  left: 50%;
  top: 50%;
  width: min(1100px, 120vw);
  aspect-ratio: 1.6;
  border-radius: 50%;
  border: 1px solid rgba(220, 255, 134, .22);
  transform: translate(-50%, -50%) scale(.2);
  opacity: 0;
  animation: ipxRing 7.5s cubic-bezier(.2, .6, .2, 1) infinite;
}
html.ipx.ipx.ipx .ipx-hero__rings i:nth-child(2) { animation-delay: 1.875s; }
html.ipx.ipx.ipx .ipx-hero__rings i:nth-child(3) { animation-delay: 3.75s; }
html.ipx.ipx.ipx .ipx-hero__rings i:nth-child(4) { animation-delay: 5.625s; }
html.ipx.ipx.ipx .ipx-hero.is-paused .ipx-hero__rings i { animation-play-state: paused; }
@keyframes ipxRing {
  0% { transform: translate(-50%, -50%) scale(.2); opacity: 0; }
  15% { opacity: .9; }
  100% { transform: translate(-50%, -50%) scale(1); opacity: 0; }
}

html.ipx.ipx.ipx .ipx-hero__copy { position: relative; z-index: 2; max-width: 980px; will-change: transform, opacity; }
html.ipx.ipx.ipx .ipx-hero__k {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  margin: 0 0 22px;
  color: rgba(255, 255, 255, .6);
  font: 600 12px/1 var(--x-font);
  letter-spacing: .1em;
  text-transform: uppercase;
}
html.ipx.ipx.ipx .ipx-hero__k::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: var(--x-lime); box-shadow: 0 0 12px rgba(184, 240, 58, .9); }
html.ipx.ipx.ipx .ipx-hero__t {
  margin: 0 0 22px !important;
  color: #fff !important;
  font: 700 clamp(44px, 7.4vw, 112px)/.98 var(--x-font) !important;
  letter-spacing: -.055em !important;
}
html.ipx.ipx.ipx .ipx-hero__t em {
  display: block;
  font-style: normal;
  background: linear-gradient(180deg, var(--x-lime-hi) 10%, var(--x-lime-lo) 95%);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  padding-bottom: .07em;
}
html.ipx.ipx.ipx .ipx-hero__lead {
  max-width: 600px;
  margin: 0 auto;
  color: rgba(255, 255, 255, .66);
  font-size: clamp(16px, 1.4vw, 20px);
  line-height: 1.55;
  letter-spacing: -.012em;
}
html.ipx.ipx.ipx .ipx-hero .ipx-cta-row { justify-content: center; margin-top: 30px; }

html.ipx.ipx.ipx .ipx-hero__stage {
  position: relative;
  z-index: 1;
  width: min(1100px, 100%);
  aspect-ratio: 16 / 9;
  margin-top: clamp(28px, 4vw, 56px);
  will-change: transform;
}
html.ipx.ipx.ipx .ipx-hero__frame {
  position: absolute;
  inset: 0;
  margin: 0;
  opacity: 0;
  transition: opacity 1.4s var(--x-ease);
  -webkit-mask-image: radial-gradient(46% 50% at 50% 50%, #000 58%, transparent 100%);
  mask-image: radial-gradient(46% 50% at 50% 50%, #000 58%, transparent 100%);
}
html.ipx.ipx.ipx .ipx-hero__frame.is-on { opacity: 1; }
html.ipx.ipx.ipx .ipx-hero__frame img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  transform: scale(1);
  transition: transform 7s linear;
}
html.ipx.ipx.ipx .ipx-hero__frame.is-on img { transform: scale(1.05); }
html.ipx.ipx.ipx .ipx-hero__cap {
  position: absolute;
  left: 50%;
  bottom: 6%;
  z-index: 2;
  margin: 0;
  transform: translateX(-50%);
  padding: 9px 16px;
  color: #fff;
  background: rgba(11, 12, 14, .5);
  -webkit-backdrop-filter: blur(14px) saturate(160%);
  backdrop-filter: blur(14px) saturate(160%);
  border-radius: 999px;
  box-shadow: inset 0 0 0 .5px rgba(255, 255, 255, .18);
  font: 600 12.5px/1 var(--x-font);
  white-space: nowrap;
}
html.ipx.ipx.ipx .ipx-hero__dots { position: absolute; left: 50%; bottom: -14px; z-index: 4; display: flex; gap: 8px; transform: translateX(-50%); }
html.ipx.ipx.ipx .ipx-hero__dots button {
  width: 28px;
  height: 4px;
  padding: 0;
  border: 0;
  border-radius: 4px;
  background: rgba(255, 255, 255, .2);
  cursor: pointer;
  transition: background-color .3s, width .4s var(--x-ease-out);
}
html.ipx.ipx.ipx .ipx-hero__dots button.is-on { width: 44px; background: var(--x-lime); }

html.ipx.ipx.ipx .ipx-hero__facts {
  position: relative;
  z-index: 4;
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 0;
  width: min(1180px, 100%);
  margin: clamp(36px, 5vw, 64px) 0 0;
  padding: 0;
  list-style: none;
  text-align: left;
}
html.ipx.ipx.ipx .ipx-hero__facts li { padding: 4px 22px; border-left: 1px solid rgba(255, 255, 255, .1); }
html.ipx.ipx.ipx .ipx-hero__facts li:first-child { border-left: 0; padding-left: 0; }
html.ipx.ipx.ipx .ipx-hero__facts strong { display: block; color: #fff; font: 700 clamp(22px, 2.6vw, 34px)/1.05 var(--x-font); letter-spacing: -.04em; }
html.ipx.ipx.ipx .ipx-hero__facts span { display: block; margin-top: 6px; color: rgba(255, 255, 255, .5); font-size: 13.5px; }

/* entrance */
html.ipx.ipx.ipx .ipx-hero .ipx-hero__k,
html.ipx.ipx.ipx .ipx-hero .ipx-hero__t,
html.ipx.ipx.ipx .ipx-hero .ipx-hero__lead,
html.ipx.ipx.ipx .ipx-hero .ipx-cta-row,
html.ipx.ipx.ipx .ipx-hero .ipx-hero__stage { opacity: 0; transform: translateY(18px); }
html.ipx.ipx.ipx .ipx-hero.is-in .ipx-hero__k,
html.ipx.ipx.ipx .ipx-hero.is-in .ipx-hero__t,
html.ipx.ipx.ipx .ipx-hero.is-in .ipx-hero__lead,
html.ipx.ipx.ipx .ipx-hero.is-in .ipx-cta-row { animation: ipxRise 1s var(--x-ease-out) both; }
html.ipx.ipx.ipx .ipx-hero.is-in .ipx-hero__t { animation-delay: .08s; }
html.ipx.ipx.ipx .ipx-hero.is-in .ipx-hero__lead { animation-delay: .2s; }
html.ipx.ipx.ipx .ipx-hero.is-in .ipx-cta-row { animation-delay: .3s; }
html.ipx.ipx.ipx .ipx-hero.is-in .ipx-hero__stage { animation: ipxRiseStage 1.6s var(--x-ease-out) .25s both; }
@keyframes ipxRise { from { opacity: 0; transform: translateY(18px); } to { opacity: 1; transform: none; } }
@keyframes ipxRiseStage { from { opacity: 0; transform: translateY(40px) scale(.96); } to { opacity: 1; transform: none; } }

/* statement */
html.ipx.ipx.ipx .ipx-say { position: relative; height: 210vh; margin: 0 calc(50% - 50vw); background: #fff; }
html.ipx.ipx.ipx .ipx-say__pin {
  position: sticky;
  top: 0;
  display: grid;
  place-items: center;
  height: 100vh;
  padding: 0 24px;
}
html.ipx.ipx.ipx .ipx-say__t {
  max-width: 1080px;
  margin: 0;
  font: 700 clamp(34px, 5.4vw, 80px)/1.06 var(--x-font);
  letter-spacing: -.05em;
  text-align: center;
  color: var(--x-ink);
}
html.ipx.ipx.ipx .ipx-say__t span { opacity: .14; transition: opacity .45s var(--x-ease); }
html.ipx.ipx.ipx .ipx-say__t span.is-lit { opacity: 1; }

/* rest of the home: quieter, borderless */
html.ipx.ipx.ipx .ip-home .ip-place { border-radius: 30px !important; box-shadow: none !important; }
html.ipx.ipx.ipx .ip-home .ip-place__media img { transition: transform 1.4s var(--x-ease-out) !important; }
html.ipx.ipx.ipx .ip-home .ip-place:hover .ip-place__media img { transform: scale(1.05) !important; }
html.ipx.ipx.ipx .ip-home .ip-family { border: 0 !important; box-shadow: none !important; background: transparent !important; }
html.ipx.ipx.ipx .ip-home .ip-family__media { border-radius: 24px !important; overflow: hidden; background: #16171a; }
html.ipx.ipx.ipx .ip-home .ip-sec--dark { border-radius: 36px !important; }
html.ipx.ipx.ipx .ip-home .ip-bento__card { border: 0 !important; box-shadow: none !important; }
html.ipx.ipx.ipx .ip-home .ip-calc { border: 0 !important; box-shadow: none !important; }
html.ipx.ipx.ipx .ip-home .ip-faq7 .ip-q { border-left: 0 !important; border-right: 0 !important; border-top: 0 !important; border-radius: 0 !important; background: transparent !important; box-shadow: none !important; }

@media (max-width: 767px) {
  html.ipx.ipx.ipx .ipx-hero { min-height: 0; padding-top: 48px; }
  html.ipx.ipx.ipx .ipx-hero__stage { aspect-ratio: 4 / 3.4; }
  html.ipx.ipx.ipx .ipx-hero__frame { -webkit-mask-image: radial-gradient(75% 70% at 50% 50%, #000 50%, transparent 100%); mask-image: radial-gradient(75% 70% at 50% 50%, #000 50%, transparent 100%); }
  html.ipx.ipx.ipx .ipx-hero__facts { grid-template-columns: repeat(2, minmax(0, 1fr)); row-gap: 22px; }
  html.ipx.ipx.ipx .ipx-hero__facts li:nth-child(3) { border-left: 0; padding-left: 0; }
  html.ipx.ipx.ipx .ipx-hero { margin-bottom: 0; }
  html.ipx.ipx.ipx .ipx-hero .ipx-cta-row .ipx-btn { flex: 1 1 auto; justify-content: center; }
  html.ipx.ipx.ipx .ipx-say { height: 160vh; }
  html.ipx.ipx.ipx .ip-home .ip-places { grid-template-columns: 1fr !important; }
}
@media (prefers-reduced-motion: reduce) {
  html.ipx.ipx.ipx .ipx-hero * { opacity: 1 !important; transform: none !important; }
  html.ipx.ipx.ipx .ipx-say { height: auto; }
  html.ipx.ipx.ipx .ipx-say__pin { position: static; height: auto; padding: 96px 24px; }
}

/* ==========================================================================
   9.8 — ETAPA 3: category cinema hero (H1 + perex moved inside, unchanged)
   ========================================================================== */
html.ipx.ipx.ipx body.type-category .ipx-cathero {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  display: grid;
  grid-template-columns: minmax(0, 1.08fr) minmax(0, 1fr);
  align-items: center;
  gap: clamp(20px, 4vw, 56px);
  min-height: clamp(460px, 44vw, 600px);
  margin: 0 0 clamp(32px, 4vw, 56px);
  padding: clamp(36px, 5vw, 72px) clamp(24px, 4.5vw, 64px);
  color: rgba(255, 255, 255, .7);
  background:
    radial-gradient(55% 70% at 78% 55%, rgba(184, 240, 58, .12), transparent 70%),
    radial-gradient(40% 50% at 10% 0%, rgba(61, 107, 255, .10), transparent 70%),
    #08090b;
  border-radius: clamp(28px, 3vw, 40px);
}
html.ipx.ipx.ipx body.type-category .ipx-cathero::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background: radial-gradient(rgba(255, 255, 255, .06) 1px, transparent 1.2px) 0 0 / 22px 22px;
  -webkit-mask-image: radial-gradient(70% 80% at 30% 40%, #000, transparent);
  mask-image: radial-gradient(70% 80% at 30% 40%, #000, transparent);
}
html.ipx.ipx.ipx body.type-category .ipx-cathero--noimg { grid-template-columns: 1fr; }
html.ipx.ipx.ipx body.type-category .ipx-cathero__copy { position: relative; z-index: 2; }
html.ipx.ipx.ipx body.type-category .ipx-cathero .ipx-eyebrow { color: rgba(255, 255, 255, .55); }
html.ipx.ipx.ipx body.type-category .ipx-cathero .ipx-eyebrow b { color: #fff; }
html.ipx.ipx.ipx body.type-category .ipx-cathero .category-title,
html.ipx.ipx.ipx body.type-category .ipx-cathero h1 {
  max-width: 14ch;
  margin: 0 0 20px !important;
  font-size: clamp(40px, 5vw, 72px) !important;
  background: linear-gradient(180deg, #fff 35%, rgba(255, 255, 255, .55) 120%) !important;
  -webkit-background-clip: text !important;
  background-clip: text !important;
  -webkit-text-fill-color: transparent !important;
}
html.ipx.ipx.ipx body.type-category .ipx-cathero .category-perex { max-width: 560px; margin: 0 !important; }
html.ipx.ipx.ipx body.type-category .ipx-cathero .category-perex p {
  color: rgba(255, 255, 255, .62) !important;
  font-size: clamp(15px, 1.15vw, 17.5px) !important;
}
html.ipx.ipx.ipx body.type-category .ipx-cathero .category-perex p:first-child,
html.ipx.ipx.ipx body.type-category .ipx-cathero .category-perex .lead { color: rgba(255, 255, 255, .86) !important; }
html.ipx.ipx.ipx body.type-category .ipx-cathero .category-perex strong { color: #fff !important; }
html.ipx.ipx.ipx body.type-category .ipx-cathero .category-perex a { color: var(--x-lime) !important; }
html.ipx.ipx.ipx body.type-category .ipx-cathero .ipx-cta-row { justify-content: flex-start; margin-top: 26px; }
html.ipx.ipx.ipx body.type-category .ipx-cathero__vis {
  position: relative;
  align-self: stretch;
  min-height: 300px;
}
html.ipx.ipx.ipx body.type-category .ipx-cathero__vis img {
  position: absolute;
  inset: 0 -6%;
  width: 112%;
  height: 100%;
  object-fit: contain;
  -webkit-mask-image: radial-gradient(46% 42% at 50% 50%, #000 55%, transparent 100%);
  mask-image: radial-gradient(46% 42% at 50% 50%, #000 55%, transparent 100%);
  transform: scale(1.02);
  animation: ipxCatImg 16s ease-in-out infinite alternate;
}
@keyframes ipxCatImg { from { transform: scale(1.02); } to { transform: scale(1.08); } }
html.ipx.ipx.ipx body.type-category .ipx-cathero__vis .ipx-hero__rings { top: 50%; }
html.ipx.ipx.ipx body.type-category .ipx-cathero__vis .ipx-hero__rings i { width: min(780px, 90vw); }
html.ipx.ipx.ipx body.type-category .ipx-cathero .ipx-cathero__copy > * { opacity: 0; transform: translateY(16px); }
html.ipx.ipx.ipx body.type-category .ipx-cathero.is-in .ipx-cathero__copy > * { animation: ipxRise .9s var(--x-ease-out) both; }
html.ipx.ipx.ipx body.type-category .ipx-cathero.is-in .ipx-cathero__copy > :nth-child(2) { animation-delay: .07s; }
html.ipx.ipx.ipx body.type-category .ipx-cathero.is-in .ipx-cathero__copy > :nth-child(3) { animation-delay: .14s; }
html.ipx.ipx.ipx body.type-category .ipx-cathero.is-in .ipx-cathero__copy > :nth-child(4) { animation-delay: .21s; }
@media (max-width: 991px) {
  html.ipx.ipx.ipx body.type-category .ipx-cathero { grid-template-columns: 1fr; min-height: 0; }
  html.ipx.ipx.ipx body.type-category .ipx-cathero__vis { order: -1; min-height: 0; aspect-ratio: 16 / 10; margin: -12px -8px 0; }
  html.ipx.ipx.ipx body.type-category .ipx-cathero__vis img { inset: 0; width: 100%; height: 100%; }
}
@media (max-width: 600px) {
  html.ipx.ipx.ipx body.type-category .ipx-cathero { padding: 22px 20px 28px; border-radius: 28px; margin-left: -6px; margin-right: -6px; }
  html.ipx.ipx.ipx body.type-category .ipx-cathero .ipx-cta-row .ipx-btn { flex: 1 1 auto; justify-content: center; }
}
@media (prefers-reduced-motion: reduce) {
  html.ipx.ipx.ipx body.type-category .ipx-cathero .ipx-cathero__copy > * { opacity: 1 !important; transform: none !important; }
}
/* product photos on white background: framed card instead of masked glow */
html.ipx.ipx.ipx body.type-category .ipx-cathero__vis--card { display: grid; place-items: center; }
html.ipx.ipx.ipx body.type-category .ipx-cathero__vis--card img {
  position: relative;
  inset: auto;
  width: min(78%, 440px);
  height: auto;
  aspect-ratio: 1;
  object-fit: contain;
  padding: 6%;
  background: #fff;
  border-radius: 32px;
  -webkit-mask-image: none;
  mask-image: none;
  box-shadow: 0 40px 90px -30px rgba(0, 0, 0, .7), 0 0 0 1px rgba(255, 255, 255, .06);
  animation: ipxFloat 7s ease-in-out infinite alternate;
}
@keyframes ipxFloat { from { transform: translateY(-6px) rotate(-1deg); } to { transform: translateY(6px) rotate(1deg); } }

/* ==========================================================================
   9.9 — ETAPA 4: product template for every product (old + v5)
   ========================================================================== */
/* title block inside the right column */
html.ipx.ipx.ipx body.type-detail.ipx-ptop .p-info-wrapper .p-detail-inner-header {
  margin: 0 0 18px !important;
  padding: 0 !important;
  border: 0 !important;
  background: none !important;
}
html.ipx.ipx.ipx body.type-detail:not(.ipx-v5) .p-detail-inner-header h1 {
  margin: 0 0 10px !important;
  font: 700 clamp(28px, 2.7vw, 44px)/1.06 var(--x-font) !important;
  letter-spacing: -.04em !important;
  color: var(--x-ink);
  background: linear-gradient(180deg, #0b0c0e 40%, #7c818a 125%);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  padding-bottom: .05em;
}
html.ipx.ipx.ipx body.type-detail .p-detail-inner-header .p-code {
  color: var(--x-mute2) !important;
  font: 600 11px/1 var(--x-font) !important;
  letter-spacing: .08em !important;
  text-transform: uppercase;
}
html.ipx.ipx.ipx body.type-detail .ipx-pchips { display: flex; flex-wrap: wrap; gap: 6px; margin: 14px 0 0; }
html.ipx.ipx.ipx body.type-detail .ipx-pchips .ipx-chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  height: 28px;
  padding: 0 12px;
  color: var(--x-text);
  background: var(--x-soft);
  border-radius: 999px;
  font: 600 12px/1 var(--x-font);
}
html.ipx.ipx.ipx body.type-detail .ipx-pchips .ipx-chip--w { background: var(--x-lime); color: var(--x-ink); font-weight: 700; }
html.ipx.ipx.ipx body.type-detail .ipx-pchips .ipx-chip--wifi::before,
html.ipx.ipx.ipx body.type-detail .ipx-pchips .ipx-chip--led::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: #4a7dff; }
html.ipx.ipx.ipx body.type-detail .ipx-pchips .ipx-chip--led::before { background: #f2b544; }

/* buy column: borderless, airy */
html.ipx.ipx.ipx body.type-detail .p-info-wrapper {
  background: transparent !important;
  border: 0 !important;
  box-shadow: none !important;
  padding-top: 0 !important;
}
html.ipx.ipx.ipx body.type-detail .p-info-wrapper > *:not(.p-detail-inner-header) { border-color: var(--x-line) !important; }
html.ipx.ipx.ipx body.type-detail .p-info-wrapper .p-final-price-wrapper,
html.ipx.ipx.ipx body.type-detail .p-info-wrapper .price-final {
  color: var(--x-ink) !important;
}
html.ipx.ipx.ipx body.type-detail .p-info-wrapper .price-final-holder,
html.ipx.ipx.ipx body.type-detail .p-info-wrapper .price-final strong {
  font: 700 clamp(30px, 2.6vw, 40px)/1 var(--x-font) !important;
  letter-spacing: -.04em !important;
  color: var(--x-ink) !important;
  font-variant-numeric: tabular-nums;
}
html.ipx.ipx.ipx body.type-detail .p-info-wrapper .availability-value,
html.ipx.ipx.ipx body.type-detail .p-info-wrapper .availability-label { font-weight: 600 !important; }
html.ipx.ipx.ipx body.type-detail .p-info-wrapper .add-to-cart,
html.ipx.ipx.ipx body.type-detail .p-info-wrapper .p-to-cart-block {
  background: transparent !important;
  border: 0 !important;
  box-shadow: none !important;
}
html.ipx.ipx.ipx body.type-detail .p-info-wrapper .quantity {
  border: 0 !important;
  border-radius: 999px !important;
  background: var(--x-soft) !important;
  box-shadow: none !important;
  overflow: hidden;
}
html.ipx.ipx.ipx body.type-detail .p-info-wrapper .quantity input,
html.ipx.ipx.ipx body.type-detail .p-info-wrapper .quantity button,
html.ipx.ipx.ipx body.type-detail .p-info-wrapper .quantity .increase,
html.ipx.ipx.ipx body.type-detail .p-info-wrapper .quantity .decrease {
  background: transparent !important;
  border: 0 !important;
  box-shadow: none !important;
}
html.ipx.ipx.ipx body.type-detail .p-info-wrapper .add-to-cart-button {
  min-height: 54px !important;
  border-radius: 999px !important;
  background: var(--x-ink) !important;
  color: #fff !important;
  font: 650 16px/1 var(--x-font) !important;
  letter-spacing: -.01em !important;
  box-shadow: none !important;
  transition: background-color .3s var(--x-ease), color .3s, box-shadow .4s, transform .45s var(--x-ease-out) !important;
}
html.ipx.ipx.ipx body.type-detail .p-info-wrapper .add-to-cart-button:hover {
  background: var(--x-lime) !important;
  color: var(--x-ink) !important;
  box-shadow: 0 16px 44px -14px rgba(184, 240, 58, .7) !important;
  transform: translateY(-1px);
}
html.ipx.ipx.ipx body.type-detail .p-info-wrapper .p-short-description {
  color: var(--x-body) !important;
  font-size: 15.5px !important;
  line-height: 1.6 !important;
}
html.ipx.ipx.ipx body.type-detail .p-info-wrapper .link-icon,
html.ipx.ipx.ipx body.type-detail .p-info-wrapper .social-buttons-wrapper a { color: var(--x-mute) !important; font-size: 13px !important; }

/* gallery */
html.ipx.ipx.ipx body.type-detail .p-image-wrapper .p-image,
html.ipx.ipx.ipx body.type-detail .p-image-wrapper .p-main-image {
  overflow: hidden;
  border: 0 !important;
  border-radius: 28px !important;
  background: #16171a !important;
  box-shadow: none !important;
}
html.ipx.ipx.ipx body.type-detail .p-image-wrapper .p-main-image img { transition: transform 1.2s var(--x-ease-out); }
html.ipx.ipx.ipx body.type-detail .p-image-wrapper .p-main-image:hover img { transform: scale(1.03); }
html.ipx.ipx.ipx body.type-detail .p-thumbnails a.p-thumbnail,
html.ipx.ipx.ipx body.type-detail .p-thumbnails .p-thumbnail {
  overflow: hidden;
  border: 0 !important;
  border-radius: 14px !important;
  box-shadow: none !important;
  opacity: .6;
  transition: opacity .3s, box-shadow .3s !important;
}
html.ipx.ipx.ipx body.type-detail .p-thumbnails a.p-thumbnail:hover,
html.ipx.ipx.ipx body.type-detail .p-thumbnails a.p-thumbnail.highlighted {
  opacity: 1;
  box-shadow: 0 0 0 2px #fff, 0 0 0 4px var(--x-lime) !important;
}
html.ipx.ipx.ipx body.type-detail .p-thumbnails .thumbnail-prev,
html.ipx.ipx.ipx body.type-detail .p-thumbnails .thumbnail-next {
  border: 0 !important;
  border-radius: 50% !important;
  background: #fff !important;
  box-shadow: 0 6px 20px rgba(0, 0, 0, .15) !important;
}

/* benefit banner → quiet icon row */
html.ipx.ipx.ipx body.template-11 .benefitBanner {
  gap: 0 !important;
  margin: clamp(28px, 4vw, 52px) 0 !important;
  padding: 22px 0 !important;
  border-top: 1px solid var(--x-line) !important;
  border-bottom: 1px solid var(--x-line) !important;
}
html.ipx.ipx.ipx body.template-11 .benefitBanner__item { border: 0 !important; background: none !important; }
html.ipx.ipx.ipx body.template-11 .benefitBanner__item + .benefitBanner__item { border-left: 1px solid var(--x-line) !important; }
html.ipx.ipx.ipx body.template-11 .benefitBanner__link {
  background: transparent !important;
  border: 0 !important;
  box-shadow: none !important;
  border-radius: 0 !important;
  padding: 6px 22px !important;
}
html.ipx.ipx.ipx body.template-11 .benefitBanner__picture,
html.ipx.ipx.ipx body.template-11 .benefitBanner__link [class*="icon"],
html.ipx.ipx.ipx body.template-11 .benefitBanner__link img {
  border-radius: 12px !important;
}
html.ipx.ipx.ipx body.template-11 .benefitBanner__title { color: var(--x-ink) !important; font-weight: 650 !important; letter-spacing: -.01em; }
html.ipx.ipx.ipx body.template-11 .benefitBanner__data,
html.ipx.ipx.ipx body.template-11 .benefitBanner__content { color: var(--x-mute) !important; }

/* tabs */
html.ipx.ipx.ipx body.type-detail .shp-tabs-holder,
html.ipx.ipx.ipx body.type-detail .shp-tabs { border: 0 !important; background: transparent !important; }
html.ipx.ipx.ipx body.type-detail .shp-tabs {
  display: inline-flex !important;
  gap: 2px;
  padding: 4px !important;
  background: var(--x-soft) !important;
  border-radius: 999px !important;
}
html.ipx.ipx.ipx body.type-detail .shp-tabs .shp-tab-link {
  border: 0 !important;
  border-radius: 999px !important;
  background: transparent !important;
  color: var(--x-mute) !important;
  font-weight: 600 !important;
  box-shadow: none !important;
}
html.ipx.ipx.ipx body.type-detail .shp-tabs .active .shp-tab-link,
html.ipx.ipx.ipx body.type-detail .shp-tabs .shp-tab-link.active {
  background: #fff !important;
  color: var(--x-ink) !important;
  box-shadow: 0 1px 3px rgba(0, 0, 0, .1) !important;
}

/* parameters (sidebar + table) */
html.ipx.ipx.ipx body.type-detail .extended-description h3,
html.ipx.ipx.ipx body.type-detail .extended-description h4,
html.ipx.ipx.ipx body.type-detail #description > h3,
html.ipx.ipx.ipx body.type-detail .description-inner h3:first-child {
  font: 700 22px/1.2 var(--x-font) !important;
  letter-spacing: -.025em !important;
  color: var(--x-ink) !important;
}
html.ipx.ipx.ipx body.type-detail table.detail-parameters,
html.ipx.ipx.ipx body.type-detail table.detail-parameters tbody,
html.ipx.ipx.ipx body.type-detail table.detail-parameters tr,
html.ipx.ipx.ipx body.type-detail table.detail-parameters th,
html.ipx.ipx.ipx body.type-detail table.detail-parameters td {
  background: transparent !important;
  border: 0 !important;
  box-shadow: none !important;
}
html.ipx.ipx.ipx body.type-detail table.detail-parameters { border-collapse: collapse !important; width: 100%; }
html.ipx.ipx.ipx body.type-detail table.detail-parameters tr { border-bottom: 1px solid var(--x-line) !important; }
html.ipx.ipx.ipx body.type-detail table.detail-parameters th {
  padding: 13px 14px 13px 0 !important;
  color: var(--x-mute) !important;
  font: 500 13px/1.4 var(--x-font) !important;
  vertical-align: top;
}
html.ipx.ipx.ipx body.type-detail table.detail-parameters td {
  padding: 13px 0 !important;
  color: var(--x-ink) !important;
  font: 600 13.5px/1.45 var(--x-font) !important;
}

/* legacy descriptions (infra-* / ip-product-story) — borderless, editorial */
html.ipx.ipx.ipx body.type-detail #description .infra-product-container,
html.ipx.ipx.ipx body.type-detail #description .ip-product-story { font-family: var(--x-font) !important; }
html.ipx.ipx.ipx body.type-detail #description .infra-tech-showcase,
html.ipx.ipx.ipx body.type-detail #description .infra-feature-card,
html.ipx.ipx.ipx body.type-detail #description [class*="ip-story-card"],
html.ipx.ipx.ipx body.type-detail #description [class*="ip-feature"] {
  border: 0 !important;
  box-shadow: none !important;
  border-radius: 24px !important;
  background: var(--x-soft) !important;
}
html.ipx.ipx.ipx body.type-detail #description .infra-tech-showcase.hot-section {
  color: rgba(255, 255, 255, .78) !important;
  background:
    radial-gradient(60% 80% at 100% 0%, rgba(184, 240, 58, .16), transparent 60%),
    var(--x-ink) !important;
}
html.ipx.ipx.ipx body.type-detail #description .infra-tech-showcase.hot-section * { color: inherit !important; }
html.ipx.ipx.ipx body.type-detail #description .infra-tech-showcase.hot-section strong,
html.ipx.ipx.ipx body.type-detail #description .infra-tech-showcase.hot-section h2,
html.ipx.ipx.ipx body.type-detail #description .infra-tech-showcase.hot-section h3 { color: #fff !important; }
html.ipx.ipx.ipx body.type-detail #description .infra-product-container h2,
html.ipx.ipx.ipx body.type-detail #description .ip-product-story h2 {
  font: 700 clamp(26px, 2.8vw, 40px)/1.08 var(--x-font) !important;
  letter-spacing: -.04em !important;
  color: var(--x-ink);
}
html.ipx.ipx.ipx body.type-detail #description .infra-product-container h3,
html.ipx.ipx.ipx body.type-detail #description .ip-product-story h3 { letter-spacing: -.02em !important; }
html.ipx.ipx.ipx body.type-detail #description .infra-product-container p,
html.ipx.ipx.ipx body.type-detail #description .infra-product-container li,
html.ipx.ipx.ipx body.type-detail #description .ip-product-story p,
html.ipx.ipx.ipx body.type-detail #description .ip-product-story li { line-height: 1.62 !important; }
html.ipx.ipx.ipx body.type-detail #description .infra-table,
html.ipx.ipx.ipx body.type-detail #description .infra-table tr,
html.ipx.ipx.ipx body.type-detail #description .infra-table td,
html.ipx.ipx.ipx body.type-detail #description .infra-table th {
  background: transparent !important;
  border: 0 !important;
}
html.ipx.ipx.ipx body.type-detail #description .infra-table tr { border-bottom: 1px solid var(--x-line) !important; }
html.ipx.ipx.ipx body.type-detail #description .infra-table td,
html.ipx.ipx.ipx body.type-detail #description .infra-table th { padding: 12px 10px !important; }

/* related / alternative products on detail → same cards as listing */
html.ipx.ipx.ipx body.type-detail .products-related .product .p,
html.ipx.ipx.ipx body.type-detail .products-alternative .product .p { border: 0 !important; box-shadow: none !important; background: transparent !important; }

@media (max-width: 991px) {
  html.ipx.ipx.ipx body.type-detail .benefitBanner { flex-wrap: wrap; }
  html.ipx.ipx.ipx body.type-detail .benefitBanner__item { flex: 1 1 50% !important; }
  html.ipx.ipx.ipx body.type-detail .benefitBanner__item:nth-child(3) { border-left: 0 !important; }
}
@media (max-width: 600px) {
  html.ipx.ipx.ipx body.type-detail .p-image-wrapper .p-main-image { border-radius: 20px !important; }
  html.ipx.ipx.ipx body.type-detail .shp-tabs { max-width: 100%; overflow-x: auto; }
}
html.ipx.ipx.ipx body.template-11.type-detail #content .p-detail-inner .product-top .p-info-wrapper {
  background: transparent !important;
  border: 0 !important;
  box-shadow: none !important;
  border-radius: 0 !important;
}
html.ipx.ipx.ipx body.template-11.type-detail #content .p-info-wrapper .btn-conversion {
  min-height: 54px !important;
  font-size: 16px !important;
}

/* ==========================================================================
   9.10 — ETAPA 5: content pages (legal, Jak nakupovat, brand, generic)
   ========================================================================== */
html.ipx.ipx.ipx body.type-page #content article.pageArticleDetail > header h1 {
  max-width: 18ch;
  margin: clamp(10px, 2vw, 28px) 0 clamp(18px, 2.4vw, 30px) !important;
  font: 700 clamp(38px, 5vw, 68px)/1.03 var(--x-font) !important;
  letter-spacing: -.048em !important;
  color: var(--x-ink);
  background: linear-gradient(180deg, #0b0c0e 30%, #7c818a 120%);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  padding-bottom: .06em;
}
/* legal & plain documents: editorial column */
html.ipx.ipx.ipx body.type-page #content article.ipx-doc > div {
  max-width: 760px;
  color: var(--x-body);
  font-size: 17px;
  line-height: 1.68;
  letter-spacing: -.008em;
}
html.ipx.ipx.ipx body.type-page #content article.ipx-doc > div h2 {
  margin: 2.2em 0 .6em !important;
  padding-top: 1.4em;
  border-top: 1px solid var(--x-line);
  color: var(--x-ink) !important;
  font: 700 clamp(22px, 2.3vw, 30px)/1.15 var(--x-font) !important;
  letter-spacing: -.03em !important;
}
html.ipx.ipx.ipx body.type-page #content article.ipx-doc > div h3 { margin: 1.6em 0 .4em !important; color: var(--x-text) !important; font: 650 19px/1.3 var(--x-font) !important; letter-spacing: -.015em !important; }
html.ipx.ipx.ipx body.type-page #content article.ipx-doc > div p,
html.ipx.ipx.ipx body.type-page #content article.ipx-doc > div li { color: var(--x-body) !important; font-size: 17px !important; line-height: 1.68 !important; }
html.ipx.ipx.ipx body.type-page #content article.ipx-doc > div strong { color: var(--x-text); font-weight: 600; }
html.ipx.ipx.ipx body.type-page #content article.ipx-doc > div a { color: var(--x-ink) !important; text-decoration: none !important; background: linear-gradient(90deg, var(--x-lime), var(--x-lime-lo)) 0 100% / 100% 2px no-repeat; }
html.ipx.ipx.ipx body.type-page #content article.ipx-doc > div ul { list-style: none !important; padding-left: 0 !important; }
html.ipx.ipx.ipx body.type-page #content article.ipx-doc > div ul > li { position: relative; padding-left: 22px; }
html.ipx.ipx.ipx body.type-page #content article.ipx-doc > div ul > li::before { content: ""; position: absolute; left: 2px; top: .7em; width: 7px; height: 7px; border-radius: 2px; background: linear-gradient(135deg, var(--x-lime-hi), var(--x-lime-lo)); }
html.ipx.ipx.ipx body.type-page #content article.ipx-doc > div table { width: 100%; border-collapse: collapse; font-size: 15px; }
html.ipx.ipx.ipx body.type-page #content article.ipx-doc > div td,
html.ipx.ipx.ipx body.type-page #content article.ipx-doc > div th { padding: 12px 10px; border: 0 !important; border-bottom: 1px solid var(--x-line) !important; text-align: left; vertical-align: top; }

/* Jak nakupovat: numbered steps without boxes */
html.ipx.ipx.ipx body.type-page .ip-buying-guide .ip-lead { color: var(--x-mute) !important; font-size: clamp(17px, 1.4vw, 20px) !important; line-height: 1.55 !important; max-width: 640px; }
html.ipx.ipx.ipx body.type-page .ip-buying-guide h2 {
  margin: clamp(40px, 5vw, 72px) 0 18px !important;
  color: var(--x-ink) !important;
  font: 700 clamp(28px, 3.2vw, 44px)/1.08 var(--x-font) !important;
  letter-spacing: -.04em !important;
}
html.ipx.ipx.ipx body.type-page .ip-buying-guide ol.ip-steps {
  counter-reset: ipxstep;
  max-width: 880px;
  margin: 0 !important;
  padding: 0 !important;
  list-style: none !important;
}
html.ipx.ipx.ipx body.type-page .ip-buying-guide ol.ip-steps > li {
  counter-increment: ipxstep;
  position: relative;
  margin: 0 !important;
  padding: 26px 0 26px 92px !important;
  background: transparent !important;
  border: 0 !important;
  border-bottom: 1px solid var(--x-line) !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  color: var(--x-body) !important;
  font-size: 17px !important;
  line-height: 1.6 !important;
}
html.ipx.ipx.ipx body.type-page .ip-buying-guide ol.ip-steps > li::before {
  content: counter(ipxstep, decimal-leading-zero) !important;
  position: absolute;
  left: 0;
  top: 18px;
  width: auto !important;
  height: auto !important;
  background: none !important;
  border: 0 !important;
  box-shadow: none !important;
  font: 700 46px/1 var(--x-font) !important;
  letter-spacing: -.05em;
  color: transparent !important;
  -webkit-text-stroke: 1.4px var(--x-ink);
}
html.ipx.ipx.ipx body.type-page .ip-buying-guide ol.ip-steps > li:hover::before { -webkit-text-stroke-color: transparent; color: var(--x-lime-lo) !important; }
html.ipx.ipx.ipx body.type-page .ip-buying-guide ol.ip-steps > li strong { color: var(--x-ink) !important; font-weight: 650; }
html.ipx.ipx.ipx body.type-page .ip-buying-guide .ip-note,
html.ipx.ipx.ipx body.type-page .ip-buying-guide .ip-help-card {
  border: 0 !important;
  box-shadow: none !important;
  border-radius: 28px !important;
  background: var(--x-soft) !important;
}
html.ipx.ipx.ipx body.type-page .ip-buying-guide .ip-faq details,
html.ipx.ipx.ipx body.type-page .ip-buying-guide .ip-faq > div {
  border: 0 !important;
  border-bottom: 1px solid var(--x-line) !important;
  border-radius: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
}

/* brand page uses the category hero (moved content, unchanged) */
html.ipx.ipx.ipx body.type-manufacturer-detail .manufacturerDetail { padding-top: clamp(8px, 2vw, 24px); }
html.ipx.ipx.ipx body.type-manufacturer-detail .ipx-cathero { position: relative; isolation: isolate; overflow: hidden; display: grid; grid-template-columns: minmax(0, 1.08fr) minmax(0, 1fr); align-items: center; gap: clamp(20px, 4vw, 56px); min-height: clamp(420px, 40vw, 560px); margin: 0 0 clamp(32px, 4vw, 56px); padding: clamp(36px, 5vw, 72px) clamp(24px, 4.5vw, 64px); color: rgba(255, 255, 255, .7); background: radial-gradient(55% 70% at 78% 55%, rgba(184, 240, 58, .12), transparent 70%), #08090b; border-radius: clamp(28px, 3vw, 40px); }
html.ipx.ipx.ipx body.type-manufacturer-detail .ipx-cathero h1 { max-width: 14ch; margin: 0 0 20px !important; font: 700 clamp(44px, 5.4vw, 80px)/1 var(--x-font) !important; letter-spacing: -.05em !important; background: linear-gradient(180deg, #fff 35%, rgba(255, 255, 255, .55) 120%) !important; -webkit-background-clip: text !important; background-clip: text !important; -webkit-text-fill-color: transparent !important; }
html.ipx.ipx.ipx body.type-manufacturer-detail .ipx-cathero .ipx-eyebrow { color: rgba(255, 255, 255, .55); }
html.ipx.ipx.ipx body.type-manufacturer-detail .ipx-cathero .ipx-eyebrow b { color: #fff; }
html.ipx.ipx.ipx body.type-manufacturer-detail .ipx-cathero .category-perex,
html.ipx.ipx.ipx body.type-manufacturer-detail .ipx-cathero .category-perex * { color: rgba(255, 255, 255, .66) !important; font-size: 16px; line-height: 1.6; }
html.ipx.ipx.ipx body.type-manufacturer-detail .ipx-cathero .category-perex strong { color: #fff !important; }
html.ipx.ipx.ipx body.type-manufacturer-detail .ipx-cathero .category-perex a { color: var(--x-lime) !important; }
html.ipx.ipx.ipx body.type-manufacturer-detail .ipx-cathero .ipx-cta-row { justify-content: flex-start; margin-top: 24px; }
html.ipx.ipx.ipx body.type-manufacturer-detail .ipx-cathero__vis { position: relative; align-self: stretch; min-height: 300px; }
html.ipx.ipx.ipx body.type-manufacturer-detail .ipx-cathero__vis img { position: absolute; inset: 0 -6%; width: 112%; height: 100%; object-fit: contain; -webkit-mask-image: radial-gradient(46% 42% at 50% 50%, #000 55%, transparent 100%); mask-image: radial-gradient(46% 42% at 50% 50%, #000 55%, transparent 100%); }
html.ipx.ipx.ipx body.type-manufacturer-detail .ipx-cathero__vis .ipx-hero__rings { top: 50%; }
@media (max-width: 991px) {
  html.ipx.ipx.ipx body.type-manufacturer-detail .ipx-cathero { grid-template-columns: 1fr; min-height: 0; }
  html.ipx.ipx.ipx body.type-manufacturer-detail .ipx-cathero__vis { order: -1; min-height: 0; aspect-ratio: 16 / 10; }
  html.ipx.ipx.ipx body.type-manufacturer-detail .ipx-cathero__vis img { inset: 0; width: 100%; }
}
@media (max-width: 600px) {
  html.ipx.ipx.ipx body.type-page .ip-buying-guide ol.ip-steps > li { padding-left: 64px !important; }
  html.ipx.ipx.ipx body.type-page .ip-buying-guide ol.ip-steps > li::before { font-size: 34px !important; }
}
html.ipx.ipx.ipx body.template-11 #content .ipx-cathero .category-perex a,
html.ipx.ipx.ipx body.template-11 #content .ipx-cathero .category-perex a * {
  color: var(--x-lime) !important;
  -webkit-text-fill-color: var(--x-lime) !important;
  text-decoration: none !important;
  background: linear-gradient(90deg, rgba(184, 240, 58, .5), rgba(184, 240, 58, .5)) 0 100% / 100% 1px no-repeat !important;
}

/* ==========================================================================
   9.11 — density pass: less pushed content, editorial 2-column long texts
   ========================================================================== */
/* home hero: product visible in the first viewport */
html.ipx.ipx.ipx .ipx-hero { padding-top: clamp(36px, 5vw, 64px); min-height: 0; }
html.ipx.ipx.ipx .ipx-hero__k { margin-bottom: 16px; }
html.ipx.ipx.ipx .ipx-hero__copy { max-width: 1180px; }
html.ipx.ipx.ipx .ipx-hero__t { font-size: clamp(38px, 5.4vw, 82px) !important; margin-bottom: 16px !important; }
html.ipx.ipx.ipx .ipx-hero__lead { font-size: clamp(15.5px, 1.2vw, 18px); }
html.ipx.ipx.ipx .ipx-hero .ipx-cta-row { margin-top: 22px; }
html.ipx.ipx.ipx .ipx-hero__stage { margin-top: clamp(4px, 1.5vw, 20px); width: min(980px, 100%); aspect-ratio: 16 / 8; }
html.ipx.ipx.ipx .ipx-hero__facts { margin-top: clamp(20px, 3vw, 40px); }
html.ipx.ipx.ipx .ipx-say { height: 165vh; }
@media (max-width: 767px) {
  html.ipx.ipx.ipx .ipx-hero__t { font-size: clamp(34px, 9.6vw, 44px) !important; }
  html.ipx.ipx.ipx .ipx-hero__stage { aspect-ratio: 4 / 3; }
  html.ipx.ipx.ipx .ipx-say { height: 130vh; }
}

/* category hero: shorter */
html.ipx.ipx.ipx body.type-category .ipx-cathero,
html.ipx.ipx.ipx body.type-manufacturer-detail .ipx-cathero {
  min-height: clamp(360px, 34vw, 500px);
  padding-top: clamp(28px, 4vw, 56px);
  padding-bottom: clamp(28px, 4vw, 56px);
  margin-bottom: clamp(24px, 3vw, 40px);
}
html.ipx.ipx.ipx body.type-category .ipx-cathero h1,
html.ipx.ipx.ipx body.type-category .ipx-cathero .category-title { font-size: clamp(36px, 4.4vw, 64px) !important; margin-bottom: 16px !important; }
html.ipx.ipx.ipx body.template-11 .subcategories.with-image { margin-bottom: clamp(24px, 3vw, 44px) !important; }
html.ipx.ipx.ipx body.template-11 .products-top-wrapper { margin-bottom: clamp(20px, 3vw, 36px) !important; }
html.ipx.ipx.ipx body.template-11 #filters-wrapper { padding: 16px 0 !important; }
html.ipx.ipx.ipx body.template-11 #category-header { margin: clamp(16px, 2vw, 24px) 0 clamp(14px, 2vw, 22px) !important; }
html.ipx.ipx.ipx body.template-11 #products .product a.image { margin-bottom: 14px !important; }
html.ipx.ipx.ipx body.template-11 #products .product .p-bottom > div { margin-top: 10px !important; }

/* long texts below listings + legal docs: full width, 2 columns per section */
html.ipx.ipx.ipx body.type-category .ipx-longtext,
html.ipx.ipx.ipx body.type-category .category__secondDescription {
  max-width: none !important;
  margin-top: clamp(40px, 5vw, 64px) !important;
  padding-top: clamp(28px, 3vw, 40px) !important;
}
html.ipx.ipx.ipx .ipx-ed { max-width: none !important; }
html.ipx.ipx.ipx .ipx-ed__intro { max-width: 860px; margin-bottom: clamp(16px, 2vw, 28px); }
html.ipx.ipx.ipx .ipx-ed__sec {
  display: grid;
  grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
  gap: clamp(20px, 4vw, 72px);
  padding: clamp(24px, 3vw, 40px) 0;
  border-top: 1px solid var(--x-line);
}
html.ipx.ipx.ipx .ipx-ed__sec:first-of-type { border-top: 0; padding-top: 0; }
html.ipx.ipx.ipx .ipx-ed__h { position: relative; }
html.ipx.ipx.ipx .ipx-ed__h h2 {
  position: sticky;
  top: 96px;
  margin: 0 !important;
  padding: 0 !important;
  border: 0 !important;
  color: var(--x-ink) !important;
  font: 700 clamp(24px, 2.4vw, 36px)/1.1 var(--x-font) !important;
  letter-spacing: -.035em !important;
}
html.ipx.ipx.ipx .ipx-ed__b > :first-child { margin-top: 0 !important; }
html.ipx.ipx.ipx .ipx-ed__b > :last-child { margin-bottom: 0 !important; }
html.ipx.ipx.ipx .ipx-ed__b h3 { margin: 1.3em 0 .35em !important; }
html.ipx.ipx.ipx .ipx-ed__b p,
html.ipx.ipx.ipx .ipx-ed__b li { font-size: 16.5px !important; line-height: 1.62 !important; }
html.ipx.ipx.ipx body.type-page #content article.ipx-doc > div.ipx-ed { max-width: none !important; }
html.ipx.ipx.ipx body.type-page #content article.ipx-doc > div.ipx-ed .ipx-ed__h h2 { font-size: clamp(20px, 1.9vw, 26px) !important; }
@media (max-width: 860px) {
  html.ipx.ipx.ipx .ipx-ed__sec { grid-template-columns: 1fr; gap: 12px; }
  html.ipx.ipx.ipx .ipx-ed__h h2 { position: static; }
}

/* footer stage: tighter */
html.ipx.ipx.ipx .ipx-fhero { padding: clamp(48px, 6vw, 88px) 0 clamp(32px, 4vw, 56px); }
html.ipx.ipx.ipx body.template-11 #footer { margin-top: clamp(48px, 6vw, 96px) !important; }
html.ipx.ipx.ipx body.template-11 #footer .ip-footer-grid { padding: clamp(32px, 4vw, 56px) 0 !important; }
html.ipx.ipx.ipx .ipx-fmark { font-size: clamp(64px, 17vw, 272px); }
/* hero frames: fade the photo itself (no hard slate edges at any aspect) */
html.ipx.ipx.ipx .ipx-hero__frame { -webkit-mask-image: none !important; mask-image: none !important; }
html.ipx.ipx.ipx .ipx-hero__frame img {
  -webkit-mask-image: radial-gradient(closest-side, #000 58%, transparent 100%);
  mask-image: radial-gradient(closest-side, #000 58%, transparent 100%);
}
html.ipx.ipx.ipx body.type-category .ipx-cathero__vis:not(.ipx-cathero__vis--card) img,
html.ipx.ipx.ipx body.type-manufacturer-detail .ipx-cathero__vis img {
  -webkit-mask-image: radial-gradient(closest-side, #000 58%, transparent 100%) !important;
  mask-image: radial-gradient(closest-side, #000 58%, transparent 100%) !important;
  -webkit-mask-size: 100% 100%;
  mask-size: 100% 100%;
}
/* image box = image aspect, so the edge fade lands on the real photo edges */
html.ipx.ipx.ipx .ipx-hero__frame { display: flex; align-items: center; justify-content: center; }
html.ipx.ipx.ipx .ipx-hero__frame img { width: auto !important; height: 100% !important; max-width: none; aspect-ratio: 4 / 3; object-fit: cover !important; }
html.ipx.ipx.ipx body.type-category .ipx-cathero__vis:not(.ipx-cathero__vis--card),
html.ipx.ipx.ipx body.type-manufacturer-detail .ipx-cathero__vis { display: flex; align-items: center; justify-content: center; }
html.ipx.ipx.ipx body.type-category .ipx-cathero__vis:not(.ipx-cathero__vis--card) img,
html.ipx.ipx.ipx body.type-manufacturer-detail .ipx-cathero__vis img {
  position: relative !important;
  inset: auto !important;
  width: 118% !important;
  height: auto !important;
  max-width: none;
  aspect-ratio: 4 / 3;
  object-fit: cover !important;
}
@media (max-width: 991px) {
  html.ipx.ipx.ipx body.type-category .ipx-cathero__vis:not(.ipx-cathero__vis--card) img,
  html.ipx.ipx.ipx body.type-manufacturer-detail .ipx-cathero__vis img { width: auto !important; height: 118% !important; }
}
/* photo variant: product fills the shot → rounded photo, no fade */
html.ipx.ipx.ipx body.type-category .ipx-cathero__vis.ipx-cathero__vis--photo:not(.ipx-cathero__vis--card) img,
html.ipx.ipx.ipx body.type-manufacturer-detail .ipx-cathero__vis.ipx-cathero__vis--photo:not(.ipx-cathero__vis--card) img {
  width: min(100%, 560px) !important;
  height: auto !important;
  -webkit-mask-image: none !important;
  mask-image: none !important;
  border-radius: 26px;
  box-shadow: 0 40px 90px -36px rgba(0, 0, 0, .8), 0 0 0 1px rgba(255, 255, 255, .06);
  animation: ipxFloat 8s ease-in-out infinite alternate !important;
}
html.ipx.ipx.ipx body.type-category .ipx-cathero__vis--photo .ipx-hero__rings { opacity: .6; }
@media (max-width: 991px) {
  html.ipx.ipx.ipx body.type-category .ipx-cathero__vis.ipx-cathero__vis--photo:not(.ipx-cathero__vis--card) img { width: 86% !important; height: auto !important; }
  html.ipx.ipx.ipx body.type-category .ipx-cathero__vis.ipx-cathero__vis--photo { aspect-ratio: auto !important; min-height: 0 !important; padding: 8px 0 4px; }
}
@media (max-width: 600px) {
  html.ipx.ipx.ipx body.type-detail .benefitBanner { display: grid !important; grid-template-columns: 1fr; padding: 6px 0 !important; }
  html.ipx.ipx.ipx body.type-detail .benefitBanner__item { flex: none !important; width: 100% !important; max-width: none !important; border-left: 0 !important; }
  html.ipx.ipx.ipx body.type-detail .benefitBanner__item + .benefitBanner__item { border-top: 1px solid var(--x-line) !important; }
  html.ipx.ipx.ipx body.type-detail .benefitBanner__link { padding: 14px 0 !important; }
  html.ipx.ipx.ipx body.type-detail .benefitBanner__title,
  html.ipx.ipx.ipx body.type-detail .benefitBanner__data { word-break: normal !important; hyphens: manual !important; }
}

/* ==========================================================================
   9.12 — compact above-the-fold + interactive long texts
   ========================================================================== */
/* category hero: everything incl. CTA visible without scrolling */
html.ipx.ipx.ipx body.type-category .ipx-cathero,
html.ipx.ipx.ipx body.type-manufacturer-detail .ipx-cathero {
  min-height: 0 !important;
  grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr);
  padding: clamp(24px, 3vw, 44px) clamp(22px, 3.6vw, 52px) !important;
  margin-bottom: clamp(20px, 2.4vw, 32px) !important;
}
html.ipx.ipx.ipx body.type-category .ipx-cathero h1,
html.ipx.ipx.ipx body.type-category .ipx-cathero .category-title,
html.ipx.ipx.ipx body.type-manufacturer-detail .ipx-cathero h1 {
  max-width: 22ch !important;
  font-size: clamp(30px, 3.3vw, 50px) !important;
  margin-bottom: 12px !important;
}
html.ipx.ipx.ipx body.type-category .ipx-cathero .ipx-eyebrow { margin-bottom: 12px; }
html.ipx.ipx.ipx body.type-category .ipx-cathero .category-perex p { font-size: clamp(14.5px, 1.05vw, 16px) !important; line-height: 1.55 !important; margin-bottom: 8px !important; }
html.ipx.ipx.ipx body.type-category .ipx-cathero .ipx-cta-row { margin-top: 18px; }
html.ipx.ipx.ipx body.type-category .ipx-cathero__vis { min-height: 220px !important; }
html.ipx.ipx.ipx body.type-category .ipx-cathero__vis.ipx-cathero__vis--photo:not(.ipx-cathero__vis--card) img { width: min(100%, 460px) !important; }
html.ipx.ipx.ipx body.type-category .ipx-cathero__vis--card img { width: min(70%, 320px) !important; }
/* perex fold */
html.ipx.ipx.ipx .ipx-fold { position: relative; max-height: 4.9em; overflow: hidden; transition: max-height .6s var(--x-ease-out); }
html.ipx.ipx.ipx .ipx-fold > :first-child { margin-top: 0 !important; }
html.ipx.ipx.ipx .ipx-fold::after {
  content: "";
  position: absolute;
  inset: auto 0 0 0;
  height: 2.2em;
  background: linear-gradient(180deg, rgba(8, 9, 11, 0), #0a0b0d);
  pointer-events: none;
  transition: opacity .3s;
}
html.ipx.ipx.ipx .ipx-fold.is-open { max-height: 1600px; }
html.ipx.ipx.ipx .ipx-fold.is-open::after { opacity: 0; }
html.ipx.ipx.ipx .ipx-fold__btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin: 4px 0 0;
  padding: 0;
  border: 0;
  background: none;
  color: var(--x-lime);
  font: 600 13.5px/1.4 var(--x-font);
  cursor: pointer;
}
html.ipx.ipx.ipx .ipx-fold__btn::after { content: ""; width: 7px; height: 7px; border-right: 1.6px solid currentColor; border-bottom: 1.6px solid currentColor; transform: translateY(-2px) rotate(45deg); transition: transform .3s; }
html.ipx.ipx.ipx .ipx-fold__btn[aria-expanded="true"]::after { transform: translateY(2px) rotate(-135deg); }

/* header + breadcrumbs: tighter vertical rhythm */
html.ipx.ipx.ipx body.template-11 .breadcrumbs-wrapper,
html.ipx.ipx.ipx body.template-11 #navigation-breadcrumbs,
html.ipx.ipx.ipx body.template-11 .breadcrumbs {
  margin-top: 0 !important;
  margin-bottom: 0 !important;
  padding-top: 10px !important;
  padding-bottom: 10px !important;
  min-height: 0 !important;
}
html.ipx.ipx.ipx body.type-category .category-top,
html.ipx.ipx.ipx body.type-manufacturer-detail .manufacturerDetail,
html.ipx.ipx.ipx body.type-detail .p-detail-inner { padding-top: 6px !important; margin-top: 0 !important; }
html.ipx.ipx.ipx body.template-11 #content-wrapper > .content,
html.ipx.ipx.ipx body.template-11 #content { padding-top: 0 !important; margin-top: 0 !important; }

/* interactive long texts: sticky TOC + sections */
html.ipx.ipx.ipx .ipx-ed {
  display: grid !important;
  grid-template-columns: minmax(200px, 270px) minmax(0, 1fr);
  column-gap: clamp(28px, 5vw, 88px);
  align-items: start;
}
html.ipx.ipx.ipx .ipx-ed > .ipx-ed__intro { grid-column: 1 / -1; max-width: 860px; }
html.ipx.ipx.ipx .ipx-ed.ipx-ed--single { grid-template-columns: minmax(0, 1fr); }
html.ipx.ipx.ipx .ipx-ed__toc { position: sticky; top: 92px; align-self: start; }
html.ipx.ipx.ipx .ipx-ed__toc::before {
  content: "Obsah";
  display: block;
  margin: 0 0 12px;
  color: var(--x-mute2);
  font: 600 11px/1 var(--x-font);
  letter-spacing: .1em;
  text-transform: uppercase;
}
html.ipx.ipx.ipx .ipx-ed__toc ol { margin: 0; padding: 0; list-style: none; border-left: 1px solid var(--x-line); }
html.ipx.ipx.ipx .ipx-ed__toc li { margin: 0; padding: 0; }
html.ipx.ipx.ipx .ipx-ed__toc a {
  position: relative;
  display: flex;
  gap: 10px;
  padding: 9px 0 9px 16px;
  color: var(--x-mute) !important;
  font: 550 14px/1.35 var(--x-font);
  letter-spacing: -.01em;
  text-decoration: none !important;
  background: none !important;
  transition: color .25s;
}
html.ipx.ipx.ipx .ipx-ed__toc a span { color: var(--x-mute2); font-variant-numeric: tabular-nums; font-weight: 600; font-size: 12px; padding-top: 1px; }
html.ipx.ipx.ipx .ipx-ed__toc a::before {
  content: "";
  position: absolute;
  left: -1px;
  top: 8px;
  bottom: 8px;
  width: 2px;
  border-radius: 2px;
  background: var(--x-lime-lo);
  transform: scaleY(0);
  transition: transform .35s var(--x-ease-out);
}
html.ipx.ipx.ipx .ipx-ed__toc a:hover { color: var(--x-ink) !important; }
html.ipx.ipx.ipx .ipx-ed__toc a.is-on { color: var(--x-ink) !important; }
html.ipx.ipx.ipx .ipx-ed__toc a.is-on span { color: var(--x-lime-lo); }
html.ipx.ipx.ipx .ipx-ed__toc a.is-on::before { transform: none; }
html.ipx.ipx.ipx .ipx-ed__main { min-width: 0; }
html.ipx.ipx.ipx .ipx-ed__main .ipx-ed__sec {
  display: block !important;
  padding: 0 0 clamp(28px, 3vw, 44px) !important;
  margin: 0 0 clamp(28px, 3vw, 44px) !important;
  border: 0 !important;
  border-bottom: 1px solid var(--x-line) !important;
  scroll-margin-top: 96px;
}
html.ipx.ipx.ipx .ipx-ed__main .ipx-ed__sec:last-child { border-bottom: 0 !important; margin-bottom: 0 !important; }
html.ipx.ipx.ipx .ipx-ed__main .ipx-ed__sec > h2 {
  position: static !important;
  margin: 0 0 16px !important;
  padding: 0 !important;
  border: 0 !important;
  color: var(--x-ink) !important;
  font: 700 clamp(24px, 2.3vw, 34px)/1.12 var(--x-font) !important;
  letter-spacing: -.035em !important;
}
html.ipx.ipx.ipx .ipx-ed__main .ipx-ed__sec { opacity: 1; transform: none; }
html.ipx.ipx.ipx.ip-motion .ipx-ed__main .ipx-ed__sec:not(.is-in) { opacity: 0; transform: translateY(18px); }
html.ipx.ipx.ipx .ipx-ed__main .ipx-ed__sec.is-in { transition: opacity .8s var(--x-ease-out), transform .9s var(--x-ease-out); }
/* FAQ accordions */
html.ipx.ipx.ipx .ipx-ed .ipx-q { border-bottom: 1px solid var(--x-line); }
html.ipx.ipx.ipx .ipx-ed .ipx-q:first-child { border-top: 1px solid var(--x-line); }
html.ipx.ipx.ipx .ipx-ed .ipx-q > summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 16px 0;
  cursor: pointer;
  list-style: none;
}
html.ipx.ipx.ipx .ipx-ed .ipx-q > summary::-webkit-details-marker { display: none; }
html.ipx.ipx.ipx .ipx-ed .ipx-q > summary h3 { margin: 0 !important; font: 650 17px/1.35 var(--x-font) !important; color: var(--x-ink) !important; letter-spacing: -.015em !important; }
html.ipx.ipx.ipx .ipx-ed .ipx-q > summary::after {
  content: "";
  flex: 0 0 30px;
  height: 30px;
  border-radius: 50%;
  background: var(--x-soft) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3E%3Cpath d='M10 4v12M4 10h12' stroke='%230b0c0e' stroke-width='1.8' stroke-linecap='round'/%3E%3C/svg%3E") center/14px no-repeat;
  transition: transform .4s var(--x-ease-out), background-color .25s;
}
html.ipx.ipx.ipx .ipx-ed .ipx-q[open] > summary::after { transform: rotate(45deg); background-color: var(--x-lime); }
html.ipx.ipx.ipx .ipx-ed .ipx-q__a { padding: 0 46px 18px 0; }
html.ipx.ipx.ipx .ipx-ed .ipx-q__a > :first-child { margin-top: 0 !important; }
@media (max-width: 991px) {
  html.ipx.ipx.ipx .ipx-ed { grid-template-columns: minmax(0, 1fr); }
  html.ipx.ipx.ipx .ipx-ed__toc { position: static; margin: 0 0 24px; }
  html.ipx.ipx.ipx .ipx-ed__toc ol { display: flex; gap: 8px; overflow-x: auto; border: 0; padding-bottom: 4px; scrollbar-width: none; }
  html.ipx.ipx.ipx .ipx-ed__toc a { white-space: nowrap; padding: 9px 14px; background: var(--x-soft) !important; border-radius: 999px; font-size: 13px; }
  html.ipx.ipx.ipx .ipx-ed__toc a::before { display: none; }
  html.ipx.ipx.ipx .ipx-ed__toc a span { display: none; }
  html.ipx.ipx.ipx body.type-category .ipx-cathero { grid-template-columns: 1fr; }
  html.ipx.ipx.ipx body.type-category .ipx-cathero__vis { min-height: 0 !important; }
}
/* tighter still: 2-line title, 2-line perex preview */
html.ipx.ipx.ipx body.type-category .ipx-cathero h1,
html.ipx.ipx.ipx body.type-category .ipx-cathero .category-title,
html.ipx.ipx.ipx body.type-manufacturer-detail .ipx-cathero h1 {
  max-width: none !important;
  font-size: clamp(28px, 2.8vw, 44px) !important;
  line-height: 1.04 !important;
}
html.ipx.ipx.ipx body.type-category .ipx-cathero,
html.ipx.ipx.ipx body.type-manufacturer-detail .ipx-cathero { padding-top: clamp(20px, 2.4vw, 36px) !important; padding-bottom: clamp(20px, 2.4vw, 36px) !important; }
html.ipx.ipx.ipx .ipx-fold { max-height: 3.2em; }
html.ipx.ipx.ipx body.type-category .ipx-cathero .ipx-cta-row { margin-top: 14px; }
html.ipx.ipx.ipx body.type-category .ipx-cathero .ipx-btn { min-height: 46px; padding: 0 20px; font-size: 14.5px; }
html.ipx.ipx.ipx body.type-category .ipx-cathero__vis { min-height: 200px !important; }
html.ipx.ipx.ipx body.type-category .ipx-cathero__vis.ipx-cathero__vis--photo:not(.ipx-cathero__vis--card) img { width: min(100%, 400px) !important; }
/* top utility row: slimmer */
html.ipx.ipx.ipx body.template-11 .top-navigation-bar { height: 30px !important; min-height: 30px !important; }
html.ipx.ipx.ipx body.template-11 .site-msg.information,
html.ipx.ipx.ipx body.template-11 .site-msg.information .container { min-height: 30px !important; }
html.ipx.ipx.ipx body.template-11 .site-msg.information .container { padding-top: 4px !important; padding-bottom: 4px !important; }

@media (max-width: 600px) {
  html.ipx.ipx.ipx body.template-11 .benefitBanner { display: grid !important; grid-template-columns: 1fr; padding: 6px 0 !important; }
  html.ipx.ipx.ipx body.template-11 .benefitBanner__item { flex: none !important; width: 100% !important; max-width: none !important; border-left: 0 !important; }
  html.ipx.ipx.ipx body.template-11 .benefitBanner__item + .benefitBanner__item { border-top: 1px solid var(--x-line) !important; }
  html.ipx.ipx.ipx body.template-11 .benefitBanner__link { padding: 14px 0 !important; }
}
@media (max-width: 991px) {
  html.ipx.ipx.ipx body.type-category .ipx-cathero__vis,
  html.ipx.ipx.ipx body.type-manufacturer-detail .ipx-cathero__vis { aspect-ratio: auto !important; margin: 0 !important; }
  html.ipx.ipx.ipx body.type-category .ipx-cathero__vis img,
  html.ipx.ipx.ipx body.type-category .ipx-cathero__vis.ipx-cathero__vis--photo:not(.ipx-cathero__vis--card) img,
  html.ipx.ipx.ipx body.type-manufacturer-detail .ipx-cathero__vis img {
    width: auto !important;
    max-width: 100% !important;
    height: 190px !important;
    max-height: 190px;
  }
  html.ipx.ipx.ipx body.type-category .ipx-cathero__vis--card img { height: 160px !important; aspect-ratio: 1; }
}
html.ipx.ipx.ipx body.template-11 #footer { margin-top: clamp(32px, 4vw, 64px) !important; }
html.ipx.ipx.ipx body.template-11 .benefitBanner { margin-bottom: clamp(16px, 2vw, 28px) !important; }

/* ==========================================================================
   9.13 — category experience + chapters + homepage hero 2-col
   ========================================================================== */
html.ipx.ipx.ipx .ipx-xp__k {
  display: inline-flex; align-items: center; gap: 10px; margin: 0 0 12px;
  color: var(--x-mute); font: 600 11.5px/1 var(--x-font); letter-spacing: .1em; text-transform: uppercase;
}
html.ipx.ipx.ipx .ipx-xp__k::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: #78d92b; box-shadow: 0 0 0 4px rgba(120, 217, 43, .16); }
html.ipx.ipx.ipx .ipx-xp__k--dark { color: rgba(255, 255, 255, .55); }

/* 1) power picker — dark cinema stage */
html.ipx.ipx.ipx .ipx-xp {
  position: relative; isolation: isolate; overflow: hidden;
  margin: clamp(36px, 5vw, 64px) 0 clamp(16px, 2vw, 24px);
  padding: clamp(24px, 3.4vw, 48px);
  color: rgba(255, 255, 255, .7);
  background: radial-gradient(50% 60% at 30% 55%, rgba(184, 240, 58, .12), transparent 70%), radial-gradient(40% 50% at 100% 0%, rgba(61, 107, 255, .10), transparent 70%), #08090b;
  border-radius: clamp(28px, 3vw, 40px);
}
html.ipx.ipx.ipx .ipx-xp .ipx-xp__k { color: rgba(255, 255, 255, .55); }
html.ipx.ipx.ipx .ipx-xp__t { margin: 0 0 clamp(16px, 2vw, 24px); color: #fff; font: 700 clamp(28px, 3.2vw, 48px)/1.04 var(--x-font); letter-spacing: -.045em; }
html.ipx.ipx.ipx .ipx-xp__t em { display: block; font-style: normal; background: linear-gradient(180deg, var(--x-lime-hi), var(--x-lime-lo)); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; }
html.ipx.ipx.ipx .ipx-xp__stage { display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr); gap: clamp(20px, 4vw, 56px); align-items: center; }
html.ipx.ipx.ipx .ipx-xp__vis { position: relative; aspect-ratio: 4 / 3; display: grid; place-items: center; }
html.ipx.ipx.ipx .ipx-xp__vis img {
  position: relative; z-index: 1; width: 100%; height: 100%; object-fit: cover; border-radius: 24px;
  -webkit-mask-image: radial-gradient(closest-side, #000 72%, transparent 100%); mask-image: radial-gradient(closest-side, #000 72%, transparent 100%);
}
html.ipx.ipx.ipx .ipx-xp__vis .ipx-hero__rings { top: 50%; z-index: 0; }
html.ipx.ipx.ipx .ipx-xp__vis .ipx-hero__rings i { width: min(640px, 80vw); }
html.ipx.ipx.ipx .ipx-xp.is-swap .ipx-xp__vis img { animation: ipxSwap .7s var(--x-ease-out) both; }
html.ipx.ipx.ipx .ipx-xp.is-swap .ipx-xp__info > * { animation: ipxRise .6s var(--x-ease-out) both; }
html.ipx.ipx.ipx .ipx-xp.is-swap .ipx-xp__info > :nth-child(2) { animation-delay: .05s; }
html.ipx.ipx.ipx .ipx-xp.is-swap .ipx-xp__info > :nth-child(3) { animation-delay: .1s; }
html.ipx.ipx.ipx .ipx-xp.is-swap .ipx-xp__info > :nth-child(4) { animation-delay: .15s; }
@keyframes ipxSwap { from { opacity: 0; transform: scale(.96); filter: blur(6px); } to { opacity: 1; transform: none; filter: none; } }
html.ipx.ipx.ipx .ipx-xp__w { margin: 0 0 10px; color: #fff; font: 700 clamp(56px, 7vw, 104px)/.9 var(--x-font); letter-spacing: -.06em; font-variant-numeric: tabular-nums; }
html.ipx.ipx.ipx .ipx-xp__w small { margin-left: 6px; font-size: .36em; letter-spacing: -.02em; color: var(--x-lime); }
html.ipx.ipx.ipx .ipx-xp__name { display: block; margin: 0 0 12px; color: #fff !important; font: 600 clamp(16px, 1.3vw, 19px)/1.35 var(--x-font); letter-spacing: -.015em; text-decoration: none !important; }
html.ipx.ipx.ipx .ipx-xp__name:hover { color: var(--x-lime) !important; }
html.ipx.ipx.ipx .ipx-xp__chips { display: flex; flex-wrap: wrap; gap: 6px; min-height: 28px; margin: 0 0 14px; }
html.ipx.ipx.ipx .ipx-xp__chips .ipx-chip { display: inline-flex; align-items: center; height: 26px; padding: 0 11px; border-radius: 999px; background: rgba(255, 255, 255, .08); color: #fff; font: 600 11.5px/1 var(--x-font); }
html.ipx.ipx.ipx .ipx-xp__meta { display: flex; align-items: baseline; gap: 14px; margin: 0 0 18px; }
html.ipx.ipx.ipx .ipx-xp__price { color: #fff; font: 700 24px/1 var(--x-font); letter-spacing: -.03em; }
html.ipx.ipx.ipx .ipx-xp__av { font: 600 13px/1 var(--x-font); filter: brightness(1.6); }
html.ipx.ipx.ipx .ipx-xp .ipx-cta-row { justify-content: flex-start; margin: 0; }
html.ipx.ipx.ipx .ipx-xp__rail { display: flex; gap: 10px; margin-top: clamp(18px, 2.4vw, 28px); padding: 4px 2px 6px; overflow-x: auto; scrollbar-width: none; }
html.ipx.ipx.ipx .ipx-xp__rail::-webkit-scrollbar { display: none; }
html.ipx.ipx.ipx .ipx-xp__opt {
  flex: 0 0 auto; display: grid; grid-template-columns: 44px auto; grid-template-rows: auto auto; column-gap: 10px; align-items: center;
  padding: 8px 14px 8px 8px; border: 0; border-radius: 16px; background: rgba(255, 255, 255, .06); color: #fff; text-align: left; cursor: pointer;
  transition: background-color .25s, transform .35s var(--x-ease-out), box-shadow .3s;
}
html.ipx.ipx.ipx .ipx-xp__opt:hover { background: rgba(255, 255, 255, .12); transform: translateY(-2px); }
html.ipx.ipx.ipx .ipx-xp__opt.is-on { background: rgba(184, 240, 58, .14); box-shadow: inset 0 0 0 1.5px var(--x-lime); }
html.ipx.ipx.ipx .ipx-xp__thumb { grid-row: 1 / 3; width: 44px; height: 33px; overflow: hidden; border-radius: 8px; background: #16171a; }
html.ipx.ipx.ipx .ipx-xp__thumb img { width: 100%; height: 100%; object-fit: cover; }
html.ipx.ipx.ipx .ipx-xp__ow { font: 700 14px/1.1 var(--x-font); letter-spacing: -.02em; font-variant-numeric: tabular-nums; }
html.ipx.ipx.ipx .ipx-xp__oc { color: rgba(255, 255, 255, .5); font: 600 10px/1.2 var(--x-font); letter-spacing: .06em; text-transform: uppercase; white-space: nowrap; }

/* 2) principle band */
html.ipx.ipx.ipx .ipx-band {
  display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: clamp(20px, 4vw, 56px); align-items: center;
  margin: 0 0 clamp(36px, 5vw, 64px); padding: clamp(24px, 3.4vw, 48px);
  background: radial-gradient(60% 70% at 80% 40%, rgba(184, 240, 58, .10), transparent 70%), #0d0e11;
  border-radius: clamp(28px, 3vw, 40px); color: rgba(255, 255, 255, .66); overflow: hidden;
}
html.ipx.ipx.ipx .ipx-band__t { margin: 0 0 14px; color: #fff; font: 700 clamp(28px, 3vw, 44px)/1.04 var(--x-font); letter-spacing: -.045em; }
html.ipx.ipx.ipx .ipx-band__t em { display: block; font-style: normal; color: rgba(255, 255, 255, .45); }
html.ipx.ipx.ipx .ipx-band__p { max-width: 46ch; margin: 0 0 22px; font-size: 16px; line-height: 1.6; color: rgba(255, 255, 255, .66); }
html.ipx.ipx.ipx .ipx-band__links { display: grid; gap: 8px; }
html.ipx.ipx.ipx .ipx-band__links a {
  position: relative; display: grid; gap: 2px; padding: 14px 52px 14px 18px; border-radius: 16px; background: rgba(255, 255, 255, .05);
  color: #fff !important; text-decoration: none !important; transition: background-color .25s, transform .35s var(--x-ease-out);
}
html.ipx.ipx.ipx .ipx-band__links a b { font: 650 15px/1.2 var(--x-font); letter-spacing: -.01em; }
html.ipx.ipx.ipx .ipx-band__links a span { color: rgba(255, 255, 255, .5); font-size: 13px; }
html.ipx.ipx.ipx .ipx-band__links a::after {
  content: ""; position: absolute; right: 14px; top: 50%; width: 28px; height: 28px; margin-top: -14px; border-radius: 50%;
  background: rgba(255, 255, 255, .1) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3E%3Cpath d='M5 10h9m-3.5-3.5L14 10l-3.5 3.5' fill='none' stroke='%23fff' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center/14px no-repeat;
  transition: background-color .25s, transform .35s var(--x-ease-out);
}
html.ipx.ipx.ipx .ipx-band__links a:hover { background: rgba(255, 255, 255, .09); transform: translateX(3px); }
html.ipx.ipx.ipx .ipx-band__links a:hover::after { background-color: var(--x-lime); background-image: var(--x-arrow-ink); }
html.ipx.ipx.ipx .ipx-band__vis svg { width: 100%; height: auto; display: block; }
html.ipx.ipx.ipx .ipx-band__waves path { stroke-dasharray: 6 10; opacity: .15; }
html.ipx.ipx.ipx .ipx-band.is-live .ipx-band__waves path { animation: ipxWaveDash 2.4s linear infinite, ipxWaveOp 2.4s ease-in-out infinite; }
html.ipx.ipx.ipx .ipx-band.is-live .ipx-band__waves path:nth-child(2) { animation-delay: .3s, .3s; }
html.ipx.ipx.ipx .ipx-band.is-live .ipx-band__waves path:nth-child(3) { animation-delay: .6s, .6s; }
html.ipx.ipx.ipx .ipx-band.is-live .ipx-band__waves path:nth-child(4) { animation-delay: .9s, .9s; }
@keyframes ipxWaveDash { to { stroke-dashoffset: -32; } }
@keyframes ipxWaveOp { 0%, 100% { opacity: .15; } 45% { opacity: .95; } }
html.ipx.ipx.ipx .ipx-band.is-live .ipx-band__glow { animation: ipxGlow 2.4s ease-in-out infinite; }
@keyframes ipxGlow { 0%, 100% { opacity: .6; } 50% { opacity: 1; } }
html.ipx.ipx.ipx .ipx-band.is-live .ipx-band__obj rect,
html.ipx.ipx.ipx .ipx-band.is-live .ipx-band__obj circle { animation: ipxWarm 4.8s ease-in-out infinite; }
@keyframes ipxWarm { 0%, 100% { fill: #22252b; } 50% { fill: #3a3a2c; } }

/* 3) chapters */
html.ipx.ipx.ipx .ipx-ch .ipx-ed__sec { display: none !important; }
html.ipx.ipx.ipx .ipx-ch .ipx-ed__sec.is-active { display: block !important; border-bottom: 0 !important; margin-bottom: 0 !important; animation: ipxRise .6s var(--x-ease-out) both; opacity: 1 !important; transform: none; }
html.ipx.ipx.ipx .ipx-ch .ipx-ed__toc a { cursor: pointer; }
html.ipx.ipx.ipx .ipx-ch__nav { display: flex; align-items: center; gap: 12px; margin-top: 24px; padding-top: 20px; border-top: 1px solid var(--x-line); }
html.ipx.ipx.ipx .ipx-ch__nav button {
  display: inline-grid; place-items: center; width: 44px; height: 44px; border: 0; border-radius: 50%;
  background: var(--x-soft); color: var(--x-ink); cursor: pointer; transition: background-color .25s, color .25s;
}
html.ipx.ipx.ipx .ipx-ch__nav button svg { width: 18px; height: 18px; }
html.ipx.ipx.ipx .ipx-ch__nav .ipx-ch__prev svg { transform: rotate(180deg); }
html.ipx.ipx.ipx .ipx-ch__nav button:hover { background: var(--x-ink); color: #fff; }
html.ipx.ipx.ipx .ipx-ch__nav .ipx-ch__next { background: var(--x-ink); color: #fff; }
html.ipx.ipx.ipx .ipx-ch__nav .ipx-ch__next:hover { background: var(--x-lime); color: var(--x-ink); }
html.ipx.ipx.ipx .ipx-ch__pos { color: var(--x-mute); font: 600 13px/1 var(--x-font); font-variant-numeric: tabular-nums; letter-spacing: .04em; }
html.ipx.ipx.ipx .ipx-longtext { padding-top: 0 !important; border-top: 0 !important; margin-top: 0 !important; }

/* 4) more categories */
html.ipx.ipx.ipx .ipx-more { margin: clamp(36px, 5vw, 64px) 0 0; }
html.ipx.ipx.ipx .ipx-more__t { margin: 0 0 18px; color: var(--x-ink); font: 700 clamp(26px, 2.6vw, 38px)/1.08 var(--x-font); letter-spacing: -.04em; }
html.ipx.ipx.ipx .ipx-more__grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; }
html.ipx.ipx.ipx .ipx-more__c { position: relative; display: block; overflow: hidden; aspect-ratio: 4 / 3; border-radius: 22px; background: #16171a; text-decoration: none !important; isolation: isolate; }
html.ipx.ipx.ipx .ipx-more__m img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; transition: transform 1.1s var(--x-ease-out); }
html.ipx.ipx.ipx .ipx-more__c::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, transparent 45%, rgba(8, 9, 11, .8)); }
html.ipx.ipx.ipx .ipx-more__n { position: absolute; left: 16px; right: 16px; bottom: 14px; z-index: 1; color: #fff; font: 650 15px/1.25 var(--x-font); letter-spacing: -.015em; }
html.ipx.ipx.ipx .ipx-more__c:hover img { transform: scale(1.06); }

/* homepage hero: 2 columns on desktop → CTA + product above the fold */
@media (min-width: 1100px) {
  html.ipx.ipx.ipx .ipx-hero {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1.05fr);
    grid-template-areas: "copy stage" "facts facts";
    align-items: center;
    justify-items: stretch;
    column-gap: clamp(24px, 3vw, 56px);
    padding: clamp(32px, 4vw, 56px) max(24px, calc((100vw - 1240px) / 2)) clamp(28px, 3vw, 40px) !important;
    text-align: left;
  }
  html.ipx.ipx.ipx .ipx-hero__copy { grid-area: copy; max-width: 600px; }
  html.ipx.ipx.ipx .ipx-hero__t { font-size: clamp(40px, 4.4vw, 68px) !important; }
  html.ipx.ipx.ipx .ipx-hero__lead { margin: 0; max-width: 480px; }
  html.ipx.ipx.ipx .ipx-hero .ipx-cta-row { justify-content: flex-start; }
  html.ipx.ipx.ipx .ipx-hero__stage { grid-area: stage; width: 100%; margin: 0; aspect-ratio: 4 / 3.2; }
  html.ipx.ipx.ipx .ipx-hero__facts { grid-area: facts; width: 100%; }
  html.ipx.ipx.ipx .ipx-hero__rings { left: 72%; top: 46%; }
}

@media (max-width: 991px) {
  html.ipx.ipx.ipx .ipx-xp__stage, html.ipx.ipx.ipx .ipx-band { grid-template-columns: 1fr; }
  html.ipx.ipx.ipx .ipx-more__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 600px) {
  html.ipx.ipx.ipx .ipx-xp, html.ipx.ipx.ipx .ipx-band { padding: 22px 18px; border-radius: 26px; margin-left: -6px; margin-right: -6px; }
  html.ipx.ipx.ipx .ipx-xp .ipx-cta-row .ipx-btn { flex: 1 1 auto; justify-content: center; }
  html.ipx.ipx.ipx .ipx-more__grid { gap: 8px; }
  html.ipx.ipx.ipx .ipx-more__n { font-size: 13px; left: 12px; bottom: 10px; }
}

/* ==========================================================================
   9.14 — dark stages full-bleed (edge to edge, no rounded frame), content
   stays on the site grid (container 1432 − 2×56 = 1320 px)
   ========================================================================== */
html.ipx.ipx.ipx { --x-gut: max(20px, calc((100vw - 1320px) / 2)); }
html.ipx.ipx.ipx body { overflow-x: clip; }
html.ipx.ipx.ipx .ipx-hero,
html.ipx.ipx.ipx body.type-category .ipx-cathero,
html.ipx.ipx.ipx body.type-manufacturer-detail .ipx-cathero,
html.ipx.ipx.ipx .ipx-xp,
html.ipx.ipx.ipx .ipx-band {
  margin-left: calc(50% - 50vw) !important;
  margin-right: calc(50% - 50vw) !important;
  padding-left: var(--x-gut) !important;
  padding-right: var(--x-gut) !important;
  border-radius: 0 !important;
}
html.ipx.ipx.ipx body.type-category .ipx-cathero,
html.ipx.ipx.ipx body.type-manufacturer-detail .ipx-cathero {
  margin-top: 0 !important;
  padding-top: clamp(28px, 3.4vw, 52px) !important;
  padding-bottom: clamp(28px, 3.4vw, 52px) !important;
}
html.ipx.ipx.ipx .ipx-xp { margin-top: clamp(48px, 6vw, 88px) !important; margin-bottom: 0 !important; padding-top: clamp(40px, 5vw, 72px) !important; padding-bottom: clamp(36px, 4.4vw, 64px) !important; }
/* principle band directly continues the dark stage, separated by a hairline */
html.ipx.ipx.ipx .ipx-band {
  margin-top: 0 !important;
  margin-bottom: clamp(48px, 6vw, 88px) !important;
  padding-top: clamp(40px, 5vw, 72px) !important;
  padding-bottom: clamp(40px, 5vw, 72px) !important;
  background: radial-gradient(50% 70% at 78% 45%, rgba(184, 240, 58, .09), transparent 70%), #0b0c0f !important;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .06);
}
html.ipx.ipx.ipx .ipx-band:first-child,
html.ipx.ipx.ipx :not(.ipx-xp) + .ipx-band { margin-top: clamp(48px, 6vw, 88px) !important; box-shadow: none; }
/* hero: no rounded bottom; sits flush under the header */
html.ipx.ipx.ipx .ipx-hero { margin-top: 0 !important; }
@media (min-width: 1100px) {
  html.ipx.ipx.ipx .ipx-hero { padding-left: var(--x-gut) !important; padding-right: var(--x-gut) !important; }
}
/* breadcrumbs on category sit above a full-bleed stage: keep them tight */
html.ipx.ipx.ipx body.type-category .breadcrumbs,
html.ipx.ipx.ipx body.type-manufacturer-detail .breadcrumbs { padding-bottom: 14px !important; }
@media (max-width: 600px) {
  html.ipx.ipx.ipx body.type-category .ipx-cathero,
  html.ipx.ipx.ipx .ipx-xp,
  html.ipx.ipx.ipx .ipx-band { padding-left: 20px !important; padding-right: 20px !important; }
}

/* ==========================================================================
   9.16 — homepage luxe: compact rhythm, visible H1, merged sections
   ========================================================================== */
/* visible H1 as the hero kicker */
html.ipx.ipx.ipx .ipx-hero h1.ipx-hero__h1 {
  position: static !important;
  width: auto !important;
  height: auto !important;
  margin: 0 0 16px !important;
  padding: 0 !important;
  clip: auto !important;
  overflow: visible !important;
  white-space: normal !important;
  display: inline-flex !important;
  align-items: center;
  gap: 10px;
  color: rgba(255, 255, 255, .62) !important;
  font: 600 12.5px/1.2 var(--x-font) !important;
  letter-spacing: .1em !important;
  text-transform: uppercase;
  background: none !important;
  -webkit-text-fill-color: currentColor !important;
}
html.ipx.ipx.ipx .ipx-hero h1.ipx-hero__h1::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: var(--x-lime); box-shadow: 0 0 12px rgba(184, 240, 58, .9); }

/* global section rhythm on the homepage */
html.ipx.ipx.ipx body.ipx-lux .ip-home .ip-sec { padding-top: clamp(48px, 6vw, 88px) !important; padding-bottom: clamp(48px, 6vw, 88px) !important; }
html.ipx.ipx.ipx body.ipx-lux .ip-home .ip-sec__head { margin-bottom: clamp(20px, 2.4vw, 32px) !important; }
html.ipx.ipx.ipx body.ipx-lux .ip-home .ip-h2 { font-size: clamp(30px, 3.4vw, 52px) !important; letter-spacing: -.045em !important; line-height: 1.04 !important; }
html.ipx.ipx.ipx body.ipx-lux .ip-home .ipx-rv { opacity: 0; transform: translateY(26px); transition: opacity .9s var(--x-ease-out), transform 1s var(--x-ease-out); }
html.ipx.ipx.ipx body.ipx-lux .ip-home .ipx-rv.ipx-in { opacity: 1; transform: none; }

/* 1) places: one row of four tall tiles, text slides up on hover */
html.ipx.ipx.ipx body.ipx-lux .ip-home .ip-places {
  display: grid !important;
  grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
  gap: 14px !important;
}
html.ipx.ipx.ipx body.ipx-lux .ip-home .ip-place {
  position: relative !important;
  display: block !important;
  min-height: 0 !important;
  aspect-ratio: 3 / 4;
  overflow: hidden;
  border-radius: 26px !important;
  background: #101114 !important;
  isolation: isolate;
}
html.ipx.ipx.ipx body.ipx-lux .ip-home .ip-place__media { position: absolute !important; inset: 0 !important; height: auto !important; }
html.ipx.ipx.ipx body.ipx-lux .ip-home .ip-place__media img { width: 100% !important; height: 100% !important; object-fit: cover !important; transform: scale(1.04); }
html.ipx.ipx.ipx body.ipx-lux .ip-home .ip-place::after { content: ""; position: absolute; inset: 0; z-index: 1; background: linear-gradient(180deg, rgba(8, 9, 11, .55) 0%, transparent 32%, transparent 52%, rgba(8, 9, 11, .88) 100%); pointer-events: none; }
html.ipx.ipx.ipx body.ipx-lux .ip-home .ip-place__body {
  position: absolute !important;
  inset: auto 0 0 0 !important;
  z-index: 2;
  padding: 22px !important;
  background: none !important;
  transform: translateY(34px);
  transition: transform .6s var(--x-ease-out);
}
html.ipx.ipx.ipx body.ipx-lux .ip-home .ip-place__eyebrow { color: var(--x-lime) !important; font: 600 11px/1 var(--x-font) !important; letter-spacing: .1em !important; text-transform: uppercase; }
html.ipx.ipx.ipx body.ipx-lux .ip-home .ip-place__title { display: block; margin: 8px 0 6px !important; color: #fff !important; font: 700 clamp(19px, 1.6vw, 25px)/1.1 var(--x-font) !important; letter-spacing: -.035em !important; }
html.ipx.ipx.ipx body.ipx-lux .ip-home .ip-place__text { display: block; color: rgba(255, 255, 255, .68) !important; font-size: 13.5px !important; line-height: 1.45 !important; }
html.ipx.ipx.ipx body.ipx-lux .ip-home .ip-place .ip-link { display: inline-flex; margin-top: 12px !important; color: #fff !important; opacity: 0; transition: opacity .45s var(--x-ease); }
html.ipx.ipx.ipx body.ipx-lux .ip-home .ip-place:hover .ip-place__body { transform: none; }
html.ipx.ipx.ipx body.ipx-lux .ip-home .ip-place:hover .ip-link { opacity: 1; }
html.ipx.ipx.ipx body.ipx-lux .ip-home .ip-place:hover .ip-place__media img { transform: scale(1.1) !important; }

/* 2) bestsellers + families rails: compact */
html.ipx.ipx.ipx body.ipx-lux .ip-home .ip-rail__track > * { flex-basis: clamp(220px, 21vw, 290px) !important; }
html.ipx.ipx.ipx body.ipx-lux .ip-home .ip-family__media { aspect-ratio: 4 / 3; }

/* 3) A0606P feature: full-bleed soft band, compact */
html.ipx.ipx.ipx body.ipx-lux .ip-home #ip-cinema-home {
  margin-left: calc(50% - 50vw) !important;
  margin-right: calc(50% - 50vw) !important;
  padding: clamp(40px, 5vw, 72px) var(--x-gut) !important;
  max-width: none !important;
  width: auto !important;
  border-radius: 0 !important;
  background: var(--x-soft) !important;
}
html.ipx.ipx.ipx body.ipx-lux .ip-home #ip-cinema-home > * { max-width: 1320px; margin-left: auto !important; margin-right: auto !important; }

/* 4) why: full-bleed dark, video as hero card */
html.ipx.ipx.ipx body.ipx-lux .ip-home .ip-sec--dark {
  margin-left: calc(50% - 50vw) !important;
  margin-right: calc(50% - 50vw) !important;
  padding-left: var(--x-gut) !important;
  padding-right: var(--x-gut) !important;
  border-radius: 0 !important;
  max-width: none !important;
}
html.ipx.ipx.ipx body.ipx-lux .ip-home .ip-bento {
  display: grid !important;
  grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
  grid-auto-rows: minmax(150px, auto);
  gap: 14px !important;
}
html.ipx.ipx.ipx body.ipx-lux .ip-home .ip-bento__card { border-radius: 24px !important; padding: 22px !important; }
html.ipx.ipx.ipx body.ipx-lux .ip-home .ip-bento__card--hero { grid-column: span 2 !important; grid-row: span 2 !important; display: flex !important; flex-direction: column; justify-content: flex-end; min-height: 380px; overflow: hidden; position: relative; }
html.ipx.ipx.ipx body.ipx-lux .ip-home .ipx-bento-video .ip-video {
  position: absolute !important;
  inset: 0 !important;
  margin: 0 !important;
  border-radius: 0 !important;
  z-index: 0;
}
html.ipx.ipx.ipx body.ipx-lux .ip-home .ipx-bento-video .ip-video video { width: 100% !important; height: 100% !important; object-fit: cover; }
html.ipx.ipx.ipx body.ipx-lux .ip-home .ipx-bento-video::after { content: ""; position: absolute; inset: 0; z-index: 1; background: linear-gradient(180deg, transparent 35%, rgba(8, 9, 11, .9)); pointer-events: none; }
html.ipx.ipx.ipx body.ipx-lux .ip-home .ipx-bento-video > :not(.ip-video) { position: relative; z-index: 2; }
html.ipx.ipx.ipx body.ipx-lux .ip-home .ipx-bento-video .ip-video__toggle { z-index: 3; }
html.ipx.ipx.ipx body.ipx-lux .ip-home .ip-bento__card--wide { grid-column: span 2 !important; }

/* 5) families */
html.ipx.ipx.ipx body.ipx-lux .ip-home .ip-family__body { padding: 14px 4px 0 !important; }

/* 6) calculator + help in one row */
html.ipx.ipx.ipx body.ipx-lux .ipx-calcrow { display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr); gap: 14px; align-items: stretch; }
html.ipx.ipx.ipx body.ipx-lux .ipx-calcrow .ip-calc { height: 100%; margin: 0 !important; border-radius: 28px !important; }
html.ipx.ipx.ipx body.ipx-lux .ipx-calcrow .ip-help { display: grid !important; grid-template-columns: 1fr !important; gap: 10px !important; margin: 0 !important; }
html.ipx.ipx.ipx body.ipx-lux .ipx-calcrow .ip-help__card {
  position: relative;
  display: grid !important;
  gap: 4px;
  padding: 20px 64px 20px 22px !important;
  background: var(--x-soft) !important;
  border-radius: 22px !important;
}
html.ipx.ipx.ipx body.ipx-lux .ipx-calcrow .ip-help__card strong { font-size: 16px !important; letter-spacing: -.015em; }
html.ipx.ipx.ipx body.ipx-lux .ipx-calcrow .ip-help__card .ip-link { display: none !important; }
html.ipx.ipx.ipx body.ipx-lux .ipx-calcrow .ip-help__card::after {
  content: ""; position: absolute; right: 18px; top: 50%; width: 32px; height: 32px; margin-top: -16px; border-radius: 50%;
  background: #fff var(--x-arrow-ink) center / 15px no-repeat; transition: background-color .25s, transform .35s var(--x-ease-out);
}
html.ipx.ipx.ipx body.ipx-lux .ipx-calcrow .ip-help__card:hover::after { background-color: var(--x-lime); transform: translateX(3px); }

/* 7) FAQ + SEO welcome text: tight */
html.ipx.ipx.ipx body.ipx-lux .welcome-wrapper { padding-top: 0 !important; margin-top: 0 !important; }
html.ipx.ipx.ipx body.ipx-lux .welcome-wrapper h2,
html.ipx.ipx.ipx body.ipx-lux .welcome-wrapper .h1 { font: 700 clamp(26px, 2.6vw, 38px)/1.1 var(--x-font) !important; letter-spacing: -.04em !important; color: var(--x-ink) !important; }
html.ipx.ipx.ipx body.ipx-lux .welcome-wrapper p { max-width: 760px; color: var(--x-body) !important; font-size: 17px !important; line-height: 1.6 !important; }

@media (max-width: 991px) {
  html.ipx.ipx.ipx body.ipx-lux .ip-home .ip-places { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; }
  html.ipx.ipx.ipx body.ipx-lux .ip-home .ip-bento { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; }
  html.ipx.ipx.ipx body.ipx-lux .ipx-calcrow { grid-template-columns: 1fr; }
  html.ipx.ipx.ipx body.ipx-lux .ip-home .ip-place__body { transform: none; }
  html.ipx.ipx.ipx body.ipx-lux .ip-home .ip-place .ip-link { opacity: 1; }
}
@media (max-width: 600px) {
  html.ipx.ipx.ipx body.ipx-lux .ip-home .ip-places { gap: 8px !important; }
  html.ipx.ipx.ipx body.ipx-lux .ip-home .ip-place { border-radius: 20px !important; }
  html.ipx.ipx.ipx body.ipx-lux .ip-home .ip-place__body { padding: 14px !important; }
  html.ipx.ipx.ipx body.ipx-lux .ip-home .ip-place__text,
  html.ipx.ipx.ipx body.ipx-lux .ip-home .ip-place .ip-link { display: none !important; }
  html.ipx.ipx.ipx body.ipx-lux .ip-home .ip-bento { grid-template-columns: 1fr !important; }
  html.ipx.ipx.ipx body.ipx-lux .ip-home .ip-bento__card--hero,
  html.ipx.ipx.ipx body.ipx-lux .ip-home .ip-bento__card--wide { grid-column: auto !important; grid-row: auto !important; }
  html.ipx.ipx.ipx body.ipx-lux .ip-home .ip-bento__card--hero { min-height: 320px; }
}
@media (prefers-reduced-motion: reduce) { html.ipx.ipx.ipx body.ipx-lux .ip-home .ipx-rv { opacity: 1; transform: none; } }

/* 9.15b — fixes after visual review */
html.ipx.ipx.ipx body.ipx-lux .ip-home .ip-place__media { aspect-ratio: auto !important; height: 100% !important; width: 100% !important; }
html.ipx.ipx.ipx body.ipx-lux .ip-home .ip-place__media img { object-position: 50% 50% !important; }

/* why: true cinematic dark band */
html.ipx.ipx.ipx body.ipx-lux .ip-home .ip-sec--dark { background: #0b0c0e !important; color: #fff !important; }
html.ipx.ipx.ipx body.ipx-lux .ip-home .ip-sec--dark .ip-h2 { color: #fff !important; }
html.ipx.ipx.ipx body.ipx-lux .ip-home .ip-sec--dark .ip-h2 .ip-mute { color: rgba(255, 255, 255, .42) !important; }
html.ipx.ipx.ipx body.ipx-lux .ip-home .ip-sec--dark .ip-eyebrow,
html.ipx.ipx.ipx body.ipx-lux .ip-home .ip-sec--dark .ip-kicker { color: var(--x-lime) !important; }
html.ipx.ipx.ipx body.ipx-lux .ip-home .ip-bento { grid-auto-rows: minmax(220px, auto) !important; }
html.ipx.ipx.ipx body.ipx-lux .ip-home .ip-bento__card {
  display: flex !important;
  flex-direction: column;
  min-height: 0 !important;
  background: rgba(255, 255, 255, .045) !important;
  border: 1px solid rgba(255, 255, 255, .08) !important;
  box-shadow: none !important;
  color: rgba(255, 255, 255, .66) !important;
  transition: background-color .4s var(--x-ease), border-color .4s var(--x-ease), transform .5s var(--x-ease-out);
}
html.ipx.ipx.ipx body.ipx-lux .ip-home .ip-bento__card:hover { background: rgba(255, 255, 255, .075) !important; border-color: rgba(184, 240, 58, .35) !important; transform: translateY(-3px); }
html.ipx.ipx.ipx body.ipx-lux .ip-home .ip-bento__card h3 { margin: 0 0 6px !important; color: #fff !important; font: 700 clamp(19px, 1.5vw, 23px)/1.12 var(--x-font) !important; letter-spacing: -.03em !important; }
html.ipx.ipx.ipx body.ipx-lux .ip-home .ip-bento__card p { margin: 0 !important; color: rgba(255, 255, 255, .62) !important; font-size: 14.5px !important; line-height: 1.5 !important; }
html.ipx.ipx.ipx body.ipx-lux .ip-home .ip-bento__card .ip-ico { position: static !important; top: auto !important; left: auto !important; margin: 0 0 auto !important; padding-bottom: 18px; color: var(--x-lime) !important; }
html.ipx.ipx.ipx body.ipx-lux .ip-home .ip-bento__card .ip-ico svg { fill: currentColor; stroke: currentColor; }
html.ipx.ipx.ipx body.ipx-lux .ip-home .ip-bento__card .ip-thin { margin: 0 0 auto !important; padding-bottom: 18px; }
html.ipx.ipx.ipx body.ipx-lux .ip-home .ip-bento__card .ip-link { margin-top: 14px !important; color: var(--x-lime) !important; }
html.ipx.ipx.ipx body.ipx-lux .ip-home .ip-bento__card--wide { grid-column: auto !important; }
/* hero card: film on top (no cropping of burned-in titles), copy below */
html.ipx.ipx.ipx body.ipx-lux .ip-home .ipx-bento-video { justify-content: flex-start !important; padding: 0 !important; min-height: 0 !important; }
html.ipx.ipx.ipx body.ipx-lux .ip-home .ipx-bento-video::after { content: none !important; }
html.ipx.ipx.ipx body.ipx-lux .ip-home .ipx-bento-video .ip-video { position: relative !important; inset: auto !important; aspect-ratio: 16 / 9; flex: none; width: 100%; background: #000; }
html.ipx.ipx.ipx body.ipx-lux .ip-home .ipx-bento-video .ip-video video { object-fit: contain !important; }
html.ipx.ipx.ipx body.ipx-lux .ip-home .ipx-bento-video > h3 { margin-top: 22px !important; padding: 0 24px; }
html.ipx.ipx.ipx body.ipx-lux .ip-home .ipx-bento-video > p,
html.ipx.ipx.ipx body.ipx-lux .ip-home .ipx-bento-video > .ip-link { margin-left: 24px !important; margin-right: 24px !important; }
html.ipx.ipx.ipx body.ipx-lux .ip-home .ipx-bento-video > .ip-link { margin-bottom: 24px !important; }
@media (max-width: 600px) { html.ipx.ipx.ipx body.ipx-lux .ip-home .ip-bento { grid-auto-rows: auto !important; } html.ipx.ipx.ipx body.ipx-lux .ip-home .ip-bento__card--hero { min-height: 0; } }
html.ipx.ipx.ipx body.ipx-lux .ip-home .ip-bento__card .ip-thin { position: relative !important; top: auto !important; right: auto !important; left: auto !important; width: 132px !important; height: 40px !important; margin: 0 0 auto !important; padding: 0 !important; }
html.ipx.ipx.ipx body.ipx-lux .ip-home .ip-bento__card .ip-thin i { inset: 0 !important; width: 100% !important; height: 100% !important; border-radius: 4px; box-shadow: 0 0 0 1px rgba(255,255,255,.18), 0 18px 40px -12px rgba(184,240,58,.35) !important; }
html.ipx.ipx.ipx body.ipx-lux .ip-home .ip-bento__card .ip-thin + h3 { margin-top: 18px !important; }
html.ipx.ipx.ipx body.ipx-lux .ip-home .ip-sec--light + .ip-sec--light { padding-top: 0 !important; }
html.ipx.ipx.ipx body.ipx-lux .ipx-calcrow .ip-help__card { min-height: 0 !important; height: auto !important; align-content: center; }
html.ipx.ipx.ipx body.ipx-lux .ipx-calcrow .ip-help { grid-auto-rows: 1fr; }
html.ipx.ipx.ipx body.ipx-lux .ipx-calcrow .ip-calc { padding: clamp(28px, 3.4vw, 52px) !important; min-height: 0 !important; }
@media (max-width: 991px) {
  html.ipx.ipx.ipx body.ipx-lux .ip-home .ip-places {
    grid-template-columns: none !important;
    grid-auto-flow: column !important;
    grid-auto-columns: minmax(230px, 46%) !important;
    overflow-x: auto !important;
    scroll-snap-type: x mandatory;
    scrollbar-width: none;
    margin-left: calc(-1 * var(--x-gut)) !important;
    margin-right: calc(-1 * var(--x-gut)) !important;
    padding: 0 var(--x-gut) 4px !important;
    scroll-padding-left: var(--x-gut);
  }
  html.ipx.ipx.ipx body.ipx-lux .ip-home .ip-places::-webkit-scrollbar { display: none; }
  html.ipx.ipx.ipx body.ipx-lux .ip-home .ip-place { scroll-snap-align: start; width: auto !important; }
}
@media (max-width: 600px) {
  html.ipx.ipx.ipx body.ipx-lux .ip-home .ip-places { grid-auto-columns: 70% !important; gap: 10px !important; }
  html.ipx.ipx.ipx body.ipx-lux .ip-home .ip-place__text { display: block !important; font-size: 13px !important; }
}
@media (max-width: 600px) {
  html.ipx.ipx.ipx body.ipx-lux .ip-home .ip-bento { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; gap: 10px !important; }
  html.ipx.ipx.ipx body.ipx-lux .ip-home .ip-bento__card--hero { grid-column: 1 / -1 !important; }
  html.ipx.ipx.ipx body.ipx-lux .ip-home .ip-bento__card:not(.ip-bento__card--hero) { padding: 16px !important; }
  html.ipx.ipx.ipx body.ipx-lux .ip-home .ip-bento__card:not(.ip-bento__card--hero) h3 { font-size: 17px !important; }
  html.ipx.ipx.ipx body.ipx-lux .ip-home .ip-bento__card:not(.ip-bento__card--hero) p { font-size: 13px !important; }
  html.ipx.ipx.ipx body.ipx-lux .ip-home .ip-bento__card .ip-thin { width: 96px !important; height: 30px !important; }
}

/* ==========================================================================
   9.16 — homepage next level: word reveal, thermal cursor, room accordion,
   principle stage, scroll-linked feature, headline masks
   ========================================================================== */
/* hero: word-by-word reveal */
html.ipx.ipx.ipx .ipx-hero__t.ipx-split { animation: none !important; opacity: 1 !important; transform: none !important; }
html.ipx.ipx.ipx .ipx-hero__t.ipx-split .ipx-w { display: inline-block; overflow: hidden; vertical-align: top; padding-bottom: .1em; margin-bottom: -.1em; }
html.ipx.ipx.ipx .ipx-hero__t.ipx-split .ipx-w > span { display: inline-block; transform: translate3d(0, 108%, 0) rotate(4deg); transform-origin: 0 100%; transition: transform 1.1s var(--x-ease-out); transition-delay: calc(var(--i) * 60ms + 120ms); }
html.ipx.ipx.ipx .ipx-hero.is-in .ipx-hero__t.ipx-split .ipx-w > span { transform: none; }
html.ipx.ipx.ipx .ipx-hero__t.ipx-split em { background: none !important; -webkit-text-fill-color: currentColor !important; color: var(--x-lime) !important; }
html.ipx.ipx.ipx .ipx-hero__t.ipx-split em .ipx-w > span {
  background: linear-gradient(180deg, var(--x-lime-hi) 10%, var(--x-lime-lo) 95%);
  -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent;
}
/* hero: thermal light that follows the pointer */
html.ipx.ipx.ipx body.ipx-next .ipx-hero::before {
  content: ""; position: absolute; inset: 0; z-index: 0; pointer-events: none;
  background: radial-gradient(420px circle at var(--hx, 70%) var(--hy, 45%), rgba(255, 150, 70, .16), rgba(184, 240, 58, .06) 45%, transparent 70%);
  transition: background .2s linear;
}
html.ipx.ipx.ipx body.ipx-next .ipx-hero .ipx-btn { transition: transform .35s var(--x-ease-out), background-color .25s, box-shadow .35s; will-change: transform; }
html.ipx.ipx.ipx body.ipx-next .ipx-hero .ipx-btn--lime:hover { box-shadow: 0 14px 44px -10px rgba(184, 240, 58, .65); }

/* headline mask reveal on section entry */
html.ipx.ipx.ipx body.ipx-next .ip-home .ipx-hl { display: inline-block; clip-path: inset(0 0 0 0); transition: clip-path 1.2s var(--x-ease-out), transform 1.2s var(--x-ease-out), opacity .8s; }
html.ipx.ipx.ipx body.ipx-next .ip-home .ipx-rv:not(.ipx-in) .ipx-hl { clip-path: inset(0 0 100% 0); transform: translateY(40%); opacity: 0; }
html.ipx.ipx.ipx body.ipx-next .ip-home .ipx-rv { transform: none !important; }
html.ipx.ipx.ipx body.ipx-next .ip-home .ipx-rv:not(.ipx-in) { opacity: 0; }
html.ipx.ipx.ipx body.ipx-next .ip-home .ipx-rv.ipx-in { opacity: 1; }

/* ---------- rooms: expanding accordion (desktop) ---------- */
@media (min-width: 992px) {
  html.ipx.ipx.ipx body.ipx-next .ip-home .ip-places.ipx-rooms { display: flex !important; gap: 12px !important; height: clamp(400px, 34vw, 540px); }
  html.ipx.ipx.ipx body.ipx-next .ip-home .ipx-rooms .ip-place {
    flex: 1 1 0; min-width: 0; aspect-ratio: auto !important; height: 100%;
    transition: flex-grow .9s var(--x-ease-out), box-shadow .6s;
  }
  html.ipx.ipx.ipx body.ipx-next .ip-home .ipx-rooms .ip-place.is-on { flex-grow: 2.7; box-shadow: 0 30px 80px -40px rgba(11, 12, 14, .55); }
  html.ipx.ipx.ipx body.ipx-next .ip-home .ipx-rooms .ip-place__media img { transform: scale(1.08) !important; transition: transform 1.6s var(--x-ease-out), filter .9s !important; filter: saturate(.75) brightness(.8); }
  html.ipx.ipx.ipx body.ipx-next .ip-home .ipx-rooms .ip-place.is-on .ip-place__media img { transform: scale(1) !important; filter: none; }
  html.ipx.ipx.ipx body.ipx-next .ip-home .ipx-rooms .ip-place__body { transform: none !important; padding: 26px !important; }
  html.ipx.ipx.ipx body.ipx-next .ip-home .ipx-rooms .ip-place__title { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; font-size: clamp(18px, 1.4vw, 22px) !important; transition: font-size .6s var(--x-ease-out); }
  html.ipx.ipx.ipx body.ipx-next .ip-home .ipx-rooms .ip-place.is-on .ip-place__title { white-space: normal; font-size: clamp(26px, 2.4vw, 38px) !important; }
  html.ipx.ipx.ipx body.ipx-next .ip-home .ipx-rooms .ip-place__text,
  html.ipx.ipx.ipx body.ipx-next .ip-home .ipx-rooms .ip-place .ip-link { max-height: 0; opacity: 0 !important; overflow: hidden; transition: max-height .7s var(--x-ease-out), opacity .5s .1s !important; }
  html.ipx.ipx.ipx body.ipx-next .ip-home .ipx-rooms .ip-place.is-on .ip-place__text { max-height: 60px; opacity: 1 !important; font-size: 15px !important; }
  html.ipx.ipx.ipx body.ipx-next .ip-home .ipx-rooms .ip-place.is-on .ip-link {
    max-height: 60px; opacity: 1 !important; display: inline-flex !important; align-items: center; gap: 8px; margin-top: 16px !important;
    padding: 10px 18px; border-radius: 999px; background: var(--x-lime); color: var(--x-ink) !important; font-weight: 600; font-size: 14px;
  }
  html.ipx.ipx.ipx body.ipx-next .ip-home .ipx-rooms .ip-place::before {
    content: ""; position: absolute; left: 26px; right: 26px; top: 22px; z-index: 3; height: 2px; border-radius: 2px;
    background: linear-gradient(90deg, var(--x-lime) var(--rp, 0%), rgba(255, 255, 255, .18) 0); opacity: 0; transition: opacity .4s;
  }
  html.ipx.ipx.ipx body.ipx-next .ip-home .ipx-rooms .ip-place.is-on::before { opacity: 1; animation: ipxRoomBar 4.2s linear both; }
  html.ipx.ipx.ipx body.ipx-next .ip-home .ipx-rooms:hover .ip-place.is-on::before { animation-play-state: paused; }
}
@property --rp { syntax: "<percentage>"; inherits: false; initial-value: 0%; }
@keyframes ipxRoomBar { from { --rp: 0%; } to { --rp: 100%; } }

/* ---------- principle stage (dark) ---------- */
html.ipx.ipx.ipx body.ipx-next .ip-home .ipx-pr {
  display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr); gap: clamp(24px, 4vw, 64px); align-items: center;
}
html.ipx.ipx.ipx body.ipx-next .ip-home .ipx-pr__vis {
  position: relative; aspect-ratio: 640 / 440; border-radius: 30px; overflow: hidden;
  background: radial-gradient(120% 90% at 10% 45%, rgba(255, 138, 61, .14), transparent 55%), linear-gradient(180deg, #15171b, #0e0f12);
  border: 1px solid rgba(255, 255, 255, .08);
}
html.ipx.ipx.ipx body.ipx-next .ip-home .ipx-pr__svg { position: absolute; inset: 0; width: 100%; height: 100%; }
html.ipx.ipx.ipx body.ipx-next .ipx-pr .ipx-s { opacity: 0; transition: opacity .8s var(--x-ease); }
html.ipx.ipx.ipx body.ipx-next .ipx-pr[data-s="0"] .ipx-s0,
html.ipx.ipx.ipx body.ipx-next .ipx-pr[data-s="1"] .ipx-s1,
html.ipx.ipx.ipx body.ipx-next .ipx-pr[data-s="2"] .ipx-s2,
html.ipx.ipx.ipx body.ipx-next .ipx-pr[data-s="3"] .ipx-s3,
html.ipx.ipx.ipx body.ipx-next .ipx-pr[data-s="4"] .ipx-s4 { opacity: 1; }
html.ipx.ipx.ipx body.ipx-next .ipx-pr .ipx-pr__room,
html.ipx.ipx.ipx body.ipx-next .ipx-pr .ipx-pr__scene { transition: opacity .8s var(--x-ease); }
html.ipx.ipx.ipx body.ipx-next .ipx-pr[data-s="4"] .ipx-pr__room,
html.ipx.ipx.ipx body.ipx-next .ipx-pr[data-s="4"] .ipx-pr__scene { opacity: .12; }
html.ipx.ipx.ipx body.ipx-next .ipx-pr .ipx-pr__person { fill: rgba(255, 255, 255, .2); }
html.ipx.ipx.ipx body.ipx-next .ipx-pr .ipx-pr__person--warm { fill: url(#ipxBodyG); opacity: 0; transition: opacity 1.4s var(--x-ease) .3s; }
html.ipx.ipx.ipx body.ipx-next .ipx-pr[data-s="0"] .ipx-pr__person--warm { opacity: .9; }
html.ipx.ipx.ipx body.ipx-next .ipx-pr .ipx-pr__glow { opacity: .35; transition: opacity 1s; }
html.ipx.ipx.ipx body.ipx-next .ipx-pr[data-s="0"] .ipx-pr__glow { opacity: 1; animation: ipxPrPulse 2.6s ease-in-out infinite; }
@keyframes ipxPrPulse { 50% { opacity: .6; } }
html.ipx.ipx.ipx body.ipx-next .ipx-pr .ipx-pr__waves path { transform-box: view-box; transform-origin: 62px 210px; opacity: 0; animation: ipxPrWave 3.2s cubic-bezier(.2, .6, .3, 1) infinite; }
html.ipx.ipx.ipx body.ipx-next .ipx-pr .ipx-pr__waves path:nth-child(2) { animation-delay: .8s; }
html.ipx.ipx.ipx body.ipx-next .ipx-pr .ipx-pr__waves path:nth-child(3) { animation-delay: 1.6s; }
html.ipx.ipx.ipx body.ipx-next .ipx-pr .ipx-pr__waves path:nth-child(4) { animation-delay: 2.4s; }
@keyframes ipxPrWave { 0% { transform: scale(.25); opacity: 0; } 15% { opacity: .9; } 100% { transform: scale(4.4); opacity: 0; } }
html.ipx.ipx.ipx body.ipx-next .ipx-pr .ipx-pr__warm { opacity: 0; transition: opacity 2s var(--x-ease) .4s; }
html.ipx.ipx.ipx body.ipx-next .ipx-pr[data-s="0"] .ipx-pr__warm { opacity: 1; }
html.ipx.ipx.ipx body.ipx-next .ipx-pr .ipx-pr__dust circle { animation: ipxPrDust 6s ease-in-out infinite; }
html.ipx.ipx.ipx body.ipx-next .ipx-pr .ipx-pr__dust circle:nth-child(2n) { animation-duration: 7.5s; animation-delay: -2s; }
html.ipx.ipx.ipx body.ipx-next .ipx-pr .ipx-pr__dust circle:nth-child(3n) { animation-duration: 9s; animation-delay: -4s; }
@keyframes ipxPrDust { 50% { transform: translate(3px, -5px); } }
html.ipx.ipx.ipx body.ipx-next .ipx-pr .ipx-pr__loop { animation: ipxPrDash 4s linear infinite; }
@keyframes ipxPrDash { to { stroke-dashoffset: -56; } }
html.ipx.ipx.ipx body.ipx-next .ipx-pr .ipx-pr__noise { transform-box: view-box; transform-origin: 176px 210px; animation: ipxPrNoise 2.4s var(--x-ease-out) infinite; }
@keyframes ipxPrNoise { 0% { transform: scaleY(1); opacity: .9; } 70%, 100% { transform: scaleY(0); opacity: 0; } }
html.ipx.ipx.ipx body.ipx-next .ipx-pr .ipx-pr__flat { stroke-dasharray: 200; stroke-dashoffset: 200; animation: ipxPrFlat 2.4s var(--x-ease-out) infinite; }
@keyframes ipxPrFlat { 0%, 30% { stroke-dashoffset: 200; } 80%, 100% { stroke-dashoffset: 0; } }
html.ipx.ipx.ipx body.ipx-next .ipx-pr .ipx-pr__link { animation: ipxPrDash 1.6s linear infinite; }
html.ipx.ipx.ipx body.ipx-next .ipx-pr .ipx-pr__dial { transition: stroke-dashoffset 1.6s var(--x-ease-out) .3s; }
html.ipx.ipx.ipx body.ipx-next .ipx-pr[data-s="3"] .ipx-pr__dial { stroke-dashoffset: 32; }
html.ipx.ipx.ipx body.ipx-next .ipx-pr .ipx-pr__phone { transform: translateY(24px); transition: transform 1s var(--x-ease-out); }
html.ipx.ipx.ipx body.ipx-next .ipx-pr[data-s="3"] .ipx-pr__phone { transform: none; }
html.ipx.ipx.ipx body.ipx-next .ipx-pr .ipx-s4 rect { transform-box: fill-box; transform-origin: 50% 50%; transform: scaleY(.6); transition: transform 1.2s var(--x-ease-out); }
html.ipx.ipx.ipx body.ipx-next .ipx-pr[data-s="4"] .ipx-s4 rect { transform: none; }

html.ipx.ipx.ipx body.ipx-next .ipx-pr__play {
  position: absolute; left: 18px; bottom: 18px; z-index: 2; display: inline-flex; align-items: center; gap: 10px;
  padding: 9px 16px 9px 9px; border: 0; border-radius: 999px; cursor: pointer;
  background: rgba(255, 255, 255, .1); -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px);
  color: #fff; font: 600 13px/1 var(--x-font); transition: background-color .25s;
}
html.ipx.ipx.ipx body.ipx-next .ipx-pr__play span { width: 28px; height: 28px; border-radius: 50%; background: var(--x-lime); position: relative; }
html.ipx.ipx.ipx body.ipx-next .ipx-pr__play span::after { content: ""; position: absolute; left: 11px; top: 8px; border-left: 9px solid var(--x-ink); border-top: 6px solid transparent; border-bottom: 6px solid transparent; }
html.ipx.ipx.ipx body.ipx-next .ipx-pr__play:hover { background: rgba(255, 255, 255, .18); }

html.ipx.ipx.ipx body.ipx-next .ipx-pr__list { list-style: none; margin: 0; padding: 0; counter-reset: none; }
html.ipx.ipx.ipx body.ipx-next .ipx-pr__item { position: relative; padding: 16px 0 16px; border-top: 1px solid rgba(255, 255, 255, .1); }
html.ipx.ipx.ipx body.ipx-next .ipx-pr__item:last-child { border-bottom: 1px solid rgba(255, 255, 255, .1); }
html.ipx.ipx.ipx body.ipx-next .ipx-pr__h { margin: 0 !important; }
html.ipx.ipx.ipx body.ipx-next .ipx-pr__tab {
  display: flex; align-items: baseline; gap: 14px; width: 100%; padding: 0; border: 0; background: none; cursor: pointer; text-align: left;
  color: rgba(255, 255, 255, .42); font: 700 clamp(19px, 1.7vw, 26px)/1.15 var(--x-font); letter-spacing: -.03em; transition: color .4s;
}
html.ipx.ipx.ipx body.ipx-next .ipx-pr__tab:hover,
html.ipx.ipx.ipx body.ipx-next .ipx-pr__item.is-on .ipx-pr__tab { color: #fff; }
html.ipx.ipx.ipx body.ipx-next .ipx-pr__n { min-width: 22px; color: rgba(255, 255, 255, .3); font: 600 12px/1 var(--x-font); letter-spacing: .06em; transition: color .4s; }
html.ipx.ipx.ipx body.ipx-next .ipx-pr__item.is-on .ipx-pr__n { color: var(--x-lime); }
html.ipx.ipx.ipx body.ipx-next .ipx-pr__body { display: grid; grid-template-rows: 0fr; padding-left: 36px; transition: grid-template-rows .6s var(--x-ease-out); }
html.ipx.ipx.ipx body.ipx-next .ipx-pr__body > * { min-height: 0; overflow: hidden; }
html.ipx.ipx.ipx body.ipx-next .ipx-pr__item.is-on .ipx-pr__body { grid-template-rows: 1fr; }
html.ipx.ipx.ipx body.ipx-next .ipx-pr__body { display: block; max-height: 0; overflow: hidden; opacity: 0; transition: max-height .7s var(--x-ease-out), opacity .5s; }
html.ipx.ipx.ipx body.ipx-next .ipx-pr__item.is-on .ipx-pr__body { max-height: 180px; opacity: 1; }
html.ipx.ipx.ipx body.ipx-next .ipx-pr__body p { margin: 10px 0 0 !important; color: rgba(255, 255, 255, .64) !important; font-size: 15.5px !important; line-height: 1.55 !important; max-width: 440px; }
html.ipx.ipx.ipx body.ipx-next .ipx-pr__body .ip-link { display: inline-flex; margin-top: 10px; color: var(--x-lime) !important; font-weight: 600; }
html.ipx.ipx.ipx body.ipx-next .ipx-pr__bar { position: absolute; left: 0; top: -1px; height: 1px; width: 0; background: var(--x-lime); }
html.ipx.ipx.ipx body.ipx-next .ipx-pr.is-run .ipx-pr__item.is-on .ipx-pr__bar { animation: ipxPrBar 6.5s linear both; }
html.ipx.ipx.ipx body.ipx-next .ipx-pr__item.is-on .ipx-pr__bar { width: 100%; }
@keyframes ipxPrBar { from { width: 0; } to { width: 100%; } }

/* video dialog */
html.ipx.ipx.ipx .ipx-dlg { width: min(1100px, 92vw); padding: 0; border: 0; border-radius: 22px; overflow: hidden; background: #000; }
html.ipx.ipx.ipx .ipx-dlg::backdrop { background: rgba(5, 6, 8, .82); -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); }
html.ipx.ipx.ipx .ipx-dlg .ip-video { margin: 0 !important; border-radius: 0 !important; position: static !important; }
html.ipx.ipx.ipx .ipx-dlg video { display: block; width: 100%; height: auto; }
html.ipx.ipx.ipx .ipx-dlg__x { position: absolute; right: 12px; top: 12px; z-index: 2; width: 40px; height: 40px; border: 0; border-radius: 50%; cursor: pointer; background: rgba(255, 255, 255, .14); }
html.ipx.ipx.ipx .ipx-dlg__x::before, html.ipx.ipx.ipx .ipx-dlg__x::after { content: ""; position: absolute; left: 12px; top: 19px; width: 16px; height: 2px; background: #fff; transform: rotate(45deg); }
html.ipx.ipx.ipx .ipx-dlg__x::after { transform: rotate(-45deg); }

/* ---------- feature: scroll-linked unveil ---------- */
html.ipx.ipx.ipx body.ipx-next .ip-home #ip-cinema-home.ipx-fs .ipch-visual {
  clip-path: inset(calc((1 - var(--p, 1)) * 9%) calc((1 - var(--p, 1)) * 9%) round calc(28px + (1 - var(--p, 1)) * 40px));
  will-change: clip-path;
}
html.ipx.ipx.ipx body.ipx-next .ip-home #ip-cinema-home.ipx-fs .ipch-visual img { transform: scale(calc(1.16 - .16 * var(--p, 1))); will-change: transform; }
html.ipx.ipx.ipx body.ipx-next .ip-home #ip-cinema-home.ipx-fs .ipch-copy { opacity: calc(.2 + .8 * var(--p, 1)); transform: translateY(calc((1 - var(--p, 1)) * 40px)); }

/* calc dial: slow living ring */
html.ipx.ipx.ipx body.ipx-next .ip-home .ip-calc__ring { animation: ipxSpin 14s linear infinite; }
html.ipx.ipx.ipx body.ipx-next .ip-home .ip-calc:hover .ip-calc__ring { animation-duration: 3s; }
@keyframes ipxSpin { to { transform: rotate(360deg); } }
html.ipx.ipx.ipx body.ipx-next .ip-home .ip-calc .ip-btn { transition: transform .35s var(--x-ease-out); }

@media (max-width: 991px) {
  html.ipx.ipx.ipx body.ipx-next .ip-home .ipx-pr { grid-template-columns: 1fr; gap: 20px; }
  html.ipx.ipx.ipx body.ipx-next .ip-home .ipx-pr__vis { border-radius: 22px; }
}
@media (max-width: 600px) {
  html.ipx.ipx.ipx body.ipx-next .ipx-pr__tab { font-size: 18px; }
  html.ipx.ipx.ipx body.ipx-next .ipx-pr__body { padding-left: 36px; }
  html.ipx.ipx.ipx body.ipx-next .ipx-pr__play { left: 12px; bottom: 12px; font-size: 12px; }
}
@media (prefers-reduced-motion: reduce) {
  html.ipx.ipx.ipx .ipx-hero__t.ipx-split .ipx-w > span { transform: none !important; transition: none !important; }
  html.ipx.ipx.ipx body.ipx-next .ipx-pr * { animation: none !important; }
}
@media (min-width: 992px) {
  html.ipx.ipx.ipx body.ipx-next .ip-home .ipx-rooms .ip-place.is-on .ip-link { width: max-content; justify-self: start; align-self: flex-start; }
  html.ipx.ipx.ipx body.ipx-next .ip-home .ipx-rooms .ip-place__body { display: flex !important; flex-direction: column; align-items: flex-start; }
}
html.ipx.ipx.ipx body.ipx-next .ip-home #ip-cinema-home { padding-top: clamp(12px, 2vw, 32px) !important; }

/* 9.17 — B2B-only panels */
html.ipx.ipx.ipx .ipx-b2b { margin: 14px 0 18px; padding: 18px 20px; border-radius: 20px; background: #0b0c0e; color: rgba(255, 255, 255, .72); }
html.ipx.ipx.ipx .ipx-b2b__k { display: flex; align-items: center; gap: 10px; margin: 0 0 8px !important; color: #fff; font: 700 16px/1.2 var(--x-font); letter-spacing: -.01em; }
html.ipx.ipx.ipx .ipx-b2b__k span { padding: 4px 8px; border-radius: 6px; background: var(--x-lime); color: var(--x-ink); font-size: 11px; letter-spacing: .08em; }
html.ipx.ipx.ipx .ipx-b2b__t { margin: 0 0 14px !important; font-size: 14px !important; line-height: 1.55 !important; color: rgba(255, 255, 255, .72) !important; }
html.ipx.ipx.ipx .ipx-b2b__cta { display: flex; flex-wrap: wrap; gap: 8px 16px; align-items: center; }
html.ipx.ipx.ipx .ipx-b2b__btn { display: inline-flex; align-items: center; gap: 8px; padding: 11px 18px; border-radius: 999px; background: var(--x-lime); color: var(--x-ink) !important; font-weight: 600; font-size: 14px; text-decoration: none !important; }
html.ipx.ipx.ipx .ipx-b2b__alt { display: inline-flex; align-items: center; gap: 6px; color: var(--x-lime) !important; font-size: 14px; font-weight: 600; text-decoration: none !important; }
html.ipx.ipx.ipx .ipx-b2b svg { width: 16px; height: 16px; }
html.ipx.ipx.ipx [data-ipx-b2b="1"] { position: relative; }
html.ipx.ipx.ipx .ipx-b2b-tag { position: absolute; left: 12px; top: 12px; z-index: 3; padding: 5px 9px; border-radius: 999px; background: rgba(11, 12, 14, .82); color: #fff; font: 600 11px/1 var(--x-font); letter-spacing: .02em; pointer-events: none; }
html.ipx.ipx.ipx .p-info-wrapper > .ipx-b2b { order: 2 !important; width: 100%; }
html.ipx.ipx.ipx .ipx-b2b__all { display: inline-block; margin-top: 12px; color: rgba(255, 255, 255, .6) !important; font-size: 13px; text-decoration: underline !important; text-underline-offset: 3px; }
html.ipx.ipx.ipx .ipx-b2b__all:hover { color: #fff !important; }

/* 9.20 — B2B + Ecodesign podmínky */
html.ipx.ipx.ipx .ipx-b2b__l { margin: 0 0 14px !important; padding: 0 !important; list-style: none; display: grid; gap: 6px; }
html.ipx.ipx.ipx .ipx-b2b__l li { position: relative; padding-left: 20px; font-size: 13.5px; line-height: 1.45; color: rgba(255,255,255,.82); }
html.ipx.ipx.ipx .ipx-b2b__l li::before { content: ""; position: absolute; left: 2px; top: .45em; width: 8px; height: 8px; border-radius: 50%; background: var(--x-lime); }

/* 9.21 — Ecodesign sekce v popisu a v krátkém popisu */
html.ipx.ipx.ipx #description .ipn-eco, html.ipx.ipx.ipx .ipn-eco { background: #0b0c0e !important; color: rgba(255,255,255,.82) !important; }
html.ipx.ipx.ipx .ipn-eco h2 { color: #fff !important; }
html.ipx.ipx.ipx .ipn-eco p, html.ipx.ipx.ipx .ipn-eco li { color: rgba(255,255,255,.82) !important; }
html.ipx.ipx.ipx .ipn-eco p:first-child { color: #b8f03a !important; }
html.ipx.ipx.ipx .ipn-eco a { color: #b8f03a !important; font-weight: 600; text-decoration: underline !important; text-underline-offset: 3px; }
html.ipx.ipx.ipx .ipn-eco li::marker { color: #b8f03a; }
html.ipx.ipx.ipx .ipn-eco-sh { background: #0b0c0e !important; color: #fff !important; }
html.ipx.ipx.ipx .ipn-eco-sh b { color: #b8f03a !important; }

/* 9.22 — Stability: fit the best-seller image to its own grid track.
   Shoptet's minimum image width (120px) must not spill into the 96px mobile track. */
html.ipx.ipx.ipx body.template-11 #content #productsTop.products-top > .product .p > .image {
  width: 100% !important;
  min-width: 0 !important;
  max-width: 100% !important;
  min-height: 0 !important;
  height: auto !important;
}
html.ipx.ipx.ipx body.template-11 #content #productsTop.products-top > .product .p > .image img {
  position: absolute !important;
  inset: 0;
  border-radius: inherit;
}
html.ipx.ipx.ipx body.template-11 #content #productsTop.products-top .p-in {
  min-width: 0 !important;
}
/* Native video fallback when the modal dialog API is unavailable. */
html.ipx.ipx.ipx .ipx-pr__vis > .ip-video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  margin: 0 !important;
}
html.ipx.ipx.ipx .ipx-pr__vis > .ip-video video {
  width: 100%;
  height: 100%;
  object-fit: contain;
}

/* ==========================================================================
   9.23:START — Michal Sasín WhatsApp feedback 2. 11. 2026 (Claude, 2026-11-02)
   Additive CSS only. Rollback = link back to infraplus-site-v9-21.css
   (or v9-22-stability-20261031.css for Codex's block alone).
   No content, price, URL or SEO element is changed or hidden.
   ========================================================================== */

/* 9.23-A:START — cart widget (header cart preview): the global 120px quantity
   stepper overflowed Shoptet's 70px table cell and covered the unit + name.
   Compact stepper (98px) and let the cell size to it. Desktop + mobile. */
html.ipx.ipx.ipx body.template-11 .cart-widget .cart-widget-product-amount {
  width: 110px !important;
  min-width: 110px !important;
  padding-right: 12px !important;
  white-space: nowrap;
}
html.ipx.ipx.ipx body.template-11 .cart-widget .quantity {
  width: 98px !important;
  min-width: 98px !important;
  height: 40px !important;
  border-radius: 12px !important;
}
html.ipx.ipx.ipx body.template-11 .cart-widget .quantity label {
  flex: 0 0 38px !important;
  width: 38px !important;
  height: 40px !important;
}
html.ipx.ipx.ipx body.template-11 .cart-widget .quantity .amount {
  width: 38px !important;
  height: 40px !important;
  min-height: 40px !important;
  line-height: 40px !important;
  font-size: 14px !important;
}
html.ipx.ipx.ipx body.template-11 .cart-widget .quantity .increase,
html.ipx.ipx.ipx body.template-11 .cart-widget .quantity .decrease {
  flex: 0 0 30px !important;
  width: 30px !important;
  height: 40px !important;
  min-height: 40px !important;
}
html.ipx.ipx.ipx body.template-11 .cart-widget .cart-widget-product-name {
  min-width: 0;
  overflow-wrap: anywhere;
}
/* Phones: the cart panel is fixed to the top of the screen (padding-top 50px) under our
   sticky header (z-index 1000), so the info bar + header (116-134px) covered the product
   row. Start the panel content below the header; the header and its cart toggle stay on top. */
@media (max-width: 767px) {
  html.ipx.ipx.ipx body.template-11 .popup-widget.cart-widget {
    padding-top: 150px !important;
    overflow-y: auto;
  }
}
/* Phones: 4 table cells in one row left only ~50px for the product name at 320px.
   Two-row layout instead: photo | name, then stepper + unit under the name. */
@media (max-width: 600px) {
  html.ipx.ipx.ipx body.template-11 .cart-widget .cart-widget-product {
    display: grid !important;
    grid-template-columns: 76px auto auto minmax(0, 1fr) auto;
    grid-template-areas: "img name name name del" "img amount unit . del";
    column-gap: 8px;
    row-gap: 8px;
    align-items: center;
    width: 100% !important;
  }
  html.ipx.ipx.ipx body.template-11 .cart-widget .cart-widget-product > .cart-widget-product-image { grid-area: img; align-self: start; }
  html.ipx.ipx.ipx body.template-11 .cart-widget .cart-widget-product > .cart-widget-product-name { grid-area: name; }
  html.ipx.ipx.ipx body.template-11 .cart-widget .cart-widget-product > .cart-widget-product-amount { grid-area: amount; width: auto !important; min-width: 0 !important; padding: 0 !important; }
  html.ipx.ipx.ipx body.template-11 .cart-widget .cart-widget-product > .cart-widget-product-unit { grid-area: unit; width: auto !important; }
  html.ipx.ipx.ipx body.template-11 .cart-widget .cart-widget-product > .cart-widget-product-delete { grid-area: del; }
}
/* 9.23-A:END */

/* 9.23-B:START — product detail benefit grid on phones (2×2): container padding and
   a duplicated top border made the dividers stop short / not meet. Lines now run
   edge to edge; text keeps 12px from the divider. Only ≤600px, detail page only. */
@media (max-width: 600px) {
  html.ipx.ipx.ipx body.type-detail .benefitBanner.position--benefitProduct {
    padding: 0 !important;
    gap: 0 !important;
  }
  html.ipx.ipx.ipx body.type-detail .benefitBanner.position--benefitProduct > .benefitBanner__item {
    border: 0 !important;
    min-width: 0;
  }
  html.ipx.ipx.ipx body.type-detail .benefitBanner.position--benefitProduct > .benefitBanner__item:nth-child(2n) {
    border-left: 1px solid var(--x-line) !important;
  }
  html.ipx.ipx.ipx body.type-detail .benefitBanner.position--benefitProduct > .benefitBanner__item:nth-child(n+3) {
    border-top: 1px solid var(--x-line) !important;
  }
  html.ipx.ipx.ipx body.type-detail .benefitBanner.position--benefitProduct > .benefitBanner__item:nth-child(2n+1) .benefitBanner__link {
    padding-right: 12px !important;
  }
  html.ipx.ipx.ipx body.type-detail .benefitBanner.position--benefitProduct > .benefitBanner__item:nth-child(2n) .benefitBanner__link {
    padding-left: 12px !important;
  }
}
/* 9.23-B:END */

/* 9.23-C:START — /jak-funguji-infrapanely/ "Stěna, nebo strop?": the page editor split
   each card (<a> title, <p> text, <a> link became 3 siblings), so the text landed in
   the neighbouring grid cell next to a large empty card. Re-join the 3 pieces into one
   visual card per column. Applies only while the split structure exists (:has(> p)). */
html.ipx.ipx.ipx body.template-11 .ip-guide-placement:has(> p) {
  grid-auto-flow: column;
  grid-template-rows: auto 1fr auto;
  row-gap: 0 !important;
  column-gap: 14px;
}
html.ipx.ipx.ipx body.template-11 .ip-guide-placement:has(> p) > * {
  margin: 0 !important;
  background: var(--ip-neutral-50);
  border: 1px solid var(--ip-line);
  max-width: none !important;
}
html.ipx.ipx.ipx body.template-11 .ip-guide-placement:has(> p) > a:nth-child(3n+1) {
  min-height: 0 !important;
  padding-bottom: 14px !important;
  border-bottom: 0;
  border-radius: 26px 26px 0 0;
}
html.ipx.ipx.ipx body.template-11 .ip-guide-placement:has(> p) > a:nth-child(3n+1) .ip-guide-placement-icon {
  margin-bottom: 28px;
}
html.ipx.ipx.ipx body.template-11 .ip-guide-placement:has(> p) > p:nth-child(3n+2) {
  padding: 0 clamp(28px, 4vw, 48px) 22px !important;
  border-top: 0;
  border-bottom: 0;
  border-radius: 0;
}
html.ipx.ipx.ipx body.template-11 .ip-guide-placement:has(> p) > a:nth-child(3n) {
  display: block;
  min-height: 0 !important;
  padding: 0 clamp(28px, 4vw, 48px) clamp(26px, 3.4vw, 40px) !important;
  border-top: 0;
  border-radius: 0 0 26px 26px;
}
html.ipx.ipx.ipx body.template-11 .ip-guide-placement:has(> p) > a:hover {
  transform: none;
  box-shadow: none;
}
@media (max-width: 767px) {
  html.ipx.ipx.ipx body.template-11 .ip-guide-placement:has(> p) {
    grid-auto-flow: row;
    grid-template-columns: 1fr;
    grid-template-rows: none;
  }
  html.ipx.ipx.ipx body.template-11 .ip-guide-placement:has(> p) > a:nth-child(3n+4) {
    margin-top: 14px !important;
  }
  html.ipx.ipx.ipx body.template-11 .ip-guide-placement:has(> p) > p:nth-child(3n+2),
  html.ipx.ipx.ipx body.template-11 .ip-guide-placement:has(> p) > a:nth-child(3n) {
    padding-left: 22px !important;
    padding-right: 22px !important;
  }
}
/* 9.23-C:END */
/* 9.23:END */

/* ==========================================================================
   9.26:START — frontend unification (Claude Opus 5.5, 2026-11-04)
   Based on 9.23. Visual only, additive. Rollback = HTML kódy back to
   infraplus-site-v9-23-michal-20261102.css (or delete this block).
   A) subcategory tiles  B) order process (cart → shipping & payment → info)
   C) small site-wide fixes (see AUDIT-FRONTEND-2026-11-04.md)
   ========================================================================== */

/* A) subcategory tiles: one look for every tile — slate render on top, same crop,
      label on its own dark strip (never over the product, never clipped) */
html.ipx.ipx.ipx body.template-11 .subcategories.with-image > li > a .image {
  bottom: 60px !important;
  height: auto !important;
}
html.ipx.ipx.ipx body.template-11 .subcategories.with-image > li > a .image img {
  object-position: 50% 50% !important;
  background: #121316;
}
html.ipx.ipx.ipx body.template-11 .subcategories.with-image > li > a::before {
  background: linear-gradient(180deg, rgba(18, 19, 22, 0) calc(100% - 96px), rgba(18, 19, 22, .85) calc(100% - 60px), #121316 calc(100% - 59px)) !important;
}
html.ipx.ipx.ipx body.template-11 .subcategories.with-image > li > a .text {
  top: auto !important;
  height: auto !important;
  min-height: 60px !important;
  max-height: none !important;
  padding: 10px 14px 10px 16px !important;
  overflow: visible !important;
  white-space: normal !important;
  line-height: 1.2 !important;
}
@media (max-width: 767px) {
  html.ipx.ipx.ipx body.template-11 .subcategories.with-image > li > a .image { bottom: 52px !important; }
  html.ipx.ipx.ipx body.template-11 .subcategories.with-image > li > a .text { min-height: 52px !important; padding: 8px 10px 8px 12px !important; }
  html.ipx.ipx.ipx body.template-11 .subcategories.with-image > li > a::before {
    background: linear-gradient(180deg, rgba(18, 19, 22, 0) calc(100% - 84px), rgba(18, 19, 22, .85) calc(100% - 52px), #121316 calc(100% - 51px)) !important;
  }
}
/* fallback when a mapped image is missing: clean dark tile, never a broken-image icon */
html.ipx.ipx.ipx body.template-11 .subcategories.with-image > li > a.ip-sub--broken .image,
html.ipx.ipx.ipx body.template-11 .subcategories.with-image > li > a.ip-sub--noimg .image img[src*="folder.svg"] { visibility: hidden; }
html.ipx.ipx.ipx body.template-11 .subcategories.with-image > li > a.ip-sub--broken,
html.ipx.ipx.ipx body.template-11 .subcategories.with-image > li > a.ip-sub--noimg {
  background: radial-gradient(120% 90% at 70% 20%, #24262b 0%, #121316 60%) !important;
}
html.ipx.ipx.ipx .ipx-more__m.is-noimg { background: radial-gradient(120% 90% at 70% 20%, #24262b 0%, #121316 60%); }

/* B) order process — same type, buttons, radii and colours as the rest of the site */
html.ipx.ipx.ipx body.ordering-process #content,
html.ipx.ipx.ipx body.ordering-process #content .cart-content { font-family: var(--x-font) !important; }

/* headings: sentence case, site weight/size (was heavy 33px capitals) */
html.ipx.ipx.ipx body.ordering-process #content h2,
html.ipx.ipx.ipx body.ordering-process #content .h4,
html.ipx.ipx.ipx body.ordering-process #content h2.order-icon {
  text-transform: none !important;
  font: 650 clamp(20px, 1.7vw, 26px)/1.2 var(--x-font) !important;
  letter-spacing: -.025em !important;
  color: var(--x-text) !important;
}
html.ipx.ipx.ipx body.ordering-process #content h2.order-icon::before { color: var(--x-ink) !important; }
html.ipx.ipx.ipx body.ordering-process #content .cart-summary > h2,
html.ipx.ipx.ipx body.ordering-process #content .checkout-box-wrapper > h2,
html.ipx.ipx.ipx body.ordering-process #content .order-summary-inner > h2 { margin: 0 0 14px !important; }

/* steps 1–2–3: quiet pills, active = ink */
html.ipx.ipx.ipx body.ordering-process #content .cart-header {
  display: flex !important;
  gap: 8px;
  margin: 0 0 clamp(20px, 2.4vw, 32px) !important;
  padding: 0 !important;
  border: 0 !important;
  text-transform: none !important;
}
html.ipx.ipx.ipx body.ordering-process #content .cart-header .step {
  flex: 1 1 0;
  min-width: 0;
  margin: 0 !important;
  padding: 0 !important;
  border: 0 !important;
  text-transform: none !important;
}
html.ipx.ipx.ipx body.ordering-process #content .cart-header .step > a,
html.ipx.ipx.ipx body.ordering-process #content .cart-header .step > strong {
  display: flex !important;
  align-items: center;
  justify-content: center;
  gap: 10px;
  min-height: 48px;
  padding: 8px 16px !important;
  border: 0 !important;
  border-radius: 999px !important;
  background: var(--x-soft) !important;
  color: var(--x-mute) !important;
  font: 600 14px/1.2 var(--x-font) !important;
  letter-spacing: -.01em;
  text-transform: none !important;
  text-decoration: none !important;
  transition: background-color .3s var(--x-ease), color .3s;
}
html.ipx.ipx.ipx body.ordering-process #content .cart-header .step > a:hover { background: #ebebef !important; color: var(--x-text) !important; }
html.ipx.ipx.ipx body.ordering-process #content .cart-header .step.completed > a,
html.ipx.ipx.ipx body.ordering-process #content .cart-header .step.completed > strong { color: var(--x-text) !important; }
html.ipx.ipx.ipx body.ordering-process #content .cart-header .step.active > a,
html.ipx.ipx.ipx body.ordering-process #content .cart-header .step.active > strong { background: var(--x-ink) !important; color: #fff !important; }
html.ipx.ipx.ipx body.ordering-process #content .cart-header .step span { color: inherit !important; text-transform: none !important; }
html.ipx.ipx.ipx body.ordering-process #content .cart-header .step span::before {
  width: 24px !important;
  height: 24px !important;
  line-height: 20px !important;
  margin-right: 8px !important;
  border: 2px solid currentColor !important;
  border-radius: 50% !important;
  color: inherit !important;
  font: 650 12px/20px var(--x-font) !important;
  opacity: .9;
}
html.ipx.ipx.ipx body.ordering-process #content .cart-header .step.active span::before { border-color: var(--x-lime) !important; color: var(--x-lime) !important; opacity: 1; }

/* cart table: product name in sentence case, rounded slate thumbnail */
html.ipx.ipx.ipx body.ordering-process #content .cart-table .p-name a,
html.ipx.ipx.ipx body.ordering-process #content .cart-item-name,
html.ipx.ipx.ipx body.ordering-process #content .cart-item-name a {
  text-transform: none !important;
  font: 600 15px/1.35 var(--x-font) !important;
  letter-spacing: -.01em;
  color: var(--x-text) !important;
}
html.ipx.ipx.ipx body.ordering-process #content .cart-item-name a { font-size: 14px !important; }
html.ipx.ipx.ipx body.ordering-process #content .cart-table td { border-color: var(--x-line) !important; }
html.ipx.ipx.ipx body.ordering-process #content .cart-table .cart-p-image img {
  width: 76px !important;
  height: 57px !important;
  object-fit: cover;
  border-radius: 12px !important;
  background: #121316;
}
html.ipx.ipx.ipx body.ordering-process #content .cart-table .p-price,
html.ipx.ipx.ipx body.ordering-process #content .cart-table .p-total { font-family: var(--x-font) !important; }
html.ipx.ipx.ipx body.ordering-process #content .cart-table .price-final { font-weight: 650 !important; color: var(--x-text) !important; }
html.ipx.ipx.ipx body.ordering-process #content .availability-label { color: var(--x-green) !important; font-weight: 600 !important; }
html.ipx.ipx.ipx body.ordering-process #content .extra.delivery strong { color: var(--x-text) !important; font-weight: 600 !important; }

/* sidebar boxes: soft cards with the site radius */
html.ipx.ipx.ipx body.ordering-process #content .sidebar-in-cart .box,
html.ipx.ipx.ipx body.ordering-process #content .order-summary-inner {
  border: 0 !important;
  border-radius: var(--x-r) !important;
  background: var(--x-soft) !important;
  padding: 20px 22px !important;
}
html.ipx.ipx.ipx body.ordering-process #content .order-summary .checkout-box .box { background: var(--x-soft) !important; border-radius: 18px !important; }
html.ipx.ipx.ipx body.ordering-process #content .price-wrapper .price-primary { color: var(--x-text) !important; }
html.ipx.ipx.ipx body.ordering-process #content .recapitulation-shipping-billing-info span,
html.ipx.ipx.ipx body.ordering-process #content .order-summary [class*="price"] { color: inherit; }
html.ipx.ipx.ipx body.ordering-process #content .recapitulation-shipping-billing-info span { color: var(--x-green) !important; font-weight: 600 !important; }
html.ipx.ipx.ipx body.ordering-process #content .order-summary-inner * { border-color: var(--x-line) !important; }

/* next-step buttons: one pill system — back = soft, forward = ink → lime */
html.ipx.ipx.ipx body.ordering-process #content .next-step {
  display: flex !important;
  flex-wrap: wrap;
  align-items: center;
  justify-content: flex-end;
  gap: 10px;
}
html.ipx.ipx.ipx body.ordering-process #content .next-step .btn,
html.ipx.ipx.ipx body.ordering-process #content .next-step-back,
html.ipx.ipx.ipx body.ordering-process #content .next-step-forward,
html.ipx.ipx.ipx body.ordering-process #content .next-step-finish {
  display: inline-flex !important;
  align-items: center;
  justify-content: center;
  gap: 8px;
  min-height: 52px !important;
  height: auto !important;
  margin: 0 !important;
  padding: 0 24px !important;
  border: 0 !important;
  border-radius: 999px !important;
  font: 600 15px/1 var(--x-font) !important;
  letter-spacing: -.01em !important;
  text-transform: none !important;
  box-shadow: none !important;
}
html.ipx.ipx.ipx body.ordering-process #content .next-step .btn *,
html.ipx.ipx.ipx body.ordering-process #content .order-button-text { text-transform: none !important; font: inherit !important; }
html.ipx.ipx.ipx body.ordering-process #content .next-step-back {
  background: var(--x-soft) !important;
  color: var(--x-text) !important;
}
html.ipx.ipx.ipx body.ordering-process #content .next-step-back:hover { background: #e8e8ed !important; color: var(--x-ink) !important; }
html.ipx.ipx.ipx body.ordering-process #content .next-step-forward,
html.ipx.ipx.ipx body.ordering-process #content .next-step-finish { background: var(--x-ink) !important; color: #fff !important; }
html.ipx.ipx.ipx body.ordering-process #content .next-step-forward:hover,
html.ipx.ipx.ipx body.ordering-process #content .next-step-finish:hover { background: var(--x-lime) !important; color: var(--x-ink) !important; }
html.ipx.ipx.ipx body.ordering-process #content .next-step .btn:focus-visible,
html.ipx.ipx.ipx body.ordering-process #content .cart-header a:focus-visible { outline: 3px solid var(--x-volt-a) !important; outline-offset: 3px; }

/* shipping & payment rows: no Shoptet blue, ink radio, soft active row */
html.ipx.ipx.ipx body.ordering-process #content .shipping-billing-table .radio-wrapper {
  border-color: var(--x-line) !important;
  border-radius: 14px;
  transition: background-color .25s var(--x-ease);
}
html.ipx.ipx.ipx body.ordering-process #content .shipping-billing-table .radio-wrapper.active { background: var(--x-soft) !important; border-color: transparent !important; }
html.ipx.ipx.ipx body.ordering-process #content .shipping-billing-table .radio-wrapper label { padding-left: 34px !important; padding-right: 12px !important; }
html.ipx.ipx.ipx body.ordering-process #content .shipping-billing-table .radio-wrapper label::before { left: 10px !important; border-color: #b9b9be !important; }
html.ipx.ipx.ipx body.ordering-process #content .shipping-billing-table .radio-wrapper.active label::before { border-color: var(--x-ink) !important; }
html.ipx.ipx.ipx body.ordering-process #content .shipping-billing-table .radio-wrapper.active label::after { left: 12px !important; background-color: var(--x-ink) !important; }
html.ipx.ipx.ipx body.ordering-process #content .shipping-billing-name {
  text-transform: none !important;
  font: 600 15px/1.3 var(--x-font) !important;
  letter-spacing: -.01em;
  color: var(--x-text) !important;
}
html.ipx.ipx.ipx body.ordering-process #content .payment-shipping-price { color: var(--x-green) !important; font: 650 13px/1.3 var(--x-font) !important; letter-spacing: .02em; }
html.ipx.ipx.ipx body.ordering-process #content .bankSelection__button { text-transform: none !important; border-radius: 999px !important; }
html.ipx.ipx.ipx body.ordering-process #content a:not(.btn) { color: var(--x-text); }

/* step 3 (customer info): Shoptet form labels/checkboxes in site style */
html.ipx.ipx.ipx body.ordering-process #content label,
html.ipx.ipx.ipx body.ordering-process #content legend { text-transform: none !important; font-family: var(--x-font) !important; }
html.ipx.ipx.ipx body.ordering-process #content legend,
html.ipx.ipx.ipx body.ordering-process #content .co-box h3,
html.ipx.ipx.ipx body.ordering-process #content .co-box h4 {
  font: 650 18px/1.3 var(--x-font) !important;
  letter-spacing: -.02em !important;
  color: var(--x-text) !important;
  border: 0 !important;
}
html.ipx.ipx.ipx body.ordering-process #content input[type="checkbox"],
html.ipx.ipx.ipx body.ordering-process #content input[type="radio"] { accent-color: var(--x-ink); }

@media (max-width: 767px) {
  html.ipx.ipx.ipx body.ordering-process #content .cart-header { gap: 6px; }
  html.ipx.ipx.ipx body.ordering-process #content .cart-header .step > a,
  html.ipx.ipx.ipx body.ordering-process #content .cart-header .step > strong { min-height: 42px; padding: 6px 8px !important; font-size: 12px !important; gap: 6px; }
  html.ipx.ipx.ipx body.ordering-process #content .cart-header .step span::before { width: 20px !important; height: 20px !important; line-height: 16px !important; margin-right: 4px !important; font-size: 11px !important; }
  html.ipx.ipx.ipx body.ordering-process #content .next-step { justify-content: stretch; }
  html.ipx.ipx.ipx body.ordering-process #content .next-step .btn { flex: 1 1 auto; }
}

/* B2 fixes found in preview: back button inside the soft summary card, mobile quantity "+" clipped,
      mobile steps bar hidden under the fixed site header */
html.ipx.ipx.ipx body.ordering-process #content .sidebar-in-cart .next-step-back {
  background: #fff !important;
  box-shadow: inset 0 0 0 1px rgba(0, 0, 0, .08) !important;
}
html.ipx.ipx.ipx body.ordering-process #content .cart-table .quantity {
  width: auto !important;
  padding: 0 !important;
  overflow: visible !important;
}
@media (max-width: 767px) {
  html.ipx.ipx.ipx body.ordering-process #content .cart-header {
    position: static !important;
    top: auto !important;
    height: auto !important;
    width: 100% !important;
    z-index: auto !important;
    background: transparent !important;
    margin: 4px 0 18px !important;
  }
  html.ipx.ipx.ipx body.ordering-process #content .next-step { flex-direction: column-reverse; align-items: stretch !important; }
  html.ipx.ipx.ipx body.ordering-process #content .next-step .btn { width: 100% !important; }
}

/* C) small site-wide fixes */
/* C1 mobile header: cart count badge sat on the logo (anchor was position:static) */
html.ipx.ipx.ipx body.template-11 #header .navigation-buttons a.cart-count { position: relative !important; }
html.ipx.ipx.ipx body.template-11 #header .navigation-buttons a.cart-count > i {
  top: 2px !important;
  right: 2px !important;
  left: auto !important;
}
/* C2 homepage "Vyberte podle místa": collapsed tiles cut the title mid-word → wrap inside the tile */
@media (min-width: 992px) {
  html.ipx.ipx.ipx body.ipx-next .ip-home .ipx-rooms .ip-place__body { width: 100%; box-sizing: border-box; }
  html.ipx.ipx.ipx body.ipx-next .ip-home .ipx-rooms .ip-place__title {
    max-width: 100%;
    white-space: normal !important;
    overflow-wrap: anywhere;
    text-overflow: clip;
  }
}
/* C3 missing tile image on the homepage → keep the dark tile, no broken icon */
html.ipx.ipx.ipx .ip-place__media { background: #121316; }

/* 9.26:END */