/** Shopify CDN: Minification failed

Line 349:50 Unexpected "("
Line 580:2 Expected identifier but found "]"
Line 2524:24 Expected identifier but found "!"
Line 2913:6 Expected ":"

**/
.type-banner {
  flex: 1 0 100%;
}

.footer__title {
  font-weight: bold;
  font-size: var(--type-base-size);
}

.newsletter-section__image {
    overflow: hidden;
}
button#minimized-trustbadge-98e3dadd90eb493088abdc5597a70810 {
    background-color: #fff !important;
    color: #000 !important;
}
button#minimized-trustbadge-98e3dadd90eb493088abdc5597a70810 p {
    color: inherit !important;
}
.home-blog-article.blog-section {
  padding-left: 15px;
  padding-right: 15px;
}
div#home-accesories-section+div .dsgn-pck__grid-column.dsgn-pck__grid-column--1 {
  padding: 0;
}
.home-blog-article .section-title {
    font-size: 24.5px;
}
.home-blog-article svg.flickity-button-icon {
    position: unset;
    width: 40px !important;
    height: 40px !important;
    padding: 10px;
    fill: #fff;
    background-color: #000;
    border-radius: 100%;
}
.ecom-youtube-widget .widget-holder--3YPX1.widget-type-grid--1gX9S .widget-header--1jnDV .heading-caption--1BLGE{
    font-family: 'DM Sans' !important;
}
.newsletter-container .h4 {
    font-family: 'DM Sans';
    font-size: 25px !important;
}
.button-grid-wrapper h3 {
    font-size: 18px;
    font-weight:600;
}
.load-more-btn {
    border-radius: 5px;
    line-height: 1;
}
.custom-hero-content .custom-hero-button {
    border-radius: 2px;
}
.newsletter-input-group button {
    line-height: 1;
    height: -webkit-fill-available;
}
.ecom-youtube-widget .slick-prev:before,
.ecom-youtube-widget .slick-next:before{
    display: none;
}
.ecom-youtube-widget .slick-prev{
    left: -35px;
}
.ecom-youtube-widget .slick-next{
    right: -35px;
}
.ecom-youtube-widget .slick-prev,
.ecom-youtube-widget .slick-next{
    padding: 0;
    width: 40px;
    height: 40px;
    background-color: #000 !important;
    color: #fff !important;
    font-size: 25px;
    border-radius: 100%;
}
.template-collection section-main-content div#AjaxContent {
    margin: 0;
}
.template-collection section-main-content div#AjaxContent .grid__item.item-grid__sidebar {
    padding-left: 0;
    top: 15px !important;
}
.template-collection .custom-rolex-section {
    max-width:1420px;
}

@media only screen and (min-width: 667px) {
    .woot-widget-holder.woot-elements--right, .woot-widget-bubble.woot-elements--right {
        right: 125px !important;
    }
}
@media only screen and (max-width: 666px) {
    .woot-widget-bubble.woot-elements--right {
        transform: translate(5px, -50px);
    }
}
@media (min-width: 768px) {
  .ecom-youtube-widget .slick-prev:hover,
  .ecom-youtube-widget .slick-next:hover{
      opacity: 0.7;
  }
  .home-blog-article .section-title {
    font-size: 35px;
  }
  .button-grid-wrapper h3 {
      font-size: 28px;
  }
  .home-blog-article.blog-section {
    padding-left: var(--page-width-padding);
    padding-right: var(--page-width-padding);
  }
  /* div#home-accesories-section+div .dsgn-pck__grid-column.dsgn-pck__grid-column--1 {
      padding: 0 40px;
  } */
  div#home-accesories-section+.dsgn-pck__background .dsgn-pck__grid {
      width: 100%;
      padding-left: var(--page-width-padding);
      padding-right: var(--page-width-padding);
  }
  .product-grid__content.product--description .product-single__meta {
      padding-top: 12px;
  }
}
@media (max-width: 767px) {
  .page-datenschutz-1 .dsgn-pck__inner-content a {
      display: inline-block;
      word-break: break-all;
  }
  .info-section h3 {
    font-size: 20px !important;
  }
  .collection-filter {
    z-index: 9;
  }
  .product-recommendations-placeholder .new-grid.product-grid {
      padding-left: 0;
      margin-right: -15px;
  }
  footer-section ul.footer-icons {
      flex-wrap: wrap;
      padding: 0 var(--page-width-padding);
      justify-content: center;
      align-items: center;
  }
  footer-section ul.footer-icons img {
      max-width: 50px;
      max-height: 25px;
  }
  .template-collection .reasons-container {
      margin: 0 var(--page-width-padding);
      padding: 40px 22px;
  }
  .template-collection .reasons-container h2 {
    font-size: 28px;
  }
  .shopify-section>.additional-info-container {
      padding-bottom: 1px !important;
  }
  .product-video-container {
      width: 100% !important;
      padding: 0 15px;
  }
  .product-video-container .additional-info-container {
      width: 100%;
  }
  .ecom-youtube-widget .slick-prev {
      left: -10px;
      top: 30%;
  }
  .ecom-youtube-widget .slick-next {
      right: -10px;
      top: 30%;
  }
  .template-collection section-main-content div#AjaxContent  .grid__item.medium-up--four-fifths {
      padding-left: 0;
  }
  .collection-grid__wrapper .new-grid.product-grid.collection-grid {
      margin: 0;
  }
}
  

/* Horando Mosaic Section */
/* Base wrapper - using a unique prefix to avoid conflicts */
.hrnd-mosaic-section-wrapper {
  max-width: 1500px;
  margin: 0 auto;
  padding: 0 var(--page-width-padding);
}

/* Header styling - nested under the wrapper for specificity */
.hrnd-mosaic-section-wrapper .hrnd-mosaic-header {
  text-align: center;
  margin-bottom: 2rem;
}

.hrnd-mosaic-section-wrapper .hrnd-mosaic-header h2,
.hrnd-mosaic-section-wrapper .hrnd-mosaic-header h3 {
  margin: 0;
}

/* Grid container - using complex selector for higher specificity */
.hrnd-mosaic-section-wrapper .hrnd-mosaic-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  grid-template-rows: repeat(2, 450px);
  gap: 0 !important;
  width: 100%;
  margin: 0;
  padding: 0;
}

/* Grid items - nested under the main grid */
.hrnd-mosaic-section-wrapper .hrnd-mosaic-grid-item {
  margin: 0 !important;
  padding: 0 !important;
  border: none !important;
  overflow: hidden;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
}

/* Image containers */
.hrnd-mosaic-section-wrapper .hrnd-mosaic-image-container {
  margin: 0;
  padding: 0;
  width: 100%;
  height: 100%;
  display: block;
}

.hrnd-mosaic-section-wrapper .hrnd-mosaic-image-container img {
  display: block;
  width: 100%;
  height: 100%;
  margin: 0;
  object-fit: cover;
  object-position: 50% 50%;
  transition: transform 0.3s ease-in-out;
}

.hrnd-mosaic-section-wrapper .hrnd-mosaic-image-container img:hover {
  transform: scale(1.05);
}

/* Text content containers */
.hrnd-mosaic-section-wrapper .hrnd-mosaic-content {
  margin: 0 !important;
  padding: 0 !important;
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
  justify-content: center;
  box-sizing: border-box;
  background-color: #f8f8f8;
}

.hrnd-mosaic-section-wrapper .hrnd-mosaic-content-inner {
  padding: 2rem;
}

/* Text elements within content areas */
.hrnd-mosaic-section-wrapper .hrnd-mosaic-content h3,
.hrnd-mosaic-section-wrapper .hrnd-mosaic-content p {
  margin: 0;
  padding: 20px;
}

/* Responsive design */
@media (max-width: 768px) {
  .hrnd-mosaic-section-wrapper .hrnd-mosaic-grid {
    grid-template-columns: 1fr;
    grid-template-rows: auto;
  }
  .hrnd-mosaic-grid-item {
    margin-bottom: 0px;
  }
  .hrnd-mosaic-content-inner {
    padding-top: 0px !important;
    padding-bottom: 0px !important;
  }
}

/* Button grid */

.button-grid-container {
  scroll-snap-type: x mandatory;
}

.button-grid-item {
  scroll-snap-align: start;
}

.button-grid-item:hover {
  background-color: #dcdcdc;
}

/* footer */

/* Footer icons row styling */
.footer-icons-row {
  text-align: center; /* Center the row */
  padding: 20px 0; /* Add spacing */
  background-color: #000; /* Match the footer background color */
}

.footer-icons {
  display: inline-flex; /* Arrange icons in a horizontal row */
  gap: 25px; /* Add spacing between icons */
  list-style: none; /* Remove list bullets */
  padding: 0;
  margin: 0;
}

.footer-icons img {
  max-height: 20px; /* Adjust height to suit your design */
  max-width: 100%; /* Ensure icons are responsive */
  filter: brightness(0) invert(1); /* Ensure white icons display properly */
}

/* custom navigation */

/* Main container */
.megamenu__cols {
  display: flex;
  gap: 2rem;
  width: 100%;
  padding-bottom: 20px;
  flex-wrap: wrap; /* Allows wrapping */
}

/* Desktop defaults: keep in one row */
.site-nav.site-navigation.site-navigation--beside (min-width: 768px) {
  display: flex !important;
  flex-wrap: nowrap !important;
  justify-content: flex-start;
  align-items: center;
}

/* Force EXACTLY 2 rows (3 items each) when screen width < 1368px */
@media (max-width: 1368px) and (min-width: 768px) {
  .site-nav.site-navigation.site-navigation--beside {
    flex-wrap: wrap !important;
    justify-content: center;
  }

  /* Each nav item gets 33.33% width => 3 per row => 2 rows total */
  .site-nav.site-navigation.site-navigation--beside > li.site-nav__item {
    flex: 0 0 33.3333%;
    max-width: 33.3333%;
    display: flex;
    justify-content: center;
    box-sizing: border-box;
    margin-bottom: 0px;
    padding-bottom: 0px;
  }

  /* If text is too long, let it wrap or break. */
  .site-nav.site-navigation.site-navigation--beside > li.site-nav__item > a {
    white-space: normal;
    text-align: center;
    padding: 1rem; /* Optional: spacing around each link */
  }
}

/* Brands section */
.megamenu__brands {
  flex: 0 0 75%; /* Takes up 75% of the space */
}

.megamenu__brands .brands-list {
  column-count: 3;
  column-gap: 2rem;
  column-fill: balance;
  margin: 0;
  padding: 0;
}

/* New styles for brand letters and dividers */
.brand-letter-wrapper {
  width: 100%;
  list-style: none; /* Ensure no default list styling */
}

.brand-letter-divider {
  display: flex;
  align-items: center;
  padding-left: 1rem; /* Match this with .brand-item's padding-left */
  margin-bottom: 0.5rem; /* Space below the letter header */
}

.brand-letter {
  font-weight: 800; /* Retain or adjust as needed */
  font-size: 1.1em; /* Retain or adjust as needed */
  color: #666;
  margin-right: 8px; /* Space between letter and divider */
}

/* Subtle divider line after the letter */
.brand-letter-divider::after {
  content: "";
  flex-grow: 1;
  height: 1px;
  background-color: #e0e0e0; /* Adjust color for subtlety */
  margin-left: 8px; /* Space between letter and line */
}

/* Special styling for featured brands */
.megamenu__brands .brand-item a[href*="rolex"],
.megamenu__brands .brand-item a[href*="omega"],
.megamenu__brands .brand-item a[href*="breitling"],
.megamenu__brands .brand-item a[href*="patek-philippe"],
.megamenu__brands .brand-item a[href*="audemars-piguet"],
.megamenu__brands .brand-item a[href*="iwc"],
.megamenu__brands .brand-item a[href*="tag-heuer"] {
  font-weight: 700;
  text-transform: uppercase;
}

.megamenu__brands .brand-item {
  break-inside: avoid;
  margin-bottom: 0.5rem;
  padding-left: 1rem; /* Ensure this matches with .brand-letter-divider */
  list-style: none;
}

/* Categories section */
.megamenu__categories {
  flex: 0 0 25%; /* Takes up 25% of the space */
  padding-left: 2rem;
  border-left: 1px solid #e5e5e5; /* Divider line */
}

.megamenu__categories .categories-list {
  margin: 0;
  padding: 0;
}

.megamenu__categories .category-item {
  list-style: none;
  margin-bottom: 0.75rem;
}

/* Section headers */
.megamenu__col h4 {
  margin-top: 0;
  margin-bottom: 1rem;
  font-size: 1.1em;
}

/* Links styling */
.megamenu__col a {
  text-decoration: none;
  color: inherit;
}

.megamenu__col a:hover {
  text-decoration: underline;
}

/* Newsletter Container Styling */

.newsletter-container {
  /* background: linear-gradient(145deg, #262626, #333333) !important; */
  background: black;
  border-radius: 8px; /* Slightly rounded edges */
  max-width: 1000px; /* Hardcoded max width */
  margin-bottom: 40px !important;
  padding: 1rem; /* Add inner padding */
  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.3); /* Subtle shadow */
  color: #f5f5f5; /* Light gray text */
  padding: 2rem;
  transition: all 0.3s ease-in-out;
}

/* Align content in the newsletter */
.newsletter-container h4,
.newsletter-container p {
  text-align: center; /* Center align */
  color: #fff; /* White text for titles and paragraphs */
  margin-bottom: 1.5rem;
}

.newsletter-container p {
  font-size: 14px;
}

.newsletter-container .h4 {
  font-size: 18px;
}

.newsletter-section__image {
  max-height: 340px;
}

.newsletter-section__image img {
  padding-top: 30px;
  max-height: 300px;
}

/* Form Styling */
.newsletter-container form {
  display: flex;
  flex-direction: column; /* Stack elements */
  align-items: center;
  gap: 1rem; /* Space between elements */
  /* margin-top: 1.5rem; */
}

/* Email Input and Button Container */
.newsletter-form {
  display: flex;
  justify-content: center; /* Align horizontally */
  align-items: center; /* Align input and button vertically */
  gap: 1rem; /* Spacing between input and button */
  width: 100%; /* Ensure full width alignment */
}

/* Input Field Styling */
.newsletter-form input[type="email"] {
  flex: 1; /* Make input flexible */
  max-width: 600px; /* Add a max width for email input */
  padding: 1rem; /* Add inner padding */
  border: 1px solid #444; /* Border for the input */
  border-radius: 5px; /* Slight rounding */
  background-color: #222; /* Dark background */
  color: #fff; /* White text */
  font-size: 0.9rem;
}

.newsletter-form input[type="email"]::placeholder {
  color: #aaa; /* Placeholder text color */
}

/* Button Styling */
.newsletter-form button {
  flex-shrink: 0; /* Prevent button from shrinking */
  padding: 1rem 2rem; /* Adjust button padding */
  background-color: #444; /* Dark button background */
  color: #fff; /* Button text color */
  border: none;
  font-size: 0.9rem;
  border-radius: 5px;
  cursor: not-allowed; /* Default state: no pointer action */
  transition: background-color 0.3s ease-in-out;
}

.newsletter-form button:disabled {
  background-color: #666; /* Grayed-out button when disabled */
  cursor: not-allowed; /* Prevent pointer on hover */
}

.newsletter-form button:not(:disabled):hover {
  background-color: #888; /* Hover effect only if enabled */
  cursor: pointer;
}

/* Checkbox and Label Styling */
.newsletter-agreement {
  display: flex;
  align-items: flex-start;
  gap: 0.5rem;
  max-width: 800px; /* Limit width for better readability */
  ]line-height: 1.4;
  color: #f5f5f5;
  margin-top: 1rem; /* Add space above checkbox */
}

.newsletter-agreement input[type="checkbox"] {
  margin-top: 0.2rem; /* Align checkbox with text */
  width: 1rem;
  height: 1rem;
}

.newsletter-agreement label {
  display: inline-block;
  font-size: 0.8rem !important; /* Smaller text */
  line-height: 1.3; /* Tighter line spacing */
  cursor: pointer;
}

/* Responsive Adjustments */
@media (max-width: 768px) {
  .newsletter-container {
    padding: 1rem;
  }
  .newsletter-form {
    flex-direction: column; /* Stack input and button on small screens */
    gap: 0.5rem;
  }
  .newsletter-form input[type="email"],
  .newsletter-form button {
    width: 100%;
    font-size: 0.9rem;
  }
  .newsletter-agreement {
    text-align: center; /* Center align checkbox on small screens */
  }
}

/* Newsletter Input Group */
.newsletter-input-group {
  display: flex;
  justify-content: center; /* Center align horizontally */
  align-items: center; /* Align items vertically */
  gap: 1rem; /* Space between input and button */
  width: 100%; /* Ensure full width alignment */
}

/* Input Field Styling */
.newsletter-input-group input[type="email"] {
  flex: 1; /* Make input flexible */
  max-width: 600px; /* Add a max width for email input */
  padding: 1rem; /* Add inner padding */
  border: 1px solid #444; /* Border for the input */
  border-radius: 5px; /* Slight rounding */
  background-color: #222; /* Dark background */
  color: #fff; /* White text */
  font-size: 1rem;
}

.newsletter-input-group input[type="email"]::placeholder {
  color: #aaa; /* Placeholder text color */
}

/* Button Styling */
.newsletter-input-group button {
  flex-shrink: 0; /* Prevent button from shrinking */
  padding: 1rem 2rem; /* Adjust button padding */
  background-color: #444; /* Dark button background */
  color: #fff; /* Button text color */
  border: none;
  font-size: 1rem;
  border-radius: 5px;
  cursor: not-allowed; /* Default state: no pointer action */
  transition: background-color 0.3s ease-in-out;
}

.newsletter-input-group button:disabled {
  background-color: #666; /* Grayed-out button when disabled */
  cursor: not-allowed; /* Prevent pointer on hover */
}

.newsletter-input-group button:not(:disabled):hover {
  background-color: #888; /* Hover effect only if enabled */
  cursor: pointer;
}

/* Checkbox and Label Styling */
.newsletter-agreement {
  display: flex;
  align-items: flex-start;
  gap: 0.5rem;
  max-width: 800px; /* Limit width for better readability */
  font-size: 0.6rem; /* Smaller text for checkbox label */
  line-height: 1.4;
  color: #f5f5f5;
  margin-top: 1rem; /* Add space above checkbox */
}

.newsletter-agreement input[type="checkbox"] {
  margin-top: 0.2rem; /* Align checkbox with text */
  width: 1rem;
  height: 1rem;
}

.newsletter-agreement label {
  display: inline-block;
  font-size: 0.8rem; /* Smaller text */
  line-height: 1.3; /* Tighter line spacing */
  cursor: pointer;
}

/* Mobile Optimizations */
@media (max-width: 768px) {
  .newsletter-container {
    margin: 1rem !important;
  }
  /* Hide image on mobile */
  .newsletter-section__image {
    display: none;
  }

  /* Optimize content layout */
  .newsletter-section {
    flex-direction: column;
    gap: 1rem;
  }

  .newsletter-section__content {
    width: 100%;
    max-width: 100%;
    padding: 2rem 1rem;
  }

  /* Enhance form elements for mobile */
  .newsletter-input-group {
    flex-direction: column;
    width: 100%;
    gap: 0.75rem;
  }

  .newsletter-input-group input[type="email"] {
    width: 100%;
    max-width: 100%;
    padding: 1rem;
    font-size: 16px; /* Prevents iOS zoom on focus */
    height: 3.5rem;
  }

  .newsletter-input-group button {
    width: 100%;
    padding: 1rem;
    height: 3.5rem;
    margin-top: 0.5rem;
  }

  /* Improve checkbox area for touch */
  .newsletter-agreement {
    margin-top: 1.25rem;
    padding: 0.5rem;
  }

  .newsletter-agreement input[type="checkbox"] {
    width: 1.5rem;
    height: 1.5rem;
    margin-top: 0.25rem;
  }

  .newsletter-agreement label {
    font-size: 0.9rem;
    line-height: 1.4;
    padding-left: 0.5rem;
  }
}

/* Extra small device optimizations */
@media (max-width: 480px) {
  .newsletter-section__content {
    padding: 0 0.5rem;
  }

  .newsletter-input-group input[type="email"],
  .newsletter-input-group button {
    height: 3rem;
    font-size: 15px;
  }
}

.newsletter-input-group input[type="email"]:focus {
  border-color: #666;
  outline: none;
  box-shadow: 0 0 0 2px rgba(255, 255, 255, 0.1);
}

.newsletter-input-group button {
  transition: all 0.2s ease-in-out;
}

/* Custom trust widget overrides */

.my-custom-trustpilot {
  margin-left: 0 !important;
  text-align: left !important;
}

.trustpilot-container {
  display: flex;
  justify-content: flex-start;
  width: 100%;
}

/* .shopify-block[id*="trusted_stars"] {
  width: 80% !important;
  margin-right: auto !important;
  margin-left: 0 !important;
  position: relative;
  left: -60px;
} */

/* product layout when on mobile */

/**
 * Desktop (or larger screens):
 * - heading can go wherever by default
 */
/* .page-width {
  display: flex;
  flex-direction: column;
} */

/* This ensures that heading is first, images second, info third
   but we can override it for larger breakpoints if we want. */
.heading-wrapper {
  order: 1;
}
.images-wrapper {
  order: 2;
}
.rest-of-info-wrapper {
  order: 3;
}

/* On MEDIUM or DESKTOP, you might revert to a row-based layout */
@media screen and (min-width: 768px) {
  .page-width {
    flex-direction: row; /* or revert to none, if you want float-grid, etc. */
  }

  /* If you want images left, heading next, info next, etc.
     But you might also rely on your existing .grid--product-images-left classes.
     Adjust to your actual theme’s classes. */
  .heading-wrapper {
    order: 1; /* or 0 to let theme's floats handle it */
    flex: 1 0 100%; /* possibly full row? up to you */
  }
  .images-wrapper {
    order: 2;
    flex: 1 0 50%;
  }
  .rest-of-info-wrapper {
    order: 3;
    flex: 1 0 50%;
  }
}

/* Custom two-column section */

.custom-info-section {
  margin-bottom: 30px;
}
.custom-info-section h2 {
  margin-bottom: 20px;
  font-size: 33px;
  font-weight: bold;
  text-align: center;
  padding-bottom: 5px;
}
/* .custom-info-section h2::after {
  content: "";
  display: block;
  margin-top: 5px;
  margin-bottom: 33px;
  height: 1px;
  background-color: #ddd;
} */

.custom-info-section h3 {
  margin-bottom: 20px;
  font-size: 30px;
  font-weight: bold;
  padding-bottom: 5px;
}
.custom-info-section h3::after {
  content: "";
  display: block;
  margin-top: 5px;
  margin-bottom: 33px;
  width: 20%;
  height: 1px;
  background-color: #ddd;
}
.custom-info-section h4 {
  margin-bottom: 33px;
  font-size: 26px;
  font-weight: bold;
  padding-bottom: 5px;
}
.custom-info-section h4::after {
  content: "";
  display: block;
  margin-top: 5px;
  margin-bottom: 20px;
  width: 20%;
  height: 1px;
  background-color: #ddd;
}
.custom-info-text {
  column-count: 2;
  column-gap: 20px;
  line-height: 1.5;
  color: #333;
}
@media screen and (max-width: 768px) {
  .custom-info-text {
    column-count: 1;
  }
}

@media (min-width: 769px) {
  .custom-info-section h2, .custom-info-section h3 {
    margin-top: 68px !important;
  }
}

/* FILTERS */

/* 1) Responsive Sidebar */
.item-grid__sidebar {
  flex: 0 0 25%;
  max-width: 300px;
}

@media (max-width: 1024px) {
  .item-grid__sidebar {
    flex: 0 0 30%;
    max-width: 280px;
  }
}

@media (max-width: 768px) {
  .item-grid__sidebar {
    flex: 0 0 100%;
    max-width: 100%;
    margin-bottom: 20px;
  }
}

/* 2) Responsive Text Sizes */
.collection-sidebar .filter-wrapper,
.collection-sidebar__group label,
.filter-sort,
.modell-nested-list__link,
.tag-list__header {
  font-size: 0.85rem;
  line-height: 1.4;
  color: #333;
}

@media (max-width: 768px) {
  .collection-sidebar .filter-wrapper,
  .collection-sidebar__group label,
  .filter-sort,
  .modell-nested-list__link,
  .tag-list__header {
    font-size: 0.8rem;
  }
}

/* 3) Collapsible Elements */
.collapsible-trigger__layout--inline {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.collapsible-trigger__icon--open {
  margin-left: auto;
  color: #666;
}

.collapsible-content {
  /* Removed height transition */
}

.collection-sidebar__group--modell .collapsible-content__inner {
  overflow-y: auto;
}

/* 4) Titles/Headings */
.tag-list__header,
.collapsible-trigger__layout--inline span {
  font-weight: 600;
  color: #222;
}

/* 5) Nested List Structure */
.modell-nested-list {
  list-style: none;
  margin: 0;
  padding: 0;
}

.modell-nested-list--child {
  margin-left: 1rem; /* Adjust as needed */
}

/* .modell-nested-list__item {
  position: relative;
  margin-bottom: 0.3rem;
  padding-right: 2rem;
} */

.modell-nested-list__link {
  text-decoration: none;
  color: #333;
  transition: color 0.2s ease, font-weight 0.2s;
}

.modell-nested-list__link:hover {
  color: #000;
  font-weight: 500;
}

.modell-nested-list__toggle {
  position: absolute;
  right: 0.5rem;
  top: 50%;
  transform: translateY(-50%);
  font-size: 0.8rem;
  font-weight: 600;
  color: #555;
  background: none;
  border: none;
  cursor: pointer;
  padding: 0; /* Remove padding */
  line-height: 1.4;
}

.modell-nested-list__toggle:hover {
  color: #000;
}

/* 6) Filter Wrapper Styling */
.collection-sidebar .filter-wrapper {
  border: 1px solid #ccc;
  background-color: #fff;
  padding: 15px;
  border-radius: 6px;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.07);
}

/* 7) Visibility */
.is-hidden {
  display: none !important;
}

/* Optional: Adjusting nested collapsible content max-height */
.collection-sidebar__group--modell .collapsible-content__inner {
  max-height: 300px;
  overflow-y: auto;
}
/* .collection-sidebar__group--1 .collapsible-content__inner {
  max-height: 1039px !important;
  overflow-y: auto;
} */

.collapsible-content--all {
  max-height: 0;
  overflow: hidden;
  transition: max-height 0.3s ease;
}

.collapsible-content--all.is-open {
  max-height: 1200px; /* Arbitrary large value */
}

/* price styling */

/* Main container */
.block-price {
  display: block;
  margin-bottom: 1.5rem;
}

.block-price__container {
  display: flex;
  align-items: baseline;
  margin-bottom: 0.5rem;
}

/* Main price styling */
.label.variant__label {
  font-size: 1.25rem;
  color: #1f2937;
  font-weight: bold;
  text-transform: uppercase;
}

/* Hide regular price when on sale */
[data-on-sale] .block-price__regular {
  display: none;
}

/* Price amount styling */
/* Price amount styling */
.block-price__sale .product__price span,
.block-price__regular .product__price span,
.block-price__sale span span[aria-hidden="true"],
.block-price__regular span span[aria-hidden="true"] {
  font-size: 2rem;
  font-weight: bold;
  color: #dc2626 !important; /* Default price color */
}

/* Red price only when on sale */
[data-on-sale] .block-price__sale .product__price span,
[data-on-sale] .block-price__sale span span[aria-hidden="true"] {
  color: #dc2626 !important;
}

/* Reference number */
.block-price p:first-of-type {
  font-size: 0.875rem;
  color: #4b5563;
  margin: 0.5rem 0;
}

/* Additional info line */
.block-price p:nth-of-type(2),
.block-price > span {
  display: inline;
  font-size: 0.875rem;
  color: #4b5563;
}

/* Savings amount */
.block-price > span[style*="color: green"] {
  color: #059669 !important; /* Override inline style with a more subtle green */
}

/* Add separators between info elements */
.block-price p:nth-of-type(2):has(+ span)::after,
.block-price > span:not([style*="color: green"]):has(+ span)::after {
  content: "|";
  margin: 0 0.5rem;
  color: #9ca3af;
}

/* Hide unnecessary elements */
.visually-hidden,
.block-price__save,
.block-price__unit-price {
  display: none;
}

/* Price superscript styling */
.product__price sup {
  font-size: 0.875rem;
  top: -0.5em;
}

/* Mobile responsiveness */
@media (max-width: 768px) {
  .block-price__container {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    align-items: baseline;
    gap: 0.5rem;
  }

  .block-price__sale .product__price span,
  .block-price__regular .product__price span,
  .block-price__sale span span[aria-hidden="true"],
  .block-price__regular span span[aria-hidden="true"] {
    font-size: 1.75rem;
  }
}

/* product page mobile styling */

@media screen and (max-width: 768px) {
  /* Make product-blocks-container a flex container */
  .product-blocks-container {
    display: flex;
    flex-direction: column;
  }

  /* Target Trusted Shops widget's container more specifically */
  .shopify-block[id*="trusted_shops_easy_integration_trusted_stars"] {
    order: 4 !important;
  }

  /* Target Trustpilot container more specifically */
  .trustpilot-container {
    order: 4 !important;
  }

  /* Price block */
  .block-price {
    order: 1 !important;
  }

  /* Buy buttons */
  .block-buy-buttons {
    order: 2 !important;
  }

  /* Payment icons */
  .image-container {
    order: 3 !important;
  }

  /* Delivery info */
  .delivery-info {
    order: 4 !important;
  }

  /* Move trust widgets after delivery info */
  .shopify-block[id*="trusted_shops_easy_integration_trusted_stars"],
  .trustpilot-container {
    order: 5 !important;
  }

  /* Advisor section */
  .advisor-section.desktop-only {
    display: none;
  }

  .advisor-section.mobile-only {
    order: 6 !important;
  }
}

/* Desktop styles */
@media screen and (min-width: 769px) {
  .advisor-section.mobile-only {
    display: none;
  }

  .advisor-section.desktop-only {
    display: flex;
  }
}

/* CAPITALIZE HEADERS */

h1,
.h1,
h2,
.h2,
h3,
.h3,
.clone-heading {
  text-transform: uppercase !important;
  letter-spacing: 0.05em; /* Adding slight letter spacing for better readability */
}

/* FOOTER OVERRIDES */

.footer__hours {
  margin-top: 1rem;
  color: white;
  font-size: 0.875rem;
  line-height: 1.5;
}

.icon-and-text {
  display: flex;
  align-items: center;
  gap: 0.5rem;
}

.footer__menu--underline a {
  color: white;
  text-decoration: none;
}

.footer__menu--underline a:hover {
  text-decoration: underline;
}

/* 360 view styling */

.product-360-view {
  margin-top: 1.5rem;
}

.product-360-view .btn {
  background-color: white;
  color: #333333;
  border: 1px solid #e5e5e5;
  padding: 0.75rem 1.5rem;
  border-radius: 8px;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.05);
  transition: all 0.3s ease;
}

.product-360-view .btn:hover {
  transform: translateY(-1px);
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
  border-color: #d1d1d1;
}

/* grid item styling (product tiles) */

/* Base styles (desktop-first approach) */
.grid-product__title {
  font-size: 1.02rem;
}

/* Price styling - Making current price consistently red */
.grid-product__price--current {
  font-weight: 800;
  font-size: 1.2rem;
  color: #308D55; /* Setting base red color for all current prices */
}

/* We can remove the .price-black and .price-red classes since all current prices will be red */
.grid-product__price--original {
  font-size: 0.95rem;
  color: #666666; /* Adding a muted gray color for original price */
}

.grid-item__meta-main {
  width: 45%;
  float: left;
  /* display: -webkit-box;
  -webkit-line-clamp: 5;
  overflow: hidden;
  -webkit-box-orient: vertical; */
}

.grid-item__meta-secondary {
  width: 35%;
  float: right;
  text-align: right;
}

/* Mobile optimizations */
@media screen and (max-width: 768px) {
  .grid-product__title {
    font-size: 0.85rem;
    line-height: 1.2;
  }

  /* Price scaling for mobile */
  .grid-product__price--current {
    font-size: 0.9rem;
  }

  .grid-product__price--original {
    font-size: 0.85rem;
  }

  .grid-item__meta-main {
    width: 55%;
  }

  .grid-item__meta-secondary {
    width: 35%;
  }
}

/* Small mobile devices */
@media screen and (max-width: 480px) {
  .grid-product__title {
    font-size: 0.8rem;
  }

  .grid-product__price--current {
    font-size: 0.9rem;
  }

  .grid-product__price--original {
    font-size: 0.8rem;
  }
}

/* Product tile shipping indicators */
.grid-product__image-wrap {
  position: relative;
  overflow: hidden; /* This ensures the rotated ribbon doesn't overflow */
}

/* Truck icon styling - Updated position to top left */
.product-tile__truck-icon {
  position: absolute;
  top: 0;
  left: 0; /* Changed from 'right: 0' to 'left: 0' to move to the left corner */
  width: clamp(2rem, 15%, 3rem);
  height: clamp(2rem, 15%, 3rem);
  z-index: 1;
  color: #00a651;
  padding: 0.25rem;
}

/* Delivery ribbon styling */
.product-tile__delivery-ribbon {
  position: absolute;
  top: 12%;
  left: -40%;
  z-index: 1;
  transform: rotate(-45deg);
  background-color: #000000;
  padding: 0.25rem 1rem;
  width: calc(100% + 2rem);
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 0.25rem;
  text-transform:capitalize;
}

.product-tile__delivery-ribbon img {
  width: 14px;
  height: 14px;
  object-fit: contain;
}

.product-tile__delivery-ribbon span {
  color: #ffffff;
  font-size: 0.75rem; /* This equals text-xs */
  white-space: nowrap;
}

/* Mobile optimizations */
@media screen and (max-width: 768px) {
  .product-tile__delivery-ribbon {
    font-size: 0.7rem;
    padding: 0.2rem 0.75rem;
  }

  .product-tile__delivery-ribbon img {
    width: 12px;
    height: 12px;
  }
}

/* NEW PRODUCT GRID OPTIMIZATIONS COURTESY OF CLAUDE */

/* Make the grid item a "container" for container queries */
.grid-item__meta {
  /* You can choose 'size' or 'inline-size' depending on your layout,
     but 'inline-size' is usually enough if you only care about width. */
  container-type: inline-size;
  container-name: product-grid;
}

/* Container query if the .grid-item's inline width is <= 334px */
@container product-grid (max-width: 334px) {
  .grid-product__title {
    font-size: 0.9rem;
    line-height: 1;
  }

  /* Force the price onto one line using white-space & maybe a narrower font-size */
  .grid-product__price--current {
    font-size: 1.1rem;
  }

  /* Adjust layout so title doesn’t overlap bottom elements */
  .grid-item__meta-main {
    width: 45%;
  }

  .grid-item__meta-secondary {
    width: 45%;
  }
}

/* Another container breakpoint if <= 200px */
@container product-grid (max-width: 200px) {
  .grid-product__title {
    font-size: 0.8rem;
  }
  .grid-product__price--current {
    font-size: 0.9rem;
  }

  /* Adjust layout so title doesn’t overlap bottom elements */
  .grid-item__meta-main {
    width: 38%;
  }

  .grid-item__meta-secondary {
    width: 48%;
  }
}

/* And if you like, a small tweak at <= 160px, etc. */
@container product-grid (max-width: 160px) {
  .grid-product__title {
    font-size: 0.75rem;
  }
  .grid-product__price--current {
    font-size: 0.85rem;
  }
  /* Possibly stack title & price? */
}

/* NEW PRODUCT GRID OPTIMIZATIONS COURTESY OF CLAUDE */

/* Navigation stuff */

/* Enhanced styling for Newcomers link */
.site-nav__link[href="/collections/newcomers"] {
  color: #ff0000;
  font-weight: 600; /* Make it slightly bolder */
  position: relative;
}

/* Optional: Add a subtle animation on hover */
.site-nav__link[href="/collections/sale"]:hover {
  color: #cc0000;
  transition: color 0.2s ease-in-out;
}

/* blog header specific styles */

/* Blog Header Styles */
.blog-main-header {
  margin-bottom: 2rem;
  text-align: left;
  border-bottom: none;
}

.section-header__description {
  display: block;
  font-size: 1rem;
  font-weight: normal;
  margin-top: 0.75rem;
  color: var(--color-text-light);
  font-family: var(--font-stack-body);
  letter-spacing: 0.02em;
  line-height: 1.4;
}

/* Ensure proper spacing between elements */
.blog-header + .blog-main-header {
  margin-top: 3rem;
}

/* Responsive adjustments */
@media screen and (max-width: 768px) {
  .section-header__description {
    font-size: 0.9rem;
    margin-top: 0.5rem;
  }

  .blog-main-header {
    margin-bottom: 1.5rem;
  }
}

.site-nav {
  display: flex; /* Ensure header items are in a row */
  align-items: center; /* Vertically align items */
}

.site-nav__icons {
  display: flex;
  align-items: center;
  gap: 10px; /* Add spacing between items */
}

.trusted-shops-badge {
  display: flex;
  align-items: center;
}

.trusted-shops-badge img {
  /* transform: scale(1.2);
  margin: -10px 0; */
  height: 50px; /* Adjust height for alignment */
  padding: 0;
  width: auto;
  object-fit: contain;
}

/* Blog article styling */

/***********************************
* Magazine-style blog overrides
***********************************/

/* 1) Overall grid layout on the main blog page */
/* .new-grid {
  display: grid;
  grid-gap: 2rem;
  grid-template-columns: 1fr;
}
 */
/* If you want the first (large) item full width,
   followed by 2 columns for the rest, you can do something like: */
.new-grid .grid-article[data-style="large"]:nth-child(1) {
  /* The “featured” item up top */
  grid-column: 1 / -1; /* spans all columns */
}

/* For subsequent articles, you might want a 2 or 3 column layout.
   E.g. 2-column layout: */
@media screen and (min-width: 768px) {
  .new-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

/* 2) Style the large item differently */
.grid-article[data-style="large"] {
  /* Bigger fonts, bigger image, etc. */
}
.grid-article[data-style="large"] .article__title {
  font-size: 1.8rem;
  line-height: 1.3;
  /* etc. */
}
.grid-article[data-style="large"] .grid-article__meta {
  /* Possibly show date + reading time more prominently here */
}

/* 3) “medium” or “compact” articles get smaller styling */
.grid-article[data-style="medium"] .article__title {
  font-size: 1.2rem;
  line-height: 1.4;
}
.grid-article[data-style="compact"] .article__title {
  font-size: 1rem;
}

/* 4) Example styling for a subheading like “Weitere aktuelle Artikel” */
h2.subheading-articles {
  font-size: 1.4rem;
  margin: 2rem 0 1rem;
  text-transform: uppercase;
  letter-spacing: 1px;
}

/* 5) If you want a special date/reading-time styling,
      you can add or override your date markup:
      e.g. a class .article-meta__info or .reading-time
      that you place in your Liquid code.
      Then do something like: */
.article__sub-meta-date,
.reading-time {
  font-size: 0.875rem;
  margin-right: 1rem;
}

/* 6) Tag styling, if you want them as small pill badges */
.article-tag {
  background-color: #ddd;
  padding: 0.2em 0.6em;
  border-radius: 12px;
  font-size: 0.75rem;
  margin-right: 0.4rem;
}

/***************************************
 * 1) "Large" (hero) article in the main blog
 *    Cropped top and bottom, wide aspect ratio
 ***************************************/
.blog--general .grid-article[data-style="large"] .image-wrap {
  /* Force a certain height so it's wide & short (like a hero). */
  /* Adjust this as desired for your design. */
  height: 0;
  padding-bottom: 35%; /* ~2.85:1 ratio (choose any ratio you want) */
  position: relative;
  overflow: hidden;
}
.blog--general .grid-article[data-style="large"] .image-wrap img {
  position: absolute;
  width: 100%;
  height: 100%;
  object-fit: cover; /* Crop top & bottom */
  object-position: center;
  left: 0;
  top: 0;
}

/***************************************
 * 2) The "autoren" blog images: small & circular
 ***************************************/
.blog--autoren .grid-article__image {
  width: 120px; /* or however wide you want the circle */
  height: 120px;
  margin: 0 auto 1rem; /* center the avatar; optional */
}
.blog--autoren .grid-article__image .image-wrap {
  height: 100% !important;
  padding-bottom: 0 !important;
  overflow: hidden;
  border-radius: 50%;
  position: relative;
}
.blog--autoren .grid-article__image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  border-radius: 50%;
}

/***************************************
 * 3) A bit of layout for the "new-grid"
 *    (optional, if you want specific columns)
 ***************************************/
.blog--general .new-grid {
  display: grid;
  gap: 2rem;
  grid-template-columns: 1fr; /* single column for mobile */
}
@media (min-width: 768px) {
  .blog--general .new-grid {
    grid-template-columns: repeat(2, 1fr);
  }
  /* The large one can span both columns if you want it “full-width” */
  .blog--general .grid-article[data-style="large"]:nth-child(1) {
    grid-column: 1 / -1;
  }
}

/***************************************
 * 4) If you need smaller images in "medium" style
 *    Just some example rules:
 ***************************************/
.grid-article[data-style="medium"] .article__title {
  font-size: 1.1rem;
}
.grid-article[data-style="large"] .article__title {
  font-size: 1.4rem;
  font-weight: bold;
}

.blog--general .grid-article[data-style="medium"] .image-wrap {
  height: 0;
  padding-bottom: 65%; /* ~2.85:1 ratio (choose any ratio you want) */
  position: relative;
  overflow: hidden;
}

/* authors' section blog styling */

/* General container for authors */
.authors-section-container {
  margin: 0 auto;
  max-width: 1200px;
  padding: 2rem 1rem;
  text-align: center;
}

.authors-section-header {
  margin-bottom: 2rem;
}

.authors-section-title {
  font-size: 2rem;
  font-weight: 700;
  text-transform: uppercase;
  margin-bottom: 1rem;
}

.authors-section-intro {
  font-size: 1rem;
  color: #555;
  line-height: 1.5;
}

/* Author cards layout */
.authors-section-list {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  gap: 2rem;
  margin-top: 2rem;
}

.authors-section-card {
  border: 1px solid #ddd;
  border-radius: 8px;
  overflow: hidden;
  text-align: left;
  background-color: #fff;
  padding: 1.5rem;
}

.authors-section-photo img {
  width: 100px;
  height: 100px;
  object-fit: cover;
  border-radius: 50%;
  margin: 0 auto 1rem;
}

.authors-section-info {
  text-align: center;
}

.authors-section-name {
  font-size: 1.2rem;
  font-weight: 600;
  margin-bottom: 0.5rem;
}

.authors-section-excerpt {
  font-size: 0.9rem;
  color: #666;
  margin-bottom: 1rem;
}

.authors-section-link {
  font-size: 0.9rem;
  color: #0071e3;
  text-decoration: underline;
}

/* Footer styling */
.authors-section-footer {
  margin-top: 3rem;
  border-top: 1px solid #ddd;
  padding-top: 1.5rem;
}

.authors-section-footer h2 {
  font-size: 1.5rem;
  font-weight: 700;
}

.authors-section-footer p {
  font-size: 0.9rem;
  color: #555;
}

.authors-section-footer a {
  color: #0071e3;
  text-decoration: underline;
}

/* CUSTOM FONT FOR HEADERS */

h1,
h1 a,
h2,
h2 a,
h3,
h3 a,
h4,
h4 a,
h5,
h5 a,
h6,
h6 a,
#nav li a,
div.title a,
.headline,
.subtitle,
.clone-heading {
  font-family: 'DM Sans' !important;
}

/* HEADER NAV DISPLAYS */

/* Desktop styles */
.hero__text-wrap {
  position: absolute;
  width: 100%;
  height: 100%;
  left: 0;
  top: 0;
  z-index: 5;
}

.hero__text-content {
  position: absolute;
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
}

.hero__text-shadow {
  width: 100%;
  padding: 2.5rem 0;
  background: linear-gradient(
    to bottom,
    rgba(0, 0, 0, 0.3) 0%,
    rgba(0, 0, 0, 0.5) 50%,
    rgba(0, 0, 0, 0.3) 100%
  );
}

.hero__top-subtitle,
.hero__top-subtitle .hero__animation-contents {
  color: white;
  text-align: center;
  margin-bottom: 1.5rem;
  text-transform: uppercase;
  letter-spacing: 0.03em;
  text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.5);
}

.hero__title {
  color: white;
  text-align: center;
  letter-spacing: 0.05em;
  text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.5);
  margin: 0;
}

.hero__animation-contents {
  padding: 0 2rem;
}

/* Mobile adjustments */
@media only screen and (max-width: 768px) {
  .hero__text-shadow {
    padding: 2rem 0.5rem;
    min-height: 200px;
  }

  .hero__animation-contents {
    padding: 0 0.75rem;
    max-width: 100%;
    word-wrap: break-word;
  }

  .hero__top-subtitle,
  .hero__top-subtitle .hero__animation-contents {
    font-size: clamp(1.65rem, 2vw, 0.85rem) !important;
    line-height: 1.2;
    margin-bottom: 0.75rem;
    padding: 0 0.5rem;
  }

  .hero__title,
  .hero__title p {
    font-size: clamp(1.9rem, 2.5vw, 1.2rem) !important;
    line-height: 1.3 !important;
    padding: 0 0.5rem;
    margin: 0;
    word-wrap: break-word;
    overflow-wrap: break-word;
    hyphens: auto;
  }
}

/* Extra small devices */
@media only screen and (max-width: 480px) {
  .hero__text-shadow {
    padding: 1.5rem 0.5rem;
  }
}

/* Override any page-width constraints */
.hero__text-wrap .page-width {
  max-width: none;
  padding: 0;
}

/* Ensure smooth transitions */
.hero__text-shadow,
.hero__title,
.hero__top-subtitle {
  transition: all 0.3s ease-in-out;
}

/* HIDE ANNOUNCEMENT BAR ON MOBILE */

@media screen and (max-width: 767px) {
  #AnnouncementSlider {
    display: none;
  }
  .site-nav__icons {
      gap: 0;
  }
}

/* Design Packs enforcements */

/* Exclude the problematic section by ID */
.dsgn-pck__richtext-columns:not(
    #DP--template--24242027331962__design_pack_richtext_columns_EFTBeL
  ) {
  /* Original styles */
  width: 100%;
  max-width: 100%;
  margin: 0 auto;
  box-sizing: border-box;
}

.dsgn-pck__richtext-columns:not(
    #DP--template--24242027331962__design_pack_richtext_columns_EFTBeL
  )
  img {
  width: 100%;
  height: auto;
  object-fit: contain;
}

.dsgn-pck__richtext-columns:not(
    #DP--template--24242027331962__design_pack_richtext_columns_EFTBeL
  )
  * {
  max-width: 100%;
  height: auto;
  box-sizing: border-box;
}

/* Mobile-specific adjustments */
@media screen and (max-width: 768px) {
  .dsgn-pck__richtext-columns:not(
      #DP--template--24242027331962__design_pack_richtext_columns_EFTBeL
    )
    .dsgn-pck__heading {
    font-size: calc(
      var(--dp-g-heading-size, var(--dp-heading-size, 35px)) * 0.7
    );
    white-space: normal;
  }

  .dsgn-pck__richtext-columns:not(
      #DP--template--24242027331962__design_pack_richtext_columns_EFTBeL
    ) {
    padding: 0 15px;
  }

  .dsgn-pck__richtext-columns:not(
      #DP--template--24242027331962__design_pack_richtext_columns_EFTBeL
    )
    [class*="column"] {
    width: 100%;
    float: none;
    margin-left: 0;
    margin-right: 0;
  }
  .dsgn-pck__sizer.dsgn-pck__grid {
    margin-left: 0 !important;
  }
}

/* HERO BUTTON ON DESKTOP YO */

@media screen and (min-width: 769px) {
  .slideshow__slide .hero__link {
    position: absolute;
    bottom: -150px; /* Adjust this value to set the distance from the bottom of the slide */
    left: 50%;
    transform: translateX(-50%);
    z-index: 10; /* Ensure the button stays on top of other elements */
  }

  .slideshow__slide {
    position: relative; /* Ensure the slide itself is the positioning context for the button */
  }
}

/* LINK OVERRIDES MAKE EM VISIBLE */

/* Style links in paragraphs */
p a {
  text-decoration: underline; /* Adds an underline to links */
  color: inherit; /* Ensures the link color matches the surrounding text */
  transition: all 0.3s ease; /* Adds a smooth transition effect */
}

/* Hover effect for links */
p a:hover {
  color: rgba(255, 255, 255, 0.8); /* Slightly lighter color on hover */
  text-decoration: none; /* Removes underline on hover */
  background-color: rgba(0, 0, 0, 0.1); /* Adds a subtle background color */
}

/* Adjust for different text colors */
p a:hover {
  color: var(--hover-link-color, inherit); /* Use a variable for flexibility */
}

/* PRODUCT PAGE STYLING REFERENCE SPACE */

.product-reference,
.product-subject {
  margin-top: 0; /* No space at the top */
  margin-bottom: 0; /* No space at the bottom */
  padding-bottom: 0 !important;
  margin-bottom: 0 !important;
}

.block-price.product-block {
  margin-bottom: 0 !important;
}

/* TRUSTED SHOPS DIVIDERS ON PRODUCT PAGES */

/* Add dividers for the specific section on product pages */
.template-product
  #shopify-section-template--24242027331962__17348227904e1592dd {
  margin: 40px auto 10px auto;
  padding: 0px auto 0px auto;
}

.template-product
  #shopify-section-template--24242027331962__17348227904e1592dd::before,
.template-product
  #shopify-section-template--24242027331962__17348227904e1592dd::after {
  content: "";
  display: block;
  width: 100%;
  max-width: 1400px;
  height: 1px;
  background-color: #dddddd;
  margin: 0 auto;
}

/* OVERRIDES TO CUSTOM MODELL FILTER */

/* 1) Ensure the plus/minus toggles have enough space on the right */
/* .modell-nested-list__item {
  position: relative;
  margin-bottom: 0.3rem;
  padding-right: 2.5rem;
} */

/* 2) Let the model filter expand fully, no scrollbars */
.collection-sidebar__group--modell .collapsible-content__inner {
  max-height: none !important;
  overflow-y: visible !important;
}

/* 3) Also override the .is-open state to be sure it can expand */
.collection-sidebar__group--modell .collapsible-content--all.is-open {
  max-height: none !important;
}

/* Wrap the link + toggle in a flex container */
.modell-nested-list__heading {
  display: flex;
  justify-content: space-between; /* link left, button right */
  align-items: center;
  padding: 0.4rem 0; /* spacing around the row */
}

/* The link style */
.modell-nested-list__link {
  text-decoration: none;
  color: #333;
  font-weight: normal;
  /* etc. */
}

/* The toggle button style */
.modell-nested-list__toggle-btn {
  background: none;
  border: none;
  cursor: pointer;
  /* no absolute positioning now! */
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0.25rem;
  margin-left: 1rem; /* optional */
}

/* The icon itself */
.modell-nested-list__toggle-icon {
  width: 1rem;
  height: 1rem;
  transition: transform 0.3s ease; /* for rotation */
  transform: rotate(0deg);
  /* by default it's a plus sign. We'll rotate to make it a 'minus' sign. */
}

/* When the sublist is open, add a class that rotates the icon.
   For example, rotate 45 deg to get the "x" or "minus" shape (depending on your lines).
   Or rotate 90 deg if you want a caret to point sideways, etc. */
/* Use > to target only direct children */
.modell-nested-list__item.is-open
  > .modell-nested-list__heading
  > .modell-nested-list__toggle-btn
  > .modell-nested-list__toggle-icon {
  transform: rotate(45deg);
}

.modell-nested-list__link.is-active {
  font-weight: 700; /* or 600, whatever “bold” you want */
  text-decoration: underline; /* optional */
}

/* TOOLBAR CUSTOM STYLING */

.toolbar {
  display: flex;
  align-items: center;
  justify-content: center; /* Optional: centers horizontally as well */
  text-align: center; /* Optional: aligns text centrally */
  min-height: 60px;
  max-height: 80px;
}

.announcement-bar {
  font-size: clamp(
    8px,
    1vw,
    12px
  ) !important; /* Dynamically resize based on viewport width */
  white-space: nowrap; /* Prevent wrapping */
  overflow: hidden; /* Prevent content overflow */
  text-overflow: ellipsis; /* Add ellipsis if needed */
  box-sizing: border-box; /* Include padding/borders in the width */
}

.toolbar__item--announcements {
  display: flex; /* Ensure proper layout */
  justify-content: center; /* Center content horizontally */
  align-items: center; /* Center content vertically */
}

/* FOOTER CUSTOM STYLING */

.footer__title.h4 {
  margin-bottom: 18px !important;
}

/* LOAD MORE BUTTON COLLECTIONS/SEARCH */

.collection-load-more {
  text-align: center;
  margin: 2rem 0;
  display: flex;
  justify-content: center;
}

/* CUSTOM STYLING PAUL */

@media screen and (max-width: 768px) {
  .icon-text-list .container {
    padding-left: 5px !important;
  }
  .icon-text-list .icon-text-item {
    padding-left: 0 !important;
  }
}

/* CART ITEM NUMBER BUBBLE */

.cart-link__bubble.cart-link__bubble--visible {
  background-color: 'blue' !important;
}

/* HULK */

.hulk-powered-wrapper.text-right {
  display: none !important;
}

/* SOME MORE SOPHISTICATED FOOTER GRID SETUP */

.footer__blocks {
  display: grid;
  grid-gap: 1rem; /* Space between columns (optional) */
  /* Start with five columns at desktop width */
  grid-template-columns: repeat(5, 1fr);
}

@media (max-width: 1200px) {
  /* If screen is narrower than 1200px, switch to three columns */
  .footer__blocks {
    grid-template-columns: repeat(3, 1fr);
  }
}

@media (max-width: 800px) {
  /* Go down to two columns at <= 800px */
  .footer__blocks {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (max-width: 500px) {
  /* Finally, stack in a single column on small phones */
  .footer__blocks {
    grid-template-columns: 1fr;
  }
}

/* HEADER TOOLBAR WITH LANGUAGE-CURRENCY SELECTION */

.toolbar__item.small--hide,
.toolbar__item.small--hide .disclosure-list__label,
.toolbar__item.small--hide .disclosure__toggle {
  font-size: 12px !important;
}

/* Add some spacing between the text and the SVG */
.disclosure__toggle .disclosure-list__label {
  margin-right: 0.8rem; /* Adjust this value as needed */
}

/* Ensure the SVG stays properly positioned on the right */
.disclosure__toggle .icon-chevron-down {
  position: absolute;
  right: 0.5rem; /* Adjust this value as needed */
  top: 50%;
  transform: translateY(-50%);
}

/* SCROLLING ON MOBILE FILTERS */

/* Make the drawer or its inner container scrollable */
.collection-mobile-filters__holder,
.collection-mobile-filters .filter-wrapper {
  max-height: 100vh;       /* or some offset from the header if needed */
  overflow-y: auto;        /* enable vertical scrolling within the element */
  -webkit-overflow-scrolling: touch; /* for smooth iOS momentum scrolling */
}

/* HEADER SMALLER ON MOBILE */

@media (max-width: 768px) {
  .product-single__title {
    font-size: calc(var(--type-header-size) * 0.7) !important;
    line-height: 1 !important;
  }
  .breadcrumbs li {
    font-size: 10px !important;
  }
}
.breadcrumbs ul {
  line-height: 0.5 !important;
}

/* QUICK BUY */

.shopify-payment-button__more-options {
  display: block !important;
  width: 100% !important;
  /* Copy the same classes as the main button */
  composes: btn btn--full;
  /* In case the btn classes don't get applied properly, ensure basic button styling */
  padding: 1rem;
  text-align: center;
  border: 1px solid !important;
  border-radius: 0;
  font-size: 1em;
  line-height: 1.42;
  text-decoration: none;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  white-space: normal;
  font-weight: 400;
  cursor: pointer;
}

/* Override any theme-specific styles that might interfere */
.shopify-payment-button__more-options:hover,
.shopify-payment-button__more-options:focus {
  text-decoration: none;
  opacity: 0.9;
}

/* AUSVERKAUFT NOT CLIPPED BY IMAGE DIMENSIONS */

.grid-product__tags {
  /* padding-left: 15px; */
}

@media (max-width: 768px) {
.grid-product__tags {
  padding-left: 5px;
}
}

/* DISAPPEAR THE MARKE FILTER */

/* [data-collapsible-id="filter-marke"]:not(.allow-marke-filter [data-collapsible-id="filter-marke"]) {
  display: none;
} */

/* MOBILE TITLES ALL CAPS */

.slide-nav__link span {
  text-transform: uppercase;
}

/* COLLECTION PAGE */

/* .image-element {
 transform: scale(1.2);
} */

.collection-image {
 overflow: hidden;
}

/* ANNOUNCEMENT BAR ON MOBILE */

@media screen and (max-width: 768px) {
 .toolbar {
   height: auto;
 }

 .toolbar__content {
   flex-direction: column;
 }

 .announcement-bar,
 announcement-bar,
 .announcement-slider,
 .announcement-slider__slide {
   display: block !important;
   position: static !important;
   transform: none !important;
   opacity: 1 !important;
   visibility: visible !important;
   height: auto !important;
 }

 .announcement-slider__content {
   white-space: normal;
   height: auto !important;
   opacity: 1 !important;
   font-size: 14px !important;
   line-height: 1.4 !important;
   padding: 10px 15px !important;
 }

 .announcement-slider__content p {
   white-space: normal;
   margin: 0;
 }

 .toolbar__item--announcements {
   order: -1;
   width: 100%;
 }
  .toolbar {
    max-height: 100px;
  }
}


@media screen and (max-width: 430px) {
  .toolbar {
    max-height: 160px;
  }
}
/* filters on mobile */

.collection-filter__btn {
  text-transform: uppercase;
  font-weight: bold;
}

/* PRODUCT CARD STYLING */

.grid-product__image-wrap {
  padding: 0 !important;
  margin: 0 !important;
}

.grid-item__meta {
  margin-top: 0 !important;
}

.grid-product-image-breathing-room--true {
  padding: 3px !important;
}

/* PPRODUCT PAGE STYLING ON MOBILE */

/* @media (max-width: 768px) {
  .product-image-main {
    max-width: 400px;
  }
} */

  /* TRUST STUFFS */

div[id*="trusted_shops_easy_integration_trusted_stars"],
.trustpilot-container {
    display: inline-block;
    vertical-align: top;
}

div[id*="trusted_shops_easy_integration_trusted_stars"] {
    width: 60%;
}

.trustpilot-container {
    width: 40%;
}

@media (max-width: 768px) {
  div[id*="trusted_shops_easy_integration_trusted_stars"] {
      display: none;
  }

  .trustpilot-container {
      display: none;
  }
  .trustpilot-container-mobi {
    display: inline-block;
    vertical-align: top;
    width: 40%;
  }
}

/* HEADER SPACINGS */

/* @media (min-width: 769px) {
  h2:not(:first-child), h3:not(:first-child) {
    margin-top: 68px !important;
  }
} */

@media (min-width: 769px) {
  .collection-bottom-content__content h2:not(:first-child), .collection-bottom-content__content h3:not(:first-child) {
    margin-top: 68px !important;
  }
}

/* INPUT OPTIONS */

.newsletter-input-group input {
    color: #333 !important; /* Or any dark color of your choice */
    background-color: #fff;
}

/* Optional: Style the placeholder text color */
.newsletter-input-group input::placeholder {
    color: #666; /* Slightly lighter than the input text for better UX */
}

.banner-title-large {
  line-height: 1.02em;
}

iframe:not(.userlike) { !important }

/* make sure the image wrapper is the containing block */
.grid-product__image-wrap{
  position:relative;
}

/* generic badge setup */
.product-badge{
  position:absolute;
  z-index:3;          /* above hover image etc. */
  display:block;
}

/* bottom‑left ribbon */
.product-badge--ribbon{
  bottom:8px;
  left:8px;
  width:58px;         /* tweak to taste */
  height:auto;
}

/* if you go with a Neuheit image */
.product-badge--neuheit-img{
  bottom:8px;
  right:8px;
  width:70px;
  height:auto;
}

/* if you prefer a styled text pill instead */
.product-badge--neuheit-text{
  bottom:24px;
  right:8px;
  background:#b38326; /* gold-ish */
  color:#fff;
  padding:4px 10px;
  font-size:12px;
  font-weight:600;
  line-height:1;
  text-transform:uppercase;
  border-radius:3px;
  letter-spacing:.03em;
}


.product-tile__availability {
  display: flex;
  align-items: center;
  gap: 0.4em;
  font-size: 0.85em;
  font-weight: 500;
  color: #3d9b57; /* a soft green tone, adjust to match brand */
  margin-top: 0.5em;
}

.availability-dot {
  width: 8px;
  height: 8px;
  background-color: #3d9b57;
  border-radius: 50%;
  display: inline-block;
}

.product-tile__availability-overlay {
  position: absolute;
  bottom: 10px;
  left: 50%;
  transform: translateX(-50%);
  background: rgba(255, 255, 255, 0.9); /* Optional: subtle contrast */
  padding: 4px 8px;
  border-radius: 999px;
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 0.75rem;
  color: #3d9b57;
  z-index: 3;
  font-weight: 500;
}

.product-tile__availability-overlay .availability-dot {
  width: 8px;
  height: 8px;
  background-color: #3d9b57;
  border-radius: 50%;
  display: inline-block;
}

.concierge-grid-badge {
  display: inline-block;
  background-color: #308D55;
  color: white;
  font-weight: 700;
  font-size: 1.1rem;
  text-transform: uppercase;
  padding: 8px 16px;
  border-radius: 6px;
  text-align: center;
  text-decoration: none;
  line-height: 1.3;
}

/* concierge */

.concierge-badge-wrapper {
display: flex;
justify-content: flex-end;
align-items: center;
margin-bottom: 5px;
}

.concierge-badge-image {
height: 30px;
width: auto;
}

.concierge-price-button {
  background-color: #308D55;
  color: white;
  font-weight: bold;
  font-size: 20px;
  padding: 14px 20px;
  text-align: center;
  text-transform: uppercase;
  border-radius: 6px;
  display: block;
  text-decoration: none;
  transition: background-color 0.3s ease;
}

.concierge-price-button:hover {
  background-color: #25703F;
}

.concierge-badge-wrapper {
  display: flex;
  justify-content: center;
  align-items: center;
  margin: 5px 0;
}

.concierge-badge-image {
  height: 80px;
  width: auto;
  max-width: 100%;
}

/* Optional: Add a slight hover effect */
.grid-item:hover .concierge-badge-image {
  transform: scale(1.05);
  transition: transform 0.2s ease;
}

/* Responsive adjustments */
@media screen and (max-width: 768px) {
  .concierge-badge-image {
    height: 60px; /* Slightly smaller on mobile */
  }
}

/* Section Width Variants */
.dsgn-pck__richtext-section--narrow {
  max-width: 800px;
}
.dsgn-pck__richtext-section--default {
  max-width: 1200px;
}
.dsgn-pck__richtext-section--wide {
  max-width: 100%;
  padding: 0 20px;
}

/* Text Alignment Classes */
.dsgn-pck__richtext-align--left .dsgn-pck__text-block {
  text-align: left;
  align-items: flex-start;
}
.dsgn-pck__richtext-align--center .dsgn-pck__text-block {
  text-align: center;
  align-items: center;
}
.dsgn-pck__richtext-align--right .dsgn-pck__text-block {
  text-align: right;
  align-items: flex-end;
}

/* black checkout btn */

.button-black {
  background-color: #000 !important;
  color: #fff !important;
  font-weight: bold !important;
  text-transform: uppercase !important;
  border: none !important;
  padding: 0.75em 1.5em !important;
  border-radius: 4px !important;
  cursor: pointer;
  transition: background 0.2s ease-in-out;
}

.button-black:hover {
  background-color: #222 !important;
}
/* HEADER HORIZONTAL */
/*


.item-grid__sidebar #CollectionSidebarFilterWrap,
.item-grid__sidebar .collection-sidebar {
  width: 100% !important;
  max-width: none !important;
}


@media (min-width: 990px) {

  .item-grid .float-grid        { display: flex; flex-direction: column; }
  .item-grid__sidebar           { order:-1; width:100%; margin:0 0 2rem; float:none !important; }
  .item-grid .medium-up--one-fifth,
  .item-grid .medium-up--four-fifths { width:100% !important; float:none !important; }

  .item-grid__sidebar .filter-form {
    display: grid;
    grid-template-columns: repeat(auto-fill,minmax(max-content,1fr));
    gap: 1rem 1.25rem;
    align-items: flex-start;
  }

  .item-grid__sidebar .collection-sidebar__group,
  .item-grid__sidebar .collection-sidebar__group--modell,
  .item-grid__sidebar .collection-sidebar__group--sort {
    margin:0; width:auto; max-width:none; float:none !important;
  }

  .item-grid__sidebar .tag-list__header {
    border:1px solid var(--color-border,#ccc);
    padding:.35rem .85rem;
    border-radius:24px;
    background:#fff; display:flex; align-items:center;
    white-space:nowrap;
  }

  .item-grid__sidebar .tag-list--active-tags {
    grid-column: 1 / -1;
    display:flex; flex-wrap:wrap; gap:.5rem; margin-bottom:.5rem;
  }

  .item-grid__sidebar .collapsible-content { position: static; }
}
*/
.custom-hero-content .custom-hero-reviews {
    display: flex;
    gap: 8px 5px;
    flex-wrap: wrap;
}
.custom-hero-content .custom-hero-btns{
    display:flex;
    gap:15px;
}
.custom-hero-content .custom-hero-btns a+a{
    background-color:transparent;
    border:1px solid;
    color:#fff;
}
.custom-hero-content .custom-hero-btns a.custom-hero-button {
    display: flex;
    gap: 20px;
    align-items: center;
}
.custom-hero-content .custom-hero-btns a+a img {
    filter: invert(1);
}
.custom-hero-content .custom-hero-btns a img {
    width: 21px;
    height: fit-content;
}
.hero-mobile-image{
    display:none;
}
.article-carousel button.flickity-button {
    padding: 10px;
    background-color: #000 !important;
    color: #fff !important;
}
.article-carousel button.flickity-button svg.flickity-button-icon {
    position: unset;
}

@media(max-width:767px){
      /* .grid-item__meta-main {
        -webkit-line-clamp: 4;
    } */
.hero-mobile-image{
    display:block;
}
.custom-hero-content .custom-hero-reviews {
    font-size: 11px;
}
.custom-hero-slider .custom-hero-slide .custom-hero-image {
    height: 400px;
}
.custom-hero-slider .custom-hero-slide:first-child .custom-hero-content {
    padding-top: 0;
}
.hero-image{
    display:none;
}
header-drawer.site-header__drawer mobile-nav.slide-nav__wrapper li.slide-nav__item button svg {
    width: 25px;
    height: 25px;
}
body .umm-5csdin {
    bottom: 2%;
    right: 4%;
}
h2.section-header__title, h2.section-title, h2.dsgn-pck__heading, .hrnd-mosaic-header h2, h2 {
    font-weight: 600;
}
header-drawer.site-header__drawer mobile-nav.slide-nav__wrapper li.slide-nav__item button span.slide-nav__link {
    justify-content: center;
}
header-drawer.site-header__drawer mobile-nav.slide-nav__wrapper li.slide-nav__item button span.slide-nav__link span {
    max-width: fit-content;
}
.custom-hero-content .custom-hero-btns a.custom-hero-button {
    padding: 10px 10px;
    gap: 3vw;
    font-size: 3.3vw;
}
.custom-hero-content .custom-hero-btns a.custom-hero-button img {
    width: 4vw;
}
.toolbar {
    min-height: 45px;
}
.header-mobile-collections {
    margin-bottom: 20px;
}
.header-mobile-collections-inner {
    display: flex;
    justify-content: center;
    gap: 16px;
}
.header-mobile-collections-inner .header-mobile-collections-card {
    max-width: 34.5%;
    position: relative;
    background-color: #F4F4F4;
    text-align: center;
    font-size: 12px;
    padding: 5px 0 10px;
}
.header-mobile-collections-inner .header-mobile-collections-card img {
    max-height: 120px;
    object-fit: contain;
}
header-drawer.site-header__drawer {
    padding-left: 0;
    padding-right: 0;
}
header-drawer.site-header__drawer mobile-nav.slide-nav__wrapper li{
    padding-top:5px;
    padding-bottom:5px;
    border-bottom: 1px solid;
    border-image: linear-gradient(to right, #fff, #ebebeb, #a5a5a5, #ebebeb, #ffff) 1;
}
header-drawer.site-header__drawer mobile-nav.slide-nav__wrapper li.slide-nav__item a, 
header-drawer.site-header__drawer mobile-nav.slide-nav__wrapper li.slide-nav__item button,
.account-btn-drawer{
    text-align:center;
    font-family: "Avenir";
    font-weight: 500;
}
.header-mobile-localization {
    --type-base-primary: Avenir;
}
header-drawer.site-header__drawer mobile-nav.slide-nav__wrapper li.slide-nav__item a svg{
    display:none;
}
/* .toolbar__content .toolbar__item:nth-child(2) {display: none;} */

header-drawer.site-header__mobile-nav form#localization_form-toolbar {
    flex-direction: column;
}
header-drawer.site-header__mobile-nav form#localization_form-toolbar span.disclosure-list__label {
    padding-left: 0;
}
header-drawer.site-header__mobile-nav form#localization_form-toolbar .visually-hidden {
    display: block;
    et;
    height: unset;
    margin: unset;
    overflow: unset;
    padding: unset;
    position: unset;
    width: unset;
    min-width: 80px;
}
header-drawer.site-header__mobile-nav form#localization_form-toolbar .multi-selectors__item {
    display: flex;
    align-items: center;
    gap: 10px;
    margin: 0 40px;
    padding: 15px 0;
    border-bottom: 1px solid;
    border-image: linear-gradient(to right, #fff, #ebebeb, #a5a5a5, #ebebeb, #ffff) 1;
}
header-drawer.site-header__mobile-nav form#localization_form-toolbar * {
    font-size: 16px;
}
header-drawer.site-header__mobile-nav form#localization_form-toolbar button.faux-select.disclosure__toggle {
    border: 1px solid rgb(0 0 0 / 10%);
    padding: 3.5px 10px;
    min-width: 60vw;
}
header-drawer.site-header__mobile-nav form#localization_form-toolbar img.currency-flag{
    margin-right:4px;
}
header-drawer.site-header__mobile-nav form#localization_form-toolbar .disclosure-list {
    top: auto;
    bottom: 100%;
    min-width: 60vw;
}
header-drawer.site-header__drawer.site-header__mobile-nav {
    transform: translateX(-100%);
    max-height: unset !important;
}
header-drawer.site-header__mobile-nav.is-active {
  transform: translateX(0) !important;
  position: fixed;
  z-index: 999;
  max-height: 100%;
  height: 100%;
  padding-top: 80px;
}
button.custom-close-menu {
    position: absolute;
    left: 5%;
    top: -9%;
}
button.custom-close-menu svg {
    width: 35px;
    height: 35px;
}
a.account-btn-drawer {
    padding: 10px 24px;
    border: 1px solid;
    border-radius: 8px;
    margin: 15px auto 0;
    display: block;
    max-width: 90%;
    text-align: center;
    font-size: 16px;
}
.header-section {
    z-index: 7;
}
.header-wrapper.header-wrapper--compressed {
    margin: 0 15px;
    padding-top:15px;
}
.header-wrapper.header-wrapper--compressed .site-header__element {
    background-color: #000;
}
.header-wrapper.header-wrapper--compressed a.site-header__logo-link.logo--has-inverted {
    display: none;
}
.header-wrapper.header-wrapper--compressed a.site-header__logo-link.logo--inverted {
    opacity: 1;
    visibility: visible;
    overflow: unset;
    height: auto;
}
.toolbar__content form#localization_form-toolbar {
    display: none;
}
/* .header-item.header-item--compress-nav.small--hide {
    display: block !important;
} */
.header-wrapper.header-wrapper--compressed .site-nav__link {
    color: #fff;
}
.site-nav__icons > a:first-child {
    display: none;
}
.site-nav__icons toggle-menu>button{
    display:none
}
.header-item.header-item--icons {
    flex: 1 1 25%;
}
.header-item.header-item--logo {
    flex: 1 1 50%;
    justify-content: center;
}
.header-layout>:first-child {
    flex: 1 1 25%;
}
.header-layout .site-header__logo a {
    width: 127px;
}
.toolbar__content form#localization_form-toolbar {
    display: none;
}
.toolbar-section {
    --color-toolbar: #111;
}
section.trust-banner {
    /* background-color: #111; */
    font-family: var(--type-base-primary);
    margin-bottom: 0;
    padding: 10px 12px 12px;
}
section.trust-banner .trust-banner__content {
    line-height: 1.6;
    font-weight:300;
}
.collection-filter.cst-sticky {
    position: fixed;
    width: 100%;
    bottom: 0;
    top: auto !important;
    -webkit-transition: .3s;
    -o-transition: .3s;
    transition: .3s;
    opacity:1;
    visibility:visible;
    -webkit-transform: translateY(0);
        -ms-transform: translateY(0);
            transform: translateY(0);
    z-index:9999;
}
.collection-filter {
    position:absolute;
    opacity:0;
    visibility:hidden;
    -webkit-transform:translateY(100%);
        -ms-transform:translateY(100%);
            transform:translateY(100%);
}
.collection-filter__inner {
    padding: 0;
}
.collection-filter__inner .collection-filter__item.medium-up--hide {
    width: 40%;
}
.collection-filter__inner .collection-filter__item.collection-filter__item--right.medium-up--hide {
    width: 20%;
    -webkit-box-pack:center;
        -ms-flex-pack:center;
            justify-content:center;
    border-left: 1px solid #ebebeb;
    min-height: auto;
    border-right: 1px solid #ebebeb;
}
.collection-filter__inner .collection-filter__item.collection-filter__item--right.medium-up--hide li:nth-child(3) {
    display: none;
}
.collection-filter__inner .collection-filter__item.collection-filter__item--drawer {
    width: 40%;
    -webkit-box-flex: 0;
        -ms-flex: 0 1 40%;
            flex: 0 1 40%;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-pack: center;
        -ms-flex-pack: center;
            justify-content: center;
}
.collection-filter__inner .collection-filter__item.collection-filter__item--drawer button.collection-filter__btn {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
        -ms-flex-align: center;
            align-items: center;
    -webkit-box-pack:center;
        -ms-flex-pack:center;
            justify-content:center;
    gap: 5px;
}
.collection-filter__inner .collection-filter__item.collection-filter__item--right.medium-up--hide ul.inline-list {
    margin-right: 0;
}
.collection-mobile-filters.medium-up--hide {
    position: absolute;
    bottom: 0;
    top:unset;
    left:unset;
    right:unset;
    height:unset;
    overflow: auto;
    max-height: 88vh;
}
.collection-mobile-filters .filter-wrapper{
    -webkit-transform:translateY(100%);
        -ms-transform:translateY(100%);
            transform:translateY(100%);
}
.collection-mobile-filters .filter-wrapper.is-active {
    max-height: unset;
    padding-bottom: 20px;
    position: relative;
}
div#CollectionInlineFilterWrap {
    max-height: unset;
}
.filter-wrapper .collection-sidebar__group.collection-sidebar__group--sort {
    display: none;
}
.cst-filter-head {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 25px 20px 20px;
}
.cst-filter-head h4 {
    margin-bottom: 0;
    text-transform: capitalize;
    font-family: "Avenir" !important;
    font-weight: 800;
    font-size: 20px;
}
.cst-filter-head button#cst-filter-close svg {
    width: 30px;
    height: auto;
}
form.filter-form>div:first-child>.collection-sidebar__group:first-child {
    border-top: 0;
}
form.filter-form>div>.collection-sidebar__group button.collapsible-trigger-btn {
    padding: 16px 0;
}
form.filter-form>div>.collection-sidebar__group {
    max-width: 89.5%;
    margin: 0 auto;
}
/* form.filter-form .collection-sidebar .filter-wrapper, 
form.filter-form .collection-sidebar__group label, 
form.filter-form .filter-sort, 
form.filter-form .modell-nested-list__link, 
form.filter-form .tag-list__header {
    font-size: 1rem;
} */
form.filter-form .collapsible-trigger__layout span{
    font-size:1rem;
}
form.filter-form .tag-list__header, 
form.filter-form .collapsible-trigger__layout--inline span {
    font-weight: 400;
}
body.template-collection {
    position: relative;
}
body.overlay-enable.template-collection:before,
.lock-scroll body.template-collection:before{
    content: '';
    position: absolute;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    background: rgb(0 0 0 / 50%);
    z-index: 09;
}
.collection-filter__inner .collection-filter__item.medium-up--hide .collection-filter__sort>label {
    display: flex;
    align-items: center;
    gap: 5px;
    justify-content: center;
    margin-bottom: 0;
    text-transform: uppercase;
    font-weight: 600 !important;
}
.cst-sort-by-inner {
    position: fixed;
    width: 100%;
    bottom: 0;
    background-color: #fff;
    opacity: 0;
    transform: translateY(100%);
    visibility: hidden;
    transition: .2s;
    z-index:9999;
}
.cst-active.cst-sort-by-inner {
    transform: translateY(0);
    visibility: visible;
    opacity: 1;
}
.cst-sort-by-inner ul {
    margin: 0 20px 20px;
}
.cst-sort-by-inner ul li {
    padding: 1rem 0;
    margin:0;
    border-bottom:1px solid #ebebeb;
}
.cst-sort-by-inner ul li:last-child{
    border-bottom:0;
}
.cst-sort-by-inner ul li span {
    font-size: 1rem;
    display:inline-block;
    margin-bottom: 0;
}
.cst-filter-head svg {
    width: 35px;
    height: auto;
}
.cst-sort-by-inner ul .op-active {
    opacity: .6;
}
.collection-grid__wrapper {
    overflow: hidden;
}
}
@media(max-width:370px){
      .grid-item__meta-main {
        max-height: 48px;
    }
}

html .review-app-heading, html .review-app-section{
  display:none;
}
html[lang=de] .review-app-heading, html[lang=de] .review-app-section{
  display:block;
}