/* E-commerce tab: the shell (rail, top bar, search box), popovers, sort buttons and column helpers shared by every part.
   Laid out like the cloneQ seller panel (static/css/panel.css), in Party Villa's colours from style.css. */
.ecom { display: flex; height: calc(100vh - 48px); height: calc(100dvh - 48px); min-height: 0; background: var(--bg); }
.ecom-rail { width: 76px; flex: none; display: flex; flex-direction: column; background: #0f3330; overflow-y: auto; overflow-x: hidden; scrollbar-width: none; }
.ecom-rail::-webkit-scrollbar { display: none; }
.ecom-rail a, .ecom-rail button { position: relative; display: flex; flex-direction: column; align-items: center; gap: 3px; width: 100%; padding: 10px 4px 8px; border: 0; background: none; color: #cfe3de; font: inherit; font-size: .72rem; line-height: 1.15; text-align: center; text-decoration: none; cursor: pointer; }
.ecom-rail a[hidden] { display: none; }
.ecom-rail a:hover, .ecom-rail button:hover { background: rgba(255, 255, 255, .07); color: #fff; }
.ecom-rail a.on { color: #ffb066; background: rgba(255, 255, 255, .06); box-shadow: inset 3px 0 0 #ffb066; font-weight: 600; }
.ecom-rail svg { width: 22px; height: 22px; fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }
.ecom-rail .dot-red { position: absolute; top: 7px; right: 20px; width: 9px; height: 9px; border-radius: 50%; background: #e5484d; box-shadow: 0 0 0 2px #0f3330; }
.ecom-rail-store { border-bottom: 1px solid rgba(255, 255, 255, .12); }

.ecom-main { flex: 1; min-width: 0; min-height: 0; display: flex; flex-direction: column; }
.ecom-top { display: flex; align-items: center; gap: 12px; min-height: 52px; padding: 8px 14px; background: var(--panel); border-bottom: 1px solid var(--line); }
.ecom-title { font-size: 1.1rem; white-space: nowrap; }
.ecom-store-note { white-space: nowrap; }
.ecom-top .btn[hidden] { display: none; }
.ecom-gs { position: relative; flex: 0 1 440px; margin-left: auto; display: flex; align-items: center; }
.ecom-gs input { height: 36px; min-height: 36px; padding: 0 58px 0 36px; background: var(--bg); }
.ecom-gs input:focus { background: #fff; outline: none; box-shadow: 0 0 0 3px rgba(14, 122, 107, .18); }
.ecom-gs-ic { position: absolute; left: 11px; width: 17px; height: 17px; fill: none; stroke: var(--muted); stroke-width: 2; stroke-linecap: round; pointer-events: none; }
.ecom-gs-key { position: absolute; right: 8px; font: 600 11px/1 "Segoe UI", system-ui, sans-serif; color: var(--muted); border: 1px solid var(--line); border-radius: 4px; padding: 3px 6px; pointer-events: none; }
.ecom-gs input:focus ~ .ecom-gs-key, .ecom-gs input:not(:placeholder-shown) ~ .ecom-gs-key { display: none; }
.ecom-gs-drop { position: absolute; top: calc(100% + 6px); left: 0; right: 0; min-width: min(380px, 92vw); max-height: min(72vh, 600px); overflow-y: auto; z-index: 45; background: var(--panel); border: 1px solid var(--line); border-radius: var(--radius); box-shadow: 0 12px 32px rgba(0, 0, 0, .18); }
.ecom-gs-drop[hidden] { display: none; }

.ecom-body { flex: 1; min-height: 0; overflow: auto; }
.ecom-part { height: 100%; min-height: 0; }

/* A part laid out in columns (Catalogues: 200px 320px 1fr 420px; Orders: list and open order). Set --cols on the element. */
.ecom-cols { display: grid; grid-template-columns: var(--cols, 1fr); height: 100%; min-height: 0; }
.ecom-col { min-width: 0; min-height: 0; overflow-y: auto; background: var(--panel); border-right: 1px solid var(--line); }
.ecom-col:last-child { border-right: 0; }
.ecom-col-head { position: sticky; top: 0; z-index: 2; display: flex; align-items: center; gap: 8px; min-height: 48px; padding: 8px 12px; background: var(--panel); border-bottom: 1px solid var(--line); }
.ecom-col-head h2 { font-size: .8rem; font-weight: 600; letter-spacing: .04em; text-transform: uppercase; color: var(--muted); }
.ecom-back { display: none; }
.ecom-toolbar { position: sticky; top: 0; z-index: 3; display: flex; flex-wrap: wrap; align-items: center; gap: 8px; padding: 8px 12px; background: var(--panel); border-bottom: 1px solid var(--line); }
.ecom-row { display: flex; align-items: center; gap: 10px; padding: 9px 12px; border-bottom: 1px solid var(--line); cursor: pointer; color: inherit; text-decoration: none; }
.ecom-row:hover { background: var(--soft); }
.ecom-row.on { background: var(--soft); box-shadow: inset 3px 0 0 var(--brand-2); }
.ecom-empty { display: grid; place-items: center; min-height: 200px; padding: 24px; color: var(--muted); text-align: center; }

/* Popover menus: one open at a time (ECOM.popover). On a phone it is a sheet at the bottom. */
.ecom-pop { position: fixed; z-index: 48; min-width: 200px; max-width: min(420px, calc(100vw - 16px)); max-height: 70vh; overflow: auto; padding: 6px; background: var(--panel); border: 1px solid var(--line); border-radius: 10px; box-shadow: 0 12px 32px rgba(0, 0, 0, .2); }
.ecom-pop.sheet { left: 0; right: 0; bottom: 0; top: auto; max-width: none; max-height: 80vh; border-radius: 14px 14px 0 0; padding: 8px 8px calc(12px + env(safe-area-inset-bottom)); }
.ecom-pop.in-dialog { z-index: 70; }
.ecom-menu { display: flex; flex-direction: column; }
.ecom-menu > button, .ecom-menu > a, .ecom-menu > label { display: flex; align-items: center; gap: 10px; width: 100%; padding: 9px 10px; border: 0; border-radius: 6px; background: none; color: var(--ink); font: inherit; text-align: left; text-decoration: none; cursor: pointer; }
.ecom-menu > button:hover, .ecom-menu > a:hover, .ecom-menu > label:hover { background: var(--soft); }
.ecom-menu > .danger { color: var(--bad); }
.ecom-menu hr { border: 0; border-top: 1px solid var(--line); margin: 4px 0; }
.ecom-menu svg, .ecom-ic svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; flex: none; }

/* Small square icon buttons, drag handles and the To top / Up / Down buttons (ECOM.sortable) */
.ecom-ic { display: inline-grid; place-items: center; min-width: 30px; height: 30px; padding: 0 6px; border: 1px solid var(--line); border-radius: 6px; background: var(--panel); color: var(--muted); font: inherit; line-height: 1; cursor: pointer; }
.ecom-ic:hover { color: var(--ink); background: var(--soft); }
.ecom-sort-btns { display: inline-flex; gap: 3px; flex: none; }
.ecom-sort-btns .ecom-ic { min-width: 26px; height: 26px; font-size: .9rem; }
.ecom-handle { cursor: grab; color: var(--muted); user-select: none; touch-action: none; }
.ecom-dragging { opacity: .45; }
.ecom-confirm-text { white-space: pre-line; }

/* Switch (cloneQ's on/off toggle) */
.ecom-switch { position: relative; display: inline-flex; align-items: center; gap: 8px; cursor: pointer; }
.ecom-switch input { position: absolute; opacity: 0; width: 1px; height: 1px; min-height: 0; }
.ecom-switch span { width: 38px; height: 20px; flex: none; border-radius: 10px; background: #c5cdc9; position: relative; transition: background .15s; }
.ecom-switch span::before { content: ''; position: absolute; top: 2px; left: 2px; width: 16px; height: 16px; border-radius: 50%; background: #fff; transition: transform .15s; }
.ecom-switch input:checked + span { background: var(--brand-2); }
.ecom-switch input:checked + span::before { transform: translateX(18px); }
.ecom-switch input:focus-visible + span { outline: 2px solid var(--brand-2); outline-offset: 2px; }

/* Phone: the rail is a sideways strip at the top, one column shows at a time, and the page scrolls as a whole. */
@media (max-width: 767px) {
  .ecom { flex-direction: column; height: auto; min-height: calc(100dvh - 48px); }
  .ecom-rail { position: sticky; top: 48px; z-index: 15; width: auto; flex-direction: row; overflow-x: auto; overflow-y: hidden; }
  .ecom-rail a, .ecom-rail button { flex: none; width: auto; min-width: 66px; padding: 7px 8px 6px; }
  .ecom-rail a.on { box-shadow: inset 0 -3px 0 #ffb066; }
  .ecom-rail .dot-red { right: 14px; top: 5px; }
  .ecom-rail-store { border-bottom: 0; border-right: 1px solid rgba(255, 255, 255, .12); }
  .ecom-top { flex-wrap: wrap; gap: 8px; padding: 8px 12px; }
  .ecom-gs { order: 3; flex: 1 1 100%; margin-left: 0; }
  .ecom-gs-key, .ecom-store-note { display: none; }
  .ecom-top .grow { flex: 1; }
  .ecom-body { overflow: visible; }
  .ecom-part { height: auto; }
  .ecom-cols { display: block; height: auto; }
  .ecom-col { border-right: 0; overflow: visible; }
  .ecom-cols > .ecom-col:not(.phone-on) { display: none; }
  .ecom-back { display: inline-flex; }
  .ecom-col-head { top: 104px; }
}