/* Extra products (Rosenbogen, Zaun, …): small additions on top of garage.css (same look) */
.prodsw select{border:0;background:var(--bg);border-radius:12px;padding:0 30px 0 12px;height:42px;font:inherit;font-weight:700;font-size:13px;box-shadow:var(--shadow);cursor:pointer;color:var(--ink);
  appearance:none;background-image:linear-gradient(45deg,transparent 50%,var(--muted) 50%),linear-gradient(135deg,var(--muted) 50%,transparent 50%);background-position:calc(100% - 15px) 18px,calc(100% - 10px) 18px;background-size:5px 5px;background-repeat:no-repeat;max-width:42vw}
.embed .prodsw{display:none}
.gatebox{border-left-color:var(--dark)}
.gatehead{display:flex;align-items:center;justify-content:space-between;gap:8px;margin:0 0 6px}
.gatehead b{font-size:14px}
.ghost.mini{min-height:30px;padding:0 10px;font-size:12px;border-radius:8px;border:1px solid var(--line);background:#fff;cursor:pointer}
.addgates button{display:flex;align-items:center;gap:6px}
.addgates svg{width:30px;height:22px;fill:none;stroke:currentColor;stroke-width:1.6}
.gatebox .seg{margin:0 0 8px}
@media (max-width:820px){.prodsw select{height:36px;font-size:12px;max-width:38vw;padding-left:10px}}
@media (max-width:560px){.prodsw{display:none}}
.editrow .editbtn{display:flex;align-items:center;gap:8px;border-color:var(--accent);font-weight:700}
.editrow .editbtn svg{width:34px;height:24px;fill:none;stroke:currentColor;stroke-width:1.6}
.editrow .editbtn.on{background:var(--accent);color:var(--accent-ink,#fff)}
.shapes svg{width:30px;height:22px}
.segbox .gatehead .btns2{display:flex;gap:6px}
.segbox .field{margin-bottom:6px}
.segsel{width:100%;height:38px;border:1px solid var(--line,#d8dbe0);border-radius:10px;padding:0 10px;font:inherit;background:#fff}
.viewbar{pointer-events:none}.viewbar>*{pointer-events:auto}

/* 01.11.2026: the hint under option cards (garage.css .hint has margin-top:-6px) overlapped a tall card row */
.cards.opt + .hint { margin-top: 4px; }