/* Search-height header, with only 5px above and below its controls. */
.design-settings-host{margin-bottom:16px;font:13px 'Malgun Gothic',sans-serif;color:#222}
.design-settings-host .font-settings{background:#fafafa;border:1px solid #ddd;padding:12px}
.design-settings-host summary{cursor:pointer;font-weight:700}
.design-settings-host p{font-size:12px;color:#666;line-height:1.6}
.design-settings-host input[type=text]{width:100px}
.topbar{height:auto;min-height:0;padding:5px 16px;gap:12px;flex-wrap:wrap}
.topbar nav{width:auto}.search{order:initial}.shell{min-height:calc(100vh - var(--header-height))}
/* Compact search controls; keep the header only 5px above and below. */
.topbar .search input,.topbar .search button,.topbar .refine-search input,.topbar .refine-search button{height:30px;min-height:0;padding:3px 10px;line-height:22px}
.topbar .search input,.topbar .refine-search input{min-width:0}
.topbar nav button{padding:4px 6px}
#categories button.active{background:#ee792d;border-radius:0 22px 22px 0;color:#fff!important;font-weight:800!important}
#categories summary{display:flex;align-items:center;margin-left:0;list-style:none;gap:4px}
#categories summary::-webkit-details-marker{display:none}
#categories summary::before{content:'▶';font-size:9px!important;line-height:1;flex:0 0 10px}
#categories details[open]>summary::before{content:'▼'}
#categories summary>button{width:auto;flex:1;min-width:0;display:block;text-align:left}
.catalog-table{width:max-content;min-width:0;table-layout:fixed}
.products{overflow-x:auto}.catalog-table th,.catalog-table td{position:relative;box-sizing:border-box}
/* One bounded scroll surface keeps the real headings fixed without covering row 1. */
.products{overflow:auto;max-height:calc(100dvh - var(--header-height) - 90px);scrollbar-gutter:stable}
.catalog-table td[data-sort-handle]{cursor:grab;user-select:none}
.catalog-table tr.sort-before td{border-top:3px solid var(--orange)}
.catalog-table tr.sort-after td{border-bottom:3px solid var(--orange)}
/* The horizontal overflow wrapper is the sticky containing block, not the page.
   A page-header offset here pushed headings over the first product row. */
.catalog-table th{position:sticky;top:0;height:34px;padding:4px 6px;line-height:1.2;vertical-align:middle}
.catalog-table th input[type=checkbox]{display:block;margin:0 auto}
.catalog-table td{height:var(--catalog-row-height,180px);padding:5px;overflow:hidden}
.catalog-table td img{height:calc(var(--catalog-row-height,180px) - 12px);max-height:100%;width:100%;object-fit:contain}
.column-grip{position:absolute;right:0;top:0;bottom:0;width:9px;cursor:col-resize;touch-action:none;z-index:5;background:#ed7c2b30}
.row-grip{position:absolute;bottom:0;left:0;right:0;height:8px;cursor:row-resize;touch-action:none;background:#ed7c2b30;z-index:5}
.layout-toolbar{display:flex;gap:12px;align-items:center;padding:8px;background:#fff1d7;flex-wrap:wrap}
.layout-toolbar button{padding:8px;background:#ed7c2b;color:white;border:0;cursor:pointer}
body.layout-dragging{user-select:none}
.font-settings{background:#fff8ef;border:1px solid #edcaaa;padding:10px;margin-bottom:10px;font:14px "Malgun Gothic",sans-serif;color:#171717}
.font-settings summary{cursor:pointer;font-weight:bold}.font-controls{display:flex;gap:14px;align-items:end;flex-wrap:wrap;padding-top:12px}.font-controls label{display:grid;gap:5px}.font-controls select,.font-controls input{height:36px;padding:5px;border:1px solid #bbb;background:white}.font-controls input[type=number]{width:85px}.font-controls input[type=color]{width:65px}.font-controls button{height:36px;border:1px solid #bbb;background:white;cursor:pointer}