/* CSS-undantag: component-ui
 * Syfte: Bevara katalogfilter, zoomdialog och kontinuerligt bildspel från prototypen.
 * Omfattning: Endast Lumlyx-komponenternas interna element.
 * Begränsning i Elementor: Standardwidgetar saknar referenskatalog, kopiering och buffrat sidledes bildspel.
 * Kan tas bort när: Elementor erbjuder motsvarande komponent och underkontroller.
 */
/* Lumlyx product pages · v7
 * Shared roles, not per-section guesses. Original site header/footer retain
 * their own source styles. See DESIGNSYSTEM.md for ownership and exceptions.
 */
.lumlyx-components {
  --lp-black: #151515;
  --lp-copy: #5d615e;
  --lp-line: #d9ddda;
  --lp-white: #fff;
  --lp-soft: #f4f5f4;
  --lp-sage: #edf1ec;
  --lp-accent: #425d4e;
  --lp-font: "Open Sans", sans-serif;

  --lp-space-1: 4px;
  --lp-space-2: 8px;
  --lp-space-3: 12px;
  --lp-space-4: 16px;
  --lp-space-5: 20px;
  --lp-space-6: 24px;
  --lp-space-8: 32px;
  --lp-space-10: 40px;
  --lp-space-12: 48px;
  --lp-space-14: 56px;
  --lp-space-16: 64px;
  --lp-space-20: 80px;
  --lp-space-24: 96px;

  --lp-content-width: 1180px;
  --lp-reading-width: 720px;
  --lp-copy-width: 60ch;
  --lp-gutter: var(--lp-space-10);
  --lp-section-space: var(--lp-space-24);
  --lp-grid-gap: var(--lp-space-16);
  --lp-card-gap: var(--lp-space-8);
  --lp-heading-gap: var(--lp-space-12);
  --lp-copy-gap: var(--lp-space-6);
  --lp-label-gap: var(--lp-space-4);
  --lp-heading-offset: 42px; /* 15px label × 1.75 + 16px gap, rounded. */

  --lp-text-body: 19px;
  --lp-text-compact: 18px;
  --lp-text-control: 16px;
  --lp-text-small: 15px;
  --lp-text-caption: 14px;
  --lp-text-lead: 24px;
  --lp-text-h2: 48px;
  --lp-text-h3: 24px;
  --lp-body-leading: 1.75;
  --lp-heading-leading: 1.17;
  --lp-radius-control: 4px;
  --lp-radius-pill: 999px;
}

@media (max-width: 1100px) {
  .lumlyx-components {
    --lp-gutter: var(--lp-space-8);
    --lp-grid-gap: var(--lp-space-12);
    --lp-text-h2: 44px;
  }
}

@media (max-width: 800px) {
  .lumlyx-components {
    --lp-gutter: var(--lp-space-6);
    --lp-section-space: var(--lp-space-20);
    --lp-grid-gap: var(--lp-space-8);
    --lp-card-gap: var(--lp-space-6);
    --lp-heading-gap: var(--lp-space-10);
    --lp-text-h2: 40px;
    --lp-text-h3: 22px;
  }
}

@media (max-width: 550px) {
  .lumlyx-components {
    --lp-gutter: var(--lp-space-5);
    --lp-section-space: var(--lp-space-16);
    --lp-grid-gap: var(--lp-space-6);
    --lp-heading-gap: var(--lp-space-8);
    --lp-text-body: 18px;
    --lp-text-small: 14px;
    --lp-text-h2: 36px;
    --lp-text-h3: 24px;
  }
}

.lumlyx-components{font:19px/1.75 "Open Sans",sans-serif;color:#151515;box-sizing:border-box;} .lumlyx-components *{box-sizing:border-box;} .lumlyx-components [hidden]{display:none!important}.lumlyx-components button{font-family:inherit;cursor:pointer}.lumlyx-components svg{width:22px;height:22px;fill:none;stroke:currentColor;stroke-width:1.5;stroke-linecap:round;stroke-linejoin:round;flex-shrink:0}.lumlyx-components .lp-button{display:inline-flex;align-items:center;justify-content:center;gap:12px;background:#000;color:#fff;border:1px solid #000;border-radius:999px;padding:16px 24px;font-size:16px;line-height:1.4;font-weight:600;min-height:56px;text-decoration:none}.lumlyx-components .lp-button:hover{background:#333;color:#fff}.lumlyx-components :focus-visible{outline:2px solid #346982;outline-offset:4px}.lumlyx-components h2,.lumlyx-components h3{font-family:"Open Sans",sans-serif;font-weight:600;color:#151515;line-height:1.17;letter-spacing:-.045em}.lumlyx-components p{margin:0 0 24px}.lumlyx-components a{color:inherit} .lp-modal-open{overflow:hidden}
.lp-modal-open{
  overflow: hidden;
}
.lp-viewer *,.lp-confirm-dialog *{
  box-sizing: border-box;
}
.lp-viewer [hidden]{
  display: none!important;
}
.lp-viewer h2,.lp-confirm-dialog h2{
  color: var(--lp-black);
  font-family: "Open Sans",sans-serif;
  font-weight: 600;
  line-height: 1.17;
  letter-spacing: -.045em;
  margin: 0;
}
.lp-viewer button,.lp-confirm-dialog button{
  font-family: inherit;
  cursor: pointer;
  white-space: normal;
}
.lp-viewer svg,.lp-confirm-dialog svg{
  width: 22px;
  height: 22px;
  flex-shrink: 0;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.5;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.lp-confirm-dialog .lp-kicker{
  font-size: var(--lp-text-small);
  font-weight: 400;
  color: var(--lp-copy);
  letter-spacing: 0;
  margin-bottom: var(--lp-label-gap);
}
.lp-confirm-dialog .lp-button{
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--lp-space-3);
  background: #000;
  color: #fff;
  border: 1px solid #000;
  border-radius: var(--lp-radius-pill);
  padding: var(--lp-space-4) var(--lp-space-6);
  font-size: var(--lp-text-control);
  line-height: 1.4;
  font-weight: 600;
  text-align: center;
  text-decoration: none;
  min-height: 56px;
  transition: background .15s;
}
.lp-confirm-dialog .lp-button:hover{
  background: #333;
  border-color: #333;
  color: #fff;
}
.lumlyx-components .lp-icon-button,.lp-viewer .lp-icon-button,.lp-confirm-dialog .lp-icon-button{
  width: 48px;
  height: 48px;
  padding: 0;
  display: inline-grid;
  place-items: center;
  border: 1px solid var(--lp-line);
  border-radius: 50%;
  color: #000;
  background: #fff;
}
.lumlyx-components .lp-icon-button:hover,.lp-viewer .lp-icon-button:hover,.lp-confirm-dialog .lp-icon-button:hover{
  background: #e8ebe8;
  color: #000;
}
.lp-icon-button:disabled{
  opacity: .3;
  cursor: default;
}
.lp-sr-only{
  position: absolute!important;
  width: 1px;
  height: 1px;
  padding: 0;
  overflow: hidden;
  clip: rect(0,0,0,0);
  white-space: nowrap;
  border: 0;
}
.lp-stage-arrows .lp-icon-button{
  background: #fffffff0!important;
  border: 0!important;
}
.lp-catalog-toolbar{
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: end;
  gap: var(--lp-space-8);
  margin-bottom: var(--lp-space-8);
}
.lp-filters{
  flex: 1 1 620px;
  border: 0;
  padding: 0;
  margin: 0;
  min-width: 0;
}
.lp-filters legend,.lp-search-label>label{
  font-size: 15px;
  font-weight: 600;
  margin-bottom: var(--lp-space-3);
  padding: 0;
  display: block;
}
.lp-filters legend span{
  font-weight: 400;
  color: var(--lp-copy);
  margin-left: 3px;
}
.lp-size-options{
  display: flex;
  gap: var(--lp-space-2);
  flex-wrap: wrap;
}
.lumlyx-components .lp-size{
  padding: var(--lp-space-3) var(--lp-space-3);
  border: 1px solid #b9bfba;
  border-radius: var(--lp-radius-control);
  background: #fff;
  color: #000;
  font-size: 14px;
  font-weight: 400;
  min-height: 48px;
  line-height: 1.5;
}
.lumlyx-components .lp-size[aria-pressed="true"]{
  background: #000;
  color: #fff;
  border-color: #000;
}
.lumlyx-components .lp-size:hover{
  border-color: #000;
}
.lp-search-input{
  position: relative;
  width: 245px;
}
.lp-search-input svg{
  width: 19px;
  height: 19px;
  position: absolute;
  left: 13px;
  top: 15px;
  color: var(--lp-copy);
  pointer-events: none;
}
.lumlyx-components .lp-search-input input{
  width: 100%;
  height: 48px;
  border: 1px solid #b9bfba;
  border-radius: var(--lp-radius-control);
  padding: var(--lp-space-2) var(--lp-space-3) var(--lp-space-2) var(--lp-space-10);
  color: #000;
  background: #fff;
  font: 15px "Open Sans",sans-serif;
}
.lp-gallery-meta{
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: var(--lp-space-6);
  margin-bottom: var(--lp-space-5);
  font-size: 14px;
  color: var(--lp-copy);
}
.lp-gallery-meta p{
  margin: 0;
}
.lp-gallery-meta a{
  color: #000;
  text-underline-offset: 4px;
}
.lp-motif-grid{
  display: grid;
  grid-template-columns: repeat(3,minmax(0,1fr));
  gap: var(--lp-space-8) var(--lp-space-6);
}
.lp-motif{
  min-width: 0;
}
.lumlyx-components .lp-motif-preview{
  display: block;
  width: 100%;
  border: 0;
  border-radius: 0;
  background: #f5f5f5;
  color: #000;
  padding: var(--lp-space-3);
  position: relative;
  cursor: zoom-in;
}
.lp-motif-preview img{
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 1;
  object-fit: contain;
  background: #f5f5f5;
}
.lp-motif-preview .lp-zoom{
  position: absolute;
  bottom: 14px;
  right: 14px;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  background: #fff;
}
.lp-zoom svg{
  width: 20px;
  height: 20px;
}
.lp-motif-details{
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--lp-space-3);
  padding: var(--lp-space-4) 0 0;
}
.lumlyx-components .lp-motif-details h3{
  overflow-wrap: anywhere;
  font-size: 16px;
  letter-spacing: 0;
  line-height: 1.6;
}
.lp-motif-details span{
  font-size: 14px;
  color: var(--lp-copy);
}
.lp-motif-grid[data-size="60x120"] .lp-motif-preview img{
  aspect-ratio: 2/1;
}
.lp-motif-grid[data-size="60x180"] .lp-motif-preview img{
  aspect-ratio: 3/1;
}
.lp-catalog-bottom{
  display: flex;
  justify-content: space-between;
  gap: var(--lp-space-10);
  margin-top: var(--lp-space-8);
}
.lp-catalog-bottom p{
  font-size: 14px;
  color: var(--lp-copy);
  margin: 0;
}
.lp-catalog-bottom a{
  color: #000;
  text-underline-offset: 4px;
}
.lp-gallery-pagination{
  margin-top: var(--lp-space-10);
  text-align: center;
}
.lumlyx-components .lp-motif-review{ margin-top: var(--lp-space-3); border-top: 1px solid var(--lp-line); padding-top: var(--lp-space-3); }
.lp-motif-review summary{ display: flex; align-items: center; gap: var(--lp-space-2); cursor: pointer; list-style: none; color: var(--lp-accent); font-size: var(--lp-text-small); line-height: 1.5; }
.lp-motif-review summary::-webkit-details-marker{ display: none; }
.lp-motif-review summary svg{ width: 18px; height: 18px; flex: 0 0 18px; }
.lumlyx-components .lp-motif-review p{ font-size: var(--lp-text-small); line-height: 1.65; margin: var(--lp-space-3) 0 0; }
.lumlyx-components .lp-catalog-review{ padding: var(--lp-space-5) var(--lp-space-6); margin: 0 0 var(--lp-space-6); background: var(--lp-sage); border-left: 2px solid var(--lp-accent); font-size: var(--lp-text-small); line-height: 1.65; }
.lp-catalog-review strong{ color: var(--lp-black); }
.lp-catalog-review summary{ cursor: pointer; font-weight: 600; display: flex; align-items: center; justify-content: space-between; gap: var(--lp-space-4); list-style: none; }
.lp-catalog-review summary::-webkit-details-marker{ display: none; }
.lp-catalog-review summary svg{ width: 20px; height: 20px; flex: 0 0 20px; }
.lp-catalog-review[open] summary svg{ transform: rotate(45deg); }
.lumlyx-components .lp-catalog-review p{ font-size: inherit; line-height: inherit; margin: var(--lp-space-3) 0 0; }
.lumlyx-components .lp-catalog-asset-note{ font-size: var(--lp-text-small); line-height: 1.65; color: var(--lp-copy); max-width: var(--lp-copy-width); margin: 0 0 var(--lp-space-5); }
.lp-image-unavailable{ aspect-ratio: 1; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: var(--lp-space-3); padding: var(--lp-space-5); font-size: var(--lp-text-small); line-height: 1.6; color: var(--lp-copy); }
.lp-image-unavailable svg{ width: 28px; height: 28px; }
.lp-image-unavailable[hidden],.lp-motif-preview img[hidden]{ display: none; }
.lp-catalog-sizes{ display: flex; gap: var(--lp-space-3); flex-wrap: wrap; align-items: center; margin-bottom: var(--lp-space-6); font-size: var(--lp-text-control); }
.lp-catalog-sizes a{ display: inline-block; padding: var(--lp-space-3); border: 1px solid var(--lp-line); border-radius: var(--lp-radius-control); color: var(--lp-black); text-underline-offset: 3px; }
.lp-viewer-reference{ display: flex; flex-direction: column; align-items: center; gap: var(--lp-space-2); }
.lp-viewer-reference a{ color: inherit; font: 14px/1.5 var(--lp-font); text-underline-offset: 3px; }
.lp-viewer #viewer-error{ max-width: 44ch; padding: var(--lp-space-6); font: 16px/1.7 var(--lp-font); text-align: center; color: var(--lp-copy); }
.lp-empty-search{
  background: #f5f5f5;
  padding: var(--lp-space-14);
  text-align: center;
}
.lp-empty-search p{
  font-size: 17px;
  color: var(--lp-copy);
  margin: var(--lp-space-4) 0 var(--lp-space-6);
}
.lp-viewer{
  font-family: "Open Sans",sans-serif;
  display: none;
  width: 100%;
  height: 100dvh;
  max-width: none;
  max-height: none;
  margin: 0;
  padding: 0;
  border: 0;
  background: #f5f5f5;
  color: #000;
  overflow: hidden;
}
.lp-viewer[open]{
  display: grid;
  grid-template-rows: auto minmax(0,1fr) 80px;
}
.lp-viewer::backdrop,.lp-confirm-dialog::backdrop{
  background: #0009;
}
.lp-viewer-top{
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: var(--lp-space-6) var(--lp-space-8);
  gap: var(--lp-space-6);
  background: #fff;
}
.lp-viewer h2{
  font-size: 26px;
  margin: 0 0 var(--lp-space-1);
  line-height: 1.3;
}
.lp-viewer-top p{
  font-size: 15px;
  color: var(--lp-copy);
  line-height: 1.5;
  margin: 0;
}
.lp-viewer-tools{
  display: flex;
  gap: var(--lp-space-3);
  flex-shrink: 0;
}
.lp-viewer-canvas{
  overflow: auto;
  overscroll-behavior: contain;
  min-height: 0;
  padding: var(--lp-space-5);
  scrollbar-color: #aaa #eee;
}
.lp-viewer-canvas img{
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;
  max-width: none;
}
.lp-viewer-canvas.is-zoomed img{
  width: 200%;
  height: 200%;
  max-width: none;
}
.lp-viewer-bottom{
  display: flex;
  justify-content: center;
  gap: var(--lp-space-6);
  align-items: center;
  background: #fff;
  font-size: 15px;
  font-weight: 600;
}
.lp-confirm-actions{ display: flex; flex-wrap: wrap; gap: var(--lp-space-3); }
.lp-confirm-actions a.lp-button{ text-decoration: none; }
.lp-confirm-dialog{
  font: 17px/1.7 "Open Sans",sans-serif;
  max-width: 620px;
  width: calc(100% - 40px);
  padding: var(--lp-space-10);
  border: 0;
  color: #000;
  background: #fff;
  max-height: 90dvh;
  overflow: auto;
}
.lp-confirm-dialog h2{
  font-size: 32px;
  margin-bottom: var(--lp-space-5);
}
.lp-confirm-dialog>p:not(.lp-kicker){
  font-size: 17px;
  color: var(--lp-copy);
}
.lp-confirm-dialog .lp-confirm-close{
  display: grid;
  margin: -15px -15px 15px auto;
}
.lp-confirm-dialog pre{
  font: 15px/1.7 "Open Sans",sans-serif;
  white-space: pre-wrap;
  overflow-wrap: anywhere;
  padding: var(--lp-space-5);
  background: #f5f5f5;
  margin: var(--lp-space-6) 0;
  max-height: 40vh;
  overflow: auto;
}
.lp-motif-grid[data-size="custom"] .lp-motif-preview img{
  aspect-ratio: 1.65;
  object-fit: contain;
}
.lumlyx-components .lp-catalog-guide{ max-width: var(--lp-copy-width); font-size: var(--lp-text-compact); line-height: var(--lp-body-leading); color: var(--lp-copy); margin-bottom: var(--lp-space-8); }
.lp-catalog-guide a{ color: var(--lp-black); text-underline-offset: 3px; }
.lumlyx-components .lp-search-help{ font-size: var(--lp-text-small); line-height: 1.6; color: var(--lp-copy); margin: 0 0 var(--lp-space-5); }
.lumlyx-components .lp-size:disabled{ opacity: .55; cursor: default; }
.lumlyx-components .lp-copy-motif{ display: inline-flex; align-items: center; gap: var(--lp-space-2); border: 0; border-bottom: 1px solid var(--lp-line); border-radius: 0; padding: var(--lp-space-3) 0; background: transparent; color: var(--lp-black); font: 600 var(--lp-text-small)/1.5 var(--lp-font); min-height: 44px; margin-top: var(--lp-space-2); }
.lp-copy-motif svg{ width: 18px; height: 18px; }
.lumlyx-components .lp-copy-status{ font-size: var(--lp-text-small); color: var(--lp-accent); }
.lp-copy-status:empty{ display: none; }
.lp-mobile-filter{ display: none; }
@media(max-width:800px){.lumlyx-components .lp-mobile-filter{
    display: block;
    min-width: 0;
    min-height: 52px;
    padding: 12px 36px 12px 14px;
    border: 1px solid #aebbad;
    border-radius: var(--lp-radius-control);
    background-color: #fff;
    color: var(--lp-black);
    font: 16px/1.5 var(--lp-font);
  }
.lp-mobile-filter{ width: 100%; }
.lp-mobile-filter:disabled{ opacity: .55; }
.lp-has-mobile-filter .lp-size-options{ display: none; }
.lp-catalog-toolbar{
    flex-wrap: wrap;
    gap: var(--lp-space-6);
  }
.lp-search-label,.lp-search-input{ width: 100%; }
.lumlyx-components .lp-search-input input{ font-size: 16px; min-height: 52px; }
.lp-motif-grid{
    grid-template-columns: repeat(2,minmax(0,1fr));
  }
.lp-catalog-bottom{
    display: block;
  }
.lp-catalog-bottom p+p{
    margin-top: var(--lp-space-2);
  }}
@media(max-width:550px){.lp-stage-arrows .lp-icon-button{
    width: 48px;
    height: 48px;
  }
.lp-catalog-toolbar{
    margin-bottom: var(--lp-space-6);
  }
.lp-filters legend,.lp-search-label>label{
    font-size: 15px;
  }
.lp-size-options{
    gap: var(--lp-space-2);
  }
.lumlyx-components .lp-size{
    font-size: 14px;
    padding: var(--lp-space-2) var(--lp-space-3);
  }
.lp-search-label,.lp-search-input{
    width: 100%;
  }
.lumlyx-components .lp-search-input input{
    font-size: 16px;
  }
.lp-gallery-meta{
    display: block;
    font-size: 13px;
    line-height: 1.7;
  }
.lp-gallery-meta>a{
    display: inline-block;
    margin-top: var(--lp-space-2);
    font-size: 14px;
  }
.lp-motif-grid{
    grid-template-columns: 1fr;
    gap: 32px;
  }
.lumlyx-components .lp-motif-preview{
    padding: 12px;
    border: 1px solid var(--lp-line);
    border-radius: var(--lp-radius-control);
  }
.lp-motif-preview .lp-zoom{
    width: 44px;
    height: 44px;
    right: 12px;
    bottom: 12px;
  }
.lp-zoom svg{
    width: 18px;
    height: 18px;
  }
.lp-motif-details{
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: 4px 16px;
    padding-top: 16px;
  }
.lumlyx-components .lp-motif-details h3{
    font-size: 18px;
  }
.lp-motif-details span{
    font-size: 15px;
    margin-top: 0;
    display: block;
  }
.lumlyx-components .lp-copy-motif{ width: 100%; min-height: 48px; font-size: 16px; }
.lp-gallery-pagination .lp-button{ width: 100%; }
.lp-motif-grid[data-size="60x180"]{
    grid-template-columns: 1fr;
  }
.lp-catalog-bottom p{
    font-size: 14px;
  }
.lp-empty-search{
    padding: var(--lp-space-8) var(--lp-space-5);
  }
.lp-empty-search h3{
    font-size: 23px;
  }
.lp-empty-search p{
    font-size: 16px;
  }
.lp-viewer-top>div:first-child{ min-width: 0; overflow-wrap: anywhere; }
.lp-viewer-tools{ flex-shrink: 0; }
.lp-viewer-top{
    padding: var(--lp-space-4);
    gap: var(--lp-space-4);
    align-items: start;
  }
.lp-viewer h2{
    font-size: 21px;
  }
.lp-viewer-top p{
    font-size: 13px;
    max-width: 220px;
  }
.lp-viewer-tools{
    gap: var(--lp-space-2);
  }
.lp-viewer .lp-icon-button{
    width: 48px;
    height: 48px;
  }
.lp-viewer svg{
    width: 20px;
    height: 20px;
  }
.lp-viewer-canvas{
    padding: var(--lp-space-2);
  }
.lp-viewer[open]{
    grid-template-rows: auto minmax(0,1fr) 70px;
  }
.lp-confirm-dialog{
    padding: var(--lp-space-6);
  }
.lp-confirm-dialog h2{
    font-size: 28px;
  }
.lp-confirm-dialog pre{
    font-size: 14px;
    padding: var(--lp-space-4);
  }
.lp-motif-grid[data-size="custom"]{
    grid-template-columns: 1fr;
  }}
@media(prefers-reduced-motion:reduce){.lp-viewer *{
    transition: none!important;
  }}
.lumlyx-components .lp-motif-preview img{ object-fit: contain; }
.lumlyx-components .lp-catalog-toolbar{ flex-wrap: wrap; gap: var(--lp-space-6); }
.lumlyx-components .lp-filters{ flex: 1 1 550px; }
.lumlyx-components .lp-search-label{ flex: 0 1 300px; }
.lumlyx-components .lp-search-input,.lumlyx-components .lp-search-input input{ width: 100%; }
@media(max-width:800px){.lumlyx-components .lp-catalog-toolbar{ display: flex; }
.lumlyx-components .lp-filters,.lumlyx-components .lp-search-label{ flex: 1 1 100%; }}
.lumlyx-components .wall-room-heading{ max-width: 760px; margin-bottom: 40px; }
.lumlyx-components .wall-room-heading h2{ font-size: var(--lp-text-h2); font-weight: 600; line-height: 1.17; letter-spacing: -.045em; text-wrap: balance; }
.lumlyx-components .wall-room-heading>p{ margin: 24px 0 0; color: var(--lp-copy); font-size: var(--lp-text-body); line-height: var(--lp-body-leading); }
.lumlyx-components .wall-room-slider{ position: relative; width: 100%; min-width: 0; }
.lumlyx-components .wall-room-track{ --wall-visible: 3; display: flex; gap: 16px; position: relative; width: 100%; overflow-x: auto; overflow-y: hidden; scroll-snap-type: x mandatory; scroll-behavior: smooth; overscroll-behavior-x: contain; scrollbar-width: none; }
.lumlyx-components .wall-room-track::-webkit-scrollbar{ display: none; }
.lumlyx-components .wall-room-slide{ flex: 0 0 calc((100% - 32px) / 3); min-width: 0; scroll-snap-align: start; scroll-snap-stop: always; }
.lumlyx-components .wall-room-zoom{ display: block; position: relative; width: 100%; aspect-ratio: 3/4; max-height: 760px; overflow: hidden; padding: 0; border: 0; border-radius: 0; background: var(--lp-soft); cursor: zoom-in; }
.lumlyx-components .wall-room-zoom img{ width: 100%; height: 100%; display: block; object-fit: cover; object-position: var(--wall-image-position,50% 50%); }
.lumlyx-components .wall-slider-controls{ position: absolute; inset: 0; pointer-events: none; }
.lumlyx-components .wall-slider-controls[hidden]{ display: none; }
.lumlyx-components .wall-slider-controls .lp-icon-button{ position: absolute; top: 50%; transform: translateY(-50%); width: 52px; height: 52px; background: #fff; color: var(--lp-black); border: 1px solid #15151518; box-shadow: 0 2px 12px #00000014; pointer-events: auto; }
.lumlyx-components .wall-slider-controls .lp-icon-button:disabled{ opacity: .45; cursor: default; }
.lumlyx-components .wall-slider-controls .lp-icon-button:not(:disabled):hover{ background: var(--lp-sage); }
.lumlyx-components .wall-room-zoom:focus-visible{ outline-offset: -5px; }
.lumlyx-components .lp-copy-motif{ width: fit-content; min-height: 44px; padding: var(--lp-space-2) 0; gap: 6px; border-bottom: 0; color: var(--lp-copy); font-size: var(--lp-text-caption); font-weight: 400; }
.lumlyx-components .lp-copy-motif svg{ width: 14px; height: 14px; }
.lumlyx-components .lp-copy-motif:hover{ color: var(--lp-black); }
.lumlyx-components .lp-copy-motif:hover span{ text-decoration: underline; text-underline-offset: 3px; }
@media(max-width:800px){.lumlyx-components .wall-room-heading{ margin-bottom: 32px; }
.lumlyx-components .wall-room-heading h2{ max-width: 22ch; }}
@media(prefers-reduced-motion:reduce){.lumlyx-components .wall-room-track{ scroll-behavior: auto; }}
@media(max-width:900px){.lumlyx-components .wall-room-track{ --wall-visible: 2; }
.lumlyx-components .wall-room-slide{ flex-basis: calc((100% - 16px) / 2); }}
@media(max-width:550px){.lumlyx-components .wall-room-track{ --wall-visible: 1; gap: 12px; }
.lumlyx-components .wall-room-slide{ flex-basis: 88%; }
.lumlyx-components .wall-slider-controls{ position: static; display: flex; justify-content: flex-end; gap: 12px; padding: 20px var(--lp-gutter) 0; }
.lumlyx-components .wall-slider-controls .lp-icon-button{ position: static; transform: none; width: 48px; height: 48px; box-shadow: none; }}
/* CSS-undantag: image-blend
 * Syfte: Återge produktfotots vita bakgrund som prototypens ljusa bakgrund.
 * Omfattning: Endast produktbild och utförandebild på Wall LED.
 * Begränsning i Elementor: Bildwidgeten saknar mix-blend-mode för bildens pixlar.
 * Kan tas bort när: Elementor erbjuder motsvarande komponent och underkontroller.
 */
.lw-product-image img,.lw-detail-image img{mix-blend-mode:multiply;}
/* CSS-undantag: wall-responsive
 * Syfte: Behålla referensens lokala brytpunkter utan att ändra hela webbplatsens kit.
 * Omfattning: Endast Wall LED-regioner och deras native kontrollvärden.
 * Begränsning i Elementor: Elementors globala 767/1024-brytpunkter motsvarar inte referensens 550/800/1100.
 * Kan tas bort när: Elementor erbjuder motsvarande komponent och underkontroller.
 */
.lumlyx-wall-region{--lw-h2:48px;--lw-h3:24px;--lw-body:19px;--lw-gutter:40px;--lw-section:96px;--lw-gap:64px;--lw-hero-height:690px;--lw-hero-img:480px;--lw-hero-top:24px;--lw-hero-h1:clamp(70px,6.4vw,92px);--lw-hero-line:clamp(34px,3vw,42px)}
@media(max-width:1100px){.lumlyx-wall-region{--lw-h2:44px;--lw-gutter:32px;--lw-gap:48px;--lw-hero-height:650px;--lw-hero-img:420px}}
@media(max-width:800px){.lumlyx-wall-region{--lw-h2:40px;--lw-h3:22px;--lw-gutter:24px;--lw-section:80px;--lw-gap:32px;--lw-hero-height:0px;--lw-hero-img:clamp(260px,65vw,420px);--lw-hero-top:20px;--lw-hero-h1:clamp(64px,10vw,84px);--lw-hero-line:clamp(32px,5.8vw,44px)}body.lumlyx-wall-page .elementor .lumlyx-wall-region .lw-two-col{--flex-direction:column;}body.lumlyx-wall-page .elementor .lumlyx-wall-region .lw-col{--width:100%;}.lw-hero-copy{--padding-top:48px;--padding-bottom:64px}.lw-mobile-contact{display:flex!important}}
@media(max-width:550px){.lumlyx-wall-region{--lw-h2:36px;--lw-h3:24px;--lw-body:18px;--lw-gutter:20px;--lw-section:64px;--lw-gap:24px}.lw-usps>.e-con-inner{flex-direction:column;align-items:stretch}.lw-usps>.e-con-inner>.e-con{--width:100%}}
/* CSS-undantag: spec-table
 * Syfte: Bevara semantisk specifikationstabell med läsbar sidscroll.
 * Omfattning: Tabellen i Wall LED-specifikationer.
 * Begränsning i Elementor: Textredigeraren har inga native tabellcellskontroller; ingen ny JetEngine-datakälla behövs för statiska specifikationer.
 * Kan tas bort när: Elementor erbjuder motsvarande komponent och underkontroller.
 */
.lw-spec-table{overflow-x:auto;max-width:100%;}.lw-spec-table table{min-width:760px;width:100%;border-collapse:collapse;background:#fff;font:16px/1.6 "Open Sans",sans-serif}.lw-spec-table caption{text-align:left;font-weight:600;font-size:20px;padding:20px 24px}.lw-spec-table th,.lw-spec-table td{padding:18px 24px;border:0;border-bottom:1px solid #d9ddda;text-align:left;white-space:nowrap}.lw-spec-table th{background:#edf1ec;font-weight:600}.lw-spec-table tbody tr:last-child td{border-bottom:0}.lw-spec-table:focus-visible{outline:2px solid #346982}
/* CSS-undantag: native-focus
 * Syfte: Säkerställa synlig tangentbordsfokus och minska rörelse.
 * Omfattning: Länkar och kontroller i Wall LED, inklusive native underwidgetar.
 * Begränsning i Elementor: Classic-knappar saknar separat focus-visible och reduced-motion-kontroll.
 * Kan tas bort när: Elementor erbjuder motsvarande komponent och underkontroller.
 */
.lumlyx-wall-region :focus-visible{outline:2px solid #346982;outline-offset:4px}@media(prefers-reduced-motion:reduce){.lumlyx-wall-region *,.lumlyx-components *{scroll-behavior:auto!important;animation:none!important;transition:none!important}}

/* CSS-undantag: component-ui
 * Syfte: Bevara katalogfilter, zoomdialog och kontinuerligt bildspel från prototypen.
 * Omfattning: Endast Lumlyx-komponenternas interna element.
 * Begränsning i Elementor: Standardwidgetar saknar referenskatalog, kopiering och buffrat sidledes bildspel.
 * Kan tas bort när: Elementor erbjuder motsvarande komponent och underkontroller.
 */
.lumlyx-components #wall-room-prev{left:24px}.lumlyx-components #wall-room-next{right:24px}.lumlyx-components .wall-slider-controls{z-index:2}.lumlyx-components .lp-icon-button:focus{background:#e8ebe8;color:#000}.lumlyx-components [data-role="gallery-progress"]{font-size:16px;color:#5d615e;margin-bottom:16px}
@media(max-width:550px){.lumlyx-components #wall-room-prev{left:12px}.lumlyx-components #wall-room-next{right:12px}}

/* CSS-undantag: wall-responsive
 * Syfte: Behålla referensens lokala brytpunkter utan att ändra hela webbplatsens kit.
 * Omfattning: Endast Wall LED-regioner och deras native kontrollvärden.
 * Begränsning i Elementor: Elementors globala 767/1024-brytpunkter motsvarar inte referensens 550/800/1100.
 * Kan tas bort när: Elementor erbjuder motsvarande komponent och underkontroller.
 */
.lumlyx-wall-region{--lw-bio-height:min(583.2px,calc((100vw - 180px) / 2 * 1.08))}@media(max-width:800px){.lumlyx-wall-region{--lw-bio-height:calc((100vw - 48px) * 1.08)}}@media(max-width:550px){.lumlyx-wall-region{--lw-bio-height:calc((100vw - 40px) * 1.08)}}

/* CSS-undantag: mobile-chat-clearance
 * Syfte: Ge sidans mobila kontaktknappar fri yta under den befintliga chatten.
 * Omfattning: Enbart Tidio-behållaren på Wall LED upp till 800 px.
 * Begränsning i Elementor: Tidio ligger utanför Elementors elementträd och saknar sidans kontaktlist som placeringstillstånd.
 * Kan tas bort när: Chattens egna inställningar kan ta hänsyn till kontaktlisten per sida.
 */
@media(max-width:800px){body.lumlyx-wall-page #tidio-chat{bottom:90px!important;height:calc(100% - 90px)!important}}

/*
 * CSS-undantag: accordion-subcontrols
 * Syfte: Återge ikonrotation och en andra, redigerbar sakikon i native dragspel.
 * Omfattning: Endast lw-reference-accordion och dess införda ikonspan.
 * Begränsning i Elementor: Classic nested accordion saknar andra rubrikikonen och rotation kopplad till open; native ikon-, färg- och storlekskontroller används i övrigt.
 * Kan tas bort när: Native accordion erbjuder två ikoner och open-transform.
 */
.lw-reference-accordion .e-opened svg{transform:rotate(45deg)}
.lw-summary-leading{display:inline-flex;flex-shrink:0;color:#425d4e}
.lw-summary-leading svg{width:100%;height:100%;fill:none;stroke:currentColor;stroke-width:1.15}
.lw-detail-accordion .e-n-accordion-item-title-header{flex:1}
/*
 * CSS-undantag: image-zoom-control
 * Syfte: Visa prototypens förstoringsikon på native produktbilder.
 * Omfattning: Endast bilder med kontrollen Visa förstoringsikon.
 * Begränsning i Elementor: Image saknar visuellt zoomreglage; bildval, länk och proportioner styrs native.
 * Kan tas bort när: Native Image erbjuder ett separat zoomreglage.
 */
.lw-product-image a,.lw-detail-image a{position:relative;display:block;cursor:zoom-in}
.lw-image-expand{position:absolute;right:30px;top:30px;width:48px;height:48px;background:#fff;color:#000;border-radius:50%;display:grid;place-items:center;pointer-events:none}
.lw-product-image .lw-image-expand{top:8px;right:8px}
.lw-image-expand svg{width:22px;height:22px;fill:none;stroke:currentColor;stroke-width:1.5}
/* CSS-undantag: wall-responsive
 * Syfte: Behålla referensens lokala brytpunkter utan att ändra hela webbplatsens kit.
 * Omfattning: Endast Wall LED-regioner och deras native kontrollvärden.
 * Begränsning i Elementor: Elementors globala 767/1024-brytpunkter motsvarar inte referensens 550/800/1100.
 * Kan tas bort när: Elementor erbjuder motsvarande komponent och underkontroller.
 */
.lumlyx-wall-region{--lw-johan-height:612.43px;--lw-family-img:310px}
.lw-johan-name strong{font-size:21px;font-weight:600;line-height:1.5}.lw-johan-name span{font-size:14px;color:#5d615e}
@media(max-width:1260px){.lumlyx-wall-region{--lw-johan-height:calc((100vw - 144px) * .45 / .82);--lw-family-img:calc((100vw - 144px) / 3 / 1.2)}}
@media(max-width:1100px){.lumlyx-wall-region{--lw-johan-height:calc((100vw - 112px) * .45 / .82)}}
@media(max-width:800px){.lumlyx-wall-region{--lw-bio-height:calc(100vw - 48px)}body.lumlyx-wall-page .elementor .lumlyx-wall-region .lw-detail-grid{--e-con-grid-template-columns:1fr}.lw-contact-row{--flex-direction:column-reverse}.lw-contact-row>.lw-col{--width:100%}.lw-johan-portrait{--min-height:0}.lw-johan-image{position:relative!important;left:-43.6%!important;bottom:auto!important}.lw-johan-image img{width:180%}.lw-johan-name{position:static!important;order:-1;background:transparent!important}.lw-mobile-contact:has(input:focus){visibility:hidden}body:has(dialog[open]) .lw-mobile-contact,body:has([data-role="motif-search"]:focus,.lw-inquiry-form input:focus,.lw-inquiry-form textarea:focus) .lw-mobile-contact{visibility:hidden}}
@media(max-width:550px){.lumlyx-wall-region{--lw-bio-height:calc(100vw - 40px)}}

/*
 * CSS-undantag: mobile-format-cards
 * Syfte: Visa samma native tabelldata som läsbara formatdragspel på mobil, exakt som prototypen.
 * Omfattning: Genererade lp-mobile-formats under Wall LED-specifikationerna.
 * Begränsning i Elementor: Text Editor-tabeller saknar kortvy härledd från samma celler; dubbla manuella tabeller skulle skapa motstridiga produktdata.
 * Kan tas bort när: Native tabellwidget erbjuder responsiv formatkortvy.
 */
.lp-mobile-formats{display:none}
@media(max-width:800px){.lw-spec-table{display:none}.lp-mobile-formats{display:grid;gap:12px}.lp-mobile-formats details{background:#fff;border:1px solid #d9ddda;border-radius:4px}.lp-mobile-formats summary{display:flex;justify-content:space-between;align-items:center;gap:16px;padding:18px 20px;min-height:60px;font:600 18px/1.75 "Open Sans",sans-serif;cursor:pointer;list-style:none}.lp-mobile-formats summary::-webkit-details-marker{display:none}.lp-mobile-formats summary::after{content:'+';font-size:24px;font-weight:400;line-height:1;color:#425d4e}.lp-mobile-formats details[open] summary::after{content:'−'}.lp-mobile-formats dl{margin:0;padding:0 20px 16px}.lp-mobile-formats dl>div{padding:12px 0;border-top:1px solid #d9ddda}.lp-mobile-formats dt{color:#5d615e;font-size:15px;line-height:1.5}.lp-mobile-formats dd{margin:4px 0 0;font-size:17px;line-height:1.6;font-weight:600}}

/* CSS-undantag: component-ui
 * Syfte: Bevara katalogfilter, zoomdialog och kontinuerligt bildspel från prototypen.
 * Omfattning: Endast Lumlyx-komponenternas interna element.
 * Begränsning i Elementor: Standardwidgetar saknar referenskatalog, kopiering och buffrat sidledes bildspel.
 * Kan tas bort när: Elementor erbjuder motsvarande komponent och underkontroller.
 */
.lumlyx-components button.lp-motif-preview:hover,.lumlyx-components button.lp-motif-preview:focus{background:#f5f5f5;color:#000}
.lumlyx-components button.lp-size:hover,.lumlyx-components button.lp-size:focus{background:#fff;color:#000;border-color:#000}
.lumlyx-components button.lp-size[aria-pressed="true"]:hover,.lumlyx-components button.lp-size[aria-pressed="true"]:focus{background:#000;color:#fff}
.lumlyx-components button.lp-copy-motif:hover,.lumlyx-components button.lp-copy-motif:focus{background:transparent;color:#151515}
/* CSS-undantag: spec-table
 * Syfte: Bevara semantisk specifikationstabell med läsbar sidscroll.
 * Omfattning: Tabellen i Wall LED-specifikationer.
 * Begränsning i Elementor: Textredigeraren har inga native tabellcellskontroller; ingen ny JetEngine-datakälla behövs för statiska specifikationer.
 * Kan tas bort när: Elementor erbjuder motsvarande komponent och underkontroller.
 */
.lw-spec-table table{background:transparent;font-size:15px;line-height:1.5;margin:0}
.lw-spec-table caption{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}
.lw-spec-table th,.lw-spec-table td{padding:20px;background:transparent;border-bottom:1px solid #d9ddda}
.lw-spec-table th:first-child,.lw-spec-table td:first-child{padding-left:0}
.lw-spec-table thead th{padding-top:4px;padding-bottom:12px;font-size:14px;font-weight:400;color:#5d615e}
.lw-spec-table tbody tr:hover{background:#e9ece9}
@media(max-width:800px){.lw-spec-tabs .e-n-tabs-heading{border-bottom:0!important}}

/* CSS-undantag: component-ui
 * Syfte: Bevara katalogfilter, zoomdialog och kontinuerligt bildspel från prototypen.
 * Omfattning: Endast Lumlyx-komponenternas interna element.
 * Begränsning i Elementor: Standardwidgetar saknar referenskatalog, kopiering och buffrat sidledes bildspel.
 * Kan tas bort när: Elementor erbjuder motsvarande komponent och underkontroller.
 */
.lumlyx-components .lp-motif-details h3{margin:0}
/* CSS-undantag: spec-table
 * Syfte: Bevara tabellens radavdelare utan temats överlinje ovanför kolumnrubrikerna.
 * Omfattning: Produktsidornas gemensamma lw-spec-table, inklusive tabellhuvudets första rad.
 * Begränsning i Elementor: Textredigeraren har inga native tabellcellskontroller; ingen ny JetEngine-datakälla behövs för statiska specifikationer.
 * Kan tas bort när: Elementor erbjuder motsvarande komponent och underkontroller.
 */
.lw-spec-table table{border:0}
.lw-spec-table table thead tr:first-child th{border-block-start:0}
.lw-spec-table table tbody>tr:nth-child(odd)>td,.lw-spec-table table tbody>tr:nth-child(odd)>th{background:transparent}
.lw-spec-table table tbody>tr:hover>td,.lw-spec-table table tbody>tr:hover>th{background:#e9ece9}
/*
 * CSS-undantag: svg-line-icons
 * Syfte: Bevara prototypens tunna linjeikoner utan Elementors fyllda silhuetter.
 * Omfattning: Native ikon-, knapp- och dragspels-SVG i Wall LED-regionerna.
 * Begränsning i Elementor: Klassiska ikonkontroller sätter fill men saknar fill:none/stroke-val för dessa SVG-filer; storlek och färg redigeras native.
 * Kan tas bort när: Ikonkontrollerna stöder separat fill och stroke.
 */
.lumlyx-wall-region .elementor-icon svg,.lumlyx-wall-region .elementor-button-icon svg,.lw-reference-accordion .e-n-accordion-item-title-icon svg{fill:none;stroke:currentColor;stroke-width:1.5}

/* CSS-undantag: wall-responsive
 * Syfte: Behålla rubrik, bild och dragspel i rätt ordning mellan referensens och Elementors mobilbrytpunkter.
 * Omfattning: Utförandegrid och specifikationsflikar på Wall LED, enbart 768–800 px.
 * Begränsning i Elementor: Sidans native mobilvärden börjar gälla vid 767 px, medan prototypen växlar vid 800 px; globala brytpunkter ska bevaras.
 * Kan tas bort när: Elementor stödjer lokala brytpunkter per sektion.
 */
@media(min-width:768px) and (max-width:800px){
 body.lumlyx-wall-page .elementor .lw-detail-grid>.lw-detail-heading{grid-column:1;grid-row:1}
 body.lumlyx-wall-page .elementor .lw-detail-grid>.lw-detail-visual{grid-column:1;grid-row:2}
 body.lumlyx-wall-page .elementor .lw-detail-grid>.lw-detail-options{grid-column:1;grid-row:3}
 body.lumlyx-wall-page .elementor .lw-spec-tabs.elementor-widget-n-tabs{--n-tabs-title-font-size:16px;--n-tabs-direction:column;--n-tabs-heading-direction:column;--n-tabs-heading-width:100%;--n-tabs-title-width:100%;--n-tabs-title-flex-basis:auto;--n-tabs-title-white-space:normal}
 body.lumlyx-wall-page .elementor .lw-spec-tabs.elementor-widget-n-tabs.elementor-widget > .elementor-widget-container > .e-n-tabs > .e-n-tabs-heading > .e-n-tab-title[aria-selected]{width:100%;min-height:56px;justify-content:flex-start;padding:12px 16px;border:1px solid #d9ddda;border-radius:4px;background:#fff}
 body.lumlyx-wall-page .elementor .lw-spec-tabs.elementor-widget-n-tabs.elementor-widget > .elementor-widget-container > .e-n-tabs > .e-n-tabs-heading > .e-n-tab-title[aria-selected=true]{border-color:#425d4e;background:#edf1ec;box-shadow:inset 4px 0 #425d4e}
 .lw-spec-tabs .e-n-tabs-heading{gap:8px}
}

/* CSS-undantag: katalog-lankar-20261109.
 * Syfte: Behåll katalogens befintliga knapputseende när kontroller får riktiga länkar.
 * Omfattning: Endast länkar i den registrerade Lumlyx-katalogwidgeten.
 * Begränsning i Elementor: Widgetens serverrenderade sidindelning har inga individuella native länkkontroller.
 * Kan tas bort när: Widgetens native stilkontroller omfattar dessa semantiska länkar.
 */
.lumlyx-components a.lp-size{display:inline-flex;align-items:center;justify-content:center;text-align:center;text-decoration:none;font-family:inherit;}
.lumlyx-components a.lp-size:hover,.lumlyx-components a.lp-size:focus{background:#fff;color:#000;border-color:#000;}
.lumlyx-components a.lp-size[aria-pressed="true"]:hover,.lumlyx-components a.lp-size[aria-pressed="true"]:focus{background:#000;color:#fff;}
.lumlyx-components a.lp-size[aria-disabled="true"]{opacity:.55;cursor:default;}
.lumlyx-components a.lp-motif-preview{text-decoration:none;cursor:pointer;}