/** Shopify CDN: Minification failed

Line 811:0 Unexpected "}"

**/
/* ==========================================================================
   newera.css – Ahrens & Co. “New Era” Theme  (Silber-only, eckiges Swatch)
   Mobile-First & Desktop Overrides
   ========================================================================== */

/* 1) BASE RESET */
html,
body {
  margin: 0;
  padding: 0;
  font-family: 'Helvetica Neue', sans-serif;
  background: #fff;
  color: #000;
}

/* 2) DISMISSIBLE NOTICE BANNER */
.limited-notice {
  width: 100%;
  background: #fff;
  padding: 16px;
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  font-size: 12px;
  z-index: 10000;
}
.limited-notice .notice-text {
  text-transform: uppercase;
  color: #000;
}
.limited-notice .notice-close {
  margin-top: 8px;
  background: none;
  border: none;
  font-size: 12px;
  color: #333;
  cursor: pointer;
  text-transform: uppercase;
  padding: 0;
}

/* 3) VIEW TOGGLE */
.mobile-view  { display: block !important; }
.desktop-view { display: none  !important; }
@media (min-width: 1024px) {
  .mobile-view  { display: none  !important; }
  .desktop-view { display: block !important; }
}

/* ==========================================================================
   4) MOBILE STYLES (≤1023px)
   ========================================================================== */
@media (max-width: 1023px) {

  /* ───────── Image Carousel ───────── */
  .mobile-media-carousel-wrapper { position: relative; }
  .mobile-media-carousel {
    display: flex;
    overflow-x: scroll;
    scroll-snap-type: x mandatory;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    -ms-overflow-style: none;
  }
  .mobile-media-carousel::-webkit-scrollbar { display: none; }
  .mobile-media-item   { flex: 0 0 100vw; height: 100vw; scroll-snap-align: start; position: relative; }
  .mobile-media-item img { width: 100%; height: 100%; object-fit: cover; display: block; }
  .progress-container  {
    position: absolute; bottom: 40px; left: 16px; right: 16px;
    height: 2px; background: rgba(255,255,255,.3); border-radius: 1px; z-index: 10;
  }
  .progress-bar { width: 0; height: 100%; background: #fff; border-radius: 1px; transition: width .1s ease-out; }

  /* ───────── Sticky Purchase Block ───────── */
  .product-purchase-block {
    position: fixed !important;
    bottom: 0; left: 0; width: 100%;
    padding: 12px 16px calc(12px + env(safe-area-inset-bottom));
    background: #fff;
    box-shadow: 0 -1px 4px rgba(0,0,0,.05);
    display: flex; flex-direction: column; gap: 8px; z-index: 9999;
  }
  .sheet-handle { width: 48px; height: 4px; background: #ccc; border-radius: 2px; margin: 4px auto 8px; }
  .bar-info     { display: flex; justify-content: space-between; align-items: center; }
  .title-small  { font-size: 13px; font-weight: 500; text-transform: uppercase; }
  .price        { font-size: 13px; font-weight: 600; }
  .action-buttons { display: flex; gap: 8px; align-items: center; }
  .add-to-cart-form { width: 100% !important; }
  .add-to-cart {
    width: 100% !important; padding: 12px 0 !important;
    font-size: 14px !important; font-weight: 600 !important;
    text-transform: uppercase !important;
    background: #000 !important; color: #fff !important;
    border: 1px solid #000 !important; cursor: pointer !important;
    transition: background .2s ease-in-out !important;
  }
  .add-to-cart:hover { background: #333 !important; }
  .ct-notice { font-size: 10px; color: #888; margin-top: 8px; text-transform: uppercase; }

  /* ───────── Bottom-Sheet Content ───────── */
  .bottom-sheet-content {
    margin-top: calc(12px + env(safe-area-inset-bottom));
    padding: 16px;
    background: #fff;
    display: flex;
    flex-direction: column;
    gap: 24px;
  }
  .sheet-label { font-size: 12px; font-weight: 600; text-transform: uppercase; margin: 0; }
  .sheet-text  { font-size: 13px; color: #444; margin: 0; line-height: 1.4; }

  /* ───────── Collapsible Sections ───────── */
  .collapse-section        { border-top: 1px solid rgba(0,0,0,.1); padding: 16px 0; }
  .collapse-section__header{
    display: flex; justify-content: space-between; align-items: center;
    font-size: 14px; font-weight: 600; text-transform: uppercase; cursor: pointer; margin: 0;
  }
  .collapse-section__toggle { font-size: 14px; }
  .collapse-section__content{ display: none; padding-top: 8px; font-size: 13px; color: #444; line-height: 1.4; }
  .collapse-section.open .collapse-section__content { display: block; }

  /* ───────── Size Guide Modal ───────── */
  .size-guide-modal       { display: none; position: fixed; top: 0; left: 0; width: 100%; height: 100%; background: rgba(0,0,0,.5); z-index: 1000; }
  .size-guide-modal.open  { display: block; }
  .size-guide-content     { background: #fff; max-width: 500px; margin: 80px auto; padding: 20px; position: relative; border-radius: 4px; font-size: 12px; line-height: 1.5; }
  .size-guide-close       { position: absolute; top: 10px; right: 10px; font-size: 18px; cursor: pointer; }

@media screen and (max-width: 1023px) {
  .size-picker-sm {
    display: grid;
    grid-template-columns: repeat(4, 1fr); /* 4 Buttons pro Zeile */
    gap: 12px;
    justify-content: center;
    margin: 20px auto;
    max-width: 300px; /* optional für saubere Zentrierung */
  }

  .size-btn {
    aspect-ratio: 1 / 1;
    font-size: 14px;
    font-weight: 500;
    border: 1px solid #ccc;
    background: transparent;
    color: #000;
    text-align: center;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 0;
    transition: border 0.2s, color 0.2s;
    cursor: pointer;
  }

  .size-btn:hover {
    border-color: #000;
  }

  .size-btn.active {
    border: 1px solid #000;
  }
}


  /* ───────── Feature Tags ───────── */
  .newera-features { display: flex; gap: 8px; flex-wrap: wrap; }
  .feature-tag     { font-size: 10px; font-weight: 500; text-transform: uppercase; color: #444; }
}

/* ==========================================================================
   newera.css – Ahrens & Co “New Era”
   Mobile-First + Desktop Overrides
   ========================================================================== */

/* 1) BASE RESET */
html,body{margin:0;padding:0;font-family:'Helvetica Neue',sans-serif;background:#fff;color:#000}

/* 2) LIMITED NOTICE */
.limited-notice{width:100%;background:#fff;padding:16px;box-sizing:border-box;display:flex;flex-direction:column;align-items:flex-start;font-size:12px;z-index:10000}
.limited-notice .notice-text{text-transform:uppercase;color:#000}
.limited-notice .notice-close{margin-top:8px;background:none;border:none;font-size:12px;color:#333;cursor:pointer;text-transform:uppercase;padding:0}

/* 3) VIEW TOGGLE */
.mobile-view{display:block!important}.desktop-view{display:none!important}
@media(min-width:1024px){.mobile-view{display:none!important}.desktop-view{display:block!important}}

/* ==========================================================================
   4) MOBILE STYLES (≤1023px)
   (…gekürzt: deine bestehenden Mobile-Regeln bleiben unverändert…)
   ========================================================================== */

/* ==========================================================================
   5) DESKTOP STYLES (≥1024px)  ✦ EINZIGE VERSION ✦
   220-px Sidebar  |  2×2 Square Gallery  |  560-px Info
   ========================================================================== */
@media (min-width:1024px){

  /* Haupt-Grid */
  .product-desktop-wrapper{
    display:grid;
    grid-template-columns:220px minmax(680px,1fr) 560px;
    gap:32px;
    margin-top:32px;
    padding:0 32px;
  }

  /* Sidebar fixiert links */
  .main-sidebar{
    position:fixed;
    top:32px;
    left:0;
    width:220px;
    height:calc(100vh - 32px);
    overflow-y:auto;
  }

  /* 2×2 Quadrat-Gallery  */
  .desktop-media-grid{
    grid-column:2;
    display:grid;
    grid-template-columns:repeat(2,1fr);
    gap:0;                       /* keine Zwischenräume */
  }
  .desktop-media-cell{
    position:relative;width:100%;padding-bottom:100%;
    border:1px solid #eee;box-sizing:border-box;
  }
  .desktop-media-cell img{
    position:absolute;inset:0;width:100%;height:100%;object-fit:cover;
  }

  /* Info-Panel rechts */
  .desktop-info{
    grid-column:3;display:flex;flex-direction:column;gap:16px;
  }
  .desktop-brand{font-size:11px;text-transform:uppercase;margin:0}
  .desktop-title{font-size:14px;font-weight:600;text-transform:uppercase;margin:0}
  .desktop-price{font-size:14px;font-weight:600}
  .action-buttons{display:flex;gap:8px}
  .desktop-add-to-cart{
    width:100%;padding:12px 0;font-size:14px;font-weight:600;text-transform:uppercase;
    border:1px solid #000;background:#fff;color:#000;cursor:pointer;
  }
  .desktop-delivery{font-size:12px;color:#666}

  /* Collapse inside Info */
  .desktop-collapse .collapse-item{border-top:1px solid rgba(0,0,0,.1)}
  .collapse-header{
    background:none;border:none;width:100%;text-align:left;padding:12px 0;
    font-size:11px;font-weight:600;text-transform:uppercase;cursor:pointer;
  }
  .collapse-body{display:none;font-size:13px;line-height:1.4;padding-bottom:16px;color:#444}
  .collapse-item.open .collapse-body{display:block}
}

/* ==========================================================================
   6) RECOMMENDATIONS – Carousel
   ========================================================================== */
.reco-wrapper{padding-left:16px;padding-right:16px;margin-top:32px}
@media(min-width:1024px){
  .reco-wrapper{
    padding-left:32px;padding-right:32px;
    max-width:calc(100% - 560px - 32px); /* Info-Spalte + rechter Gap */
    box-sizing:border-box;
  }
}
.recommendations-title{font-size:12px;font-weight:600;text-transform:uppercase;margin:0 0 8px 0}
.reco-item img{border-radius:0!important}

/* Slide-Abstände */
#recoSwiper .swiper-slide{margin-right:12px}
@media(min-width:1024px){
  #recoSwiper .swiper-slide{width:240px;margin-right:16px}
  #recoSwiper .swiper-slide:last-child{margin-right:0}
}

/* Titel & Preis ausblenden, falls noch vorhanden */
.reco-title,.reco-price{display:none!important}

/* ==========================================================================
   7) GENERIC BLOCKS
   ========================================================================== */
/* Spacer Utilities */
.spacing-md{height:48px}.spacing-lg{height:64px}
@media(min-width:1024px){.spacing-md{height:64px}.spacing-lg{height:80px}}

/* Service Info */
.service-info-wrapper{padding-left:16px;padding-right:16px}
@media(min-width:1024px){.service-info-wrapper{padding-left:32px;padding-right:32px}}
.info-heading{font-size:13px;font-weight:600;text-transform:uppercase;margin:0 0 4px 0}
.info-text{font-size:13px;line-height:1.5;margin:0}
.info-text a{color:#000;text-decoration:none}

/* Breadcrumbs */
.breadcrumbs-wrapper{margin-top:96px;padding-left:16px;padding-right:16px}
@media(min-width:1024px){.breadcrumbs-wrapper{margin-top:112px;padding-left:32px;padding-right:32px}}
.breadcrumbs{font-size:13px;font-weight:500;text-transform:uppercase;line-height:1.5;letter-spacing:.4px;color:#666}
.separator{margin:0 6px}


/* ═══════════════════════════════════════════════════════════
   RECOMMENDATIONS  (Desktop & Mobile)
   ═══════════════════════════════════════════════════════════*/

/* Wrapper rückt sich exakt wie Bild-Grid ein */
.reco-wrapper{
  padding-left:16px;
  padding-right:16px;
  margin-top:32px;          /* Luft über der Sektion */
}
@media (min-width:1024px){
  .reco-wrapper{
    padding-left:32px;
    padding-right:32px;
    max-width:calc(100% - 560px - 32px); /* Info-Spalte + rechter Gap */
    box-sizing:border-box;
  }
}

/* Recommendation-Titel */
.recommendations-title{
  font-size:12px;
  font-weight:600;
  text-transform:uppercase;
  margin:0 0 8px 0;
}

/* Swiper-Slides eckig & Abstand */
.reco-item img{border-radius:0!important}
#recoSwiper .swiper-slide{margin-right:12px}      /* Mobile */

@media (min-width:1024px){
  #recoSwiper .swiper-slide{
    width:240px;              /* so sieht man 2 ⅔ Slides    */
    margin-right:16px;
  }
  #recoSwiper .swiper-slide:last-child{margin-right:0}
}

/* Überflüssige Titel/Preis ausblenden, falls im Markup noch vorhanden */
.reco-title,
.reco-price{display:none!important}
/* ─── Desktop: Carousel unterhalb des 2×2-Grids ─── */
@media (min-width:1024px){
  .reco-wrapper{
    grid-column:2;   /* mittlere Spalte            */
    grid-row:2;      /* neue Zeile UNTER dem Grid   */
  }
}

/* ═══════════════════════════════════════════════════════════
   UTILITY-SPACER
   ═══════════════════════════════════════════════════════════*/
.spacing-md{height:48px}
.spacing-lg{height:64px}
@media(min-width:1024px){
  .spacing-md{height:64px}
  .spacing-lg{height:80px}
}

/* Service-Info-Blocks (Kundenservice, Shipping, Returns) */
.service-info-wrapper{padding-left:16px;padding-right:16px}
@media(min-width:1024px){.service-info-wrapper{padding-left:32px;padding-right:32px}}
.info-heading{font-size:13px;font-weight:600;text-transform:uppercase;margin:0 0 4px 0}
.info-text{font-size:13px;line-height:1.5;margin:0}
.info-text a{color:#000;text-decoration:none}

/* Breadcrumbs */
.breadcrumbs-wrapper{margin-top:96px;padding-left:16px;padding-right:16px}
.breadcrumbs{font-size:13px;font-weight:500;text-transform:uppercase;line-height:1.5;letter-spacing:.4px;color:#666}
.separator{margin:0 6px}
@media(min-width:1024px){
  .breadcrumbs-wrapper{margin-top:112px;padding-left:32px;padding-right:32px}
}

/* ==========================================================================
   6) EXTRA INFO-BLOCK (Titel / Preis / Farbe)
   ========================================================================== */
.newera-extra-info { display: flex; flex-direction: column; gap: 4px; margin: 16px 0; }
.extra-title       { font-size: 13px; font-weight: 500; text-transform: uppercase; }
.extra-price       { font-size: 14px; font-weight: 600; }

.color-name {
  font-size: 12px;
  font-weight: 500;
  color: #666;          /* leicht grau */
}
.color-swatch {
  display: inline-block;
  width: 16px;
  height: 16px;
  border: 1px solid #000;
  object-fit: cover;     /* Bild füllt Quadrat */
  margin-top: 4px;
  vertical-align: middle;
  border-radius: 0 !important;   /* absolut eckig */
}

/* 7) SIZE GUIDE LINK */
.size-guide-link { text-decoration: underline; cursor: pointer; }

/* 8) UTILITY CLASSES & Narrow Progress-Bar */
.mobile-only  { display: block !important; }
.desktop-only { display: none  !important; }
@media (min-width: 1024px) {
  .mobile-only  { display: none  !important; }
  .desktop-only { display: block !important; }
}
@media (max-width: 1023px) {
  .progress-container {
    position: absolute; bottom: 40px; left: 130px; right: 130px;
    height: 2px; background: rgba(0,0,0,.1) !important;
  }
  .progress-bar {
    width: 0; height: 100%;
    background: #000 !important;
    border-radius: .5px;
    transition: width .1s ease-out;
  }
}
/* ─── RECOMMENDATIONS ───────────────────────── */
.recommendations-title{
  font-size:12px;
  font-weight:600;
  text-transform:uppercase;
  margin:0 0 8px;
}
.reco-carousel{overflow:hidden}
.swiper-slide{width:auto}        /* Swiper setzt Breite via JS */
.reco-item img{
  width:100%;
  aspect-ratio:1/1;
  object-fit:cover;
  border-radius:4px;
}
.reco-title{
  display:block;
  font-size:12px;
  margin-top:4px;
}
.reco-price{
  font-size:12px;
  font-weight:600;
}
@media(min-width:1024px){
  /* Desktop: etwas mehr Platz zwischen Slides */
  #recoSwiper .swiper-slide{width:200px}
}

/* ─── RECOMMENDATIONS Layout Tweaks ───────────────────── */
.reco-wrapper{
  padding-left:16px;  /* mobile – identisch zum restlichen Content */
}
@media(min-width:1024px){
  .reco-wrapper{ padding-left:32px; } /* desktop-grid-Abstand */
}

/* Überschrift fett, caps ist schon per sheet-label gegeben */
.recommendations-title{ margin:0 0 8px 0; }

/* Bilder absolut eckig */
.reco-item img{ border-radius:0!important; }

/* Sicherheitshalber: Titel & Preis ausblenden, falls alte Markup-Reste */
.reco-title,
.reco-price{ display:none!important; }
/* ─── Breadcrumbs – größere Schrift, mehr Air, bündig mit Content ─── */
.breadcrumbs-wrapper{
  margin-top:96px;          /* > vorher 64px  → ~5–6 Zeilen */
  padding-left:16px;        /* gleicht mobile Content-Abstand aus */
}
@media(min-width:1024px){
  .breadcrumbs-wrapper{
    margin-top:112px;       /* etwas mehr Luft auf Desktop */
    padding-left:32px;      /* entspricht deinem 32-px-Grid */
  }
}

.breadcrumbs{
  font-size:11px;           /* größer als vorher (11px) */
  font-weight:500;
  text-transform:uppercase;
  line-height:1.5;
  letter-spacing:.4px;
  color:#666;
  word-break:break-word;
}

.breadcrumbs a{
  color:#666;
  text-decoration:none;
}

.separator{ margin:0 6px; } /* mehr Abstand zwischen Pfad-Segmenten */
/* ─── Utility: Spacer ────────────────────────── */
.spacing-md { height: 48px; }   /* ≈ 3 Textzeilen */
.spacing-lg { height: 64px; }   /* ≈ 4 Textzeilen */
@media (min-width: 1024px) {
  .spacing-md { height: 64px; } /* größerer Screen → etwas mehr Luft */
  .spacing-lg { height: 80px; }
}
/* ── Service-Info Blocks ───────────────────── */
.service-info-wrapper{
  padding-left:16px;
  padding-right:16px;
}
@media(min-width:1024px){
  .service-info-wrapper{ padding-left:32px; padding-right:32px; }
}

.info-heading{
  font-size:13px;
  font-weight:600;
  text-transform:uppercase;
  margin:0 0 4px 0;
}

.info-text{
  font-size:13px;
  line-height:1.5;
  margin:0;
}

.info-text a{ color:#000; text-decoration:none; }
@media (min-width:1024px){
  .product-desktop-wrapper{ grid-auto-rows:auto; }
  .reco-wrapper{ grid-column:2; grid-row:2; margin-top:32px; }
}
/* ─── DESKTOP: Galerie + Info bündig an Sidebar ───────────────── */
@media (min-width: 1024px) {

  /* Keine Innenkante mehr vor Spalte 2 */
  .product-desktop-wrapper{
    padding-left: 0 !important;   /* statt 32px */
    gap:          16px !important;/* Abstand Sidebar <–> Galerie   */
  }

  /* Entferne Rest-Polster in Galerie-/Reco-/Info-Spalte */
  .desktop-media-grid,
  .reco-wrapper,
  .desktop-info{
    padding-left: 0 !important;   /* statt 16px bzw. 32px */
  }
}
/* ─── DESKTOP: weißes Gitter zwischen den 4 Quadraten ─────────── */
@media (min-width: 1024px) {

  /* Abstand zwischen den Zellen */
  .desktop-media-grid{
    gap: 12px !important;          /* 8–16 px sieht meist gut aus */
    background: #fff;              /* sorgt dafür, dass die Lücken weiß sind */
  }

  /* Die einzelnen Zellen behalten 1-px Rahmen (falls gewünscht)  */
  /* .desktop-media-cell{ border:1px solid #eee } */
}
/* ─── DESKTOP: ALLES 200 px NACH LINKS SCHIEBEN ────────────── */
@media (min-width: 1024px) {

  /* Keine Innenkante / kein Gap mehr, damit die −200 px nicht kollidieren */
  .product-desktop-wrapper{
    padding-left: 0 !important;
    gap:          0 !important;
  }

  /* Galerie, Recos und Info gemeinsam 200 px nach links */
  .desktop-media-grid,
  .reco-wrapper,
  .desktop-info{
    position: relative;          /* Referenz für left-Shift            */
    left: -190px !important;     /* genau 200 px nach links verschieben */
  }
}
/* ─── DESKTOP: 30 px Abstand zwischen Galerie & Info ─────────── */
@media (min-width: 1024px){
  .desktop-info{
    margin-left: 30px !important;   /* horizontal gap */
  }
}
/* ─── DESKTOP: gesamtes Produkt-Layout 30 px höher ───────────── */
@media (min-width: 1024px){

  /* Haupt-Wrapper vertikal anheben */
  .desktop-view{
    margin-top: -10px !important;
  }

  /* Breadcrumbs & Service-Info folgen ebenfalls 30 px höher */
  .breadcrumbs-wrapper,
  .service-info-wrapper{
    margin-top: calc( var(--orig-top, 0px) - 10px ) !important;
  }
}
/* ─── DESKTOP: Add-to-Cart vollflächig schwarz ─────────────── */
@media (min-width: 1024px){
  .desktop-view .desktop-info .desktop-add-to-cart,
  .desktop-view .desktop-info .desktop-add-to-cart:visited {
    background:#000 !important;     /* flächig schwarz */
    color:#fff   !important;        /* Text weiß       */
    border:1px solid #000 !important;
  }

  .desktop-view .desktop-info .desktop-add-to-cart:hover,
  .desktop-view .desktop-info .desktop-add-to-cart:focus {
    background:#333 !important;     /* dezentes Hover-Grau */
    border-color:#333 !important;
  }
}
/* ─── DESKTOP: Add-to-Cart nicht mehr volle Breite ─────────── */
@media (min-width: 1024px){
  .desktop-info .desktop-add-to-cart{
    width: auto !important;      /* statt 100 % */
    min-width: 350px;            /* fixe Mindestbreite, anpassen nach Geschmack */
    padding: 12px 24px !important;
  }
}
/* ─── DESKTOP: Quadrate fix an Seitenverhältnis binden ───────── */
@media (min-width: 1024px){

  /* 1) Quadrat über aspect-ratio, NICHT über padding-bottom      */
  .desktop-media-cell{
    aspect-ratio: 1 / 1;    /* immer 1:1                           */
    height: auto;           /* Höhe ergibt sich aus Breite         */
    padding-bottom: 0;      /* alten Trick neutralisieren          */
  }

  /* 2) Bild weiterhin absolut füllen                             */
  .desktop-media-cell img{
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
  }
}
/* ─── DESKTOP: Galerie fix in Zeile 1 halten ─────────────────── */
@media (min-width: 1024px){

  /* 1) explizite Zeilen-Zuordnung */
  .desktop-media-grid{ grid-column:2; grid-row:1; }   /* Bilder immer Zeile 1  */
  .reco-wrapper      { grid-column:2; grid-row:2; }   /* Recos in Zeile 2      */

  /* 2) Info-Panel über beide Zeilen spannen,
        damit seine zusätzliche Höhe NICHT Zeile 1 vergrößert */
  .desktop-info{
    grid-column:3;
    grid-row:1 / span 2;     /* reicht durch Zeile 1&2, beeinflusst Höhe gleichmäßig */
    align-self:start;        /* oben ausrichten                                   */
  }
}
/* ── RECOMMENDATIONS: Überschrift sichtbar & Abstand ────────── */
.reco-wrapper{
  overflow: hidden;          /* stoppt keine Slides mehr */
}
.recommendations-title{
  display:block !important;  /* falls vorher versehentlich ausgeblendet */
  font-size:14px;
  font-weight:600;
  margin:0 0 8px 0;
  text-transform:uppercase;
}
/* ─── DESKTOP: RECOMMENDATIONS um 100 px nach rechts ────────── */
@media (min-width:1024px){
  .reco-wrapper{
    left: 30px !important;   /* vorher -200px  → 100px weiter rechts */
  }
}
/* ─── DESKTOP: Reco-Slides für 6-Up-Ansicht ─────────────── */
@media (min-width:1024px){
  /* neue Breite je Slide  =  160 px  (6 × 160 px  + 5 × 16 px Gap ≈  1 040 px) */
  #recoSwiper .swiper-slide{
    width:160px !important;    /* override alte 240 px-Regel */
  }
}
/* ─── DESKTOP: 6-er-Grid statt Slider für RECOMMENDATIONS ─────── */
@media (min-width:1024px){

  /* Swiper-Hülle soll nicht scrollen */
  .reco-carousel.swiper{
    overflow: visible;          /* kein eigenes Scrolling            */
  }

  /* Wrapper der Slides zu einem 6-spaltigen Grid umbauen */
  #recoSwiper .swiper-wrapper{
    display: grid !important;   /* überschreibt Swiper-Flexbox        */
    grid-template-columns: repeat(6, 1fr);   /* 6 gleiche Spalten     */
    gap: 16px;                  /* exakt derselbe Wert wie Galerie    */
  }

  /* Jede Slide füllt jetzt 1 Grid-Zelle */
  #recoSwiper .swiper-slide{
    width: 100% !important;     /* Breite von Swiper ignorieren       */
    flex-shrink: 0 !important;  /* verhindert, dass Swiper Größe ändert*/
  }
}
/* ─── DESKTOP: größere Recommendations-Tiles ─────────────── */
@media (min-width: 1024px){

  /* jede Zelle jetzt 200 px statt 160 px breit  */
  #recoSwiper .swiper-wrapper{
    display:grid !important;                 /* bleibt Grid          */
    grid-template-columns:repeat(6,100px);   /* 6 breite Quadrate    */
    gap:8px;
    justify-content:start;                   /* links beginnen       */
  }

  /* Bild füllt die neue 200×200-Zelle komplett aus */
  #recoSwiper .swiper-slide{
    width:100% !important;                   /* ignoriert alte Werte*/
  }
  .reco-item img{
    width:100%;
    aspect-ratio:1/1;
    object-fit:cover;
  }
}
/* ── Basis-Carousel-Layout  (Mobile ≤1023 px) ────────────────*/
@media (max-width:1023px){

  .mobile-media-carousel{
    display:flex;
    overflow-x:scroll;
    scroll-snap-type:x mandatory;
    -webkit-overflow-scrolling:touch;
  }

  .mobile-media-item{
    flex:0 0 100vw;   /* exakt eine Gerätebreite */
    width:100vw;      /* verhindert Untereinander-Stapeln */
    height:100vw;     /* Quadrat                          */
    scroll-snap-align:start;
  }
}
/* ─── DESKTOP SIZE-PICKER & CUSTOM SIZE ─────────────────────────── */
/*  Füge diesen Block ans Ende deiner  newera.css  (oder ins Theme-CSS) ein. */
/*  Greift erst ab klassischer Desktopbreite, mobile Picker bleibt unberührt. */


@media screen and (min-width: 1024px) {
  .size-picker-lg {
    display: flex;
    gap: 10px;
    margin: 20px 0;
  }

  .size-picker-lg .size-btn {
    width: 38px;
    height: 38px;
    font-size: 13px;
    font-weight: 400;
    letter-spacing: 0.04em;
    border: 1px solid #aaa;
    border-radius: 0px;
    background: #fff;
    color: #222;
    cursor: pointer;
    transition: background 0.2s, color 0.2s, border 0.2s;
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    padding: 0;
  }

  .size-picker-lg .size-btn:hover {
    border-color: #222;
  }

  .size-picker-lg .size-btn.active {
    background: #222;
    color: #fff;
    border-color: #222;
  }
}


  /* --- Custom-Size Input --------------------------------------- */
  .custom-size-wrapper{ margin-top:20px; }
  .custom-size-label{
    font-size:14px;
    font-weight:600;
    margin-bottom:6px;
  }
  .custom-size-wrapper input{
    width:100%;
    max-width:200px;
    padding:8px 12px;
    font-size:14px;
    border:1px solid #ccc;
    border-radius:0px;
  }
  .custom-size-hint{
    font-size:12px;
    color:#555;
    margin-top:6px;
    max-width:320px;
    line-height:1.4;
  }

  /* --- Add-to-Cart Button Abstand ------------------------------ */
  .add-to-cart-form-desktop .desktop-add-to-cart{
    display:block;
    width:100%;
    margin-top:10px;
  }
}
@media screen and (min-width: 1024px) {

  /* ECKIGE Buttons & Eingabefeld */
  .size-picker-lg .size-btn,
  .custom-size-wrapper input {
    border-radius: 0;   /* keine Abrundung */
  }

}
@media screen and (min-width:1024px){
  /* Desktop-Link “SIZE GUIDE” */
  .desktop-size-guide{
    margin-top:8px;
    font-size:10px;
    font-weight:600;
    cursor:pointer;
    text-decoration:underline;
    letter-spacing:.05em;
    display:inline-block;
  }
}
/* ▸ DESKTOP ONLY (≥ 1024 px) */
@media (min-width:1024px){

  /* klickbarer Link */
  .size-guide-link--desktop{
    display:inline-block;
    margin-top:12px;
    font:500 10px/1 "Helvetica Neue",sans-serif;
    letter-spacing:.05em;
    cursor:pointer;
    text-decoration:underline;
  }
  .size-guide-link--desktop:hover{ text-decoration:none; }

  /* Overlay + Box */
  .size-guide-modal--desktop{
    position:fixed;
    inset:0;
    display:none;                 /* Grundzustand */
    align-items:center;
    justify-content:center;
    background:rgba(0,0,0,.55);
    z-index:10000;
  }
  .size-guide-modal--desktop.open{ display:flex; }

  .size-guide-content{
    position:relative;
    background:#fff;
    padding:24px;
    width:90%; max-width:420px;
    border-radius:4px;
    overflow:auto;
  }
  .size-guide-close{
    position:absolute;
    top:10px; right:16px;
    font-size:26px;
    cursor:pointer;
  }
}
/* ── SIZE-GUIDE: Leaner Desktop Look ───────────────────────── */
@media (min-width:1024px){

  /* Weißes Kärtchen schlanker machen */
  .size-guide-content{
    padding:20px 24px;
    width:auto;              /* passt sich Inhalt an */
    min-width:340px;
  }

  /* Tabelle formatiert */
  .size-guide-content table{
    border-collapse:collapse;
    width:100%;
    font-size:14px;
  }
  .size-guide-content th,
  .size-guide-content td{
    text-align:left;
    padding:4px 6px;
    white-space:nowrap;      /* spaltet Zahlen nicht um */
  }
  .size-guide-content th{
    font-weight:600;
    border-bottom:1px solid #ccc;
  }
  .size-guide-content tbody tr:not(:last-child) td{
    border-bottom:1px solid #eee;
  }

  /* Überschrift (erste Zeile) ein wenig Abstand nach unten */
  .size-guide-content thead tr th{
    padding-bottom:6px;
  }

  /* X-Button etwas feiner platzieren */
  .size-guide-close{
    top:8px;
    right:12px;
  }
}
@media (min-width:1024px){

  /* Logo oben zentriert */
  .size-guide-logo{
    display:block;
    margin:0 auto 12px;   /* unten 12 px Abstand zur Note */
    width:120px;          /* bei Bedarf anpassen */
    height:auto;
  }

  /* Hinweistext unter dem Logo */
  .size-guide-note{
    margin:0 0 16px;      /* unten 16 px Abstand zur Tabelle */
    font-size:12px;
    line-height:1.4;
    text-align:center;
  }
}
/* ── SIZE-GUIDE – Desktop: eckig & großzügiger ───────────────── */
@media screen and (max-width: 1023px) {
  .size-scroll-container {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    padding-bottom: 8px;
    margin: 16px 0;
  }

  .size-scroll-inner {
    display: flex;
    gap: 12px;
    width: max-content;
  }

  .size-scroll-inner .size-btn {
    min-width: 40px;
    height: 40px;
    font-size: 12px;
    font-weight: 500;
    border: 1px solid #ccc;
    background: transparent;
    color: #000;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 0;
    cursor: pointer;
    transition: border 0.2s ease, color 0.2s ease;
    flex-shrink: 0;
  }

  .size-scroll-inner .size-btn.active {
    border: 2px solid #000;
    font-weight: 600;
  }

  .size-scroll-inner .size-btn:hover {
    border-color: #000;
  }

  .size-scroll-container::-webkit-scrollbar {
    display: none;
  }

  .size-scroll-container {
    scrollbar-width: none;
  }
}
@media screen and (max-width: 1023px) {
  .size-guide-modal--desktop {
    display: none; /* ← Das überschreibt evtl. JS */
  }

  .size-guide-modal--desktop.open {
    display: flex !important;
    justify-content: center;
    align-items: center;
    position: fixed;
    inset: 0;
    z-index: 9999;
    background: rgba(0, 0, 0, 0.6);
    padding: 16px;
  }

  .size-guide-modal--desktop .size-guide-content {
    background: #fff;
    max-width: 100%;
    width: 100%;
    border-radius: 8px;
    padding: 24px 16px;
    overflow-y: auto;
    max-height: 90vh;
  }

  .size-guide-modal--desktop .size-guide-close {
    position: absolute;
    top: 12px;
    right: 16px;
    font-size: 28px;
    cursor: pointer;
  }

  .size-guide-modal--desktop table {
    width: 100%;
    border-collapse: collapse;
    font-size: 14px;
  }

  .size-guide-modal--desktop th,
  .size-guide-modal--desktop td {
    padding: 8px 6px;
    text-align: left;
    border-bottom: 1px solid #eee;
  }

  .size-guide-note {
    font-size: 13px;
    line-height: 1.5;
    margin-bottom: 16px;
  }

  .size-guide-logo {
    width: 100px;
    margin-bottom: 12px;
  }
}
@media screen and (min-width: 1024px) {
  .ct-notice {
    font-size: 10px;
  }
}
.direct-checkout-button {
  display: block;
  width: 66%;
  padding: 14px 0;
  background-color: white;
  color: black;
  border: 1px solid black;
  border-radius: 0px;
  font-size: 12px;
  font-weight: 500;
  text-align: center;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  transition: all 0.2s ease-in-out;
  margin-top: 0px;
}

.direct-checkout-button:hover {
  background-color: black;
  color: white;
}
.info-text,
.info-heading {
  font-size: 11px !important;
  line-height: 1.4;
  letter-spacing: 0.2px;
  text-transform: uppercase;
}
/* ===== FINAL: Gallery FLUSH-LEFT + MAX WIDTH (Desktop only) ===== */
@media (min-width:1024px){
  /* Werte ggf. anpassen */
  :root{
    --sidebar-w: 220px;  /* linke Sidebar */
    --info-w:    560px;  /* rechte Info-Spalte */
    --gap-info:   32px;  /* Abstand zur Info rechts */
    --gap-left:    0px;  /* Abstand zur Sidebar links (0 = bündig) */
  }

  /* alte Shifts killen */
  .desktop-media-grid,
  .desktop-media-stack,
  .reco-wrapper,
  .desktop-info{
    left:auto!important;
    padding-left:0!important;
    margin-left:0!important;
  }

  /* Grid definieren: Sidebar | gap-left | Gallery | gap-info | Info */
  .product-desktop-wrapper{
    display:grid!important;
    gap:0!important;
    padding:0!important;
    grid-template-columns: var(--sidebar-w) var(--gap-left) minmax(0,1fr) var(--gap-info) var(--info-w);
  }

  /* Sidebar fix */
  .main-sidebar{
    grid-column:1;
    position:fixed;
    top:32px; left:0;
    width:var(--sidebar-w);
    height:calc(100vh - 32px);
    overflow:auto;
  }

  /* Gallery-Spalte */
  .desktop-media-stack{
    grid-column:3;
    grid-row:1;
    width:calc(100vw - var(--sidebar-w) - var(--gap-left) - var(--info-w) - var(--gap-info)) !important;
    max-width:none!important;
  }

  /* Bilder ohne Lücken */
  .media-item{ margin:0!important; position:relative; }
  .media-item--primary{ height:100vh!important; }
  .media-item--primary img,
  .media-item--primary video{
    position:absolute; inset:0; width:100%; height:100%; object-fit:cover;
  }
  .media-item img,
  .media-item video{
    width:100%!important; height:auto!important; display:block; object-fit:cover;
  }

  /* Info rechts sticky */
  .desktop-info{
    grid-column:5;
    grid-row:1;
    position:sticky;
    top:32px;
    max-height:calc(100vh - 64px);
    overflow:auto;
    padding:0!important;
  }

  /* Recos unter Gallery */
  .reco-wrapper{
    grid-column:3;
    grid-row:2;
    margin-top:32px!important;
    position:static!important;
    overflow:visible;
  }
}
/* ==== PUSH GALLERY LEFT (Desktop only) ==== */
@media (min-width:1024px){
  /* evtl. vorhandenes Padding der Wrapper killen */
  .product-desktop-wrapper{ padding-left:0 !important; }

  /* Abstandswert anpassen, bis es exakt bündig ist */
  :root{ --gap-left-current: 255px; }  /* falls bei dir 32px oder 16px sind, hier ändern */

  .desktop-media-stack{
    margin-left: calc(-1 * var(--gap-left-current)) !important;
  }
}


@media (min-width:1024px){
  .desktop-media-stack{
    display:flex !important;
    flex-direction:column !important;
    gap:10px !important;          /* einheitlich 10px */
  }

  .desktop-media-stack figure,
  .desktop-media-stack .media-item{
    margin:0 !important;
    padding:0 !important;
    border:0 !important;
  }

  .media-item--primary{
    height:auto !important;
  }
  .media-item--primary img,
  .media-item--primary video{
    position:static !important;
    width:100% !important;
    height:auto !important;
    object-fit:cover;
  }
}
@media (min-width:1024px){
  .breadcrumbs-wrapper{
    position: relative;
    left: -30px;          /* oder: transform: translateX(-30px); */
    padding-left: 0 !important;  /* falls dein bisheriges 32px-Padding stört */
  }
}
/* Empfehlungen 30px nach links (Desktop) */
@media (min-width:1024px){
  .reco-wrapper{
    margin-left: -30px !important;   /* Block nach links schieben */
    padding-left: 0 !important;      /* evtl. vorhandenes Padding neutralisieren */
    position: relative;               /* falls schon left genutzt wurde */
    left: auto !important;
  }
}
@media (min-width:1024px){
  .service-info-wrapper{
    margin-left:-30px !important;
    padding-left:0 !important;
    position:relative;
    left:auto !important;   /* falls vorher left benutzt wurde */
  }
}

@media (min-width:1024px){
  #limitedNotice{
    position: sticky;
    top: 0;
    z-index: 10000;
    background: #fff;
    margin-left: -35px !important;
    padding-left: 0 !important;
    width: calc(100% + 30px);   /* kompensiert den negativen Margin */
  }
}
@media (min-width:1024px){
  .desktop-info .desktop-add-to-cart,
  .desktop-info .direct-checkout-button{
    width:auto !important;
    min-width:350px !important;   /* Wert nach Wunsch */
    padding:12px 24px !important;
    display:inline-block !important;
  }
}
@media (max-width:1023px){
  .mobile-media-carousel{
    touch-action: pan-x !important;   /* horizontal swipen wieder erlauben */
    overscroll-behavior-x: contain;    /* verhindert „Gummi“-Pull */
    overscroll-behavior-y: none;       /* Seite scrollt normal */
    overflow-x: auto !important;       /* falls vorher hidden gesetzt wurde */
  }

  .mobile-media-item img{
    -webkit-user-drag: none;
    user-select: none;
    pointer-events: auto;              /* sicherstellen, dass Swipes ankommen */
    -webkit-touch-callout: none;
  }
}


@media (max-width:1023px){
  .progress-container{
    position:absolute;
    bottom:8px;          /* sehr nah an unterer Bildkante */
    left:8px;            /* linksbündig */
    right:auto;          /* rechte Begrenzung deaktivieren */
    width:60px;          /* fixe Breite, kleine Anzeige */
    height:2px;
    background:rgba(0,0,0,.2);
    border-radius:1px;
    z-index:10;
  }
  .progress-bar{
    width:0;
    height:100%;
    background:#000;
    border-radius:1px;
    transition:width .1s ease-out;
  }
}
/* Sticky Purchase Block komplett deaktivieren (mobile) */
@media (max-width:1023px){
  .product-purchase-block{
    display:none !important;
  }
}
/* Mobile: Titel + Preis 20px nach oben verschieben */
@media (max-width:1023px){
  .newera-extra-info .extra-title,
  .newera-extra-info .extra-price{
    position: relative;
    top: -30px;
  }
}
/* Mobile: Titel + Preis auf 10px Schriftgröße setzen */
@media (max-width:1023px){
  .newera-extra-info .extra-title,
  .newera-extra-info .extra-price{
    font-size:11px !important;
    line-height:1.2;
  }
}
/* Mobile: Limited Notice (Discover our new …) ausblenden */
@media (max-width:1023px){
  #limitedNotice{
    display:none !important;
  }
}
/* Mobile: Bildcontainer 4:5 statt 1:1 */
@media (max-width:1023px){
  .mobile-media-item{
    flex:0 0 100vw;
    width:100vw;
    height:auto;
    aspect-ratio:4/5;          /* statt Quadrat */
    scroll-snap-align:start;
    position:relative;
  }

  .mobile-media-item img,
  .mobile-media-item video{
    width:100%;
    height:100%;
    object-fit:cover;
  }
}
/* Mobile: Reduzierter Preis – alter Preis durchgestrichen, neuer rot */
@media (max-width:1023px){
  .newera-extra-info{
    display:flex;
    justify-content:space-between;

    gap:8px;
  }

  .newera-extra-info .price-wrapper{
    display:flex;
    align-items:center;
    gap:6px;
  }

  .newera-extra-info .price-old{
    font-size:10px !important;
    line-height:1.2;
    color:#888;
    text-decoration:line-through;
  }

  .newera-extra-info .price-new{
    font-size:10px !important;
    line-height:1.2;
    font-weight:600;
    color:#c00;  /* rot für reduzierten Preis */
  }
}
/* Mobile & Desktop: Size-Picker ohne Kästen, nur Text */
.size-btn{
  border:none !important;
  background:none !important;
  border-radius:0 !important;
  padding:0 !important;
  min-width:auto !important;
  height:auto !important;
  font-size:12px !important;
  font-weight:500;
  color:#000;
  cursor:pointer;
  transition:color .2s ease;
}

.size-btn:hover{
  color:#666;
}

.size-btn.active{
  color:#c00;              /* aktive Größe z. B. rot markieren */
  font-weight:600;
  text-decoration:underline;
}

/* Container bleibt als Layout-Halter */
.size-picker-lg,
.size-scroll-inner{
  gap:12px;
}
/* Neuer Add-to-Cart Button: innen weiß, schwarzer Text, Caps, ohne Rand & ohne Radius */
.add-to-cart--plain {
  display:block;
  width:100%;
  padding:14px 0;
  background:#fff;
  color:#000;
  font-size:12px;
  font-weight:600;
  text-transform:uppercase;
  letter-spacing:0.05em;
  text-align:center;
  border:none;
  border-radius:0;
  cursor:pointer;
  transition:background .2s,color .2s;
}

.add-to-cart--plain:hover,
.add-to-cart--plain:focus {
  background:#f5f5f5;
  color:#000;
}
/* Neuer Add-to-Cart Button: weiß innen, schwarzer Text, Caps, mit schwarzer Umrandung, ohne Radius */
.add-to-cart--plain {
  display:block;
  width:100%;
  padding:14px 0;
  background:#fff;
  color:#000;
  font-size:12px;
  font-weight:600;
  text-transform:uppercase;
  letter-spacing:0.05em;
  text-align:center;
  border:1px solid #000;   /* ← schwarze Umrandung */
  border-radius:0;
  cursor:pointer;
  transition:background .2s,color .2s,border-color .2s;
}

.add-to-cart--plain:hover,
.add-to-cart--plain:focus {
  background:#000;
  color:#fff;
  border-color:#000;
}
/* Hinweistext direkt unter Preis */
.price-note {
  margin-top:4px;
  font-size:10px;
  color:#888;
  text-align:left;
  text-transform:none;
}
/* ACTIVE SIZE: schwarz + underline – ohne Box */
.size-btn.active,
.size-picker-lg .size-btn.active,
.size-scroll-inner .size-btn.active{
  color:#000 !important;
  text-decoration:underline !important;
  background:transparent !important;
  border-color:transparent !important;
}
.size-btn.active:hover{ color:#000 !important; } /* Hover bleibt schwarz */
/* SIZE-ROW: Größen links, SIZE CHART rechts */
@media (max-width:1023px){
  .size-row{display:flex;align-items:center;gap:12px;margin:12px 0}
  .size-row .size-scroll-container{flex:1}
  .size-chart-link{
    margin-left:auto;background:none;border:0;padding:0;cursor:pointer;
    font:600 10px/1 "Helvetica Neue",sans-serif;letter-spacing:.05em;
    text-transform:uppercase;text-decoration:underline;color:#000;
  }
  .size-chart-link:hover{text-decoration:none}
}
@media (min-width:1024px){
  .size-row-lg{display:flex;align-items:center;gap:12px;flex-wrap:wrap;margin:8px 0 12px}
  .size-row-lg .size-picker-lg{flex:1}
  .size-chart-link--desktop{
    margin-left:auto;background:none;border:0;padding:0;cursor:pointer;
    font:600 10px/1 "Helvetica Neue",sans-serif;letter-spacing:.05em;
    text-transform:uppercase;text-decoration:underline;color:#000;
  }
  .size-chart-link--desktop:hover{text-decoration:none}
}

/* Aktive Größe: schwarz + underline (global) */
.size-btn.active,
.size-picker-lg .size-btn.active,
.size-scroll-inner .size-btn.active{
  color:#000 !important;text-decoration:underline !important;
  background:transparent !important;border-color:transparent !important;
}
.size-btn.active:hover{color:#000 !important}
@media (max-width:1023px){
  .size-guide-link,
  .size-guide-link--desktop{
    display:none !important;
  }
}
/* MOBILE: Preis links, Titel rechts, Hinweis grau */
@media (max-width:1023px){
  .newera-extra-info--row{
    display:flex;
    align-items:baseline;
    justify-content:space-between;
    gap:12px;
    margin:8px 0 0; /* sitzt direkt unter dem Bildbereich */
  }
  .newera-extra-info--row .extra-left{
    display:flex; flex-direction:column; gap:2px;
  }
  .newera-extra-info--row .extra-price{
    font-size:12px; font-weight:600; line-height:1.2;
  }
  .newera-extra-info--row .price-note{
    font-size:10px; color:#999; text-transform:none; line-height:1.2;
  }
  .newera-extra-info--row .extra-title{
    font-size:12px; font-weight:500; text-transform:uppercase;
    text-align:right; line-height:1.2; max-width:55%;
  }

  /* frühere Mobile-Offsets neutralisieren */
  .newera-extra-info .extra-title,
  .newera-extra-info .extra-price{
    position:static !important; top:auto !important;
  }
}
/* Hide the section/snippet "fixed-element.liquid" everywhere */
#shopify-section-fixed-element,
#fixed-element,
section.fixed-element,
.fixed-element,
[data-section-id="fixed-element"],
[data-section-type="fixed-element"]{
  display:none !important;
  visibility:hidden !important;
  pointer-events:none !important;
}

/* Falls nur auf Produktseiten gewünscht: */
/* .template-product #shopify-section-fixed-element{display:none!important} */
/* Kill "fixed-element.liquid" – robust für OS 2.0 IDs */
[id^="shopify-section"][id*="__fixed-element"],
section[id*="__fixed-element"],
[id^="shopify-section"][id*="fixed-element"],
section[id*="fixed-element"],
[class*="fixed-element"],
[data-section-type*="fixed-element"]{
  display:none !important;
  visibility:hidden !important;
  pointer-events:none !important;
  height:0 !important;
  overflow:hidden !important;
}
/* MOBILE: Titel & Preis 30px nach oben */
@media (max-width:1023px){
  /* Falls du meinen neuen Row-Block nutzt */
  .newera-extra-info--row{
    margin-top:-30px !important; /* zieht Preis+Titel zusammen nach oben */
  }

  /* Fallback: wenn du noch den alten Block nutzt */
  .newera-extra-info:not(.newera-extra-info--row) .extra-title,
  .newera-extra-info:not(.newera-extra-info--row) .extra-price{
    position:relative !important;
    top:-30px !important;
  }
}
/* MOBILE: Größenzeile, SIZE CHART & Add-to-Cart 20px nach oben */
@media (max-width:1023px){
  /* Zahlen + SIZE CHART (beides steckt in .size-row) */
  .bottom-sheet-content .size-row{
    margin-top:-20px !important;
  }

  /* Der Plain-ATC direkt unter der Größenzeile */
  .bottom-sheet-content form.add-to-cart-form{
    margin-top:-20px !important;
  }
  /* Falls du lieber den Button selbst verschiebst: */
  .bottom-sheet-content .add-to-cart--plain{
    margin-top:-20px !important;
  }
}
/* --- SIZE GUIDE MODAL: eckig + schwarzes X --- */
.size-guide-content {
  border-radius: 0 !important;   /* keine Abrundung */
}

.size-guide-close {
  color: #000 !important;        /* schwarzes "X" */
  font-weight: 400;              /* dünner, eleganter */
  text-decoration: none !important;
}

.size-guide-close:hover {
  color: #333 !important;        /* leicht graues Hover */
}
/* === PRICE DISPLAY PATCH === */
.price-wrapper{
  display:inline-flex;
  gap:8px;
  align-items:baseline;
  white-space:nowrap;
}
.price-new{
  color:#c00;              /* Rot für reduzierten Preis */
  font-weight:600;
}
.price-old{
  color:#aaa;              /* Hellgrau */
  text-decoration:line-through;
  font-weight:400;
}

/* Wenn kein Vergleichspreis vorhanden → normal schwarz */
[data-no-discount="true"] .price-new{ color:#000; }
/* === PRICE POSITION PATCH === */
.price-wrapper {
  position: relative;
  top: -15px;   /* 15px nach oben */
}
/* === PRICE COLOR FALLBACK === */
[data-no-discount="true"] .price-new {
  color: #000 !important;   /* Schwarz wenn kein Vergleichspreis existiert */
}
/* === PRICE COLOR RULE (no discount = black, with compare = red) === */
.price-new { color:#000 !important; }                            /* default black */
.price-wrapper:has(.price-old) .price-new { color:#c00 !important; }  /* red if compare price exists */
/*
/*
 * ========================================================================
 * CSS OVERRIDE: Mobile Info-Tabs (Schriftgröße & Farbe)
 * ========================================================================
 */
@media (max-width: 1023px) {
  /* Zustand der Überschrift (Header) */
  .collapse-section__header {
    font-size: 12px !important; /* Schriftgröße auf 12px reduziert */
    color: #888 !important;     /* Grundzustand grau */
  }

  /* Geöffnete Überschrift wird schwarz */
  .collapse-section.open .collapse-section__header {
    color: #000 !important;
  }
  
  /* NEU: Textinhalt in den Tabs um 1px verkleinern */
  .collapse-section__content {
    font-size: 12px !important; /* Ursprünglich 13px, reduziert auf 12px */
  }
}
/*
 * ========================================================================
 * CSS OVERRIDE: Hinweis für inkludierte Kosten unter dem Preis (Mobile)
 * ========================================================================
 */
@media (max-width: 1023px) {
  .price-included-notice {
    font-size: 10px;
    color: #999; /* Hellgrau */
    text-transform: none;
    font-weight: 400;
    margin: 2px 0 0 0;
    padding: 0;
    line-height: 1.2;
    text-align: right; /* Stellt sicher, dass es rechtsbündig ist */
  }

  /* Wrapper, um Preis und Hinweis in der Sticky-Bar zu gruppieren */
  .price-group {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
  }
}
/* === FEATURE ICONS (3 in einer Reihe, zentriert) === */
.newera-features{
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:16px;
  align-items:start;
  text-align:center;
  margin:8px 0 0;
}
.feature-card{
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:flex-start;
  gap:8px;
  min-height:110px; /* sorgt für gleiche Höhe, je nach Iconhöhe */
}
.feature-card img{
  width:48px;
  height:48px;
  object-fit:contain;
  image-rendering:auto;
  display:block;
}
.feature-label{
  font-size:10px;
  font-weight:600;
  letter-spacing:.04em;
  text-transform:uppercase;
  line-height:1.2;
  color:#000;
}

/* Desktop: etwas größer, mehr Luft */
@media (min-width:1024px){
  .newera-features{ gap:20px; }
  .feature-card img{ width:56px; height:56px; }
  .feature-label{ font-size:11px; }
}

/* Safety: alte Tag-Stile neutralisieren, falls noch irgendwo aktiv */
.feature-tag{ display:none !important; }
/* === PRICE NOTE (under price, subtle grey) === */
.price-note-desktop,
.price-included-notice {
  font-size: 10px;
  color: #999;
  font-weight: 400;
  letter-spacing: 0.02em;
  text-transform: none;
  margin-top: 2px;
  line-height: 1.3;
}

/* Desktop: leicht linksbündig am Preis ausgerichtet */
@media (min-width:1024px){
  .price-note-desktop {
    margin-bottom: 8px;
    text-align: left;
  }
}
/* --- PRICE NOTICE unter dem Preis, rein via CSS --- */

/* Mobile/Bottom-Sheet: Preis-Stack erzwingen (auch wenn <p> im <span> steckt) */
.newera-extra-info .price-wrapper{
  display:inline-flex !important;
  flex-direction:column !important;
  align-items:flex-start !important;
  gap:2px !important;
  white-space:normal !important; /* damit der Hinweis umbrechen darf */
}
.newera-extra-info .price-wrapper br{ display:none !important; }
.newera-extra-info .price-wrapper .price-included-notice{
  display:block !important;
  font-size:10px !important;
  color:#999 !important;
  font-weight:400 !important;
  line-height:1.3 !important;
  text-transform:none !important;
  margin-top:2px !important;
}

/* Desktop: Hinweis per ::after unter .desktop-price injizieren (ohne Liquid) */
@media (min-width:1024px){
  .desktop-price::after{
    content:"(Duties and shipping costs are included in the price)";
    display:block;
    font-size:10px;
    color:#999;
    font-weight:400;
    letter-spacing:.02em;
    text-transform:none;
    line-height:1.3;
    margin-top:2px;
  }
}
/* ======================================================================
   DESKTOP 1:1 HELIOT-EMIL LAYOUT (mobile bleibt unverändert)
   ====================================================================== */
@media (min-width: 1024px) {

  /* Global desktop cleanup */
  .desktop-view {
    margin-top: 0 !important;
    width: 100% !important;
    background: #fff !important;
  }

  /* 2-Spalten-Layout, keine Gaps, keine Offsets */
  .product-desktop-wrapper {
    display: flex !important;
    flex-wrap: nowrap !important;
    width: 100% !important;
    min-height: 100vh;
    padding: 0 !important;
    gap: 0 !important;
  }

  /* alte linke Sidebar ausblenden */
  .main-sidebar {
    display: none !important;
  }

  /* ===== LINKER BEREICH (BILD) ======================================= */
  .desktop-media-stack {
    flex: 0 0 50vw !important;
    max-width: 50vw !important;
    min-height: 100vh;
    background: #e6e6e6 !important; /* Heliot-Emil Grau */
    display: flex !important;
    justify-content: center !important;
    align-items: center !important;
    padding: 40px 40px 60px !important;
    margin: 0 !important;
    position: static !important;
  }

  /* nur das ERSTE Media auf Desktop zeigen */
  .desktop-media-stack .media-item {
    display: none !important;
  }
  .desktop-media-stack .media-item--primary {
    display: block !important;
    width: 100% !important;
    max-width: 520px !important;
    margin: 0 auto !important;
    background: transparent !important;
  }

  .desktop-media-stack .media-item--primary img,
  .desktop-media-stack .media-item--primary video {
    width: 100% !important;
    height: auto !important;
    object-fit: contain !important;
    background: transparent !important;
  }

  /* ===== RECHTER BEREICH (INFO) ====================================== */
  .desktop-info {
    flex: 0 0 50vw !important;
    max-width: 50vw !important;
    background: #fff !important;
    padding: 70px 70px 90px 70px !important;
    display: flex !important;
    flex-direction: column !important;
    gap: 22px !important;
    position: static !important;
    top: auto !important;
    max-height: none !important;
    overflow: visible !important;
  }

  /* Headings wie beim Beispiel */
  .desktop-brand {
    font-size: 11px !important;
    letter-spacing: .04em;
    text-transform: uppercase;
    margin: 0 !important;
  }
  .desktop-title {
    font-size: 12px !important;
    line-height: 1.4;
    text-transform: uppercase;
    margin: 0 !important;
  }

  /* Preis schlicht + Hinweis ausblenden */
  .desktop-price {
    font-size: 13px !important;
    font-weight: 400 !important;
    margin-top: 4px;
  }
  .desktop-price::after {
    content: none !important;
  }

  /* Size-Zeile sehr clean */
  #sizePickerDesktop,
  .size-picker-lg {
    display: flex !important;
    gap: 16px !important;
    margin: 12px 0 4px !important;
  }
  .size-btn {
    border: none !important;
    background: none !important;
    font-size: 12px !important;
    text-transform: uppercase;
    letter-spacing: .02em;
    padding: 0 !important;
  }
  .size-btn.active {
    text-decoration: underline !important;
  }

  /* Add to cart wie Heliot Emil */
  .desktop-info .desktop-add-to-cart,
  .desktop-info .direct-checkout-button {
    width: 320px !important;
    max-width: 100%;
    background: #fff !important;
    color: #000 !important;
    border: 1px solid #000 !important;
    border-radius: 0 !important;
    padding: 13px 0 !important;
    font-size: 11px !important;
    font-weight: 500 !important;
    text-transform: uppercase !important;
    letter-spacing: .08em !important;
    text-align: center;
  }
  .desktop-info .desktop-add-to-cart:hover,
  .desktop-info .direct-checkout-button:hover {
    background: #000 !important;
    color: #fff !important;
  }

  /* "Add to wishlist" Fake-Link */
  .ct-notice {
    margin-top: 4px !important;
    font-size: 10px !important;
    text-transform: uppercase;
    letter-spacing: .08em;
  }

  /* Accordions auf Desktop untereinander, vollbreit */
  .desktop-collapse,
  .desktop-collapse .collapse-item {
    width: 100% !important;
  }
  .desktop-collapse .collapse-header {
    border-top: 1px solid rgba(0,0,0,.1);
    background: #f9f9f9;
    font-size: 10px !important;
    text-transform: uppercase;
    letter-spacing: .08em;
  }

  /* ===== KRAM AUSBLENDEN, DER NICHT IM HELIOT-LOOK IST ===== */
  .reco-wrapper,
  .service-info-wrapper,
  .breadcrumbs-wrapper {
    display: none !important;
  }

  /* irgendwelche alten left/-30px-shifts killen */
  .desktop-media-grid,
  .reco-wrapper,
  .service-info-wrapper,
  .breadcrumbs-wrapper,
  .desktop-info {
    left: auto !important;
    margin-left: 0 !important;
    padding-left: 0 !important;
  }
}
/* ======================================================================
   DESKTOP FIX v2 – Heliot-Emil Layout wirklich 1:1
   ====================================================================== */
@media (min-width: 1024px) {

  /* Header-Höhe ausgleichen (dein Top-Menü + Notice) */
  .desktop-view {
    margin-top: 96px !important; /* ggf. 88px/100px testen */
  }

  .product-desktop-wrapper {
    display: flex !important;
    width: 100% !important;
    min-height: calc(100vh - 96px);
    padding: 0 !important;
    gap: 0 !important;
  }

  /* alles Alte aus */
  .main-sidebar,
  .reco-wrapper,
  .service-info-wrapper,
  .breadcrumbs-wrapper {
    display: none !important;
  }

  /* LINKES PANEL (Bild) */
  .desktop-media-stack {
    flex: 0 0 50vw !important;
    max-width: 50vw !important;
    background: #e4e4e4 !important;
    display: flex !important;
    justify-content: center !important;
    align-items: center !important;
    margin: 0 !important;
    padding: 0 !important;
    min-height: calc(100vh - 96px);
    position: relative !important;
  }

  /* nur erstes Bild */
  .desktop-media-stack .media-item { display: none !important; }
  .desktop-media-stack .media-item--primary {
    display: block !important;
    width: 100% !important;
    max-width: 460px !important;   /* Bildbreite wie im Screenshot */
    margin: 0 auto !important;
  }
  .desktop-media-stack .media-item--primary img,
  .desktop-media-stack .media-item--primary video {
    width: 100% !important;
    height: auto !important;
    object-fit: contain !important;
    background: transparent !important;
  }

  /* RECHTES PANEL (Info) */
  .desktop-info {
    flex: 0 0 50vw !important;
    max-width: 50vw !important;
    background: #fff !important;
    padding: 40px 64px 80px 64px !important;
    display: flex !important;
    flex-direction: column !important;
    gap: 20px !important;
    position: static !important;
    max-height: none !important;
  }

  .desktop-brand {
    font-size: 11px !important;
    text-transform: uppercase;
    margin: 0 !important;
  }
  .desktop-title {
    font-size: 12px !important;
    text-transform: uppercase;
    margin: 0 !important;
  }
  .desktop-price {
    font-size: 13px !important;
    font-weight: 400 !important;
    margin: 2px 0 16px 0 !important;
  }
  .desktop-price::after { content: none !important; }

  /* Size-Zeile clean */
  #sizePickerDesktop,
  .size-picker-lg {
    display: flex !important;
    gap: 14px !important;
    margin: 0 0 6px 0 !important;
  }
  .size-btn {
    border: none !important;
    background: none !important;
    font-size: 11px !important;
    text-transform: uppercase;
    letter-spacing: .04em;
    padding: 0 !important;
  }
  .size-btn.active { text-decoration: underline !important; }

  /* Buttons wie Heliot */
  .desktop-info .desktop-add-to-cart,
  .desktop-info .direct-checkout-button,
  .desktop-view .add-to-cart--plain {
    width: 320px !important;
    background: #fff !important;
    color: #000 !important;
    border: 1px solid #000 !important;
    border-radius: 0 !important;
    padding: 13px 0 !important;
    font-size: 11px !important;
    font-weight: 500 !important;
    text-transform: uppercase !important;
    letter-spacing: .08em !important;
  }
  .desktop-info .desktop-add-to-cart:hover,
  .desktop-info .direct-checkout-button:hover {
    background: #000 !important;
    color: #fff !important;
  }

  /* Accordions */
  .desktop-collapse { width: 100% !important; margin-top: 20px !important; }
  .desktop-collapse .collapse-header {
    background: #f4f4f4;
    font-size: 10px !important;
    text-transform: uppercase;
    letter-spacing: .08em;
  }

  /* evtl. Rest-Shifts killen */
  .desktop-media-grid,
  .desktop-info {
    left: auto !important;
    margin-left: 0 !important;
    padding-left: 0 !important;
  }

  /* Desktop-Notice nicht reinschieben */
  #limitedNotice {
    margin-left: 0 !important;
    width: 100% !important;
  }
}
/* ================================================================
   DESKTOP 1:1 HELIOT EMIL FINAL
   ================================================================ */
@media (min-width:1024px){

  /* Banner oben weg, sonst rutscht der graue Block runter */
  #limitedNotice{
    display:none !important;
  }

  /* Section darf keinen Extra-Abstand mehr haben */
  .desktop-view{
    margin-top:0 !important;
  }

  /* 2 Spalten, volle Höhe */
  .product-desktop-wrapper{
    display:flex !important;
    width:100% !important;
    min-height:100vh !important;
    padding:0 !important;
    gap:0 !important;
  }

  /* ===== LINKES PANEL (BILD) ===== */
  .desktop-media-stack{
    flex:0 0 50vw !important;
    max-width:50vw !important;
    background:#e2e2e2 !important; /* Heliot-Grau */
    display:flex !important;
    align-items:center !important;
    justify-content:center !important;
    padding:0 !important;
    margin:0 !important;
    min-height:100vh !important;
    position:relative !important;
  }

  /* nur ERSTES Bild zeigen */
  .desktop-media-stack .media-item{display:none !important;}
  .desktop-media-stack .media-item--primary{
    display:block !important;
    width:100% !important;
    max-width:460px !important;
    margin:0 auto !important;
  }
  .desktop-media-stack .media-item--primary img,
  .desktop-media-stack .media-item--primary video{
    width:100% !important;
    height:auto !important;
    object-fit:contain !important;
    background:transparent !important;
  }

  /* ===== RECHTES PANEL (INFO) ===== */
  .desktop-info{
    flex:0 0 50vw !important;
    max-width:50vw !important;
    background:#fff !important;
    padding:48px 64px 80px 64px !important;
    display:flex !important;
    flex-direction:column !important;
    gap:20px !important;
    overflow:visible !important;
    position:relative !important;
    top:0 !important;
  }

  /* Typo wie im Screenshot: klein, caps */
  .desktop-brand{
    margin:0 !important;
    font-size:11px !important;
    text-transform:uppercase;
  }
  .desktop-title{
    margin:0 !important;
    font-size:12px !important;
    text-transform:uppercase;
  }
  .desktop-price{
    margin:4px 0 16px 0 !important;
    font-size:13px !important;
    font-weight:400 !important;
  }
  .desktop-price::after{content:none !important;}

  /* Size-Row schlicht */
  #sizePickerDesktop,
  .size-picker-lg{
    display:flex !important;
    gap:14px !important;
    margin:0 0 6px 0 !important;
  }
  .size-btn{
    border:0 !important;
    background:transparent !important;
    padding:0 !important;
    font-size:11px !important;
    text-transform:uppercase;
    letter-spacing:.04em;
  }
  .size-btn.active{
    text-decoration:underline !important;
  }

  /* Button exakt wie bei Heliot: weiß + schwarzer Rand */
  .desktop-info .desktop-add-to-cart,
  .desktop-info .direct-checkout-button,
  .desktop-info .add-to-cart--plain{
    width:320px !important;
    max-width:100%;
    background:#fff !important;
    color:#000 !important;
    border:1px solid #000 !important;
    border-radius:0 !important;
    padding:13px 0 !important;
    font-size:11px !important;
    font-weight:500 !important;
    text-transform:uppercase !important;
    letter-spacing:.08em !important;
    text-align:center;
  }
  .desktop-info .desktop-add-to-cart:hover,
  .desktop-info .direct-checkout-button:hover{
    background:#000 !important;
    color:#fff !important;
  }

  /* Accordion-Bereich lassen wir, aber clean */
  .desktop-collapse{
    width:100% !important;
    margin-top:24px !important;
  }
  .desktop-collapse .collapse-header{
    background:#f5f5f5;
    font-size:10px !important;
    letter-spacing:.08em;
    text-transform:uppercase;
  }

  /* Alles andere auf Desktop aus */
  .main-sidebar,
  .reco-wrapper,
  .service-info-wrapper,
  .breadcrumbs-wrapper{
    display:none !important;
  }

  /* alte -30px / left: / padding-left-Overrides killen */
  .desktop-media-grid,
  .desktop-info,
  .reco-wrapper,
  .service-info-wrapper,
  .breadcrumbs-wrapper{
    left:auto !important;
    margin-left:0 !important;
    padding-left:0 !important;
  }
}
/* ================================================================
   DESKTOP: Heliot-Emil-Layout (ahrensandco)
   ================================================================ */
@media (min-width: 1024px) {

  /* Header-Höhe ausgleichen – ggf. 90px anpassen */
  .desktop-view {
    padding-top: 90px !important;
    background: #fff !important;
  }

  /* alles alte Desktop-Geraffel aus */
  .main-sidebar,
  .desktop-media-grid,
  .reco-wrapper,
  .service-info-wrapper,
  .breadcrumbs-wrapper,
  .product-purchase-block {
    display: none !important;
  }

  /* 2 Spalten, je 50% */
  .product-desktop-wrapper {
    display: flex !important;
    width: 100% !important;
    min-height: calc(100vh - 90px) !important;
    padding: 0 !important;
    gap: 0 !important;
  }

  /* ===== LINKES PANEL (BILD) ===== */
  .desktop-media-stack {
    flex: 0 0 50vw !important;
    max-width: 50vw !important;
    min-height: calc(100vh - 90px) !important;
    background: #e2e2e2 !important; /* Heliot-Grau */
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    margin: 0 !important;
    padding: 0 !important;
    position: relative !important;
  }

  /* nur das erste Media zeigen */
  .desktop-media-stack .media-item {
    display: none !important;
  }
  .desktop-media-stack .media-item--primary {
    display: block !important;
    width: 100% !important;
    max-width: 460px !important;
    margin: 0 auto !important;
    background: transparent !important;
  }
  .desktop-media-stack .media-item--primary img,
  .desktop-media-stack .media-item--primary video {
    width: 100% !important;
    height: auto !important;
    object-fit: contain !important;
    background: transparent !important;
  }

  /* ===== RECHTES PANEL (INFO) ===== */
  .desktop-info {
    flex: 0 0 50vw !important;
    max-width: 50vw !important;
    background: #fff !important;
    padding: 48px 64px 80px 64px !important;
    display: flex !important;
    flex-direction: column !important;
    gap: 20px !important;
    position: static !important;
    top: 0 !important;
    max-height: none !important;
    overflow: visible !important;
  }

  /* Typo wie Heliot */
  .desktop-brand {
    margin: 0 !important;
    font-size: 11px !important;
    text-transform: uppercase;
    letter-spacing: .04em;
  }
  .desktop-title {
    margin: 0 !important;
    font-size: 12px !important;
    text-transform: uppercase;
    line-height: 1.4;
  }
  .desktop-price {
    margin: 4px 0 16px 0 !important;
    font-size: 13px !important;
    font-weight: 400 !important;
  }
  .desktop-price::after {
    content: none !important;
  }

  /* Size-Zeile clean */
  #sizePickerDesktop,
  .size-picker-lg {
    display: flex !important;
    gap: 14px !important;
    margin: 0 0 6px 0 !important;
  }
  .size-btn {
    border: 0 !important;
    background: transparent !important;
    padding: 0 !important;
    font-size: 11px !important;
    text-transform: uppercase;
    letter-spacing: .04em;
  }
  .size-btn.active {
    text-decoration: underline !important;
  }

  /* Button wie Heliot */
  .desktop-info .desktop-add-to-cart,
  .desktop-info .direct-checkout-button,
  .desktop-info .add-to-cart--plain {
    width: 320px !important;
    max-width: 100%;
    background: #fff !important;
    color: #000 !important;
    border: 1px solid #000 !important;
    border-radius: 0 !important;
    padding: 13px 0 !important;
    font-size: 11px !important;
    font-weight: 500 !important;
    text-transform: uppercase !important;
    letter-spacing: .08em !important;
    text-align: center;
  }
  .desktop-info .desktop-add-to-cart:hover,
  .desktop-info .direct-checkout-button:hover,
  .desktop-info .add-to-cart--plain:hover {
    background: #000 !important;
    color: #fff !important;
  }

  /* Accordions unten, vollbreit */
  .desktop-collapse {
    width: 100% !important;
    margin-top: 24px !important;
  }
  .desktop-collapse .collapse-header {
    background: #f5f5f5;
    font-size: 10px !important;
    letter-spacing: .08em;
    text-transform: uppercase;
  }
}
/* === FINAL DESKTOP FIX: full-height 50/50 wie Heliot Emil === */
@media (min-width: 1024px) {

  /* Seite nicht nach unten schieben */
  .desktop-view {
    margin-top: 0 !important;
    padding-top: 0 !important;
  }

  /* Wrapper muss vollhöhe sein */
  .product-desktop-wrapper {
    display: flex !important;
    min-height: 100vh !important;
  }

  /* LINKES PANEL (Grau + Produktbild) */
  .desktop-media-stack {
    flex: 0 0 50vw !important;
    max-width: 50vw !important;
    height: 100vh !important;
    min-height: 100vh !important;
    background: #e2e2e2 !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    margin: 0 !important;
    padding: 0 !important;
  }
  .desktop-media-stack .media-item { display: none !important; }
  .desktop-media-stack .media-item--primary {
    display: block !important;
    width: 100% !important;
    max-width: 460px !important;
  }
  .desktop-media-stack .media-item--primary img,
  .desktop-media-stack .media-item--primary video {
    width: 100% !important;
    height: auto !important;
    object-fit: contain !important;
  }

  /* RECHTES PANEL (Info) – auch 100vh */
  .desktop-info {
    flex: 0 0 50vw !important;
    max-width: 50vw !important;
    height: 100vh !important;
    min-height: 100vh !important;
    background: #fff !important;
    padding: 48px 64px 80px 64px !important;
    display: flex !important;
    flex-direction: column !important;
    gap: 20px !important;
    overflow-y: auto;
  }
}
/* === OVERRIDE: Linke Hälfte ohne grauen Hintergrund + Bild auf 50vw === */
@media (min-width: 1024px) {

  /* Panel selbst: kein Grau mehr */
  .desktop-media-stack {
    background: transparent !important;
    flex: 0 0 50vw !important;
    max-width: 50vw !important;
    height: 100vh !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    margin: 0 !important;
    padding: 0 !important;
  }

  /* nur das erste Bild zeigen */
  .desktop-media-stack .media-item { display: none !important; }
  .desktop-media-stack .media-item--primary {
    display: block !important;
    width: 100% !important;
    height: 100vh !important;
    margin: 0 !important;
  }

  /* Bild selbst auf volle linke Hälfte ziehen */
  .desktop-media-stack .media-item--primary img,
  .desktop-media-stack .media-item--primary video {
    width: 100% !important;      /* füllt 50vw */
    height: 100vh !important;     /* füllt Höhe */
    object-fit: cover !important; /* damit kein Rand bleibt */
    display: block !important;
    background: transparent !important;
  }
}
/* === DESKTOP: Bild füllt linken 50%-Container komplett === */
@media (min-width: 1024px) {
  .desktop-media-stack {
    flex: 0 0 50vw !important;
    max-width: 50vw !important;
    height: 100vh !important;
    position: relative !important;
    overflow: hidden !important;   /* nix rausgucken lassen */
  }

  .desktop-media-stack .media-item { display: none !important; }

  .desktop-media-stack .media-item--primary {
    display: block !important;
    width: 100% !important;
    height: 100% !important;
  }

  .desktop-media-stack .media-item--primary img,
  .desktop-media-stack .media-item--primary video {
    width: 100% !important;
    height: 100% !important;
    object-fit: cover !important;  /* Container komplett füllen */
    object-position: center center !important;
    display: block !important;
  }
}
/* =========================================================
   DESKTOP LAYOUT = HELIOT EMIL (ahrensandco)
   ========================================================= */
@media (min-width: 1024px) {

  /* alles alte Desktop-Geraffel weg */
  .main-sidebar,
  .desktop-media-grid,
  .reco-wrapper,
  .service-info-wrapper,
  .breadcrumbs-wrapper,
  #limitedNotice {
    display: none !important;
  }

  /* 2 Spalten, 50 / 50, volle Höhe */
  .desktop-view {
    margin-top: 0 !important;
    padding-top: 0 !important;
    background: #fff !important;
  }
  .product-desktop-wrapper {
    display: flex !important;
    width: 100% !important;
    min-height: 100vh !important;
    padding: 0 !important;
    gap: 0 !important;
  }

  /* ===== LINKE SPALTE (GRAU + PRODUKT) ===== */
  .desktop-media-stack {
    flex: 0 0 50vw !important;
    max-width: 50vw !important;
    height: 100vh !important;
    background: #e4e4e4 !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    margin: 0 !important;
    padding: 0 !important;
    overflow: hidden !important;
    position: relative !important;
  }
  /* nur das erste Medien-Item anzeigen */
  .desktop-media-stack .media-item { display: none !important; }
  .desktop-media-stack .media-item--primary {
    display: block !important;
    width: 100% !important;
    height: 100% !important;
    max-width: none !important;
  }
  /* Bild füllt den linken Block */
  .desktop-media-stack .media-item--primary img,
  .desktop-media-stack .media-item--primary video {
    width: 100% !important;
    height: 100% !important;
    object-fit: cover !important;
    object-position: center center !important;
    display: block !important;
    background: transparent !important;
  }

  /* ===== RECHTE SPALTE (INFO) ===== */
  .desktop-info {
    flex: 0 0 50vw !important;
    max-width: 50vw !important;
    height: 100vh !important;
    background: #fff !important;
    padding: 48px 64px 80px 64px !important;
    display: flex !important;
    flex-direction: column !important;
    gap: 20px !important;
    overflow-y: auto !important;
    position: relative !important;
    top: 0 !important;
  }

  /* Typo wie Heliot */
  .desktop-brand {
    margin: 0 !important;
    font-size: 11px !important;
    text-transform: uppercase;
    letter-spacing: .04em;
  }
  .desktop-title {
    margin: 0 !important;
    font-size: 12px !important;
    text-transform: uppercase;
    line-height: 1.4;
  }
  .desktop-price {
    margin: 4px 0 16px 0 !important;
    font-size: 13px !important;
    font-weight: 400 !important;
  }
  .desktop-price::after { content: none !important; }

  /* Size-Reihe: nur Text, underline bei active */
  #sizePickerDesktop,
  .size-picker-lg {
    display: flex !important;
    gap: 14px !important;
    margin: 0 0 6px 0 !important;
  }
  .size-btn {
    border: 0 !important;
    background: none !important;
    padding: 0 !important;
    font-size: 11px !important;
    text-transform: uppercase;
    letter-spacing: .04em;
    cursor: pointer;
  }
  .size-btn.active {
    text-decoration: underline !important;
  }

  /* ===== CTA: nur 1 Button wie Heliot ===== */
  /* alles außer dem 1. Button ausblenden */
  .desktop-info .shopify-payment-button,
  .desktop-info .shopify-payment-button__button,
  .desktop-info .direct-checkout-button,
  .desktop-info .add-to-cart--plain:nth-of-type(n+2),
  .desktop-info .btn--secondary {
    display: none !important;
  }

  /* erster ATC-Button */
  .desktop-info .desktop-add-to-cart,
  .desktop-info .add-to-cart,
  .desktop-info .product-form__submit {
    width: 320px !important;
    max-width: 100%;
    background: #fff !important;
    color: #000 !important;
    border: 1px solid #000 !important;
    border-radius: 0 !important;
    padding: 13px 0 !important;
    font-size: 11px !important;
    font-weight: 500 !important;
    text-transform: uppercase !important;
    letter-spacing: .08em !important;
    text-align: center;
  }
  .desktop-info .desktop-add-to-cart:hover,
  .desktop-info .add-to-cart:hover,
  .desktop-info .product-form__submit:hover {
    background: #000 !important;
    color: #fff !important;
  }

  /* Metainfo klein drunter */
  .ct-notice,
  .price-note-desktop,
  .price-included-notice {
    font-size: 10px !important;
    letter-spacing: .04em;
    text-transform: uppercase;
    margin-top: 4px !important;
  }

  /* ===== Akkordeon wie Heliot: flache Reihen ===== */
  .desktop-collapse,
  .product-tabs,
  .product__accordion {
    width: 100% !important;
    margin-top: 24px !important;
  }
  .desktop-collapse .collapse-item,
  .product__accordion .accordion__item {
    border-top: 1px solid rgba(0,0,0,.08);
  }
  .desktop-collapse .collapse-header,
  .product__accordion .accordion__title {
    background: #f5f5f5;
    font-size: 10px !important;
    text-transform: uppercase;
    letter-spacing: .08em;
    padding: 12px 0 !important;
  }

  /* Sachen, die Heliot nicht zeigt */
  .estimated-delivery,
  .delivery-estimate,
  .product-extra-meta {
    display: none !important;
  }
}
/* === HARD OVERRIDE: Bild links randlos, 50vw × 100vh === */
@media (min-width: 1024px) {

  /* linker Bereich = 50% Viewport, kein Padding */
  .desktop-view .product-desktop-wrapper,
  .product-desktop-wrapper {
    display: flex !important;
    gap: 0 !important;
  }

  .desktop-media-stack {
    flex: 0 0 50vw !important;
    max-width: 50vw !important;
    width: 50vw !important;
    height: 100vh !important;
    overflow: hidden !important;
    margin: 0 !important;
    padding: 0 !important;
    background: transparent !important;
    position: relative !important;
  }

  /* ALLES drin erstmal neutralisieren */
  .desktop-media-stack *,
  .desktop-media-stack *::before,
  .desktop-media-stack *::after {
    max-width: none !important;
    max-height: none !important;
    margin: 0 !important;
    padding: 0 !important;
    border: 0 !important;
    box-sizing: border-box;
  }

  /* alte Positions-Tricks killen */
  .desktop-media-stack .media-item,
  .desktop-media-stack .media-item--primary,
  .desktop-media-stack figure,
  .desktop-media-stack picture {
    position: static !important;
    inset: auto !important;
    width: 100% !important;
    height: 100% !important;
    display: block !important;
  }

  /* das eigentliche Bild: FÜLLEN */
  .desktop-media-stack img,
  .desktop-media-stack video {
    width: 100% !important;
    height: 100% !important;
    object-fit: cover !important;
    object-position: center center !important;
    display: block !important;
  }

  /* falls Shopify ein wrapper-div setzt */
  .desktop-media-stack > div:first-child {
    width: 100% !important;
    height: 100% !important;
  }

  /* rechte Spalte bleibt 50% */
  .desktop-info {
    flex: 0 0 50vw !important;
    max-width: 50vw !important;
    width: 50vw !important;
    height: 100vh !important;
    overflow-y: auto !important;
    background: #fff !important;
  }
}
/* === DESKTOP: alle Produktbilder im 4:5-Format, zentriert === */
@media (min-width: 1024px) {

  /* linker Bereich bleibt 50% breit, nur zum Zentrieren */
  .desktop-media-stack {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    flex: 0 0 50vw !important;
    max-width: 50vw !important;
    height: 100vh !important;
    overflow: hidden !important;
    background: transparent !important;
  }

  /* nur das erste Desktop-Media nutzen */
  .desktop-media-stack .media-item { display: none !important; }
  .desktop-media-stack .media-item--primary {
    display: block !important;
  }

  .desktop-media-stack .media-item--primary img,
  .desktop-media-stack .media-item--primary video {
    aspect-ratio: 4 / 5;                                 /* 4:5 erzwingen */
    height: min(88vh, calc(50vw * 1.25)) !important;     /* nie höher als viewport, sonst nach Breite */
    width: auto !important;                              /* Breite aus Höhe berechnet (4:5) */
    object-fit: cover !important;
    object-position: center center !important;
    display: block !important;
  }
}
/* === DESKTOP: Produktfoto stärker reinzoomen === */
@media (min-width: 1024px) {
  .desktop-media-stack {
    overflow: hidden !important;
  }

  .desktop-media-stack .media-item--primary img,
  .desktop-media-stack .media-item--primary video {
    width: 100% !important;
    height: 100% !important;
    object-fit: cover !important;
    /* Zoom-Faktor hier einstellen */
    transform: scale(1.45) !important;
    transform-origin: center 35% !important; /* etwas nach oben schieben */
    display: block !important;
  }
}
/* === DESKTOP: linker Bereich 1:1 zentriert === */
@media (min-width: 1024px) {

  /* linker Block bleibt 50% breit & 100vh hoch */
  .desktop-media-stack {
    flex: 0 0 50vw !important;
    max-width: 50vw !important;
    height: 100vh !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    overflow: hidden !important;
    background: transparent !important;
  }

  /* nur erstes Bild anzeigen */
  .desktop-media-stack .media-item { display: none !important; }
  .desktop-media-stack .media-item--primary {
    display: block !important;
    width: min(50vw, 80vh) !important;   /* Quadrat soll reinpassen */
    height: min(50vw, 80vh) !important;  /* 1:1 */
  }

  /* Bild selbst = 1:1 und mittig */
  .desktop-media-stack .media-item--primary img,
  .desktop-media-stack .media-item--primary video {
    width: 100% !important;
    height: 100% !important;
    object-fit: cover !important;
    object-position: center center !important;
    transform: none !important;          /* alten Zoom killen */
  }
}
/* === DESKTOP: 1:1 aber größer + leicht gezoomt === */
@media (min-width: 1024px) {
  .desktop-media-stack {
    overflow: hidden !important;
    justify-content: center !important;
    align-items: center !important;
  }

  /* Quadrat etwas größer als 50vw, aber durch Panel gecropt */
  .desktop-media-stack .media-item--primary {
    width: min(56vw, 90vh) !important;
    height: min(56vw, 90vh) !important;
  }

  .desktop-media-stack .media-item--primary img,
  .desktop-media-stack .media-item--primary video {
    width: 100% !important;
    height: 100% !important;
    object-fit: cover !important;
    object-position: center center !important;
    transform: scale(1.12) !important;   /* hier größer/kleiner machen */
  }
}
@media (min-width: 1024px) {
  .desktop-media-stack .media-item--primary img,
  .desktop-media-stack .media-item--primary video {
    transform: translateY(-4%) scale(1.12) !important;
    transform-origin: center top !important;
  }
}
@media (min-width: 1024px) {
  .desktop-media-stack .media-item--primary img,
  .desktop-media-stack .media-item--primary video {
    transform: translateY(-15%) scale(1.12) !important;
    transform-origin: center top !important;
  }
}
/* === DESKTOP: alle Produktbilder anzeigen (gestapelt) === */
@media (min-width: 1024px) {

  .desktop-media-stack {
    flex: 0 0 50vw !important;
    max-width: 50vw !important;
    height: 100vh !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    gap: 0 !important;
    overflow-y: auto !important;   /* scrollen, falls viele Bilder */
    overflow-x: hidden !important;
  }

  /* NICHTS mehr verstecken */
  .desktop-media-stack .media-item,
  .desktop-media-stack .media-item--primary {
    display: block !important;
    width: min(56vw, 90vh) !important;
    height: min(56vw, 90vh) !important;
  }

  /* alle Bilder gleich behandeln */
  .desktop-media-stack .media-item img,
  .desktop-media-stack .media-item video {
    width: 100% !important;
    height: 100% !important;
    object-fit: cover !important;
    object-position: center top !important;
    transform: translateY(-12%) scale(1.12) !important; /* wie eben */
    transform-origin: center top !important;
    display: block !important;
  }
}
/* === DESKTOP: alle Medien im 4:5-Format, sauber zentriert === */
@media (min-width: 1024px) {

  .desktop-media-stack {
    flex: 0 0 50vw !important;
    max-width: 50vw !important;
    height: 100vh !important;
    display: flex !important;
    flex-direction: column !important;
    gap: 0 !important;
    align-items: center !important;
    overflow-y: auto !important;
    overflow-x: hidden !important;
    background: transparent !important;
  }

  /* JEDES Desktop-Media = 4:5 */
  .desktop-media-stack .media-item,
  .desktop-media-stack .media-item--primary {
    width: min(50vw, 80vh) !important;      /* Breite begrenzen */
    aspect-ratio: 4 / 5 !important;         /* 4:5 erzwingen   */
    height: auto !important;
    position: relative !important;
  }

  /* Bild/Video füllt 4:5 komplett */
  .desktop-media-stack .media-item img,
  .desktop-media-stack .media-item video,
  .desktop-media-stack .media-item--primary img,
  .desktop-media-stack .media-item--primary video {
    width: 100% !important;
    height: 100% !important;
    object-fit: cover !important;
    object-position: center center !important;
    transform: none !important;             /* Zoom/Shift killen */
  }
}
/* === DESKTOP: erstes Produktbild strikt 4:5 === */
@media (min-width: 1024px) {

  /* erstes Bild im Stack (meist dein Freisteller) */
  .desktop-media-stack > .media-item:first-child,
  .desktop-media-stack > .media-item--primary {
    width: min(50vw, 80vh) !important;
    height: calc(min(50vw, 80vh) * 1.25) !important; /* 4:5 */
    position: relative !important;
  }

  .desktop-media-stack > .media-item:first-child img,
  .desktop-media-stack > .media-item--primary img,
  .desktop-media-stack > .media-item:first-child video,
  .desktop-media-stack > .media-item--primary video {
    width: 100% !important;
    height: 100% !important;
    object-fit: cover !important;
    object-position: center center !important;
    transform: none !important;
  }
}
/* === DESKTOP: erstes Bild füllt linken Bereich randlos (4:5) === */
@media (min-width: 1024px) {

  /* linker Slot ist 50vw breit */
  .desktop-media-stack {
    flex: 0 0 50vw !important;
    max-width: 50vw !important;
    overflow: hidden !important;
  }

  /* erstes Bild = exakt 50vw breit, 4:5 hoch */
  .desktop-media-stack > .media-item:first-child,
  .desktop-media-stack > .media-item--primary {
    width: 50vw !important;
    height: calc(50vw * 1.25) !important; /* 4:5 = 1.25 */
  }

  .desktop-media-stack > .media-item:first-child img,
  .desktop-media-stack > .media-item--primary img,
  .desktop-media-stack > .media-item:first-child video,
  .desktop-media-stack > .media-item--primary video {
    width: 100% !important;                 /* keine Ränder mehr */
    height: 100% !important;
    object-fit: cover !important;
    object-position: center top !important; /* unten mehr Produkt */
  }
}
/* === DESKTOP: alle Media-Items anzeigen & randlos machen === */
@media (min-width: 1024px) {

  /* linker Bereich: 50% breit, nach unten scrollbar */
  .desktop-media-stack {
    flex: 0 0 50vw !important;
    max-width: 50vw !important;
    width: 50vw !important;
    height: 100vh !important;
    overflow-y: auto !important;
    overflow-x: hidden !important;
    display: flex !important;
    flex-direction: column !important;
    gap: 0 !important;
  }

  /* NICHTS verstecken */
  .desktop-media-stack .media-item,
  .desktop-media-stack .media-item--primary {
    display: block !important;
    width: 50vw !important;
    aspect-ratio: 4 / 5 !important;          /* alle 4:5 */
    height: calc(50vw * 1.25) !important;
  }

  /* Bild/Vid füllt den Slot komplett */
  .desktop-media-stack .media-item img,
  .desktop-media-stack .media-item video,
  .desktop-media-stack .media-item--primary img,
  .desktop-media-stack .media-item--primary video {
    width: 100% !important;
    height: 100% !important;
    object-fit: cover !important;
    object-position: center top !important;
    transform: none !important;              /* alten Zoom killen */
  }
}
/* === DESKTOP: Brand-Text durch Logo ersetzen === */
@media (min-width: 1024px) {
  .desktop-info .desktop-brand {
    font-size: 0 !important;            /* Text ausblenden */
    display: block !important;
    width: 140px;                        /* ggf. anpassen */
    height: 26px;                        /* ggf. anpassen */
    background-image: url("/cdn/shop/files/h_84714d6f-4e92-4980-b90e-1ecfc922591a.png?v=1761146697");
    background-size: contain;
    background-repeat: no-repeat;
    background-position: left center;
    margin: 0 0 6px 0 !important;
  }
}
@media (min-width: 1024px) {
  /* alle möglichen Vendor-Tags auf 0 setzen */
  .desktop-info .desktop-brand,
  .desktop-info .product-vendor,
  .desktop-info .product__vendor,
  .desktop-info .vendor,
  .desktop-info [data-product-vendor] {
    font-size: 0 !important;
    line-height: 0 !important;
    position: relative !important;
    min-height: 28px;
  }

  .desktop-info .desktop-brand::after,
  .desktop-info .product-vendor::after,
  .desktop-info .product__vendor::after,
  .desktop-info .vendor::after,
  .desktop-info [data-product-vendor]::after {
    content: "";
    display: block;
    width: 160px;           /* größer/kleiner machen */
    height: 28px;
    background-image: url("/cdn/shop/files/h_84714d6f-4e92-4980-b90e-1ecfc922591a.png?v=1761146697");
    background-size: contain;
    background-repeat: no-repeat;
    background-position: left center;
  }
}
/* === DESKTOP: Swatch weg + nur 1 ATC === */
@media (min-width: 1024px) {

  /* 1) Farbfeld / Quadrat rechts ausblenden */
  .desktop-info .product-form__input--color,
  .desktop-info .product-form__swatch,
  .desktop-info .color-swatch,
  .desktop-info .swatch,
  .desktop-info .product-options,
  .desktop-info .product-form__option {
    display: none !important;
  }

  /* 2) Express / zweiter ATC weg */
  .desktop-info .shopify-payment-button,
  .desktop-info .shopify-payment-button__button,
  .desktop-info .product-form__buttons .btn:nth-of-type(2),
  .desktop-info .product-form__buttons button:nth-of-type(2),
  .desktop-info .product-form__buttons .add-to-cart--plain:nth-of-type(2) {
    display: none !important;
  }

  /* 3) erster ATC clean wie Heliot */
  .desktop-info .product-form__buttons .btn,
  .desktop-info .desktop-add-to-cart,
  .desktop-info .add-to-cart {
    display: block !important;
    width: 320px !important;
    background: #fff !important;
    color: #000 !important;
    border: 1px solid #000 !important;
    border-radius: 0 !important;
    text-transform: uppercase !important;
    letter-spacing: .08em !important;
  }
  .desktop-info .product-form__buttons .btn:hover,
  .desktop-info .desktop-add-to-cart:hover,
  .desktop-info .add-to-cart:hover {
    background: #000 !important;
    color: #fff !important;
  }
}
@media (min-width: 1024px) {
  .desktop-info .desktop-title {
    font-size: 10px !important;
    line-height: 1.3 !important;
  }
  .desktop-info .desktop-price {
    font-size: 10px !important;
    line-height: 1.3 !important;
    margin-bottom: 12px !important;
  }
}
@media (min-width: 1024px) {
  /* nur den ersten Button zeigen */
  .desktop-info .product-form__buttons > *:not(:first-child),
  .desktop-info form[action*="/cart"] > *:not(:first-child),
  .desktop-info .desktop-add-to-cart + *,
  .desktop-info .add-to-cart + *,
  .desktop-info .shopify-payment-button {
    display: none !important;
  }

  /* erster Button im Heliot-Stil */
  .desktop-info .product-form__buttons > *:first-child,
  .desktop-info .add-to-cart,
  .desktop-info .desktop-add-to-cart {
    display: block !important;
    width: 320px !important;
    background: #fff !important;
    color: #000 !important;
    border: 1px solid #000 !important;
    border-radius: 0 !important;
    text-transform: uppercase !important;
    letter-spacing: .08em !important;
  }
}
@media (min-width: 1024px) {

  /* 1) Ersten Button wieder sichtbar machen */
  .desktop-info .product-form__buttons > *:first-child,
  .desktop-info form[action*="/cart"] > button:first-child {
    display: block !important;
  }

  /* 2) Alle weiteren Buttons ausblenden */
  .desktop-info .product-form__buttons > *:not(:first-child),
  .desktop-info form[action*="/cart"] > button:not(:first-child),
  .desktop-info .shopify-payment-button {
    display: none !important;
  }

  /* 3) Style für den einen Button */
  .desktop-info .product-form__buttons > *:first-child,
  .desktop-info form[action*="/cart"] > button:first-child {
    width: 320px !important;
    background: #fff !important;
    color: #000 !important;
    border: 1px solid #000 !important;
    border-radius: 0 !important;
    text-transform: uppercase !important;
    letter-spacing: .08em !important;
  }

}
/* === DESKTOP: genau 1 Add-to-Cart zeigen === */
@media (min-width: 1024px) {

  /* 1) ersten Button/Senden immer anzeigen */
  .desktop-info form[action*="/cart"] button:first-of-type,
  .desktop-info form[action*="/cart"] input[type="submit"]:first-of-type,
  .desktop-info .product-form__buttons > button:first-of-type,
  .desktop-info .product-form__buttons > input[type="submit"]:first-of-type {
    display: block !important;
    width: 320px !important;
    background: #fff !important;
    color: #000 !important;
    border: 1px solid #000 !important;
    border-radius: 0 !important;
    text-transform: uppercase !important;
    letter-spacing: .08em !important;
  }

  /* 2) alles, was NACH dem ersten kommt, ausblenden */
  .desktop-info form[action*="/cart"] button:first-of-type ~ * ,
  .desktop-info form[action*="/cart"] input[type="submit"]:first-of-type ~ *,
  .desktop-info .product-form__buttons > button:first-of-type ~ *,
  .desktop-info .product-form__buttons > input[type="submit"]:first-of-type ~ *,
  .desktop-info .shopify-payment-button {
    display: none !important;
  }
}
@media (min-width: 1024px) {
  /* im Produkt-Formular: nur den ersten echten ATC lassen */
  .desktop-info form[action*="/cart"] button:not(:first-of-type),
  .desktop-info form[action*="/cart"] input[type="submit"]:not(:first-of-type) {
    display: none !important;
  }
}
/* DESKTOP SIZE PICKER FIX */
@media (min-width: 1024px) {
  .desktop-view .desktop-info #sizePickerDesktop {
    display: flex !important;
    gap: 6px !important;
  }
  .desktop-view .desktop-info #sizePickerDesktop .size-btn {
    width: auto !important;
    flex: 1 1 0 !important;
    display: inline-flex !important;
    justify-content: center;
    align-items: center;
    border: 1px solid #000;
    background: #fff;
    font-size: 10px;
    text-transform: uppercase;
    letter-spacing: .08em;
    padding: 6px 0 5px;
  }
  .desktop-view .desktop-info #sizePickerDesktop .size-btn.active {
    background: #000;
    color: #fff;
  }
  .desktop-view .desktop-info #sizePickerDesktop .size-btn.disabled {
    opacity: .35;
    cursor: not-allowed;
  }
}
@media (min-width: 1024px) {
  .desktop-view .desktop-info #sizePickerDesktop .size-btn {
    border: none !important;
    background: transparent !important;
    border-radius: 0;
  }
  .desktop-view .desktop-info #sizePickerDesktop .size-btn.active {
    background: transparent !important;
    color: #000 !important;
    border-bottom: 1px solid #000 !important;
  }
}
@media (min-width: 1024px) {
  .desktop-view .desktop-info #sizePickerDesktop {
    display: flex;
    width: 100%;
    max-width: 100%;
    margin-bottom: 14px;
    gap: 0;
  }
  .desktop-view .desktop-info #sizePickerDesktop .size-btn {
    flex: 1 1 25%;
    text-align: center;
    border: none !important;
    background: transparent !important;
    padding: 0 0 4px;
  }
  .desktop-view .desktop-info #sizePickerDesktop .size-btn.active {
    border-bottom: 1px solid #000 !important;
  }
  /* falls dein Add-to-cart-Button nicht 100% ist, erzwing’s */
  .desktop-view .desktop-info .desktop-add-to-cart {
    width: 100%;
  }
}
/* === DESKTOP: Size-Bar exakt so breit wie Button ======================= */
@media (min-width: 1024px) {
  /* Container rechts */
  .desktop-view .desktop-info {
    position: relative;
  }

  /* Button-Breite definieren (anpassen wenn du andere Breite willst) */
  .desktop-view .desktop-info .desktop-add-to-cart {
    width: 420px !important;
    max-width: 100%;
  }

  /* Size-Picker auf dieselbe Breite setzen */
  .desktop-view .desktop-info #sizePickerDesktop {
    width: 420px !important;
    max-width: 100%;
    display: flex !important;
    justify-content: space-between;
    gap: 0;
    margin: 0 0 14px 0;
  }

  /* einzelne Größen */
  .desktop-view .desktop-info #sizePickerDesktop .size-btn {
    flex: 1 1 0;
    text-align: center;
    border: none !important;
    background: transparent !important;
    padding: 0 0 4px 0;
  }

  /* aktive Größe markieren */
  .desktop-view .desktop-info #sizePickerDesktop .size-btn.active {
    border-bottom: 1px solid #000 !important;
  }
}
/* DESKTOP: Sizes exakt über dem Button, links = S, rechts = XL */
@media (min-width: 1024px) {
  .desktop-view .desktop-info .desktop-add-to-cart {
    width: 460px !important;
    max-width: 100%;
  }

  .desktop-view .desktop-info #sizePickerDesktop {
    width: 460px !important;        /* gleiche Breite wie Button */
    max-width: 100%;
    display: flex !important;
    justify-content: space-between !important;
    align-items: center;
    gap: 0;
    margin: 0 0 10px 0;
  }

  .desktop-view .desktop-info #sizePickerDesktop .size-btn {
    border: 0 !important;
    background: transparent !important;
    padding: 0;
    font-size: 10px;
    line-height: 1;
  }

  .desktop-view .desktop-info #sizePickerDesktop .size-btn.active {
    border-bottom: 1px solid #000 !important;
  }
}
/* DESKTOP: S M L XL exakt über dem Button */
@media (min-width: 1024px) {

  /* gleiche Breite wie dein Button */
  .desktop-view .desktop-info .desktop-add-to-cart {
    width: 460px !important;
  }

  .desktop-view .desktop-info #sizePickerDesktop {
    width: 460px !important;
    max-width: 460px !important;
    display: flex !important;
    justify-content: space-between !important;
    align-items: center;
    margin: 0 0 10px 0;
  }

  /* ALLE alten Abstände killen */
  .desktop-view .desktop-info #sizePickerDesktop .size-btn {
    margin: 0 !important;
    padding: 0 !important;
    border: 0 !important;
    background: none !important;
    font-size: 10px;
    line-height: 1;
  }

  /* aktive Größe markieren */
  .desktop-view .desktop-info #sizePickerDesktop .size-btn.active {
    border-bottom: 1px solid #000 !important;
  }
}
/* ===== DESKTOP: Size-Row exakt so breit wie ATC ===== */
@media (min-width: 1024px) {

  /* 1) Button auf 100% der Info-Spalte */
  .desktop-view .desktop-info .desktop-add-to-cart {
    width: 100% !important;
    max-width: 100% !important;
    margin: 0 0 12px 0 !important;
  }

  /* 2) Size-Picker direkt darüber, gleiche Breite, zentriert */
  .desktop-view .desktop-info #sizePickerDesktop {
    width: 100% !important;
    max-width: 100% !important;
    margin: 0 0 6px 0 !important;
    display: flex !important;
    justify-content: space-between !important;
    align-items: center !important;
  }

  /* 3) einzelne Labels: keine Ränder, nur Text */
  .desktop-view .desktop-info #sizePickerDesktop .size-btn {
    background: none !important;
    border: 0 !important;
    margin: 0 !important;
    padding: 0 !important;
    font-size: 10px !important;
    line-height: 1 !important;
  }

  /* 4) aktives Label markieren */
  .desktop-view .desktop-info #sizePickerDesktop .size-btn.active {
    border-bottom: 1px solid #000 !important;
  }
}
@media (min-width: 1024px) {
  .desktop-view .desktop-info #sizePickerDesktop {
    margin-left: -65px !important;
    display: flex;
    justify-content: flex-start;
  }

  .desktop-view .desktop-info #sizePickerDesktop .size-btn {
    background: none !important;
    border: 0 !important;
    padding: 0 !important;
    font-size: 10px !important;
    letter-spacing: 0.03em !important; /* enger */
    margin-right: 26px;                /* Abstand zwischen S/M/L/XL */
  }

  .desktop-view .desktop-info #sizePickerDesktop .size-btn:last-child {
    margin-right: 0;
  }
}
@media (min-width: 1024px) {
  /* gleiche Breite wie ATC */
  .desktop-view .desktop-info #sizePickerDesktop {
    width: 460px;
    max-width: 460px;
    margin: 0 0 10px 0;
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 0;
  }

  /* ATC ebenfalls auf 460px, damit es fluchtet */
  .desktop-view .desktop-info .desktop-add-to-cart {
    width: 460px;
    max-width: 460px;
  }

  /* Buchstaben clean */
  .desktop-view .desktop-info #sizePickerDesktop .size-btn {
    background: none !important;
    border: 0 !important;
    padding: 0 !important;
    font-size: 10px !important;
    letter-spacing: 0.04em !important;
  }
}
@media (min-width: 1024px) {
  .desktop-view .desktop-info #sizePickerDesktop {
    width: 460px;
    max-width: 460px;
    margin: -65px 0 10px 0; /* ← 15px nach oben */
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 0;
  }

  .desktop-view .desktop-info .desktop-add-to-cart {
    width: 460px;
    max-width: 460px;
  }

  .desktop-view .desktop-info #sizePickerDesktop .size-btn {
    background: none !important;
    border: 0 !important;
    padding: 0 !important;
    font-size: 10px !important;
    letter-spacing: 0.04em !important;
  }
}
@media (min-width: 1024px) {
  .desktop-view .desktop-info .size-guide-link--desktop {
    margin-top: -15px !important;  /* 15px höher */
    display: inline-block;
  }
}
@media (min-width: 1024px) {
  .desktop-view .desktop-info #sizePickerDesktop .size-btn {
    letter-spacing: 0 !important;     /* oder -0.01em */
  }
}
@media (min-width: 1024px) {
  .desktop-view .desktop-info #sizePickerDesktop .size-btn,
  .desktop-view .desktop-info #sizePickerDesktop button.size-btn,
  .desktop-view .desktop-info #sizePickerDesktop .size-btn.active {
    letter-spacing: 0 !important;
  }
}
@media (min-width: 1024px) {
  /* gemeinsame Breite für Picker + Button */
  .desktop-view .desktop-info #sizePickerDesktop,
  .desktop-view .desktop-info .desktop-add-to-cart {
    max-width: 420px;     /* ggf. auf deine echte Button-Breite anpassen */
    width: 420px;
  }

  .desktop-view .desktop-info #sizePickerDesktop {
    display: flex;
    justify-content: space-between;
    gap: 0;
    margin-left: 0;       /* damit es exakt über dem Button sitzt */
  }

  .desktop-view .desktop-info #sizePickerDesktop .size-btn {
    flex: 0 0 auto;
    background: none;
    border: 0;
    padding: 0;
    font-size: 10px;
    letter-spacing: 0;
  }
}
/* === DESKTOP SIZE PICKER FIX === */
@media (min-width: 1024px) {

  /* 1. Breite des ATC definieren (hier 420px, anpassen falls nötig) */
  .desktop-view .desktop-info {
    --ac-atc-width: 420px;
  }

  /* 2. Picker und Button gleiche Breite */
  .desktop-view .desktop-info #sizePickerDesktop {
    width: var(--ac-atc-width) !important;
    max-width: var(--ac-atc-width) !important;
    display: flex !important;
    justify-content: space-between !important;
    align-items: center !important;
    gap: 0 !important;
    margin-left: 0 !important;
    margin-top: -4px !important; /* wenn du ihn wieder höher willst */
  }

  .desktop-view .desktop-info .desktop-add-to-cart {
    width: var(--ac-atc-width) !important;
    max-width: var(--ac-atc-width) !important;
  }

  /* 3. Buttons selber schlank machen – hier lag dein Problem */
  .desktop-view .desktop-info #sizePickerDesktop .size-btn {
    background: none !important;
    border: 0 !important;
    padding: 0 !important;
    margin: 0 !important;
    font-size: 10px !important;
    letter-spacing: 0 !important;
    line-height: 1 !important;
    min-width: 0 !important;
    width: auto !important;
    flex: 0 0 auto !important;
  }
}
/* default: nicht zeigen */
.desktop-only-reco {
  display: none;
}

@media (min-width: 1024px) {
  .desktop-only-reco {
    display: block;
  }

  .desktop-recommended {
    width: 100%;
    background: #f1f1f1;
    padding: 36px 0 40px;
    margin-top: 48px;
  }
  .desktop-recommended__head {
    max-width: 1180px;
    margin: 0 auto 18px;
    display: flex;
    gap: 6px;
    align-items: baseline;
    font-size: 10px;
    text-transform: uppercase;
    letter-spacing: .04em;
  }
  .desktop-recommended__row {
    max-width: 1180px;
    margin: 0 auto;
    display: flex;
    gap: 22px;
    overflow-x: auto;
    scrollbar-width: none;
  }
  .desktop-recommended__row::-webkit-scrollbar { display: none; }
  .desktop-recommended__item {
    min-width: 170px;
    text-decoration: none;
    color: #000;
  }
  .desktop-recommended__imgwrap {
    width: 170px;
    aspect-ratio: 4 / 5;
    background: #e5e5e5;
    overflow: hidden;
  }
  .desktop-recommended__imgwrap img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
  }
  .desktop-recommended__meta {
    margin-top: 8px;
    font-size: 10px;
    text-transform: uppercase;
    line-height: 1.1;
  }
}
/* === RECO DESKTOP CLEAN === */
@media (min-width: 1024px) {
  .desktop-recommended {
    background: transparent !important;
    padding: 0 !important;
    margin-top: 48px;
  }

  .desktop-recommended__row {
    max-width: 100% !important;
    display: flex;
    gap: 0 !important;            /* kein Spalt */
    overflow-x: auto;
    scrollbar-width: none;
  }
  .desktop-recommended__row::-webkit-scrollbar { display: none; }

  .desktop-recommended__item {
    flex: 0 0 auto;
    width: 210px;                 /* Breite eines Cards */
    border: none;
  }

  .desktop-recommended__imgwrap {
    width: 100%;
    height: 230px;                /* Höhe wie dein grauer Balken */
    background: #f4f4f4;          /* optional: leichtes Grau wie Heliot Emil */
  }
  .desktop-recommended__imgwrap img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
  }

  /* Head oben lassen */
  .desktop-recommended__head {
    margin-bottom: 14px;
  }
}
/* DESKTOP – product recommendations strip */
@media (min-width: 1024px) {
  .ac-recommended-desktop {
    margin-top: 48px;
    padding-bottom: 40px;
    background: #fff;
  }
  .ac-recommended-head {
    font-size: 10px;
    text-transform: uppercase;
    letter-spacing: .02em;
    margin-bottom: 14px;
    padding: 0 20px;
  }
  .ac-recommended-row {
    display: flex;
    gap: 0;
    overflow-x: auto;
    scrollbar-width: none;
  }
  .ac-recommended-row::-webkit-scrollbar {
    display: none;
  }
  .ac-rec-item {
    flex: 0 0 240px;  /* -> größer */
    background: #fff;
  }
  .ac-rec-media {
    display: block;
    width: 100%;
    aspect-ratio: 2 / 3;      /* = 4:6 */
    overflow: hidden;
  }
  .ac-rec-media img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
  }
  .ac-rec-title,
  .ac-rec-price {
    font-size: 10px;
    text-transform: uppercase;
    margin: 6px 20px 0;
    line-height: 1.1;
  }
}

/* mobile soll nix sehen */
@media (max-width: 1023px) {
  .ac-recommended-desktop {
    display: none;
  }
}
@media (min-width: 1024px) {
  .ac-recommended-desktop {
    margin-top: 2px; /* vorher 48px */
  }
}
@media (min-width: 1024px) {
  .ac-recommended-desktop {
    margin-top: -100px;   /* enger ran */
  }
}