/* Shared (admin + front) lightweight styling */
.lb-be-admin .lb-be-table input[type="text"],
.lb-be-admin .lb-be-table input[type="url"],
.lb-be-admin .lb-be-table input[type="number"],
.lb-be-admin .lb-be-table textarea,
.lb-be-admin .form-table input[type="text"],
.lb-be-admin .form-table input[type="number"]{ max-width:100%; }

.lb-be-imgpick{ display:flex; gap:10px; align-items:center; }
.lb-be-thumb{ width:52px; height:52px; object-fit:cover; border:1px solid rgba(0,0,0,.1); }
.lb-be-img-actions{ display:flex; gap:6px; flex-wrap:wrap; }

/* Front-end */
.lb-be{ --b:#3F4144; --g:#A3A19D; --bg:#f7f5f3; --border: rgba(0,0,0,.08); font-family: system-ui,-apple-system,Segoe UI,Roboto,Arial,sans-serif; }
.lb-be-card{ max-width:900px; margin:0 auto; background:#fff; border:1px solid var(--border); box-shadow:0 18px 55px rgba(0,0,0,.10); padding:18px; }
.lb-be-head{ display:flex; justify-content:space-between; align-items:baseline; gap:14px; }
.lb-be-title{ font-weight:800; text-transform:uppercase; letter-spacing:.6px; color:var(--b); }
.lb-be-readout{ font-weight:800; color:var(--b); }
.lb-be-slider{ width:100%; margin:14px 0 6px; }
.lb-be-section{ margin-top:16px; }
.lb-be-section-title{ font-weight:800; text-transform:uppercase; letter-spacing:.6px; color:var(--b); margin-bottom:10px; }
/* Desired installation(s) */
.lb-be-must{
  display:grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap:12px;
}
@media (max-width:1000px){ .lb-be-must{ grid-template-columns: repeat(2, minmax(0,1fr)); } }
@media (max-width:520px){ .lb-be-must{ grid-template-columns: 1fr; } }

.lb-be-check{
  display:flex;
  align-items:center;
  gap:10px;
  border:1px solid var(--border);
  padding:12px 12px;
  background:#fff;
  border-radius:16px;
  box-shadow: 0 10px 26px rgba(0,0,0,.06);
  transition: transform .10s ease, box-shadow .10s ease, border-color .10s ease;
  cursor:pointer;
}
.lb-be-check:hover{ transform: translateY(-1px); box-shadow: 0 14px 34px rgba(0,0,0,.10); }
.lb-be-check input{ transform: translateY(1px) scale(1.05); }
.lb-be-check.is-checked{ border-color: rgba(63,65,68,.55); box-shadow: 0 16px 40px rgba(0,0,0,.12); }

/* Make the thumbnails feel more "designed" */
.lb-be-check .lb-be-thumb{ width:64px; height:64px; border-radius:12px; }
.lb-be-warning{ padding:10px 12px; border:1px solid rgba(180,0,0,.25); background:rgba(180,0,0,.06); color:#700; margin-bottom:10px; }

/* Styles (installations) */
.lb-be-styles{ display:grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap:10px; }
@media (max-width:900px){ .lb-be-styles{ grid-template-columns: 1fr; } }
.lb-be-style{ display:block; cursor:pointer; }
.lb-be-style input{ position:absolute; opacity:0; pointer-events:none; }
.lb-be-style__box{ position:relative; border:1px solid var(--border); background:#fff; padding:14px 14px; border-radius:16px; box-shadow: 0 10px 26px rgba(0,0,0,.06); transition: transform .12s ease, box-shadow .12s ease, border-color .12s ease; }
.lb-be-style:hover .lb-be-style__box{ transform: translateY(-1px); box-shadow: 0 14px 34px rgba(0,0,0,.10); }
.lb-be-style__name{ font-weight:900; color:var(--b); font-size:15px; letter-spacing:.2px; }
.lb-be-style__hint{ font-size:13px; opacity:.82; margin-top:6px; }
.lb-be-style__includes{ margin-top:10px; padding-top:10px; border-top:1px solid rgba(0,0,0,.06); }
.lb-be-style__includesLabel{ font-size:12px; font-weight:800; opacity:.75; text-transform:uppercase; letter-spacing:.6px; }
.lb-be-style__includesList{ margin:6px 0 0 16px; padding:0; font-size:13px; opacity:.9; }
.lb-be-style__includesList li{ margin:2px 0; }
.lb-be-style.is-selected .lb-be-style__box{ border-color: rgba(63,65,68,.7); box-shadow: 0 14px 34px rgba(0,0,0,.12); }
.lb-be-style.is-over .lb-be-style__box{ border-color: rgba(180,0,0,.35); background: rgba(180,0,0,.03); }
.lb-be-style.is-affordable .lb-be-style__box{ border-color: rgba(0,130,0,.35); background: rgba(0,130,0,.05); }
.lb-be-stylehint{ margin-top:10px; font-size:13px; font-weight:700; color: rgba(0,110,0,.95); }

.lb-be-cols{ display:grid; grid-template-columns: 1fr 1fr; gap:18px; }
@media (max-width:800px){ .lb-be-cols{ grid-template-columns:1fr; } }

.lb-be-subtitle{ font-weight:800; color:var(--b); margin:0 0 8px; }
.lb-be-list{ display:flex; flex-direction:column; gap:10px; }

.lb-be-item{ display:flex; justify-content:space-between; gap:12px; align-items:center; padding:10px 12px; border:1px solid var(--border); background:#fff; }
.lb-be-item-left{ display:flex; gap:10px; align-items:center; min-width:0; }
.lb-be-item-name{ font-weight:700; color:var(--b); text-decoration:none; }
.lb-be-qty{ border:1px solid var(--border); padding:6px 10px; border-radius:10px; white-space:nowrap; }
.lb-be-empty{ opacity:.7; }
.lb-be-note{ margin-top:14px; font-size:14px; opacity:.85; }
.lb-be-cta{ margin-top:14px; }
.lb-be-btn{ display:inline-block; background:var(--b); color:#fff; text-decoration:none; padding:10px 14px; font-weight:800; text-transform:uppercase; letter-spacing:.6px; }
.lb-be-derig-note{ font-size:13px; opacity:.9; padding:6px 2px; }

.lb-be-subnote{ font-size:14px; opacity:.85; margin-top:6px; }
.lb-be-remaining{ margin:10px 0 12px; font-weight:700; color:var(--b); }
.lb-be-cards{ display:grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap:12px; }
@media (max-width:1000px){ .lb-be-cards{ grid-template-columns: repeat(2, minmax(0,1fr)); } }
.lb-be-cardopt{
  appearance:none; -webkit-appearance:none;
  border:1px solid var(--border);
  background:#fff;
  padding:0;
  text-align:left;
  cursor:pointer;
  box-shadow: 0 10px 26px rgba(0,0,0,.06);
  overflow:hidden;
  transition: transform .08s ease, box-shadow .08s ease, border-color .08s ease;
}
.lb-be-cardopt:hover{ transform: translateY(-1px); box-shadow: 0 14px 32px rgba(0,0,0,.10); }
.lb-be-cardopt.is-selected{ border-color: rgba(63,65,68,.65); box-shadow: 0 16px 40px rgba(0,0,0,.14); }
.lb-be-cardopt.is-subtle{ opacity:.55; cursor:not-allowed; }
.lb-be-cardopt-img{
  width:100%;
  aspect-ratio: 4 / 3;
  background-size: cover;
  background-position: center;
  background-color: #e6e6e6;
}
@media (max-width:1000px){ .lb-be-cardopt-img{ aspect-ratio: 1 / 1; } }
.lb-be-cardopt-img.is-empty{
  background-image:none !important;
}
.lb-be-cardopt-body{ padding:10px 10px 12px; display:flex; justify-content:space-between; align-items:flex-start; gap:10px; }
.lb-be-cardopt-title{ font-weight:800; color:var(--b); line-height:1.15; text-transform:uppercase; letter-spacing:.4px; font-size:13px; }
.lb-be-cardopt-badge{
  border:1px solid var(--border);
  padding:6px 10px;
  border-radius:999px;
  font-weight:800;
  white-space:nowrap;
  font-size:12px;
  background: var(--bg);
  color: var(--b);
}

.lb-be-cardopt-text{ display:flex; flex-direction:column; gap:4px; min-width:0; }
.lb-be-cardopt-meta{ font-size:12px; opacity:.75; font-weight:600; }
.lb-be-cardopt.is-selected .lb-be-cardopt-badge{ background: var(--b); color:#fff; border-color: var(--b); }

.lb-be-or{
  display:flex;
  align-items:center;
  justify-content:center;
  margin: 10px 0 12px;
  position:relative;
}
.lb-be-or:before{
  content:"";
  position:absolute;
  left:0; right:0;
  height:1px;
  background: var(--border);
}
.lb-be-or span{
  position:relative;
  z-index:1;
  background:#fff;
  padding: 0 10px;
  font-weight:900;
  letter-spacing:2px;
  color: var(--g);
  text-transform:uppercase;
  font-size:12px;
}
.lb-be-minmsg{
  padding:10px 12px;
  border:1px solid rgba(63,65,68,.18);
  background: rgba(247,245,243,.9);
  color: var(--b);
  font-weight:700;
  margin-top:10px;
}

/* Mobile: carousel-style scroll for options + extras */
@media (max-width:900px){
  .lb-be-cards{
    display:flex;
    overflow-x:auto;
    gap:12px;
    padding-bottom:6px;
    scroll-snap-type:x mandatory;
    -webkit-overflow-scrolling:touch;
  }
  .lb-be-cards::-webkit-scrollbar{ display:none; }
  .lb-be-cardopt,
  .lb-be-cardprod{
    flex: 0 0 78vw;
    scroll-snap-align:center;
  }
}
@media (max-width:520px){
  .lb-be-cardopt,
  .lb-be-cardprod{ flex-basis: 86vw; }
}


.lb-be-item--removable .lb-be-item-right{ display:flex; align-items:center; gap:10px; }
.lb-be-removebtn{ border:1px solid #ddd; background:#fff; border-radius:999px; padding:6px 10px; cursor:pointer; font-size:12px; }
.lb-be-removebtn:hover{ background:#f6f6f6; }

.lb-be-bespoke{ background:#fff; border:1px solid #e5e5e5; border-radius:14px; padding:14px; margin-top:12px; }
.lb-be-bespoke__brief{ width:100%; border:1px solid #e5e5e5; border-radius:12px; padding:10px; resize:vertical; }
.lb-be-bespoke__actions{ margin-top:10px; }

/* Product cards (quantity controls) */
.lb-be-cardprod{ border:1px solid var(--border); background:#fff; box-shadow: 0 10px 26px rgba(0,0,0,.06); overflow:hidden; }
.lb-be-cardprod__media{ display:block; width:100%; aspect-ratio: 4/3; background:#e6e6e6; }
.lb-be-cardprod__media img{ width:100%; height:100%; object-fit:cover; display:block; }
.lb-be-cardprod__placeholder{ width:100%; height:100%; }
.lb-be-cardprod__body{ padding:10px 10px 12px; display:flex; flex-direction:column; gap:8px; }
.lb-be-cardprod__title{ font-weight:800; color:var(--b); text-transform:uppercase; letter-spacing:.4px; font-size:13px; text-decoration:none; }
.lb-be-cardprod__blurb{ font-size:13px; opacity:.82; line-height:1.25; }
.lb-be-badge{
  display:inline-flex;
  align-self:flex-start;
  border:1px solid var(--border);
  background: var(--bg);
  color: var(--b);
  padding:5px 9px;
  border-radius:999px;
  font-weight:900;
  letter-spacing:.3px;
  font-size:11px;
  text-transform:uppercase;
}

/* Price intentionally hidden (final price may vary) */

/* Extras feature block (make add-ons as prominent as products) */
.lb-be-extras-feature{
  border:1px solid var(--border);
  background: var(--bg);
  padding:12px;
}
.lb-be-section-title--extras{ display:flex; align-items:center; gap:10px; }
.lb-be-section-title--extras:after{
  content:"High impact add-ons";
  font-weight:800;
  font-size:12px;
  letter-spacing:.2px;
  text-transform:none;
  padding:6px 10px;
  border:1px solid var(--border);
  border-radius:999px;
  background:#fff;
  color:var(--b);
}

/* Quote summary */
.lb-be-quote-summary{ margin:0 0 12px; padding:10px 10px 12px; border:1px solid var(--border); background: var(--bg); }
.lb-be-quote-summary__title{ font-weight:900; text-transform:uppercase; letter-spacing:.6px; color:var(--b); margin-bottom:6px; }
.lb-be-quote-summary__meta{ font-weight:700; opacity:.85; margin-bottom:8px; }
.lb-be-quote-summary__list{ display:flex; flex-direction:column; gap:8px; max-height:32vh; overflow:auto; padding-right:4px; }

.lb-be-qtyctl{ display:flex; align-items:center; gap:8px; }
.lb-be-qtyctl__btn{ border:1px solid var(--border); background:var(--bg); color:var(--b); font-weight:900; width:34px; height:34px; line-height:32px; padding:0; cursor:pointer; }
.lb-be-qtyctl__btn:disabled{ opacity:.45; cursor:not-allowed; }
.lb-be-qtyctl__input{ width:56px; height:34px; border:1px solid var(--border); padding:0 8px; font-weight:800; }

/* Modal (Request a quote) */
.lb-be-modal{ position:fixed; inset:0; z-index:9999; }
.lb-be-modal__backdrop{ position:absolute; inset:0; background: rgba(0,0,0,.45); }
.lb-be-modal__panel{ position:relative; max-width:720px; width:calc(100% - 28px); margin:6vh auto 0; background:#fff; border:1px solid var(--border); box-shadow:0 22px 80px rgba(0,0,0,.28); padding:14px; max-height:88vh; overflow:auto; }
.lb-be-modal__head{ display:flex; justify-content:space-between; align-items:center; gap:12px; padding:2px 2px 10px; border-bottom:1px solid var(--border); }
.lb-be-modal__title{ font-weight:900; text-transform:uppercase; letter-spacing:.6px; color:var(--b); }
.lb-be-modal__close{ border:1px solid var(--border); background:var(--bg); width:36px; height:36px; font-size:22px; line-height:32px; cursor:pointer; }

.lb-be-form{ padding-top:12px; }
.lb-be-quote-summary{ border:1px solid var(--border); background: var(--bg); padding:10px 10px; margin-bottom:12px; }
.lb-be-quote-summary__title{ font-weight:900; text-transform:uppercase; letter-spacing:.6px; color:var(--b); margin-bottom:6px; }
.lb-be-quote-summary__meta{ font-size:13px; font-weight:800; color:var(--b); opacity:.85; margin-bottom:8px; }
.lb-be-quote-summary__list .lb-be-item{ background:#fff; }
.lb-be-form__grid{ display:grid; grid-template-columns: 1fr 1fr; gap:12px; }
@media (max-width:720px){ .lb-be-form__grid{ grid-template-columns:1fr; } }
.lb-be-form__grid label{ display:flex; flex-direction:column; gap:6px; font-weight:800; color:var(--b); }
.lb-be-form__grid input,.lb-be-form__grid textarea{ border:1px solid var(--border); padding:10px 10px; font-weight:600; }
.lb-be-modal__panel textarea{ width:100%; box-sizing:border-box; }
.lb-be-quote-bespoke{ border:1px solid var(--border); background: var(--bg); padding:10px 10px; margin-bottom:12px; }
.lb-be-quote-bespoke textarea{ border:1px solid var(--border); padding:10px 10px; font-weight:600; }
.lb-be-form__full{ grid-column:1 / -1; }
.lb-be-form__actions{ margin-top:12px; display:flex; align-items:center; gap:12px; flex-wrap:wrap; }
.lb-be-btn.lb-be-btn--small{ padding:10px 14px; }
.lb-be-form__status{ font-weight:700; opacity:.85; }


.lb-be-style__applied{
  position:absolute;
  top:10px;
  right:10px;
  font-size:12px;
  font-weight:900;
  color:var(--b);
  opacity:.0;
  transform: translateY(-2px);
  transition: opacity .12s ease, transform .12s ease;
}
.lb-be-style.is-selected .lb-be-style__applied{
  opacity:.85;
  transform: translateY(0);
}
.lb-be-stylehelp{
  grid-column: 1 / -1;
  font-size:13px;
  opacity:.78;
  margin-top:6px;
}



/* Planner (choose your approach) */
.lb-be-planner-grid{
  display:grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap:12px;
  margin-top:10px;
}
@media (max-width: 900px){
  .lb-be-planner-grid{ grid-template-columns:1fr; }
}
.lb-be-planner-card{
  appearance:none;
  border:1px solid var(--border);
  background: #fff;
  border-radius: 14px;
  padding:16px 16px;
  text-align:left;
  cursor:pointer;
  box-shadow: 0 10px 30px rgba(0,0,0,.04);
  transition: transform .12s ease, box-shadow .12s ease, border-color .12s ease;
}
.lb-be-planner-card:hover{
  transform: translateY(-1px);
  box-shadow: 0 14px 38px rgba(0,0,0,.06);
}
.lb-be-planner-card.is-active{
  border-color: var(--b);
  box-shadow: 0 14px 38px rgba(0,0,0,.08);
}
.lb-be-planner-card__title{
  font-weight: 900;
  font-size: 15px;
  margin-bottom: 6px;
}
.lb-be-planner-card__desc{
  font-size: 13px;
  opacity: .82;
  line-height: 1.35;
}
.lb-be-planner-note{
  margin-top: 10px;
  font-size: 12.5px;
  opacity: .75;
}