/* Named mobile copy of Classic. The Classic base and desktop header stay intact. */
@media (max-width: 1023px) {
  /* The named mobile theme starts in its compact colors and keeps them on scroll. */
  html[data-mobile-theme="classic_legenda"]:not(.mobileSiteMenuOpen) body :is(#desktopStoreHeader, .sp-nav).sp-nav-legenda,
  html[data-mobile-theme="classic_legenda"]:not(.mobileSiteMenuOpen) body :is(#desktopStoreHeader, .sp-nav).sp-nav-legenda.is-scrolled {
    background: var(--sp-header-compact-bg, #b1003c) !important;
    color: var(--sp-header-compact-text, #fff) !important;
    box-shadow: 0 3px 16px #00000012 !important;
  }
  html[data-mobile-theme="classic_legenda"]:not(.mobileSiteMenuOpen) body :is(#desktopStoreHeader, .sp-nav).sp-nav-legenda::after {
    opacity: 0 !important;
  }
  html[data-mobile-theme="classic_legenda"]:not(.mobileSiteMenuOpen) body :is(#desktopStoreHeader, .sp-nav).sp-nav-legenda .sp-brand-logos:has(.sp-brand-logo-compact) .sp-brand-logo-primary {
    opacity: 0 !important;
  }
  html[data-mobile-theme="classic_legenda"]:not(.mobileSiteMenuOpen) body :is(#desktopStoreHeader, .sp-nav).sp-nav-legenda .sp-brand-logo-compact {
    opacity: 1 !important;
  }
  html[data-mobile-theme="classic_legenda"]:not(.mobileSiteMenuOpen) body :is(#desktopStoreHeader, .sp-nav).sp-nav-legenda .sp-brand-logos:not(:has(.sp-brand-logo-compact)) .sp-brand-logo-primary {
    filter: brightness(0) invert(1) !important;
  }
  html[data-mobile-theme="classic_legenda"]:not(.mobileSiteMenuOpen) body #desktopStoreHeader.sp-nav-legenda .sp-legenda-actions #desktopAccountBtn.hasAccountAvatar::after {
    border-color: var(--sp-header-compact-bg, #b1003c) !important;
  }

  html[data-mobile-theme="classic_legenda"] body :is(#desktopStoreHeader, .sp-nav).sp-nav-legenda .sp-legenda-brand,
  html[data-mobile-theme="classic_legenda"] body :is(#desktopStoreHeader, .sp-nav).sp-nav-legenda.is-scrolled .sp-legenda-brand {
    left: 50% !important;
    top: 7px !important;
    width: 88px !important;
    height: 55px !important;
    transform: translateX(-50%) !important;
  }

  html[data-mobile-theme="classic_legenda"] body :is(#desktopStoreHeader, .sp-nav).sp-nav-legenda :is(.sp-mobile-menu, .sp-legenda-mobile-trigger) {
    top: 14px !important;
  }

  html[data-mobile-theme="classic_legenda"] body :is(#desktopStoreHeader, .sp-nav).sp-nav-legenda :is(.sp-mobile-menu summary, .sp-legenda-mobile-trigger) {
    position: relative !important;
    inset: auto !important;
    display: block !important;
    width: 80px !important;
    min-width: 80px !important;
    height: 44px !important;
    min-height: 44px !important;
    padding: 0 !important;
    margin: 0 !important;
    border: 0 !important;
    border-radius: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
    color: inherit !important;
    font-family: inherit !important;
    transform: none !important;
  }

  html[data-mobile-theme="classic_legenda"] body #desktopStoreHeader.sp-nav-legenda #btnSiteMenu.sp-legenda-mobile-trigger {
    position: absolute !important;
    left: 0 !important;
    right: auto !important;
    top: 14px !important;
    bottom: auto !important;
  }

  html[data-mobile-theme="classic_legenda"] body :is(#desktopStoreHeader, .sp-nav).sp-nav-legenda :is(.sp-mobile-menu summary, .sp-legenda-mobile-trigger)::after {
    content: 'Меню';
    position: absolute;
    display: block;
    left: 30px;
    right: auto;
    top: 12px;
    bottom: auto;
    width: auto;
    height: 20px;
    margin: 0;
    padding: 0;
    border: 0;
    background: transparent;
    color: inherit;
    font: 600 16px/20px var(--sp-header-font, 'Nunito', Arial, sans-serif);
    letter-spacing: 0;
    text-transform: none;
    white-space: nowrap;
    transform: none;
    opacity: 1;
    animation: none;
    pointer-events: none;
  }

  html[data-mobile-theme="classic_legenda"] body :is(#desktopStoreHeader, .sp-nav).sp-nav-legenda :is(.sp-mobile-menu summary, .sp-legenda-mobile-trigger) > span:not(.mobileMenuHeaderLabel) {
    position: absolute !important;
    left: 0 !important;
    right: auto !important;
    width: 22px !important;
    height: 2px !important;
    margin: 0 !important;
    background: currentColor !important;
  }
  html[data-mobile-theme="classic_legenda"] body :is(#desktopStoreHeader, .sp-nav).sp-nav-legenda :is(.sp-mobile-menu summary, .sp-legenda-mobile-trigger) > .mobileMenuHeaderLabel { display: none !important; }
  html[data-mobile-theme="classic_legenda"] body :is(#desktopStoreHeader, .sp-nav).sp-nav-legenda :is(.sp-mobile-menu summary, .sp-legenda-mobile-trigger) > span:not(.mobileMenuHeaderLabel):nth-child(1) { top: 15px !important; }
  html[data-mobile-theme="classic_legenda"] body :is(#desktopStoreHeader, .sp-nav).sp-nav-legenda :is(.sp-mobile-menu summary, .sp-legenda-mobile-trigger) > span:not(.mobileMenuHeaderLabel):nth-child(2) { top: 21px !important; }
  html[data-mobile-theme="classic_legenda"] body :is(#desktopStoreHeader, .sp-nav).sp-nav-legenda :is(.sp-mobile-menu summary, .sp-legenda-mobile-trigger) > span:not(.mobileMenuHeaderLabel):nth-child(3) { top: 27px !important; }
  html[data-mobile-theme="classic_legenda"] body :is(#desktopStoreHeader, .sp-nav).sp-nav-legenda :is(.sp-mobile-menu[open] summary, .sp-legenda-mobile-trigger.isOpen) > span:not(.mobileMenuHeaderLabel):nth-child(1) { transform: translateY(6px) rotate(45deg) !important; }
  html[data-mobile-theme="classic_legenda"] body :is(#desktopStoreHeader, .sp-nav).sp-nav-legenda :is(.sp-mobile-menu[open] summary, .sp-legenda-mobile-trigger.isOpen) > span:not(.mobileMenuHeaderLabel):nth-child(2) { opacity: 0 !important; }
  html[data-mobile-theme="classic_legenda"] body :is(#desktopStoreHeader, .sp-nav).sp-nav-legenda :is(.sp-mobile-menu[open] summary, .sp-legenda-mobile-trigger.isOpen) > span:not(.mobileMenuHeaderLabel):nth-child(3) { transform: translateY(-6px) rotate(-45deg) !important; }

  /* The drawer keeps its readable close control even over the compact color. */
  html[data-mobile-theme="classic_legenda"].legendaCatalogHeader.mobileSiteMenuOpen body #desktopStoreHeader.sp-nav-legenda #btnSiteMenu.sp-legenda-mobile-trigger {
    position: fixed !important;
    top: 14px !important;
    left: 12px !important;
    color: #151515 !important;
  }
  html[data-mobile-theme="classic_legenda"] body :is(#desktopStoreHeader, .sp-nav).sp-nav-legenda .sp-mobile-menu[open] > summary {
    color: var(--sp-text, #111) !important;
  }
}

@media (max-width: 350px) {
  html[data-mobile-theme="classic_legenda"] body :is(#desktopStoreHeader, .sp-nav).sp-nav-legenda .sp-legenda-brand,
  html[data-mobile-theme="classic_legenda"] body :is(#desktopStoreHeader, .sp-nav).sp-nav-legenda.is-scrolled .sp-legenda-brand {
    width: 64px !important;
  }
}

/* Legenda uses the same circular badges on the site and in the catalog. */
:is(html[data-mobile-theme="classic_legenda"] body, .sp-page-root.catalog-theme-classic_legenda) .pBadgeRow {
  position: absolute !important;
  top: 10px !important;
  left: 10px !important;
  display: flex !important;
  align-items: center !important;
  gap: 8px !important;
  z-index: 4;
}
:is(html[data-mobile-theme="classic_legenda"] body, .sp-page-root.catalog-theme-classic_legenda) .pBadgeRow > :is(.pNewBadge, .discCorner) {
  position: static !important;
  top: auto !important;
  left: auto !important;
  box-sizing: border-box !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: 48px !important;
  min-width: 48px !important;
  max-width: 48px !important;
  height: 48px !important;
  flex: 0 0 48px !important;
  padding: 0 !important;
  border: 1px solid #dedede !important;
  border-radius: 50% !important;
  background: #fff !important;
  color: #111 !important;
  box-shadow: none !important;
  font-family: Arial, sans-serif !important;
  font-size: 11px !important;
  font-weight: 700 !important;
  line-height: 1 !important;
  letter-spacing: .02em !important;
}
:is(html[data-mobile-theme="classic_legenda"] body, .sp-page-root.catalog-theme-classic_legenda) .pBadgeRow > .discCorner {
  border-color: transparent !important;
  background: var(--sp-catalog-accent, var(--shop-commerce-brand-color, var(--accent, #b1003c))) !important;
  color: #fff !important;
}
:is(html[data-mobile-theme="classic_legenda"] body, .sp-page-root.catalog-theme-classic_legenda) .pBadgeRow > .pCombinedBadge {
  box-sizing: border-box !important;
  width: 48px !important;
  min-width: 48px !important;
  height: 48px !important;
  flex: 0 0 48px !important;
  border: 1px solid #dedede !important;
  border-radius: 50% !important;
  box-shadow: none !important;
  background: linear-gradient(135deg, #fff 0 49%, var(--sp-catalog-accent, var(--shop-commerce-brand-color, var(--accent, #b1003c))) 51% 100%) !important;
}
:is(html[data-mobile-theme="classic_legenda"] body, .sp-page-root.catalog-theme-classic_legenda) .pCombinedBadge :is(span, b) {
  font-family: Arial, sans-serif !important;
  font-size: 8px !important;
  font-weight: 700 !important;
}
:is(html[data-mobile-theme="classic_legenda"] body, .sp-page-root.catalog-theme-classic_legenda) .pCombinedBadge span {
  top: 10px !important;
  left: 8px !important;
}
:is(html[data-mobile-theme="classic_legenda"] body, .sp-page-root.catalog-theme-classic_legenda) .pCombinedBadge b {
  right: 8px !important;
  bottom: 10px !important;
}
html[data-mobile-theme="classic_legenda"] body .pMedia:has(> .pBadgeRow > :is(.pNewBadge, .discCorner, .pCombinedBadge)) > .pSold {
  top: 66px !important;
}