:root{
  --bg:#f3f3f3;
  --card:#ffffff;
  --line:#cfcfcf;
  --line-2:#e8e8e8;
  --text:#2a2a2a;
  --muted:#8a8a8a;
  --accent:#f59b08;
  --accent-dark:#ea8f00;
  --soft:#f7f7f7;
}

*{box-sizing:border-box}
html,body{min-height:100%}
body{
  margin:0;
  background:var(--bg);
  color:var(--text);
  font-family:'Montserrat',Arial,sans-serif;
}

button,input,select,textarea{font:inherit}
.btn,.form-control,.form-select{border-radius:0 !important}

.calc-page{max-width:1600px}
.calc-header{padding-top:6px}
.calc-title{font-size:28px;font-weight:600;margin:0 0 14px}
.calc-subtitle{font-size:16px}

.wizard-steps{
  display:grid;
  grid-template-columns:repeat(8,minmax(120px,1fr));
  gap:0;
  border-bottom:2px solid #8e8e8e;
}

.step-btn{
  position:relative;
  display:flex;
  align-items:center;
  gap:10px;
  padding:10px 8px 12px;
  background:transparent;
  border:0;
  text-align:left;
  color:#393939;
}

.step-btn::after{
  content:"";
  position:absolute;
  left:0;
  right:0;
  bottom:-2px;
  height:3px;
  background:transparent;
}

.step-btn.active::after{background:var(--accent)}
.step-btn:disabled{opacity:.55}

.step-num{
  width:25px;
  height:25px;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  background:#c9c9c9;
  color:#fff;
  font-size:13px;
  font-weight:700;
  border-radius:4px;
}

.step-btn.active .step-num{background:var(--accent)}
.step-label{font-size:14px;font-weight:500;line-height:1.25}

.calc-workspace,
.calc-summary-card{background:transparent}

.calc-top-tabs,
.calc-sub-tabs{
  display:flex;
  gap:12px;
  flex-wrap:wrap;
  justify-content:center;
  margin-bottom:18px;
}

.tab-btn{
  min-width:132px;
  padding:13px 18px;
  border:1px solid var(--line-2);
  background:var(--soft);
  color:#333;
  text-transform:uppercase;
  font-size:14px;
  font-weight:500;
}

.tab-btn.active{
  background:var(--accent);
  border-color:var(--accent);
  color:#111;
}

.tab-btn.small{
  min-width:120px;
  text-transform:none;
  font-size:13px;
  padding:10px 16px;
}

.calc-left-block,
.calc-preview-block,
.calc-summary-card{
  background:rgba(255,255,255,.56);
  border:1px solid var(--line-2);
  padding:20px;
}

.calc-left-block{min-height:620px}
.calc-preview-block{
  min-height:620px;
  display:flex;
  align-items:center;
  justify-content:center;
}

.calc-summary-card{
  min-height:auto;
}

.section-line{border-top:2px solid #8e8e8e;margin:10px 0 22px}
.section-label{font-size:16px;font-weight:500;margin-bottom:14px}

.item-list{
  display:flex;
  flex-direction:column;
  gap:8px;
}

.item-card{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
  padding:10px 12px;
  background:transparent;
  border:1px solid transparent;
  cursor:pointer;
}

.item-card.active{
  background:#fff7ea;
  border-color:#f0d4a4;
}

.item-title{font-size:15px;line-height:1.35}
.item-sub{font-size:12px;color:var(--muted);margin-top:3px}
.item-badge{font-size:12px;color:var(--accent-dark);font-weight:700}

.kf-grid{
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(112px,1fr));
  gap:12px 14px;
  justify-content:flex-start;
}

.kf-tile{
  width:100%;
  min-height:104px;
  padding:8px 6px;
  background:#fff;
  border:1px solid #8d8d8d;
  display:flex;
  flex-direction:column;
  gap:6px;
  align-items:center;
  justify-content:center;
  cursor:pointer;
}

.kf-tile.active{
  border-color:var(--accent);
  box-shadow:inset 0 0 0 2px rgba(245,155,8,.2);
}

.kf-tile img{
  max-width:56px;
  max-height:56px;
  object-fit:contain;
}

.kf-title{
  font-size:10px;
  line-height:1.25;
  color:#555;
  text-align:center;
}

.kf-plus{
  font-size:28px;
  color:#6a6a6a;
  font-weight:300;
  line-height:1;
}

/* ===== measurements ===== */

.measure-wrap{
  display:flex;
  flex-direction:column;
  gap:18px;
  margin-top:26px;
}

.measure-item{padding:14px 0 2px}
.measure-title{font-size:17px;font-weight:700;margin-bottom:6px}

.measure-row{
  display:grid;
  grid-template-columns:minmax(110px,1fr) 140px;
  gap:18px;
  align-items:center;
  margin-bottom:12px;
}

.measure-label{
  font-size:17px;
  font-weight:700;
  color:#2c2c2c;
  margin:0;
}

.measure-item .form-control[type="number"]{
  height:54px;
  font-size:18px;
  border:1px solid #dddddd;
  padding:10px 16px;
  background:#fff;
  box-shadow:none;
}

.measure-item .calc-range{
  display:block;
  width:100%;
  margin:0;
}

.range-note{
  font-size:13px;
  line-height:1.45;
  color:#8a8a8a;
  margin:12px 0 0;
}

/* ===== sliders ===== */

.calc-range,
.preview-range{
  -webkit-appearance:none;
  appearance:none;
  width:100%;
  height:4px;
  border-radius:999px;
  background:#d0d0d0;
  border:0;
  outline:none;
  opacity:1;
}

.calc-range::-webkit-slider-thumb,
.preview-range::-webkit-slider-thumb{
  -webkit-appearance:none;
  appearance:none;
  width:12px;
  height:12px;
  border-radius:50%;
  background:var(--accent);
  border:0;
  cursor:pointer;
  box-shadow:0 0 0 2px rgba(245,155,8,.14);
}

.calc-range::-moz-range-thumb,
.preview-range::-moz-range-thumb{
  width:12px;
  height:12px;
  border-radius:50%;
  background:var(--accent);
  border:0;
  cursor:pointer;
  box-shadow:0 0 0 2px rgba(245,155,8,.14);
}

.calc-range::-moz-range-track,
.preview-range::-moz-range-track{
  height:4px;
  background:#d0d0d0;
  border:0;
  border-radius:999px;
}

/* ===== generic preview ===== */

.preview-stage{
  width:100%;
  min-height:560px;
  position:relative;
  display:flex;
  align-items:center;
  justify-content:center;
  background:transparent;
}

.preview-stage img{
  max-width:78%;
  max-height:430px;
  object-fit:contain;
}

.preview-empty{font-size:18px;color:var(--muted)}

.preview-dim-x,
.preview-dim-y{
  position:absolute;
  font-size:13px;
  color:#4d4d4d;
}

.preview-dim-x{
  left:50%;
  bottom:22px;
  transform:translateX(-50%);
}

.preview-dim-y{
  right:24px;
  top:50%;
  transform:translateY(-50%);
}

.preview-dim-line-x,
.preview-dim-line-y{
  position:absolute;
  background:#d5d5d5;
}

.preview-dim-line-x{
  left:24%;
  right:24%;
  bottom:48px;
  height:4px;
}

.preview-dim-line-y{
  top:14%;
  bottom:18%;
  right:62px;
  width:4px;
}

.preview-dim-accent-x,
.preview-dim-accent-y{
  position:absolute;
  background:var(--accent);
}

.preview-dim-accent-x{
  left:24%;
  width:22%;
  bottom:48px;
  height:4px;
}

.preview-dim-accent-y{
  right:62px;
  bottom:18%;
  height:22%;
  width:4px;
}

.preview-dot-x,
.preview-dot-y{
  position:absolute;
  width:14px;
  height:14px;
  border-radius:50%;
  background:var(--accent);
}

.preview-dot-x{left:45%;bottom:43px}
.preview-dot-y{right:57px;bottom:39%}

.preview-info{
  position:absolute;
  right:20px;
  bottom:20px;
  width:26px;
  height:26px;
  border-radius:50%;
  background:var(--accent);
  color:#fff;
  font-weight:700;
  display:flex;
  align-items:center;
  justify-content:center;
}

/* ===== shape preview ===== */

.preview-stage.is-shape-step{
  min-height:620px;
  display:flex;
  align-items:center;
  justify-content:center;
}

.preview-canvas-shape{
  width:100%;
  max-width:760px;
  margin:0 auto;
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:28px;
}

.preview-main{
  width:100%;
  display:grid;
  grid-template-columns:minmax(280px,1fr) 120px;
  gap:26px;
  align-items:center;
}

.preview-figure{
  min-height:360px;
  width:100%;
  display:flex;
  align-items:center;
  justify-content:center;
  padding:10px 0;
}

.preview-figure img{
  display:block;
  max-width:100%;
  max-height:360px;
  object-fit:contain;
}

.preview-side-control{
  width:120px;
  min-height:520px;
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  gap:18px;
}

.preview-side-slider-wrap{
  height:520px;
  width:60px;
  display:flex;
  align-items:center;
  justify-content:center;
  overflow:visible;
}

.preview-range-vertical{
  width:520px;
  min-width:520px;
  max-width:none;
  flex:0 0 520px;
  display:block;
  transform:rotate(-90deg);
  transform-origin:center;
}

.preview-size-label-y{
  font-size:18px;
  font-weight:600;
  color:#4d4d4d;
  writing-mode:vertical-rl;
  text-orientation:mixed;
  line-height:1;
}

.preview-bottom-control{
  width:min(420px,100%);
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:14px;
}

.preview-bottom-meta{
  display:flex;
  align-items:center;
  justify-content:center;
  gap:18px;
  margin:0;
}

.preview-size-label{
  font-size:20px;
  font-weight:600;
  line-height:1;
  color:#4d4d4d;
}

.preview-info{
  position:static;
  width:58px;
  height:58px;
  border-radius:50%;
  background:var(--accent);
  color:#fff;
  font-size:34px;
  font-weight:700;
  display:flex;
  align-items:center;
  justify-content:center;
  flex:0 0 58px;
}

.preview-dim-line-x,
.preview-dim-line-y,
.preview-dim-accent-x,
.preview-dim-accent-y,
.preview-dot-x,
.preview-dot-y,
.preview-dim-x,
.preview-dim-y{
  display:none;
}

/* ===== summary ===== */

.summary-title{font-size:18px;font-weight:600;margin:0 0 14px}
.summary-kicker{font-size:14px;font-weight:800;color:#7d7d7d;letter-spacing:.06em;margin-bottom:6px}
.summary-main-title{font-size:28px;font-weight:800;line-height:1.1;margin-bottom:16px;color:#222}
.summary-divider{border-top:1px solid #d7d7d7;margin-bottom:14px}

.summary-row-pro{
  padding:12px 0;
  border-bottom:1px solid #d7d7d7;
}

.summary-row-head{
  font-size:15px;
  font-weight:700;
  color:#666;
  margin-bottom:5px;
}

.summary-row-value{
  font-size:18px;
  font-weight:700;
  color:#222;
  line-height:1.35;
  word-break:break-word;
}

.summary-row-price{
  margin-top:6px;
  font-size:14px;
  font-weight:700;
  color:var(--accent-dark);
  text-align:right;
}

.summary-total-box{
  display:flex;
  justify-content:center;
  gap:4px;
  padding:18px;
  border:1px solid var(--line-2);
  background:rgba(255,255,255,.75);
  font-size:18px;
}

/* ===== buttons / controls ===== */

.btn-checkout,
.btn-nav-primary{
  background:var(--accent);
  border:1px solid var(--accent);
  color:#fff;
  font-weight:600;
}

.btn-checkout:hover,
.btn-nav-primary:hover{
  background:var(--accent-dark);
  border-color:var(--accent-dark);
  color:#fff;
}

.btn-nav{
  min-width:170px;
  padding:14px 20px;
}

.btn-nav-secondary{
  background:#efefef;
  border:1px solid #efefef;
  color:#333;
}

.btn-nav-secondary:hover{
  background:#e4e4e4;
  border-color:#e4e4e4;
}

.calc-bottom-actions{
  display:flex;
  align-items:flex-end;
  justify-content:space-between;
  gap:20px;
}

.calc-note{
  font-size:14px;
  color:var(--accent-dark);
  max-width:420px;
  line-height:1.35;
}

.calc-nav-buttons{
  display:flex;
  gap:24px;
}

.choice-box{
  border:1px solid var(--line-2);
  background:#fff;
  padding:14px 16px;
  margin-bottom:14px;
}

.inline-switches{
  display:flex;
  gap:10px;
  flex-wrap:wrap;
  margin-bottom:18px;
}

.inline-chip{
  padding:10px 14px;
  border:1px solid var(--line-2);
  background:var(--soft);
  cursor:pointer;
}

.inline-chip.active{
  background:var(--accent);
  border-color:var(--accent);
  color:#111;
}

.info-link{
  display:inline-flex;
  align-items:center;
  gap:8px;
  color:var(--accent-dark);
  font-size:14px;
  text-decoration:underline;
  margin-top:16px;
}

.info-badge{
  width:24px;
  height:24px;
  border-radius:50%;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  background:var(--accent);
  color:#fff;
  font-weight:700;
  text-decoration:none;
}

.form-check-input:checked{
  background-color:var(--accent);
  border-color:var(--accent);
}

/* ===== compact right summary ===== */

.calc-summary-card{
  padding: 14px 16px;
  min-height: auto;      /* прибирає штучну висоту */
  top: 12px;
}

.summary-title{
  font-size: 14px;
  font-weight: 600;
  margin: 0 0 10px;
}

.summary-kicker{
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .03em;
  margin-bottom: 3px;
}

.summary-main-title{
  font-size: 16px;
  font-weight: 800;
  line-height: 1.15;
  margin-bottom: 10px;
}

.summary-divider{
  margin-bottom: 8px;
}

.summary-row-pro{
  padding: 8px 0;
}

.summary-row-head{
  font-size: 11px;
  font-weight: 700;
  margin-bottom: 3px;
  color: #777;
}

.summary-row-value{
  font-size: 14px;
  font-weight: 700;
  line-height: 1.2;
}

.summary-row-price{
  margin-top: 2px;
  font-size: 11px;
  font-weight: 700;
}

.summary-total-box{
  padding: 10px 12px;
  font-size: 14px;
  gap: 3px;
}

.summary-total-box strong{
  font-size: 15px;
}

.btn-checkout{
  padding: 10px 14px;
  font-size: 14px;
  font-weight: 700;
}
/* ===== responsive ===== */

@media (max-width: 1399px){
  .wizard-steps{
    grid-template-columns:repeat(4,minmax(160px,1fr));
    row-gap:10px;
    border-bottom:0;
  }

  .step-btn{border-bottom:2px solid #8e8e8e}
  .step-btn.active::after{bottom:0}
}

@media (max-width: 1199px){
  .measure-row{grid-template-columns:minmax(100px,1fr) 124px}
}

@media (max-width: 991px){
  .calc-left-block,
  .calc-preview-block,
  .calc-summary-card{
    min-height:auto;
  }

  .calc-summary-card{position:static}

  .calc-bottom-actions{
    flex-direction:column;
    align-items:stretch;
  }

  .calc-nav-buttons{justify-content:flex-end}

  .measure-row{
    grid-template-columns:1fr;
    gap:10px;
  }

  .preview-main{
    grid-template-columns:1fr;
    gap:14px;
  }

  .preview-side-control{
    width:100%;
    min-height:auto;
  }

  .preview-side-slider-wrap{
    height:auto;
    width:min(320px,100%);
  }

  .preview-range-vertical{
    width:min(320px,100%);
    min-width:0;
    flex:0 1 auto;
    transform:none;
  }

  .preview-size-label-y{
    writing-mode:horizontal-tb;
  }

  .preview-bottom-control{
    width:min(320px,100%);
  }
}

@media (max-width: 767px){
  .wizard-steps{grid-template-columns:repeat(2,minmax(140px,1fr))}
  .calc-top-tabs,.calc-sub-tabs{justify-content:flex-start}
  .tab-btn,.tab-btn.small{min-width:unset;flex:1 1 calc(50% - 12px)}
  .kf-grid{grid-template-columns:repeat(2,minmax(112px,1fr))}
  .summary-row-value{font-size:16px}
  .summary-main-title{font-size:24px}
  .summary-row-price{text-align:left}
  .calc-nav-buttons{flex-direction:column}
  .btn-nav{width:100%}
}

/* ===== multi-config cart ===== */
.summary-actions{display:flex;gap:10px}
.btn-add-config{background:#fff;border:1px solid var(--accent);color:var(--accent-dark);font-weight:700;padding:10px 14px}
.btn-add-config:hover{background:#fff7eb;border-color:var(--accent-dark);color:var(--accent-dark)}
.summary-cart{border:1px solid var(--line-2);background:rgba(255,255,255,.72);padding:10px 12px}
.summary-cart-head{display:flex;align-items:center;justify-content:space-between;gap:10px;font-size:12px;font-weight:700;margin-bottom:8px;color:#444}
.summary-cart-badge{display:inline-flex;align-items:center;justify-content:center;min-width:22px;height:22px;padding:0 6px;border-radius:999px;background:var(--accent);color:#fff;font-size:11px;font-weight:700}
.summary-cart-items{display:flex;flex-direction:column;gap:8px;max-height:220px;overflow:auto}
.summary-cart-empty{font-size:12px;color:#777;line-height:1.35}
.summary-cart-item{border-top:1px solid #e1e1e1;padding-top:8px}
.summary-cart-item:first-child{border-top:0;padding-top:0}
.summary-cart-title{font-size:12px;font-weight:700;line-height:1.25;color:#222;margin-bottom:2px}
.summary-cart-meta,.summary-cart-options{font-size:11px;line-height:1.3;color:#666}
.summary-cart-price{font-size:12px;font-weight:700;color:var(--accent-dark);margin-top:2px}
.summary-cart-remove{border:0;background:transparent;color:#888;padding:2px 0;font-size:11px;text-decoration:underline}
.summary-cart-remove:hover{color:#444}
@media (max-width: 767.98px){
  .summary-actions{flex-direction:column}
}

/* ===== макет під PDF-макет: головне меню + 3 рівні секції ===== */
.product-main-menu{
  display:flex;
  justify-content:center;
  align-items:stretch;
  gap:0;
  flex-wrap:wrap;
}
.product-main-btn{
  min-width:135px;
  padding:13px 18px;
  border:1px solid var(--line-2);
  background:#f7f7f7;
  color:#333;
  font-size:14px;
  font-weight:600;
  text-transform:uppercase;
}
.product-main-btn.active{
  background:var(--accent);
  border-color:var(--accent);
  color:#111;
}
.product-main-btn:disabled{opacity:.82;cursor:not-allowed}

.calc-workspace{width:100%}
.calc-sections-scroll{
  display:grid;
  grid-template-columns:minmax(300px,1fr) minmax(300px,1fr) minmax(300px,.86fr);
  gap:24px;
  align-items:stretch;
}
.calc-section{
  position:relative;
  min-width:0;
  display:flex;
  flex-direction:column;
}
.section-price-badge{
  position:absolute;
  z-index:4;
  right:0;
  top:0;
  min-width:92px;
  min-height:42px;
  display:flex;
  align-items:center;
  justify-content:center;
  padding:8px 10px;
  background:var(--accent);
  color:#fff;
  font-size:13px;
  font-weight:800;
  line-height:1.1;
  text-align:center;
}
.calc-left-block,
.calc-preview-block,
.calc-summary-card{
  height:100%;
  min-height:640px;
  padding-top:56px;
}
.calc-summary-card{overflow:auto}
.calc-preview-block{align-items:stretch}
.preview-stage{min-height:540px}

@media (max-width: 1199.98px){
  .calc-sections-scroll{
    display:flex;
    overflow-x:auto;
    overscroll-behavior-x:contain;
    scroll-snap-type:x mandatory;
    -webkit-overflow-scrolling:touch;
    gap:14px;
    padding:0 4px 12px;
  }
  .calc-section{
    flex:0 0 min(92vw,420px);
    min-width:min(92vw,420px);
    scroll-snap-align:start;
  }
  .calc-left-block,
  .calc-preview-block,
  .calc-summary-card{
    min-height:calc(100vh - 285px);
    max-height:none;
    padding:50px 14px 16px;
  }
  .calc-summary-card{overflow:visible}
  .preview-stage,
  .preview-stage.is-shape-step{min-height:calc(100vh - 345px)}
  .preview-figure{min-height:220px}
  .preview-figure img{max-height:260px}
  .preview-main{grid-template-columns:1fr 64px;gap:8px}
  .preview-side-control{width:64px;min-height:320px;gap:8px}
  .preview-side-slider-wrap{height:310px;width:44px}
  .preview-range-vertical{width:310px;min-width:310px;flex:0 0 310px;transform:rotate(-90deg)}
  .preview-size-label-y{writing-mode:vertical-rl;font-size:14px}
  .preview-bottom-control{width:min(260px,100%)}
  .preview-info{width:38px;height:38px;font-size:22px}
  .calc-bottom-actions{position:relative;z-index:5}
}

@media (max-width: 767.98px){
  .calc-page{padding-left:10px!important;padding-right:10px!important;padding-top:14px!important}
  .calc-header{margin-bottom:16px!important}
  .calc-title{font-size:22px;margin-bottom:6px}
  .calc-subtitle{font-size:13px}
  .product-main-menu{
    justify-content:flex-start;
    overflow-x:auto;
    flex-wrap:nowrap;
    padding-bottom:8px;
    -webkit-overflow-scrolling:touch;
  }
  .product-main-btn{min-width:116px;padding:11px 14px;font-size:12px}
  .wizard-steps{
    display:flex;
    overflow-x:auto;
    scroll-snap-type:x mandatory;
    gap:0;
    padding-bottom:6px;
  }
  .step-btn{flex:0 0 150px;scroll-snap-align:start;padding:9px 6px 10px}
  .step-label{font-size:11px}
  .step-num{width:21px;height:21px;font-size:11px}
  .calc-top-tabs,.calc-sub-tabs{
    flex-wrap:nowrap;
    overflow-x:auto;
    justify-content:flex-start;
    gap:0;
    margin-bottom:10px;
    padding-bottom:6px;
    -webkit-overflow-scrolling:touch;
  }
  .tab-btn,.tab-btn.small{
    flex:0 0 auto;
    min-width:112px;
    padding:10px 12px;
    font-size:11px;
  }
  .calc-section{flex-basis:calc(100vw - 28px);min-width:calc(100vw - 28px)}
  .calc-left-block,.calc-preview-block,.calc-summary-card{
    min-height:calc(100vh - 315px);
    padding:46px 12px 14px;
  }
  .section-price-badge{min-width:82px;min-height:38px;font-size:12px}
  .kf-grid{grid-template-columns:repeat(2,minmax(112px,1fr));gap:8px;justify-content:center}
  .kf-tile{width:100%;min-height:96px}
  .kf-tile img{max-width:46px;max-height:46px}
  .measure-wrap{gap:10px;margin-top:14px}
  .measure-title,.measure-label{font-size:14px}
  .measure-item{padding:8px 0 0}
  .measure-row{grid-template-columns:1fr 96px;gap:8px;margin-bottom:8px}
  .measure-item .form-control[type="number"], .calc-number{height:40px!important;font-size:14px!important;padding:6px 10px!important}
  .range-note{font-size:10px;margin-top:7px}
  .summary-row-value{font-size:12px}
  .summary-row-pro{padding:6px 0}
  .summary-cart-items{max-height:130px}
  .summary-actions{gap:8px}
  .btn-checkout,.btn-add-config{font-size:12px;padding:9px 10px}
  .calc-nav-buttons{display:grid;grid-template-columns:1fr 1fr;gap:10px;width:100%}
  .btn-nav{min-width:0;width:100%;padding:11px 12px}
}

/* ===== правки мобільного меню, іконок, секцій та крапок ===== */
.product-main-btn{
  display:flex;
  align-items:center;
  justify-content:center;
  gap:10px;
}
.product-main-btn img{
  width:26px;
  height:26px;
  object-fit:contain;
  filter:grayscale(1) contrast(1.15);
  opacity:.92;
}
.product-main-btn.active img{
  filter:brightness(0) invert(1);
  opacity:1;
}
.product-main-btn span{display:inline-block}

.section-dots{
  display:flex;
  align-items:center;
  justify-content:center;
  gap:18px;
  margin:22px 0 6px;
}
.section-dot{
  width:15px;
  height:15px;
  border:0;
  border-radius:50%;
  background:#9b9b9b;
  padding:0;
  cursor:pointer;
  transition:.2s ease;
}
.section-dot.active{background:var(--accent);transform:scale(1.08)}
.section-swipe-hint{
  text-align:center;
  color:#777;
  font-size:14px;
  margin-bottom:8px;
}

@media (min-width:1200px){
  .calc-sections-scroll{grid-template-columns:minmax(300px,1fr) minmax(300px,1fr) minmax(300px,.86fr)}
  .section-dots,.section-swipe-hint{display:flex}
}

@media (max-width: 1199.98px){
  .calc-left-block,
  .calc-preview-block,
  .calc-summary-card{
    height:calc(100vh - 300px);
    min-height:560px;
    max-height:720px;
  }
  .calc-summary-card{
    overflow-y:auto;
    overflow-x:hidden;
    -webkit-overflow-scrolling:touch;
  }
  .calc-sections-scroll{scroll-behavior:smooth}
}

@media (max-width: 767.98px){
  .calc-page{padding-left:8px!important;padding-right:8px!important;padding-top:8px!important}
  .calc-header{
    position:relative;
    background:#fff;
    border-bottom:1px solid #ececec;
    padding:8px 8px 12px;
    margin-bottom:14px!important;
  }
  .calc-header::before,
  .navbar-toggler,
  .mobile-burger,
  .hamburger,
  .menu-toggle,
  .bi-list{
    display:none!important;
  }
  .calc-title{font-size:20px;line-height:1.15;margin-bottom:4px}
  .calc-subtitle{font-size:13px;color:#333}

  .product-main-menu{
    display:grid;
    grid-template-columns:repeat(3,1fr);
    gap:10px;
    overflow:visible;
    flex-wrap:unset;
    padding:0 8px 12px;
    margin-bottom:14px!important;
    background:#fff;
    border-bottom:1px solid #ececec;
  }
  .product-main-btn{
    min-width:0;
    width:100%;
    min-height:78px;
    padding:9px 6px;
    border-radius:10px!important;
    flex-direction:column;
    gap:6px;
    font-size:11px;
    line-height:1.1;
    box-shadow:0 1px 0 rgba(0,0,0,.03);
  }
  .product-main-btn img{width:29px;height:29px}

  .wizard-steps{
    display:grid;
    grid-template-columns:repeat(4,1fr);
    gap:8px;
    overflow:visible;
    padding:0 8px 10px;
    border:0;
  }
  .step-btn{
    min-height:52px;
    flex:unset;
    width:100%;
    border:1px solid var(--line-2);
    border-radius:10px!important;
    background:#fff;
    padding:6px 4px;
    flex-direction:column;
    align-items:center;
    justify-content:center;
    gap:3px;
    text-align:center;
  }
  .step-btn::after{display:none}
  .step-num{width:25px;height:25px;font-size:12px;border-radius:7px}
  .step-label{
    display:block;
    max-width:100%;
    font-size:9px;
    line-height:1.1;
    font-weight:700;
    color:#333;
    white-space:normal;
  }

  .calc-section{flex-basis:calc(100vw - 24px);min-width:calc(100vw - 24px)}
  .calc-left-block,.calc-preview-block,.calc-summary-card{
    height:calc(100vh - 315px);
    min-height:510px;
    max-height:650px;
    overflow-y:auto;
    overflow-x:hidden;
    -webkit-overflow-scrolling:touch;
  }
  .calc-summary-card{overflow-y:auto!important}
  .section-dots{margin:12px 0 4px;gap:16px}
  .section-dot{width:14px;height:14px}
  .section-swipe-hint{font-size:13px;margin-bottom:6px}
}

@media (max-width: 380px){
  .product-main-menu{gap:7px;padding-left:4px;padding-right:4px}
  .product-main-btn{min-height:70px;font-size:10px}
  .product-main-btn img{width:25px;height:25px}
  .wizard-steps{grid-template-columns:repeat(3,1fr);gap:7px;padding-left:4px;padding-right:4px}
  .step-label{font-size:8.5px}
}

/* ===== FIX 2026-05: акуратні секції, заміна місцями превʼю/налаштувань ===== */
@media (min-width: 1200px){
  .calc-sections-scroll{
    align-items:start;
    grid-template-columns:minmax(320px,1fr) minmax(320px,1fr) minmax(320px,.92fr);
  }
  .calc-section{
    height:clamp(560px, calc(100vh - 245px), 760px);
    min-height:0;
  }
  .calc-left-block,
  .calc-preview-block,
  .calc-summary-card{
    height:100%;
    min-height:0!important;
    max-height:none;
    overflow-y:auto;
    overflow-x:hidden;
    padding-top:56px;
    scrollbar-width:thin;
  }
  .calc-preview-block{
    display:flex;
    align-items:center;
    justify-content:center;
  }
  .preview-stage,
  .preview-stage.is-shape-step{
    width:100%;
    height:100%;
    min-height:0!important;
    max-height:100%;
    overflow:hidden;
  }
  .preview-canvas-shape{
    height:100%;
    max-height:100%;
    gap:14px;
    justify-content:center;
  }
  .preview-main{
    grid-template-columns:minmax(220px,1fr) 96px;
    gap:16px;
    min-height:0;
  }
  .preview-figure{
    min-height:0!important;
    height:clamp(250px, 42vh, 390px);
    padding:0;
    overflow:hidden;
  }
  .preview-figure img,
  .preview-stage img{
    max-width:100%;
    max-height:100%;
    object-fit:contain;
  }
  .preview-side-control{
    width:96px;
    min-height:0!important;
    height:clamp(260px, 46vh, 440px);
    gap:12px;
    overflow:hidden;
  }
  .preview-side-slider-wrap{
    height:clamp(240px, 42vh, 400px);
    width:52px;
    overflow:visible;
  }
  .preview-range-vertical{
    width:clamp(240px, 42vh, 400px);
    min-width:clamp(240px, 42vh, 400px);
    flex:0 0 clamp(240px, 42vh, 400px);
  }
  .preview-bottom-control{
    width:min(380px, 92%);
    gap:10px;
  }
  .preview-size-label{font-size:18px;}
  .preview-size-label-y{font-size:18px;}
  .preview-info{width:50px;height:50px;font-size:28px;}
  .summary-cart-items{max-height:150px;}
}

@media (max-width: 1199.98px){
  .calc-sections-scroll{
    scroll-behavior:smooth;
    overflow-x:auto!important;
    overflow-y:hidden;
    touch-action:pan-x pan-y;
  }
  .calc-section{
    height:calc(100vh - 300px);
    min-height:560px;
    max-height:720px;
  }
  .calc-left-block,
  .calc-preview-block,
  .calc-summary-card{
    height:100%!important;
    min-height:0!important;
    max-height:none!important;
    overflow-y:auto!important;
    overflow-x:hidden!important;
    scrollbar-width:thin;
  }
  .preview-stage,
  .preview-stage.is-shape-step{
    min-height:0!important;
    height:100%;
    max-height:100%;
    overflow:hidden;
  }
  .preview-canvas-shape{height:100%;max-height:100%;justify-content:center;gap:12px;}
  .preview-main{min-height:0;}
  .preview-figure{min-height:0!important;height:260px;overflow:hidden;}
  .preview-figure img,.preview-stage img{max-width:100%;max-height:100%;object-fit:contain;}
}

@media (max-width: 767.98px){
  .calc-section{
    height:calc(100vh - 315px);
    min-height:510px;
    max-height:650px;
  }
  .calc-left-block,
  .calc-preview-block,
  .calc-summary-card{height:100%!important;}
  .preview-main{grid-template-columns:1fr 58px;}
  .preview-side-control{width:58px;min-height:260px;height:290px;overflow:hidden;}
  .preview-side-slider-wrap{height:270px;width:38px;}
  .preview-range-vertical{width:270px;min-width:270px;flex:0 0 270px;}
  .preview-bottom-control{width:min(245px,100%);}
}


/* ===== FIX: компактне мобільне меню, прибрані крапки/підказка, стрілки секцій ===== */
.section-dots,
.section-swipe-hint{
  display:none!important;
}

.preview-dimension-line-y{
  position:relative;
  height:100%;
  min-height:230px;
  width:18px;
  background:transparent;
}
.preview-dimension-line-y::before{
  content:"";
  position:absolute;
  top:0;
  bottom:0;
  left:50%;
  width:4px;
  transform:translateX(-50%);
  border-radius:999px;
  background:#d0d0d0;
}
.preview-dimension-line-y span{
  position:absolute;
  left:50%;
  top:45%;
  width:18px;
  height:18px;
  transform:translate(-50%,-50%);
  border-radius:50%;
  background:var(--accent);
}
.preview-bottom-line{
  position:relative;
  width:100%;
  height:18px;
}
.preview-bottom-line::before{
  content:"";
  position:absolute;
  left:0;
  right:0;
  top:50%;
  height:4px;
  transform:translateY(-50%);
  border-radius:999px;
  background:#d0d0d0;
}
.preview-bottom-line span{
  position:absolute;
  left:0;
  top:50%;
  width:18px;
  height:18px;
  transform:translateY(-50%);
  border-radius:50%;
  background:var(--accent);
}

.preview-info,
.info-badge{
  border-radius:999px!important;
}

.section-arrow{
  display:none;
  position:absolute;
  z-index:12;
  top:50%;
  transform:translateY(-50%);
  border:0;
  background:transparent;
  color:#5b5b5b;
  font-size:44px;
  line-height:1;
  width:38px;
  height:54px;
  align-items:center;
  justify-content:center;
  padding:0;
}
.section-arrow-prev{left:4px;}
.section-arrow-next{right:4px;}
.section-arrow:active{color:var(--accent);}

@media (min-width:1200px){
  .product-main-menu{
    flex-wrap:nowrap;
    justify-content:center;
    gap:6px;
  }
  .product-main-btn{
    flex:0 0 auto;
    min-width:104px;
    max-width:138px;
    min-height:74px;
    padding:10px 12px;
    flex-direction:column;
    gap:6px;
    font-size:12px;
    line-height:1.15;
  }
  .product-main-btn img{width:30px;height:30px;}
}

@media (max-width: 767.98px){
  .product-main-menu{
    display:flex!important;
    flex-wrap:nowrap!important;
    justify-content:flex-start!important;
    gap:6px!important;
    overflow-x:auto!important;
    overflow-y:hidden!important;
    padding:0 4px 8px!important;
    margin-bottom:8px!important;
    scroll-snap-type:x proximity;
    -webkit-overflow-scrolling:touch;
    scrollbar-width:thin;
  }
  .product-main-btn{
    flex:0 0 76px!important;
    width:76px!important;
    min-width:76px!important;
    min-height:62px!important;
    padding:6px 4px!important;
    border-radius:8px!important;
    gap:4px!important;
    font-size:8.5px!important;
    line-height:1.04!important;
    scroll-snap-align:start;
    text-transform:none!important;
  }
  .product-main-btn img{width:23px!important;height:23px!important;}

  .wizard-steps{
    display:flex!important;
    flex-wrap:nowrap!important;
    overflow-x:auto!important;
    gap:6px!important;
    padding:0 4px 8px!important;
    scrollbar-width:thin;
    -webkit-overflow-scrolling:touch;
  }
  .step-btn{
    flex:0 0 92px!important;
    width:92px!important;
    min-height:48px!important;
    padding:5px 4px!important;
  }
  .step-num{width:22px!important;height:22px!important;font-size:11px!important;}
  .step-label{font-size:8.5px!important;line-height:1.05!important;}

  .section-arrow{display:flex;}
  .calc-section::after{
    content:"i";
    position:absolute;
    z-index:11;
    right:-13px;
    top:50%;
    width:26px;
    height:26px;
    transform:translateY(-50%);
    border-radius:50%;
    background:var(--accent);
    color:#fff;
    font-weight:800;
    font-size:17px;
    line-height:26px;
    text-align:center;
    box-shadow:0 2px 8px rgba(0,0,0,.12);
  }
  .calc-section:last-child::after{display:none;}
  .preview-info{width:44px!important;height:44px!important;font-size:26px!important;}
}

@media (max-width:380px){
  .product-main-btn{flex-basis:72px!important;width:72px!important;min-width:72px!important;font-size:8px!important;}
  .product-main-btn img{width:21px!important;height:21px!important;}
}

/* ===== FIX 2026-05-15: меню, превʼю без повзунків, стрілки стулок ===== */
.preview-main-centered{
  display:flex!important;
  align-items:center!important;
  justify-content:center!important;
  width:100%!important;
  height:100%!important;
  min-height:0!important;
  grid-template-columns:none!important;
}
.preview-main-centered .preview-figure{
  margin:0 auto!important;
  display:flex!important;
  align-items:center!important;
  justify-content:center!important;
}
.preview-bottom-info-only{
  width:100%!important;
  display:flex!important;
  align-items:center!important;
  justify-content:center!important;
  margin-top:12px!important;
}
.preview-side-control,
.preview-dimension-line-y,
.preview-bottom-line,
.preview-size-label{
  display:none!important;
}
.preview-info,
.info-badge{
  display:inline-flex!important;
  align-items:center!important;
  justify-content:center!important;
  width:74px!important;
  height:74px!important;
  border-radius:50%!important;
  background:var(--accent)!important;
  color:#fff!important;
  font-size:42px!important;
  font-weight:800!important;
  line-height:1!important;
}
.kf-shape-arrows{
  display:none;
  align-items:center;
  justify-content:center;
  gap:16px;
  margin:10px 0 2px;
}
.kf-shape-arrow{
  border:0;
  background:transparent;
  color:#555;
  font-size:28px;
  line-height:1;
  font-weight:500;
  padding:0 6px;
}
.kf-shape-arrow:active{color:var(--accent)}
@media (min-width:1200px){
  .product-main-btn{min-width:112px;max-width:150px;}
  .product-main-btn span{white-space:normal;text-align:center;}
  .preview-canvas-shape{align-items:center!important;}
  .preview-main-centered .preview-figure{height:clamp(290px, 52vh, 470px)!important;}
}
@media (max-width:767.98px){
  .kf-shape-arrows{display:flex;}
  .preview-main-centered .preview-figure{height:330px!important;}
  .preview-bottom-info-only{margin-top:4px!important;}
  .preview-info,.info-badge{width:58px!important;height:58px!important;font-size:34px!important;}
}
/* уточнення: великою робимо тільки літеру i у превʼю/нижній підказці, не в підсумку */
.info-badge{
  width:24px!important;
  height:24px!important;
  font-size:14px!important;
}
.calc-note .info-badge{
  width:58px!important;
  height:58px!important;
  font-size:34px!important;
  border-radius:50%!important;
}
.preview-info{
  width:74px!important;
  height:74px!important;
  font-size:42px!important;
}
@media (max-width:767.98px){
  .preview-info,.calc-note .info-badge{width:58px!important;height:58px!important;font-size:34px!important;}
}


/* ===== FIX 2026-05-15 #2: мобільні стрілки під іконками та i на стиках екранів ===== */
@media (max-width:767.98px){
  .kf-shape-arrows{
    display:flex!important;
    align-items:center!important;
    justify-content:center!important;
    gap:22px!important;
    margin:8px 0 4px!important;
    width:100%!important;
  }
  .kf-shape-arrow{
    display:inline-flex!important;
    align-items:center!important;
    justify-content:center!important;
    width:36px!important;
    height:24px!important;
    padding:0!important;
    border:0!important;
    background:transparent!important;
    color:#555!important;
    font-size:28px!important;
    font-weight:400!important;
    line-height:1!important;
  }
  .kf-shape-arrow:active{color:var(--accent)!important;}
  .calc-sections-scroll{overflow-x:auto!important;overflow-y:visible!important;}
  .calc-section::after{
    content:"i"!important;
    display:flex!important;
    align-items:center!important;
    justify-content:center!important;
    position:absolute!important;
    z-index:50!important;
    right:-21px!important;
    top:50%!important;
    width:42px!important;
    height:42px!important;
    transform:translateY(-50%)!important;
    border-radius:50%!important;
    background:var(--accent)!important;
    color:#fff!important;
    font-weight:800!important;
    font-size:26px!important;
    line-height:1!important;
    box-shadow:0 2px 8px rgba(0,0,0,.12)!important;
    pointer-events:none!important;
  }
  .calc-section:last-child::after{display:none!important;}
}
.item-badge[data-product-info]{cursor:pointer;min-width:32px;min-height:32px;border-radius:50%;font-weight:800}
.item-badge[data-product-info]:hover{transform:scale(1.06)}