/* =========================================================
   Curtains configurator — page-specific styles only.
   Shared design-system pieces (.wrap, .kicker, .btn, .sec-head,
   .ph/.ph-dark, .liana-contact, colors) already live in
   liana-theme.css / liana-home.css and are reused as-is.
   Everything unique to this page is prefixed .cf- to avoid any
   chance of colliding with WooCommerce or theme classes.
   ========================================================= */

/* ---------- Intro ---------- */
.cf-intro{background:var(--bone);padding:72px 0 64px;border-bottom:1px solid var(--hairline)}
.cf-intro .wrap{display:grid;grid-template-columns:1.1fr .9fr;gap:64px;align-items:center}
.cf-intro h1{font-size:clamp(30px,3.6vw,46px);font-weight:300;line-height:1.5}
.cf-intro h1 em{font-style:normal;font-weight:500}
.cf-intro p{font-size:15.5px;color:var(--muted);margin-top:16px;max-width:480px}
.cf-intro-chips{display:flex;flex-wrap:wrap;gap:10px;margin-top:26px}
.cf-chip{font-size:12.5px;font-weight:400;background:#fff;border:1px solid var(--hairline);border-radius:2px;padding:8px 16px;color:var(--walnut)}
.cf-intro-visual{aspect-ratio:4/3;border-radius:2px}

/* ---------- Configurator ---------- */
.cf-config{background:var(--white);padding:80px 0 96px}
.cf-steps{max-width:820px;margin:0 auto;display:flex;flex-direction:column;gap:22px}
.cf-step{border:1px solid var(--hairline);border-radius:2px;background:#fff;transition:border-color .25s}
.cf-step.done{border-color:var(--taupe)}
.cf-step-head{display:flex;align-items:center;gap:16px;padding:22px 26px}
.cf-step-num{width:34px;height:34px;flex:0 0 34px;border:1px solid var(--taupe);border-radius:50%;display:flex;align-items:center;justify-content:center;font-size:13.5px;font-weight:400;color:var(--walnut);background:var(--bone)}
.cf-step.done .cf-step-num{background:var(--walnut);border-color:var(--walnut);color:#fff}
.cf-step-title{font-size:16.5px;font-weight:400}
.cf-step-hint{font-size:12.5px;color:var(--muted);font-weight:300;margin-top:2px}
.cf-step-picked{margin-inline-start:auto;font-size:13px;font-weight:400;color:var(--green);display:none;align-items:center;gap:6px}
.cf-step.done .cf-step-picked{display:inline-flex}
.cf-step-body{padding:0 26px 26px}
.cf-opts{display:grid;grid-template-columns:repeat(auto-fit,minmax(210px,1fr));gap:14px}
.cf-opt{position:relative;text-align:right;border:1px solid var(--hairline);border-radius:2px;background:#fff;padding:18px;cursor:pointer;font-family:inherit;transition:all .2s;display:flex;flex-direction:column;gap:10px;width:100%}
.cf-opt:hover{border-color:var(--walnut)}
.cf-opt.selected{border-color:var(--walnut);background:var(--bone);box-shadow:inset 0 0 0 1px var(--walnut)}
.cf-opt-thumb{aspect-ratio:16/9;border-radius:2px}
.cf-opt-name{font-size:15px;font-weight:500}
.cf-opt-desc{font-size:12.5px;color:var(--muted);font-weight:300;line-height:1.8}
.cf-badge{position:absolute;top:10px;left:10px;background:var(--green);color:#fff;font-size:10.5px;font-weight:400;letter-spacing:.05em;padding:3px 10px;border-radius:2px}
.cf-swatch{width:100%;aspect-ratio:16/6;border-radius:2px;border:1px solid rgba(0,0,0,.06);display:block}
.cf-opt-price{font-size:13px;font-weight:500;color:var(--green);margin-top:auto}
.cf-opt-price small{font-weight:300;color:var(--muted);font-size:11.5px}

/* ---------- Measure panel ---------- */
.cf-measure{margin-top:18px;border:1px solid var(--taupe);background:var(--bone);border-radius:2px;padding:22px 24px}
.cf-measure-grid{display:grid;grid-template-columns:1fr 1fr;gap:14px}
.cf-measure-note{font-size:12px;color:var(--muted);margin-top:6px}
.cf-f-label{display:block;font-size:12.5px;font-weight:400;margin-bottom:6px;color:var(--walnut)}
.cf-f-input{width:100%;border:1px solid var(--hairline);border-radius:2px;background:#fff;padding:12px 14px;font-family:inherit;font-size:14px;font-weight:300;color:var(--ink);transition:border-color .2s}
.cf-f-input:focus{outline:none;border-color:var(--walnut)}
.cf-f-input::placeholder{color:#B9AE9E;font-weight:200}
.cf-guide{margin-top:14px;border:1px dashed var(--taupe);border-radius:2px;background:#fff}
.cf-guide summary{cursor:pointer;padding:12px 16px;font-size:13.5px;font-weight:400;color:var(--walnut);list-style:none;display:flex;align-items:center;gap:8px}
.cf-guide summary::-webkit-details-marker{display:none}
.cf-guide summary svg{width:16px;height:16px;stroke:var(--walnut);flex:0 0 16px}
.cf-guide[open] summary{border-bottom:1px solid var(--hairline)}
.cf-guide-body{padding:14px 18px;font-size:13px;color:var(--muted);line-height:2.1;font-weight:300}
.cf-guide-body b{font-weight:500;color:var(--ink)}

/* ---------- Room / curtain preview scene ---------- */
.cf-viz{margin-bottom:18px;border:1px solid var(--hairline);border-radius:2px;overflow:hidden;background:#fff}
.cf-viz svg{display:block;width:100%;height:auto}
.cf-viz-cap{font-size:12px;color:var(--muted);padding:8px 14px;border-top:1px solid var(--hairline);background:var(--bone)}

/* ---------- Suggestion ---------- */
.cf-suggest{margin-top:18px;background:var(--bone);border:1px solid var(--taupe);border-radius:2px;padding:22px 24px}
.cf-suggest-title{font-size:14.5px;font-weight:500;margin-bottom:6px;display:flex;align-items:center;gap:8px}
.cf-suggest-why{font-size:13px;color:var(--muted);font-weight:300;margin-bottom:14px}
.cf-sug-pick{font-size:12.5px;font-weight:400;color:var(--walnut);margin-bottom:10px}
.cf-sug-swatches{display:flex;flex-wrap:wrap;gap:12px}
button.cf-sug{display:flex;align-items:center;gap:10px;background:#fff;border:1px solid var(--hairline);border-radius:2px;padding:8px 14px;font-size:13px;font-weight:400;cursor:pointer;font-family:inherit;transition:all .2s}
button.cf-sug:hover{border-color:var(--walnut)}
.cf-sug.selected{border-color:var(--walnut);box-shadow:inset 0 0 0 1px var(--walnut);background:var(--bone)}
.cf-sug i{width:22px;height:22px;border-radius:50%;border:1px solid rgba(0,0,0,.08);display:inline-block}

/* ---------- Summary ---------- */
.cf-summary{max-width:820px;margin:34px auto 0;background:var(--walnut);color:#fff;border-radius:2px;padding:34px 32px}
.cf-summary h3{font-size:20px;font-weight:400;margin-bottom:6px}
.cf-summary p{font-size:13.5px;color:#D8CCBA;font-weight:300;margin-bottom:20px}
.cf-sum-rows{display:flex;flex-direction:column;gap:8px;margin-bottom:24px}
.cf-sum-row{display:flex;justify-content:space-between;font-size:14px;border-bottom:1px solid rgba(255,255,255,.14);padding-bottom:8px}
.cf-sum-row b{font-weight:400;color:#EADFCE}
.cf-sum-row span{font-weight:300}
.cf-sum-row.total{border-bottom:none;border-top:1px solid rgba(255,255,255,.3);padding-top:12px;margin-top:6px;font-size:16.5px}
.cf-sum-row.total b{font-weight:500;color:#fff}
.cf-sum-row.total span{font-weight:500;color:#F4E9D8}
.cf-sum-row.est span{font-weight:400}
.cf-confirm-note{display:flex;gap:12px;align-items:flex-start;background:rgba(255,255,255,.08);border:1px solid rgba(255,255,255,.18);border-radius:2px;padding:14px 16px;font-size:13px;color:#EADFCE;margin-bottom:22px;font-weight:300;line-height:1.9}
.cf-confirm-note svg{width:18px;height:18px;stroke:#C9E5D6;flex:0 0 18px;margin-top:4px}
.cf-helper{max-width:820px;margin:26px auto 0;text-align:center;font-size:13.5px;color:var(--muted)}
.cf-helper a{color:var(--green);font-weight:400;border-bottom:1px solid var(--green)}

/* ---------- Pricing ---------- */
.cf-pricing{background:var(--bone);border-top:1px solid var(--hairline);border-bottom:1px solid var(--hairline)}
.cf-price-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:20px}
.cf-price-card{background:#fff;border:1px solid var(--hairline);border-radius:2px;padding:28px 26px;text-align:center}
.cf-price-card .lbl{font-size:13.5px;color:var(--muted);margin-bottom:8px}
.cf-price-card .val{font-size:22px;font-weight:500;color:var(--walnut)}
.cf-price-card .val small{font-size:12.5px;font-weight:300;color:var(--muted)}
.cf-price-note{text-align:center;font-size:13px;color:var(--muted);margin-top:22px}

/* ---------- Visit / booking ---------- */
.cf-visit .wrap{display:grid;grid-template-columns:1fr 1fr;gap:64px;align-items:center}
.cf-visit-card{background:var(--bone);border:1px solid var(--hairline);border-radius:2px;padding:36px 32px}
.cf-visit-card h3{font-size:19px;font-weight:500;margin-bottom:6px}
.cf-visit-card p{font-size:13.5px;color:var(--muted);margin-bottom:22px}
.cf-field{margin-bottom:16px}
.cf-field label{display:block;font-size:12.5px;font-weight:400;margin-bottom:6px;color:var(--walnut)}
.cf-field input{width:100%;border:1px solid var(--hairline);border-radius:2px;background:#fff;padding:12px 14px;font-family:inherit;font-size:14px;font-weight:300;color:var(--ink)}
.cf-field input::placeholder{color:#B3A795}
.cf-field input:focus{outline:none;border-color:var(--walnut)}
.cf-visit-points{display:flex;flex-direction:column;gap:18px;margin-top:26px}
.cf-v-point{display:flex;gap:14px;align-items:flex-start;font-size:14.5px}
.cf-v-point svg{width:20px;height:20px;stroke:var(--green);flex:0 0 20px;margin-top:5px}

/* ---------- Contact close (reuses homepage's look) ---------- */
.liana-contact{background:var(--white);border-top:1px solid var(--hairline);text-align:center}
.liana-contact p{font-size:15px;color:var(--muted);font-weight:300;max-width:460px;margin:14px auto 36px}

/* ---------- Mobile progress bar ---------- */
.cf-mbar{position:fixed;bottom:0;right:0;left:0;z-index:55;background:rgba(255,255,255,.96);backdrop-filter:blur(10px);border-top:1px solid var(--hairline);padding:12px 18px;display:none;align-items:center;justify-content:space-between;gap:14px}
.cf-mbar .m-txt{font-size:13px;font-weight:400;color:var(--walnut)}
.cf-mbar .m-cta{font-size:13px;padding:10px 20px}

@media (max-width:980px){
  .cf-intro .wrap{grid-template-columns:1fr;gap:40px}
  .cf-visit .wrap{grid-template-columns:1fr;gap:44px}
  .cf-price-grid{grid-template-columns:1fr;gap:14px}
}
@media (max-width:640px){
  .cf-opts{grid-template-columns:1fr}
  .cf-step-head{padding:18px 18px}
  .cf-step-body{padding:0 18px 20px}
  .cf-mbar{display:flex}
  body.page-template-template-curtains{padding-bottom:64px}
  .cf-measure-grid{grid-template-columns:1fr}
}