@charset "UTF-8";
/*!
 * LUMA configurator skin — option block only.
 * Restyles the XIEN Product Configurator option area to match the reference
 * design system, measured from the live reference page:
 *   - hairline-separated numbered steps (filled navy disc + Poppins label)
 *   - full-width banner toggle for the door type (solid navy when active)
 *   - option cards that are tinted blue-grey when idle and white + navy
 *     outlined when active, with a status line pinned to the bottom
 *   - round colour discs and line-art handle discs
 *   - opening dimensions as ONE pill holding the inch and fraction selects
 *   - selects as flat rounded rows with a chevron
 * Nothing outside .xpc-configurator is touched.
 * Version 1.2.0
 */

/* ---------------------------------------------------------------- fonts */
/* Self-hosted so the option block renders identically regardless of whether
   Google Fonts is reachable from the visitor's network. Names are prefixed
   with "MC" so they cannot collide with the theme's own font stacks.        */
@font-face{font-family:"MC Montserrat";font-style:normal;font-weight:400;font-display:swap;src:url("fonts/montserrat-400.woff2") format("woff2")}
@font-face{font-family:"MC Montserrat";font-style:normal;font-weight:500;font-display:swap;src:url("fonts/montserrat-500.woff2") format("woff2")}
@font-face{font-family:"MC Montserrat";font-style:normal;font-weight:600;font-display:swap;src:url("fonts/montserrat-600.woff2") format("woff2")}
@font-face{font-family:"MC Montserrat";font-style:normal;font-weight:700;font-display:swap;src:url("fonts/montserrat-700.woff2") format("woff2")}
@font-face{font-family:"MC Poppins";font-style:normal;font-weight:400;font-display:swap;src:url("fonts/poppins-400.woff2") format("woff2")}
@font-face{font-family:"MC Poppins";font-style:normal;font-weight:500;font-display:swap;src:url("fonts/poppins-500.woff2") format("woff2")}
@font-face{font-family:"MC Poppins";font-style:normal;font-weight:600;font-display:swap;src:url("fonts/poppins-600.woff2") format("woff2")}
@font-face{font-family:"MC Poppins";font-style:normal;font-weight:700;font-display:swap;src:url("fonts/poppins-700.woff2") format("woff2")}

/* --------------------------------------------------------------- tokens */
.xpc-configurator{
  --lm-ink:#132033;
  --lm-heading:#10232b;
  --lm-navy:#123f73;
  --lm-step:#10232b;
  --lm-banner:#174b5e;
  --lm-line:#dfe5ec;
  --lm-card:#f1f5f8;
  --lm-card-hover:#e8eef4;
  --lm-soft:#f7f8fa;
  --lm-muted:#687487;
  --lm-hover-line:#c3cedb;
  --lm-chevron:url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIyNSIgaGVpZ2h0PSIyNSIgZmlsbD0ibm9uZSIgc3Ryb2tlLXdpZHRoPSIyIiBzdHJva2U9IiNiYmIiPjxwYXRoIGQ9Ik02IDlsNiA2IDYtNiIvPjwvc3ZnPg==");
  --lm-font-body:"MC Montserrat",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;
  --lm-font-head:"MC Poppins",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;
  --lm-ease:border-color .18s ease, background-color .18s ease, box-shadow .18s ease;
  color:var(--lm-ink);
  font-family:var(--lm-font-body);
}
.xpc-configurator .xpc-fields,
.xpc-configurator .xpc-field,
.xpc-configurator .xpc-option,
.xpc-configurator .xpc-option-body,
.xpc-configurator .xpc-option-name,
.xpc-configurator .xpc-option-description,
.xpc-configurator .xpc-option-price,
.xpc-configurator .xpc-info,
.xpc-configurator .xpc-help,
.xpc-configurator select,
.xpc-configurator input[type=number],
.xpc-configurator input[type=text],
.xpc-configurator textarea{font-family:var(--lm-font-body)}

/* ------------------------------------------------------------- layout */
.xpc-configurator .xpc-fields{grid-template-columns:repeat(2,minmax(0,1fr));gap:18px 14px}

/* --------------------------------------------------- numbered step head */
.xpc-configurator .xpc-label{
  display:flex;align-items:center;gap:9px;
  margin:0 0 12px;padding:16px 0 0;
  border-top:1px solid var(--lm-line);
  font-family:var(--lm-font-head);
  font-size:15px;font-weight:600;line-height:21px;letter-spacing:-.01em;
  color:var(--lm-heading);
}
/* the very first block of the option list carries no divider */
.xpc-configurator .xpc-fields>.xpc-field:first-child>.xpc-label{border-top:0;padding-top:0}
.xpc-configurator .xpc-label>label{font:inherit;color:inherit}
.xpc-configurator .xpc-label>span:not(.xpc-step){font:inherit;color:inherit}
.xpc-configurator .xpc-step{
  display:grid;place-items:center;flex:none;
  width:20px;height:20px;border-radius:50%;
  background:var(--lm-step);color:#fff;
  font-family:var(--lm-font-head);font-size:11px;font-weight:700;
  line-height:20px;letter-spacing:-.15px;
}
.xpc-configurator .xpc-required{color:var(--lm-muted);font-size:12px;font-weight:400}

/* sub-fields inside a step (the three opening dimensions) read as captions */
.xpc-configurator .xpc-field:not(:has(.xpc-step))>.xpc-label{
  display:block;border-top:0;padding:0;margin:0 0 8px;
  font-family:var(--lm-font-body);font-size:12.5px;font-weight:600;
  letter-spacing:0;line-height:1.35;color:var(--lm-ink);
}
.xpc-configurator .xpc-help{margin:0 0 12px;font-size:12.5px;line-height:1.55;color:var(--lm-muted)}
.xpc-configurator .xpc-type-section .xpc-label{font-size:15px;margin-bottom:12px}
.xpc-configurator .xpc-type-section .xpc-help{margin:0 0 4px}

/* -------------------------------------------------------- option cards */
/* idle cards are tinted, active cards turn white inside a navy outline —
   the reference keeps geometry identical, so the border is always present
   and only its colour changes.                                              */
.xpc-configurator .xpc-options{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}
.xpc-configurator .xpc-option{display:block;font-size:13px}
.xpc-configurator .xpc-option-body{
  position:relative;display:flex;flex-direction:column;
  align-items:center;justify-content:flex-start;
  gap:8px;height:100%;min-height:46px;padding:11px 10px;
  border:2px solid transparent;border-radius:8px;
  background:var(--lm-card);
  color:var(--lm-ink);text-align:center;line-height:1.3;
  transition:var(--lm-ease);
}
.xpc-configurator .xpc-option:not(.is-selected):hover .xpc-option-body{background:var(--lm-card-hover)}
.xpc-configurator .xpc-option.is-selected .xpc-option-body{
  border-color:var(--lm-navy);background:#fff;color:var(--lm-navy);
  box-shadow:none;
}
.xpc-configurator .xpc-option input:focus-visible+.xpc-option-body{outline:2px solid var(--lm-navy);outline-offset:2px}

.xpc-configurator .xpc-option-name{font-size:16px;font-weight:700;line-height:1.25;overflow-wrap:anywhere}
.xpc-configurator .xpc-option-description{display:block;font-size:12.5px;font-weight:400;line-height:1.4;color:var(--lm-muted)}
.xpc-configurator .xpc-option.is-selected .xpc-option-description{color:#5c7796}
/* status line: the price delta, swapped to "Selected" while the card is active.
   Pinned to the bottom so labels and statuses line up across a row even when
   the descriptions wrap to a different number of lines. */
.xpc-configurator .xpc-option-price{display:block;margin-top:auto;font-size:15px;font-weight:700;line-height:1.2;color:var(--lm-navy)}
.xpc-configurator .xpc-option-price .amount{font:inherit;color:inherit}

/* round swatch disc: white puck with the finish inset, as in the reference */
.xpc-configurator .xpc-color{
  display:grid;place-items:center;flex:none;width:54px;height:54px;margin:0;
  border:0;border-radius:50%;background:#fff;
  box-shadow:0 2px 8px rgba(19,32,51,.12);
}
.xpc-configurator .xpc-color::after{
  content:"";width:42px;height:42px;border-radius:50%;
  background:var(--xpc-swatch);
  box-shadow:inset 0 0 0 1px rgba(0,0,0,.1);
}
.xpc-configurator .xpc-option-image{
  display:block;width:54px;height:54px;margin:0;object-fit:contain;
  padding:8px;border:0;border-radius:50%;background:#fff;
  box-shadow:0 2px 8px rgba(19,32,51,.12);
}
/* selected badge, shown only on the active card */
.xpc-configurator .xpc-check{
  position:absolute;right:8px;top:8px;z-index:1;
  width:20px;height:20px;display:none;align-items:center;justify-content:center;
  border-radius:50%;background:var(--lm-navy);color:#fff;
  font-size:11px;font-weight:700;line-height:1;
}
.xpc-configurator .is-selected .xpc-check{display:flex}

/* -------------------------------------------------------------- grids */
.xpc-configurator .xpc-field[data-key="hardware"] .xpc-options{grid-template-columns:repeat(4,minmax(0,1fr));gap:10px}
.xpc-configurator .xpc-field[data-key="handle"] .xpc-options{grid-template-columns:repeat(4,minmax(0,1fr));gap:8px}
.xpc-configurator .xpc-field[data-key="installation"] .xpc-options{grid-template-columns:repeat(2,minmax(0,1fr));gap:9px}

/* ------------------------------------------- door type: banner toggle */
/* The reference renders the type step as two wide banners: the active one is
   filled solid navy with a white check on the left, the label centred. */
.xpc-configurator .xpc-field[data-key="door_type"] .xpc-options{grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}
.xpc-configurator .xpc-field[data-key="door_type"] .xpc-option-body{
  flex-direction:row;align-items:center;justify-content:center;
  gap:0;min-height:46px;padding:0 40px;border-radius:10px;
}
.xpc-configurator .xpc-field[data-key="door_type"] .xpc-option-description,
.xpc-configurator .xpc-field[data-key="door_type"] .xpc-option-price{display:none}
.xpc-configurator .xpc-field[data-key="door_type"] .xpc-option-name{font-size:16px;font-weight:700;line-height:1.2}
.xpc-configurator .xpc-field[data-key="door_type"] .xpc-option.is-selected .xpc-option-body{
  background:var(--lm-banner);border-color:var(--lm-banner);color:#fff;
}
.xpc-configurator .xpc-field[data-key="door_type"] .xpc-check{
  right:auto;left:13px;top:50%;transform:translateY(-50%);
  background:#fff;color:var(--lm-banner);
}

/* --------------------------------------- handle line art (reference discs) */
/* Decorative silhouettes so the handle row has the same visual rhythm as the
   reference, which shows a product render per handle. Swap these for real
   images by giving the option an image in the plan instead. */
.xpc-configurator .xpc-field[data-key="handle"] .xpc-option-body::before{
  content:"";display:block;flex:none;width:54px;height:54px;border-radius:50%;
  background-color:#fff;background-repeat:no-repeat;background-position:center;background-size:32px 32px;
  box-shadow:0 2px 8px rgba(19,32,51,.12);
}
.xpc-configurator .xpc-field[data-key="handle"] .xpc-option:has(input[value="handle_standard"]) .xpc-option-body::before{
  background-image:url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0naHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmcnIHZpZXdCb3g9JzAgMCA0MCA0MCcgZmlsbD0nbm9uZScgc3Ryb2tlPScjMzk0MjRlJyBzdHJva2Utd2lkdGg9JzIuNicgc3Ryb2tlLWxpbmVjYXA9J3JvdW5kJyBzdHJva2UtbGluZWpvaW49J3JvdW5kJz48cmVjdCB4PScxMScgeT0nMTQnIHdpZHRoPScyMicgaGVpZ2h0PScxMicgcng9JzYnLz48cGF0aCBkPSdNNiAxMnYxNicvPjxwYXRoIGQ9J002IDIwaDUnLz48L3N2Zz4=");
}
.xpc-configurator .xpc-field[data-key="handle"] .xpc-option:has(input[value="handle_square"]) .xpc-option-body::before{
  background-image:url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0naHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmcnIHZpZXdCb3g9JzAgMCA0MCA0MCcgZmlsbD0nbm9uZScgc3Ryb2tlPScjMzk0MjRlJyBzdHJva2Utd2lkdGg9JzIuNicgc3Ryb2tlLWxpbmVjYXA9J3JvdW5kJyBzdHJva2UtbGluZWpvaW49J3JvdW5kJz48cmVjdCB4PScxMScgeT0nMTQnIHdpZHRoPScyMicgaGVpZ2h0PScxMicgcng9JzEuNScvPjxwYXRoIGQ9J002IDEydjE2Jy8+PHBhdGggZD0nTTYgMjBoNScvPjwvc3ZnPg==");
}
.xpc-configurator .xpc-field[data-key="handle"] .xpc-option:has(input[value="handle_rect_pull"]) .xpc-option-body::before{
  background-image:url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0naHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmcnIHZpZXdCb3g9JzAgMCA0MCA0MCcgZmlsbD0nbm9uZScgc3Ryb2tlPScjMzk0MjRlJyBzdHJva2Utd2lkdGg9JzIuNicgc3Ryb2tlLWxpbmVjYXA9J3JvdW5kJyBzdHJva2UtbGluZWpvaW49J3JvdW5kJz48cmVjdCB4PSc0JyB5PScxNycgd2lkdGg9JzMyJyBoZWlnaHQ9JzYnIHJ4PScyLjUnLz48cGF0aCBkPSdNMTIgMTF2Nk0yOCAxMXY2Jy8+PC9zdmc+");
}
.xpc-configurator .xpc-field[data-key="handle"] .xpc-option:has(input[value="handle_round_pull"]) .xpc-option-body::before{
  background-image:url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0naHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmcnIHZpZXdCb3g9JzAgMCA0MCA0MCcgZmlsbD0nbm9uZScgc3Ryb2tlPScjMzk0MjRlJyBzdHJva2Utd2lkdGg9JzIuNicgc3Ryb2tlLWxpbmVjYXA9J3JvdW5kJyBzdHJva2UtbGluZWpvaW49J3JvdW5kJz48cGF0aCBkPSdNOCAxOFEyMCA3IDMyIDE4Jy8+PHBhdGggZD0nTTggMTh2N00zMiAxOHY3Jy8+PC9zdmc+");
}

/* -------------------------------------------------- dimension pill row */
/* Both selects live inside ONE pill, exactly like the reference: no divider,
   no inner border, a chevron each, and the "Fraction" caption above the
   right-hand end.                                                            */
.xpc-configurator .xpc-dimension{
  position:relative;display:grid;
  grid-template-columns:minmax(0,1fr) minmax(0,5.6rem);
  align-items:center;gap:0;min-height:42px;padding:0 10px 0 0;
  border:1px solid var(--lm-line);border-radius:60px;background:#fff;
  transition:var(--lm-ease);
}
.xpc-configurator .xpc-dimension:hover{border-color:var(--lm-hover-line)}
.xpc-configurator .xpc-dimension>label{display:block;position:static;flex:none;max-width:none;min-width:0;margin:0}
/* the plugin caps the fraction cell at 42% of its own track, which squeezes the
   value out of the pill once the native padding is applied */
.xpc-configurator .xpc-dimension>label:first-child,
.xpc-configurator .xpc-dimension>label:last-child{max-width:none}
.xpc-configurator .xpc-dimension select{
  width:100%;min-height:40px;height:40px;margin:0;
  padding:0 30px 0 15px;
  border:0;border-radius:0;background-color:transparent;
  color:#222;font-size:14.5px;font-weight:400;line-height:1.4;
  appearance:none;-webkit-appearance:none;cursor:pointer;
  background-image:var(--lm-chevron);
  background-repeat:no-repeat;background-position:right 0 center;background-size:16px 16px;
}
.xpc-configurator .xpc-fraction-label{
  position:absolute;top:-16px;right:10px;display:block;margin:0;
  font-size:11.5px;font-weight:600;line-height:1.2;color:var(--lm-ink);
}
/* leave room for the caption, which floats above the pill */
.xpc-configurator .xpc-field:has(.xpc-dimension) .xpc-help{margin-bottom:21px}

/* --------------------------------------------------- selects + inputs */
.xpc-configurator .xpc-field[data-type="select"]>select,
.xpc-configurator .xpc-field[data-type="number"]>input,
.xpc-configurator .xpc-field[data-type="text"]>input,
.xpc-configurator .xpc-field[data-type="textarea"]>textarea{
  width:100%;min-height:48px;height:48px;margin:0;
  padding:0 34px 0 16px;
  border:1px solid var(--lm-line);border-radius:8px;background-color:#fff;
  color:#222;font-size:14.5px;font-weight:400;line-height:1.4;
  appearance:none;-webkit-appearance:none;cursor:pointer;
  background-image:var(--lm-chevron);
  background-repeat:no-repeat;background-position:right 14px center;background-size:16px 16px;
  transition:var(--lm-ease);
}
.xpc-configurator .xpc-field[data-type="select"]>select:hover{border-color:var(--lm-hover-line)}
.xpc-configurator .xpc-field[data-type="textarea"]>textarea{height:auto;min-height:96px;padding:12px 16px;background-image:none;cursor:text}
.xpc-configurator .xpc-field[data-type="number"]>input,
.xpc-configurator .xpc-field[data-type="text"]>input{background-image:none;cursor:text}

/* --------------------------------------------- "included as standard" */
.xpc-configurator .xpc-info{
  gap:12px;align-items:flex-start;height:auto;
  padding:14px 16px;border:1px solid var(--lm-line);border-radius:10px;
  background:var(--lm-soft);font-size:12.5px;
}
.xpc-configurator .xpc-info strong{
  display:block;font-family:var(--lm-font-head);font-size:13.5px;
  font-weight:600;letter-spacing:-.01em;color:var(--lm-heading);
}
.xpc-configurator .xpc-info p{margin:4px 0 0;font-size:12px;line-height:1.6;color:var(--lm-muted)}
.xpc-configurator .xpc-info img{width:54px;height:54px;object-fit:contain;border-radius:8px;background:#fff}

/* --------------------------------------------------------- responsive */
@media (max-width:749px){
  .xpc-configurator .xpc-field[data-key="hardware"] .xpc-options,
  .xpc-configurator .xpc-field[data-key="handle"] .xpc-options{grid-template-columns:repeat(3,minmax(0,1fr))}
  .xpc-configurator .xpc-option-body{min-height:48px}
}
@media (max-width:560px){
  .xpc-configurator .xpc-fields{grid-template-columns:minmax(0,1fr);gap:16px 10px}
  .xpc-configurator .xpc-field[data-key="hardware"] .xpc-options,
  .xpc-configurator .xpc-field[data-key="handle"] .xpc-options{grid-template-columns:repeat(2,minmax(0,1fr))}
  .xpc-configurator .xpc-field[data-key="installation"] .xpc-options{grid-template-columns:minmax(0,1fr)}
  .xpc-configurator .xpc-field[data-key="door_type"] .xpc-option-body{padding:0 40px}
  .xpc-configurator .xpc-dimension{grid-template-columns:minmax(0,1fr) minmax(0,5.2rem)}
  .xpc-configurator .xpc-label{font-size:14px}
}