/* DornBox Products Advanced — glass everywhere, responsive motion, readable inputs. */
.advanced-modal-open{overflow:hidden}
.advanced-layer{position:fixed;inset:0;z-index:120;display:grid;place-items:center;padding:clamp(10px,2.5vw,34px);isolation:isolate}
.advanced-confirm-layer{z-index:135}
.advanced-backdrop{position:absolute;inset:0;background:rgba(24,31,50,.32);-webkit-backdrop-filter:blur(14px) saturate(150%);backdrop-filter:blur(14px) saturate(150%);animation:adv-fade .25s ease-out both}
.advanced-panel{
 position:relative;display:flex;flex-direction:column;width:min(100%,1080px);
 max-height:min(91dvh,1050px);overflow:hidden;
 background:linear-gradient(142deg,rgba(255,255,255,.6),rgba(243,247,255,.25)),rgba(244,249,255,.69);
 border:1px solid rgba(255,255,255,.97);border-radius:28px;
 box-shadow:0 30px 100px rgba(21,31,56,.25),inset 0 1px rgba(255,255,255,.9);
 -webkit-backdrop-filter:blur(28px) saturate(165%);backdrop-filter:blur(28px) saturate(165%);
 animation:adv-appear .38s var(--glass-ease,cubic-bezier(.22,1,.36,1)) both
}
.advanced-header{display:flex;justify-content:space-between;align-items:flex-start;gap:18px;padding:29px 32px 20px;border-bottom:1px solid rgba(255,255,255,.8)}
.advanced-header .overline{margin:0 0 8px}
.advanced-header h2{font-size:clamp(26px,3vw,38px);line-height:1.14;font-weight:730;letter-spacing:-.043em}
.advanced-hint{font-size:12px;color:#6b788a;line-height:1.6;margin-top:8px}
.advanced-header .product-drawer-close{flex-shrink:0}
.match-summary{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:10px;padding:16px 26px}
.match-metric{display:flex;align-items:flex-start;flex-direction:column;gap:6px;border:1px solid #ffffffda;padding:15px 19px;border-radius:17px;background:rgba(255,255,255,.41);box-shadow:inset 0 1px rgba(255,255,255,.96),0 5px 19px rgba(38,49,71,.07);-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px)}
.match-metric strong{font-size:28px;font-weight:740;letter-spacing:-.045em;line-height:1}
.match-metric span{font-size:11px;color:#748192}
.match-actions{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:8px 30px 15px}
.match-select-all{display:inline-flex;align-items:center;gap:10px;font-size:13px;color:#3a495d;cursor:pointer}
.match-select-all input,.match-checkbox,.editor-toggle input{accent-color:#405871;width:17px;height:17px}
.match-rows{flex:1;min-height:85px;overflow-y:auto;overscroll-behavior:contain;padding:0 25px 9px;display:grid;align-content:start;gap:9px}
.match-item{display:flex;align-items:center;gap:13px;cursor:pointer;background:rgba(255,255,255,.48);border:1px solid rgba(255,255,255,.95);border-radius:17px;padding:15px 16px;box-shadow:inset 0 1px #fff,0 5px 18px rgba(39,53,82,.045);transition:transform .17s,box-shadow .2s,background .2s}
.match-item:hover{background:rgba(255,255,255,.81);box-shadow:0 10px 30px #3c4d651c}
.match-item:active{transform:scale(.997)}
.match-item.is-selected{background:rgba(231,242,255,.77);border-color:rgba(116,157,209,.65)}
.match-item-data{flex:1;min-width:0}
.match-item-content{display:grid;grid-template-columns:minmax(0,1fr) 30px minmax(0,1fr);gap:10px;align-items:center}
.match-source,.match-target{display:grid;gap:4px;min-width:0}
.match-source strong,.match-target strong{font-size:13px;color:#243243;line-height:1.35;overflow-wrap:anywhere}
.match-source small,.match-target small{font-size:11px;color:#8592a2;overflow:hidden;text-overflow:ellipsis}
.match-join-arrow{text-align:center;color:#8398b3;font-size:21px}
.match-tag{justify-self:start;color:#677489;font-size:10px;font-weight:730;background:rgba(255,255,255,.68);border:1px solid rgba(255,255,255,.92);border-radius:7px;padding:3px 7px}
.match-tag.positive{color:#277b60;background:rgba(226,245,235,.7)}
.match-evidence{font-size:11px;color:#39876a;margin-top:10px}
.match-pagination{display:flex;align-items:center;justify-content:space-between;padding:8px 30px 15px;font-size:12px;color:#8793a0}
.match-pagination>div{display:flex;gap:9px}
.match-pagination button{height:35px;width:39px;border:1px solid white;border-radius:10px;background:rgba(255,255,255,.55);font-size:23px;cursor:pointer}
.match-pagination button:disabled{opacity:.35;cursor:default}
.match-review{padding:12px 30px 16px;max-height:170px;overflow-y:auto;border-top:1px solid #ffffffb5}
.match-review:empty{display:none}
.match-review h3{font-size:13px}
.match-review-line{display:flex;justify-content:space-between;gap:20px;font-size:11px;padding:7px 0;border-bottom:1px solid #ffffff8a}
.match-review-line small{color:#ae713b}
.advanced-footer{display:flex;align-items:center;justify-content:space-between;gap:13px;padding:15px 30px calc(15px + env(safe-area-inset-bottom));border-top:1px solid rgba(255,255,255,.95);background:rgba(255,255,255,.35);-webkit-backdrop-filter:blur(15px);backdrop-filter:blur(15px);font-size:12px;color:#758192}
.advanced-error{padding:13px 20px;margin:8px 26px;border-radius:12px;border:1px solid rgba(223,114,121,.4);background:rgba(255,224,225,.7);color:#ad3641;font-size:12px;line-height:1.5}
.advanced-error.advanced-success{background:rgba(216,246,228,.8);color:#246f4a;border-color:#8fd3af}
.match-empty{padding:40px 25px;color:#7c8798;text-align:center;font-size:14px}
.match-confirm-panel{max-width:670px}
.match-confirm-panel .advanced-hint{margin:17px 30px}
.match-confirm-rows{overflow-y:auto;min-height:40px;max-height:45dvh;padding:0 30px;display:grid;gap:8px}
.match-confirm-item{background:rgba(255,255,255,.51);border:1px solid white;border-radius:12px;padding:13px 15px;display:flex;justify-content:space-between;gap:15px;font-size:12px}
.match-confirm-item strong{font-size:11px;white-space:nowrap}
.match-confirm-item strong.positive{color:#1e8760}.match-confirm-item strong.danger{color:#ad3944}
.editor-panel{max-width:990px;height:min(91dvh,990px)}
.editor-tabs{display:flex;gap:6px;padding:11px 30px 0}
.editor-tab{border:1px solid transparent;background:transparent;color:#718091;border-radius:12px;padding:11px 19px;cursor:pointer;font-weight:670;font-size:13px;transition:background .2s,transform .18s,box-shadow .18s}
.editor-tab.active{color:#283a4d;background:rgba(255,255,255,.72);box-shadow:inset 0 1px #fff,0 2px 13px #3c4f6716;border-color:white}
.editor-tab:active{transform:scale(.96)}
.editor-tools{display:flex;align-items:center;gap:12px;padding:15px 29px}
.editor-tools>input{flex:1;min-width:0;height:46px;padding:0 15px;border-radius:13px;background:rgba(255,255,255,.64);border:1px solid #fff;box-shadow:inset 0 1px #fff;outline:0;color:#293747}
.editor-tools>input:focus,.editor-input:focus,.editor-lookup:focus{border-color:rgba(79,130,202,.65);box-shadow:0 0 0 4px #5894db18}
.editor-toggle{display:flex;align-items:center;gap:6px;font-size:12px;white-space:nowrap;color:#596a7b}
.editor-body{flex:1;overflow-y:auto;overscroll-behavior:contain;padding:7px 29px 22px;scrollbar-color:#a4b2c09c transparent}
.editor-overview,.editor-field,.editor-variation-row,.editor-empty{border:1px solid rgba(255,255,255,.94);background:rgba(255,255,255,.53);-webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px);border-radius:17px;box-shadow:inset 0 1px #fff,0 4px 16px rgba(38,52,80,.065);padding:19px 21px;margin-bottom:12px}
.editor-overview{display:flex;align-items:center;justify-content:space-between;gap:16px}
.editor-overview p,.editor-overview strong{font-size:13px;font-weight:680;overflow-wrap:anywhere}
.editor-overview small{font-size:11px;color:#8592a2}
.editor-field-summary{margin:12px 5px 17px;color:#748395;font-size:12px}
.editor-field-heading{display:flex;align-items:center;gap:9px;flex-wrap:wrap;margin-bottom:12px}
.editor-field-heading strong{font-size:13px;color:#303e51}
.editor-field-type{font-size:10px;color:#708293;background:rgba(224,232,241,.55);padding:4px 8px;border-radius:8px}
.editor-required{font-size:10px;color:#a86d30;background:rgba(255,226,190,.5);padding:4px 8px;border-radius:8px}
.editor-input,.editor-lookup{border:1px solid #ffffffd9;background:rgba(255,255,255,.64);box-shadow:inset 0 1px white;border-radius:11px;width:100%;padding:12px 13px;min-height:45px;outline:0;color:#293847;resize:vertical;font-size:13px}
.editor-field-help{color:#8d9aaa;font-size:11px;display:block;margin-top:9px}
.editor-value-chips{display:flex;gap:8px;flex-wrap:wrap;margin:12px 0}
.editor-value-chip{display:inline-flex;gap:8px;align-items:center;border:1px solid #fff;border-radius:10px;padding:5px 7px 5px 11px;background:rgba(234,245,255,.77);font-size:12px;color:#3e5468}
.editor-chip-remove{border:0;background:rgba(255,255,255,.7);border-radius:7px;font-size:18px;line-height:1;width:25px;height:25px;color:#607080;cursor:pointer}
.editor-lookup-results{display:flex;flex-wrap:wrap;gap:6px;margin-top:9px}
.editor-lookup-results small{font-size:11px;color:#83909f}
.editor-lookup-results small.editor-lookup-error{color:#b74449}
.editor-lookup-option{border:1px solid #fff;background:rgba(255,255,255,.67);padding:8px 11px;border-radius:9px;font-size:12px;color:#435368;cursor:pointer;transition:background .15s,transform .15s}
.editor-lookup-option:hover{background:rgba(229,240,255,.9)}
.editor-lookup-option:active{transform:scale(.96)}
.editor-variation-row{display:flex;align-items:center;justify-content:space-between;gap:15px;font-size:13px}
.editor-variation-row.is-current{background:rgba(221,238,251,.65)}
.editor-variation-row>span{font-size:12px;color:#8191a3;overflow-wrap:anywhere}
.editor-empty{text-align:center;padding:37px 25px;color:#778697;line-height:1.65}
.editor-footer{flex-shrink:0}
.editor-footer .advanced-hint{margin:0}
.products-hero-actions{flex-wrap:wrap;justify-content:flex-end}
@keyframes adv-appear{from{opacity:0;transform:translateY(18px) scale(.978)}to{opacity:1;transform:translateY(0) scale(1)}}
@keyframes adv-fade{from{opacity:0}to{opacity:1}}
@media(max-width:740px){
 .advanced-layer{padding:0;align-items:end}
 .advanced-panel{width:100%;max-height:calc(100dvh - 10px);height:calc(100dvh - 10px);border-radius:24px 24px 0 0;animation:adv-slide-up .34s var(--glass-ease,cubic-bezier(.22,1,.36,1)) both}
 .match-confirm-panel{height:auto;max-height:90dvh}
 .advanced-header{padding:20px 17px 14px}
 .advanced-header h2{font-size:26px}
 .advanced-hint{font-size:11px}
 .match-summary{gap:6px;padding:12px}
 .match-metric{padding:11px 9px;border-radius:12px;gap:5px}
 .match-metric strong{font-size:21px}.match-metric span{font-size:9px}
 .match-actions{padding:9px 13px;gap:8px}.match-select-all{font-size:11px}
 .match-actions .button{font-size:11px;min-height:36px;padding:0 10px}
 .match-rows{padding:0 11px 8px}
 .match-item{padding:13px 10px;gap:9px}
 .match-item-content{grid-template-columns:minmax(0,1fr) 16px minmax(0,1fr);gap:6px}
 .match-source strong,.match-target strong{font-size:11px}
 .match-source small,.match-target small{font-size:9px}
 .match-evidence{font-size:10px}
 .match-pagination{padding:8px 15px}
 .match-review{padding:11px 16px}
 .advanced-footer{padding:12px 15px calc(12px + env(safe-area-inset-bottom))}
 .advanced-footer .button{font-size:12px;padding:0 12px}
 .editor-tabs{padding:7px 14px 0}
 .editor-tools{padding:12px 14px;gap:9px;flex-wrap:wrap}
 .editor-tools>input{flex-basis:100%;min-height:42px}
 .editor-tools .button{min-height:38px;font-size:11px}
 .editor-body{padding:8px 13px 18px}
 .editor-overview,.editor-field,.editor-variation-row{padding:15px 14px;border-radius:15px}
 .editor-overview{align-items:flex-start;flex-direction:column}
 .match-confirm-rows{padding:0 14px}
 .match-confirm-panel .advanced-hint{margin:12px 14px}
 .products-hero-actions{flex-wrap:wrap;justify-content:flex-end}
 .products-hero-actions #productsMatchOpen{font-size:11px;padding:0 12px}
}
@media(max-width:420px){
 .products-hero-actions #productsMatchOpen{min-height:36px}
 .advanced-header h2{font-size:23px}
 .match-metric strong{font-size:19px}
 .match-metric span{font-size:9px}
 .match-confirm-item{flex-direction:column;gap:5px}
}
@media(prefers-reduced-motion:reduce){
 .advanced-panel,.advanced-backdrop{animation:none!important}
 .match-item,.editor-tab,.editor-lookup-option{transition:none!important}
}
@supports not ((backdrop-filter:blur(1px)) or (-webkit-backdrop-filter:blur(1px))){
 .advanced-panel,.editor-field,.match-item{background:#f5f8fc}
 .advanced-backdrop{background:rgba(20,27,43,.65)}
}

/* Three footer actions fit narrow iPhones without horizontal overflow. */
@media(max-width:740px){
 .product-drawer-footer{flex-wrap:wrap;gap:8px}
 .product-drawer-footer #productDrawerEdit{flex:1 0 100%;min-height:43px}
 .product-drawer-footer #productDrawerCopy,.product-drawer-footer #productDrawerDone{flex:1;min-width:0}
}

/* Image gallery is part of the same Liquid Glass surface as the editor. */
.editor-gallery{display:flex;gap:10px;overflow-x:auto;scroll-snap-type:x proximity;padding:13px;margin:0 0 15px;background:rgba(255,255,255,.38);border:1px solid rgba(255,255,255,.95);border-radius:17px;box-shadow:inset 0 1px #fff}
.editor-image-link{display:block;position:relative;flex:0 0 92px;width:92px;height:108px;border-radius:12px;overflow:hidden;background:rgba(255,255,255,.78);border:1px solid #fff;scroll-snap-align:start;box-shadow:0 5px 14px #343e5713;transition:transform .2s var(--glass-ease)}
.editor-image{display:block;width:100%;height:100%;object-fit:contain}
@media(hover:hover) and (pointer:fine){.editor-image-link:hover{transform:translateY(-3px) scale(1.02)}}
@media(max-width:740px){.editor-gallery{gap:8px;padding:9px}.editor-image-link{flex-basis:77px;width:77px;height:95px}}
@media(prefers-reduced-motion:reduce){.editor-image-link{transition:none!important}}

/* Full-page editor, not an overlay. Same Liquid Glass as all product screens. */
.editor-screen{min-height:calc(100svh - 66px);padding:25px clamp(12px,3vw,46px) 80px;overflow:visible}
.editor-screen .editor-page-shell{
 width:100%;max-width:1380px;max-height:none;height:auto;margin:0 auto;
 border-radius:28px;overflow:visible;animation:glass-arrive .45s var(--glass-ease) both;
 background:linear-gradient(150deg,rgba(255,255,255,.44),rgba(255,255,255,.09)),rgba(242,247,255,.58);
}
.editor-screen .advanced-header{align-items:center}
.editor-screen .editor-body{min-height:310px;max-height:none;overflow:visible;padding-bottom:42px}
.editor-screen .editor-tools{position:sticky;top:66px;z-index:4;border-top:1px solid #ffffffab;border-bottom:1px solid #ffffffab;background:rgba(242,247,255,.73);-webkit-backdrop-filter:blur(19px);backdrop-filter:blur(19px)}
.editor-screen .editor-footer{position:sticky;bottom:0;z-index:5;border-radius:0 0 28px 28px}
.editor-screen .editor-back{white-space:nowrap}
.editor-reference-panel{
 display:flex;justify-content:space-between;align-items:center;gap:17px;margin:16px 29px 5px;
 border:1px solid rgba(255,255,255,.89);border-radius:16px;padding:15px 19px;
 background:linear-gradient(135deg,rgba(221,237,252,.63),rgba(255,255,255,.38));
 box-shadow:inset 0 1px white,0 8px 23px #3043660c;
 -webkit-backdrop-filter:blur(13px);backdrop-filter:blur(13px)
}
.editor-reference-content{min-width:0;flex:1}
.editor-reference-content strong{font-size:13px;font-weight:720;color:#2e4258}
.editor-reference-content p{margin:4px 0 0;color:#667991;font-size:11px;line-height:1.5;overflow-wrap:anywhere}
.editor-reference-actions{display:flex;gap:9px;flex-wrap:wrap;justify-content:flex-end}
.editor-reference-actions .button{min-height:38px;font-size:12px;padding:0 13px}
.editor-attribute-notes{margin-bottom:13px;padding:10px 12px;border-radius:10px;background:rgba(255,255,255,.35);border:1px solid #ffffffb8}
.editor-attribute-notes summary{cursor:pointer;color:#647b95;font-weight:680;font-size:11px}
.editor-attribute-note-content{display:grid;gap:7px;margin-top:10px}
.editor-attribute-note-content p{font-size:12px;line-height:1.55;color:#56667a;white-space:pre-line}
@media(max-width:740px){
 .editor-screen{padding:10px 9px 35px;min-height:calc(100svh - 60px)}
 .editor-screen .editor-page-shell{height:auto;max-height:none;width:100%;border-radius:21px;animation:glass-arrive .3s var(--glass-ease) both}
 .editor-screen .advanced-header{align-items:flex-start}
 .editor-screen .editor-back{font-size:11px;padding:0 10px;min-height:38px}
 .editor-reference-panel{flex-direction:column;align-items:stretch;padding:12px;margin:12px 13px 4px;gap:10px}
 .editor-reference-actions{justify-content:stretch}
 .editor-reference-actions .button{flex:1;min-height:38px}
 .editor-screen .editor-tools{top:54px}
 .editor-screen .editor-body{padding-bottom:32px}
 .editor-screen .editor-footer{border-radius:0 0 21px 21px}
}
@media(prefers-reduced-motion:reduce){.editor-screen .editor-page-shell{animation:none!important}}
