/* Kandes Wall Planner - PARTNER EDITION styles. Scoped under #KandesWallPlanner;
   typography inherits the host theme's body font automatically (font:inherit).
   THE ONLY SUPPORTED RESTYLE SURFACE IS THIS VARIABLE BLOCK: change the custom
   properties below to match the host theme, leave every rule underneath alone.
   Defaults = the Kandes brand palette. */
#KandesWallPlanner{
  /* core palette */
  --kwp-black:#0d0d0d; --kwp-charcoal:#171717; --kwp-taupe:#ae9e98; --kwp-yellow:#ffd230;
  --kwp-mauve:#735f5f; --kwp-grey:#737373; --kwp-silver:#a3a3a4; --kwp-off:#fafafa; --kwp-white:#ffffff;
  --kwp-line:#e7e4e1; --kwp-panel-face:#faf9f7; --kwp-panel-edge:#d9d5cf; --kwp-wall-bg:#edebe7;
  /* derived accents (fine to leave as-is; they follow the core palette visually) */
  --kwp-cta-hover:#e9bf22; --kwp-cta-disabled-bg:#3a3733; --kwp-cta-disabled-fg:#8a857e;
  --kwp-error:var(--kwp-error); --kwp-summary-line:var(--kwp-summary-line); --kwp-toolbtn-border:#3a3733;
  --kwp-badge-led-border:#e8d9a0; --kwp-badge-led-bg:#fdf6dd; --kwp-badge-led-fg:#7a6414;
  --kwp-notice-border:#dcd0cb; --kwp-notice-bg:#f6f1ef; --kwp-notice-fg:#4c3f3a;
  color:var(--kwp-charcoal); font-size:15px; line-height:1.5;
}
#KandesWallPlanner *{box-sizing:border-box;}
#KandesWallPlanner .kwp-wrap{max-width:1140px; margin:0 auto; padding:24px 20px 64px;}
#KandesWallPlanner .kwp-head{margin-bottom:22px; max-width:64ch;}
#KandesWallPlanner .kwp-head h2{font-size:30px; font-weight:700; letter-spacing:-.02em; line-height:1.05; text-transform:uppercase; margin:0 0 8px;}
#KandesWallPlanner .kwp-head p{color:var(--kwp-grey); font-size:14px; margin:0;}

#KandesWallPlanner .layout{display:grid; grid-template-columns:minmax(360px,430px) 1fr; gap:30px; align-items:start;}
@media (max-width:920px){ #KandesWallPlanner .layout{grid-template-columns:1fr;} #KandesWallPlanner .stickycol{position:static !important;} }

#KandesWallPlanner .step{background:var(--kwp-white); border:1px solid var(--kwp-line); padding:18px 20px; margin-bottom:14px;}
#KandesWallPlanner .step h3{font-size:12px; font-weight:700; letter-spacing:.12em; text-transform:uppercase; margin:0 0 12px; display:flex; gap:10px; align-items:baseline; color:var(--kwp-charcoal);}
#KandesWallPlanner .step h3 .n{color:var(--kwp-taupe); font-variant-numeric:tabular-nums;}
#KandesWallPlanner label{display:block; font-size:12px; color:var(--kwp-mauve); margin-bottom:4px;}
#KandesWallPlanner select,
#KandesWallPlanner input[type=number],
#KandesWallPlanner input[type=text],
#KandesWallPlanner input[type=email],
#KandesWallPlanner input[type=tel]{
  width:100%; padding:9px 10px; border:1px solid var(--kwp-line); border-radius:0;
  font:inherit; font-size:14px; background:var(--kwp-off); color:var(--kwp-charcoal); min-height:0; line-height:1.4;
}
#KandesWallPlanner select:focus, #KandesWallPlanner input:focus, #KandesWallPlanner button:focus-visible{outline:2px solid var(--kwp-yellow); outline-offset:1px;}
#KandesWallPlanner .row{display:flex; gap:10px;}
#KandesWallPlanner .row>div{flex:1;}
#KandesWallPlanner .hint{font-size:12px; color:var(--kwp-grey); margin-top:6px;}
#KandesWallPlanner .badges{display:flex; flex-wrap:wrap; gap:6px; margin-top:10px;}
#KandesWallPlanner .badge{font-size:11px; padding:2px 8px; border:1px solid var(--kwp-line); color:var(--kwp-mauve); background:var(--kwp-off); font-weight:500;}
#KandesWallPlanner .badge.led{border-color:var(--kwp-badge-led-border); background:var(--kwp-badge-led-bg); color:var(--kwp-badge-led-fg);}
#KandesWallPlanner .badge.note{border-color:var(--kwp-notice-border); background:var(--kwp-notice-bg); color:var(--kwp-mauve);}

/* Searchable model combobox */
#KandesWallPlanner .kwp-combo{position:relative;}
#KandesWallPlanner .kwp-combo__list{position:absolute; z-index:30; left:0; right:0; top:100%; max-height:280px; overflow-y:auto;
  background:var(--kwp-white); border:1px solid var(--kwp-line); border-top:none; box-shadow:0 8px 20px rgba(13,13,13,.08);}
#KandesWallPlanner .kwp-combo__opt{padding:8px 12px; font-size:14px; cursor:pointer; display:flex; justify-content:space-between; gap:10px;}
#KandesWallPlanner .kwp-combo__opt:hover, #KandesWallPlanner .kwp-combo__opt.active{background:var(--kwp-off);}
#KandesWallPlanner .kwp-combo__opt .sku{color:var(--kwp-grey); font-variant-numeric:tabular-nums; font-size:12px;}
#KandesWallPlanner .kwp-combo__empty{padding:10px 12px; font-size:13px; color:var(--kwp-grey);}

#KandesWallPlanner .walltabs{display:flex; gap:6px; flex-wrap:wrap; margin-bottom:12px;}
#KandesWallPlanner .walltab{border:1px solid var(--kwp-line); background:var(--kwp-off); padding:5px 12px; font-size:13px; cursor:pointer; font-family:inherit; color:var(--kwp-charcoal);}
#KandesWallPlanner .walltab.active{background:var(--kwp-charcoal); color:#fff; border-color:var(--kwp-charcoal);}
#KandesWallPlanner .walltab .x{margin-left:8px; opacity:.55;}
#KandesWallPlanner .ghostbtn{border:1px dashed var(--kwp-silver); background:none; padding:5px 12px; font-size:13px; cursor:pointer; color:var(--kwp-mauve); font-family:inherit;}
#KandesWallPlanner .ghostbtn:hover, #KandesWallPlanner .walltab:hover{border-color:var(--kwp-taupe);}

#KandesWallPlanner .seg{display:flex; border:1px solid var(--kwp-line);}
#KandesWallPlanner .seg button{flex:1; border:none; background:var(--kwp-off); padding:8px 4px; font:inherit; font-size:13px; cursor:pointer; color:var(--kwp-grey); border-right:1px solid var(--kwp-line);}
#KandesWallPlanner .seg button:last-child{border-right:none;}
#KandesWallPlanner .seg button.on{background:var(--kwp-charcoal); color:#fff;}
#KandesWallPlanner .seglabel{font-size:12px; color:var(--kwp-mauve); margin:10px 0 4px;}

#KandesWallPlanner .notice{padding:11px 13px; font-size:13px; margin-top:12px; border:1px solid var(--kwp-notice-border); border-left:3px solid var(--kwp-taupe); background:var(--kwp-notice-bg); color:var(--kwp-notice-fg);}
#KandesWallPlanner .notice b{font-weight:600;}
#KandesWallPlanner .choice{display:flex; flex-direction:column; gap:8px; margin-top:10px;}
#KandesWallPlanner .choice label.opt{display:flex; gap:9px; align-items:flex-start; font-size:13px; color:var(--kwp-charcoal); cursor:pointer; margin:0;}
#KandesWallPlanner .choice input{margin-top:3px; accent-color:var(--kwp-charcoal); width:auto;}
#KandesWallPlanner .check{display:flex; gap:9px; align-items:flex-start; font-size:13px; cursor:pointer; margin-top:4px;}
#KandesWallPlanner .check input{margin-top:3px; accent-color:var(--kwp-charcoal); width:auto;}

#KandesWallPlanner .stepper{display:flex; align-items:center; border:1px solid var(--kwp-line); width:110px; background:var(--kwp-off); flex:none;}
#KandesWallPlanner .stepper button{width:32px; height:32px; border:none; background:none; font-size:16px; cursor:pointer; color:var(--kwp-mauve); font-family:inherit;}
#KandesWallPlanner .stepper span{flex:1; text-align:center; font-variant-numeric:tabular-nums; font-size:14px;}
#KandesWallPlanner .accrow{display:flex; justify-content:space-between; align-items:center; gap:12px; margin-top:10px;}
#KandesWallPlanner .accrow .desc{font-size:13px;}
#KandesWallPlanner .accrow .desc small{display:block; color:var(--kwp-grey); font-size:12px;}
#KandesWallPlanner .capline{font-size:12px; margin-top:10px; padding:8px 10px; background:var(--kwp-off); border:1px solid var(--kwp-line); color:var(--kwp-mauve); font-variant-numeric:tabular-nums;}
#KandesWallPlanner .capline.warn{border-left:3px solid var(--kwp-yellow);}

#KandesWallPlanner .openrow{border:1px solid var(--kwp-line); padding:10px; margin-top:10px; background:var(--kwp-off);}
#KandesWallPlanner .openrow .row{align-items:flex-end;}
#KandesWallPlanner .openrow .del{border:none; background:none; color:var(--kwp-mauve); cursor:pointer; font-size:12px; text-decoration:underline; padding:6px 0 6px 6px; font-family:inherit;}

#KandesWallPlanner .stickycol{position:sticky; top:16px;}
#KandesWallPlanner .previewcard{background:var(--kwp-white); border:1px solid var(--kwp-line); padding:16px 16px 10px; margin-bottom:14px;}
#KandesWallPlanner .previewhead{display:flex; justify-content:space-between; align-items:baseline; margin-bottom:8px;}
#KandesWallPlanner .previewhead h3{font-size:12px; font-weight:700; letter-spacing:.12em; text-transform:uppercase; margin:0;}
#KandesWallPlanner .previewhead span{font-size:12px; color:var(--kwp-grey); font-variant-numeric:tabular-nums;}
#KandesWallPlanner .svgbox{width:100%; touch-action:none; -webkit-user-select:none; user-select:none;}
#KandesWallPlanner .svgbox svg{display:block; width:100%; height:auto;}
/* Novelties (9 Jul 2026): rotate/drag/step interactions. The "×"/"+" leave-empty
   targets and the 25 cm step guide keep pointer affordance; user-select is disabled
   above so drag-to-rearrange never selects the surrounding text. */
#KandesWallPlanner .svgbox [data-kwp-off]{cursor:pointer;}
#KandesWallPlanner .svgbox [data-swap]{cursor:grab;}
#KandesWallPlanner .kwp-snapgrid{pointer-events:none;}
#KandesWallPlanner .legend{display:flex; flex-wrap:wrap; gap:14px; padding:10px 2px 6px; font-size:11px; color:var(--kwp-grey);}
#KandesWallPlanner .legend i{display:inline-block; width:11px; height:11px; margin-right:5px; vertical-align:-1px; border:1px solid var(--kwp-panel-edge);}
#KandesWallPlanner .artnote{font-size:11px; color:var(--kwp-grey); padding:0 2px 8px; font-style:italic;}

#KandesWallPlanner .summary{background:var(--kwp-black); color:var(--kwp-off); padding:18px 20px;}
#KandesWallPlanner .summary h3{font-size:11px; font-weight:700; letter-spacing:.14em; text-transform:uppercase; color:var(--kwp-taupe); margin:0 0 12px;}
#KandesWallPlanner .sline{display:flex; justify-content:space-between; gap:12px; padding:5px 0; font-size:13.5px; border-bottom:1px solid var(--kwp-summary-line);}
#KandesWallPlanner .sline:last-of-type{border-bottom:none;}
#KandesWallPlanner .sline .v{font-variant-numeric:tabular-nums; font-weight:600; white-space:nowrap; text-align:right;}
#KandesWallPlanner .sline small{color:var(--kwp-silver); display:block; font-size:11.5px; font-weight:400;}
#KandesWallPlanner .sline.wall{font-size:12.5px; color:var(--kwp-silver);}
#KandesWallPlanner .sline.wall .v{font-weight:400; color:var(--kwp-off); white-space:normal;}
#KandesWallPlanner .bignum{font-size:38px; font-weight:700; letter-spacing:-.02em; font-variant-numeric:tabular-nums; line-height:1; text-transform:uppercase;}
#KandesWallPlanner .bignum small{font-size:13px; font-weight:400; color:var(--kwp-silver); letter-spacing:0; text-transform:none;}
#KandesWallPlanner .cta{display:block; width:100%; margin-top:16px; padding:13px; border:none;
  background:var(--kwp-yellow); color:var(--kwp-black); font:inherit; font-size:14px; font-weight:700; letter-spacing:.04em; text-transform:uppercase; cursor:pointer;}
#KandesWallPlanner .cta:hover:not(:disabled){background:var(--kwp-cta-hover);}
#KandesWallPlanner .cta:disabled{background:var(--kwp-cta-disabled-bg); color:var(--kwp-cta-disabled-fg); cursor:not-allowed;}
#KandesWallPlanner .ctanote{font-size:12px; color:var(--kwp-silver); text-align:center; margin-top:9px;}
/* Share + dossier tools (10 Jul 2026) — quiet ghost buttons under the CTA; the
   yellow CTA stays the single accent in the dark summary panel. */
#KandesWallPlanner .toolrow{display:flex; gap:8px; margin-top:12px;}
#KandesWallPlanner .toolbtn{flex:1; padding:9px 6px; background:none; border:1px solid var(--kwp-toolbtn-border); color:var(--kwp-off); font:inherit; font-size:12px; cursor:pointer; letter-spacing:.02em;}
#KandesWallPlanner .toolbtn:hover:not(:disabled){border-color:var(--kwp-taupe); color:#fff;}
#KandesWallPlanner .toolbtn:disabled{color:var(--kwp-cta-disabled-fg); cursor:not-allowed;}
#KandesWallPlanner .toolmsg{font-size:12px; color:var(--kwp-yellow); text-align:center; margin-top:8px;}

#KandesWallPlanner .segcards{display:flex; gap:10px; margin-bottom:14px;}
#KandesWallPlanner .segcard{flex:1; border:1px solid var(--kwp-line); background:var(--kwp-off); padding:12px; cursor:pointer; font:inherit; text-align:left;}
#KandesWallPlanner .segcard.on{border-color:var(--kwp-charcoal); background:var(--kwp-white); box-shadow:inset 0 0 0 1px var(--kwp-charcoal);}
#KandesWallPlanner .segcard b{display:block; font-size:14px; margin-bottom:2px;}
#KandesWallPlanner .segcard span{font-size:12px; color:var(--kwp-grey);}
#KandesWallPlanner .backlink{background:none; border:none; font:inherit; font-size:13px; color:var(--kwp-mauve); cursor:pointer; padding:0; margin-bottom:14px; text-decoration:underline;}
#KandesWallPlanner .field{margin-bottom:11px;}
#KandesWallPlanner .field--invalid input, #KandesWallPlanner .field--invalid select{border-color:var(--kwp-error); outline:1px solid var(--kwp-error);}
#KandesWallPlanner .req::after{content:" *"; color:var(--kwp-taupe);}
#KandesWallPlanner .success{background:var(--kwp-white); border:1px solid var(--kwp-line); border-top:3px solid var(--kwp-yellow); padding:22px;}
#KandesWallPlanner .success h3{font-size:18px; margin:0 0 10px; letter-spacing:-.01em; text-transform:none;}
#KandesWallPlanner .success p{font-size:14px; color:var(--kwp-mauve); margin:0 0 8px; max-width:55ch;}
#KandesWallPlanner .kwp-error{font-size:13px; color:var(--kwp-error); margin-top:10px;}
#KandesWallPlanner .kwp-hp{position:absolute !important; left:-9999px !important; width:1px; height:1px; overflow:hidden;}
#KandesWallPlanner .hidden{display:none !important;}
@media (prefers-reduced-motion:no-preference){
  #KandesWallPlanner .cta, #KandesWallPlanner .segcard, #KandesWallPlanner .walltab{transition:background .15s, border-color .15s;}
}

/* Native checkboxes & radios (8 Jul 2026): the theme's global input styles flatten
   these into thin strips (appearance:none) — restore real boxes inside the planner
   (consent checkbox, 5% reserve, LED warmth radios). */
#KandesWallPlanner input[type=checkbox],
#KandesWallPlanner input[type=radio]{
  -webkit-appearance:checkbox; appearance:auto;
  width:18px; height:18px; min-width:18px; min-height:18px; max-width:18px;
  flex:0 0 auto; padding:0; margin:0;
  accent-color:var(--kwp-charcoal);
  border:none; box-shadow:none; background:none;
  cursor:pointer; display:inline-block; vertical-align:middle;
}
#KandesWallPlanner input[type=radio]{-webkit-appearance:radio;}
#KandesWallPlanner .check input[type=checkbox],
#KandesWallPlanner .choice input[type=checkbox],
#KandesWallPlanner .choice input[type=radio]{margin-top:2px;}
#KandesWallPlanner .kwp-attrib{max-width:1140px; margin:0 auto; padding:0 20px 18px; font-size:12px; color:var(--kwp-grey); text-align:right;}
#KandesWallPlanner .kwp-attrib a{color:var(--kwp-mauve); text-decoration:underline;}