/** Shopify CDN: Minification failed

Line 211:3 Unexpected "/"

**/
 :root {
    --black: #111;
    --white: #fff;
    --cream: #f7f5f0;
    --cream-dark: #eeebe4;
    --border: #e0ddd6;
    --text-muted: #888;
    --text-label: #aaa;
    --accent: #111;
    --panel-w: 360px;
    --header-h: 110px;
  }

  
  /* ── QR MODAL ─────────────────────────────────────────────── */
  .qr-modal {
    display: none;
    position: fixed;
    inset: 0;
    z-index: 100;
    background: rgba(0,0,0,0.45);
    align-items: center;
    justify-content: center;
  }
  .qr-modal.open { display: flex; }
  
  .qr-modal__box {
    background: var(--cream);
    padding: 40px;
    max-width: 340px;
    width: 90%;
    text-align: center;
    position: relative;
  }
  .qr-modal__close {
    position: absolute;
    top: 14px; right: 16px;
    font-size: 20px;
    cursor: pointer;
    color: var(--text-muted);
    background: none;
    border: none;
    line-height: 1;
  }
  .qr-modal__title {
  
    font-size: 22px;
    font-weight: 300;
    margin-bottom: 6px;
  }
  .qr-modal__sub {
    font-size: 10px;
    letter-spacing: 0.12em;
    color: var(--text-muted);
    margin-bottom: 24px;
  }
  .qr-modal__code {
    width: 250px;
    height: 250px;
    margin: 0 auto 20px;
    background: var(--white);
    border: 1px solid var(--border);
    display: flex;
    align-items: center;
    justify-content: center;
  }
  .qr-modal__code svg { width: 148px; height: 148px; }
  .qr-modal__hint {
    font-size: 9px;
    letter-spacing: 0.1em;
    color: var(--text-muted);
  }



  /* ── OPEN BUTTON ──────────────────────────────────────────── */
  .clx-gallery .clx-btn {
    display: inline-flex;
    align-items: center;
    gap: .5rem;
    padding: .75rem 2rem;
    justify-content: center;
    border: 1px solid #0d740e;
    color:#0d740e;
    background:white;
    width:100%;
    cursor: pointer;
    font-family: var(--typeHeaderPrimary);
    font-weight: 300;
    font-size:16px;
  }

  /* ── DIALOG = FULLSCREEN ──────────────────────────────────── */
  .clx-gallery .clx-dialog {
    width: 100vw;
    height: 100vh;
    max-width: 100vw;
    max-height: 100vh;
    border: none;
    border-radius: 0;
    padding: 0;
    overflow: auto; /* FIX: war hidden, Panel konnte nicht scrollen */
    margin: 0;
  }
  .clx-gallery .clx-dialog::backdrop { background: rgba(0,0,0,.85); }

  /* ── WRAPPER ──────────────────────────────────────────────── */
  .clx-configurator-wrap {
    width: 100vw;
    height: 100vh;
    padding:2rem;
    overflow: hidden;
    display: flex;
    flex-direction: column;
  }


  /* ── HEADER ───────────────────────────────────────────────── */
  .header {
    position: relative;
    background: var(--cream);
    border-bottom: 1px solid var(--border);
    flex-shrink: 0;
  }
  .header__back {
    font-size: 10px;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    color: var(--text-muted);
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    margin-bottom: 10px;
    transition: color .2s;
  }
  .header__back:hover { color: var(--black); }
  .header__back svg { width: 14px; height: 14px; }

  #closeModal {
    width: 35px;
    height: 35px;
    border: 1px solid black;
    border-radius: 50px;
    background-color: white;
    color:black;
    position: absolute;
    top: 50%;
    right: 0px;
    transform: translateY(-50%);
    cursor: pointer;
    font-size: 13px;
    padding:0!important;
  }

  .header__title {

    font-size: 40px;
    font-weight: 300;
    letter-spacing: -0.01em;
    line-height: 1;
  }
  .header__sub {
    font-size: 11px;
    letter-spacing: 0.12em;
    color: var(--text-muted);
    margin-top: 6px;
  }

  /* ── MAIN LAYOUT ──────────────────────────────────────────── */
  .configurator {
    display: grid;
    grid-template-columns: 1fr var(--panel-w);
    flex: 1;
    min-height: 0; /* FIX: erlaubt grid in flex-child zu schrumpfen */
    height: calc(100vh - var(--header-h));
  }

 
/* ── AR / QR LAUNCH BUTTONS (im Viewer) ──────────────────── */
.ar-launch-btn,
.qr-launch-btn {
  display: none; /* via JS gesteuert */
  bottom: 20px;
  left: 50%;
  align-items: center;
  gap: 8px;
  padding: 10px 20px;
  background: rgba(255,255,255,0.92);
  border: 1px solid #e0ddd6;
  font-size: 16px;
  color:#505050;
  cursor: pointer;
  backdrop-filter: blur(6px);
  white-space: nowrap;
  z-index: 10;
  padding-left:40px;
  border-radius: 2px;
  transition: background .2s, border-color .2s;
      font-family: var(--font-body-family);
}
.ar-launch-btn:hover,
.qr-launch-btn:hover {
  background: #fff;
  border-color: #aaa;
} */



  /* ── BUTTONS ──────────────────────────────────────────────── */
   #addCart.btn {
    width: 100%;
    padding: 15px;
    font-family: 'Jost', sans-serif;
    font-size: 10px;
    letter-spacing: 0.22em;
    text-transform: uppercase;
    cursor: pointer;
    transition: background .2s, color .2s, border-color .2s;
    display: block;
    text-align: center;
    margin-bottom: 8px;
  }
  .btn--primary {
    background: var(--colorBtnPrimary) var(--urlButtonArrowPng) no-repeat 150% 35%;;
    color: var(--white) !important;
    border: 1px solid var(--black);
  }
  .btn--primary:hover { background: #2a2a2a; }
  .btn--secondary {
    background: transparent;
    color: var(--black);
    border: 1px solid var(--border);
  }
  .btn--secondary:hover { border-color: var(--black); }



 
    *, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }



    .layout {
      display: flex;
      gap: 1rem;
      flex: 1;
      min-height: 0;
       flex-direction: row;
    }

    /* 70% Viewer */
    .viewer-wrap {
      flex: 0 0 70%;
      border-radius: 14px;
      overflow: hidden;
      background: #f8f7f5;
      border: 0.5px solid rgba(0,0,0,0.09);
    }

    model-viewer {
      width: 100%;
      height: 100%;
      min-height: 520px;
      --progress-bar-color: #888;
    }

    /* 30% Sidebar */
    .sidebar {
      flex: 1;
      display: flex;
      flex-direction: column;
      gap: 1rem;
    }

    .panel {
      background: #fff;
      border-radius: 4px;
      border: 0.5px solid rgba(0,0,0,0.09);
      padding: 1.125rem 1.25rem;
    }

    .section-label {
      font-size: 10px;
      font-weight: 500;
      letter-spacing: 0.09em;
      text-transform: uppercase;
      color: #999;
      margin-bottom: 10px;
    }

    /* Variant buttons */
    .variant-group { display: flex; gap: 8px; }

    .variant-btn {
      display: flex;
      align-items: center;
      gap: 9px;
      padding: 9px 14px;
      border-radius: 4px;
      border: 0.5px solid rgba(0,0,0,0.14);
      background: #fff;
      cursor: pointer;
      font-size: 13px;
      color: #505050;
      transition: border-color 0.15s, background 0.15s;
      flex: 1;
      font-weight: 300; 
    }
    .variant-btn:hover { background: #f4f3f0; border-color: rgba(0,0,0,0.24); }
    .variant-btn.active { border: 1.5px solid #1a1a1a; font-weight: 600; }

    .swatch {
      width: 18px; height: 18px;
      border-radius: 50%;
      border: 0.5px solid rgba(0,0,0,0.13);
      flex-shrink: 0;
    }
    .swatch-grau  { background: #8e8e8e; }
    .swatch-beige { background: #c9b99a; }

    /* Animation buttons */
    .animation-group { display: flex; flex-direction: column; gap: 7px; }

    .anim-btn {
      display: flex;
      align-items: center;
      padding: 9px 12px;
      border-radius: 4px;
      border: 0.5px solid rgba(0,0,0,0.12);
      background: #fff;
      cursor: pointer;
      font-size: 13px;
      color: #505050;
      transition: background 0.15s, border-color 0.15s;
      text-align: left;
    }
    .anim-btn:hover { background: #f4f3f0; border-color: rgba(0,0,0,0.22); }
    .anim-btn.active { border: 1.5px solid #1a1a1a; background: #f4f3f0; font-weight: 500; }

    .anim-icon {
      width: 26px; height: 26px;
      border-radius: 4px;
      background: #efefef;
      display: flex; align-items: center; justify-content: center;
      flex-shrink: 0;
      transition: background 0.15s;
    }
    
    .anim-icon-light { display: block; }
    .anim-icon-dark  { display: none; }
    .anim-btn.active .anim-icon-light { display: none; }
    .anim-btn.active .anim-icon-dark  { display: block; }
    .anim-name { flex: 1; padding: 0 10px;   font-family:var(--font-body-family); }

    /* Stop button */
    .stop-btn {
      width: 100%;
      padding: 9px;
      border-radius: 4px;
      border: 0.5px solid rgba(0,0,0,0.12);
      background: #fff;
      cursor: pointer;
      font-size: 13px;
      color: #555;
      transition: background 0.15s;
    }
    .stop-btn:hover { background: #f4f3f0; }
    .stop-btn:disabled { opacity: 0.32; cursor: default; }

    .spacer { flex: 1; }
/* ── MOBILE ─────────────────────────────────────────────────── */
@media (max-width: 768px) {

  /* Dialog nimmt vollen Screen ein */
  .clx-gallery .clx-dialog {
    width: 100vw;
    height: 100vh;
    overflow-x: hidden;
    overflow-y: auto;
    box-sizing: border-box;
  }

  /* Wrap als flex-column, kein overflow hidden */
  .clx-configurator-wrap {
    width: 100%;
    height: auto;
    min-height: 100vh;
    padding: 2rem;
    overflow-x: hidden;
    display: flex;
    flex-direction: column;
    box-sizing: border-box;
  }

  /* Header: fest oben, slim */
  .header {
    position: relative;
    top: 0; left: 0; right: 0;
    z-index: 30;
    padding: 10px 16px 8px;
    border-bottom: 1px solid #e0ddd6;
    background: #f4f3f0;
    display: flex;
    align-items: center;
    justify-content: space-between;
    box-sizing: border-box;
  }

  #header h1 {
    font-size: 20px;
    font-weight: 300;
  }

 

  /* Layout: column, kein festes height */
  .layout {
    flex-direction: column;
    height: auto;
    gap: 0;
    width: 100%;
    box-sizing: border-box;
  }

  /* Viewer: fixed direkt unter dem Header */
  .viewer-wrap {
    
    top: 52px; left: 0; right: 0;
    height: 42vh;
    z-index: 20;
    flex: none;
    border-radius: 4px;
    box-sizing: border-box;
  }

  model-viewer {
    width: 100%;
    height: 100%;
    min-height: unset;
  }

  /* Sidebar: scrollt natürlich unterhalb von Header + Viewer */
  .sidebar {
   
    flex: none;
    width: 100%;
    display: flex;
    flex-direction: column;
    gap: 0;
    box-sizing: border-box;
  }

  /* Panels: volle Breite, padding wie Referenz */
  .panel {
     margin-top:20px;
    width: 100%;
    border-radius: 4px;
    border: 1px solid #e0ddd6;
    box-sizing: border-box;
  }

  /* Variant-Buttons: je 50% nebeneinander */
  .variant-group {
    flex-wrap: wrap;
    gap: 8px;
  }
  .variant-btn {
    flex: 1 1 calc(50% - 4px);
    box-sizing: border-box;
   font-family:var(--font-body-family);
  }

  /* Anim-Buttons: volle Breite */
  .anim-btn,
  .stop-btn {
    width: 100%;
    box-sizing: border-box;
  }

  /* Spacer weg auf Mobile */
  .spacer {
    display: none;
  }

  .ar-launch-btn,
.qr-launch-btn {
  padding-left: 40px!important;
  margin-top:20px!important;

}
}