/**
 * Theme-layout + production-chrome adjustments. Kept separate so the extracted
 * V-1 files (sandbox.css / sandbox-app.js / view-configurator.html) stay
 * verbatim.
 *
 * 1. Product image left, configurator right.
 * 2. Container-driven responsiveness — the configurator adapts to the column
 *    it actually gets, not the viewport.
 * 3. Price card docked inside the FINISH group (owner's reference sketch).
 * 4. Production chrome: the prototype masthead, sample-product picker and the
 *    dev card (FAQ / trace / schema / self-check) are hidden, not removed —
 *    sandbox-app.js still finds its elements, so it runs unmodified.
 */

/* --- 1. Image left, configurator right ------------------------------------ */.wp-block-columns:has(form.cart .card){
  max-width: 1240px;
  align-items: flex-start;
}

/* Image column — the gallery keeps a slight majority, as in the mockup. */.wp-block-columns:has(form.cart .card) > .wp-block-column:not(:has(form.cart)){
  flex: 0 1 46%;
  min-width: 0;
  position: sticky;
  top: 24px;
}

/* Configurator column — the summary slot, ~600-680px like Elessi's. */.wp-block-column:has(form.cart .card){
  flex: 1 1 50%;
  min-width: 0;
}.wc-block-add-to-cart-form .wrap, #lmsc-root .wrap{
  padding: 0;
  max-width: none;
}

/* --- 2. Container-driven responsive layout -------------------------------- */.wc-block-add-to-cart-form{
  container-type: inline-size;
}

/* The widget itself is the query container — works on any theme, including
   Elessi where no wc-block wrapper exists and the bridge relocates the
   widget out of form.cart. */#lmsc-root{
  container-type: inline-size;
  container-name: lmsc;
}

/* The configurator column is single-column; the price card lives inside the
   FINISH group (section 3), not in a page-level right rail. */#lmsc-root .cols{
  grid-template-columns: minmax(0, 1fr);
}

/* SIZE stays three-across and FEATURES two-across down to a phone-ish width —
   the mockup shows both in a ~650px summary column. */
@container lmsc (max-width: 480px) {
  #lmsc-root .grid.c3, #lmsc-root .grid.c2{
    grid-template-columns: minmax(0, 1fr);
  }
}

@container lmsc (max-width: 560px) {
  #lmsc-root .swatches{
    gap: 8px;
  }
}

/* --- 3. Price card docked inside the FINISH group ------------------------- */

@container lmsc (min-width: 520px) {
  #lmsc-root .group.lmsc-has-rail{
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(220px, 300px);
    column-gap: 18px;
    align-items: start;
  }
  #lmsc-root .group.lmsc-has-rail > .group-hd{
    grid-column: 1 / -1;
  }
  #lmsc-root .group.lmsc-has-rail > .grid{
    grid-column: 1;
    grid-template-columns: minmax(0, 1fr);
  }
  #lmsc-root .group.lmsc-has-rail > .grid > .span2{
    grid-column: auto;
  }
  #lmsc-root .group.lmsc-has-rail > .rail{
    grid-column: 2;
    grid-row: 2;
    position: static;
  }
}

@container lmsc (max-width: 519px) {
  #lmsc-root .group.lmsc-has-rail > .rail{
    position: static;
    margin: 0 0 18px;
  }
}

/* The price card gets tighter type in the narrow dock. */
@container lmsc (max-width: 760px) {
  #lmsc-root .group.lmsc-has-rail .price-amount{
    font-size: 30px;
  }
  #lmsc-root .group.lmsc-has-rail .price-card .pc-top, #lmsc-root .group.lmsc-has-rail .price-card .kv{
    padding-left: 16px;
    padding-right: 16px;
  }
}

/* --- 4. Production chrome ------------------------------------------------- */

/* Prototype masthead and badge. */.wc-block-add-to-cart-form .masthead, #lmsc-root .masthead{
  display: none;
}

/* Sample-product picker and its note — a live page is one product. */#lmsc-root .card-bd > .group:has(#product){
  display: none;
}#lmsc-root .card-hd #product-note{
  display: none;
}

/* Dev card: FAQ / Calculation trace / Product schema / Self-check tabs. */.wc-block-add-to-cart-form .card:has(.tabs), #lmsc-root .card:has(.tabs){
  display: none;
}

/* The callout pointing at the FAQ tab, which is no longer shown. */#lmsc-root .card-bd > .callout{
  display: none;
}

/* The "_cpo_content" footnote under the price card — internal language. */.wc-block-add-to-cart-form .foot, #lmsc-root .foot{
  display: none;
}

/* Corporate finish: the outer card blends into the product page. */.wc-block-add-to-cart-form .card, #lmsc-root .card{
  box-shadow: none;
}

/* --- 5. V-2 compact ordering (match original CPO footprint) --------------- *
 * The stock Uni CPO form runs: size row -> delivery date -> selects.
 * V-1 renders groups as Size / Finish / Features / Delivery; flex order
 * moves Delivery up under Size without touching sandbox-app.js. */#lmsc-root #fields{
  display: flex;
  flex-direction: column;
}#lmsc-root #fields > .group:nth-of-type(1){ order: 1; }  /* Size */#lmsc-root #fields > .group:nth-of-type(2){ order: 2; }  /* Finish (with price card) */#lmsc-root #fields > .group:nth-of-type(3){ order: 3; }  /* Features */#lmsc-root #fields > .group:nth-of-type(4){ order: 4; }  /* Delivery — last */

/* Tighter vertical rhythm, close to the stock CPO density. */#lmsc-root .card-hd{ padding: 16px 22px 0; }#lmsc-root .card-bd{ padding: 4px 22px 18px; }#lmsc-root #fields > .group{ margin-top: 14px; }#lmsc-root .group-hd{ margin-bottom: 10px; }#lmsc-root .field-hd{ margin-bottom: 5px; }#lmsc-root .hint{ margin-top: 4px; }

/* Delivery: date input at half width like CPO's, note beside/below it. */#lmsc-root #fields > .group:nth-of-type(4) .grid.c2{
  grid-template-columns: minmax(0, 1fr);
  max-width: 420px;
}

/* --- 6. V-2 height compression -------------------------------------------- *
 * Owner's markup: the price card should rise to sit beside DELIVERY + FINISH
 * (starting right under SIZE), and all five light-colour chips must fit one
 * row — smaller chips, shorter captions. Cuts the widget's overall height. */

/* Delivery joins the FINISH grid's left column so the rail can span both.
   Instead of ordering Delivery separately, wrap the two-column region:
   the docked grid already starts at FINISH; pull Delivery into column 1
   above Finish by giving the rail a 2-row span. */
/* Delivery docked inside FINISH's left column (form-bridge.js moves it):
   compact styling so it reads as the group's last field. */#lmsc-root .grid .group.lmsc-delivery-docked{
  margin-top: 12px;
}#lmsc-root .grid .group.lmsc-delivery-docked .grid.c2{
  grid-template-columns: minmax(0, 1fr);
  max-width: none;
}

/* Chips share one row and grow to fill the column's full width — five light
   colours or four frame finishes both span edge to edge. */#lmsc-root .swatches{ gap: 7px; flex-wrap: nowrap; }#lmsc-root .sw{ flex: 1 1 0; width: auto; min-width: 0; }#lmsc-root .sw .chip{ width: 100%; height: 38px; margin-bottom: 5px; }#lmsc-root .sw .cap{ font-size: 9.5px; min-height: 1.3em; }#lmsc-root .sw .tick{ width: 12px; height: 12px; top: 3px; right: 3px; }#lmsc-root .sw .cap{
  max-width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* --- 7. Elessi armor (from the live-3369 stopgap, proven on the theme) ---- *
 * Neutralize Elessi's global button/anchor styling inside the widget, then
 * re-state the V-3 swatch geometry the revert wipes. Harmless on themes that
 * don't restyle buttons (the revert simply restores UA defaults, and the
 * scoped rules below re-apply the design). */#lmsc-root{ display: block; width: 100%; }#lmsc-root button{
  all: revert;
  font-family: inherit;
  box-sizing: border-box;
}#lmsc-root .swatches{ display: flex; gap: 7px; flex-wrap: nowrap; }#lmsc-root .sw{
  position: relative; padding: 0; cursor: pointer; background: none;
  border: 0; flex: 1 1 0; width: auto; min-width: 0; text-align: center;
  display: flex; flex-direction: column; align-items: center;
}#lmsc-root .sw .chip{
  display: block; width: 100%; height: 38px; margin: 0 0 5px; flex: none;
  border-radius: 5px; border: 1px solid rgba(22,24,28,.14);
}#lmsc-root .sw .cap{
  display: block; font-size: 9.5px; line-height: 1.25; min-height: 1.3em;
  max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}#lmsc-root .sw .tick{
  position: absolute; top: 3px; right: 3px; width: 12px; height: 12px;
  border-radius: 50%; background: #16181c; color: #fff;
  display: none; place-items: center;
}#lmsc-root .sw[aria-checked="true"] .tick{ display: grid; }#lmsc-root .sw[aria-checked="true"] .chip{ box-shadow: 0 0 0 2px #fff, 0 0 0 4px #16181c; }#lmsc-root .info{
  all: revert; position: relative; display: inline-grid; place-items: center;
  width: 16px; height: 16px; border-radius: 50%; border: 1px solid rgba(22,24,28,.25);
  background: none; cursor: pointer; padding: 0; margin-left: 6px;
}#lmsc-root select, #lmsc-root input{ width: 100%; box-sizing: border-box; }

/* Dev card stays dead even without :has() support. */#lmsc-root .tabs, #lmsc-root .panel{ display: none !important; }

/* --- 7. Quiet first load --------------------------------------------------- *
 * The dispatch note under the delivery date and the availability warnings
 * ("Available on mirrors of about 4 sq.ft...") only appear once the customer
 * has begun configuring (body.lmsc-touched, set by form-bridge.js). */body:not(.lmsc-touched) #lmsc-root .notice, body:not(.lmsc-touched) #lmsc-root [id^="warn_"]{
  display: none !important;
}

/* --- 8. Responsive polish (desktop / tablet / mobile) ---------------------- *
 * Desktop: some Elessi product templates give the summary the full page
 * width — uncapped, the widget stretches to 1400px+ and the chips balloon.
 * Cap the card at a comfortable reading width. Chips get a max width so a
 * wide column never inflates them; on narrow screens they still share the
 * row edge-to-edge (flex-basis wins below the cap). */#lmsc-root .card{
  max-width: 1080px;
}#lmsc-root .sw{
  max-width: 110px;
}

/* Tablet (641-980px of widget width): fields two-across, price card still
   docked beside FINISH when it fits, otherwise full-width below. */
@container lmsc (min-width: 641px) and (max-width: 980px) {
  #lmsc-root .grid.c3{
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
  #lmsc-root .grid.c2{
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

/* Phablet/tablet-portrait (521-640px): SIZE compresses to unit on its own
   row, H/W pair below — inputs stay finger-sized. */
@container lmsc (min-width: 481px) and (max-width: 640px) {
  #lmsc-root .grid.c3{
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  #lmsc-root .grid.c3 > div:first-child{
    grid-column: 1 / -1;
  }
}

/* Mobile (<=480px): everything one column (already set in section 2);
   price card full-width; chips relax their cap to share the row. */
@container lmsc (max-width: 480px) {
  #lmsc-root .sw{
    max-width: none;
  }
  #lmsc-root .group.lmsc-has-rail > .rail{
    margin: 4px 0 14px;
  }
  #lmsc-root .price-amount{
    font-size: 30px;
  }
}