/* Media Queries
--------------------------------------------- */

.otgs-development-site-front-end {
  display:none;
}

	@media only screen and (min-width : 320px) {

    #noos-configurator-root {
      /* full-height canvas; padding keeps content away from edges */
      padding: 1rem;
      width:90%;
      height: 100vh;
      box-sizing: border-box;
      display:flex;
    }

    .nc-legal {
      display:none;
    }

    /* two-column shell */
    .nc-shell {
      display: flex;
      align-items: stretch;
      gap: 40px;
      height: 100%;
    }

    /* LEFT: Sidebar with categories */
    .nc-categories {
      min-width: 280px;
      width: 340px;
      display: flex;
      flex-direction: column;
      gap: 16px;
      overflow: auto;        /* if categories overflow, scroll just the sidebar */
      margin:70px 0 0 0!important;
    }

    /* Accordion (drawers) */
    .nc-accordion { 
      padding:60px 0 0 0;
     }

    .nc-acc-item {
      background: transparent;
      border: 1px solid rgba(255,255,255,1);
      border-radius: 0;
      overflow: hidden;
    }

    /* Header button */
    .nc-acc-btn {
      width: 100%;
      display: flex;
      justify-content: space-between;
      align-items: center;
      gap: 12px;
      padding: 15px 20px 15px 20px;
      background: transparent;
      border: 0;
      color: #fff;
      cursor: pointer;
      text-align: left;
      position: relative;
    }

    .nc-acc-btn[aria-expanded="true"] {
      background: #fff;
      color:#000;
    }

    .nc-acc-btn:focus { outline: 2px solid rgba(37,99,235,0.7); outline-offset: 2px; }

    .nc-acc-title { font-size: 14px; font-weight: 600; }

    .nc-acc-summary {
      font-size: 13px;
      opacity: 0.85;
      max-width: 55%;
      white-space: nowrap;
      overflow: hidden;
      text-overflow: ellipsis;
    }

    /* Chevron indicator */
    .nc-acc-btn::after {
      content: '';
      display: inline-block;
      width: 8px; height: 8px;
      border-right: 2px solid currentColor;
      border-bottom: 2px solid currentColor;
      transform: rotate(-45deg);
      margin-left: 8px;
      opacity: 0.9;
    }
    .nc-acc-btn[aria-expanded="true"]::after {
      transform: rotate(45deg);
    }

    /* Panel content */
    .nc-acc-panel {
      padding: 4px 12px 14px 12px;
      border-top: 1px solid rgba(255,255,255,0.08);
      background: rgba(255,255,255,1);
    }

    /* Expand/Collapse control (desktop shown via media query below, but safe default) */
    .nc-acc-controls {
      display: flex;
      justify-content: flex-end;
      margin: 0 0 8px 0;
    }
    .nc-acc-toggle {
      background: rgba(255,255,255,0.08);
      border: 1px solid rgba(255,255,255,0.18);
      color: #fff;
      padding: 8px 10px;
      font-size: 12px;
      border-radius: 8px;
      cursor: pointer;
    }
    .nc-acc-toggle:hover { filter: brightness(1.1); }

    /* Category block and option buttons */
    .nc-category { margin: 10px 0 16px; }
    .nc-category h3 { margin: 0 0 10px; font-size: 18px; font-weight: 600; }

    .nc-options {
      display: flex;
      flex-wrap: wrap;
      gap: 8px;
      margin-top: 6px;
    }

    .nc-option-btn {
      padding: 7px 15px;
      border: 1px solid #007096;
      background:rgba(255,255,255,.5);
      color: #000; 
      border-radius: 90px;
      cursor: pointer;
      font-size:14px!important;
    }

    /* Two‑tone color swatches */
    .nc-color-btn {
      padding: 6px!important;                      /* tighter padding around circle */
      background: transparent;
      border: 1px solid rgba(0,112,150,0.4);
      border-radius: 999px;               /* pill around the circle */
      display: inline-flex;
      align-items: center;
      justify-content: center;
      min-width: 0;                       /* avoid enlarging the button */
    }
    .nc-color-btn.selected { border-color: #007096; }
    .nc-color-btn.disabled { opacity: .45; cursor: not-allowed; }

    .nc-color-swatch {
      width: 32px;
      height: 32px;
      border-radius: 50%;
      display: block;
      border: 1px solid rgba(255,255,255,.85);
      box-shadow: 0 0 0 0px #fff, 0 0 0 0px #007096; /* will expand on selected */
    }
    .nc-color-btn.selected .nc-color-swatch {
      box-shadow: 0 0 0 2px #fff, 0 0 0 4px #007096; /* selection ring */
    }

    /* Accessibility helper for hidden labels */
    .sr-only {
      position: absolute !important;
      width: 1px; height: 1px;
      padding: 0; margin: -1px;
      overflow: hidden; clip: rect(0,0,0,0);
      white-space: nowrap; border: 0;
    }

    .nc-option-btn.selected { background: #007096; border-color: #007096; color: #fff; }
    .nc-option-btn.disabled { opacity: 0.45; cursor: not-allowed; }

    /* RIGHT: Stage for the bike + CTA */
    .nc-stage {
      position: relative;
      flex: 1;
      min-width: 0;
      display: flex;
      align-items: center;
      justify-content: center;
      overflow: hidden;
    }

    /* Centered preview; responsive with preserved aspect */
    #nc-preview {
      position: relative;
      width: min(62vw, 1200px);
      aspect-ratio: 16 / 9;    /* change if your PNG canvas is different */
      max-height: 80vh;
      max-width: 100%;
      margin:80px auto 0 auto;
    }

    .nc-preview-img {
      position: absolute;
      inset: 0;
      width: 100%;
      height: 100%;
      object-fit: contain;
    }

    /* Bottom-right price + button block */
    .nc-cta {
      position: absolute;
      right: 40px;
      bottom: 40px;
      display: flex;
      flex-direction: column;
      align-items: flex-end;
      gap: 12px;
      min-width:min(480px, calc(100vw - 80px));
    }

    .nc-price {
      font-size: 30px;
      font-weight: 600;
      color:#fff;
      text-align:right;
      white-space:nowrap;
    }

    .nc-price-row {
      display:flex;
      align-items:center;
      justify-content:flex-end;
      gap:18px;
      width:100%;
    }

    /* Price presentation */
    .nc-price-label { font-weight: 400; opacity: 0.9; margin-right: 6px; }
    .nc-price .original-price { text-decoration: line-through; opacity: 0.6; margin-right: 8px; font-size:80%; }
    .nc-price .discounted-price { font-weight: 700; }
    .nc-price .final-price { font-weight: 700; }
    .nc-price-vat-mode {
      display:inline-block;
      margin-left:10px;
      font-size:13px;
      font-weight:500;
      line-height:18px;
      opacity:.82;
      text-transform:uppercase;
      white-space:nowrap;
    }

    .nc-vat-toggle {
      display:inline-flex;
      align-items:center;
      justify-content:flex-end;
      gap:8px;
      color:#fff;
      margin:4px 0 0 0;
    }

    .nc-vat-toggle-label {
      font-size:13px;
      font-weight:600;
      line-height:18px;
      text-transform:uppercase;
      white-space:nowrap;
    }

    .nc-vat-switch {
      position:relative;
      width:42px;
      height:22px;
      padding:0;
      border:0;
      border-radius:999px;
      background:rgba(255,255,255,.5);
      cursor:pointer;
      transition:background .18s ease, opacity .18s ease;
    }

    .nc-vat-switch::after {
      content:'';
      position:absolute;
      top:50%;
      left:3px;
      width:14px;
      height:14px;
      border-radius:50%;
      background:#000;
      transform:translateY(-50%);
      transition:transform .18s ease;
    }

    .nc-vat-switch.is-on::after {
      transform:translate(20px, -50%);
    }

    .nc-vat-switch.is-off {
      background:rgba(255,255,255,.2);
      opacity:1;
    }

    .nc-vat-switch.is-off::after {
      background:#fff;
      transform:translate(0, -50%);
    }

    .nc-vat-switch:focus,
    .nc-vat-switch:focus-visible {
      outline:0;
    }

    .nc-buy-btn {
      padding: 14px 60px;
      border: 0;
      font-size: 14px;
      font-weight: 600;
      color: #fff;
      background: transparent;
      border:2px solid #fff;
      cursor: pointer;
    }
    .nc-buy-btn:hover { filter: brightness(1.05); }

    .nc-options-toggle {
    display:none;
    }

    .nc-price-disclaimer {
      font-size:14px;
      line-height:20px;
      color:#fff;
      font-style:italic;
      margin:-10px 0 14px 0;
      max-width:460px;
      text-align:right;
    }

	}
		
		
	@media only screen and (min-width : 480px) {
		
		
	}
		
		
	@media only screen and (min-width : 640px) {
		 
		
	}
		
		
	@media only screen and (min-width : 768px) {

  .nc-options-toggle {
    top:120px!important;
  }

  .nc-option-btn {
    padding: 10px 20px;
    font-size: 16px;
  }

  .nc-categories {
    margin:120px 0 40px 0;
  }


	}
		
		
	@media only screen and (min-width : 1024px) {

  .nc-acc-controls { margin-bottom: 12px; }

  .nc-acc-toggle { font-size: 13px; padding: 9px 12px; }

	}
		
		
	@media only screen and (min-width : 1280px) {


	}



  /* --- Minimal responsive fallback (keeps it usable; you’ll polish later) --- */
@media (max-width: 1024px) {
  #nc-preview { width: min(70vw, 900px); }
  .nc-cta { right: 24px; bottom: 24px; }
}
@media (max-width: 768px) {
  .nc-shell { flex-direction: column; gap: 24px; }
  .nc-sidebar { width: 100%; max-width: none; overflow: visible; }
  #nc-preview { width: 100%; }
  .nc-cta { position: static; align-items: flex-start; }
  .nc-acc-controls { justify-content: flex-start; }
  .nc-acc-summary { max-width: 45%; }
}

/* ===== Mobile layout (≤900px) ===== */
@media (max-width: 900px) {

  #noos-configurator-root {
      /* full-height canvas; padding keeps content away from edges */
      padding: 1rem;
      width:100%;
      height: 100vh;
      box-sizing: border-box;
      display:flex;
    }

  /* Stage fills viewport minus sticky bars */
  .nc-stage { position: relative; min-height: 100vh; overflow: hidden; }

  /* Preview gets most of the height; adjust 56/60 to match your CTA height */
  #nc-preview {
    position: relative;
    width: 100vw;
    height: calc(100vh - 60px - 52px); /* 60px CTA + ~52px toggle btn area */
    max-width: 100%;
    margin: 0 auto;
  }
  @supports (height: 1svh) {
    #nc-preview { 
      height: calc(100svh - 60px - 52px); 
      margin:20px 0 0 0;
    }
  }

  /* Sticky BUY bar */
  .nc-cta {
    position: fixed;
    left: 0; right: 0; bottom: 0;
    z-index: 1200;
    display: flex; justify-content: space-between; align-items: center;
    gap: 12px;
    padding: 10px 14px 10px 14px;
    border-top: 1px solid rgba(255,255,255,.12);
    background: rgba(0,0,0,.85);
    backdrop-filter: blur(8px);
    padding-bottom: max(10px, env(safe-area-inset-bottom));
    min-width:0;
  }
  .nc-price { 
    font-size: 20px; 
  }

  .nc-price-row {
    width:100%;
    justify-content:center;
    gap:22px;
  }

  .nc-price-vat-mode {
    display:inline-block;
    margin:0 0 0 6px;
    font-size:10px;
    line-height:14px;
  }

  .nc-vat-toggle {
    width:auto;
    justify-content:flex-start;
  }

  .nc-vat-toggle-label {
    font-size:12px;
  }

  .nc-buy-btn { 
    flex: 0 0 auto; 
    margin: 0 0 0 0;
  }

  body.nc-drawer-open .nc-cta { 
    pointer-events: none; 
  }

  /* Options as bottom drawer */
  .nc-categories {
    position: fixed;
    width: 100vw!important;
    left: 0; right: 0; bottom: 0;
    height: 65vh; max-height: 560px;
    transform: translateY(100%);
    transition: transform .28s ease;
    z-index: 1005;
    border-radius: 16px 16px 0 0;
    padding: 12px 16px;
    margin: 0 0 0 0;
    overflow-y: auto;
    background: rgba(0,0,0,.95);
    -webkit-overflow-scrolling: touch;
    will-change: transform;
    display: flex;
    flex-direction: column;
    gap: 10px;
  }
  body.nc-drawer-open .nc-categories { transform: translateY(0); z-index: 1300; }

  /* Overlay behind drawer */
  .nc-drawer-overlay {
    position: fixed;
    inset: 0;
    background: rgba(0,0,0,.35);
    opacity: 0;
    pointer-events: none;
    transition: opacity .2s ease;
  }
  body.nc-drawer-open .nc-drawer-overlay {
    opacity: 1; pointer-events: auto;
  }

  /* “Options” toggle button above the CTA */
  .nc-options-toggle {
    display:block;
    position: fixed;
    left: 14px; right: 14px; top: 90px; /* just above CTA */
    height: 44px;
    z-index: 1350;
    border-radius: 10px;
    border: 1px solid rgba(255,255,255,.16);
    background: rgba(255,255,255,.06);
    color: #fff;
    font: inherit;
  }

  .nc-acc-btn {
      width: 100%;
      display: flex;
      justify-content: space-between;
      align-items: center;
      gap: 10px;
      padding: 7px 14px 7px 10px;
      background: transparent;
      border: 0;
      color: #fff;
      cursor: pointer;
      text-align: left;
      position: relative;
  }

  .nc-option-btn {
      min-height: 30px;
      padding: 5px 20px;
      border: 1px solid #007096;
      font-size:12px;
  }

  /* Smaller swatches on mobile */
  .nc-color-swatch { width: 28px; height: 28px; }

  .nc-acc-item {
      min-height: 30px;
      max-height: 200px;
      overflow: hidden;
      display: flex;
      flex-direction: column;
  }

  .nc-acc-panel {
      flex: 1;
      overflow-y: auto;
  }

  /* Hide the main footer on the Configurator page (mobile only) */
  .page-template-configurator footer.site-footer,
  .page-template-configurator .site-footer {
    display: none !important;
  }

  body.nc-drawer-open {
    overflow: hidden;
    height: 100%;
  }

  .nc-legal {
      display:block;
    }

  .nc-legal p {
    font-size:10px;
    line-height:16px;
    color:#fff;
    margin:5px 0 0 0;
  }

  .nc-legal a {
    color:#fff;
  }

  .nc-legal img {
    display:none;
  }

  .nc-price-disclaimer {
    font-size:11px;
    line-height:17px;
    color:#fff;
    font-style:italic;
    margin:-10px 0 5px 0;
    max-width:100%;
    text-align:center;
  }

}