/* Epic Wholesale Order Import */
.ew-oi { --ew-blue:#2563eb; --ew-blue-d:#1d4ed8; --ew-line:#e5e7eb; --ew-head:#f9fafb;
	--ew-ink:#111827; --ew-mut:#6b7280; --ew-bad:#b91c1c; --ew-warn:#b45309; --ew-good:#15803d;
	font-size:14px; color:var(--ew-ink); }
.ew-oi *{ box-sizing:border-box; }
/* Our own display rules are class selectors and outrank the UA's [hidden]
   rule, so toggling .hidden in JS would silently do nothing without this. */
.ew-oi [hidden]{ display:none !important; }

/* Gate (shares the Quick Order look) */
.ew-oi-gate{ max-width:560px; margin:40px auto; padding:28px; border:1px solid #e7e3ef;
	border-radius:12px; background:#fff; text-align:center; }
.ew-oi-gate h3{ margin:0 0 8px; }
.ew-oi-gate p{ color:#555; margin:0 0 18px; }
.ew-oi-gate .button{ margin:0 6px; }

/* Drop zone */
.ew-oi-drop{ border:2px dashed #cbd5e1; border-radius:14px; background:#fbfcfe; padding:46px 24px;
	text-align:center; cursor:pointer; transition:border-color .15s, background .15s; }
.ew-oi-drop:hover,.ew-oi-drop:focus,.ew-oi-drop.over{ border-color:var(--ew-blue); background:#f4f8ff; outline:none; }
.ew-oi-drop.busy{ opacity:.55; cursor:wait; }
.ew-oi-drop-icon{ font-size:30px; line-height:1; color:var(--ew-blue); margin-bottom:10px; }
.ew-oi-drop-main{ font-size:16px; font-weight:600; }
.ew-oi-browse{ color:var(--ew-blue); text-decoration:underline; }
.ew-oi-drop-sub{ color:var(--ew-mut); margin-top:6px; font-size:13px; }

/* Status line */
.ew-oi-status{ margin:14px 0; padding:11px 14px; border-radius:8px; font-weight:600;
	background:#f3f4f6; color:var(--ew-ink); }
.ew-oi-status.bad{ background:#fef2f2; color:var(--ew-bad); }
.ew-oi-status.busy{ background:#eff6ff; color:var(--ew-blue-d); }

/* Order header */
.ew-oi-head{ border:1px solid var(--ew-line); border-radius:12px; background:#fff; padding:18px 20px; margin-bottom:14px; }
.ew-oi-head-title{ display:flex; align-items:baseline; gap:12px; flex-wrap:wrap; margin-bottom:12px; }
.ew-oi-head-title h2{ margin:0; font-size:20px; }
.ew-oi-file-name{ color:var(--ew-mut); font-size:12px; word-break:break-all; }
.ew-oi-meta{ display:grid; grid-template-columns:repeat(auto-fit,minmax(210px,1fr)); gap:12px 22px; margin:0; }
.ew-oi-meta-item dt{ font-size:11px; text-transform:uppercase; letter-spacing:.03em; color:var(--ew-mut); margin:0 0 2px; }
.ew-oi-meta-item dd{ margin:0; font-weight:600; }
.ew-oi-meta-item.is-address dd{ line-height:1.5; font-style:normal; }

/* Sales-rep picker for the order email. Spans two grid columns so the full
   address is readable in the closed field — it is a value you must verify. */
.ew-oi-meta-item.is-email{ grid-column:span 2; min-width:0; }
.ew-oi-repsel{ width:100%; max-width:340px; padding:7px 10px; border:1px solid var(--ew-line);
	border-radius:8px; background:#fff; color:var(--ew-ink); font-size:13px; font-weight:600; }
.ew-oi-repsel:focus{ outline:none; border-color:var(--ew-blue); box-shadow:0 0 0 3px rgba(37,99,235,.15); }
.ew-oi-fromfile{ margin-top:4px; font-size:11px; font-weight:400; color:var(--ew-mut); word-break:break-all; }

/* Customer note */
.ew-oi-note{ border:1px solid #fde68a; background:#fffbeb; border-radius:12px; padding:14px 18px; margin-bottom:14px; }
.ew-oi-note-toggle{ display:inline-flex; align-items:center; gap:8px; font-weight:600; cursor:pointer; }
.ew-oi-note-toggle input{ width:16px; height:16px; }
.ew-oi-note-body{ margin:10px 0 0; padding:0 0 0 12px; border-left:3px solid #fbbf24;
	color:#4b3f16; white-space:pre-wrap; font-style:italic; }

/* Issue chips */
.ew-oi-issues{ display:flex; flex-wrap:wrap; gap:8px; margin-bottom:12px; }
.ew-oi-chip{ padding:5px 11px; border-radius:999px; font-size:12px; font-weight:600;
	background:#f3f4f6; color:#374151; }
.ew-oi-chip.ok{ background:#ecfdf5; color:var(--ew-good); }
.ew-oi-chip.warn{ background:#fffbeb; color:var(--ew-warn); }
.ew-oi-chip.bad{ background:#fef2f2; color:var(--ew-bad); }
.ew-oi-chip.mut{ background:#f3f4f6; color:var(--ew-mut); }

/* Row tools */
.ew-oi-tools{ display:flex; flex-wrap:wrap; align-items:center; gap:14px; margin-bottom:10px; }
.ew-oi-tools:empty{ display:none; }
.ew-oi-rm-oos{ background:#fff; border:1px solid var(--ew-line); border-radius:8px;
	padding:8px 14px; font-size:13px; font-weight:600; color:#374151; cursor:pointer; }
.ew-oi-rm-oos:hover{ border-color:#fecaca; background:#fef2f2; color:var(--ew-bad); }
.ew-oi-rm-oos.undo:hover{ border-color:#bfdbfe; background:#eff6ff; color:var(--ew-blue); }
.ew-oi-hiderm-wrap{ display:inline-flex; align-items:center; gap:7px; font-size:13px;
	color:var(--ew-mut); cursor:pointer; }
.ew-oi-hiderm-wrap input{ width:16px; height:16px; }

/* Table */
.ew-oi-tablewrap{ border:1px solid var(--ew-line); border-radius:10px; overflow-x:auto; }
.ew-oi-table{ width:100%; border-collapse:collapse; background:#fff; }
.ew-oi-table thead th{ background:var(--ew-head); text-align:left; font-size:12px; letter-spacing:.02em;
	text-transform:uppercase; color:#374151; padding:11px 12px; border-bottom:1px solid var(--ew-line); white-space:nowrap; }
.ew-oi-table tbody td{ padding:10px 12px; border-bottom:1px solid #f1f3f5; vertical-align:top; }
.ew-oi-table tbody tr:hover{ background:#f4f8ff; }
.ew-oi-table tbody tr.warn{ background:#fffdf5; }
.ew-oi-table tbody tr.bad{ background:#fff7f7; }

.ew-oi-table .c-img{ width:64px; }
.ew-oi-table .c-img img{ width:48px; height:48px; object-fit:contain; display:block;
	border:1px solid #f1f3f5; border-radius:6px; background:#fff; }
.ew-oi-noimg{ width:48px; height:48px; border:1px dashed var(--ew-line); border-radius:6px; }
.ew-oi-table .c-name a{ color:var(--ew-blue); text-decoration:none; font-weight:600; }
.ew-oi-table .c-name a:hover{ text-decoration:underline; }
.ew-oi-csvname{ color:var(--ew-mut); font-size:12px; margin-top:2px; }
.ew-oi-unmatched{ font-weight:600; color:var(--ew-bad); }
.ew-oi-table .c-sku code{ background:#f3f4f6; padding:2px 6px; border-radius:4px; font-size:12px; white-space:nowrap; }
.ew-oi-barcode{ color:var(--ew-mut); font-size:11px; margin-top:3px; font-variant-numeric:tabular-nums; }
.ew-oi-table .c-qty,.ew-oi-table .c-their,.ew-oi-table .c-our,.ew-oi-table .c-total{
	white-space:nowrap; font-variant-numeric:tabular-nums; }
/* Product keeps the slack. c-qty needs a real width — 1% lets auto-layout
   crush the number input until its value is clipped out of sight. */
.ew-oi-table .c-qty{ width:92px; }
.ew-oi-table .c-del{ width:1%; }
.ew-oi-table .c-total,.ew-oi-table .c-our{ font-weight:700; }
.ew-oi-table .c-their.diff{ color:var(--ew-warn); text-decoration:line-through; }
.ew-oi-mut{ color:var(--ew-mut); }

.ew-stk{ font-weight:600; white-space:nowrap; }
.ew-stk.in{ color:var(--ew-good); }
.ew-stk.back{ color:var(--ew-warn); }
.ew-stk.out{ color:var(--ew-bad); }

.ew-oi-badge{ display:inline-block; padding:3px 9px; border-radius:999px; font-size:11px; font-weight:700;
	background:#f3f4f6; color:#374151; white-space:nowrap; margin:0 2px 3px 0; }
.ew-oi-badge.ok{ background:#ecfdf5; color:var(--ew-good); }
.ew-oi-badge.warn{ background:#fffbeb; color:var(--ew-warn); }
.ew-oi-badge.bad{ background:#fef2f2; color:var(--ew-bad); }
.ew-oi-badge.mut{ background:#f3f4f6; color:var(--ew-mut); }
.ew-oi-badge.info{ background:#eff6ff; color:var(--ew-blue); }

/* Editable quantity */
.ew-oi-qty{ width:66px; min-width:66px; padding:6px 8px; border:1px solid var(--ew-line); border-radius:8px;
	text-align:center; font-size:14px; font-variant-numeric:tabular-nums;
	-moz-appearance:textfield; background:#fff; color:var(--ew-ink); }
.ew-oi-qty::-webkit-outer-spin-button,
.ew-oi-qty::-webkit-inner-spin-button{ -webkit-appearance:none; margin:0; }
.ew-oi-qty:focus{ outline:none; border-color:var(--ew-blue); box-shadow:0 0 0 3px rgba(37,99,235,.15); }
.ew-oi-qty:disabled{ opacity:.45; cursor:not-allowed; background:#f3f4f6; }
.ew-oi-qtymax{ margin-top:3px; font-size:11px; color:var(--ew-mut); text-align:center; }

/* Brief flash when a typed quantity is clamped to available stock. */
.ew-oi-table tbody tr.capped .ew-oi-qty{ border-color:var(--ew-warn); box-shadow:0 0 0 3px rgba(180,83,9,.18); }

/* Remove / restore */
.ew-oi-table .c-del{ width:1%; white-space:nowrap; text-align:center; }
.ew-oi-del{ width:28px; height:28px; line-height:1; padding:0; border:1px solid transparent;
	border-radius:8px; background:none; color:var(--ew-mut); font-size:18px; cursor:pointer; }
.ew-oi-del:hover{ background:#fef2f2; border-color:#fecaca; color:var(--ew-bad); }
.ew-oi-del.undo{ font-size:15px; }
.ew-oi-del.undo:hover{ background:#eff6ff; border-color:#bfdbfe; color:var(--ew-blue); }

/* Removed row */
.ew-oi-table tbody tr.ew-oi-row-hidden{ display:none; }
.ew-oi-empty{ text-align:center; color:var(--ew-mut); padding:30px 12px !important; font-style:italic; }
.ew-oi-table tbody tr.removed{ background:#fafafa; }
.ew-oi-table tbody tr.removed:hover{ background:#f5f5f5; }
.ew-oi-table tbody tr.removed .c-img,
.ew-oi-table tbody tr.removed .c-name,
.ew-oi-table tbody tr.removed .c-sku,
.ew-oi-table tbody tr.removed .c-their,
.ew-oi-table tbody tr.removed .c-our,
.ew-oi-table tbody tr.removed .c-total,
.ew-oi-table tbody tr.removed .c-stock{ opacity:.4; }
.ew-oi-table tbody tr.removed .c-name a{ text-decoration:line-through; }

/* Unmatched-SKU suggestions */
.ew-oi-sugg{ margin-top:6px; font-size:12px; }
.ew-oi-sugg.none{ color:var(--ew-mut); font-style:italic; }
.ew-oi-sugg-lab{ color:var(--ew-mut); display:block; margin-bottom:3px; }
.ew-oi-sugg a{ display:block; color:var(--ew-blue); text-decoration:none; padding:1px 0; }
.ew-oi-sugg a:hover{ text-decoration:underline; }
.ew-oi-sugg code{ background:#eef2ff; padding:1px 5px; border-radius:3px; }

/* Add-a-product search + autocomplete */
.ew-oi-add{ position:relative; margin-top:12px; max-width:560px; }
.ew-oi-add-field{ position:relative; display:flex; align-items:center; }
.ew-oi-add-icon{ position:absolute; left:14px; top:50%; transform:translateY(-50%);
	width:18px; height:18px; color:var(--ew-mut); pointer-events:none; z-index:1; }

/* The theme styles input[type=search] and beats a single class, which put the
   caret under the magnifier. Own the horizontal padding outright. */
.ew-oi .ew-oi-add-field input.ew-oi-add-input{
	width:100%; border:1px solid var(--ew-line); border-radius:10px;
	background:#fff; color:var(--ew-ink); font-size:14px; line-height:1.4;
	padding:11px 42px 11px 44px !important; text-indent:0 !important; }
.ew-oi-add-input::-webkit-search-cancel-button{ cursor:pointer; }
.ew-oi-add-input:focus{ outline:none; border-color:var(--ew-blue); box-shadow:0 0 0 3px rgba(37,99,235,.15); }
.ew-oi-add-input::placeholder{ color:#9ca3af; }

.ew-oi-add-spin{ position:absolute; right:15px; top:50%; margin-top:-8px;
	width:15px; height:15px; border-radius:50%; z-index:1;
	border:2px solid #e5e7eb; border-top-color:var(--ew-blue); animation:ew-oi-spin .7s linear infinite; }
@keyframes ew-oi-spin{ to{ transform:rotate(360deg); } }

.ew-oi-ac{ position:absolute; z-index:30; left:0; right:0; top:calc(100% + 6px);
	max-height:392px; overflow-y:auto; background:#fff; border:1px solid var(--ew-line);
	border-radius:10px; box-shadow:0 12px 28px rgba(17,24,39,.13); }
.ew-oi-ac-row{ display:flex; align-items:center; gap:12px; padding:9px 12px; cursor:pointer;
	border-bottom:1px solid #f3f4f6; }
.ew-oi-ac-row:last-child{ border-bottom:none; }
.ew-oi-ac-row:hover,.ew-oi-ac-row.is-active{ background:#f4f8ff; }
.ew-oi-ac-img{ width:40px; height:40px; object-fit:contain; flex:0 0 40px;
	border:1px solid #f1f3f5; border-radius:6px; background:#fff; }
.ew-oi-ac-main{ flex:1 1 auto; min-width:0; }
.ew-oi-ac-name{ font-weight:600; font-size:13px; line-height:1.35;
	overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.ew-oi-ac-meta{ display:flex; align-items:center; gap:9px; margin-top:3px; font-size:11px; }
.ew-oi-ac-meta code{ background:#f3f4f6; padding:1px 5px; border-radius:3px; color:#374151; }
.ew-oi-ac-meta .ew-stk{ font-size:11px; }
.ew-oi-ac-price{ font-weight:700; white-space:nowrap; font-variant-numeric:tabular-nums; }
.ew-oi-ac mark{ background:#fef08a; color:inherit; padding:0 1px; border-radius:2px; }
.ew-oi-ac-empty{ padding:16px 14px; color:var(--ew-mut); font-style:italic; font-size:13px; }

/* Row that was just added or bumped by the search */
.ew-oi-table tbody tr.just-added{ animation:ew-oi-flash 1.2s ease-out; }
@keyframes ew-oi-flash{ 0%,40%{ background:#dbeafe; } 100%{ background:transparent; } }

/* Summary */
.ew-oi-summary{ display:flex; flex-wrap:wrap; align-items:center; justify-content:space-between;
	gap:14px; margin-top:16px; padding:16px 18px; border:1px solid var(--ew-line);
	border-radius:12px; background:#fff; }
.ew-oi-sum-info{ font-size:15px; }
.ew-sum-total{ font-size:18px; }
.ew-sum-note{ color:var(--ew-mut); font-size:12px; }
.ew-oi-sum-actions{ display:flex; align-items:center; gap:10px; flex-wrap:wrap; }
.ew-oi-startover{ background:none; border:1px solid var(--ew-line); border-radius:8px;
	padding:9px 14px; cursor:pointer; color:#374151; }
.ew-oi-startover:hover{ border-color:var(--ew-blue); color:var(--ew-blue); }
.ew-oi-submit{ background:var(--ew-blue); color:#fff; border:none; border-radius:8px;
	padding:10px 20px; font-weight:600; cursor:pointer; }
.ew-oi-submit:hover:not(:disabled){ background:var(--ew-blue-d); }
.ew-oi-submit:disabled{ opacity:.45; cursor:not-allowed; }
.ew-oi-submit.busy{ opacity:.6; cursor:wait; }

/* Confirmation after the order is created */
.ew-oi-done{ max-width:620px; margin:36px auto; padding:34px 28px; text-align:center;
	background:#fff; border:1px solid #bbf7d0; border-radius:14px;
	box-shadow:0 10px 26px rgba(17,24,39,.07); }
.ew-oi-done-check{ width:52px; height:52px; margin:0 auto 14px; border-radius:50%;
	background:#ecfdf5; color:var(--ew-good); font-size:26px; line-height:52px; font-weight:700; }
.ew-oi-done-title{ margin:0 0 8px; font-size:23px; }
.ew-oi-done-num{ color:var(--ew-blue); text-decoration:none; font-variant-numeric:tabular-nums; }
.ew-oi-done-num:hover{ text-decoration:underline; }
.ew-oi-done-sub{ margin:0 0 22px; color:var(--ew-mut); font-size:13px; }
.ew-oi-done-actions{ display:flex; align-items:center; justify-content:center; gap:12px; flex-wrap:wrap; }
.ew-oi-done-orders{ background:var(--ew-blue); color:#fff !important; text-decoration:none;
	border-radius:8px; padding:10px 20px; font-weight:600; display:inline-block; }
.ew-oi-done-orders:hover{ background:var(--ew-blue-d); }
.ew-oi-done-again{ background:none; border:1px solid var(--ew-line); border-radius:8px;
	padding:10px 18px; cursor:pointer; color:#374151; }
.ew-oi-done-again:hover{ border-color:var(--ew-blue); color:var(--ew-blue); }
.ew-oi-submit-hint{ flex-basis:100%; text-align:right; color:var(--ew-mut); font-size:12px; }

@media (max-width:640px){
	.ew-oi-summary{ flex-direction:column; align-items:flex-start; }
	.ew-oi-submit-hint{ text-align:left; }
}