/* Holzplatte24 primary configurator layout, isolated for the Infittery shop. */
.ifx-panels { box-sizing:border-box; --panel-ink:#2e2d2a; --panel-muted:#57544e; --panel-line:#e3ded5; --panel-warm:#f6f3ee; --panel-accent:#b8632a; --panel-graphite:#33322f; --z-sticky:200; color:var(--panel-ink); font:inherit; width:100%; max-width:1320px; margin:40px auto; padding:28px; background:#faf8f4; }
.ifx-panels *, .ifx-panels *::before, .ifx-panels *::after { box-sizing:border-box; }
.ifx-panels [hidden] { display:none !important; }
.ifx-panels h2 { font-size:clamp(26px,4vw,36px); line-height:1.15; margin:8px 0 12px; font-weight:700; letter-spacing:-.025em; }
.ifx-panels h3,.ifx-panels p { margin:0 0 12px; }
.ifx-panels__intro { max-width:760px; margin-bottom:28px; line-height:1.65; }
.ifx-panels__eyebrow { text-transform:uppercase; font-size:12px; letter-spacing:.08em; font-weight:700; color:#96501f; }
.ifx-panels__grid { display:grid; grid-template-columns:minmax(0,1fr) minmax(280px,360px); gap:24px; align-items:start; }
.ifx-panels__card { border:1px solid var(--panel-line); border-radius:5px; background:#fff; min-width:0; }
.ifx-panels__step { min-width:0; min-inline-size:0; border:0; margin:0; padding:24px 26px; border-bottom:1px solid #efebe3; }
.ifx-panels__step:last-child { border-bottom:0; }
.ifx-panels__step legend { float:left; width:100%; padding:0; margin:0 0 24px; font-size:18px; font-weight:700; display:flex; flex-wrap:wrap; gap:10px; align-items:center; line-height:1.4; }
.ifx-panels__step legend + * { clear:both; }
.ifx-panels__step-note { font-size:12px; font-weight:400; color:#726d64; }
.ifx-panels__number { display:inline-grid; place-items:center; width:24px; min-height:24px; border-radius:2px; background:var(--panel-graphite); color:white; font-size:13px; }
.ifx-panels__choices { display:flex; flex-wrap:wrap; gap:8px; }
.ifx-panels button,.ifx-panels input,.ifx-panels select { font:inherit; }
.ifx-panels button { cursor:pointer; touch-action:manipulation; }
.ifx-panels .ifx-panels__choice { appearance:none; display:inline-flex; align-items:center; justify-content:center; border:1px solid var(--panel-line); border-radius:3px; min-height:44px; padding:10px 15px; background:#fff; color:var(--panel-ink); line-height:1.35; font-size:14px; font-weight:600; white-space:normal; }
.ifx-panels .ifx-panels__choice[aria-pressed="true"] { border-color:var(--panel-accent); box-shadow:inset 0 0 0 1px var(--panel-accent); background:#fcf5ef; }
.ifx-panels__materials { display:grid; grid-template-columns:1fr 1fr; gap:12px; margin-bottom:18px; }
.ifx-panels .ifx-panels__material { display:flex; flex-direction:column; align-items:stretch; justify-content:flex-start; text-align:left; border:1px solid var(--panel-line); border-radius:4px; background:white; padding:16px; min-height:88px; white-space:normal; color:var(--panel-ink); line-height:1.5; }
.ifx-panels__material strong { font-size:15px; margin-bottom:4px; }
.ifx-panels__material span { font-size:13px; color:var(--panel-muted); }
.ifx-panels .ifx-panels__material[aria-pressed="true"] { border-color:var(--panel-accent); box-shadow:inset 0 0 0 1px var(--panel-accent); background:#fcf5ef; }
.ifx-panels__chosen { display:flex; flex-wrap:wrap; justify-content:space-between; gap:6px; font-size:13px; }
.ifx-panels__tones { display:flex; flex-wrap:wrap; align-items:center; gap:12px; margin:16px 0 12px; }
.ifx-panels__tones .ifx-panels__eyebrow { color:#726d64; }
.ifx-panels__tones .ifx-panels__choice { padding:8px 11px; font-size:13px; }
.ifx-panels__search { display:flex; flex-wrap:wrap; align-items:center; gap:8px; font-size:13px; margin-bottom:14px; }
.ifx-panels__search input { flex:1 1 180px; width:100%; }
.ifx-panels input[type="search"],.ifx-panels input[type="number"] { min-height:46px; border:1px solid #9d978e; border-radius:0; padding:10px 12px; background:#fff; color:var(--panel-ink); max-width:100%; }
.ifx-panels__decors { display:grid; align-content:start; grid-auto-rows:max-content; grid-template-columns:repeat(auto-fill,minmax(96px,1fr)); gap:12px; padding:2px; }
.ifx-panels .ifx-panels__decor { display:flex; flex-direction:column; justify-content:flex-start; align-items:stretch; height:auto; min-height:44px; overflow:visible; white-space:normal; appearance:none; position:relative; min-width:0; padding:0; text-align:left; border:0; border-radius:0; background:transparent; color:var(--panel-ink); overflow-wrap:anywhere; box-shadow:none; }
.ifx-panels__decor img { flex:none; display:block; width:100%; aspect-ratio:1.2; object-fit:cover; border:1px solid var(--panel-line); border-radius:4px; padding:3px; }
.ifx-panels__decor[aria-pressed="true"] img,.ifx-panels__decor[aria-pressed="true"] .ifx-panels__missing { border:2px solid var(--panel-accent); padding:2px; }
.ifx-panels__decor-name { flex:none; width:100%; white-space:normal; display:block; padding:6px 0 0; font-size:12px; line-height:1.35; font-weight:600; }
.ifx-panels__missing { display:grid; place-items:center; aspect-ratio:1.2; font-size:12px; color:var(--panel-muted); padding:12px; border:1px solid var(--panel-line); background:var(--panel-warm); }
.ifx-panels__hint { font-size:13px; line-height:1.5; color:var(--panel-muted); }
.ifx-panels__step > .ifx-panels__hint { margin:12px 0 0; }
.ifx-panels__step > .ifx-panels__hint:empty { display:none; }
.ifx-panels__measure-layout { display:flex; flex-wrap:wrap; gap:24px; }
.ifx-panels__measurements { flex:1 1 250px; min-width:0; display:grid; align-content:start; gap:22px; }
.ifx-panels__field label { display:block; font-size:13px; font-weight:600; margin-bottom:6px; }
.ifx-panels__field-row { display:flex; align-items:center; gap:12px; }
.ifx-panels__field input[type="number"] { flex:0 0 116px; width:116px; }
.ifx-panels__field .ifx-panels__range { flex:1 1 auto; min-width:0; width:100%; accent-color:var(--panel-accent); min-height:44px; padding:0; cursor:pointer; }
.ifx-panels__field small { display:block; margin-top:5px; font-size:12px; color:#726d64; }
.ifx-panels__edges { padding:14px 16px; background:var(--panel-warm); border:1px solid #efebe3; border-radius:4px; font-size:13px; line-height:1.55; }
.ifx-panels__preview { flex:1 1 260px; min-width:0; background:var(--panel-warm); border:1px solid #efebe3; border-radius:4px; padding:22px; text-align:center; }
.ifx-panels__preview .ifx-panels__eyebrow { color:#726d64; font-size:11px; }
.ifx-panels__canvas { min-height:220px; display:grid; place-items:center; padding:28px; }
.ifx-panels__plate { position:relative; border:2px solid #55514a; background-color:#e0dfd2; background-size:cover; background-position:center; box-shadow:5px 8px 14px #24181220; max-width:100%; }
.ifx-panels__dimension-length { position:absolute; left:0; right:0; bottom:calc(100% + 9px); border-bottom:1px solid #726d64; padding-bottom:2px; font-size:11px; white-space:nowrap; line-height:1.3; }
.ifx-panels__dimension-width { position:absolute; right:calc(100% + 7px); top:0; bottom:0; border-right:1px solid #726d64; font-size:11px; writing-mode:vertical-rl; transform:rotate(180deg); padding-right:3px; white-space:nowrap; line-height:1.3; }
.ifx-panels__summary { background:var(--panel-graphite); color:#f4f1ec; border-radius:5px; padding:24px; position:sticky; top:100px; min-width:0; }
.ifx-panels__summary > .ifx-panels__eyebrow { color:#b5ada1; }
.ifx-panels__summary .ifx-panels__hint,.ifx-panels__summary a { color:#d8d0c5; }
.ifx-panels__summary-text { line-height:1.6; overflow-wrap:anywhere; font-weight:600; font-size:15px; }
.ifx-panels__gate { padding:18px; border:1px dashed #706b62; border-radius:3px; margin:18px 0; font-size:14px; line-height:1.7; }
.ifx-panels__gate strong { display:block; margin-bottom:5px; color:#fff; }
.ifx-panels__gate p { color:#d8d0c5; margin:0; }
.ifx-panels__price { font-size:36px; font-weight:700; line-height:1.2; font-variant-numeric:tabular-nums; margin:20px 0 6px; color:#fff; }
.ifx-panels__quantity { display:flex; align-items:center; flex-wrap:wrap; gap:10px; margin:20px 0; }
.ifx-panels__quantity label { position:absolute; width:1px; height:1px; overflow:hidden; clip-path:inset(50%); }
.ifx-panels__quantity input { width:76px; }
.ifx-panels__quantity span { color:#d8d0c5; font-size:13px; }
.ifx-panels .ifx-panels__submit { display:flex; align-items:center; justify-content:center; width:100%; min-height:48px; padding:14px 16px; border:0; border-radius:3px; background:var(--panel-accent); color:#fff; font-weight:700; font-size:19px; line-height:1.2; white-space:normal; }
.ifx-panels .ifx-panels__submit:disabled { background:#4a4844; color:#f4f1ec; cursor:not-allowed; }
.ifx-panels__status { font-size:13px; line-height:1.5; margin-top:14px; }
.ifx-panels__status[data-error="true"] { color:#ffc8b9; }
.ifx-panels__inline-purchase,.ifx-panels__mobile-bar { display:none; }
.ifx-panels :focus-visible { outline:3px solid #216f97; outline-offset:3px; }
@media(max-width:1100px) { .ifx-panels { padding:20px; } .ifx-panels__grid { grid-template-columns:minmax(0,1fr) 300px; gap:20px; } .ifx-panels__step { padding:22px; } }
@media(max-width:927px) {
 .ifx-panels__grid { grid-template-columns:1fr; } .ifx-panels__summary { position:static; }
 .ifx-panels__inline-purchase { display:block; margin-top:16px; }
 .ifx-panels__inline-price { font-size:30px; font-weight:700; line-height:1.2; }
 .ifx-panels__decors { grid-template-columns:repeat(auto-fill,minmax(100px,1fr)); }
}
@media(max-width:927px) and (min-height:500px) {
 .ifx-panels--in-view .ifx-panels__mobile-bar { display:flex; position:fixed; left:0; right:0; bottom:var(--ifx-panels-mobile-offset,0px); z-index:var(--z-sticky); gap:10px; align-items:center; padding:10px 12px calc(10px + var(--ifx-panels-mobile-safe-area,env(safe-area-inset-bottom,0px))); background:var(--panel-graphite); color:#fff; box-shadow:0 -4px 14px #24181230; }
 .ifx-panels__mobile-bar input { width:54px; flex:0 0 54px; min-height:44px; padding:8px; }
 .ifx-panels__mobile-result { flex:1 1 auto; min-width:0; }
 .ifx-panels__mobile-price { font-size:20px; line-height:1.15; font-weight:700; white-space:nowrap; }
 .ifx-panels__mobile-tax { font-size:10px; line-height:1.3; color:#d8d0c5; margin:2px 0 0; }
 .ifx-panels .ifx-panels__mobile-bar .ifx-panels__submit { width:auto; flex:0 1 160px; min-width:0; font-size:16px; padding:10px; }
 .ifx-panels { padding-bottom:110px; }
 .ifx-panels input,.ifx-panels button { scroll-margin-bottom:calc(130px + var(--ifx-panels-mobile-offset,0px)); }
}
@media(max-width:480px) {
 .ifx-panels { padding:12px; margin:20px auto; }
 .ifx-panels__step,.ifx-panels__summary { padding:18px; }
 .ifx-panels__materials { grid-template-columns:1fr; }
 .ifx-panels__decors { grid-template-columns:repeat(2,minmax(0,1fr)); gap:12px; }
 .ifx-panels__preview { padding:16px; }
 .ifx-panels__canvas { padding:28px; min-height:200px; }
 .ifx-panels__step-note { flex-basis:100%; }
 .ifx-panels__step legend { font-size:16px; }
 .ifx-panels__mobile-bar { gap:7px; }
 .ifx-panels .ifx-panels__mobile-bar .ifx-panels__submit { font-size:14px; flex-basis:118px; }
 .ifx-panels__mobile-price { font-size:18px; }
 .ifx-panels__field-row { gap:8px; }
 .ifx-panels__field input[type="number"] { flex-basis:104px; width:104px; }
}

/* Ecomus button shine pseudo-elements otherwise extend beyond local cards. */
.ifx-panels button::before,.ifx-panels button::after { content:none; display:none; }
.ifx-panels__preview .ifx-panels__status[data-error="true"] { color:#973222; }
/* Ecomus normal input borders must not replace the slider track. */
.ifx-panels__field input.ifx-panels__range { appearance:none; -webkit-appearance:none; background:transparent; border:0; box-shadow:none; border-radius:0; }
.ifx-panels__range::-webkit-slider-runnable-track { height:5px; border-radius:4px; background:#ded9d1; }
.ifx-panels__range::-webkit-slider-thumb { appearance:none; -webkit-appearance:none; width:18px; height:18px; margin-top:-6.5px; border:0; border-radius:50%; background:#96501f; }
.ifx-panels__range::-moz-range-track { height:5px; border-radius:4px; background:#ded9d1; }
.ifx-panels__range::-moz-range-thumb { width:18px; height:18px; border:0; border-radius:50%; background:#96501f; }

/* Original production convention: length follows grain, always on the X axis. */
.ifx-panels__texture-frame { position:absolute; inset:0; overflow:hidden; }
.ifx-panels__texture { position:absolute; left:50%; top:50%; transform:translate(-50%,-50%) rotate(90deg); background-size:cover; background-position:center; }