/* ============================================================
   Build Your Backyard — Checklist Estimator
   Extends the PoolsAndYards design system (style.css must load first)
   ============================================================ */

.builder-shell{ max-width: 1240px; margin: 0 auto; padding: 0 32px 100px; }
@media (max-width: 640px){ .builder-shell{ padding: 0 18px 80px; } }

.builder-intro{ padding: 70px 0 30px; text-align:center; max-width: 680px; margin: 0 auto; }
.builder-intro h1{ font-size: clamp(2.2rem, 4.4vw, 3.2rem); }
.builder-intro p{ font-size: 1.05rem; }

/* ---------- Two-column layout: features left, sticky summary right ---------- */
.builder-layout{
  display:grid; grid-template-columns: 1.6fr 1fr; gap: 2.6em; align-items:flex-start;
  margin-bottom: 3em;
}
@media (max-width: 980px){ .builder-layout{ grid-template-columns: 1fr; } }

/* ---------- Photo feature cards ---------- */
.feature-grid{
  display:grid; grid-template-columns: repeat(2, 1fr); gap: 1.4em;
}
@media (max-width: 640px){ .feature-grid{ grid-template-columns: 1fr; } }

.feature-card{
  background:#fff; border: 1px solid var(--border); border-radius: 10px; overflow:hidden;
  box-shadow: var(--shadow-sm);
}
.feature-card .fphoto{ aspect-ratio: 16/10; overflow:hidden; }
.feature-card .fphoto img{ width:100%; height:100%; object-fit:cover; display:block; }
.feature-card .frows{ padding: .3em; }

.frow{
  display:flex; align-items:center; justify-content:space-between; gap:1em;
  padding: 1em 1.1em; cursor:pointer; border-radius:6px; transition: background .15s ease;
}
.frow:hover{ background: var(--bg); }
.frow .left{ display:flex; align-items:center; gap:.9em; }
.frow .box{
  width:22px; height:22px; border-radius:6px; border: 1.5px solid var(--border);
  flex-shrink:0; display:flex; align-items:center; justify-content:center;
  color:#fff; font-size:.75rem; transition: all .15s ease;
}
.frow.checked .box{ background: var(--accent); border-color: var(--accent); }
.frow .name{ font-weight:600; font-size:.95rem; color: var(--text); }
.frow .price{ font-size:.82rem; color:#8a8578; font-weight:500; white-space:nowrap; }
.frow.checked .price{ color: var(--accent); }

.frow.nested{
  margin-left: 1.6em; border-left: 2px solid var(--border); padding-left: 1em;
  opacity: .4; pointer-events: none;
}
.frow.nested.enabled{ opacity: 1; pointer-events: auto; }
.frow.nested .name{ font-size:.88rem; }

/* ---------- Sticky estimate sidebar ---------- */
.estimate-sidebar{
  position: sticky; top: 110px;
  background: var(--text); color:#fff; border-radius: 10px;
  padding: 1.8em; box-shadow: var(--shadow-md);
}
@media (max-width: 980px){ .estimate-sidebar{ position: static; } }

.estimate-sidebar h4{
  font-size:.78rem; text-transform:uppercase; letter-spacing:.1em; color:#E7C9A9;
  font-family: var(--font-body); font-weight:700; margin-bottom: 1em;
}
.estimate-items{ min-height: 30px; margin-bottom: 1em; max-height: 320px; overflow-y: auto; }
.estimate-item{
  display:flex; justify-content:space-between; gap:1em; padding: .6em 0;
  border-bottom: 1px solid rgba(255,255,255,.12); font-size:.86rem;
}
.estimate-item .n{ color: rgba(255,255,255,.85); }
.estimate-item .p{ color:#E7C9A9; font-weight:600; white-space:nowrap; }
.estimate-empty{ color: rgba(255,255,255,.4); font-size:.85rem; font-style:italic; padding: .6em 0; }

.estimate-total-row{
  display:flex; justify-content:space-between; align-items:baseline;
  padding-top: 1em; border-top: 1.5px solid rgba(255,255,255,.2); margin-bottom: 1.4em;
}
.estimate-total-row .label{ font-size:.82rem; color: rgba(255,255,255,.7); }
.estimate-total-row .amount{ font-family: var(--font-display); font-size: 1.9rem; font-weight:700; color:#fff; }

.estimate-sidebar .btn{ width:100%; justify-content:center; }
.estimate-note{ font-size:.75rem; color: rgba(255,255,255,.45); margin-top:1em; line-height:1.5; }

/* ---------- Reference price list ---------- */
.price-ref{ margin-top: 4em; }
.price-ref-list{ background:#fff; border:1px solid var(--border); border-radius: 10px; overflow:hidden; }
.price-ref-row{
  display:flex; justify-content:space-between; align-items:center; gap:1em;
  padding: 1.1em 1.5em; border-bottom: 1px solid var(--border); font-size:.92rem;
}
.price-ref-row:last-child{ border-bottom:none; }
.price-ref-row .n{ font-weight:600; color: var(--text); }
.price-ref-row .p{ color: var(--accent); font-weight:600; white-space:nowrap; }

/* ---------- Featured Backyard ---------- */
.featured-section{ background: var(--text); padding: 90px 0; margin-top: 5em; }
.featured-section .wrap{ max-width: 1180px; }
.featured-head{ text-align:center; max-width:640px; margin: 0 auto 3em; color:#fff; }
.featured-head .eyebrow{ color:#E7C9A9; }
.featured-head h2{ color:#fff; }
.featured-head p{ color: rgba(255,255,255,.7); }

.featured-grid{
  display:grid; grid-template-columns: repeat(4, 1fr); grid-auto-rows: 160px; gap: .8em;
  margin-bottom: 3em;
}
@media (max-width: 900px){ .featured-grid{ grid-template-columns: repeat(2,1fr); grid-auto-rows: 200px; } }
.featured-grid img{ width:100%; height:100%; object-fit:cover; border-radius:6px; }
.featured-grid .big{ grid-column: span 2; grid-row: span 2; }
@media (max-width: 900px){ .featured-grid .big{ grid-column: span 2; grid-row: span 1; } }

.featured-price-card{
  background: rgba(255,255,255,.06); border: 1px solid rgba(255,255,255,.14); border-radius: 10px;
  padding: 2.4em; text-align:center; max-width: 560px; margin: 0 auto;
}
.featured-price-card .amount{ font-family: var(--font-display); font-size: 2.6rem; color:#fff; font-weight:700; margin: .2em 0; }
.featured-price-card p{ color: rgba(255,255,255,.65); font-size:.9rem; margin:0 0 1.4em; }
.featured-price-card .includes{ font-size:.82rem; color: rgba(255,255,255,.75); line-height:1.7; margin-bottom:1.6em; }