/* shop-catalog.css: the listing that catalog.py and shop-catalog.js render, on top of shop-legacy.css
   (the old shop's styles). Covers what shop-legacy.css lacks for this markup: buttons where the old
   shop had spans or forms, the sidebar product search, delivery indicators the archived pages did not
   show, the reset button, the mobile filter toggle. Values are copied from the old theme (all.css). */

/* ------------------------------------------------------------ filter bar */


.legacy-shop .filter-panel-item-dropdown {
  max-height: 320px;
  overflow-y: auto;
}

.legacy-shop .filter-panel-active-container:empty {
  display: none;
}

/* The October bar (ENTHUSTheme _filter-panel.scss): the sort is the first item, the filters follow
   left-aligned and wrap, "weitere Filter" takes the rest of its row at the right. It replaces the
   June bar's 290px (197px) left padding that shop-legacy.css carries. */
.legacy-shop .shop-category-listing-filters .filter-panel .filter-panel-items-container {
  gap: 19px 30px;
  padding: 12px 20px;
  min-height: 80px;
}
@media (min-width: 1200px) {
  .legacy-shop .shop-category-listing-filters .filter-panel .filter-panel-items-container { gap: 24px 30px }
}
@media (min-width: 1400px) {
  .legacy-shop .shop-category-listing-filters .filter-panel .filter-panel-items-container > .filter-panel-item.properties-filter-group {
    flex: 1;
    justify-content: flex-end;
  }
}

/* -------------------------------------------------------------- listing */

/* The old theme's -15px wrapper margin against the columns' 15px padding: tile edges flush with the
   filter bar. */
.legacy-shop .enthus-product-listing-wrapper {
  margin: 0 -15px 25px;
  list-style: none;
}

.legacy-shop .catalog-empty {
  margin: 16px 8px;
}

.legacy-shop .product-image-placeholder {
  display: block;
  width: 100%;
  height: 100%;
  background: #f2f3f5;
}

/* The cart button and the request link replace the old form's button, which grew to fill it. */
.legacy-shop .buy-widget > .btn-buy {
  flex-grow: 1;
}

/* The compare button keeps the browser's 1px 6px button padding, as on the old tiles. */
.legacy-shop .product-price-info .product-wishlist-action,
.legacy-shop .product-price-info .product-comparison-button {
  background: transparent;
  border: 0;
}

.legacy-shop .product-price-info .product-wishlist-action {
  padding: 0;
}

.legacy-shop .product-price-info .product-comparison-button {
  padding: 1px 6px;
}

/* The old heart svg is 24x24 with min-width 30px: the heart drawn 24px high, centred in 30px, and
   inline, so it sits on the text baseline like the old one. */
.legacy-shop .product-price-info .enthus-product-wishlist .enthus-icon img {
  display: inline;
  width: 30px;
  height: 24px;
}

.legacy-shop .product-comparison-button .enthus-product-out {
  display: none;
}

/* Delivery time indicator: the truck with a filled (green-full) or half filled box. */
.legacy-shop .enthus-product-delivery-information .enthus-product-delivery-time-info > .delivery-info-icon {
  background-image: url("/assets/legacy-icons/local-shipping.svg");
}

.legacy-shop .enthus-product-delivery-information .enthus-product-delivery-time-info .delivery-time-indicator > i {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-repeat: no-repeat;
  background-size: 10px 7.5px;
  background-position: 2.5px 5px;
}

.legacy-shop .enthus-product-delivery-information .delivery-time-indicator > .green-full {
  background-image: linear-gradient(145deg, var(--color-background-progressive-green) 0%, var(--color-background-progressive-green) 100%);
}

.legacy-shop .enthus-product-delivery-information .delivery-time-indicator > .green-half {
  background-image: linear-gradient(145deg, transparent 0%, transparent 45%, var(--color-background-progressive-green) 45%, var(--color-background-progressive-green) 100%);
}

.legacy-shop .enthus-product-delivery-information .delivery-time-indicator > .orange-half {
  background-image: linear-gradient(145deg, transparent 0%, transparent 45%, var(--color-background-orange) 45%, var(--color-background-orange) 100%);
}

.legacy-shop .enthus-product-delivery-information .enthus-product-stock-info .stock-info-icon.sold-out {
  background-color: var(--color-redpink);
}

/* ------------------------------------------------------------- pagination */

.legacy-shop .shop-pagination .pagination .page-item .page-link {
  display: flex;
  align-items: center;
  justify-content: center;
}

/* The arrow icons are 16px boxes centred in the 30px link, the svg 1px down from its box (old inline svg). */
.legacy-shop .shop-pagination .pagination .page-item .enthus-icon {
  width: 16px;
  height: 16px;
}

.legacy-shop .shop-pagination .pagination .page-item .enthus-icon img {
  display: block;
  margin-top: 1px;
}

/* The arrows of "vorherige Seite" / "nächste Seite" (ENTHUSTheme _pagination.scss prev-next-arrow.svg). */
.legacy-shop .shop-pagination .enthus_page_prev_next .enthus-page-prev span::before,
.legacy-shop .shop-pagination .enthus_page_prev_next .enthus-page-next span::after {
  background-image: url("/assets/legacy-icons/prev-next-arrow.svg");
}

@media (max-width: 767.98px) {
  .legacy-shop .shop-pagination .enthus-mobile-pagination .pagination-nav {
    flex-direction: column;
    align-items: center;
  }
}

/* ---------------------------------------------------------------- focus */

.legacy-shop a:focus-visible,
.legacy-shop button:focus-visible,
.legacy-shop input:focus-visible,
.legacy-shop select:focus-visible,
.legacy-shop summary:focus-visible {
  outline: 3px solid var(--semantic-state-focus);
  outline-offset: 2px;
}

/* -------------------------------------------------------------- sidebar */

/* The open path's sub-levels in light blue (old common.css, every level). */
.legacy-shop .enthuscr-sidebar .cms-section-sidebar-sidebar-content .category-navigation .category-is-active-parrent + .level-2,
.legacy-shop .enthuscr-sidebar .cms-section-sidebar-sidebar-content .category-navigation .category-is-active-parrent + .level-3,
.legacy-shop .enthuscr-sidebar .cms-section-sidebar-sidebar-content .category-navigation .category-is-active-parrent + .level-4,
.legacy-shop .enthuscr-sidebar .cms-section-sidebar-sidebar-content .category-navigation .category-is-active-parrent + .level-5,
.legacy-shop .enthuscr-sidebar .cms-section-sidebar-sidebar-content .category-navigation .category-is-active-parrent + .level-6,
.legacy-shop .enthuscr-sidebar .cms-section-sidebar-sidebar-content .category-navigation .category-navigation-entry-active.has-children:not(.category-is-active-parrent) + .level-2,
.legacy-shop .enthuscr-sidebar .cms-section-sidebar-sidebar-content .category-navigation .category-navigation-entry-active.has-children:not(.category-is-active-parrent) + .level-3,
.legacy-shop .enthuscr-sidebar .cms-section-sidebar-sidebar-content .category-navigation .category-navigation-entry-active.has-children:not(.category-is-active-parrent) + .level-4,
.legacy-shop .enthuscr-sidebar .cms-section-sidebar-sidebar-content .category-navigation .category-navigation-entry-active.has-children:not(.category-is-active-parrent) + .level-5,
.legacy-shop .enthuscr-sidebar .cms-section-sidebar-sidebar-content .category-navigation .category-navigation-entry-active.has-children:not(.category-is-active-parrent) + .level-6 {
  background-color: #dffbff;
}


/* The arrow that opens a sub-level is a button here (a span in the old shop). */
.legacy-shop .enthuscr-sidebar .category-navigation-entry p .navigation-collapse-img-wrapper {
  padding: 0;
  background: transparent;
  border: 0;
}

.legacy-shop .enthuscr-sidebar .sidebar-navigation-main-button-wrapper > a {
  display: block;
  height: 100%;
}

/* Shown on purpose although the old theme hid it (docs/old-shop-deviations.md). */
.legacy-shop .enthuscr-sidebar .cms-element-sidebar-product-search {
  position: relative;
  display: block;
  margin-top: 25px;
}

.legacy-shop .enthuscr-sidebar .cms-element-sidebar-product-search .sidebar-product-search-input-field {
  width: 100%;
  height: 52px;
  padding: 0 50px 1px 52px;
  font-size: 20px;
  color: #000f40;
  background-image: url("/assets/legacy-icons/search-icon.svg");
  background-repeat: no-repeat;
  background-size: 29px;
  background-position: 11px 10px;
  border: var(--distance-4xs) solid var(--color-text-muted);
  border-radius: 0;
  outline: none;
}

.legacy-shop .enthuscr-sidebar .cms-element-sidebar-product-search .sidebar-product-search-submit-btn {
  position: absolute;
  top: 0;
  right: 0;
  width: 50px;
  height: 52px;
  background: transparent;
  border: 0;
  cursor: pointer;
}

/* -------------------------------------------------------- mobile filters */

/* Below 992px the "Produkte filtern" toggle opens the old off-canvas filter: Bootstrap's offcanvas
   from the bottom, full width (Shopware OffCanvasFilter), with the old theme's offcanvas-filter
   rules. shop-catalog.js moves the panel into it. Values copied from the old all.css. */
.legacy-shop .offcanvas {
  --bs-offcanvas-zindex: 1045;
  --bs-offcanvas-height: 90%;
  --bs-offcanvas-bg: #fff;
  position: fixed;
  right: 0;
  bottom: 0;
  left: 0;
  z-index: 10001;
  display: flex;
  flex-direction: column;
  max-width: 100%;
  height: var(--bs-offcanvas-height);
  max-height: 100%;
  visibility: hidden;
  background-color: var(--bs-offcanvas-bg);
  background-clip: padding-box;
  border-radius: 8px 8px 0 0;
  outline: 0;
  transform: translateY(100%);
  transition: all 0.45s cubic-bezier(0.3, 0, 0.15, 1);
}

.legacy-shop .offcanvas.show {
  visibility: visible;
  transform: none;
}

@media (prefers-reduced-motion: reduce) {
  .legacy-shop .offcanvas {
    transition: none;
  }
}

.legacy-shop .offcanvas-backdrop {
  position: fixed;
  top: 0;
  left: 0;
  z-index: 10000;
  width: 100vw;
  height: 100vh;
  background-color: rgba(0, 0, 0, 0.5);
}

.legacy-shop .offcanvas-backdrop[hidden] {
  display: none;
}

body.shop-offcanvas-open {
  overflow: hidden;
}

.legacy-shop .offcanvas-filter { overflow: hidden }
.legacy-shop .offcanvas-filter.is-fullwidth.offcanvas { width: 90%; margin-top: 80px; margin-right: auto; margin-left: auto }
.legacy-shop .offcanvas-filter.is-fullwidth.offcanvas.show { border-radius: 0; background: var(--color-background-light) }
.legacy-shop .offcanvas-filter .filter-panel-offcanvas-header { display: flex }
.legacy-shop .offcanvas-filter .filter-panel-offcanvas-close { padding: 0; background: transparent; border: 0 }
.legacy-shop .offcanvas-filter .filter-panel { display: flex; flex-direction: row; flex-wrap: wrap; align-content: flex-start; width: 100%; height: calc(100% - 80px); padding: 0 25px 25px; overflow-y: auto; scrollbar-width: none }
.legacy-shop .offcanvas-filter .filter-panel::-webkit-scrollbar { display: none }
.legacy-shop .offcanvas-filter .filter-panel .filter-panel-items-container { position: relative; order: 2; gap: 15px 20px; margin-top: 15px }
.legacy-shop .offcanvas-filter .filter-panel .filter-panel-items-container > .filter-panel-item { min-height: 2em; margin: 0; font-size: 14px }
.legacy-shop .offcanvas-filter .filter-panel .filter-panel-item { padding: 0 }
.legacy-shop .offcanvas-filter .filter-panel .filter-panel-item .filter-panel-item-toggle { padding: 0; border: unset }
.legacy-shop .offcanvas-filter .filter-panel .filter-panel-active-container { order: 1; width: 100%; margin-bottom: 15px; font-size: 12px }
.legacy-shop .offcanvas-filter .filter-panel .form-check { padding: 0 }
.legacy-shop .offcanvas-filter .filter-panel .form-check .form-check-input { min-width: 16px; margin: 0 8px 0 0; border: solid 1px }
.legacy-shop .offcanvas-filter .filter-panel .filter-multi-select-count { margin-left: 0 }
.legacy-shop .offcanvas-filter .filter-panel .filter-panel-items-container .properties-filter-group { flex-basis: 100% }
.legacy-shop .offcanvas-filter .filter-panel .filter-panel-items-container .properties-filter-group .properties-filter-group-toggle { padding: 0; font-size: 16px; font-weight: 400; line-height: 24px; border: unset }
.legacy-shop .offcanvas-filter .filter-panel .filter-panel-items-container .properties-filter-group .properties-filter-group-items { display: none; flex-flow: row wrap; width: 100%; margin-top: 10px }
.legacy-shop .offcanvas-filter .filter-panel .filter-panel-items-container .properties-filter-group .properties-filter-group-toggle.show + .properties-filter-group-items { display: flex }
.legacy-shop .offcanvas-filter .filter-panel .filter-panel-items-container .properties-filter-group .properties-filter-group-items .filter-panel-item { width: 100%; margin: 10px 0 }
.legacy-shop .offcanvas-filter .filter-panel .filter-panel-items-container .properties-filter-group .properties-filter-group-items .filter-panel-item .filter-panel-item-toggle { display: flex; width: calc(100% - 20px); text-align: left }
.legacy-shop .offcanvas-filter .filter-panel .filter-panel-items-container .properties-filter-group .properties-filter-group-items .filter-panel-item .filter-panel-item-toggle .filter-multi-select-name { flex: 1; order: 2; max-width: max-content; margin-right: 4px; overflow: hidden; text-overflow: ellipsis }
.legacy-shop .offcanvas-filter .filter-panel .filter-panel-items-container .properties-filter-group .properties-filter-group-items .filter-panel-item .filter-panel-item-toggle .filter-multi-select-count { order: 3 }
.legacy-shop .offcanvas-filter .filter-panel .filter-panel-items-container .properties-filter-group .properties-filter-group-items .filter-panel-item .filter-panel-item-toggle .enthus-icon-sidebar-arrow { order: 1; margin-left: -6px }
.legacy-shop .offcanvas-filter.is-fullwidth.offcanvas.show .filter-reset-all { line-height: var(--font-size-1xl); color: var(--color-text-primary); border: var(--distance-4xs) solid var(--color-text-primary) }
.legacy-shop .offcanvas-filter.is-fullwidth.offcanvas.show .filter-reset-all:hover,
.legacy-shop .offcanvas-filter.is-fullwidth.offcanvas.show .filter-reset-all:active { color: var(--color-text-primary); background-color: transparent }
.legacy-shop .offcanvas-filter.is-fullwidth.offcanvas.show .filter-active { line-height: var(--line-height-l); color: var(--color-text-primary); border: var(--distance-4xs) solid var(--color-border-gray) }
.legacy-shop .offcanvas-filter.is-fullwidth.offcanvas.show .filter-active-remove,
.legacy-shop .offcanvas-filter.is-fullwidth.offcanvas.show .filter-active-remove:hover { color: var(--color-text-primary) }

/* Dropdowns open in the flow of the panel, so the scrolling panel never clips them. */
.legacy-shop .offcanvas-filter .filter-panel-item-dropdown.show { position: static; width: 100%; margin-top: 8px }
.legacy-shop .offcanvas-filter .filter-panel-items-container > .filter-panel-item.dropdown { flex-wrap: wrap }

/* ------------------------------------------------------------ active filters */

/* Shopware's active filter labels (old all.css). */
.legacy-shop .filter-active { position: relative; display: inline-block; max-width: 245px; height: 32px; padding: 2px 35px 2px 14px; margin-right: 6px; margin-bottom: 8px; overflow: hidden; line-height: 26px; text-overflow: ellipsis; white-space: nowrap; vertical-align: top; border: 1px solid #f2f3f5; border-radius: 50px }
.legacy-shop .filter-active-remove { position: absolute; top: 0; right: 0; bottom: 0; display: block; width: 35px; height: 100%; padding: 0 12px; margin: 0; font-size: 16px; font-weight: 700; line-height: 1; color: #4a545b; text-align: left; background-color: transparent; border: 0 none; appearance: none }
.legacy-shop .filter-active-remove:hover { color: #000f40 }
.legacy-shop .btn.filter-reset-all { display: inline-block; height: 32px; margin-right: 8px; font-weight: 400; line-height: 26px; vertical-align: top; border-radius: 50px }
.legacy-shop .shop-category-listing-filters .filter-panel .filter-panel-active-container:has(.filter-reset-all) .filter-active { height: unset; padding: 5px 30px 5px 10px; margin: unset; font-size: 14px }
.legacy-shop .shop-category-listing-filters .filter-panel .filter-panel-active-container:has(.filter-reset-all) .filter-active .filter-active-remove { top: 1px }

/* ------------------------------------------------------------------ sort */

/* The sort as the bar's first item (_filter-panel.scss: 250px, 157px from 992px to 1648px); full
   width in the off-canvas panel. */
.legacy-shop .shop-category-listing-filters .filter-panel .filter-panel-items-container > .filter-panel-item.enthus-product-sort-in-filter {
  position: static;
  width: auto;
  height: auto;
  margin: 0;
  font-weight: 400;
}
.legacy-shop .enthus-product-sort-in-filter > .sorting { width: auto; padding: 0; min-width: 157px }
.legacy-shop .enthus-product-sort-in-filter .form-select { width: 250px }
@media (min-width: 992px) {
  .legacy-shop .enthus-product-sort-in-filter .form-select { line-height: 25px; padding-top: 14px }
}
@media (min-width: 992px) and (max-width: 1648px) {
  .legacy-shop .enthus-product-sort-in-filter .form-select { width: 157px }
}
.legacy-shop .offcanvas-filter .filter-panel .filter-panel-items-container > .filter-panel-item.enthus-product-sort-in-filter { width: 100%; height: auto; margin: 0 }
.legacy-shop .offcanvas-filter .enthus-product-sort-in-filter > .sorting,
.legacy-shop .offcanvas-filter .enthus-product-sort-in-filter .form-select { width: 100% }

/* Toggles and the checkbox share one baseline. */
.legacy-shop .shop-category-listing-filters .filter-panel-item-toggle,
.legacy-shop .shop-category-listing-filters .properties-filter-group-toggle,
.legacy-shop .shop-category-listing-filters .filter-boolean .form-check {
  display: inline-flex;
  align-items: center;
  line-height: 1.5;
}

.legacy-shop .shop-category-listing-filters .filter-boolean .form-check-input {
  margin-top: 0;
  margin-right: 8px;
}


/* The condition always starts its own line, as on the old tiles; stock and delivery share the first. */
.legacy-shop .product-box .enthus-product-delivery-information.sm .enthus-product-condition-info {
  display: block;
}

@media (min-width: 992px) {
  /* Preis is the last filter at the bar's right edge: its dropdown opens leftwards, inside the page. */
  .legacy-shop .shop-category-listing-filters .filter-panel .filter-panel-items-container > .filter-range .filter-range-dropdown {
    right: 0;
    left: auto;
  }
}

/* Collapsible sidebar (shop-catalog.js initSidebarCollapse), from the old shop's common resources
   (_sidebar-navigation-animation.scss). Desktop: .sidebar-nav animates between 350px and an 80px
   icon strip; .nav-hover-expanded opens it over the content while hovered. */
.legacy-shop .enthuscr-sidebar .navigation-sidebar-main-arrow-wrapper:focus-visible { opacity: 1; outline: 2px solid #ff9fb6; outline-offset: 2px }
/* Desktop only: below 992px the old arrow points up when closed and turns 180deg when open. */
@media (min-width: 992px) {
  .legacy-shop .enthuscr-sidebar .navigation-sidebar-main-arrow { transform: rotate(-90deg) }
}
.legacy-shop .enthuscr-sidebar .category-navigation-box.nav-box-closed { display: none }
/* A sub-level slides open and shut as Bootstrap's collapse did in the old shop (.collapsing, 350ms). */
.legacy-shop .enthuscr-sidebar .category-navigation.collapsing { height: 0; overflow: hidden; transition: height 350ms ease }
.legacy-shop .cms-section-sidebar-main-content { transition: width 500ms ease }
.legacy-shop .enthuscr-sidebar .cms-section-sidebar-sidebar-content.sidebar-nav {
  transition: max-width 500ms ease, width 500ms ease, min-width 500ms ease;
  width: 350px; min-width: 350px; max-width: 350px;
  /* Above the listing while hover-expanded, below this site's sticky header (z-index 50); the old
     bundle's 999 put it over the header on scroll. */
  position: relative; z-index: 40;
}
.legacy-shop .enthuscr-sidebar .sidebar-nav .sidebar-navigation-main-button-wrapper,
.legacy-shop .enthuscr-sidebar .sidebar-nav .category-navigation-entry p { transition: max-width 500ms ease; max-width: 350px }
.legacy-shop .enthuscr-sidebar .cms-section-sidebar-sidebar-content.sidebar-nav.nav-collapsed { width: 80px; min-width: 80px; max-width: 80px }
.legacy-shop .enthuscr-sidebar .sidebar-nav.nav-collapsed .sidebar-navigation-main-button-wrapper button {
  font-size: 14px; font-weight: 400; line-height: normal; text-align: center; padding: 0;
}
.legacy-shop .enthuscr-sidebar .sidebar-nav.nav-collapsed:not(.nav-hover-expanded) .sidebar-navigation-main-button-wrapper,
.legacy-shop .enthuscr-sidebar .sidebar-nav.nav-collapsed:not(.nav-hover-expanded) .category-navigation-entry p { max-width: 80px }
.legacy-shop .enthuscr-sidebar .sidebar-nav.nav-collapsed:not(.nav-hover-expanded) .category-navigation.level-2,
.legacy-shop .enthuscr-sidebar .sidebar-nav.nav-collapsed:not(.nav-hover-expanded) .category-navigation.level-3,
.legacy-shop .enthuscr-sidebar .sidebar-nav.nav-collapsed:not(.nav-hover-expanded) .category-navigation.level-4 { display: none }
/* In the 80px strip the search keeps its magnifier only; the field opens with the sidebar. */
.legacy-shop .enthuscr-sidebar .sidebar-nav.nav-collapsed:not(.nav-hover-expanded) .cms-element-sidebar-product-search { max-width: 80px; overflow: hidden }
.legacy-shop .enthuscr-sidebar .sidebar-nav.nav-collapsed:not(.nav-hover-expanded) .sidebar-product-search-input-field { padding-right: 0 }
.legacy-shop .enthuscr-sidebar .sidebar-nav.nav-collapsed:not(.nav-hover-expanded) .sidebar-product-search-input-field::placeholder { color: transparent }
.legacy-shop .enthuscr-sidebar .sidebar-nav.nav-collapsed:not(.nav-hover-expanded) .sidebar-product-search-submit-btn { display: none }
.legacy-shop .enthuscr-sidebar .sidebar-nav.nav-collapsed:not(.nav-hover-expanded) .category-navigation-entry-active > p { background-color: #94f2ff }
.legacy-shop .enthuscr-sidebar .sidebar-nav.nav-collapsed .category-navigation-entry p .category-navigation-link span,
.legacy-shop .enthuscr-sidebar .sidebar-nav.nav-collapsed .category-navigation-entry p .navigation-collapse-img-wrapper { display: none }
.legacy-shop .enthuscr-sidebar .cms-section-sidebar-sidebar-content.sidebar-nav.nav-hover-expanded { width: 350px; min-width: 350px; max-width: 350px; overflow: visible }
.legacy-shop .enthuscr-sidebar .sidebar-nav.nav-hover-expanded .sidebar-navigation-main-button-wrapper button {
  font-size: 23px; font-weight: 700; line-height: 23px; text-align: left; padding-left: 20px;
}
.legacy-shop .enthuscr-sidebar .sidebar-nav.nav-hover-expanded .category-navigation-entry p .category-navigation-link span { display: inline }
.legacy-shop .enthuscr-sidebar .sidebar-nav.nav-hover-expanded .category-navigation-entry p .navigation-collapse-img-wrapper { display: flex }
body.nav-collapsed-active .legacy-shop .cms-section-sidebar-main-content { width: auto; flex: 1; min-width: 0; max-width: none }
body.nav-collapsed-active .legacy-shop .js-listing-wrapper .cms-listing-col { flex: 0 0 25%; max-width: 25% }
@media (prefers-reduced-motion: reduce) {
  .legacy-shop .enthuscr-sidebar .sidebar-nav,
  .legacy-shop .enthuscr-sidebar .sidebar-nav .sidebar-navigation-main-button-wrapper,
  .legacy-shop .enthuscr-sidebar .sidebar-nav .category-navigation-entry p,
  .legacy-shop .enthuscr-sidebar .category-navigation.collapsing,
  .legacy-shop .cms-section-sidebar-main-content { transition: none }
}

/* ------------------------------------------------- shipping-cost modal */

/* The product page's "Versandkosten" modal (shop-product.js) in the old Bootstrap pseudo-modal: the
   rules the pruned shop-legacy.css lacks, from the old theme (all.css). Its backdrop uses the
   .shop-modals rules in shop.css. */
.modal-open { overflow: hidden !important; padding-right: 0 !important }
.legacy-shop .modal-header {
  display: flex;
  flex-shrink: 0;
  align-items: center;
  justify-content: space-between;
  padding: var(--bs-modal-header-padding);
  border-bottom: var(--bs-modal-header-border-width) solid var(--bs-modal-header-border-color);
}
.legacy-shop .modal-content .modal-title { margin: 0; line-height: 1.5 }
.legacy-shop .modal.show .modal-dialog { transform: none }
.legacy-shop .modal .modal-header.only-close { border-bottom-color: transparent }
.legacy-shop .btn-close {
  box-sizing: content-box;
  width: 1em;
  height: 1em;
  padding: 0.25em 0.25em;
  color: #000;
  background: transparent url("/assets/legacy-icons/btn-close.svg") center / 1em auto no-repeat;
  border: 0;
  opacity: 0.5;
}
.legacy-shop .btn-close:hover { opacity: 0.75 }
.legacy-shop .btn-close:focus { outline: 0; box-shadow: 0 0 0 0.125rem #ffffff, 0 0 0 0.2rem rgba(0, 15, 64, 0.6); opacity: 1 }
.legacy-shop .modal-header .btn-close {
  padding: calc(var(--bs-modal-header-padding-y) * .5) calc(var(--bs-modal-header-padding-x) * .5);
  margin: calc(-.5 * var(--bs-modal-header-padding-y)) calc(-.5 * var(--bs-modal-header-padding-x)) calc(-.5 * var(--bs-modal-header-padding-y)) auto;
}

/* ------------------------------------------------- product breadcrumb */

/* The old ".breadcrumb svg { height: 0.875rem }" for the arrow img, inline like the old svg. */
.legacy-shop .breadcrumb .breadcrumb-placeholder img {
  display: inline;
  width: auto;
  height: 0.875rem;
}

/* The open path's chevrons above the current category (old crc-main.css). */
.legacy-shop .enthuscr-sidebar .cms-section-sidebar-sidebar-content .category-navigation .category-navigation-entry-active-route .navigation-collapse-img-active {
  background-color: #94f2ff;
  border-radius: 20px;
}

/* The old open "weitere Filter" toggle turned its chevron down; the transform also lifts it above the
   toggle's ::before background. The old rule targets the svg, the chevron here is an img. */
.legacy-shop .shop-category-listing-filters .filter-panel .filter-panel-items-container > .filter-panel-item.properties-filter-group .properties-filter-group-toggle.show .enthus-icon.enthus-icon-sidebar-arrow img {
  transform: rotate(90deg);
  transition: transform 0.26s ease;
}