.pmw-calc { border:1px solid #e5e5e5; padding:16px; border-radius:8px; max-width:860px }
.pmw-calc__units { display:flex; align-items:center; gap:12px; margin-bottom:12px }
.pmw-calc__unit-switch label { margin-right:12px; cursor:pointer }
.pmw-calc__row { position:relative; margin-bottom:12px }
.pmw-calc__product { width:100%; padding:10px; border:1px solid #ddd; border-radius:6px }

.pmw-calc__suggestions { position:absolute; left:0; right:0; top:100%; z-index:20; background:#fff; border:0px solid #ddd; border-top:none; border-radius:0 0 6px 6px; max-height:220px; overflow:auto }
.pmw-calc__suggestions.is-hidden { display:none }
.pmw-calc__suggest-item { padding:10px 12px; border-top:1px solid #f3f3f3; cursor:pointer }
.pmw-calc__suggest-item:hover, .pmw-calc__suggest-item:focus { background:#f9f9f9 }
.pmw-calc__suggest-item.is-empty { color:#777; cursor:default }

.pmw-calc__grid { display:grid; grid-template-columns:repeat(3, 1fr); gap:12px; margin-top:8px }
.pmw-calc__field input { width:100%; padding:10px; border:1px solid #ddd; border-radius:6px }

.pmw-calc__actions { display:flex; align-items:center; gap:12px; margin-top:12px }
.pmw-btn { appearance:none; border:1px solid #ddd; background:#fff; padding:10px 14px; border-radius:8px; cursor:pointer; font-weight:600 }
.pmw-btn--primary { background:#111; color:#fff; border-color:#111 }
.pmw-btn--ghost { background:#fff }
.pmw-btn.is-busy { opacity:.6; pointer-events:none }
.pmw-calc__status { font-size:14px; color:#666 }
.pmw-calc__status.is-ok { color:#17863e }
.pmw-calc__status.is-err { color:#b80000 }

.pmw-calc__results { display:grid; grid-template-columns:1fr 1fr; gap:12px; margin-top:16px }
.pmw-calc__result { background:#fafafa; border:1px solid #eee; border-radius:8px; padding:12px }
.pmw-calc__label { font-weight:600; margin-bottom:6px }
.pmw-calc__values { display:flex; align-items:baseline; gap:10px; font-size:15px }
.pmw-sep { color:#ccc }

/* Templates */
.pmw-calc--tpl-compact .pmw-calc__grid { grid-template-columns:1fr 1fr; }
.pmw-calc--tpl-compact .pmw-calc__results { grid-template-columns:1fr; }

.pmw-calc--tpl-stacked .pmw-calc__units { margin-bottom:8px }
.pmw-calc--tpl-stacked .pmw-calc__grid { grid-template-columns:1fr; }
.pmw-calc--tpl-stacked .pmw-calc__actions { flex-direction:column; align-items:flex-start }

/* Responsive */
@media (max-width: 1100px){
  .pmw-calc__grid { grid-template-columns:1fr; }
  .pmw-calc__results { grid-template-columns:1fr; }
  .pmw-calc--tpl-main .pmw-main__dim-label {
  width: 100px;}
}



/* -------- Template: main -------- */
.pmw-calc--tpl-main { border: 0; padding: 0; }

/* Units as three equal pills */
.pmw-calc--tpl-main .pmw-main__unit-switch {
  display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; margin-bottom: 18px;
}
.pmw-calc--tpl-main .pmw-pill { display:block; position:relative; cursor:pointer; }
.pmw-calc--tpl-main .pmw-pill input { position:absolute; inset:0; opacity:0; pointer-events:none; }
.pmw-calc--tpl-main .pmw-pill span {
  display:block; text-align:center; padding:12px 16px; border-radius:50px;
  background:#fff; color:#010101; border:1px solid #ddd; transition:background .2s,color .2s,border-color .2s;
}
.pmw-calc--tpl-main .pmw-pill:hover span { background:#010101; color:#fff; border-color:#010101; }
.pmw-calc--tpl-main .pmw-pill input:checked + span { background:#010101; color:#fff; border-color:#010101; }

/* Product selector pill */
.pmw-calc--tpl-main .pmw-pill-input {
  width:100%; background:#fff; border:1px solid #ddd; border-radius:50px; padding:14px 18px;
}
.pmw-calc--tpl-main .pmw-main__row { position:relative; margin-bottom:16px; }

/* Suggestions inherit default dropdown styling */
.pmw-calc--tpl-main .pmw-calc__suggestions { border-radius:0 0 16px 16px; }

/* Dimensions - label capsule plus white input capsule forming one pill */
.pmw-calc--tpl-main .pmw-main__grid { display:grid; grid-template-columns:repeat(3, 1fr); gap:12px; }
@media (max-width: 900px){ .pmw-calc--tpl-main .pmw-main__grid { grid-template-columns:1fr; } }
.pmw-calc--tpl-main .pmw-main__dim { display:flex; align-items:stretch; width:100%; }
.pmw-calc--tpl-main .pmw-main__dim-label {
   background:#010101; color:#fff; padding:10px 16px; border-radius:50px; font-weight:600; white-space:nowrap; border:1px solid #010101; border-right:0;
}
.pmw-calc--tpl-main .pmw-main__dim-input {
  background:#fff; border:1px solid #fff; border-left:0; border-radius:0 50px 50px 0; flex:1 1 auto; min-width:0;
}
.pmw-calc--tpl-main .pmw-main__dim-input input {
  width:100%; border:0; background:transparent; padding:10px 16px; border-radius:0 50px 50px 0; outline:none;
}

 .pmw-main__dim {
    background: #fff;
    border-radius: 50px;
}

/* Buttons */
.pmw-calc--tpl-main .pmw-main__actions { margin-top:16px; }
.pmw-calc--tpl-main .pmw-main__buttons { display:flex; gap:12px; }
.pmw-calc--tpl-main .pmw-btn {
  font-family: "Gill Sans", "Gill Sans MT", Calibri, sans-serif;
  font-size:15px; font-weight:400; padding:12px 24px; border-radius:50px; border:1px solid #ccc; cursor:pointer;
  transition:transform .06s ease, box-shadow .06s ease;
}
.pmw-calc--tpl-main .pmw-btn:active { transform:translateY(1px); }
.pmw-calc--tpl-main .pmw-btn-calc {
  background:#fff; color:#010101; border-color:#ccc;
}
.pmw-calc--tpl-main .pmw-btn-calc:hover { box-shadow:0 1px 0 rgba(0,0,0,.06); }
.pmw-calc--tpl-main .pmw-btn-quote {
  background:#E30614; color:#fff; border-color:#E30614;
}
.pmw-calc--tpl-main .pmw-btn-quote:hover { box-shadow:0 1px 0 rgba(0,0,0,.12); }

/* Status line should not resize buttons */
.pmw-calc--tpl-main .pmw-main__status-wrap { flex-basis:100%; }
.pmw-calc--tpl-main .pmw-calc__status { display:block; height:18px; line-height:18px; margin-top:6px; }
.pmw-calc--tpl-main .pmw-calc__status.is-ok { color:#17863e; }
.pmw-calc--tpl-main .pmw-calc__status.is-err { color:#b80000; }

/* Results hidden until calculated */
.pmw-calc--tpl-main .pmw-main__results { margin-top:16px; }
.pmw-calc--tpl-main:not(.is-calculated) .pmw-calc__results { display:none; }





.pmw-calc--tpl-main .pmw-calc__results { display: grid; }
.pmw-calc--tpl-main:not(.is-calculated) .pmw-calc__results { display: none !important; }



/* -------- Template: product -------- */
.pmw-calc--tpl-product { border: 0; padding: 0; }

/* Units as three equal pills */
.pmw-calc--tpl-product .pmw-main__unit-switch {
  display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; margin-bottom: 18px;
}
.pmw-calc--tpl-product .pmw-pill { display:block; position:relative; cursor:pointer; }
.pmw-calc--tpl-product .pmw-pill input { position:absolute; inset:0; opacity:0; pointer-events:none; }
.pmw-calc--tpl-product .pmw-pill span {
  display:block; text-align:center; padding:12px 16px; border-radius:50px;
  background:#fff; color:#010101; border:1px solid #fff; transition:background .2s,color .2s,border-color .2s;
}
.pmw-calc--tpl-product .pmw-pill:hover span { background:#010101; color:#fff; border-color:#010101; }
.pmw-calc--tpl-product .pmw-pill input:checked + span { background:#010101; color:#fff; border-color:#010101; }

/* Product selector pill */
.pmw-calc--tpl-product .pmw-pill-input {
  width:100%; background:#fff; border:1px solid #fff; border-radius:50px; padding:14px 18px;
}
.pmw-calc--tpl-product .pmw-main__row { position:relative; margin-bottom:16px; }

/* Suggestions inherit default dropdown styling */
.pmw-calc--tpl-product .pmw-calc__suggestions { border-radius:0 0 16px 16px; }

/* Dimensions - label capsule plus white input capsule forming one pill */

.pmw-calc--tpl-product .pmw-main__grid {
  display: grid !important;
  grid-template-columns: 1fr !important;
  gap: 12px !important;
}

    .pmw-calc--tpl-product .pmw-main__dim { 
        display:flex; 
        align-items:stretch; 
        width:100%;
    }
    
    .pmw-calc--tpl-product .pmw-main__dim-label {
   background:#010101; 
   color:#fff; 
   padding:10px 16px; 
   border-radius:50px; 
   font-weight:600; 
   white-space:nowrap; 
   border:1px solid #010101; 
   border-right:0;
}

.pmw-calc--tpl-product .pmw-main__dim-input {
  background:#fff; border:1px solid #fff; border-left:0; border-radius:0 50px 50px 0; flex:1 1 auto; min-width:0;
}
.pmw-calc--tpl-product .pmw-main__dim-input input {
  width:100%; border:0; background:transparent; padding:10px 16px; border-radius:0 50px 50px 0; outline:none;
}

.pmw-calc--tpl-product .pmw-main__dim {
    background: #fff;
    border-radius: 50px;
}

/* Buttons */

.pmw-calc--tpl-product .pmw-btn {
  font-family: "Gill Sans", "Gill Sans MT", Calibri, sans-serif;
  font-size:15px; font-weight:400; padding:12px 24px; border-radius:50px; border:1px solid #ccc; cursor:pointer;
  transition:transform .06s ease, box-shadow .06s ease;
}

.pmw-calc--tpl-product .pmw-main__actions {
    margin-top: -10px;
}

.pmw-calc--tpl-product .pmw-main__actions,
.pmw-calc--tpl-product .pmw-main__buttons {
 display: flex !important;
  flex-direction: column !important;
  gap: 12px !important;
  align-items: stretch !important;
  width: 100%;
  margin-top: 12px;
}



.pmw-calc--tpl-product .pmw-btn:active { transform:translateY(1px); }
.pmw-calc--tpl-product .pmw-btn-calc {
  background:#fff; color:#010101; border-color:#ccc;
}
.pmw-calc--tpl-product .pmw-btn-calc:hover { box-shadow:0 1px 0 rgba(0,0,0,.06); }
.pmw-calc--tpl-product .pmw-btn-quote {
  background:#000; color:#fff; border-color:#E30614;
}
.pmw-calc--tpl-product .pmw-btn-quote:hover { box-shadow:0 1px 0 rgba(0,0,0,.12); }

/* Status line should not resize buttons */
.pmw-calc--tpl-product .pmw-main__status-wrap { flex-basis:100%; }
.pmw-calc--tpl-product .pmw-calc__status { display:block; height:18px; line-height:18px; margin-top:6px; }
.pmw-calc--tpl-product .pmw-calc__status.is-ok { color:#17863e; }
.pmw-calc--tpl-product .pmw-calc__status.is-err { color:#b80000; }

/* Results hidden until calculated */
.pmw-calc--tpl-product .pmw-main__results { margin-top:16px; }
.pmw-calc--tpl-product:not(.is-calculated) .pmw-calc__results { display:none; }

.pmw-calc--tpl-product .pmw-calc__results { display: grid; }
.pmw-calc--tpl-product:not(.is-calculated) .pmw-calc__results { display: none !important; }

.pmw-calc--tpl-product .pmw-calc__status.is-ok { color:#fff }
.pmw-calc--tpl-product .pmw-calc__status.is-err { color:#000 }