#editor .group{background:#f4f6ed;border-color:#cbd8b9}
#editor .group>.heading,#editor .option>.heading{display:flex;align-items:center;justify-content:space-between;gap:10px;flex-wrap:wrap}
#editor .group>.heading h3,#editor .option>.heading b{flex:1 1 170px;margin:0;overflow-wrap:anywhere}
#editor .order-controls{display:flex;align-items:end;gap:6px;flex-wrap:wrap}
#editor .order-field{display:grid;gap:2px;margin:0;color:#506441;font-size:11px;font-weight:700}
#editor .order-position{width:66px;min-height:36px;margin:0;padding:5px 7px;text-align:center;font-weight:700}
#editor .order-controls button{min-height:36px;padding:6px 9px;border-color:#c6d3ae;background:#f9fbea;color:#354d25;font-size:12px}
#editor .order-controls button:disabled{opacity:.42}
#editor .option{margin-top:14px;padding:14px;border:1px solid #dbe4ce;border-radius:12px;background:#fffefa}
#editor .option>.heading{margin:0 0 8px}
#editor #order-status{min-height:1.3em;color:#376631;font-size:13px;font-weight:600}
#editor[open]{padding:0;overflow:hidden}
html.product-editor-open,body.product-editor-open{overflow:hidden;overscroll-behavior:none}
#editor #product-form{display:flex;flex-direction:column;height:min(90vh,820px)}
#editor .editor-scroll{flex:1 1 auto;min-height:0;overflow-y:auto;overscroll-behavior:contain;touch-action:pan-y;-webkit-overflow-scrolling:touch;padding:24px 26px 16px}
#editor .editor-footer{flex:none;position:relative;z-index:1;padding:12px 26px 20px;background:#fffdf8;border-top:1px solid #dce5d3;box-shadow:0 -8px 24px rgba(32,61,27,.08)}
#editor .editor-footer #order-status:empty,#editor .editor-footer #editor-error:empty{display:none}
#editor #save-product{display:block;width:100%;min-height:48px;margin:0}
@media(max-width:600px){#editor .group{padding:13px}#editor .option{padding:11px}#editor .order-controls{width:100%}#editor .order-controls button{flex:1}#editor .group>.heading .remove-group,#editor .option>.heading .remove{margin-left:auto}}
@media(max-width:600px){#editor .editor-scroll{padding:18px 16px 12px}#editor .editor-footer{padding:10px 16px 16px}}

/* Compact product editor: one group and one detailed option at a time. */
#editor .editor-title{margin:0 0 10px;align-items:flex-start}
#editor .editor-title h2{margin:0 0 3px}
#editor .editor-title-actions{display:flex;gap:7px}
#editor .editor-title-actions button{padding:8px 11px;font-size:12px}
#editor .editor-title h2{font-size:clamp(22px,5vw,30px);overflow-wrap:anywhere}
#editor .product-basics{margin:8px 0 15px;border:1px solid #d4e2ce;border-radius:12px;background:#f6faf2}
#editor .product-basics>summary{display:flex;align-items:center;justify-content:space-between;gap:10px;padding:12px 14px;color:#345b37;font-size:13px;font-weight:800;cursor:pointer;list-style:none}
#editor .product-basics>summary::-webkit-details-marker{display:none}
#editor .product-basics>summary:after{content:'⌄';font-size:18px}
#editor .product-basics[open]>summary:after{transform:rotate(180deg)}
#editor .product-basics>summary small{flex:1;min-width:0;color:#71856e;font-size:11px;font-weight:650;text-align:right}
#editor .product-basics-body{padding:1px 13px 13px;border-top:1px solid #e1ecda;background:#fffefa;border-radius:0 0 12px 12px}
#editor .editor-available{align-self:end;min-height:42px;margin:0 0 4px;padding:9px 11px;border:1px solid #d7e2cf;border-radius:10px;background:#f4f8ef;font-weight:700}
#editor .product-more{margin:10px 0 14px;border:1px solid #dce6d5;border-radius:11px;background:#fffefa}
#editor .product-more>summary{padding:11px 13px;color:#3c6038;font-size:12px;font-weight:750;cursor:pointer}
#editor .product-more-body{padding:0 13px 13px;border-top:1px solid #ecf0e7}
#editor .editor-groups-heading{align-items:center;margin:12px 0 10px}
#editor .editor-groups-heading h2{margin:0 0 2px;font-size:24px}
#editor .editor-groups-heading small{font-size:11px}
#editor .editor-groups-heading button{white-space:nowrap}
#editor .group{margin:7px 0;padding:0;border:1px solid #d7e3d0;border-radius:12px;background:#fffefa;box-shadow:0 2px 7px #1935140a}
#editor .group>.heading{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:2px 12px;margin:0;padding:11px 13px}
#editor .group>.heading h3{grid-column:1;margin:0;overflow:hidden;font-size:14px;text-overflow:ellipsis;white-space:nowrap;color:#2e4d31}
#editor .group>.heading .group-meta{grid-column:1;grid-row:2;color:#73836d;font-size:10px}
#editor .group>.heading .group-toggle{grid-column:2;grid-row:1/3;min-height:34px;padding:6px 12px;border-color:#ceddcc;background:#edf5e9;color:#355d38;font-size:11px;font-weight:800}
#editor .group:not(.is-collapsed)>.heading{background:#edf5e9;border-radius:11px 11px 0 0}
#editor .group-body{padding:12px 14px 14px;border-top:1px solid #e3ebdd}
#editor .group.is-collapsed>.group-body,#editor .option.is-collapsed>.option-body{display:none}
#editor .group-body>label:first-child{margin-top:0}
#editor .group-body .order-controls{margin:0 0 12px;padding:0 0 10px;border-bottom:1px solid #e9eee4}
#editor .group-options-heading{display:flex;align-items:center;justify-content:space-between;gap:12px;margin:0 0 8px;color:#354e37;font-size:12px}
#editor .group-options-heading button{padding:7px 11px;border-color:#bdd2ba;background:#f0f8ed;color:#325c36;font-size:11px}
#editor .group-settings{margin:12px 0 0;border-top:1px solid #e5ece0}
#editor .group-settings>summary{padding:11px 1px;color:#47654a;font-size:11px;font-weight:750;cursor:pointer}
#editor .group-settings-body{padding:0 1px 6px}
#editor .group-settings-body>label:first-of-type{margin-top:0}
#editor .option{margin:5px 0;padding:0;border:1px solid #e0e9d9;border-radius:10px;background:white}
#editor .option>.heading{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:1px 9px;margin:0;padding:9px 11px}
#editor .option>.heading b{grid-column:1;min-width:0;overflow:hidden;color:#344934;font-size:12px;text-overflow:ellipsis;white-space:nowrap}
#editor .option>.heading .option-meta{grid-column:1;grid-row:2;color:#71816e;font-size:10px}
#editor .option>.heading .option-toggle{grid-column:3;grid-row:1/3;min-height:29px;padding:4px 9px;border:1px solid #dbe5d4;border-radius:7px;background:#f7faf5;color:#3b6140;font-size:10px}
#editor .option>.heading .option-switch{grid-column:2;grid-row:1/3;position:relative;display:flex;align-items:center;gap:5px;margin:0;padding:0 2px;cursor:pointer;white-space:nowrap;font-size:10px;font-weight:750;color:#527052}
#editor .option-switch-text{color:#426b50;font-size:10px;font-weight:650}
#editor .option.is-paused .option-switch-text{color:#707a70}
#editor .option-switch input{position:absolute;inset:0;width:100%;height:100%;margin:0;opacity:0;cursor:pointer}
#editor .option-switch-track{position:relative;display:inline-block;width:34px;height:20px;border-radius:99px;background:#b9c1b7;transition:background .15s;pointer-events:none}
#editor .option-switch-track:after{content:'';position:absolute;left:3px;top:3px;width:14px;height:14px;border-radius:50%;background:#fff;box-shadow:0 1px 3px #142c2440;transition:transform .15s}
#editor .option-switch input:checked+.option-switch-track{background:#237247}
#editor .option-switch input:checked+.option-switch-track:after{transform:translateX(14px)}
#editor .option-switch input:focus-visible+.option-switch-track{outline:3px solid #83b995;outline-offset:2px}
#editor .option-switch input:disabled+.option-switch-track{opacity:.55}
#editor .option.is-paused>.heading{background:#f6f7f4}
#editor .option-body{padding:10px 12px 13px;border-top:1px solid #e8eee4;background:#fbfdf9}
#editor .option-body .order-controls{margin-bottom:9px}
#editor .option-body>details{margin:8px 0;color:#466144;font-size:12px}
#editor .option-body>details>summary{cursor:pointer;font-weight:700}
#editor .option-body>.remove,#editor .group-body>.remove-group{margin-top:12px;padding:6px 10px;background:#fff7f3;border-color:#edd6ce;font-size:11px}
@media(max-width:600px){
 #editor .editor-title-actions{width:auto}
 #editor .editor-title-actions button{padding:7px 9px}
 #editor .editor-groups-heading{flex-direction:row;align-items:center}
 #editor .editor-groups-heading h2{font-size:21px}
 #editor .editor-groups-heading button{padding:8px 10px;font-size:11px}
 #editor .group-body .order-controls,#editor .option-body .order-controls{width:100%}
 #editor .group-body .order-controls button,#editor .option-body .order-controls button{flex:1}
 #editor .option>.heading{gap:1px 6px;padding:9px 8px}
 #editor .option>.heading .option-switch{gap:4px}
}

/* Keep the save action above mobile browser controls without covering the last field. */
#editor[open]{max-height:calc(100dvh - 24px)}
#editor #product-form{position:relative;height:min(calc(100dvh - 24px),820px)}
#editor .editor-scroll{padding-bottom:calc(120px + env(safe-area-inset-bottom, 0px));scroll-padding-bottom:calc(108px + env(safe-area-inset-bottom, 0px))}
#editor .editor-footer{position:absolute;right:14px;bottom:calc(14px + env(safe-area-inset-bottom, 0px));z-index:3;display:flex;flex-direction:column;align-items:flex-end;gap:7px;width:auto;max-width:calc(100% - 28px);padding:0;border:0;background:transparent;box-shadow:none;pointer-events:none}
#editor .editor-footer #order-status:not(:empty),#editor .editor-footer #editor-error:not(:empty){max-width:360px;margin:0;padding:8px 11px;border:1px solid #dce7d4;border-radius:10px;background:#fffefa;box-shadow:0 5px 18px #1b371c20;font-size:12px}
#editor .editor-footer #editor-error:not(:empty){border-color:#e6cfc7}
#editor #save-product{width:auto;min-width:176px;min-height:52px;margin:0;padding:10px 22px;border:1px solid #e3f0d7;border-radius:999px;background:#285b38;color:#fff;font-size:14px;font-weight:800;box-shadow:0 9px 24px #163e2799;pointer-events:auto}
#editor #save-product:before{content:'✓';margin-right:8px;font-size:17px}
#editor #save-product:hover{background:#1c482b;transform:translateY(-1px)}
#editor #save-product:focus-visible{outline:3px solid #e9b45d;outline-offset:3px}
@media(max-width:600px){#editor .editor-footer{right:12px;bottom:calc(16px + env(safe-area-inset-bottom, 0px))}#editor #save-product{min-width:164px}}