/** Shopify CDN: Minification failed

Line 1457:21 Expected identifier but found whitespace
Line 1457:23 Unexpected "{"
Line 1457:32 Expected ":"
Line 1517:15 Expected identifier but found whitespace
Line 1517:17 Unexpected "{"
Line 1517:26 Expected ":"
Line 2195:21 Expected identifier but found whitespace
Line 2195:23 Unexpected "{"
Line 2195:32 Expected ":"
Line 2215:10 Expected identifier but found whitespace
... and 8 more hidden warnings

**/
/* SHOPIFY_STYLESHEETS_VERSION: 1.0 */


/* CSS from section stylesheet tags */
/* START_SECTION:announcement-bar (INDEX:0, SCOPED:FALSE) */
/* Keyframe Animation */
  @keyframes fadeIn {
    from {
      opacity: 0;
    }
    to {
      opacity: 1;
    }
  }

  /* Announcement Bar */
  .announcement-bar {
    background-color: #67ab54;
    width: 100%;
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    z-index: 9999;
    transition: transform 0.3s ease;
    will-change: transform;
  }

  /* Hidden state – slides announcement bar out of view */
  .announcement-bar.header-hidden {
    transform: translateY(-100%);
  }

  .announcement-bar__container {
    min-height: 40px;
    display: flex;
    align-items: center;
    justify-content: center;
    max-width: 1280px;
    margin: 0 auto;
    padding: 0 1rem;
    position: relative;
  }

  /* Items */
  .announcement-bar__item {
    display: none;
    color: white;
    font-size: 14px;
    font-weight: 500;
    text-align: center;
  }

  .announcement-bar__item.active {
    display: block;
    animation: fadeIn 0.5s ease-in-out;
  }

  /* Link Styles */
  .announcement-bar__link {
    color: #ffffff;
    text-decoration: none;
    display: inline-block;
    transition: transform 0.2s ease, text-decoration 0.2s ease;
  }

  .announcement-bar__link:hover,
  .announcement-bar__link:focus,
  .announcement-bar a:hover,
  .announcement-bar a:focus {
    color: #ffffff !important;
    text-decoration: underline !important;
    text-underline-offset: 3px;
    transform: scale(1.05);
    opacity: 1 !important;
  }

  .announcement-bar__text {
    color: white;
  }

  /* Responsive */
  @media (max-width: 640px) {
    .announcement-bar__item {
      font-size: 13px;
    }
  }
/* END_SECTION:announcement-bar */

/* START_SECTION:bestseller (INDEX:1, SCOPED:FALSE) */
/* ============================================
     Bestseller Section
     ============================================ */
  .bestseller {
    padding: 3rem 0 2rem;       /* Mobile: 48px top */
    margin-top: -40px;          /* Gleitet leicht über das Hero-Video */
    background-color: hsl(var(--background));
    border-radius: 2rem 2rem 0 0;  /* Abgerundete obere Ecken für Premium-Look */
    position: relative;
    z-index: 10;
  }

  @media (min-width: 768px) {
    .bestseller {
      padding-top: 6rem;          /* Desktop: 96px top (~mt-24) */
    }
  }

  .bestseller__container {
    max-width: 1280px;
    margin: 0 auto;
    padding: 0 1rem;
    position: relative;
    z-index: 10;
  }

  @media (min-width: 640px) {
    .bestseller__container {
      padding: 0 2rem;
    }
  }

  @media (min-width: 1024px) {
    .bestseller__container {
      padding: 0 4rem;
    }
  }

  /* ============================================
     Header
     ============================================ */
  .bestseller__header {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    margin-bottom: 2.5rem;
  }

  .bestseller__title-wrapper {
    display: flex;
    flex-direction: column;
  }

  .bestseller__tag {
    display: block;
    font-size: 0.875rem;
    font-weight: 600;
    color: #67ab54;
    margin-bottom: 0.5rem;
  }

  .bestseller__heading {
    font-family: var(--font-heading);
    font-size: 1.875rem;
    font-weight: 700;
    color: #000000;
    margin: 0;
  }

  @media (min-width: 768px) {
    .bestseller__heading {
      font-size: 2.25rem;
    }
  }

  .bestseller__view-all {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    font-size: 0.875rem;
    font-weight: 500;
    color: hsl(var(--foreground));
    text-decoration: none;
    transition: color 0.2s ease;
  }

  @media (min-width: 640px) {
    .bestseller__view-all {
      font-size: 1rem;
    }
  }

  .bestseller__view-all:hover {
    color: hsl(var(--primary));
  }

  .bestseller__view-all svg {
    transition: transform 0.2s ease;
  }

  .bestseller__view-all:hover svg {
    transform: translateX(0.25rem);
  }

  /* ============================================
     Mobile Slider
     ============================================ */
  .bestseller__slider {
    display: block;
    overflow-x: auto;
    padding-bottom: 1rem;
    margin-left: -1rem;
    margin-right: -1rem;
    padding-left: 1rem;
    padding-right: 1rem;
    -ms-overflow-style: none;
    scrollbar-width: none;
  }

  .bestseller__slider::-webkit-scrollbar {
    display: none;
  }

  @media (min-width: 1024px) {
    .bestseller__slider {
      display: none;
    }
  }

  .bestseller__slider-track {
    display: flex;
    gap: 1rem;
    width: max-content;
  }

  /* ============================================
     Desktop Grid
     ============================================ */
  .bestseller__grid {
    display: none;
  }

  @media (min-width: 1024px) {
    .bestseller__grid {
      display: grid;
      grid-template-columns: repeat(3, 1fr);
      gap: 1.5rem;
    }
  }

  .bestseller__product-card {
    text-decoration: none;
    display: block;
  }

  /* ============================================
     Product Card (Reusable)
     ============================================ */
  .product-card {
    background-color: hsl(var(--card));
    border: 1px solid hsl(var(--border) / 0.5);
    border-radius: 1rem;
    padding: 1rem;
    transition: all 0.3s ease;
    position: relative;
  }

  .product-card:hover {
    box-shadow: var(--shadow-elevated);
    transform: translateY(-4px);
  }

  .product-card--mobile {
    width: 280px;
    flex-shrink: 0;
    padding: 0.75rem;
  }

  /* Product Image */
  .product-card__image-wrapper {
    position: relative;
    aspect-ratio: 1;
    border-radius: 0.75rem;
    overflow: hidden;
    background-color: hsl(var(--emerald-50));
    margin-bottom: 0.75rem;
  }

  .product-card__image {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.5s ease;
  }

  .product-card:hover .product-card__image {
    transform: scale(1.05);
  }

  .product-card__image-placeholder {
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    color: hsl(var(--muted-foreground));
  }

  /* Bestseller Badge */
  .product-card__badge {
    position: absolute;
    top: 0.75rem;
    left: 0.75rem;
    z-index: 10;
    display: inline-block;
    background-color: #ffffff;
    color: #67ab54;
    font-size: 0.875rem;
    font-weight: 700;
    padding: 0.25rem 0.75rem;
    border-radius: 9999px;
    box-shadow: 0 1px 3px 0 rgb(0 0 0 / 0.1);
  }

  .product-card__badge--small {
    top: 0.5rem;
    left: 0.5rem;
    font-size: 0.75rem;
    padding: 0.25rem 0.5rem;
  }

  /* Product Content */
  .product-card__content {
    display: flex;
    flex-direction: column;
  }

  .product-card__content--mobile {
    gap: 0.25rem;
  }

  .product-card__title {
    font-family: var(--font-heading);
    font-size: 1.125rem;
    font-weight: 600;
    color: #000000;
    margin: 0 0 0.125rem;
    line-height: 1.3;
  }

  .product-card__title--mobile {
    font-size: 1rem;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  .product-card__category {
    font-size: 0.8125rem; /* 13px */
    color: #6b7280;
    margin: 4px 0 8px 0;
  }

  .product-card__category--small {
    font-size: 0.75rem;
    color: #6b7280;
    margin: 4px 0 8px 0;
  }

  /* Footer (Price + Cart Button) */
  .product-card__footer {
    display: flex;
    align-items: center;
    justify-content: space-between;
  }

  .product-card__price-wrapper {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: 8px;
  }

  .product-card__price {
    font-family: var(--font-heading);
    font-size: 1.5rem;
    font-weight: 700;
    color: #000000;
  }

  .product-card__price--mobile {
    font-size: 1.25rem;
  }

  .product-card__unit-price {
    display: inline-block;
    font-size: 0.875rem;
    color: #6b7280;
    margin: 0;
  }

  .product-card__unit-price--small {
    font-size: 0.75rem;
    color: #6b7280;
    margin: 0;
  }

  /* Cart Button */
  .product-card__cart-button {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 3rem;
    height: 3rem;
    border-radius: 9999px;
    background-color: hsl(var(--primary) / 0.1);
    border: none;
    cursor: pointer;
    transition: all 0.2s ease;
  }

  .product-card__cart-button--small {
    width: 2.5rem;
    height: 2.5rem;
  }

  .product-card__cart-button:hover {
    background-color: hsl(var(--primary));
  }

  .product-card__cart-icon {
    color: hsl(var(--primary));
    transition: all 0.2s ease;
  }

  .product-card__cart-button:hover .product-card__cart-icon {
    color: #ffffff;
    transform: scale(1.1);
  }

  .product-card__plus-icon {
    position: absolute;
    top: -0.25rem;
    right: -0.25rem;
    width: 1.25rem;
    height: 1.25rem;
    padding: 0.125rem;
    background-color: hsl(var(--primary));
    color: #ffffff;
    border-radius: 9999px;
    transition: all 0.2s ease;
  }

  .product-card__cart-button:hover .product-card__plus-icon {
    transform: scale(1.25) rotate(90deg);
  }

  /* ============================================
     Empty State
     ============================================ */
  .bestseller__empty {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
    padding: 3rem 2rem;
  }

  .bestseller__empty svg {
    color: hsl(var(--muted-foreground));
    margin-bottom: 1rem;
  }

  .bestseller__empty p {
    font-size: 1rem;
    color: hsl(var(--muted-foreground));
    margin: 0;
    max-width: 32rem;
  }

  /* ============================================
     Scroll-Linked Reveal (Scrubbing)
     ============================================ */
  #bestseller-scrub {
    opacity: 0;
    transform: translateY(100px);
    will-change: transform, opacity;
  }

  @media (prefers-reduced-motion: reduce) {
    #bestseller-scrub {
      opacity: 1 !important;
      transform: none !important;
      will-change: auto;
    }
  }
/* END_SECTION:bestseller */

/* START_SECTION:cart-drawer (INDEX:2, SCOPED:FALSE) */
/* ============================================
     Alpine.js Cloak
     ============================================ */
  [x-cloak] { 
    display: none !important; 
  }

  /* ============================================
     Overlay
     ============================================ */
  .cart-overlay {
    position: fixed;
    inset: 0;
    background-color: rgba(0, 0, 0, 0.5);
    z-index: 9998;
  }

  /* Overlay Transitions */
  .overlay-enter {
    transition: opacity 0.3s ease;
  }

  .overlay-enter-start {
    opacity: 0;
  }

  .overlay-enter-end {
    opacity: 1;
  }

  .overlay-leave {
    transition: opacity 0.2s ease;
  }

  .overlay-leave-start {
    opacity: 1;
  }

  .overlay-leave-end {
    opacity: 0;
  }

  /* ============================================
     Drawer
     ============================================ */
  .cart-drawer {
    position: fixed;
    top: 0;
    right: 0;
    bottom: 0;
    width: 90%;
    max-width: 36rem;
    background-color: hsl(var(--background));
    box-shadow: -4px 0 15px rgba(0, 0, 0, 0.2);
    z-index: 9999;
    display: flex;
    flex-direction: column;
  }

  /* Drawer Transitions */
  .drawer-enter {
    transition: transform 0.3s ease;
  }

  .drawer-enter-start {
    transform: translateX(100%);
  }

  .drawer-enter-end {
    transform: translateX(0);
  }

  .drawer-leave {
    transition: transform 0.2s ease;
  }

  .drawer-leave-start {
    transform: translateX(0);
  }

  .drawer-leave-end {
    transform: translateX(100%);
  }

  /* ============================================
     Header
     ============================================ */
  .cart-drawer__header {
    position: sticky;
    top: 0;
    z-index: 10;
    background: hsl(var(--background));
    padding: 1rem;
    padding-bottom: 0.75rem;
    border-bottom: 1px solid hsl(var(--border));
    flex-shrink: 0;
  }

  @media (min-width: 640px) {
    .cart-drawer__header {
      padding: 1.5rem;
      padding-bottom: 1rem;
    }
  }

  .cart-drawer__header-top {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 0.75rem;
  }

  .cart-drawer__title {
    font-family: var(--font-heading);
    font-size: 1.5rem;
    font-weight: 700;
    color: hsl(var(--foreground));
    margin: 0;
  }

  @media (min-width: 640px) {
    .cart-drawer__title {
      font-size: 1.875rem;
    }
  }

  .cart-drawer__close {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 2rem;
    height: 2rem;
    padding: 0;
    background: none;
    border: none;
    color: hsl(var(--muted-foreground));
    cursor: pointer;
    transition: color 0.2s ease;
  }

  .cart-drawer__close:hover {
    color: hsl(var(--foreground));
  }

  /* ============================================
     Body
     ============================================ */
  .cart-drawer__body {
    flex: 1;
    overflow-y: auto;
    padding: 1rem;
    min-height: 0;
  }

  @media (min-width: 640px) {
    .cart-drawer__body {
      padding: 1.5rem;
    }
  }

  /* ============================================
     Progress Bar
     ============================================ */
  .cart-progress {
    margin-bottom: 0;
  }

  .cart-progress__amount {
    color: hsl(var(--primary));
    font-size: 0.9em;
    font-weight: 600;
  }

  .cart-progress__message {
    background-color: hsl(var(--primary) / 0.1);
    border-radius: 0.5rem;
    padding: 0.375rem 0.75rem;
    margin-bottom: 0.5rem;
  }

  @media (min-width: 640px) {
    .cart-progress__message {
      padding: 0.625rem 1rem;
      margin-bottom: 0.625rem;
    }
  }

  .cart-progress__message p {
    font-size: 0.75rem;
    font-weight: 500;
    color: hsl(var(--foreground));
    margin: 0;
    line-height: 1.4;
  }

  @media (min-width: 640px) {
    .cart-progress__message p {
      font-size: 0.875rem;
    }
  }

  .cart-progress__bar-container {
    position: relative;
    display: flex;
    align-items: center;
  }

  .cart-progress__track {
    position: relative;
    flex: 1;
    height: 0.75rem;
    background-color: hsl(var(--muted));
    border-radius: 9999px 0 0 9999px;
  }

  .cart-progress__fill {
    position: absolute;
    left: 0;
    top: 0;
    height: 100%;
    background-color: hsl(var(--primary));
    border-radius: 9999px 0 0 9999px;
    transition: width 0.7s ease-out;
    overflow: hidden;
  }

  .cart-progress__shine {
    position: absolute;
    top: 0;
    height: 100%;
    width: 50%;
    background: linear-gradient(
      to right,
      transparent 0%,
      rgba(255, 255, 255, 0.4) 50%,
      transparent 100%
    );
    animation: shine-sweep 2s infinite;
  }

  @keyframes shine-sweep {
    0% {
      left: -50%;
    }
    100% {
      left: 150%;
    }
  }

  .cart-progress__marker {
    position: absolute;
    top: 50%;
    transform: translate(-50%, -50%);
    display: flex;
    align-items: center;
    justify-content: center;
    width: 2rem;
    height: 2rem;
    border-radius: 50%;
    background-color: hsl(var(--background));
    border: 2px solid hsl(var(--muted-foreground) / 0.3);
    color: hsl(var(--muted-foreground));
    transition: all 0.3s ease;
    z-index: 10;
  }

  .cart-progress__marker--active {
    background-color: hsl(var(--primary));
    border-color: hsl(var(--primary));
    color: hsl(var(--primary-foreground));
    box-shadow: 0 0 12px hsl(var(--primary) / 0.6);
  }

  .cart-progress__badge {
    display: flex;
    align-items: center;
    gap: 0.375rem;
    height: 1.625rem;
    padding: 0 0.75rem;
    background-color: hsl(var(--muted));
    border: 2px solid hsl(var(--muted));
    border-left: none;
    border-radius: 0 9999px 9999px 0;
    font-size: 0.75rem;
    font-weight: 600;
    color: hsl(var(--muted-foreground));
    transition: all 0.3s ease;
    white-space: nowrap;
    flex-shrink: 0;
  }

  .cart-progress__badge--active {
    background-color: hsl(var(--primary));
    border-color: hsl(var(--primary));
    color: hsl(var(--primary-foreground));
    box-shadow: 0 0 15px hsl(var(--primary) / 0.5);
  }

  /* ============================================
     Empty State
     ============================================ */
  .cart-empty {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
    padding: 3rem 1rem;
  }

  .cart-empty svg {
    color: hsl(var(--muted-foreground));
    margin-bottom: 1rem;
  }

  .cart-empty p {
    font-size: 1rem;
    color: hsl(var(--muted-foreground));
    margin: 0 0 1rem;
  }

  .cart-empty__button {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 0.75rem !important;
    padding: 1rem 2rem !important;
    background-color: hsl(var(--primary));
    color: hsl(var(--primary-foreground));
    border-radius: 50px !important;
    border: none;
    font-size: 1.125rem;
    font-weight: 600;
    text-decoration: none;
    cursor: pointer;
    transition: all 0.3s ease;
    overflow: hidden;
    width: fit-content;
    margin: 0 auto;
  }

  .cart-empty__button svg {
    width: 18px;
    height: 18px;
    flex-shrink: 0;
    margin: 0;
    color: #ffffff !important;
    fill: #ffffff !important;
    stroke: #ffffff !important;
  }

  .cart-empty__button:hover {
    background-color: hsl(var(--emerald-700));
    transform: translateY(-2px);
    box-shadow: var(--shadow-elevated);
    color: #ffffff !important;
  }

  .cart-empty__button:hover svg {
    color: #ffffff !important;
    fill: #ffffff !important;
    stroke: #ffffff !important;
  }

  .cart-empty__button:hover,
  .cart-empty__button:hover * {
    color: #ffffff !important;
  }

  /* ============================================
     Cart Items
     ============================================ */
  .cart-items {
    display: flex;
    flex-direction: column;
    gap: 1rem;
  }

  .cart-item {
    display: flex;
    gap: 0.75rem;
    padding: 0.75rem;
    background-color: hsl(var(--secondary) / 0.3);
    border-radius: 0.75rem;
  }

  @media (min-width: 640px) {
    .cart-item {
      gap: 1rem;
      padding: 1rem;
    }
  }

  .cart-item__image {
    width: 5rem;
    height: 5rem;
    flex-shrink: 0;
    background-color: #ffffff;
    border-radius: 0.5rem;
    overflow: hidden;
  }

  @media (min-width: 640px) {
    .cart-item__image {
      width: 6rem;
      height: 6rem;
    }
  }

  .cart-item__image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
  }

  .cart-item__info {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
  }

  .cart-item__title {
    font-size: 0.875rem;
    font-weight: 500;
    line-height: 1.3;
    color: hsl(var(--foreground));
    margin: 0 0 0.25rem;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
  }

  @media (min-width: 640px) {
    .cart-item__title {
      font-size: 1rem;
    }
  }

  .cart-item__price {
    font-size: 1rem;
    font-weight: 600;
    color: hsl(var(--primary));
    margin: 0 0 0.25rem;
  }

  @media (min-width: 640px) {
    .cart-item__price {
      font-size: 1.125rem;
    }
  }

  .cart-item__variant {
    font-size: 0.75rem;
    color: hsl(var(--muted-foreground));
    margin: 0;
  }

  @media (min-width: 640px) {
    .cart-item__variant {
      font-size: 0.875rem;
    }
  }

  /* Controls */
  .cart-item__controls {
    display: flex;
    align-items: center;
    gap: 0.5rem;
  }

  .cart-item__controls--mobile {
    display: flex;
    margin-top: 0.5rem;
  }

  @media (min-width: 640px) {
    .cart-item__controls--mobile {
      display: none;
    }
  }

  .cart-item__controls--desktop {
    display: none;
  }

  @media (min-width: 640px) {
    .cart-item__controls--desktop {
      display: flex;
      flex-direction: column;
      align-items: flex-end;
      justify-content: center;
      margin-left: 1rem;
    }
  }

  .cart-item__quantity {
    display: flex;
    align-items: center;
    gap: 0.25rem;
  }

  .cart-item__qty-button {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 1.75rem;
    height: 1.75rem;
    padding: 0;
    background-color: hsl(var(--background));
    border: 1px solid hsl(var(--border));
    border-radius: 0.375rem;
    color: hsl(var(--foreground));
    cursor: pointer;
    transition: all 0.2s ease;
  }

  @media (min-width: 640px) {
    .cart-item__qty-button {
      width: 2rem;
      height: 2rem;
    }
  }

  .cart-item__qty-button:hover:not(:disabled) {
    background-color: hsl(var(--primary));
    border-color: hsl(var(--primary));
    color: hsl(var(--primary-foreground));
  }

  .cart-item__qty-button:disabled {
    opacity: 0.5;
    cursor: not-allowed;
  }

  .cart-item__qty-value {
    min-width: 2rem;
    text-align: center;
    font-size: 0.875rem;
    font-weight: 500;
  }

  @media (min-width: 640px) {
    .cart-item__qty-value {
      min-width: 2.5rem;
    }
  }

  .cart-item__remove {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 1.75rem;
    height: 1.75rem;
    padding: 0;
    background: none;
    border: none;
    color: hsl(var(--muted-foreground));
    cursor: pointer;
    transition: color 0.2s ease;
  }

  @media (min-width: 640px) {
    .cart-item__remove {
      width: 2rem;
      height: 2rem;
      margin-top: 0.5rem;
    }
  }

  .cart-item__remove:hover:not(:disabled) {
    color: hsl(var(--destructive));
  }

  .cart-item__remove:disabled {
    opacity: 0.5;
    cursor: not-allowed;
  }

  /* ============================================
     Footer
     ============================================ */
  .cart-drawer__footer {
    flex-shrink: 0;
    padding: 1rem;
    padding-bottom: 0.5rem;
    border-top: 1px solid hsl(var(--border));
    background-color: hsl(var(--background));
  }

  @media (min-width: 640px) {
    .cart-drawer__footer {
      padding: 1.25rem;
      padding-bottom: 0.5rem;
    }
  }

  .cart-total {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-top: 0 !important;
    margin-bottom: 2px !important;
  }

  .cart-total__label {
    font-size: 1.3rem;
    font-weight: 600;
    color: hsl(var(--foreground));
  }

  .cart-total__note {
    font-size: 0.75rem;
    color: hsl(var(--muted-foreground));
    margin-top: 0 !important;
    margin-bottom: 2px !important;
    line-height: 1.2;
  }

  .cart-total__amount {
    font-size: 1.3rem;
    font-weight: 700;
    color: hsl(var(--primary)) !important;
  }

  @media (min-width: 640px) {
    .cart-total__amount {
      font-size: 1.4rem;
    }
  }

  /* ============================================
     Upsell Products
     ============================================ */
  .cart-upsell {
    margin-top: 1.5rem;
    margin-bottom: 2rem; /* More space before footer */
    padding-top: 1.5rem;
    border-top: 1px solid hsl(var(--border));
  }

  .cart-upsell__heading {
    font-family: var(--font-heading);
    font-size: 1rem;
    font-weight: 600;
    color: hsl(var(--muted-foreground));
    margin-bottom: 1rem;
  }

  /* Grid Layout - 3 Columns */
  .cart-upsell__grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 0.625rem; /* 10px */
  }

  @media (max-width: 640px) {
    .cart-upsell__grid {
      grid-template-columns: repeat(2, 1fr);
    }
  }

  .cart-upsell__card {
    text-decoration: none;
    display: block;
  }

  /* Card Inner - Vertical Layout */
  .cart-upsell__card-inner {
    background-color: hsl(var(--secondary) / 0.3); /* bg-secondary/30 */
    border-radius: 0.75rem; /* rounded-xl */
    padding: 0.75rem; /* p-3 */
    overflow: hidden;
    transition: all 0.2s ease; /* duration-200 */
    height: 100%;
    display: flex;
    flex-direction: column;
  }

  .cart-upsell__card:hover .cart-upsell__card-inner {
    background-color: hsl(var(--secondary) / 0.5); /* hover:bg-secondary/50 */
  }

  /* Image - Square, Top */
  .cart-upsell__image-wrapper {
    position: relative;
    aspect-ratio: 1; /* aspect-square */
    border-radius: 0.5rem; /* rounded-lg */
    overflow: hidden;
    margin-bottom: 0.5rem; /* mb-2 */
    background-color: hsl(var(--background)); /* bg-white */
  }

  .cart-upsell__image {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.3s ease; /* duration-300 */
  }

  .cart-upsell__card:hover .cart-upsell__image {
    transform: scale(1.05); /* group-hover:scale-105 */
  }

  .cart-upsell__image-placeholder {
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    color: hsl(var(--muted-foreground));
  }

  /* Content - Below Image */
  .cart-upsell__content {
    display: flex;
    flex-direction: column;
    flex: 1;
  }

  .cart-upsell__title {
    font-size: 0.875rem; /* text-sm */
    font-weight: 500; /* font-medium */
    color: hsl(var(--foreground));
    line-height: 1.25; /* leading-tight */
    margin-bottom: 0.25rem; /* mb-1 */
    overflow: hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-line-clamp: 1; /* line-clamp-1 */
    -webkit-box-orient: vertical;
  }

  .cart-upsell__price-wrapper {
    display: flex;
    align-items: baseline;
    gap: 8px;
    flex-wrap: wrap;
    margin-bottom: 0.5rem; /* mb-2 */
  }

  .cart-upsell__price {
    font-size: 1rem; /* text-base */
    font-weight: 700; /* font-bold */
    color: hsl(var(--primary)); /* text-primary */
  }

  .cart-upsell__unit-price {
    display: inline-block;
    font-size: 0.75rem; /* text-xs */
    color: #6b7280;
    margin: 0;
  }

  /* Add Button - Full Width at Bottom */
  .cart-upsell__add-button {
    width: 100%; /* w-full */
    height: 2.25rem; /* h-9 */
    display: flex;
    align-items: center;
    justify-content: center;
    background-color: hsl(var(--primary) / 0.1); /* bg-primary/10 */
    color: hsl(var(--primary));
    border: none;
    border-radius: 9999px; /* rounded-full */
    cursor: pointer;
    transition: all 0.2s ease; /* duration-200 */
    font-size: 0.875rem; /* text-sm */
    font-weight: 500; /* font-medium */
    margin-top: auto;
  }

  .cart-upsell__add-button:hover {
    background-color: hsl(var(--primary)); /* hover:bg-primary */
    color: hsl(var(--primary-foreground)); /* hover:text-white */
  }

  .cart-upsell__add-button:disabled {
    opacity: 0.5; /* disabled:opacity-50 */
    cursor: not-allowed;
  }

  .cart-checkout-button {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.75rem;
    width: 100%;
    padding: 1rem 2rem;
    background-color: hsl(var(--primary));
    color: hsl(var(--primary-foreground));
    border: none;
    border-radius: 50px !important;
    font-size: 1.125rem;
    font-weight: 600;
    text-decoration: none;
    cursor: pointer;
    transition: all 0.3s ease;
    overflow: hidden;
    margin-bottom: 0;
  }

  @media (min-width: 640px) {
    .cart-checkout-button {
      font-size: 1.125rem;
      padding: 1rem 2rem;
    }
  }

  .cart-checkout-button:hover:not(.cart-checkout-button--loading) {
    background-color: hsl(var(--emerald-700));
    transform: translateY(-2px);
    box-shadow: var(--shadow-elevated);
    color: #ffffff !important;
  }

  .cart-checkout-button--loading {
    opacity: 0.7;
    cursor: not-allowed;
  }

  .cart-checkout-button__content {
    display: flex;
    align-items: center;
    gap: 0.5rem;
  }

  .cart-checkout-button svg {
    stroke: #ffffff !important;
    fill: none !important;
    flex-shrink: 0;
    transition: transform 0.2s ease;
  }

  .cart-checkout-button:hover svg {
    stroke: #ffffff !important;
    fill: none !important;
    transform: translateX(3px);
  }

  .cart-checkout-button:hover,
  .cart-checkout-button:hover * {
    color: #ffffff !important;
  }

  .checkout-button-text {
    white-space: nowrap;
  }

  /* Payment Icons Container (Always Visible) */
  .cart-drawer__footer-payment {
    flex-shrink: 0;
    padding: 0.5rem 1rem;
    padding-top: 0.25rem;
    background-color: hsl(var(--background));
    border: none !important;
  }

  @media (min-width: 640px) {
    .cart-drawer__footer-payment {
      padding: 0.5rem 1.25rem;
      padding-top: 0.25rem;
      border: none !important;
    }
  }

  .cart-payment-icons {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    flex-wrap: wrap;
    pointer-events: none;
    cursor: default;
  }

  .cart-payment-icons .icon {
    height: 24px !important;
    width: auto !important;
    opacity: 1 !important;
    filter: none !important;
    pointer-events: none;
    cursor: default;
  }

  .cart-payment-icons .icon--full-color {
    opacity: 1 !important;
    filter: none !important;
  }

  .cart-shipping-info {
    display: flex;
    align-items: center;
    justify-content: flex-start;
    text-align: left;
    gap: 6px;
    margin-top: 0 !important;
    margin-bottom: 0.625rem !important;
    margin-left: 0 !important;
    padding: 0.5rem 0;
    padding-left: 0 !important;
    background-color: transparent;
    border-radius: 0;
    font-size: 0.8125rem;
    line-height: 1.2;
    color: hsl(var(--muted-foreground));
  }

  .cart-shipping-info svg {
    flex-shrink: 0;
    margin-left: -2px;
    opacity: 0.6;
    color: hsl(var(--muted-foreground));
  }

  .cart-shipping-info strong {
    color: hsl(var(--foreground));
    font-weight: 600;
  }

  .cart-shipping-info__free {
    color: hsl(var(--primary)) !important;
    font-weight: 600;
  }

  /* Static Footer for Empty Cart */
  .cart-drawer__footer-static {
    flex-shrink: 0;
    padding: 0.75rem 1rem;
    padding-bottom: 0.25rem;
    border-top: 1px solid hsl(var(--border));
    background-color: hsl(var(--background));
  }

  @media (min-width: 640px) {
    .cart-drawer__footer-static {
      padding: 0.75rem 1.25rem;
      padding-bottom: 0.25rem;
    }
  }

  .cart-drawer__footer-static .cart-shipping-info {
    margin-bottom: 0;
  }
/* END_SECTION:cart-drawer */

/* START_SECTION:features (INDEX:3, SCOPED:FALSE) */
.features {
    padding: 4rem 0;
    background-color: {{ section.settings.background_color | default: '#ffffff' }};
  }

  .features__container {
    max-width: 1280px;
    margin: 0 auto;
    padding: 0 1.5rem;
  }

  /* Header */
  .features__header {
    text-align: center;
    margin-bottom: 3rem;
  }

  .features__label {
    display: inline-block;
    font-size: 0.875rem;
    font-weight: 600;
    color: hsl(var(--primary));
    text-transform: uppercase;
    letter-spacing: 0.05em;
    margin-bottom: 0.75rem;
  }

  .features__heading {
    font-size: 2rem;
    font-weight: 700;
    color: #000000;
    margin-bottom: 1rem;
    line-height: 1.2;
  }

  .features__subheading {
    font-size: 1.125rem;
    color: hsl(var(--muted-foreground));
    max-width: 48rem;
    margin: 0 auto;
    line-height: 1.75;
  }

  .features__subheading p {
    margin: 0;
  }

  /* Grid Layout */
  .features__grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 2rem;
    margin: 0 auto;
  }

  /* Feature Item */
  .features__item {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    padding: 2rem 1.5rem;
    background: {{ section.settings.card_background | default: '#ffffff' }};
    border-radius: 1rem;
    transition: all 0.3s ease;
  }

  .features__item:hover {
    transform: translateY(-4px);
    box-shadow: var(--shadow-elevated);
  }

  /* Icon */
  .features__icon {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 4rem;
    height: 4rem;
    margin-bottom: 1.5rem;
    color: hsl(var(--primary));
  }

  .features__icon--image img {
    width: 100%;
    height: 100%;
    object-fit: contain;
  }

  .features__icon--svg {
    font-size: 2.5rem;
  }

  .features__icon--svg svg {
    width: 2.5rem;
    height: 2.5rem;
    stroke: currentColor;
    stroke-width: 2;
    fill: none;
  }

  /* Value (for stats-style features) */
  .features__value {
    font-size: 2.5rem;
    font-weight: 700;
    color: hsl(var(--primary));
    margin-bottom: 0.5rem;
    line-height: 1;
  }

  /* Item Heading */
  .features__item-heading {
    font-size: 1.125rem;
    font-weight: 600;
    color: #000000;
    margin-bottom: 0.75rem;
    line-height: 1.4;
  }

  /* Text */
  .features__text {
    font-size: 0.9375rem;
    color: hsl(var(--muted-foreground));
    line-height: 1.6;
  }

  .features__text p {
    margin: 0;
  }

  /* Responsive Design */
  @media (min-width: 640px) {
    .features__grid {
      grid-template-columns: repeat(2, 1fr);
      gap: 2.5rem;
    }

    .features__heading {
      font-size: 2.5rem;
    }
  }

  @media (min-width: 768px) {
    .features {
      padding: 5rem 0;
    }

    .features__container {
      padding: 0 2rem;
    }

    .features__header {
      margin-bottom: 4rem;
    }
  }

  @media (min-width: 1024px) {
    .features__grid {
      grid-template-columns: repeat({{ section.settings.columns_desktop | default: 3 }}, 1fr);
      gap: 3rem;
    }

    .features__heading {
      font-size: 3rem;
    }

    .features__container {
      padding: 0 3rem;
    }
  }

  /* Animation on scroll (optional - requires Alpine.js or JS) */
  .features__item {
    animation: fadeUp 0.6s ease-out;
  }

  @keyframes fadeUp {
    from {
      opacity: 0;
      transform: translateY(20px);
    }
    to {
      opacity: 1;
      transform: translateY(0);
    }
  }
/* END_SECTION:features */

/* START_SECTION:footer (INDEX:4, SCOPED:FALSE) */
/* ============================================
     Footer Wrapper - Light Green Background
     ============================================ */
  .footer-wrapper {
    position: relative;
    background-color: #edfdf5;
    overflow: hidden;
  }

  /* ============================================
     Newsletter Section (Community Card Area)
     ============================================ */
  .footer__newsletter-section {
    padding: 2.5rem 0;
    background-color: #edfdf5;
    position: relative;
    z-index: 10;
  }

  /* Desktop Padding */
  @media (min-width: 768px) {
    .footer__newsletter-section {
      padding: 4rem 0;
    }
  }

  .footer__newsletter-container {
    max-width: 1280px;
    margin: 0 auto;
    padding: 0 1rem;
  }

  @media (min-width: 640px) {
    .footer__newsletter-container {
      padding: 0 2rem;
    }
  }

  @media (min-width: 1024px) {
    .footer__newsletter-container {
      padding: 0 4rem;
    }
  }

  /* ============================================
     Community Card (White Floating Card)
     Tailwind: rounded-xl bg-card shadow-md
     ============================================ */
  .footer__community-card {
    position: relative;
    background-color: hsl(var(--card));
    border-radius: 0.75rem; /* rounded-xl */
    overflow: hidden;
    box-shadow: 0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1); /* shadow-md */
    transition: all 0.7s ease;
  }

  /* ============================================
     Community Grid
     Tailwind: flex flex-col lg:flex-row
     ============================================ */
  .footer__community-grid {
    display: flex;
    flex-direction: column;
  }

  @media (min-width: 1024px) {
    .footer__community-grid {
      flex-direction: row;
    }
  }

  /* ============================================
     Community Image
     Tailwind: lg:w-1/2 h-48 sm:h-64 lg:h-80
     ============================================ */
  .footer__community-image {
    width: 100%;
    height: 12rem; /* h-48 */
  }

  @media (min-width: 640px) {
    .footer__community-image {
      height: 16rem; /* h-64 */
    }
  }

  @media (min-width: 1024px) {
    .footer__community-image {
      width: 50%; /* lg:w-1/2 */
      height: 20rem; /* lg:h-80 */
    }
  }

  .footer__community-image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
  }

  /* ============================================
     Community Content
     Tailwind: lg:w-1/2 p-5 sm:p-6 lg:p-8 flex flex-col justify-center px-5 sm:px-8 lg:px-[40px]
     ============================================ */
  .footer__community-content {
    width: 100%;
    padding: 1.25rem; /* p-5 */
    display: flex;
    flex-direction: column;
    justify-content: center;
  }

  @media (min-width: 640px) {
    .footer__community-content {
      padding: 1.5rem; /* sm:p-6 */
      padding-left: 2rem; /* sm:px-8 */
      padding-right: 2rem;
    }
  }

  @media (min-width: 1024px) {
    .footer__community-content {
      width: 50%; /* lg:w-1/2 */
      padding: 2rem; /* lg:p-8 */
      padding-left: 2.5rem; /* lg:px-[40px] */
      padding-right: 2.5rem;
    }
  }

  /* ============================================
     Community Heading
     Tailwind: text-xl md:text-2xl font-heading font-bold text-black mb-3
     ============================================ */
  .footer__community-heading {
    font-family: var(--font-heading);
    font-size: 1.25rem; /* text-xl */
    font-weight: 700; /* font-bold */
    color: #000000; /* text-black */
    margin-bottom: 0.75rem; /* mb-3 */
    line-height: 1.3;
  }

  @media (min-width: 768px) {
    .footer__community-heading {
      font-size: 1.5rem; /* md:text-2xl */
    }
  }

  /* ============================================
     Benefits List
     Tailwind: space-y-2 mb-4
     ============================================ */
  .footer__benefits-list {
    list-style: none;
    padding: 0;
    margin: 0 0 1rem; /* mb-4 */
    display: flex;
    flex-direction: column;
    gap: 0.5rem; /* space-y-2 */
  }

  /* ============================================
     Benefit Item
     Tailwind: flex items-center gap-2.5 text-base text-muted-foreground
     ============================================ */
  .footer__benefit-item {
    display: flex;
    align-items: center;
    gap: 0.625rem; /* gap-2.5 */
    font-size: 1rem; /* text-base */
    color: hsl(var(--muted-foreground));
  }

  /* ============================================
     Check Icon
     Tailwind: w-4 h-4 text-primary flex-shrink-0
     ============================================ */
  .footer__check-icon {
    width: 1rem; /* w-4 */
    height: 1rem; /* h-4 */
    color: hsl(var(--primary));
    flex-shrink: 0;
  }

  /* ============================================
     Newsletter Form
     Tailwind: flex flex-col sm:flex-row gap-3
     ============================================ */
  .footer__newsletter-form {
    width: 100%;
  }

  .footer__form-group {
    display: flex;
    flex-direction: column;
    gap: 0.75rem; /* gap-3 */
  }

  @media (min-width: 640px) {
    .footer__form-group {
      flex-direction: row; /* sm:flex-row */
    }
  }

  /* ============================================
     Email Input
     h-12 (48px) for better mobile touch target
     font-size: 16px to prevent iPhone auto-zoom
     ============================================ */
  .footer__email-input {
    flex: 1;
    height: 3rem; /* h-12 = 48px */
    padding: 0.75rem 1rem; /* py-3 for extra vertical padding */
    font-size: 1rem; /* 16px – prevents iPhone zoom on focus */
    font-family: inherit;
    color: hsl(var(--foreground));
    background-color: hsl(var(--background));
    border: 1px solid hsl(var(--border));
    border-radius: 0.375rem;
    transition: all 0.2s ease;
    -webkit-appearance: none; /* consistent rendering on iOS */
  }

  .footer__email-input:focus {
    outline: none;
    border-color: hsl(var(--primary));
    box-shadow: 0 0 0 3px hsl(var(--primary) / 0.1);
  }

  .footer__email-input::placeholder {
    color: hsl(var(--muted-foreground));
  }

  /* ============================================
     Submit Button
     h-12 (48px) – same height as email input
     ============================================ */
  .footer__submit-button {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem; /* gap-2 */
    height: 3rem; /* h-12 = 48px – matches email input */
    padding: 0 1.25rem; /* px-5 */
    font-size: 1rem; /* 16px */
    font-weight: 600;
    font-family: inherit;
    color: hsl(var(--primary-foreground));
    background-color: hsl(var(--primary));
    border: none;
    border-radius: 0.375rem;
    cursor: pointer;
    transition: all 0.2s ease;
  }

  .footer__submit-button:hover {
    background-color: hsl(var(--emerald-700));
  }

  .footer__submit-button svg {
    transition: transform 0.2s ease;
  }

  .footer__submit-button:hover svg {
    transform: translateX(0.25rem); /* group-hover:translate-x-1 */
  }

  /* ============================================
     Privacy Text
     Tailwind: text-xs text-gray-500 font-normal mt-3
     ============================================ */
  .footer__privacy-text {
    font-size: 0.75rem; /* text-xs */
    font-weight: 400; /* font-normal */
    color: #6b7280; /* text-gray-500 */
    margin-top: 0.75rem; /* mt-3 */
    line-height: 1.5;
  }

  /* Force ALL child elements (p, h6, span, etc. from Rich Text Editor)
     to inherit the small, thin, gray styling */
  .footer__privacy-text p,
  .footer__privacy-text h1,
  .footer__privacy-text h2,
  .footer__privacy-text h3,
  .footer__privacy-text h4,
  .footer__privacy-text h5,
  .footer__privacy-text h6,
  .footer__privacy-text span,
  .footer__privacy-text strong,
  .footer__privacy-text b,
  .footer__privacy-text em {
    font-size: 0.75rem !important; /* text-xs */
    font-weight: 400 !important; /* font-normal – kein bold! */
    color: #6b7280 !important; /* text-gray-500 */
    margin: 0;
    padding: 0;
    line-height: 1.5;
    display: inline; /* Alles inline, damit Text + Link in einer Zeile fließen */
  }

  .footer__privacy-text a,
  a.footer__privacy-link {
    font-size: 0.75rem;
    font-weight: 400;
    color: #6b7280;
    text-decoration: underline;
    text-underline-offset: 2px;
    transition: color 0.2s ease;
  }

  .footer__privacy-text a:hover,
  a.footer__privacy-link:hover {
    color: #4b5563;
  }

  /* Success/Error Messages */
  .footer__success-message {
    padding: 0.75rem 1rem;
    background-color: hsl(var(--primary) / 0.1);
    color: hsl(var(--primary));
    border-radius: 0.375rem;
    font-weight: 500;
  }

  .footer__error-message {
    font-size: 0.875rem;
    color: hsl(var(--destructive));
    margin-top: 0.5rem;
  }

  /* ============================================
     Main Footer (Green Background)
     Tailwind: pt-8 pb-6 bg-[#edfdf5]
     ============================================ */
  .footer {
    position: relative;
    z-index: 10;
    padding-top: 2rem; /* pt-8 */
    padding-bottom: 1.5rem; /* pb-6 */
    background-color: #edfdf5;
  }

  .footer__container {
    max-width: 1280px;
    margin: 0 auto;
    padding: 0 1rem;
  }

  @media (min-width: 640px) {
    .footer__container {
      padding: 0 2rem;
    }
  }

  @media (min-width: 1024px) {
    .footer__container {
      padding: 0 4rem;
    }
  }

  /* ============================================
     Footer Links Grid
     Tailwind: grid grid-cols-2 md:grid-cols-5 gap-8 mb-12
     ============================================ */
  .footer__links-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr); /* grid-cols-2 */
    gap: 2rem; /* gap-8 */
    margin-bottom: 3rem; /* mb-12 */
  }

  @media (min-width: 768px) {
    .footer__links-grid {
      grid-template-columns: repeat(5, 1fr); /* md:grid-cols-5 */
    }
  }

  /* ============================================
     Footer Column
     ============================================ */
  .footer__column {
    display: flex;
    flex-direction: column;
  }

  /* ============================================
     Column Title
     Tailwind: font-heading font-semibold mb-6 text-black
     ============================================ */
  .footer__column-title {
    font-family: var(--font-heading);
    font-size: 1rem;
    font-weight: 600; /* font-semibold */
    color: #000000; /* text-black */
    margin: 0 0 1.5rem; /* mb-6 */
  }

  /* ============================================
     Column Links
     Tailwind: space-y-3
     ============================================ */
  .footer__column-links {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    flex-direction: column;
    gap: 0.75rem; /* space-y-3 */
  }

  /* ============================================
     Footer Link
     Tailwind: text-muted-foreground text-sm hover:text-primary transition-colors
     ============================================ */
  .footer__link {
    font-size: 0.875rem; /* text-sm */
    color: hsl(var(--muted-foreground));
    text-decoration: none;
    transition: color 0.2s ease; /* transition-colors */
    display: inline-block;
  }

  .footer__link:hover {
    color: hsl(var(--primary)); /* hover:text-primary */
  }

  .footer__link--email {
    display: inline-flex;
    align-items: center;
    gap: 0.375rem;
  }

  /* ============================================
     Social Links
     ============================================ */
  .footer__social-links {
    display: flex;
    gap: 0.75rem;
    margin-bottom: 1.5rem;
  }

  .footer__social-link {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 2.5rem;
    height: 2.5rem;
    color: hsl(var(--foreground));
    text-decoration: none;
    transition: color 0.2s ease;
  }

  .footer__social-link:hover {
    color: hsl(var(--primary));
  }

  /* ============================================
     Payment Icons
     ============================================ */
  .footer__payment-title {
    font-size: 0.875rem;
    font-weight: 600;
    color: hsl(var(--foreground));
    margin: 1.5rem 0 0.75rem;
  }

  .footer__payment-icons {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    justify-content: flex-start;
    pointer-events: none;
    cursor: default;
  }

  .footer__payment-icon {
    height: 24px !important;
    width: auto !important;
    opacity: 1 !important;
    filter: none !important;
    pointer-events: none;
    cursor: default;
  }

  /* Volle Farbe für Payment Icons */
  .footer__payment-icons .icon--full-color {
    opacity: 1 !important;
    filter: none !important;
  }

  /* ============================================
     Bottom Bar
     Tailwind: pt-6 border-t
     ============================================ */
  .footer__bottom-bar {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 1rem;
    padding-top: 1.5rem;
    border-top: 1px solid hsl(var(--border) / 0.5);
  }

  @media (min-width: 768px) {
    .footer__bottom-bar {
      flex-direction: row;
      justify-content: space-between;
    }
  }

  .footer__bottom-logo img {
    height: 1.25rem;
    width: auto;
  }

  .footer__copyright {
    font-size: 0.875rem;
    color: hsl(var(--muted-foreground));
    text-align: center;
    margin: 0;
  }

  @media (min-width: 768px) {
    .footer__copyright {
      text-align: right;
    }
  }
/* END_SECTION:footer */

/* START_SECTION:header (INDEX:5, SCOPED:FALSE) */
/* Header Wrapper - Smart Sticky (below 40px announcement bar) */
  .header-wrapper {
    position: fixed;
    top: 40px;
    left: 0;
    right: 0;
    z-index: 9998;
    background-color: hsl(var(--background));
    transition: transform 0.3s ease;
    will-change: transform;
  }

  /* Hidden state – slides header + announcement bar gap out of view */
  .header-wrapper.header-hidden {
    transform: translateY(calc(-100% - 40px));
  }

  /* Announcement Bar */
  .header__announcement-bar {
    background-color: {{ section.settings.announcement_bg_color | default: '#67ab54' }};
    padding: 0.5rem 0;
    text-align: center;
  }

  .header__announcement-container {
    max-width: 1280px;
    margin: 0 auto;
    padding: 0 1rem;
  }

  @media (min-width: 640px) {
    .header__announcement-container {
      padding: 0 2rem;
    }
  }

  .header__announcement-text {
    font-size: 0.875rem;
    font-weight: 500;
    color: {{ section.settings.announcement_text_color | default: '#ffffff' }};
    text-decoration: none;
    transition: opacity 0.2s ease;
  }

  .header__announcement-text:hover {
    opacity: 0.9;
    text-decoration: underline;
  }

  /* Main Header */
  .header {
    background-color: hsl(var(--background));
    border-bottom: 1px solid hsl(var(--border) / 0.5);
  }

  .header__container {
    max-width: 1280px;
    margin: 0 auto;
    padding: 1rem;
    display: flex;
    align-items: center;
    justify-content: space-between;
    position: relative;
  }

  @media (min-width: 640px) {
    .header__container {
      padding: 1rem 2rem;
    }
  }

  /* Logo (Left) */
  .header__logo {
    display: flex;
    align-items: center;
    text-decoration: none;
    z-index: 10;
  }

  .header__logo img {
    height: auto;
    width: auto;
    max-height: 60px;
    object-fit: contain;
  }

  .header__logo-text {
    font-size: 1.25rem;
    font-weight: 700;
    color: hsl(var(--foreground));
  }

  /* Desktop Navigation (Center) */
  .header__nav-desktop {
    display: none;
    align-items: center;
    gap: 2rem;
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
  }

  @media (min-width: 1024px) {
    .header__nav-desktop {
      display: flex;
    }

    .header__menu-toggle {
      display: none;
    }
  }

  .header__nav-link {
    font-size: 1rem;
    font-weight: 500;
    color: hsl(var(--foreground) / 0.6);
    text-decoration: none;
    transition: color 0.2s ease;
    white-space: nowrap;
  }

  .header__nav-link:hover {
    color: hsl(var(--foreground));
  }

  .header__nav-link.active {
    color: hsl(var(--primary));
    pointer-events: none;
  }

  /* Actions (Right) */
  .header__actions {
    display: flex;
    align-items: center;
    gap: 1rem;
    z-index: 10;
  }

  .header__action-link {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0.5rem;
    color: hsl(var(--foreground));
    text-decoration: none;
    transition: color 0.2s ease;
    background: none;
    border: none;
    cursor: pointer;
  }

  .header__action-link:hover {
    color: hsl(var(--primary));
  }

  .header__cart-link {
    position: relative;
  }

  .header__cart-badge {
    position: absolute;
    top: 0;
    right: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    min-width: 1.125rem;
    height: 1.125rem;
    padding: 0 0.25rem;
    font-size: 0.625rem;
    font-weight: 700;
    color: hsl(var(--primary-foreground));
    background-color: hsl(var(--primary));
    border-radius: 9999px;
  }

  /* Mobile Menu Toggle */
  .header__menu-toggle {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0.5rem;
    background: none;
    border: none;
    color: hsl(var(--foreground));
    cursor: pointer;
  }

  /* Hide account icon on mobile, show on desktop */
  .header__actions > a[aria-label="Account"] {
    display: none;
  }

  @media (min-width: 1024px) {
    .header__actions > a[aria-label="Account"] {
      display: flex;
    }
  }

  /* Mobile Menu */
  .header__mobile-menu {
    background-color: hsl(var(--background));
    border-bottom: 1px solid hsl(var(--border));
  }

  .header__mobile-menu-content {
    max-width: 1280px;
    margin: 0 auto;
    padding: 1rem;
    display: flex;
    flex-direction: column;
    gap: 1rem;
  }

  @media (min-width: 640px) {
    .header__mobile-menu-content {
      padding: 1rem 2rem;
    }
  }

  .header__mobile-link {
    display: block;
    font-size: 1rem;
    font-weight: 500;
    color: hsl(var(--muted-foreground));
    text-decoration: none;
    transition: color 0.2s ease;
  }

  .header__mobile-link:hover {
    color: hsl(var(--foreground));
  }

  .header__mobile-link.active {
    color: hsl(var(--primary));
  }

  .header__mobile-divider {
    padding-top: 1rem;
    border-top: 1px solid hsl(var(--border));
  }

  .header__mobile-account {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    color: hsl(var(--foreground));
  }

  .header__mobile-account:hover {
    color: hsl(var(--primary));
  }

  .header__mobile-account-icon {
    flex-shrink: 0;
  }

  /* Alpine.js x-cloak */
  [x-cloak] {
    display: none !important;
  }

  /* Responsive Design - Desktop */
  @media (min-width: 768px) {
    .header__nav-desktop {
      display: flex;
    }

    .header__action-link:first-child {
      display: flex;
    }

    .header__menu-toggle {
      display: none;
    }
  }

  @media (min-width: 1024px) {
    .header__container {
      padding: 1rem 4rem;
    }

    .header__announcement-container {
      padding: 0 4rem;
    }

    .header__mobile-menu-content {
      padding: 1rem 4rem;
    }
  }

  /* Body Padding for Fixed Header + Announcement Bar */
  body {
    padding-top: calc(5rem + 40px); /* Header height + Announcement bar height */
  }
/* END_SECTION:header */

/* START_SECTION:hero-banner (INDEX:6, SCOPED:FALSE) */
.hero-banner {
    position: relative;
    min-height: 85vh; /* Mobile: ~75% Bildschirmhöhe */
    display: flex;
    align-items: flex-start;
    justify-content: center;
    overflow: hidden;
    background: transparent;
    /* Negativer Margin zieht den Hero hoch unter den fixen Header + Announcement Bar */
    margin-top: calc(-5rem - 40px);
    /* Padding sorgt dafür, dass der Text-Inhalt unter dem Header sichtbar bleibt */
    padding-top: calc(5rem + 40px + 4rem);
  }

  /* Video Background */
  .hero-banner__video {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
    z-index: 1;
  }

  /* Dark Overlay (50% schwarz) – über dem Video, unter dem Text */
  .hero-banner__overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.50);
    z-index: 2;
  }

  /* Fallback: Static Image Background */
  .hero-banner__background {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 0;
    opacity: 0.1;
  }

  .hero-banner__background-image {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
  }

  /* ── Video-Modus: Text hell auf dunklem Hintergrund ── */
  .hero-banner--video .hero-banner__heading {
    color: #ffffff;
  }

  .hero-banner--video .hero-banner__subheading {
    color: rgba(255, 255, 255, 0.85);
  }

  .hero-banner--video .hero-banner__heading .highlight {
    color: #9cd88b;
  }

  .hero-banner__container {
    position: relative;
    z-index: 10;
    width: 100%;
    max-width: 1200px;
    margin: 0 auto;
    padding: 2rem 1.5rem;
    text-align: center;
  }

  .hero-banner__content {
    max-width: 56rem;
    margin: 0 auto;
  }

  .hero-banner__heading {
    font-size: 2.25rem;
    font-weight: 700;
    line-height: 1.2;
    margin-bottom: 1.5rem;
    color: #000000;
    animation: fadeUp 0.6s ease-out;
  }

  .hero-banner__subheading {
    font-size: 1.125rem;
    line-height: 1.75;
    color: #6b7280;
    margin-bottom: 2.5rem;
    max-width: 42rem;
    margin-left: auto;
    margin-right: auto;
    animation: fadeUp 0.8s ease-out;
  }

  .hero-banner__subheading p {
    margin: 0;
  }

  .hero-banner__cta {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 1rem;
    animation: fadeUp 1s ease-out;
  }

  .hero-banner__button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    padding: 0.875rem 2rem;
    font-size: 1rem;
    font-weight: 600;
    color: #ffffff !important;
    background-color: #67ab54 !important;
    border: none;
    border-radius: 9999px;
    cursor: pointer;
    transition: all 0.3s ease;
    text-decoration: none;
    box-shadow: 0 4px 6px -1px rgb(0 0 0 / 0.1),
                0 2px 4px -2px rgb(0 0 0 / 0.1);
  }

  .hero-banner__button:hover {
    background-color: hsl(var(--emerald-700)) !important;
    transform: translateY(-2px);
    box-shadow: var(--shadow-elevated);
    color: #ffffff !important;
  }

  .hero-banner__button-icon {
    width: 1rem;
    height: 1rem;
    color: #ffffff;
    stroke: #ffffff;
    transition: transform 0.3s ease;
  }

  .hero-banner__button:hover .hero-banner__button-icon {
    transform: translateX(2px);
    color: #ffffff;
    stroke: #ffffff;
  }

  /* Animations */
  @keyframes fadeUp {
    from {
      opacity: 0;
      transform: translateY(20px);
    }
    to {
      opacity: 1;
      transform: translateY(0);
    }
  }

  /* Responsive Design */
  @media (min-width: 768px) {
    .hero-banner {
      min-height: 100vh; /* Desktop: volle Bildschirmhöhe */
    }

    .hero-banner__heading {
      font-size: 3rem;
    }

    .hero-banner__subheading {
      font-size: 1.25rem;
    }

    .hero-banner__cta {
      flex-direction: row;
    }
  }

  @media (min-width: 1024px) {
    .hero-banner__heading {
      font-size: 3.75rem;
    }

    .hero-banner__subheading {
      font-size: 1.25rem;
    }

    .hero-banner__container {
      padding: 3rem 2rem;
    }
  }

  /* Highlight color in heading */
  .hero-banner__heading .highlight {
    color: {{ section.settings.highlight_color | default: '#67ab54' }};
  }
/* END_SECTION:hero-banner */

/* START_SECTION:main-about (INDEX:7, SCOPED:FALSE) */
/* ============================================
     Main About Section
     ============================================ */
  .main-about {
    background-color: hsl(var(--background));
  }

  /* ============================================
     Hero Section
     ============================================ */
  .about-hero {
    padding: 4rem 0;
  }

  @media (min-width: 768px) {
    .about-hero {
      padding: 6rem 0;
    }
  }

  .about-hero__container {
    max-width: 1280px;
    margin: 0 auto;
    padding: 0 1rem;
  }

  @media (min-width: 640px) {
    .about-hero__container {
      padding: 0 2rem;
    }
  }

  @media (min-width: 1024px) {
    .about-hero__container {
      padding: 0 4rem;
    }
  }

  .about-hero__grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 4rem;
    align-items: center;
  }

  @media (min-width: 1024px) {
    .about-hero__grid {
      grid-template-columns: repeat(2, 1fr);
      gap: 5rem;
    }
  }

  /* Text Content */
  .about-hero__content {
    display: flex;
    flex-direction: column;
  }

  .about-hero__tag {
    display: block;
    font-size: 0.875rem;
    font-weight: 600;
    color: #67ab54;
    margin-bottom: 0.5rem;
  }

  .about-hero__heading {
    font-family: var(--font-heading);
    font-size: 2.25rem;
    font-weight: 700;
    line-height: 1.1;
    margin-bottom: 2rem;
    color: #000000;
  }

  @media (min-width: 768px) {
    .about-hero__heading {
      font-size: 3rem;
    }
  }

  @media (min-width: 1024px) {
    .about-hero__heading {
      font-size: 3.75rem;
    }
  }

  .about-hero__heading-highlight {
    color: hsl(var(--primary));
  }

  .about-hero__description {
    font-size: 1.125rem;
    line-height: 1.75;
    color: hsl(var(--muted-foreground));
    margin-bottom: 2rem;
  }

  /* Feature Icons */
  .about-hero__features {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 1.5rem;
    padding-top: 1rem;
  }

  .about-hero__feature {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
  }

  .about-hero__feature svg {
    width: 2.5rem;
    height: 2.5rem;
    color: hsl(var(--primary));
    margin-bottom: 0.5rem;
  }

  .about-hero__feature span {
    font-size: 0.875rem;
    font-weight: 500;
    color: hsl(var(--foreground));
  }

  /* Photo Collage */
  .about-hero__collage {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 0.75rem;
  }

  .about-hero__image {
    border-radius: 1rem;
    overflow: hidden;
    aspect-ratio: 1;
    position: relative;
    box-shadow: 0 4px 6px -1px rgb(0 0 0 / 0.1);
  }

  .about-hero__image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.5s ease;
  }

  .about-hero__image:hover img {
    transform: scale(1.05);
  }

  /* Large image - spans 2 columns and 2 rows */
  .about-hero__image--large {
    grid-column: span 2;
    grid-row: span 2;
    box-shadow: 0 10px 15px -3px rgb(0 0 0 / 0.1);
  }

  /* ============================================
     Roadmap Section
     ============================================ */
  .about-roadmap {
    padding: 4rem 0;
  }

  .about-roadmap__container {
    max-width: 1280px;
    margin: 0 auto;
    padding: 0 1rem;
  }

  @media (min-width: 640px) {
    .about-roadmap__container {
      padding: 0 2rem;
    }
  }

  @media (min-width: 1024px) {
    .about-roadmap__container {
      padding: 0 4rem;
    }
  }

  /* Header */
  .about-roadmap__header {
    text-align: center;
    margin-bottom: 4rem;
  }

  .about-roadmap__tag {
    display: block;
    font-size: 0.875rem;
    font-weight: 600;
    color: hsl(var(--primary));
    margin-bottom: 0.5rem;
  }

  .about-roadmap__heading {
    font-family: var(--font-heading);
    font-size: 1.875rem;
    font-weight: 700;
    color: #000000;
    margin: 0;
  }

  @media (min-width: 768px) {
    .about-roadmap__heading {
      font-size: 2.25rem;
    }
  }

  /* Timeline Container */
  .about-roadmap__timeline {
    position: relative;
    max-width: 48rem;
    margin: 0 auto;
  }

  /* Center Line (Background) */
  .about-roadmap__line {
    position: absolute;
    left: 50%;
    top: 0;
    bottom: 0;
    width: 1px;
    background-color: hsl(var(--border));
    transform: translateX(-50%);
    display: none;
  }

  @media (min-width: 768px) {
    .about-roadmap__line {
      display: block;
    }
  }

  /* Center Line (Progress) */
  .about-roadmap__line-progress {
    position: absolute;
    left: 50%;
    top: 0;
    height: 66%;
    width: 1px;
    background-color: hsl(var(--primary));
    transform: translateX(-50%);
    display: none;
    z-index: 1;
  }

  @media (min-width: 768px) {
    .about-roadmap__line-progress {
      display: block;
    }
  }

  /* Timeline Item */
  .about-roadmap__item {
    position: relative;
    margin-bottom: 2.5rem;
  }

  .about-roadmap__item:last-child {
    margin-bottom: 0;
  }

  /* Mobile Layout */
  .about-roadmap__item-mobile {
    display: block;
    padding-left: 2rem;
    position: relative;
  }

  @media (min-width: 768px) {
    .about-roadmap__item-mobile {
      display: none;
    }
  }

  /* Desktop Layout (Zigzag) */
  .about-roadmap__item-desktop {
    display: none;
  }

  @media (min-width: 768px) {
    .about-roadmap__item-desktop {
      display: grid;
      grid-template-columns: 1fr auto 1fr;
      gap: 1.5rem;
      align-items: flex-start;
    }
  }

  /* Left: Content links, Dot Mitte, Spacer rechts */
  .about-roadmap__item-desktop--left .about-roadmap__content {
    order: 1;
    text-align: right;
  }
  .about-roadmap__item-desktop--left .about-roadmap__dot-wrapper {
    order: 2;
  }
  .about-roadmap__item-desktop--left .about-roadmap__spacer {
    order: 3;
  }

  /* Right: Spacer links, Dot Mitte, Content rechts */
  .about-roadmap__item-desktop--right .about-roadmap__content {
    order: 3;
    text-align: left;
  }
  .about-roadmap__item-desktop--right .about-roadmap__dot-wrapper {
    order: 2;
  }
  .about-roadmap__item-desktop--right .about-roadmap__spacer {
    order: 1;
  }

  /* Dot */
  .about-roadmap__dot {
    width: 0.75rem;
    height: 0.75rem;
    border-radius: 50%;
    position: absolute;
    left: 0;
    top: 0.25rem;
  }

  @media (min-width: 768px) {
    .about-roadmap__dot {
      position: relative;
      left: auto;
      top: auto;
      z-index: 10;
    }
  }

  .about-roadmap__dot--completed {
    background-color: hsl(var(--primary));
  }

  .about-roadmap__dot--upcoming {
    background-color: hsl(var(--border));
  }

  /* Pulsing Dot (Current) */
  .about-roadmap__dot--pulse {
    position: absolute;
    left: 0;
    top: 0.25rem;
    display: flex;
    width: 0.75rem;
    height: 0.75rem;
  }

  @media (min-width: 768px) {
    .about-roadmap__dot--pulse {
      position: relative;
      left: auto;
      top: auto;
      z-index: 10;
    }
  }

  .about-roadmap__dot-ping {
    position: absolute;
    display: inline-flex;
    width: 100%;
    height: 100%;
    border-radius: 50%;
    background-color: hsl(var(--primary));
    opacity: 0.75;
    animation: ping 1s cubic-bezier(0, 0, 0.2, 1) infinite;
  }

  @keyframes ping {
    75%, 100% {
      transform: scale(2);
      opacity: 0;
    }
  }

  .about-roadmap__dot-core {
    position: relative;
    display: inline-flex;
    width: 0.75rem;
    height: 0.75rem;
    border-radius: 50%;
    background-color: hsl(var(--primary));
  }

  .about-roadmap__dot-wrapper {
    display: flex;
    justify-content: center;
    align-items: flex-start;
    padding-top: 0.2rem;
  }

  /* Year */
  .about-roadmap__year {
    display: block;
    font-size: 0.75rem;
    font-weight: 500;
    margin-bottom: 0.25rem;
  }

  .about-roadmap__year--current {
    color: hsl(var(--primary));
  }

  .about-roadmap__year--completed,
  .about-roadmap__year--upcoming {
    color: hsl(var(--muted-foreground));
  }

  /* Title */
  .about-roadmap__title {
    font-family: var(--font-heading);
    font-size: 1rem;
    font-weight: 600;
    color: #000000;
    margin: 0 0 0.25rem;
  }

  /* Description */
  .about-roadmap__description {
    font-size: 0.875rem;
    line-height: 1.6;
    color: hsl(var(--muted-foreground));
    margin: 0;
  }

  /* ============================================
     Partner Network Section
     ============================================ */
  .about-partner {
    padding: 1.875rem 0 4.6875rem;
  }

  .about-partner__container {
    max-width: 1280px;
    margin: 0 auto;
    padding: 0 1rem;
  }

  @media (min-width: 640px) {
    .about-partner__container {
      padding: 0 2rem;
    }
  }

  @media (min-width: 1024px) {
    .about-partner__container {
      padding: 0 4rem;
    }
  }

  .about-partner__card {
    position: relative;
    overflow: hidden;
    border-radius: 1.5rem;
    padding: 2rem;
    box-shadow: 0 10px 15px -3px rgb(0 0 0 / 0.1);
  }

  @media (min-width: 768px) {
    .about-partner__card {
      padding: 3rem;
    }
  }

  /* Background Image */
  .about-partner__background {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
  }

  /* Overlay */
  .about-partner__overlay {
    position: absolute;
    inset: 0;
    background-color: hsl(var(--primary) / 0.2);
  }

  /* Content */
  .about-partner__content {
    position: relative;
    z-index: 10;
  }

  .about-partner__tag {
    display: block;
    font-size: 0.875rem;
    font-weight: 600;
    color: hsl(var(--primary));
    margin-bottom: 0.75rem;
  }

  .about-partner__heading {
    font-family: var(--font-heading);
    font-size: 1.5rem;
    font-weight: 700;
    color: #000000;
    margin: 0 0 1rem;
  }

  @media (min-width: 768px) {
    .about-partner__heading {
      font-size: 1.875rem;
    }
  }

  .about-partner__description {
    font-size: 1rem;
    line-height: 1.6;
    color: hsl(var(--muted-foreground));
    max-width: 42rem;
    margin: 0 0 1.5rem;
  }

  /* CTA */
  .about-partner__cta {
    display: flex;
    flex-direction: column;
    gap: 1rem;
    margin-top: 2rem;
  }

  @media (min-width: 640px) {
    .about-partner__cta {
      flex-direction: row;
      align-items: center;
    }
  }

  .about-partner__cta-label {
    font-weight: 600;
    color: #000000;
  }

  .about-partner__button {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    height: 2.5rem;
    padding: 0 1.25rem;
    background-color: hsl(var(--primary));
    color: hsl(var(--primary-foreground));
    border-radius: 9999px;
    font-weight: 500;
    text-decoration: none;
    transition: all 0.3s ease;
    width: fit-content;
  }

  .about-partner__button:hover {
    background-color: hsl(var(--emerald-700));
    transform: translateY(-2px);
    box-shadow: var(--shadow-elevated);
    color: #ffffff !important;
  }

  .about-partner__button svg {
    transition: transform 0.2s ease;
  }

  .about-partner__button:hover svg {
    transform: translateX(0.25rem);
  }

  /* ============================================
     Scroll Reveal Animation
     ============================================ */
  .reveal-on-scroll {
    opacity: 0;
    transform: translateY(30px);
    transition: opacity 0.8s ease-out, transform 0.8s ease-out;
  }

  .reveal-on-scroll.is-visible {
    opacity: 1;
    transform: translateY(0);
  }
/* END_SECTION:main-about */

/* START_SECTION:main-collection (INDEX:9, SCOPED:FALSE) */
/* ============================================
     Main Collection Section
     ============================================ */
  .main-collection {
    padding: 3rem 0;
    background-color: hsl(var(--background));
  }

  .main-collection__container {
    max-width: 1280px;
    margin: 0 auto;
    padding: 0 1rem;
  }

  @media (min-width: 640px) {
    .main-collection__container {
      padding: 0 2rem;
    }
  }

  @media (min-width: 1024px) {
    .main-collection__container {
      padding: 0 4rem;
    }
  }

  /* ============================================
     Header
     ============================================ */
  .main-collection__header {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    margin-bottom: 0;
    gap: 2rem;
  }

  @media (max-width: 768px) {
    .main-collection__header {
      flex-direction: column;
      gap: 1rem;
    }
  }

  .main-collection__title-wrapper {
    flex: 1;
  }

  /* Produktkatalog Tag - identisch mit Bestseller-Tag */
  .main-collection__catalog-tag {
    display: block;
    font-size: 0.875rem;
    font-weight: 600;
    color: #67ab54;
    margin-bottom: 0.5rem;
  }

  .main-collection__heading {
    font-family: var(--font-heading);
    font-size: 2rem;
    font-weight: 700;
    color: hsl(var(--foreground));
    margin: 0;
  }

  @media (min-width: 768px) {
    .main-collection__heading {
      font-size: 2.5rem;
    }
  }

  .main-collection__description {
    font-size: 1rem;
    color: hsl(var(--muted-foreground));
    line-height: 1.6;
    max-width: 48rem;
    margin-top: 0.5rem;
  }

  /* ============================================
     Trust Badges
     ============================================ */
  .trust-badges {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.5rem;
    margin-top: 0.75rem;
    margin-bottom: 1rem;
  }

  .trust-badge {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.375rem 0.75rem;
    background-color: hsl(var(--primary) / 0.1);
    border-radius: 9999px;
    transition: all 0.2s ease;
  }

  .trust-badge__icon {
    flex-shrink: 0;
    width: 1.125rem;
    height: 1.125rem;
    color: hsl(var(--primary));
  }

  .trust-badge__text {
    font-size: 0.875rem;
    font-weight: 700 !important;
    color: hsl(var(--primary));
    white-space: nowrap;
  }

  @media (max-width: 640px) {
    .trust-badge {
      padding: 0.3125rem 0.625rem;
    }
    
    .trust-badge__icon {
      width: 1rem;
      height: 1rem;
    }
    
    .trust-badge__text {
      font-size: 0.8125rem;
    }
  }

  /* ============================================
     Filter & Count Wrapper
     ============================================ */
  .main-collection__filter-wrapper {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 2rem;
    width: 100%;
    margin-top: 0.75rem;
    padding-bottom: 1.25rem;
    margin-bottom: 1.5rem;
    border-bottom: 1px solid #e5e5e5;
  }

  @media (max-width: 768px) {
    .main-collection__filter-wrapper {
      flex-direction: column;
      align-items: flex-start;
      gap: 1rem;
    }
  }

  /* ============================================
     Category Filter Buttons
     ============================================ */
  .main-collection__filters {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
    flex: 1;
  }

  /* Right Container: Product Count & Sort */
  .main-collection__right {
    display: flex;
    align-items: center;
    gap: 1rem;
    flex-shrink: 0;
  }

  @media (max-width: 768px) {
    .main-collection__right {
      width: 100%;
      justify-content: space-between;
    }
  }

  /* Product Count Display */
  .main-collection__product-count {
    font-size: 0.875rem;
    font-weight: 500;
    color: hsl(var(--muted-foreground));
    white-space: nowrap;
  }

  @media (max-width: 768px) {
    .main-collection__product-count {
      font-size: 0.8125rem;
    }
  }

  .main-collection__filter-button {
    display: inline-flex;
    align-items: center;
    padding: 0.5rem 1rem;
    background-color: hsl(var(--card));
    border: 1px solid hsl(var(--border));
    border-radius: 9999px;
    font-size: 0.875rem;
    font-weight: 500;
    color: hsl(var(--foreground));
    text-decoration: none;
    transition: all 0.2s ease;
    cursor: pointer;
  }

  /* Hover nur für INAKTIVE Buttons */
  .main-collection__filter-button:not(.main-collection__filter-button--active):hover {
    background-color: hsl(var(--muted) / 0.5);
    border-color: hsl(var(--border));
    transform: translateY(-1px);
  }

  /* Active State */
  .main-collection__filter-button--active {
    background-color: hsl(var(--primary));
    color: hsl(var(--primary-foreground));
    border-color: hsl(var(--primary));
    box-shadow: 0 2px 8px hsl(var(--primary) / 0.25);
  }

  /* Active State Hover - KEIN Effekt */
  .main-collection__filter-button--active:hover {
    background-color: hsl(var(--primary));
    color: hsl(var(--primary-foreground));
    border-color: hsl(var(--primary));
    box-shadow: 0 2px 8px hsl(var(--primary) / 0.25);
    transform: none;
    filter: none;
  }

  @media (max-width: 640px) {
    .main-collection__filter-button {
      padding: 0.4375rem 0.875rem;
      font-size: 0.8125rem;
    }
  }

  /* ============================================
     Products Grid
     ============================================ */
  .main-collection__grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 1.5rem;
  }

  @media (min-width: 640px) {
    .main-collection__grid {
      grid-template-columns: repeat(2, 1fr);
    }
  }

  @media (min-width: 1024px) {
    .main-collection__grid {
      grid-template-columns: repeat(3, 1fr);
    }
  }

  .main-collection__product-link {
    text-decoration: none;
    display: block;
  }

  /* ============================================
     Product Card (Reusable)
     ============================================ */
  .product-card {
    background-color: hsl(var(--card));
    border: 1px solid hsl(var(--border) / 0.5);
    border-radius: 1rem;
    padding: 1rem;
    transition: all 0.3s ease;
    position: relative;
    height: 100%;
    display: flex;
    flex-direction: column;
  }

  .product-card:hover {
    box-shadow: var(--shadow-elevated);
    transform: translateY(-4px);
  }

  /* Product Image */
  .product-card__image-wrapper {
    position: relative;
    aspect-ratio: 1;
    border-radius: 0.75rem;
    overflow: hidden;
    background-color: hsl(var(--secondary));
    margin-bottom: 0.75rem;
  }

  .product-card__image {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.5s ease;
  }

  .product-card:hover .product-card__image {
    transform: scale(1.05);
  }

  .product-card__image-placeholder {
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    color: hsl(var(--muted-foreground));
  }

  /* Badge */
  .product-card__badge {
    position: absolute;
    top: 0.75rem;
    left: 0.75rem;
    z-index: 10;
    display: inline-block;
    background-color: #ffffff; /* Weißer Hintergrund */
    color: #67ab54; /* Grüne Schrift */
    font-size: 0.875rem;
    font-weight: 700;
    padding: 0.25rem 0.75rem;
    border-radius: 9999px; /* rounded-full */
    box-shadow: 0 1px 3px 0 rgb(0 0 0 / 0.1);
  }

  .product-card__badge--new {
    background-color: #67ab54; /* Grüner Hintergrund für "Neu" */
    color: #ffffff; /* Weiße Schrift */
  }

  /* Product Content */
  .product-card__content {
    display: flex;
    flex-direction: column;
    flex: 1;
  }

  .product-card__title {
    font-family: var(--font-heading);
    font-size: 1.125rem;
    font-weight: 600;
    color: hsl(var(--foreground));
    margin: 0 0 0.125rem;
    line-height: 1.3;
  }

  .product-card__category {
    font-size: 0.8125rem; /* 13px */
    color: #6b7280;
    margin: 4px 0 8px 0;
  }

  /* Footer (Price + Cart Button) */
  .product-card__footer {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-top: auto;
  }

  .product-card__price-wrapper {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: 8px;
  }

  .product-card__price {
    font-family: var(--font-heading);
    font-size: 1.5rem;
    font-weight: 700;
    color: hsl(var(--foreground));
  }

  .product-card__price--sale {
    color: hsl(var(--primary));
  }

  .product-card__price--compare {
    font-size: 1rem;
    font-weight: 400;
    color: hsl(var(--muted-foreground));
    text-decoration: line-through;
    margin-left: 0.5rem;
  }

  .product-card__unit-price {
    display: inline-block;
    font-size: 0.875rem;
    color: #6b7280;
    margin: 0;
  }

  /* Cart Button */
  .product-card__cart-button {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 3rem;
    height: 3rem;
    border-radius: 9999px;
    background-color: hsl(var(--primary) / 0.1);
    border: none;
    cursor: pointer;
    transition: all 0.2s ease;
  }

  .product-card__cart-button:hover {
    background-color: hsl(var(--primary));
  }

  .product-card__cart-icon {
    color: hsl(var(--primary));
    transition: all 0.2s ease;
  }

  .product-card__cart-button:hover .product-card__cart-icon {
    color: hsl(var(--primary-foreground));
    transform: scale(1.1);
  }

  .product-card__plus-icon {
    position: absolute;
    top: -0.25rem;
    right: -0.25rem;
    width: 1.25rem;
    height: 1.25rem;
    padding: 0.125rem;
    background-color: hsl(var(--primary));
    color: hsl(var(--primary-foreground));
    border-radius: 9999px;
    transition: all 0.2s ease;
  }

  .product-card__cart-button:hover .product-card__plus-icon {
    transform: scale(1.25) rotate(90deg);
  }

  /* ============================================
     Pagination
     ============================================ */
  .main-collection__pagination {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 1rem;
    margin-top: 3rem;
    flex-wrap: wrap;
  }

  .pagination__button {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.75rem 1.25rem;
    background-color: hsl(var(--card));
    border: 1px solid hsl(var(--border));
    border-radius: 0.5rem;
    font-size: 0.875rem;
    font-weight: 500;
    color: hsl(var(--foreground));
    text-decoration: none;
    transition: all 0.2s ease;
    cursor: pointer;
  }

  .pagination__button:hover {
    background-color: hsl(var(--primary));
    color: hsl(var(--primary-foreground));
    border-color: hsl(var(--primary));
  }

  .pagination__button--disabled {
    opacity: 0.4;
    cursor: not-allowed;
    pointer-events: none;
  }

  .pagination__pages {
    display: flex;
    align-items: center;
    gap: 0.5rem;
  }

  .pagination__page {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 2.5rem;
    height: 2.5rem;
    padding: 0 0.5rem;
    background-color: hsl(var(--card));
    border: 1px solid hsl(var(--border));
    border-radius: 0.5rem;
    font-size: 0.875rem;
    font-weight: 500;
    color: hsl(var(--foreground));
    text-decoration: none;
    transition: all 0.2s ease;
  }

  .pagination__page:hover {
    background-color: hsl(var(--primary) / 0.1);
    border-color: hsl(var(--primary));
  }

  .pagination__page--current {
    background-color: hsl(var(--primary));
    color: hsl(var(--primary-foreground));
    border-color: hsl(var(--primary));
  }

  .pagination__page--separator {
    border: none;
    background: none;
  }

  /* ============================================
     Empty State
     ============================================ */
  .main-collection__empty {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
    padding: 5rem 2rem;
  }

  .main-collection__empty svg {
    color: hsl(var(--muted-foreground));
    margin-bottom: 1.5rem;
  }

  .main-collection__empty h3 {
    font-family: var(--font-heading);
    font-size: 1.5rem;
    font-weight: 700;
    color: hsl(var(--foreground));
    margin: 0 0 0.5rem;
  }

  .main-collection__empty p {
    font-size: 1rem;
    color: hsl(var(--muted-foreground));
    margin: 0;
    max-width: 32rem;
  }

  /* ============================================
     Scroll Animation (Fade-Up)
     ============================================ */
  .scroll-animation {
    opacity: 0;
    transform: translateY(30px);
    transition: opacity 0.6s ease-out, transform 0.6s ease-out;
  }

  .scroll-animation.is-visible {
    opacity: 1;
    transform: translateY(0);
  }
/* END_SECTION:main-collection */

/* START_SECTION:main-product (INDEX:12, SCOPED:FALSE) */
.main-product {
    padding: 3rem 0;
    background-color: {{ section.settings.background_color | default: '#ffffff' }};
  }

  .main-product__container {
    max-width: 1280px;
    margin: 0 auto;
    padding: 0 1.5rem;
  }

  .main-product__wrapper {
    display: grid;
    grid-template-columns: 1fr;
    gap: 3rem;
  }

  /* Image Section */
  .main-product__media {
    width: 100%;
  }

  .main-product__image-wrapper {
    position: relative;
    aspect-ratio: 1;
    background-color: hsl(var(--secondary));
    border-radius: 1rem;
    overflow: hidden;
    display: flex;
    align-items: center;
    justify-content: center;
  }

  .main-product__image {
    width: 100%;
    height: 100%;
    object-fit: cover;
  }

  .main-product__image-placeholder {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 100%;
    color: hsl(var(--primary));
  }

  /* Details Section */
  .main-product__details {
    display: flex;
    flex-direction: column;
    gap: 4px;
  }

  /* Badge Wrapper - kompakt zum Trust-Badge */
  .main-product__badge-wrapper {
    display: flex;
    justify-content: flex-start;
    margin-bottom: 4px !important;
  }

  /* Bestseller Badge - Trust-Badge Style (ohne Icon) */
  .main-product__badge {
    display: inline-block;
    background-color: hsl(var(--primary) / 0.1);
    color: hsl(var(--primary));
    font-size: 0.875rem;
    font-weight: 700 !important;
    padding: 0.375rem 0.75rem;
    border-radius: 9999px;
    white-space: nowrap;
    width: fit-content;
  }

  /* Produkt-Titel - eng zusammen mit Badge und Features */
  .main-product__title {
    font-size: 27px;
    font-weight: 700;
    color: hsl(var(--foreground));
    line-height: 1.2 !important;
    margin-top: 0 !important;
    margin-bottom: 0.5rem !important;
    padding: 0 !important;
  }

  /* Features List - eng unter Trennlinie */
  .main-product__features {
    list-style: none;
    padding: 0 !important;
    padding-left: 0 !important;
    margin-top: 0 !important;
    margin-bottom: 8px !important;
    display: flex;
    flex-direction: column;
    gap: 0.3rem;
  }

  .main-product__feature-item {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    color: hsl(var(--foreground));
  }

  .main-product__check-icon {
    flex-shrink: 0;
    color: hsl(var(--primary));
  }

  /* Trust Badge (unter Trennlinie, über Bulletpoints) */
  .product-trust-badge {
    display: flex;
    align-items: center;
    font-weight: 700;
    font-size: 1rem;
    color: #000;
    margin-top: 12px !important;
    margin-bottom: 20px !important;
  }

  .product-trust-badge__star {
    color: #67AB54;
    font-size: 1.2em;
    margin-right: 12px;
  }

  /* Trennlinie unter Titel */
  .main-product__divider {
    border: 0;
    border-top: 1px solid #e5e5e5;
    margin-top: 10px;
    margin-bottom: 8px;
  }

  /* Form */
  .main-product__form-wrapper {
    margin-top: 0.5rem;
  }

  .main-product__form {
    display: flex;
    flex-direction: column;
    gap: 12px;
  }

  /* Variant Selector */
  .main-product__variants {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
  }

  .main-product__variants-label {
    font-size: 1rem;
    font-weight: 600;
    color: hsl(var(--foreground));
    margin: 0;
  }

  .main-product__variant-buttons {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
  }

  .main-product__variant-button {
    padding: 0.5rem 1rem;
    border-radius: 9999px;
    font-size: 0.875rem;
    font-weight: 500;
    background-color: hsl(var(--card));
    border: 1px solid hsl(var(--border));
    color: hsl(var(--foreground));
    cursor: pointer;
    transition: all 0.2s ease;
  }

  .main-product__variant-button:hover:not(:disabled) {
    border-color: hsl(var(--primary));
    color: hsl(var(--primary));
  }

  .main-product__variant-button.active {
    background-color: hsl(var(--primary));
    border-color: hsl(var(--primary));
    color: hsl(var(--primary-foreground));
  }

  .main-product__variant-button:disabled {
    background-color: hsl(var(--muted));
    color: hsl(var(--muted-foreground));
    cursor: not-allowed;
    opacity: 0.5;
  }

  /* Price */
  .main-product__price-wrapper {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    column-gap: 8px;
    row-gap: 0;
    margin-top: 20px !important;
    padding-top: 0 !important;
    margin-bottom: 0px !important;
    padding-bottom: 0px !important;
  }

  .main-product__price {
    font-size: 23px;
    font-weight: bold;
    color: hsl(var(--foreground));
    padding-top: 0 !important;
  }

  .main-product__unit-price {
    display: inline-block;
    font-size: 0.875rem;
    color: #6b7280;
    margin: 0;
  }

  .main-product__price-note {
    display: block !important;
    width: 100%;
    font-size: 12px;
    line-height: 1.2;
    color: #666;
    margin-top: 0px !important;
    padding-top: 2px;
    margin-bottom: 0;
  }

  /* Add to Cart Button */
  .main-product__add-to-cart {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.75rem;
    width: 100%;
    padding: 1rem 2rem;
    font-size: 1.125rem;
    font-weight: 600;
    color: hsl(var(--primary-foreground));
    background-color: hsl(var(--primary));
    border: none;
    border-radius: 0.5rem;
    cursor: pointer;
    transition: all 0.3s ease;
  }

  .main-product__add-to-cart:hover:not(:disabled) {
    background-color: hsl(var(--emerald-700));
    transform: translateY(-2px);
    box-shadow: var(--shadow-elevated);
  }

  .main-product__add-to-cart:disabled {
    background-color: hsl(var(--muted));
    color: hsl(var(--muted-foreground));
    cursor: not-allowed;
    opacity: 0.6;
  }

  /* Availability */
  .main-product__availability {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    font-size: 0.875rem;
  }

  .main-product__stock-indicator {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 0.75rem;
    height: 0.75rem;
  }

  .main-product__stock-pulse {
    position: absolute;
    display: inline-flex;
    width: 100%;
    height: 100%;
    border-radius: 9999px;
    background-color: hsl(var(--primary));
    opacity: 0.75;
    animation: ping 1s cubic-bezier(0, 0, 0.2, 1) infinite;
  }

  .main-product__stock-dot {
    position: relative;
    display: inline-flex;
    width: 0.75rem;
    height: 0.75rem;
    border-radius: 9999px;
    background-color: hsl(var(--primary));
  }

  .main-product__stock-text {
    color: hsl(var(--primary));
    font-weight: 500;
  }

  .main-product__delivery-text {
    color: hsl(var(--muted-foreground));
  }

  @keyframes ping {
    75%, 100% {
      transform: scale(2);
      opacity: 0;
    }
  }

  /* Description */
  /* Product Info Accordions - Clean Structure */
  .main-product__accordions {
    padding-top: 0.5rem;
    margin-top: 0.5rem;
  }

  /* Container Reset - Kein Außenabstand */
  .clean-accordion {
    border-bottom: 1px solid #e5e5e5;
    margin: 0 !important;
    padding: 0 !important;
  }

  /* Letztes Accordion: Keine Linie */
  .clean-accordion:last-child {
    border-bottom: none !important;
  }

  /* Titel: Nur Innenabstand, KEIN Außenabstand */
  .clean-summary {
    padding: 15px 0; /* Oben/Unten Padding für Klickfläche */
    margin: 0 !important;
    cursor: pointer;
    list-style: none; /* Dreieck weg */
    display: flex;
    justify-content: space-between;
    align-items: center;
    transition: color 0.2s ease;
  }

  .clean-summary::-webkit-details-marker {
    display: none;
  }

  /* Hover Effekt */
  .clean-summary:hover {
    color: hsl(var(--primary));
  }

  .clean-summary:hover .accordion-title {
    color: hsl(var(--primary));
  }

  /* Titel Text */
  .accordion-title {
    font-family: var(--font-heading);
    font-size: 1rem;
    font-weight: 600;
    color: hsl(var(--foreground));
    transition: color 0.2s ease;
  }

  /* Icon (Plus) */
  .accordion-icon {
    font-size: 1.5rem;
    font-weight: 300;
    color: hsl(var(--muted-foreground));
    transition: transform 0.3s ease;
    flex-shrink: 0;
    line-height: 1;
  }

  /* Icon rotiert beim Öffnen */
  .clean-accordion[open] .accordion-icon {
    transform: rotate(45deg);
  }

  /* Inhalt: Startet direkt unter dem Titel */
  .clean-content {
    padding-bottom: 15px; /* Abstand nur unten */
    padding-top: 0 !important; /* WICHTIG: Oben 0 */
    margin-top: 0 !important;
    margin-bottom: 0 !important;
  }

  /* Der Text-Wrapper */
  .clean-text-wrapper {
    color: hsl(var(--muted-foreground));
    line-height: 1.7;
    font-size: 0.9375rem;
    margin: 0 !important;
    padding: 0 !important;
  }

  /* Zwinge den ersten Absatz ganz nach oben */
  .clean-text-wrapper > *:first-child {
    margin-top: 0 !important;
    padding-top: 0 !important;
  }

  /* Alle möglichen ersten Elemente */
  .clean-text-wrapper > p:first-child,
  .clean-text-wrapper > h1:first-child,
  .clean-text-wrapper > h2:first-child,
  .clean-text-wrapper > h3:first-child,
  .clean-text-wrapper > h4:first-child,
  .clean-text-wrapper > h5:first-child,
  .clean-text-wrapper > h6:first-child,
  .clean-text-wrapper > div:first-child,
  .clean-text-wrapper > ul:first-child,
  .clean-text-wrapper > ol:first-child {
    margin-top: 0 !important;
    padding-top: 0 !important;
  }

  /* Shopify RTE Klassen überschreiben */
  .clean-text-wrapper .rte,
  .clean-text-wrapper .prose {
    margin-top: 0 !important;
    padding-top: 0 !important;
  }

  .clean-text-wrapper .rte > *:first-child,
  .clean-text-wrapper .prose > *:first-child {
    margin-top: 0 !important;
    padding-top: 0 !important;
  }

  /* Verhindere min-height Probleme */
  .clean-content,
  .clean-text-wrapper,
  .clean-text-wrapper > * {
    min-height: 0 !important;
  }

  /* Smooth Fade-In Animation */
  .clean-accordion[open] .clean-content {
    animation: fadeInClean 0.3s ease-in-out;
  }

  @keyframes fadeInClean {
    from {
      opacity: 0;
    }
    to {
      opacity: 1;
    }
  }

  /* Desktop: Mehr Padding */
  @media (min-width: 768px) {
    .clean-summary {
      padding: 18px 0;
    }

    .accordion-title {
      font-size: 1.125rem;
    }

    .clean-content {
      padding-bottom: 20px;
    }
  }

  /* Properties - moderater Abstand nach oben */
  .main-product__properties {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 2rem;
    padding-top: 1.25rem;
    border-top: 1px solid hsl(var(--border));
  }

  .main-product__property {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    gap: 0.75rem;
  }

  .main-product__property svg {
    color: hsl(var(--primary));
  }

  .main-product__property span {
    font-size: 0.875rem;
    font-weight: 500;
    color: hsl(var(--foreground));
  }

  /* Responsive Design */
  @media (min-width: 768px) {
    .main-product__wrapper {
      grid-template-columns: 1fr 1fr;
      gap: 3rem;
    }

    .main-product__media {
      position: sticky;
      top: 6rem;
      align-self: start;
    }

    .main-product__title {
      font-size: 28px;
      line-height: 1.2;
    }
  }

  @media (min-width: 1024px) {
    .main-product {
      padding: 4rem 0;
    }

    .main-product__wrapper {
      gap: 5rem;
    }

    .main-product__container {
      padding: 0 3rem;
    }
  }
/* END_SECTION:main-product */

/* START_SECTION:marketing-popup (INDEX:15, SCOPED:FALSE) */
/* ============================================
     Marketing Popup
     ============================================ */
  
  /* Alpine.js cloak */
  [x-cloak] { 
    display: none !important; 
  }

  .marketing-popup-wrapper {
    position: relative;
  }

  .marketing-popup {
    position: fixed;
    bottom: 1rem;
    right: 1rem;
    z-index: 9999;
    max-width: 320px;
    width: 100%;
    background: linear-gradient(135deg, 
      #ffffff 0%,
      hsl(var(--primary) / 0.05) 100%
    );
    border-radius: 1.5rem;
    box-shadow: 
      0 20px 25px -5px rgb(0 0 0 / 0.1),
      0 8px 10px -6px rgb(0 0 0 / 0.1);
    overflow: hidden;
    backdrop-filter: blur(8px);
  }

  @media (max-width: 640px) {
    .marketing-popup {
      max-width: calc(100vw - 2rem);
      right: 1rem;
      left: 1rem;
    }
  }

  /* Close Button */
  .marketing-popup__close {
    position: absolute;
    top: 0.75rem;
    right: 0.75rem;
    z-index: 10;
    width: 1.75rem;
    height: 1.75rem;
    background-color: rgba(255, 255, 255, 0.8);
    border: none;
    border-radius: 9999px;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: all 0.2s ease;
    box-shadow: 0 1px 3px 0 rgb(0 0 0 / 0.1);
  }

  .marketing-popup__close:hover {
    background-color: #ffffff;
    transform: scale(1.1);
  }

  .marketing-popup__close svg {
    color: hsl(var(--foreground) / 0.7);
  }

  /* Badge */
  .marketing-popup__badge {
    position: absolute;
    top: 0.75rem;
    left: 0.75rem;
    z-index: 10;
    background-color: hsl(var(--primary));
    color: hsl(var(--primary-foreground));
    font-size: 0.625rem;
    font-weight: 700;
    padding: 0.25rem 0.625rem;
    border-radius: 9999px;
    display: flex;
    align-items: center;
    gap: 0.25rem;
    box-shadow: 0 10px 15px -3px rgb(0 0 0 / 0.1);
    text-transform: uppercase;
    letter-spacing: 0.025em;
  }

  /* Large Image */
  .marketing-popup__image {
    width: 100%;
    height: 10rem;
    overflow: hidden;
  }

  .marketing-popup__image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
  }

  /* Content Area */
  .marketing-popup__content {
    padding: 1rem;
    background-color: #ffffff;
  }

  /* Tag Line */
  .marketing-popup__tag {
    display: flex;
    align-items: center;
    gap: 0.375rem;
    color: hsl(var(--primary));
    font-size: 0.75rem;
    font-weight: 600;
    margin-bottom: 0.375rem;
  }

  .marketing-popup__tag svg {
    flex-shrink: 0;
  }

  /* Footer (Heading + Button) */
  .marketing-popup__footer {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.75rem;
  }

  .marketing-popup__heading {
    font-family: var(--font-heading);
    font-size: 1.125rem;
    font-weight: 700;
    line-height: 1.25;
    color: hsl(var(--foreground));
    margin: 0;
    flex: 1;
  }

  /* CTA Button – Hover-Effekt identisch mit cart-empty__button */
  .marketing-popup__button {
    flex-shrink: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.375rem;
    background-color: hsl(var(--primary));
    color: hsl(var(--primary-foreground));
    padding: 0.5rem 1rem;
    border-radius: 9999px;
    font-size: 0.75rem;
    font-weight: 600;
    text-decoration: none;
    cursor: pointer;
    transition: all 0.3s ease;
    overflow: hidden;
  }

  .marketing-popup__button:hover {
    background-color: hsl(var(--emerald-700));
    transform: translateY(-2px);
    box-shadow: var(--shadow-elevated);
    color: #ffffff !important;
  }

  .marketing-popup__button svg {
    flex-shrink: 0;
    transition: transform 0.2s ease;
    color: #ffffff !important;
    stroke: #ffffff !important;
  }

  .marketing-popup__button:hover svg {
    color: #ffffff !important;
    stroke: #ffffff !important;
    transform: translateX(2px);
  }

  .marketing-popup__button:hover,
  .marketing-popup__button:hover * {
    color: #ffffff !important;
  }

  /* ============================================
     Alpine.js Transitions
     ============================================ */
  .popup-enter {
    transition: all 0.5s ease;
  }

  .popup-enter-start {
    opacity: 0;
    transform: translateY(1rem) translateX(1rem);
  }

  .popup-enter-end {
    opacity: 1;
    transform: translateY(0) translateX(0);
  }

  .popup-leave {
    transition: all 0.3s ease;
  }

  .popup-leave-start {
    opacity: 1;
    transform: translateY(0) translateX(0);
  }

  .popup-leave-end {
    opacity: 0;
    transform: translateY(1rem) translateX(1rem);
  }
/* END_SECTION:marketing-popup */

/* START_SECTION:needs-check (INDEX:16, SCOPED:FALSE) */
/* ============================================
     Needs Check Section
     ============================================ */
  .needs-check {
    padding: 3rem 0;
    background-color: hsl(var(--background));
  }

  .needs-check__container {
    max-width: 1280px;
    margin: 0 auto;
    padding: 0 1rem;
  }

  @media (min-width: 640px) {
    .needs-check__container {
      padding: 0 2rem;
    }
  }

  @media (min-width: 768px) {
    .needs-check__container {
      padding: 0 3rem;
    }
  }

  @media (min-width: 1024px) {
    .needs-check__container {
      padding: 0 4rem;
    }
  }

  /* ============================================
     Header
     ============================================ */
  .needs-check__header {
    margin-bottom: 2rem;
  }

  .needs-check__tag {
    display: block;
    font-size: 0.875rem;
    font-weight: 600;
    color: #67ab54;
    margin-bottom: 0.25rem;
  }

  .needs-check__heading {
    font-family: var(--font-heading);
    font-size: 1.875rem;
    font-weight: 700;
    color: #000000;
    margin: 0 0 0.5rem;
    line-height: 1.2;
  }

  @media (min-width: 768px) {
    .needs-check__heading {
      font-size: 2.25rem;
    }
  }

  .needs-check__description {
    font-size: 1.125rem;
    color: hsl(var(--muted-foreground));
    max-width: 42rem;
    margin: 0;
    line-height: 1.6;
  }

  /* ============================================
     Grid Wrapper
     ============================================ */
  .needs-check__grid-wrapper {
    position: relative;
  }

  /* ============================================
     Mobile & Tablet Slider
     Tailwind: overflow-x-auto pb-4 -mx-4 px-4 scrollbar-hide snap-x
     ============================================ */
  .needs-check__slider {
    display: block;
    overflow-x: auto;
    padding-bottom: 1rem;
    margin-left: -1rem;
    margin-right: -1rem;
    padding-left: 1rem;
    padding-right: 1rem;
    -ms-overflow-style: none;
    scrollbar-width: none;
    scroll-snap-type: x mandatory;
  }

  .needs-check__slider::-webkit-scrollbar {
    display: none;
  }

  @media (min-width: 1024px) {
    .needs-check__slider {
      display: none;
    }
  }

  /* ============================================
     Slider Track
     Tailwind: flex gap-3, width: max-content
     ============================================ */
  .needs-check__slider-track {
    display: flex;
    gap: 0.75rem;
    width: max-content;
  }

  /* ============================================
     Desktop Grid
     Tailwind: hidden lg:grid lg:grid-cols-4 gap-5
     ============================================ */
  .needs-check__grid {
    display: none;
  }

  @media (min-width: 1024px) {
    .needs-check__grid {
      display: grid;
      grid-template-columns: repeat(4, 1fr);
      gap: 1.25rem;
    }
  }

  /* ============================================
     Focus Area Card
     Tailwind: group relative overflow-hidden rounded-xl
     Mobile: w-[280px] aspect-[4/5] snap-center
     Desktop: aspect-square
     ============================================ */
  .needs-check__card {
    position: relative;
    display: block;
    overflow: hidden;
    border-radius: 0.75rem;
    text-decoration: none;
    flex-shrink: 0;
    width: 280px;
    aspect-ratio: 4/5;
    scroll-snap-align: center;
    transition: all 0.3s ease;
  }

  @media (min-width: 1024px) {
    .needs-check__card {
      width: auto;
      aspect-ratio: 1;
    }
  }

  /* ============================================
     Card Image
     Tailwind: absolute inset-0 w-full h-full object-cover transition-transform duration-700 group-hover:scale-110
     ============================================ */
  .needs-check__card-image {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.7s ease;
  }

  .needs-check__card:hover .needs-check__card-image {
    transform: scale(1.1);
  }

  .needs-check__card-placeholder {
    position: absolute;
    inset: 0;
    background-color: hsl(var(--muted));
  }

  /* ============================================
     Card Overlay
     Tailwind: absolute inset-0 bg-black/40 transition-all duration-500 group-hover:bg-black/25
     ============================================ */
  .needs-check__card-overlay {
    position: absolute;
    inset: 0;
    background-color: rgba(0, 0, 0, 0.4);
    transition: background-color 0.5s ease;
  }

  .needs-check__card:hover .needs-check__card-overlay {
    background-color: rgba(0, 0, 0, 0.25);
  }

  /* ============================================
     Arrow Icon
     Tailwind: absolute top-4 right-4 opacity-0 group-hover:opacity-100 
               transition-all duration-300 transform translate-x-2 group-hover:translate-x-0
     ============================================ */
  .needs-check__card-arrow {
    position: absolute;
    top: 1rem;
    right: 1rem;
    opacity: 0;
    transform: translateX(0.5rem);
    transition: all 0.3s ease;
    color: #ffffff;
  }

  .needs-check__card:hover .needs-check__card-arrow {
    opacity: 1;
    transform: translateX(0);
  }

  /* ============================================
     Card Content
     Tailwind: absolute inset-0 p-6 flex flex-col justify-end text-white
     ============================================ */
  .needs-check__card-content {
    position: absolute;
    inset: 0;
    padding: 1.5rem;
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    color: #ffffff;
  }

  /* ============================================
     Card Title
     Tailwind: text-xl font-heading font-bold transition-transform duration-300 group-hover:translate-x-1
     ============================================ */
  .needs-check__card-title {
    font-family: var(--font-heading);
    font-size: 1.25rem;
    font-weight: 700;
    margin: 0;
    transition: transform 0.3s ease;
  }

  .needs-check__card:hover .needs-check__card-title {
    transform: translateX(0.25rem);
  }

  /* ============================================
     Scroll Reveal Animation
     ============================================ */
  .needs-check .reveal-item {
    opacity: 0;
    transform: translateY(30px);
    transition: opacity 0.8s cubic-bezier(0.2, 0.8, 0.2, 1),
                transform 0.8s cubic-bezier(0.2, 0.8, 0.2, 1);
    will-change: opacity, transform;
  }

  .needs-check .reveal-item.is-visible {
    opacity: 1;
    transform: translateY(0);
  }

  @media (prefers-reduced-motion: reduce) {
    .needs-check .reveal-item {
      opacity: 1;
      transform: none;
      transition: none;
    }
  }
/* END_SECTION:needs-check */

/* START_SECTION:product-recommendations (INDEX:17, SCOPED:FALSE) */
/* ============================================
     Product Recommendations Section
     ============================================ */
  .product-recommendations {
    padding: 1rem 0 2rem;
    background-color: transparent;
    position: relative;
    overflow: hidden;
  }

  .product-recommendations__container {
    max-width: 1280px;
    margin: 0 auto;
    padding: 0 1rem;
    position: relative;
    z-index: 10;
  }

  @media (min-width: 640px) {
    .product-recommendations__container {
      padding: 0 2rem;
    }
  }

  @media (min-width: 1024px) {
    .product-recommendations__container {
      padding: 0 4rem;
    }
  }

  /* ============================================
     Header
     ============================================ */
  .product-recommendations__header {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    margin-bottom: 2.5rem !important;
  }

  .product-recommendations__heading {
    font-family: var(--font-heading);
    font-size: 1.875rem;
    font-weight: 700;
    color: #000000;
    margin: 0;
  }

  @media (min-width: 768px) {
    .product-recommendations__heading {
      font-size: 2.25rem;
    }
  }

  /* View All Link */
  .product-recommendations__view-all {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    font-size: 0.875rem;
    font-weight: 500;
    color: hsl(var(--foreground));
    text-decoration: none;
    transition: color 0.2s ease;
    white-space: nowrap;
  }

  @media (min-width: 640px) {
    .product-recommendations__view-all {
      font-size: 1rem;
    }
  }

  .product-recommendations__view-all:hover {
    color: hsl(var(--primary));
  }

  .product-recommendations__view-all svg {
    transition: transform 0.2s ease;
  }

  .product-recommendations__view-all:hover svg {
    transform: translateX(0.25rem);
  }

  /* ============================================
     Mobile Slider
     ============================================ */
  .product-recommendations__slider {
    display: block;
    overflow-x: auto;
    padding-bottom: 1rem;
    margin-left: -1rem;
    margin-right: -1rem;
    padding-left: 1rem;
    padding-right: 1rem;
    -ms-overflow-style: none;
    scrollbar-width: none;
  }

  .product-recommendations__slider::-webkit-scrollbar {
    display: none;
  }

  @media (min-width: 1024px) {
    .product-recommendations__slider {
      display: none;
    }
  }

  .product-recommendations__slider-track {
    display: flex;
    gap: 1rem;
    width: max-content;
  }

  /* ============================================
     Desktop Grid
     ============================================ */
  .product-recommendations__grid {
    display: none;
  }

  @media (min-width: 1024px) {
    .product-recommendations__grid {
      display: grid;
      grid-template-columns: repeat(3, 1fr);
      gap: 1.5rem;
    }
  }

  .product-recommendations__product-card {
    text-decoration: none;
    display: block;
  }

  /* ============================================
     Product Card (Reusable - Copied from Bestseller)
     ============================================ */
  .product-card {
    background-color: hsl(var(--card));
    border: 1px solid hsl(var(--border) / 0.5);
    border-radius: 1rem;
    padding: 1rem;
    transition: all 0.3s ease;
    position: relative;
  }

  .product-card:hover {
    box-shadow: var(--shadow-elevated);
    transform: translateY(-4px);
  }

  .product-card--mobile {
    width: 280px;
    flex-shrink: 0;
    padding: 0.75rem;
  }

  /* Product Image */
  .product-card__image-wrapper {
    position: relative;
    aspect-ratio: 1;
    border-radius: 0.75rem;
    overflow: hidden;
    background-color: hsl(var(--emerald-50));
    margin-bottom: 0.75rem;
  }

  .product-card__image {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.5s ease;
  }

  .product-card:hover .product-card__image {
    transform: scale(1.05);
  }

  .product-card__image-placeholder {
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    color: hsl(var(--muted-foreground));
  }

  /* Product Content */
  .product-card__content {
    display: flex;
    flex-direction: column;
  }

  .product-card__content--mobile {
    gap: 0.25rem;
  }

  .product-card__title {
    font-family: var(--font-heading);
    font-size: 1.125rem;
    font-weight: 600;
    color: #000000;
    margin: 0 0 0.125rem;
    line-height: 1.3;
  }

  .product-card__title--mobile {
    font-size: 1rem;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  .product-card__category {
    font-size: 0.8125rem; /* 13px */
    color: #6b7280;
    margin: 4px 0 8px 0;
  }

  .product-card__category--small {
    font-size: 0.75rem;
    color: #6b7280;
    margin: 4px 0 8px 0;
  }

  /* Footer (Price + Cart Button) */
  .product-card__footer {
    display: flex;
    align-items: center;
    justify-content: space-between;
  }

  .product-card__price-wrapper {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: 8px;
  }

  .product-card__price {
    font-family: var(--font-heading);
    font-size: 1.5rem;
    font-weight: 700;
    color: #000000;
  }

  .product-card__price--mobile {
    font-size: 1.25rem;
  }

  .product-card__unit-price {
    display: inline-block;
    font-size: 0.875rem;
    color: #6b7280;
    margin: 0;
  }

  .product-card__unit-price--small {
    font-size: 0.75rem;
    color: #6b7280;
    margin: 0;
  }

  /* Cart Button */
  .product-card__cart-button {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 3rem;
    height: 3rem;
    border-radius: 9999px;
    background-color: hsl(var(--primary) / 0.1);
    border: none;
    cursor: pointer;
    transition: all 0.2s ease;
  }

  .product-card__cart-button--small {
    width: 2.5rem;
    height: 2.5rem;
  }

  .product-card__cart-button:hover {
    background-color: hsl(var(--primary));
  }

  .product-card__cart-icon {
    color: hsl(var(--primary));
    transition: all 0.2s ease;
  }

  .product-card__cart-button:hover .product-card__cart-icon {
    color: #ffffff;
    transform: scale(1.1);
  }

  .product-card__plus-icon {
    position: absolute;
    top: -0.25rem;
    right: -0.25rem;
    width: 1.25rem;
    height: 1.25rem;
    padding: 0.125rem;
    background-color: hsl(var(--primary));
    color: #ffffff;
    border-radius: 9999px;
    transition: all 0.2s ease;
  }

  .product-card__cart-button:hover .product-card__plus-icon {
    transform: scale(1.25) rotate(90deg);
  }
/* END_SECTION:product-recommendations */

/* START_SECTION:scroll-animation (INDEX:18, SCOPED:FALSE) */
/* ============================================
     Bacteria Animation Section
     ============================================ */
  .bacteria-animation {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    pointer-events: none;
    z-index: 0;
    perspective: 1500px;
    opacity: 0.15;
    transition: opacity 0.3s ease-out;
  }

  /* Ambient Glow */
  .bacteria-animation__glow {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: radial-gradient(ellipse at 50% 30%, 
      hsl(160 84% 39% / 0.02) 0%,
      transparent 50%
    );
  }

  /* Fade Mask */
  .bacteria-animation__fade-mask {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 40vh;
    pointer-events: none;
    background: linear-gradient(to bottom, 
      hsl(0 0% 100% / 0.7) 0%,
      hsl(0 0% 100% / 0.3) 50%,
      transparent 100%
    );
  }

  /* Layers */
  .bacteria-animation__rods,
  .bacteria-animation__dividing,
  .bacteria-animation__spores,
  .bacteria-animation__particles {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
  }

  /* Central Cluster */
  .bacteria-animation__cluster {
    position: absolute;
    left: 50%;
    top: 33.33%;
    transform: translate(-50%, -50%);
    transition: transform 0.15s ease-out;
  }

  .bacteria-animation__cluster-inner {
    position: relative;
    width: 192px;
    height: 192px;
    border-radius: 50%;
    background: radial-gradient(circle at 40% 40%, 
      hsl(160 84% 55% / 0.25) 0%,
      hsl(150 65% 45% / 0.15) 40%,
      transparent 80%
    );
    box-shadow: 
      0 0 60px hsl(160 84% 45% / 0.2),
      0 0 120px hsl(150 65% 45% / 0.1);
    transition: transform 0.15s ease-out;
  }

  .bacteria-animation__cluster-rods {
    position: relative;
    width: 100%;
    height: 100%;
  }

  /* Responsive - hide on mobile for performance */
  @media (max-width: 768px) {
    .bacteria-animation {
      display: none !important;
    }
  }
/* END_SECTION:scroll-animation */

/* START_SECTION:unser-sortiment (INDEX:19, SCOPED:FALSE) */
/* ============================================
     Unser Sortiment Section
     ============================================ */
  .unser-sortiment {
    padding: 3rem 0;
    background-color: hsl(var(--background));
  }

  .unser-sortiment__container {
    max-width: 1280px;
    margin: 0 auto;
    padding: 0 1rem;
  }

  @media (min-width: 640px) {
    .unser-sortiment__container {
      padding: 0 2rem;
    }
  }

  @media (min-width: 1024px) {
    .unser-sortiment__container {
      padding: 0 4rem;
    }
  }

  /* ============================================
     Header
     ============================================ */
  .unser-sortiment__header {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    margin-bottom: 2.5rem;
  }

  .unser-sortiment__title-wrapper {
    display: flex;
    flex-direction: column;
  }

  .unser-sortiment__tag {
    display: block;
    font-size: 0.875rem;
    font-weight: 600;
    color: hsl(var(--primary));
    margin-bottom: 0.5rem;
  }

  .unser-sortiment__heading {
    font-family: var(--font-heading);
    font-size: 1.875rem;
    font-weight: 700;
    color: hsl(var(--foreground));
    margin: 0;
  }

  @media (min-width: 768px) {
    .unser-sortiment__heading {
      font-size: 2.25rem;
    }
  }

  .unser-sortiment__view-all {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    font-size: 0.875rem;
    font-weight: 500;
    color: hsl(var(--foreground));
    text-decoration: none;
    transition: color 0.2s ease;
  }

  @media (min-width: 640px) {
    .unser-sortiment__view-all {
      font-size: 1rem;
    }
  }

  .unser-sortiment__view-all:hover {
    color: hsl(var(--primary));
  }

  .unser-sortiment__view-all svg {
    transition: transform 0.2s ease;
  }

  .unser-sortiment__view-all:hover svg {
    transform: translateX(0.25rem);
  }

  /* ============================================
     Mobile Slider
     ============================================ */
  .unser-sortiment__slider {
    display: block;
    overflow-x: auto;
    padding-bottom: 1rem;
    margin-left: -1rem;
    margin-right: -1rem;
    padding-left: 1rem;
    padding-right: 1rem;
    -ms-overflow-style: none;
    scrollbar-width: none;
  }

  .unser-sortiment__slider::-webkit-scrollbar {
    display: none;
  }

  @media (min-width: 1024px) {
    .unser-sortiment__slider {
      display: none;
    }
  }

  .unser-sortiment__slider-track {
    display: flex;
    gap: 1rem;
    width: max-content;
  }

  /* ============================================
     Desktop Grid
     ============================================ */
  .unser-sortiment__grid {
    display: none;
  }

  @media (min-width: 1024px) {
    .unser-sortiment__grid {
      display: grid;
      grid-template-columns: repeat(3, 1fr);
      gap: 1.5rem;
    }
  }

  .unser-sortiment__product-link {
    text-decoration: none;
    display: block;
  }

  /* ============================================
     Product Card (Reusable)
     ============================================ */
  .product-card {
    background-color: hsl(var(--card));
    border: 1px solid hsl(var(--border) / 0.5);
    border-radius: 1rem;
    padding: 1rem;
    transition: all 0.3s ease;
    position: relative;
    height: 100%;
    display: flex;
    flex-direction: column;
  }

  .product-card:hover {
    box-shadow: var(--shadow-elevated);
    transform: translateY(-4px);
  }

  .product-card--mobile {
    width: 280px;
    flex-shrink: 0;
    padding: 0.75rem;
  }

  /* Product Image */
  .product-card__image-wrapper {
    position: relative;
    aspect-ratio: 1;
    border-radius: 0.75rem;
    overflow: hidden;
    background-color: hsl(var(--secondary));
    margin-bottom: 0.75rem;
  }

  .product-card__image {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.5s ease;
  }

  .product-card:hover .product-card__image {
    transform: scale(1.05);
  }

  .product-card__image-placeholder {
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    color: hsl(var(--muted-foreground));
  }

  /* Badge */
  .product-card__badge {
    position: absolute;
    top: 0.75rem;
    left: 0.75rem;
    z-index: 10;
    display: inline-block;
    background-color: hsl(var(--background));
    color: hsl(var(--primary));
    font-size: 0.875rem;
    font-weight: 700;
    padding: 0.25rem 0.75rem;
    border-radius: 9999px;
    box-shadow: 0 1px 3px 0 rgb(0 0 0 / 0.1);
  }

  .product-card__badge--small {
    top: 0.75rem;
    left: 0.75rem;
    font-size: 0.875rem;
    padding: 0.25rem 0.75rem;
  }

  /* Product Content */
  .product-card__content {
    display: flex;
    flex-direction: column;
    flex: 1;
  }

  .product-card__content--mobile {
    gap: 0.25rem;
  }

  .product-card__title {
    font-family: var(--font-heading);
    font-size: 1.125rem;
    font-weight: 600;
    color: hsl(var(--foreground));
    margin: 0 0 0.125rem;
    line-height: 1.3;
  }

  .product-card__title--mobile {
    font-size: 1rem;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  .product-card__category {
    font-size: 0.8125rem; /* 13px */
    color: #6b7280;
    margin: 4px 0 8px 0;
  }

  .product-card__category--small {
    font-size: 0.75rem;
    color: #6b7280;
    margin: 4px 0 8px 0;
  }

  /* Footer (Price + Cart Button) */
  .product-card__footer {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-top: auto;
  }

  .product-card__price-wrapper {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: 8px;
  }

  .product-card__price {
    font-family: var(--font-heading);
    font-size: 1.5rem;
    font-weight: 700;
    color: hsl(var(--foreground));
  }

  .product-card__price--mobile {
    font-size: 1.25rem;
  }

  .product-card__unit-price {
    display: inline-block;
    font-size: 0.875rem;
    color: #6b7280;
    margin: 0;
  }

  .product-card__unit-price--small {
    font-size: 0.75rem;
    color: #6b7280;
    margin: 0;
  }

  /* Cart Button */
  .product-card__cart-button {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 3rem;
    height: 3rem;
    border-radius: 9999px;
    background-color: hsl(var(--primary) / 0.1);
    border: none;
    cursor: pointer;
    transition: all 0.2s ease;
  }

  .product-card__cart-button--small {
    width: 2.5rem;
    height: 2.5rem;
  }

  .product-card__cart-button:hover {
    background-color: hsl(var(--primary));
  }

  .product-card__cart-icon {
    color: hsl(var(--primary));
    transition: all 0.2s ease;
  }

  .product-card__cart-button:hover .product-card__cart-icon {
    color: hsl(var(--primary-foreground));
    transform: scale(1.1);
  }

  .product-card__plus-icon {
    position: absolute;
    top: -0.25rem;
    right: -0.25rem;
    width: 1.25rem;
    height: 1.25rem;
    padding: 0.125rem;
    background-color: hsl(var(--primary));
    color: hsl(var(--primary-foreground));
    border-radius: 9999px;
    transition: all 0.2s ease;
  }

  .product-card__cart-button:hover .product-card__plus-icon {
    transform: scale(1.25) rotate(90deg);
  }

  /* ============================================
     Load More Button - Minimalistisch (Lovable Style)
     ============================================ */
  .unser-sortiment__load-more {
    display: none !important; /* Mobile: Hide */
    justify-content: center;
    margin-top: 2.5rem;
  }

  /* Desktop Only: Ab 990px anzeigen */
  @media screen and (min-width: 990px) {
    .unser-sortiment__load-more {
      display: flex !important;
    }
  }

  .unser-sortiment__load-more-button {
    display: inline-flex !important;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    padding: 0.5rem 1rem;
    font-family: var(--font-body);
    font-size: 1rem;
    font-weight: 400 !important;
    color: #333 !important;
    background-color: transparent !important;
    border: none !important;
    border-radius: 0;
    cursor: pointer;
    transition: all 0.2s ease;
  }
  
  .unser-sortiment__load-more-button .button-text {
    font-weight: 400 !important;
  }

  .unser-sortiment__load-more-button:hover {
    color: hsl(var(--primary)) !important;
  }

  .unser-sortiment__load-more-button .button-icon {
    transition: transform 0.3s ease;
  }

  .unser-sortiment__load-more-button:hover .button-icon {
    transform: translateY(2px);
  }

  /* ============================================
     Empty State
     ============================================ */
  .unser-sortiment__empty {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
    padding: 3rem 2rem;
  }

  .unser-sortiment__empty svg {
    color: hsl(var(--muted-foreground));
    margin-bottom: 1rem;
  }

  .unser-sortiment__empty p {
    font-size: 1rem;
    color: hsl(var(--muted-foreground));
    margin: 0;
    max-width: 32rem;
  }
  /* ============================================
     Staggered Scroll Reveal Animation
     ============================================ */
  .unser-sortiment .reveal-item {
    opacity: 0;
    transform: translateY(30px);
    transition: opacity 0.8s cubic-bezier(0.2, 0.8, 0.2, 1),
                transform 0.8s cubic-bezier(0.2, 0.8, 0.2, 1);
    will-change: opacity, transform;
  }

  .unser-sortiment .reveal-item.is-visible {
    opacity: 1;
    transform: translateY(0);
  }

  @media (prefers-reduced-motion: reduce) {
    .unser-sortiment .reveal-item {
      opacity: 1;
      transform: none;
      transition: none;
    }
  }
/* END_SECTION:unser-sortiment */