/* legacy.css: what the old shop's script libraries brought along for the pages in its markup (legacy.py).
   The old theme styles themselves are in legacy-cms.css (generated). */

/* Swiper's core styles (the old shop loaded them with its slider script). Sliders here scroll natively. */
.legacy-cms .swiper,
.legacy-cms .swiper-teaser-grid-slider {
  position: relative;
  overflow-x: auto;
  overflow-y: hidden;
  scroll-behavior: smooth;
  scroll-snap-type: x mandatory;
  scrollbar-width: none;
}

.legacy-cms .swiper::-webkit-scrollbar,
.legacy-cms .swiper-teaser-grid-slider::-webkit-scrollbar {
  display: none;
}

.legacy-cms .swiper-wrapper {
  position: relative;
  display: flex;
  width: 100%;
  box-sizing: content-box;
}

.legacy-cms .swiper-slide {
  flex-shrink: 0;
  position: relative;
  scroll-snap-align: start;
}

/* The old plugins' Swiper settings: the secondary navigation (slidesPerView auto, spaceBetween 20) and the
   teaser grid slider (1 slide with 28px between, from 1440px 2.5 slides with 20px). */
.legacy-cms .swiper-secondary-navigation .swiper-slide {
  width: auto;
  margin-right: 20px;
}

.legacy-cms .swiper-teaser-grid-slider .swiper-slide {
  width: 100%;
  margin-right: 28px;
}

@media (min-width: 1440px) {
  .legacy-cms .swiper-teaser-grid-slider .swiper-slide {
    width: calc((100% - 40px) / 2.5);
    margin-right: 20px;
  }
}

/* Bootstrap's collapse (accordions). */
.legacy-cms .collapse:not(.show) {
  display: none;
}

/* The old header is fixed; the page starts below it (the old .content-main margin and overflow, frame
   rules the extractor does not carry). The overflow clips full-bleed rows such as the partner logos. */
main.content-main {
  display: flow-root;
  margin-top: 82px;
  overflow: hidden;
}

@media (min-width: 992px) {
  main.content-main {
    margin-top: 116px;
  }
}

/* The open main menu stops the page behind it from scrolling (the old script's crc-no-scroll). */
html.crc-no-scroll {
  overflow: hidden;
  scroll-behavior: auto;
}

/* The page itself: Bootstrap's reboot of <body>, which the old theme put on every page. */
body {
  margin: 0;
  font-family: var(--font);
  color: #000f40;
  background-color: #fff;
  -webkit-text-size-adjust: 100%;
}

/* The content slider's track (tiny-slider's .tns-ovh and .tns-slider), run by legacy.js. */
.legacy-cms .cms-element-solid-ase-content-slider {
  overflow: hidden;
}

.legacy-cms ul.solid-ase-content-slider.is-ready {
  display: flex;
  flex-wrap: nowrap;
  transition-property: transform;
  transition-timing-function: cubic-bezier(0.445, 0.05, 0.55, 0.95);
}

.legacy-cms ul.solid-ase-content-slider.is-ready > .slide {
  flex: 0 0 100%;
  min-width: 0;
}

/* The product slider's track (tiny-slider's .tns-ovh and .tns-slider), run by legacy.js; the gutter is
   each box's right padding, as tiny-slider set it. */
.legacy-cms .product-slider-frame {
  overflow: hidden;
}

.legacy-cms .product-slider-container {
  display: flex;
  flex-wrap: nowrap;
  transition-property: transform;
  transition-timing-function: ease;
}

.legacy-cms .product-slider-container > .product-slider-item {
  flex: 0 0 auto;
  box-sizing: border-box;
  min-width: 0;
}

/* The product boxes' 8 to 10 day delivery fill (all.css). The extraction keeps only the fills its pages show,
   and the boxes follow the product feed. */
.legacy-cms .enthus-product-delivery-information .enthus-product-delivery-time-info .delivery-time-indicator .orange-half {
  background: linear-gradient(145deg, transparent 0%, transparent 45%, var(--color-background-orange) 45%, var(--color-background-orange) 100%);
  background-repeat: no-repeat;
  position: absolute;
  width: 100%;
  height: 100%;
  background-size: 10px 7.5px;
  background-position-x: 2.5px;
  background-position-y: 5px;
}

/* The blog filter's off-canvas (legacy.js) opens inside main; the old shop put it outside the content area,
   where its list had no bullets. */
main.legacy-cms .offcanvas-filter ul li::before { content: none; }

/* Memory-card tiles take their height from the image (268 x 180 at 1440 px); one not yet in the bucket keeps
   that box. */
.legacy-cms .sw-cms-el-enthus-element-teaser-4-columns-2-rows__box > a:not(:has(img)) { aspect-ratio: 268 / 180; }

/* Stage slides lay their text over the slide image. ENTHUSCustomBlocks' EnthusStageSlides script gave the
   slides 1.47 times the viewport width on phones, which an image-less slide needs for any height at all.
   Its text flows instead, so a long text grows the stage rather than run into the next section. */
@media (max-width: 767.98px) {
  .legacy-cms [data-enthus-stage-slides] { min-height: calc(100vw * 1.47); }
}
.legacy-cms .cms-block-enthus-stage .sw-cms-el-enthus-stage__slide:not(:has(picture)) .sw-cms-el-enthus-stage__slide-content { position: relative; height: auto; }

/* Event list (site.css): the plugin set the featured event's text colours under .content-main, above the CMS
   heading and paragraph colours. */
.legacy-cms .sw-cms-el-enthus-cvent-event-list__featured-meta,
.legacy-cms .sw-cms-el-enthus-cvent-event-list__featured-title,
.legacy-cms .sw-cms-el-enthus-cvent-event-list__featured-excerpt { color: #fff; }

/* ENTHUSCventEvents' enthus-cvent-event.scss (the single event teaser), compiled; the archived theme CSS
   predates the plugin. The excerpt clamp is set by legacy.js. */
.content-main .sw-cms-block-enthus-cvent-event-module { position: relative; overflow: hidden; }
.content-main .sw-cms-el-enthus-cvent-event__image { display: flex; aspect-ratio: 1 / 1; max-height: 450px; overflow: hidden; }
.content-main .sw-cms-el-enthus-cvent-event__image-img { width: 100%; height: 100%; object-fit: cover; }
.content-main .sw-cms-el-enthus-cvent-event__desc { padding-top: var(--distance-s); }
.content-main .sw-cms-el-enthus-cvent-event__date { margin: 0 0 var(--distance-xs); font-weight: var(--font-weight-regular); font-size: var(--font-size-l); line-height: var(--line-height-l); color: var(--color-text-primary); }
.content-main .sw-cms-el-enthus-cvent-event__headline { margin: 0 0 var(--distance-xs); font-weight: var(--font-weight-bold); font-size: var(--font-size-2xl); line-height: var(--line-height-xl); color: var(--color-text-primary); overflow-wrap: anywhere; }
.content-main .sw-cms-el-enthus-cvent-event__excerpt { margin: 0 0 var(--distance-xs); font-weight: var(--font-weight-regular); font-size: var(--font-size-l); line-height: var(--line-height-l); color: var(--color-text-primary); }
.content-main .sw-cms-el-enthus-cvent-event__excerpt p,
.content-main .sw-cms-el-enthus-cvent-event__excerpt ul,
.content-main .sw-cms-el-enthus-cvent-event__excerpt ol { margin: 0 0 var(--distance-xs); }
.content-main .sw-cms-el-enthus-cvent-event__excerpt p:last-child,
.content-main .sw-cms-el-enthus-cvent-event__excerpt ul:last-child,
.content-main .sw-cms-el-enthus-cvent-event__excerpt ol:last-child { margin-bottom: 0; }
.content-main .sw-cms-el-enthus-cvent-event .sw-cms-el-enthus-element-button { max-width: 100%; white-space: normal; }
@media (min-width: 768px) {
  .content-main .sw-cms-el-enthus-cvent-event__content { flex-direction: row; align-items: stretch; }
  .content-main .sw-cms-el-enthus-cvent-event__image { max-height: none; }
  .content-main .sw-cms-el-enthus-cvent-event__desc { display: flex; flex-direction: column; padding-top: 0; padding-bottom: calc((var(--line-height-2xl, var(--font-size-2xl)) - 1.2 * var(--font-size-l)) / 2); contain: size; }
  .content-main .sw-cms-el-enthus-cvent-event__date,
  .content-main .sw-cms-el-enthus-cvent-event__headline { flex-shrink: 0; }
  .content-main .sw-cms-el-enthus-cvent-event__excerpt { flex: 0 1 auto; min-height: 0; display: -webkit-box; margin-bottom: var(--distance-s); overflow: hidden; -webkit-box-orient: vertical; -webkit-line-clamp: var(--enthus-cvent-excerpt-lines, none); line-clamp: var(--enthus-cvent-excerpt-lines, none); }
  .content-main .sw-cms-el-enthus-cvent-event .sw-cms-el-enthus-element-button { flex-shrink: 0; align-self: flex-start; }
  .content-main .sw-cms-el-enthus-cvent-event__headline { font-size: var(--font-size-3xl); line-height: var(--line-height-3xl); }
}
@media (min-width: 1200px) {
  .content-main .sw-cms-el-enthus-cvent-event__date { line-height: var(--line-height-2xl, var(--font-size-2xl)); }
  .content-main .sw-cms-el-enthus-cvent-event__headline { font-size: var(--font-size-4xl); line-height: var(--line-height-4xl); }
  .content-main .sw-cms-el-enthus-cvent-event__excerpt { font-size: var(--font-size-1l); line-height: var(--font-size-2xl); }
}

/* IcorpCmsExtendParallaxBox's base.scss: a fixed background, with a fixed layer where iOS ignores
   background-attachment: fixed. legacy.js sets the images. */
.legacy-cms div[class*="cms-block-icorp-parallax-background"] { position: relative; background-attachment: fixed; }
.legacy-cms div[class*="cms-block-icorp-parallax-background"] .backgroundFixedWrapper { display: none; }
@supports (-webkit-touch-callout: none) {
  .legacy-cms div[class*="cms-block-icorp-parallax-background"] .backgroundFixedWrapper { display: block; clip: rect(0, auto, auto, 0); position: absolute; top: 0; left: 0; width: 100%; height: 100%; }
  .legacy-cms div[class*="cms-block-icorp-parallax-background"] .backgroundFixed { position: fixed; display: block; top: 0; left: 0; width: 100%; height: 100%; background-size: cover; background-position: center center; transform: translateZ(0); will-change: transform; }
}

/* Shopware's ButtonLoadingIndicatorUtil spinner, which the old buy buttons showed while the cart
   request ran (shop-cart.js adds and removes it). Values from the old theme's .loader. */
.btn .loader {
  display: inline-block;
  width: 26px;
  height: 26px;
  vertical-align: -0.125em;
  border: 2px solid currentcolor;
  border-right-color: transparent;
  border-radius: 50%;
  animation: shop-spinner-border 1.5s linear infinite;
}
@keyframes shop-spinner-border { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) {
  .btn .loader { animation-duration: 3s; }
}

/* /sitemap (ENTHUSSitemap _sitemap.scss, compiled values from the archived theme CSS). */
body .enthus-sitemap-wrapper { margin-left: auto; margin-right: auto; background-color: #ffffff; max-width: var(--max-website-width); padding: 40px 10px; }
body .enthus-sitemap-wrapper p { font-weight: 600; }
body .enthus-sitemap-wrapper .enthus-sitemap-category { background-color: #dffbff; padding: 10px; background-clip: content-box; min-width: 350px; flex: 1; max-width: unset; }
body .enthus-sitemap-wrapper .enthus-sitemap-category ul { list-style-type: disclosure-closed; padding-inline-start: 30px; margin-right: 10px; font-size: var(--font-size-0l); }
body .enthus-sitemap-wrapper .enthus-sitemap-category ul a { font-family: var(--font-primary); color: var(--color-text-primary); }
@media (min-width: 1200px) {
  body .enthus-sitemap-wrapper { padding: 40px 20px; }
  body .enthus-sitemap-wrapper .enthus-sitemap-category { padding: 20px; }
}

/* The old theme's marker line-height is !important, so it beat the inline line-height of the menu teasers'
   markers; the hoisted inline styles are !important as well, so the rule needs one more class here. */
.legacy-chrome .enthus-marker-effect { line-height: calc(1.1em + 5px) !important; }

/* Userlike chat button position, from the old theme (crc main.css). */
html body [class^=umm-] { right: 20px; }
@media only screen and (max-width: 991px) {
  html body [class^=umm-] { bottom: 25px; right: 25px; }
}

/* A breadcrumb link carries negative margins for its hover marker, so a lone "Home" item gets no room in its
   inline-block and Firefox breaks the word. */
.enthus-breadcrumb .enthus-has-link a { white-space: nowrap; }

/* The tour button shows at once instead of popping in after 2.5 s (docs/old-shop-deviations.md); the
   pop-in stays for the badge's later reappearances. Heavier than the pop-in rule legacy-chrome.css repeats. */
.enthuscr-header [data-floating-menu]:not(.tour-notifier-settled) .crc-floating-menu-navigation-tree .tree-item.tree-item--tour-guide-notifier {
  animation: none;
  transition: none;
  opacity: 1;
  transform: none;
}

/* The menu banners mark text white or navy with c-white and c-navy, which no old stylesheet defined, so the
   text fell back to the grey body colour, unreadable on the dark banners. */
.legacy-chrome .graphic-item .c-white { color: #fff; }
.legacy-chrome .graphic-item .c-navy { color: #000f40; }

/* Block background images in "contain" mode (the old theme's cms-block rules; the CSS extraction kept only
   the modes its sample pages used). */
.legacy-cms .cms-block .cms-block-background.media-mode--contain { object-fit: contain; }

/* Brand tiles under the main menu navigation (common resources _main-menu-brand-tiles.scss). */
.enthuscr-header .crc-main-menu-brand-tiles { display: none; background-color: #f2f3f5; }
@media (min-width: 768px) { .enthuscr-header .crc-main-menu-brand-tiles { display: block; } }
.enthuscr-header .crc-main-menu-brand-tiles-inner { box-sizing: border-box; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(12px, calc((100% - 3 * 285px) / 2), 53px); width: 100%; padding: 24px max(44px, calc((100% - 1300px) / 2)); }
.enthuscr-header .crc-main-menu-brand-tile { display: block; box-sizing: border-box; width: 100%; max-width: 285px; aspect-ratio: 285 / 125; margin: 0 auto; overflow: hidden; border-radius: 2px; border: 1px solid #c5c7cc; background-color: #fff; transition: border-color .16s ease, box-shadow .16s ease, transform .16s ease; }
.enthuscr-header .crc-main-menu-brand-tile:hover, .enthuscr-header .crc-main-menu-brand-tile:focus-visible { border-color: #000f40; box-shadow: 0 4px 24px rgb(0 0 0 / 7%); transform: translateY(-3px); }
.enthuscr-header .crc-main-menu-brand-tile img { display: block; width: calc(100% + 2px); height: calc(100% + 2px); max-width: none; margin: -1px; }

/* Anchor targets clear the fixed header (ENTHUSTheme _typography.scss). */
html { scroll-padding-top: 116px; }
/* Anchor links and scripted scrolls glide, as Bootstrap's reboot made them on the old shop's root; the
   menu's scroll lock (html.crc-no-scroll) turns it off again, as the old common resources' _body-scroll.scss did. */
@media (prefers-reduced-motion: no-preference) { html { scroll-behavior: smooth; } }

/* The overlay's scrollable content runs edge to edge so the brand tiles' band reaches the sides; search and
   navigation carry the inset instead (common resources _main-menu.scss, the version with the brand tiles). */
.enthuscr-header .crc-main-menu-overlay.crc-main-menu-overlay .crc-main-menu-overlay-scrollable-content { padding-left: 0; padding-right: 0; margin: 15px 0 0; max-height: calc(100vh - 15px); }
.enthuscr-header .crc-main-menu-overlay.crc-main-menu-overlay .crc-main-menu-overlay-scrollable-content::-webkit-scrollbar { width: 0; }
.enthuscr-header .crc-main-menu-overlay.crc-main-menu-overlay .crc-main-menu-overlay-scrollable-content .crc-main-menu-overlay-search,
.enthuscr-header .crc-main-menu-overlay.crc-main-menu-overlay .crc-main-menu-overlay-scrollable-content .crc-main-menu-overlay-navigation { box-sizing: border-box; width: 100%; max-width: none; margin: 0; padding-inline: max(44px, calc((100% - 1300px) / 2)); }

/* Breadcrumbs carry no background: a page-level grey box was left over from when the breadcrumb sat on the
   header image (marketing, 2026-11-03). Outweighs the pages' own `background: ... !important`. */
html body .enthus-breadcrumb-wrapper .enthus-breadcrumb { background: transparent !important; }

/* main clips its overflow without becoming a scroll container (overflow: hidden would), so the sticky
   anchor navigation of the index pages' teaser module sticks below the header. */
main.content-main.legacy-cms { overflow: clip; }

/* The header's contact form (floating menu flyout): its labels move up once the field has focus or a
   value, as in the common resources' _active-campaign-form-container.scss. */
.enthuscr-header .active-campaign-api-form-container .focusin ._form-label,
.enthuscr-header .active-campaign-api-form-container .non-empty ._form-label { top: 8px; font-size: 15px; }
.enthuscr-header .active-campaign-api-form-container .focusin ._form-label { color: #000f40; }
.enthuscr-header .active-campaign-api-form-container .non-empty ._form-label { color: #858585; }
.enthuscr-header .active-campaign-api-form-container .focusin ._form-label-group-heading,
.enthuscr-header .active-campaign-api-form-container .non-empty ._form-label-group-heading { top: inherit; font-size: inherit; color: inherit; }

/* Browser autofill sets values without an input event; this animation lets ac-form.js notice it. */
@keyframes enthus-autofill { from { opacity: 1; } to { opacity: 1; } }
.active-campaign-api-form-container input:-webkit-autofill { animation: enthus-autofill 1ms; }
/* The fourth footer slider row is pink on every page; the old shop set this only in the home and blog layouts' CSS. */
.legacy-chrome .interactive-links__item:nth-child(2n+4) { background: var(--color-background-red); }
.legacy-chrome .interactive-links__item:nth-child(2n+4) .interactive-links__link { animation-delay: 1.25s; }