/* ============================================================
   ROLSER.CZ — Custom Design System
   Figma canvas: 1961 px  |  Max-width: 1960 px  |  Gutter: 24 px
   Fonts: Outfit 800/600/500  +  Inter 700/400/300
   ============================================================ */



/* ═══════════════════════════════════════════
   1. DESIGN TOKENS
   ═══════════════════════════════════════════ */

:root {
  /* Palette */
  --rl-black: #111111;
  --rl-red: #cc1f1f;
  --rl-white: #ffffff;
  --rl-gray: #5a5a5a;
  --rl-gray-md: #aaaaaa;
  --rl-gray-lt: #f4f4f4;
  --rl-gray-tile: #f4f4f4;
  --rl-border: #e5e5e3;
  --rl-bg: #f7f7f7;
  --rl-overlay-dk: rgba(0, 0, 0, .66);
  --rl-overlay-md: rgba(0, 0, 0, .1);
  /* Soft brown wash — same as .p.swap-images::before */
  --rl-tint: #797572;
  --rl-tint-bg: rgba(139, 106, 79, 0.05);

  /* Typography */
  --rl-display: "Outfit", sans-serif;
  --rl-body: "Inter", sans-serif;

  /* Layout — gutters & rhythm (canonical breakpoints: 1440 / 1200 / 992 / 768) */
  --rl-max: 1960px;
  --rl-gap: 24px;
  /* Spacing scale */
  --rl-space-1: 4px;
  --rl-space-2: 8px;
  --rl-space-3: 12px;
  --rl-space-4: 16px;
  --rl-space-5: 24px;
  --rl-space-6: 32px;
  --rl-space-7: 48px;
  --rl-section-y: clamp(32px, 2.86vw, 56px);

  /* Header / touch */
  --rl-header-h: 65px;
  --rl-announce-h: 37px;
  --rl-icon-btn: 38px;
  --rl-touch: 44px;
  /* Fixed popups (login / minicart) sit below announcement + header */
  --rl-popup-top: calc(var(--rl-header-h) + var(--rl-announce-h));
  /* PDP desktop sticky buy bar (~thumb 56 + pad 12×2) — JS may refine */
  --rl-pd-sticky-h: 80px;

  /* Reserved blocks (CLS) */
  --rl-benefit-h: 86px;
  --rl-product-img-ratio: 358 / 420;

  /* Product card rhythm (equal title / price rows across grids) */
  --rl-card-title-lines: 2;
  --rl-card-title-lh: 1.3;
  --rl-card-title-size: 13px;
  --rl-card-title-min-h: calc(var(--rl-card-title-size) * var(--rl-card-title-lh) * var(--rl-card-title-lines));
  --rl-card-price-min-h: 22px;
  --rl-card-pad: var(--rl-space-3);

  /* Focus rings — keyboard / :focus-visible (never remove outline without these) */
  --rl-focus-ring: 0 0 0 2px var(--rl-white), 0 0 0 4px var(--rl-black);
  --rl-focus-ring-inset: inset 0 0 0 2px var(--rl-black);
  --rl-focus-ring-brand: 0 0 0 2px var(--rl-white), 0 0 0 4px var(--rl-red);
  --rl-focus-ring-on-dark: 0 0 0 2px var(--rl-black), 0 0 0 4px var(--rl-white);

  /* Easing */
  --rl-ease: cubic-bezier(.22, .68, 0, 1.2);
  --rl-ease-out: cubic-bezier(.16, 1, .3, 1);

  /* Overlay — corporate identity (lightbox, menu, search) */
  --rl-overlay-bg: rgba(255, 255, 255, .72);
  --rl-overlay-blur: blur(10px);

  /* Border radius */
  --rl-radius: 2px;

  /* Carousel (mobile rails) */
  --rl-carousel-gap: 12px;
}

/* Unified side padding from tablet down — home / listing / detail */
@media (max-width: 992px) {
  :root {
    --rl-gap: 20px;
    --rl-carousel-gap: 12px;
    --rl-header-h: 56px;
  }
}

@media (max-width: 768px) {
  :root {
    --rl-gap: 12px;
    --rl-carousel-gap: 10px;
  }
}


/* ═══════════════════════════════════════════
   2. RESET
   ═══════════════════════════════════════════ */

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

html {
  background: var(--rl-white);
  overflow-x: clip;
}

body {
  font-family: var(--rl-body);
  color: var(--rl-black);
  background: var(--rl-white);
  overflow-x: clip;
}

/* Hide chrome we used to remove in JS — avoids DOM thrash / CLS */
.admin-bar,
.skip-link {
  display: none !important;
}

img {
  display: block;
  max-width: 100%;
}

a {
  color: inherit;
  text-decoration: none;
}

ul,
ol {
  list-style: none;
}

fieldset {
  border: none;
}

.no-display,
#customerLogin .sr-only,
form .sr-only,
.rf-newsletter .sr-only,
h1.sr-only,
.navigationActions {
  display: none !important;
}



@media (prefers-reduced-motion: reduce) {

  *,
  *::before,
  *::after {
    animation-duration: .001ms !important;
    transition-duration: .001ms !important;
  }
}


/* ═══════════════════════════════════════════
   2c. INTERACTIVE STATES  (hover / focus-visible / active)
   Shared language for header icons, CTAs, filters, ATC.
   Mouse: :hover · Keyboard: :focus-visible · Press: :active
   ═══════════════════════════════════════════ */

/* Header icon buttons — unified hit area + states */
#header .search .btn-default,
#header .navigation-buttons a,
#header .navigation-buttons button,
#header .rl-user-btn,
#header .rl-hamburger,
#header .navigation-buttons #dkLabFavHeaderIconBtn {
  outline: none;
  -webkit-tap-highlight-color: transparent;
}

#header .search .btn-default:hover,
#header .navigation-buttons a:hover,
#header .navigation-buttons button:hover,
#header .rl-user-btn:hover,
#header .rl-hamburger:hover,
#header .navigation-buttons #dkLabFavHeaderIconBtn:hover {
  background: var(--rl-gray-lt);
}

#header .search .btn-default:focus-visible,
#header .navigation-buttons a:focus-visible,
#header .navigation-buttons button:focus-visible,
#header .rl-user-btn:focus-visible,
#header .rl-hamburger:focus-visible,
#header .navigation-buttons #dkLabFavHeaderIconBtn:focus-visible {
  background: var(--rl-gray-lt);
  box-shadow: none;
}

#header .search .btn-default:active,
#header .navigation-buttons a:active,
#header .navigation-buttons button:active,
#header .rl-user-btn:active,
#header .rl-hamburger:active,
#header .navigation-buttons #dkLabFavHeaderIconBtn:active {
  background: #ebebeb;
  transform: scale(.96);
}

@media (prefers-reduced-motion: reduce) {

  #header .search .btn-default:active,
  #header .navigation-buttons a:active,
  #header .navigation-buttons button:active,
  #header .rl-user-btn:active,
  #header .rl-hamburger:active,
  #header .navigation-buttons #dkLabFavHeaderIconBtn:active {
    transform: none;
  }
}

/* Primary solid CTAs (black) */
.rl-img-wrap .btn-cart:focus-visible,
.products-block .rl-img-wrap .btn-cart:focus-visible,
#products .rl-img-wrap .btn-cart:focus-visible,
body.type-detail .add-to-cart-button:focus-visible,
body.type-product .add-to-cart-button:focus-visible,
.rl-pd-sticky__atc:focus-visible,
#login .btn-primary:focus-visible,
#cart-widget .btn-conversion:focus-visible {
  outline: none;
  box-shadow: var(--rl-focus-ring-on-dark);
}

.rl-img-wrap .btn-cart:active,
.products-block .rl-img-wrap .btn-cart:active,
#products .rl-img-wrap .btn-cart:active,
body.type-detail .add-to-cart-button:active,
body.type-product .add-to-cart-button:active,
.rl-pd-sticky__atc:active,
#login .btn-primary:active,
#cart-widget .btn-conversion:active {
  background: #000 !important;
}

/* Brand / red CTAs */
body.type-category .rl-active-filters__chip:active {
  background: #8f1414;
}

.rf-newsletter-form button:focus-visible,
#formNewsletterWidget button:focus-visible {
  outline: none;
  box-shadow: var(--rl-focus-ring-brand);
}

.rf-newsletter-form button:active,
#formNewsletterWidget button:active {
  opacity: .85;
}


/* ═══════════════════════════════════════════
   2b. BREADCRUMBS — mobile back pattern
   Desktop: classic trail. Mobile: ← parent + current title
   ═══════════════════════════════════════════ */

@media (max-width: 768px) {
  .breadcrumbs.rl-bc {
    display: flex !important;
    flex-direction: column;
    align-items: flex-start;
    flex-wrap: nowrap;
    gap: 4px;
    width: 100%;
    max-width: 100%;
    margin: 0;
    padding: 0;
    box-sizing: border-box;
  }

  .breadcrumbs.rl-bc>.rl-bc-hide {
    display: none !important;
  }

  .breadcrumbs.rl-bc>.rl-bc-back,
  .breadcrumbs.rl-bc>.rl-bc-current {
    display: block !important;
    width: 100%;
    max-width: 100%;
    margin: 0;
    padding: 0;
  }

  .breadcrumbs.rl-bc .navigation-bullet {
    display: none !important;
  }

  /* ← Parent category / previous page */
  .breadcrumbs.rl-bc>.rl-bc-back>a {
    display: inline-flex !important;
    align-items: center;
    gap: 8px;
    max-width: 100%;
    font-family: var(--rl-body);
    font-size: 13px;
    font-weight: 500;
    line-height: 1.35;
    color: #888 !important;
    text-decoration: none !important;
    background: none !important;
    width: auto !important;
    height: auto !important;
    text-indent: 0 !important;
  }

  .breadcrumbs.rl-bc>.rl-bc-back>a::before {
    content: '';
    flex: 0 0 8px;
    width: auto !important;
    height: 9px;
    background: url('../images/icon-arrow-left.svg') center / contain no-repeat;
    opacity: .7;
  }

  .breadcrumbs.rl-bc>.rl-bc-back>a:hover,
  .breadcrumbs.rl-bc>.rl-bc-back>a:focus-visible {
    color: #111 !important;
    outline: none;
  }

  .breadcrumbs.rl-bc>.rl-bc-back>a:hover::before,
  .breadcrumbs.rl-bc>.rl-bc-back>a:focus-visible::before {
    opacity: 1;
  }

  /* Home as back — reveal Domů text */
  .breadcrumbs.rl-bc>.rl-bc-back .navigation-home-icon .sr-only {
    position: static !important;
    width: auto !important;
    height: auto !important;
    clip: auto !important;
    clip-path: none !important;
    overflow: visible !important;
    white-space: nowrap !important;
  }

  /* Current page / product name */
  .breadcrumbs.rl-bc>.rl-bc-current {
    font-family: var(--rl-display);
    font-size: 13px;
    font-weight: 600;
    line-height: 1.35;
    color: var(--rl-black);
  }

  .breadcrumbs.rl-bc>.rl-bc-current [itemprop="name"],
  .breadcrumbs.rl-bc>.rl-bc-current span[data-title] {
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
    overflow: hidden;
    color: inherit !important;
    font-weight: inherit;
  }

  /* Detail: current stays muted red accent like before, but quieter */
  body.type-detail .breadcrumbs.rl-bc>.rl-bc-current [itemprop="name"],
  body.type-detail .breadcrumbs.rl-bc>.rl-bc-current span[data-title],
  body.type-product .breadcrumbs.rl-bc>.rl-bc-current [itemprop="name"],
  body.type-product .breadcrumbs.rl-bc>.rl-bc-current span[data-title] {
    color: var(--rl-red) !important;
    font-weight: 600;
  }

  /* Category/search hero already has H1 — back-only crumbs */
  .rl-category-hero .breadcrumbs.rl-bc.rl-bc--back-only {
    margin-bottom: 10px;
  }
}


/* ═══════════════════════════════════════════
   3. ANNOUNCEMENT BAR  (.site-msg.information)
   Figma: AnnouncementBar — h 36.5 px, bg #111
   ═══════════════════════════════════════════ */

.site-msg.information {
  background: var(--rl-black);
  color: var(--rl-white);
  min-height: var(--rl-announce-h);
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--rl-display);
  font-weight: 500;
  font-size: 13px;
  letter-spacing: .025em;
  text-align: center;
  padding: 4px var(--rl-gap);
}

/* No announcement bar → popups sit under header only */
body:not(:has(.site-msg.information)) {
  --rl-announce-h: 0px;
}

.site-msg.information .site-msg-close {
  display: none;
}

.site-msg.information a {
  color: var(--rl-white);
  text-decoration: underline;
}


/* ═══════════════════════════════════════════
   4. TOP NAVIGATION BAR  (.top-navigation-bar)
   Not in Figma — hidden
   ═══════════════════════════════════════════ */

.top-navigation-bar {
  display: none !important;
}


/* ═══════════════════════════════════════════
   5. HEADER  (#header)
   Figma 195:4280 — 64 px row, white, 1 px border-bottom
   Layout: [logo order:1] [nav order:2 flex:1 centered] [user:9 search:10 cart:11]
   ═══════════════════════════════════════════ */

#header {
  position: sticky !important;
  top: 0 !important;
  z-index: 500;
  background: #ffffff !important;
  /* border-bottom: 1px solid var(--rl-border) !important; */
  overflow: visible !important;
  width: 100%;
}

/* ── Container row ── */
#header .container.navigation-wrapper {
  display: flex !important;
  flex-direction: row !important;
  align-items: center !important;
  justify-content: space-between !important;
  width: 100% !important;
  max-width: var(--rl-max) !important;
  padding-left: var(--rl-gap) !important;
  padding-right: var(--rl-gap) !important;
  margin: 0 auto !important;
  height: var(--rl-header-h) !important;
  gap: 16px !important;
  overflow: visible !important;
  position: static !important;
  box-sizing: border-box !important;
}

/* Lift header-top children into the flex row */
#header #navigation {
  order: 2 !important;
}

/* Lift header-top children into the flex row — jedna linie ikon vpravo */
#header .header-top {
  display: inline-flex !important;
  flex-direction: row !important;
  align-items: center !important;
  justify-content: flex-end !important;
  align-self: center !important;
  order: 3 !important;
  gap: 2px;
  height: var(--rl-icon-btn);
  min-height: var(--rl-icon-btn);
  margin: 0 !important;
  padding: 0 !important;
  float: none !important;
  line-height: 0;
  /* CLS slots: burger (mobile) + user — collapsed to 0 once JS injects real controls */
  --rl-slot-burger: 0px;
  --rl-slot-user: 0px;
}

#header .header-top:not(:has(.rl-user-btn)) {
  --rl-slot-user: var(--rl-icon-btn);
}

@media (max-width: 992px) {
  #header .header-top:not(:has(.rl-hamburger)) {
    --rl-slot-burger: var(--rl-icon-btn);
  }
}

#header .header-top::before {
  content: '';
  order: 0;
  flex: 0 0 var(--rl-slot-burger);
  width: var(--rl-slot-burger);
  height: var(--rl-icon-btn);
  pointer-events: none;
}

#header .header-top::after {
  content: '';
  order: 9;
  flex: 0 0 var(--rl-slot-user);
  width: var(--rl-slot-user);
  height: var(--rl-icon-btn);
  pointer-events: none;
}

/* ── LOGO  (order 1 — far left) ── */
#header .site-name-wrapper {
  order: 1 !important;
  flex-shrink: 0 !important;
  flex-grow: 0 !important;
  line-height: 0;
  align-self: center !important;
}

#header .site-name a {
  display: flex;
  align-items: center;
}

#header .site-name img {
  width: 140px;
  height: auto;
  display: block;
}

/* ── SEARCH  (order 10) ── */
#header .search {
  order: 10 !important;
  flex-shrink: 0 !important;
  flex-grow: 0 !important;
  display: flex !important;
  align-items: center !important;
  align-self: center !important;
  height: 38px;
  margin: 0 !important;
  padding: 0 !important;
  float: none !important;
}

#header .search-form {
  display: flex !important;
  align-items: center !important;
  margin: 0 !important;
  height: 38px;
}

#header .search fieldset {
  border: none;
  margin: 0 !important;
  padding: 0 !important;
  display: flex !important;
  align-items: center !important;
  height: 38px;
  min-width: 0;
}

#header .search-whisperer {
  display: none;
}

#header .search .query-input {
  /* Header search is icon-only — overlay handles typing */
  position: absolute !important;
  width: 1px !important;
  height: 1px !important;
  padding: 0 !important;
  margin: -1px !important;
  overflow: hidden !important;
  clip: rect(0, 0, 0, 0) !important;
  border: 0 !important;
  opacity: 0 !important;
}

#header .search.open .query-input {
  /* legacy — no expand */
}

#header .search .btn-default {
  -webkit-appearance: none;
  appearance: none;
  background: none;
  border: none;
  cursor: pointer;
  width: var(--rl-icon-btn);
  height: var(--rl-icon-btn);
  min-width: var(--rl-icon-btn);
  min-height: var(--rl-icon-btn);
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  border-radius: 50%;
  position: relative;
  transition: background .2s, box-shadow .2s, transform .15s;
  font-size: 0;
  padding: 0;
  flex-shrink: 0;
  margin: 0 !important;
  line-height: 0;
}

#header .search .btn-default:hover {
  background: var(--rl-gray-lt);
}

#header .search .btn-default::before {
  content: '';
  display: block;
  width: 23px;
  height: 23px;
  flex-shrink: 0;
  background: url('../images/icon-search.svg') center/contain no-repeat;
}

/* ── SEARCH OVERLAY ── */
html.rl-search-open,
html.rl-search-open body {
  overflow: hidden;
}

.rl-search {
  position: fixed;
  inset: 0;
  z-index: 900;
  display: flex;
  justify-content: flex-end;
  pointer-events: none;
  visibility: hidden;
}

.rl-search.is-open {
  pointer-events: auto;
  visibility: visible;
}

.rl-search__backdrop {
  position: absolute;
  inset: 0;
  background: var(--rl-overlay-bg);
  backdrop-filter: var(--rl-overlay-blur);
  -webkit-backdrop-filter: var(--rl-overlay-blur);
  opacity: 0;
  transition: opacity .25s var(--rl-ease-out);
}

.rl-search.is-open .rl-search__backdrop {
  opacity: 1;
}

.rl-search__panel {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  width: min(560px, 100%);
  height: 100%;
  background: #fff;
  box-shadow: -12px 0 40px rgba(0, 0, 0, .12);
  transform: translateX(100%);
  transition: transform .28s var(--rl-ease-out);
  padding: clamp(20px, 3vw, 36px);
  box-sizing: border-box;
}

.rl-search.is-open .rl-search__panel {
  transform: translateX(0);
}

.rl-search__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  margin-bottom: 20px;
  flex-shrink: 0;
}

.rl-search__title {
  margin: 0;
  font-family: var(--rl-display);
  font-weight: 700;
  font-size: clamp(28px, 3vw, 36px);
  line-height: 1.1;
  color: var(--rl-black);
}

.rl-search__close {
  width: 40px;
  height: 40px;
  border: 1px solid var(--rl-border);
  background: #fff url('../images/icon-filter-close.svg') center / 12px 12px no-repeat;
  font-size: 0;
  color: transparent;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  outline: none;
  transition: border-color .15s ease, background-color .15s ease, box-shadow .15s ease;
  -webkit-tap-highlight-color: transparent;
}

.rl-search__close:hover {
  border-color: var(--rl-black);
}

.rl-search__close:focus-visible {
  border-color: var(--rl-black);
  box-shadow: var(--rl-focus-ring);
}

.rl-search__close:active {
  background-color: var(--rl-gray-lt);
}

.rl-search__form {
  position: relative;
  display: flex;
  align-items: center;
  margin-bottom: 28px;
  flex-shrink: 0;
}

.rl-search__input {
  width: 100%;
  height: 52px;
  border: 1px solid var(--rl-border);
  border-radius: 999px;
  padding: 0 52px 0 20px;
  font-family: var(--rl-body);
  font-size: 15px;
  color: var(--rl-black);
  outline: none;
  background: #fff;
  box-sizing: border-box;
}

.rl-search__input:focus,
.rl-search__input:focus-visible {
  border-color: var(--rl-black);
  box-shadow: var(--rl-focus-ring-inset);
}

.rl-search__submit {
  position: absolute;
  right: 6px;
  top: 50%;
  transform: translateY(-50%);
  width: 40px;
  height: 40px;
  border: none;
  border-radius: 50%;
  background: transparent url('../images/icon-search.svg') center / 18px no-repeat;
  cursor: pointer;
  font-size: 0;
}

.rl-search__body {
  flex: 1;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  padding-right: 4px;
}

.rl-search__section {
  margin-bottom: 32px;
}

.rl-search__section-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 14px;
}

.rl-search__section-title {
  margin: 0;
  font-family: var(--rl-display);
  font-weight: 600;
  font-size: 12px;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: #999;
}

.rl-search__clear-recent {
  border: none;
  background: none;
  padding: 0;
  font-family: var(--rl-body);
  font-size: 13px;
  color: #999;
  cursor: pointer;
  text-decoration: underline;
  text-underline-offset: 2px;
}

.rl-search__grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 20px 16px;
}

.rl-search__grid .product {
  width: 100% !important;
  float: none !important;
  margin: 0 !important;
}

.rl-search__grid .p {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.rl-search__grid .rl-img-wrap,
.rl-search__grid a.image {
  display: block;
  width: 100%;
  aspect-ratio: 1;
  background: transparent;
  overflow: hidden;
}

.rl-search__grid a.image img,
.rl-search__grid .rl-img-wrap img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  padding: 12px;
  box-sizing: border-box;
  transform: none !important;
}

.rl-search__grid .p-in,
.rl-search__grid .p-in-in,
.rl-search__grid .p-bottom {
  display: block;
  padding: 0;
  margin: 0;
}

.rl-search__grid .p-in {
  padding: 12px;
  box-sizing: border-box;
}

.rl-search__grid .name {
  display: block;
  font-family: var(--rl-display);
  font-weight: 600;
  font-size: 14px;
  line-height: 1.3;
  color: var(--rl-black);
  text-decoration: none;
}

.rl-search__grid .name span {
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.rl-search__grid .price-final,
.rl-search__grid .price-final strong {
  font-family: var(--rl-display);
  font-weight: 700;
  font-size: 15px;
  color: var(--rl-black);
}

.rl-search__grid .price-standard,
.rl-search__grid .price .price-standard {
  color: #999;
  text-decoration: line-through;
  font-size: 13px;
  margin-left: 6px;
}

.rl-search__grid .p-tools,
.rl-search__grid .availability,
.rl-search__grid .ratings-wrapper,
.rl-search__grid .flags,
.rl-search__grid .rl-price-row .availability {
  display: none !important;
}

/* Hide homepage “Hledání” product rail — lives in overlay */
.homepage-products-heading-10,
#products-10.homepage-products-10,
html.rl-has-search-overlay .homepage-products-heading-10,
html.rl-has-search-overlay #products-10 {
  display: none !important;
}

@media (max-width: 640px) {
  .rl-search {
    justify-content: stretch;
  }

  .rl-search__panel {
    width: 100%;
    padding: 18px 16px 24px;
  }

  .rl-search__grid {
    gap: 16px 12px;
  }

  .rl-search__title {
    font-size: 26px;
  }
}

/* ── NAVIGATION BUTTONS — cart (order 11) ── */
#header .navigation-buttons {
  order: 11 !important;
  flex-shrink: 0 !important;
  flex-grow: 0 !important;
  display: flex !important;
  align-items: center !important;
  align-self: center !important;
  gap: 2px;
  height: 38px;
  margin: 0 !important;
  padding: 0 !important;
  float: none !important;
  line-height: 0;
}

/* Shared button shape */
#header .navigation-buttons a,
#header .navigation-buttons button {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: var(--rl-icon-btn);
  height: var(--rl-icon-btn);
  min-width: var(--rl-icon-btn);
  min-height: var(--rl-icon-btn);
  border-radius: 50%;
  border: none;
  background: none;
  cursor: pointer;
  position: relative;
  transition: background .2s, box-shadow .2s, transform .15s;
  flex-shrink: 0;
  text-decoration: none;
  font-size: 0;
  padding: 0;
  margin: 0 !important;
  line-height: 0;
  vertical-align: middle;
}

#header .navigation-buttons a:hover,
#header .navigation-buttons button:hover {
  background: var(--rl-gray-lt);
}

/* Cart icon */
#header .navigation-buttons a.cart-count::before {
  content: '';
  display: block;
  width: 24px;
  height: 24px;
  flex-shrink: 0;
  background: url('../images/icon-cart.svg') center/contain no-repeat;
}

/* Cart badge (<i> count) */
#header .navigation-buttons a.cart-count i {
  position: absolute;
  top: 3px;
  right: 2px;
  min-width: 14px;
  height: 14px;
  padding: 0 3px;
  background: var(--rl-red);
  color: var(--rl-white);
  font-family: var(--rl-display);
  font-style: normal;
  font-size: 9px;
  font-weight: 700;
  border-radius: var(--rl-radius);
  display: flex;
  align-items: center;
  justify-content: center;
  line-height: 1;
  pointer-events: none;
}

/* Hide legacy cart elements */
#header .cart-price {
  display: none !important;
}

#header .cart-count-badge,
#header .navigation-buttons .count-wrapper {
  display: none !important;
}

/* ── dkLab Favourites — header icon (unify with cart / search) ── */
#header .navigation-buttons > #dkLabFavHeaderWrapper,
body.template-11 #header .navigation-buttons > #dkLabFavHeaderWrapper,
body.template-11.mobile-header-version-1 #header .navigation-buttons > #dkLabFavHeaderWrapper {
  position: relative !important;
  top: auto !important;
  right: auto !important;
  left: auto !important;
  bottom: auto !important;
  transform: none !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: 38px !important;
  height: 38px !important;
  margin: 0 !important;
  padding: 0 !important;
  flex: 0 0 38px !important;
  float: none !important;
  vertical-align: middle;
  line-height: 0;
  order: -1; /* before cart inside .navigation-buttons */
}

#header .navigation-buttons #dkLabFavHeaderIconBtn,
body.template-11 #header .navigation-buttons #dkLabFavHeaderIconBtn {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: 38px !important;
  height: 38px !important;
  margin: 0 !important;
  padding: 0 !important;
  top: 0 !important;
  color: #111 !important;
  border-radius: 50%;
  font-size: 0 !important;
  line-height: 0 !important;
  text-decoration: none !important;
  transition: background .2s;
}

#header .navigation-buttons #dkLabFavHeaderIconBtn:hover {
  background: var(--rl-gray-lt);
}

/* Replace pink icon-font glyph with our black outline heart */
#header .navigation-buttons #dkLabFavHeaderIconBtn::before,
body.template-11 #header .navigation-buttons #dkLabFavHeaderIconBtn::before,
body.template-11.mobile-header-version-1 #header .navigation-buttons #dkLabFavHeaderIconBtn::before {
  content: '' !important;
  font-size: 0 !important;
  font-family: none !important;
  margin: 0 !important;
  padding: 0 !important;
  width: 24px !important;
  height: 24px !important;
  display: block !important;
  position: static !important;
  top: 0 !important;
  background: url('../images/icon-favorites.svg') center / contain no-repeat !important;
  color: transparent !important;
  speak: never;
}

#header .navigation-buttons #dkLabFavHeaderIconBtn em {
  font-style: normal !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  min-width: 14px !important;
  width: auto !important;
  height: 14px !important;
  padding: 0 3px !important;
  background: var(--rl-red) !important;
  color: #fff !important;
  font-family: var(--rl-display) !important;
  font-size: 9px !important;
  font-weight: 700 !important;
  border-radius: var(--rl-radius) !important;
  position: absolute !important;
  top: 3px !important;
  right: 2px !important;
  line-height: 1 !important;
  pointer-events: none;
}

@media (max-width: 768px) {
  body.template-11 #dkLabFavHeaderWrapper,
  body.template-11.mobile-header-version-1 #dkLabFavHeaderWrapper,
  body.template-11:not(.mobile-header-version-0) #dkLabFavHeaderWrapper,
  .scrolled-down body.template-11 #dkLabFavHeaderWrapper {
    position: relative !important;
    top: auto !important;
    right: auto !important;
    left: auto !important;
    transform: none !important;
  }
}

/* ── USER icon  (order 9 — injected by JS as .rl-user-btn) ── */
.rl-user-btn {
  order: 9 !important;
  flex-shrink: 0 !important;
  flex-grow: 0 !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  align-self: center !important;
  width: var(--rl-icon-btn);
  height: var(--rl-icon-btn);
  min-width: var(--rl-icon-btn);
  min-height: var(--rl-icon-btn);
  border-radius: 50%;
  border: none;
  background: none;
  cursor: pointer;
  position: relative;
  transition: background .2s, box-shadow .2s, transform .15s;
  font-size: 0;
  padding: 0;
  margin: 0 !important;
  line-height: 0;
  vertical-align: middle;
}

.rl-user-btn:hover {
  background: var(--rl-gray-lt);
}

.rl-user-btn svg {
  display: block;
  flex-shrink: 0;
  width: 25px;
  height: 25px;
}

/* ── Hamburger: only visible at ≤992 px (restored in responsive block) ── */
.rl-hamburger {
  display: none !important;
}

/* ── .menu-helper: always hidden on desktop ── */
.menu-helper {
  display: none !important;
}

/* Mobile-only: never occupy layout / extend #header on desktop */
button.rl-menu-backdrop,
.rl-menu-backdrop {
  display: none !important;
  position: fixed !important;
  width: 0 !important;
  height: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  border: 0 !important;
  overflow: hidden !important;
  pointer-events: none !important;
  visibility: hidden !important;
}

/* ── OVERLAY backdrop when mega-menu is open ── */
#rl-backdrop {
  display: none;
  position: fixed;
  inset: 0;
  top: var(--rl-popup-top);
  /* below announcement + header */
  background: var(--rl-overlay-bg);
  backdrop-filter: var(--rl-overlay-blur);
  -webkit-backdrop-filter: var(--rl-overlay-blur);
  z-index: 499;
  pointer-events: none;
}

#rl-backdrop.visible {
  display: block;
  animation: rl-fade-in .2s ease;
}

@keyframes rl-fade-in {
  from {
    opacity: 0;
  }

  to {
    opacity: 1;
  }
}


/* ═══════════════════════════════════════════
   5b. HEADER POPUPS  (#login · #cart-widget)
   Fixed dropdowns that slide in below the header icons.
   Shoptet toggles visibility via aria-hidden attribute.
   ═══════════════════════════════════════════ */

/* Also keep shared popup shell flatter for cart */
#login,
#cart-widget {
  position: fixed !important;
  top: var(--rl-popup-top) !important;
  right: var(--rl-gap) !important;
  z-index: 800 !important;
  background: var(--rl-white);
  border: 1px solid #e8e8e6;
  border-radius: 0;
  box-shadow: none;
  overflow: hidden;
  margin-top: 8px;
}

/* Hidden by default — shown via .rl-popup-open (JS) or Shoptet aria-hidden toggle */
#login {
  display: none !important;
}

#login.rl-popup-open,
#login[aria-hidden="false"] {
  display: block !important;
  animation: rl-popup-in .18s ease;
}

/* Cart widget — Shoptet toggles aria-hidden */
#cart-widget[aria-hidden="true"] {
  display: none !important;
}

#cart-widget[aria-hidden="false"] {
  display: block !important;
  animation: rl-popup-in .18s ease;
}

@keyframes rl-popup-in {
  from {
    opacity: 0;
    transform: translateY(-6px);
  }

  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* ── LOGIN POPUP ── */
#login {
  width: 360px;
}

#login .popup-widget-inner {
  padding: 32px 28px 28px;
}

#login h2 {
  font-family: var(--rl-display);
  font-size: 18px;
  font-weight: 700;
  color: var(--rl-black);
  margin: 0 0 24px;
  letter-spacing: -0.01em;
}

#login .form-group {
  margin-bottom: 14px;
}

#login label {
  display: block;
  font-family: var(--rl-body);
  font-size: 12px;
  font-weight: 600;
  color: #666;
  text-transform: uppercase;
  letter-spacing: .06em;
  margin-bottom: 6px;
}

#login .form-control {
  width: 100%;
  padding: 10px 14px;
  font-family: var(--rl-body);
  font-size: 14px;
  color: var(--rl-black);
  background: #f9f9f9;
  border: 1px solid var(--rl-border);
  border-radius: var(--rl-radius);
  outline: none;
  transition: border-color .2s, background .2s;
  box-sizing: border-box;
}

#login .form-control:focus {
  border-color: var(--rl-black);
  background: var(--rl-white);
}

#login .submit-wrapper {
  margin-top: 20px;
  margin-bottom: 0;
}

#login .btn-primary {
  display: block;
  width: 100%;
  padding: 12px 20px;
  background: var(--rl-black);
  color: var(--rl-white);
  font-family: var(--rl-display);
  font-size: 14px;
  font-weight: 600;
  letter-spacing: .04em;
  text-align: center;
  border: none;
  border-radius: var(--rl-radius);
  cursor: pointer;
  transition: background .2s, box-shadow .15s;
  outline: none;
  -webkit-tap-highlight-color: transparent;
}

#login .btn-primary:hover {
  background: #333;
}

#login .alternative-links {
  display: flex;
  justify-content: space-between;
  margin-top: 14px;
  padding-top: 14px;
  border-top: 1px solid var(--rl-border);
  font-family: var(--rl-body);
  font-size: 12px;
}

#login .alternative-links a {
  color: #666;
  text-decoration: none;
  transition: color .2s;
  outline: none;
  border-radius: var(--rl-radius);
}

#login .alternative-links a:hover,
#login .alternative-links a:focus-visible {
  color: var(--rl-black);
}

#login .alternative-links a:focus-visible {
  box-shadow: var(--rl-focus-ring);
}

#login .alternative-links a:active {
  opacity: .75;
}

/* Smart label — keep label visible above input */
#login .smart-label-wrapper {
  position: relative;
}

/* ── CART WIDGET POPUP — premium flat ── */
#cart-widget {
  width: 400px;
  max-height: calc(100vh - var(--rl-popup-top) - 32px);
  display: flex;
  flex-direction: column;
  overflow: hidden;
  border-radius: 0;
  box-shadow: none;
  border: 1px solid #e8e8e6;
  margin-top: 8px;
}

#cart-widget .cart-widget-inner {
  display: flex;
  flex-direction: column;
  height: 100%;
  overflow: hidden;
  background: #fff;
}

#cart-widget .cart-widget-products {
  overflow-y: auto;
  flex: 1;
  padding: 0;
}

#cart-widget .cart-widget-products::-webkit-scrollbar {
  width: 3px;
}

#cart-widget .cart-widget-products::-webkit-scrollbar-thumb {
  background: #ddd;
}

#cart-widget .cart-widget-products-inner {
  display: flex;
  flex-direction: column;
}

/* Product row: image · qty · name/price · remove */
#cart-widget .cart-widget-product {
  display: grid;
  grid-template-columns: 72px 44px minmax(0, 1fr) 24px;
  grid-template-areas: "img qty name del";
  align-items: center;
  gap: 14px;
  padding: 20px;
  border-bottom: 1px solid #eee;
}

#cart-widget .cart-widget-product:last-child {
  border-bottom: none;
  display: flex;
}

#cart-widget .cart-widget-product-image {
  grid-area: img;
}

#cart-widget .cart-widget-product-image a {
  display: block;
  position: relative;
  width: 72px;
  height: 72px;
  border-radius: 0;
  overflow: hidden;
  border: none;
}

#cart-widget .cart-widget-product-image a::before {
  content: '';
  position: absolute;
  inset: 0;
  background: var(--rl-tint);
  opacity: 0.05;
  pointer-events: none;
  z-index: 2;
}

#cart-widget .cart-widget-product-image img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  padding: 6px;
  position: relative;
  z-index: 1;
}

/* Qty — number only (no +/-) */
#cart-widget .cart-widget-product-amount {
  grid-area: qty;
}

#cart-widget .quantity-form {
  margin: 0;
}

#cart-widget .quantity {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  border: 1px solid #e0e0de;
  background: #fff;
  box-sizing: border-box;
}

#cart-widget .quantity .increase,
#cart-widget .quantity .decrease,
#cart-widget .quantity .increase-tooltip,
#cart-widget .quantity .decrease-tooltip {
  display: none !important;
}

#cart-widget .quantity>label {
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0;
  width: 100%;
  height: 100%;
}

#cart-widget .quantity input.amount {
  width: 100%;
  height: 100%;
  text-align: center;
  font-family: var(--rl-display);
  font-size: 14px;
  font-weight: 600;
  color: #111;
  border: none;
  border-radius: 0;
  padding: 0;
  background: transparent;
  -moz-appearance: textfield;
  pointer-events: none;
  cursor: default;
}

#cart-widget .quantity input.amount::-webkit-outer-spin-button,
#cart-widget .quantity input.amount::-webkit-inner-spin-button {
  -webkit-appearance: none;
}

#cart-widget .cart-widget-product-unit {
  display: none !important;
}

/* Name + price */
#cart-widget .cart-widget-product-name {
  grid-area: name;
  min-width: 0;
}

#cart-widget .cart-widget-product-name a {
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  font-family: var(--rl-body);
  font-size: 13px;
  font-weight: 500;
  color: #111;
  text-decoration: none;
  line-height: 1.35;
  margin-bottom: 6px;
  transition: opacity .15s;
}

#cart-widget .cart-widget-product-name a:hover {
  opacity: .65;
}

#cart-widget .cart-widget-product-name span {
  display: block;
  font-family: var(--rl-display);
  font-size: 15px;
  font-weight: 700;
  color: #111;
}

/* Remove */
#cart-widget .cart-widget-product-delete {
  grid-area: del;
  align-self: start;
  margin-top: -2px;
}

#cart-widget .remove-item {
  width: 24px;
  height: 24px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: none;
  border: none;
  cursor: pointer;
  border-radius: 0;
  transition: opacity .15s;
  position: relative;
  padding: 0;
}

#cart-widget .remove-item:hover {
  background: none;
  opacity: .45;
}

#cart-widget .remove-item::before {
  content: '×';
  font-size: 22px;
  font-weight: 300;
  color: #111;
  line-height: 1;
}

#cart-widget .sr-only {
  position: absolute !important;
  width: 1px !important;
  height: 1px !important;
  padding: 0 !important;
  margin: -1px !important;
  overflow: hidden !important;
  clip: rect(0, 0, 0, 0) !important;
  border: 0 !important;
}

/* Free shipping — compact meter (matches cart page) */
#cart-widget .cart-free-shipping {
  margin: 0;
  padding: 16px 20px;
  border-top: 1px solid #eee;
  background: #f7f7f5;
  font-family: var(--rl-body);
  font-size: 13px;
  color: #111;
  text-align: left;
  line-height: 1.4;
}

#cart-widget .cart-free-shipping.rl-ship-free {
  background: #f3faf3;
}

/* Hide native Shoptet bars — we render .rl-cw-ship__bar */
#cart-widget .cart-free-shipping>.price-range,
#cart-widget .cart-free-shipping>.rl-free-ship-bar,
#cart-widget .cart-free-shipping>.free-shipping-bar {
  display: none !important;
}

#cart-widget .rl-cw-ship {
  display: flex;
  flex-direction: column;
  gap: 10px;
  width: 100%;
}

#cart-widget .rl-cw-ship__row {
  display: flex;
  align-items: flex-start;
  gap: 10px;
}

#cart-widget .rl-cw-ship__icon {
  display: block;
  width: 20px;
  height: 20px;
  flex-shrink: 0;
  margin-top: 0px;
  background: url('/user/documents/upload/assets/images/doprava-zdarma.svg') center / contain no-repeat;
}

#cart-widget .rl-cw-ship__text {
  margin: 0;
  flex: 1;
  min-width: 0;
  font-family: var(--rl-body);
  font-size: 13px;
  font-weight: 400;
  line-height: 1.4;
  color: #111;
}

#cart-widget .rl-cw-ship__text strong {
  font-family: var(--rl-display);
  font-weight: 700;
  color: #111;
}

#cart-widget .rl-cw-ship__bar {
  display: block;
  width: 100%;
  height: 5px;
  background: #e5e5e3;
  border-radius: 20px;
  overflow: hidden;
}

#cart-widget .rl-cw-ship__bar>i {
  display: block;
  height: 100%;
  background: var(--rl-red);
  border-radius: 20px;
}

#cart-widget .rl-cw-ship__bar--ok>i,
#cart-widget .rl-cw-ship--ok .rl-cw-ship__bar>i {
  background: var(--rl-checkout-ok, #22a722);
}

/* CTA */
#cart-widget .cart-widget-button {
  padding: 16px 20px 20px;
  border-top: 1px solid #eee;
  flex-shrink: 0;
}

#cart-widget .btn-conversion {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  padding: 15px 20px;
  background: #111;
  color: #fff !important;
  font-family: var(--rl-display);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: .12em;
  text-transform: uppercase;
  text-align: center;
  text-decoration: none;
  border-radius: 0;
  transition: background .15s;
  box-shadow: none;
  border: none;
  outline: none;
  -webkit-tap-highlight-color: transparent;
  cursor: pointer;
}

#cart-widget .btn-conversion:hover {
  background: #333;
}

/* Mobile: full-width popups */
@media (max-width: 768px) {

  #login,
  #cart-widget {
    right: 0 !important;
    left: 0 !important;
    width: 100% !important;
    margin-top: 0;
    border-radius: 0;
    border-left: none;
    border-right: none;
  }

  #header .site-name img {
    width: 100px;
    height: auto;
  }
}

/* Figma: nav links 15 px Outfit SemiBold in 65 px header */

nav#navigation {
  order: 2 !important;
  flex: 1 1 0 !important;
  display: flex !important;
  align-items: stretch !important;
  overflow: visible !important;
  position: static !important;
  min-width: 0;
}

.navigation-in.menu {
  flex: 1;
  display: flex !important;
  align-items: stretch !important;
  justify-content: center !important;
  width: 100%;
  overflow: visible;
}

#navigation .menu-level-1 {
  display: flex;
  align-items: stretch;
  margin: 0;
  padding: 0;
  list-style: none;
  overflow: visible;
}

#navigation .menu-level-1>li {
  position: static;
  display: flex;
  align-items: stretch;
}

#navigation .menu-level-1>li>a {
  display: flex;
  align-items: center;
  padding: 0 clamp(8px, .7vw, 13px);
  font-family: var(--rl-display);
  font-weight: 500;
  font-size: clamp(15px, .83vw, 19px);
  letter-spacing: 0.0175em;
  color: #444;
  white-space: nowrap;
  position: relative;
  transition: color .2s;
  outline: none;
}

#navigation .menu-level-1>li>a b {
  font-weight: 500 !important;
}

#navigation .menu-level-1>li>a:hover,
#navigation .menu-level-1>li>a:focus-visible {
  color: var(--rl-black);
}

#navigation .menu-level-1>li>a:focus-visible::after {
  transform: scaleX(1);
}

#navigation .menu-level-1>li>a:active {
  color: var(--rl-black);
  opacity: .75;
}

x b {
  font-weight: unset !important;
}

/* Active underline */
#navigation .menu-level-1>li>a::after {
  content: '';
  position: absolute;
  bottom: 0;
  left: clamp(8px, .7vw, 13px);
  right: clamp(8px, .7vw, 13px);
  height: 2px;
  background: var(--rl-black);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform .22s var(--rl-ease-out);
}

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

#navigation .menu-level-1>li>a .submenu-arrow {
  display: none;
}

/* ─────────────────────────────────────────
   MEGA MENU PANEL  (menu-level-2)
   Figma 183:285:
     Panel: full-viewport-width, bg white, border-top, shadow
     Inner: max-width 1440 px centered, padding 32 px 24 px
     Left grid: 4 × 2 tiles  193×193 px,  col-gap 20 px, row-gap 18 px
     Right promo (Figma 183:330): 2 × 252×464 banners, gap 16 px
   ───────────────────────────────────────── */

#navigation .menu-level-2 {
  /* Hidden state */
  visibility: hidden;
  opacity: 0;
  pointer-events: none;
  justify-content: center;
  transition:
    opacity .22s var(--rl-ease-out),
    transform .22s var(--rl-ease-out),
    visibility .22s;

  /* Positioning: break out of navigation-wrapper,
     anchor to #header (position: sticky, overflow: visible).
     Use left/right (not 100vw) to avoid horizontal scrollbar. */
  position: absolute;
  top: var(--rl-header-h);
  left: 0;
  right: 0;
  width: auto;
  transform: translateY(-8px);

  /* Visual */
  background: var(--rl-white);
  border-top: 1px solid var(--rl-border);
  border-bottom: 1px solid var(--rl-border);
  box-shadow: 0 24px 20px rgba(0, 0, 0, .18);
  z-index: 600;
  list-style: none;

  /* Inner centering using padding trick:
     at ≥1440 px viewport: horizontal padding = (100% - 1440) / 2 + gap
     at < 1440 px viewport: horizontal padding = --rl-gap            */
  padding-top: 32px;
  padding-bottom: 32px;
  padding-left: max(var(--rl-gap), calc((100% - 1440px) / 2 + var(--rl-gap)));
  padding-right: max(var(--rl-gap), calc((100% - 1440px) / 2 + var(--rl-gap)));

  /* 4-column tile grid (+ optional promo column) */
  display: grid;
  grid-template-columns: repeat(4, minmax(0, clamp(130px, 10vw, 193px)));
  gap: 18px 20px;
  justify-content: start;
  align-items: start;
}

/* With promo: tiles grid LEFT + banner RIGHT (outside tile grid) */
#navigation .menu-level-2.rl-has-promo {
  display: flex !important;
  flex-direction: row;
  flex-wrap: nowrap;
  align-items: stretch;
  justify-content: center;
  gap: 24px;
  grid-template-columns: none;
}

#navigation .menu-level-2.rl-has-promo > .rl-mega-tiles-wrap {
  flex: 0 1 auto;
  display: block;
  margin: 0;
  padding: 0 !important;
  list-style: none;
  position: relative;
  max-width: none;
}

#navigation .menu-level-2.rl-has-promo > .rl-mega-tiles-wrap::before {
  display: none !important;
}

#navigation .rl-mega-tiles {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, clamp(130px, 10vw, 193px)));
  gap: 18px 20px;
  list-style: none;
  margin: 0;
  padding: 0;
}

/* Show only via JS .hover — open delay lives in rolser-scripts.js */
#navigation .menu-level-1>li.ext.hover>.menu-level-2 {
  visibility: visible;
  opacity: 1;
  pointer-events: auto;
  transform: translateY(0);
}

/* Category tile — tint on whole li (not just image) */
#navigation .menu-level-2>li[class*="menu-item-"],
#navigation .rl-mega-tiles>li {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0;
  position: relative;
  padding: 0 12px 12px;
}

#navigation .menu-level-2>li[class*="menu-item-"]::before,
#navigation .rl-mega-tiles>li[class*="menu-item-"]::before {
  content: '';
  position: absolute;
  inset: 0;
  background: var(--rl-tint);
  opacity: 0.05;
  pointer-events: none;
  z-index: 3;
  border-radius: var(--rl-radius);
}

#navigation .menu-level-2>li[class*="menu-item-"]:hover::before,
#navigation .rl-mega-tiles>li[class*="menu-item-"]:hover::before {
  opacity: 0.08;
}

/* Promo / tiles wrap — no tile tint */
#navigation .menu-level-2>li.rl-mega-promo::before,
#navigation .menu-level-2>li.rl-mega-tiles-wrap::before {
  display: none !important;
}

/* Image-link tile */
#navigation .menu-level-2 li>a.menu-image {
  display: flex;
  align-items: center;
  justify-content: center;
  width: clamp(130px, 10vw, 193px);
  height: clamp(130px, 10vw, 193px);
  background: transparent;
  border-radius: var(--rl-radius);
  overflow: hidden;
  position: relative;
  z-index: 1;
}

#navigation .menu-level-2 li>a.menu-image::before {
  display: none !important;
}

#navigation .menu-level-2 li>a.menu-image img {
  max-width: 70%;
  max-height: 70%;
  width: auto;
  height: auto;
  object-fit: contain;
  position: relative;
  z-index: 1;
  transition: transform .3s var(--rl-ease-out);
}

#navigation .menu-level-2 li>a.menu-image:hover img {
  transform: scale(1.07);
}

/* Category label */
#navigation .menu-level-2 li>div {
  text-align: center;
  position: relative;
  z-index: 1;
}

#navigation .menu-level-2 li>div>a {
  font-family: var(--rl-display);
  font-weight: 500;
  font-size: 13px;
  line-height: 1.35;
  color: #333333;
  display: block;
  transition: color .18s;
}

#navigation .menu-level-2 li>div>a:hover {
  color: var(--rl-black);
}

#navigation .menu-level-2 li>div>a span {
  font-weight: 500;
}

#navigation .menu-level-2 li>div>a span.rl-subcat-name,
.menu-helper .menu-level-2>li>div>a span.rl-subcat-name {
  display: block;
  font-weight: 500;
}

#navigation .menu-level-2 li>div>a span.rl-subcat-meta,
.menu-helper .menu-level-2>li>div>a span.rl-subcat-meta {
  display: block;
  margin-top: 2px;
  font-family: var(--rl-body);
  font-weight: 400;
  font-size: 11.5px;
  line-height: 1.3;
  color: rgba(51, 51, 51, .72);
}

#navigation .menu-level-3 {
  display: none !important;
}

/* ── Mega promo banners (from category__secondDescription) ── */
body.type-category .category__secondDescription:has(.rl-mega-promo),
body.type-category .category__secondDescription .rl-mega-promo {
  display: none !important;
}

/* Promo column — stretches to tiles height */
#navigation .menu-level-2>li.rl-mega-promo {
/*  flex: 0 0 clamp(280px, 28vw, 520px);
  width: clamp(280px, 28vw, 520px);*/
  flex: 0 0 100%;
  width: 100%;
  max-width: 520px;
  display: flex;
  flex-direction: column;
  align-items: stretch;
  align-self: stretch;
  margin: 0;
  padding: 0 !important;
  list-style: none;
  min-height: 0;
  height: auto;
}

.rl-mega-promo {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 252px));
  gap: 16px;
  width: 100%;
  max-width: 520px;
  height: 100%;
  min-height: 0;
  flex: 1 1 auto;
}

#navigation .menu-level-2>li.rl-mega-promo > .rl-mega-promo {
  flex: 1 1 auto;
  height: 100%;
  min-height: 0;
}

#navigation .menu-level-2>li.rl-mega-promo .rl-mega-promo:not(.rl-mega-promo--single) {
  display: grid;
}

.rl-mega-promo__card {
  position: relative;
  display: block;
  width: 100%;
  height: 100%;
  min-height: clamp(320px, 32vw, 464px);
  overflow: hidden;
  background: #e8e3db;
  text-decoration: none;
  color: #fff;
  flex: 1 1 auto;
}

/* Single banner — one card filling the promo column */
#navigation .menu-level-2>li.rl-mega-promo:has(.rl-mega-promo--single),
#navigation .menu-level-2>li.rl-mega-promo.rl-mega-promo--single {
  display: flex;
  flex-direction: column;
}

.rl-mega-promo.rl-mega-promo--single {
  display: flex;
  flex-direction: column;
  grid-template-columns: none;
  max-width: none;
  height: 100%;
  flex: 1 1 auto;
}

#navigation .menu-level-2>li.rl-mega-promo:has(.rl-mega-promo--single) > .rl-mega-promo--single,
#navigation .menu-level-2>li.rl-mega-promo.rl-mega-promo--single > .rl-mega-promo {
  display: flex;
  flex-direction: column;
  flex: 1 1 auto;
  height: 100%;
  min-height: 0;
}

.rl-mega-promo--single .rl-mega-promo__card,
#navigation .menu-level-2>li.rl-mega-promo:has(.rl-mega-promo--single) .rl-mega-promo__card,
#navigation .menu-level-2>li.rl-mega-promo.rl-mega-promo--single .rl-mega-promo__card {
  min-height: 0;
  height: 100%;
  max-height: none;
  flex: 1 1 auto;
}

/* Cover image — class or raw <img> from admin WYSIWYG */
.rl-mega-promo__img,
.rl-mega-promo__card > img {
  position: relative;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  display: block;
  transition: transform .45s var(--rl-ease-out);
  border: 0;
}

.rl-mega-promo__card:hover .rl-mega-promo__img,
.rl-mega-promo__card:hover > img {
  transform: scale(1.04);
}
/*
.rl-mega-promo__card::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(to top,
      rgba(0, 0, 0, .66) 0%,
      rgba(0, 0, 0, .1) 55%,
      rgba(0, 0, 0, 0) 80%);
  pointer-events: none;
  z-index: 1;
}*/

.rl-mega-promo__copy {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 2;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 5px;
  padding: 18px;
  box-sizing: border-box;
}

.rl-mega-promo--single .rl-mega-promo__copy,
#navigation .menu-level-2>li.rl-mega-promo:has(.rl-mega-promo--single) .rl-mega-promo__copy {
  padding: 14px 16px;
}

.rl-mega-promo__title {
  display: block;
  font-family: var(--rl-display);
  font-weight: 800;
  font-size: 16.8px;
  line-height: 1.1;
  letter-spacing: -.01em;
  text-transform: uppercase;
  color: #fff;
  margin: 0;
}

.rl-mega-promo--single .rl-mega-promo__title,
#navigation .menu-level-2>li.rl-mega-promo:has(.rl-mega-promo--single) .rl-mega-promo__title {
  font-size: 15px;
}

.rl-mega-promo__sub {
  display: block;
  font-family: var(--rl-body);
  font-weight: 300;
  font-size: 11.52px;
  line-height: 1.4;
  color: rgba(255, 255, 255, .85);
}

@media (max-width: 1200px) {
  #navigation .rl-mega-tiles {
    grid-template-columns: repeat(4, minmax(0, clamp(110px, 9vw, 160px)));
    gap: 14px 16px;
  }

  #navigation .menu-level-2>li.rl-mega-promo {
   /* flex-basis: clamp(220px, 26vw, 420px);
    width: clamp(220px, 26vw, 420px);*/
    max-width: 420px;
  }

  #navigation .menu-level-2 li>a.menu-image {
    width: clamp(110px, 9vw, 160px);
    height: clamp(110px, 9vw, 160px);
  }

  .rl-mega-promo__card {
    min-height: 280px;
  }

  .rl-mega-promo--single .rl-mega-promo__card,
  #navigation .menu-level-2>li.rl-mega-promo:has(.rl-mega-promo--single) .rl-mega-promo__card,
  #navigation .menu-level-2>li.rl-mega-promo.rl-mega-promo--single .rl-mega-promo__card {
    min-height: 0;
    height: 100%;
    max-height: none;
  }

  .rl-mega-promo__title {
    font-size: 14px;
  }
}



/* ═══════════════════════════════════════════
   7. BANNERS ROW  — Bootstrap layout override
   .col-sm-8 = carousel (full width)
   .col-sm-4 = benefitBanner + categories (stacked, full width below)
   ═══════════════════════════════════════════ */

.content-wrapper.homepage-box.before-carousel,
.content-wrapper.homepage-box.before-carousel .content-wrapper-in,
.content-wrapper.homepage-box.before-carousel .container {
  width: 100% !important;
  max-width: 100% !important;
  padding: 0 !important;
  margin: 0 !important;
  display: block !important;
}

.row.banners-row {
  display: flex !important;
  flex-direction: column !important;
  width: 100% !important;
  margin: 0 !important;
  padding: 0 !important;
  float: none !important;
}

.row.banners-row .col-sm-8,
.row.banners-row .col-sm-4 {
  width: 100% !important;
  max-width: 100% !important;
  float: none !important;
  padding: 0 !important;
  flex: none !important;
}

/* Homepage: benefit above category strip without JS reorder (CLS) */
.row.banners-row .col-sm-4 {
  display: flex !important;
  flex-direction: column !important;
}

.row.banners-row .col-sm-4 > .benefitBanner.position--benefitHomepage {
  order: 1;
}

.row.banners-row .col-sm-4 > .next-to-carousel-banners {
  order: 2;
}


/* ═══════════════════════════════════════════
   8. HERO SLIDER  (#carousel)
   Figma: HeroSlider — 1961 × 760 px
   ═══════════════════════════════════════════ */

#carousel {
  width: 100%;
  overflow: hidden;
  background: var(--rl-black);
}

#carousel .carousel-inner {
  min-height: clamp(300px, 40vw, 760px) !important;
}

#carousel .item {
  position: relative;
  width: 100%;
}

#carousel .item a.extended-empty {
  display: block;
  width: 100%;
}

#carousel .item img {
  width: 100%;
  height: clamp(300px, 40vw, 760px);
  object-fit: cover;
  object-position: center center;
  display: block;
}

/* Arrows */
#carousel .carousel-control {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  width: 46px;
  height: 46px;
  background: rgba(255, 255, 255, .9) !important;
  border-radius: 50%;
  display: flex !important;
  align-items: center;
  justify-content: center;
  color: var(--rl-black);
  opacity: 1;
  font-size: 24px;
  text-shadow: none;
  filter: none;
  z-index: 5;
  transition: background .2s;
}

#carousel .carousel-control:hover {
  background: var(--rl-white) !important;
}

#carousel .carousel-control.left {
  left: 28px;
}

#carousel .carousel-control.right {
  right: 28px;
}

/* Indicators (dots) */
#carousel .carousel-indicators {
  bottom: 20px;
  margin: 0;
  display: flex;
  justify-content: center;
  gap: 4px;
  z-index: 5;
}

#carousel .carousel-indicators li {
  display: inline-block;
  width: 34px;
  height: 4px;
  border-radius: var(--rl-radius);
  background: rgba(255, 255, 255, .5);
  border: none;
  margin: 0;
  text-indent: -999px;
  cursor: pointer;
  transition: background .3s, width .3s;
}

#carousel .carousel-indicators .active {
  background: var(--rl-white);
}


/* ═══════════════════════════════════════════
   9. BENEFIT BANNER  (.benefitBanner.position--benefitHomepage)
   Figma: AnnouncementBar2 — h 86 px
   Inner items: 1200 px centered, 3 equal columns
   ═══════════════════════════════════════════ */

.benefitBanner.position--benefitHomepage {
  background: var(--rl-white);
  border-bottom: 1px solid var(--rl-border);
  width: 100% !important;
  display: flex !important;
  justify-content: center;
  align-items: stretch;
  padding: 0;
  flex-wrap: nowrap;
  overflow: hidden;
  min-height: var(--rl-benefit-h);
}

.benefitBanner.position--benefitHomepage .benefitBanner__item {
  display: flex;
  align-items: center;
  gap: clamp(10px, 1vw, 16px);
  flex: 1 1 0;
  max-width: clamp(200px, 26vw, 400px);
  padding: clamp(16px, 1.4vw, 22px) clamp(8px, 0.8vw, 16px);
  /* border-right: 1px solid var(--rl-border); */
  min-height: var(--rl-benefit-h);
}


.benefitBanner.position--benefitHomepage .benefitBanner__picture {
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  min-width: 28px;
}

.benefitBanner.position--benefitHomepage .benefitBanner__img {
  width: auto;
  max-height: 46px;
  object-fit: contain;
  filter: brightness(0);
}

.benefitBanner__title {
  display: block;
  font-family: var(--rl-display);
  font-weight: 500;
  font-size: clamp(12px, 0.74vw, 14px);
  line-height: 1.2;
  color: var(--rl-black);
  text-transform: uppercase;
  letter-spacing: 1.98px;
}

.benefitBanner__data {
  font-family: var(--rl-body);
  font-size: clamp(11px, 0.65vw, 12px);
  line-height: 1.2;
  color: var(--rl-gray-md);
  margin-top: 3px;
}


/* ═══════════════════════════════════════════
   10. CATEGORY STRIP  (.main-categories)
   Figma: Home — 5 portrait tiles, image 332 × 442 px
   Container: 70 px margin each side at 1961 px canvas
   Desktop (≥993px): tiles scale proportionally (W+H+label),
   not just squeeze horizontally.
   ═══════════════════════════════════════════ */

.next-to-carousel-banners {
  width: 100%;
  display: flex;
  flex-direction: column;
}

.next-to-carousel-banners>.banner-wrapper {
  width: 100%;
}

.main-categories {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  /* 40 / 1961 ≈ 2.04vw · 70 / 1961 ≈ 3.57vw */
  gap: clamp(12px, 2.04vw, 40px);
  padding:
    clamp(20px, 2.04vw, 40px) clamp(var(--rl-gap), 3.57vw, 70px) clamp(30px, 3.06vw, 50px);
  background: var(--rl-white);
  max-width: var(--rl-max);
  margin: 0 auto;
  width: 100%;
}

.main-categories .category-link {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0;
  min-width: 0;
  text-decoration: none;
  color: var(--rl-black);
  /* Label / spacing scale with tile width (desktop) */
  container-type: inline-size;
  container-name: rl-cat;
}

/* Aspect lives on the frame so height tracks width 1:1 with design ratio */
.main-categories .category-image {
  display: block;
  width: 100%;
  aspect-ratio: 332 / 442;
  overflow: hidden;
  border-radius: var(--rl-radius);
}

.main-categories .category-image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: transform .5s var(--rl-ease-out);
}

.main-categories .category-link:hover .category-image img {
  transform: scale(1.04);
}

.main-categories .category-link p {
  font-family: var(--rl-display);
  font-weight: 600;
  /* 13 / 332 ≈ 3.916cqi · 30 / 332 ≈ 9.036cqi · 1.152 / 332 ≈ 0.347cqi */
  font-size: clamp(11px, 3.916cqi, 13px);
  color: var(--rl-black);
  margin-top: clamp(16px, 9.036cqi, 30px);
  display: flex;
  align-items: center;
  gap: clamp(3px, 1.506cqi, 5px);
  text-transform: uppercase;
  letter-spacing: clamp(0.8px, 0.347cqi, 1.152px);
}

.main-categories .category-link p i {
  font-style: normal;
  transition: transform .2s var(--rl-ease-out);
  display: inline-block;
  color: var(--rl-red);
}

.main-categories .category-link:hover p i {
  transform: translateX(4px);
}

/* Fallback when cqi unavailable: vw tracks the same design canvas */
@supports not (font-size: 1cqi) {
  .main-categories .category-link p {
    font-size: clamp(11px, 0.66vw, 13px);
    margin-top: clamp(16px, 1.53vw, 30px);
    letter-spacing: clamp(0.8px, 0.059vw, 1.152px);
  }
}


/* ═══════════════════════════════════════════
   11. COLLECTION BANNERS  (.collection)
   Figma: AttractionBanners — 3 panels 628 × 795 px
   Padding: 25 px each side at 1961 px canvas
   Desktop (≥993px): panels scale proportionally (W+H+overlay),
   not just squeeze horizontally.
   ═══════════════════════════════════════════ */

.collection {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: clamp(6px, .71vw, 14px);
  padding:
    0 clamp(var(--rl-gap), 1.27vw, 25px);
  /* 25px = 1.27% of 1961px */
  background: var(--rl-white);
  max-width: var(--rl-max);
  margin: 0 auto;
  width: 100%;
}

.collection>a {
  position: relative;
  display: block;
  overflow: hidden;
  border-radius: var(--rl-radius);
  color: var(--rl-white);
  min-width: 0;
  container-type: inline-size;
  container-name: rl-col;
}

/* Aspect on the frame so height tracks width with design ratio */
.collection>a .category-image {
  display: block;
  width: 100%;
  aspect-ratio: 628 / 795;
  overflow: hidden;
}

.collection>a .category-image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: transform .65s var(--rl-ease-out);
}

.collection>a:hover .category-image img {
  transform: scale(1.04);
}

/* Gradient overlay */
.collection>a::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(to top,
      rgba(0, 0, 0, .72) 0%,
      rgba(0, 0, 0, .1) 55%,
      transparent 80%);
  pointer-events: none;
}

/* Text overlay — sizes relative to panel width (628 design) */
.collection .category-meta {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  /* 32 / 628 ≈ 5.096cqi */
  padding: clamp(14px, 5.096cqi, 32px);
  z-index: 1;
  color: var(--rl-white);
}

.collection .above-headline {
  display: block;
  font-family: var(--rl-body);
  /* 13 / 628 ≈ 2.07cqi · 11 / 628 ≈ 1.75cqi */
  font-size: clamp(10px, 2.07cqi, 13px);
  font-weight: 400;
  letter-spacing: .09em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, .72);
  margin-bottom: clamp(5px, 1.75cqi, 11px);
}

.collection h3 {
  font-family: var(--rl-display);
  font-weight: 800;
  /* 30 / 628 ≈ 4.777cqi */
  font-size: clamp(16px, 4.777cqi, 30px);
  line-height: 1.15;
  color: var(--rl-white);
  margin-bottom: clamp(6px, 1.75cqi, 11px);
}

.collection p {
  font-family: var(--rl-body);
  /* 14 / 628 ≈ 2.229cqi */
  font-size: clamp(11px, 2.229cqi, 14px);
  color: rgba(255, 255, 255, .85);
  line-height: 1.5;
  margin-bottom: clamp(8px, 2.229cqi, 14px);
}

.collection .category-link {
  display: inline-flex;
  align-items: center;
  gap: clamp(4px, 0.955cqi, 6px);
  font-family: var(--rl-display);
  font-weight: 600;
  /* 15 / 628 ≈ 2.389cqi */
  font-size: clamp(11px, 2.389cqi, 15px);
  color: var(--rl-white);
  transition: gap .2s var(--rl-ease-out);
  text-transform: uppercase;
  border-bottom: 1px solid #fff;
  letter-spacing: 0.75px;
}

.collection .category-link i {
  font-style: normal;
}

.collection>a:hover .category-link {
  gap: clamp(6px, 1.592cqi, 10px);
}

/* Fallback when cqi unavailable */
@supports not (font-size: 1cqi) {
  .collection .category-meta {
    padding: clamp(14px, 1.63vw, 32px);
  }

  .collection .above-headline {
    font-size: clamp(10px, .66vw, 13px);
    margin-bottom: clamp(5px, .56vw, 11px);
  }

  .collection h3 {
    font-size: clamp(16px, 1.53vw, 30px);
    margin-bottom: clamp(6px, .56vw, 11px);
  }

  .collection p {
    font-size: clamp(11px, .74vw, 14px);
    margin-bottom: clamp(8px, .71vw, 14px);
  }

  .collection .category-link {
    font-size: clamp(11px, .67vw, 15px);
    gap: 6px;
  }
}


/* ═══════════════════════════════════════════
   12. SELECTED CATEGORIES  (#selected-categories)
   Figma: CategoryTiles — 6 tiles, image 307 × 480 px, gap 14 px
   Section padding: 64 px top, 24 px side
   ═══════════════════════════════════════════ */

/* Section heading "Vybrané kategorie" injected via CSS */
#selected-categories {
  background: var(--rl-white);
  max-width: var(--rl-max);
  margin: 0 auto;
  width: 100%;
}

#selected-categories::before {
  content: 'Vybrané kategorie';
  display: block;
  font-family: var(--rl-display);
  font-weight: 800;
  font-size: clamp(20px, 1.47vw, 30px);
  line-height: 1.29;
  color: var(--rl-black);
  padding: var(--rl-section-y) var(--rl-gap) var(--rl-space-3);
}

/* 6-column grid */
#selected-categories .selected-wrapper {
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  gap: clamp(8px, .71vw, 14px);
  padding:
    0 var(--rl-gap) clamp(28px, 2.04vw, 40px);
}

#selected-categories .selected-wrapper>a {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 0;
  color: var(--rl-black);
}

#selected-categories .selected-image {
  display: block;
  width: 100%;
  aspect-ratio: 307 / 480;
  overflow: hidden;
  border-radius: var(--rl-radius);
}

#selected-categories .selected-image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: transform .55s var(--rl-ease-out);
}

#selected-categories .selected-wrapper>a:hover .selected-image img {
  transform: scale(1.04);
}

#selected-categories .selected-meta {
  padding: clamp(8px, .71vw, 14px) 0 0;
  line-height: 1;
}

#selected-categories .selected-meta h3 {
  font-family: var(--rl-display);
  font-weight: 600;
  font-size: clamp(13px, .87vw, 17px);
  line-height: 1.3;
  color: var(--rl-black);
}

#selected-categories .selected-meta .pocet-produktu {
  display: block;
  font-family: var(--rl-body);
  font-size: 12px;
  color: var(--rl-gray-md);
  margin-top: 2px;
  font-weight: 400;
}


/* ═══════════════════════════════════════════
   13. PRODUCTS SECTION WRAPPER
   ═══════════════════════════════════════════ */

.content-wrapper.container {
  width: 100% !important;
  margin: 0 auto;
  max-width: var(--rl-max) !important;
  padding-left: var(--rl-gap) !important;
  padding-right: var(--rl-gap) !important;
}

/* Homepage „Doporučujeme“ — same side rail as blog / inspiration */
/*{body.in-index .content-wrapper.container:has(#products-5),
body.in-index .content-wrapper.container:has(.homepage-products-heading-5) {
  padding-left: clamp(var(--rl-gap), 2.45vw, 48px) !important;
  padding-right: clamp(var(--rl-gap), 2.45vw, 48px) !important;
}
*/

/* ── SECTION HEADINGS  (.homepage-group-title, etc.) ── */

.homepage-group-title {
  font-family: var(--rl-display) !important;
  font-weight: 800 !important;
  font-size: clamp(20px, 1.47vw, 30px) !important;
  line-height: 1.29 !important;
  color: var(--rl-black) !important;
  padding: var(--rl-section-y) 0 var(--rl-space-3) !important;
  border: none !important;
  background: none !important;
}


/* ═══════════════════════════════════════════
   14. FEATURED PRODUCTS  ()
   Figma: FeaturedProducts — 5 cards in a row
   Card: w 358.6 px, image 420 px tall
   ═══════════════════════════════════════════ */

.products.products-block,
.products-block.products.products-block {
  display: grid !important;
  grid-template-columns: repeat(5, 1fr) !important;
  gap: clamp(14px, 1.53vw, 30px) !important;
  padding: 0 !important;
  margin-bottom: var(--rl-section-y) !important;
  align-items: stretch;
}

/* Individual product card — flex column so price row aligns across the grid */
.product,
.products-block .product,
.products-block .p,
#products.products-block .p,
#products.products-page .p {
  width: 100% !important;
  float: none !important;
  padding: 0 !important;
  display: flex;
  flex-direction: column;
  height: 100%;
  min-width: 0;
}

/* CLS: reserve image box before JS wraps into .rl-img-wrap */
.products-block .p > a.image,
.products-block .product > a.image,
#products.products-block .p > a.image,
#products.products-page .p > a.image,
#products .product > a.image {
  display: block;
  position: relative;
  overflow: hidden;
  border-radius: var(--rl-radius);
  aspect-ratio: var(--rl-product-img-ratio);
  width: 100%;
  background: var(--rl-gray-lt);
}

.products-block .p > a.image img,
.products-block .product > a.image img,
#products.products-block .p > a.image img,
#products.products-page .p > a.image img,
#products .product > a.image img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  object-position: center;
  display: block;
  padding: 12px;
}

.p .rl-img-wrap,
.product .rl-img-wrap,
.products-block .p .rl-img-wrap,
.products-block .product .rl-img-wrap {
  display: flex;
  flex-direction: column;
  width: 100%;
}

/* Image area */
.p .rl-img-wrap>a.image,
.product .rl-img-wrap>a.image,
.products-block .p .rl-img-wrap>a.image,
.products-block .product .rl-img-wrap>a.image {
  display: block;
  position: relative;
  overflow: hidden;
  border-radius: var(--rl-radius);
  aspect-ratio: var(--rl-product-img-ratio);
}

.p .rl-img-wrap>a.image img,
.product .rl-img-wrap>a.image img,
.products-block .p .rl-img-wrap>a.image img,
.products-block .product .rl-img-wrap>a.image img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  object-position: center;
  display: block;
  padding: 12px;
  transform: none !important;
  transition: none;
}

.p .rl-img-wrap>a.image:hover img,
.product .rl-img-wrap>a.image:hover img,
.products-block .p .rl-img-wrap>a.image:hover img,
.products-block .product .rl-img-wrap>a.image:hover img,
body.type-category #products .rl-img-wrap>a.image:hover img,
body.type-detail .products-related .p a.image:hover img,
body.type-detail .products-related .product a.image:hover img,
body.type-detail .rl-pd-related .product a.image:hover img,
body.type-detail .rl-pd-alternative .product a.image:hover img,
body.type-product .products-related .p a.image:hover img,
body.type-product .products-related .product a.image:hover img,
body.type-product .rl-pd-related .product a.image:hover img,
body.type-product .rl-pd-alternative .product a.image:hover img,
#rl-search .rl-search__grid a.image:hover img,
#colorbox .p>a.image:hover img {
  transform: none !important;
}

/* Discount / flag badges — flex stack top-left (.rl-flags from JS)
   Fallback: absolute on each group if JS has not wrapped yet */
.rl-img-wrap>a.image>.rl-flags {
  position: absolute;
  top: 8px;
  left: 8px;
  z-index: 4;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 4px;
  margin: 0;
  padding: 0;
  pointer-events: none;
}

.rl-img-wrap>a.image>.rl-flags .flags,
.rl-img-wrap>a.image>.rl-flags .flags-default,
.rl-img-wrap>a.image>.rl-flags .flags-extra {
  position: static !important;
  top: auto !important;
  left: auto !important;
  bottom: auto !important;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 4px;
  margin: 0;
  padding: 0;
  z-index: auto;
}

.rl-img-wrap>a.image .flags .flag,
.products-block .rl-img-wrap>a.image .flags .flag,
#products .rl-img-wrap>a.image .flags .flag,
.p .rl-img-wrap>a.image .flags .flag,
.product .rl-img-wrap>a.image .flags .flag,
.flags .flag,
.products-block .flags .flag {
  position: static;
  top: auto;
  left: auto;
  font-family: var(--rl-display);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .04em;
  text-transform: uppercase;
  padding: 3px 7px;
  border-radius: var(--rl-radius);
  z-index: 2;
  color: var(--rl-white);
  background: var(--rl-black);
  white-space: nowrap;
  width: fit-content;
}

.rl-img-wrap>a.image .flags-extra .flag-discount,
.products-block .rl-img-wrap>a.image .flags-extra .flag-discount,
#products .rl-img-wrap>a.image .flags-extra .flag-discount,
.flags-extra .flag-discount,
.products-block .flags-extra .flag-discount {
  background: var(--rl-red);
  font-family: var(--rl-display);
  font-size: 11px;
  font-weight: 700;
  color: var(--rl-white);
  padding: 3px 7px;
  border-radius: var(--rl-radius);
  text-transform: none;
  letter-spacing: 0;
}

/* No-JS / pre-enhance fallback — stack with gap (discount above AKCE) */
.rl-img-wrap>a.image:not(:has(>.rl-flags)) .flags.flags-default,
.products-block .rl-img-wrap>a.image:not(:has(>.rl-flags)) .flags.flags-default,
#products .rl-img-wrap>a.image:not(:has(>.rl-flags)) .flags.flags-default {
  position: absolute;
  top: 8px;
  left: 8px;
  z-index: 3;
  display: flex;
  flex-direction: column;
  gap: 4px;
  margin: 0;
  padding: 0;
}

.rl-img-wrap>a.image:not(:has(>.rl-flags)) .flags-extra,
.products-block .rl-img-wrap>a.image:not(:has(>.rl-flags)) .flags-extra,
#products .rl-img-wrap>a.image:not(:has(>.rl-flags)) .flags-extra {
  position: absolute;
  top: 8px;
  left: 8px;
  bottom: auto;
  z-index: 4;
  margin: 0;
  padding: 0;
}

.rl-img-wrap>a.image:not(:has(>.rl-flags)):has(.flags-extra) .flags-default,
.products-block a.image:not(:has(>.rl-flags)):has(.flags-extra) .flags-default,
#products a.image:not(:has(>.rl-flags)):has(.flags-extra) .flags-default {
  top: 40px;
}

/* Original price lives under .prices (JS moves it out of the discount flag) */
.flags .price-standard,
.flags-extra .price-standard,
.products-block .flags .price-standard,
.products-block .flags-extra .price-standard {
  display: none !important;
}

/* Wishlist button (legacy Shoptet) */
.p a.wish-list,
.products-block .p a.wish-list,
.p button.wish-list,
.products-block .p button.wish-list {
  position: absolute;
  top: 8px;
  right: 8px;
  z-index: 2;
  width: 30px;
  height: 30px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  background: rgba(255, 255, 255, .9);
  border: none;
  cursor: pointer;
  transition: background .2s;
}

.p a.wish-list:hover,
.products-block .p a.wish-list:hover,
.p button.wish-list:hover,
.products-block .p button.wish-list:hover {
  background: var(--rl-white);
}

.p a.wish-list:focus-visible,
.products-block .p a.wish-list:focus-visible,
.p button.wish-list:focus-visible,
.products-block .p button.wish-list:focus-visible {
  outline: none;
  background: var(--rl-white);
  box-shadow: var(--rl-focus-ring);
}

.p a.wish-list:active,
.products-block .p a.wish-list:active,
.p button.wish-list:active,
.products-block .p button.wish-list:active {
  transform: scale(.94);
}

/* ── dkLab favourites on product cards (listing / rails / search) ── */
.p,
.products-block .p,
.product .p {
  position: relative;
}

.dkLabFavouriteProductDiv.onlyIcon,
.p .dkLabFavouriteProductDiv.onlyIcon,
.products-block .dkLabFavouriteProductDiv.onlyIcon,
.rl-img-wrap .dkLabFavouriteProductDiv.onlyIcon {
  position: absolute !important;
  top: 8px !important;
  right: 8px !important;
  left: auto !important;
  bottom: auto !important;
  z-index: 5 !important;
  width: 32px !important;
  height: 32px !important;
  margin: 0 !important;
  padding: 0 !important;
  font-size: 0 !important;
  line-height: 0 !important;
  background: #fff !important;
  border: 1px solid #e0e0de !important;
  border-radius: 10px !important;
  box-sizing: border-box !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  cursor: pointer;
  transition: border-color .15s ease, box-shadow .15s ease;
}

.dkLabFavouriteProductDiv.onlyIcon:hover {
  border-color: #c8c8c6 !important;
  box-shadow: 0 1px 6px rgba(0, 0, 0, .06);
}

.dkLabFavouriteProductDiv.onlyIcon .dkLabFavProductSpan,
.dkLabFavouriteProductDiv.onlyIcon .dkLabFavProductSpan.hasIcon {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: 100% !important;
  height: 100% !important;
  margin: 0 !important;
  padding: 0 !important;
  font-size: 0 !important;
  line-height: 0 !important;
  color: transparent !important;
  cursor: pointer;
}

/* Replace dkLab icon-font with our SVG */
.dkLabFavouriteProductDiv.onlyIcon .dkLabFavProductSpan.hasIcon::before,
.dkLabFavouriteProductDiv.onlyIcon .dkLabFavProductSpan::before {
  content: '' !important;
  font-family: none !important;
  font-size: 0 !important;
  margin: 0 !important;
  padding: 0 !important;
  position: static !important;
  top: 0 !important;
  display: block !important;
  width: 18px !important;
  height: 18px !important;
  background: url('../images/icon-favorites.svg') center / contain no-repeat !important;
  opacity: .3;
  color: transparent !important;
}

.dkLabFavouriteProductDiv.onlyIcon .dkLabFavProductSpan.dkLabFavouriteProductLinkRemove::before,
.dkLabFavouriteProductDiv.onlyIcon .dkLabFavProductSpan.dkLabFavouriteProductLinkRemove.hasIcon::before {
  background: url('../images/icon-favorites-on.svg') center / contain no-repeat !important;
  opacity: 1;
}

/* Product info */
.p-in,
.products-block .p-in {
  padding: var(--rl-card-pad);
  display: flex;
  flex-direction: column;
  flex: 1 1 auto;
  min-width: 0;
}

.p-in-in,
.products-block .p-in-in {
  display: flex;
  flex-direction: column;
  flex: 1 1 auto;
  min-width: 0;
}

.p-in-in a.name,
.products-block .p-in-in a.name {
  font-family: var(--rl-display);
  font-size: var(--rl-card-title-size);
  line-height: var(--rl-card-title-lh);
  color: var(--rl-black);
  font-weight: 500;
  margin-bottom: var(--rl-space-2);
  display: -webkit-box;
  -webkit-line-clamp: var(--rl-card-title-lines);
  -webkit-box-orient: vertical;
  overflow: hidden;
  min-height: var(--rl-card-title-min-h);
}

.p-in-in a.name:hover,
.products-block .p-in-in a.name:hover,
.p-in-in a.name:focus-visible,
.products-block .p-in-in a.name:focus-visible {
  color: var(--rl-gray);
}

.p-in-in a.name:focus-visible,
.products-block .p-in-in a.name:focus-visible {
  outline: none;
  box-shadow: var(--rl-focus-ring-inset);
  border-radius: var(--rl-radius);
}

.p-in-in a.name:active,
.products-block .p-in-in a.name:active {
  opacity: .75;
}

/* Availability — JS moves it into .rl-price-row; hide original slot */
.ratings-wrapper,
.products-block .ratings-wrapper {
  display: none;
}

.availability-amount,
.products-block .availability-amount {
  display: none;
}

/* Prices */
.prices,
.products-block .prices {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 6px;
}

/* Push price block to card bottom when JS has not wrapped .rl-price-row yet */
.p-in > .prices,
.products-block .p-in > .prices,
.p-in-in > .prices,
.products-block .p-in-in > .prices {
  margin-top: auto;
  padding-top: var(--rl-space-2);
  min-height: var(--rl-card-price-min-h);
}

.rl-price-row .prices,
.products-block .rl-price-row .prices {
  margin-top: 0;
  padding-top: 0;
  min-height: 0;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 2px;
}

.prices > .price-standard,
.products-block .prices > .price-standard,
.rl-price-row .prices > .price-standard,
.products-block .rl-price-row .prices > .price-standard {
  font-family: var(--rl-body);
  font-size: 12px;
  line-height: 1.3;
  color: #ccc;
  text-decoration: line-through;
  font-weight: 400;
  order: -1;
}

.prices > .price-standard span,
.products-block .prices > .price-standard span {
  text-decoration: inherit;
  color: inherit;
}

.price-final strong,
.products-block .price-final strong {
  font-family: var(--rl-display);
  font-weight: 700;
  font-size: clamp(13px, .7vw, 14px);
  color: var(--rl-black);
}

.price-before strong,
.products-block .price-before strong,
.price.before strong,
.products-block .price.before strong {
  font-family: var(--rl-body);
  font-size: 14px;
  color: var(--rl-gray);
  text-decoration: line-through;
  font-weight: 400;
}

.p-bottom,
.products-block .p-bottom {
  margin-top: 6px;
}

/* ── .rl-img-wrap (JS-injected) — image + hover cart overlay ── */
.rl-img-wrap,
.products-block .rl-img-wrap {
  position: relative;
  border-radius: var(--rl-radius);
  overflow: hidden;
}

/* Remove double radius from child image link */
.rl-img-wrap>a.image,
.products-block .rl-img-wrap>a.image {
  border-radius: 0;
  overflow: visible;
}

/* Cart overlay — hidden by default; hover only on fine pointers */
.rl-img-wrap .p-tools,
.products-block .rl-img-wrap .p-tools {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  z-index: 6;
  opacity: 0;
  transform: translateY(6px);
  transition: opacity .2s ease, transform .2s ease;
  pointer-events: none;
}

@media (hover: hover) and (pointer: fine) {
  .rl-img-wrap:hover .p-tools,
  .products-block .rl-img-wrap:hover .p-tools {
    opacity: 1;
    transform: translateY(0);
    pointer-events: auto;
  }
}

/* Touch / coarse pointer: always show ATC (desktop tablets + phones) */
@media (hover: none), (pointer: coarse) {
  .rl-img-wrap .p-tools,
  .products-block .rl-img-wrap .p-tools {
    opacity: 1;
    transform: none;
    pointer-events: auto;
  }
}

html.rl-coarse-pointer .rl-img-wrap .p-tools,
html.rl-coarse-pointer .products-block .rl-img-wrap .p-tools {
  opacity: 1;
  transform: none;
  pointer-events: auto;
}

/* Cart button style */
.rl-img-wrap .btn-cart,
.products-block .rl-img-wrap .btn-cart {
  display: block;
  width: 100%;
  background: rgba(17, 17, 17, .88);
  color: #fff;
  font-family: var(--rl-display);
  font-weight: 600;
  font-size: 12px;
  letter-spacing: .08em;
  text-transform: uppercase;
  padding: 13px 16px;
  border: none;
  border-radius: 0;
  cursor: pointer;
  transition: background .15s, box-shadow .15s;
  outline: none;
  -webkit-tap-highlight-color: transparent;
}

.rl-img-wrap .btn-cart:hover,
.products-block .rl-img-wrap .btn-cart:hover {
  background: #111;
}

/* ── .rl-price-row (JS-injected) — prices left, stock right ── */
.rl-price-row,
.products-block .rl-price-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  margin-top: auto;
  padding-top: var(--rl-space-2);
  min-height: var(--rl-card-price-min-h);
}

.rl-price-row .availability,
.products-block .rl-price-row .availability {
  display: flex;
  align-items: center;
  font-family: var(--rl-body);
  font-size: 12px;
  font-weight: 500;
  white-space: nowrap;
  flex-shrink: 0;
  margin-bottom: 0;
  gap: 0;
  align-self: self-end;
  padding-bottom: 1px;
}

/* check-stock.svg only when text contains „Skladem“ (.rl-in-stock from JS) */
.rl-price-row .availability .show-tooltip.rl-in-stock::before,
.products-block .rl-price-row .availability .show-tooltip.rl-in-stock::before {
  content: '';
  display: inline-block;
  width: 14px;
  height: 14px;
  background: url('../images/check-stock.svg') center / contain no-repeat;
  vertical-align: middle;
  margin-right: 4px;
}

/* Availability Bootstrap tooltips — must be absolute or tip dumps into layout */
.tooltip[role="tooltip"],
.tooltip {
  position: absolute !important;
  z-index: 12000 !important;
  display: block;
  font-family: var(--rl-body);
  font-style: normal;
  font-weight: 400;
  letter-spacing: normal;
  line-height: 1.45;
  text-align: left;
  text-decoration: none;
  text-shadow: none;
  text-transform: none;
  white-space: normal;
  word-break: normal;
  word-spacing: normal;
  word-wrap: normal;
  opacity: 0;
  filter: alpha(opacity=0);
  pointer-events: none;
}

.tooltip.in {
  opacity: 1 !important;
  filter: alpha(opacity=100);
}

.tooltip.top {
  padding: 5px 0;
  margin-top: -3px;
}

.tooltip.right {
  padding: 0 5px;
  margin-left: 3px;
}

.tooltip.bottom {
  padding: 5px 0;
  margin-top: 3px;
}

.tooltip.left {
  padding: 0 5px;
  margin-left: -3px;
}

.tooltip-inner {
  max-width: 280px;
  padding: 10px 14px;
  color: #fff !important;
  text-align: center;
  background-color: #111 !important;
  border-radius: 4px;
  font-size: 12px;
  line-height: 1.45;
}

.tooltip-arrow {
  position: absolute;
  width: 0;
  height: 0;
  border-color: transparent;
  border-style: solid;
}

.tooltip.top .tooltip-arrow {
  bottom: 0;
  left: 50%;
  margin-left: -5px;
  border-width: 5px 5px 0;
  border-top-color: #111 !important;
}

.tooltip.bottom .tooltip-arrow {
  top: 0;
  left: 50%;
  margin-left: -5px;
  border-width: 0 5px 5px;
  border-bottom-color: #111 !important;
}

.tooltip.left .tooltip-arrow {
  top: 50%;
  right: 0;
  margin-top: -5px;
  border-width: 5px 0 5px 5px;
  border-left-color: #111 !important;
}

.tooltip.right .tooltip-arrow {
  top: 50%;
  left: 0;
  margin-top: -5px;
  border-width: 5px 5px 5px 0;
  border-right-color: #111 !important;
}


/* Tablet / mobile: unified cart icon on ALL product cards (listing, home, detail rails, fav, search) */
@media (max-width: 992px) {

  .rl-img-wrap .p-tools,
  .products-block .rl-img-wrap .p-tools,
  #products .rl-img-wrap .p-tools,
  .product .rl-img-wrap .p-tools,
  .p .rl-img-wrap .p-tools {
    opacity: 1 !important;
    transform: none !important;
    pointer-events: auto !important;
    left: auto;
    right: 12px;
    bottom: 12px;
    width: auto;
  }

  .rl-img-wrap .btn-cart,
  .products-block .rl-img-wrap .btn-cart,
  #products .rl-img-wrap .btn-cart,
  .product .rl-img-wrap .btn-cart,
  .p .rl-img-wrap .btn-cart,
  .rl-img-wrap .btn-cart.add-to-cart-button,
  .products-block .btn-cart.add-to-cart-button {
    /*width: 40px !important;
    height: 40px !important;
    min-width: 40px !important;
    padding: 0 !important;
    font-size: 0 !important;
    line-height: 0 !important;
    letter-spacing: 0 !important;
    color: transparent !important;
    border: none !important;
    border-radius: var(--rl-radius) !important;
    background: rgba(17, 17, 17, .82) !important;
    background-image: none !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    position: relative !important;
    overflow: hidden !important; */
    display: none !important;
  }

  .rl-img-wrap .btn-cart>*,
  .products-block .rl-img-wrap .btn-cart>*,
  #products .rl-img-wrap .btn-cart>*,
  .product .rl-img-wrap .btn-cart>*,
  .p .rl-img-wrap .btn-cart>* {
   /* position: absolute !important;
    width: 1px !important;
    height: 1px !important;
    padding: 0 !important;
    margin: -1px !important;
    overflow: hidden !important;
    clip: rect(0, 0, 0, 0) !important;
    white-space: nowrap !important;
    border: 0 !important; */
    display: none !important;
  }

  /* Single cart glyph for every product-card ATC */
  .rl-img-wrap .btn-cart::before,
  .products-block .rl-img-wrap .btn-cart::before,
  #products .rl-img-wrap .btn-cart::before,
  .product .rl-img-wrap .btn-cart::before,
  .p .rl-img-wrap .btn-cart::before,
  .rl-img-wrap .btn-cart.add-to-cart-button::before,
  .products-block .btn-cart.add-to-cart-button::before {
    content: '' !important;
    display: block !important;
    width: 18px !important;
    height: 18px !important;
    margin: 0 !important;
    padding: 0 !important;
    border: 0 !important;
    background: url('../images/icon-cart.svg') center / contain no-repeat !important;
    filter: brightness(0) invert(1) !important;
    flex-shrink: 0 !important;
    font-size: 0 !important;
    line-height: 0 !important;
    color: transparent !important;
  }

  .rl-img-wrap .btn-cart::after,
  .products-block .rl-img-wrap .btn-cart::after,
  #products .rl-img-wrap .btn-cart::after {
    content: none !important;
    display: none !important;
  }

  .rl-img-wrap .btn-cart:hover,
  .products-block .rl-img-wrap .btn-cart:hover,
  #products .rl-img-wrap .btn-cart:hover {
    background: #111 !important;
  }
}

/* Soft brown wash over product image (listing + rails + cards) */
.p.swap-images,
.product.swap-images,
.products-block .product,
.products-block .p,
body.type-detail .rl-pd-related .product,
body.type-detail .rl-pd-alternative .product,
body.type-product .rl-pd-related .product,
body.type-product .rl-pd-alternative .product,
body.type-detail .products-related .product,
body.type-detail .products-alternative .product,
body.type-product .products-related .product,
body.type-product .products-alternative .product {
  position: relative;
}

/* Wash on the image frame — flags / wishlist / cart stay above */
/*.rl-img-wrap>a.image::before, */
.p.swap-images:not(:has(> .rl-img-wrap))::before,
.product.swap-images:not(:has(> .rl-img-wrap))::before,
body.type-detail .rl-pd-related .product:not(:has(> .rl-img-wrap))::before,
body.type-detail .rl-pd-alternative .product:not(:has(> .rl-img-wrap))::before,
body.type-product .rl-pd-related .product:not(:has(> .rl-img-wrap))::before,
body.type-product .rl-pd-alternative .product:not(:has(> .rl-img-wrap))::before,
body.type-detail .products-related .product:not(:has(> .rl-img-wrap))::before,
body.type-detail .products-alternative .product:not(:has(> .rl-img-wrap))::before,
body.type-product .products-related .product:not(:has(> .rl-img-wrap))::before,
body.type-product .products-alternative .product:not(:has(> .rl-img-wrap))::before {
  content: '';
  position: absolute;
  pointer-events: none;
  background: var(--rl-tint);
  left: 0;
  top: 0;
  bottom: 0;
  right: 0;
  z-index: 1;
  opacity: 0.05;
}


/* ═══════════════════════════════════════════
   15. LIFESTYLE GRID  (#inspiration)
   Figma: LifestyleGrid — 2 rows, asymmetric 60/40 split
   Gap: 14 px  |  Image h: 500 px
   ═══════════════════════════════════════════ */

/* ── Brand intro (Figma 771:771) — same width/columns as Rady & tipy ── */
.rl-brand-intro {
  width: 100%;
  max-width: var(--rl-max);
  margin: 0 auto;
  padding: clamp(28px, 2.45vw, 48px) clamp(var(--rl-gap), 6.7vw, 100px) clamp(24px, 2.04vw, 40px);
  box-sizing: border-box;
}

/* 3 cols + gap = blog track → image = 1st article, text = cols 2–3 */
.rl-brand-intro__grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  column-gap: clamp(14px, 1.53vw, 30px) !important;
  row-gap: 24px;
  align-items: start;
}

.rl-brand-intro__media {
  grid-column: 1;
  position: relative;
  width: 100%;
  aspect-ratio: 606 / 550;
  height: auto;
  overflow: hidden;
  background: #e8e3db;
}

.rl-brand-intro__media img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center 30%;
}

.rl-brand-intro__content {
  grid-column: 2 / -1;
  min-width: 0;
}

.rl-brand-intro__eyebrow {
  margin: 0;
  font-family: var(--rl-display);
  font-weight: 600;
  font-size: 10px;
  line-height: 1.5;
  letter-spacing: 0.28em;
  text-transform: uppercase;
  color: var(--rl-red);
}

.rl-brand-intro__title {
  margin: 18px 0 0;
  font-family: var(--rl-display);
  font-weight: 800;
  font-size: clamp(28px, 2.4vw, 46px);
  line-height: 1.04;
  letter-spacing: -0.035em;
  color: var(--rl-black);
}

.rl-brand-intro__lead {
  margin: 20px 0 0;
  font-family: var(--rl-body);
  font-weight: 700;
  font-size: clamp(16px, 0.92vw, 18px);
  line-height: 1.44;
  color: var(--rl-black);
}

.rl-brand-intro__text {
  margin: 16px 0 0;
  font-family: var(--rl-body);
  font-weight: 300;
  font-size: clamp(14px, 0.75vw, 15px);
  line-height: 1.8;
  color: var(--rl-black);
}

.rl-brand-intro__text strong {
  font-weight: 600;
}

.rl-brand-intro__text a {
  color: inherit;
  font-weight: 500;
  text-decoration: underline;
  text-underline-offset: 2px;
  text-decoration-thickness: 1px;
}

.rl-brand-intro__text a:hover {
  color: var(--rl-red);
}

.rl-brand-intro__subtitle {
  margin: 28px 0 0;
  font-family: var(--rl-display);
  font-weight: 800;
  font-size: clamp(20px, 1.4vw, 27px);
  line-height: 1.15;
  letter-spacing: -0.03em;
  color: var(--rl-black);
}

.rl-brand-intro__subtitle--sm {
  font-size: clamp(18px, 1.2vw, 23px);
}

.rl-brand-intro__subtitle + .rl-brand-intro__text {
  margin-top: 14px;
}

@media (max-width: 992px) {
  .rl-brand-intro {
    padding: 24px var(--rl-gap) 28px;
  }

  .rl-brand-intro__grid {
    grid-template-columns: 1fr;
    column-gap: 0;
    row-gap: 24px;
  }

  .rl-brand-intro__media,
  .rl-brand-intro__content {
    grid-column: 1;
  }

  .rl-brand-intro__media {
    aspect-ratio: 4 / 3;
    max-height: 420px;
  }
}

/* Wrapper overrides */
.content-wrapper.homepage-box.welcome-wrapper {
  width: 100% !important;
  max-width: 100% !important;
  padding: 0 !important;
  margin: 0 !important;
}

.content-wrapper.homepage-box.welcome-wrapper .content-wrapper-in,
.content-wrapper.homepage-box.welcome-wrapper .container,
.content-wrapper.homepage-box.welcome-wrapper .welcome-wrapper,
.content-wrapper.homepage-box.welcome-wrapper .welcome {
  width: 100% !important;
  max-width: 100% !important;
  padding: 0 !important;
  margin: 0 !important;
}

/* Hide the Shoptet h1 */
.welcome .h1[data-testid="eshopHeader"] {
  display: none !important;
}

.in-index>.container {
  border-top: 1px solid var(--rl-border) !important;
}

/* Hide empty #content-wrapper shell only when homepage content lives OUTSIDE it
   (desktop HTML). On mobile UA Shoptet puts categories/products/blog INSIDE —
   the old `left: -100000px` hack hid the whole homepage. */
body.in-index #content-wrapper:not(:has(#products-5, .main-categories, .row.banners-row)) {
  display: none !important;
}

/* When homepage is inside #content-wrapper (mobile HTML) — full-bleed */
body.in-index #content-wrapper:has(#products-5, .main-categories, .row.banners-row),
body.in-index #content-wrapper:has(#products-5, .main-categories, .row.banners-row)>.content-wrapper-in,
body.in-index #content-wrapper:has(#products-5, .main-categories, .row.banners-row) main#content {
  width: 100% !important;
  max-width: 100% !important;
  padding: 0 !important;
  margin: 0 !important;
  float: none !important;
}

/* Section container */
#inspiration {
  padding: 0 var(--rl-gap);
  max-width: var(--rl-max);
  margin: 0 auto;
  width: 100%;
}

/* Section heading */
#inspiration .head-title {
  font-family: var(--rl-display);
  font-weight: 800;
  font-size: clamp(20px, 1.73vw, 34px);
  line-height: 1.29;
  color: var(--rl-black);
  padding: clamp(20px, 2.45vw, 28px) 0 clamp(14px, 1.22vw, 24px);
  margin: 0;
}

/* Asymmetric 2×2 grid
   Row 1: col1=60% (big)  col2=40% (small)
   Row 2: col1=60% (big)  col2=40% (small)  — items swapped via grid-areas
   a[1]=big-left(col1 r1), a[2]=small-right(col2 r1)
   a[3]=small-left(col2 r2 = 40%), a[4]=big-right(col1 r2 = 60%) */
.inspiro-wrapper {
  display: grid;
  grid-template-columns: 60.15% 39.85%;
  /* 1142 : 757 px at 1913 px inner */
  grid-template-rows: clamp(220px, 26.01vw, 500px) clamp(220px, 26.01vw, 500px);
  gap: clamp(6px, .71vw, 14px);
  margin-bottom: clamp(28px, 2.45vw, 48px);
  grid-template-areas:
    "big-left   small-right"
    "big-right  small-left";
}

/* a[1] → big-left  (col1, row1, 60%) */
.inspiro-wrapper>a:nth-child(1) {
  grid-area: big-left;
}

/* a[2] → small-right (col2, row1, 40%) */
.inspiro-wrapper>a:nth-child(2) {
  grid-area: small-right;
}

/* a[3] → small-left  (col2, row2, 40%) — visually right side */
.inspiro-wrapper>a:nth-child(3) {
  grid-area: small-left;
}

/* a[4] → big-right   (col1, row2, 60%) — visually left side */
.inspiro-wrapper>a:nth-child(4) {
  grid-area: big-right;
}

/* Each inspiration link */
.inspiro-wrapper>a {
  display: block;
  position: relative;
  overflow: hidden;
  border-radius: var(--rl-radius);
}

.inspiro-wrapper>a img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  display: block;
  transition: transform .65s var(--rl-ease-out);
}

.inspiro-wrapper>a:hover img {
  transform: scale(1.04);
}


/* ═══════════════════════════════════════════
   16. BLOG ARTICLES  (.homepage-blog-wrapper)
   Figma: BlogArticles — 3 articles in a row
   Padding: 48 px side  |  Image: 590 × 400 px
   Gap: 48 px
   ═══════════════════════════════════════════ */

.homepage-blog-wrapper {
  width: 100% !important;
  max-width: var(--rl-max) !important;
  margin: 0 auto !important;
  padding: 0 clamp(var(--rl-gap), 6.7vw, 100px) !important;
  display: flex !important;
  flex-direction: column !important;
  gap: 0 !important;
  float: none !important;
}

/* Blog section heading */
.homepage-blog-wrapper>.homepage-group-title {
  margin: 0 0 clamp(16px, 1.63vw, 32px) !important;
  flex: 0 0 auto;
}

/* Desktop track — 3 equal cards */
.homepage-blog-wrapper .rl-blog-track {
  display: grid !important;
  grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
  column-gap: clamp(14px, 1.53vw, 30px) !important;
  width: 100%;
}

/* News item cards — whole card in soft product wash */
.homepage-blog-wrapper .news-item {
  width: 100% !important;
  float: none !important;
  padding: 24px !important;
  margin-bottom: clamp(24px, 2.04vw, 40px) !important;
  min-width: 0;
  background: #fff;
  border-radius: var(--rl-radius);
  position: relative;
  box-sizing: border-box;
}

.homepage-blog-wrapper .news-item::before {
  content: '';
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: var(--rl-tint);
  opacity: 0.05;
  border-radius: inherit;
  z-index: 1;
}

.homepage-blog-wrapper .news-item>a {
  position: relative;
  z-index: 2;
  display: flex;
  flex-direction: column;
  color: var(--rl-black);
  height: 100%;
}

/* Portrait image frame inside the card */
.homepage-blog-wrapper .news-item .image {
  position: relative;
  overflow: hidden;
  border-radius: var(--rl-radius);
  aspect-ratio: var(--rl-product-img-ratio);
  width: 100%;
  background: transparent;
}

.homepage-blog-wrapper .news-item .image::before {
  content: none;
  display: none;
}

.homepage-blog-wrapper .news-item .image img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  object-position: center;
  display: block;
  padding: 0;
  transition: none;
}

.homepage-blog-wrapper .news-item>a:hover .image img {
  transform: none;
}

.homepage-blog-wrapper .news-item .text {
  padding: 20px 0 0;
  flex: 1;
  display: flex;
  flex-direction: column;
}

.homepage-blog-wrapper .news-item .title {
  font-family: var(--rl-display);
  font-weight: 600;
  font-size: clamp(16px, 1.12vw, 22px);
  line-height: 1.25;
  color: var(--rl-black);
  display: block;
  margin-bottom: 10px;
}

.homepage-blog-wrapper .news-item .description {
  font-family: var(--rl-body);
  font-size: 14px;
  line-height: 1.55;
  color: var(--rl-gray);
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
  flex: 1;
}

.homepage-blog-wrapper .news-item .read-article {
  margin-top: 16px;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  color: var(--rl-black);
  font-family: var(--rl-display);
  font-weight: 600;
  font-size: clamp(12px, .67vw, 15px);
  transition: gap .2s var(--rl-ease-out);
  text-transform: uppercase;
  border-bottom: 0 none;
  letter-spacing: 0.75px;
}

.homepage-blog-wrapper .news-item .read-article::after {
  content: '→';
  font-style: normal;
  transition: transform .2s var(--rl-ease-out);
  color: var(--rl-red);
}

.homepage-blog-wrapper .news-item>a:hover .read-article::after {
  transform: translateX(4px);
}


/* ═══════════════════════════════════════════
   17. BENEFITS BAR  (.footer-banners)
   Figma: BenefitsBar — h 108 px, 4 items
   Inner: 1440 px centered, 4 columns, gap 24 px
   ═══════════════════════════════════════════ */

.footer-banners.row.banner-wrapper {
  width: 100% !important;
  max-width: var(--rl-max) !important;
  margin: 0 auto !important;
  padding: clamp(20px, 1.68vw, 33px) var(--rl-gap) !important;
  display: flex !important;
  flex-direction: row !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 0 !important;
  background: var(--rl-white) !important;
  float: none !important;
}

.footer-banners .footer-banner {
  flex: 1 1 0 !important;
  max-width: 360px !important;
  float: none !important;
  padding: 0 !important;
  display: flex !important;
  justify-content: center !important;
}

.footer-banners .advantage-item {
  width: 100%;
}

.footer-banners .advantage-link {
  display: flex;
  align-items: center;
  gap: clamp(12px, 1.02vw, 20px);
  color: var(--rl-black);
  padding: clamp(8px, .56vw, 11px) clamp(8px, 1.22vw, 24px);
}

.footer-banners .advantage-link img {
  width: clamp(28px, 2.04vw, 40px);
  height: clamp(28px, 2.04vw, 40px);
  object-fit: contain;
  flex-shrink: 0;
  filter: brightness(0);
}

.footer-banners .advantage-link span {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.footer-banners h4 {
  display: block;
  font-family: var(--rl-display);
  font-weight: 600;
  font-size: clamp(12px, 0.74vw, 14px);
  line-height: 1.2;
  color: var(--rl-black);
  text-transform: uppercase;
  letter-spacing: 1.98px;
}

.footer-banners p {
  font-family: var(--rl-body);
  font-size: clamp(12px, 0.74vw, 14px);
  line-height: 1.2;
  color: var(--rl-gray-md);
}


/* ═══════════════════════════════════════════
   18. FOOTER  (.rolser-footer)
   Exact CSS from footer.html design — do not simplify
   ═══════════════════════════════════════════ */

.rolser-footer {
  --rf-bg: #111111;
  --rf-white: #ffffff;
  --rf-muted: rgba(255, 255, 255, .8);
  --rf-muted-soft: rgba(255, 255, 255, .65);
  --rf-muted-dim: rgba(255, 255, 255, .5);
  --rf-gray: #bfbfbf;
  --rf-red: #cc1f1f;
  --rf-border: #565656;
  --rf-border-soft: #3b3b3b;
  --rf-input-bg: rgba(128, 128, 128, .55);
  --rf-input-border: #333333;
  --rf-pay-bg: #2e2e2e;
  --rf-max: 1552px;
  --rf-font-display: "Outfit", sans-serif;
  --rf-font-body: "Inter", sans-serif;

  background: var(--rf-bg);
  color: var(--rf-white);
  font-family: var(--rf-font-body);
  width: 100%;
}

.rolser-footer a {
  color: inherit;
  text-decoration: underline;
  text-underline-position: from-font;
}

.rolser-footer a:hover {
  opacity: .85;
}

.rolser-footer img {
  display: block;
  max-width: 100%;
}

.rf-wrap {
  width: 100%;
  max-width: var(--rf-max);
  margin: 0 auto;
}

/* ── TOP: Spojte se s námi + Newsletter (2 cols) ── */

.rf-top {
  border-bottom: 1px solid var(--rf-border);
  padding: 64px var(--rl-gap) 48px;
}

.rf-top__grid {
  display: grid;
  grid-template-columns: minmax(0, 1.25fr) minmax(0, .75fr);
  gap: 40px;
  align-items: start;
}

.rf-support__title {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 20px 40px;
  min-height: 48px;
}

.rf-heading {
  font-family: var(--rf-font-display);
  font-weight: 800;
  font-size: 32px;
  line-height: 48px;
  letter-spacing: -.64px;
  color: var(--rf-white);
  margin: 0;
}

.rf-heading--newsletter .rf-heading__at {
  font-weight: 400;
}

.rf-lead {
  font-size: 16px;
  line-height: 24.48px;
  color: var(--rf-muted);
  padding: 10px 0 20px;
  margin: 0;
}

.rf-phones {
  display: flex;
  align-items: center;
  width: 100%;
  gap: 0;
}

.rf-phone {
  display: flex;
  flex: 1 0 0;
  align-items: center;
  gap: 15px;
  min-width: 0;
}

.rf-phone__icon {
  flex-shrink: 0;
  width: 46px;
  height: 46px;
  overflow: hidden;
}

.rf-phone__icon--helpline {
  height: 48px;
}

.rf-phone__icon--mail {
  display: flex;
  align-items: center;
  justify-content: center;
}

.rf-phone__icon img {
  width: 100%;
  height: 100%;
  object-fit: contain;
}

.rf-phone__label {
  font-family: var(--rf-font-display);
  font-weight: 500;
  font-size: 18px;
  line-height: 1;
  color: var(--rf-muted);
  margin: 0;
}

.rf-phone__number {
  display: block;
  font-family: var(--rf-font-display);
  font-weight: 800;
  font-size: 28px;
  line-height: 36px;
  letter-spacing: -.5px;
  color: var(--rf-white);
  text-decoration: underline;
  margin-top: 4px;
  word-break: break-word;
  white-space: nowrap;
}

/* Visually hidden — keep in a11y tree (display:none fails axe “Form elements must have labels”) */
#formNewsletterWidget label {
  position: absolute !important;
  width: 1px !important;
  height: 1px !important;
  padding: 0 !important;
  margin: -1px !important;
  overflow: hidden !important;
  clip: rect(0, 0, 0, 0) !important;
  white-space: nowrap !important;
  border: 0 !important;
}

#formNewsletterWidget fieldset {
  display: flex !important;
  flex-wrap: wrap !important;
}

#formNewsletterWidget .form-group.smart-label-wrapper {
  order: 1;
  flex: 1 1 auto;
  position: relative;
}

#formNewsletterWidget button.btn.btn-primary {
  order: 2;
}

#formNewsletterWidget .consents.consents-first {
  order: 3;
}

.rf-newsletter-form {
  display: flex;
  align-items: stretch;
  height: 54px;
  width: 100%;
}

.rf-newsletter-form input[type="email"],
#formNewsletterWidget input[name="email"] {
  flex: 1 1 auto;
  min-width: 0;
  height: 54px;
  width: 100%;
  border: 1px solid var(--rf-input-border);
  border-right: 0;
  background: var(--rf-input-bg);
  color: var(--rf-white);
  font-family: var(--rf-font-body);
  font-size: 14.4px;
  padding: 16px 19px;
  outline: none;
}

.rf-newsletter-form input::placeholder {
  color: var(--rf-muted-dim);
}

.rf-newsletter-form button,
#formNewsletterWidget button {
  flex-shrink: 0;
  height: 54px;
  border: 0;
  background: var(--rf-red);
  color: var(--rf-white);
  font-family: var(--rf-font-display);
  font-weight: 600;
  font-size: 11.84px;
  line-height: 17.76px;
  letter-spacing: 1.184px;
  text-transform: uppercase;
  padding: 15px 26px;
  cursor: pointer;
  outline: none;
  transition: opacity .15s ease, box-shadow .15s ease;
  -webkit-tap-highlight-color: transparent;
}

.rf-newsletter-form button:hover {
  opacity: .9;
}

.rf-consent,
#formNewsletterWidget .consents.consents-first .label {
  padding-top: 10px;
  font-size: 14px;
  line-height: 24.48px;
  color: var(--rf-muted-soft);
}

.rf-consent a,
#formNewsletterWidget .consents.consents-first .label a {
  font-weight: 600;
  color: var(--rf-muted-soft);
}

.rf-social-row {
  display: flex;
  gap: 20px;
  padding: 0;
  margin: 0;
}

.rf-social-row--title {
  flex-shrink: 0;
  align-items: center;
}

.rf-social-row a {
  display: block;
  width: 40px;
  height: 40px;
  overflow: hidden;
  text-decoration: none;
}

.rf-social-row img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  filter: brightness(0) invert(1);
}

/* ── MIDDLE: brand + nav ── */

.rf-main {
  padding: 56px var(--rl-gap) 0;
}

.rf-nav {
  display: grid;
  grid-template-columns: minmax(220px, 363px) repeat(3, minmax(0, 1fr));
  gap: 40px;
  padding-bottom: 41px;
  border-bottom: 1px solid var(--rf-border-soft);
}

.rf-logo {
  display: inline-block;
  width: 140px;
  height: 33px;
  text-decoration: none;
}

.rf-logo img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  object-position: left center;
}

.rf-brand-text {
  max-width: 220px;
  padding-top: 20px;
  font-size: 15px;
  line-height: 22.4px;
  color: var(--rf-gray);
}

.rf-brand-social {
  display: flex;
  gap: 15px;
  padding-top: 24px;
}

.rf-brand-social a {
  display: block;
  width: 32px;
  height: 32px;
  overflow: hidden;
  text-decoration: none;
}

.rf-brand-social img {
  width: 100%;
  height: 100%;
  object-fit: contain;
}

.rf-col-title {
  font-family: var(--rf-font-display);
  font-weight: 600;
  font-size: 13px;
  line-height: 17.28px;
  letter-spacing: 1.6128px;
  text-transform: uppercase;
  color: var(--rf-white);
}

.rf-links {
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding-top: 18px;
}

.rf-links a,
.rf-links span {
  font-size: 15px;
  line-height: 19.68px;
  color: var(--rf-gray);
}

.rf-links span {
  text-decoration: none;
}

.rf-map-link {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding-bottom: 4px;
  border-bottom: 1px solid rgba(255, 255, 255, .6);
  font-family: var(--rf-font-display);
  font-weight: 600;
  font-size: 11.52px;
  line-height: 17.28px;
  letter-spacing: 1.152px;
  text-transform: uppercase;
  color: var(--rf-white);
  text-decoration: none !important;
}

.rf-map-link:hover {
  opacity: .85;
}

/* ── BOTTOM: legal / payments ── */

.rf-bottom {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
  padding: 20px 0 40px;
  align-items: start;
}

.rf-legal {
  display: flex;
  flex-direction: column;
  gap: 10px;
  font-size: 14px;
  line-height: 1.7;
  color: var(--rf-gray);
}

.rf-legal strong {
  font-weight: 700;
  color: var(--rf-gray);
}

.rf-legal-right {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 20px;
}

.rf-legal-links {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: 24px;
  font-size: 14px;
  line-height: 1.7;
  color: var(--rf-gray);
}

.rf-legal-links a {
  text-decoration: none;
}

.rf-payments {
  display: flex;
  align-items: center;
  gap: 6px;
}

.rf-pay {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 51px;
  height: 34px;
  background: var(--rf-pay-bg);
  border-radius: var(--rl-radius);
  box-shadow: 0 10px 15px rgba(0, 0, 0, .1), 0 4px 6px rgba(0, 0, 0, .05);
  overflow: hidden;
}

.rf-pay img {
  width: 41px;
  height: auto;
  max-height: 24px;
  object-fit: contain;
}

.rf-pay--mc img {
  width: 31px;
}

/* Heureka + Zboží.cz — editable stars: remove/add <i class="s"> in HTML */
.rf-ratings {
  display: flex;
  align-items: center;
  justify-content: flex-start;
  gap: 30px;
  padding-top: 24px;
  width: 100%;
}

.rf-rating {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
  width: 100px;
}

.rf-rating__logo {
  display: block;
  object-fit: contain;
}

.rf-rating__logo--heureka {
  width: 40px;
  height: 40px;
}

.rf-rating__logo--zbozi {
  width: 120px;
  height: 23px;
  margin: 8.5px 0;
}

.rf-rating__meta {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 2px;
  width: 100%;
}

.rf-ratings .s {
  display: inline-block;
  width: 11px;
  height: 11px;
  flex-shrink: 0;
  background: url("/user/documents/upload/assets/images/star-off.svg") center / contain no-repeat;
}

.rf-rating__score {
  margin: 0 0 0 2px;
  font-family: var(--rf-font-body);
  font-weight: 800;
  font-size: 12px;
  line-height: 1;
  color: var(--rf-white);
  white-space: nowrap;
}

.rf-credits {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
  padding-bottom: 40px;
  font-size: 14px;
  line-height: 17.52px;
  color: var(--rf-gray);
}

.rf-credits__shoptet {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 10px;
}

.rf-credits__shoptet img {
  width: 13px;
  height: 13px;
  object-fit: contain;
}

.rf-credits__shoptet a,
.rf-credits a {
  text-decoration: underline;
}

/* ── FOOTER RESPONSIVE — horizontal gutters via --rl-gap ── */

@media (max-width: 1440px) {
  .rf-top {
    padding: 56px var(--rl-gap) 56px;
  }

  .rf-main {
    padding: 48px var(--rl-gap) 0;
  }

  .rf-top__grid {
    gap: 32px;
  }

  .rf-nav {
    grid-template-columns: minmax(200px, 300px) repeat(3, minmax(0, 1fr));
    gap: 32px;
  }

  .rf-phone__label {
    font-size: 16px;
  }

  .rf-phone__number {
    font-size: 22px;
    line-height: 30px;
  }
}

@media (max-width: 1200px) {

    .rf-phone__number {
        font-size: 22px;
        line-height: 30px;
    }

    .rf-phone__label {
      font-size: 15px;
    }

  .rf-top {
    padding: 48px var(--rl-gap);
  }

  .rf-main {
    padding: 40px var(--rl-gap) 0;
  }

  .rf-top__grid {
    grid-template-columns: minmax(0, 1.2fr) minmax(0, .8fr);
    gap: 32px;
  }

  .rf-nav {
    grid-template-columns: 1fr 1fr;
    gap: 36px 28px;
  }

  .rf-heading {
    font-size: 28px;
    line-height: 40px;
  }

  .rf-phones {
    flex-wrap: wrap;
    gap: 20px 16px;
  }

  .rf-phone {
    flex: 1 1 220px;
  }

  .rf-phone__number {
    font-size: 22px;
    line-height: 30px;
  }

  .rf-bottom {
    gap: 24px;
  }
}

@media (max-width: 992px) {
  .rf-top {
    padding: 48px var(--rl-gap) 40px;
  }

  .rf-main {
    padding: 40px var(--rl-gap) 0;
  }

  .rf-top__grid {
    grid-template-columns: 1fr;
    gap: 48px;
  }

  .rf-nav {
    gap: 36px 24px;
    padding-bottom: 36px;
  }

  .rf-heading {
    font-size: 26px;
    line-height: 36px;
  }

  .rf-phone__number {
    font-size: 20px;
    line-height: 28px;
    letter-spacing: 0px;
  }

  .rf-phone__label {
    font-size: 16px;
  }

  .rf-bottom {
    grid-template-columns: 1fr;
    padding: 28px 0 28px;
  }

  .rf-credits {
    grid-template-columns: 1fr;
    padding-top: 28px;
    padding-bottom: 28px;
  }

  .rf-legal-right {
    align-items: flex-start;
    gap: 16px;
  }

  .rf-ratings {
    justify-content: flex-start;
  }

  .rf-legal-links {
    justify-content: flex-start;
    gap: 12px 20px;
  }

  .rf-credits__shoptet {
    justify-content: flex-start;
  }
}

@media (max-width: 768px) {
  /*
    Mobile order (display:contents flattens wrappers):
    1 heading · 2 contacts · 3 social · 4 payments ·
    5–8 nav cols · 9 newsletter · 10–11 legal ·
    12 ratings · 13 credits
  */


  #formNewsletterWidget fieldset {justify-content: center;}
  .rf-consent, #formNewsletterWidget .consents.consents-first .label { font-size: 12px;}

  .rolser-footer {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    text-align: center;
  }

  .rolser-footer .rf-top,
  .rolser-footer .rf-top__grid,
  .rolser-footer .rf-support,
  .rolser-footer .rf-support__title,
  .rolser-footer .rf-main,
  .rolser-footer .rf-main > .rf-wrap,
  .rolser-footer .rf-nav,
  .rolser-footer .rf-brand,
  .rolser-footer .rf-bottom,
  .rolser-footer .rf-legal-right {
    display: contents;
  }

  .rolser-footer .rf-heading:not(.rf-heading--newsletter) {
    order: 1;
    padding: 48px var(--rl-gap) 0;
    font-size: 24px;
    line-height: 32px;
    letter-spacing: -.5px;
  }

  .rolser-footer .rf-support > .rf-lead {
    display: none;
  }

  .rolser-footer .rf-phones {
    order: 2;
    flex-direction: column;
    align-items: stretch;
    gap: 24px;
    padding: 24px var(--rl-gap) 0;
    margin-left: auto;
    margin-right: auto;
    width: fit-content;
    max-width: calc(100% - 2 * var(--rl-gap));
    box-sizing: border-box;
  }

  .rolser-footer .rf-phone {
    flex: 0 0 auto;
    justify-content: flex-start;
    text-align: left;
    width: 100%;
  }

  .rolser-footer .rf-social-row--title {
    order: 3;
    justify-content: center;
    padding: 48px var(--rl-gap) 0;
  }

  .rolser-footer .rf-payments {
    order: 4;
    justify-content: center;
    padding: 48px var(--rl-gap) 22px;
  }

  .rolser-footer .rf-nav > .rf-brand,
  .rolser-footer .rf-logo,
  .rolser-footer .rf-brand-text {
    order: 5;
  }

  .rolser-footer .rf-logo {
    padding: 36px var(--rl-gap) 0;
  }

  .rolser-footer .rf-brand-text {
    padding: 0 var(--rl-gap);
  }

  .rolser-footer .rf-nav > div:nth-child(2) {
    order: 6;
    padding: 36px var(--rl-gap) 0;
  }

  .rolser-footer .rf-nav > div:nth-child(3) {
    order: 7;
    padding: 36px var(--rl-gap) 0;
  }

  .rolser-footer .rf-nav > div:nth-child(4) {
    order: 8;
    padding: 36px var(--rl-gap) 0;
  }

  .rolser-footer .rf-newsletter {
    order: 9;
    padding: 40px var(--rl-gap) 0;
    width: 100%;
    box-sizing: border-box;
  }

  .rolser-footer .rf-newsletter .rf-lead {
    display: block;
    font-size: 15px;
    line-height: 22px;
    padding: 8px 0 16px;
  }

  .rolser-footer .rf-legal {
    order: 10;
    padding: 18px var(--rl-gap) 18px;
    text-align: center;
    font-size: 12px;
    line-height: 18px;
    margin: 0 auto;
    max-width: 310px;
  }

  .rolser-footer .rf-legal-links {
    order: 11;
    justify-content: center;
    gap: 10px 16px;
    font-size: 13px;
    padding: 20px var(--rl-gap) 0;
  }

  .rolser-footer .rf-ratings {
    order: 12;
    justify-content: center;
    gap: 28px;
    padding: 14px var(--rl-gap) 8px;
  }

  .rolser-footer .rf-credits {
    order: 13;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 12px;
    padding: 28px var(--rl-gap) 28px;
    font-size: 13px;
    text-align: center;
  }

  .rolser-footer .rf-logo {
    margin-left: auto;
    margin-right: auto;
  }

  .rolser-footer .rf-logo img {
    object-position: center center;
  }

  .rolser-footer .rf-links {
    align-items: center;
  }

  .rolser-footer .rf-brand-text {
    max-width: none;
    text-align: center;
  }

  .rolser-footer .rf-phone__number {
    font-size: 22px;
    line-height: 30px;
  }

  .rolser-footer .rf-newsletter-form {
    height: 50px;
  }

  .rolser-footer .rf-newsletter-form button,
  .rolser-footer #formNewsletterWidget button {
    padding: 12px 18px;
  }

  .rolser-footer .rf-credits__shoptet {
    justify-content: center;
  }
}



/* ═══════════════════════════════════════════
   18b. COLORBOX — "Added to cart" modal
   Premium flat design (Coach-like), free-ship meter
   Colorbox positions #colorbox via JS inline styles —
   !important overrides let us reposition it as a fixed panel.
   ═══════════════════════════════════════════ */

/* ── Backdrop ── */
#cboxOverlay {
  position: fixed !important;
  inset: 0 !important;
  width: 100% !important;
  height: 100% !important;
  background: var(--rl-overlay-bg) !important;
  backdrop-filter: var(--rl-overlay-blur) !important;
  -webkit-backdrop-filter: var(--rl-overlay-blur) !important;
  z-index: 8900 !important;
  cursor: pointer;
}

/* ── Modal outer shell ── */
#colorbox {
  position: fixed !important;
  top: 50% !important;
  bottom: auto !important;
  left: 50% !important;
  transform: translate(-50%, -50%) !important;
  width: min(720px, calc(100vw - 32px)) !important;
  height: auto !important;
  max-height: calc(100vh - 48px) !important;
  z-index: 9100 !important;
  background: #fff !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  border: 1px solid #e8e8e6 !important;
  overflow: hidden !important;
}

#colorbox.rl-ao {
  width: min(760px, calc(100vw - 32px)) !important;
}

/*
  Appear: hide until polish + height are final, then opacity-fade only.
  (Colorbox elastic size tween is disabled in JS — that was the strip→height jerk.)
*/
#cboxOverlay.rl-cbox-prep,
#colorbox.rl-cbox-prep {
  opacity: 0 !important;
  visibility: hidden !important;
  pointer-events: none !important;
  transition: none !important;
}

/* Enable opacity transition while still at 0, then .rl-cbox-ready → 1 */
#cboxOverlay.rl-cbox-prep.rl-cbox-anim,
#colorbox.rl-cbox-prep.rl-cbox-anim {
  visibility: hidden !important;
  transition: opacity .34s var(--rl-ease-out) !important;
}

#cboxOverlay.rl-cbox-ready,
#colorbox.rl-cbox-ready {
  opacity: 1 !important;
  visibility: visible !important;
  pointer-events: auto !important;
  transition: opacity .34s var(--rl-ease-out) !important;
}

#cboxOverlay.rl-cbox-out,
#colorbox.rl-cbox-out {
  opacity: 0 !important;
  pointer-events: none !important;
  transition: opacity .28s var(--rl-ease-out) !important;
}

@media (prefers-reduced-motion: reduce) {
  #cboxOverlay.rl-cbox-prep,
  #colorbox.rl-cbox-prep,
  #cboxOverlay.rl-cbox-prep.rl-cbox-anim,
  #colorbox.rl-cbox-prep.rl-cbox-anim,
  #cboxOverlay.rl-cbox-ready,
  #colorbox.rl-cbox-ready,
  #cboxOverlay.rl-cbox-out,
  #colorbox.rl-cbox-out {
    transition: none !important;
  }

  #cboxOverlay.rl-cbox-ready,
  #colorbox.rl-cbox-ready {
    opacity: 1 !important;
    visibility: visible !important;
    pointer-events: auto !important;
  }
}

/* ── Strip Colorbox frame chrome ── */
#cboxWrapper {
  width: 100% !important;
  height: auto !important;
  overflow: visible !important;
}

#cboxTopLeft,
#cboxTopCenter,
#cboxTopRight,
#cboxMiddleLeft,
#cboxMiddleRight,
#cboxBottomLeft,
#cboxBottomCenter,
#cboxBottomRight,
#cboxTitle,
#cboxCurrent,
#cboxPrevious,
#cboxNext,
#cboxSlideshow,
#cboxLoadingOverlay,
#cboxLoadingGraphic {
  display: none !important;
}

#cboxContent {
  width: 100% !important;
  height: auto !important;
  max-height: calc(100vh - 80px) !important;
  overflow-y: auto !important;
  overflow-x: hidden !important;
  float: none !important;
  clear: none !important;
  scrollbar-width: thin;
  scrollbar-color: #ddd transparent;
}

#cboxContent::-webkit-scrollbar {
  width: 3px;
}

#cboxContent::-webkit-scrollbar-thumb {
  background: #ddd;
}

#cboxLoadedContent {
  width: 100% !important;
  height: auto !important;
  overflow: visible !important;
  float: none !important;
}

/* ── Close — filter-close icon ── */
#cboxClose {
  position: absolute !important;
  top: 18px !important;
  right: 18px !important;
  width: 28px !important;
  height: 28px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  background: transparent url('../images/icon-filter-close.svg') center / 12px 12px no-repeat !important;
  border: none !important;
  border-radius: 0 !important;
  cursor: pointer !important;
  font-size: 0 !important;
  color: transparent !important;
  text-indent: -9999px !important;
  overflow: hidden !important;
  z-index: 10 !important;
  transition: opacity .15s !important;
  opacity: .75;
}

#cboxClose::before {
  display: none !important;
  content: none !important;
}

#cboxClose:hover {
  background-color: transparent !important;
  opacity: 1;
}

/* ── Advanced order content ── */
.advanced-order {
  padding: 32px 36px 28px;
  position: relative;
  background: #fff;
}

/* Title */
.advanced-order>.h1:first-child,
.advanced-order .rl-ao-title {
  font-family: var(--rl-display);
  font-size: 15px;
  font-weight: 700;
  color: #111;
  letter-spacing: .12em;
  text-transform: uppercase;
  margin: 0 0 22px;
  padding-right: 36px;
  line-height: 1.3;
}

/* Product confirmation row */
.advanced-order .rl-ao-product {
  display: grid;
  grid-template-columns: 96px minmax(0, 1fr);
  gap: 20px;
  align-items: start;
  margin: 0 0 22px;
}

.advanced-order .rl-ao-product__media {
  width: 96px;
  height: 96px;
  background: #f5f5f3;
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
}

.advanced-order .rl-ao-product__media img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  display: block;
}

.advanced-order .rl-ao-product__body {
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding-top: 2px;
}

.advanced-order .h2,
.advanced-order .rl-ao-product .h2 {
  font-family: var(--rl-display);
  font-size: 15px;
  font-weight: 500;
  color: #111;
  margin: 0;
  line-height: 1.35;
}

.advanced-order .rl-ao-product__meta {
  font-family: var(--rl-body);
  font-size: 11px;
  font-weight: 500;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: #888;
  margin: 0;
}

.advanced-order .rl-ao-product__price {
  font-family: var(--rl-display);
  font-size: 16px;
  font-weight: 700;
  color: #111;
  margin: 4px 0 0;
  line-height: 1.2;
}

/* Free shipping — same logic language as cart */
.advanced-order .extras-wrap {
  margin: 0 0 20px;
  padding: 0;
  background: none;
  border: none;
}

.advanced-order .extras-wrap .extra.delivery {
  display: flex !important;
  flex-direction: column;
  align-items: stretch;
  gap: 6px;
  width: 100%;
  margin: 15px 0 10px !important;
  padding: 14px;
  background: none !important;
  border: 1px solid #eee !important;
  border-radius: 0 !important;
  color: #111 !important;
  font-family: var(--rl-body);
  font-size: 13px;
  line-height: 1.35;
}

.advanced-order .extras-wrap .extra.delivery>span {
  display: block;
  width: 100%;
  line-height: 1.35;
}

.advanced-order .extras-wrap .extra.delivery>span::before {
  content: '';
  display: inline-block;
  width: 20px;
  height: 20px;
  margin-right: 8px;
  vertical-align: -5px;
  background: url('/user/documents/upload/assets/images/doprava-zdarma.svg') center / contain no-repeat;
}

.advanced-order .extras-wrap .extra.delivery strong {
  font-weight: 700;
  color: inherit;
}

.advanced-order .extras-wrap .price-range,
.advanced-order .free-shipping-bar,
.advanced-order .delivery-progress,
.advanced-order .extras-wrap .progress,
.advanced-order .rl-free-ship-bar {
  display: block;
  width: 100% !important;
  height: 4px;
  background: #e5e5e3;
  border-radius: 0;
  overflow: hidden;
  margin: 2px 0 0;
  padding: 0;
  box-shadow: none;
  box-sizing: border-box;
}

.advanced-order .extras-wrap .price-range>div,
.advanced-order .free-shipping-bar>*,
.advanced-order .delivery-progress>*,
.advanced-order .extras-wrap .progress .bar,
.advanced-order .extras-wrap .progress-bar,
.advanced-order .rl-free-ship-bar>i {
  display: block;
  background: var(--rl-red) !important;
  height: 100%;
  border-radius: 0;
  margin: 0;
  padding: 0;
}

.advanced-order .extra.delivery.rl-ship-free .price-range>div,
.advanced-order .extra.delivery.rl-ship-free .progress-bar,
.advanced-order .extra.delivery.rl-ship-free .progress .bar,
.advanced-order .rl-free-ship-bar>i {
  background: var(--rl-checkout-ok, #22a722) !important;
  width: 100%;
}

/* Actions — primary full-width, back as text */
.advanced-order .advancedOrder__buttons {
  display: flex;
  flex-direction: column;
  gap: 14px;
  margin: 0 0 28px;
  align-items: stretch;
}

.advanced-order .advancedOrder__buttons .btn {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: 100% !important;
  padding: 16px 22px !important;
  border-radius: 0 !important;
  font-family: var(--rl-display) !important;
  font-size: 12px !important;
  font-weight: 700 !important;
  letter-spacing: .14em !important;
  text-transform: uppercase !important;
  cursor: pointer !important;
  border: none !important;
  transition: background .15s, color .15s, opacity .15s !important;
  text-decoration: none !important;
  white-space: nowrap !important;
  box-shadow: none !important;
}

.advanced-order .advancedOrder__buttons .btn-conversion {
  order: 1;
  background: #111 !important;
  color: #fff !important;
}

.advanced-order .advancedOrder__buttons .btn-conversion:hover {
  background: #333 !important;
}

.advanced-order .advancedOrder__buttons .next-step-back,
.advanced-order .advancedOrder__buttons .colorbox-close.btn {
  order: 2;
  width: auto !important;
  align-self: center !important;
  padding: 0 !important;
  background: transparent !important;
  color: #111 !important;
  font-weight: 500 !important;
  letter-spacing: .06em !important;
  text-decoration: underline !important;
  text-underline-offset: 3px !important;
  text-transform: none !important;
  font-size: 13px !important;
}

.advanced-order .advancedOrder__buttons .next-step-back:hover,
.advanced-order .advancedOrder__buttons .colorbox-close.btn:hover {
  background: transparent !important;
  opacity: .65;
}

/* Suggestions */
.advanced-order .h1.advanced-order-suggestion {
  font-family: var(--rl-display);
  font-size: 12px;
  font-weight: 700;
  color: #111;
  letter-spacing: .14em;
  text-transform: uppercase;
  text-align: center;
  margin: 0 0 18px;
  padding-top: 8px;
  border-top: none;
}

/* Related products — clean flat cards, no ATC clutter */
#colorbox.rl-ao #products.products-block,
.advanced-order #products.products-block {
  display: flex !important;
  flex-wrap: nowrap !important;
  grid-template-columns: none !important;
  gap: 16px !important;
  margin: 0 0 8px !important;
  padding: 0 0 4px !important;
  width: 100% !important;
  overflow-x: auto;
  overflow-y: hidden;
  scroll-snap-type: x mandatory;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
}

#colorbox.rl-ao #products.products-block::-webkit-scrollbar,
.advanced-order #products.products-block::-webkit-scrollbar {
  display: none;
}

#colorbox.rl-ao .product,
.advanced-order #products .product {
  flex: 0 0 calc((100% - 48px) / 4) !important;
  width: calc((100% - 48px) / 4) !important;
  min-width: 0 !important;
  max-width: none !important;
  float: none !important;
  padding: 0 !important;
  margin: 0 !important;
  scroll-snap-align: start;
  display: block !important;
}

#colorbox.rl-ao .product.related-sm-screen-hide,
.advanced-order .product.related-sm-screen-hide {
  display: block !important;
}

#colorbox.rl-ao .p,
.advanced-order #products .p {
  display: flex !important;
  flex-direction: column !important;
  width: 100% !important;
  gap: 0;
}

#colorbox.rl-ao .rl-img-wrap,
.advanced-order #products .rl-img-wrap {
  position: relative;
  width: 100%;
}

#colorbox.rl-ao .rl-img-wrap>a.image::before,
.advanced-order #products .rl-img-wrap>a.image::before,
#colorbox.rl-ao .p>a.image::before,
.advanced-order #products .p>a.image::before {
  content: '';
  position: absolute;
  inset: 0;
  background: var(--rl-tint);
  opacity: 0.05;
  pointer-events: none;
  z-index: 2;
}

#colorbox.rl-ao .rl-ao-product__media {
  position: relative;
}

#colorbox.rl-ao .rl-ao-product__media::before {
  content: '';
  position: absolute;
  inset: 0;
  background: var(--rl-tint);
  opacity: 0.05;
  pointer-events: none;
  z-index: 2;
}

#colorbox.rl-ao .p>a.image,
#colorbox.rl-ao .rl-img-wrap>a.image,
.advanced-order #products .p>a.image,
.advanced-order #products .rl-img-wrap>a.image {
  display: block;
  position: relative;
  overflow: hidden;
  border-radius: 0;
  aspect-ratio: 1;
}

#colorbox.rl-ao .p a.image img,
#colorbox.rl-ao .rl-img-wrap a.image img,
.advanced-order #products .p a.image img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  padding: 10px;
  transform: none !important;
}

#colorbox.rl-ao .p-tools,
.advanced-order #products .p-tools,
#colorbox.rl-ao .availability,
.advanced-order #products .availability,
#colorbox.rl-ao .ratings-wrapper,
.advanced-order #products .ratings-wrapper,
#colorbox.rl-ao .flags,
.advanced-order #products .flags {
  display: none !important;
}

#colorbox.rl-ao .p-in,
.advanced-order #products .p-in {
  padding: 10px 0 0 !important;
}

#colorbox.rl-ao .p-in-in a.name,
.advanced-order #products .p-in-in a.name {
  display: -webkit-box !important;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  font-family: var(--rl-body);
  font-size: 12px;
  font-weight: 400;
  color: #111;
  text-decoration: none;
  line-height: 1.35;
  margin-bottom: 6px;
}

#colorbox.rl-ao .rl-price-row,
.advanced-order #products .rl-price-row {
  display: block !important;
  margin: 0;
}

#colorbox.rl-ao .prices,
.advanced-order #products .prices {
  display: block;
  margin: 0;
}

#colorbox.rl-ao .price-final strong,
.advanced-order #products .price-final strong {
  font-family: var(--rl-display);
  font-size: 13px;
  font-weight: 700;
  color: #111;
}

/* Hide "show all related" — keeps popup clean */
.advanced-order .browse-p {
  display: none !important;
}

/* Mobile sheet — only for modals (AO / shipping), NOT product gallery */
@media (max-width: 600px) {

  #colorbox:not(.productDetail),
  #colorbox.rl-ao {
    top: auto !important;
    bottom: 0 !important;
    left: 0 !important;
    right: 0 !important;
    width: 100% !important;
    transform: none !important;
    border-radius: 0 !important;
    max-height: 92vh !important;
    border-left: none !important;
    border-right: none !important;
    border-bottom: none !important;
  }

  .advanced-order {
    padding: 24px 20px 28px;
  }

  .advanced-order .rl-ao-product {
    grid-template-columns: 80px minmax(0, 1fr);
    gap: 14px;
  }

  .advanced-order .rl-ao-product__media {
    width: 80px;
    height: 80px;
  }

  #colorbox.rl-ao #products .product,
  .advanced-order #products .product {
    flex: 0 0 calc((100% - 16px) / 2.15) !important;
    width: calc((100% - 16px) / 2.15) !important;
  }
}


/* ═══════════════════════════════════════════
   18c. COLORBOX — Shipping options popup
   Same shell language as advanced-order modal
   ═══════════════════════════════════════════ */



#colorbox #cboxContent {
  max-height: calc(100vh - 64px) !important;
}

#colorbox #cboxClose {
  top: 20px !important;
  right: 20px !important;
}

#colorbox .content-modal {
  margin: 0;
  padding: 0;
  background: #fff;
}

#colorbox .shipping-options-popup {
  padding: 32px 36px 28px;
  position: relative;
  background: #fff;
  font-family: var(--rl-body);
  color: var(--rl-black);
}

#colorbox .shipping-options-popup>h1 {
  font-family: var(--rl-display);
  font-size: 15px;
  font-weight: 700;
  color: #111;
  letter-spacing: .12em;
  text-transform: uppercase;
  margin: 0 0 12px;
  padding-right: 36px;
  line-height: 1.3;
}

#colorbox .shipping-options-popup>p {
  margin: 0 0 22px;
  padding: 0;
  font-family: var(--rl-body);
  font-size: 13px;
  font-weight: 400;
  line-height: 1.5;
  color: #888;
  max-width: 52ch;
}

/* One shipping method per row */
#colorbox .shipping-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 72px auto;
  gap: 12px 16px;
  align-items: center;
  margin: 0;
  padding: 14px 0;
  border-top: 1px solid var(--rl-border);
  float: none !important;
  clear: both !important;
  overflow: visible;
}

#colorbox .shipping-row:last-of-type {
  border-bottom: 1px solid var(--rl-border);
}

#colorbox .shipping-row .payment-info {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px 8px;
  min-width: 0;
  float: none !important;
  margin: 0;
  padding: 0;
}

#colorbox .shipping-billing-name {
  font-family: var(--rl-display);
  font-size: 14px;
  font-weight: 600;
  line-height: 1.35;
  color: #111;
  font-style: normal;
}

#colorbox .shipping-row .question-tooltip {
  display: inline-flex !important;
  align-items: center;
  justify-content: center;
  flex: 0 0 auto;
  width: 16px;
  height: 16px;
  margin: 0 !important;
  padding: 0 !important;
  border-radius: 50%;
  background: #9c9c9c !important;
  color: #fff !important;
  font-family: var(--rl-display) !important;
  font-weight: 600 !important;
  font-size: 10px !important;
  line-height: 1 !important;
  cursor: help;
  text-indent: 0 !important;
  overflow: visible !important;
  float: none !important;
  vertical-align: middle;
}

#colorbox .shipping-row .payment-logo {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 72px;
  height: 36px;
  margin: 0;
  padding: 0;
  float: none !important;
}

#colorbox .shipping-row .payment-logo img {
  display: block;
  max-width: 72px;
  max-height: 32px;
  width: auto;
  height: auto;
  object-fit: contain;
}

#colorbox .shipping-row .payment-shipping-price {
  margin: 0 !important;
  padding: 0 !important;
  float: none !important;
  font-family: var(--rl-display);
  font-size: 14px;
  font-weight: 700;
  line-height: 1.2;
  color: #111;
  text-align: right;
  white-space: nowrap;
  justify-self: end;
}

#colorbox .shipping-row .payment-shipping-price.for-free {
  color: #2d7a2d !important;
}

/* Free-shipping meter — same as cart / advanced-order */
#colorbox .extra.delivery {
  display: flex !important;
  flex-direction: column;
  align-items: stretch;
  width: 100%;
  margin: 20px 0 0 !important;
  padding: 14px;
  background: none !important;
  border: 1px solid #eee !important;
  border-radius: 0 !important;
  float: none !important;
  clear: both !important;
  color: #111 !important;
  font-family: var(--rl-body);
  font-size: 13px;
  line-height: 1.4;
}

#colorbox .extra.delivery>span {
  display: block;
  width: 100%;
  line-height: 1.4;
}

#colorbox .extra.delivery>span::before {
  content: '';
  display: inline-block;
  width: 20px;
  height: 20px;
  margin-right: 8px;
  vertical-align: -5px;
  background: url('/user/documents/upload/assets/images/doprava-zdarma.svg') center / contain no-repeat;
}

#colorbox .extra.delivery strong {
  font-weight: 700;
  color: inherit;
}

#colorbox .extra.delivery .price-range {
  display: block;
  width: 100% !important;
  height: 4px;
  margin: 2px 0 0;
  padding: 0;
  background: #e5e5e3;
  border-radius: 0;
  overflow: hidden;
  box-shadow: none;
  box-sizing: border-box;
}

#colorbox .extra.delivery .price-range>div {
  display: block;
  height: 100%;
  margin: 0;
  padding: 0;
  background: var(--rl-red) !important;
  border-radius: 0;
}

#colorbox .extra.delivery.rl-ship-free .price-range>div {
  width: 100% !important;
  background: var(--rl-checkout-ok, #22a722) !important;
}

@media (max-width: 600px) {
  #colorbox {
    width: 100% !important;
  }

  #colorbox .shipping-options-popup {
    padding: 24px 20px 28px;
  }

  #colorbox .shipping-row {
    grid-template-columns: minmax(0, 1fr) auto;
    grid-template-areas:
      "info price"
      "logo price";
    gap: 8px 12px;
    padding: 12px 0;
  }

  #colorbox .shipping-row .payment-info {
    grid-area: info;
  }

  #colorbox .shipping-row .payment-logo {
    grid-area: logo;
    justify-content: flex-start;
    width: auto;
    height: 28px;
  }

  #colorbox .shipping-row .payment-logo img {
    max-height: 26px;
  }

  #colorbox .shipping-row .payment-shipping-price {
    grid-area: price;
    align-self: start;
  }
}


/* ═══════════════════════════════════════════
   18d. COLORBOX — Pickup / delivery point picker
   Universal selectors only (method id in #56-wrapper etc. varies)
   ═══════════════════════════════════════════ */

#colorbox.rl-pickup {
  width: min(760px, calc(100vw - 32px)) !important;
}

#colorbox.rl-pickup #cboxLoadedContent,
#colorbox.rl-pickup #cboxContent,
#colorbox.rl-pickup #cboxWrapper {
  width: 100% !important;
  min-width: 0 !important;
  height: auto !important;
}

#colorbox [class*="-delivery-point-form-wrapper"] {
  min-height: 0 !important;
  padding: 32px 36px 28px;
  font-family: var(--rl-body);
  color: var(--rl-black);
  background: #fff;
  box-sizing: border-box;
}

#colorbox .delivery-point-logos {
  display: flex;
  align-items: center;
  gap: 12px;
  margin: 0 0 16px;
  padding: 0;
  padding-right: 36px;
}

#colorbox .delivery-point-logos img,
#colorbox [class*="-delivery-point-form-wrapper"] [class$="-logo"] {
  display: block;
  max-height: 36px;
  width: auto;
  height: auto;
  object-fit: contain;
}

#colorbox [class*="-delivery-point-form-wrapper"] > p:not(.delivery-point-logos) {
  margin: 0 0 20px;
  padding: 0;
  font-size: 13px;
  font-weight: 400;
  line-height: 1.5;
  color: #888;
  max-width: 56ch;
}

/* Search row */
#colorbox .delivery-point-form fieldset {
  margin: 0;
  padding: 0;
  border: none;
}

#colorbox .delivery-point-form [class*="-delivery-point-choose-pickup-point"],
#colorbox .delivery-point-form table {
  display: block;
  width: 100%;
  margin: 0 0 8px;
  border: none !important;
  border-collapse: collapse;
}

#colorbox .delivery-point-form tbody,
#colorbox .delivery-point-form tr {
  display: flex;
  flex-wrap: wrap;
  align-items: stretch;
  gap: 8px;
  width: 100%;
}

#colorbox .delivery-point-form td {
  display: block;
  flex: 1 1 140px;
  margin: 0;
  padding: 0 !important;
  border: none !important;
  vertical-align: middle;
}

#colorbox .delivery-point-form .pickup-point-submit,
#colorbox .delivery-point-form td.pickup-point-submit {
  flex: 0 0 auto;
}

#colorbox .delivery-point-form .form-control {
  width: 100%;
  height: 45px;
  margin: 0;
  padding: 12px 15px !important;
  border: 1px solid #d8d5d0 !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  background: #fff !important;
  font-family: var(--rl-body);
  font-size: 14px;
  color: var(--rl-black);
  box-sizing: border-box;
}

#colorbox .delivery-point-form .form-control:focus {
  border-color: var(--rl-black) !important;
  outline: none;
}

#colorbox .delivery-point-form .btn.btn-primary,
#colorbox .delivery-point-result-table .btn.btn-primary,
#colorbox [class*="-choose-button"] {
  display: inline-flex !important;
  align-items: center;
  justify-content: center;
  min-height: 45px;
  margin: 0;
  padding: 12px 20px !important;
  border: none !important;
  border-radius: 0 !important;
  background: var(--rl-red) !important;
  color: #fff !important;
  font-family: var(--rl-display) !important;
  font-weight: 600 !important;
  font-size: 12px !important;
  letter-spacing: .1em;
  text-transform: uppercase;
  text-decoration: none !important;
  box-shadow: none !important;
  white-space: nowrap;
  cursor: pointer;
}

#colorbox .delivery-point-form .btn.btn-primary:hover,
#colorbox .delivery-point-result-table .btn.btn-primary:hover,
#colorbox [class*="-choose-button"]:hover {
  filter: brightness(0.92);
}

/* Results — class ends with -delivery-point-result (id prefix varies) */
#colorbox [class$="-delivery-point-result"] {
  margin-top: 12px;
}

#colorbox .delivery-point-result-table-wrap {
  max-height: min(48vh, 420px);
  overflow-y: auto;
  overflow-x: hidden;
  margin: 0 -4px;
  padding: 0 4px;
  scrollbar-width: thin;
  scrollbar-color: #ddd transparent;
}

#colorbox .delivery-point-result-table-wrap::-webkit-scrollbar {
  width: 3px;
}

#colorbox .delivery-point-result-table-wrap::-webkit-scrollbar-thumb {
  background: #ddd;
}

#colorbox .delivery-point-result-table {
  width: 100%;
  margin: 0;
  border: none !important;
  border-collapse: collapse;
}

#colorbox .delivery-point-result-table > tbody > tr {
  display: grid;
  grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr) auto;
  gap: 8px 16px;
  align-items: start;
  padding: 14px 0;
  border-top: 1px solid var(--rl-border);
}

#colorbox .delivery-point-result-table > tbody > tr:last-child {
  border-bottom: 1px solid var(--rl-border);
}

#colorbox .delivery-point-result-table > tbody > tr > td {
  display: block;
  margin: 0;
  padding: 0 !important;
  border: none !important;
  vertical-align: top;
}

#colorbox .delivery-point-result-table > tbody > tr > td:last-child,
#colorbox .delivery-point-result-table [class*="-delivery-point-submit"] {
  justify-self: end;
  align-self: center;
  text-align: right;
}

#colorbox .delivery-point-result-table strong[class$="-name"],
#colorbox .delivery-point-result-table strong {
  display: block;
  margin: 0 0 4px;
  font-family: var(--rl-display);
  font-size: 14px;
  font-weight: 600;
  line-height: 1.35;
  color: #111;
}

#colorbox .delivery-point-address {
  margin: 0;
  font-size: 13px;
  line-height: 1.4;
  color: #888;
}

#colorbox .pickup-point-show-opening-hours {
  display: inline-block;
  margin: 6px 0 0;
  font-family: var(--rl-body);
  font-size: 12px;
  line-height: 1.4;
  color: #888 !important;
  text-decoration: underline !important;
  text-underline-offset: 2px;
}

#colorbox .pickup-point-show-opening-hours:hover {
  color: var(--rl-black) !important;
}

#colorbox .pickup-point-opening-hours {
  display: none;
  width: auto;
  max-width: 100%;
  margin: 8px 0 0;
  border: none !important;
  border-collapse: collapse;
  font-size: 12px;
  line-height: 1.4;
  color: #555;
}

#colorbox .pickup-point-opening-hours.active {
  display: table;
}

#colorbox .pickup-point-opening-hours th,
#colorbox .pickup-point-opening-hours td {
  padding: 2px 8px 2px 0 !important;
  border: none !important;
  font-weight: 400;
  text-align: left;
  white-space: nowrap;
}

#colorbox .pickup-point-opening-hours th {
  padding-right: 12px !important;
  color: #888;
  font-weight: 500;
}

/* Autocomplete over colorbox */
.ui-autocomplete.ui-front {
  z-index: 9200 !important;
  max-height: 240px;
  overflow-y: auto;
  border: 1px solid var(--rl-border) !important;
  border-radius: 0 !important;
  background: #fff !important;
  box-shadow: none !important;
  font-family: var(--rl-body);
  font-size: 13px;
}

.ui-autocomplete .ui-menu-item-wrapper {
  padding: 8px 12px !important;
}

.ui-autocomplete .ui-menu-item-wrapper.ui-state-active,
.ui-autocomplete .ui-menu-item-wrapper.ui-state-focus {
  background: var(--rl-gray-lt, #f4f4f4) !important;
  border: none !important;
  color: var(--rl-black) !important;
  margin: 0 !important;
}

@media (max-width: 600px) {
  #colorbox.rl-pickup {
    width: 100% !important;
  }

  #colorbox [class*="-delivery-point-form-wrapper"] {
    padding: 24px 20px 28px;
  }

  #colorbox .delivery-point-form tr {
    flex-direction: column;
  }

  #colorbox .delivery-point-form td,
  #colorbox .delivery-point-form .pickup-point-submit {
    flex: 1 1 auto;
    width: 100%;
  }

  #colorbox .delivery-point-form .btn.btn-primary {
    width: 100%;
  }

  #colorbox .delivery-point-result-table > tbody > tr {
    grid-template-columns: 1fr;
    gap: 10px;
  }

  #colorbox .delivery-point-result-table > tbody > tr > td:last-child,
  #colorbox .delivery-point-result-table [class*="-delivery-point-submit"] {
    justify-self: stretch;
    text-align: left;
  }

  #colorbox .delivery-point-result-table .btn.btn-primary {
    width: 100%;
  }

  #colorbox .delivery-point-result-table-wrap {
    max-height: min(42vh, 360px);
  }
}


/* ═══════════════════════════════════════════
   18e. COLORBOX — Product question (Dotaz na prodejce)
   #formProductQuestion / .product-question-form
   ═══════════════════════════════════════════ */

#colorbox.rl-pq {
  width: min(520px, calc(100vw - 32px)) !important;
}

#colorbox.rl-pq #cboxContent,
#colorbox.rl-pq #cboxLoadedContent,
#colorbox.rl-pq #cboxWrapper {
  width: 100% !important;
  height: auto !important;
  max-height: none !important;
}

#colorbox.rl-pq .content-modal,
#colorbox .content-modal:has(.product-question-form),
#colorbox .content-modal:has(#formProductQuestion) {
  padding: 32px 36px 28px;
  position: relative;
  background: #fff;
  font-family: var(--rl-body);
  color: var(--rl-black);
  box-sizing: border-box;
}

#colorbox.rl-pq .content-modal > h1,
#colorbox .content-modal:has(.product-question-form) > h1,
#colorbox .content-modal:has(#formProductQuestion) > h1 {
  font-family: var(--rl-display);
  font-size: 15px;
  font-weight: 700;
  color: #111;
  letter-spacing: .12em;
  text-transform: uppercase;
  margin: 0 0 22px;
  padding-right: 36px;
  line-height: 1.3;
}

#colorbox .product-question-form,
#colorbox #formProductQuestion {
  margin: 0;
  padding: 0;
  border: none;
  background: transparent;
}

#colorbox .product-question-form fieldset,
#colorbox #formProductQuestion fieldset {
  margin: 0;
  padding: 0;
  border: none;
  min-width: 0;
}

#colorbox .product-question-form .form-legend,
#colorbox #formProductQuestion .form-legend {
  margin: 0 0 16px;
  padding: 0;
  font-family: var(--rl-body);
  font-size: 12px;
  font-weight: 400;
  line-height: 1.4;
  color: #888;
}

#colorbox .product-question-form .form-legend .required-asterisk,
#colorbox #formProductQuestion .form-legend .required-asterisk {
  display: inline;
  margin: 0;
  font-size: inherit;
  color: inherit;
}

#colorbox .product-question-form .form-group,
#colorbox #formProductQuestion .form-group {
  display: block !important;
  float: none !important;
  width: 100% !important;
  max-width: 100% !important;
  margin: 0 0 14px;
  padding: 0 !important;
  box-sizing: border-box;
}

#colorbox .product-question-form .smart-label-wrapper,
#colorbox #formProductQuestion .smart-label-wrapper,
#colorbox .product-question-form .form-control-wrapper,
#colorbox #formProductQuestion .form-control-wrapper {
  display: block !important;
  float: none !important;
  width: 100% !important;
  max-width: 100% !important;
  box-sizing: border-box;
}

#colorbox .product-question-form label,
#colorbox #formProductQuestion label {
  display: block;
  font-family: var(--rl-body);
  font-size: 12px;
  font-weight: 600;
  color: #666;
  text-transform: uppercase;
  letter-spacing: .06em;
  margin: 0 0 6px;
}

#colorbox .product-question-form .required-asterisk,
#colorbox #formProductQuestion .required-asterisk {
  display: inline;
  margin: 0;
  font-size: inherit;
  font-weight: inherit;
  color: inherit;
  text-transform: inherit;
  letter-spacing: inherit;
}

#colorbox .product-question-form .required-asterisk::before,
#colorbox #formProductQuestion .required-asterisk::before {
  content: none !important;
}

#colorbox .product-question-form .required-asterisk::after,
#colorbox #formProductQuestion .required-asterisk::after {
  content: ' *';
  color: var(--rl-red);
  font-weight: 500;
}

#colorbox .product-question-form .form-legend .required-asterisk::before,
#colorbox #formProductQuestion .form-legend .required-asterisk::before {
  content: '* ' !important;
  color: var(--rl-red);
}

#colorbox .product-question-form .form-legend .required-asterisk::after,
#colorbox #formProductQuestion .form-legend .required-asterisk::after {
  content: none !important;
}

#colorbox .product-question-form .form-control,
#colorbox #formProductQuestion .form-control {
  display: block !important;
  width: 100% !important;
  max-width: 100% !important;
  height: 45px;
  margin: 0;
  padding: 12px 15px !important;
  font-family: var(--rl-body);
  font-size: 14px;
  line-height: 1.4;
  color: var(--rl-black);
  background: #fff !important;
  border: 1px solid #d8d5d0 !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  outline: none;
  box-sizing: border-box !important;
  transition: border-color .2s, background .2s;
  -webkit-appearance: none;
  appearance: none;
}

#colorbox .product-question-form textarea.form-control,
#colorbox #formProductQuestion textarea.form-control {
  height: auto;
  min-height: 140px;
  resize: vertical;
  line-height: 1.55;
}

#colorbox .product-question-form .form-control:focus,
#colorbox #formProductQuestion .form-control:focus {
  border-color: var(--rl-black) !important;
  background: #fff !important;
  outline: none;
  box-shadow: none !important;
}

#colorbox .product-question-form .form-control.js-error,
#colorbox #formProductQuestion .form-control.js-error,
#colorbox .product-question-form .form-group.error .form-control,
#colorbox #formProductQuestion .form-group.error .form-control {
  border-color: var(--rl-red) !important;
}

#colorbox .product-question-form .consents,
#colorbox #formProductQuestion .consents {
  margin: 4px 0 0;
}

#colorbox .product-question-form .consents .label,
#colorbox #formProductQuestion .consents .label,
#colorbox .product-question-form .consents p.label,
#colorbox #formProductQuestion .consents p.label {
  display: block;
  margin: 0;
  padding: 0;
  font-family: var(--rl-body);
  font-size: 12px;
  font-weight: 400;
  line-height: 1.5;
  color: #888;
  text-transform: none;
  letter-spacing: 0;
}

#colorbox .product-question-form .consents a,
#colorbox #formProductQuestion .consents a {
  color: var(--rl-black);
  font-weight: 600;
  text-decoration: underline;
  text-decoration-color: rgba(17, 17, 17, .3);
  text-underline-offset: 2px;
  transition: color .15s ease, text-decoration-color .15s ease;
}

#colorbox .product-question-form .consents a:hover,
#colorbox #formProductQuestion .consents a:hover {
  color: var(--rl-red);
  text-decoration-color: var(--rl-red);
}

#colorbox .product-question-form .submit-wrapper,
#colorbox #formProductQuestion .submit-wrapper {
  margin: 20px 0 0;
  padding: 0;
}

#colorbox .product-question-form .btn.btn-primary,
#colorbox #formProductQuestion .btn.btn-primary {
  display: inline-flex !important;
  align-items: center;
  justify-content: center;
  width: 100%;
  min-height: 48px;
  margin: 0;
  padding: 14px 24px !important;
  border: none !important;
  border-radius: 0 !important;
  background: var(--rl-black) !important;
  color: var(--rl-white) !important;
  font-family: var(--rl-display);
  font-size: 14px;
  font-weight: 600;
  letter-spacing: .04em;
  text-transform: none;
  text-decoration: none !important;
  box-shadow: none !important;
  cursor: pointer;
  transition: background .2s ease;
  -webkit-tap-highlight-color: transparent;
}

#colorbox .product-question-form .btn.btn-primary:hover,
#colorbox #formProductQuestion .btn.btn-primary:hover {
  background: #333 !important;
  color: var(--rl-white) !important;
}

#colorbox .product-question-form .btn.btn-primary:focus-visible,
#colorbox #formProductQuestion .btn.btn-primary:focus-visible {
  outline: none;
  box-shadow: var(--rl-focus-ring-brand);
}

@media (max-width: 560px) {
  #colorbox.rl-pq {
    width: calc(100vw - 24px) !important;
  }

  #colorbox.rl-pq .content-modal,
  #colorbox .content-modal:has(.product-question-form),
  #colorbox .content-modal:has(#formProductQuestion) {
    padding: 28px 20px 24px;
  }

  #colorbox.rl-pq .content-modal > h1,
  #colorbox .content-modal:has(.product-question-form) > h1,
  #colorbox .content-modal:has(#formProductQuestion) > h1 {
    font-size: 14px;
    margin-bottom: 18px;
  }

  #colorbox .product-question-form textarea.form-control,
  #colorbox #formProductQuestion textarea.form-control {
    min-height: 120px;
  }
}


/* ═══════════════════════════════════════════
   19. MISC — Shoptet overrides
   ═══════════════════════════════════════════ */

/* Hide admin bar & skip link (JS also removes them) */
.admin-bar {
  display: none !important;
}

.skip-link {
  display: none !important;
}

/* Hide Shoptet default homepage boxes not in design */
.content-wrapper.latest-contribution-box,
.content-wrapper.latest-contributions-box,
.content-wrapper.reviews-box,
.content-wrapper.ratings-box,
.content-wrapper.latest-ratings-box,
[class*="contribution-box"],
[class*="ratings-box"] {
  display: none !important;
}

/* Hide default Shoptet footer (#footer) — rolser-footer replaces it */
#footer {
  display: none !important;
}

/* Cookie banner — bottom-centered pill, max 760 px */
.siteCookies {
  position: fixed !important;
  bottom: 20px !important;
  left: 50% !important;
  transform: translateX(-50%) !important;
  width: calc(100% - 48px) !important;
  max-width: 760px !important;
  z-index: 9000 !important;

  background: var(--rl-black) !important;
  color: var(--rl-white) !important;
  border-radius: var(--rl-radius) !important;
  box-shadow: 0 8px 32px rgba(0, 0, 0, .22), 0 2px 8px rgba(0, 0, 0, .12) !important;
  padding: 20px 24px !important;
  box-sizing: border-box !important;

  font-family: var(--rl-body);
  font-size: 13px;
  line-height: 1.5;
  /* smooth entrance */
  animation: rl-cookie-in .3s var(--rl-ease-out) both;
}

@keyframes rl-cookie-in {
  from {
    opacity: 0;
    transform: translateX(-50%) translateY(12px);
  }

  to {
    opacity: 1;
    transform: translateX(-50%) translateY(0);
  }
}

/* Scrolled state: subtle opacity reduction */
.siteCookies.siteCookies--scrolled {
  opacity: .96;
}

/* Inner flex form */
.siteCookies__form {
  display: flex !important;
  align-items: center !important;
  gap: 20px !important;
  flex-wrap: wrap !important;
}

/* Content: text + settings link */
.siteCookies__content {
  flex: 1 1 260px;
  min-width: 0;
}

.siteCookies__text {
  color: rgba(255, 255, 255, .82);
  font-size: 13px;
  line-height: 1.55;
}

.siteCookies__text a {
  color: var(--rl-white);
  text-decoration: underline;
  text-underline-offset: 2px;
}

.siteCookies__text a:hover {
  opacity: .75;
}

.siteCookies__links {
  margin: 6px 0 0;
  padding: 0;
}

/* Settings link — subtle ghost */
.siteCookies__link {
  background: none !important;
  border: none !important;
  padding: 0 !important;
  font-family: var(--rl-body) !important;
  font-size: 12px !important;
  color: rgba(255, 255, 255, .55) !important;
  cursor: pointer !important;
  text-decoration: underline !important;
  text-underline-offset: 2px !important;
  transition: color .2s !important;
}

.siteCookies__link:hover {
  color: var(--rl-white) !important;
}

/* Button group */
.siteCookies__buttonWrap {
  display: flex !important;
  gap: 8px !important;
  flex-shrink: 0 !important;
  align-items: center !important;
}

/* Shared button base */
.siteCookies__button {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  padding: 9px 20px !important;
  border-radius: var(--rl-radius) !important;
  font-family: var(--rl-display) !important;
  font-size: 13px !important;
  font-weight: 600 !important;
  letter-spacing: .03em !important;
  cursor: pointer !important;
  border: none !important;
  transition: background .18s, color .18s !important;
  white-space: nowrap !important;
}

/* Reject — outlined ghost */
.siteCookies__button[value="reject"] {
  background: rgba(255, 255, 255, .1) !important;
  color: rgba(255, 255, 255, .8) !important;
}

.siteCookies__button[value="reject"]:hover {
  background: rgba(255, 255, 255, .18) !important;
  color: var(--rl-white) !important;
}

/* Accept — solid white (primary action) */
.siteCookies__button[value="all"] {
  background: var(--rl-white) !important;
  color: var(--rl-black) !important;
}

.siteCookies__button[value="all"]:hover {
  background: #e8e8e8 !important;
}

/* Mobile: stack vertically */
@media (max-width: 600px) {
  .siteCookies {
    bottom: 0 !important;
    left: 0 !important;
    right: 0 !important;
    width: 100% !important;
    transform: none !important;
    border-radius: var(--rl-radius) !important;
    padding: 20px 16px 24px !important;
    animation: rl-cookie-in-mobile .3s var(--rl-ease-out) both;
  }

  @keyframes rl-cookie-in-mobile {
    from {
      opacity: 0;
      transform: translateY(20px);
    }

    to {
      opacity: 1;
      transform: translateY(0);
    }
  }

  .siteCookies__buttonWrap {
    width: 100% !important;
  }

  .siteCookies__button {
    flex: 1 !important;
  }
}

/* Overall wrapper should never clip */
.overall-wrapper {
  overflow: visible;
}

/* Remove unwanted Bootstrap gutter inside product grid */
.row {
  --bs-gutter-x: 0;
}


/* ═══════════════════════════════════════════
   20. RESPONSIVE
   1440 / 1200 / 992 / 768 px
   ═══════════════════════════════════════════ */

/* ── 1440 px ── */
@media (max-width: 1440px) {

  /* Mega menu: 4 columns stay, sizes scale via clamp already */

  /* FeaturedProducts: stay 5 cols but allow compress */
  .products.products-block,
  .products-block.products.products-block {
    grid-template-columns: repeat(5, 1fr) !important;
  }
}


/* ── 1200 px ── */
@media (max-width: 1200px) {

  /* Selected categories: 3 cols */
  #selected-categories .selected-wrapper {
    grid-template-columns: repeat(3, 1fr);
  }

  /* Featured products: 4 cols */
  .products.products-block,
  .products-block.products.products-block {
    grid-template-columns: repeat(4, 1fr) !important;
  }

  /* Blog: keep all 3 cards, slightly tighter gutter */
  .homepage-blog-wrapper {
    padding-left: var(--rl-gap) !important;
    padding-right: var(--rl-gap) !important;
  }

  .homepage-blog-wrapper .rl-blog-track {
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
    column-gap: var(--rl-carousel-gap) !important;
  }

  /* Mega menu: 4 cols */
  #navigation .menu-level-2 {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }
}

/* ── 992 px ── */
@media (max-width: 992px) {

  /* ── HAMBURGER BUTTON (.rl-hamburger) — injected via JS into .navigation-buttons ── */
  .rl-hamburger {
    display: flex !important;
    align-items: center;
    justify-content: center;
    width: var(--rl-icon-btn);
    height: var(--rl-icon-btn);
    min-width: var(--rl-icon-btn);
    min-height: var(--rl-icon-btn);
    border-radius: 50%;
    background: none;
    border: none;
    cursor: pointer;
    transition: background .2s, box-shadow .2s, transform .15s;
    flex-shrink: 0;
    order: 0;
    /* first in navigation-buttons */
    outline: none;
    -webkit-tap-highlight-color: transparent;
  }

  .rl-hamburger:hover {
    background: var(--rl-gray-lt);
  }

  .rl-hamburger svg {
    display: block;
    pointer-events: none;
  }

  /* ── MOBILE NAVIGATION DRAWER (.menu-helper) ── */
  .menu-helper {
    display: flex !important;
    flex-direction: column;
    position: fixed;
    top: 0;
    left: 0;
    width: min(400px, 100%);
    height: 100dvh;
    max-height: 100dvh;
    overflow: hidden;
    background: #fff;
    z-index: 700;
    box-shadow: 8px 0 40px rgba(0, 0, 0, .16);
    padding: 0;
    -webkit-overflow-scrolling: touch;
    transform: translateX(-105%);
    transition: transform .32s cubic-bezier(.22, 1, .36, 1);
    visibility: hidden;
  }

  .menu-helper.rl-open {
    transform: translateX(0);
    visibility: visible;
  }

  /* Hide Shoptet “Více” label */
  .menu-helper>span {
    display: none !important;
  }

  /* Mega-promo above subcategory tiles (same design as desktop) */
  .menu-helper .menu-level-2 > li.rl-mega-promo {
    display: block !important;
    grid-column: 1 / -1 !important;
    width: 100% !important;
    max-width: none !important;
    height: auto !important;
    margin: 0 0 2px !important;
    padding: 0 !important;
    background: none !important;
    float: none !important;
    flex: none !important;
  }

  .menu-helper .menu-level-2 > li.rl-mega-promo::before {
    display: none !important;
  }

  .menu-helper .rl-mega-promo,
  .menu-helper li.rl-mega-promo > .rl-mega-promo,
  .menu-helper .rl-mega-promo.rl-mega-promo--single {
    display: block !important;
    width: 100% !important;
    max-width: none !important;
    height: auto !important;
    grid-template-columns: none !important;
    overflow: visible;
  }

  .menu-helper .rl-mega-promo__card,
  .menu-helper .rl-mega-promo--single .rl-mega-promo__card {
    display: flex !important;
    width: auto !important;
    min-height: 0 !important;
    height: auto !important;
    max-height: none !important;
    aspect-ratio: auto !important;
    margin: -10px -10px -2px;
  }

  .menu-helper .rl-mega-promo__card > img,
  .menu-helper .rl-mega-promo__img {
    position: static !important;
    inset: auto !important;
    width: 100% !important;
    height: auto !important;
    max-width: none !important;
    max-height: none !important;
    object-fit: contain !important;
    display: block !important;
    transform: none !important;
  }

  .menu-helper .rl-mega-promo__card:hover > img,
  .menu-helper .rl-mega-promo__card:hover .rl-mega-promo__img {
    transform: none !important;
  }

  .menu-helper .rl-mega-promo__copy {
    position: absolute !important;
    left: 0 !important;
    right: 0 !important;
    bottom: 0 !important;
  }

  /* Sticky drawer header */
  .menu-helper::before {
    content: 'Menu';
    display: flex;
    align-items: center;
    flex-shrink: 0;
    height: 60px;
    padding: 0 20px;
    font-family: var(--rl-display);
    font-weight: 800;
    font-size: 18px;
    letter-spacing: -.02em;
    color: var(--rl-black);
    background: #fff;
    border-bottom: 1px solid #eee;
  }

  .menu-helper>.rl-close {
    position: absolute;
    top: 0;
    right: 0;
    z-index: 2;
    height: 60px;
    display: flex !important;
    align-items: center;
    justify-content: flex-end;
    padding: 0 12px;
    margin: 0;
    background: transparent;
    pointer-events: none;
  }

  .menu-helper>.rl-close button {
    pointer-events: auto;
    width: 44px;
    height: 44px;
    display: flex;
    align-items: center;
    justify-content: center;
    border: none;
    background: none;
    cursor: pointer;
    border-radius: 50%;
    transition: background .2s;
    font-size: 0;
    color: transparent;
  }

  .menu-helper>.rl-close button:hover,
  .menu-helper>.rl-close button:active {
    background: #f5f5f3;
  }

  .menu-helper>.rl-close button::before {
    content: '';
    display: block;
    width: 20px;
    height: 20px;
    background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23111' stroke-width='2.2' stroke-linecap='round'%3E%3Cpath d='M18 6L6 18M6 6l12 12'/%3E%3C/svg%3E") center/contain no-repeat;
  }

  /* Scrollable accordion list */
  .menu-helper .menu-level-1 {
    display: flex !important;
    flex-direction: column;
    flex: 1 1 auto;
    overflow-y: auto;
    overscroll-behavior: contain;
    padding: 4px 0 calc(24px + env(safe-area-inset-bottom, 0px));
    gap: 0;
    margin: 0;
    list-style: none;
    -webkit-overflow-scrolling: touch;
  }

  .menu-helper .menu-level-1>li {
    position: relative;
    border-bottom: 1px solid #f0f0ee;
  }

  .menu-helper .menu-level-1>li>a {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 18px 20px;
    font-family: var(--rl-display);
    font-weight: 600;
    font-size: 16px;
    line-height: 1.25;
    letter-spacing: -.02em;
    color: var(--rl-black);
    text-decoration: none;
    transition: background .15s;
    -webkit-tap-highlight-color: transparent;
  }

  .menu-helper .menu-level-1>li>a:active {
    background: #f7f7f5;
  }

  .menu-helper .menu-level-1>li>a b {
    font-weight: 600;
  }

  /* Chevron — larger tap target; only this expands accordion */
  .menu-helper .menu-level-1>li.ext>a .submenu-arrow {
    display: block !important;
    width: 20px;
    height: 20px;
    flex-shrink: 0;
    margin: -10px -8px -10px auto;
    padding: 12px;
    box-sizing: content-box;
    background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23111' stroke-width='2'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E") center/20px 20px no-repeat;
    transition: transform .25s cubic-bezier(.22, 1, .36, 1);
    -webkit-tap-highlight-color: transparent;
  }

  .menu-helper .menu-level-1>li.ext.rl-expanded>a .submenu-arrow {
    transform: rotate(180deg);
  }

  /* Submenu — hidden until accordion open (CRITICAL: only one display) */
  .menu-helper .menu-level-2 {
    display: none !important;
    position: static !important;
    visibility: visible !important;
    opacity: 1 !important;
    transform: none !important;
    width: 100% !important;
    max-width: none !important;
    left: auto !important;
    top: auto !important;
    box-shadow: none !important;
    border: none !important;
    border-top: 1px solid #eee !important;
    margin: 0 !important;
    padding: 10px 10px 10px !important;
    background: #fff !important;
    list-style: none;
    justify-content: stretch !important;
    align-items: stretch !important;
  }

  .menu-helper .menu-level-1>li.ext.rl-expanded>.menu-level-2 {
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 10px !important;
  }

  /* Card tiles — light grey plate, image + label inside */
  .menu-helper .menu-level-2>li {
    display: flex !important;
    flex-direction: column;
    align-items: center;
    justify-content: flex-start;
    gap: 10px;
    position: relative !important;
    float: none !important;
    width: 100% !important;
    height: 100%;
    margin: 0 !important;
    padding: 18px 12px 14px !important;
    border-radius: 2px;
    box-sizing: border-box;
    overflow: hidden;
  }

  .menu-helper .menu-level-2>li[class*="menu-item-"]::before {
    content: '';
    position: absolute;
    inset: 0;
    background: var(--rl-tint);
    opacity: .04;
    pointer-events: none;
    z-index: 2;
    border-radius: inherit;
  }

  .menu-helper .menu-level-2>li>a.menu-image {
    display: flex !important;
    align-items: center;
    justify-content: center;
    width: 100% !important;
    aspect-ratio: 1.15 / 1;
    max-height: none;
    background: transparent;
    border: none;
    border-radius: 0;
    overflow: hidden;
    position: relative;
    z-index: 1;
    padding: 0;
  }

  .menu-helper .menu-level-2>li>a.menu-image::before {
    display: none !important;
  }

  .menu-helper .menu-level-2>li>a.menu-image img {
    max-width: 78%;
    max-height: 78%;
    width: auto;
    height: auto;
    object-fit: contain;
    position: relative;
    z-index: 1;
  }

  .menu-helper .menu-level-2>li>div {
    text-align: center;
    width: 100%;
    position: relative;
    z-index: 1;
    margin-top: auto;
  }

  .menu-helper .menu-level-2>li>div>a {
    font-family: var(--rl-display);
    font-weight: 600;
    font-size: 13px;
    color: var(--rl-black, #111);
    line-height: 1.3;
    letter-spacing: -.01em;
    display: block;
    text-decoration: none;
  }

  .menu-helper .menu-level-2>li>div>a .rl-subcat-meta {
    display: block;
    margin-top: 2px;
    font-size: 11px;
    font-weight: 400;
    color: rgba(17, 17, 17, .55);
  }

  .menu-helper .menu-level-3 {
    display: none !important;
  }

  /* Backdrop inside #header — under drawer, never covers it (mobile only) */
  #header .rl-menu-backdrop,
  button.rl-menu-backdrop,
  .rl-menu-backdrop {
    display: none !important;
    position: fixed !important;
    inset: 0 !important;
    width: auto !important;
    height: auto !important;
    z-index: 1;
    background: var(--rl-overlay-bg) !important;
    backdrop-filter: var(--rl-overlay-blur);
    -webkit-backdrop-filter: var(--rl-overlay-blur);
    border: none !important;
    padding: 0 !important;
    margin: 0 !important;
    overflow: visible !important;
    pointer-events: auto !important;
    visibility: visible !important;
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
    animation: rl-fade-in .2s ease;
  }

  body.rl-menu-open #header .rl-menu-backdrop,
  body.rl-menu-open button.rl-menu-backdrop,
  body.rl-menu-open .rl-menu-backdrop {
    display: block !important;
  }

  body.rl-menu-open {
    overflow: hidden;
  }

  /* Drawer above backdrop within #header stacking context */
  body.rl-menu-open #header {
    z-index: 700;
  }

  body.rl-menu-open .menu-helper,
  #header .menu-helper {
    z-index: 2;
  }

  /* ── Mobile header: [☰ user]  LOGO  [search cart] ── */
  #header .container.navigation-wrapper {
    display: flex !important;
    flex-wrap: nowrap !important;
    align-items: center !important;
    justify-content: stretch !important;
    height: 56px !important;
    min-height: 56px !important;
    padding-top: 0 !important;
    padding-bottom: 0 !important;
    padding-left: var(--rl-gap) !important;
    padding-right: var(--rl-gap) !important;
    position: relative !important;
    gap: 0 !important;
  }

  #header .site-name-wrapper {
    position: absolute !important;
    left: 50% !important;
    top: 50% !important;
    transform: translate(-50%, -50%) !important;
    order: 0 !important;
    z-index: 2;
    pointer-events: auto;
  }

  #header .site-name img {
    width: 110px;
    height: auto;
  }

  #header .header-top {
    display: flex !important;
    flex-direction: row !important;
    align-items: center !important;
    justify-content: flex-start !important;
    width: 100% !important;
    order: 1 !important;
    gap: 0 !important;
    height: 38px;
  }

  #header .rl-hamburger {
    order: 1 !important;
    display: flex !important;
    margin: 0 !important;
  }

  #header .rl-user-btn {
    order: 2 !important;
  }

  #header .search {
    order: 10 !important;
    margin-left: auto !important;
  }

  #header .navigation-buttons {
    order: 11 !important;
  }

  nav#navigation {
    display: none !important;
  }

  /* Drawer polish — keep accordion layout; no overrides that re-show submenu */
  .menu-helper {
    border-radius: 0;
  }

  /* ── Top benefits: icon + title only (screen 1) ── */
  .benefitBanner.position--benefitHomepage {
    flex-wrap: nowrap !important;
    justify-content: space-between;
    align-items: flex-start;
    padding: 18px var(--rl-gap) 16px !important;
    border-bottom: 1px solid var(--rl-border);
    gap: 8px;
    overflow: visible;
  }

  .benefitBanner.position--benefitHomepage .benefitBanner__item {
    flex: 1 1 0 !important;
    max-width: none !important;
    flex-direction: column;
    align-items: center;
    justify-content: flex-start;
    gap: 10px;
    padding: 0 4px !important;
    min-height: 0 !important;
    border: none !important;
    text-align: center;
  }

  .benefitBanner.position--benefitHomepage .benefitBanner__picture {
    min-width: 0;
  }

  .benefitBanner.position--benefitHomepage .benefitBanner__img {
    max-height: 36px;
  }

  .benefitBanner.position--benefitHomepage .benefitBanner__title {
    font-size: 11px;
    letter-spacing: 0.8px;
    line-height: 1.25;
  }

  .benefitBanner.position--benefitHomepage .benefitBanner__data {
    display: none !important;
  }

  /* ── Category strip: compact 2×2 — malé fotky bez šedého letterboxu ── */
  .main-categories {
    grid-template-columns: repeat(2, 1fr);
    gap: 12px;
    padding: 20px var(--rl-gap) 24px;
  }

  .main-categories .category-link {
    container-type: normal;
  }

  .main-categories .category-link:nth-child(n + 5) {
    display: none;
  }

  .main-categories .category-image {
    background: transparent;
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 0;
    aspect-ratio: auto;
  }

  .main-categories .category-image img {
    aspect-ratio: auto;
    width: 100%;
    height: 200px;
    max-height: 200px;
    object-fit: contain;
    object-position: center center;
    background: transparent;
  }

  .main-categories .category-link p {
    margin-top: 12px;
    font-size: 11px;
    letter-spacing: 0.8px;
    gap: 5px;
  }

  /* Inspiration: 4 stacked (preferred mobile) */
  .inspiro-wrapper {
    grid-template-columns: 1fr !important;
    grid-template-rows: none !important;
    grid-template-areas: none !important;
    gap: 10px;
  }

  .inspiro-wrapper>a:nth-child(1),
  .inspiro-wrapper>a:nth-child(2),
  .inspiro-wrapper>a:nth-child(3),
  .inspiro-wrapper>a:nth-child(4) {
    grid-column: auto !important;
    grid-row: auto !important;
    grid-area: auto !important;
    aspect-ratio: 16 / 9;
  }

  /* Blog → carousel (same peek as .collection): 2 + ⅓ */
  .homepage-blog-wrapper {
    padding-left: 0 !important;
    padding-right: 0 !important;
    row-gap: 0 !important;
  }

  .homepage-blog-wrapper>.homepage-group-title {
    padding-left: var(--rl-gap) !important;
    padding-right: var(--rl-gap) !important;
    margin-bottom: 16px !important;
  }

  .homepage-blog-wrapper .rl-blog-track {
    display: flex !important;
    flex-wrap: nowrap !important;
    grid-template-columns: none !important;
    gap: var(--rl-carousel-gap);
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    scroll-padding-inline: var(--rl-gap);
    padding: 0 var(--rl-gap) !important;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
  }

  .homepage-blog-wrapper .rl-blog-track::-webkit-scrollbar {
    display: none;
  }

  .homepage-blog-wrapper .rl-blog-track .news-item {
    --rl-peek-n: 2.333;
    flex: 0 0 calc((100% - (var(--rl-peek-n) - 1) * var(--rl-carousel-gap)) / var(--rl-peek-n)) !important;
    width: calc((100% - (var(--rl-peek-n) - 1) * var(--rl-carousel-gap)) / var(--rl-peek-n)) !important;
    max-width: calc((100% - (var(--rl-peek-n) - 1) * var(--rl-carousel-gap)) / var(--rl-peek-n)) !important;
    min-width: calc((100% - (var(--rl-peek-n) - 1) * var(--rl-carousel-gap)) / var(--rl-peek-n)) !important;
    margin-bottom: 0 !important;
    scroll-snap-align: start;
    display: block !important;
  }

  .homepage-blog-wrapper .news-item .image {
    aspect-ratio: var(--rl-product-img-ratio);
    max-height: none;
  }

  .homepage-blog-wrapper .news-item .image img {
    max-height: none;
    padding: 0;
    object-fit: contain;
  }

  .homepage-blog-wrapper .news-item .text {
    padding: 12px 0 0 !important;
  }

  /* Homepage / detail product rails → carousel (not category listing / productsTop) */
  body.in-index .products.products-block:not(#products-10),
  body.type-detail .rl-pd-related .products.products-block,
  body.type-detail .rl-pd-alternative .products.products-block,
  body.type-detail .products-related.products-block,
  body.type-detail .products-alternative.products-block,
  body.type-detail #productsAlternative .products.products-block,
  body.type-detail #tab-content .products.products-block,
  body.type-product .rl-pd-related .products.products-block,
  body.type-product .rl-pd-alternative .products.products-block,
  body.type-product .products-related.products-block,
  body.type-product .products-alternative.products-block,
  body.type-product #productsAlternative .products.products-block,
  body.type-product #tab-content .products.products-block {
    display: flex !important;
    flex-wrap: nowrap !important;
    grid-template-columns: none !important;
    gap: var(--rl-carousel-gap) !important;
    overflow-x: auto;
    overflow-y: hidden;
    scroll-snap-type: x mandatory;
    margin-bottom: 28px !important;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
  }

  /* Homepage product rails: own gutter (mobile HTML #content-wrapper is full-bleed).
     Drop parent container side pad so we don't double-inset on desktop HTML. */
  body.in-index .content-wrapper.container:has(#products-5),
  body.in-index .content-wrapper.container:has(.homepage-products-heading-5) {
    padding-left: 0 !important;
    padding-right: 0 !important;
  }

  body.in-index .products.products-block:not(#products-10) {
    scroll-padding-inline: var(--rl-gap);
    padding-left: var(--rl-gap) !important;
    padding-right: var(--rl-gap) !important;
  }

  /* Detail already padded by #content-wrapper → no nested gutter
     (titles + first card share the same left edge) */
  body.type-detail .rl-pd-related .products.products-block,
  body.type-detail .rl-pd-alternative .products.products-block,
  body.type-detail .products-related.products-block,
  body.type-detail .products-alternative.products-block,
  body.type-detail #productsAlternative .products.products-block,
  body.type-detail #tab-content .products.products-block,
  body.type-product .rl-pd-related .products.products-block,
  body.type-product .rl-pd-alternative .products.products-block,
  body.type-product .products-related.products-block,
  body.type-product .products-alternative.products-block,
  body.type-product #productsAlternative .products.products-block,
  body.type-product #tab-content .products.products-block {
    scroll-padding-inline: 0;
    padding-left: 0 !important;
    padding-right: 0 !important;
  }

  body.in-index .products.products-block:not(#products-10)::-webkit-scrollbar,
  body.type-detail .rl-pd-related .products.products-block::-webkit-scrollbar,
  body.type-detail .rl-pd-alternative .products.products-block::-webkit-scrollbar,
  body.type-detail .products-related.products-block::-webkit-scrollbar,
  body.type-detail .products-alternative.products-block::-webkit-scrollbar,
  body.type-detail #productsAlternative .products.products-block::-webkit-scrollbar,
  body.type-detail #tab-content .products.products-block::-webkit-scrollbar,
  body.type-product .rl-pd-related .products.products-block::-webkit-scrollbar,
  body.type-product .rl-pd-alternative .products.products-block::-webkit-scrollbar,
  body.type-product .products-related.products-block::-webkit-scrollbar,
  body.type-product .products-alternative.products-block::-webkit-scrollbar,
  body.type-product #productsAlternative .products.products-block::-webkit-scrollbar,
  body.type-product #tab-content .products.products-block::-webkit-scrollbar {
    display: none;
  }

  /* 1 full + ½ next */
  body.in-index .products.products-block:not(#products-10)>.product,
  body.type-detail .rl-pd-related .products.products-block>.product,
  body.type-detail .rl-pd-alternative .products.products-block>.product,
  body.type-detail .products-related.products-block>.product,
  body.type-detail .products-alternative.products-block>.product,
  body.type-detail #productsAlternative .products.products-block>.product,
  body.type-detail #tab-content .products.products-block>.product,
  body.type-product .rl-pd-related .products.products-block>.product,
  body.type-product .rl-pd-alternative .products.products-block>.product,
  body.type-product .products-related.products-block>.product,
  body.type-product .products-alternative.products-block>.product,
  body.type-product #productsAlternative .products.products-block>.product,
  body.type-product #tab-content .products.products-block>.product {
    flex: 0 0 calc((100% - var(--rl-carousel-gap)) / 1.5) !important;
    width: calc((100% - var(--rl-carousel-gap)) / 1.5) !important;
    max-width: none !important;
    scroll-snap-align: start;
  }

  /* Titles share the same --rl-gap rail as the product cards */
  body.in-index .homepage-group-title,
  body.in-index .homepage-products-heading-5 {
    padding-left: var(--rl-gap) !important;
    padding-right: var(--rl-gap) !important;
  }

  body.in-index .products.products-block:not(#products-10) .rl-img-wrap>a.image,
  body.type-detail .rl-pd-related .rl-img-wrap>a.image,
  body.type-detail .rl-pd-alternative .rl-img-wrap>a.image,
  body.type-detail #productsAlternative .rl-img-wrap>a.image,
  body.type-detail #tab-content .products .rl-img-wrap>a.image,
  body.type-product .rl-pd-related .rl-img-wrap>a.image,
  body.type-product .rl-pd-alternative .rl-img-wrap>a.image,
  body.type-product #productsAlternative .rl-img-wrap>a.image,
  body.type-product #tab-content .products .rl-img-wrap>a.image {
    aspect-ratio: 1 / 1.15;
  }

  body.type-detail .rl-pd-related,
  body.type-detail .rl-pd-alternative,
  body.type-product .rl-pd-related,
  body.type-product .rl-pd-alternative {
    padding-left: 0 !important;
    padding-right: 0 !important;
  }

  /* Titles share the same content gutter as cards (no extra inset) */
  body.type-detail .rl-pd-related .products-related-header,
  body.type-detail .rl-pd-alternative .rl-pd-section-title,
  body.type-product .rl-pd-related .products-related-header,
  body.type-product .rl-pd-alternative .rl-pd-section-title {
    padding-left: 0 !important;
    padding-right: 0 !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
  }

  /* Collection → carousel: 2 + ⅓ (tablet 992 → 769) */
  .collection {
    display: flex !important;
    flex-wrap: nowrap !important;
    grid-template-columns: none !important;
    gap: var(--rl-carousel-gap);
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    scroll-padding-inline: var(--rl-gap);
    padding: 0 var(--rl-gap) !important;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
  }

  .collection::-webkit-scrollbar {
    display: none;
  }

  .collection>a {
    --rl-peek-n: 2.333;
    flex: 0 0 calc((100% - (var(--rl-peek-n) - 1) * var(--rl-carousel-gap)) / var(--rl-peek-n)) !important;
    width: calc((100% - (var(--rl-peek-n) - 1) * var(--rl-carousel-gap)) / var(--rl-peek-n)) !important;
    max-width: calc((100% - (var(--rl-peek-n) - 1) * var(--rl-carousel-gap)) / var(--rl-peek-n)) !important;
    min-width: calc((100% - (var(--rl-peek-n) - 1) * var(--rl-carousel-gap)) / var(--rl-peek-n)) !important;
    max-height: none;
    scroll-snap-align: start;
  }

  /* Proportional frame — full image visible, no fixed-height crop */
  .collection>a .category-image {
    width: 100%;
    height: auto;
    max-height: none;
    aspect-ratio: 628 / 795;
    background: var(--rl-gray-lt, #f3f3f3);
  }

  .collection>a .category-image img {
    width: 100%;
    height: 100%;
    max-height: none;
    aspect-ratio: unset;
    object-fit: contain;
    object-position: center center;
  }

  .collection .category-meta {
    padding: clamp(12px, 4cqi, 20px);
  }

  .collection h3 {
    font-size: clamp(15px, 4.5cqi, 22px);
  }

  .collection p {
    font-size: clamp(11px, 2.2cqi, 13px);
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
  }

  /* Selected categories → start / center / end snap + peek */
  #selected-categories .selected-wrapper {
    --rl-peek-n: 2.15;
    --rl-slide-w: calc((100% - (var(--rl-peek-n) - 1) * var(--rl-carousel-gap)) / var(--rl-peek-n));
    display: flex !important;
    flex-wrap: nowrap !important;
    grid-template-columns: none !important;
    gap: var(--rl-carousel-gap);
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    scroll-padding-inline: var(--rl-gap);
    padding: 0 var(--rl-gap) clamp(24px, 4vw, 36px) !important;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
  }

  #selected-categories .selected-wrapper::-webkit-scrollbar {
    display: none;
  }

  #selected-categories .selected-wrapper>a {
    flex: 0 0 var(--rl-slide-w) !important;
    width: var(--rl-slide-w) !important;
    max-width: var(--rl-slide-w) !important;
    min-width: var(--rl-slide-w) !important;
    scroll-snap-align: center;
    scroll-snap-stop: always;
    container-type: inline-size;
  }

  /* First flush left, last flush right; middle stays centered */
  #selected-categories .selected-wrapper>a:first-child {
    scroll-snap-align: start;
  }

  #selected-categories .selected-wrapper>a:last-child {
    scroll-snap-align: end;
  }

  #selected-categories .selected-image {
    width: 100%;
    max-height: none;
    aspect-ratio: 307 / 480;
    background: var(--rl-gray-lt, #f3f3f3);
  }

  #selected-categories .selected-image img {
    width: 100%;
    height: 100%;
    max-height: none;
    aspect-ratio: unset;
    object-fit: contain;
    object-position: center center;
  }

  #selected-categories .selected-meta h3 {
    font-size: clamp(13px, 5.5cqi, 17px);
  }

  #selected-categories::before {
    padding-left: var(--rl-gap);
    padding-right: var(--rl-gap);
  }

  /* Footer benefits → full-width slide rail (autoslide via JS) */
  .footer-banners.row.banner-wrapper {
    display: flex !important;
    flex-wrap: nowrap !important;
    justify-content: flex-start !important;
    align-items: stretch !important;
    gap: var(--rl-carousel-gap) !important;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    scroll-padding-inline: var(--rl-gap);
    padding: 16px var(--rl-gap) !important;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
  }

  .footer-banners.row.banner-wrapper::-webkit-scrollbar {
    display: none;
  }

  .footer-banners .footer-banner {
    flex: 0 0 100% !important;
    min-width: 100% !important;
    max-width: 100% !important;
    scroll-snap-align: start;
  }

  .footer-banners .advantage-link {
    justify-content: center;
    padding: 8px 4px;
  }

  /* Listing stays 2-col grid (not a carousel) */
  body.type-category #products.products.products-page.products-block {
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 12px 10px !important;
    width: 100% !important;
    max-width: 100% !important;
    overflow-x: clip !important;
    padding-left: 0 !important;
    padding-right: 0 !important;
    box-sizing: border-box !important;
  }

  /* Footer — tablet breathing room (mobile order lives in main footer @768) */
  .rolser-footer .rf-top {
    padding: 48px var(--rl-gap) 40px;
  }

  .rolser-footer .rf-top__grid {
    grid-template-columns: 1fr;
    gap: 40px;
  }

  .rolser-footer .rf-main {
    padding: 40px var(--rl-gap) 0;
  }

  .rolser-footer .rf-nav {
    gap: 36px 24px;
    padding-bottom: 36px;
  }

  .rolser-footer .rf-heading {
    font-size: 22px;
    line-height: 30px;
  }

  .rolser-footer .rf-bottom {
    padding: 28px 0 28px;
  }

  .rolser-footer .rf-credits {
    padding-top: 28px;
    padding-bottom: 28px;
  }
}


/* ── 768 px ── */
@media (max-width: 768px) {

  /* Hero */
  #carousel .item img,
  #carousel .carousel-inner {
    height: auto !important;
    min-height: auto !important;
  }

  /* Collection → 1 + ⅓ · selected categories → start/center/end 1.15 */
  .collection>a {
    --rl-peek-n: 1.333;
    flex: 0 0 calc((100% - (var(--rl-peek-n) - 1) * var(--rl-carousel-gap)) / var(--rl-peek-n)) !important;
    width: calc((100% - (var(--rl-peek-n) - 1) * var(--rl-carousel-gap)) / var(--rl-peek-n)) !important;
    max-width: calc((100% - (var(--rl-peek-n) - 1) * var(--rl-carousel-gap)) / var(--rl-peek-n)) !important;
    min-width: calc((100% - (var(--rl-peek-n) - 1) * var(--rl-carousel-gap)) / var(--rl-peek-n)) !important;
  }

  #selected-categories .selected-wrapper {
    --rl-peek-n: 1.15;
  }

  /* Category tiles a bit tighter */
  .main-categories {
    gap: 10px;
    padding: 38px var(--rl-gap) 20px;
  }

  .main-categories .category-image img {
    height: 180px;
    max-height: 180px;
  }

  .main-categories .category-link p {
    margin-top: 10px;
    font-size: 10px;
  }

  .benefitBanner.position--benefitHomepage {
    padding: 14px var(--rl-gap) 12px !important;
  }

  .benefitBanner.position--benefitHomepage .benefitBanner__img {
    max-height: 32px;
  }

  .benefitBanner.position--benefitHomepage .benefitBanner__title {
    font-size: 10px;
    letter-spacing: 0.6px;
    max-width: 76px;
  }

  /* Blog carousel → 1 + ⅓ (same as .collection) */
  .homepage-blog-wrapper .rl-blog-track .news-item {
    --rl-peek-n: 1.333;
    flex: 0 0 calc((100% - (var(--rl-peek-n) - 1) * var(--rl-carousel-gap)) / var(--rl-peek-n)) !important;
    width: calc((100% - (var(--rl-peek-n) - 1) * var(--rl-carousel-gap)) / var(--rl-peek-n)) !important;
    max-width: calc((100% - (var(--rl-peek-n) - 1) * var(--rl-carousel-gap)) / var(--rl-peek-n)) !important;
    min-width: calc((100% - (var(--rl-peek-n) - 1) * var(--rl-carousel-gap)) / var(--rl-peek-n)) !important;
  }

  .homepage-blog-wrapper .news-item .image {
    max-height: none;
  }

  .homepage-blog-wrapper .news-item .image img {
    max-height: none;
  }

  /* Mega menu: hide (mobile nav takes over) */
  #navigation .menu-level-2 {
    display: none !important;
  }

  .rf-bottom__row {
    flex-direction: column;
    align-items: center;
    text-align: center;
  }

  /* Keep mobile footer order from main footer @768 — only center helpers here */
  .rolser-footer .rf-legal-right,
  .rolser-footer .rf-legal-links,
  .rolser-footer .rf-payments,
  .rolser-footer .rf-ratings,
  .rolser-footer .rf-credits__row,
  .rolser-footer .rf-credits__meta,
  .rolser-footer .rf-credits__shoptet {
    align-items: center;
    justify-content: center;
  }
}

/* ═══════════════════════════════════════════
   17. CATEGORY / ARCHIVE PAGE  (type-category)
   Figma: 315:6992 (filter on) + 314:1533 (filter off)
   ═══════════════════════════════════════════ */

/* ── Layout shell ── */
body.type-category #content-wrapper.content-wrapper {
  max-width: var(--rl-max) !important;
  width: 100% !important;
  padding-left: var(--rl-gap) !important;
  padding-right: var(--rl-gap) !important;
  margin-left: auto !important;
  margin-right: auto !important;
}

body.type-category .content-wrapper-in {
  display: flex !important;
  flex-direction: column !important;
  float: none !important;
  width: 100% !important;
}

body.type-category aside.sidebar.sidebar-left {
  display: none !important;
  /* filters moved into listing by JS */
}

body.type-category main#content.content,
body.type-category main#content.content.narrow {
  float: none !important;
  width: 100% !important;
  max-width: none !important;
  padding: 0 !important;
  margin: 0 !important;
}

body.type-category .breadcrumbs-wrapper {
  display: none !important;
  /* moved into hero by JS */
}


/* ── Category hero ── */
.rl-category-hero {
  position: relative;
  width: 100%;
  min-height: 300px;
  display: flex;
  align-items: flex-start;
  background-color: var(--rl-gray-lt);
  /* Image set by JS from /upload/kategorie-header/{body in-* slug}.{webp|jpg|png} */
  background-image: none;
  background-size: cover;
  background-position: center bottom;
  overflow: hidden;
  margin-bottom: 0;
}

.in-oblibene .rl-category-hero {
  min-height: unset;
}

.rl-category-hero.rl-search-hero {
  background-image: none;
}

.rl-category-hero::before {
  content: '';
  position: absolute;
  inset: 0;
 /* background: rgba(255, 255, 255, .8);*/
  background: #ffffff;
background: linear-gradient(90deg, rgba(255, 255, 255, 0.85) 10%, rgba(255, 255, 255, 0.1) 75%);
  pointer-events: none;
}

.rl-category-hero__inner {
  position: relative;
  z-index: 1;
  width: 100%;
  max-width: var(--rl-max);
  margin: 0 auto;
  padding: var(--rl-section-y) var(--rl-gap) var(--rl-space-6);
}

.rl-category-hero .breadcrumbs {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  font-family: var(--rl-body);
  font-size: 12px;
  line-height: 18px;
  color: rgba(17, 17, 17, .8);
  margin: 0 0 0;
}

.rl-category-hero .breadcrumbs a,
.rl-category-hero .breadcrumbs .navigation-home-icon {
  color: rgba(17, 17, 17, .8);
  text-decoration: none;
}

/* Show "Domů" text instead of icon */
.rl-category-hero .navigation-home-icon .sr-only {
  position: static !important;
  width: auto !important;
  height: auto !important;
  clip: auto !important;
  clip-path: none !important;
  overflow: visible !important;
  white-space: nowrap !important;
}

.rl-category-hero .navigation-home-icon {
  background: none !important;
  width: auto !important;
  height: auto !important;
  text-indent: 0 !important;
  font-size: 12px;
  line-height: 18px;
}

.rl-category-hero .navigation-bullet {
  color: rgba(17, 17, 17, .8);
  margin: 0;
}

.rl-category-hero .breadcrumbs [itemprop="name"],
.rl-category-hero .breadcrumbs [data-testid="breadcrumbsLastLevel"] span[itemprop="name"],
.rl-category-hero .breadcrumbs span[data-title] {
  color: var(--rl-red);
  font-weight: 500;
}

.rl-category-hero .category-title,
.rl-category-hero h1.h1 {
  font-family: var(--rl-display);
  font-weight: 800;
  font-size: clamp(26px, 3.4vw, 54.4px);
  line-height: 1.02;
  letter-spacing: -.025em;
  color: var(--rl-black);
  margin: 14px 0 0;
  padding: 0;
}

.rl-category-hero .rl-category-desc {
  font-family: var(--rl-body);
  font-weight: 400;
  font-size: clamp(14px, 1.4vw, 16px);
  line-height: 1.44;
  color: rgba(17, 17, 17, .88);
  max-width: 530px;
  margin: 10px 0 0;
}


/* ── Subcategories (circular) ── */
body.type-category .category-top {
  padding: 0;
  margin: 0;
}

body.type-category ul.subcategories.with-image {
  display: flex !important;
  flex-wrap: nowrap;
  gap: 20px;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: thin;
  padding: 28px 0 32px !important;
  margin: 0 !important;
  border-bottom: 1px solid #f0f0ee;
  list-style: none;
}

body.type-category ul.subcategories.with-image>li {
  flex: 0 0 120px;
  width: 120px !important;
  max-width: 120px !important;
  float: none !important;
  padding: 0 !important;
  margin: 0 !important;
}

body.type-category ul.subcategories.with-image>li>a {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
  text-align: center;
  text-decoration: none;
  color: #333;
}

body.type-category ul.subcategories.with-image .image {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 104px;
  height: 104px;
  border: 2px solid var(--rl-border);
  border-radius: 52px;
  overflow: hidden;
  background: var(--rl-white);
  transition: border-color .2s ease;
}

body.type-category ul.subcategories.with-image>li>a:hover .image,
body.type-category ul.subcategories.with-image>li.is-active>a .image,
body.type-category ul.subcategories.with-image>li>a[aria-current="page"] .image {
  border-color: var(--rl-red);
}

body.type-category ul.subcategories.with-image .image img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  object-position: center;
}

body.type-category ul.subcategories.with-image .text {
  font-family: var(--rl-display);
  font-weight: 500;
  font-size: 13.12px;
  line-height: 1.35;
  color: #333;
  white-space: normal;
  text-align: center;
}

/* Primary name (before #…#) */
body.type-category ul.subcategories.with-image .text .rl-subcat-name {
  display: block;
  font-weight: 500;
  color: #333;
}

/* Meta line from #110 x 32 cm# — always second row, lighter */
body.type-category ul.subcategories.with-image .text .rl-subcat-meta {
  display: block;
  margin-top: 2px;
  font-family: var(--rl-body);
  font-weight: 400;
  font-size: 11.5px;
  line-height: 1.3;
  color: rgba(51, 51, 51, .72);
}


/* ── Bestsellers (Nejprodávanější) ── */
body.type-category .products-top-wrapper {
  padding: 28px 0;
  border-bottom: 1px solid #f0f0ee;
  margin: 0;
}

body.type-category .products-top-header {
  font-family: var(--rl-display);
  font-weight: 800;
  font-size: clamp(22px, 1.8vw, 28.8px);
  line-height: 1.5;
  letter-spacing: -.03em;
  color: var(--rl-black);
  margin: 0 0 20px;
}

body.type-category #productsTop.products.products-inline {
  display: grid !important;
  grid-template-columns: repeat(3, 1fr);
  gap: 20px;
  margin: 0 !important;
  padding: 0 !important;
}

body.type-category #productsTop .product {
  display: none !important;
  width: 100% !important;
  float: none !important;
  padding: 0 !important;
  margin: 0 !important;
}

body.type-category #productsTop .product.active,
body.type-category #productsTop .product.revealed {
  display: block !important;
}

body.type-category #productsTop .product.revealed {
  animation: rl-top-product-fade .4s ease both;
}

@keyframes rl-top-product-fade {
  from {
    opacity: 0;
    transform: translateY(10px);
  }

  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@media (prefers-reduced-motion: reduce) {
  body.type-category #productsTop .product.revealed {
    animation: none;
  }
}

body.type-category #productsTop .p {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 16px;
  border: 1px solid #f0f0ee;
  border-radius: var(--rl-radius);
  background: var(--rl-white);
  height: 100%;
  min-height: 134px;
}

body.type-category #productsTop .p>a.image {
  flex: 0 0 80px;
  width: 80px;
  height: 100px;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
}

body.type-category #productsTop .p>a.image img {
  width: 100%;
  height: 100%;
  object-fit: contain;
}

body.type-category #productsTop .flags,
body.type-category #productsTop .extra-flags,
body.type-category #productsTop .availability-amount,
body.type-category #productsTop .price-save {
  display: none !important;
}

body.type-category #productsTop .p-in {
  flex: 1 1 auto;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding: 0 !important;
}

body.type-category #productsTop .p-in-in a.name {
  font-family: var(--rl-display);
  font-weight: 500;
  font-size: 16px;
  line-height: 1.07;
  color: var(--rl-black);
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

body.type-category #productsTop .ratings-wrapper {
  display: block !important;
  margin: 0;
}

body.type-category #productsTop .availability {
  display: flex;
  align-items: center;
  gap: 5px;
  margin: 0;
}

body.type-category #productsTop .availability .show-tooltip {
  font-family: var(--rl-display);
  font-weight: 600;
  font-size: 13px;
  line-height: 18px;
  text-decoration: underline;
  text-decoration-style: dotted;
  text-underline-offset: 2px;
}

body.type-category #productsTop .availability .show-tooltip.rl-in-stock::before {
  content: '';
  display: inline-block;
  width: 16px;
  height: 16px;
  background: url('../images/check-stock.svg') center / contain no-repeat;
  vertical-align: middle;
  margin-right: 5px;
}

body.type-category #productsTop .p-bottom {
  margin: 0;
}

body.type-category #productsTop .prices {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 6px 8px;
  margin: 0;
}

body.type-category #productsTop .price-final {
  order: 1;
}

body.type-category #productsTop .price-final strong {
  font-family: var(--rl-display);
  font-weight: 700;
  font-size: 15px;
  line-height: 20px;
  color: var(--rl-black);
}

/* Original price after final — no “Původně:” label */
body.type-category #productsTop .price-standard-wrapper {
  order: 2;
  display: inline-flex;
  align-items: baseline;
}

body.type-category #productsTop .price-standard-label {
  display: none !important;
}

body.type-category #productsTop .prices > .price-save {
  display: none !important;
}

body.type-category #productsTop .price-standard-wrapper-placeholder {
  display: none !important;
}

body.type-category #productsTop .price-standard-wrapper .price-standard,
body.type-category #productsTop .price-standard,
body.type-category #productsTop .price.before,
body.type-category #productsTop .price-before {
  font-family: var(--rl-body);
  font-weight: 400;
  font-size: 12px;
  line-height: 1.3;
  color: #ccc;
  text-decoration: line-through;
}

body.type-category #productsTop .price-standard span {
  text-decoration: inherit;
  color: inherit;
}

/* Discount flag: keep % only — hide amount duplicated in prices */
body.type-category #productsTop .flags .price-standard,
body.type-category #productsTop .flags-extra .price-standard,
body.type-category #productsTop .extra-flags .price-standard {
  display: none !important;
}

body.type-category .products-top-wrapper .button-wrapper {
  display: flex;
  justify-content: center;
  margin-top: 20px;
}

body.type-category .products-top-wrapper .toggle-top-products {
  background: none;
  border: none;
  padding: 0;
  font-family: var(--rl-display);
  font-weight: 500;
  font-size: 13.28px;
  line-height: 20px;
  color: var(--rl-red);
  text-decoration: underline;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 2px;
}

body.type-category .products-top-wrapper .toggle-top-products::after {
  content: '';
  display: inline-block;
  width: 10px;
  height: 9px;
  margin-left: 2px;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='9' viewBox='0 0 10 9' fill='none'%3E%3Cpath d='M1 2.5L5 6.5L9 2.5' stroke='%23cc1f1f' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / contain no-repeat;
}

body.type-category .products-top-wrapper .toggle-top-products[aria-expanded="true"]::after {
  transform: rotate(180deg);
}


/* ── Hide Shoptet a11y headings (visible accidentally) ── */
body.type-category #listSortingHeading,
body.type-category #productsListHeading,
body.type-category #listingControlsHeading,
body.type-category #paginationTitle {
  display: none !important;
}


/* ── Toolbar: filter toggle + sort ── */
body.type-category #category-header.category-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  flex-wrap: wrap;
  padding: 18px 0;
  margin: 0;
  border: none;
  width: 100%;
  max-width: 100%;
  min-width: 0;
  box-sizing: border-box;
}

body.type-category .rl-filter-toolbar {
  display: flex;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
}

body.type-category .rl-filter-toggle {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 9px 16px;
  border: 1px solid #e0e0de;
  background: var(--rl-white);
  font-family: var(--rl-display);
  font-weight: 500;
  font-size: 12.48px;
  line-height: 19px;
  color: #333;
  cursor: pointer;
  border-radius: 0;
  transition: border-color .15s ease, color .15s ease, box-shadow .15s ease, background-color .15s ease;
  outline: none;
  -webkit-tap-highlight-color: transparent;
}

body.type-category .rl-filter-toggle:hover {
  border-color: var(--rl-black);
  color: var(--rl-black);
}

body.type-category .rl-filter-toggle:focus-visible {
  border-color: var(--rl-black);
  color: var(--rl-black);
  box-shadow: var(--rl-focus-ring);
}

body.type-category .rl-filter-toggle:active {
  background: var(--rl-gray-lt);
}

body.type-category .rl-filter-toggle__icon {
  display: block;
  width: 15px;
  height: 12px;
  background: url('../images/icon-filter.svg') center / contain no-repeat;
  flex-shrink: 0;
}

body.type-category.rl-filters-open .rl-filter-toggle__icon {
  width: 12px;
  height: 12px;
  background-image: url('../images/icon-filter-close.svg');
}

body.type-category #category-header .listItemsTotal,
body.type-category .rl-filter-toolbar .listItemsTotal {
  font-family: var(--rl-body);
  font-size: 12.48px;
  line-height: 19px;
  color: #999;
  margin: 0;
}

body.type-category #category-header .listItemsTotal strong {
  font-weight: 700;
  color: #999;
}

body.type-category .listSorting {
  margin: 0;
  min-width: 0;
  max-width: 100%;
  flex: 1 1 auto;
}

body.type-category .listSorting__controls {
  display: flex;
  flex-wrap: nowrap;
  align-items: center;
  gap: 10px;
  list-style: none;
  margin: -6px 0 -10px;
  padding: 6px 2px 10px;
  max-width: 100%;
  overflow-x: auto;
  overflow-y: hidden;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
  overscroll-behavior-x: contain;
}

body.type-category .listSorting__controls::-webkit-scrollbar {
  display: none;
}

body.type-category .listSorting__control {
  appearance: none;
  background: var(--rl-white);
  border: none;
  border-radius: var(--rl-radius);
  box-shadow: 0 2px 6px rgba(0, 0, 0, .06);
  padding: 11px 20px;
  font-family: var(--rl-display);
  font-weight: 700;
  font-size: 11.52px;
  line-height: 17px;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--rl-black);
  cursor: pointer;
  transition: color .15s ease, box-shadow .15s ease, background-color .15s ease;
  flex: 0 0 auto;
  white-space: nowrap;
  outline: none;
  -webkit-tap-highlight-color: transparent;
}

body.type-category .listSorting__control:hover {
  color: var(--rl-red);
}

body.type-category .listSorting__control:focus-visible {
  color: var(--rl-red);
  box-shadow: var(--rl-focus-ring);
}

body.type-category .listSorting__control:active {
  background: var(--rl-gray-lt);
}

body.type-category .listSorting__control--current,
body.type-category .listSorting__control[aria-disabled="true"] {
  color: var(--rl-red);
}


/* ── Listing body: filters + products ── */
body.type-category .rl-listing-body {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--rl-space-6);
  align-items: start;
  padding-top: var(--rl-space-2);
  /* CLS: hold vertical space while JS builds shell / moves filters */
  min-height: 280px;
}

body.type-category .category-content-wrapper {
  min-height: 320px;
}

body.type-category.rl-filters-open .rl-listing-body {
  grid-template-columns: 240px minmax(0, 1fr);
}

body.type-category .rl-listing-main {
  min-width: 0;
}

body.type-category .rl-filters-panel {
  width: 240px;
  max-width: 100%;
}

body.type-category:not(.rl-filters-open) .rl-filters-panel {
  display: none !important;
}

/* ── Active filter chips (under sorting) ── */
body.type-category .rl-active-filters {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px 10px;
  margin: 0 0 20px;
  padding: 0;
  min-width: 0;
  max-width: 100%;
}

body.type-category .rl-active-filters[hidden] {
  display: none !important;
}

body.type-category .rl-active-filters__list {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px 10px;
  margin: 0;
  padding: 0;
  min-width: 0;
}

body.type-category .rl-active-filters__chip {
  appearance: none;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin: 0;
  padding: 8px 12px;
  border: none;
  border-radius: var(--rl-radius);
  background: var(--rl-red);
  color: var(--rl-white);
  font-family: var(--rl-body);
  font-size: 12.5px;
  font-weight: 500;
  line-height: 1.25;
  letter-spacing: .01em;
  cursor: pointer;
  transition: background-color .15s ease, opacity .15s ease;
}

body.type-category .rl-active-filters__chip:hover,
body.type-category .rl-active-filters__chip:focus-visible {
  background: #a81818;
  outline: none;
}

body.type-category .rl-active-filters__chip:focus-visible {
  box-shadow: var(--rl-focus-ring-brand);
}

body.type-category .rl-active-filters__chip:active {
  background: #8f1414;
}

body.type-category .rl-active-filters__text {
  pointer-events: none;
}

body.type-category .rl-active-filters__x {
  pointer-events: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 15px;
  font-weight: 600;
  line-height: 1;
  opacity: .92;
}

body.type-category .rl-active-filters__clear {
  appearance: none;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin: 0;
  padding: 7px 12px;
  border: 1px solid var(--rl-red);
  border-radius: var(--rl-radius);
  background: var(--rl-white);
  color: var(--rl-black);
  font-family: var(--rl-body);
  font-size: 12.5px;
  font-weight: 500;
  line-height: 1.25;
  cursor: pointer;
  transition: background-color .15s ease, color .15s ease, border-color .15s ease;
}

body.type-category .rl-active-filters__clear:hover,
body.type-category .rl-active-filters__clear:focus-visible {
  background: rgba(204, 31, 31, .06);
  color: var(--rl-red);
  outline: none;
}

body.type-category .rl-active-filters__clear:focus-visible {
  box-shadow: var(--rl-focus-ring-brand);
}

body.type-category .rl-active-filters__clear:active {
  background: rgba(204, 31, 31, .12);
}

body.type-category .rl-active-filters__clear[hidden] {
  display: none !important;
}

body.type-category .rl-active-filters__clear .rl-active-filters__x {
  color: var(--rl-red);
}


/* ── Filters sidebar ── */
body.type-category .box-filters,
body.type-category .filters-wrapper,
body.type-category #filters.filters {
  background: transparent;
  border: none;
  box-shadow: none;
  padding: 0;
  margin: 0;
}

body.type-category #filters h4,
body.type-category .filter-section>h4,
body.type-category .slider-wrapper>h4 {
  display: flex;
  align-items: center;
  justify-content: space-between;
  font-family: var(--rl-display);
  font-weight: 600;
  font-size: 12.8px;
  line-height: 20px;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--rl-black);
  margin: 0 0 12px;
  padding: 0;
  border: none;
  cursor: pointer;
  user-select: none;
  outline: none;
  border-radius: var(--rl-radius);
  -webkit-tap-highlight-color: transparent;
}

body.type-category #filters h4:focus-visible,
body.type-category .filter-section>h4:focus-visible,
body.type-category .slider-wrapper>h4:focus-visible {
  box-shadow: var(--rl-focus-ring);
}

body.type-category #filters h4:active,
body.type-category .filter-section>h4:active,
body.type-category .slider-wrapper>h4:active {
  opacity: .7;
}

/* Accordion chevron — icon-arrow-down; open = up, closed = down */
body.type-category #filters h4::after,
body.type-category .filter-section>h4::after,
body.type-category .slider-wrapper>h4::after {
  content: '';
  width: 10px;
  height: 6px;
  background: url('../images/icon-arrow-down.svg') center / contain no-repeat;
  flex-shrink: 0;
  transition: transform .2s ease;
  transform: none;
  /* closed / unset → arrow down */
}

/* Open — beat #filters h4::after specificity */
body.type-category #filters .filter-section:not(.rl-filter-collapsed)>h4::after,
body.type-category #filters .slider-wrapper:not(.rl-filter-collapsed)>h4::after,
body.type-category .filter-section:not(.rl-filter-collapsed)>h4::after,
body.type-category .slider-wrapper:not(.rl-filter-collapsed)>h4::after,
body.type-category #filters h4[aria-expanded="true"]::after,
body.type-category .filter-section>h4[aria-expanded="true"]::after,
body.type-category .slider-wrapper>h4[aria-expanded="true"]::after {
  transform: rotate(180deg);
  /* open → arrow up */
}

/* Closed */
body.type-category #filters .rl-filter-collapsed>h4::after,
body.type-category .filter-section.rl-filter-collapsed>h4::after,
body.type-category .slider-wrapper.rl-filter-collapsed>h4::after,
body.type-category #filters h4[aria-expanded="false"]::after,
body.type-category .filter-section>h4[aria-expanded="false"]::after,
body.type-category .slider-wrapper>h4[aria-expanded="false"]::after {
  transform: none;
  /* closed → arrow down */
}

/* Accordion: collapsed = hide body */
body.type-category .rl-filter-collapsed> :not(h4) {
  display: none !important;
}

body.type-category .rl-filter-collapsed>h4 {
  margin-bottom: 0;
}

/* Figma: section spacing pt/pb 24px between filter blocks */
body.type-category .filter-section,
body.type-category .slider-wrapper {
  padding: 24px 0 14px;
  margin: 0;
  border-bottom: 1px solid #f4f4f2;
}

body.type-category .slider-wrapper {
  padding-top: 0;
  /* first block — flush with panel top */
}

body.type-category .filter-section-boolean {
  border-bottom: 1px solid #f4f4f2;
  padding: 24px 0 14px;
}

body.type-category #category-filter-hover {
  display: block !important;
  position: static !important;
  pointer-events: auto !important;
}

body.type-category .slider-header {
  display: flex;
  justify-content: space-between;
  font-family: var(--rl-body);
  font-size: 13.28px;
  line-height: 20px;
  color: var(--rl-black);
  margin: 0 0 16px;
}

body.type-category .slider-content {
  padding: 14px 0 16px;
  overflow: visible;
}

/* jQuery UI price slider — blank-mode has no jquery-ui CSS,
   so we must set position/absolute ourselves.
   Figma: grey track, red range, red circle + white ring + white center */
body.type-category #slider.param-price-filter,
body.type-category .param-price-filter.ui-slider {
  position: relative !important;
  display: block !important;
  height: 3px !important;
  background: #bbb !important;
  border: none !important;
  border-radius: 0 !important;
  margin: 10px 9px 14px !important;
  overflow: visible !important;
}

body.type-category .param-price-filter .ui-slider-range {
  position: absolute !important;
  display: block !important;
  background: var(--rl-red) !important;
  height: 3px !important;
  top: 0 !important;
  border: none !important;
  border-radius: 0 !important;
  z-index: 1 !important;
}

body.type-category .param-price-filter.ui-slider-horizontal .ui-slider-handle,
body.type-category .param-price-filter .ui-slider-handle,
body.type-category .param-price-filter a.ui-slider-handle,
body.type-category .param-price-filter span.ui-slider-handle,
body.type-category .param-price-filter .ui-slider-handle.ui-state-default,
body.type-category .param-price-filter .ui-slider-handle.ui-corner-all,
body.type-category .param-price-filter .ui-slider-handle.ui-state-hover,
body.type-category .param-price-filter .ui-slider-handle.ui-state-focus,
body.type-category .param-price-filter .ui-slider-handle.ui-state-active {
  position: absolute !important;
  display: block !important;
  box-sizing: border-box !important;
  width: 18px !important;
  height: 18px !important;
  min-width: 18px !important;
  min-height: 18px !important;
  max-width: 18px !important;
  max-height: 18px !important;
  top: 50% !important;
  margin: 0 0 0 -9px !important;
  transform: translateY(-50%) !important;
  border: 1px solid #fff !important;
  background: var(--rl-red) !important;
  background-color: var(--rl-red) !important;
  background-image: none !important;
  border-radius: 50% !important;
  box-shadow: 0 0 0 1px rgba(0, 0, 0, .08), 0 2px 5px rgba(0, 0, 0, .14) !important;
  outline: none !important;
  cursor: grab !important;
  z-index: 2 !important;
  padding: 0 !important;
  overflow: visible !important;
  font-size: 0 !important;
  line-height: 0 !important;
  text-decoration: none !important;
  color: transparent !important;
}

/* kill theme sprites / bars on ::before; white center on ::after */
body.type-category .param-price-filter .ui-slider-handle::before {
  content: none !important;
  display: none !important;
}

body.type-category .param-price-filter .ui-slider-handle::after {
  content: '' !important;
  display: block !important;
  position: absolute !important;
  left: 50% !important;
  top: 50% !important;
  width: 7px !important;
  height: 7px !important;
  margin: 0 !important;
  transform: translate(-50%, -50%) !important;
  border: none !important;
  border-radius: 50% !important;
  background: #fff !important;
  background-image: none !important;
  box-shadow: none !important;
  pointer-events: none !important;
}

/* Color swatches */
body.type-category .advanced-filters-wrapper {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin: 0 0 12px;
}

body.type-category .advanced-parameter {
  display: block;
  width: 28px;
  height: 28px;
  padding: 0;
  border: 1px solid transparent;
  border-radius: 50%;
  cursor: pointer;
}

body.type-category .advanced-parameter-inner {
  display: block;
  width: 100%;
  height: 100%;
  border-radius: 50%;
  border: 1px solid rgba(0, 0, 0, .08);
}

body.type-category input:checked+.filter-label.no-display+.advanced-parameter,
body.type-category .advanced-parameter:has(+ input:checked),
body.type-category div:has(> input:checked)>.advanced-parameter {
  box-shadow: 0 0 0 2px var(--rl-white), 0 0 0 3px var(--rl-red);
}

/* Checkbox filters — Figma: white box, grey/red border, red check, focus halo */
body.type-category .filter-section fieldset>div:not(.advanced-filters-wrapper),
body.type-category .filter-section-boolean fieldset>div {
  display: flex;
  align-items: center;
  gap: 10px;
  margin: 0;
  padding: 10px 0;
  border-bottom: none;
  position: relative;
}

/* Divider via ::after — only when another enabled row follows
   (disabled rows are display:none, so last visible has no line) */
body.type-category .filter-section fieldset>div:not(.advanced-filters-wrapper):not(:has(> input:disabled)):has(~ div:not(.advanced-filters-wrapper):not(:has(> input:disabled)))::after,
body.type-category .filter-section-boolean fieldset>div:not(:has(> input:disabled)):has(~ div:not(:has(> input:disabled)))::after {
  content: '';
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 1px;
  background: #f4f4f2;
  pointer-events: none;
}

body.type-category .filter-section fieldset>div:not(.advanced-filters-wrapper)>input[type="checkbox"],
body.type-category .filter-section-boolean input[type="checkbox"] {
  appearance: none;
  -webkit-appearance: none;
  -moz-appearance: none;
  box-sizing: border-box;
  width: 18px;
  height: 18px;
  min-width: 18px;
  min-height: 18px;
  flex-shrink: 0;
  border: 1.5px solid #888;
  border-radius: 3px;
  background: var(--rl-white);
  cursor: pointer;
  margin: 0;
  padding: 0;
  position: relative;
  vertical-align: middle;
  outline: none;
  box-shadow: none;
}

body.type-category .filter-section fieldset>div:not(.advanced-filters-wrapper)>input[type="checkbox"]:checked,
body.type-category .filter-section-boolean input[type="checkbox"]:checked {
  background: var(--rl-white);
  border-color: var(--rl-red);
}

body.type-category .filter-section fieldset>div:not(.advanced-filters-wrapper)>input[type="checkbox"]:checked::after,
body.type-category .filter-section-boolean input[type="checkbox"]:checked::after {
  content: '';
  position: absolute;
  left: 5px;
  top: 1.5px;
  width: 6px;
  height: 10px;
  border: solid var(--rl-red);
  border-width: 0 2px 2px 0;
  transform: rotate(45deg);
}

body.type-category .filter-section fieldset>div:not(.advanced-filters-wrapper)>input[type="checkbox"]:focus-visible,
body.type-category .filter-section-boolean input[type="checkbox"]:focus-visible,
body.type-category .filter-section fieldset>div:not(.advanced-filters-wrapper)>input[type="checkbox"]:focus,
body.type-category .filter-section-boolean input[type="checkbox"]:focus {
  outline: none;
  box-shadow: 0 0 0 3px rgba(204, 31, 31, .28);
}

body.type-category .filter-section fieldset>div:not(.advanced-filters-wrapper)>input[type="checkbox"]:checked:focus-visible,
body.type-category .filter-section-boolean input[type="checkbox"]:checked:focus-visible,
body.type-category .filter-section fieldset>div:not(.advanced-filters-wrapper)>input[type="checkbox"]:checked:focus,
body.type-category .filter-section-boolean input[type="checkbox"]:checked:focus {
  border-color: var(--rl-red);
  box-shadow: 0 0 0 3px rgba(204, 31, 31, .28);
}

/* keep color-swatch inputs hidden */
body.type-category .advanced-filters-wrapper input[type="checkbox"].no-display {
  display: none !important;
}

/* Disabled filters (0 products) — hide so the list shrinks */
body.type-category .filter-section fieldset>div:has(> input:disabled),
body.type-category .filter-section-boolean fieldset>div:has(> input:disabled),
body.type-category .advanced-filters-wrapper>div:has(> input:disabled) {
  display: none !important;
}

body.type-category .filter-label {
  font-family: var(--rl-body);
  font-size: 13.28px;
  line-height: 20px;
  color: var(--rl-black);
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  flex: 1;
  margin: 0;
  font-weight: 400;
}

body.type-category .filter-count {
  color: #bbb;
  font-size: 12.5px;
  font-weight: 400;
  margin-left: auto;
}

body.type-category .filter-section-count,
body.type-category .filter-total-count {
  display: none !important;
}

body.type-category #manufacturer-filter {
  display: none !important;
  /* single brand shop */
}


/* ── Product grid ── */
body.type-category #products.products.products-page.products-block {
  display: grid !important;
  grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
  gap: 40px 40px !important;
  padding: 0 !important;
  margin: 0 0 32px !important;
  align-items: start;
  width: 100% !important;
  max-width: 100% !important;
  box-sizing: border-box !important;
}

body.type-category.rl-filters-open #products.products.products-page.products-block {
  grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
}

body.type-category #products .product {
  width: 100% !important;
  max-width: 100% !important;
  min-width: 0 !important;
  float: none !important;
  padding: 0 !important;
  margin: 0 !important;
  box-sizing: border-box !important;
}

body.type-category #products .p {
  position: relative;
  height: 100%;
  min-width: 0;
  max-width: 100%;
}

body.type-category #products .rl-img-wrap {
  position: relative;
  display: flex;
  flex-direction: column;
  width: 100%;
  overflow: hidden;
  border-radius: var(--rl-radius);
}

body.type-category #products .rl-img-wrap>a.image {
  display: block;
  position: relative;
  aspect-ratio: 358 / 420;
  overflow: hidden;
  background: var(--rl-white);
}

body.type-category #products .rl-img-wrap>a.image img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  object-position: center;
  padding: 12px;
}


/* Flags — listing uses shared .rl-flags stack; keep absolute only as fallback */
body.type-category #products .rl-img-wrap>a.image>.rl-flags {
  position: absolute;
  top: 8px;
  left: 8px;
  z-index: 4;
}

body.type-category #products .flags .flag {
  font-family: var(--rl-display);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .04em;
  text-transform: uppercase;
  padding: 3px 7px;
  border-radius: var(--rl-radius);
  color: var(--rl-white);
  background: var(--rl-black);
}

body.type-category #products .flags-extra .flag-discount {
  background: var(--rl-red);
  font-family: var(--rl-display);
  font-size: 11px;
  font-weight: 700;
  color: var(--rl-white);
  padding: 3px 7px;
  border-radius: var(--rl-radius);
}

body.type-category #products .rl-img-wrap>a.image:not(:has(>.rl-flags)) .flags.flags-default {
  position: absolute;
  top: 8px;
  left: 8px;
  z-index: 3;
  display: flex;
  flex-direction: column;
  gap: 4px;
}

body.type-category #products .rl-img-wrap>a.image:not(:has(>.rl-flags)) .flags-extra {
  position: absolute;
  top: 8px;
  left: 8px;
  z-index: 4;
}

body.type-category #products a.image:not(:has(>.rl-flags)):has(.flags-extra) .flags-default {
  top: 40px;
}

/* Product card flags — ~15% smaller on mobile */
@media (max-width: 768px) {
  .flags .flag,
  .products-block .flags .flag,
  .flags-extra .flag-discount,
  .products-block .flags-extra .flag-discount,
  body.type-category #products .flags .flag,
  body.type-category #products .flags-extra .flag-discount {
    font-size: calc(11px * .85);
    padding: calc(3px * .85) calc(7px * .85);
  }

  .rl-img-wrap>a.image>.rl-flags {
    gap: 3px;
  }

  .rl-img-wrap>a.image:not(:has(>.rl-flags)):has(.flags-extra) .flags-default,
  .products-block a.image:not(:has(>.rl-flags)):has(.flags-extra) .flags-default,
  #products a.image:not(:has(>.rl-flags)):has(.flags-extra) .flags-default,
  body.type-category #products a.image:not(:has(>.rl-flags)):has(.flags-extra) .flags-default {
    top: calc(40px * .85);
  }
}

/* Cart hover overlay */
body.type-category #products .rl-img-wrap .p-tools {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  z-index: 6;
  opacity: 0;
  transform: translateY(6px);
  transition: opacity .2s ease, transform .2s ease;
  pointer-events: none;
}

@media (hover: hover) and (pointer: fine) {
  body.type-category #products .rl-img-wrap:hover .p-tools {
    opacity: 1;
    transform: translateY(0);
    pointer-events: auto;
  }
}

body.type-category #products .rl-img-wrap .btn-cart {
  display: block;
  width: 100%;
  background: rgba(17, 17, 17, .92);
  color: #fff;
  font-family: var(--rl-display);
  font-weight: 600;
  font-size: 12px;
  letter-spacing: .08em;
  text-transform: uppercase;
  padding: 13px 16px;
  border: none;
  border-radius: 0;
  cursor: pointer;
}

body.type-category #products .rl-img-wrap .btn-cart:hover {
  background: #111;
}

/* Product info */
body.type-category #products .p-in {
  padding: var(--rl-card-pad);
  display: flex;
  flex-direction: column;
  flex: 1 1 auto;
  min-width: 0;
}

body.type-category #products .p-in-in a.name {
  display: -webkit-box;
  -webkit-line-clamp: var(--rl-card-title-lines);
  -webkit-box-orient: vertical;
  overflow: hidden;
  font-family: var(--rl-display);
  font-weight: 500;
  font-size: var(--rl-card-title-size);
  line-height: var(--rl-card-title-lh);
  color: var(--rl-black);
  min-height: var(--rl-card-title-min-h);
  margin-bottom: var(--rl-space-2);
}

body.type-category #products .ratings-wrapper {
  display: none;
}

body.type-category #products .availability-amount {
  display: none;
}

body.type-category #products .rl-price-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  margin-top: auto;
  padding-top: var(--rl-space-2);
  min-height: var(--rl-card-price-min-h);
  position: relative;
}

body.type-category #products .prices {
  display: flex;
  flex-direction: column;
  flex-wrap: nowrap;
  align-items: flex-start;
  gap: 2px;
}

body.type-category #products .price-final strong {
  font-family: var(--rl-display);
  font-weight: 700;
  font-size: 13.6px;
  line-height: 1;
  color: var(--rl-black);
}

body.type-category #products .prices > .price-standard,
body.type-category #products .price-standard,
body.type-category #products .price.before,
body.type-category #products .price-before,
body.type-category #products .price-standard-wrapper {
  font-family: var(--rl-body);
  font-size: 12px;
  line-height: 1.36;
  color: #ccc;
  text-decoration: line-through;
  font-weight: 400;
}

body.type-category #products .flags .price-standard,
body.type-category #products .flags-extra .price-standard {
  display: none !important;
}

body.type-category #products .price-standard-wrapper-placeholder {
  display: none !important;
}

body.type-category #products .rl-price-row .availability {
  display: flex;
  align-items: center;
  font-family: var(--rl-display);
  font-size: 13px;
  font-weight: 600;
  white-space: nowrap;
  flex-shrink: 0;
  margin: 0;
}

body.type-category #products .rl-price-row .availability .show-tooltip {
  text-decoration: underline;
  text-decoration-style: dotted;
  text-underline-offset: 2px;
}

body.type-category #products .rl-price-row .availability .show-tooltip.rl-in-stock::before {
  content: '';
  display: inline-block;
  width: 16px;
  height: 16px;
  background: url('../images/check-stock.svg') center / contain no-repeat;
  vertical-align: middle;
  margin-right: 5px;
  position: relative;
  top: -1px;
}

/* Soften brown overlay on category listing */
body.type-category #products .rl-img-wrap>a.image::before,
body.type-category #products .p.swap-images::before,
body.type-category #products .product.swap-images::before {
  opacity: .03;
}


/* ── Listing controls / pagination ──
   Figma: NAHORU | NAČÍST … | pagination — space-between */
body.type-category .listingControls {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 20px 32px;
  width: 100%;
  padding: 28px 0 48px;
  margin: 24px 0 0;
  border-top: 1px solid #f4f4f2;
  box-sizing: border-box;
}

body.type-category .listingControls .itemsTotal {
  display: none;
  /* already in toolbar */
}

/* Figma order: Nahoru | Načíst | stránkování */
body.type-category .listingControls .goToTop {
  order: 1;
  flex: 0 0 auto;
}

body.type-category .listingControls .loadMore {
  order: 2;
  flex: 1 1 auto;
  display: flex;
  justify-content: center;
}

body.type-category .listingControls .pagination {
  order: 3;
  flex: 0 0 auto;
}

body.type-category .loadMore__button,
body.type-category .goToTop__button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  font-family: var(--rl-display);
  font-weight: 600;
  font-size: 12px;
  letter-spacing: .08em;
  text-transform: uppercase;
  padding: 12px 28px;
  border: 1px solid #ddd;
  background: var(--rl-white);
  color: var(--rl-black);
  border-radius: 999px;
  cursor: pointer;
  text-decoration: none;
  transition: border-color .15s, color .15s;
  box-shadow: none;
  line-height: 1;
}

body.type-category .loadMore__button:hover,
body.type-category .goToTop__button:hover {
  border-color: var(--rl-black);
  color: var(--rl-black);
  background: var(--rl-white);
}

body.type-category .goToTop__button::before {
  content: '';
  width: 10px;
  height: 6px;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6' viewBox='0 0 10 6' fill='none'%3E%3Cpath d='M1 5L5 1L9 5' stroke='%23111111' stroke-width='1.4' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / contain no-repeat;
  flex-shrink: 0;
}

body.type-category .loadMore__button::before {
  content: '';
  width: 16px;
  height: 16px;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 16 16' fill='none'%3E%3Cpath d='M13.5 8A5.5 5.5 0 1 1 8 2.5' stroke='%23111111' stroke-width='1.4' stroke-linecap='round'/%3E%3Cpath d='M8 1v3l2.2-1.5' stroke='%23111111' stroke-width='1.4' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / contain no-repeat;
  flex-shrink: 0;
}

body.type-category .pagination__list {
  display: flex;
  align-items: center;
  gap: 10px;
  list-style: none;
  margin: 0;
  padding: 0;
}

body.type-category .pagination__list>li {
  margin: 0;
  padding: 0;
  list-style: none;
}

body.type-category .pagination__currentPage {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background: var(--rl-black);
  color: var(--rl-white);
  font-family: var(--rl-display);
  font-weight: 600;
  font-size: 13px;
  line-height: 1;
}

body.type-category .pagination__link {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  min-width: 36px;
  padding: 0;
  font-family: var(--rl-display);
  font-size: 13px;
  font-weight: 600;
  color: var(--rl-black);
  text-decoration: none;
  border: 1px solid #ddd;
  border-radius: 50%;
  background: var(--rl-white);
  box-shadow: none;
  line-height: 1;
  transition: border-color .15s;
}

body.type-category .pagination__link:hover {
  border-color: var(--rl-black);
  color: var(--rl-black);
  background: var(--rl-white);
}

body.type-category .pagination__link--next {
  font-size: 0;
  color: transparent;
}

body.type-category .pagination__link--next::after {
  content: '';
  width: 7px;
  height: 10px;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='7' height='10' viewBox='0 0 7 10' fill='none'%3E%3Cpath d='M1 1L5 5L1 9' stroke='%23111111' stroke-width='1.4' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / contain no-repeat;
}


/* ── Homepage benefit banner cloned before footer (category + detail) ── */
body.type-category .rl-home-benefits-clone,
body.type-detail .rl-home-benefits-clone,
body.type-product .rl-home-benefits-clone {
  width: 100%;
  margin: 48px 0 0;
  border-top: 1px solid var(--rl-border);
  /* CLS: reserve height before fetch/HTML inject fills the slot */
  min-height: var(--rl-benefit-h);
}

body.type-category .rl-home-benefits-clone:empty,
body.type-detail .rl-home-benefits-clone:empty,
body.type-product .rl-home-benefits-clone:empty {
  background: var(--rl-white);
}

body.type-category .rl-home-benefits-clone .benefitBanner.position--benefitHomepage,
body.type-detail .rl-home-benefits-clone .benefitBanner.position--benefitHomepage,
body.type-product .rl-home-benefits-clone .benefitBanner.position--benefitHomepage {
  border-bottom: none;
}

/* ── Category benefit banner (layout; visibility below) ── */
body.type-category .benefitBanner.position--benefitCategory {
  flex-wrap: wrap;
  justify-content: center;
  gap: 0;
  max-width: var(--rl-max);
  margin: 0 auto 48px;
  padding: 0 var(--rl-gap);
  border-top: 1px solid var(--rl-border);
  border-bottom: 1px solid var(--rl-border);
}

body.type-category .benefitBanner.position--benefitCategory .benefitBanner__item {
  flex: 1 1 200px;
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 20px 16px;
  border-right: 1px solid var(--rl-border);
}

body.type-category .benefitBanner.position--benefitCategory .benefitBanner__item:last-child {
  border-right: none;
}

body.type-category .benefitBanner__title {
  font-family: var(--rl-display);
  font-weight: 700;
  font-size: clamp(12px, 0.74vw, 14px);
  letter-spacing: .06em;
  text-transform: uppercase;
}

body.type-category .benefitBanner__data {
  font-family: var(--rl-body);
  font-size: clamp(11px, 0.65vw, 12px);
  color: var(--rl-gray);
}


/* ── Category responsive ── */
@media (max-width: 1200px) {
  body.type-category.rl-filters-open .rl-listing-body {
    grid-template-columns: 220px minmax(0, 1fr);
    gap: 28px;
  }

  body.type-category #products.products.products-page.products-block,
  body.type-category.rl-filters-open #products.products.products-page.products-block {
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
    gap: 28px !important;
  }

  body.type-category:not(.rl-filters-open) #products.products.products-page.products-block {
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
  }
}

@media (max-width: 992px) {
  .rl-category-hero {
    min-height: 200px;
  }

  .rl-category-hero__inner {
    padding: 28px var(--rl-gap) 24px;
  }

  body.type-category #productsTop.products.products-inline {
    display: grid !important;
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
    gap: 12px;
  }

  body.type-category #productsTop .p {
    flex-direction: row;
    align-items: center;
    padding: 10px;
    gap: 10px;
    min-height: 0;
  }

  body.type-category #productsTop .p>a.image {
    flex: 0 0 56px;
    width: 56px;
    height: 70px;
  }

  body.type-category #productsTop .p-in-in a.name {
    font-size: 13px;
  }

  body.type-category #productsTop .price-final strong {
    font-size: 14px;
  }

  body.type-category.rl-filters-open .rl-listing-body {
    grid-template-columns: 1fr;
  }

  body.type-category.rl-filters-open .rl-filters-panel {
    width: 100%;
    max-height: 60vh;
    overflow-y: auto;
    border: 1px solid var(--rl-border);
    padding: 16px;
    margin-bottom: 8px;
  }

  body.type-category #products.products.products-page.products-block,
  body.type-category.rl-filters-open #products.products.products-page.products-block,
  body.type-category:not(.rl-filters-open) #products.products.products-page.products-block {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 14px 12px !important;
    width: 100% !important;
    max-width: 100% !important;
    overflow-x: clip !important;
    box-sizing: border-box !important;
  }

  body.type-category .rl-listing-body,
  body.type-category .rl-listing-main,
  body.type-category main#content.content {
    max-width: 100%;
    min-width: 0;
    overflow-x: clip;
  }

  body.type-category #products .product,
  body.type-category #products .p,
  body.type-category #products .rl-img-wrap,
  body.type-category #products .rl-img-wrap>a.image {
    min-width: 0 !important;
    max-width: 100% !important;
  }

  body.type-category #products .rl-img-wrap>a.image img {
    width: 100%;
    max-width: 100%;
    height: auto;
  }

  body.type-category #products .rl-price-row {
    flex-wrap: wrap;
    gap: 4px 8px;
  }

  body.type-category #products .rl-img-wrap .p-tools {
    opacity: 1 !important;
    transform: none !important;
    pointer-events: auto !important;
    left: auto;
    right: 12px;
    bottom: 12px;
    width: auto;
  }

  body.type-category #products .rl-img-wrap .btn-cart {
  /*  width: 40px;
    height: 40px;
    min-width: 40px;
    padding: 0;
    font-size: 0 !important;
    line-height: 0;
    letter-spacing: 0;
    color: transparent;
    border-radius: var(--rl-radius);
    background: rgba(17, 17, 17, .82);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    position: relative;
    overflow: hidden; */
    display: none !important;
  }

  body.type-category #products .rl-img-wrap .btn-cart>* {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
  }

  body.type-category #products .rl-img-wrap .btn-cart::before {
    content: '';
    display: block;
    width: 18px;
    height: 18px;
    background: url('../images/icon-cart.svg') center / contain no-repeat;
    filter: brightness(0) invert(1);
  }

  body.type-category #category-header.category-header {
    flex-direction: column;
    align-items: stretch;
  }

  body.type-category .listSorting,
  body.type-category .listSorting__controls {
    width: 100%;
    max-width: 100%;
  }

  body.type-category .listSorting__controls {
    gap: 8px;
    margin: -6px calc(-1 * var(--rl-gap)) -10px;
    padding: 6px var(--rl-gap) 10px;
  }

  body.type-category .listSorting__control {
    padding: 10px 16px;
    font-size: 11px;
  }
}

@media (max-width: 768px) {
  body.type-category ul.subcategories.with-image>li {
    flex: 0 0 96px;
    width: 96px !important;
  }

  body.type-category ul.subcategories.with-image .text {
    white-space: unset;
    line-height: 1.2;
  }

  /* Bestsellers (Nejprodávanější) — hide on mobile */
  body.type-category .products-top-wrapper {
    display: none !important;
  }

  body.type-category .listSorting__controls {
    gap: 8px;
  }

  body.type-category .listSorting__control {
    padding: 9px 14px;
    font-size: 10.5px;
    letter-spacing: .08em;
    box-shadow: 0px 2px 6px rgba(0, 0, 0, .1);
  }

  /* Tighter product grid on small phones */
  body.type-category #products.products.products-page.products-block,
  body.type-category.rl-filters-open #products.products.products-page.products-block,
  body.type-category:not(.rl-filters-open) #products.products.products-page.products-block {
    gap: 10px 8px !important;
  }

  body.type-category #products .p-in-in a.name {
    font-size: 13px;
  }

  body.type-category #products .price-final strong {
    font-size: 14px;
  }

  body.type-category ul.subcategories.with-image .image {
    width: 84px;
    height: 84px;
  }

  body.type-category .benefitBanner.position--benefitCategory .benefitBanner__item {
    flex: 1 1 100%;
    border-right: none;
    border-bottom: 1px solid var(--rl-border);
  }

  body.type-category .listingControls {
    flex-direction: column;
    align-items: stretch;
    gap: 16px;
  }

  body.type-category .listingControls .goToTop,
  body.type-category .listingControls .loadMore,
  body.type-category .listingControls .pagination {
    order: 0;
    flex: none;
    width: 100%;
    display: flex;
    justify-content: center;
  }

  body.type-category .listingControls .loadMore {
    order: -1;
  }

  body.type-category .loadMore__button,
  body.type-category .goToTop__button {
    width: 100%;
    max-width: 320px;
  }
}

/* Hide category benefit strip on all pages except homepage */
body:not(.in-index) .benefitBanner.position--benefitCategory {
  display: none !important;
}


/* ═══════════════════════════════════════════
   18b. SEARCH RESULTS  (type-search / in-vyhledavani)
   Same chrome as category: hero + breadcrumbs + listing grid
   ═══════════════════════════════════════════ */

body.type-search #content-wrapper.content-wrapper,
body.in-vyhledavani #content-wrapper.content-wrapper {
  max-width: var(--rl-max) !important;
  width: 100% !important;
  padding-left: var(--rl-gap) !important;
  padding-right: var(--rl-gap) !important;
  margin-left: auto !important;
  margin-right: auto !important;
  padding-top: 28px !important;
  padding-bottom: 48px !important;
}

body.type-search .content-wrapper-in,
body.in-vyhledavani .content-wrapper-in {
  display: flex !important;
  flex-direction: column !important;
  float: none !important;
  width: 100% !important;
}

body.type-search aside.sidebar.sidebar-left,
body.in-vyhledavani aside.sidebar.sidebar-left {
  display: none !important;
}

body.type-search main#content.content,
body.type-search main#content.content.narrow,
body.in-vyhledavani main#content.content,
body.in-vyhledavani main#content.content.narrow {
  float: none !important;
  width: 100% !important;
  max-width: none !important;
  padding: 0 !important;
  margin: 0 !important;
}

/* Default crumbs wrapper hidden once JS moves crumbs into hero */
body.type-search .breadcrumbs-wrapper,
body.in-vyhledavani .breadcrumbs-wrapper {
  display: none !important;
}

/* Fallback if JS hasn’t run yet — keep crumbs readable */
body.type-search:not(:has(.rl-category-hero)) .breadcrumbs-wrapper,
body.in-vyhledavani:not(:has(.rl-category-hero)) .breadcrumbs-wrapper {
  display: block !important;
  max-width: var(--rl-max);
  width: 100%;
  margin: 0 auto;
  padding: clamp(12px, 1.5vw, 20px) var(--rl-gap);
  box-sizing: border-box;
}

body.type-search:not(:has(.rl-category-hero)) .breadcrumbs,
body.in-vyhledavani:not(:has(.rl-category-hero)) .breadcrumbs {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  font-family: var(--rl-body);
  font-size: 12px;
  line-height: 18px;
  color: rgba(17, 17, 17, .8);
  margin: 0;
  padding: 0;
}

body.type-search:not(:has(.rl-category-hero)) .navigation-home-icon .sr-only,
body.in-vyhledavani:not(:has(.rl-category-hero)) .navigation-home-icon .sr-only {
  position: static !important;
  width: auto !important;
  height: auto !important;
  clip: auto !important;
  clip-path: none !important;
  overflow: visible !important;
  white-space: nowrap !important;
}

body.type-search:not(:has(.rl-category-hero)) .navigation-home-icon,
body.in-vyhledavani:not(:has(.rl-category-hero)) .navigation-home-icon {
  background: none !important;
  width: auto !important;
  height: auto !important;
  text-indent: 0 !important;
  font-size: 12px;
  line-height: 18px;
  color: rgba(17, 17, 17, .8);
  text-decoration: none;
}

body.type-search:not(:has(.rl-category-hero)) .breadcrumbs [data-testid="breadcrumbsLastLevel"] [itemprop="name"],
body.type-search:not(:has(.rl-category-hero)) .breadcrumbs [data-testid="breadcrumbsLastLevel"] span[data-title],
body.in-vyhledavani:not(:has(.rl-category-hero)) .breadcrumbs [data-testid="breadcrumbsLastLevel"] [itemprop="name"],
body.in-vyhledavani:not(:has(.rl-category-hero)) .breadcrumbs [data-testid="breadcrumbsLastLevel"] span[data-title] {
  color: var(--rl-red);
  font-weight: 500;
}

/* Search hero title */
.rl-category-hero .rl-search-title,
body.type-search main#content>h1,
body.type-search main#content>h2:not(.sr-only),
body.in-vyhledavani main#content>h1,
body.in-vyhledavani main#content>h2:not(.sr-only) {
  font-family: var(--rl-display);
  font-weight: 800;
  font-size: clamp(28px, 3.2vw, 48px);
  line-height: 1.05;
  letter-spacing: -.025em;
  color: var(--rl-black);
  margin: 14px 0 0;
  padding: 0;
}

.rl-category-hero .rl-search-title .highlight,
body.type-search main#content>h2 .highlight,
body.in-vyhledavani main#content>h2 .highlight {
  color: var(--rl-red);
  font-weight: 800;
}

body.type-search .search-results-groups:empty,
body.in-vyhledavani .search-results-groups:empty {
  display: none !important;
}

/* Categories + articles — clear secondary results under the title */
body.type-search .search-results-groups,
body.in-vyhledavani .search-results-groups {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 20px 40px;
  width: 100%;
  margin: 28px 0 8px;
  padding: 0;
  box-sizing: border-box;
}

body.type-search .search-results-group,
body.in-vyhledavani .search-results-group {
  min-width: 0;
  margin: 0;
  padding: 20px 22px 18px;
  background: #fff;
  border: 1px solid var(--rl-border);
  box-sizing: border-box;
}

body.type-search .search-results-group>h4,
body.in-vyhledavani .search-results-group>h4 {
  margin: 0 0 14px;
  padding: 0;
  font-family: var(--rl-display);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: .14em;
  text-transform: uppercase;
  line-height: 1.3;
  color: #111;
}

body.type-search .search-results-group-list,
body.in-vyhledavani .search-results-group-list {
  margin: 0;
  padding: 0;
}

body.type-search .search-results-group-list ul,
body.in-vyhledavani .search-results-group-list ul {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 0;
}

body.type-search .search-results-group-list li,
body.in-vyhledavani .search-results-group-list li {
  margin: 0;
  padding: 0;
  border-top: 1px solid rgba(17, 17, 17, .08);
}

body.type-search .search-results-group-list li:first-child,
body.in-vyhledavani .search-results-group-list li:first-child {
  border-top: none;
}

body.type-search .search-results-group-list a,
body.in-vyhledavani .search-results-group-list a {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 11px 0;
  font-family: var(--rl-display);
  font-size: 14px;
  font-weight: 500;
  line-height: 1.35;
  color: #111;
  text-decoration: none;
  transition: color .15s ease;
}

body.type-search .search-results-group-list a::after,
body.in-vyhledavani .search-results-group-list a::after {
  content: '';
  flex: 0 0 7px;
  width: 7px;
  height: 12px;
  background: url('../images/icon-arrow-right.svg') center / contain no-repeat;
  opacity: .35;
  transition: opacity .15s ease, transform .15s var(--rl-ease-out);
}

body.type-search .search-results-group-list a:hover,
body.type-search .search-results-group-list a:focus-visible,
body.in-vyhledavani .search-results-group-list a:hover,
body.in-vyhledavani .search-results-group-list a:focus-visible {
  color: var(--rl-red);
  outline: none;
}

body.type-search .search-results-group-list a:hover::after,
body.type-search .search-results-group-list a:focus-visible::after,
body.in-vyhledavani .search-results-group-list a:hover::after,
body.in-vyhledavani .search-results-group-list a:focus-visible::after {
  opacity: 1;
  transform: translateX(2px);
}

/* Articles: slightly softer weight — still same structure */
body.type-search #search-group-articles .search-results-group-list a,
body.in-vyhledavani #search-group-articles .search-results-group-list a {
  font-weight: 400;
}

/* Shoptet “show more” control inside a group */
body.type-search .search-results-group .display-results-group,
body.in-vyhledavani .search-results-group .display-results-group {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin: 10px 0 0;
  padding: 0;
  border: none;
  background: none;
  font-family: var(--rl-body);
  font-size: 12px;
  font-weight: 500;
  letter-spacing: .04em;
  text-transform: uppercase;
  color: #888;
  cursor: pointer;
  text-decoration: underline;
  text-underline-offset: 3px;
}

body.type-search .search-results-group .display-results-group:hover,
body.in-vyhledavani .search-results-group .display-results-group:hover {
  color: #111;
}

@media (max-width: 768px) {

  body.type-search .search-results-groups,
  body.in-vyhledavani .search-results-groups {
    grid-template-columns: 1fr;
    gap: 12px;
    margin: 20px 0 4px;
  }

  body.type-search .search-results-group,
  body.in-vyhledavani .search-results-group {
    padding: 16px 16px 14px;
  }
}

body.type-search #products-found.search-results,
body.in-vyhledavani #products-found.search-results {
  margin: 0;
  padding: 0;
}

body.type-search #productsListHeading,
body.in-vyhledavani #productsListHeading {
  position: absolute !important;
  width: 1px !important;
  height: 1px !important;
  padding: 0 !important;
  margin: -1px !important;
  overflow: hidden !important;
  clip: rect(0, 0, 0, 0) !important;
  border: 0 !important;
}

/* Product grid — match category listing density */
body.type-search #products.products.products-block,
body.in-vyhledavani #products.products.products-block {
  display: grid !important;
  grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
  gap: 40px !important;
  padding: 8px 0 0 !important;
  margin: 0 0 32px !important;
  align-items: start;
  width: 100% !important;
  max-width: 100% !important;
  box-sizing: border-box !important;
}

body.type-search #products .product,
body.in-vyhledavani #products .product {
  width: 100% !important;
  max-width: 100% !important;
  min-width: 0 !important;
  float: none !important;
  padding: 0 !important;
  margin: 0 !important;
  box-sizing: border-box !important;
}

body.type-search #products .p,
body.in-vyhledavani #products .p {
  position: relative;
  height: 100%;
  min-width: 0;
  max-width: 100%;
}

body.type-search #products .p.swap-images:before,
body.in-vyhledavani #products .p.swap-images:before {
  opacity: .03;
}

body.type-search #products .p-in,
body.in-vyhledavani #products .p-in {
  padding: var(--rl-card-pad);
  display: flex;
  flex-direction: column;
  flex: 1 1 auto;
  min-width: 0;
}

body.type-search #products .p-in-in a.name,
body.in-vyhledavani #products .p-in-in a.name {
  display: -webkit-box;
  -webkit-line-clamp: var(--rl-card-title-lines);
  -webkit-box-orient: vertical;
  overflow: hidden;
  font-family: var(--rl-display);
  font-weight: 500;
  font-size: var(--rl-card-title-size);
  line-height: var(--rl-card-title-lh);
  color: var(--rl-black);
  min-height: var(--rl-card-title-min-h);
  margin-bottom: var(--rl-space-2);
  text-decoration: none;
}

body.type-search #products .ratings-wrapper,
body.in-vyhledavani #products .ratings-wrapper,
body.type-search #products .availability-amount,
body.in-vyhledavani #products .availability-amount {
  display: none !important;
}

body.type-search #products .rl-price-row,
body.in-vyhledavani #products .rl-price-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  margin-top: auto;
  padding-top: var(--rl-space-2);
  min-height: var(--rl-card-price-min-h);
}

body.type-search #products .price-final strong,
body.in-vyhledavani #products .price-final strong {
  font-family: var(--rl-display);
  font-weight: 700;
  font-size: 13.6px;
  line-height: 1;
  color: var(--rl-black);
}

body.type-search #products .rl-price-row .availability,
body.in-vyhledavani #products .rl-price-row .availability {
  display: flex;
  align-items: center;
  font-family: var(--rl-display);
  font-size: 13px;
  font-weight: 600;
  white-space: nowrap;
  flex-shrink: 0;
  margin: 0;
}

body.type-search #products .rl-price-row .availability .show-tooltip,
body.in-vyhledavani #products .rl-price-row .availability .show-tooltip {
  text-decoration: underline;
  text-decoration-style: dotted;
  text-underline-offset: 2px;
}

body.type-search #products .rl-price-row .availability .show-tooltip.rl-in-stock::before,
body.in-vyhledavani #products .rl-price-row .availability .show-tooltip.rl-in-stock::before {
  content: '';
  display: inline-block;
  width: 16px;
  height: 16px;
  background: url('../images/check-stock.svg') center / contain no-repeat;
  vertical-align: middle;
  margin-right: 5px;
}

/* Empty / no-results */
body.type-search .search-results:not(:has(.product)),
body.in-vyhledavani .search-results:not(:has(.product)) {
  padding: 48px 0 64px;
}

body.type-search .messages,
body.in-vyhledavani .messages,
body.type-search .empty,
body.in-vyhledavani .empty {
  font-family: var(--rl-body);
  font-size: 15px;
  line-height: 1.5;
  color: rgba(17, 17, 17, .75);
  margin: 24px 0 0;
  padding: 0;
  border: none;
  background: transparent;
}

@media (max-width: 1200px) {

  body.type-search #products.products.products-block,
  body.in-vyhledavani #products.products.products-block {
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
    gap: 28px !important;
  }
}

@media (max-width: 992px) {

  body.type-search #content-wrapper.content-wrapper,
  body.in-vyhledavani #content-wrapper.content-wrapper {
    padding-top: 20px !important;
    padding-bottom: 36px !important;
  }

  body.type-search #products.products.products-block,
  body.in-vyhledavani #products.products.products-block {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 14px 12px !important;
  }

  body.type-search #products .rl-price-row,
  body.in-vyhledavani #products .rl-price-row {
    flex-wrap: wrap;
    gap: 4px 8px;
  }
}


/* ═══════════════════════════════════════════
   19. PRODUCT DETAIL  (type-detail / type-product)
   Figma 275:3641 — reference HTML: detail-produktu.html
   Structure: .product-top > .p-image-wrapper + .p-info-wrapper
   (fallback: .p-detail-inner > .p-data-wrapper + .p-image-wrapper)
   ═══════════════════════════════════════════ */

body.type-detail #content-wrapper.content-wrapper,
body.type-product #content-wrapper.content-wrapper {
  max-width: var(--rl-max) !important;
  width: 100% !important;
  padding-left: var(--rl-gap) !important;
  padding-right: var(--rl-gap) !important;
  margin-left: auto !important;
  margin-right: auto !important;
}

body.type-detail .content-wrapper-in,
body.type-product .content-wrapper-in {
  float: none !important;
  width: 100% !important;
  max-width: 1600px;
  margin: 0 auto;
}

body.type-detail .p-detail,
body.type-product .p-detail {
  max-width: 1600px;
  margin: 0 auto;
}

body.type-detail .p-detail-inner,
body.type-product .p-detail-inner {
  float: none !important;
  width: 100% !important;
}

/* Breadcrumbs — same language as category (Domů text, last crumb red).
   Match max-width / padding of #content-wrapper so it aligns with .row.product-top. */
body.type-detail .breadcrumbs-wrapper,
body.type-product .breadcrumbs-wrapper {
  max-width: var(--rl-max) !important;
  width: 100% !important;
  margin-left: auto !important;
  margin-right: auto !important;
  padding-top: clamp(12px, 1.5vw, 20px);
  padding-bottom: clamp(12px, 1.5vw, 20px);
  padding-left: var(--rl-gap) !important;
  padding-right: var(--rl-gap) !important;
  box-sizing: border-box;
}

body.type-detail .breadcrumbs,
body.type-product .breadcrumbs {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  font-family: var(--rl-body);
  font-size: 12px;
  line-height: 18px;
  color: rgba(17, 17, 17, .8);
  padding: 0;
  margin: 0;
}

body.type-detail .breadcrumbs a,
body.type-product .breadcrumbs a,
body.type-detail .breadcrumbs .navigation-home-icon,
body.type-product .breadcrumbs .navigation-home-icon {
  color: rgba(17, 17, 17, .8);
  text-decoration: none;
}

body.type-detail .breadcrumbs a:hover,
body.type-product .breadcrumbs a:hover {
  color: var(--rl-black);
}

/* Show "Domů" text instead of home icon — same as category */
body.type-detail .navigation-home-icon .sr-only,
body.type-product .navigation-home-icon .sr-only {
  position: static !important;
  width: auto !important;
  height: auto !important;
  clip: auto !important;
  clip-path: none !important;
  overflow: visible !important;
  white-space: nowrap !important;
  color: rgba(17, 17, 17, .8) !important;
  font-weight: 400 !important;
}

body.type-detail .navigation-home-icon,
body.type-product .navigation-home-icon {
  background: none !important;
  width: auto !important;
  height: auto !important;
  text-indent: 0 !important;
  font-size: 12px;
  line-height: 18px;
}

body.type-detail .navigation-bullet,
body.type-product .navigation-bullet {
  color: rgba(17, 17, 17, .8);
  margin: 0;
}

body.type-detail .breadcrumbs [data-testid="breadcrumbsLastLevel"] [itemprop="name"],
body.type-detail .breadcrumbs [data-testid="breadcrumbsLastLevel"] span[data-title],
body.type-product .breadcrumbs [data-testid="breadcrumbsLastLevel"] [itemprop="name"],
body.type-product .breadcrumbs [data-testid="breadcrumbsLastLevel"] span[data-title] {
  color: var(--rl-red);
  font-weight: 500;
}

/* Hide Shoptet extras that are not in Figma */
body.type-detail .benefitBanner.position--benefitProduct,
body.type-product .benefitBanner.position--benefitProduct,
body.type-detail .rl-home-benefits-clone,
body.type-product .rl-home-benefits-clone,
body.type-detail .social-buttons-wrapper,
body.type-product .social-buttons-wrapper {
  display: none !important;
}

/* ── Product top grid (Figma: 1.10fr / 0.90fr, gap 48) ── */
body.type-detail .product-top,
body.type-product .product-top {
  display: grid !important;
  grid-template-columns: minmax(0, 1.1fr) minmax(0, .9fr);
  gap: 48px;
  margin: 0 0 48px;
  align-items: start;
  width: 100%;
}

body.type-detail .product-top>[class*="col-"],
body.type-product .product-top>[class*="col-"] {
  width: 100% !important;
  float: none !important;
  padding: 0 !important;
  max-width: 100% !important;
  min-width: 0 !important;
}

/* Stars originally sit in a full-width first col — hide shell after JS moves stars */
body.type-detail .product-top>.col-xs-12:not(.p-image-wrapper):not(.p-info-wrapper),
body.type-product .product-top>.col-xs-12:not(.p-image-wrapper):not(.p-info-wrapper) {
  display: none !important;
}

body.type-detail .product-top>.p-image-wrapper,
body.type-product .product-top>.p-image-wrapper {
  grid-column: 1;
  grid-row: 1;
}

body.type-detail .product-top>.p-info-wrapper,
body.type-product .product-top>.p-info-wrapper {
  grid-column: 2;
  grid-row: 1;
  position: sticky;
  top: calc(var(--rl-header-h) + 16px);
  /* lepí se 16px pod fixní hlavičku */
}

/* Live Rolser fallback (.p-data-wrapper) */
body.type-detail .p-detail-inner:has(> .p-data-wrapper),
body.type-product .p-detail-inner:has(> .p-data-wrapper) {
  display: grid !important;
  grid-template-columns: minmax(0, 1.1fr) minmax(0, .9fr);
  gap: 48px;
  margin: 0 0 48px;
  align-items: start;
}

body.type-detail .p-detail-inner:has(> .p-data-wrapper)>.p-image-wrapper,
body.type-product .p-detail-inner:has(> .p-data-wrapper)>.p-image-wrapper {
  grid-column: 1;
  grid-row: 1;
}

body.type-detail .p-detail-inner:has(> .p-data-wrapper)>.p-data-wrapper,
body.type-product .p-detail-inner:has(> .p-data-wrapper)>.p-data-wrapper {
  grid-column: 2;
  grid-row: 1;
  position: sticky;
  top: calc(var(--rl-header-h) + 16px);
}

body.type-detail .p-detail-inner:has(.p-image-wrapper .p-thumbnails-wrapper)>.p-thumbs-wrapper,
body.type-product .p-detail-inner:has(.p-image-wrapper .p-thumbnails-wrapper)>.p-thumbs-wrapper {
  display: none !important;
}

/* ── Gallery ── */
body.type-detail .p-image-wrapper,
body.type-product .p-image-wrapper {
  display: flex;
  flex-direction: column;
  gap: 12px;
  position: relative;
  /* Grid/flex default min-width:auto lets hi-res thumbs explode the column */
  min-width: 0 !important;
  max-width: 100% !important;
  width: 100%;
  overflow: hidden;
  box-sizing: border-box;
}

body.type-detail .p-image,
body.type-product .p-image {
  position: relative;
  width: 100%;
  height: 672px;
  max-height: 70vh;
  border: 1px solid #e8e8e6;
  border-radius: var(--rl-radius);
  background: #fff;
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 0;
}

body.type-detail .p-main-image,
body.type-product .p-main-image {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 100%;
}

body.type-detail .p-main-image img,
body.type-product .p-main-image img {
  max-width: 100%;
  max-height: 100%;
  width: auto;
  height: auto;
  object-fit: contain;
}

/* NOVINKA / flags on image */
body.type-detail .p-image .flags,
body.type-detail .p-image .flags-extra,
body.type-product .p-image .flags,
body.type-product .p-image .flags-extra {
  position: absolute;
  top: 10px;
  left: 10px;
  z-index: 2;
  display: flex;
  flex-direction: column;
  gap: 6px;
}

body.type-detail .p-image .flag,
body.type-product .p-image .flag {
  background: var(--rl-black);
  color: #fff;
  font-family: var(--rl-display);
  font-weight: 700;
  font-size: 9.28px;
  line-height: 1.4;
  letter-spacing: 1.3px;
  text-transform: uppercase;
  padding: 3px 7px;
  border-radius: 0;
  margin: 0;
}

/* Hide crossed-out price dump inside image flag */
body.type-detail .p-image .flag .price-standard,
body.type-detail .p-image .flag.flag-discount,
body.type-product .p-image .flag .price-standard,
body.type-product .p-image .flag.flag-discount {
  display: none !important;
}

body.type-detail .p-image .flag .price-save,
body.type-product .p-image .flag .price-save {
  display: none !important;
  /* discount moves to info column via JS */
}

/* Zoom affordance */
body.type-detail .p-image::after,
body.type-product .p-image::after {
  content: '';
  position: absolute;
  right: 10px;
  bottom: 10px;
  width: 30px;
  height: 30px;
  border: 1px solid rgba(0, 0, 0, .1);
  border-radius: 10px;
  background: #fff url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='18' height='18' fill='none' stroke='%23111' stroke-width='1.5'%3E%3Ccircle cx='8' cy='8' r='5.5'/%3E%3Cpath d='M12.5 12.5L16 16'/%3E%3C/svg%3E") center / 18px no-repeat;
  pointer-events: none;
  z-index: 2;
}

body.type-detail .p-image .carousel-control,
body.type-product .p-image .carousel-control {
  display: none !important;
}

/* Thumbs — 2 large tiles; keep Shoptet thumb→main swap (slick or classic left-scroll) */
body.type-detail .p-thumbnails-wrapper,
body.type-product .p-thumbnails-wrapper {
  position: relative;
  margin: 0;
  width: 100% !important;
  max-width: 100% !important;
  min-width: 0 !important;
  height: auto !important;
  max-height: none !important;
  padding: 0;
  box-sizing: border-box;
  overflow: hidden;
  touch-action: pan-y;
}

body.type-detail .rl-pd-thumbs .p-thumbnails,
body.type-product .rl-pd-thumbs .p-thumbnails {
  overflow: hidden !important;
  width: 100% !important;
  max-width: 100% !important;
  min-width: 0 !important;
  height: auto !important;
  position: relative;
  box-sizing: border-box;
  /* 1px inset — right border of 2nd tile must stay inside clip box */
  padding: 1px !important;
}

/* Classic Shoptet (no slick): horizontal strip via `left` */
body.type-detail .rl-pd-thumbs:not(:has(.slick-initialized)) .p-thumbnails-inner,
body.type-product .rl-pd-thumbs:not(:has(.slick-initialized)) .p-thumbnails-inner {
  display: block !important;
  position: relative !important;
  width: max-content !important;
  max-width: none !important;
}

/* Plynulá animace left-scrollu (classic i slick fallback) */
body.type-detail .rl-pd-thumbs .p-thumbnails-inner,
body.type-product .rl-pd-thumbs .p-thumbnails-inner {
  transition: left 0.38s cubic-bezier(.25, .46, .45, .94) !important;
  will-change: left;
}

body.type-detail .rl-pd-thumbs:not(:has(.slick-initialized)) .p-thumbnails-inner>div,
body.type-product .rl-pd-thumbs:not(:has(.slick-initialized)) .p-thumbnails-inner>div {
  display: flex !important;
  flex-wrap: nowrap;
  gap: 12px;
  width: max-content;
  margin: 0 !important;
  padding: 0 !important;
}

/*
  Slick 2-up: never use negative list margin — it shoved the 2nd tile’s
  right border under overflow:hidden. Equal slide padding = 12px gap.
*/
body.type-detail .rl-pd-thumbs .slick-list,
body.type-product .rl-pd-thumbs .slick-list {
  overflow: hidden !important;
  margin: 0 !important;
  padding: 0 !important;
  width: 100% !important;
  box-sizing: border-box !important;
}

body.type-detail .rl-pd-thumbs .slick-track,
body.type-product .rl-pd-thumbs .slick-track {
  display: flex !important;
  align-items: stretch;
  margin-left: 0 !important;
}

body.type-detail .rl-pd-thumbs .slick-slide,
body.type-product .rl-pd-thumbs .slick-slide {
  height: auto !important;
  box-sizing: border-box !important;
  padding: 0 6px !important;
  float: none !important;
}

body.type-detail .rl-pd-thumbs a.p-thumbnail,
body.type-product .rl-pd-thumbs a.p-thumbnail {
  display: flex !important;
  box-sizing: border-box !important;
  margin: 0 !important;
  padding: clamp(10px, 1.2vw, 20px);
  border: 1px solid #e8e8e6 !important;
  border-radius: var(--rl-radius);
  background: #fff;
  float: none !important;
  position: relative !important;
  align-items: center;
  justify-content: center;
  aspect-ratio: 1;
  overflow: hidden;
  /* Absolute cap — % max-width fails inside width:max-content flex parents */
  max-width: 480px;
  /* keep paint inside box — avoids subpixel clip of the 1px border */
  background-clip: padding-box;
}

/* Classic: JS sets explicit px width for exactly 2-up + left scroll */
body.type-detail .rl-pd-thumbs:not(:has(.slick-initialized)) a.p-thumbnail,
body.type-product .rl-pd-thumbs:not(:has(.slick-initialized)) a.p-thumbnail {
  flex: 0 0 auto;
}

/* Slick: fill the slide (slidesToShow: 2) */
body.type-detail .rl-pd-thumbs .slick-slide a.p-thumbnail,
body.type-product .rl-pd-thumbs .slick-slide a.p-thumbnail,
body.type-detail .rl-pd-thumbs a.p-thumbnail.slick-slide,
body.type-product .rl-pd-thumbs a.p-thumbnail.slick-slide {
  width: 100% !important;
  height: auto !important;
  max-width: none !important;
}

body.type-detail .rl-pd-thumbs a.p-thumbnail.highlighted,
body.type-product .rl-pd-thumbs a.p-thumbnail.highlighted {
  border-color: #111 !important;
}

body.type-detail .rl-pd-thumbs a.p-thumbnail img,
body.type-product .rl-pd-thumbs a.p-thumbnail img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  pointer-events: none;
}

body.type-detail .p-thumbnails a.cbox-gal,
body.type-product .p-thumbnails a.cbox-gal,
body.type-detail .rl-pd-thumbs .slick-arrow,
body.type-product .rl-pd-thumbs .slick-arrow {
  display: none !important;
}

/* Gallery arrows — circular + icon-arrow-left/right */
body.type-detail .rl-pd-thumbs .thumbnail-prev,
body.type-detail .rl-pd-thumbs .thumbnail-next,
body.type-product .rl-pd-thumbs .thumbnail-prev,
body.type-product .rl-pd-thumbs .thumbnail-next {
  display: flex !important;
  align-items: center;
  justify-content: center;
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  z-index: 3;
  width: 32px;
  height: 32px;
  border: none;
  border-radius: 50%;
  background: #fff;
  font-size: 0;
  color: transparent;
  cursor: pointer;
  text-decoration: none;
  box-shadow: 0 2px 10px rgba(0, 0, 0, .12);
}

body.type-detail .rl-pd-thumbs .thumbnail-prev,
body.type-product .rl-pd-thumbs .thumbnail-prev {
  left: 8px;
}

body.type-detail .rl-pd-thumbs .thumbnail-next,
body.type-product .rl-pd-thumbs .thumbnail-next {
  right: 8px;
}

body.type-detail .rl-pd-thumbs .thumbnail-prev::after,
body.type-product .rl-pd-thumbs .thumbnail-prev::after {
  content: '';
  display: block;
  width: 8px;
  height: 14px;
  background: url('../images/icon-arrow-left.svg') center / contain no-repeat;
}

body.type-detail .rl-pd-thumbs .thumbnail-next::after,
body.type-product .rl-pd-thumbs .thumbnail-next::after {
  content: '';
  display: block;
  width: 8px;
  height: 14px;
  background: url('../images/icon-arrow-right.svg') center / contain no-repeat;
}

body.type-detail .rl-pd-thumbs.overflow-prev-off .thumbnail-prev,
body.type-detail .rl-pd-thumbs:not(.overflow-prev) .thumbnail-prev,
body.type-product .rl-pd-thumbs.overflow-prev-off .thumbnail-prev {
  opacity: .35;
  pointer-events: none;
}

/* ── Info column ── */
body.type-detail .p-info-wrapper,
body.type-detail .p-data-wrapper,
body.type-product .p-info-wrapper,
body.type-product .p-data-wrapper {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: 0;
  padding-top: 4px;
  width: 100%;
  max-width: 100%;
  min-width: 0;
  box-sizing: border-box;
}

/* Discount badge (Figma red −17 %) */
body.type-detail .rl-pd-discount,
body.type-product .rl-pd-discount {
  display: inline-flex;
  align-items: center;
  width: max-content;
  background: var(--rl-red);
  color: #fff;
  font-family: var(--rl-display);
  font-weight: 700;
  font-size: 9.6px;
  line-height: 14.4px;
  letter-spacing: .768px;
  text-transform: uppercase;
  padding: 3px 9px;
  margin: 0 0 0;
}

body.type-detail .p-detail-inner>.p-detail-inner-header,
body.type-product .p-detail-inner>.p-detail-inner-header {
  /* hide pre-JS title above the grid; rebuildInfoColumn moves it into .rl-pd-info */
  position: absolute !important;
  left: -9999px !important;
  width: 1px !important;
  height: 1px !important;
  overflow: hidden !important;
}

body.type-detail .rl-pd-info,
body.type-product .rl-pd-info,
body.type-detail .p-info-wrapper.rl-pd-info,
body.type-product .p-info-wrapper.rl-pd-info {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: 0;
  width: 100%;
}

/* ── Info-column visual order (CSS order = immune to Shoptet's late DOM injection) ── */
/* Default: unexpected children sink to the bottom */
body.type-detail .rl-pd-info>*,
body.type-product .rl-pd-info>* {
  order: 50;
}

/* Named slots: specificity (0,2,0) beats the wildcard (0,1,0) */
body.type-detail .rl-pd-info>.rl-pd-discount,
body.type-product .rl-pd-info>.rl-pd-discount {
  order: 1;
}

body.type-detail .rl-pd-info>.p-detail-inner-header,
body.type-product .rl-pd-info>.p-detail-inner-header {
  order: 2;
}

body.type-detail .rl-pd-info>.p-detail-info,
body.type-product .rl-pd-info>.p-detail-info {
  order: 3;
}

body.type-detail .rl-pd-info>.p-short-description,
body.type-product .rl-pd-info>.p-short-description {
  order: 4;
}

body.type-detail .rl-pd-info>.rl-pd-buy-row,
body.type-product .rl-pd-info>.rl-pd-buy-row {
  order: 5;
}

body.type-detail .rl-pd-info>.rl-pd-features,
body.type-product .rl-pd-info>.rl-pd-features {
  order: 6;
}

/* Colors / variant selector — always after features, before ATC */
body.type-detail .rl-pd-info>.c-product-interconnection-detail-params,
body.type-product .rl-pd-info>.c-product-interconnection-detail-params {
  order: 7;
}

body.type-detail .rl-pd-info>.add-to-cart,
body.type-product .rl-pd-info>.add-to-cart {
  order: 8;
}

body.type-detail .rl-pd-info>.rl-pd-meta,
body.type-product .rl-pd-info>.rl-pd-meta {
  order: 9;
}

body.type-detail .rl-pd-info>.p-detail-inner-header,
body.type-product .rl-pd-info>.p-detail-inner-header {
  position: static !important;
  left: auto !important;
  width: 100% !important;
  height: auto !important;
  overflow: visible !important;
  padding-top: 14px;
  /* Figma: H1 container pt-[14px] — visual gap between badge and title */
}

body.type-detail .p-short-description a[href*="#description"],
body.type-product .p-short-description a[href*="#description"],
body.type-detail .rl-pd-info a[href*="#description"],
body.type-product .rl-pd-info a[href*="#description"] {
  color: var(--rl-red) !important;
  font-weight: 600;
  text-decoration: underline;
  text-underline-offset: 2px;
}

body.type-detail .p-short-description>p:has(> a[href*="#description"]),
body.type-product .p-short-description>p:has(> a[href*="#description"]) {
  display: inline;
  margin: 0;
}

body.type-detail .p-detail-inner-header h1,
body.type-product .p-detail-inner-header h1 {
  font-family: var(--rl-display);
  font-weight: 700;
  font-size: clamp(24px, 2.2vw, 32px);
  line-height: 1.1;
  letter-spacing: -.8px;
  color: var(--rl-black);
  margin: 0;
  max-width: none;
  overflow-wrap: anywhere;
  word-break: break-word;
  max-width: 100%;
}

body.type-detail .p-detail-inner-header .p-code,
body.type-product .p-detail-inner-header .p-code {
  display: none;
  /* moved to meta row */
}

/* Stars */
body.type-detail .p-detail-info,
body.type-product .p-detail-info {
  width: 100%;
  margin: 0;
  padding: 10px 0 0;
}

body.type-detail .stars-wrapper,
body.type-product .stars-wrapper {
  display: flex;
  align-items: center;
  gap: 20px;
  flex-wrap: wrap;
  margin: 0;
}

body.type-detail .stars.star-list,
body.type-product .stars.star-list {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  margin: 0;
  padding: 0;
  background: none;
  font-size: 0;
  line-height: 0;
}

body.type-detail .stars.star-list .star,
body.type-product .stars.star-list .star {
  display: none !important;
  /* nahrazeno .rl-star přes JS */
}

body.type-detail .stars.star-list .rl-star,
body.type-product .stars.star-list .rl-star {
  display: block;
  width: 14px;
  height: 13px;
  flex: 0 0 14px;
  margin: 0;
  padding: 0;
  border: none;
  background: none;
}

body.type-detail .stars-label,
body.type-product .stars-label,
body.type-detail .stars-link,
body.type-product .stars-link {
  font-family: var(--rl-body);
  font-size: 14px;
  line-height: 20px;
  color: #999;
  text-decoration: none;
}

body.type-detail .stars-link,
body.type-product .stars-link {
  text-decoration: underline;
  text-underline-offset: 2px;
}

body.type-detail .brand-wrapper,
body.type-detail .p-detail-info>div:has([data-testid="productCardBrandName"]),
body.type-product .brand-wrapper,
body.type-product .p-detail-info>div:has([data-testid="productCardBrandName"]) {
  display: none !important;
}

/* Short description */
body.type-detail .p-short-description,
body.type-product .p-short-description {
  font-family: var(--rl-body);
  font-size: 16px;
  line-height: 26.64px;
  color: #444;
  margin: 0;
  padding: 20px 0;
  /* Figma: Paragraph container py-[20px] — top AND bottom breathing room */
  width: 100%;
}

body.type-detail .p-short-description strong,
body.type-product .p-short-description strong {
  font-weight: 700;
  color: #444;
}

body.type-detail p:has(> a[href*="#description"]),
body.type-product p:has(> a[href*="#description"]) {
  margin: 0;
  padding: 0 0 8px;
  width: 100%;
}

body.type-detail a[href*="#description"].chevron-after,
body.type-product a[href*="#description"].chevron-after,
body.type-detail a[href="#description"],
body.type-product a[href="#description"] {
  font-family: var(--rl-body);
  font-size: 16px;
  line-height: 26.64px;
  color: var(--rl-red) !important;
  text-decoration: underline;
  text-underline-offset: 2px;
}

body.type-detail a[href*="#description"].chevron-after::after,
body.type-product a[href*="#description"].chevron-after::after {
  display: none;
}

/* Price + availability row */
body.type-detail .rl-pd-buy-row,
body.type-product .rl-pd-buy-row {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 16px;
  width: 100%;
  padding: 10px 0 0;
  margin: 0;
}

body.type-detail .p-final-price-wrapper,
body.type-product .p-final-price-wrapper {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 0;
  margin: 0;
  padding: 0;
}

body.type-detail .price-final,
body.type-detail .price-final-holder,
body.type-product .price-final,
body.type-product .price-final-holder {
  font-family: var(--rl-display) !important;
  font-weight: 800 !important;
  font-size: 33.6px !important;
  line-height: 33.6px !important;
  color: var(--rl-red) !important;
}

body.type-detail .price-additional,
body.type-product .price-additional {
  font-family: var(--rl-body);
  font-size: 16px;
  line-height: 24px;
  color: #999;
  margin-top: 0;
}

body.type-detail .p-final-price-wrapper .price-standard,
body.type-detail .p-final-price-wrapper .price-save,
body.type-product .p-final-price-wrapper .price-standard,
body.type-product .p-final-price-wrapper .price-save,
body.type-detail .price-measure,
body.type-product .price-measure {
  display: none !important;
}

body.type-detail .rl-pd-avail,
body.type-product .rl-pd-avail {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 4px;
  text-align: right;
  max-width: 245px;
}

body.type-detail .availability-value,
body.type-product .availability-value {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: flex-end;
  gap: 5px;
  margin: 0;
  font-family: var(--rl-display);
  font-weight: 600;
  font-size: 13px;
  line-height: 18px;
  color: #22a722 !important;
}

body.type-detail .availability-value .show-tooltip,
body.type-product .availability-value .show-tooltip {
  text-decoration: underline;
  text-decoration-style: dotted;
  text-underline-offset: 2px;
  color: inherit !important;
}

body.type-detail .availability-amount,
body.type-product .availability-amount {
  color: inherit !important;
  font-weight: 600;
}

body.type-detail .detail-parameters.shipping-options-layout,
body.type-detail .p-info-wrapper>.detail-parameters,
body.type-detail .p-data-wrapper>.detail-parameters,
body.type-product .p-info-wrapper>.detail-parameters,
body.type-product .p-data-wrapper>.detail-parameters {
  width: 100%;
  margin: 0;
  border: none;
  font-size: 14px;
}

body.type-detail .detail-parameters th,
body.type-detail .detail-parameters td,
body.type-product .detail-parameters th,
body.type-product .detail-parameters td {
  border: none;
  padding: 0;
  background: none;
  text-align: right;
  font-weight: 600;
  font-family: var(--rl-display);
  font-size: 14px;
  color: var(--rl-black);
}

body.type-detail .delivery-time-label,
body.type-product .delivery-time-label {
  display: inline;
  font-family: var(--rl-display);
  font-size: 14px;
  font-weight: 600;
  /* Figma: font-semibold */
  color: var(--rl-black);
  /* Figma: text-[#111] */
}

body.type-detail .delivery-time,
body.type-product .delivery-time {
  display: inline;
  font-family: var(--rl-display);
  font-size: 14px;
  font-weight: 600;
  /* Figma: font-semibold */
  color: var(--rl-black);
  /* Figma: text-[#111] */
}

body.type-detail .shipping-options,
body.type-product .shipping-options {
  display: block;
  margin-top: 4px;
  font-family: var(--rl-display);
  font-weight: 400;
  font-size: 14px;
  color: #999;
  text-decoration: underline;
  text-align: right;
}

/*
  Feature icons: visual CSS = pd-admin-snippets-external.html <style>.
  On Rolser only: hide while still in #description (JS moves under price).
  Specificity beats .rl-pd-features { display:flex !important } from the snippet.
*/
body.type-detail #description .rl-pd-features,
body.type-product #description .rl-pd-features,
body.type-detail .basic-description .rl-pd-features:not(.rl-pd-features--placed),
body.type-product .basic-description .rl-pd-features:not(.rl-pd-features--placed),
body.type-detail .extended-description .rl-pd-features:not(.rl-pd-features--placed),
body.type-product .extended-description .rl-pd-features:not(.rl-pd-features--placed) {
  display: none !important;
}

/* ── Color swatches (Figma 275:3825) ─────────────────────────────────────── */
/* Handles is-template--Classic + is-type--photos (Shoptet combination) */
body.type-detail .c-product-interconnection-detail-params,
body.type-product .c-product-interconnection-detail-params {
  display: flex;
  flex-direction: column;
  gap: 0;
  width: 100%;
  padding-top: 20px;
  margin: 20px 0;
  align-items: flex-start;
  border-top: 1px solid #ebebea;
}

/* "BARVA" label — Figma: Outfit SemiBold 13 px, uppercase, ls 1.38 px */
body.type-detail .c-product-interconnection-detail-params__type,
body.type-product .c-product-interconnection-detail-params__type {
  display: block !important;
  width: auto !important;
  font-family: var(--rl-body) !important;
  font-size: 12px;
  font-weight: 600 !important;
  line-height: 1.33;
  color: var(--rl-black) !important;
  text-transform: uppercase !important;
  letter-spacing: 0.106em;
  margin-bottom: 12px;
}

/* Swatches row */
body.type-detail .c-product-interconnection-detail-params__products,
body.type-product .c-product-interconnection-detail-params__products {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}

/* Each swatch — Figma: 64×64 px, border-radius 4 px, white bg, #e0e0de border */
body.type-detail .c-product-interconnection-detail-params__products>a span,
body.type-product .c-product-interconnection-detail-params__products>a span {
  /*display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
  box-sizing: border-box;
  width: 64px;
  height: 64px;
  padding: 6px;
  border: 1px solid #e0e0de;
  border-radius: 4px;
  background: #fff;
  text-decoration: none;
  overflow: hidden; */
  transition: border-color .15s;
}

/* Active/current swatch — Figma: border #111 */
body.type-detail .c-product-interconnection-detail-params__products>a.is-current span,
body.type-product .c-product-interconnection-detail-params__products>a.is-current span {
  border-color: var(--rl-black);
}

body.type-detail .c-product-interconnection-detail-params__products>a:hover span,
body.type-product .c-product-interconnection-detail-params__products>a:hover span {
  border-color: #999;
}

/* Product image inside swatch — Figma: 52×52 px, no circle clip */
body.type-detail .c-product-interconnection-detail-params__products .item-type-img,
body.type-product .c-product-interconnection-detail-params__products .item-type-img {
  display: block;
  width: 58px;
  height: 58px;
  background-size: cover;
  background-position: center;
  border-radius: 4px;
  padding: 6px;
  border: 1px solid #e0e0de;
}

/* Text label — hidden visually; aria-label on <a> handles accessibility */
body.type-detail .c-product-interconnection-detail-params__products .item-label,
body.type-product .c-product-interconnection-detail-params__products .item-label {
  position: absolute;
  width: auto;
  height: auto;
  overflow: visible;
  white-space: nowrap;
}

body.type-detail .c-product-interconnection-detail-params__products a:hover span[class^=item-type]+.item-label {
  font-size: 80% !important;
}


/* Quantity + ATC — Figma: [−][1][+] | Přidat do košíku | ♡ */
body.type-detail .add-to-cart,
body.type-product .add-to-cart {
  display: flex;
  align-items: stretch;
  gap: 8px;
  width: 100%;
  margin: 24px 0 0;
  /* Figma: ATC container pt-[24px] */
}

body.type-detail .add-to-cart .quantity,
body.type-product .add-to-cart .quantity {
  display: flex;
  align-items: stretch;
  border: 1px solid #e0e0de;
  /* Figma: #e0e0de (was #ddd) */
  border-radius: 0;
  overflow: hidden;
  flex: 0 0 auto;
  height: 50px;
  order: 1;
}

body.type-detail .add-to-cart .quantity .increase-tooltip,
body.type-detail .add-to-cart .quantity .decrease-tooltip,
body.type-product .add-to-cart .quantity .increase-tooltip,
body.type-product .add-to-cart .quantity .decrease-tooltip {
  display: none !important;
}

/* DOM is often + then − — force visual order − · amount · + */
body.type-detail .add-to-cart .quantity .decrease,
body.type-product .add-to-cart .quantity .decrease {
  order: 1;
}

body.type-detail .add-to-cart .quantity>label,
body.type-product .add-to-cart .quantity>label {
  order: 2;
  display: flex;
  align-items: center;
  margin: 0;
}

body.type-detail .add-to-cart .quantity .increase,
body.type-product .add-to-cart .quantity .increase {
  order: 3;
}

body.type-detail .add-to-cart .quantity .increase,
body.type-detail .add-to-cart .quantity .decrease,
body.type-product .add-to-cart .quantity .increase,
body.type-product .add-to-cart .quantity .decrease {
  width: 42px;
  height: 50px;
  border: none;
  background: #fff;
  font-size: 17.6px;
  /* Figma: text-[17.6px] (was 18px) */
  line-height: 26.4px;
  /* Figma: leading-[26.4px] */
  cursor: pointer;
  color: #555;
  /* Figma: text-[#555] (was #111) */
  padding: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 42px;
}

body.type-detail .add-to-cart .quantity .amount,
body.type-product .add-to-cart .quantity .amount {
  width: 36px;
  /* Figma: w-[36px] (was 40px) */
  height: 50px;
  border: none;
  border-left: 1px solid #f0f0ee;
  /* Figma: #f0f0ee */
  border-right: 1px solid #f0f0ee;
  text-align: center;
  font-family: var(--rl-body);
  font-size: 14.4px;
  /* Figma: text-[14.4px] (was 15px) */
  padding: 0;
  -moz-appearance: textfield;
}

body.type-detail .add-to-cart .quantity .amount::-webkit-outer-spin-button,
body.type-detail .add-to-cart .quantity .amount::-webkit-inner-spin-button,
body.type-product .add-to-cart .quantity .amount::-webkit-outer-spin-button,
body.type-product .add-to-cart .quantity .amount::-webkit-inner-spin-button {
  -webkit-appearance: none;
  margin: 0;
}

body.type-detail .add-to-cart-button,
body.type-product .add-to-cart-button {
  flex: 1 1 auto;
  order: 2;
  height: 50px;
  background: var(--rl-black) !important;
  color: #fff !important;
  border: none !important;
  border-radius: 0 !important;
  font-family: var(--rl-display) !important;
  font-weight: 600 !important;
  font-size: 12.8px !important;
  /* Figma: text-[12.8px] (was 14px) */
  letter-spacing: 0.1em;
  /* Figma: tracking-[1.28px] = 1.28/12.8 = 0.1em (was .06em) */
  text-transform: uppercase !important;
  outline: none;
  transition: background .2s ease, box-shadow .15s ease;
  -webkit-tap-highlight-color: transparent;
  cursor: pointer;
}

body.type-detail .add-to-cart-button:hover,
body.type-product .add-to-cart-button:hover {
  background: #333 !important;
}

body.type-detail .add-to-cart .rl-pd-wish,
body.type-product .add-to-cart .rl-pd-wish,
body.type-detail .add-to-cart #dkLabFavouriteDiv,
body.type-product .add-to-cart #dkLabFavouriteDiv {
  order: 3;
  flex: 0 0 50px;
  width: 50px;
  height: 50px;
  display: flex !important;
  align-items: center;
  justify-content: center;
  border: 1px solid #e0e0de;
  /* Figma: consistent with quantity border */
  background: #fff;
  text-decoration: none !important;
  color: #111;
  padding: 0;
  font-size: 0;
  margin: 0;
  cursor: pointer;
  box-sizing: border-box;
}

body.type-detail .add-to-cart .rl-pd-wish span,
body.type-product .add-to-cart .rl-pd-wish span,
body.type-detail .add-to-cart #dkLabFavouriteDiv span,
body.type-product .add-to-cart #dkLabFavouriteDiv span {
  display: none !important;
  font-size: 0 !important;
}

/* Hide dkLab icon-font; use same outline heart as design */
body.type-detail .add-to-cart #dkLabFavouriteDiv .dkLabFavDetailSpan::before,
body.type-product .add-to-cart #dkLabFavouriteDiv .dkLabFavDetailSpan::before {
  content: '' !important;
  font-size: 0 !important;
  font-family: none !important;
  margin: 0 !important;
  width: 18px !important;
  height: 18px !important;
  display: block !important;
  background: url('../images/icon-favorites.svg') center / contain no-repeat !important;
  color: transparent !important;
  opacity: 0.5;
}

/* Favourited — filled heart */
body.type-detail .add-to-cart #dkLabFavouriteDiv .dkLabFavDetailSpan.dkLabFavouriteDetailLinkRemove::before,
body.type-product .add-to-cart #dkLabFavouriteDiv .dkLabFavDetailSpan.dkLabFavouriteDetailLinkRemove::before {
  background: url('../images/icon-favorites-on.svg') center / contain no-repeat !important;
  opacity: 1;
}

/* Keep click target on the span */
body.type-detail .add-to-cart #dkLabFavouriteDiv .dkLabFavDetailSpan,
body.type-product .add-to-cart #dkLabFavouriteDiv .dkLabFavDetailSpan {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: 100% !important;
  height: 100% !important;
  margin: 0 !important;
  padding: 0 !important;
  font-size: 0 !important;
  color: #111 !important;
}

/* Hide the raw text link until JS parks it next to ATC */
body.type-detail #dkLabFavouriteDiv:not(.rl-pd-wish),
body.type-product #dkLabFavouriteDiv:not(.rl-pd-wish) {
  position: absolute !important;
  width: 1px !important;
  height: 1px !important;
  padding: 0 !important;
  margin: -1px !important;
  overflow: hidden !important;
  clip: rect(0, 0, 0, 0) !important;
  border: 0 !important;
}

@media (max-width: 768px) {
  body.type-detail .add-to-cart #dkLabFavouriteDiv,
  body.type-product .add-to-cart #dkLabFavouriteDiv,
  body.type-detail .add-to-cart .rl-pd-wish,
  body.type-product .add-to-cart .rl-pd-wish {
    flex: 0 0 48px !important;
    width: 48px !important;
    height: 48px !important;
  }
}

/* ── Sticky buy bar (.rl-pd-sticky) ──
   Desktop: fixed under header — thumb + title + tab anchors + price + ATC
   Mobile: fixed bottom — price + avail + cart icon
   Visible only with body.rl-pd-sticky-on (after scrolling past primary ATC) */
.rl-pd-sticky {
  position: fixed;
  left: 0;
  right: 0;
  z-index: 55;
  background: #fff;
  pointer-events: none;
  visibility: hidden;
  opacity: 0;
  transition:
    opacity .28s var(--rl-ease-out, cubic-bezier(.22, 1, .36, 1)),
    transform .28s var(--rl-ease-out, cubic-bezier(.22, 1, .36, 1)),
    visibility .28s;
}

body.rl-pd-sticky-on .rl-pd-sticky {
  pointer-events: auto;
  visibility: visible;
  opacity: 1;
}

.rl-pd-sticky__inner {
  display: flex;
  align-items: center;
  gap: 16px;
  max-width: var(--rl-max, 1440px);
  margin: 0 auto;
  padding: 12px var(--rl-gap, 24px);
  box-sizing: border-box;
}

.rl-pd-sticky__left {
  display: flex;
  align-items: center;
  gap: 14px;
  min-width: 0;
  flex: 1 1 auto;
}

.rl-pd-sticky__thumb {
  flex: 0 0 56px;
  width: 56px;
  height: 56px;
  object-fit: contain;
  background: #fafafa;
  border: 1px solid #f0f0ee;
}

.rl-pd-sticky__meta {
  min-width: 0;
  flex: 1 1 auto;
}

.rl-pd-sticky__title {
  font-family: var(--rl-display);
  font-size: 15px;
  font-weight: 600;
  line-height: 1.3;
  color: var(--rl-black);
  margin: 0 0 4px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.rl-pd-sticky__tabs {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  gap: 0 2px;
  max-height: 28px;
  overflow: hidden;
}

.rl-pd-sticky a.rl-pd-sticky__tab,
.rl-pd-sticky a.rl-pd-sticky__tab:link,
.rl-pd-sticky a.rl-pd-sticky__tab:visited {
  font-family: var(--rl-display) !important;
  font-size: 13px !important;
  font-weight: 400 !important;
  line-height: 20px !important;
  color: #999 !important;
  text-decoration: none !important;
  white-space: nowrap;
  padding: 0 10px 4px;
  border: 0 !important;
  border-bottom: 2px solid transparent !important;
  background: none !important;
  box-shadow: none !important;
  outline: none;
  -webkit-tap-highlight-color: transparent;
}

.rl-pd-sticky a.rl-pd-sticky__tab:hover,
.rl-pd-sticky a.rl-pd-sticky__tab:focus-visible {
  color: var(--rl-black) !important;
}

.rl-pd-sticky a.rl-pd-sticky__tab:focus-visible {
  border-bottom-color: var(--rl-black) !important;
}

.rl-pd-sticky a.rl-pd-sticky__tab:active {
  color: var(--rl-black) !important;
  opacity: .75;
}

.rl-pd-sticky a.rl-pd-sticky__tab.is-active,
.rl-pd-sticky a.rl-pd-sticky__tab.is-active:link,
.rl-pd-sticky a.rl-pd-sticky__tab.is-active:visited,
.rl-pd-sticky a.rl-pd-sticky__tab.is-active:hover {
  color: var(--rl-black) !important;
  font-weight: 600 !important;
  font-size: 13px !important;
  border-bottom-color: var(--rl-black) !important;
}

.rl-pd-sticky__buy {
  display: flex;
  align-items: center;
  gap: 16px;
  flex: 0 0 auto;
  margin-left: auto;
}

.rl-pd-sticky__price-col {
  text-align: right;
  white-space: nowrap;
}

.rl-pd-sticky__price {
  font-family: var(--rl-display);
  font-size: 20px;
  font-weight: 800;
  line-height: 1.2;
  color: var(--rl-red);
}

.rl-pd-sticky__avail {
  font-family: var(--rl-display);
  font-size: 12px;
  font-weight: 600;
  line-height: 1.3;
  color: #999;
  text-decoration: underline;
  text-decoration-style: dotted;
  text-underline-offset: 2px;
  margin-top: 2px;
}

.rl-pd-sticky__avail.is-in-stock {
  color: #22a722;
}

.rl-pd-sticky__atc {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  height: 48px;
  padding: 0 20px;
  border: 0;
  background: var(--rl-black);
  color: #fff;
  cursor: pointer;
  font-family: var(--rl-display);
  font-weight: 600;
  font-size: 12.8px;
  letter-spacing: .1em;
  text-transform: uppercase;
  white-space: nowrap;
  transition: background .2s ease, box-shadow .15s ease;
  outline: none;
  -webkit-tap-highlight-color: transparent;
}

.rl-pd-sticky__atc:hover {
  background: #333;
}

.rl-pd-sticky__atc-icon {
  display: block;
  width: 20px;
  height: 20px;
  background: url('../images/icon-cart.svg') center / contain no-repeat;
  filter: brightness(0) invert(1);
  flex-shrink: 0;
}

/* Desktop: under sticky site header (1px up) */
@media (min-width: 992px) {
  .rl-pd-sticky {
    top: calc(var(--rl-header-h) - 1px);
    bottom: auto;
    border-bottom: 1px solid var(--rl-border);
    box-shadow: 0 8px 24px rgba(0, 0, 0, .06);
    transform: translateY(-12px);
  }

  body.rl-pd-sticky-on .rl-pd-sticky {
    transform: translateY(0);
  }

  body.rl-pd-sticky-on {
    scroll-padding-top: calc(var(--rl-header-h) + var(--rl-pd-sticky-h) + 12px);
  }
}

/* Tablet / mobile: bottom bar — price + cart icon only */
@media (max-width: 991px) {
  .rl-pd-sticky {
    top: auto;
    bottom: 0;
    border-top: 1px solid #f0f0ee;
    box-shadow: 0 -6px 24px rgba(0, 0, 0, .08);
    padding-bottom: env(safe-area-inset-bottom, 0px);
    transform: translateY(12px);
  }

  body.rl-pd-sticky-on .rl-pd-sticky {
    transform: translateY(0);
  }

  .rl-pd-sticky__inner {
    padding: 10px var(--rl-gap, 16px);
    gap: 12px;
  }

  .rl-pd-sticky__left {
    display: none;
  }

  .rl-pd-sticky__buy {
    width: 100%;
    margin-left: 0;
    justify-content: space-between;
  }

  .rl-pd-sticky__price-col {
    text-align: left;
  }

  .rl-pd-sticky__price {
    font-size: 22px;
  }

  .rl-pd-sticky__atc {
    flex: 0 0 auto;
    width: auto;
    height: 52px;
    padding: 0 20px;
  }

  .rl-pd-sticky__atc-label {
    position: relative;
    height: auto;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: unset;
    white-space: normal;
    border: 0;
    font-size: 10px;
    color: #fff;
    width: 75px;
  }

  .rl-pd-sticky__atc-icon {
    width: 22px;
    height: 22px;
  }

  /* Lift chat / scroll-top above the sticky bar */
  body.rl-pd-sticky-on #chat-application,
  body.rl-pd-sticky-on .scroll-top,
  body.rl-pd-sticky-on .back-to-top,
  body.rl-pd-sticky-on [class*="scroll-top"],
  body.rl-pd-sticky-on [class*="back-to-top"],
  body.rl-pd-sticky-on .rl-btt {
    bottom: calc(var(--rl-pd-sticky-h, 80px) + 16px + env(safe-area-inset-bottom, 0px)) !important;
  }
}

/* Code + warranty */
body.type-detail .rl-pd-meta,
body.type-product .rl-pd-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 0 50px;
  /* Figma: gap-[50px] between code and warranty */
  width: 100%;
  margin: 15px 0 0;
  /* Figma: pt-[15px] (was 16px) */
  font-family: var(--rl-body);
  font-size: 13px;
  color: #666;
}

body.type-detail .rl-pd-meta .p-code,
body.type-product .rl-pd-meta .p-code {
  display: inline;
}

body.type-detail .rl-pd-meta .p-code-label,
body.type-product .rl-pd-meta .p-code-label {
  margin-right: 4px;
}

body.type-detail .rl-pd-warranty,
body.type-product .rl-pd-warranty {
  color: #666;
}

/* ── Tabs ── */
body.type-detail .rl-pd-acc__btn,
body.type-product .rl-pd-acc__btn {
  display: none;
}

/* Smooth-scroll landing pad under sticky header (“Více informací” etc.) */
body.type-detail .p-detail-tabs-wrapper,
body.type-product .p-detail-tabs-wrapper,
body.type-detail #description,
body.type-product #description {
  scroll-margin-top: calc(var(--rl-header-h) + var(--rl-announce-h, 0px) + 12px);
}

body.type-detail .shp-tabs-wrapper.p-detail-tabs-wrapper,
body.type-product .shp-tabs-wrapper.p-detail-tabs-wrapper {
  margin: clamp(40px, 4vw, 64px) 0 0;
  /* Figma: 64px gap before tabs (was 24px) */
  border-bottom: 1px solid #e5e5e3;
  /* Figma: #e5e5e3 (was #ebebea) */
  padding-bottom: 48px;
}

body.type-detail #p-detail-tabs.shp-tabs,
body.type-product #p-detail-tabs.shp-tabs {
  display: flex;
  flex-wrap: wrap;
  gap: 0;
  /* Figma: tabs abut each other, padding is on each link (was 0 28px) */
  border: none;
  margin: 0;
  padding: 0;
  list-style: none;
}

body.type-detail #p-detail-tabs .shp-tab,
body.type-product #p-detail-tabs .shp-tab {
  float: none;
  margin: 0;
}

body.type-detail #p-detail-tabs .shp-tab-link,
body.type-product #p-detail-tabs .shp-tab-link {
  display: block;
  padding: 13px 22px;
  /* Figma: px-[22px] py-[13px] → total h = 13+20.4+13+2 ≈ 48.4px ✓ */
  border: none !important;
  border-bottom: 2px solid transparent !important;
  background: none !important;
  font-family: var(--rl-display);
  /* Figma: Outfit (was Inter/rl-body) */
  font-size: 15px;
  /* Figma: text-[15px] (was 14px) */
  font-weight: 400;
  /* Figma: Regular for inactive */
  line-height: 20.4px;
  /* Figma: leading-[20.4px] */
  color: #999;
  /* Figma: text-[#999] (was #777) */
  text-decoration: none;
  white-space: nowrap;
}

body.type-detail #p-detail-tabs .shp-tab.active .shp-tab-link,
body.type-detail #p-detail-tabs .shp-tab-link.active,
body.type-product #p-detail-tabs .shp-tab.active .shp-tab-link,
body.type-product #p-detail-tabs .shp-tab-link.active {
  color: var(--rl-black);
  /* Figma: text-[#111] */
  border-bottom-color: var(--rl-black) !important;
  /* Figma: border-[#111] border-b-2 */
  font-weight: 600;
  /* Figma: font-semibold */
}

body.type-detail #p-detail-tabs .shp-tab-link:hover,
body.type-product #p-detail-tabs .shp-tab-link:hover {
  color: var(--rl-black);
}

body.type-detail #tab-content,
body.type-product #tab-content {
  padding: 32px 0 0;
}

/* Tab panes: hidden unless .active — must be here so we don't rely on Shoptet's Bootstrap cache */
body.type-detail #tab-content .tab-pane,
body.type-product #tab-content .tab-pane {
  display: none;
}

body.type-detail #tab-content .tab-pane.active,
body.type-product #tab-content .tab-pane.active {
  display: block;
}

/* Description layout + Proč Rolser
   (.rl-pd-desc__* styly jsou v pd-admin-snippets-external.html) */
body.type-detail .rl-pd-desc-layout,
body.type-product .rl-pd-desc-layout {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 320px;
  /* Figma: 1184 main + 320 sidebar (was 280px) */
  gap: 48px;
  /* Figma: 1232-1184 = 48px gap (was 40px) */
  align-items: start;
  margin-bottom: 24px;
}

body.type-detail .basic-description>h3,
body.type-product .basic-description>h3 {
  display: none !important;
}

body.type-detail .rl-pd-why,
body.type-product .rl-pd-why {
  background: var(--rl-tint-bg);
  padding: 28px;
  /* Figma: content starts at x=28, y=28 → 28px all sides (was 24px 20px) */
  position: sticky;
  /* Under site header; slides further down when .rl-pd-sticky appears */
  top: calc(var(--rl-header-h) + 16px);
  z-index: 1;
  transition: top .28s var(--rl-ease-out, cubic-bezier(.22, 1, .36, 1));
}

@media (min-width: 992px) {
  body.rl-pd-sticky-on.type-detail .rl-pd-why,
  body.rl-pd-sticky-on.type-product .rl-pd-why {
    /* Clear fixed PDP buy bar under header + small gap */
    top: calc(var(--rl-header-h) + var(--rl-pd-sticky-h) + 16px);
  }
}

@media (prefers-reduced-motion: reduce) {
  body.type-detail .rl-pd-why,
  body.type-product .rl-pd-why {
    transition: none;
  }
}

body.type-detail .rl-pd-why__title,
body.type-product .rl-pd-why__title {
  font-family: var(--rl-display);
  font-weight: 700;
  font-size: 14px;
  letter-spacing: .08em;
  text-transform: uppercase;
  margin: 0 0 20px;
  color: var(--rl-black);
}

body.type-detail .rl-pd-why__item,
body.type-product .rl-pd-why__item {
  display: flex;
  gap: 12px;
  align-items: flex-start;
  margin: 0 0 20px;
  /* Figma: Container:margin pt-[20px] between items (was 18px) */
}

body.type-detail .rl-pd-why__icon,
body.type-product .rl-pd-why__icon {
  flex: 0 0 40px;
  width: 40px;
  height: 40px;
}

body.type-detail .rl-pd-why__icon img,
body.type-product .rl-pd-why__icon img {
  width: 100%;
  height: 100%;
  object-fit: contain;
}

body.type-detail .rl-pd-why__name,
body.type-product .rl-pd-why__name {
  display: block;
  font-family: var(--rl-display);
  font-size: 13px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .04em;
  margin-bottom: 4px;
}

body.type-detail .rl-pd-why__data,
body.type-product .rl-pd-why__data {
  font-size: 13px;
  line-height: 1.4;
  color: #555;
}

body.type-detail #description .basic-description>h2,
body.type-product #description .basic-description>h2 {
  font-family: var(--rl-display);
  font-size: 20px;
  margin: 24px 0 12px;
}

/* CTA links under description — stejný vzor jako .homepage-blog-wrapper .read-article */
body.type-detail .rl-pd-cta,
body.type-product .rl-pd-cta {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  align-items: center;
  gap: clamp(16px, 2.5vw, 50px);
  margin: 0;
  padding: 22px 0 0;
  border-bottom: 1px solid #e5e5e3;
}

body.type-detail .rl-pd-cta__link,
body.type-product .rl-pd-cta__link {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin: 0 0 22px;
  padding-bottom: 3px;
  color: var(--rl-black);
  font-family: var(--rl-display);
  font-weight: 600;
  font-size: clamp(12px, .67vw, 15px);
  letter-spacing: 0.75px;
  text-transform: uppercase;
  text-decoration: none;
  border-bottom: 1px solid var(--rl-black);
  white-space: nowrap;
  transition: gap .2s var(--rl-ease-out);
}

body.type-detail .rl-pd-cta__link::after,
body.type-product .rl-pd-cta__link::after {
  content: '→';
  font-style: normal;
  color: var(--rl-red);
  transition: transform .2s var(--rl-ease-out);
}

body.type-detail .rl-pd-cta__link:hover::after,
body.type-product .rl-pd-cta__link:hover::after {
  transform: translateX(4px);
}

/* legacy JS šipka — skryj, používáme ::after */
body.type-detail .rl-pd-cta__arrow,
body.type-product .rl-pd-cta__arrow {
  display: none !important;
}

/* Shoptet chat icon on ask-question CTA — hide default glyph */
body.type-detail .rl-pd-cta__link.link-icon.chat::before,
body.type-product .rl-pd-cta__link.link-icon.chat::before {
  display: none !important;
}

/* Related / alternative sections — cards via .products-block */
body.type-detail .rl-pd-section-title,
body.type-detail .products-related-header,
body.type-product .rl-pd-section-title,
body.type-product .products-related-header {
  font-family: var(--rl-display);
  font-weight: 700;
  font-size: clamp(22px, 1.8vw, 28px);
  margin: clamp(32px, 4vw, 56px) 0 clamp(16px, 2vw, 28px);
  color: var(--rl-black);
}

body.type-detail .rl-pd-related,
body.type-detail .rl-pd-alternative,
body.type-product .rl-pd-related,
body.type-product .rl-pd-alternative {
  margin: 0 0 clamp(40px, 5vw, 72px);
}

body.type-detail .rl-pd-related .products,
body.type-detail .rl-pd-alternative .products,
body.type-product .rl-pd-related .products,
body.type-product .rl-pd-alternative .products {
  width: 100% !important;
  transform: none !important;
  left: auto !important;
}

body.type-detail .rl-pd-related .product.inactive,
body.type-detail .rl-pd-alternative .product.inactive,
body.type-detail .products-related .product.inactive,
body.type-detail .products-alternative .product.inactive,
body.type-detail #productsAlternative .product.inactive,
body.type-detail #tab-content .products .product.inactive,
body.type-product .rl-pd-related .product.inactive,
body.type-product .rl-pd-alternative .product.inactive,
body.type-product .products-related .product.inactive,
body.type-product .products-alternative .product.inactive,
body.type-product #productsAlternative .product.inactive,
body.type-product #tab-content .products .product.inactive,
body.type-detail .rl-pd-related .product.related-sm-screen-hide,
body.type-detail .rl-pd-alternative .product.related-sm-screen-hide,
body.type-detail .products-related .product.related-sm-screen-hide,
body.type-detail .products-alternative .product.related-sm-screen-hide,
body.type-detail #productsAlternative .product.related-sm-screen-hide,
body.type-detail #tab-content .products .product.related-sm-screen-hide,
body.type-product .rl-pd-related .product.related-sm-screen-hide,
body.type-product .rl-pd-alternative .product.related-sm-screen-hide,
body.type-product .products-related .product.related-sm-screen-hide,
body.type-product .products-alternative .product.related-sm-screen-hide,
body.type-product #productsAlternative .product.related-sm-screen-hide,
body.type-product #tab-content .products .product.related-sm-screen-hide {
  display: block !important;
}

/* Reset switchable/slick leftovers that collapse rails */
body.type-detail .products-block.p-switchable,
body.type-detail #productsAlternative .products,
body.type-product .products-block.p-switchable,
body.type-product #productsAlternative .products {
  width: 100% !important;
  transform: none !important;
  left: auto !important;
  height: auto !important;
}

/* Hide related browse / prev-next chrome */
body.type-detail .browse-p,
body.type-product .browse-p {
  display: none !important;
}

body.type-detail .rl-pd-related .products-related-header+.browse-p,
body.type-detail .rl-pd-related .button-wrapper,
body.type-detail .products-related .browse-p,
body.type-product .rl-pd-related .button-wrapper {
  display: none !important;
}

/* ── Tab panes: Parametry / Files / Hodnocení / Diskuze ── */
body.type-detail #tab-content .tab-pane>h2,
body.type-detail #tab-content .tab-pane>h3,
body.type-detail #tab-content .extended-description>h3,
body.type-detail #productDiscussion h2,
body.type-product #tab-content .tab-pane>h2,
body.type-product #tab-content .tab-pane>h3,
body.type-product #tab-content .extended-description>h3,
body.type-product #productDiscussion h2 {
  font-family: var(--rl-display);
  font-weight: 700;
  font-size: clamp(20px, 1.6vw, 24px);
  margin: 0 0 24px;
  color: var(--rl-black);
}

/* Parametry — full width, 2 columns */
body.type-detail #rlParameters .detail-parameters,
body.type-product #rlParameters .detail-parameters,
body.type-detail #description .extended-description .detail-parameters,
body.type-product #description .extended-description .detail-parameters {
  width: 100%;
  max-width: none;
  border-collapse: collapse;
  display: grid;
  grid-template-columns: 1fr 1fr;
  column-gap: clamp(24px, 4vw, 64px);
  row-gap: 0;
}

body.type-detail #rlParameters .detail-parameters tbody,
body.type-product #rlParameters .detail-parameters tbody,
body.type-detail #description .extended-description .detail-parameters tbody,
body.type-product #description .extended-description .detail-parameters tbody {
  display: contents;
}

body.type-detail #rlParameters .detail-parameters tr,
body.type-product #rlParameters .detail-parameters tr,
body.type-detail #description .extended-description .detail-parameters tr,
body.type-product #description .extended-description .detail-parameters tr {
  display: grid;
  grid-template-columns: minmax(110px, 42%) 1fr;
  gap: 8px 16px;
  align-items: baseline;
  padding: 14px 0;
  border-bottom: 1px solid #ebebea;
}

body.type-detail #rlParameters .detail-parameters th,
body.type-detail #rlParameters .detail-parameters td,
body.type-product #rlParameters .detail-parameters th,
body.type-product #rlParameters .detail-parameters td,
body.type-detail #description .extended-description .detail-parameters th,
body.type-detail #description .extended-description .detail-parameters td,
body.type-product #description .extended-description .detail-parameters th,
body.type-product #description .extended-description .detail-parameters td {
  text-align: left;
  padding: 0;
  border: none;
  font-family: var(--rl-body);
  font-size: 14px;
  line-height: 1.45;
  vertical-align: top;
}

body.type-detail #rlParameters .detail-parameters th,
body.type-product #rlParameters .detail-parameters th,
body.type-detail #description .extended-description .detail-parameters th,
body.type-product #description .extended-description .detail-parameters th {
  width: auto;
  color: #666;
  font-weight: 500;
}

body.type-detail #rlParameters .detail-parameters td,
body.type-product #rlParameters .detail-parameters td,
body.type-detail #description .extended-description .detail-parameters td,
body.type-product #description .extended-description .detail-parameters td {
  color: var(--rl-black);
  font-weight: 500;
}

body.type-detail #rlParameters .detail-parameters td a,
body.type-product #rlParameters .detail-parameters td a {
  color: inherit;
  text-decoration: underline;
  text-underline-offset: 2px;
}

body.type-detail #rlParameters .detail-parameters .row-header-label-colon,
body.type-product #rlParameters .detail-parameters .row-header-label-colon {
  display: none;
}

/* Související soubory — button-like chips */
body.type-detail #relatedFiles,
body.type-product #relatedFiles {
  list-style: none;
  margin: 0;
  padding: 0;
}

body.type-detail #relatedFiles ul.rl-pd-files,
body.type-product #relatedFiles ul.rl-pd-files,
body.type-detail #relatedFiles>ul,
body.type-product #relatedFiles>ul {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
}

body.type-detail #relatedFiles li,
body.type-product #relatedFiles li {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  margin: 0;
  padding: 14px 18px;
  border: 1px solid #e0e0de;
  background: #fff;
  font-family: var(--rl-body);
  font-size: 14px;
  line-height: 1.3;
  transition: border-color .2s var(--rl-ease-out), background .2s var(--rl-ease-out);
}

body.type-detail #relatedFiles li:hover,
body.type-product #relatedFiles li:hover {
  border-color: var(--rl-black);
  background: var(--rl-tint-bg);
}

body.type-detail #relatedFiles li img,
body.type-product #relatedFiles li img {
  flex: 0 0 auto;
  width: 18px;
  height: 18px;
  object-fit: contain;
}

body.type-detail #relatedFiles a,
body.type-product #relatedFiles a {
  color: var(--rl-black);
  font-family: var(--rl-display);
  font-weight: 600;
  font-size: 13px;
  letter-spacing: .02em;
  text-decoration: none;
}

body.type-detail #relatedFiles a:hover,
body.type-product #relatedFiles a:hover {
  color: var(--rl-black);
}

/* ── Hodnocení — 30% souhrn | 70% zanechat hodnocení; výpis pod tím ── */
body.type-detail p[data-testid="textCommentNotice"],
body.type-product p[data-testid="textCommentNotice"]  {
  font-family: var(--rl-body);
  font-size: 14px;
  color: #666;
  margin: 0 0 16px;
}

body.type-detail #ratingTab .rate-wrapper,
body.type-product #ratingTab .rate-wrapper {
  display: grid;
  grid-template-columns: minmax(220px, 3fr) minmax(0, 7fr);
  column-gap: clamp(24px, 3vw, 48px);
  row-gap: 16px;
  align-items: start;
  margin: 0 0 28px;
}

body.type-detail #ratingTab .rate-wrapper>.rate-wrap,
body.type-product #ratingTab .rate-wrapper>.rate-wrap {
  grid-column: 1;
  grid-row: 1 / span 2;
}

body.type-detail #ratingTab .rate-wrapper>.rate-form-trigger,
body.type-detail #ratingTab .rate-wrapper>.add-comment.rate-form-trigger,
body.type-product #ratingTab .rate-wrapper>.rate-form-trigger,
body.type-product #ratingTab .rate-wrapper>.add-comment.rate-form-trigger {
  grid-column: 2;
  grid-row: 1;
}

body.type-detail #ratingTab .rate-wrapper>#rate-form,
body.type-product #ratingTab .rate-wrapper>#rate-form {
  grid-column: 2;
  grid-row: 2;
}

body.type-detail #ratingTab>#ratingsListHeading,
body.type-product #ratingTab>#ratingsListHeading {
  /* sr-only */
}

body.type-detail #ratingTab>#ratingsList,
body.type-product #ratingTab>#ratingsList {
  width: 100%;
  margin-top: 8px;
}

/* Souhrn vlevo — skóre nad histogramem */
body.type-detail #ratingTab .rate-wrap,
body.type-product #ratingTab .rate-wrap {
  display: flex;
  flex-direction: column;
  gap: 20px;
  align-items: stretch;
  padding: 20px;
  background: var(--rl-tint-bg);
  margin: 0;
  height: 100%;
  box-sizing: border-box;
}

body.type-detail #ratingTab .rate-average-wrap,
body.type-product #ratingTab .rate-average-wrap {
  display: block;
  margin: 0;
  padding: 0;
  border: none;
}

body.type-detail #ratingTab .rate-average-inner,
body.type-product #ratingTab .rate-average-inner {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 10px;
}

body.type-detail #ratingTab .rate-average,
body.type-product #ratingTab .rate-average {
  font-family: var(--rl-display);
  font-size: clamp(40px, 4vw, 56px);
  font-weight: 700;
  line-height: 1;
  color: var(--rl-black);
}

body.type-detail #ratingTab .rate-star-wrap,
body.type-product #ratingTab .rate-star-wrap {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

body.type-detail #ratingTab .rate-star-wrap .stars-label,
body.type-product #ratingTab .rate-star-wrap .stars-label {
  font-family: var(--rl-body);
  font-size: 13px;
  color: #666;
}

body.type-detail #ratingTab .rates,
body.type-product #ratingTab .rates {
  display: flex;
  flex-direction: column;
  gap: 8px;
  width: 100%;
  max-width: none;
}

body.type-detail #ratingTab .rate-list,
body.type-product #ratingTab .rate-list {
  display: grid;
  grid-template-columns: 36px minmax(0, 1fr);
  align-items: center;
  gap: 10px;
  margin: 0;
}

body.type-detail #ratingTab .rate-star,
body.type-product #ratingTab .rate-star {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-family: var(--rl-display);
  font-size: 13px;
  font-weight: 600;
  color: var(--rl-black);
}

body.type-detail #ratingTab .rate-block,
body.type-product #ratingTab .rate-block {
  position: relative;
  min-width: 0;
  padding-right: 36px;
}

body.type-detail #ratingTab .rate-bar,
body.type-product #ratingTab .rate-bar {
  display: block;
  position: relative;
  height: 8px;
  background: #e8e8e6;
  overflow: visible;
}

body.type-detail #ratingTab .rate-bar::before,
body.type-product #ratingTab .rate-bar::before {
  content: '';
  position: absolute;
  inset: 0 auto 0 0;
  width: var(--rate-bar-width, 0%);
  height: 100%;
  background: var(--rl-black);
}

body.type-detail #ratingTab .rate-bar .rate-count,
body.type-product #ratingTab .rate-bar .rate-count {
  position: absolute;
  left: calc(100% + 10px);
  top: 50%;
  transform: translateY(-50%);
  width: 28px;
  font-family: var(--rl-body);
  font-size: 12px;
  color: #777;
  line-height: 1;
  text-align: left;
}

body.type-detail #ratingTab .rate-form-trigger,
body.type-detail #productDiscussion .discussion-form-trigger,
body.type-product #ratingTab .rate-form-trigger,
body.type-product #productDiscussion .discussion-form-trigger {
  margin: 0;
}

body.type-detail #ratingTab .rate-form-trigger .btn,
body.type-detail #productDiscussion .discussion-form-trigger .btn,
body.type-detail #ratingTab .add-comment.rate-form-trigger .btn,
body.type-product #ratingTab .rate-form-trigger .btn,
body.type-product #productDiscussion .discussion-form-trigger .btn {
  background: transparent !important;
  color: var(--rl-black) !important;
  border: 1px solid #e0e0de !important;
  border-radius: 0 !important;
  font-family: var(--rl-display) !important;
  font-weight: 600 !important;
  font-size: 12.8px !important;
  letter-spacing: .1em;
  text-transform: uppercase;
  padding: 12px 22px !important;
  height: auto !important;
  width: 100%;
}

body.type-detail #ratingTab .rate-form-trigger .btn:hover,
body.type-detail #productDiscussion .discussion-form-trigger .btn:hover,
body.type-product #ratingTab .rate-form-trigger .btn:hover,
body.type-product #productDiscussion .discussion-form-trigger .btn:hover {
  border-color: var(--rl-black) !important;
  background: #fff !important;
}

body.type-detail #ratingTab #rate-form,
body.type-detail #productDiscussion #discussion-form,
body.type-product #ratingTab #rate-form,
body.type-product #productDiscussion #discussion-form {
  max-width: none;
  width: 100%;
  margin: 0;
  padding: 20px;
  background: var(--rl-tint-bg);
  border: 1px solid #ebebea;
  box-sizing: border-box;
}

.required-asterisk {font-size: 12px;
  display: inline-block;
  margin-bottom: 10px;
}

.required-asterisk--before:before, .required-asterisk:before{
  content: ' *';
  color: var(--rl-red);
}

/* Mobile: keep rating form closed until „Přidat hodnocení“ (Shoptet .visible) */
@media (max-width: 991px) {
  body.type-detail #ratingTab #rate-form.js-hidden:not(.visible),
  body.type-product #ratingTab #rate-form.js-hidden:not(.visible) {
    display: none !important;
  }

  body.type-detail #ratingTab #rate-form.js-hidden.visible,
  body.type-product #ratingTab #rate-form.js-hidden.visible {
    display: block !important;
  }

  /* Diskuze: same unveil pattern */
  body.type-detail #productDiscussion #discussion-form.js-hidden:not(.visible),
  body.type-product #productDiscussion #discussion-form.js-hidden:not(.visible) {
    display: none !important;
  }

  body.type-detail #productDiscussion #discussion-form.js-hidden.visible,
  body.type-product #productDiscussion #discussion-form.js-hidden.visible {
    display: block !important;
  }

  body.type-detail #productDiscussion .unveiled #discussion-form.js-hidden.visible,
  body.type-product #productDiscussion .unveiled #discussion-form.js-hidden.visible {
    display: none !important;
  }

  /* After unveil Shoptet empties #discussion-form and moves <form> out */
  body.type-detail #productDiscussion #discussion-form.visible:empty,
  body.type-product #productDiscussion #discussion-form.visible:empty {
    display: none !important;
    padding: 0 !important;
    margin: 0 !important;
    border: none !important;
    background: transparent !important;
  }

  body.type-detail #productDiscussion .discussionContainer > form.discussion-form.visible-permanent,
  body.type-product #productDiscussion .discussionContainer > form.discussion-form.visible-permanent {
    display: block !important;
    max-width: none;
    width: 100%;
    margin: 0;
    padding: 20px;
    background: var(--rl-tint-bg);
    border: 1px solid #ebebea;
    box-sizing: border-box;
  }

  /* Hide notice + „Přidat komentář“ once form is open */
  body.type-detail #productDiscussion .discussionContainer:has(#discussion-form.visible) > p[data-testid="textCommentNotice"],
  body.type-detail #productDiscussion .discussionContainer:has(> form.discussion-form.visible-permanent) > p[data-testid="textCommentNotice"],
  body.type-product #productDiscussion .discussionContainer:has(#discussion-form.visible) > p[data-testid="textCommentNotice"],
  body.type-product #productDiscussion .discussionContainer:has(> form.discussion-form.visible-permanent) > p[data-testid="textCommentNotice"],
  body.type-detail #productDiscussion .discussionContainer:has(#discussion-form.visible) > .discussion-form-trigger,
  body.type-detail #productDiscussion .discussionContainer:has(> form.discussion-form.visible-permanent) > .discussion-form-trigger,
  body.type-product #productDiscussion .discussionContainer:has(#discussion-form.visible) > .discussion-form-trigger,
  body.type-product #productDiscussion .discussionContainer:has(> form.discussion-form.visible-permanent) > .discussion-form-trigger {
    display: none !important;
  }
}

body.type-detail #ratingTab #rate-form form,
body.type-detail #productDiscussion #discussion-form form,
body.type-product #ratingTab #rate-form form,
body.type-product #productDiscussion #discussion-form form {
  max-width: none;
  margin: 0;
  padding: 0;
  background: transparent;
  border: none;
}

body.type-detail #ratingTab .vote-form h3,
body.type-product #ratingTab .vote-form h3 {
  font-family: var(--rl-display);
  font-size: 18px;
  font-weight: 700;
  margin: 0 0 16px;
}

body.type-detail #ratingTab .rating-form .form-group,
body.type-detail #productDiscussion .discussion-form .form-group,
body.type-product #ratingTab .rating-form .form-group,
body.type-product #productDiscussion .discussion-form .form-group {
  margin-bottom: 16px;
}

body.type-detail #ratingTab .rating-form label,
body.type-detail #productDiscussion .discussion-form label,
body.type-detail #ratingTab .rating-form .label,
body.type-detail #productDiscussion .discussion-form .label,
body.type-product #ratingTab .rating-form label,
body.type-product #productDiscussion .discussion-form label {
  font-family: var(--rl-body);
  font-size: 13px;
  font-weight: 500;
  color: #444;
  margin-bottom: 6px;
}

body.type-detail #ratingTab .rating-form .form-control,
body.type-detail #productDiscussion .discussion-form .form-control,
body.type-product #ratingTab .rating-form .form-control,
body.type-product #productDiscussion .discussion-form .form-control {
  border: 1px solid #e0e0de;
  border-radius: 0;
  box-shadow: none;
  height: 46px;
  font-family: var(--rl-body);
  font-size: 14px;
  padding: 10px 12px;
  background: #fff;
  display: block !important;
  width: 100% !important;
  max-width: 100% !important;
  box-sizing: border-box !important;
}

body.type-detail #ratingTab .rating-form .form-group,
body.type-detail #productDiscussion .discussion-form .form-group,
body.type-product #ratingTab .rating-form .form-group,
body.type-product #productDiscussion .discussion-form .form-group,
body.type-detail #ratingTab .rating-form .form-control-wrapper,
body.type-detail #productDiscussion .discussion-form .form-control-wrapper,
body.type-product #ratingTab .rating-form .form-control-wrapper,
body.type-product #productDiscussion .discussion-form .form-control-wrapper,
body.type-detail #ratingTab .rating-form .smart-label-wrapper,
body.type-detail #productDiscussion .discussion-form .smart-label-wrapper,
body.type-product #ratingTab .rating-form .smart-label-wrapper,
body.type-product #productDiscussion .discussion-form .smart-label-wrapper {
  width: 100% !important;
  max-width: 100% !important;
  float: none !important;
  display: block !important;
  box-sizing: border-box;
}

body.type-detail #ratingTab .rating-form .form-group[class*="col-"],
body.type-detail #productDiscussion .discussion-form .form-group[class*="col-"],
body.type-product #ratingTab .rating-form .form-group[class*="col-"],
body.type-product #productDiscussion .discussion-form .form-group[class*="col-"],
body.type-detail #ratingTab .rating-form [class*="col-sm-"],
body.type-detail #productDiscussion .discussion-form [class*="col-sm-"],
body.type-product #ratingTab .rating-form [class*="col-sm-"],
body.type-product #productDiscussion .discussion-form [class*="col-sm-"] {
  width: 100% !important;
  max-width: 100% !important;
  flex: 0 0 100% !important;
  float: none !important;
  padding-left: 0 !important;
  padding-right: 0 !important;
}

body.type-detail #ratingTab .rating-form textarea.form-control,
body.type-detail #productDiscussion .discussion-form textarea.form-control,
body.type-product #ratingTab .rating-form textarea.form-control,
body.type-product #productDiscussion .discussion-form textarea.form-control {
  height: auto;
  min-height: 120px;
}

body.type-detail #ratingTab .rating-stars-wrapper,
body.type-product #ratingTab .rating-stars-wrapper {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  margin-top: 8px;
}

/* Interactive rating: radio → star icons (star.svg / star-off.svg) */
body.type-detail #ratingTab .rating-star,
body.type-product #ratingTab .rating-star {
  position: relative;
  display: inline-block;
  width: 22px;
  height: 22px;
  margin: 0;
  padding: 0;
  cursor: pointer;
  background: url("/user/documents/upload/assets/images/star-off.svg") center / contain no-repeat;
  transition: background-image .15s ease;
  outline: none;
}

body.type-detail #ratingTab .rating-star input[type="radio"],
body.type-product #ratingTab .rating-star input[type="radio"] {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  margin: 0;
  opacity: 0;
  cursor: pointer;
  appearance: none;
  -webkit-appearance: none;
  outline: none;
}

body.type-detail #ratingTab .rating-stars-wrapper:has(input[value="1"]:checked) .rating-star:nth-child(-n+1),
body.type-detail #ratingTab .rating-stars-wrapper:has(input[value="2"]:checked) .rating-star:nth-child(-n+2),
body.type-detail #ratingTab .rating-stars-wrapper:has(input[value="3"]:checked) .rating-star:nth-child(-n+3),
body.type-detail #ratingTab .rating-stars-wrapper:has(input[value="4"]:checked) .rating-star:nth-child(-n+4),
body.type-detail #ratingTab .rating-stars-wrapper:has(input[value="5"]:checked) .rating-star:nth-child(-n+5),
body.type-product #ratingTab .rating-stars-wrapper:has(input[value="1"]:checked) .rating-star:nth-child(-n+1),
body.type-product #ratingTab .rating-stars-wrapper:has(input[value="2"]:checked) .rating-star:nth-child(-n+2),
body.type-product #ratingTab .rating-stars-wrapper:has(input[value="3"]:checked) .rating-star:nth-child(-n+3),
body.type-product #ratingTab .rating-stars-wrapper:has(input[value="4"]:checked) .rating-star:nth-child(-n+4),
body.type-product #ratingTab .rating-stars-wrapper:has(input[value="5"]:checked) .rating-star:nth-child(-n+5) {
  background-image: url("/user/documents/upload/assets/images/star.svg");
}

@media (hover: hover) {
  body.type-detail #ratingTab .rating-stars-wrapper:has(.rating-star:nth-child(1):hover) .rating-star:nth-child(-n+1),
  body.type-detail #ratingTab .rating-stars-wrapper:has(.rating-star:nth-child(2):hover) .rating-star:nth-child(-n+2),
  body.type-detail #ratingTab .rating-stars-wrapper:has(.rating-star:nth-child(3):hover) .rating-star:nth-child(-n+3),
  body.type-detail #ratingTab .rating-stars-wrapper:has(.rating-star:nth-child(4):hover) .rating-star:nth-child(-n+4),
  body.type-detail #ratingTab .rating-stars-wrapper:has(.rating-star:nth-child(5):hover) .rating-star:nth-child(-n+5),
  body.type-product #ratingTab .rating-stars-wrapper:has(.rating-star:nth-child(1):hover) .rating-star:nth-child(-n+1),
  body.type-product #ratingTab .rating-stars-wrapper:has(.rating-star:nth-child(2):hover) .rating-star:nth-child(-n+2),
  body.type-product #ratingTab .rating-stars-wrapper:has(.rating-star:nth-child(3):hover) .rating-star:nth-child(-n+3),
  body.type-product #ratingTab .rating-stars-wrapper:has(.rating-star:nth-child(4):hover) .rating-star:nth-child(-n+4),
  body.type-product #ratingTab .rating-stars-wrapper:has(.rating-star:nth-child(5):hover) .rating-star:nth-child(-n+5) {
    background-image: url("/user/documents/upload/assets/images/star.svg");
  }
}

body.type-detail #ratingTab .rating-form .btn-primary,
body.type-detail #productDiscussion .discussion-form .btn-primary,
body.type-product #ratingTab .rating-form .btn-primary,
body.type-product #productDiscussion .discussion-form .btn-primary {
  background: var(--rl-black) !important;
  color: #fff !important;
  border: none !important;
  border-radius: 0 !important;
  font-family: var(--rl-display) !important;
  font-weight: 600 !important;
  font-size: 12.8px !important;
  letter-spacing: .1em;
  text-transform: uppercase;
  padding: 14px 28px !important;
  height: auto !important;
}

body.type-detail #ratingTab .rating-form .btn-primary:hover,
body.type-detail #productDiscussion .discussion-form .btn-primary:hover,
body.type-product #ratingTab .rating-form .btn-primary:hover,
body.type-product #productDiscussion .discussion-form .btn-primary:hover {
  background: #333 !important;
}

/* Shared vote / review / discussion cards */
body.type-detail #ratingsList,
body.type-detail #discussionsList,
body.type-product #ratingsList,
body.type-product #discussionsList {
  display: flex;
  flex-direction: column;
  gap: 16px;
  margin: 0;
  padding: 0;
}

body.type-detail .vote-wrap,
body.type-product .vote-wrap {
  margin: 0;
  padding: 22px 24px;
  border: 1px solid #ebebea;
  background: var(--rl-tint-bg);
}

body.type-detail .vote-header,
body.type-product .vote-header {
  display: flex;
  align-items: flex-start;
  gap: 14px;
  margin: 0 0 14px;
}

body.type-detail .vote-pic,
body.type-product .vote-pic {
  position: relative;
  flex: 0 0 48px;
  width: 48px;
  height: 48px;
  overflow: hidden;
  border-radius: 50%;
  background: #eee;
}

body.type-detail .vote-initials,
body.type-product .vote-initials {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 100%;
  font-family: var(--rl-display);
  font-size: 14px;
  font-weight: 700;
  color: #fff;
  background: var(--avatar-bg, #555);
}

body.type-detail .vote-pic img,
body.type-product .vote-pic img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

body.type-detail .vote-title,
body.type-product .vote-title {
  display: block;
  font-family: var(--rl-display);
  font-size: 16px;
  font-weight: 700;
  color: var(--rl-black);
  line-height: 1.3;
  margin: 0 0 2px;
}

body.type-detail .vote-name,
body.type-product .vote-name {
  display: inline;
  font-family: var(--rl-body);
  font-size: 13px;
  font-weight: 500;
  color: #444;
}

body.type-detail .vote-rating,
body.type-product .vote-rating {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  margin-top: 4px;
}

body.type-detail .vote-time,
body.type-product .vote-time {
  font-family: var(--rl-body);
  font-size: 12px;
  color: #999;
}

body.type-detail .vote-content,
body.type-product .vote-content {
  font-family: var(--rl-body);
  font-size: 14px;
  line-height: 1.55;
  color: #333;
  padding-left: 62px;
  /* align under text, beside avatar */
}

body.type-detail .vote-content>br,
body.type-product .vote-content>br {
  display: none;
}

body.type-detail .vote-content .add-comment.btn,
body.type-detail #discussionsList .vote-content .btn,
body.type-product .vote-content .add-comment.btn,
body.type-product #discussionsList .vote-content .btn {
  margin-top: 14px;
  background: transparent !important;
  color: var(--rl-black) !important;
  border: 1px solid #e0e0de !important;
  border-radius: 0 !important;
  font-family: var(--rl-display) !important;
  font-weight: 600 !important;
  font-size: 11px !important;
  letter-spacing: .08em;
  text-transform: uppercase;
  padding: 8px 14px !important;
  height: auto !important;
}

body.type-detail .vote-content .add-comment.btn:hover,
body.type-detail #discussionsList .vote-content .btn:hover,
body.type-product .vote-content .add-comment.btn:hover,
body.type-product #discussionsList .vote-content .btn:hover {
  border-color: var(--rl-black) !important;
}

/* Reply form (Odpovědět) — inline pod komentářem */
body.type-detail #discussionsList .vote-content>.discussion-form.vote-form:empty,
body.type-product #discussionsList .vote-content>.discussion-form.vote-form:empty {
  display: none !important;
}

body.type-detail #discussionsList .vote-content>form.discussion-form,
body.type-detail #discussionsList .vote-content>.discussion-form.vote-form:not(:empty),
body.type-product #discussionsList .vote-content>form.discussion-form,
body.type-product #discussionsList .vote-content>.discussion-form.vote-form:not(:empty) {
  display: block !important;
  width: 100%;
  max-width: none;
  margin: 16px 0 0;
  padding: 20px;
  background: var(--rl-tint-bg);
  border: 1px solid #ebebea;
  box-sizing: border-box;
}

body.type-detail #discussionsList .vote-content>form.discussion-form .form-group,
body.type-product #discussionsList .vote-content>form.discussion-form .form-group {
  margin-bottom: 14px;
}

body.type-detail #discussionsList .vote-content>form.discussion-form label,
body.type-detail #discussionsList .vote-content>form.discussion-form .label,
body.type-product #discussionsList .vote-content>form.discussion-form label,
body.type-product #discussionsList .vote-content>form.discussion-form .label {
  font-family: var(--rl-body);
  font-size: 13px;
  font-weight: 500;
  color: #444;
  margin-bottom: 6px;
}

body.type-detail #discussionsList .vote-content>form.discussion-form .form-control,
body.type-product #discussionsList .vote-content>form.discussion-form .form-control {
  border: 1px solid #e0e0de;
  border-radius: 0;
  box-shadow: none;
  height: 44px;
  font-family: var(--rl-body);
  font-size: 14px;
  padding: 10px 12px;
  background: #fff;
  display: block !important;
  width: 100% !important;
  max-width: 100% !important;
  box-sizing: border-box !important;
}

body.type-detail #discussionsList .vote-content>form.discussion-form textarea.form-control,
body.type-product #discussionsList .vote-content>form.discussion-form textarea.form-control {
  height: auto;
  min-height: 100px;
}

body.type-detail #discussionsList .vote-content>form.discussion-form .btn-primary,
body.type-product #discussionsList .vote-content>form.discussion-form .btn-primary {
  background: var(--rl-black) !important;
  color: #fff !important;
  border: none !important;
  border-radius: 0 !important;
  font-family: var(--rl-display) !important;
  font-weight: 600 !important;
  font-size: 12px !important;
  letter-spacing: .1em;
  text-transform: uppercase;
  padding: 12px 22px !important;
  height: auto !important;
  width: auto !important;
}

body.type-detail #discussionsList .vote-content>form.discussion-form .btn-primary:hover,
body.type-product #discussionsList .vote-content>form.discussion-form .btn-primary:hover {
  background: #333 !important;
}

body.type-detail #discussionsList .vote-content>form.discussion-form .form-legend,
body.type-product #discussionsList .vote-content>form.discussion-form .form-legend {
  font-family: var(--rl-body);
  font-size: 12px;
  color: #888;
  margin: 0 0 12px;
}

body.type-detail #discussionsList .vote-content>form.discussion-form a,
body.type-product #discussionsList .vote-content>form.discussion-form a {
  color: var(--rl-black);
  text-decoration: underline;
  text-underline-offset: 2px;
}

body.type-detail #productDiscussion .discussionContainer,
body.type-product #productDiscussion .discussionContainer {
  margin-top: 0;
  display: grid;
  grid-template-columns: minmax(220px, 3fr) minmax(0, 7fr);
  column-gap: clamp(24px, 3vw, 48px);
  row-gap: 16px;
  align-items: start;
}

body.type-detail #productDiscussion .discussionContainer>.discussion-form-trigger,
body.type-product #productDiscussion .discussionContainer>.discussion-form-trigger {
  grid-column: 1;
  grid-row: 1;
}

body.type-detail #productDiscussion .discussionContainer>#discussion-form,
body.type-product #productDiscussion .discussionContainer>#discussion-form {
  grid-column: 1;
  grid-row: 2;
}

body.type-detail #productDiscussion .discussionContainer>#discussionsListHeading,
body.type-product #productDiscussion .discussionContainer>#discussionsListHeading {
  grid-column: 2;
  grid-row: 1;
  width: 0 !important;
  height: 0 !important;
  margin: 0 !important;
  padding: 0 !important;
  overflow: hidden !important;
}

body.type-detail #productDiscussion .discussionContainer>#discussionsList,
body.type-product #productDiscussion .discussionContainer>#discussionsList {
  grid-column: 2;
  grid-row: 1 / span 2;
  min-width: 0;
}

/* nested replies (Shoptet indent) */
body.type-detail #discussionsList .vote-wrap .vote-wrap,
body.type-product #discussionsList .vote-wrap .vote-wrap {
  margin-top: 14px;
  margin-left: 62px;
  background: rgba(139, 106, 79, 0.08);
}

/* ── Product gallery lightbox — match premium reference (image on blur) ── */
#cboxOverlay.productDetail {
  background: #ffffff !important;
  /*-webkit-backdrop-filter: blur(10px) !important;
    backdrop-filter: blur(10px) !important;*/
  opacity: 1 !important;
}

/* Shell shrinks to the photo — controls sit ON the image */
#colorbox.productDetail {
  top: 50% !important;
  left: 50% !important;
  right: auto !important;
  bottom: auto !important;
  width: auto !important;
  height: auto !important;
  max-width: min(1100px, calc(100vw - 48px)) !important;
  max-height: calc(100vh - 48px) !important;
  background: transparent !important;
  border: none !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  transform: translate(-50%, -50%) !important;
  padding: 0 !important;
  overflow: visible !important;
  margin: 0 !important;
}

#colorbox.productDetail #cboxWrapper,
#colorbox.productDetail #cboxContent,
#colorbox.productDetail #cboxLoadedContent {
  width: auto !important;
  height: auto !important;
  max-width: min(1100px, calc(100vw - 48px)) !important;
  max-height: calc(100vh - 48px) !important;
  background: transparent !important;
  float: none !important;
  clear: none !important;
  margin: 0 !important;
  padding: 0 !important;
  overflow: visible !important;
  position: relative !important;
}

#colorbox.productDetail #cboxContent {
  display: block !important;
}

#colorbox.productDetail #cboxLoadedContent {
  display: block !important;
  line-height: 0 !important;
}

#colorbox.productDetail img.cboxPhoto {
  display: block !important;
  max-height: calc(100vh - 48px) !important;
  max-width: min(1100px, calc(100vw - 48px)) !important;
  width: auto !important;
  height: auto !important;
  object-fit: contain !important;
  margin: 0 !important;
  border-radius: 0 !important;
  float: none !important;
  cursor: default !important;
  opacity: 1;
}

/* Stay visible while paging — never re-hide the gallery shell mid-session */
#colorbox.productDetail.rl-cbox-ready,
#cboxOverlay.productDetail.rl-cbox-ready {
  opacity: 1 !important;
  visibility: visible !important;
  pointer-events: auto !important;
}

#colorbox.productDetail #cboxTitle,
#colorbox.productDetail #cboxCurrent,
#colorbox.productDetail .rl-cbox-thumbs {
  display: none !important;
}

/* Shared circular control look */
#colorbox.productDetail #cboxPrevious,
#colorbox.productDetail #cboxNext,
#colorbox.productDetail #cboxClose {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  position: absolute !important;
  width: 44px !important;
  height: 44px !important;
  border-radius: 50% !important;
  background-color: #fff !important;
  border: none !important;
  color: transparent !important;
  font-size: 0 !important;
  line-height: 0 !important;
  text-indent: 0 !important;
  overflow: hidden !important;
  cursor: pointer !important;
  opacity: 1 !important;
  box-shadow: 0 2px 16px rgba(0, 0, 0, .14) !important;
  transition: box-shadow .15s ease, transform .15s ease !important;
  z-index: 40 !important;
}

#colorbox.productDetail #cboxPrevious:hover,
#colorbox.productDetail #cboxNext:hover,
#colorbox.productDetail #cboxClose:hover {
  box-shadow: 0 4px 20px rgba(0, 0, 0, .18) !important;
}

/* Arrows — bottom corners INSIDE the photo (reference) */
#colorbox.productDetail #cboxPrevious,
#colorbox.productDetail #cboxNext {
  top: auto !important;
  bottom: 16px !important;
  transform: none !important;
}

#colorbox.productDetail #cboxPrevious {
  left: 16px !important;
  right: auto !important;
}

#colorbox.productDetail #cboxNext {
  right: 16px !important;
  left: auto !important;
}

#colorbox.productDetail #cboxPrevious::after,
#colorbox.productDetail #cboxNext::after {
  content: '' !important;
  display: block !important;
  width: 8px !important;
  height: 14px !important;
  font-size: 0 !important;
  color: transparent !important;
  line-height: 0 !important;
  transform: none !important;
}

#colorbox.productDetail #cboxPrevious::after {
  background: url('../images/icon-arrow-left.svg') center / contain no-repeat !important;
}

#colorbox.productDetail #cboxNext::after {
  background: url('../images/icon-arrow-right.svg') center / contain no-repeat !important;
}

/* Close — top-right INSIDE the photo */
#colorbox.productDetail #cboxClose {
  top: 16px !important;
  right: 16px !important;
  bottom: auto !important;
  left: auto !important;
  background-image: url('../images/icon-filter-close.svg') !important;
  background-position: center !important;
  background-size: 14px 14px !important;
  background-repeat: no-repeat !important;
}

#colorbox.productDetail #cboxClose::before {
  display: none !important;
  content: none !important;
}

@media (max-width: 768px) {

  #colorbox.productDetail {
    max-width: calc(100vw - 24px) !important;
    max-height: calc(100vh - 24px) !important;
  }

  #colorbox.productDetail #cboxWrapper,
  #colorbox.productDetail #cboxContent,
  #colorbox.productDetail #cboxLoadedContent {
    max-width: calc(100vw - 24px) !important;
    max-height: calc(100vh - 24px) !important;
  }

  #colorbox.productDetail img.cboxPhoto {
    max-width: calc(100vw - 24px) !important;
    max-height: calc(100vh - 24px) !important;
  }

  #colorbox.productDetail #cboxPrevious,
  #colorbox.productDetail #cboxNext,
  #colorbox.productDetail #cboxClose {
    width: 40px !important;
    height: 40px !important;
  }

  #colorbox.productDetail #cboxPrevious,
  #colorbox.productDetail #cboxNext {
    bottom: 12px !important;
  }

  #colorbox.productDetail #cboxPrevious {
    left: 12px !important;
  }

  #colorbox.productDetail #cboxNext {
    right: 12px !important;
  }

  #colorbox.productDetail #cboxClose {
    top: 12px !important;
    right: 12px !important;
  }
}

/* Detail responsive — tablet / mobile: compact gallery so info stays visible */
@media (max-width: 1100px) {

  body.type-detail .product-top,
  body.type-product .product-top,
  body.type-detail .p-detail-inner:has(> .p-data-wrapper),
  body.type-product .p-detail-inner:has(> .p-data-wrapper) {
    grid-template-columns: 1fr;
    gap: 24px;
    margin-bottom: 36px;
  }

  body.type-detail .product-top>.p-image-wrapper,
  body.type-detail .product-top>.p-info-wrapper,
  body.type-detail .p-detail-inner>.p-image-wrapper,
  body.type-detail .p-detail-inner>.p-data-wrapper,
  body.type-product .product-top>.p-image-wrapper,
  body.type-product .product-top>.p-info-wrapper,
  body.type-product .p-detail-inner>.p-image-wrapper,
  body.type-product .p-detail-inner>.p-data-wrapper {
    grid-column: auto;
    grid-row: auto;
    position: static;
    top: auto;
  }

  body.type-detail .product-top>.p-image-wrapper,
  body.type-product .product-top>.p-image-wrapper,
  body.type-detail .p-detail-inner>.p-image-wrapper,
  body.type-product .p-detail-inner>.p-image-wrapper {
    order: 0;
    width: 100%;
    max-width: 100%;
  }

  body.type-detail .p-image-wrapper,
  body.type-product .p-image-wrapper {
    gap: 10px;
  }

  /* Cap gallery height — 1:1 square would eat the whole tablet viewport */
  body.type-detail .p-image,
  body.type-product .p-image {
    height: auto;
    aspect-ratio: 1 / 1;
    max-height: min(52vh, 520px);
  }

  body.type-detail .p-main-image,
  body.type-product .p-main-image {
    max-height: inherit;
  }

  body.type-detail .p-main-image img,
  body.type-product .p-main-image img {
    max-height: min(52vh, 520px);
  }

  body.type-detail .p-image-wrapper,
  body.type-product .p-image-wrapper,
  body.type-detail .p-thumbnails-wrapper,
  body.type-product .p-thumbnails-wrapper {
    min-width: 0 !important;
    max-width: 100% !important;
    width: 100% !important;
  }

  /* 2 tiles — vw gutters (%, inside width:max-content flex, is unreliable) */
  body.type-detail .rl-pd-thumbs a.p-thumbnail,
  body.type-product .rl-pd-thumbs a.p-thumbnail {
    --rl-thumb-w: calc((100vw - 2 * var(--rl-gap) - 8px) / 2);
    width: var(--rl-thumb-w) !important;
    max-width: var(--rl-thumb-w) !important;
    height: auto !important;
    aspect-ratio: 1 !important;
    max-height: none !important;
    flex: 0 0 var(--rl-thumb-w) !important;
    padding: 8px !important;
  }

  body.type-detail .rl-pd-thumbs .p-thumbnails,
  body.type-product .rl-pd-thumbs .p-thumbnails {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    width: 100% !important;
    max-width: 100% !important;
  }

  body.type-detail .rl-pd-thumbs:not(:has(.slick-initialized)) .p-thumbnails-inner>div,
  body.type-product .rl-pd-thumbs:not(:has(.slick-initialized)) .p-thumbnails-inner>div {
    gap: 7px !important;
  }

  body.type-detail .rl-pd-info,
  body.type-product .rl-pd-info,
  body.type-detail .p-info-wrapper,
  body.type-product .p-info-wrapper {
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    box-sizing: border-box !important;
  }

  body.type-detail .rl-pd-thumbs .p-thumbnails::-webkit-scrollbar,
  body.type-product .rl-pd-thumbs .p-thumbnails::-webkit-scrollbar {
    display: none;
  }

  body.type-detail .rl-pd-info>.p-detail-inner-header,
  body.type-product .rl-pd-info>.p-detail-inner-header {
    margin-bottom: 10px;
  }

  body.type-detail .p-detail-inner-header h1,
  body.type-product .p-detail-inner-header h1 {
    font-size: clamp(22px, 3.2vw, 28px);
    line-height: 1.25;
  }

  body.type-detail .p-short-description,
  body.type-product .p-short-description {
    font-size: 14px;
    line-height: 1.5;
  }

  body.type-detail .rl-pd-buy-row,
  body.type-product .rl-pd-buy-row {
    margin-top: 16px;
  }

  body.type-detail .add-to-cart,
  body.type-product .add-to-cart {
    margin-top: 18px;
  }

  body.type-detail .rl-pd-desc-layout,
  body.type-product .rl-pd-desc-layout {
    grid-template-columns: 1fr;
  }

  body.type-detail .rl-pd-why,
  body.type-product .rl-pd-why {
    position: static;
  }
}

/* Hodnocení / Diskuze: stack earlier než obecné mobile */
@media (max-width: 960px) {

  body.type-detail #ratingTab .rate-wrapper,
  body.type-product #ratingTab .rate-wrapper,
  body.type-detail #productDiscussion .discussionContainer,
  body.type-product #productDiscussion .discussionContainer {
    grid-template-columns: 1fr;
  }

  body.type-detail #ratingTab .rate-wrapper>.rate-wrap,
  body.type-detail #ratingTab .rate-wrapper>.rate-form-trigger,
  body.type-detail #ratingTab .rate-wrapper>.add-comment.rate-form-trigger,
  body.type-detail #ratingTab .rate-wrapper>#rate-form,
  body.type-product #ratingTab .rate-wrapper>.rate-wrap,
  body.type-product #ratingTab .rate-wrapper>.rate-form-trigger,
  body.type-product #ratingTab .rate-wrapper>.add-comment.rate-form-trigger,
  body.type-product #ratingTab .rate-wrapper>#rate-form,
  body.type-detail #productDiscussion .discussionContainer>.discussion-form-trigger,
  body.type-detail #productDiscussion .discussionContainer>#discussion-form,
  body.type-detail #productDiscussion .discussionContainer>#discussionsListHeading,
  body.type-detail #productDiscussion .discussionContainer>#discussionsList,
  body.type-product #productDiscussion .discussionContainer>.discussion-form-trigger,
  body.type-product #productDiscussion .discussionContainer>#discussion-form,
  body.type-product #productDiscussion .discussionContainer>#discussionsListHeading,
  body.type-product #productDiscussion .discussionContainer>#discussionsList {
    grid-column: 1;
    grid-row: auto;
  }
}

@media (max-width: 768px) {

  body.type-detail .breadcrumbs,
  body.type-product .breadcrumbs {
    font-size: 13px;
    gap: 6px;
  }

  body.type-detail .breadcrumbs-wrapper,
  body.type-product .breadcrumbs-wrapper {
    padding-top: 10px;
    padding-bottom: 10px;
  }

  body.type-detail .breadcrumbs.rl-bc.rl-bc--back-only,
  body.type-product .breadcrumbs.rl-bc.rl-bc--back-only {
    margin: 0;
  }

  /*
    Mobile top composition (mockup):
    ← back | −% | H1 | stars | gallery | rest | sticky ATC
  */
  body.type-detail .product-top,
  body.type-product .product-top,
  body.type-detail .p-detail-inner:has(> .p-data-wrapper),
  body.type-product .p-detail-inner:has(> .p-data-wrapper) {
    display: flex !important;
    flex-direction: column !important;
    gap: 0 !important;
    margin-bottom: 24px !important;
  }

  body.type-detail .product-top>.p-info-wrapper,
  body.type-product .product-top>.p-info-wrapper,
  body.type-detail .product-top>.p-info-wrapper.rl-pd-info,
  body.type-product .product-top>.p-info-wrapper.rl-pd-info,
  body.type-detail .p-detail-inner>.p-data-wrapper,
  body.type-product .p-detail-inner>.p-data-wrapper {
    display: contents !important;
  }

  body.type-detail .product-top>.p-image-wrapper,
  body.type-product .product-top>.p-image-wrapper,
  body.type-detail .p-detail-inner>.p-image-wrapper,
  body.type-product .p-detail-inner>.p-image-wrapper {
    order: 20 !important;
    width: 100% !important;
    max-width: 100% !important;
    margin: 12px 0 8px !important;
  }

  /* Beat base `.rl-pd-info > *` / named slot orders so gallery can sit at 20 */
  body.type-detail .rl-pd-info>.rl-pd-discount,
  body.type-product .rl-pd-info>.rl-pd-discount {
    order: 1 !important;
    margin: 0 0 8px !important;
  }

  body.type-detail .rl-pd-info>.p-detail-inner-header,
  body.type-product .rl-pd-info>.p-detail-inner-header {
    order: 2 !important;
    margin: 0 0 8px !important;
    padding-top: 0 !important;
    width: 100%;
  }

  body.type-detail .p-detail-inner-header h1,
  body.type-product .p-detail-inner-header h1 {
    font-size: 20px !important;
    line-height: 1.2 !important;
    letter-spacing: -.02em !important;
    font-weight: 700 !important;
  }

  body.type-detail .rl-pd-info>.p-detail-info,
  body.type-product .rl-pd-info>.p-detail-info {
    order: 3 !important;
    padding: 0 0 4px !important;
    margin: 0 !important;
    width: 100%;
  }

  body.type-detail .stars-wrapper,
  body.type-product .stars-wrapper {
    gap: 10px !important;
  }

  /* Stars ~15% smaller on mobile (14×13 → 12×11) */
  body.type-detail .stars.star-list .rl-star,
  body.type-product .stars.star-list .rl-star {
    width: 12px;
    height: 11px;
    flex: 0 0 12px;
  }

  body.type-detail .stars.star-list,
  body.type-product .stars.star-list {
    gap: 3px;
  }

  body.type-detail .stars-label,
  body.type-product .stars-label,
  body.type-detail .stars-link,
  body.type-product .stars-link {
    font-size: 12px !important;
    color: #888 !important;
  }

  body.type-detail .stars-link,
  body.type-product .stars-link {
    text-decoration: underline !important;
    text-underline-offset: 2px;
  }

  body.type-detail .rl-pd-info>.p-short-description,
  body.type-product .rl-pd-info>.p-short-description {
    order: 30 !important;
    margin-top: 8px !important;
    padding-top: 0;
    width: 100%;
  }

  body.type-detail a[href*="#description"].chevron-after,
  body.type-product a[href*="#description"].chevron-after,
  body.type-detail a[href="#description"],
  body.type-product a[href="#description"] {
    font-size: 14px;
  }

  body.type-detail .rl-pd-info>.rl-pd-buy-row,
  body.type-product .rl-pd-info>.rl-pd-buy-row {
    order: 31 !important;
    width: 100%;
    margin-top: 0 !important;
  }

  body.type-detail .rl-pd-info>.rl-pd-features,
  body.type-product .rl-pd-info>.rl-pd-features {
    order: 32 !important;
    width: 100%;
  }

  body.type-detail .rl-pd-info>.c-product-interconnection-detail-params,
  body.type-product .rl-pd-info>.c-product-interconnection-detail-params {
    order: 33 !important;
    width: 100%;
  }

  body.type-detail .rl-pd-info>.rl-pd-meta,
  body.type-product .rl-pd-info>.rl-pd-meta {
    order: 39 !important;
    width: 100%;
    margin-bottom: 8px;
  }

  body.type-detail .rl-pd-info>.add-to-cart,
  body.type-product .rl-pd-info>.add-to-cart {
    order: 40 !important;
    width: 100%;
  }

  /* Keep gallery inside the same left/right gutter as text — no full-bleed */
  body.type-detail .product-top>.p-image-wrapper,
  body.type-product .product-top>.p-image-wrapper,
  body.type-detail .p-detail-inner>.p-image-wrapper,
  body.type-product .p-detail-inner>.p-image-wrapper {
    margin-left: 0 !important;
    margin-right: 0 !important;
    width: 100% !important;
    max-width: 100% !important;
  }

  body.type-detail .p-image,
  body.type-product .p-image {
    border: 1px solid #e8e8e6;
    aspect-ratio: 1 / 1;
    max-height: min(48vh, 400px);
    width: 100%;
    box-sizing: border-box;
  }

  body.type-detail .p-main-image img,
  body.type-product .p-main-image img {
    max-height: min(48vh, 400px);
  }

  body.type-detail .p-image-wrapper,
  body.type-product .p-image-wrapper {
    gap: 5px;
    width: 100% !important;
    max-width: 100% !important;
    padding: 0 !important;
  }

  body.type-detail .rl-pd-thumbs,
  body.type-product .rl-pd-thumbs,
  body.type-detail .p-thumbnails-wrapper,
  body.type-product .p-thumbnails-wrapper {
    padding-left: 0 !important;
    padding-right: 0 !important;
    width: 100% !important;
    max-width: 100% !important;
  }

  /* True 2-up filling the content width (same gutter as #content-wrapper) */
  body.type-detail .rl-pd-thumbs a.p-thumbnail,
  body.type-product .rl-pd-thumbs a.p-thumbnail {
    --rl-thumb-w: calc((100vw - 2 * var(--rl-gap) - 8px) / 2);
    width: var(--rl-thumb-w) !important;
    max-width: var(--rl-thumb-w) !important;
    flex: 0 0 var(--rl-thumb-w) !important;
    height: auto !important;
    aspect-ratio: 1 !important;
    padding: 6px !important;
  }

  body.type-detail .rl-pd-thumbs .thumbnail-prev,
  body.type-product .rl-pd-thumbs .thumbnail-prev {
    left: 4px !important;
  }

  body.type-detail .rl-pd-thumbs .thumbnail-next,
  body.type-product .rl-pd-thumbs .thumbnail-next {
    right: 4px !important;
  }

  body.type-detail .product-top,
  body.type-product .product-top,
  body.type-detail .p-detail-inner:has(> .p-data-wrapper),
  body.type-product .p-detail-inner:has(> .p-data-wrapper) {
    gap: 18px;
    margin-bottom: 28px;
  }

  body.type-detail .p-detail-inner-header h1,
  body.type-product .p-detail-inner-header h1 {
    font-size: 22px;
    line-height: 1.3;
  }

  body.type-detail .rl-pd-buy-row,
  body.type-product .rl-pd-buy-row {
    flex-direction: column;
    align-items: flex-start;
    gap: 10px;
  }

  body.type-detail .rl-pd-avail,
  body.type-product .rl-pd-avail {
    align-items: flex-start;
    text-align: left;
  }

  body.type-detail .detail-parameters th,
  body.type-detail .detail-parameters td,
  body.type-product .detail-parameters th,
  body.type-product .detail-parameters td,
  body.type-detail .shipping-options,
  body.type-product .shipping-options {
    text-align: left;
  }

  /* Primary ATC stays in document flow (not sticky).
     Sticky buy bar is .rl-pd-sticky — appears only after scrolling past ATC. */
  body.type-detail .add-to-cart,
  body.type-product .add-to-cart {
    position: static;
    display: flex !important;
    flex-wrap: nowrap !important;
    align-items: stretch !important;
    gap: 8px !important;
    width: 100% !important;
    max-width: 100% !important;
    box-sizing: border-box !important;
    margin: 20px 0 0 !important;
    padding: 0 !important;
    background: transparent;
    border-top: 0;
    box-shadow: none;
  }

  body.type-detail .add-to-cart .quantity,
  body.type-product .add-to-cart .quantity {
    flex: 0 0 auto !important;
    height: 48px !important;
  }

  body.type-detail .add-to-cart .quantity .increase,
  body.type-detail .add-to-cart .quantity .decrease,
  body.type-product .add-to-cart .quantity .increase,
  body.type-product .add-to-cart .quantity .decrease {
    height: 48px !important;
  }

  body.type-detail .add-to-cart .quantity .amount,
  body.type-product .add-to-cart .quantity .amount {
    height: 46px !important;
  }

  /* Cart = icon only on mobile primary ATC (same language as listing cards) */
  body.type-detail .add-to-cart-button,
  body.type-product .add-to-cart-button {
    flex: 1 1 auto !important;
    color: #fff !important;
    min-width: 0 !important;
    width: auto !important;
    height: 48px !important;
    padding: 0 !important;
    font-size: 13px !important;
    line-height: 0 !important;
    letter-spacing: 0 !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    position: relative !important;
    overflow: hidden !important;
    gap: 10px;
  }

  body.type-detail .add-to-cart-button>*,
  body.type-product .add-to-cart-button>* {
    position: absolute !important;
    width: 1px !important;
    height: 1px !important;
    padding: 0 !important;
    margin: -1px !important;
    overflow: hidden !important;
    clip: rect(0, 0, 0, 0) !important;
    white-space: nowrap !important;
    border: 0 !important;
  }

  body.type-detail .add-to-cart-button::before,
  body.type-product .add-to-cart-button::before {
    content: '' !important;
    display: block !important;
    width: 19px !important;
    height: 19px !important;
    background: url('../images/icon-cart.svg') center / contain no-repeat !important;
    filter: brightness(0) invert(1);
    flex-shrink: 0;
  }

  body.type-detail .add-to-cart .rl-pd-wish,
  body.type-product .add-to-cart .rl-pd-wish,
  body.type-detail .add-to-cart #dkLabFavouriteDiv,
  body.type-product .add-to-cart #dkLabFavouriteDiv {
    flex: 0 0 48px !important;
    width: 48px !important;
    height: 48px !important;
  }

  /* Room for fixed sticky bar when active */
  body.type-detail.rl-pd-sticky-on,
  body.type-product.rl-pd-sticky-on {
    padding-bottom: calc(72px + env(safe-area-inset-bottom, 0px));
    scroll-padding-bottom: calc(72px + env(safe-area-inset-bottom, 0px));
  }

  body.type-detail .price-final,
  body.type-detail .price-final-holder,
  body.type-product .price-final,
  body.type-product .price-final-holder {
    font-size: 26px !important;
  }

  body.type-detail,
  body.type-product {
    overflow-x: clip;
  }

  body.type-detail .product-top,
  body.type-product .product-top,
  body.type-detail .p-detail-inner,
  body.type-product .p-detail-inner,
  body.type-detail .rl-pd-info,
  body.type-product .rl-pd-info {
    overflow-x: clip;
    max-width: 100%;
  }

  /* Meta row: stack on mobile */
  body.type-detail .rl-pd-meta,
  body.type-product .rl-pd-meta {
    gap: 4px 24px;
    flex-wrap: wrap;
  }

  /* ── Product tabs → accordion on mobile ── */
  body.type-detail .shp-tabs-wrapper.p-detail-tabs-wrapper,
  body.type-product .shp-tabs-wrapper.p-detail-tabs-wrapper {
    margin-top: 28px;
    padding-bottom: 24px;
    border-bottom: none;
  }

  body.type-detail .shp-tabs-wrapper .shp-tabs-row,
  body.type-product .shp-tabs-wrapper .shp-tabs-row {
    margin: 0 !important;
    padding: 0 !important;
  }

  /* Hide classic tab strip + ☰ overflow menu */
  body.type-detail .shp-tabs-holder,
  body.type-product .shp-tabs-holder,
  body.type-detail .shp-tabs-row>.navigation-btn,
  body.type-product .shp-tabs-row>.navigation-btn,
  body.type-detail .shp-tabs-row>.hidden-links,
  body.type-product .shp-tabs-row>.hidden-links,
  body.type-detail #p-detail-tabs,
  body.type-product #p-detail-tabs {
    display: none !important;
  }

  body.type-detail #tab-content,
  body.type-product #tab-content {
    padding: 0 !important;
    display: flex;
    flex-direction: column;
    gap: 0;
    border-top: 1px solid var(--rl-border);
    /* iOS: stop scroll jump when accordion height changes */
    overflow-anchor: none;
  }

  body.type-detail .rl-pd-acc__btn,
  body.type-product .rl-pd-acc__btn {
    display: flex !important;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    width: 100%;
    margin: 0;
    padding: 16px 0;
    border: none;
    border-bottom: 1px solid var(--rl-border);
    background: transparent;
    font-family: var(--rl-display);
    font-size: 16px;
    font-weight: 600;
    line-height: 1.3;
    letter-spacing: .02em;
    color: var(--rl-black);
    text-align: left;
    cursor: pointer;
    appearance: none;
    -webkit-appearance: none;
    overflow-anchor: none;
    /* No scroll-margin — iOS focus + margin caused first-tap footer jump */
    scroll-margin-top: 0;
  }

  body.type-detail #tab-content .tab-pane>h2, body.type-detail #tab-content .tab-pane>h3, body.type-detail #tab-content .extended-description>h3, body.type-detail #productDiscussion h2, body.type-product #tab-content .tab-pane>h2, body.type-product #tab-content .tab-pane>h3, body.type-product #tab-content .extended-description>h3, body.type-product #productDiscussion h2  {
    display: none;
  }

  body.type-detail .rl-pd-acc__btn.is-open,
  body.type-product .rl-pd-acc__btn.is-open {
    border-bottom-color: transparent;
  }

  body.type-detail .rl-pd-acc__label,
  body.type-product .rl-pd-acc__label {
    min-width: 0;
    flex: 1 1 auto;
  }

  body.type-detail .rl-pd-acc__chevron,
  body.type-product .rl-pd-acc__chevron {
    flex: 0 0 12px;
    width: 12px;
    height: 12px;
    background: url('../images/icon-arrow-down.svg') center / contain no-repeat;
    opacity: .55;
    transition: transform .2s var(--rl-ease-out), opacity .15s ease;
  }

  body.type-detail .rl-pd-acc__btn.is-open .rl-pd-acc__chevron,
  body.type-product .rl-pd-acc__btn.is-open .rl-pd-acc__chevron {
    transform: rotate(180deg);
    opacity: 1;
  }

  body.type-detail #tab-content .tab-pane,
  body.type-detail #tab-content .rl-pd-acc__panel,
  body.type-product #tab-content .tab-pane,
  body.type-product #tab-content .rl-pd-acc__panel {
    display: none !important;
    margin: 0 !important;
    padding: 0 0 20px !important;
    border-bottom: 1px solid var(--rl-border);
  }

  body.type-detail #tab-content .tab-pane.is-acc-open,
  body.type-detail #tab-content .rl-pd-acc__panel.is-acc-open,
  body.type-product #tab-content .tab-pane.is-acc-open,
  body.type-product #tab-content .rl-pd-acc__panel.is-acc-open {
    display: block !important;
  }

  /* In-tab product rails must not collapse when accordion opens */
  body.type-detail #tab-content .is-acc-open .products.products-block,
  body.type-product #tab-content .is-acc-open .products.products-block {
    display: flex !important;
    min-height: 120px;
  }

  body.type-detail #tab-content .is-acc-open .products.products-block > .product,
  body.type-product #tab-content .is-acc-open .products.products-block > .product {
    visibility: visible !important;
    opacity: 1 !important;
  }

  /* Keep accordion product rails inside the content gutter
     (no full-bleed breakout — titles + cards share one edge) */
  body.type-detail #tab-content .is-acc-open .products.products-block,
  body.type-product #tab-content .is-acc-open .products.products-block {
    margin-left: 0;
    margin-right: 0;
    width: 100% !important;
    max-width: 100% !important;
  }

  /* Soften nested H2 inside open panels (already have accordion title) */
  body.type-detail #tab-content .is-acc-open>h2:first-child,
  body.type-product #tab-content .is-acc-open>h2:first-child {
    position: absolute !important;
    width: 1px !important;
    height: 1px !important;
    padding: 0 !important;
    margin: -1px !important;
    overflow: hidden !important;
    clip: rect(0, 0, 0, 0) !important;
    border: 0 !important;
  }

  /* Parametry → 1 sloupec */
  body.type-detail #rlParameters .detail-parameters,
  body.type-product #rlParameters .detail-parameters,
  body.type-detail #description .extended-description .detail-parameters,
  body.type-product #description .extended-description .detail-parameters {
    grid-template-columns: 1fr;
  }

  body.type-detail #ratingTab .rate-wrap,
  body.type-product #ratingTab .rate-wrap {
    padding: 20px;
  }

  body.type-detail .vote-content,
  body.type-product .vote-content {
    padding-left: 0;
  }

  body.type-detail #discussionsList .vote-wrap .vote-wrap,
  body.type-product #discussionsList .vote-wrap .vote-wrap {
    margin-left: 0;
  }

  body.type-detail .rl-pd-cta,
  body.type-product .rl-pd-cta {
    flex-direction: column;
    align-items: flex-start;
    gap: 14px;
    padding: 22px 0 30px;
  }

  body.type-detail .rl-pd-cta,
  body.type-product .rl-pd-cta {
    padding: 22px 0 30px;
  }
}


/* ═══════════════════════════════════════════
   20. CHECKOUT  (ordering-process)
   Figma: cart 282:4985 | shipping 286:5372 | info 315:8314 / 315:9133
   Layout: ~984 + 360, gap 48 | summary bg #f7f5f2
   ═══════════════════════════════════════════ */

body.ordering-process {
  --rl-checkout-summary-bg: #f7f5f2;
  --rl-checkout-line: #f0f0ee;
  --rl-checkout-ok: #22a722;
  --rl-checkout-max: 1440px;
}

body.ordering-process #content-wrapper.content-wrapper,
body.ordering-process #content-wrapper {
  max-width: var(--rl-checkout-max) !important;
  width: 100% !important;
  padding-left: var(--rl-gap) !important;
  padding-right: var(--rl-gap) !important;
  padding-bottom: 72px !important;
  /* Figma CartPage pb-72 — mezera nad footerem */
  margin-left: auto !important;
  margin-right: auto !important;
}

body.ordering-process .content-wrapper-in,
body.ordering-process main#content,
body.ordering-process main#content.content.narrow,
body.ordering-process .content-inner {
  float: none !important;
  width: 100% !important;
  max-width: none !important;
  padding: 0 !important;
  margin: 0 !important;
}

body.ordering-process aside.sidebar {
  display: none !important;
}

/* Checkout footer: jen © Copyright — bílé pozadí, jemná linka shora */
body.ordering-process .rolser-footer {
  background: #fff;
  color: #111111;
  border-top: 1px solid #e8e8e6;
}

body.ordering-process .rolser-footer .rf-top,
body.ordering-process .rolser-footer .rf-nav {
  display: none !important;
}

body.ordering-process .rolser-footer .rf-main {
  padding-top: 0 !important;
  background: #fff;
}

body.ordering-process .rolser-footer .rf-main:after {
  display: none !important;
  content: none !important;
}

body.ordering-process .rolser-footer .rf-bottom {
  padding-top: 28px;
  padding-bottom: 32px;
  grid-template-columns: 1fr;
  background: #fff;
}

body.ordering-process .rolser-footer .rf-legal-right,
body.ordering-process .rolser-footer .rf-credits,
body.ordering-process .rolser-footer .rf-payments,
body.ordering-process .rolser-footer .rf-legal-links {
  display: none !important;
}

body.ordering-process .rolser-footer .rf-legal {
  max-width: none;
}

body.ordering-process .rolser-footer .rf-legal p:nth-child(n+2) {
  display: none !important;
}

body.ordering-process .rolser-footer .rf-legal p:first-child {
  font-size: 0;
  line-height: 0;
  margin: 0;
}

body.ordering-process .rolser-footer .rf-legal p:first-child br,
body.ordering-process .rolser-footer .rf-legal p:first-child a {
  display: none !important;
}

body.ordering-process .rolser-footer .rf-legal p:first-child strong {
  font-size: 14px;
  line-height: 1.4;
  font-weight: 700;
  color: #111111;
}

/* ── Stepper (.cart-header) — Figma: content-width tabs, left-aligned
   Button: pt 14 / pb 16 / px 24 | gap badge↔text 8px | badge 22px ── */
body.ordering-process ol.cart-header {
  display: flex !important;
  align-items: stretch;
  justify-content: flex-start;
  flex-wrap: nowrap;
  gap: 0;
  list-style: none;
  margin: 8px 0 40px !important;
  padding: 0 !important;
  border-bottom: 2px solid #e5e5e3;
  width: 100%;
  max-width: none;
}

body.ordering-process ol.cart-header>li.step {
  flex: 0 0 auto;
  width: auto;
  max-width: none;
  margin: 0 !important;
  padding: 0 !important;
  text-align: left;
  position: relative;
  float: none !important;
}

body.ordering-process ol.cart-header>li.step>a,
body.ordering-process ol.cart-header>li.step>strong {
  display: flex !important;
  align-items: center;
  justify-content: flex-start;
  gap: 0;
  padding: 14px 24px 16px !important;
  border: none !important;
  border-bottom: 2px solid transparent !important;
  margin: 0 0 -1px !important;
  text-decoration: none !important;
  font-family: var(--rl-display);
  font-weight: 600;
  font-size: 14px;
  line-height: 21px;
  color: #bbb;
  background: none !important;
  white-space: nowrap;
  width: auto;
  box-shadow: none !important;
}

/* Badge + label live in one <span> — flex here controls the 8px gap */
body.ordering-process ol.cart-header>li.step>a>span,
body.ordering-process ol.cart-header>li.step>strong>span {
  display: inline-flex !important;
  align-items: center;
  gap: 8px;
  white-space: nowrap;
  line-height: 21px;
}

body.ordering-process ol.cart-header>li.step.active>a,
body.ordering-process ol.cart-header>li.step.active>strong {
  color: var(--rl-black);
  border-bottom-color: var(--rl-black) !important;
}

body.ordering-process ol.cart-header>li.step.completed>a,
body.ordering-process ol.cart-header>li.step.completed>strong {
  color: var(--rl-checkout-ok);
}

/* numbered / check badge */
body.ordering-process ol.cart-header>li.step>a>span::before,
body.ordering-process ol.cart-header>li.step>strong>span::before {
  content: attr(data-rl-step);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  box-sizing: border-box;
  width: 22px;
  height: 22px;
  border-radius: 11px;
  background: #e5e5e3;
  color: #999;
  font-family: var(--rl-display);
  font-weight: 700;
  font-size: 11.2px;
  line-height: 1;
  flex-shrink: 0;
  margin: 0 !important;
  padding: 0 !important;
  vertical-align: middle;
}

body.ordering-process ol.cart-header>li.step.active>a>span::before,
body.ordering-process ol.cart-header>li.step.active>strong>span::before {
  background: #111;
  color: #fff;
}

body.ordering-process ol.cart-header>li.step.completed>a>span::before,
body.ordering-process ol.cart-header>li.step.completed>strong>span::before {
  content: '';
  background: var(--rl-checkout-ok) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 10' fill='none'%3E%3Cpath d='M1 5l3.5 3.5L11 1' stroke='%23fff' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center/12px 10px no-repeat;
  color: transparent;
}

/* ── Two-column shell (Produkty | Shrnutí) — top-aligned under stepper ── */
body.ordering-process .cart-row,
body.ordering-process .order-delivery-payment-form,
body.ordering-process form#order-form,
body.ordering-process .ordering-process-inner {
  display: block;
}

body.ordering-process .cart-row {
  display: grid !important;
  grid-template-columns: minmax(0, 1fr) minmax(280px, 360px);
  grid-template-areas:
    "main side"
    "back side";
  gap: 48px 48px;
  align-items: start;
  margin: 0 !important;
}

body.ordering-process .cart-row>[class*="col-"] {
  float: none !important;
  width: 100% !important;
  max-width: none !important;
  padding: 0 !important;
  margin: 0 !important;
  min-width: 0;
}

body.ordering-process .cart-row > [class*="col-md-8"],
body.ordering-process .cart-row > .col-md-8 {
  grid-area: main;
}

body.ordering-process .cart-row > .sidebar-in-cart,
body.ordering-process .cart-row > [class*="col-md-4"],
body.ordering-process .cart-row > .col-md-4 {
  grid-area: side;
}

/* krok-1 / krok-2: content + summary side by side */
body.in-krok-1 #content.content,
body.in-krok-2 #content.content {
  display: block !important;
}

body.in-krok-1 .content-inner>.row,
body.in-krok-2 .content-inner>.row,
body.in-krok-1 #content>.row,
body.in-krok-2 #content>.row,
body.in-krok-1 .cart-content+#checkoutSidebar,
body.ordering-process .row:has(> #checkoutSidebar) {
  display: grid !important;
  grid-template-columns: minmax(0, 1fr) minmax(280px, 360px);
  grid-template-areas:
    "main side"
    "back side";
  gap: 48px;
  align-items: start;
  margin: 0 !important;
}

body.ordering-process .row:has(> #checkoutSidebar)>[class*="col-"] {
  float: none !important;
  width: 100% !important;
  max-width: none !important;
  padding: 0 !important;
  margin: 0 !important;
  min-width: 0;
}

body.ordering-process .row:has(> #checkoutSidebar) > :not(#checkoutSidebar):not(.rl-cart-back) {
  grid-area: main;
}

body.ordering-process .row:has(> #checkoutSidebar) > #checkoutSidebar {
  grid-area: side;
}

body.ordering-process .row:has(> #checkoutSidebar) > .rl-cart-back,
body.ordering-process .cart-row > .rl-cart-back {
  grid-area: back;
  align-self: start;
}

body.in-krok-1 .order-summary,
body.in-krok-2 .order-summary {
  width: 100% !important;
  float: none !important;
  margin: 0 !important;
  padding: 0 !important;
}

/* ── Cart: hide help box (Figma = summary only) ── */
body.in-kosik .sidebar-in-cart .checkout-box-wrapper {
  display: none !important;
}

/* Sticky Shrnutí — all checkout steps (desktop) */
body.ordering-process .sidebar-in-cart,
body.ordering-process #checkoutSidebar {
  position: sticky !important;
  top: calc(var(--rl-header-h) + 16px) !important;
  align-self: start;
  z-index: 2;
}

/* Sticky needs no overflow clip on ancestors */
body.ordering-process #content-wrapper,
body.ordering-process .content-wrapper-in,
body.ordering-process main#content,
body.ordering-process .content-inner,
body.ordering-process .cart-wrapper,
body.ordering-process .cart-inner,
body.ordering-process .cart-row {
  overflow: visible !important;
}

/* ── Produkty heading ── */
body.in-kosik .rl-cart-products-title {
  display: flex;
  align-items: center;
  justify-content: space-between;
  border-bottom: 2px solid var(--rl-black);
  padding-bottom: 14px;
  margin: 0 0 0;
  font-family: var(--rl-display);
  font-weight: 700;
  font-size: 16px;
  line-height: 24px;
  color: var(--rl-black);
}

/* Top-align summary card with Produkty heading */
body.in-kosik .sidebar-in-cart>.summary-wrapper,
body.ordering-process #checkoutSidebar>.cart-content,
body.ordering-process #checkoutSidebar .order-summary {
  margin-top: 0 !important;
  padding-top: 0 !important;
}

/* ── Cart table → product rows ── */
body.in-kosik .cart-table {
  width: 100%;
  border: none !important;
  margin: 0 !important;
}

body.in-kosik .cart-table thead {
  display: none !important;
}

body.in-kosik .cart-table tr.removeable {
  display: grid;
  grid-template-columns: 96px minmax(0, 1fr) 106px auto;
  gap: 20px;
  align-items: center;
  padding: 24px 12px 36px 0;
  border-bottom: 2px solid var(--rl-checkout-line);
  overflow: visible;
  position: relative;
}

/* When related panel is open, separator moves to the related block */
body.in-kosik .cart-table tr.removeable.related-visible {
  border-bottom: none;
}

body.in-kosik .cart-table tr.removeable>td {
  display: block;
  border: none !important;
  padding: 4px !important;
  background: none !important;
  float: none !important;
  width: auto !important;
}

body.in-kosik .cart-table tr.removeable>td.cart-p-image {
  position: absolute;
  top: 0;
}
body.in-kosik .cart-table tr.removeable>td.cart-p-image:before {
  content: '';
  position: absolute;
  inset: 0;
  background: var(--rl-tint);
  opacity: 0.05;
  pointer-events: none;
  z-index: 2;
}

body.in-kosik .cart-table tr.removeable>td.p-total { width: 90px;}

body.in-kosik .cart-table .cart-p-image {
  grid-column: 1;
  grid-row: 1;
  background: #f4f4f2;
  width: 96px;
  height: 96px;
  overflow: hidden;
}

body.in-kosik .cart-table .cart-p-image a,
body.in-kosik .cart-table .cart-p-image img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;
}

body.in-kosik .cart-table .p-name {
  grid-column: 2;
  grid-row: 1;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 6px;
  padding-right: 28px;
}

body.in-kosik .cart-table .p-availability {
  grid-column: unset;
  grid-row: unset;
  padding-top: 0 !important;
  pointer-events: auto;
  order: 2;
}

body.in-kosik .cart-table .p-name .main-link {
  order: 1;
}

body.in-kosik .cart-table .p-name .show-related {
  order: 3;
  margin-top: 4px;
}

body.in-kosik .cart-table .p-name .main-link {
  font-family: var(--rl-display);
  font-weight: 700;
  font-size: 14px;
  line-height: 1.35;
  color: var(--rl-black);
  text-decoration: underline;
  text-underline-offset: 2px;
}

body.in-kosik .cart-table .p-availability .p-label,
body.in-kosik .cart-table .p-availability .availability-amount,
body.in-kosik .cart-table .p-cell .p-label,
body.in-kosik .cart-table .p-total .p-label,
body.in-kosik .cart-table .unit-value {
  display: none !important;
}

body.in-kosik .cart-table .availability-label {
  font-family: var(--rl-display);
  font-weight: 600;
  font-size: 13px;
  color: var(--rl-checkout-ok) !important;
  pointer-events: auto;
}

body.in-kosik .cart-table .show-related {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  margin-top: 4px;
  font-family: var(--rl-body);
  font-size: 12px;
  color: #888;
  text-decoration: none;
  pointer-events: auto;
  cursor: pointer;
  transition: color .2s;
  width: 100%;
}

body.in-kosik .cart-table .show-related:hover {
  color: var(--rl-black);
}

body.in-kosik .cart-table .show-related::after {
  content: '▾';
  font-size: 10px;
  display: inline-block;
  transition: transform .25s var(--rl-ease-out);
}

body.in-kosik .cart-table tr.removeable.related-visible .show-related {
  color: var(--rl-black);
}

body.in-kosik .cart-table tr.removeable.related-visible .show-related::after {
  transform: rotate(180deg);
}

body.in-kosik .cart-table .p-quantity {
  grid-column: 3;
  grid-row: 1;
  justify-self: start;
  padding-top: 0 !important;
}

body.in-kosik .cart-table .quantity {
  display: inline-flex !important;
  align-items: center;
  border: 1px solid #e0e0de;
  height: 36px;
  box-sizing: border-box;
  padding: 0 4px;
}

body.in-kosik .cart-table .quantity .increase-tooltip,
body.in-kosik .cart-table .quantity .decrease-tooltip {
  display: none !important;
}

/* Figma / screen: číslo → + → − (ne − · číslo · +) */
body.in-kosik .cart-table .quantity>label {
  order: 2;
  display: flex;
  align-items: center;
  margin: 0;
}

body.in-kosik .cart-table .quantity .increase {
  order: 3;
}

body.in-kosik .cart-table .quantity .decrease {
  order: 1;
}

body.in-kosik .cart-table .quantity .amount {
  width: 36px;
  border: none !important;
  text-align: center;
  font-family: var(--rl-display);
  font-weight: 700;
  font-size: 14px;
  height: 34px;
  box-shadow: none !important;
  appearance: textfield;
  -moz-appearance: textfield;
}

body.in-kosik .cart-table .quantity .amount::-webkit-outer-spin-button,
body.in-kosik .cart-table .quantity .amount::-webkit-inner-spin-button {
  appearance: none;
  margin: 0;
}

body.in-kosik .cart-table .quantity .increase,
body.in-kosik .cart-table .quantity .decrease {
  width: 32px;
  height: 34px;
  border: none !important;
  background: none !important;
  font-size: 16px;
  line-height: 1;
  color: var(--rl-black);
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  flex-shrink: 0;
}

body.in-kosik .cart-table .p-price {
  display: none !important;
  /* Figma shows line total only */
}

body.in-kosik .cart-table .p-total {
  grid-column: 4;
  grid-row: 1;
  position: relative;
  text-align: right;
  justify-self: end;
  align-self: center;
}

body.in-kosik .cart-table .p-total .price-final {
  display: block;
  font-family: var(--rl-display);
  font-weight: 700;
  font-size: 15.2px;
  line-height: 22.8px;
  color: var(--rl-black);
}

/* Out of flow — X sits top-right of the row (12px from item edge) */
body.in-kosik .cart-table .p-name > form,
body.in-kosik .cart-table .p-total form {
  position: absolute;
  top: 24px;
  right: 12px;
  margin: 0;
  z-index: 3;
}

body.in-kosik .cart-table .p-name > form .inline,
body.in-kosik .cart-table .p-total .inline {
  display: block;
  margin: 0;
  padding: 0;
}

body.in-kosik .cart-table .remove-item {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 24px;
  height: 24px;
  margin: 0;
  padding: 0 !important;
  border: none !important;
  border-radius: 0;
  background: transparent url('../images/icon-filter-close.svg') center / 12px 12px no-repeat !important;
  cursor: pointer;
  opacity: .55;
  transition: opacity .15s;
}

body.in-kosik .cart-table .remove-item:hover,
body.in-kosik .cart-table .remove-item:focus-visible {
  opacity: 1;
}

body.in-kosik .cart-table .remove-item:focus-visible {
  outline: none;
  box-shadow: var(--rl-focus-ring);
}

/* Keep label for screen readers only */
body.in-kosik .cart-table .remove-item .sr-only {
  position: absolute !important;
  width: 1px !important;
  height: 1px !important;
  margin: -1px !important;
  padding: 0 !important;
  clip: rect(0, 0, 0, 0) !important;
  clip-path: inset(50%) !important;
  overflow: hidden !important;
  white-space: nowrap !important;
  border: 0 !important;
}

body.in-kosik .cart-table .remove-item::before {
  display: none !important;
  content: none !important;
}

/* ── Související produkty (tr.related)
   Skryté bez .visible; po toggle Shoptet přidá .visible (+ .related-visible na řádek). */
body.in-kosik .cart-table tr.related {
  display: none !important;
}

body.in-kosik .cart-table tr.related.visible {
  display: block !important;
  width: 100%;
  animation: rl-cart-related-open .38s var(--rl-ease-out) both;
}

@keyframes rl-cart-related-open {
  from {
    opacity: 0;
    transform: translateY(-8px);
  }

  to {
    opacity: 1;
    transform: translateY(0);
  }
}

body.in-kosik .cart-table tr.related.visible>td {
  display: block !important;
  width: 100% !important;
  box-sizing: border-box;
  position: relative;
  margin: 6px 0 16px;
  padding: 4px 0 !important;
  border: 1px solid var(--rl-checkout-line) !important;
  background: #fff !important;
}

/* Zobáček pod fotkou produktu (střed 96px sloupce) */
body.in-kosik .cart-table tr.related.visible>td::before,
body.in-kosik .cart-table tr.related.visible>td::after {
  content: '';
  position: absolute;
  left: 48px;
  transform: translateX(-50%);
  width: 0;
  height: 0;
  border-style: solid;
  pointer-events: none;
}

body.in-kosik .cart-table tr.related.visible>td::before {
  top: -9px;
  border-width: 0 9px 9px;
  border-color: transparent transparent var(--rl-checkout-line);
}

body.in-kosik .cart-table tr.related.visible>td::after {
  top: -8px;
  border-width: 0 8px 8px;
  border-color: transparent transparent #fff;
}

body.in-kosik .cart-related-product {
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 12px 16px;
  margin: 0;
  border: none !important;
  border-bottom: 1px solid var(--rl-checkout-line);
  background: transparent;
  animation: rl-cart-related-item .4s var(--rl-ease-out) both;
}

body.in-kosik .cart-related-product:last-child {
  border-bottom: none;
}

body.in-kosik .cart-table tr.related.visible .cart-related-product:nth-child(1) {
  animation-delay: .04s;
}

body.in-kosik .cart-table tr.related.visible .cart-related-product:nth-child(2) {
  animation-delay: .09s;
}

body.in-kosik .cart-table tr.related.visible .cart-related-product:nth-child(3) {
  animation-delay: .14s;
}

body.in-kosik .cart-table tr.related.visible .cart-related-product:nth-child(4) {
  animation-delay: .19s;
}

body.in-kosik .cart-table tr.related.visible .cart-related-product:nth-child(5) {
  animation-delay: .24s;
}

body.in-kosik .cart-table tr.related.visible .cart-related-product:nth-child(n + 6) {
  animation-delay: .28s;
}

@keyframes rl-cart-related-item {
  from {
    opacity: 0;
    transform: translateY(6px);
  }

  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@media (prefers-reduced-motion: reduce) {

  body.in-kosik .cart-table tr.related.visible,
  body.in-kosik .cart-related-product {
    animation: none !important;
  }
}

body.in-kosik .cart-related-info {
  display: grid;
  grid-template-columns: 56px minmax(0, 1fr);
  grid-template-rows: auto auto;
  column-gap: 12px;
  row-gap: 2px;
  align-items: center;
  flex: 1 1 auto;
  min-width: 0;
}

body.in-kosik .cart-related-img {
  grid-column: 1;
  grid-row: 1 / span 2;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 56px;
  height: 56px;
  background: #f4f4f2;
  overflow: hidden;
  flex-shrink: 0;
}

body.in-kosik .cart-related-img img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  background: transparent;
  display: block;
}

body.in-kosik .cart-related-name {
  grid-column: 2;
  grid-row: 1;
  font-family: var(--rl-display);
  font-weight: 600;
  font-size: 13px;
  line-height: 1.35;
  color: var(--rl-black);
  text-decoration: underline;
  text-underline-offset: 2px;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

body.in-kosik .cart-related-availability {
  grid-column: 2;
  grid-row: 2;
  font-family: var(--rl-display);
  font-weight: 600;
  font-size: 12px;
  line-height: 1.3;
}

body.in-kosik .cart-related-button {
  display: flex;
  align-items: center;
  gap: 14px;
  flex-shrink: 0;
  margin-left: auto;
}

body.in-kosik .cart-related-button form {
  display: inline-flex;
  margin: 0;
}

body.in-kosik .cart-related-button .price,
body.in-kosik .cart-related-button .price-final {
  font-family: var(--rl-display);
  font-weight: 700;
  font-size: 14px;
  color: var(--rl-black);
  white-space: nowrap;
}

body.in-kosik .cart-related-button .btn,
body.in-kosik .cart-related-button .add-to-cart-button {
  background: var(--rl-black) !important;
  color: var(--rl-white) !important;
  border: none !important;
  border-radius: var(--rl-radius);
  font-family: var(--rl-display);
  font-weight: 600;
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: .05em;
  padding: 10px 14px !important;
  white-space: nowrap;
  transition: filter .2s;
}

body.in-kosik .cart-related-button .btn:hover,
body.in-kosik .cart-related-button .add-to-cart-button:hover {
  filter: brightness(1.15);
}

@media (max-width: 992px) {
  body.in-kosik .cart-table tr.related.visible>td {
    padding: 4px 0 !important;
  }

  /* Mobile image column = 72px → střed zobáčku */
  body.in-kosik .cart-table tr.related.visible>td::before,
  body.in-kosik .cart-table tr.related.visible>td::after {
    left: 36px;
  }

  body.in-kosik .cart-related-product {
    flex-wrap: wrap;
    gap: 10px 12px;
    padding: 12px var(--rl-gap);
  }

  body.in-kosik .cart-related-info {
    flex: 1 1 100%;
  }

  body.in-kosik .cart-related-button {
    width: 100%;
    justify-content: space-between;
    margin-left: 0;
    padding-left: 68px;
  }

  body.in-kosik .cart-table .p-name > form,
  body.in-kosik .cart-table .p-total form {
    position: absolute !important;
    top: 24px;
    right: 12px;
  }
}

@media (max-width: 768px) {
  body.in-kosik .cart-related-button {
    padding-left: 0;
  }

  body.in-kosik .cart-related-button .btn {
    flex: 1 1 auto;
    text-align: center;
  }


}

/* ── dkLab favourites in cart — “Nezapomněli jste…” ── */
body.in-kosik #dkLabFavCartWrapper,
body.in-kosik #dkLabFavCartWrapper.rl-fav-cart {
  float: none !important;
  clear: both !important;
  width: 100% !important;
  max-width: none !important;
  margin: 48px 0 0 !important;
  padding: 32px 0 8px !important;
  background: transparent !important;
  border: none !important;
  border-top: 2px solid var(--rl-checkout-line) !important;
  box-sizing: border-box;
}

body.in-kosik #dkLabFavCartWrapper[hidden] {
  display: none !important;
}

body.in-kosik #dkLabFavCartHeader {
  text-align: left !important;
  margin: 0 0 20px !important;
  padding: 0 !important;
}

body.in-kosik #dkLabFavCartHeader h2 {
  margin: 0 !important;
  padding: 0 0 14px !important;
  border-bottom: 2px solid var(--rl-black);
  font-family: var(--rl-display);
  font-weight: 700;
  font-size: 16px;
  line-height: 24px;
  letter-spacing: 0;
  text-transform: none;
  color: var(--rl-black);
}

body.in-kosik #dkLabFavCartWrapper .products.products-block,
body.in-kosik #dkLabFavCartWrapper .products-block {
  display: grid !important;
  grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
  gap: 20px !important;
  margin: 0 !important;
  padding: 0 !important;
  width: 100% !important;
  float: none !important;
}

body.in-kosik #dkLabFavCartWrapper .product {
  width: 100% !important;
  max-width: none !important;
  float: none !important;
  margin: 0 !important;
  padding: 0 !important;
}

body.in-kosik #dkLabFavCartWrapper .p {
  display: flex !important;
  flex-direction: column !important;
  gap: 0;
  height: 100%;
  background: transparent;
}

body.in-kosik #dkLabFavCartWrapper .rl-img-wrap,
body.in-kosik #dkLabFavCartWrapper .p>a.image {
  position: relative;
  display: block;
  width: 100%;
  overflow: hidden;
}

body.in-kosik #dkLabFavCartWrapper .rl-img-wrap>a.image,
body.in-kosik #dkLabFavCartWrapper .p>a.image {
  aspect-ratio: 1;
  border-radius: 0;
}

/* body.in-kosik #dkLabFavCartWrapper .rl-img-wrap>a.image::before,
body.in-kosik #dkLabFavCartWrapper .p>a.image::before {
  content: '';
  position: absolute;
  inset: 0;
  background: var(--rl-tint);
  opacity: 0.05;
  pointer-events: none;
  z-index: 2;
}*/

body.in-kosik #dkLabFavCartWrapper .p a.image img,
body.in-kosik #dkLabFavCartWrapper .rl-img-wrap a.image img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  object-position: center;
  padding: 12px;
  transform: none !important;
}

/* ATC: same as listing — hover bar under image (desktop), cart icon (≤992) */
body.in-kosik #dkLabFavCartWrapper .rl-img-wrap .p-tools {
  position: absolute !important;
  left: 0 !important;
  right: 0 !important;
  bottom: 0 !important;
  z-index: 6 !important;
  margin: 0 !important;
  padding: 0 !important;
  opacity: 0;
  transform: translateY(6px);
  transition: opacity .2s ease, transform .2s ease;
  pointer-events: none;
}

body.in-kosik #dkLabFavCartWrapper .rl-img-wrap:hover .p-tools,
body.in-kosik #dkLabFavCartWrapper .p:hover .rl-img-wrap .p-tools {
  opacity: 1;
  transform: translateY(0);
  pointer-events: auto;
}

body.in-kosik #dkLabFavCartWrapper .rl-img-wrap .btn-cart,
body.in-kosik #dkLabFavCartWrapper .rl-img-wrap .p-tools .btn-cart {
  display: block !important;
  width: 100% !important;
  margin: 0 !important;
  padding: 13px 16px !important;
  border: none !important;
  border-radius: 0 !important;
  background: rgba(17, 17, 17, .88) !important;
  color: #fff !important;
  font-family: var(--rl-display) !important;
  font-weight: 600 !important;
  font-size: 12px !important;
  letter-spacing: .08em !important;
  text-transform: uppercase !important;
  line-height: 1.2 !important;
  cursor: pointer;
  transition: background .15s;
}

body.in-kosik #dkLabFavCartWrapper .rl-img-wrap .btn-cart:hover {
  background: #111 !important;
  color: #fff !important;
}

body.in-kosik #dkLabFavCartWrapper .p-in {
  display: flex;
  flex-direction: column;
  flex: 1 1 auto;
  gap: 8px;
  padding: 12px !important;
  margin: 0 !important;
}

body.in-kosik #dkLabFavCartWrapper .p-in-in {
  margin: 0 !important;
  padding: 0 !important;
}

body.in-kosik #dkLabFavCartWrapper .p-in-in a.name,
body.in-kosik #dkLabFavCartWrapper .p-in-in a.name span {
  display: -webkit-box !important;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  font-family: var(--rl-body) !important;
  font-size: 13px !important;
  font-weight: 400 !important;
  line-height: 1.4 !important;
  color: var(--rl-black) !important;
  text-decoration: none !important;
}

body.in-kosik #dkLabFavCartWrapper .p-in-in a.name:hover,
body.in-kosik #dkLabFavCartWrapper .p-in-in a.name:hover span {
  text-decoration: underline !important;
}

body.in-kosik #dkLabFavCartWrapper .ratings-wrapper,
body.in-kosik #dkLabFavCartWrapper .flags,
body.in-kosik #dkLabFavCartWrapper .price-additional {
  display: none !important;
}

body.in-kosik #dkLabFavCartWrapper .p-bottom {
  display: block !important;
  margin-top: auto !important;
  padding: 0 !important;
}

body.in-kosik #dkLabFavCartWrapper .p-bottom .p-tools {
  display: none !important;
}

body.in-kosik #dkLabFavCartWrapper .prices,
body.in-kosik #dkLabFavCartWrapper .rl-price-row {
  display: flex !important;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  margin: 0 !important;
}

body.in-kosik #dkLabFavCartWrapper .price-final,
body.in-kosik #dkLabFavCartWrapper .price-final strong {
  font-family: var(--rl-display) !important;
  font-size: 15px !important;
  font-weight: 700 !important;
  color: var(--rl-black) !important;
  line-height: 1.2 !important;
}

body.in-kosik #dkLabFavCartWrapper .availability {
  display: flex !important;
  align-items: center;
  margin: 0 !important;
  font-family: var(--rl-body);
  font-size: 12px;
  font-weight: 500;
  white-space: nowrap;
}

@media (max-width: 992px) {
  body.in-kosik #dkLabFavCartWrapper .rl-img-wrap .p-tools {
    opacity: 1 !important;
    transform: none !important;
    pointer-events: auto !important;
    left: auto !important;
    right: 12px !important;
    bottom: 12px !important;
    width: auto !important;
  }

  body.in-kosik #dkLabFavCartWrapper .rl-img-wrap .btn-cart,
  body.in-kosik #dkLabFavCartWrapper .rl-img-wrap .p-tools .btn-cart {
   /* width: 40px !important;
    height: 40px !important;
    min-width: 40px !important;
    padding: 0 !important;
    font-size: 0 !important;
    line-height: 0 !important;
    letter-spacing: 0 !important;
    color: transparent !important;
    border-radius: var(--rl-radius) !important;
    background: rgba(17, 17, 17, .82) !important;
    display: inline-flex !important;
    align-items: center;
    justify-content: center;
    position: relative;
    overflow: hidden; */
    display: none !important;
  }

  body.in-kosik #dkLabFavCartWrapper .rl-img-wrap .btn-cart>*,
  body.in-kosik #dkLabFavCartWrapper .rl-img-wrap .p-tools .btn-cart>* {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
  }

  body.in-kosik #dkLabFavCartWrapper .rl-img-wrap .btn-cart::before,
  body.in-kosik #dkLabFavCartWrapper .rl-img-wrap .p-tools .btn-cart::before {
    content: '';
    display: block;
    width: 18px;
    height: 18px;
    background: url('../images/icon-cart.svg') center / contain no-repeat;
    filter: brightness(0) invert(1);
    flex-shrink: 0;
  }
}

@media (max-width: 1100px) {
  body.in-kosik #dkLabFavCartWrapper .products.products-block,
  body.in-kosik #dkLabFavCartWrapper .products-block {
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
  }
}

@media (max-width: 768px) {
  body.in-kosik #dkLabFavCartWrapper,
  body.in-kosik #dkLabFavCartWrapper.rl-fav-cart {
    margin-top: 36px !important;
    padding-top: 28px !important;
  }

  body.in-kosik #dkLabFavCartHeader h2 {
    font-size: 15px;
    line-height: 22px;
  }

  body.in-kosik #dkLabFavCartWrapper .products.products-block,
  body.in-kosik #dkLabFavCartWrapper .products-block {
    display: flex !important;
    grid-template-columns: none !important;
    flex-wrap: nowrap !important;
    gap: var(--rl-carousel-gap) !important;
    overflow-x: auto;
    overflow-y: hidden;
    scroll-snap-type: x mandatory;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    padding-bottom: 4px !important;
  }

  body.in-kosik #dkLabFavCartWrapper .products-block::-webkit-scrollbar {
    display: none;
  }

  body.in-kosik #dkLabFavCartWrapper .product {
    flex: 0 0 min(46vw, 180px) !important;
    width: min(46vw, 180px) !important;
    scroll-snap-align: start;
  }

  body.ordering-process .rolser-footer .rf-bottom {
    padding-top: 18px;
    padding-bottom: 18px;
  }

  body.ordering-process .rolser-footer .rf-legal p:first-child strong { font-weight: 500; font-size: 13px;}
}

/* ── Discount + free shipping + delivery date (Figma 282:5172) ── */
body.in-kosik .cart-summary {
  margin-top: 20px;
  padding-top: 0;
}

body.in-kosik .cart-summary>.h4 {
  display: none !important;
}

body.in-kosik .extras-wrapper {
  display: grid !important;
  grid-template-columns: minmax(180px, 224px) minmax(0, 1fr) auto;
  gap: 16px 40px;
  align-items: end;
  width: 100%;
}

body.in-kosik .extras-wrapper>.extras-col {
  float: none !important;
  width: auto !important;
  max-width: none !important;
  margin: 0 !important;
  padding: 0 !important;
}

body.in-kosik .extras-wrapper>.extras-col:first-child {
  align-self: start;
  padding-top: 20px;
}

/* Coupon */
body.in-kosik .discount-coupon {
  width: 100%;
  max-width: 224px;
}

body.in-kosik .rl-coupon-toggle {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  margin: 0 0 12px;
  padding: 10px 22px;
  border: 1px solid var(--rl-black);
  border-radius: 999px;
  background: var(--rl-white);
  font-family: var(--rl-body);
  font-size: 14px;
  line-height: 1.2;
  color: var(--rl-black);
  cursor: pointer;
  box-shadow: none;
  -webkit-tap-highlight-color: transparent;
  transition: border-color .15s, background .15s;
}

body.in-kosik .rl-coupon-toggle:hover,
body.in-kosik .rl-coupon-toggle:focus-visible {
  border-color: var(--rl-black);
  background: #fafafa;
}

body.in-kosik .rl-coupon-toggle:focus-visible {
  outline: none;
  box-shadow: var(--rl-focus-ring);
}

body.in-kosik .rl-coupon-toggle::after {
  content: '';
  width: 8px;
  height: 5px;
  flex-shrink: 0;
  background: currentColor;
  clip-path: polygon(0 0, 100% 0, 50% 100%);
  transform: none;
  /* closed → arrow down */
  transition: transform .2s;
}

/* Skeleton naming is inverted: is-collapsed = form VISIBLE */
body.in-kosik .rl-coupon-toggle.is-collapsed::after {
  transform: scaleY(-1);
  /* open → arrow up */
}

/* Default: form hidden */
body.in-kosik .discount-coupon form.input-group,
body.in-kosik .discount-coupon .compact-form,
body.in-kosik .discount-coupon form {
  display: none !important;
}

/* is-collapsed = show input + submit */
body.in-kosik .discount-coupon.is-collapsed form.input-group,
body.in-kosik .discount-coupon.is-collapsed .compact-form,
body.in-kosik .discount-coupon.is-collapsed form {
  display: flex !important;
  align-items: stretch;
  width: 100%;
  max-width: 224px;
  margin: 0 !important;
}

body.in-kosik .discount-coupon .form-control {
  flex: 1 1 auto;
  min-width: 0;
  height: 41px !important;
  border: 1px solid #d8d5d0 !important;
  border-right: none !important;
  border-radius: 0 !important;
  font-family: var(--rl-body);
  font-size: 12.8px;
  color: var(--rl-black);
  box-shadow: none !important;
  padding: 11px 15px !important;
  background: #fff !important;
}

body.in-kosik .discount-coupon .form-control::placeholder {
  color: rgba(17, 17, 17, .5);
}

body.in-kosik .discount-coupon .btn {
  flex: 0 0 auto;
  height: 41px !important;
  background: #111 !important;
  color: #fff !important;
  border: none !important;
  border-radius: 0 !important;
  font-family: var(--rl-display);
  font-weight: 600;
  font-size: 11.68px;
  letter-spacing: .08em;
  text-transform: uppercase;
  padding: 0 16px !important;
  white-space: nowrap;
}

/* Free shipping (override global green pill) */
body.in-kosik .extras-wrap {
  margin: 0 !important;
  width: 100%;
  max-width: 505px;
  min-width: 0;
}

body.in-kosik .extras-wrapper>.extras-col:nth-child(2) {
  width: 100% !important;
  max-width: 505px;
  min-width: 0;
  justify-self: stretch;
}

body.in-kosik .extras-wrap .extra.delivery {
  display: flex !important;
  flex-direction: column;
  align-items: stretch;
  gap: 4px;
  width: 100% !important;
  max-width: 505px;
  box-sizing: border-box;
  margin: 0 !important;
  padding: 0 !important;
  background: none !important;
  border: none !important;
  border-radius: 0 !important;
  color: var(--rl-black) !important;
  font-family: var(--rl-body);
  font-size: 14px;
  line-height: 1.2;
}

/* Text + icon: no flex gap between text nodes / strong — only space after truck */
body.in-kosik .extras-wrap .extra.delivery>span {
  display: block;
  width: 100%;
  max-width: none;
  padding-bottom: 0;
  line-height: 1.2;
}

body.in-kosik .extras-wrap .extra.delivery>span::before {
  content: '';
  display: inline-block;
  width: 23px;
  height: 23px;
  margin-right: 10px;
  vertical-align: -6px;
  background: url('/user/documents/upload/assets/images/doprava-zdarma.svg') center / contain no-repeat;
}

body.in-kosik .extras-wrap .extra.delivery strong {
  font-family: var(--rl-body);
  font-weight: 700;
  color: inherit;
}

/* Shoptet .price-range = gray track; inner div width % = red fill
   Same width/offset for “ještě zbývá” AND “Dopravu máte zdarma!” */
body.in-kosik .extras-wrap .price-range,
body.in-kosik .free-shipping-bar,
body.in-kosik .delivery-progress,
body.in-kosik .extras-wrap .progress,
body.in-kosik .rl-free-ship-bar {
  display: block;
  width: 100% !important;
  max-width: none;
  height: 5px;
  background: #e5e5e3;
  border-radius: 20px;
  overflow: hidden;
  margin: 2px 0 0;
  padding: 0;
  box-shadow: none;
  align-self: stretch;
  box-sizing: border-box;
}

body.in-kosik .extras-wrap .price-range>div,
body.in-kosik .free-shipping-bar>*,
body.in-kosik .delivery-progress>*,
body.in-kosik .extras-wrap .progress .bar,
body.in-kosik .extras-wrap .progress-bar {
  display: block;
  background: var(--rl-red) !important;
  height: 100%;
  max-height: 100%;
  border-radius: 20px;
  margin: 0;
  padding: 0;
}

/* Free shipping reached → full green bar */
body.in-kosik .rl-free-ship-bar>i,
body.in-kosik .extra.delivery.rl-ship-free .price-range>div,
body.in-kosik .extra.delivery.rl-ship-free .progress-bar,
body.in-kosik .extra.delivery.rl-ship-free .progress .bar {
  display: block;
  width: 100%;
  background: var(--rl-checkout-ok) !important;
  height: 100%;
  max-height: 100%;
  border-radius: 20px;
  margin: 0;
  padding: 0;
}

/* Delivery date — third column in extras row */
body.in-kosik .extras-wrapper>.delivery-time {
  font-family: var(--rl-body);
  font-size: 14px;
  line-height: 1.275;
  color: var(--rl-black);
  margin: 0 !important;
  padding: 0 !important;
  white-space: normal;
}

/* Before JS moves it after AJAX: don't leave a stranded date above extras */
body.in-kosik .cart-content>.delivery-time {
  margin: 0 !important;
  padding: 0 !important;
  font-family: var(--rl-body);
  font-size: 14px;
  line-height: 1.275;
  color: var(--rl-black);
}

body.in-kosik .extras-wrapper>.delivery-time strong,
body.in-kosik .cart-content>.delivery-time strong {
  display: block;
  font-weight: 700;
}

body.in-kosik .rl-cart-back {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin-top: 28px;
  font-family: var(--rl-body);
  font-size: 13px;
  color: #888;
  text-decoration: none;
}

body.in-kosik .rl-cart-back::before {
  content: '←';
}

/* ── Empty cart (cart-emptied) ── */
body.rl-cart-empty .cart-header,
body.cart-emptied ol.cart-header {
  display: none !important;
}

body.rl-cart-empty .cart-empty,
body.cart-emptied .cart-empty {
  max-width: 1100px;
  margin: 0 auto;
  padding: 72px 0 48px;
}

body.rl-cart-empty .cart-heading {
  display: none !important;
}

body.rl-cart-empty .cart-row {
  display: grid !important;
  grid-template-columns: minmax(0, 1fr) minmax(260px, 320px);
  gap: 48px;
  align-items: start;
  margin: 0 0 56px !important;
}

body.rl-cart-empty .cart-row>[class*="col-"] {
  float: none !important;
  width: 100% !important;
  max-width: none !important;
  padding: 0 !important;
  margin: 0 !important;
}

body.rl-cart-empty .rl-empty-hero {
  display: grid;
  grid-template-columns: 88px minmax(0, 1fr);
  gap: 28px;
  align-items: start;
}

body.rl-cart-empty .rl-empty-hero__visual {
  position: relative;
  width: 88px;
  height: 88px;
  flex-shrink: 0;
}

body.rl-cart-empty .rl-empty-hero__icon {
  display: block;
  width: 100%;
  height: 100%;
  background: url('/user/documents/upload/assets/images/icon-cart.svg') center / 64px 64px no-repeat;
  opacity: 0.28;
}

body.rl-cart-empty .rl-empty-hero__badge {
  position: absolute;
  left: 2px;
  bottom: 2px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  border-radius: 50%;
  background: var(--rl-black);
  color: #fff;
  font-family: var(--rl-display);
  font-weight: 700;
  font-size: 13px;
  line-height: 1;
}

body.rl-cart-empty .rl-empty-hero__title {
  margin: 0 0 12px;
  font-family: var(--rl-display);
  font-weight: 700;
  font-size: 28px;
  line-height: 1.25;
  color: var(--rl-black);
}

body.rl-cart-empty .rl-empty-hero__text {
  margin: 0 0 28px;
  max-width: 42em;
  font-family: var(--rl-body);
  font-size: 15px;
  line-height: 1.55;
  color: #555;
}

body.rl-cart-empty .rl-empty-hero__cta {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  min-height: 48px;
  padding: 12px 28px;
  background: #cc1f1f !important;
  color: #fff !important;
  font-family: var(--rl-display);
  font-weight: 600;
  font-size: 13px;
  letter-spacing: .08em;
  text-transform: uppercase;
  text-decoration: none !important;
  border: none;
  border-radius: 0;
}

body.rl-cart-empty .rl-empty-hero__cta::before {
  content: '←';
  font-size: 14px;
  letter-spacing: 0;
}

body.rl-cart-empty .rl-empty-hero__cta:hover {
  filter: brightness(0.92);
  color: #fff !important;
}

/* Help column */
body.rl-cart-empty .rl-empty-help-title,
body.rl-cart-empty .cart-row>.col-md-4>.cart-content>.h4,
body.rl-cart-empty .cart-row>.col-md-4 .h4 {
  margin: 0 0 16px !important;
  font-family: var(--rl-display) !important;
  font-weight: 700 !important;
  font-size: 18px !important;
  line-height: 1.3 !important;
  color: var(--rl-black) !important;
  text-transform: none !important;
  letter-spacing: 0 !important;
}

body.rl-cart-empty .cart-row>.col-md-4 .box,
body.rl-cart-empty .cart-row>.col-md-4 .box-bg-default {
  background: var(--rl-checkout-summary-bg, #f7f5f2) !important;
  border: none !important;
  box-shadow: none !important;
  padding: 28px !important;
  margin: 0 !important;
}

body.rl-cart-empty .cart-row>.col-md-4 .contact-box {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 12px;
}

body.rl-cart-empty .cart-row>.col-md-4 .contact-box>img {
  display: none !important;
}

body.rl-cart-empty .rl-empty-help-lead {
  margin: 0 0 4px;
}

body.rl-cart-empty .rl-empty-help-lead__title {
  margin: 0 0 6px;
  font-family: var(--rl-display);
  font-weight: 700;
  font-size: 15px;
  line-height: 1.35;
  color: var(--rl-black);
}

body.rl-cart-empty .rl-empty-help-lead__text {
  margin: 0;
  font-family: var(--rl-body);
  font-size: 13.5px;
  line-height: 1.45;
  color: #555;
}

body.rl-cart-empty .cart-row>.col-md-4 .contact-box>strong {
  display: block;
  margin: 8px 0 0;
  font-family: var(--rl-display);
  font-weight: 700;
  font-size: 13px;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--rl-black);
  width: auto;
}

body.rl-cart-empty .cart-row>.col-md-4 .contact-box>ul {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

body.rl-cart-empty .cart-row>.col-md-4 .contact-box .mail,
body.rl-cart-empty .cart-row>.col-md-4 .contact-box .cellphone {
  display: inline-flex;
  align-items: center;
  gap: 8px;
}

body.rl-cart-empty .cart-row>.col-md-4 .contact-box .mail::before {
  content: '';
  width: 18px;
  height: 14px;
  flex-shrink: 0;
  background: url('/user/documents/upload/assets/images/envelope.svg') center / contain no-repeat;
  filter: none;
}

body.rl-cart-empty .cart-row>.col-md-4 .contact-box .cellphone::before {
  content: '';
  width: 16px;
  height: 16px;
  flex-shrink: 0;
  background: url('/user/documents/upload/assets/images/phone.svg') center / contain no-repeat;
}

body.rl-cart-empty .cart-row>.col-md-4 .contact-box a {
  font-family: var(--rl-body);
  font-weight: 600;
  font-size: 14px;
  color: #555 !important;
  text-decoration: none;
}

body.rl-cart-empty .cart-row>.col-md-4 .contact-box .cellphone a {
  text-decoration: underline;
  text-underline-offset: 2px;
}

/* Category links */
body.rl-cart-empty .rl-empty-cats {
  margin: 0;
  padding: 0;
  border-top: 1px solid #e8e6e2;
  padding-top: 40px;
}

body.rl-cart-empty .rl-empty-cats h3 {
  margin: 0 0 20px;
  font-family: var(--rl-display);
  font-weight: 700;
  font-size: 20px;
  line-height: 1.3;
  color: var(--rl-black);
}

body.rl-cart-empty .rl-empty-cats ul {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  gap: 10px 12px;
}

body.rl-cart-empty .rl-empty-cats li {
  margin: 0;
}

body.rl-cart-empty .rl-empty-cats a {
  display: inline-flex;
  align-items: center;
  min-height: 42px;
  padding: 10px 18px;
  border: 1px solid #d8d5d0;
  background: #fff;
  color: var(--rl-black) !important;
  font-family: var(--rl-body);
  font-size: 14px;
  font-weight: 500;
  text-decoration: none !important;
  transition: border-color .15s, color .15s;
}

body.rl-cart-empty .rl-empty-cats a:hover {
  border-color: var(--rl-black);
  color: var(--rl-black) !important;
}

body.rl-cart-empty .rl-empty-search,
body.rl-cart-empty .empty-cart-boxes {
  display: none !important;
}

@media (max-width: 992px) {
  body.rl-cart-empty .cart-row {
    grid-template-columns: 1fr;
    gap: 36px;
    margin-bottom: 40px !important;
  }

  body.rl-cart-empty .rl-empty-hero {
    grid-template-columns: 64px minmax(0, 1fr);
    gap: 18px;
  }

  body.rl-cart-empty .rl-empty-hero__visual {
    width: 64px;
    height: 64px;
  }

  body.rl-cart-empty .rl-empty-hero__icon {
    background-size: 48px 48px;
  }

  body.rl-cart-empty .rl-empty-hero__title {
    font-size: 22px;
  }

  body.rl-cart-empty .rl-empty-hero__cta {
    width: 100%;
  }
}

@media (max-width: 992px) {
  body.in-kosik .extras-wrapper {
    grid-template-columns: 1fr;
    gap: 20px;
    align-items: start;
  }

  body.in-kosik .extras-wrapper>.extras-col:first-child {
    padding-top: 8px;
  }

  body.in-kosik .discount-coupon,
  body.in-kosik .discount-coupon form.input-group {
    max-width: none;
  }
}

/* ── Summary card (Figma 282:5197) ── */
body.ordering-process .summary-wrapper .box,
body.ordering-process .order-summary-inner,
body.ordering-process .order-summary .checkout-box>.box,
body.ordering-process .sidebar-in-cart .summary-wrapper .box {
  background: #f7f5f2 !important;
  border: none !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  padding: 28px !important;
}

body.ordering-process .rl-summary-title,
body.ordering-process .order-summary .h4,
body.ordering-process .summary-wrapper .box>h4,
body.ordering-process .summary-wrapper .box>.h4 {
  font-family: var(--rl-display);
  font-weight: 700;
  font-size: 14.4px;
  line-height: 1.5;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: #111;
  margin: 0 0 0;
  padding: 0 0 16px;
}

body.ordering-process .price-wrapper {
  display: grid;
  grid-template-columns: 1fr auto;
  column-gap: 0;
  row-gap: 0;
  align-items: end;
  margin: 0 0 30px;
}

body.ordering-process .price-wrapper .price-label.price-primary,
body.ordering-process .price-wrapper .price.price-primary {
  padding: 16px 0 18px;
  border-bottom: 2px solid #e0ddd8;
  margin: 0;
}

body.ordering-process .price-wrapper .price-label.price-primary {
  font-family: var(--rl-display);
  font-weight: 700;
  font-size: 16px;
  line-height: 32px;
  color: #111;
}

body.ordering-process .price-wrapper .price.price-primary {
  font-family: var(--rl-display);
  font-weight: 800;
  font-size: 20.8px;
  line-height: 31.2px;
  color: #111;
  text-align: right;
}

body.ordering-process .price-wrapper .price-label.price-secondary,
body.ordering-process .price-wrapper .price.price-secondary {
  padding-top: 20px;
  font-family: var(--rl-body);
  font-weight: 400;
  font-size: 13.28px;
  line-height: 1.5;
  color: #555;
}

body.ordering-process .price-wrapper .price.price-secondary {
  text-align: right;
}

/* CTA */
body.ordering-process .btn.btn-conversion.next-step-forward,
body.ordering-process .next-step .btn-conversion,
body.ordering-process #orderSubmitButton,
body.ordering-process button[name="order"] {
  display: flex !important;
  align-items: center;
  justify-content: center;
  width: 100% !important;
  min-height: 50px;
  background: #cc1f1f !important;
  color: #fff !important;
  border: none !important;
  border-radius: 0 !important;
  font-family: var(--rl-display) !important;
  font-weight: 600 !important;
  font-size: 13.6px !important;
  letter-spacing: .1em;
  text-transform: uppercase;
  text-decoration: none !important;
  box-shadow: none !important;
  padding: 15px 16px !important;
}

body.ordering-process .btn.btn-conversion.next-step-forward:hover,
body.ordering-process .next-step .btn-conversion:hover {
  filter: brightness(0.92);
}

body.ordering-process .next-step--cart .next-step-back,
body.ordering-process .next-step .next-step-back {
  display: none !important;
  /* moved / restyled as .rl-cart-back */
}

body.ordering-process .summary-wrapper .next-step,
body.ordering-process .order-summary .next-step {
  margin: 0;
}

/* Colorful pay icons — same assets as footer (no B/W invert) */
body.ordering-process .rl-checkout-pays {
  display: flex;
  gap: 6px;
  justify-content: center;
  margin: 0;
  padding-top: 25px;
  flex-wrap: wrap;
}

body.ordering-process .rl-checkout-pays .rf-pay,
body.ordering-process .rl-checkout-pays>div {
  background: #2e2e2e;
  border-radius: 4px;
  width: 51px;
  height: 34px;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  box-sizing: border-box;
  box-shadow: none;
  overflow: hidden;
}

body.ordering-process .rl-checkout-pays img {
  max-width: 41px;
  max-height: 24px;
  width: auto;
  height: auto;
  object-fit: contain;
  filter: none !important;
}

body.ordering-process .rl-checkout-pays .rf-pay--mc img {
  max-width: 31px;
}

/* ── Contact box (shipping / info sidebar) ── */
body.ordering-process .contact-box {
  display: flex;
  align-items: center;
  gap: 14px;
  flex-wrap: wrap;
}

body.ordering-process .contact-box img {
  width: 56px;
  height: 56px;
  border-radius: 50%;
  object-fit: cover;
  flex-shrink: 0;
}

body.ordering-process .contact-box strong,
body.ordering-process .checkout-box-wrapper>.h4,
body.ordering-process .toggle-contacts {
  font-family: var(--rl-display);
  font-weight: 700;
  font-size: 12px;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--rl-black);
  width: 100%;
}

body.ordering-process .toggle-contacts {
  display: none !important;
  /* always show contact card */
}

body.ordering-process .checkout-box-wrapper>.box,
body.ordering-process .order-summary .checkout-box>.box:first-of-type {
  background: var(--rl-checkout-summary-bg) !important;
  border: none !important;
  padding: 24px 28px !important;
  margin-bottom: 16px;
}

body.ordering-process .contact-box ul {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 4px;
}

body.ordering-process .contact-box a {
  font-family: var(--rl-body);
  font-size: 14px;
  color: var(--rl-black);
  text-decoration: underline;
  text-underline-offset: 2px;
}

/* ── Shipping / payment method lists (Figma 286:5372) ── */
body.ordering-process .co-box {
  background: transparent !important;
  border: none !important;
  box-shadow: none !important;
  padding: 0 !important;
  margin: 0 0 32px !important;
}

body.ordering-process .co-box>h2,
body.ordering-process .co-box>.h2,
body.ordering-process h2.order-icon {
  display: flex;
  align-items: center;
  gap: 10px;
  font-family: var(--rl-display);
  font-weight: 700;
  font-size: 16.8px;
  line-height: 25.2px;
  color: var(--rl-black);
  margin: 0 0 20px;
  padding: 0;
  background: none !important;
}

body.ordering-process h2.order-icon::before {
  content: attr(data-rl-n);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  border-radius: 14px;
  background: var(--rl-black);
  color: var(--rl-white);
  font-family: var(--rl-display);
  font-size: 12px;
  font-weight: 800;
  line-height: 1;
  flex-shrink: 0;
}

/* Country select — Figma: 220×45, border #d8d5d0 */
body.in-krok-1 .co-basic-information .form-group {
  max-width: 220px;
  margin-bottom: 0;
}

body.in-krok-1 .co-basic-information .form-group>label {
  font-family: var(--rl-body);
  font-weight: 500;
  font-size: 12px;
  letter-spacing: .04em;
  color: #555;
}

/* Country select — flag + chevron (Figma 286:5506 / 286:5512) */
body.in-krok-1 .rl-country-select {
  position: relative;
  display: block;
  max-width: 220px;
  width: 100%;
  margin-top: 5px;
}

body.in-krok-1 .rl-country-select .rl-country-flag {
  position: absolute;
  left: 15px;
  top: 50%;
  transform: translateY(-50%);
  width: 20px;
  height: 13px;
  display: block;
  pointer-events: none;
  z-index: 2;
  object-fit: cover;
}

/* Chevron on wrapper — not on select (Shoptet .form-control resets background) */
body.in-krok-1 .rl-country-select::after {
  content: '';
  position: absolute;
  right: 15px;
  top: 50%;
  width: 7px;
  height: 4px;
  margin-top: -2px;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='7' height='4' viewBox='0 0 7 4'%3E%3Cpath d='M0 0h7L3.5 4 0 0z' fill='%23111'/%3E%3C/svg%3E") center / 7px 4px no-repeat;
  pointer-events: none;
  z-index: 2;
}

body.in-krok-1 .rl-country-select #deliveryCountryId.form-control,
body.in-krok-1 #deliveryCountryId.form-control {
  width: 100%;
  max-width: 220px;
  height: 45px !important;
  border: 1px solid #d8d5d0 !important;
  border-radius: 0 !important;
  padding: 12px 32px 12px 42px !important;
  font-size: 14px;
  line-height: 1.2;
  color: rgba(17, 17, 17, .85);
  appearance: none !important;
  -webkit-appearance: none !important;
  -moz-appearance: none !important;
  background: #fff !important;
  background-image: none !important;
  cursor: pointer;
}

body.in-krok-1 .rl-country-select #deliveryCountryId.form-control {
  max-width: none;
}

body.ordering-process .shipping-billing-table {
  display: flex;
  flex-direction: column;
  gap: 8px;
  border: none !important;
}

body.ordering-process .radio-wrapper {
  display: grid !important;
  grid-template-columns: 16px minmax(0, 1fr);
  column-gap: 14px;
  align-items: center;
  margin: 0 !important;
  padding: 15px 19px !important;
  background: #fff !important;
  border: 1px solid #e0e0de !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  float: none !important;
  width: 100% !important;
}

body.ordering-process .radio-wrapper.active {
  border-color: #c8c6c2 !important;
}

body.ordering-process .radio-wrapper.inactive-child,
body.ordering-process .radio-wrapper:has(input:disabled) {
  opacity: .45;
  pointer-events: none;
}

body.ordering-process .radio-wrapper>input[type="radio"] {
  appearance: none;
  -webkit-appearance: none;
  grid-column: 1;
  width: 16px;
  height: 16px;
  margin: 0 !important;
  padding: 0 !important;
  border: 1px solid #767676;
  border-radius: 8px;
  background: #fff;
  flex-shrink: 0;
  cursor: pointer;
  align-self: center;
}

body.ordering-process .radio-wrapper>input[type="radio"]:checked {
  border-color: #111;
  background:
    radial-gradient(circle at center, #111 0 4.5px, #fff 5px);
}

body.ordering-process .radio-wrapper>label {
  grid-column: 2;
  display: grid !important;
  grid-template-columns: 80px minmax(0, 1fr) auto;
  column-gap: 14px;
  align-items: center;
  margin: 0 !important;
  padding: 0 !important;
  border: none !important;
  background: none !important;
  float: none !important;
  width: 100% !important;
  cursor: pointer;
  font-weight: inherit;
}

/* Logo */
body.ordering-process .radio-wrapper .payment-logo {
  grid-column: 1;
  grid-row: 1;
  display: flex;
  align-items: center;
  justify-content: flex-start;
  width: 80px;
  min-height: 36px;
  margin: 0 !important;
  float: none !important;
}

body.ordering-process .radio-wrapper .payment-logo img {
  display: block;
  max-width: 80px;
  max-height: 36px;
  width: auto;
  height: auto;
  object-fit: contain;
}

/* Name + tooltip + pickup */
body.ordering-process .radio-wrapper .payment-info {
  grid-column: 2;
  grid-row: 1;
  display: block;
  min-width: 0;
  margin: 0 !important;
  float: none !important;
}

body.ordering-process .radio-wrapper .shipping-billing-name {
  display: inline !important;
  font-family: var(--rl-display);
  font-weight: 600;
  font-size: 14px;
  line-height: 21px;
  color: var(--rl-black);
  margin: 0 !important;
  padding: 0 !important;
  border: none !important;
  background: none !important;
  float: none !important;
}

body.ordering-process .radio-wrapper .payment-info>span:has(.question-tooltip) {
  display: inline;
  margin: 0;
  padding: 0;
}

body.ordering-process .radio-wrapper .question-tooltip {
  display: inline-flex !important;
  align-items: center;
  justify-content: center;
  width: 15px;
  height: 15px;
  margin-left: 6px;
  border-radius: 20px;
  background: #9c9c9c !important;
  color: #fff !important;
  font-family: var(--rl-display);
  font-weight: 600;
  font-size: 10px;
  line-height: 1;
  cursor: help;
  vertical-align: middle;
  text-indent: 0 !important;
  overflow: visible !important;
}

body.ordering-process .radio-wrapper .pickup-point-choose,
body.ordering-process .radio-wrapper .sublabel {
  display: block;
  margin: 2px 0 0;
  padding: 0;
}

body.ordering-process .radio-wrapper .pickup-point-choose a,
body.ordering-process .radio-wrapper .sublabel a {
  font-family: var(--rl-body);
  font-size: 12px;
  line-height: 18px;
  color: #888 !important;
  text-decoration: underline !important;
  text-underline-offset: 2px;
}

body.ordering-process .radio-wrapper .not-possible-info {
  display: none;
  font-size: 12px;
  color: #888;
  font-style: normal;
}

body.ordering-process .radio-wrapper.inactive-child .not-possible-info,
body.ordering-process .radio-wrapper:has(input:disabled) .not-possible-info {
  display: block;
}

/* Price */
body.ordering-process .radio-wrapper .payment-shipping-price {
  grid-column: 3;
  grid-row: 1;
  margin: 0 !important;
  padding: 0 !important;
  text-align: right;
  font-family: var(--rl-display);
  font-weight: 700;
  font-size: 14px;
  line-height: 21px;
  color: var(--rl-black);
  white-space: nowrap;
  float: none !important;
  justify-self: end;
}

body.ordering-process .radio-wrapper .payment-shipping-price.for-free {
  color: #2d7a2d !important;
}

/* Back under form */
body.in-krok-1 .rl-cart-back {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin-top: 8px;
  font-family: var(--rl-body);
  font-size: 13px;
  color: #888;
  text-decoration: none;
}

body.in-krok-1 .rl-cart-back::before {
  content: '←';
}

/* ── krok-1/2 sidebar: contact + summary (Figma 286:5693 / 286:5710) ── */
body.in-krok-1 .order-summary .checkout-box,
body.in-krok-2 .order-summary .checkout-box {
  margin: 0 0 16px;
}

body.in-krok-1 .checkout-box-wrapper>.box,
body.in-krok-2 .checkout-box-wrapper>.box,
body.in-krok-1 .order-summary .checkout-box>.box,
body.in-krok-2 .order-summary .checkout-box>.box {
  background: var(--rl-checkout-summary-bg) !important;
  border: none !important;
  padding: 28px !important;
  margin: 0 0 16px !important;
}

body.in-krok-1 .order-summary .checkout-box>.box .rl-summary-title,
body.in-krok-2 .order-summary .checkout-box>.box .rl-summary-title {
  display: none;
  /* title belongs on summary-inner */
}

body.in-krok-1 .order-summary .checkout-box>.box .rl-checkout-pays,
body.in-krok-2 .order-summary .checkout-box>.box .rl-checkout-pays {
  display: none;
  /* pays belong under CTA */
}

body.in-krok-1 .contact-box,
body.in-krok-2 .contact-box {
  display: grid;
  grid-template-columns: 74px 1fr;
  grid-template-rows: auto auto;
  column-gap: 30px;
  row-gap: 16px;
  align-items: center;
}

body.in-krok-1 .contact-box>img,
body.in-krok-2 .contact-box>img {
  grid-column: 1;
  grid-row: 2;
  width: 74px !important;
  height: 74px !important;
  max-width: none !important;
  border-radius: 50%;
  object-fit: cover;
  mix-blend-mode: darken;
}

body.in-krok-1 .contact-box>strong,
body.in-krok-2 .contact-box>strong {
  grid-column: 1 / -1;
  grid-row: 1;
  font-family: var(--rl-display);
  font-weight: 700;
  font-size: 14.4px;
  line-height: 21.6px;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--rl-black);
  width: auto;
  margin: 0;
}

body.in-krok-1 .contact-box>ul,
body.in-krok-2 .contact-box>ul {
  grid-column: 2;
  grid-row: 2;
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 5px;
  justify-content: center;
  align-self: center;
}

body.in-krok-1 .contact-box>ul li,
body.in-krok-2 .contact-box>ul li {
  margin: 0;
  padding: 0;
}

body.in-krok-1 .contact-box a,
body.in-krok-2 .contact-box a {
  font-family: var(--rl-body);
  font-weight: 700;
  font-size: 14px;
  line-height: 19.92px;
  color: #555 !important;
  text-decoration: none;
}

body.in-krok-1 .contact-box .cellphone a,
body.in-krok-2 .contact-box .cellphone a {
  text-decoration: underline;
  text-underline-offset: 2px;
}

body.in-krok-1 .contact-box .mail,
body.in-krok-2 .contact-box .mail,
body.in-krok-1 .contact-box .cellphone,
body.in-krok-2 .contact-box .cellphone {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-height: 20px;
}

body.in-krok-1 .contact-box .mail::before,
body.in-krok-2 .contact-box .mail::before {
  content: '';
  width: 19px;
  height: 14px;
  flex-shrink: 0;
  background: url('/user/documents/upload/assets/images/envelope.svg') center / contain no-repeat;
}

body.in-krok-1 .contact-box .cellphone::before,
body.in-krok-2 .contact-box .cellphone::before {
  content: '';
  width: 18px;
  height: 18px;
  flex-shrink: 0;
  background: url('/user/documents/upload/assets/images/phone.svg') center / contain no-repeat;
}

body.in-krok-1 .order-summary-inner,
body.in-krok-2 .order-summary-inner {
  background: var(--rl-checkout-summary-bg) !important;
  border: none !important;
  padding: 28px !important;
  margin: 0 !important;
}

body.in-krok-1 .order-summary-inner>.h4,
body.in-krok-2 .order-summary-inner>.h4,
body.in-krok-1 .order-summary-inner>h2.h4,
body.in-krok-2 .order-summary-inner>h2.h4 {
  display: none !important;
}

body.in-krok-1 .order-summary-inner>.rl-summary-title,
body.in-krok-2 .order-summary-inner>.rl-summary-title {
  margin: 0 0 0;
  padding: 0 0 16px;
}

body.in-krok-1 .order-summary .cart-items,
body.in-krok-2 .order-summary .cart-items {
  margin: 0;
  padding: 20px 0 21px;
  border: none;
  border-bottom: 1px solid #e0ddd8;
  display: flex;
  flex-direction: column;
  gap: 10px;
}

body.in-krok-1 .order-summary .cart-item,
body.in-krok-2 .order-summary .cart-item {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  grid-template-rows: auto auto;
  column-gap: 12px;
  align-items: start;
  padding: 0;
  border: none;
  margin: 0;
}

body.in-krok-1 .order-summary .cart-item-name,
body.in-krok-2 .order-summary .cart-item-name {
  grid-column: 1;
  grid-row: 1 / span 2;
  min-width: 0;
}

/* Product name: Inter Bold #555 + underline */
body.in-krok-1 .order-summary .cart-item-name a,
body.in-krok-2 .order-summary .cart-item-name a {
  font-family: var(--rl-body);
  font-weight: 700;
  font-size: 13.28px;
  line-height: 19.92px;
  color: #555 !important;
  text-decoration: underline;
  text-underline-offset: 2px;
}

body.in-krok-1 .order-summary .cart-item-amount,
body.in-krok-2 .order-summary .cart-item-amount {
  grid-column: 2;
  grid-row: 1;
  font-family: var(--rl-body);
  font-weight: 400;
  font-size: 13.28px;
  line-height: 19.92px;
  color: #555;
  white-space: nowrap;
  text-align: right;
}

body.in-krok-1 .order-summary .cart-item-price,
body.in-krok-2 .order-summary .cart-item-price {
  grid-column: 2;
  grid-row: 2;
  font-family: var(--rl-body);
  font-weight: 700;
  font-size: 13.28px;
  line-height: 19.92px;
  color: #555;
  white-space: nowrap;
  text-align: right;
}

/* Celkem za zboží — Inter Bold 16 #555 */
body.in-krok-1 .order-summary-item.helper,
body.in-krok-2 .order-summary-item.helper {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  padding: 20px 0 21px;
  margin: 0;
  border-top: none;
  border-bottom: 1px solid #e0ddd8;
  font-family: var(--rl-body);
  font-weight: 700;
  font-size: 16px;
  line-height: 19.92px;
  color: #555;
}

body.in-krok-1 .order-summary-item.helper strong,
body.in-krok-2 .order-summary-item.helper strong,
body.in-krok-1 .order-summary-item.helper>div,
body.in-krok-2 .order-summary-item.helper>div {
  font-weight: 700;
  color: #555;
}

body.in-krok-1 #shipping-billing-summary.order-recapitulation,
body.in-krok-2 #shipping-billing-summary.order-recapitulation {
  margin: 0;
    padding: 15px 0 12px;
    border: none;
    display: flex;
    flex-direction: column;
    gap: 8px;
}

/* Hide “Způsob dopravy:” / “Platba:” — Figma shows method name + price only */
body.in-krok-1 .recapitulation-shipping-billing-label,
body.in-krok-2 .recapitulation-shipping-billing-label {
  display: none !important;
}

body.in-krok-1 .recapitulation-single,
body.in-krok-2 .recapitulation-single {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 12px;
  padding: 0;
  font-family: var(--rl-body);
  font-weight: 400;
  font-size: 13.28px;
  line-height: 19.92px;
  color: #555;
}

body.in-krok-1 .recapitulation-shipping-billing-info,
body.in-krok-2 .recapitulation-shipping-billing-info {
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  align-items: baseline;
  gap: 12px;
  width: 100%;
  text-align: left;
  font-weight: 400;
  color: #555;
}

/* Price on the right; method name stays left */
body.in-krok-1 .recapitulation-shipping-billing-info [data-testid="recapItemPrice"],
body.in-krok-2 .recapitulation-shipping-billing-info [data-testid="recapItemPrice"] {
  order: 2;
  margin-left: auto;
  font-family: var(--rl-body) !important;
  font-weight: 400 !important;
  font-size: 13.28px;
  line-height: 19.92px;
  color: #555 !important;
  white-space: nowrap;
}

body.in-krok-1 .recapitulation-shipping-billing-info [data-testid="recapItemPrice"].rl-price-free,
body.in-krok-2 .recapitulation-shipping-billing-info [data-testid="recapItemPrice"].rl-price-free {
  color: #555 !important;
  /* summary: Zdarma stays gray, not green */
}

body.in-krok-1 .order-summary-item.price,
body.in-krok-2 .order-summary-item.price {
  margin: 0;
  padding: 0;
  border: none;
}

/* Totals — Celkem k úhradě black; Cena bez DPH gray */
body.in-krok-1 .order-summary .price-wrapper,
body.in-krok-2 .order-summary .price-wrapper {
  margin: 0;
  display: grid;
  grid-template-columns: 1fr auto;
  column-gap:0;
  align-items: start;
}

body.in-krok-1 .order-summary .price-wrapper .price-label.price-primary,
body.in-krok-2 .order-summary .price-wrapper .price-label.price-primary,
body.in-krok-1 .order-summary .price-wrapper .price.price-primary,
body.in-krok-2 .order-summary .price-wrapper .price.price-primary {
  padding: 18px 0 8px;
  border-bottom: none;
  border-top: 2px solid #e0ddd8;
  margin: 0;
}

body.in-krok-1 .order-summary .price-wrapper .price-label.price-primary,
body.in-krok-2 .order-summary .price-wrapper .price-label.price-primary {
  font-family: var(--rl-display);
  font-weight: 700;
  font-size: 16px;
  line-height: 30px;
  color: #111;
}

body.in-krok-1 .order-summary .price-wrapper .price.price-primary,
body.in-krok-2 .order-summary .price-wrapper .price.price-primary {
  font-family: var(--rl-display);
  font-weight: 800;
  font-size: 20.8px;
  line-height: 30px;
  color: #111;
  text-align: right;
}

body.in-krok-1 .order-summary .price-wrapper .price-label.price-secondary,
body.in-krok-2 .order-summary .price-wrapper .price-label.price-secondary {
  padding-top: 0;
  padding-bottom: 16px;
  font-family: var(--rl-display);
  font-weight: 500;
  font-size: 14px;
  line-height: 1.2;
  color: #555;
}

body.in-krok-1 .order-summary .price-wrapper .price.price-secondary,
body.in-krok-2 .order-summary .price-wrapper .price.price-secondary {
  padding-top: 0;
  padding-bottom: 16px;
  font-family: var(--rl-display);
  font-weight: 500;
  font-size: 14px;
  line-height: 1.2;
  color: #555;
  text-align: right;
}

body.in-krok-1 .order-summary .next-step--step-1,
body.in-krok-2 .order-summary .next-step--step-1,
body.in-krok-1 .order-summary-inner .next-step--step-1,
body.in-krok-2 .order-summary-inner .next-step--step-1 {
  margin: 0;
  padding: 0;
  display: block;
}

body.in-krok-1 .order-summary .next-step--step-1 .next-step-back,
body.in-krok-2 .order-summary .next-step--step-1 .next-step-back {
  display: none !important;
}

body.in-krok-1 .order-summary-inner .rl-checkout-pays,
body.in-krok-2 .order-summary-inner .rl-checkout-pays {
  display: flex;
  gap: 6px;
  justify-content: center;
  margin: 0;
  padding-top: 20px;
  flex-wrap: wrap;
}

/* Order summary line items (shared) */
body.ordering-process .order-recapitulation,
body.ordering-process .order-summary-item {
  font-family: var(--rl-body);
  font-size: 13px;
  color: var(--rl-black);
}

body.ordering-process .order-summary-item.price .price-final,
body.ordering-process .order-summary-item.price strong {
  font-family: var(--rl-display);
  font-weight: 700;
  font-size: 20px;
}

/* ── Step 2 forms — Informace o vás (Figma 315:8314 / 315:9133) ── */
body.in-krok-2 .co-box,
body.in-krok-2 .co-billing-address,
body.in-krok-2 .co-box-additional,
body.in-krok-2 fieldset.box {
  background: transparent !important;
  border: none !important;
  box-shadow: none !important;
  padding: 0 !important;
  margin: 0 0 32px !important;
}

body.in-krok-2 .form-legend {
  display: none !important;
}

/* Login banner — inside left column, centered (Figma 315:8438) */
body.in-krok-2 .rl-login-banner {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  width: 100%;
  max-width: 100%;
  margin: 0 0 28px;
  padding: 0;
  background: none;
  text-decoration: none !important;
  color: inherit;
  text-align: center;
  grid-column: auto;
}

body.in-krok-2 .rl-login-banner__icon {
  flex-shrink: 0;
  width: 30px;
  height: 30px;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none'%3E%3Ccircle cx='12' cy='8' r='3.5' stroke='%23111' stroke-width='1.5'/%3E%3Cpath d='M5 19.5c1.8-3.2 4.2-4.5 7-4.5s5.2 1.3 7 4.5' stroke='%23111' stroke-width='1.5' stroke-linecap='round'/%3E%3C/svg%3E") center / contain no-repeat;
}

body.in-krok-2 .rl-login-banner__text {
  font-family: var(--rl-body);
  font-weight: 600;
  font-size: 14px;
  line-height: 25.2px;
  color: var(--rl-black);
}

body.in-krok-2 .rl-login-banner__link {
  text-decoration: underline;
  text-underline-offset: 2px;
}

body.in-krok-2 .co-contact-information>.form-group:has(.login-button) {
  display: none !important;
}

body.in-krok-2 .co-box .form-group,
body.in-krok-2 .co-contact-information .form-group,
body.in-krok-2 .co-billing-address .form-group,
body.in-krok-2 .co-box-additional .form-group {
  margin-bottom: 12px;
}

body.in-krok-2 .co-billing-address,
body.in-krok-2 .co-box.co-billing-address {
  margin-top: 32px !important;
}

body.in-krok-2 .co-billing-address>h2.header-billing,
body.in-krok-2 h2.header-billing {
  display: flex;
  align-items: center;
  gap: 10px;
  font-family: var(--rl-display);
  font-weight: 700;
  font-size: 16.8px;
  line-height: 25.2px;
  color: var(--rl-black);
  margin: 0 0 20px;
  padding: 0;
  background: none !important;
}

body.in-krok-2 .company-shopping,
body.in-krok-2 .form-group.company-shopping {
  margin-bottom: 15px !important;
}

body.in-krok-2 .co-box-additional {
  margin-top: 8px !important;
}

body.ordering-process .form-control,
body.ordering-process select.form-control,
body.ordering-process textarea.form-control {
  height: 45px;
  border: 1px solid #d8d5d0 !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  font-family: var(--rl-body);
  font-size: 14px;
  color: var(--rl-black);
  background: var(--rl-white) !important;
  padding: 12px 15px !important;
}

body.ordering-process textarea.form-control {
  height: auto;
  min-height: 120px;
  resize: vertical;
}

body.ordering-process .form-control:focus {
  border-color: var(--rl-black) !important;
  outline: none;
}

body.ordering-process .form-control:disabled,
body.ordering-process select.form-control:disabled {
  background: #f0eeea !important;
  color: #888;
}

body.ordering-process .smart-label-wrapper label,
body.ordering-process .form-group>.label,
body.ordering-process .form-group>label,
body.ordering-process .form-group>p.label {
  font-family: var(--rl-body);
  font-weight: 500;
  font-size: 12px;
  letter-spacing: .04em;
  color: #555;
  margin-bottom: 6px;
}

body.ordering-process .required-asterisk,
body.ordering-process .form-group .required {
  color: #555;
}

body.ordering-process .required-asterisk::after {
  content: ' *';
  color: #cc1f1f;
  font-weight: 500;
}

/* Checkout checkboxes — same pattern as category filters */
body.ordering-process input[type="checkbox"] {
  appearance: none;
  -webkit-appearance: none;
  -moz-appearance: none;
  box-sizing: border-box;
  width: 18px;
  height: 18px;
  min-width: 18px;
  min-height: 18px;
  flex-shrink: 0;
  border: 1.5px solid #888;
  border-radius: 3px;
  background: var(--rl-white);
  cursor: pointer;
  margin: 0 10px 0 0;
  padding: 0;
  position: relative;
  vertical-align: middle;
  outline: none;
  box-shadow: none;
  accent-color: unset;
}

body.ordering-process input[type="checkbox"]:checked {
  background: var(--rl-white);
  border-color: var(--rl-red);
}

body.ordering-process input[type="checkbox"]:checked::after {
  content: '';
  position: absolute;
  left: 5px;
  top: 1.5px;
  width: 5px;
  height: 9px;
  border: solid var(--rl-red);
  border-width: 0 2px 2px 0;
  transform: rotate(45deg);
}

body.ordering-process input[type="checkbox"]:focus-visible,
body.ordering-process input[type="checkbox"]:focus {
  outline: none;
  box-shadow: 0 0 0 3px rgba(204, 31, 31, .28);
}

body.ordering-process input[type="checkbox"]:checked:focus-visible,
body.ordering-process input[type="checkbox"]:checked:focus {
  border-color: var(--rl-red);
  box-shadow: 0 0 0 3px rgba(204, 31, 31, .28);
}

body.in-krok-2 .form-group:has(> input[type="checkbox"]) {
  display: flex;
  align-items: flex-start;
  gap: 0;
}

body.in-krok-2 .form-group>input[type="checkbox"]+label.whole-width,
body.in-krok-2 label.whole-width {
  font-family: var(--rl-body);
  font-size: 14px;
  line-height: 1.4;
  color: var(--rl-black);
  font-weight: 400;
  display: inline;
}

/* Full-width form controls (left column) */
body.in-krok-2 .form-group.smart-label-wrapper,
body.in-krok-2 .form-group--inline,
body.in-krok-2 .form-control-wrapper,
body.in-krok-2 .phone-combined-input,
body.in-krok-2 .phone-form-group {
  width: 100% !important;
  max-width: none !important;
  float: none !important;
  box-sizing: border-box;
}

body.in-krok-2 .form-control,
body.in-krok-2 input.form-control,
body.in-krok-2 textarea.form-control,
body.in-krok-2 select.form-control,
body.in-krok-2 .form-control.small,
body.in-krok-2 .form-control.short,
body.in-krok-2 input.form-control.short {
  width: 100% !important;
  max-width: none !important;
  box-sizing: border-box;
}

/* Phone: Shoptet flags live inside the input border (Figma 315:9282) */
body.in-krok-2 .phone-combined-input,
body.in-krok-2 .phone-combined-input.rl-phone-field {
  position: relative;
  display: flex;
  align-items: center;
  gap: 10px;
  border: 1px solid #d8d5d0;
  background: #fff;
  height: 45px;
  padding: 0 15px;
  overflow: visible;
}

body.in-krok-2 .phone-combined-input>select {
  position: absolute !important;
  left: 0;
  top: 0;
  width: 1px !important;
  height: 1px !important;
  opacity: 0 !important;
  pointer-events: none !important;
  margin: 0 !important;
  padding: 0 !important;
  border: 0 !important;
}

body.in-krok-2 .phone-combined-input .country-flags {
  position: relative;
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  align-self: stretch;
  min-width: 33px;
  margin: 0;
  padding: 0;
  border: none !important;
  background: transparent !important;
  cursor: pointer;
  z-index: 4;
}

/* Chevron — same glyph as krok-1 country select; clicks pass through to hit area */
body.in-krok-2 .phone-combined-input .country-flags::after {
  content: '';
  position: absolute;
  right: 0;
  top: 50%;
  width: 7px;
  height: 4px;
  margin-top: -2px;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='7' height='4' viewBox='0 0 7 4'%3E%3Cpath d='M0 0h7L3.5 4 0 0z' fill='%23111'/%3E%3C/svg%3E") center / 7px 4px no-repeat;
  pointer-events: none;
  z-index: 2;
  transition: transform .15s var(--rl-ease-out, ease);
}

body.in-krok-2 .phone-combined-input .country-flags.active::after {
  transform: rotate(180deg);
}

body.in-krok-2 .phone-combined-input .country-flags-inner {
  display: flex;
  align-items: center;
  width: 100%;
  height: 100%;
  min-height: inherit;
}

/* Closed: only the selected flag glyph (20×13) */
body.in-krok-2 .phone-combined-input .country-flag {
  display: none !important;
  align-items: center;
  gap: 8px;
  margin: 0;
  padding: 0;
  border: none;
  background: none;
  cursor: pointer;
}

/* Full trigger hit area (flag + chevron + padding) */
body.in-krok-2 .phone-combined-input .country-flags:not(.active) .country-flag.selected {
  display: flex !important;
  position: absolute;
  inset: 0;
  z-index: 1;
  box-sizing: border-box;
  padding-right: 12px;
}

body.in-krok-2 .phone-combined-input .country-flag.selected .shp-flag-label {
  display: none !important;
}

body.in-krok-2 .phone-combined-input .shp-flag {
  display: block !important;
  width: 20px !important;
  height: 13px !important;
  flex-shrink: 0;
  overflow: hidden;
}

body.in-krok-2 .phone-combined-input .shp-flag use {
  width: 20px;
  height: 13px;
}

/* Open dropdown (Shoptet toggles .active) */
body.in-krok-2 .phone-combined-input .country-flags.active .country-flags-inner {
  position: absolute;
  top: calc(100% + 6px);
  left: -15px;
  display: flex;
  flex-direction: column;
  align-items: stretch;
  width: min(300px, 80vw);
  height: 260px;
  overflow-x: hidden;
  overflow-y: auto;
  margin: 0;
  padding: 6px 0;
  background: #fff;
  border: 1px solid #d8d5d0;
  box-shadow: 0 10px 28px rgba(17, 17, 17, 0.1);
  z-index: 30;
}

body.in-krok-2 .phone-combined-input .country-flags.active .country-flag {
  display: flex !important;
  position: static;
  inset: auto;
  width: 100%;
  padding: 8px 14px;
  box-sizing: border-box;
}

body.in-krok-2 .phone-combined-input .country-flags.active .country-flag:hover,
body.in-krok-2 .phone-combined-input .country-flags.active .country-flag:focus,
body.in-krok-2 .phone-combined-input .country-flags.active .country-flag.suggested {
  background: #f7f5f2;
  outline: none;
}

body.in-krok-2 .phone-combined-input .country-flags.active .shp-flag-label {
  display: flex !important;
  align-items: center;
  gap: 6px;
  font-family: var(--rl-body);
  font-size: 13px;
  line-height: 1.3;
  color: #555;
}

body.in-krok-2 .phone-combined-input .country-flags.active .shp-flag-name {
  color: var(--rl-black);
}

body.in-krok-2 .phone-combined-input .form-control,
body.in-krok-2 .phone-combined-input .form-control.small {
  border: none !important;
  box-shadow: none !important;
  height: 100% !important;
  flex: 1 1 auto;
  min-width: 0;
  width: auto !important;
  max-width: none !important;
  padding: 12px 0 !important;
  background: transparent !important;
}

body.in-krok-2 .phone-combined-input .form-control:focus {
  border: none !important;
  outline: none;
}

body.in-krok-2 .form-control.short,
body.in-krok-2 input.form-control.short {
  max-width: none;
  width: 100%;
}

/* Country field (image2): label → input box → help below */
body.in-krok-2 .form-group.smart-label-wrapper.populated.form-group--inline {
  display: block;
  width: 100%;
  margin-bottom: 16px;
}

body.in-krok-2 .form-group--inline>p.label,
body.in-krok-2 .form-group--inline>p.label.js-location {
  display: block;
  font-family: var(--rl-body);
  font-weight: 500;
  font-size: 12px;
  letter-spacing: .04em;
  color: #555;
  margin: 0 0 6px;
  line-height: 18px;
}

body.in-krok-2 .form-control-wrapper--with-note {
  display: flex;
  align-items: center;
  width: 100%;
  padding: 12px 15px;
  border: 1px solid #d8d5d0;
  background: #f0eeea;
  font-family: var(--rl-body);
  font-size: 14px;
  color: rgba(17, 17, 17, 0.55);
  min-height: 45px;
  box-sizing: border-box;
}

body.in-krok-2 .form-control-wrapper--with-note>strong {
  font-weight: 400;
  color: rgba(17, 17, 17, 0.55);
}

body.in-krok-2 .form-control-wrapper--with-note .helpNote {
  display: none !important;
  /* moved below via .rl-country-help */
}

body.in-krok-2 .rl-country-help {
  display: block;
  margin: 6px 0 0;
  padding: 0;
  font-family: var(--rl-body);
  font-size: 13px;
  line-height: 1.4;
  color: #555;
}

body.in-krok-2 .rl-country-help strong {
  font-weight: 700;
  color: #555;
}

body.in-krok-2 .rl-country-help a {
  color: #555;
  text-decoration: underline;
  text-underline-offset: 2px;
}

body.in-krok-2 .rl-stay-title {
  display: flex;
  align-items: center;
  font-family: var(--rl-display);
  font-weight: 700;
  font-size: 16.8px;
  line-height: 25.2px;
  color: var(--rl-black);
  margin: 24px 0 0;
  padding: 0;
}

body.in-krok-2 .stay-in-touch {
  margin-top: 8px;
  padding: 0;
  border: none;
}

body.in-krok-2 .stay-in-touch>.form-group {
  margin-bottom: 10px;
}

body.in-krok-2 .stay-in-touch>.rl-stay-title+.form-group {
  margin-top: 20px;
}

body.in-krok-2 .js-location--hidden {
  display: none !important;
}

/* Company / note unveil */
body.in-krok-2 .js-hidden {
  display: none !important;
}

body.in-krok-2 .js-hidden.is-visible,
body.in-krok-2 .js-hidden.visible,
body.in-krok-2 #company-info:not(.js-hidden),
body.in-krok-2 #note:not(.js-hidden),
body.in-krok-2 #shipping-address:not(.js-hidden) {
  display: block !important;
}

body.in-krok-2 .question-tooltip.form-group-tooltip {
  display: inline-flex !important;
  align-items: center;
  justify-content: center;
  width: 15px;
  height: 15px;
  margin-left: 6px;
  border-radius: 20px;
  background: #9c9c9c !important;
  color: #fff !important;
  font-size: 10px;
  font-weight: 600;
}

body.in-krok-2 .rl-cart-back {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin-top: 12px;
  font-family: var(--rl-body);
  font-size: 13px;
  color: #888;
  text-decoration: none;
}

body.in-krok-2 .rl-cart-back::before {
  content: '←';
}

body.in-krok-2 .login-button,
body.in-krok-2 a.btn.login-button {
  /* replaced by .rl-login-banner when JS runs */
  background: none !important;
  border: none !important;
  color: var(--rl-black) !important;
  text-decoration: underline;
  padding: 0 !important;
  font-family: var(--rl-body);
  font-size: 14px;
}

body.in-krok-2 .form-group--inline {
  background: transparent;
  padding: 0;
  margin-bottom: 16px !important;
}

/* krok-2 shipping/payment rows (inside .cart-items, not #shipping-billing-summary) */
body.in-krok-2 .order-summary .cart-items .recapitulation-single {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  padding: 0;
  border: none;
  font-family: var(--rl-body);
  font-weight: 400;
  font-size: 13.28px;
  line-height: 19.92px;
  color: #555;
}

body.in-krok-2 .order-summary .cart-items .recapitulation-single>span {
  display: none;
  /* hide “Způsob dopravy” / “Platba” labels */
}

body.in-krok-2 .order-summary .cart-items .recapitulation-single>strong {
  display: flex;
  justify-content: space-between;
  width: 100%;
  gap: 12px;
  font-weight: 400;
  color: #555;
}

body.in-krok-2 .order-summary .cart-items .recapitulation-single [data-testid="recapItemPrice"] {
  order: 2;
  margin-left: auto;
  font-weight: 400;
  color: #555;
  white-space: nowrap;
}

body.in-krok-2 .order-summary .cart-items .recapitulation-single [data-testid="recapItemPrice"].rl-price-free {
  color: #555;
}

body.in-krok-2 .order-summary .cart-items:has(.recapitulation-single) {
  border-bottom: none;
  padding: 20px 0 0;
  gap: 10px;
}

/* Satisfaction accordion — collapsed by default; terms stay visible below */
body.in-krok-2 .rl-satisfaction {
  margin: 0;
  padding: 20px 0 0;
  border: none;
}

body.in-krok-2 .rl-satisfaction__toggle {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  width: auto;
  max-width: 100%;
  margin: 0;
  padding: 0 0 10px;
  border: none;
  background: none;
  font-family: var(--rl-body);
  font-weight: 700;
  font-size: 13.28px;
  line-height: 19.92px;
  color: var(--rl-black);
  text-align: left;
  cursor: pointer;
}

body.in-krok-2 .rl-satisfaction__toggle::after {
  content: '';
  width: 7px;
  height: 4px;
  flex-shrink: 0;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='7' height='4' viewBox='0 0 7 4'%3E%3Cpath d='M0 0h7L3.5 4 0 0z' fill='%23111'/%3E%3C/svg%3E") center / 7px 4px no-repeat;
  transition: transform .2s;
}

body.in-krok-2 .rl-satisfaction.is-open .rl-satisfaction__toggle::after {
  transform: scaleY(-1);
}

body.in-krok-2 .rl-satisfaction__panel {
  display: none;
  padding: 0 0 15px;
}

body.in-krok-2 .rl-satisfaction.is-open .rl-satisfaction__panel {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

body.in-krok-2 .rl-satisfaction .consents,
body.in-krok-2 .order-summary .consents {
  margin: 0;
  font-size: 13.28px;
  color: var(--rl-black);
  line-height: 19.92px;
}

body.in-krok-2 .rl-satisfaction .consents {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  padding: 5px 0 10px 0;
}

body.in-krok-2 .rl-satisfaction .consents a,
body.in-krok-2 .order-summary .consents a,
body.in-krok-2 .rl-consent-terms a {
  color: var(--rl-black);
  text-decoration: underline;
}

body.in-krok-2 .rl-satisfaction .consents .label,
body.in-krok-2 .rl-satisfaction .consents label,
body.in-krok-2 .order-summary .consents .label {
  font-size: 13.28px;
  color: var(--rl-black);
  line-height: 19.92px;
  margin: 0;
  font-weight: 400;
}

body.in-krok-2 .rl-consent-terms,
body.in-krok-2 .order-summary>.consents.rl-consent-terms,
body.in-krok-2 .order-summary>.consents:not(.consents-first) {
  display: block !important;
  width: 100%;
  margin: 16px 0 12px !important;
  padding: 0 !important;
  background: transparent !important;
  border: none !important;
  font-family: var(--rl-body);
  font-size: 13.28px;
  line-height: 19.92px;
  color: var(--rl-black);
}

body.in-krok-2 .rl-consent-terms .label,
body.in-krok-2 .order-summary>.consents .label {
  display: block;
  margin: 0;
  padding: 0;
  font-size: 13.28px;
  line-height: 19.92px;
  color: var(--rl-black);
  font-weight: 400;
}

body.in-krok-2 .rl-survey-hidden {
  display: none !important;
}

body.in-krok-2 .rl-satisfaction {
  display: none !important;
  /* skeleton not ready yet */
}

body.in-krok-2 .order-summary .consents a,
body.in-krok-2 .rl-consent-terms a {
  color: var(--rl-black);
  text-decoration: underline;
  text-underline-offset: 2px;
}

body.in-krok-2 .order-summary .next-step--step-2 .next-step-back {
  display: none !important;
}

body.in-krok-2 .order-summary>.next-step--step-2,
body.in-krok-2 .order-summary .next-step--step-2 {
  display: block;
  width: 100%;
  margin: 0;
  padding: 0;
}

body.in-krok-2 .order-summary>.rl-checkout-pays {
  margin-top: 12px;
}

/* Stacked CTA — OBJEDNAT / s povinností platby */
body.in-krok-2 .next-step--step-2 .btn-conversion.rl-cta-stacked,
body.in-krok-2 .btn-conversion.rl-cta-stacked,
body.in-krok-2 #submit-order.rl-cta-stacked {
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 0 !important;
  width: 100% !important;
  min-height: 64px !important;
  padding: 14px 16px !important;
  background: #cc1f1f !important;
  color: #fff !important;
  border: none !important;
  border-radius: 0 !important;
  letter-spacing: 1.36px !important;
  line-height: 16px !important;
  text-transform: none !important;
  text-align: center !important;
  white-space: normal !important;
  font-size: inherit !important;
}

body.in-krok-2 .rl-cta-stacked .order-button-text {
  display: block !important;
  font-family: var(--rl-display) !important;
  font-size: 18px !important;
  font-weight: 600 !important;
  letter-spacing: 1.36px !important;
  text-transform: uppercase !important;
  line-height: 16px !important;
  color: #fff !important;
}

body.in-krok-2 .rl-cta-stacked .order-button-suffix {
  display: block !important;
  font-family: var(--rl-display) !important;
  font-size: 13.6px !important;
  font-weight: 600 !important;
  letter-spacing: 1.36px !important;
  text-transform: none !important;
  line-height: 16px !important;
  color: #fff !important;
  opacity: 1 !important;
  margin: 2px 0 0 !important;
  visibility: visible !important;
}

/* legacy stub selectors kept harmless */
body.ordering-process .rl-satisfaction,
body.ordering-process [class*="satisfaction"],
body.ordering-process .heureka,
body.ordering-process .zbozi {
  font-size: 13px;
}

/* ── Responsive ── */
@media (max-width: 992px) {

  body.ordering-process .cart-row,
  body.ordering-process .row:has(> #checkoutSidebar) {
    grid-template-columns: 1fr !important;
    gap: 32px;
    grid-template-areas:
      "main"
      "side"
      "back";
  }

  body.ordering-process .rl-cart-back,
  body.in-kosik .rl-cart-back,
  body.in-krok-1 .rl-cart-back,
  body.in-krok-2 .rl-cart-back {
    display: flex !important;
    justify-content: center;
    align-items: center;
    width: 100%;
    margin-top: 8px;
    text-align: center;
  }

  body.ordering-process #checkoutSidebar,
  body.in-kosik .sidebar-in-cart,
  body.ordering-process .sidebar-in-cart {
    position: static !important;
    top: auto !important;
  }

  body.ordering-process ol.cart-header>li.step>a,
  body.ordering-process ol.cart-header>li.step>strong {
    font-size: 12px;
    padding: 12px 14px 14px !important;
  }

  body.ordering-process ol.cart-header>li.step>a>span,
  body.ordering-process ol.cart-header>li.step>strong>span {
    gap: 6px;
  }

  body.ordering-process .radio-wrapper>label {
    grid-template-columns: 90px minmax(0, 1fr);
    grid-template-rows: auto auto;
    row-gap: 8px;
  }

  body.ordering-process .radio-wrapper .payment-logo {
    grid-column: 1;
    grid-row: 1;
    width: 90px;
  }

  body.ordering-process .radio-wrapper .payment-info {
    grid-column: 2;
    grid-row: 1;
  }

  body.ordering-process .radio-wrapper .payment-shipping-price {
    grid-column: 1 / -1;
    grid-row: 2;
    justify-self: start;
    text-align: left;
  }

  body.in-kosik .cart-table tr.removeable {
    grid-template-columns: 72px minmax(0, 1fr);
    gap: 6px 14px;
  }

  body.in-kosik .cart-table .cart-p-image {
    grid-column: 1;
    grid-row: 1 / span 3;
    width: 72px;
    height: 72px;
  }

  body.in-kosik .cart-table .p-name {
    grid-column: 2;
    grid-row: 1;
  }

  body.in-kosik .cart-table .p-quantity {
    grid-column: 2;
    grid-row: 2;
  }

  body.in-kosik .cart-table .p-total {
    grid-column: 2;
    grid-row: 3;
    justify-self: start;
    text-align: left;
  }
}

@media (max-width: 768px) {
  body.ordering-process ol.cart-header {
    margin-bottom: 24px !important;
  }

  body.ordering-process ol.cart-header>li.step>a>span,
  body.ordering-process ol.cart-header>li.step>strong>span {
    font-size: 0;
  }

  body.ordering-process ol.cart-header>li.step>a>span::before,
  body.ordering-process ol.cart-header>li.step>strong>span::before {
    font-size: 11px;
  }

  body.ordering-process .summary-wrapper .box,
  body.ordering-process .checkout-box-wrapper>.box {
    padding: 20px var(--rl-gap) !important;
  }
}

/* ═══════════════════════════════════════════
   CUSTOMER AUTH — Zapomenuté heslo + Registrace
   body.customer-page / .in-zapomenute-heslo / .in-registrace
   ═══════════════════════════════════════════ */

body.customer-page #content-wrapper.content-wrapper,
body.in-zapomenute-heslo #content-wrapper.content-wrapper,
body.in-registrace #content-wrapper.content-wrapper {
  max-width: var(--rl-max);
  padding-left: var(--rl-gap);
  padding-right: var(--rl-gap);
  box-sizing: border-box;
}

body.customer-page .content-wrapper-in,
body.in-zapomenute-heslo .content-wrapper-in,
body.in-registrace .content-wrapper-in {
  display: block !important;
  width: 100% !important;
  max-width: none !important;
  float: none !important;
}

/* Empty left sidebar — hide completely */
body.customer-page aside.sidebar,
body.in-zapomenute-heslo aside.sidebar,
body.in-registrace aside.sidebar {
  display: none !important;
}

body.customer-page main#content.content,
body.in-zapomenute-heslo main#content.content,
body.in-registrace main#content.content,
body.customer-page main#content.content.narrow,
body.in-zapomenute-heslo main#content.content.narrow,
body.in-registrace main#content.content.narrow {
  display: block !important;
  float: none !important;
  width: 100% !important;
  max-width: 720px;
  margin: 0 auto 64px !important;
  padding: 0 !important;
  box-sizing: border-box;
}

body.in-zapomenute-heslo main#content.content,
body.in-zapomenute-heslo main#content.content.narrow {
  max-width: 480px;
}

/* Breadcrumbs */
body.customer-page .breadcrumbs-wrapper,
body.in-zapomenute-heslo .breadcrumbs-wrapper,
body.in-registrace .breadcrumbs-wrapper {
  max-width: var(--rl-max);
  margin: 0 auto;
  padding: 20px var(--rl-gap) 8px;
  box-sizing: border-box;
}

body.customer-page .breadcrumbs,
body.in-zapomenute-heslo .breadcrumbs,
body.in-registrace .breadcrumbs {
  font-family: var(--rl-body);
  font-size: 13px;
  line-height: 1.4;
  color: #888;
}

body.customer-page .breadcrumbs a,
body.in-zapomenute-heslo .breadcrumbs a,
body.in-registrace .breadcrumbs a,
body.customer-page .breadcrumbs .navigation-home-icon,
body.in-zapomenute-heslo .breadcrumbs .navigation-home-icon,
body.in-registrace .breadcrumbs .navigation-home-icon {
  color: #888;
  text-decoration: none;
}

body.customer-page .breadcrumbs a:hover,
body.in-zapomenute-heslo .breadcrumbs a:hover,
body.in-registrace .breadcrumbs a:hover {
  color: var(--rl-black);
}

body.customer-page .breadcrumbs [data-testid="breadcrumbsLastLevel"] [itemprop="name"],
body.customer-page .breadcrumbs [data-testid="breadcrumbsLastLevel"] span[data-title],
body.in-zapomenute-heslo .breadcrumbs [data-testid="breadcrumbsLastLevel"] [itemprop="name"],
body.in-zapomenute-heslo .breadcrumbs [data-testid="breadcrumbsLastLevel"] span[data-title],
body.in-registrace .breadcrumbs [data-testid="breadcrumbsLastLevel"] [itemprop="name"],
body.in-registrace .breadcrumbs [data-testid="breadcrumbsLastLevel"] span[data-title] {
  color: var(--rl-black);
  font-weight: 500;
}

/* Page title + lead */
body.customer-page #content h1,
body.in-zapomenute-heslo #content h1,
body.in-registrace #content h1 {
  font-family: var(--rl-display);
  font-weight: 700;
  font-size: clamp(28px, 3vw, 36px);
  line-height: 1.15;
  letter-spacing: -.02em;
  color: var(--rl-black);
  margin: 12px 0 16px;
  padding: 0;
}

body.in-zapomenute-heslo #content .content-inner>p {
  font-family: var(--rl-body);
  font-size: 15px;
  line-height: 1.55;
  color: #555;
  margin: 0 0 28px;
}

/* Section boxes */
body.in-registrace #register-form .co-box,
body.in-registrace #register-form fieldset.box,
body.in-registrace #register-form .box {
  background: transparent !important;
  border: none !important;
  box-shadow: none !important;
  padding: 0 !important;
  margin: 0 0 36px !important;
}

body.in-registrace #register-form h2,
body.in-registrace #register-form .header-billing {
  font-family: var(--rl-display);
  font-weight: 700;
  font-size: 18px;
  line-height: 1.3;
  letter-spacing: -.01em;
  color: var(--rl-black);
  margin: 0 0 18px;
  padding: 0;
  background: none !important;
}

body.in-registrace #register-form .form-legend {
  font-family: var(--rl-body);
  font-size: 12px;
  color: #888;
  margin: -8px 0 16px;
}

/* Form groups */
body.customer-page #content .form-group,
body.in-zapomenute-heslo #formForgottenPassword .form-group,
body.in-registrace #register-form .form-group {
  margin-bottom: 14px;
  float: none !important;
  width: 100% !important;
  max-width: none !important;
}

body.customer-page #content .smart-label-wrapper label,
body.in-zapomenute-heslo #formForgottenPassword label,
body.in-registrace #register-form .smart-label-wrapper label,
body.in-registrace #register-form .form-group>label {
  display: block;
  font-family: var(--rl-body);
  font-weight: 500;
  font-size: 12px;
  letter-spacing: .04em;
  color: #555;
  margin-bottom: 6px;
}

body.customer-page #content .required-asterisk::after,
body.in-zapomenute-heslo #formForgottenPassword .required-asterisk::after,
body.in-registrace #register-form .required-asterisk::after {
  content: ' *';
  color: var(--rl-red);
  font-weight: 500;
}

body.customer-page #content .form-control,
body.in-zapomenute-heslo #formForgottenPassword .form-control,
body.in-registrace #register-form .form-control,
body.in-registrace #register-form select.form-control {
  display: block;
  width: 100% !important;
  max-width: none !important;
  height: 45px;
  box-sizing: border-box;
  padding: 12px 15px !important;
  font-family: var(--rl-body);
  font-size: 14px;
  color: var(--rl-black);
  background: var(--rl-white) !important;
  border: 1px solid #d8d5d0 !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  outline: none;
  transition: border-color .2s;
}

body.customer-page #content .form-control:focus,
body.in-zapomenute-heslo #formForgottenPassword .form-control:focus,
body.in-registrace #register-form .form-control:focus,
body.in-registrace #register-form select.form-control:focus {
  border-color: var(--rl-black) !important;
}

/* Země select — custom chevron ~10px from right edge */
body.in-registrace #register-form .form-control-wrapper:has(> select#billCountryId),
body.in-registrace #register-form .form-control-wrapper:has(> select.form-control) {
  position: relative;
}

body.in-registrace #register-form select#billCountryId.form-control,
body.in-registrace #register-form select.form-control {
  appearance: none !important;
  -webkit-appearance: none !important;
  -moz-appearance: none !important;
  background-image: none !important;
  padding-right: 32px !important;
  cursor: pointer;
}

body.in-registrace #register-form .form-control-wrapper:has(> select#billCountryId)::after,
body.in-registrace #register-form .form-control-wrapper:has(> select.form-control)::after {
  content: '';
  position: absolute;
  right: 10px;
  top: 50%;
  width: 7px;
  height: 4px;
  margin-top: -2px;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='7' height='4' viewBox='0 0 7 4'%3E%3Cpath d='M0 0h7L3.5 4 0 0z' fill='%23111'/%3E%3C/svg%3E") center / 7px 4px no-repeat;
  pointer-events: none;
  z-index: 2;
}

/* Customer type radios */
body.in-registrace #register-form .co-registration>.form-group {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  margin-bottom: 12px;
  padding: 14px 16px;
  border: 1px solid #e8e8e6;
  background: #fafaf8;
}

body.in-registrace #register-form .co-registration>.form-group:has(input[type="radio"]:checked) {
  border-color: var(--rl-black);
  background: var(--rl-white);
}

body.in-registrace #register-form input[type="radio"].radio {
  appearance: none;
  -webkit-appearance: none;
  width: 18px;
  height: 18px;
  min-width: 18px;
  margin: 2px 0 0;
  border: 1.5px solid #888;
  border-radius: 50%;
  background: #fff;
  cursor: pointer;
  position: relative;
  flex-shrink: 0;
}

body.in-registrace #register-form input[type="radio"].radio:checked {
  border-color: var(--rl-black);
}

body.in-registrace #register-form input[type="radio"].radio:checked::after {
  content: '';
  position: absolute;
  inset: 3px;
  border-radius: 50%;
  background: var(--rl-black);
}

body.in-registrace #register-form .co-registration>.form-group>label.whole-width {
  font-family: var(--rl-body);
  font-size: 14px;
  line-height: 1.4;
  color: var(--rl-black);
  font-weight: 400;
  cursor: pointer;
  margin: 0;
}

body.in-registrace #register-form .co-registration>.form-group>label.whole-width strong {
  font-weight: 600;
}

/* Checkboxes */
body.in-registrace #register-form input[type="checkbox"] {
  appearance: none;
  -webkit-appearance: none;
  box-sizing: border-box;
  width: 18px;
  height: 18px;
  min-width: 18px;
  flex-shrink: 0;
  border: 1.5px solid #888;
  border-radius: 3px;
  background: var(--rl-white);
  cursor: pointer;
  margin: 0 10px 0 0;
  padding: 0;
  position: relative;
  vertical-align: middle;
}

body.in-registrace #register-form input[type="checkbox"]:checked {
  border-color: var(--rl-red);
}

body.in-registrace #register-form input[type="checkbox"]:checked::after {
  content: '';
  position: absolute;
  left: 5px;
  top: 1.5px;
  width: 5px;
  height: 9px;
  border: solid var(--rl-red);
  border-width: 0 2px 2px 0;
  transform: rotate(45deg);
}

body.in-registrace #register-form .company-shopping,
body.in-registrace #register-form .stay-in-touch .form-group,
body.in-registrace #register-form .consents {
  display: flex;
  align-items: flex-start;
  gap: 0;
}

/* Nakupuji na firmu — Shoptet: #company-info.js-hidden ↔ .js-hidden.visible */
body.in-registrace #register-form #company-info.js-hidden {
  display: none !important;
}

body.in-registrace #register-form #company-info.js-hidden.visible,
body.in-registrace #register-form #company-info:not(.js-hidden) {
  display: block !important;
}

body.in-registrace #register-form .company-shopping label,
body.in-registrace #register-form .stay-in-touch label,
body.in-registrace #register-form .consents label {
  font-family: var(--rl-body);
  font-size: 14px;
  line-height: 1.45;
  color: var(--rl-black);
  font-weight: 400;
  margin: 0;
  cursor: pointer;
}

body.in-registrace #register-form .consents a {
  color: var(--rl-black);
  text-decoration: underline;
  text-underline-offset: 2px;
}

/* DIČ tooltip — inside input, right, vertically centered */
body.in-registrace #register-form .form-group-hasTooltip .form-control-wrapper,
body.in-registrace #register-form .form-group:has(> .form-control-wrapper > .question-tooltip) .form-control-wrapper {
  position: relative;
}

body.in-registrace #register-form .form-group-hasTooltip .form-control,
body.in-registrace #register-form .form-control-wrapper:has(> .question-tooltip) .form-control {
  padding-right: 36px !important;
}

body.in-registrace #register-form .question-tooltip.form-group-tooltip {
  position: absolute;
  top: 50%;
  right: 10px;
  transform: translateY(-50%);
  display: inline-flex !important;
  align-items: center;
  justify-content: center;
  width: 15px;
  height: 15px;
  margin: 0;
  border-radius: 50%;
  background: #9c9c9c !important;
  color: #fff !important;
  font-size: 10px;
  font-weight: 600;
  line-height: 1;
  cursor: help;
  z-index: 2;
  pointer-events: auto;
}

/* Phone country flags — same pattern as checkout */
body.in-registrace #register-form .phone-combined-input {
  position: relative;
  display: flex;
  align-items: center;
  gap: 10px;
  border: 1px solid #d8d5d0;
  background: #fff;
  height: 45px;
  padding: 0 15px;
  overflow: visible;
  width: 100%;
  box-sizing: border-box;
}

body.in-registrace #register-form .phone-combined-input>select {
  position: absolute !important;
  left: 0;
  top: 0;
  width: 1px !important;
  height: 1px !important;
  opacity: 0 !important;
  pointer-events: none !important;
  margin: 0 !important;
  padding: 0 !important;
  border: 0 !important;
}

body.in-registrace #register-form .phone-combined-input .country-flags {
  position: relative;
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  align-self: stretch;
  min-width: 33px;
  margin: 0;
  padding: 0;
  border: none !important;
  background: transparent !important;
  cursor: pointer;
  z-index: 4;
}

body.in-registrace #register-form .phone-combined-input .country-flags::after {
  content: '';
  position: absolute;
  right: 0;
  top: 50%;
  width: 7px;
  height: 4px;
  margin-top: -2px;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='7' height='4' viewBox='0 0 7 4'%3E%3Cpath d='M0 0h7L3.5 4 0 0z' fill='%23111'/%3E%3C/svg%3E") center / 7px 4px no-repeat;
  pointer-events: none;
  z-index: 2;
  transition: transform .15s var(--rl-ease-out, ease);
}

body.in-registrace #register-form .phone-combined-input .country-flags.active::after {
  transform: rotate(180deg);
}

body.in-registrace #register-form .phone-combined-input .country-flags-inner {
  display: flex;
  align-items: center;
  width: 100%;
  height: 100%;
  min-height: inherit;
}

body.in-registrace #register-form .phone-combined-input .country-flag {
  display: none !important;
  align-items: center;
  gap: 8px;
  margin: 0;
  padding: 0;
  border: none;
  background: none;
  cursor: pointer;
}

body.in-registrace #register-form .phone-combined-input .country-flags:not(.active) .country-flag.selected {
  display: flex !important;
  position: absolute;
  inset: 0;
  z-index: 1;
  box-sizing: border-box;
  padding-right: 12px;
}

body.in-registrace #register-form .phone-combined-input .country-flag.selected .shp-flag-label {
  display: none !important;
}

body.in-registrace #register-form .phone-combined-input .shp-flag {
  display: block !important;
  width: 20px !important;
  height: 13px !important;
  flex-shrink: 0;
  overflow: hidden;
}

body.in-registrace #register-form .phone-combined-input .country-flags.active .country-flags-inner {
  position: absolute;
  top: calc(100% + 6px);
  left: -15px;
  display: flex;
  flex-direction: column;
  align-items: stretch;
  width: min(300px, 80vw);
  max-height: 260px;
  overflow-x: hidden;
  overflow-y: auto;
  margin: 0;
  padding: 6px 0;
  background: #fff;
  border: 1px solid #d8d5d0;
  box-shadow: 0 10px 28px rgba(17, 17, 17, 0.1);
  z-index: 30;
}

body.in-registrace #register-form .phone-combined-input .country-flags.active .country-flag {
  display: flex !important;
  position: static;
  inset: auto;
  width: 100%;
  padding: 8px 14px;
  box-sizing: border-box;
}

body.in-registrace #register-form .phone-combined-input .country-flags.active .country-flag:hover,
body.in-registrace #register-form .phone-combined-input .country-flags.active .country-flag:focus {
  background: #f7f5f2;
  outline: none;
}

body.in-registrace #register-form .phone-combined-input .country-flags.active .shp-flag-label {
  display: flex !important;
  align-items: center;
  gap: 6px;
  font-family: var(--rl-body);
  font-size: 13px;
  line-height: 1.3;
  color: #555;
}

body.in-registrace #register-form .phone-combined-input .form-control,
body.in-registrace #register-form .phone-combined-input .form-control.small {
  border: none !important;
  box-shadow: none !important;
  height: 100% !important;
  flex: 1 1 auto;
  min-width: 0;
  width: auto !important;
  max-width: none !important;
  padding: 12px 0 !important;
  background: transparent !important;
}

body.in-registrace #register-form .phone-combined-input .form-control:focus {
  border: none !important;
}

/* Captcha (if present) */
body.in-registrace #register-form .captcha,
body.in-registrace #register-form .form-group:has(img[src*="captcha"]) {
  margin-top: 8px;
}

body.in-registrace #register-form .captcha img,
body.in-registrace #register-form img[src*="captcha"] {
  display: block;
  margin-bottom: 10px;
  border: 1px solid #e8e8e6;
}

/* Submit */
body.customer-page #content .submit-wrapper,
body.in-zapomenute-heslo #formForgottenPassword .submit-wrapper,
body.in-registrace #register-form .submit-wrapper {
  margin-top: 24px;
  margin-bottom: 0;
}

body.customer-page #content .btn-primary,
body.in-zapomenute-heslo #formForgottenPassword .btn-primary,
body.in-registrace #register-form .btn-primary {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 180px;
  width: auto;
  padding: 14px 28px;
  background: var(--rl-black);
  color: var(--rl-white);
  font-family: var(--rl-display);
  font-size: 14px;
  font-weight: 600;
  letter-spacing: .04em;
  text-align: center;
  border: none;
  border-radius: var(--rl-radius);
  cursor: pointer;
  transition: background .2s;
}

body.in-zapomenute-heslo #formForgottenPassword .btn-primary {
  width: 100%;
}

body.customer-page #content .btn-primary:hover,
body.in-zapomenute-heslo #formForgottenPassword .btn-primary:hover,
body.in-registrace #register-form .btn-primary:hover {
  background: #333;
}

@media (max-width: 768px) {

  body.customer-page main#content.content,
  body.in-zapomenute-heslo main#content.content,
  body.in-registrace main#content.content,
  body.customer-page main#content.content.narrow,
  body.in-zapomenute-heslo main#content.content.narrow,
  body.in-registrace main#content.content.narrow {
    margin-bottom: 40px !important;
  }

  body.customer-page #content h1,
  body.in-zapomenute-heslo #content h1,
  body.in-registrace #content h1 {
    font-size: 26px;
  }

  body.in-registrace #register-form .btn-primary,
  body.in-zapomenute-heslo #formForgottenPassword .btn-primary {
    width: 100%;
  }
}

/* ═══════════════════════════════════════════
   404 / Stránka nenalezena
   Same language as empty cart: hero + help panel
   ═══════════════════════════════════════════ */

body.rl-404 #content-wrapper.content-wrapper,
body.rl-404 #content-wrapper,
body.id-404 #content-wrapper.content-wrapper,
body.in-stranka-nenalezena #content-wrapper {
  max-width: var(--rl-max) !important;
  width: 100% !important;
  padding-left: var(--rl-gap) !important;
  padding-right: var(--rl-gap) !important;
  padding-top: 48px !important;
  padding-bottom: 72px !important;
  margin-left: auto !important;
  margin-right: auto !important;
}

body.rl-404 .content-wrapper-in {
  display: block !important;
  float: none !important;
  width: 100% !important;
}

body.rl-404 aside.sidebar {
  display: none !important;
}

body.rl-404 main#content.content,
body.rl-404 main#content.content.narrow,
body.id-404 main#content.content,
body.in-stranka-nenalezena main#content.content {
  float: none !important;
  width: 100% !important;
  max-width: none !important;
  padding: 0 !important;
  margin: 0 !important;
}

body.rl-404 .breadcrumbs-wrapper {
  display: none !important;
}

body.rl-404 .pageArticleDetail {
  max-width: 960px;
  margin: 0 auto;
}

body.rl-404 .rl-404-page {
  display: grid;
  grid-template-columns: minmax(0, 1.4fr) minmax(260px, 360px);
  gap: 48px 64px;
  align-items: start;
}

body.rl-404 .rl-404-hero {
  display: grid;
  grid-template-columns: 96px minmax(0, 1fr);
  gap: 28px;
  align-items: start;
}

body.rl-404 .rl-404-hero__visual {
  width: 96px;
  height: 96px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: #f4f4f2;
}

body.rl-404 .rl-404-hero__code {
  font-family: var(--rl-display);
  font-weight: 800;
  font-size: 28px;
  letter-spacing: .04em;
  color: var(--rl-black);
  line-height: 1;
}

body.rl-404 .rl-404-hero__title {
  margin: 0 0 12px !important;
  padding: 0 !important;
  border: none !important;
  font-family: var(--rl-display);
  font-weight: 700;
  font-size: 28px;
  line-height: 1.25;
  color: var(--rl-black);
}

body.rl-404 .rl-404-hero__text {
  margin: 0 0 28px;
  max-width: 38em;
  font-family: var(--rl-body);
  font-size: 15px;
  line-height: 1.55;
  color: #555;
}

body.rl-404 .rl-404-hero__cta {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  min-height: 48px;
  padding: 12px 28px;
  background: #cc1f1f !important;
  color: #fff !important;
  font-family: var(--rl-display);
  font-weight: 600;
  font-size: 13px;
  letter-spacing: .08em;
  text-transform: uppercase;
  text-decoration: none !important;
  border: none;
  border-radius: 0;
}

body.rl-404 .rl-404-hero__cta::before {
  content: '←';
  font-size: 14px;
  letter-spacing: 0;
}

body.rl-404 .rl-404-hero__cta:hover {
  filter: brightness(0.92);
  color: #fff !important;
}

body.rl-404 .rl-404-help {
  background: #f7f5f2;
  padding: 28px 28px 24px;
}

body.rl-404 .rl-404-help__title {
  margin: 0 0 10px;
  font-family: var(--rl-display);
  font-weight: 700;
  font-size: 16px;
  line-height: 1.3;
  color: var(--rl-black);
}

body.rl-404 .rl-404-help__text {
  margin: 0 0 20px;
  font-family: var(--rl-body);
  font-size: 14px;
  line-height: 1.5;
  color: #555;
}

body.rl-404 .rl-404-help__list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 14px;
}

body.rl-404 .rl-404-help__item {
  display: flex;
  flex-direction: column;
  gap: 2px;
  padding-left: 28px;
  position: relative;
}

body.rl-404 .rl-404-help__item::before {
  content: '';
  position: absolute;
  left: 0;
  top: 2px;
  width: 18px;
  height: 18px;
  background: center / contain no-repeat;
}

body.rl-404 .rl-404-help__item--phone::before {
  background-image: url('../images/phone.svg');
}

body.rl-404 .rl-404-help__item--mail::before {
  background-image: url('../images/envelope.svg');
}

body.rl-404 .rl-404-help__item strong {
  font-family: var(--rl-body);
  font-size: 12px;
  font-weight: 500;
  color: #777;
}

body.rl-404 .rl-404-help__item a {
  font-family: var(--rl-display);
  font-size: 15px;
  font-weight: 600;
  color: var(--rl-black);
  text-decoration: none;
}

body.rl-404 .rl-404-help__item a:hover {
  text-decoration: underline;
}

@media (max-width: 900px) {
  body.rl-404 .rl-404-page {
    grid-template-columns: 1fr;
    gap: 36px;
  }
}

@media (max-width: 768px) {
  body.rl-404 #content-wrapper.content-wrapper,
  body.rl-404 #content-wrapper,
  body.id-404 #content-wrapper,
  body.in-stranka-nenalezena #content-wrapper {
    padding-top: 32px !important;
    padding-bottom: 48px !important;
  }

  body.rl-404 .rl-404-hero {
    grid-template-columns: 1fr;
    gap: 20px;
  }

  body.rl-404 .rl-404-hero__visual {
    width: 72px;
    height: 72px;
  }

  body.rl-404 .rl-404-hero__code {
    font-size: 22px;
  }

  body.rl-404 .rl-404-hero__title {
    font-size: 22px;
  }

  body.rl-404 .rl-404-hero__cta {
    width: 100%;
  }

  body.rl-404 .rl-404-help {
    padding: 22px 20px;
  }
}

/* ═══════════════════════════════════════════
   Oblíbené page (dkLab / in-oblibene)
   Listing language: hero + product grid + hover ATC
   ═══════════════════════════════════════════ */

body.rl-fav-page #content-wrapper.content-wrapper,
body.rl-fav-page #content-wrapper,
body.in-oblibene #content-wrapper.content-wrapper,
body.inDklabFavourites.type-page #content-wrapper {
  max-width: var(--rl-max) !important;
  width: 100% !important;
  padding-left: var(--rl-gap) !important;
  padding-right: var(--rl-gap) !important;
  padding-bottom: 72px !important;
  margin-left: auto !important;
  margin-right: auto !important;
}

body.rl-fav-page .content-wrapper-in,
body.in-oblibene .content-wrapper-in {
  display: block !important;
  float: none !important;
  width: 100% !important;
}

body.rl-fav-page aside.sidebar,
body.in-oblibene aside.sidebar,
body.inDklabFavourites.type-page aside.sidebar {
  display: none !important;
}

body.rl-fav-page main#content.content,
body.rl-fav-page main#content.content.narrow,
body.in-oblibene main#content.content,
body.in-oblibene main#content.content.narrow,
body.inDklabFavourites.type-page main#content.content,
body.inDklabFavourites.type-page main#content.content.narrow {
  float: none !important;
  width: 100% !important;
  max-width: none !important;
  padding: 0 !important;
  margin: 0 !important;
}

body.rl-fav-page .breadcrumbs-wrapper,
body.in-oblibene .breadcrumbs-wrapper {
  display: none !important;
}

/* H1 moved into hero — hide empty article shell */
body.rl-fav-page .pageArticleDetail {
  display: none !important;
}

.rl-category-hero.rl-fav-hero {
  background-image: none;
  background-color: #f0e5dc;
}

.rl-category-hero .rl-fav-title,
.rl-fav-hero .rl-fav-title {
  margin: 8px 0 0 !important;
  padding: 0 !important;
  border: none !important;
  font-family: var(--rl-display);
  font-weight: 700;
  font-size: clamp(28px, 2.4vw, 40px);
  line-height: 1.15;
  color: var(--rl-black);
}

body.rl-fav-page #dkLabFavPageWrapper {
  width: 100%;
  max-width: none;
  margin: 0;
  padding: 28px 0 0;
}

/* List tabs (when multiple lists) */
body.rl-fav-page #dkLabFavouritePageMenuWrapper {
  margin: 0 0 20px;
  padding: 0;
  border-bottom: 2px solid #e5e5e3;
}

body.rl-fav-page #dkLabFavouritePageMenuWrapper.dkLabFavouritePageMenuHide {
  display: none !important;
}

body.rl-fav-page #dkLabFavouritePageMenu {
  display: flex;
  flex-wrap: wrap;
  gap: 0;
  list-style: none;
  margin: 0 !important;
  padding: 0 !important;
}

body.rl-fav-page #dkLabFavouritePageMenu > li {
  margin: 0 !important;
  padding: 12px 20px 14px !important;
  border: none !important;
  border-bottom: 2px solid transparent !important;
  margin-bottom: -2px !important;
  font-family: var(--rl-display);
  font-weight: 600;
  font-size: 13px;
  letter-spacing: .04em;
  color: #777;
  cursor: pointer;
  transition: color .15s, border-color .15s;
}

body.rl-fav-page #dkLabFavouritePageMenu > li.active,
body.rl-fav-page #dkLabFavouritePageMenu > li:hover {
  color: var(--rl-black);
  border-bottom-color: var(--rl-black) !important;
}

body.rl-fav-page #dkLabFavouritePageMenu .dkLabFavPageTabCounter {
  font-weight: 500;
  color: #999;
}

body.rl-fav-page .dkLabFavPageActionButtons {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: 8px;
  margin: 0 0 24px !important;
  text-align: right;
}

body.rl-fav-page .dkLabFavPageActionButtons .btn,
body.rl-fav-page .dkLabFavPageActionButtons .btn-secondary {
  margin: 0 !important;
  padding: 10px 14px !important;
  height: auto !important;
  border: 1px solid #e0e0de !important;
  border-radius: 0 !important;
  background: #fff !important;
  color: var(--rl-black) !important;
  font-family: var(--rl-display) !important;
  font-weight: 600 !important;
  font-size: 11.5px !important;
  letter-spacing: .06em !important;
  text-transform: uppercase !important;
  line-height: 1.2 !important;
}

body.rl-fav-page .dkLabFavPageActionButtons .btn:hover {
  border-color: var(--rl-black) !important;
}

body.rl-fav-page .dkLabFavPageActionButtons svg {
  display: none !important;
}

/* Product grid — listing cadence */
body.rl-fav-page #dkLabFavPageProductsContainer .products.products-block,
body.rl-fav-page #dkLabFavPageProductsContainer .products-block {
  display: grid !important;
  grid-template-columns: repeat(5, minmax(0, 1fr)) !important;
  gap: clamp(14px, 1.53vw, 30px) !important;
  margin: 0 !important;
  padding: 0 !important;
  width: 100% !important;
}

body.rl-fav-page #dkLabFavPageProductsContainer .product {
  width: 100% !important;
  float: none !important;
  margin: 0 !important;
  padding: 0 !important;
}

body.rl-fav-page #dkLabFavPageProductsContainer .p {
  position: relative;
  display: flex;
  flex-direction: column;
  height: 100%;
  background: transparent;
}

body.rl-fav-page #dkLabFavPageProductsContainer .rl-img-wrap {
  position: relative;
  width: 100%;
  overflow: hidden;
}

body.rl-fav-page #dkLabFavPageProductsContainer .rl-img-wrap > a.image {
  display: block;
  aspect-ratio: 358 / 420;
  border-radius: 0;
}

body.rl-fav-page #dkLabFavPageProductsContainer .rl-img-wrap a.image img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  padding: 12px;
  transform: none !important;
}

/* Remove from list — same chip language as listing fav */
body.rl-fav-page #dkLabFavPageProductsContainer .dkLabFavDeleteBtn {
  position: absolute !important;
  top: 8px !important;
  right: 8px !important;
  left: auto !important;
  z-index: 7 !important;
  width: 32px !important;
  height: 32px !important;
  margin: 0 !important;
  padding: 0 !important;
  background: #fff !important;
  border: 1px solid #e0e0de !important;
  border-radius: 10px !important;
  box-sizing: border-box !important;
  cursor: pointer;
  transition: border-color .15s ease, box-shadow .15s ease;
}

body.rl-fav-page #dkLabFavPageProductsContainer .dkLabFavDeleteBtn:hover {
  border-color: #c8c8c6 !important;
  box-shadow: 0 1px 6px rgba(0, 0, 0, .06);
}

body.rl-fav-page #dkLabFavPageProductsContainer .dkLabFavDeleteBtn::before,
body.rl-fav-page #dkLabFavPageProductsContainer .dkLabFavDeleteBtn::after {
  display: none !important;
  content: none !important;
}

body.rl-fav-page #dkLabFavPageProductsContainer .dkLabFavDeleteBtn > span {
  position: absolute !important;
  width: 1px !important;
  height: 1px !important;
  padding: 0 !important;
  margin: -1px !important;
  overflow: hidden !important;
  clip: rect(0, 0, 0, 0) !important;
  white-space: nowrap !important;
  border: 0 !important;
  display: block !important;
}

body.rl-fav-page #dkLabFavPageProductsContainer .dkLabFavDeleteBtn {
  background: #fff url('../images/icon-filter-close.svg') center / 12px 12px no-repeat !important;
}

/* Hover ATC — reuse listing overlay inside .rl-img-wrap */
body.rl-fav-page #dkLabFavPageProductsContainer .rl-img-wrap .p-tools {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 6;
  margin: 0;
  padding: 0;
  opacity: 0;
  transform: translateY(6px);
  transition: opacity .2s ease, transform .2s ease;
  pointer-events: none;
}

body.rl-fav-page #dkLabFavPageProductsContainer .rl-img-wrap:hover .p-tools,
body.rl-fav-page #dkLabFavPageProductsContainer .p:hover .rl-img-wrap .p-tools {
  opacity: 1;
  transform: translateY(0);
  pointer-events: auto;
}

body.rl-fav-page #dkLabFavPageProductsContainer .rl-img-wrap .btn-cart {
  display: block !important;
  width: 100% !important;
  margin: 0 !important;
  padding: 13px 16px !important;
  border: none !important;
  border-radius: 0 !important;
  background: rgba(17, 17, 17, .88) !important;
  color: #fff !important;
  font-family: var(--rl-display) !important;
  font-weight: 600 !important;
  font-size: 12px !important;
  letter-spacing: .08em !important;
  text-transform: uppercase !important;
  line-height: 1.2 !important;
}

body.rl-fav-page #dkLabFavPageProductsContainer .rl-img-wrap .btn-cart:hover {
  background: #111 !important;
  color: #fff !important;
}

body.rl-fav-page #dkLabFavPageProductsContainer .p-bottom .p-tools {
  display: none !important;
}

#dkLabFavPageProductsContainer .products-block .prices {gap: 0;}

body.rl-fav-page #dkLabFavPageProductsContainer .p-in {
  padding: 12px !important;
}

body.rl-fav-page #dkLabFavPageProductsContainer .p-in-in a.name,
body.rl-fav-page #dkLabFavPageProductsContainer .p-in-in a.name span {
  font-family: var(--rl-display) !important;
  font-size: 13px !important;
  font-weight: 500 !important;
  line-height: 1.3 !important;
  color: var(--rl-black) !important;
  text-decoration: none !important;
}

body.rl-fav-page #dkLabFavPageProductsContainer .price-final strong {
  font-family: var(--rl-display) !important;
  font-size: 15px !important;
  font-weight: 700 !important;
  color: var(--rl-black) !important;
}

body.rl-fav-page #dkLabFavPageProductsContainer .ratings-wrapper {
  display: none !important;
}

/* Empty list */
body.rl-fav-page .dkLabFavoutitesPageEmptyList {
  max-width: 36em;
  margin: 40px auto !important;
  padding: 48px 24px;
  text-align: center;
}

body.rl-fav-page .dkLabFavoutitesPageEmptyList,
body.rl-fav-page .dkLabFavoutitesPageEmptyList p,
body.rl-fav-page .dkLabFavoutitesPageEmptyList h2 {
  font-family: var(--rl-body);
  font-size: 15px;
  line-height: 1.55;
  color: #555;
}

body.rl-fav-page .dkLabFavoutitesPageEmptyList h2 {
  font-family: var(--rl-display);
  font-weight: 700;
  font-size: 22px;
  color: var(--rl-black);
  margin: 0 0 12px;
}

body.rl-fav-page .dkLabFavouritePageNotAllowed h2 {
  font-family: var(--rl-display);
  font-weight: 700;
  color: var(--rl-black) !important;
}

body.rl-fav-page .dkLabFavouritePageNotAllowed h2:before {
  display: none !important;
}

@media (max-width: 1200px) {
  body.rl-fav-page #dkLabFavPageProductsContainer .products.products-block,
  body.rl-fav-page #dkLabFavPageProductsContainer .products-block {
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
  }
}

@media (max-width: 992px) {
  body.rl-fav-page #dkLabFavPageProductsContainer .rl-img-wrap .p-tools {
    opacity: 1 !important;
    transform: none !important;
    pointer-events: auto !important;
    left: auto !important;
    right: 12px !important;
    bottom: 12px !important;
    width: auto !important;
  }

  body.rl-fav-page #dkLabFavPageProductsContainer .rl-img-wrap .btn-cart {
   /* width: 40px !important;
    height: 40px !important;
    min-width: 40px !important;
    padding: 0 !important;
    font-size: 0 !important;
    line-height: 0 !important;
    letter-spacing: 0 !important;
    color: transparent !important;
    border-radius: var(--rl-radius) !important;
    background: rgba(17, 17, 17, .82) !important;
    display: inline-flex !important;
    align-items: center;
    justify-content: center;
    position: relative;
    overflow: hidden;*/
    display: none !important;
  }

  body.rl-fav-page #dkLabFavPageProductsContainer .rl-img-wrap .btn-cart > * {
   /* position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0; */
    display: none !important;
  }

  body.rl-fav-page #dkLabFavPageProductsContainer .rl-img-wrap .btn-cart::before {
   /* content: '';
    display: block;
    width: 18px;
    height: 18px;
    background: url('../images/icon-cart.svg') center / contain no-repeat;
    filter: brightness(0) invert(1); */
    display: none !important;
  }

  body.rl-fav-page #dkLabFavPageProductsContainer .products.products-block,
  body.rl-fav-page #dkLabFavPageProductsContainer .products-block {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 12px !important;
  }
}

@media (max-width: 768px) {
  body.rl-fav-page #content-wrapper,
  body.in-oblibene #content-wrapper {
    padding-bottom: 48px !important;
  }

  body.rl-fav-page .dkLabFavPageActionButtons {
    justify-content: flex-start;
  }

  body.rl-fav-page .dkLabFavPageActionButtons .btn span {
    display: inline !important;
  }
}

/* ═══════════════════════════════════════════
   Blog listing (type-posts-listing / rl-blog-listing)
   Inspired by editorial grids (featured + 2-col), Rolser tokens
   ═══════════════════════════════════════════ */

body.type-posts-listing #content-wrapper.content-wrapper,
body.type-posts-listing #content-wrapper,
body.rl-blog-listing #content-wrapper.content-wrapper,
body.rl-blog-listing #content-wrapper {
  max-width: var(--rl-max) !important;
  width: 100% !important;
  padding-left: var(--rl-gap) !important;
  padding-right: var(--rl-gap) !important;
  padding-top: clamp(28px, 3vw, 48px) !important;
  padding-bottom: 72px !important;
  margin-left: auto !important;
  margin-right: auto !important;
}

body.type-posts-listing .content-wrapper-in,
body.rl-blog-listing .content-wrapper-in {
  display: block !important;
  float: none !important;
  width: 100% !important;
}

body.type-posts-listing aside.sidebar,
body.rl-blog-listing aside.sidebar {
  display: none !important;
}

body.type-posts-listing main#content.content,
body.type-posts-listing main#content.content.narrow,
body.rl-blog-listing main#content.content,
body.rl-blog-listing main#content.content.narrow {
  float: none !important;
  width: 100% !important;
  max-width: none !important;
  padding: 0 !important;
  margin: 0 !important;
}

/* Hero — same language as category / Oblíbené */
.rl-blog-hero {
  min-height: unset;
  background-color: #f0e5dc;
  background-image: none;
  margin-bottom: 0;
}

.rl-blog-hero .rl-blog-hero__title,
.rl-blog-hero h1 {
  font-family: var(--rl-display);
  font-weight: 800;
  font-size: clamp(32px, 3.4vw, 54.4px);
  line-height: 1.02;
  letter-spacing: -.025em;
  color: var(--rl-black);
  margin: 14px 0 0;
  padding: 0;
}

body.type-posts-listing .content-inner,
body.rl-blog-listing .content-inner {
  max-width: none;
  margin: 0;
  padding: 0;
}

body.type-posts-listing .sectionDescription,
body.rl-blog-listing .sectionDescription {
  display: none !important;
}

body.type-posts-listing #articlesListHeading,
body.rl-blog-listing #articlesListHeading,
body.type-posts-listing .listingControls > h3,
body.rl-blog-listing .listingControls > h3,
body.type-posts-listing #listingControlsHeading,
body.rl-blog-listing #listingControlsHeading {
  position: absolute !important;
  width: 1px !important;
  height: 1px !important;
  padding: 0 !important;
  margin: -1px !important;
  overflow: hidden !important;
  clip: rect(0, 0, 0, 0) !important;
  border: 0 !important;
}

/* Article grid */
body.type-posts-listing #newsWrapper.news-wrapper,
body.rl-blog-listing #newsWrapper.news-wrapper,
body.type-posts-listing .news-wrapper,
body.rl-blog-listing .news-wrapper {
  display: grid !important;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: clamp(28px, 3vw, 48px) clamp(20px, 2vw, 36px);
  width: 100% !important;
  max-width: none !important;
  margin: 0 !important;
  padding: 0 !important;
  float: none !important;
}

body.type-posts-listing .news-item,
body.rl-blog-listing .news-item,
body.type-posts-listing .rl-blog-card,
body.rl-blog-listing .rl-blog-card {
  display: flex !important;
  flex-direction: column;
  width: 100% !important;
  max-width: none !important;
  float: none !important;
  padding: 0 !important;
  margin: 0 !important;
  background: transparent;
}

/* Featured lead article — full bleed row (desktop) */
body.type-posts-listing .news-item.rl-blog-card--featured,
body.rl-blog-listing .news-item.rl-blog-card--featured {
  grid-column: 1 / -1;
  display: grid !important;
  grid-template-columns: minmax(0, 0.95fr) minmax(0, 1.05fr);
  gap: clamp(20px, 2.5vw, 40px);
  align-items: center;
  padding-bottom: clamp(20px, 2vw, 32px) !important;
  border-bottom: 1px solid var(--rl-border);
  margin-bottom: clamp(4px, 0.5vw, 8px) !important;
}

body.type-posts-listing .news-item .image,
body.rl-blog-listing .news-item .image {
  width: 100% !important;
  float: none !important;
  margin: 0 !important;
  overflow: hidden;
  border-radius: var(--rl-radius);
  /* Same portrait frame as homepage blog / product cards */
  aspect-ratio: var(--rl-product-img-ratio);
  background: var(--rl-gray-lt, #f3f3f3);
}

body.type-posts-listing .news-item.rl-blog-card--featured .image,
body.rl-blog-listing .news-item.rl-blog-card--featured .image {
  aspect-ratio: var(--rl-product-img-ratio);
}

body.type-posts-listing .news-item .image a,
body.rl-blog-listing .news-item .image a {
  display: block;
  width: 100%;
  height: 100%;
}

body.type-posts-listing .news-item .image img,
body.rl-blog-listing .news-item .image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  display: block;
  transition: transform .55s var(--rl-ease-out);
}

body.type-posts-listing .news-item:hover .image img,
body.rl-blog-listing .news-item:hover .image img {
  transform: scale(1.04);
}

body.type-posts-listing .news-item .text,
body.rl-blog-listing .news-item .text {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 0;
  padding: clamp(14px, 1.4vw, 22px) 0 0;
  float: none !important;
  width: 100% !important;
}

body.type-posts-listing .news-item.rl-blog-card--featured .text,
body.rl-blog-listing .news-item.rl-blog-card--featured .text {
  padding: 0;
}

body.type-posts-listing .news-item .text a.title,
body.rl-blog-listing .news-item .text a.title {
  font-family: var(--rl-display);
  font-weight: 700;
  font-size: clamp(18px, 1.35vw, 26px);
  line-height: 1.22;
  letter-spacing: -.02em;
  color: var(--rl-black);
  text-decoration: none;
  display: block;
  margin: 0 0 10px;
  transition: color .2s ease;
}

body.type-posts-listing .news-item.rl-blog-card--featured .text a.title,
body.rl-blog-listing .news-item.rl-blog-card--featured .text a.title {
  font-weight: 800;
  font-size: clamp(24px, 2.2vw, 36px);
  line-height: 1.12;
  margin-bottom: 14px;
}

body.type-posts-listing .news-item .text a.title:hover,
body.rl-blog-listing .news-item .text a.title:hover {
  color: var(--rl-red);
}

body.type-posts-listing .news-item .description,
body.rl-blog-listing .news-item .description {
  font-family: var(--rl-body);
  font-size: 15px;
  line-height: 1.55;
  color: var(--rl-gray);
  margin: 0;
}

body.type-posts-listing .news-item .description p,
body.rl-blog-listing .news-item .description p {
  margin: 0;
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

body.type-posts-listing .news-item.rl-blog-card--featured .description p,
body.rl-blog-listing .news-item.rl-blog-card--featured .description p {
  -webkit-line-clamp: 4;
  font-size: 16px;
  line-height: 1.6;
}

/* Same CTA language as homepage blog */
body.type-posts-listing .news-item .read-article,
body.rl-blog-listing .news-item .read-article {
  margin-top: 18px;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  color: var(--rl-black);
  font-family: var(--rl-display);
  font-weight: 600;
  font-size: clamp(12px, .67vw, 14px);
  text-transform: uppercase;
  letter-spacing: 0.75px;
  text-decoration: none;
  border-bottom: 1px solid var(--rl-black);
  transition: gap .2s var(--rl-ease-out), color .2s ease;
}

body.type-posts-listing .news-item .read-article:hover,
body.rl-blog-listing .news-item .read-article:hover {
  color: var(--rl-red);
}

body.type-posts-listing .news-item .read-article::after,
body.rl-blog-listing .news-item .read-article::after {
  content: '→';
  color: var(--rl-red);
  font-style: normal;
  transition: transform .2s var(--rl-ease-out);
}

body.type-posts-listing .news-item:hover .read-article,
body.rl-blog-listing .news-item:hover .read-article {
  gap: 10px;
}

body.type-posts-listing .news-item:hover .read-article::after,
body.rl-blog-listing .news-item:hover .read-article::after {
  transform: translateX(4px);
}

body.type-posts-listing .listingControls,
body.rl-blog-listing .listingControls {
  display: flex;
  align-items: center;
  justify-content: flex-start;
  gap: 16px;
  padding: 36px 0 0;
  margin: 28px 0 0;
  border-top: 1px solid var(--rl-border);
}

body.type-posts-listing .listingControls .itemsTotal,
body.rl-blog-listing .listingControls .itemsTotal {
  font-family: var(--rl-body);
  font-size: 13px;
  color: var(--rl-gray);
}

body.type-posts-listing .listingControls .itemsTotal strong,
body.rl-blog-listing .listingControls .itemsTotal strong {
  font-family: var(--rl-display);
  font-weight: 700;
  color: var(--rl-black);
}

@media (max-width: 992px) {
  /* Unify all articles — no featured split layout */
  body.type-posts-listing .news-item.rl-blog-card--featured,
  body.rl-blog-listing .news-item.rl-blog-card--featured {
    grid-column: auto;
    display: flex !important;
    flex-direction: column;
    grid-template-columns: none;
    gap: 0;
    align-items: stretch;
    border-bottom: 1px solid var(--rl-border);
    padding-bottom: 28px !important;
    margin-bottom: 0 !important;
  }

  body.type-posts-listing .news-item.rl-blog-card--featured .text,
  body.rl-blog-listing .news-item.rl-blog-card--featured .text {
    padding: clamp(14px, 1.4vw, 22px) 0 0;
  }

  body.type-posts-listing .news-item.rl-blog-card--featured .text a.title,
  body.rl-blog-listing .news-item.rl-blog-card--featured .text a.title {
    font-weight: 700;
    font-size: clamp(18px, 1.35vw, 26px);
    line-height: 1.22;
    margin-bottom: 10px;
  }

  body.type-posts-listing .news-item.rl-blog-card--featured .description p,
  body.rl-blog-listing .news-item.rl-blog-card--featured .description p {
    -webkit-line-clamp: 3;
  }
}

@media (max-width: 768px) {
  body.type-posts-listing #content-wrapper,
  body.rl-blog-listing #content-wrapper {
    padding-bottom: 48px !important;
  }

  body.type-posts-listing #newsWrapper.news-wrapper,
  body.rl-blog-listing #newsWrapper.news-wrapper,
  body.type-posts-listing .news-wrapper,
  body.rl-blog-listing .news-wrapper {
    grid-template-columns: 1fr !important;
    gap: 0 !important;
  }

  /* One shared card rhythm — separators between articles */
  body.type-posts-listing .news-item,
  body.rl-blog-listing .news-item,
  body.type-posts-listing .rl-blog-card,
  body.rl-blog-listing .rl-blog-card,
  body.type-posts-listing .news-item.rl-blog-card--featured,
  body.rl-blog-listing .news-item.rl-blog-card--featured {
    padding: 28px 0 !important;
    border-bottom: 1px solid var(--rl-border);
    margin: 0 !important;
  }

  body.type-posts-listing .news-item:first-child,
  body.rl-blog-listing .news-item:first-child {
    padding-top: 8px !important;
  }

  body.type-posts-listing .news-item:last-child,
  body.rl-blog-listing .news-item:last-child {
    border-bottom: 0;
    padding-bottom: 8px !important;
  }

  body.type-posts-listing .news-item .image,
  body.rl-blog-listing .news-item .image,
  body.type-posts-listing .news-item.rl-blog-card--featured .image,
  body.rl-blog-listing .news-item.rl-blog-card--featured .image {
    aspect-ratio: var(--rl-product-img-ratio);
  }

  body.type-posts-listing .news-item .text a.title,
  body.rl-blog-listing .news-item .text a.title,
  body.type-posts-listing .news-item.rl-blog-card--featured .text a.title,
  body.rl-blog-listing .news-item.rl-blog-card--featured .text a.title {
    font-size: 18px;
    font-weight: 700;
    line-height: 1.25;
  }
}

/* ═══════════════════════════════════════════
   Blog article detail (.news-item-detail)
   body.type-post / .in-blog
   Reading column + Rolser typography / tables
   ═══════════════════════════════════════════ */

body.rl-blog-post #content-wrapper.content-wrapper,
body.rl-blog-post #content-wrapper,
body.type-post #content-wrapper.content-wrapper,
body.in-blog #content-wrapper {
  max-width: var(--rl-max) !important;
  width: 100% !important;
  padding-left: var(--rl-gap) !important;
  padding-right: var(--rl-gap) !important;
  padding-bottom: 72px !important;
  margin-left: auto !important;
  margin-right: auto !important;
}

body.rl-blog-post .content-wrapper-in,
body.type-post .content-wrapper-in,
body.in-blog .content-wrapper-in {
  display: block !important;
  float: none !important;
  width: 100% !important;
}

body.rl-blog-post aside.sidebar,
body.type-post aside.sidebar,
body.in-blog aside.sidebar {
  display: none !important;
}

body.rl-blog-post main#content.content,
body.rl-blog-post main#content.content.narrow,
body.type-post main#content.content,
body.type-post main#content.content.narrow,
body.in-blog main#content.content,
body.in-blog main#content.content.narrow {
  float: none !important;
  width: 100% !important;
  max-width: none !important;
  padding: 0 !important;
  margin: 0 !important;
}

/* Breadcrumbs — sit in article column (moved by JS into .content-inner) */
body.rl-blog-post .breadcrumbs-wrapper,
body.type-post .breadcrumbs-wrapper,
body.in-blog .breadcrumbs-wrapper {
  max-width: 760px !important;
  width: 100% !important;
  margin-left: auto !important;
  margin-right: auto !important;
  padding-top: clamp(12px, 1.5vw, 20px);
  padding-bottom: clamp(8px, 1vw, 14px);
  padding-left: 0 !important;
  padding-right: 0 !important;
  box-sizing: border-box;
}

body.rl-blog-post .content-inner > .breadcrumbs,
body.type-post .content-inner > .breadcrumbs,
body.in-blog .content-inner > .breadcrumbs {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  font-family: var(--rl-body);
  font-size: 12px;
  line-height: 18px;
  color: rgba(17, 17, 17, .8);
  padding: 0;
  margin: 0 0 18px;
}

body.rl-blog-post .breadcrumbs,
body.type-post .breadcrumbs,
body.in-blog .breadcrumbs {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  font-family: var(--rl-body);
  font-size: 12px;
  line-height: 18px;
  color: rgba(17, 17, 17, .8);
  padding: 0;
  margin: 0;
}

body.rl-blog-post .breadcrumbs a,
body.type-post .breadcrumbs a,
body.in-blog .breadcrumbs a,
body.rl-blog-post .breadcrumbs .navigation-home-icon,
body.type-post .breadcrumbs .navigation-home-icon,
body.in-blog .breadcrumbs .navigation-home-icon {
  color: rgba(17, 17, 17, .8);
  text-decoration: none;
}

body.rl-blog-post .navigation-home-icon .sr-only,
body.type-post .navigation-home-icon .sr-only,
body.in-blog .navigation-home-icon .sr-only {
  position: static !important;
  width: auto !important;
  height: auto !important;
  clip: auto !important;
  clip-path: none !important;
  overflow: visible !important;
  white-space: nowrap !important;
}

body.rl-blog-post .navigation-home-icon,
body.type-post .navigation-home-icon,
body.in-blog .navigation-home-icon {
  background: none !important;
  width: auto !important;
  height: auto !important;
  text-indent: 0 !important;
  font-size: 12px;
  line-height: 18px;
}

body.rl-blog-post .breadcrumbs [data-testid="breadcrumbsLastLevel"] [itemprop="name"],
body.rl-blog-post .breadcrumbs [data-testid="breadcrumbsLastLevel"] span[data-title],
body.type-post .breadcrumbs [data-testid="breadcrumbsLastLevel"] [itemprop="name"],
body.in-blog .breadcrumbs [data-testid="breadcrumbsLastLevel"] [itemprop="name"] {
  color: var(--rl-red) !important;
  font-weight: 500;
}

/* Article column */
body.rl-blog-post .content-inner,
body.type-post .content-inner {
  max-width: 760px;
  margin: 0 auto;
  padding: clamp(12px, 1.5vw, 20px) 0 0;
}

body.rl-blog-post .news-item-detail,
body.type-post .news-item-detail {
  width: 100%;
}

body.rl-blog-post .news-item-detail > h1,
body.type-post .news-item-detail > h1 {
  margin: 0 0 28px !important;
  padding: 0 !important;
  border: none !important;
  font-family: var(--rl-display);
  font-weight: 700;
  font-size: clamp(28px, 3.2vw, 40px);
  line-height: 1.2;
  letter-spacing: -0.01em;
  color: var(--rl-black);
}

/* Body copy */
body.rl-blog-post .news-item-detail .text,
body.type-post .news-item-detail .text {
  font-family: var(--rl-body);
  font-size: 16px;
  line-height: 1.65;
  color: #333;
}

body.rl-blog-post .news-item-detail .text > p:first-of-type,
body.type-post .news-item-detail .text > p:first-of-type {
  font-size: 17px;
  line-height: 1.6;
  color: #222;
  margin-bottom: 28px;
}

body.rl-blog-post .news-item-detail .text p,
body.type-post .news-item-detail .text p {
  margin: 0 0 1.15em;
}

body.rl-blog-post .news-item-detail .text h2,
body.type-post .news-item-detail .text h2,
body.rl-blog-post .news-item-detail .text .rl-blog-subhead,
body.type-post .news-item-detail .text .rl-blog-subhead {
  display: block;
  margin: 2em 0 .75em !important;
  font-family: var(--rl-display) !important;
  font-weight: 700 !important;
  font-size: clamp(20px, 1.6vw, 24px) !important;
  line-height: 1.3 !important;
  color: var(--rl-black) !important;
  letter-spacing: 0;
}

body.rl-blog-post .news-item-detail .text h3,
body.type-post .news-item-detail .text h3 {
  margin: 1.6em 0 .6em;
  font-family: var(--rl-display);
  font-weight: 700;
  font-size: 18px;
  line-height: 1.35;
  color: var(--rl-black);
}

body.rl-blog-post .news-item-detail .text strong,
body.type-post .news-item-detail .text strong {
  font-weight: 700;
  color: var(--rl-black);
}

body.rl-blog-post .news-item-detail .text a,
body.type-post .news-item-detail .text a {
  color: var(--rl-black);
  text-decoration: underline;
  text-underline-offset: 2px;
  font-weight: 600;
}

body.rl-blog-post .news-item-detail .text a:hover,
body.type-post .news-item-detail .text a:hover {
  color: var(--rl-red);
}

body.rl-blog-post .news-item-detail .text img,
body.type-post .news-item-detail .text img {
  display: block;
  max-width: 100%;
  height: auto;
  margin: 28px auto;
}

body.rl-blog-post .news-item-detail .text ul,
body.rl-blog-post .news-item-detail .text ol,
body.type-post .news-item-detail .text ul,
body.type-post .news-item-detail .text ol {
  margin: 0 0 1.25em;
  padding-left: 1.25em;
}

body.rl-blog-post .news-item-detail .text li,
body.type-post .news-item-detail .text li {
  margin: 0 0 .45em;
}

/* Tables */
body.rl-blog-post .news-item-detail .text table,
body.type-post .news-item-detail .text table {
  width: 100% !important;
  max-width: 100%;
  border-collapse: collapse;
  margin: 28px 0 36px;
  font-family: var(--rl-body);
  font-size: 14px;
  line-height: 1.25;
  color: #333;
}

body.rl-blog-post .news-item-detail .text table td,
body.rl-blog-post .news-item-detail .text table th,
body.type-post .news-item-detail .text table td,
body.type-post .news-item-detail .text table th {
  border: 1px solid #e8e8e6 !important;
  padding: 12px 14px !important;
  vertical-align: top;
  background: #fff;
}

body.rl-blog-post .news-item-detail .text thead td,
body.rl-blog-post .news-item-detail .text thead th,
body.type-post .news-item-detail .text thead td,
body.type-post .news-item-detail .text thead th {
  background: #f7f5f2 !important;
  font-family: var(--rl-display);
  font-weight: 700;
  font-size: 13px;
  color: var(--rl-black);
}

body.rl-blog-post .news-item-detail .text table p,
body.type-post .news-item-detail .text table p {
  margin: 0 !important;
}

body.rl-blog-post .news-item-detail .text table span,
body.type-post .news-item-detail .text table span {
  color: inherit !important;
  font-size: inherit !important;
}

/* Next article */
body.rl-blog-post .next-prev,
body.type-post .next-prev {
  display: flex;
  justify-content: flex-start;
  gap: 12px;
  margin: 48px 0 0 !important;
  padding: 32px 0 0 !important;
  border-top: 1px solid #e5e5e3;
  text-align: left !important;
}

body.rl-blog-post .next-prev .btn,
body.rl-blog-post .rl-blog-next,
body.type-post .next-prev .btn {
  display: inline-flex !important;
  align-items: center;
  justify-content: center;
  gap: 8px;
  min-height: 48px;
  padding: 12px 24px !important;
  margin: 0 !important;
  background: #111 !important;
  color: #fff !important;
  border: none !important;
  border-radius: 0 !important;
  font-family: var(--rl-display) !important;
  font-weight: 600 !important;
  font-size: 13px !important;
  letter-spacing: .08em !important;
  text-transform: uppercase !important;
  text-decoration: none !important;
  line-height: 1.2 !important;
}

body.rl-blog-post .next-prev .btn::after,
body.rl-blog-post .rl-blog-next::after,
body.type-post .next-prev .btn::after {
  content: '→';
  font-size: 14px;
  letter-spacing: 0;
}

/* Prev: arrow before label (← text), not after */
body.rl-blog-post .next-prev .btn.rl-blog-prev::after,
body.rl-blog-post .rl-blog-prev::after,
body.type-post .next-prev .btn.rl-blog-prev::after,
body.rl-blog-post .next-prev a[data-testid="buttonPrevArticle"]::after,
body.type-post .next-prev a[data-testid="buttonPrevArticle"]::after {
  content: none;
}

body.rl-blog-post .next-prev .btn.rl-blog-prev::before,
body.rl-blog-post .rl-blog-prev::before,
body.type-post .next-prev .btn.rl-blog-prev::before,
body.rl-blog-post .next-prev a[data-testid="buttonPrevArticle"]::before,
body.type-post .next-prev a[data-testid="buttonPrevArticle"]::before {
  content: '←';
  font-size: 14px;
  letter-spacing: 0;
}

body.rl-blog-post .next-prev .btn:hover,
body.rl-blog-post .rl-blog-next:hover,
body.type-post .next-prev .btn:hover {
  filter: brightness(1.12);
  color: #fff !important;
}

@media (max-width: 768px) {
  body.rl-blog-post #content-wrapper,
  body.type-post #content-wrapper,
  body.in-blog #content-wrapper {
    padding-bottom: 48px !important;
  }

  body.rl-blog-post .news-item-detail > h1,
  body.type-post .news-item-detail > h1 {
    margin-bottom: 20px !important;
  }

  body.rl-blog-post .news-item-detail .text,
  body.type-post .news-item-detail .text {
    font-size: 15px;
  }

  body.rl-blog-post .news-item-detail .text table,
  body.type-post .news-item-detail .text table {
    display: block;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    font-size: 13px;
  }

  body.rl-blog-post .news-item-detail .text table td,
  body.rl-blog-post .news-item-detail .text table th,
  body.type-post .news-item-detail .text table td,
  body.type-post .news-item-detail .text table th {
    padding: 10px 12px !important;
  }

  body.rl-blog-post .next-prev .btn,
  body.rl-blog-post .rl-blog-next {
    width: 100%;
  }
}

/* ═══════════════════════════════════════════
   CMS pages (.pageArticleDetail / type-page)
   Same reading column + typography as blog article
   ═══════════════════════════════════════════ */

body.rl-cms-page #content-wrapper.content-wrapper,
body.rl-cms-page #content-wrapper,
body.type-page:not(.inDklabFavourites):not(.id-404):not(.in-stranka-nenalezena) #content-wrapper.content-wrapper {
  max-width: var(--rl-max) !important;
  width: 100% !important;
  padding-left: var(--rl-gap) !important;
  padding-right: var(--rl-gap) !important;
  padding-bottom: 72px !important;
  margin-left: auto !important;
  margin-right: auto !important;
}

body.rl-cms-page .content-wrapper-in,
body.type-page:not(.inDklabFavourites):not(.id-404):not(.in-stranka-nenalezena) .content-wrapper-in {
  display: block !important;
  float: none !important;
  width: 100% !important;
}

body.rl-cms-page aside.sidebar,
body.type-page:not(.inDklabFavourites):not(.id-404):not(.in-stranka-nenalezena) aside.sidebar {
  display: none !important;
}

body.rl-cms-page main#content.content,
body.rl-cms-page main#content.content.narrow,
body.type-page:not(.inDklabFavourites):not(.id-404):not(.in-stranka-nenalezena) main#content.content,
body.type-page:not(.inDklabFavourites):not(.id-404):not(.in-stranka-nenalezena) main#content.content.narrow {
  float: none !important;
  width: 100% !important;
  max-width: none !important;
  padding: 0 !important;
  margin: 0 !important;
}

body.rl-cms-page .breadcrumbs-wrapper {
  max-width: 760px !important;
  width: 100% !important;
  margin-left: auto !important;
  margin-right: auto !important;
  padding-top: clamp(12px, 1.5vw, 20px);
  padding-bottom: clamp(8px, 1vw, 14px);
  padding-left: 0 !important;
  padding-right: 0 !important;
  box-sizing: border-box;
}

body.rl-cms-page .content-inner > .breadcrumbs,
body.rl-cms-page .breadcrumbs {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  font-family: var(--rl-body);
  font-size: 12px;
  line-height: 18px;
  color: rgba(17, 17, 17, .8);
  padding: 0;
  margin: 0 0 18px;
}

body.rl-cms-page .breadcrumbs a,
body.rl-cms-page .breadcrumbs .navigation-home-icon {
  color: rgba(17, 17, 17, .8);
  text-decoration: none;
}

body.rl-cms-page .navigation-home-icon .sr-only {
  position: static !important;
  width: auto !important;
  height: auto !important;
  clip: auto !important;
  clip-path: none !important;
  overflow: visible !important;
  white-space: nowrap !important;
}

body.rl-cms-page .navigation-home-icon {
  background: none !important;
  width: auto !important;
  height: auto !important;
  text-indent: 0 !important;
  font-size: 12px;
  line-height: 18px;
}

body.rl-cms-page .breadcrumbs [data-testid="breadcrumbsLastLevel"] [itemprop="name"],
body.rl-cms-page .breadcrumbs [data-testid="breadcrumbsLastLevel"] span[data-title] {
  color: var(--rl-red) !important;
  font-weight: 500;
}

body.rl-cms-page .content-inner {
  max-width: 760px;
  margin: 0 auto;
  padding: clamp(12px, 1.5vw, 20px) 0 0;
}

body.rl-cms-page .pageArticleDetail {
  width: 100%;
}

body.rl-cms-page .pageArticleDetail > header h1,
body.rl-cms-page .pageArticleDetail h1 {
  margin: 0 0 28px !important;
  padding: 0 !important;
  border: none !important;
  font-family: var(--rl-display);
  font-weight: 700;
  font-size: clamp(28px, 3.2vw, 40px);
  line-height: 1.2;
  letter-spacing: -0.01em;
  color: var(--rl-black);
  text-align: left !important;
}

body.rl-cms-page .pageArticleDetail [itemprop="about"],
body.rl-cms-page .pageArticleDetail .perex {
  font-family: var(--rl-body);
  font-size: 16px;
  line-height: 1.7;
  color: #333;
}

/* Kill CMS inline blue / Roboto / random sizes */
body.rl-cms-page .pageArticleDetail [itemprop="about"] span[style],
body.rl-cms-page .pageArticleDetail [itemprop="about"] p[style],
body.rl-cms-page .pageArticleDetail [itemprop="about"] a[style],
body.rl-cms-page .pageArticleDetail [itemprop="about"] em[style],
body.rl-cms-page .pageArticleDetail [itemprop="about"] strong[style],
body.rl-cms-page .pageArticleDetail [itemprop="about"] b[style],
body.rl-cms-page .pageArticleDetail [itemprop="about"] li[style],
body.rl-cms-page .pageArticleDetail [itemprop="about"] td[style],
body.rl-cms-page .pageArticleDetail [itemprop="about"] h2[style],
body.rl-cms-page .pageArticleDetail [itemprop="about"] h3[style] {
  color: inherit !important;
  font-family: inherit !important;
}

body.rl-cms-page .pageArticleDetail [itemprop="about"] > p:first-of-type,
body.rl-cms-page .pageArticleDetail .perex > p:first-child {
  font-size: 17px;
  line-height: 1.65;
  color: #222;
  margin: 0 0 1.35em;
}

body.rl-cms-page .pageArticleDetail [itemprop="about"] p {
  margin: 0 0 1.15em;
}

body.rl-cms-page .pageArticleDetail [itemprop="about"] p:empty,
body.rl-cms-page .pageArticleDetail [itemprop="about"] p:has(> br:only-child) {
  display: none;
}

body.rl-cms-page .pageArticleDetail [itemprop="about"] h2,
body.rl-cms-page .pageArticleDetail [itemprop="about"] h2.western,
body.rl-cms-page .pageArticleDetail [itemprop="about"] .rl-cms-subhead {
  display: block;
  margin: 2.35em 0 .85em !important;
  padding: 0 !important;
  border: none !important;
  font-family: var(--rl-display) !important;
  font-weight: 700 !important;
  font-size: clamp(20px, 1.6vw, 24px) !important;
  line-height: 1.3 !important;
  color: var(--rl-black) !important;
  letter-spacing: 0;
  text-align: left !important;
  font-style: normal !important;
}

body.rl-cms-page .pageArticleDetail [itemprop="about"] h2:first-child,
body.rl-cms-page .pageArticleDetail [itemprop="about"] > h2:first-of-type {
  margin-top: 1.25em !important;
}

body.rl-cms-page .pageArticleDetail [itemprop="about"] h3,
body.rl-cms-page .pageArticleDetail [itemprop="about"] h3.western {
  margin: 1.85em 0 .7em !important;
  padding: 0 !important;
  font-family: var(--rl-display) !important;
  font-weight: 700 !important;
  font-size: 18px !important;
  line-height: 1.35 !important;
  color: var(--rl-black) !important;
  font-style: normal !important;
}

body.rl-cms-page .pageArticleDetail [itemprop="about"] h4 {
  margin: 1.5em 0 .55em;
  font-family: var(--rl-display);
  font-weight: 600;
  font-size: 16px;
  color: var(--rl-black);
}

body.rl-cms-page .pageArticleDetail [itemprop="about"] strong,
body.rl-cms-page .pageArticleDetail [itemprop="about"] b {
  font-weight: 700;
  color: var(--rl-black);
}

body.rl-cms-page .pageArticleDetail [itemprop="about"] a {
  color: var(--rl-black);
  text-decoration: underline;
  text-decoration-color: rgba(17, 17, 17, .35);
  text-underline-offset: 3px;
  text-decoration-thickness: 1px;
  font-weight: 600;
  transition: color .15s ease, text-decoration-color .15s ease;
}

body.rl-cms-page .pageArticleDetail [itemprop="about"] a:hover {
  color: var(--rl-red);
  text-decoration-color: var(--rl-red);
}

/* Soft accent for italic price / note runs in CMS */
body.rl-cms-page .pageArticleDetail [itemprop="about"] em,
body.rl-cms-page .pageArticleDetail [itemprop="about"] i {
  font-style: italic;
  color: #444;
}

body.rl-cms-page .pageArticleDetail [itemprop="about"] img {
  display: block;
  max-width: 100%;
  height: auto;
  margin: 28px auto;
}

/* Red disc bullets — consistent across all CMS pages */
body.rl-cms-page .pageArticleDetail [itemprop="about"] ul {
  list-style: none !important;
  margin: .35em 0 1.5em;
  padding: 0 !important;
}

body.rl-cms-page .pageArticleDetail [itemprop="about"] ul > li {
  position: relative;
  margin: 0 0 .7em;
  padding: 0 0 0 1.4em;
  line-height: 1.6;
}

body.rl-cms-page .pageArticleDetail [itemprop="about"] ul > li::before {
  content: '';
  position: absolute;
  left: 0;
  top: .62em;
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--rl-red);
}

body.rl-cms-page .pageArticleDetail [itemprop="about"] ul > li > p {
  margin: 0 !important;
}

body.rl-cms-page .pageArticleDetail [itemprop="about"] ol {
  list-style: none !important;
  margin: .35em 0 1.5em;
  padding: 0 !important;
  counter-reset: rl-cms-ol;
}

body.rl-cms-page .pageArticleDetail [itemprop="about"] ol > li {
  position: relative;
  margin: 0 0 .7em;
  padding: 0 0 0 1.75em;
  line-height: 1.6;
  counter-increment: rl-cms-ol;
}

body.rl-cms-page .pageArticleDetail [itemprop="about"] ol > li::before {
  content: counter(rl-cms-ol) ".";
  position: absolute;
  left: 0;
  top: 0;
  font-family: var(--rl-display);
  font-weight: 700;
  font-size: 14px;
  color: var(--rl-red);
  line-height: 1.7;
}

body.rl-cms-page .pageArticleDetail [itemprop="about"] ol > li > p {
  margin: 0 !important;
}

body.rl-cms-page .pageArticleDetail [itemprop="about"] hr {
  border: none;
  border-top: 1px solid var(--rl-border);
  margin: 2.25em 0;
}

body.rl-cms-page .pageArticleDetail [itemprop="about"] blockquote {
  margin: 1.75em 0;
  padding: 16px 20px;
  border-left: 3px solid var(--rl-red);
  background: var(--rl-tint-bg);
  font-style: italic;
  color: #444;
}

/* Data tables (real bordered tables) */
body.rl-cms-page .pageArticleDetail [itemprop="about"] table:not(.rl-cms-layout-table):not([border="0"]) {
  width: 100% !important;
  max-width: 100%;
  border-collapse: collapse;
  margin: 1.75em 0 2.25em;
  font-family: var(--rl-body);
  font-size: 14px;
  line-height: 1.35;
  color: #333;
}

body.rl-cms-page .pageArticleDetail [itemprop="about"] table:not(.rl-cms-layout-table):not([border="0"]) td,
body.rl-cms-page .pageArticleDetail [itemprop="about"] table:not(.rl-cms-layout-table):not([border="0"]) th {
  border: 1px solid var(--rl-border) !important;
  padding: 12px 14px !important;
  vertical-align: top;
  background: #fff;
}

body.rl-cms-page .pageArticleDetail [itemprop="about"] table:not(.rl-cms-layout-table):not([border="0"]) thead td,
body.rl-cms-page .pageArticleDetail [itemprop="about"] table:not(.rl-cms-layout-table):not([border="0"]) thead th {
  background: #f7f5f2 !important;
  font-family: var(--rl-display);
  font-weight: 700;
  font-size: 13px;
  color: var(--rl-black);
}

body.rl-cms-page .pageArticleDetail [itemprop="about"] table p {
  margin: 0 0 .85em !important;
}

body.rl-cms-page .pageArticleDetail [itemprop="about"] table p:last-child {
  margin-bottom: 0 !important;
}

/* Layout tables — CMS wraps long text in border=0 / fixed width */
body.rl-cms-page .pageArticleDetail [itemprop="about"] table.rl-cms-layout-table,
body.rl-cms-page .pageArticleDetail [itemprop="about"] table[border="0"] {
  display: block !important;
  width: 100% !important;
  max-width: 100% !important;
  height: auto !important;
  margin: 0 0 1.5em !important;
  border: none !important;
  border-collapse: collapse;
  background: transparent !important;
}

body.rl-cms-page .pageArticleDetail [itemprop="about"] table.rl-cms-layout-table tbody,
body.rl-cms-page .pageArticleDetail [itemprop="about"] table[border="0"] tbody,
body.rl-cms-page .pageArticleDetail [itemprop="about"] table.rl-cms-layout-table tr,
body.rl-cms-page .pageArticleDetail [itemprop="about"] table[border="0"] tr {
  display: block;
  width: 100% !important;
}

body.rl-cms-page .pageArticleDetail [itemprop="about"] table.rl-cms-layout-table td,
body.rl-cms-page .pageArticleDetail [itemprop="about"] table[border="0"] td {
  display: block;
  width: 100% !important;
  max-width: 100% !important;
  border: none !important;
  padding: 0 !important;
  background: transparent !important;
  vertical-align: top;
}

/* 2-col address / info layout tables */
body.rl-cms-page .pageArticleDetail [itemprop="about"] table.rl-cms-layout-table--cols,
body.rl-cms-page .pageArticleDetail [itemprop="about"] table[border="0"]:has(tr > td + td) {
  display: grid !important;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
  margin: 0 0 1.75em !important;
}

body.rl-cms-page .pageArticleDetail [itemprop="about"] table.rl-cms-layout-table--cols tbody,
body.rl-cms-page .pageArticleDetail [itemprop="about"] table.rl-cms-layout-table--cols tr,
body.rl-cms-page .pageArticleDetail [itemprop="about"] table[border="0"]:has(tr > td + td) tbody,
body.rl-cms-page .pageArticleDetail [itemprop="about"] table[border="0"]:has(tr > td + td) tr {
  display: contents;
}

body.rl-cms-page .pageArticleDetail [itemprop="about"] table.rl-cms-layout-table--cols td,
body.rl-cms-page .pageArticleDetail [itemprop="about"] table[border="0"]:has(tr > td + td) td {
  display: block;
  padding: 16px 18px !important;
  background: var(--rl-tint-bg) !important;
  border: 1px solid var(--rl-border) !important;
  box-sizing: border-box;
  font-size: 14px;
  line-height: 1.55;
}

/* Nested lists */
body.rl-cms-page .pageArticleDetail [itemprop="about"] ul ul,
body.rl-cms-page .pageArticleDetail [itemprop="about"] ol ol,
body.rl-cms-page .pageArticleDetail [itemprop="about"] ul ol,
body.rl-cms-page .pageArticleDetail [itemprop="about"] ol ul {
  margin: .55em 0 .35em;
}

body.rl-cms-page .pageArticleDetail [itemprop="about"] ul ul > li::before {
  width: 6px;
  height: 6px;
  background: transparent;
  border: 1.5px solid var(--rl-red);
  box-sizing: border-box;
}

/* Retino embeds (reklamace / doprava track) */
body.rl-cms-page #retino-portal-cc2f,
body.rl-cms-page [id^="retino-portal"],
body.rl-cms-page [id^="retino-"] {
  display: block;
  width: 100% !important;
  max-width: 100% !important;
  margin: 1.5em 0 2.25em;
  box-sizing: border-box;
}

body.rl-cms-page #retino-portal-cc2f iframe,
body.rl-cms-page [id^="retino-"] iframe {
  width: 100% !important;
  max-width: 100% !important;
  border: 1px solid var(--rl-border) !important;
}

@media (max-width: 768px) {
  body.rl-cms-page #content-wrapper {
    padding-bottom: 48px !important;
  }

  body.rl-cms-page .pageArticleDetail > header h1,
  body.rl-cms-page .pageArticleDetail h1 {
    margin-bottom: 20px !important;
  }

  body.rl-cms-page .pageArticleDetail [itemprop="about"] {
    font-size: 15px;
    line-height: 1.65;
  }

  body.rl-cms-page .pageArticleDetail [itemprop="about"] table.rl-cms-layout-table--cols,
  body.rl-cms-page .pageArticleDetail [itemprop="about"] table[border="0"]:has(tr > td + td) {
    grid-template-columns: 1fr;
  }

  body.rl-cms-page .pageArticleDetail [itemprop="about"] table:not(.rl-cms-layout-table):not([border="0"]) {
    display: block;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    font-size: 13px;
  }
}

/* Contact / shops cards: keep link style card-native (no CMS underline) */
body.rl-contact-page .pageArticleDetail [itemprop="about"] .contactWrapper a,
body.rl-shops-page .pageArticleDetail [itemprop="about"] .contactWrapper a {
  text-decoration: none;
  text-decoration-color: transparent;
  font-weight: inherit;
}

body.rl-contact-page .pageArticleDetail [itemprop="about"] .contentContact a:hover,
body.rl-shops-page .pageArticleDetail [itemprop="about"] .contentContact a:hover {
  text-decoration: underline;
  text-decoration-color: var(--rl-red);
}

/* ═══════════════════════════════════════════
   Contact page (body.in-kontakt / .rl-contact-page)
   Wider column + cards / team / map
   ═══════════════════════════════════════════ */

body.rl-contact-page .content-inner,
body.rl-contact-page .breadcrumbs-wrapper {
  max-width: 1100px !important;
}

body.rl-contact-page .pageArticleDetail [itemprop="about"] > h2 {
  text-align: left !important;
  margin-top: 8px;
}

/* Intro phone / e-mail strip */
body.rl-contact-page .contactWrapper {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 16px;
  margin: 8px 0;
  width: 100%;
}

body.rl-contact-page .contactWrapper::before,
body.rl-contact-page .contactWrapper::after {
  display: none !important;
  content: none !important;
}

body.rl-contact-page .contactWrapper > .item,
body.rl-contact-page .contactWrapper > .item.col-sm-4 {
  float: none !important;
  width: auto !important;
  max-width: none !important;
  margin: 0 !important;
  padding: 20px 18px;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 14px;
  background: var(--rl-tint-bg);
  border: 1px solid var(--rl-border);
  box-sizing: border-box;
  font-family: var(--rl-body);
  font-size: 14px;
  line-height: 1.45;
  color: #444;
}

body.rl-contact-page .contactWrapper > .item img {
  margin: 0 !important;
  width: 48px;
  height: 48px;
  object-fit: contain;
}

body.rl-contact-page .contactWrapper > .item span {
  display: block;
}

body.rl-contact-page .contactWrapper > .item a {
  font-family: var(--rl-display);
  font-size: 16px;
  font-weight: 700;
  color: var(--rl-black);
  text-decoration: none;
}

body.rl-contact-page .contactWrapper > .item a:hover {
  color: var(--rl-red);
}

/* Team grid — .contentContact cards */
body.rl-contact-page .contactWrapper:has(.contentContact) {
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 20px 16px;
  margin: 8px 0 28px;
}

body.rl-contact-page .contentContact,
body.rl-contact-page .contentContact.head {
  float: none !important;
  width: auto !important;
  margin: 0 !important;
  padding: 0;
  background: #fff;
  border: 1px solid var(--rl-border);
  box-sizing: border-box;
}

body.rl-contact-page .contentContact > div {
  padding: 16px 16px 20px;
  height: 100%;
  box-sizing: border-box;
}

body.rl-contact-page .contentContact span {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 4px;
  font-family: var(--rl-body);
  font-size: 13px;
  line-height: 1.45;
  color: #555;
}

body.rl-contact-page .contentContact img {
  width: 100% !important;
  max-width: 100% !important;
  height: auto !important;
  aspect-ratio: 1 / 1;
  object-fit: cover;
  margin: 0 0 14px !important;
  border-radius: 0;
  background: #f0eeeb;
}

body.rl-contact-page .contentContact strong {
  display: block;
  margin: 0 0 2px;
  font-family: var(--rl-display);
  font-size: 16px;
  font-weight: 700;
  line-height: 1.25;
  color: var(--rl-black);
}

body.rl-contact-page .contentContact em {
  display: block;
  margin: 0 0 8px;
  font-style: normal;
  font-size: 12px;
  line-height: 1.35;
  letter-spacing: .02em;
  text-transform: uppercase;
  color: #888;
}

body.rl-contact-page .contentContact em sup {
  font-size: 9px;
  letter-spacing: .04em;
}

body.rl-contact-page .contentContact a {
  color: var(--rl-black);
  text-decoration: none;
  font-weight: 500;
  word-break: break-word;
}

body.rl-contact-page .contentContact a:hover {
  color: var(--rl-red);
  text-decoration: underline;
  text-underline-offset: 2px;
}

/* Company info columns */
body.rl-contact-page .cont {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 28px 32px;
  margin: 8px 0 32px;
  width: 100%;
}

body.rl-contact-page .cont::before,
body.rl-contact-page .cont::after {
  display: none !important;
  content: none !important;
}

body.rl-contact-page .cont > .col-sm-4 {
  float: none !important;
  width: auto !important;
  max-width: none !important;
  padding: 0 !important;
  margin: 0 !important;
}

body.rl-contact-page .cont > .col-sm-4 p {
  font-size: 14px;
  line-height: 1.55;
  color: #444;
}

body.rl-contact-page .cont table {
  margin: 12px 0 0 !important;
}

body.rl-contact-page .cont table td {
  padding: 8px 12px !important;
  font-size: 13px;
}

/* Map */
body.rl-contact-page .mapWrapper {
  margin: 8px 0 0;
  width: 100%;
}

body.rl-contact-page .mapWrapper .mapRight,
body.rl-contact-page .mapWrapper .col-sm-9 {
  float: none !important;
  width: 100% !important;
  max-width: none !important;
  padding: 0 !important;
  margin: 0 !important;
}

body.rl-contact-page .mapWrapper iframe {
  display: block;
  width: 100% !important;
  height: min(450px, 55vh) !important;
  border: 1px solid var(--rl-border) !important;
  background: #f4f4f4;
}

@media (max-width: 1100px) {
  body.rl-contact-page .contactWrapper:has(.contentContact) {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

@media (max-width: 900px) {
  body.rl-contact-page .contactWrapper {
    grid-template-columns: 1fr;
  }

  body.rl-contact-page .contactWrapper:has(.contentContact) {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  body.rl-contact-page .cont {
    grid-template-columns: 1fr;
    gap: 24px;
  }
}

@media (max-width: 560px) {
  body.rl-contact-page .contactWrapper:has(.contentContact) {
    grid-template-columns: 1fr;
  }
}


/* ═══════════════════════════════════════════
   Shops page (in-nase-dalsi-obchody / .rl-shops-page)
   https://www.rolser.cz/nase-dalsi-obchody/
   ═══════════════════════════════════════════ */

body.rl-shops-page .content-inner,
body.rl-shops-page .breadcrumbs-wrapper {
  max-width: 1100px !important;
}

/* Contact strip — same cards as kontakt */
body.rl-shops-page .contactWrapper {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 16px;
  margin: 8px 0;
  width: 100%;
}

body.rl-shops-page .contactWrapper::before,
body.rl-shops-page .contactWrapper::after {
  display: none !important;
  content: none !important;
}

body.rl-shops-page .contactWrapper > .item,
body.rl-shops-page .contactWrapper > .item.col-sm-4 {
  float: none !important;
  width: auto !important;
  max-width: none !important;
  margin: 0 !important;
  padding: 20px 18px;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 14px;
  background: var(--rl-tint-bg);
  border: 1px solid var(--rl-border);
  box-sizing: border-box;
  font-family: var(--rl-body);
  font-size: 14px;
  line-height: 1.45;
  color: #444;
}

body.rl-shops-page .contactWrapper > .item img {
  margin: 0 !important;
  width: 48px;
  height: 48px;
  object-fit: contain;
}

body.rl-shops-page .contactWrapper > .item span {
  display: block;
}

body.rl-shops-page .contactWrapper > .item a {
  font-family: var(--rl-display);
  font-size: 16px;
  font-weight: 700;
  color: var(--rl-black);
  text-decoration: none;
}

body.rl-shops-page .contactWrapper > .item a:hover {
  color: var(--rl-red);
}

/* E-shop cards — .contentContact.eshopy */
body.rl-shops-page .contactWrapper:has(.contentContact) {
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 20px 16px;
  margin: 12px 0 8px;
}

body.rl-shops-page .contentContact,
body.rl-shops-page .contentContact.eshopy {
  float: none !important;
  width: auto !important;
  margin: 0 !important;
  padding: 0;
  background: #fff;
  border: 1px solid var(--rl-border);
  box-sizing: border-box;
  transition: border-color .2s ease, box-shadow .2s ease;
}

body.rl-shops-page .contentContact:hover {
  border-color: #d8d8d4;
  box-shadow: 0 8px 24px rgba(17, 17, 17, .06);
}

body.rl-shops-page .contentContact > div {
  display: flex;
  flex-direction: column;
  height: 100%;
  padding: 24px 22px 28px;
  box-sizing: border-box;
}

body.rl-shops-page .contentContact span {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 10px;
  height: 100%;
  font-family: var(--rl-body);
  font-size: 14px;
  line-height: 1.5;
  color: #555;
}

body.rl-shops-page .contentContact img {
  width: auto !important;
  max-width: 160px !important;
  height: 56px !important;
  object-fit: contain;
  object-position: left center;
  margin: 0 0 8px !important;
  background: transparent;
}

body.rl-shops-page .contentContact strong {
  display: block;
  margin: 0;
  font-family: var(--rl-body);
  font-size: 14px;
  font-weight: 500;
  line-height: 1.45;
  color: #444;
  flex: 1 1 auto;
}

body.rl-shops-page .contentContact a,
body.rl-shops-page .contentContact a span {
  font-family: var(--rl-display) !important;
  font-size: 14px !important;
  font-weight: 700 !important;
  color: var(--rl-black) !important;
  text-decoration: none !important;
  margin-top: auto;
}

body.rl-shops-page .contentContact a:hover,
body.rl-shops-page .contentContact a:hover span {
  color: var(--rl-red) !important;
  text-decoration: underline !important;
  text-underline-offset: 2px;
  text-decoration-color: var(--rl-red);
}

body.rl-shops-page .contentContact a::after {
  content: ' →';
  letter-spacing: 0;
  color: var(--rl-red);
}

@media (max-width: 900px) {
  body.rl-shops-page .contactWrapper {
    grid-template-columns: 1fr;
  }

  body.rl-shops-page .contactWrapper:has(.contentContact) {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 560px) {
  body.rl-shops-page .contactWrapper:has(.contentContact) {
    grid-template-columns: 1fr;
  }
}


/* ═══════════════════════════════════════════
   21. PAGE-TYPE POLISH (Phase 4)
   Unified gutters, card rhythm, related rails, checkout air
   ═══════════════════════════════════════════ */

/* Homepage section bottoms — one vertical beat */
body.in-index .homepage-blog-wrapper,
body.in-index .footer-banners.row.banner-wrapper,
body.in-index #selected-categories .selected-wrapper {
  margin-bottom: 0;
}

body.in-index .homepage-blog-wrapper {
  padding-bottom: var(--rl-section-y) !important;
}

body.in-index .homepage-box.welcome-wrapper .rl-brand-intro {
  padding-top: 0;
}

body.in-index .collection {
  margin-bottom: var(--rl-space-2);
  margin-top: var(--rl-space-4);
}

/* Category / search / fav listing grids stretch cards */
body.type-category #products.products.products-page.products-block,
body.type-search #products.products.products-block,
body.in-vyhledavani #products.products.products-block,
body.rl-fav-page #dkLabFavPageProductsContainer .products-block,
body.type-detail .products-related.products-block,
body.type-product .products-related.products-block,
body.type-detail .rl-pd-related .products-block,
body.type-product .rl-pd-related .products-block,
body.type-detail .rl-pd-alternative .products-block,
body.type-product .rl-pd-alternative .products-block {
  align-items: stretch !important;
}

/* Related / alternative rails on PDP — same card language */
body.type-detail .products-related .p,
body.type-product .products-related .p,
body.type-detail .rl-pd-related .p,
body.type-product .rl-pd-related .p,
body.type-detail .rl-pd-alternative .p,
body.type-product .rl-pd-alternative .p,
body.rl-fav-page #dkLabFavPageProductsContainer .p {
  display: flex;
  flex-direction: column;
  height: 100%;
  min-width: 0;
}

body.type-detail .products-related .p-in,
body.type-product .products-related .p-in,
body.type-detail .rl-pd-related .p-in,
body.type-product .rl-pd-related .p-in,
body.type-detail .rl-pd-alternative .p-in,
body.type-product .rl-pd-alternative .p-in,
body.rl-fav-page #dkLabFavPageProductsContainer .p-in {
  display: flex;
  flex-direction: column;
  flex: 1 1 auto;
  padding: var(--rl-card-pad);
  min-width: 0;
}

body.type-detail .products-related .rl-price-row,
body.type-product .products-related .rl-price-row,
body.type-detail .rl-pd-related .rl-price-row,
body.type-product .rl-pd-related .rl-price-row,
body.type-detail .rl-pd-alternative .rl-price-row,
body.type-product .rl-pd-alternative .rl-price-row,
body.rl-fav-page #dkLabFavPageProductsContainer .rl-price-row {
  margin-top: auto;
  padding-top: var(--rl-space-2);
  min-height: var(--rl-card-price-min-h);
}

/* Filters column aligns with listing main */
@media only screen and (min-width: 992px) {
  body.type-category.rl-filters-open .rl-filters-panel {
    padding-top: 0;
  } 
}


body.type-category .rl-listing-main {
  display: flex;
  flex-direction: column;
  gap: var(--rl-space-4);
}

/* Checkout / PDP bottom breathing room vs footer */
body.type-detail #content-wrapper.content-wrapper,
body.type-product #content-wrapper.content-wrapper {
  padding-bottom: var(--rl-section-y) !important;
}

body.ordering-process #content-wrapper.content-wrapper,
body.ordering-process #content-wrapper {
  padding-bottom: max(48px, var(--rl-section-y)) !important;
}

/* Auth / 404 / blog — same side gutter as shop */
body.customer-page #content-wrapper.content-wrapper,
body.rl-404 #content-wrapper.content-wrapper,
body.type-posts-listing #content-wrapper.content-wrapper,
body.rl-blog-listing #content-wrapper.content-wrapper,
body.type-post #content-wrapper.content-wrapper,
body.rl-blog-post #content-wrapper.content-wrapper {
  padding-left: var(--rl-gap) !important;
  padding-right: var(--rl-gap) !important;
}

/* Benefits clone — consistent top air before footer */
body.type-category .rl-home-benefits-clone,
body.type-detail .rl-home-benefits-clone,
body.type-product .rl-home-benefits-clone {
  margin-top: var(--rl-section-y);
}

.footer-banners.row.banner-wrapper {
  padding-top: clamp(20px, 1.68vw, 33px) !important;
  padding-bottom: clamp(20px, 1.68vw, 33px) !important;
  padding-left: var(--rl-gap) !important;
  padding-right: var(--rl-gap) !important;
}

/* Mobile: slightly tighter card title still 2 lines reserved */
@media (max-width: 768px) {
  :root {
    --rl-card-title-size: 12.5px;
    --rl-card-pad: 10px;
  }

  body.type-category .rl-listing-body {
    gap: var(--rl-space-5);
  }

  body.in-index .collection {
    margin-bottom: var(--rl-space-4);
    margin-top: var(--rl-space-6);
}
}

/* ═══════════════════════════════════════════
   Thank-you (in-dekujeme) — Figma 291:5907
   ═══════════════════════════════════════════ */

body.in-dekujeme #content-wrapper.content-wrapper,
body.in-dekujeme #content-wrapper {
  max-width: 1143px !important;
  padding-left: var(--rl-gap) !important;
  padding-right: var(--rl-gap) !important;
  padding-top: 0 !important;
  padding-bottom: 0 !important;
}

body.in-dekujeme main#content.content.narrow,
body.in-dekujeme .content-inner,
body.in-dekujeme .content-inner.rl-thank-you {
  float: none !important;
  width: 100% !important;
  max-width: none !important;
  margin: 0 !important;
  padding: 40px 0 !important;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
}

body.in-dekujeme .rl-thank-check {
  width: 72px;
  height: 72px;
  border-radius: 36px;
  background: #2d7a2d;
  color: var(--rl-white);
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--rl-body);
  font-size: 28.8px;
  font-weight: 400;
  line-height: 1;
  flex-shrink: 0;
}

body.in-dekujeme h1.order-summary-heading {
  margin: 28px 0 0 !important;
  padding: 0 !important;
  font-family: var(--rl-display) !important;
  font-weight: 800 !important;
  font-size: 32px !important;
  line-height: 48px !important;
  letter-spacing: -0.96px !important;
  color: var(--rl-black) !important;
  text-align: center !important;
  background: none !important;
}

body.in-dekujeme .rl-thank-lead {
  margin: 16px 0 0;
  max-width: 592px;
  font-family: var(--rl-body);
  font-weight: 400;
  font-size: 14.4px;
  line-height: 25.2px;
  color: #666;
  text-align: center;
}

body.in-dekujeme .reca-number,
body.in-dekujeme .order-summary-item.total,
body.in-dekujeme .order-summary-item.summary-thx {
  display: none !important;
}

body.in-dekujeme .reca-number[hidden],
body.in-dekujeme .order-summary-item[hidden] {
  display: none !important;
}

body.in-dekujeme .recapitulation-wrapper[data-testid="recapTable"],
body.in-dekujeme .recapitulation-wrapper.rl-thank-grid {
  display: grid !important;
  grid-template-columns: minmax(0, 1.85fr) minmax(260px, 1fr);
  gap: 20px;
  align-items: stretch;
  width: 100%;
  max-width: 1095px;
  margin: 32px 0 0 !important;
  padding: 0 !important;
  text-align: left;
}

body.in-dekujeme .recapitulation-wrapper[data-testid="recapTable"] .co-order {
  order: 1;
}

body.in-dekujeme .recapitulation-wrapper[data-testid="recapTable"] .co-payment-method {
  order: 2;
}

body.in-dekujeme .recapitulation-wrapper[data-testid="recapTable"] .co-box,
body.in-dekujeme .rl-thank-grid .co-box {
  background: #f7f5f2 !important;
  border: none !important;
  box-shadow: none !important;
  padding: 24px !important;
  margin: 0 !important;
  display: flex;
  flex-direction: column;
  min-width: 0;
}

body.in-dekujeme .recapitulation-wrapper[data-testid="recapTable"] .co-box>h4,
body.in-dekujeme .recapitulation-wrapper[data-testid="recapTable"] h4.order-icon,
body.in-dekujeme .rl-thank-grid .co-box>h4,
body.in-dekujeme .rl-thank-grid h4.order-icon {
  margin: 0 0 20px !important;
  padding: 0 !important;
  font-family: var(--rl-display) !important;
  font-weight: 600 !important;
  font-size: 12.8px !important;
  line-height: 19.2px !important;
  letter-spacing: 1.28px !important;
  text-transform: uppercase !important;
  color: #555 !important;
  background: none !important;
}

body.in-dekujeme .recapitulation-wrapper[data-testid="recapTable"] h4.order-icon::before,
body.in-dekujeme .rl-thank-grid h4.order-icon::before {
  content: none !important;
  display: none !important;
}

body.in-dekujeme .recapitulation-wrapper[data-testid="recapTable"] .co-payment-method .row,
body.in-dekujeme .recapitulation-wrapper[data-testid="recapTable"] .co-payment-method [class*="col-"],
body.in-dekujeme .rl-thank-grid .co-payment-method .row,
body.in-dekujeme .rl-thank-grid .co-payment-method [class*="col-"] {
  float: none !important;
  width: 100% !important;
  max-width: none !important;
  margin: 0 !important;
  padding: 0 !important;
}

body.in-dekujeme .recapitulation-wrapper[data-testid="recapTable"] .co-payment-method,
body.in-dekujeme .rl-thank-grid .co-payment-method {
  justify-content: space-between;
}

body.in-dekujeme .recapitulation-wrapper[data-testid="recapTable"] .co-payment-method .row,
body.in-dekujeme .rl-thank-grid .co-payment-method .row {
  flex: 1 1 auto;
  display: flex !important;
  flex-direction: column;
  min-height: 0;
}

body.in-dekujeme .recapitulation-wrapper[data-testid="recapTable"] .co-payment-method [class*="col-"],
body.in-dekujeme .rl-thank-grid .co-payment-method [class*="col-"] {
  flex: 1 1 auto;
  display: flex !important;
  flex-direction: column;
  min-height: 0;
}

body.in-dekujeme .recapitulation-wrapper[data-testid="recapTable"] .recapitulation-table,
body.in-dekujeme .recapitulation-wrapper[data-testid="recapTable"] .recapitulation-table tbody,
body.in-dekujeme .rl-thank-grid .recapitulation-table,
body.in-dekujeme .rl-thank-grid .recapitulation-table tbody {
  display: flex;
  flex-direction: column;
  flex: 1 1 auto;
  width: 100%;
  height: 100%;
  margin: 0;
  border: none;
}

body.in-dekujeme .recapitulation-wrapper[data-testid="recapTable"] .recapitulation-table tr,
body.in-dekujeme .rl-thank-grid .recapitulation-table tr {
  display: block;
  width: 100%;
  border: none;
  border-bottom: 1px solid #f0f0ee;
  padding: 0 0 12px;
  margin: 0 0 12px;
  background: transparent;
}

body.in-dekujeme .recapitulation-wrapper[data-testid="recapTable"] .recapitulation-table tr:last-child,
body.in-dekujeme .rl-thank-grid .recapitulation-table tr:last-child {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  border-bottom: none;
  border-top: 2px solid #e0ddd8;
  margin: auto 0 0;
  padding: 22px 0 10px;
}

body.in-dekujeme .recapitulation-wrapper[data-testid="recapTable"] .recapitulation-table th,
body.in-dekujeme .recapitulation-wrapper[data-testid="recapTable"] .recapitulation-table td,
body.in-dekujeme .rl-thank-grid .recapitulation-table th,
body.in-dekujeme .rl-thank-grid .recapitulation-table td {
  display: block;
  width: 100%;
  padding: 0 !important;
  border: none !important;
  background: transparent !important;
  text-align: left !important;
  font-family: var(--rl-display);
  font-weight: 400;
  font-size: 15.2px;
  line-height: 22.8px;
  color: var(--rl-black);
  vertical-align: top;
}

body.in-dekujeme .recapitulation-wrapper[data-testid="recapTable"] .recapitulation-table td,
body.in-dekujeme .rl-thank-grid .recapitulation-table td {
  margin-top: 2px;
}

body.in-dekujeme .recapitulation-wrapper[data-testid="recapTable"] .recapitulation-table td strong,
body.in-dekujeme .rl-thank-grid .recapitulation-table td strong {
  font-family: var(--rl-display);
  font-weight: 700;
  font-size: 15.2px;
  line-height: 1.3;
  color: var(--rl-black);
}

body.in-dekujeme .recapitulation-wrapper[data-testid="recapTable"] .recapitulation-table tr:last-child th,
body.in-dekujeme .recapitulation-wrapper[data-testid="recapTable"] .recapitulation-table tr:last-child td,
body.in-dekujeme .rl-thank-grid .recapitulation-table tr:last-child th,
body.in-dekujeme .rl-thank-grid .recapitulation-table tr:last-child td {
  width: auto;
  margin: 0;
  flex: 1 1 auto;
}

body.in-dekujeme .recapitulation-wrapper[data-testid="recapTable"] .recapitulation-table tr:last-child th,
body.in-dekujeme .rl-thank-grid .recapitulation-table tr:last-child th {
  font-weight: 700;
  font-size: 18px;
  line-height: 22.8px;
}

body.in-dekujeme .recapitulation-wrapper[data-testid="recapTable"] .recapitulation-table tr:last-child td,
body.in-dekujeme .rl-thank-grid .recapitulation-table tr:last-child td {
  text-align: right !important;
  flex: 0 0 auto;
}

body.in-dekujeme .recapitulation-wrapper[data-testid="recapTable"] .recapitulation-table tr:last-child td strong,
body.in-dekujeme .rl-thank-grid .recapitulation-table tr:last-child td strong {
  font-size: 20px;
  line-height: 1.3;
}

body.in-dekujeme .recapitulation-wrapper[data-testid="recapTable"] .cart-table,
body.in-dekujeme .recapitulation-wrapper[data-testid="recapTable"] .cart-table tbody,
body.in-dekujeme .rl-thank-grid .cart-table,
body.in-dekujeme .rl-thank-grid .cart-table tbody {
  display: block;
  width: 100%;
  margin: 0;
  border: none;
}

body.in-dekujeme .recapitulation-wrapper[data-testid="recapTable"] .cart-table tr,
body.in-dekujeme .rl-thank-grid .cart-table tr {
  display: grid;
  grid-template-columns: 96px minmax(0, 1fr) minmax(72px, 106px);
  gap: 20px;
  align-items: center;
  width: 100%;
  margin: 0;
  padding: 24px 0;
  border: none;
  border-bottom: 1px solid #e0ddd8;
  background: transparent;
}

body.in-dekujeme .recapitulation-wrapper[data-testid="recapTable"] .cart-table tr:last-child,
body.in-dekujeme .rl-thank-grid .cart-table tr:last-child {
  border-bottom: none;
  padding-bottom: 0;
}

body.in-dekujeme .recapitulation-wrapper[data-testid="recapTable"] .cart-table tr:first-child,
body.in-dekujeme .rl-thank-grid .cart-table tr:first-child {
  padding-top: 4px;
}

body.in-dekujeme .recapitulation-wrapper[data-testid="recapTable"] .cart-table td,
body.in-dekujeme .rl-thank-grid .cart-table td {
  display: block;
  width: auto;
  padding: 0 !important;
  border: none !important;
  background: transparent !important;
  vertical-align: middle;
}

body.in-dekujeme .recapitulation-wrapper[data-testid="recapTable"] .cart-table .p-quantity,
body.in-dekujeme .rl-thank-grid .cart-table .p-quantity {
  display: none !important;
}

body.in-dekujeme .recapitulation-wrapper[data-testid="recapTable"] .cart-p-image,
body.in-dekujeme .rl-thank-grid .cart-p-image {
  width: 96px;
  background: #f4f4f2;
}

body.in-dekujeme .recapitulation-wrapper[data-testid="recapTable"] .cart-p-image img,
body.in-dekujeme .rl-thank-grid .cart-p-image img {
  display: block;
  width: 100px;
  max-width: 100%;
  height: auto;
  aspect-ratio: 1;
  object-fit: cover;
}

body.in-dekujeme .recapitulation-wrapper[data-testid="recapTable"] .p-name,
body.in-dekujeme .recapitulation-wrapper[data-testid="recapTable"] .p-name span,
body.in-dekujeme .rl-thank-grid .p-name,
body.in-dekujeme .rl-thank-grid .p-name span {
  font-family: var(--rl-display);
  font-weight: 700;
  font-size: 15.2px;
  line-height: 22.8px;
  color: var(--rl-black);
  text-decoration: underline;
  text-underline-offset: 2px;
  text-align: left;
}

body.in-dekujeme .recapitulation-wrapper[data-testid="recapTable"] .p-price,
body.in-dekujeme .rl-thank-grid .p-price {
  font-family: var(--rl-display);
  font-weight: 700;
  font-size: 15.2px;
  line-height: 22.8px;
  color: var(--rl-black);
  text-align: right !important;
  white-space: nowrap;
  justify-self: end;
}

body.in-dekujeme .recapitulation-wrapper:has(.order-complete-links),
body.in-dekujeme .recapitulation-wrapper.rl-thank-actions {
  display: flex;
  flex-direction: column;
  align-items: center;
  width: 100%;
  margin: 32px 0 0 !important;
  padding: 0 !important;
  text-align: center;
}

body.in-dekujeme .recapitulation-wrapper:has(.order-complete-links) .order-complete-links,
body.in-dekujeme .rl-thank-actions .order-complete-links {
  margin: 0;
  padding: 0;
}

body.in-dekujeme .recapitulation-wrapper:has(.order-complete-links) .order-complete-links p,
body.in-dekujeme .rl-thank-actions .order-complete-links p {
  margin: 0;
}

body.in-dekujeme .recapitulation-wrapper:has(.order-complete-links) .btn.btn-primary,
body.in-dekujeme .rl-thank-actions .btn.btn-primary {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 253px;
  min-height: 48px;
  margin: 0;
  padding: 14px 28px;
  border: none;
  border-radius: 0;
  background: var(--rl-black) !important;
  color: var(--rl-white) !important;
  font-family: var(--rl-display);
  font-weight: 600;
  font-size: 13.12px;
  line-height: 1.2;
  letter-spacing: 1.312px;
  text-transform: uppercase;
  text-decoration: none;
  box-shadow: none;
}

body.in-dekujeme .recapitulation-wrapper:has(.order-complete-links) .btn.btn-primary:hover,
body.in-dekujeme .recapitulation-wrapper:has(.order-complete-links) .btn.btn-primary:focus-visible,
body.in-dekujeme .rl-thank-actions .btn.btn-primary:hover,
body.in-dekujeme .rl-thank-actions .btn.btn-primary:focus-visible {
  background: #000 !important;
  color: var(--rl-white) !important;
}

body.in-dekujeme .recapitulation-wrapper:has(.order-complete-links) .btn.btn-primary:focus-visible,
body.in-dekujeme .rl-thank-actions .btn.btn-primary:focus-visible {
  outline: none;
  box-shadow: var(--rl-focus-ring);
}

@media (max-width: 900px) {
  body.in-dekujeme main#content.content.narrow,
  body.in-dekujeme .content-inner,
  body.in-dekujeme .content-inner.rl-thank-you {
    padding: 48px 0 !important;
  }

  body.in-dekujeme h1.order-summary-heading {
    font-size: 26px !important;
    line-height: 36px !important;
  }

  body.in-dekujeme .recapitulation-wrapper[data-testid="recapTable"],
  body.in-dekujeme .recapitulation-wrapper.rl-thank-grid {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 580px) {
  body.in-dekujeme .rl-thank-check {
    width: 56px;
    height: 56px;
    border-radius: 28px;
    font-size: 22px;
  }

  body.in-dekujeme .recapitulation-wrapper[data-testid="recapTable"] .cart-table tr,
  body.in-dekujeme .rl-thank-grid .cart-table tr {
    grid-template-columns: 72px minmax(0, 1fr);
    gap: 12px 16px;
  }

  body.in-dekujeme .recapitulation-wrapper[data-testid="recapTable"] .p-price,
  body.in-dekujeme .rl-thank-grid .p-price {
    grid-column: 2;
    justify-self: start;
    text-align: left !important;
  }

  body.in-dekujeme .recapitulation-wrapper[data-testid="recapTable"] .cart-p-image img,
  body.in-dekujeme .rl-thank-grid .cart-p-image img {
    width: 72px;
  }

  body.in-dekujeme .recapitulation-wrapper:has(.order-complete-links) .btn.btn-primary,
  body.in-dekujeme .rl-thank-actions .btn.btn-primary {
    width: 100%;
    min-width: 0;
  }
}



/* KATEGORIE HEADER POSUN OBRÁZKU*/
@media (max-width: 768px) {

  .rl-category-hero {
    min-height: 160px;
}

  .rl-category-hero .rl-category-desc {display: none !important;}

  .in-nakupni-tasky-na-koleckach .rl-category-hero {background-position: 74% bottom;}
  .in-zehlici-prkna .rl-category-hero {background-position: 42% bottom;}
  .in-schudky .rl-category-hero {background-position: 70% bottom;}
  .in-klasicke-nakupni-tasky-pres-rameno .rl-category-hero {background-position: 47% bottom;}
  .in-prislusenstvi-pro-nakupni-tasky .rl-category-hero {background-position: 63% bottom;}

  rl-category-hero::before {
    background: linear-gradient(90deg, rgba(255, 255, 255, 0.8) 20%, rgba(255, 255, 255, 0) 85%);

}
}

/* ═══════════════════════════════════════════
   Back to top — .rl-btt
   ═══════════════════════════════════════════ */

.rl-btt {
  position: fixed;
  right: max(16px, env(safe-area-inset-right, 0px));
  bottom: max(90px, env(safe-area-inset-bottom, 0px));
  z-index: 860;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 48px;
  height: 48px;
  margin: 0;
  padding: 0;
  border: none;
  border-radius: 0;
  background: var(--rl-black);
  color: var(--rl-white);
  cursor: pointer;
  appearance: none;
  -webkit-appearance: none;
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transform: translate3d(0, 10px, 0);
  transition:
    opacity .28s var(--rl-ease-out),
    visibility .28s var(--rl-ease-out),
    transform .28s var(--rl-ease-out),
    background .2s ease;
}

.rl-btt.is-visible {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
  transform: translate3d(0, 0, 0);
}

.rl-btt:hover {
  background: #333;
}

.rl-btt:focus-visible {
  outline: none;
  box-shadow: var(--rl-focus-ring-on-dark);
}

.rl-btt__icon {
  display: block;
  width: 14px;
  height: 14px;
  background: url("/user/documents/upload/assets/images/icon-arrow-down.svg") center / contain no-repeat;
  filter: invert(1);
  transform: rotate(180deg);
}

/* Above PDP sticky ATC / mobile buy bar */
body.rl-pd-sticky-on .rl-btt {
  bottom: calc(var(--rl-pd-sticky-h, 80px) + 16px + env(safe-area-inset-bottom, 0px));
}

@media (max-width: 768px) {
  .rl-btt {
    width: 44px;
    height: 44px;
    right: max(12px, env(safe-area-inset-right, 0px));
  }
}

@media (prefers-reduced-motion: reduce) {
  .rl-btt {
    transition: none;
  }
}