/** 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;
  }
}