/* Desktop: side by side */
        .cfg3d-grid {
          display: grid;
          grid-template-columns: 1fr 1fr;
          gap: 32px;
          align-items: start;
        }

        .cfg3d-viewer-col {
          position: sticky;
          top: 88px;
        }

        /* Mobile: stack vertically, controls directly below 3D preview */
        @media(max-width:768px) {
          .cfg3d-grid {
            display: flex !important;
            flex-direction: column;
            gap: 20px;
          }

          /* Make viewer-col transparent so its children become flex items of .cfg3d-grid */
          .cfg3d-viewer-col {
            display: contents;
          }

          /* 1) Live viewers badge */
          .cfg3d-viewer-col> :nth-child(1) {
            order: 1;
          }

          /* 2) 3D Canvas */
          .cfg3d-viewer-col> :nth-child(2) {
            order: 2;
          }

          /* 3) Config controls (sliders, glastype, kleur, extras) — directly after canvas */
          .cfg3d-grid> :nth-child(2) {
            order: 3;
          }

          /* 4) Dimensions summary cards (Breedte/Hoogte/Panelen) */
          .cfg3d-viewer-col> :nth-child(3) {
            order: 4;
          }

          /* 5) Trust badges (bezorging/garantie) */
          .cfg3d-viewer-col> :nth-child(4) {
            order: 5;
          }

          #cfg3d-preview-container {
            aspect-ratio: 1/1 !important;
          }

          /* Bottom bar safe area for phones with home indicator */
          .cfg3d-bottom-bar {
            padding-bottom: calc(12px + env(safe-area-inset-bottom)) !important;
          }

          /* Make checkout grid single column */
          .co-zip-grid {
            grid-template-columns: 1fr !important;
          }
        }

        @media(max-width:480px) {
          #cfg3d-preview-container {
            aspect-ratio: 4/3 !important;
          }

          .cfg3d-bottom-bar-inner {
            gap: 8px !important;
          }

          .cfg3d-bestel-btn {
            padding: 12px 18px !important;
            font-size: 15px !important;
          }
        }

        /* ── Dimension direct-input fields ── */
        .cfg3d-dim-input {
          width: 58px;
          padding: 2px 4px;
          border: 1px solid transparent;
          border-radius: 6px;
          background: transparent;
          font-family: 'Space Grotesk', sans-serif;
          font-size: 14px;
          font-weight: 700;
          color: #0f172a;
          text-align: right;
          -moz-appearance: textfield;
          appearance: textfield;
          transition: border-color .2s, background .2s, box-shadow .2s;
        }

        .cfg3d-dim-input::-webkit-outer-spin-button,
        .cfg3d-dim-input::-webkit-inner-spin-button {
          -webkit-appearance: none;
          margin: 0;
        }

        .cfg3d-dim-input:hover {
          border-color: #cbd5e1;
          background: #f8fafc;
        }

        .cfg3d-dim-input:focus {
          outline: none;
          border-color: #000;
          background: #fff;
          box-shadow: 0 0 0 2px rgba(0, 0, 0, .08);
        }

        .cfg3d-dim-input.cfg3d-dim-invalid {
          border-color: #ef4444;
          background: #fef2f2;
          box-shadow: 0 0 0 2px rgba(239, 68, 68, .12);
        }

        .cfg3d-dim-unit {
          font-size: 12px;
          font-weight: 600;
          color: #94a3b8;
          user-select: none;
        }

        .cfg3d-measure-btn {
          display: inline-flex;
          align-items: center;
          gap: 8px;
          margin-top: 12px;
          padding: 10px 14px;
          border: 1px solid #cbd5e1;
          border-radius: 999px;
          background: #fff;
          color: #0f172a;
          font-size: 12px;
          font-weight: 700;
          cursor: pointer;
          transition: border-color .2s, box-shadow .2s, background .2s;
        }

        .cfg3d-measure-btn:hover {
          border-color: #94a3b8;
          box-shadow: 0 8px 20px rgba(15, 23, 42, 0.08);
        }

        .cfg3d-measure-btn svg {
          width: 14px;
          height: 14px;
          stroke: #0ea5a5;
          flex-shrink: 0;
        }

        .cfg3d-measure-card {
          display: none;
          margin-top: 12px;
          padding: 16px;
          border: 1px solid #e2e8f0;
          border-radius: 16px;
          background: #f8fafc;
          gap: 14px;
        }

        .cfg3d-measure-card.is-open {
          display: grid;
        }

        .cfg3d-measure-ill {
          width: 100%;
          max-width: 220px;
          aspect-ratio: 4 / 3;
          border: 1px dashed #cbd5e1;
          border-radius: 14px;
          background: #fff;
          padding: 10px;
          display: flex;
          align-items: center;
          justify-content: center;
        }

        .cfg3d-measure-ill svg {
          width: 100%;
          height: 100%;
        }

        .cfg3d-measure-copy {
          display: grid;
          gap: 8px;
        }

        .cfg3d-measure-copy strong {
          font-size: 16px;
          color: #0f172a;
        }

        .cfg3d-measure-copy p {
          margin: 0;
          font-size: 13px;
          line-height: 1.6;
          color: #64748b;
        }

        .cfg3d-measure-note {
          font-size: 12px;
          font-weight: 700;
          color: #0f766e;
          background: #ecfeff;
          border: 1px solid #99f6e4;
          border-radius: 12px;
          padding: 10px 12px;
        }

        /* ── Extra-bar component ── */
        .cfg3d-extra-bar {
          display: flex;
          align-items: center;
          justify-content: space-between;
          padding: 14px 16px;
          border: 1px solid #e5e7eb;
          border-radius: 12px;
          cursor: pointer;
          transition: border-color .2s, box-shadow .2s, background .2s;
          gap: 12px;
        }

        .cfg3d-extra-bar:hover {
          border-color: #cbd5e1;
          box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06);
        }

        .cfg3d-extra-bar:has(.cfg3d-extra-bar__checkbox:checked) {
          border-color: #000;
          background: #fafafa;
        }

        /* Included / gratis bar */
        .cfg3d-extra-bar--included {
          border-color: #000;
          background: #f8fafc;
          cursor: default;
        }

        .cfg3d-extra-bar--included:hover {
          border-color: #000;
          box-shadow: none;
        }

        /* Left: image + name */
        .cfg3d-extra-bar__left {
          display: flex;
          align-items: center;
          gap: 14px;
          min-width: 0;
        }

        .cfg3d-extra-bar__img {
          width: 48px;
          height: 48px;
          object-fit: contain;
          border-radius: 8px;
          background: #f3f4f6;
          flex-shrink: 0;
        }

        .cfg3d-extra-bar__name {
          font-weight: 600;
          font-size: 14px;
          color: #1e293b;
          white-space: nowrap;
        }

        .cfg3d-extra-bar__meta {
          display: grid;
          gap: 4px;
        }

        .cfg3d-extra-bar__sub {
          font-size: 12px;
          line-height: 1.5;
          color: #64748b;
          white-space: normal;
        }

        /* Right: price + control — fixed 3-column grid */
        .cfg3d-extra-bar__right {
          display: grid;
          grid-template-columns: 24px 90px 24px;
          align-items: center;
          gap: 0 8px;
          flex-shrink: 0;
        }

        .cfg3d-extra-bar__price-group {
          display: flex;
          align-items: center;
          gap: 6px;
          justify-content: flex-end;
          white-space: nowrap;
        }

        .cfg3d-extra-bar__price {
          font-weight: 700;
          font-size: 14px;
          color: #1e293b;
          white-space: nowrap;
          text-align: right;
        }

        .cfg3d-extra-bar__price-old {
          font-weight: 600;
          font-size: 14px;
          color: #94a3b8;
          text-decoration: line-through;
          white-space: nowrap;
        }

        .cfg3d-extra-bar__price-free {
          font-weight: 800;
          font-size: 14px;
          color: #16a34a;
          white-space: nowrap;
          text-align: right;
        }

        .cfg3d-extra-bar__check-icon {
          flex-shrink: 0;
          justify-self: center;
        }

        /* Checkbox */
        .cfg3d-extra-bar__checkbox {
          width: 20px;
          height: 20px;
          accent-color: #000;
          border-radius: 4px;
          cursor: pointer;
          flex-shrink: 0;
          justify-self: center;
        }

        /* Stepper */
        .cfg3d-extra-bar__stepper {
          display: flex;
          align-items: center;
          background: #f3f4f6;
          border-radius: 999px;
          padding: 4px;
        }

        .cfg3d-extra-bar__stepper-btn {
          width: 32px;
          height: 32px;
          background: #fff;
          border-radius: 50%;
          box-shadow: 0 1px 3px rgba(0, 0, 0, 0.15);
          border: none;
          cursor: pointer;
          font-size: 16px;
          font-weight: 700;
          display: flex;
          align-items: center;
          justify-content: center;
          transition: background .15s;
        }

        .cfg3d-extra-bar__stepper-btn:hover {
          background: #e5e7eb;
        }

        .cfg3d-extra-bar__stepper-val {
          width: 32px;
          text-align: center;
          font-weight: 700;
          font-size: 14px;
        }

        /* Mobile tweaks */
        @media (max-width: 480px) {
          .cfg3d-extra-bar {
            padding: 12px;
            gap: 10px;
          }

          .cfg3d-extra-bar__img {
            width: 40px;
            height: 40px;
          }

          .cfg3d-extra-bar__name {
            font-size: 13px;
          }

          .cfg3d-extra-bar__sub {
            font-size: 11px;
          }

          .cfg3d-extra-bar__price,
          .cfg3d-extra-bar__price-old,
          .cfg3d-extra-bar__price-free {
            font-size: 13px;
          }

          .cfg3d-extra-bar__right {
            grid-template-columns: 22px 80px 22px;
            gap: 0 4px;
          }
        }

        /* ── Help-tooltip component ── */
        .cfg3d-extra-selector {
          padding: 16px;
          border: 1px solid #e5e7eb;
          border-radius: 14px;
          background: #fff;
          display: grid;
          gap: 14px;
        }

        .cfg3d-extra-selector__head {
          display: flex;
          align-items: center;
          justify-content: space-between;
          gap: 12px;
        }

        .cfg3d-extra-selector__head-right {
          display: inline-flex;
          align-items: center;
          gap: 10px;
          flex-shrink: 0;
        }

        .cfg3d-extra-selector__options {
          display: grid;
          gap: 8px;
        }

        .cfg3d-extra-selector__options--inline {
          grid-template-columns: repeat(2, minmax(0, 1fr));
        }

        .cfg3d-extra-selector__options--visual {
          grid-template-columns: repeat(2, minmax(0, 1fr));
          gap: 14px;
          margin-top: 14px;
        }

        .cfg3d-extra-selector__options--single {
          grid-template-columns: minmax(0, 1fr);
          gap: 14px;
          margin-top: 14px;
          justify-items: center;
        }

        .cfg3d-extra-selector__options--single .cfg3d-extra-choice {
          width: min(100%, calc((100% - 14px) / 2));
        }

        .cfg3d-extra-selector__options--foundation {
          grid-template-columns: repeat(2, minmax(0, 1fr));
          gap: 14px;
        }

        .cfg3d-extra-choice {
          position: relative;
          display: block;
          cursor: pointer;
        }

        .cfg3d-extra-choice input {
          position: absolute;
          opacity: 0;
          pointer-events: none;
        }

        .cfg3d-extra-choice__card {
          display: flex;
          align-items: center;
          justify-content: space-between;
          gap: 12px;
          border: 1px solid #e5e7eb;
          border-radius: 12px;
          padding: 12px 14px;
          background: #fff;
          transition: border-color .2s, box-shadow .2s, background .2s;
        }

        .cfg3d-extra-choice:hover .cfg3d-extra-choice__card {
          border-color: #cbd5e1;
          box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);
        }

        .cfg3d-extra-choice input:checked+.cfg3d-extra-choice__card {
          border-color: #000;
          background: #fafafa;
          box-shadow: 0 0 0 2px rgba(15, 23, 42, 0.04);
        }

        .cfg3d-extra-choice__copy {
          display: grid;
          gap: 3px;
          min-width: 0;
        }

        .cfg3d-extra-choice__title {
          font-size: 13px;
          font-weight: 700;
          color: #0f172a;
        }

        .cfg3d-extra-choice__sub {
          font-size: 12px;
          line-height: 1.45;
          color: #64748b;
        }

        .cfg3d-extra-choice__price {
          font-size: 13px;
          font-weight: 800;
          color: #0f172a;
          white-space: nowrap;
        }

        .cfg3d-extra-choice--visual .cfg3d-extra-choice__card {
          position: relative;
          display: block;
          padding: 16px;
          min-height: 100%;
        }

        .cfg3d-extra-choice__media {
          display: block;
          width: 100%;
          aspect-ratio: 16 / 9;
          border-radius: 8px;
          margin-bottom: 12px;
          background: #fff center / cover no-repeat;
          border: 1px solid #e5e7eb;
        }

        .cfg3d-extra-choice__media--carriers {
          background-image: url('../detail/meenemersoptie.webp');
        }

        .cfg3d-extra-choice__media--lock {
          background-image: url('../detail/Slot.webp');
        }

        .cfg3d-extra-choice__media--foundation {
          background-image: url('../detail/Funderingsbalk.webp');
          background-size: contain;
          background-position: center;
          background-color: #f8fafc;
        }

        .cfg3d-extra-choice--visual .cfg3d-extra-choice__copy {
          gap: 4px;
          margin-bottom: 10px;
        }

        .cfg3d-extra-choice--visual .cfg3d-extra-choice__price {
          display: block;
          font-size: 14px;
        }

        .cfg3d-extra-choice--foundation-card .cfg3d-extra-choice__card {
          position: relative;
          align-items: flex-start;
          min-height: 116px;
          padding: 18px 18px 16px;
        }

        .cfg3d-extra-choice--foundation-card .cfg3d-extra-choice__copy {
          gap: 8px;
        }

        .cfg3d-extra-choice--foundation-card .cfg3d-extra-choice__title {
          font-size: 15px;
        }

        .cfg3d-extra-choice--foundation-card .cfg3d-extra-choice__sub {
          font-size: 14px;
          line-height: 1.35;
          color: #334155;
        }

        .cfg3d-extra-choice--foundation-card .cfg3d-extra-choice__price {
          font-size: 15px;
          line-height: 1.2;
          white-space: nowrap;
        }

        .cfg3d-extra-choice__badge {
          position: absolute;
          top: 12px;
          left: 12px;
          display: inline-flex;
          align-items: center;
          justify-content: center;
          min-height: 0;
          padding: 3px 8px;
          border-radius: 999px;
          background: #fef3c7;
          color: #92400e;
          font-size: 10px;
          font-weight: 800;
          line-height: 1;
          text-transform: uppercase;
          letter-spacing: .3px;
        }

        .cfg3d-extra-choice--foundation-recommended .cfg3d-extra-choice__card {
          padding-top: 30px;
        }

        .cfg3d-foundation-photo {
          margin-top: 4px;
          border: 1px solid #e5e7eb;
          border-radius: 16px;
          overflow: hidden;
          background: #f8fafc;
        }

        .cfg3d-foundation-photo img {
          display: block;
          width: 100%;
          height: auto;
        }

        @media (max-width: 480px) {
          .cfg3d-extra-selector {
            padding: 12px;
          }

          .cfg3d-extra-selector__head {
            align-items: flex-start;
          }

          .cfg3d-extra-selector__head-right {
            gap: 8px;
          }

          .cfg3d-extra-choice__card {
            padding: 11px 12px;
          }

          .cfg3d-extra-choice__sub {
            font-size: 11px;
          }

          .cfg3d-extra-selector__options--inline {
            grid-template-columns: 1fr;
          }

          .cfg3d-extra-selector__options--visual {
            grid-template-columns: 1fr 1fr;
            gap: 10px;
          }

          .cfg3d-extra-selector__options--foundation {
            grid-template-columns: 1fr;
          }

          .cfg3d-extra-choice--visual .cfg3d-extra-choice__card {
            padding: 12px;
          }

          .cfg3d-extra-choice--foundation-card .cfg3d-extra-choice__card {
            min-height: 0;
          }

          .cfg3d-measure-card {
            padding: 14px;
          }

          .cfg3d-measure-ill {
            max-width: none;
          }
        }

        .cfg3d-help-wrap {
          position: relative;
          display: inline-flex;
          align-items: center;
          justify-content: center;
        }

        .cfg3d-help-btn {
          width: 18px;
          height: 18px;
          border-radius: 50%;
          border: 1.5px solid #94a3b8;
          background: transparent;
          color: #64748b;
          font-size: 11px;
          font-weight: 700;
          line-height: 1;
          display: inline-flex;
          align-items: center;
          justify-content: center;
          cursor: pointer;
          margin: 0 auto;
          padding: 0;
          flex-shrink: 0;
          transition: border-color .2s, color .2s, background .2s;
          vertical-align: middle;
          font-family: inherit;
        }

        .cfg3d-help-btn:hover,
        .cfg3d-help-btn:focus-visible {
          border-color: #0f172a;
          color: #0f172a;
          background: #f1f5f9;
          outline: none;
        }

        .cfg3d-help-tooltip {
          position: absolute;
          right: 0;
          bottom: calc(100% + 10px);
          transform: none;
          background: #0f172a;
          color: #f8fafc;
          font-size: 12px;
          font-weight: 400;
          line-height: 1.5;
          padding: 10px 14px;
          border-radius: 10px;
          box-shadow: 0 4px 16px rgba(0, 0, 0, 0.18);
          white-space: normal;
          width: max-content;
          max-width: 240px;
          z-index: 50;
          pointer-events: none;
          opacity: 0;
          visibility: hidden;
          transition: opacity .18s, visibility .18s;
        }

        .cfg3d-help-tooltip::after {
          content: '';
          position: absolute;
          top: 100%;
          right: 3px;
          left: auto;
          transform: none;
          border: 6px solid transparent;
          border-top-color: #0f172a;
        }

        .cfg3d-help-btn[aria-expanded="true"]+.cfg3d-help-tooltip {
          opacity: 1;
          visibility: visible;
          pointer-events: auto;
        }

        /* On very small screens, keep tooltip from overflowing */
        @media (max-width: 480px) {
          .cfg3d-help-tooltip {
            max-width: 200px;
            font-size: 11px;
            padding: 8px 12px;
            right: 0;
            transform: none;
          }

          .cfg3d-help-tooltip::after {
            right: 3px;
            left: auto;
            transform: none;
          }
        }