/* Wood Brothers — калькулятор вуличних жалюзі */
#wb-calc{
  --wb-accent:#ea2b06;--wb-accent-dark:#c72304;
  --wb-ink:#2a2a2a;--wb-ink-2:#6b7075;--wb-ink-3:#9aa0a6;
  --wb-line:#e3e6e8;--wb-line-2:#cfd4d8;
  --wb-bg:#fff;--wb-bg-2:#f6f7f8;
  --wb-radius:12px;
  font-family:Montserrat,system-ui,-apple-system,"Segoe UI",sans-serif;
  color:var(--wb-ink);line-height:1.5;-webkit-text-size-adjust:100%;
}
#wb-calc{container-type:inline-size;container-name:wb}
#wb-calc *,#wb-calc *::before,#wb-calc *::after{box-sizing:border-box}
#wb-calc img,#wb-calc svg{max-width:100%}

.wb-shell{display:grid;gap:20px;grid-template-columns:minmax(0,1fr)}
.wb-left,.wb-right{min-width:0}
.wb-left{container-type:inline-size;container-name:wbl}
@container wb (min-width:900px){.wb-shell{grid-template-columns:minmax(0,1fr) 340px}}

/* ---------- крок ---------- */
.wb-step{background:var(--wb-bg);border:1px solid var(--wb-line);border-radius:var(--wb-radius);padding:18px 16px;margin-bottom:12px}
.wb-step:last-child{margin-bottom:0}
.wb-step__head{display:flex;align-items:center;gap:10px;margin:0 0 14px}
.wb-step__n{flex:0 0 24px;height:24px;border-radius:50%;background:var(--wb-ink);color:#fff;font-size:12px;font-weight:700;display:grid;place-items:center}
.wb-step__t{font-size:16px;font-weight:700;margin:0;line-height:1.3}
.wb-step__sub{font-size:13px;color:var(--wb-ink-2);margin:-8px 0 14px 34px}

/* ---------- картки вибору ---------- */
.wb-opts{display:grid;gap:8px}
.wb-opts--2{grid-template-columns:minmax(0,1fr)}
@container wbl (min-width:500px){.wb-opts--2{grid-template-columns:minmax(0,1fr) minmax(0,1fr)}}
.wb-opts--chips{grid-template-columns:repeat(2,minmax(0,1fr))}
@container wbl (min-width:470px){.wb-opts--chips{grid-template-columns:repeat(3,minmax(0,1fr))}}
@container wbl (min-width:810px){.wb-opts--chips{grid-template-columns:repeat(5,minmax(0,1fr))}}


.wb-opts > div{display:flex}
.wb-opt{position:relative;display:flex;gap:10px;align-items:flex-start;width:100%;
  border:1px solid var(--wb-line);border-radius:10px;padding:12px 12px 12px 11px;
  cursor:pointer;background:var(--wb-bg);transition:border-color .15s,box-shadow .15s}
.wb-opt:hover{border-color:var(--wb-line-2)}
.wb-opt.is-on{border-color:var(--wb-ink);box-shadow:inset 0 0 0 1px var(--wb-ink)}

/* маркер вибору */
.wb-opt__mark{flex:0 0 17px;width:17px;height:17px;margin-top:1px;border:1.5px solid var(--wb-line-2);border-radius:50%;position:relative;transition:border-color .15s}
.wb-opt__mark--box{border-radius:5px}
.wb-opt.is-on .wb-opt__mark{border-color:var(--wb-accent);background:var(--wb-accent)}
.wb-opt.is-on .wb-opt__mark::after{content:"";position:absolute;left:4.5px;top:1px;width:5px;height:9px;border:solid #fff;border-width:0 2px 2px 0;transform:rotate(45deg)}

/* свотч матеріалу / кольору */
.wb-opt__sw{flex:0 0 22px;height:22px;border-radius:6px;border:1px solid rgba(0,0,0,.16);margin-top:0}
/* іконка */
.wb-opt__ic{flex:0 0 24px;height:24px;display:grid;place-items:center;color:var(--wb-ink-3);margin-top:-2px}
.wb-opt.is-on .wb-opt__ic{color:var(--wb-ink)}

.wb-opt__b{min-width:0;flex:1;display:flex;flex-direction:column}
.wb-opt__t{font-size:14px;font-weight:600;display:block;line-height:1.35;overflow-wrap:break-word;hyphens:none}
.wb-opt__d{font-size:12px;color:var(--wb-ink-2);display:block;margin-top:3px;line-height:1.4;overflow-wrap:break-word}
.wb-opt__p{font-size:12.5px;color:var(--wb-ink);font-weight:700;margin-top:auto;padding-top:6px;display:block;white-space:nowrap}

/* чіпи кольорів: без окремого маркера — індикатор вибору сидить на свотчі */
.wb-opts--chips .wb-opt{gap:8px;padding:11px 10px}
.wb-opts--chips .wb-opt__mark{display:none}
.wb-opts--chips .wb-opt__sw{position:relative;overflow:visible}
.wb-opts--chips .wb-opt.is-on .wb-opt__sw::after{content:"";position:absolute;left:-5px;top:-5px;
  width:15px;height:15px;border-radius:50%;background:var(--wb-accent);
  background-image:url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12'%3E%3Cpath d='M2.5 6.2 4.7 8.4 9.5 3.6' fill='none' stroke='%23fff' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  background-size:11px 11px;background-position:center;background-repeat:no-repeat;
  box-shadow:0 0 0 2px #fff}

/* ---------- прорізи ---------- */
.wb-open{border:1px solid var(--wb-line);border-radius:10px;padding:12px;margin-bottom:8px;background:var(--wb-bg-2)}
.wb-open__head{display:flex;align-items:center;justify-content:space-between;margin:-2px 0 10px}
.wb-open__n{font-size:12px;font-weight:700;color:var(--wb-ink-2);text-transform:uppercase;letter-spacing:.04em}
.wb-open__row{display:grid;grid-template-columns:1fr 1fr 74px;gap:8px;align-items:end}
@container wb (max-width:360px){.wb-open__row{grid-template-columns:1fr 1fr;gap:8px}
  .wb-f--qty{grid-column:1/-1;width:110px}}
.wb-open__sec{margin-top:12px}
.wb-open__l{display:block;font-size:11px;font-weight:700;color:var(--wb-ink-2);text-transform:uppercase;letter-spacing:.04em;margin:0 0 6px}
.wb-open__sec .wb-opt{padding:9px 10px}
.wb-open__sec .wb-opt__d{display:none}
.wb-prev svg + svg{margin-top:10px}
.wb-open__meta{font-size:12px;color:var(--wb-ink-2);margin-top:8px;min-height:17px}
.wb-open__del{width:28px;height:28px;border:1px solid var(--wb-line);background:#fff;border-radius:7px;cursor:pointer;color:var(--wb-ink-2);font-size:17px;line-height:1;padding:0}
.wb-open__del:hover{border-color:var(--wb-accent);color:var(--wb-accent)}

.wb-f{display:block;min-width:0}
.wb-f__l{font-size:11.5px;color:var(--wb-ink-2);display:block;margin-bottom:4px}
select.wb-f__i{appearance:none;-webkit-appearance:none;padding-right:32px;cursor:pointer;
  background-image:url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 8'%3E%3Cpath d='M1 1.5 6 6.5l5-5' fill='none' stroke='%236b7075' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  background-repeat:no-repeat;background-position:right 11px center;background-size:11px}
.wb-f__i{width:100%;height:42px;border:1px solid var(--wb-line-2);border-radius:8px;padding:0 10px;font:inherit;font-size:15px;background:#fff;color:inherit}
.wb-f__i:focus{outline:none;border-color:var(--wb-ink);box-shadow:inset 0 0 0 1px var(--wb-ink)}

.wb-add{border:1px dashed var(--wb-line-2);background:none;border-radius:8px;height:42px;width:100%;cursor:pointer;font:inherit;font-size:13.5px;font-weight:600;color:var(--wb-ink-2)}
.wb-add:hover{border-color:var(--wb-ink);color:var(--wb-ink)}

/* ---------- готові комплекти ---------- */
.wb-kit{display:grid;grid-template-columns:34px minmax(0,1fr) auto;gap:12px;align-items:center;border:1px solid var(--wb-line);border-radius:10px;padding:12px;margin-bottom:8px;background:var(--wb-bg-2)}
.wb-kit.is-on{border-color:var(--wb-accent);box-shadow:inset 0 0 0 1px var(--wb-accent);background:#fff}
.wb-kit__sw{width:34px;height:34px;border-radius:7px;align-self:start;
  background-image:repeating-linear-gradient(0deg,rgba(0,0,0,.14) 0 2px,transparent 2px 7px)!important;background-color:inherit}
.wb-kit__t{font-size:14px;font-weight:700;line-height:1.3}
.wb-kit__d{font-size:12px;color:var(--wb-ink-2);margin-top:3px;line-height:1.4}
.wb-kit__d a{color:inherit;text-decoration:underline}
.wb-kit__p{font-size:13.5px;font-weight:700;margin-top:5px}
.wb-kit__q{display:flex;align-items:center;gap:4px}
.wb-kit__q .wb-f__i{width:48px;padding:0 4px;text-align:center;-moz-appearance:textfield}
.wb-kit__q .wb-f__i::-webkit-inner-spin-button,.wb-kit__q .wb-f__i::-webkit-outer-spin-button{-webkit-appearance:none;margin:0}
.wb-kit__q button{width:34px;height:42px;border:1px solid var(--wb-line-2);background:#fff;border-radius:8px;cursor:pointer;font:inherit;font-size:18px;line-height:1;color:var(--wb-ink);padding:0}
.wb-kit__q button:hover{border-color:var(--wb-ink)}
@container wb (max-width:480px){.wb-kit{grid-template-columns:34px minmax(0,1fr)}
  .wb-kit__q{grid-column:2}}

/* ---------- товари списком (замовник 30.09.2026) ---------- */
.wb-mode{margin-bottom:12px}
.wb-kit--img{grid-template-columns:56px minmax(0,1fr) auto;padding:10px 12px 10px 10px}
.wb-kit__img{width:56px;height:56px;border-radius:8px;overflow:hidden;background:#fff;border:1px solid var(--wb-line);display:block;align-self:start}
.wb-kit__img img{width:100%;height:100%;object-fit:contain;display:block}
.wb-shop__g{font-size:11px;font-weight:700;color:var(--wb-ink-2);text-transform:uppercase;letter-spacing:.04em;margin:16px 0 6px}
.wb-shop__g:first-child{margin-top:0}
@container wb (max-width:480px){.wb-kit--img{grid-template-columns:56px minmax(0,1fr)}}

/* ---------- підсумок ---------- */
.wb-sum{background:var(--wb-bg);border:1px solid var(--wb-line);border-radius:var(--wb-radius);padding:16px}
@container wb (min-width:900px){.wb-right{align-self:stretch}.wb-sum{position:sticky;top:16px}}
.wb-prev{background:var(--wb-bg-2);border-radius:10px;padding:12px;display:grid;place-items:center;margin-bottom:14px}
.wb-prev svg{width:100%;height:auto;max-width:190px}
@container wb (min-width:900px){.wb-prev svg{max-width:260px}}
.wb-sum__t{font-size:14px;font-weight:700;margin:0 0 10px}

.wb-spec{list-style:none;margin:0 0 12px;padding:0;font-size:13px}
.wb-spec li{display:flex;justify-content:space-between;gap:12px;padding:9px 0;border-bottom:1px solid var(--wb-line)}
.wb-spec li:last-child{border-bottom:0}
.wb-spec__n{min-width:0}
.wb-spec__note{display:block;font-size:11.5px;color:var(--wb-ink-3);margin-top:2px}
.wb-spec__r{text-align:right;white-space:nowrap;flex-shrink:0}
.wb-spec__q{display:block;font-size:11.5px;color:var(--wb-ink-3)}
.wb-spec__s{display:block;font-weight:700;margin-top:2px}

.wb-total{display:flex;align-items:baseline;justify-content:space-between;gap:10px;padding:12px 0 14px;border-top:2px solid var(--wb-ink)}
.wb-total__l{font-size:14px;font-weight:600}
.wb-total__v{font-size:25px;font-weight:800;white-space:nowrap}
@container wb (max-width:400px){.wb-total__v{font-size:22px}.wb-step{padding:16px 13px}.wb-sum{padding:14px 13px}}
.wb-note{font-size:11.5px;color:var(--wb-ink-2);margin:0 0 12px;line-height:1.45}
.wb-prepay{margin:12px 0;padding:12px 14px;border-radius:9px;background:var(--wb-accent);color:#fff;
  font-size:14px;font-weight:800;line-height:1.35;text-transform:uppercase;letter-spacing:.02em;text-align:center}
.wb-warn{font-size:12px;color:var(--wb-accent);margin:0 0 12px;padding:9px 11px;background:#fdf1ee;border-radius:8px;line-height:1.45}

.wb-btn,a.wb-btn{display:flex;align-items:center;justify-content:center;gap:8px;width:100%;height:48px;border:0;border-radius:9px;
  background:var(--wb-accent);font:inherit;font-size:14.5px;font-weight:700;cursor:pointer;text-decoration:none;
  transition:background .15s;box-shadow:none}
.wb-btn,.wb-btn:link,.wb-btn:visited,.wb-btn:hover,.wb-btn:active,.wb-btn:focus{color:#fff !important;text-decoration:none !important}
.wb-btn:hover,a.wb-btn:hover{background:var(--wb-accent-dark)}
.wb-btn--ghost,a.wb-btn--ghost{background:none;border:1px solid var(--wb-line-2);height:44px;font-size:13.5px;margin-top:8px}
.wb-btn--ghost,.wb-btn--ghost:link,.wb-btn--ghost:visited,.wb-btn--ghost:hover,.wb-btn--ghost:active,.wb-btn--ghost:focus{color:#2a2a2a !important}
.wb-btn--ghost:hover,a.wb-btn--ghost:hover{background:var(--wb-bg-2);border-color:var(--wb-ink)}
.wb-btn[disabled]{opacity:.5;cursor:not-allowed}

/* ---------- мобільна панель ---------- */
.wb-bar{position:fixed;left:0;right:0;bottom:0;z-index:60;background:#fff;border-top:1px solid var(--wb-line);
  box-shadow:0 -4px 18px rgba(20,24,28,.1);padding:9px 14px;display:flex;align-items:center;gap:12px;
  transform:translateY(110%);transition:transform .2s}
.wb-bar.is-on{transform:none}
@container wb (min-width:900px){.wb-bar{display:none}}
.wb-bar__v{font-size:18px;font-weight:800;line-height:1.15;white-space:nowrap}
.wb-bar__l{font-size:11px;color:var(--wb-ink-2)}
.wb-bar .wb-btn{width:auto;flex:1;height:42px;font-size:14px}

/* ---------- модалка ---------- */
.wb-mod{position:fixed;inset:0;z-index:70;display:none;align-items:center;justify-content:center;padding:16px;background:rgba(20,24,28,.55)}
.wb-mod.is-on{display:flex}
.wb-mod__box{background:#fff;border-radius:14px;max-width:420px;width:100%;padding:22px 20px;position:relative;max-height:88vh;overflow:auto}
.wb-mod__x{position:absolute;top:8px;right:8px;width:34px;height:34px;border:0;background:none;font-size:22px;line-height:1;cursor:pointer;color:var(--wb-ink-3)}
.wb-mod__x:hover{color:var(--wb-ink)}
.wb-mod__t{font-size:18px;font-weight:700;margin:0 0 4px}
.wb-mod__s{font-size:13px;color:var(--wb-ink-2);margin:0 0 16px;line-height:1.45}
.wb-mod .wb-f{margin-bottom:12px}
.wb-ok{text-align:center}
.wb-ok__i{font-size:38px;line-height:1;margin-bottom:6px}
.wb-copy{display:flex;gap:8px;margin-top:10px}
.wb-copy .wb-f__i{min-width:0}
.wb-copy .wb-btn{width:auto;flex:0 0 auto;padding:0 16px}
.wb-copy .wb-f__i{font-size:12.5px}
.wb-f__req{color:var(--wb-accent);font-style:normal;margin-left:2px}
.wb-f__i.is-bad{border-color:var(--wb-accent);box-shadow:inset 0 0 0 1px var(--wb-accent)}
.wb-err{color:var(--wb-accent);font-size:12.5px;margin:0 0 10px;display:none}
.wb-err.is-on{display:block}

/* ---------- режим менеджера (?inv=&k=) ---------- */
.wb-mgr{margin:0 0 18px;padding:14px 16px;border:2px dashed var(--wb-accent);border-radius:10px;background:#fffaf8}
.wb-mgr__h{font-size:13.5px;line-height:1.45;margin:0 0 10px}
.wb-mgr__row{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:10px;align-items:end}
.wb-mgr__row .wb-btn{width:auto;height:42px;padding:0 18px}
.wb-mgr__msg{font-size:12.5px;line-height:1.45;margin:10px 0 0;color:#1e7a44}
.wb-mgr__msg.is-err{color:var(--wb-accent)}
.wb-mgr__links{font-size:12.5px;margin:10px 0 0}
.wb-mgr__note{font-size:12.5px;line-height:1.45;margin:0;color:var(--wb-ink-2)}
@container wb (max-width:560px){.wb-mgr__row{grid-template-columns:minmax(0,1fr)}.wb-mgr__row .wb-btn{width:100%}}

/* ---------- сторінка калькулятора на всю ширину ---------- */
body:has(#wb-calc) .layout-aside{display:none}
body:has(#wb-calc) .layout-content,
body:has(#wb-calc) .page-content,
body:has(#wb-calc) .article-text{width:100%;max-width:100%}

/* ---------- місто Нової пошти ---------- */
.wb-city{position:relative;margin-top:10px}
.wb-city__list{display:none;position:absolute;z-index:20;left:0;right:0;top:100%;margin-top:4px;
  background:#fff;border:1px solid var(--wb-line-2);border-radius:8px;box-shadow:0 10px 26px rgba(0,0,0,.14);
  max-height:250px;overflow:auto}
.wb-city__list.is-on{display:block}
.wb-city__i{display:block;width:100%;text-align:left;padding:9px 12px;border:0;background:none;
  font:inherit;font-size:13.5px;line-height:1.35;color:inherit;cursor:pointer}
.wb-city__i + .wb-city__i{border-top:1px solid var(--wb-line)}
.wb-city__i:hover,.wb-city__i:focus{background:var(--wb-bg-2);outline:none}

.wb-spec--muted{opacity:.45}
.wb-spec--muted .wb-spec__s{font-weight:500}

/* сітка полів у формі інвойсу */
.wb-inv-grid{display:grid;grid-template-columns:1fr;gap:10px;margin-top:12px}
.wb-inv-grid .wb-f{display:flex;flex-direction:column;justify-content:flex-end;height:100%}
.wb-inv-grid .wb-f__l{margin-top:auto}


/* Одна основна дія під сумою: підказка про менеджера і «поділитися» дрібним посиланням */
.wb-note--c{text-align:center;margin:8px 0 0}
.wb-link{display:block;width:100%;margin-top:10px;padding:6px 0;background:none;border:0;cursor:pointer;
  font:inherit;font-size:13px;color:var(--wb-ink-2);text-decoration:underline;text-underline-offset:3px}
.wb-link:hover{color:var(--wb-ink)}