/* The frame around the pages, measured from the Shopify admin (Admin Next): a #0a0a0a chrome,
   a 220px sidebar, and a white panel with 16px corners inset 4px. Everything inside the
   panel is Polaris web components (polaris-2.js). */
:root { --chrome: #0a0a0a; --panel: #ffffff; --nav-text: #dcdcdc; --nav-text-active: #fcfcfc; --nav-muted: #a6a6a6; --nav-icon: #8c8c8c;
  --nav-hover: rgba(255,255,255,.06); --nav-active: rgba(255,255,255,.11); --nav-pill: rgba(255,255,255,.15); }
* { box-sizing: border-box; }
/* The admin's root stays 16px (Polaris components size themselves in rem); text is 13px with the
   admin's tracking and Inter alternates. */
html { margin: 0; font-size: 16px; background: var(--chrome); }
body { margin: 0; background: var(--chrome); color: #101010; -webkit-font-smoothing: antialiased; letter-spacing: -0.13px;
  font-feature-settings: "calt", "cv02", "cv03", "cv04", "cv09", "ss03";
  font: 450 13px/20px ShopifyInter, Inter, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; }
/* The panel scrolls, not the page, so the sidebar stays put and the scrollbar lives inside
   the panel with its space always reserved: no shift between short and long pages. */
.frame { display: flex; height: 100vh; overflow: hidden; }
.sidebar { width: 220px; flex: none; height: 100vh; display: flex; flex-direction: column; padding: 17px 10px 12px 12px; color: var(--nav-text); }
/* Every admin icon is a 16px glyph; where it sits in a 20px box the box is padding on the svg */
.icon { width: 16px; height: 16px; flex: none; }
.icon :is(path, rect, circle) { stroke: currentColor; fill: none; stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; }
.icon [fill="currentColor"] { fill: currentColor; stroke: none; }
.icon.filled path { fill: currentColor; stroke: none; }
.logo-row { display: flex; align-items: center; justify-content: space-between; height: 30px; padding-left: 8px; }
.brand { display: flex; align-items: center; gap: 8px; color: #fff; text-decoration: none; font-weight: 550; }
.brand-mark { width: 21px; height: 24px; flex: none; }
.brand:hover { text-decoration: none; }
.collapse { width: 32px; height: 30px; margin-right: -2px; border: 0; background: none; color: var(--nav-text); border-radius: 9999px; display: inline-flex; align-items: center; justify-content: center; cursor: pointer; }
.collapse .icon { padding: 2px; box-sizing: content-box; }
.collapse:hover { background: var(--nav-active); }
/* The admin's search pill: a 36px row with the glassy pill inset 3.5px, a 16px glyph in a 20px box, 13px/400 text */
.search { display: flex; align-items: center; gap: 6px; height: 29px; margin: 10.5px 4px 0 2px; padding: 0 10px 0 6px; background: rgba(255,255,255,.19); border-radius: 13px; color: var(--nav-muted); font-weight: 400; letter-spacing: -0.13px;
  box-shadow: rgba(255,255,255,.02) 0 0 0 1px inset, rgba(255,255,255,.06) 0 1px 1px 0 inset, rgba(255,255,255,.06) 0 0 12px 1px inset, rgba(0,0,0,.1) 0 1px 2px 0, rgba(0,0,0,.1) 0 0 0 1px; }
.search .icon { padding: 2px; box-sizing: content-box; }
/* It is a button that opens the search modal, styled as the admin's field */
button.search { width: calc(100% - 6px); border: 0; font: inherit; letter-spacing: -0.13px; text-align: left; cursor: pointer; }
.search .label { flex: 1; min-width: 0; }
.search:hover { color: var(--nav-text); }
.search:focus-visible { outline: 2px solid #fff; outline-offset: 1px; }
.search kbd { font: inherit; color: var(--nav-muted); }
.nav { display: flex; flex-direction: column; margin-top: 13.5px; }
.nav-item { display: flex; align-items: center; gap: 6px; height: 29px; margin: .5px 4px .5px 2px; padding: 0 5px 0 6px; border-radius: 13px; color: var(--nav-text); font: inherit; width: calc(100% - 6px); box-sizing: border-box; background: none; border: 0; cursor: pointer; text-align: left; text-decoration: none; letter-spacing: -0.13px; }
.nav-item .icon { padding: 2px; box-sizing: content-box; color: var(--nav-icon); }
.nav-item:hover { background: var(--nav-hover); color: var(--nav-text-active); text-decoration: none; }
.nav-item.active { background: var(--nav-active); color: var(--nav-text-active); font-weight: 500; }
.nav-item.active .icon { color: var(--nav-text-active); }
.nav-item.open { color: var(--nav-text-active); }
.nav-item.sub { padding-left: 32px; color: var(--nav-muted); }
.nav-item.sub:hover { color: var(--nav-text-active); }
.nav-item.sub.active { border-radius: 8px; color: var(--nav-text-active); font-weight: 450; }
.frame.collapsed .nav-item.sub { display: none; }
.nav-item .count { margin-left: auto; height: 20px; padding: 1px 6px; box-sizing: border-box; border-radius: 8px; background: var(--nav-pill); color: var(--nav-text); font-size: 12px; line-height: 18px; font-weight: 600; letter-spacing: -0.12px; font-variant-numeric: tabular-nums; }
.nav-heading { display: flex; align-items: center; gap: 2px; height: 24px; margin-top: 12px; padding-left: 8px; color: var(--nav-muted); font-weight: 400; }
.nav-heading .icon { width: 12px; height: 12px; }
.sidebar-bottom { margin-top: auto; display: flex; flex-direction: column; }
.sidebar-bottom form { margin: 0; }
.store { display: flex; align-items: center; gap: 8px; height: 29px; margin: .5px 4px .5px 2px; padding: 0 5px 0 6px; color: var(--nav-text); }
.store .avatar { width: 20px; height: 20px; border-radius: 50%; background: #8e6f3e; display: inline-flex; align-items: center; justify-content: center; color: #fff; font-size: 10px; font-weight: 650; }
.main { flex: 1; min-width: 0; background: var(--panel); border-radius: 16px; margin: 4px 4px 4px 0; padding: 0; height: calc(100vh - 8px); overflow-y: auto; scrollbar-gutter: stable; }
/* The login page, laid out like Shopify's own: no white panel, only the dark chrome with one
   476px white card in it (28px corners, 40px padding), every control the card's full width.
   margin: auto centres the card yet lets a short window scroll to its top instead of clipping it. */
.main.login-main { display: flex; background: none; margin: 0; border-radius: 0; height: 100vh; height: 100dvh; padding: 16px; }
.login { width: 476px; max-width: 100%; margin: auto; padding: 40px; border-radius: 28px; background: var(--panel); }
.login .brand-mark { width: 28px; height: 32px; display: block; }
.login-title { margin: 20px 0 0; font-size: 24px; line-height: 32px; font-weight: 700; letter-spacing: -0.4px; color: #303030; }
.login-sub { margin: 4px 0 0; font-size: 15px; line-height: 20px; color: #616161; }
.login-body { display: flex; flex-direction: column; gap: 16px; margin-top: 24px; }
.login-body form { display: flex; flex-direction: column; margin: 0; }
.login-label { margin-bottom: 4px; font-size: 13px; line-height: 20px; font-weight: 550; color: #303030; }
.login-input { width: 100%; height: 36px; margin-bottom: 16px; padding: 0 12px; border: 1px solid #8a8a8a; border-radius: 8px; background: #fdfdfd; font: inherit; font-size: 14px; color: #303030; }
.login-input:focus { outline: 2px solid #005bd3; outline-offset: 1px; }
/* Polaris's primary button (#303030 with its bevel) and a flat #f1f1f1 one, both 8px corners */
.login-btn { display: flex; align-items: center; justify-content: center; gap: 8px; width: 100%; height: 44px; padding: 0 16px; border: 0; border-radius: 8px;
  font: inherit; font-size: 14px; font-weight: 600; line-height: 20px; text-decoration: none; cursor: pointer; }
.login-btn img { width: 20px; height: 20px; }
.login-btn.primary { background: #303030; color: #fff; box-shadow: 0 -1px 0 1px rgba(0,0,0,.8) inset, 0 0 0 1px #303030 inset, 0 .5px 0 1.5px rgba(255,255,255,.25) inset; }
.login-btn.primary:hover { background: #1a1a1a; }
.login-btn.secondary { height: 40px; background: #f1f1f1; color: #303030; }
.login-btn.secondary:hover { background: #e3e3e3; }
.login-btn:focus-visible { outline: 2px solid #005bd3; outline-offset: 1px; }
/* "or" centred on a thin rule; the body's 16px gap plus 8px makes the 24px above and below */
.login-or { display: flex; align-items: center; gap: 12px; margin: 8px 0; font-size: 13px; line-height: 20px; color: #616161; }
.login-or::before, .login-or::after { content: ""; flex: 1; height: 1px; background: #e3e3e3; }
@media (max-width: 480px) { .login { padding: 32px 24px; } }
/* Collapsed sidebar: icons only, measured on the admin's collapsed sidebar. A 60px rail; the logo
   keeps its open spot and the expand button takes its place while the pointer is over the logo row
   (or focus is in it), with the button's hit area covering the whole 60 × 40 row. Scoped to the
   exact opposite of the drawer's query, so no width gets both or neither. */
@media not all and (max-width: 767.98px) {
  .frame.collapsed .sidebar { width: 60px; padding-right: 12px; padding-bottom: 15px; }
  .frame.collapsed .brand .label, .frame.collapsed .search .label, .frame.collapsed .search kbd, .frame.collapsed .nav-item .label, .frame.collapsed .nav-item .count, .frame.collapsed .store .name { display: none; }
  .frame.collapsed .logo-row { position: relative; }
  .frame.collapsed .brand { pointer-events: none; }
  .frame.collapsed .brand-mark { transition: opacity .15s cubic-bezier(.25, .1, .25, 1), scale .15s cubic-bezier(.25, .1, .25, 1); }
  .frame.collapsed .collapse { position: absolute; left: 2px; top: 0; margin: 0; border-radius: 12px; background: none; opacity: 0; transition: opacity .15s cubic-bezier(.25, .1, .25, 1); }
  .frame.collapsed .collapse::before { content: ""; position: absolute; left: -14px; top: -5px; width: 60px; height: 40px; }
  .frame.collapsed .logo-row:hover .brand-mark, .frame.collapsed .logo-row:has(:focus-visible) .brand-mark { opacity: 0; scale: .8; }
  .frame.collapsed .logo-row:hover .collapse, .frame.collapsed .logo-row:has(:focus-visible) .collapse { opacity: 1; background: var(--nav-active); }
  /* Search: no pill, a 32 × 36 button whose 32 × 30 hover fill sits 3px in from top and bottom,
     in the solid #222 measured on the admin's */
  .frame.collapsed .search { position: relative; isolation: isolate; width: 32px; height: 36px; margin: 7px 0 0 2px; padding: 0; justify-content: center; background: none; box-shadow: none; }
  .frame.collapsed .search:hover::before { content: ""; position: absolute; inset: 3px 0; z-index: -1; border-radius: 13px; background: #222; }
  .frame.collapsed .nav { margin-top: 10px; }
  .frame.collapsed .nav-item, .frame.collapsed .store { width: 32px; height: 30px; margin: 0 0 0 2px; padding: 0; justify-content: center; border-radius: 12px; }
  /* A group heading becomes a short line between the groups */
  .frame.collapsed .nav-heading { display: block; width: 16px; height: 1px; margin: 14px 0 15px 10px; padding: 0; overflow: hidden; color: transparent; background: var(--nav-active); }
  .frame.collapsed .sidebar-bottom { gap: 6px; }
  @media (prefers-reduced-motion: reduce) {
    .frame.collapsed .brand-mark, .frame.collapsed .collapse { transition: none; }
    .frame.collapsed .logo-row:hover .brand-mark, .frame.collapsed .logo-row:has(:focus-visible) .brand-mark { scale: none; }
  }
}
/* The sheet preview echoes the Word document */
.sheet { font-family: Georgia, "Goudy Old Style", serif; font-size: 14px; font-weight: 400; }
.sheet h4 { margin: 8px 0 2px; font-weight: 400; text-decoration: underline; }
.sheet h4:first-child { margin-top: 0; }
.sheet p { margin: 0 0 1px; }
.sheet .empty { color: #616161; font-style: italic; }
.tree { margin: 0; padding-left: 18px; } .tree li { margin: 2px 0; }
.mono { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 12px; color: #4a4a4a; }

/* --- Page frame (measured on the admin): a sticky 52px header that gains a white backdrop and a hairline once the panel scrolls --- */
.page { padding: 0 16px 16px; }
.page-header { position: sticky; top: 0; z-index: 10; display: flex; align-items: center; justify-content: space-between; gap: 8px; height: 52px; margin: 0 -16px; padding: 12px 16px; }
.page-header::before { content: ""; position: absolute; inset: 0; background: #fff; opacity: 0; transition: opacity .15s; z-index: -1; }
.page-header::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 1px; background: rgba(0,0,0,.07); opacity: 0; transition: opacity .15s; }
.page-header.scrolled::before, .page-header.scrolled::after { opacity: 1; }
.heading-wrapper { display: flex; align-items: center; gap: 8px; min-width: 0; }
.page-icon { display: inline-flex; align-items: center; justify-content: center; width: 20px; height: 20px; color: #101010; }
.page-heading { margin: 0; font-size: 13px; line-height: 28px; font-weight: 500; color: #101010; white-space: nowrap; }
.page-actions { display: flex; align-items: center; gap: 8px; }
.page-content { padding-top: 1px; }
.flash-messages { margin-bottom: 8px; }
/* Detail pages (product, rule, review): the admin's round back button, the parent page's icon and
   name, then a divider and the title that slide in once the page has scrolled (measured on a product page) */
.crumbs { gap: 8px; }
.back-btn { display: inline-flex; align-items: center; justify-content: center; flex: none; width: 28px; height: 28px; margin-right: 4px; border-radius: 9999px; background: #fff; box-shadow: 0 0 0 1px rgba(0,0,0,.07), 0 2px 20px rgba(0,0,0,.03), 0 5px 20px rgba(0,0,0,.03), 0 8px 60px rgba(0,0,0,.03); color: #101010; }
.back-btn:hover { background: #f7f7f7; }
.back-btn:active { background: #f1f1f1; box-shadow: 0 2px 1px rgba(26,26,26,.2) inset, 1px 0 1px rgba(26,26,26,.12) inset, -1px 0 1px rgba(26,26,26,.12) inset; }
.crumb { display: inline-flex; align-items: center; gap: 4px; min-width: 0; font-size: 13px; line-height: 20px; font-weight: 500; color: #4a4a4a; text-decoration: none; white-space: nowrap; }
.crumb .icon { margin: 2px; color: #606060; }
.crumb:hover .crumb-label { color: #303030; text-decoration: underline; }
.crumb-divider { margin: 2px -3px 0; padding: 0 4px; font-size: 13px; line-height: 20px; color: #4a4a4a; }
.crumb-title { min-width: 0; overflow: hidden; font-size: 13px; line-height: 28px; font-weight: 500; color: #101010; white-space: nowrap; text-overflow: ellipsis; }
.reveal { opacity: 0; translate: 0 8px; transition: opacity .15s cubic-bezier(.19,.91,.38,1), translate .15s cubic-bezier(.19,.91,.38,1); }
.page-header.titled .reveal { opacity: 1; translate: 0 0; }
/* 8px each side on top of .page's 16px: the column sits 24px in from both panel edges, as before */
.page-content.detail { display: grid; grid-template-columns: min(100%, 1090px); justify-content: center; padding: 8px 8px 0; }
.title-row { display: flex; align-items: center; gap: 12px; min-width: 0; padding-bottom: 12px; }
.page-title { margin: 0; min-width: 0; font-size: 26px; line-height: 32px; font-weight: 500; letter-spacing: -.00833em; color: #101010; overflow-wrap: anywhere; }
.detail-body { min-width: 0; padding-top: 1px; }
.page-content s-section { display: block; }
.main:has(.fulfillment-grid) { container: fulfillment / inline-size; }
.fulfillment-grid { display: grid; grid-template-columns: minmax(0, 1fr); gap: 16px; }
@container fulfillment (width > 790px) {
  .fulfillment-grid { grid-template-columns: minmax(0, 1fr) 280px; gap: 48px; }
}
/* --- Products index: a clone of the admin's product list (measured on the live admin) --- */
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
/* The bar inside the 36px card: "All" view switch, inline search, display options */
.index-bar { display: flex; align-items: center; gap: 4px; height: 28px; margin: 4px; }
.view-switch { display: inline-flex; align-items: center; height: 28px; padding: 0 2px 0 8px; border: 0; border-radius: 9999px; background: none; font: inherit; font-weight: 400; color: #101010; cursor: pointer; }
.view-switch .icon { padding: 2px 4px; box-sizing: content-box; }
.view-switch:hover { background: rgba(0,0,0,.08); }
.index-search { display: flex; align-items: center; flex: 1; min-width: 0; height: 28px; margin: 0; padding-right: 4px; }
.index-search .icon { padding: 2px; box-sizing: content-box; }
.index-search input { flex: 1; min-width: 0; height: 28px; padding: 4px; border: 0; background: none; font: inherit; font-weight: 400; color: #101010; }
.index-search input::placeholder { color: #4a4a4a; }
.index-search input:focus { outline: none; }
.index-search input:focus::placeholder { color: transparent; }
.search-clear { display: inline-flex; margin-right: 4px; }
.search-clear[hidden] { display: none; }
.index-search input::-webkit-search-cancel-button { display: none; }
/* Popover menus (views, display options) */
.menu { display: flex; flex-direction: column; min-width: 160px; padding: 6px; }
.menu-item { display: flex; align-items: center; gap: 8px; height: 28px; padding: 0 8px; border-radius: 8px; color: #101010; text-decoration: none; font-weight: 400; white-space: nowrap; }
.menu-item:hover { background: #f7f7f7; text-decoration: none; }
button.menu-item { width: 100%; border: 0; background: none; font: inherit; text-align: left; cursor: pointer; }
button.menu-item:hover { background: #f7f7f7; }
.menu-item.active { font-weight: 600; }
.menu-divider { height: 1px; margin: 4px 0; background: #e3e3e3; }
.menu-check { width: 16px; height: 16px; flex: none; display: inline-flex; }
.columns-menu { gap: 4px; padding: 10px 12px; }
/* The table: a CSS grid, no outer border, a gray header band that sticks under the page header.
   The page's script sets --cols on #index-wrap from its column list (display options, small screens). */
#index-wrap { --cols: 36px 48px minmax(180px, 2fr) 119px 110px 110px minmax(180px, 2fr) 150px 44px; }
.index { margin-top: 8px; }
.index-row { display: grid; grid-template-columns: var(--cols); align-items: center; }
.index-head { position: sticky; top: 52px; z-index: 5; background: #fff; padding-top: 4px; }
.index-head .index-row, .bulk { height: 31px; background: #f7f7f7; border-radius: 10px; }
.index-head .cell { height: 31px; padding: 6px; font-size: 12px; line-height: 18px; font-weight: 500; color: #4a4a4a; white-space: nowrap; }
.cell { display: flex; align-items: center; min-width: 0; }
.col-check { padding: 6px 6px 6px 14px !important; }
.index-body .cell.col-image { padding: 5px 6px 6px; }
/* 36px thumbnail with the admin's radius and hairline; a placeholder glyph when Shopify has no image */
.thumb { position: relative; display: flex; align-items: center; justify-content: center; width: 36px; height: 36px; flex: none; border-radius: 10px; background: #fff; overflow: hidden; color: #4a4a4a; }
.thumb img { display: block; width: 36px; height: 36px; object-fit: contain; }
.thumb::after { content: ""; position: absolute; inset: 0; border: 1px solid rgba(0,0,0,.08); border-radius: 10px; pointer-events: none; }
.col-actions { padding: 6px 12px 6px 6px !important; justify-content: flex-end; }
.sort-btn { display: inline-flex; align-items: center; height: 30px; margin: -6px; padding: 6px; border-radius: 6px; color: inherit; text-decoration: none; cursor: pointer; }
.sort-btn:hover { text-decoration: none; }
/* The admin draws the sort arrow as a 12px glyph (1.125px stroke) in a 16px box, #101010 */
.sort-btn .icon { width: 12px; height: 12px; margin: 2px; color: #101010; opacity: 0; transition: opacity .1s ease-in-out; }
.sort-btn:hover .icon, .sort-btn.active .icon { opacity: 1; }
.index-body .index-row { border-top: 1px solid #f2f2f2; border-radius: 10px; cursor: pointer; }
.index-body .index-row:first-child { border-top-color: transparent; }
.index-body { padding-top: 1px; }
.index-body .cell { min-height: 47px; padding: 6px; font-size: 13px; line-height: 20px; font-weight: 400; color: #101010; }
.index-body .index-row:hover, .index-body .index-row.selected { background: #f7f7f7; }
.index-body .index-row:hover .title { text-decoration: underline; }
.title { color: inherit; text-decoration: none; }
.stack { display: flex; flex-direction: column; min-width: 0; }
.sub { color: #616161; }
.clamp { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.row-action { display: inline-flex; opacity: 0; transition: opacity .1s; }
.index-row:hover .row-action, .row-action:focus-within { opacity: 1; }
@media (hover: none) { .row-action { opacity: 1; } }
.index-empty { padding: 14px 12px; border-top: 1px solid #f2f2f2; }
/* Numeric columns sit against the right, 24px in, like the admin's */
.index-head .cell.numeric, .index-body .cell.numeric { justify-content: flex-end; padding-right: 24px; white-space: nowrap; }
/* Hidden columns (Display options) */
.hide-status .col-status, .hide-sku .col-sku, .hide-type .col-type, .hide-kind .col-kind, .hide-contents .col-contents, .hide-tally .col-tally,
.hide-variants .col-variants, .hide-category .col-category, .hide-locations .col-locations, .hide-price .col-price,
.hide-unit .col-unit, .hide-used .col-used, .hide-channel .col-channel { display: none; }
.index-head .cell.col-variants { justify-content: flex-end; padding-right: 4px; } /* the heading ends where the chevron's box ends */
.index-body .cell.col-variants, .index-body .cell.col-channel { position: relative; padding: 0; justify-content: flex-end; }
.index-body .cell.col-channel { justify-content: center; }
.cell-activator { --s-overlay-position-area-6e076: block-end span-inline-start; /* Polaris reads this off the invoker: open below, lined up with its right edge like the admin's count cells */ display: flex; align-items: center; justify-content: flex-end; width: 100%; height: 100%; min-height: 48px; padding: 6px 4px 6px 6px; border: 0; background: none; font: inherit; color: #101010; cursor: pointer; text-align: right; }
.cell-activator .icon { margin-left: 2px; opacity: 0; }
.index-row:hover .cell-activator .icon, .cell-activator[aria-expanded="true"] .icon, .cell-activator:focus-visible .icon { opacity: 1; }
.index-body .index-row:hover :is(.col-variants, .col-channel, .col-sku):has(.cell-activator):hover, .index-body .index-row.selected :is(.col-variants, .col-channel, .col-sku):has(.cell-activator):hover { background: #f2f2f2; }
.cell-activator.centered { --s-overlay-position-area-6e076: block-end; justify-content: center; padding: 6px 2px 6px 6px; }
/* The SKU cell's "+N" opens the row's Variant / SKU list: the text stays where a plain SKU sits, the list opens below, lined up with its left edge */
.index-body .cell.col-sku:has(.cell-activator) { position: relative; padding: 0; }
.cell-activator.start { --s-overlay-position-area-6e076: block-end span-inline-end; justify-content: flex-start; padding: 6px; text-align: left; white-space: nowrap; }
.variants-pop { display: flex; flex-direction: column; gap: 4px; min-width: 240px; padding: 4px 6px 6px; }
.variants-head, .variants-row { display: flex; justify-content: space-between; gap: 16px; padding: 4px 8px; border-radius: 8px; line-height: 20px; white-space: nowrap; }
.variants-head { color: #616161; font-weight: 450; }
.variants-row > span:last-child { color: #616161; font-variant-numeric: tabular-nums; }
.variants-row .stack { display: flex; flex-direction: column; }
.index-head .col-channel, .index-body .col-channel { justify-content: center; }
.index-head .col-channel { padding-left: 10px; } /* over the number, which sits left of the chevron's box */
img.channel { display: block; width: 20px; height: 20px; margin-right: 4px; }
.channels-pop .menu-item img { width: 16px; height: 16px; }
.picker input[type=text] { box-sizing: border-box; width: 100%; min-width: 220px; height: 32px; padding: 0 12px; border: 1px solid #8a8a8a; border-radius: 8px; font: inherit; font-size: 13px; color: #303030; background: #fdfdfd; }
.picker input[type=text]:focus { outline: 2px solid #005bd3; outline-offset: 1px; border-color: transparent; }
.picker input[type=text]::placeholder { color: #b5b5b5; }
.picker.wide { display: block; }
/* The admin's search-or-add combobox (product Type), measured on the live admin. Closed it is a
   select: 32px, 6px 8px 6px 10px padding, 12px corners, the select chevrons (#606060) in a 20px
   slot. Open, a 16px-cornered popover sits over it (same left and width, 4px above its top): a
   36px search row (search-add glyph at 10px, text at 34px, circled-x clear, a #ddd rule under it)
   and a list of 32px rows (6px padding, 12px radius, 2px apart) with the check in a 20px slot */
.select-field { display: flex; align-items: center; gap: 8px; width: 100%; height: 32px; padding: 6px 8px 6px 10px; border: 0; border-radius: 12px; background: #fff;
  box-shadow: rgba(0, 0, 0, 0.04) 0px 2px 3px -1px, rgba(0, 0, 0, 0.04) 0px 3px 4px -1.5px, rgba(0, 0, 0, 0.13) 0px 0px 0px 1px;
  font: inherit; letter-spacing: inherit; color: #101010; text-align: left; cursor: pointer; }
.select-field:hover { box-shadow: rgba(0, 0, 0, 0.04) 0px 2px 3px -1px, rgba(0, 0, 0, 0.04) 0px 3px 4px -1.5px, rgba(0, 0, 0, 0.2) 0px 0px 0px 1px; }
.select-field:focus-visible { outline: 2px solid #005bd3; outline-offset: 1px; }
.select-field[aria-expanded="true"] { visibility: hidden; } /* the popover covers it, as in the admin */
.select-value { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.select-value.placeholder { color: #4a4a4a; }
.select-icon { display: flex; align-items: center; justify-content: center; width: 20px; height: 20px; flex: none; color: #606060; }
.picker-menu.combo { max-height: none; overflow: hidden; }
.combo-search { display: flex; align-items: center; gap: 4px; height: 36px; padding: 3px 10px 4px 10px; border-bottom: 1px solid #dddddd; }
.combo-search > .icon { width: 20px; height: 20px; padding: 2px; color: #4a4a4a; }
.combo-search input { flex: 1; min-width: 0; height: 28px; padding: 0; border: 0; outline: 0; background: none; font: inherit; letter-spacing: inherit; color: #101010; }
.combo-search input::placeholder { color: #4a4a4a; }
.combo-list { max-height: 244px; overflow-y: auto; }
.combo-list:empty { display: none; }
.picker-clear { display: flex; align-items: center; justify-content: center; width: 20px; height: 20px; flex: none; padding: 0; border: 0; border-radius: 8px; background: none; color: #4a4a4a; cursor: pointer; }
.picker-clear[hidden] { display: none; }
.picker-clear:hover { color: #303030; }
.picker-menu .menu.combobox { gap: 2px; padding: 4px; }
.picker-menu .combobox .menu-item { height: 32px; padding: 6px; gap: 4px; border-radius: 12px; font-weight: 400; }
.picker-menu .combobox .menu-check { width: 20px; height: 20px; align-items: center; justify-content: center; color: #4a4a4a; }
.picker-menu .combobox .menu-item.selected { font-weight: 500; background: #f2f2f2; }
.picker-menu .combobox .menu-item.selected .menu-check { color: #101010; }
.picker-menu .combobox .menu-item.add .menu-check { color: #4a4a4a; }
.picker-menu .combobox .menu-item.add strong { font-weight: 600; }
.picker-menu .combobox .menu-item.active { background: #f7f7f7; }
.picker-menu .combobox .menu-item.selected.active { background: #f2f2f2; }
.picker-menu .menu-none { padding: 6px 8px 0; font-size: 12px; line-height: 18px; color: #4a4a4a; }
.picker-menu .menu-label { flex: 1; overflow: hidden; text-overflow: ellipsis; }
.field-label { display: block; margin-bottom: 4px; font-size: 13px; line-height: 20px; font-weight: 500; color: #101010; }
/* The detail page's right rail, measured on the admin's product page: no card, a 13px/20px
   weight-500 heading in a 28px row with 8px under it, fields 16px apart, and a 1px #f2f2f2 rule
   halfway in the 33px between sections. 16px on top puts the first heading level with the main
   column's ("Default contents"). */
.rail { display: flex; flex-direction: column; padding-top: 16px; }
.rail-section { position: relative; display: flex; flex-direction: column; min-width: 0; }
.rail-section + .rail-section { margin-top: 33px; }
.rail-section + .rail-section::before { content: ""; position: absolute; top: -17px; left: 0; right: 0; border-top: 1px solid #f2f2f2; }
.rail-heading { margin: 0 0 8px; padding: 4px 0; font-size: 13px; line-height: 20px; font-weight: 500; color: #101010; }
.rail-body { display: flex; flex-direction: column; gap: 16px; }
.picker-menu { position: fixed; inset: auto; margin: 0; padding: 0; border: 0; z-index: 1000; background: #fff; border-radius: 16px; box-shadow: rgba(0, 0, 0, 0.06) 0px 2px 2px -1px, rgba(0, 0, 0, 0.06) 0px 3px 4px -2px, rgba(0, 0, 0, 0.06) 0px 6px 8px -3px, rgba(0, 0, 0, 0.06) 0px 12px 16px -4px, rgba(0, 0, 0, 0.08) 0px 0px 0px 1px; max-height: 248px; overflow-y: auto; }
.picker-menu .menu-item.active { background: #f7f7f7; }
.picker-menu .menu-item.empty { color: #616161; cursor: default; }
.picker-menu .menu-item.empty:hover { background: none; }
.skus-block { margin-bottom: 16px; }
.skus-block s-section { display: block; }
.type-cell { display: block; min-width: 180px; }
/* The Sheet layout page: a bag amount next to its Packed in select, the add rows under a table, and the
   orderable section lists drawn like s-table rows (36px, 13px, the table's hairline) */
.packing-cell { display: inline-flex; align-items: center; gap: 8px; }
.packing-cell [hidden] { display: none; }
.exception-add { display: flex; align-items: center; gap: 8px; margin: 0; }
.exception-add .picker { flex: 1; min-width: 0; }
.order-list { margin: 0 -4px; }
.order-row { display: flex; align-items: center; justify-content: space-between; gap: 8px; height: 36px; padding: 0 0 0 4px; font-size: 13px; line-height: 20px; color: #101010; border-bottom: 1px solid rgba(0,0,0,.07); }
.order-row:last-child { border-bottom: 0; }
.order-name { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.order-actions { display: inline-flex; align-items: center; gap: 2px; flex: none; margin-left: auto; }
.order-actions form { display: inline-flex; margin: 0; }
.order-row:first-child [data-order="up"], .order-row:last-child [data-order="down"] { visibility: hidden; }
.order-add { display: flex; align-items: center; gap: 8px; margin: 0; }
.order-add s-text-field { flex: 1; min-width: 0; }
.contents-text { display: inline-flex; flex-direction: column; max-width: 260px; white-space: normal; line-height: 20px; }
.channel-link { display: inline-flex; }
/* The product page's SKU table: "2" opens the same channel menu as the Catalog list, chevron on row hover */
.vt-cell .cell-activator.channel-count { width: auto; min-height: 28px; padding: 0 2px 0 6px; font-variant-numeric: tabular-nums; }
.vt-row:hover .cell-activator .icon, .vt-cell .cell-activator:hover .icon { opacity: 1; }
/* Card tables (product SKUs, Sheet layout), measured on the admin's product Variants table: the table
   bleeds to the card's edges and sits 10px in; a 33px #f7f7f7 header band with 10px ends (12px/18px
   500 #4a4a4a, 6px cells, a 32px checkbox column padded 8px on the left); rows split by a #f2f2f2
   hairline inside that inset, #f7f7f7 with 10px ends on hover; a 41px footer under a hairline. */
.vtable { padding: 10px 10px 0; }
.vt-scroll { overflow-x: auto; overflow-y: hidden; }
.vt-head, .vt-body { min-width: var(--vt-min, 0); }
.vt-row { display: grid; grid-template-columns: var(--vt-cols); align-items: stretch; }
.vt-cell { display: flex; align-items: center; min-width: 0; padding: 6px; }
.vt-center { justify-content: center; }
.vt-head .vt-row, .vtable .bulk { min-height: 33px; background: #f7f7f7; border-radius: 10px; }
.vt-head .vt-cell { font-size: 12px; line-height: 18px; font-weight: 500; color: #4a4a4a; white-space: nowrap; }
.vt-check { padding: 6px 6px 6px 8px; }
.vtable .bulk { height: 33px; padding-left: 8px; }
.vtable.has-selection .vt-labels { display: none; }
.vtable.has-selection .bulk { display: flex; }
.vt-body .vt-row { min-height: 49px; border-top: 1px solid #f2f2f2; border-radius: 10px; font-size: 13px; line-height: 20px; color: #101010; }
.vt-body .vt-row:first-child { border-top-color: transparent; }
.vt-body .vt-row:hover, .vt-body .vt-row.selected { background: #f7f7f7; border-top-color: #fff; }
.vt-body .vt-row:hover + .vt-row, .vt-body .vt-row.selected + .vt-row { border-top-color: #fff; }
.vt-foot, .vt-empty { padding: 10px 8px 10px 12px; border-top: 1px solid #f2f2f2; }
.vt-empty { padding: 12px; border-top: 0; }
.vt-cell .type-cell { width: 100%; min-width: 0; }
/* The SKU table's thumbnail column (no header): a 40px thumbnail, 8px radius, a dashed #f2f2f2 box
   with the image glyph when there is no image; the variant name and its SKU sit in the next column */
.vt-thumb { padding: 6px 6px 6px 8px; }
.vtable .thumb { width: 40px; height: 40px; border-radius: 8px; }
.vtable .thumb img { width: 40px; height: 40px; }
.vtable .thumb::after { border-radius: 8px; }
.thumb.empty::after { border: 1px dashed #f2f2f2; }
/* Catalog's SKU table, full width: check, thumbnail, Variant, SKU, Channel, Type, Contents, Price (read-only), Status */
/* Every column fits a 1280px window with the sidebar open: the product page's column is then about
   988px, 973px with a classic scrollbar, less the table's 20px inset, so the minimums must stay
   within 946px; they add up to 944px. Type takes most of the slack ("Retail Loose Leaf Tea" is the
   longest option), then Contents and Variant; Variant and SKU wrap rather than widen their columns;
   Status stacks its badges. Price is 100px so a differing "Square $25.00" stays on one line. */
.skus-table {
  --vt-cols: 32px 54px minmax(112px, 1fr) 90px 72px minmax(240px, 2fr) minmax(124px, 1fr) 100px 120px;
  --vt-min: 944px;
  padding-bottom: 10px;
}
.skus-table .price { white-space: nowrap; }
.skus-table .vt-cell.sku { overflow-wrap: anywhere; }
.skus-table .status .stack { gap: 4px; align-items: flex-start; }
.square-export-skus { --vt-cols: minmax(170px, 1.3fr) 120px 150px minmax(180px, 1fr); --vt-min: 620px; padding-bottom: 10px; }
.square-export-fields { --vt-cols: minmax(140px, 1fr) minmax(200px, 1.5fr) minmax(180px, 1fr); --vt-min: 550px; padding-bottom: 10px; }
.square-export-value { overflow-wrap: anywhere; white-space: pre-line; }
.square-export-image { display: flex; align-items: center; gap: 16px; }
.square-export-image img { width: 64px; height: 64px; object-fit: cover; border-radius: 8px; }
.contents-link { border: 0; background: none; color: inherit; padding: 0; font: inherit; text-align: left; text-decoration: underline; text-underline-offset: 3px; cursor: pointer; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.contents-link:focus-visible { outline: 2px solid #005bd3; outline-offset: 3px; border-radius: 2px; }
.contents-table { --vt-cols: 54px minmax(230px, 1fr) 150px 40px; --vt-min: 490px; padding-bottom: 10px; }
.contents-toolbar { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding-bottom: 16px; }
.contents-context, .contents-component { display: flex; flex-direction: column; gap: 4px; min-width: 0; width: 100%; }
.contents-component .picker input { min-width: 0; }
.contents-note { font-size: 12px; color: #616161; }
/* An empty note would still take the column's gap and push the picker off level with its row. */
.contents-note:empty { display: none; }
.contents-total { display: flex; justify-content: space-between; gap: 24px; padding: 14px 12px; border-top: 1px solid #f2f2f2; }
.contents-total > :last-child { text-align: right; max-width: 70%; }
#contents-error[hidden] { display: none; }
#contents-error { display: block; margin-bottom: 16px; }
/* Square's price when it differs from Shopify's: Polaris warning text. Every .vt-row is its own grid, so Price is a fixed 100px rather than max-content, which would size it per row and misalign the columns; "Square $25.00" stays on one line */
.skus-table .price-differs { color: #8e6700; font-size: 12px; line-height: 16px; white-space: nowrap; }
/* Fulfillment's read-only SKU table: thumbnail, Variant (takes the slack), Fulfillment, Status */
.skus-table.readonly { --vt-cols: 54px minmax(180px, 1fr) 240px 120px; --vt-min: 600px; }
.parts-table { --vt-cols: minmax(240px, 1fr) 150px 72px 48px; --vt-min: 520px; }
.fields-table { --vt-cols: 32px minmax(160px, 1fr) minmax(240px, 2fr) 88px 64px; --vt-min: 584px; padding-bottom: 10px; }
.fields-table .product-field-row[hidden] { display: none; }
.field-label { display: flex; flex-direction: column; align-items: flex-start; gap: 2px; }
/* A grouped field: its name is a native disclosure that opens to one line per member (linking to
   its store page) and Ungroup. Every .vt-row is its own grid with fixed columns, so an open row only
   grows taller; its cells then sit at the top so the value lines up with the name. */
.field-group { width: 100%; min-width: 0; }
.field-group > summary { margin-bottom: 0; list-style: none; cursor: pointer; border-radius: 4px; }
.field-group > summary::-webkit-details-marker { display: none; }
.field-group > summary:focus-visible { outline: 2px solid #005bd3; outline-offset: 1px; }
.group-toggle { display: inline-flex; align-items: center; gap: 2px; }
.field-group[open] .group-toggle .icon { transform: rotate(180deg); }
.group-members { display: flex; flex-direction: column; align-items: flex-start; gap: 4px; padding: 6px 0 2px; font-weight: 400; }
.group-member a, .group-member > span { display: inline-flex; align-items: center; gap: 6px; color: inherit; text-decoration: none; overflow-wrap: anywhere; }
.group-member a:hover { text-decoration: underline; }
.group-member img { width: 16px; height: 16px; flex: none; }
.fields-table .vt-row:has(.field-group[open]) > .vt-cell { align-items: flex-start; }
.field-choices { display: flex; flex-wrap: wrap; gap: 8px 16px; padding: 4px 0; }
.fields-note { margin-top: 12px; }
.parts-table .picker input[type=text] { min-width: 0; }
.vt-cell .picker.wide { flex: 1; min-width: 0; }
.parts-foot { padding-bottom: 12px; }
.vt-end { justify-content: flex-end; }
.sheet-types { --vt-cols: minmax(120px, 1fr) minmax(110px, 1fr) minmax(200px, 1.4fr) minmax(300px, 2fr); --vt-min: 760px; }
.sheet-exceptions { --vt-cols: 110px minmax(180px, 1.6fr) minmax(120px, 1fr) minmax(120px, 1fr) minmax(200px, 1.4fr); --vt-min: 760px; }
.amount { display: inline-flex; align-items: center; gap: 6px; } .amount .unit { color: #616161; }
.amount s-text-field { inline-size: 90px; }  /* a quantity with an optional unit ("2 oz") */
/* Units: Name (takes the slack), Short, Equals, Remove/Add. The lead ("1 oz =", "1 of it =") has a
   fixed width so every number box starts at the same edge; the add row's fields fill their cells
   so they sit under their headings. 6+64+6+90+6+250+6 = 428px of Equals at the widest row. */
.units-table { --vt-cols: minmax(160px, 1fr) 120px minmax(428px, 1.4fr) 72px; --vt-min: 780px; }
.units-equals .units-lead { flex: none; min-inline-size: 64px; white-space: nowrap; }
.units-table .units-number { inline-size: 90px; }
.units-table .units-base { inline-size: 250px; }
.units-table .units-fill { inline-size: 100%; }
/* Resy › Waitlist: Tearoom, Parties waiting, Current wait, and the guests' two-line sentence
   (it keeps its line break) taking the slack */
.waitlist-table { --vt-cols: minmax(140px, 1fr) 130px 180px minmax(300px, 2fr); --vt-min: 760px; }
.waitlist-table .waitlist-sentence { white-space: pre-line; }
/* Every Polaris element's host is display: contents (polaris-2.js), so a width on s-text-field
   itself sizes nothing and the field fills its container. A width goes on a plain wrapper box
   instead, the way .type-cell sizes the SKU table's Type select. */
.field-box { display: block; flex: none; min-width: 0; }
.channel-line { display: flex; align-items: center; gap: 8px; }
.condition-row { display: grid; grid-template-columns: 1fr 1fr 2fr auto; gap: 8px; align-items: end; }
.hide-channel .col-channel, .hide-impact .col-impact, .hide-updated .col-updated, .hide-created .col-created { display: none; }
.index-head .cell.col-impact, .index-body .cell.col-impact { justify-content: flex-end; padding-right: 24px; }
.channel-line img { width: 20px; height: 20px; }
.variants-row a { color: inherit; text-decoration: none; }
.variants-row a:hover { text-decoration: underline; }
.channels img { display: block; width: 20px; height: 20px; }
/* Bulk actions replace the header band while rows are selected */
.bulk { display: none; align-items: center; gap: 4px; padding: 0 4px 0 12px; }
.index.has-selection .index-head .index-row { display: none; }
.index.has-selection .bulk { display: flex; }
.bulk-count { height: 24px; padding: 2px 8px 2px 4px; line-height: 20px; font-weight: 400; color: #101010; }
.bulk-btn { height: 24px; padding: 2px 8px; border: 0; border-radius: 9999px; background: #ebebeb; font: inherit; font-weight: 400; color: #101010; cursor: pointer; }
.bulk-btn:hover { background: #e3e3e3; }
/* On a paged list the count is the admin's grey pill with a chevron, opening Select all / Unselect all
   below its left edge (templates/catalog/_bulk_count.html) */
.bulk-menu-btn { --s-overlay-position-area-6e076: block-end span-inline-end; display: inline-flex; align-items: center; padding: 2px 4px 2px 8px; border: 0; border-radius: 9999px; background: #ebebeb; font: inherit; cursor: pointer; white-space: nowrap; }
.bulk-menu-btn:hover, .bulk-menu-btn[aria-expanded="true"] { background: #e3e3e3; }
.bulk-menu-btn .icon { margin-left: 2px; }
.index.all-selected .bulk-btn:disabled { color: #b5b5b5; cursor: default; }
.index.all-selected .bulk-btn:disabled:hover { background: #ebebeb; }
/* Pagination pill, floating at the bottom-left of the panel */
.pager { position: sticky; bottom: 12px; z-index: 6; display: inline-flex; align-items: center; gap: 2px; height: 40px; margin: 12px 0 0 -4px; padding: 5px 6px; background: #fff; border: 1px solid rgba(0,0,0,.08); border-radius: 9999px; box-shadow: rgba(0,0,0,.08) 0 10px 24px 0; }
.pager .range { width: 64px; text-align: center; font-size: 12px; line-height: 20px; font-weight: 500; color: #4a4a4a; font-variant-numeric: tabular-nums; }

/* The floating Menu button and the tap-to-dismiss layer only exist on small screens */
.menu-fab, .dismiss { display: none; }

/* --- Under 768px (the admin's 48em breakpoint): no sidebar. A floating Menu button opens the nav
   as a 360px drawer that pushes the panel right; the table scrolls sideways with the checkbox,
   image and action columns pinned; the pager becomes a plain row. All measured on the admin. --- */
@media (max-width: 767.98px) {
  .frame { display: block; height: auto; overflow: visible; }
  .main { position: relative; z-index: 400; width: 100%; height: 100vh; height: 100dvh; margin: 0; border-radius: 0; translate: 0 0;
    transition: translate .4s cubic-bezier(.2, .8, 0, 1), border-radius .4s cubic-bezier(.2, .8, 0, 1); }
  .frame.menu-open .main { translate: 364px 0; border-radius: 55px 0 0 55px; }
  .dismiss { position: fixed; inset: 0 0 0 360px; z-index: 510; }
  .frame.menu-open .dismiss { display: block; }
  .menu-fab { position: fixed; left: 12px; bottom: 20px; z-index: 500; display: inline-flex; align-items: center; justify-content: center; width: 56px; height: 56px; border: 0; border-radius: 9999px; background: #fff; color: #101010; cursor: pointer;
    box-shadow: rgba(0,0,0,.4) 0 0 1.25px 0, rgba(0,0,0,.1) 0 0 24px 0, rgba(0,0,0,.06) 0 4px 12px 0; }
  .menu-fab .icon { width: 18px; height: 18px; }
  .frame.menu-open .menu-fab { display: none; }
  /* The drawer: the sidebar slid in from the left, with the admin's 44px touch-height rows */
  .sidebar, .frame.collapsed .sidebar { position: fixed; inset: 0 auto 0 0; z-index: 516; width: 360px; max-width: calc(100vw - 48px); height: 100%; padding: 12px; overflow-y: auto; translate: -100% 0;
    transition: translate .4s cubic-bezier(.2, .8, 0, 1); }
  .frame.menu-open .sidebar { translate: 0 0; }
  .logo-row, .frame.collapsed .logo-row { flex-direction: row; justify-content: space-between; height: 44px; padding-left: 8px; }
  .collapse { display: none; }
  .search, .frame.collapsed .search { height: 44px; margin: 20px 2px 0; padding: 0 10px 0 6px; border-radius: 22px; justify-content: flex-start; }
  .search kbd { display: none; }
  .nav { margin-top: 10px; }
  .nav-item, .store, .frame.collapsed .nav-item, .frame.collapsed .store { height: 44px; width: 100%; margin: 0; padding: 1px 4px 1px 8px; border-radius: 18px; gap: 10px; justify-content: flex-start; }
  .nav-heading { margin-top: 12px; }
  .nav-item.sub, .frame.collapsed .nav-item.sub { display: flex; padding-left: 38px; }
  .frame.collapsed .brand .label, .frame.collapsed .nav-item .label, .frame.collapsed .store .name { display: inline; }
  .frame.collapsed .search .label, .frame.collapsed .nav-item .count { display: inline-block; }
  .frame.collapsed .nav-heading { display: flex; }
  /* Every page fills the panel; 96px at the bottom keeps the last row clear of the Menu button */
  .main { padding-bottom: 96px; }
  .page { padding: 0 16px; }
  .page-content.detail { padding: 8px 0 0; }
  .page-header { margin: 0 -16px; padding: 12px 16px; }
  /* The table scrolls sideways under the sticky header band (kept in step by script) */
  .index-head { overflow-x: hidden; }
  .index-body { overflow-x: auto; }
  .index-row { width: max-content; min-width: 100%; }
  .bulk { position: sticky; left: 0; }
  .col-check, .col-image, .col-actions { position: sticky; z-index: 2; align-self: stretch; background: #fff; }
  .col-check { left: 0; border-radius: 10px 0 0 10px; }
  .col-image { left: 36px; }
  .col-actions { right: 0; border-radius: 0 10px 10px 0; }
  .index-head .col-check, .index-head .col-image, .index-head .col-actions,
  .index-body .index-row:hover .col-check, .index-body .index-row:hover .col-image, .index-body .index-row:hover .col-actions,
  .index-body .index-row.selected .col-check, .index-body .index-row.selected .col-image, .index-body .index-row.selected .col-actions { background: #f7f7f7; }
  .row-action { opacity: 1; }
  .pager { position: static; display: flex; width: 100%; height: 44px; margin: 12px 0 0; padding: 0 20px 0 8px; border: 0; border-radius: 0; background: none; box-shadow: none; }
  .pager .range { order: 3; width: auto; margin-left: auto; font-size: 13px; font-weight: 400; color: #101010; }
}

/* --- Global search: the admin's search modal (measured on the live admin). A 648px box, 24px
   corners, centred in the viewport at up to 480px tall over a #000000b5 backdrop; a 40px search row
   (12px 40px 8px 12px, #f2f2f2 rule, 12px below it), 20px scope chips, 36px recent rows and 56px
   result rows with 8px corners and a #f7f7f7 highlight, a 49px footer with "Open ↵". --- */
.gsearch { --gs-height: min(30rem, calc(100vh - 2rem)); position: fixed; inset: 0; margin: auto; width: 40.5rem; max-width: calc(100vw - 2rem); height: var(--gs-height); max-height: var(--gs-height);
  padding: 0; border: 0; border-radius: 24px; background: #fff; color: #101010; overflow: hidden; display: none; flex-direction: column;
  box-shadow: rgba(0,0,0,.06) 0 2px 3px -1px, rgba(0,0,0,.06) 0 4px 6px -2px, rgba(0,0,0,.06) 0 8px 12px -4px, rgba(0,0,0,.06) 0 16px 24px -6px, rgba(0,0,0,.06) 0 32px 48px -8px, rgba(0,0,0,.08) 0 0 0 1px;
  font: 400 13px/20px ShopifyInter, Inter, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; letter-spacing: -0.13px; }
.gsearch[open] { display: flex; animation: gs-enter 300ms ease-in-out; }
.gsearch::backdrop { background: #000000b5; animation: gs-fade 300ms cubic-bezier(.19, .91, .38, 1); }
@keyframes gs-enter { from { opacity: 0; transform: scale(.96); } to { opacity: 1; transform: none; } }
@keyframes gs-fade { from { opacity: 0; } to { opacity: 1; } }
@media (prefers-reduced-motion: reduce) { .gsearch[open], .gsearch::backdrop { animation: none; } }
.gsearch .icon { width: 16px; height: 16px; }
.gs-field { position: relative; flex: none; display: flex; align-items: center; gap: 8px; min-height: 61px; margin-bottom: 12px; padding: 12px 40px 8px 12px; border-bottom: 1px solid #f2f2f2; }
.gs-glyph { display: inline-flex; padding: 2px; color: #101010; }
.gs-field input { flex: 1; min-width: 0; height: 40px; padding: 10px 0; border: 0; outline: 0; background: none; font: inherit; letter-spacing: inherit; color: #101010; }
.gs-field input::placeholder { color: #a6a6a6; }
.gs-actions { position: absolute; right: 12px; top: 12px; display: flex; align-items: center; height: 40px; }
.gs-field:has(#gs-clear:not([hidden])) { padding-right: 68px; }
.gs-icon-btn { display: inline-flex; align-items: center; justify-content: center; width: 28px; height: 28px; padding: 4px; border: 0; border-radius: 9999px; background: none; color: #606060; cursor: pointer; }
.gs-icon-btn[hidden] { display: none; }
.gs-icon-btn .icon { width: 20px; height: 20px; }
.gs-icon-btn:hover, .gs-icon-btn[aria-pressed="true"] { background: rgba(0,0,0,.05); color: #101010; }
.gs-icon-btn:focus-visible, .gs-chip:focus-visible, .gs-link:focus-visible, .gs-open:focus-visible, .gs-scope-x:focus-visible { outline: 2px solid #005bd3; outline-offset: 1px; }
/* Scope chips: 20px, 2px 8px, 8px corners, 5% black, 12px/500 #4a4a4a. A chosen scope moves into the field with an × */
.gs-chips { flex: none; display: flex; flex-wrap: wrap; gap: 8px; padding: 0 12px 8px; }
.gs-chips[hidden] { display: none; }
.gs-chip { display: inline-flex; align-items: center; height: 20px; padding: 2px 8px; border: 0; border-radius: 8px; background: rgba(0,0,0,.05); color: #4a4a4a; font: inherit; font-size: 12px; font-weight: 500; line-height: 18px; letter-spacing: 0; white-space: nowrap; cursor: pointer; }
.gs-chip:hover { background: rgba(0,0,0,.08); color: #101010; }
.gs-chip[aria-pressed="true"] { background: rgba(0,0,0,.11); color: #101010; }
.gs-chip.static { cursor: inherit; }
.gs-chip.static:hover { background: rgba(0,0,0,.05); color: #4a4a4a; }
.gs-scope { flex: none; display: inline-flex; align-items: center; gap: 2px; height: 20px; padding: 2px 2px 2px 8px; border-radius: 8px; background: rgba(0,0,0,.05); color: #4a4a4a; font-size: 12px; font-weight: 500; line-height: 18px; letter-spacing: 0; }
.gs-scope[hidden] { display: none; }
.gs-scope-x { display: inline-flex; align-items: center; justify-content: center; width: 16px; height: 16px; padding: 0; border: 0; border-radius: 6px; background: none; color: #4a4a4a; cursor: pointer; }
.gs-scope-x:hover { background: rgba(0,0,0,.08); color: #101010; }
.gs-scope-x .icon { width: 14px; height: 14px; }
.gs-body { flex: 1 1 auto; min-height: 0; overflow-y: auto; padding-bottom: 8px; }
.gs-list { display: flex; flex-direction: column; }
.gs-heading { display: flex; align-items: center; justify-content: space-between; height: 20px; padding: 0 20px 0 14px; margin: 2px 0 4px; color: #4a4a4a; font-size: 12px; font-weight: 600; line-height: 18px; letter-spacing: 0; }
.gs-link { padding: 0; border: 0; background: none; color: #005bd3; font: inherit; font-size: 13px; font-weight: 400; line-height: 20px; letter-spacing: -0.13px; cursor: pointer; }
.gs-link:hover { color: #004299; text-decoration: underline; }
.gs-rows { display: flex; flex-direction: column; padding: 0 12px; }
.gs-row { display: flex; align-items: center; gap: 8px; min-height: 36px; padding: 8px; border-radius: 8px; color: #101010; text-decoration: none; cursor: pointer; }
.gs-row:hover { text-decoration: none; }
.gs-row.active { background: #f7f7f7; }
.gs-row-icon { display: inline-flex; padding: 4px; margin: -2px 0; color: #101010; }
.gs-row-text { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.gs-group + .gs-group { margin-top: 8px; }
.gs-group-head { padding: 0 12px 8px; }
.gs-row.result { min-height: 56px; align-items: flex-start; }
.gs-thumb { flex: none; display: inline-flex; align-items: center; justify-content: center; width: 24px; height: 24px; margin-top: 8px; border-radius: 6px; overflow: hidden; background: #f7f7f7; color: #4a4a4a; }
.gs-thumb img { width: 100%; height: 100%; object-fit: cover; }
.gs-row-lines { flex: 1; min-width: 0; display: flex; flex-direction: column; justify-content: center; min-height: 40px; }
.gs-title { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.gs-title mark { background: none; color: inherit; font-weight: 750; }
.gs-subtitle { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: #4a4a4a; font-size: 12px; line-height: 18px; letter-spacing: 0; }
.gs-empty { margin: 4px 0 0; padding: 8px 20px; color: #a6a6a6; }
.gs-footer { flex: none; display: flex; align-items: center; justify-content: flex-end; height: 49px; padding: 0 12px; border-top: 1px solid #f2f2f2; }
.gs-open { display: inline-flex; align-items: center; gap: 4px; height: 32px; padding: 4px 0; border: 0; background: none; color: #a6a6a6; font: inherit; font-size: 12px; cursor: pointer; }
.gs-open:hover { color: #4a4a4a; }
.gs-open kbd { display: inline-flex; align-items: center; justify-content: center; min-width: 20px; height: 20px; padding: 2px 4px; border-radius: 4px; background: rgba(0,0,0,.08); color: #4a4a4a; font: inherit; font-size: 12px; line-height: 16px; }
@media (max-width: 767.98px) {
  .gsearch { --gs-height: calc(100dvh - 2rem); border-radius: 20px; }
  .gs-row, .gs-row.result { min-height: 44px; }
}

/* Unconfirmed SKUs above a product page (_guessed.html): one quiet notice, a line per SKU with its
   reason and a tertiary Confirm, as short as its content */
.unconfirmed { display: flex; flex-direction: column; gap: 2px; margin-bottom: 12px; padding: 6px 6px 6px 12px; border-radius: 12px; background: #f7f7f7; }
.unconfirmed-head { display: flex; align-items: center; gap: 8px; min-height: 28px; }
.unconfirmed-line { display: flex; align-items: center; justify-content: space-between; gap: 12px; min-height: 28px; border-top: 1px solid #ebebeb; }
.unconfirmed-text { display: flex; flex-wrap: wrap; align-items: baseline; gap: 0 8px; min-width: 0; }
.unconfirmed-name { font-weight: 500; }
.unconfirmed-line s-button { flex: none; }
/* The Fulfillment list's Flags column (_items_table.html), like the admin's orders list: a 52px
   cell after Product, empty unless a SKU is unconfirmed. Then a caution icon and a caret, each a
   16px glyph in a 20px box, under a transparent button that covers the cell. The caret shows on row
   hover, focus or while the panel is open; the open cell keeps the active surface (index.js sets
   .open from the popover's toggle). The panel below it: head with a pencil, a card per unconfirmed
   SKU with its reason in the caution note, and Edit / Confirm; the cards scroll, not the page. */
.index-body .cell.col-flags { position: relative; align-self: stretch; padding: 6px; }
.flag-icons { display: flex; align-items: center; border-radius: 6px; }
.flag-icons .icon { padding: 2px; box-sizing: content-box; }
.flag-icons .icon:first-child { color: #e8730c; color: oklch(0.7194 0.2136 47.51); }
.flag-icons .icon:last-child { color: #4a4a4a; opacity: 0; }
.index-row:hover .flag-icons .icon:last-child, .col-flags.open .flag-icons .icon:last-child, .col-flags:has(.flag-btn:focus-visible) .flag-icons .icon:last-child { opacity: 1; }
.flag-btn { --s-overlay-position-area-6e076: block-end span-inline-end; /* open below, from the cell's left edge */ position: absolute; top: 0; left: 0; width: 100%; height: 100%; margin: 0; padding: 0; border: 0; background: transparent; cursor: pointer; }
.flag-btn:focus-visible { outline: none; }
.col-flags:has(.flag-btn:focus-visible) .flag-icons { outline: 2px solid #005bd3; outline-offset: 1px; }
.index-body .cell.col-flags:has(.flag-btn):hover { background: rgba(0,0,0,.05); }
.index-body .cell.col-flags.open, .index-body .cell.col-flags.open:hover { background: #f3f3f3; }
.guess-pop { display: flex; flex-direction: column; width: min(340px, calc(100vw - 32px)); max-height: min(480px, calc(100vh - 96px)); padding: 12px; cursor: default; }
.guess-head { display: flex; align-items: center; justify-content: space-between; gap: 8px; min-height: 28px; }
.guess-title { margin: 0; font-size: 13px; line-height: 20px; font-weight: 650; color: #101010; }
.guess-edit { display: inline-flex; align-items: center; justify-content: center; flex: none; width: 28px; height: 28px; border-radius: 8px; color: #4a4a4a; }
.guess-edit:hover { background: #f7f7f7; color: #101010; }
.guess-lead { margin: 0 0 8px; }
.guess-list { display: flex; flex-direction: column; gap: 8px; min-height: 0; overflow-y: auto; overscroll-behavior: contain; }
.guess-card { display: flex; flex-direction: column; gap: 2px; padding: 8px 12px; border: 1px solid #e3e3e3; border-radius: 12px; }
.guess-name { font-weight: 500; }
.guess-note { margin-top: 4px; padding: 6px 8px; border-radius: 8px; background: #fff8db; color: #8e6700; font-size: 12px; line-height: 16px; } /* Polaris caution surface, the SKU table's warning text */
.guess-foot { display: flex; justify-content: flex-end; gap: 8px; margin: 12px 0 0; }
/* Publish contents: Namespace and Key side by side, each sized for a short word */
.contents-key { display: flex; flex-wrap: wrap; align-items: end; gap: 12px; }
.contents-key .field-box { inline-size: 200px; }
/* Print placement controls share one saved value per variant. */
.placement-cell { display: flex; flex-direction: column; gap: 4px; width: 100%; min-width: 0; }
.placement-cell s-select { width: 100%; }
.component-placement { display: grid; gap: 8px; }
.component-placement > div { display: flex; flex-direction: column; }

/* Product copies use the same full-width rows as the catalog. */
.duplicate-skus { --vt-cols: minmax(160px, 2fr) minmax(120px, 1fr) minmax(180px, 2fr); }
.duplicate-fields { --vt-cols: minmax(160px, 1fr) minmax(240px, 2fr) 88px; }
.duplicate-skus .vt-row, .duplicate-fields .vt-row { grid-template-columns: var(--vt-cols); min-width: 540px; }
.duplicate-drafts { margin-bottom: 12px; }
.repeated-skus { margin-bottom: 8px; }
/* A SKU in the notice: a link-like button opening the places that carry it */
.repeated-sku { --s-overlay-position-area-6e076: block-end span-inline-end; padding: 0; border: 0; background: none; font: inherit; color: inherit; text-decoration: underline; cursor: pointer; }

/* --- Analytics (analytics.html), after Shopify's analytics pages: the content sits in the detail
   pages' centred 1090px column, wide enough for By SKU's ten columns; the period pill, the
   comparison pill and Refresh float bare under the header and wrap on a narrow screen; the report select
   (and By SKU's channel) and freshness line sit in a card; the tables sit in a card under 28px pill
   tabs or a heading and scroll sideways inside it. Numbers are right-aligned in tabular figures;
   TOTAL rows are bold with a darker rule above the first of them. --- */
.analytics-controls { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin: 4px 0 16px; } /* 8px between the pills and Refresh, as Shopify's */
.analytics-refresh-form { display: inline-flex; margin: 0; }
/* The two pills, measured off Shopify's admin (an s-press-button with icon="calendar" and
   icon="calendar-compare"), so both are built the same: 28px high, padding 4px 12px 4px 6px, the
   #ebebeb fill fully round, a 12px / 16px label in 500 #101010; the icon in a 20px box 6px from the
   left, the label 2px after it (28px in); the chevron (16px, size small) in a disclosure-icon span
   with 4px before it and -4px after, so it ends 8px from the right edge. While its panel or menu is
   open (aria-expanded) a pill takes Polaris's pressed fill, bg-fill-selected (#ccc) with its inset
   shadow, and the script turns the chevron up. Then the period picker, as Shopify's admin: one card
   of quick picks (plain rows in groups under thin rules, the chosen one bold on grey) beside the two
   days written out with an arrow between, the two months (one s-date-picker, which draws the range
   and the rule between the months) and Cancel and Apply under a rule; and the comparison menu, the
   app's popover menu with the chosen item bold on grey. The label's font family, letter spacing
   (-0.01em, -0.12px at 12px) and text rendering are what Polaris gives its own button text (the
   :host>* rule of polaris-2.js, tokens with its admin-next values as fallbacks); a native button
   otherwise resets letter spacing to normal. The menu's items are the app's .menu-item links, as
   More actions', so they inherit the page's text (13px, -0.13px) like every other menu. */
.analytics-pill { --s-overlay-position-area-6e076: block-end span-inline-end; /* Polaris reads this off the invoker: open below, from the pill's left edge */ display: inline-flex; align-items: center; box-sizing: border-box; height: 28px; margin: 0; padding: 4px 12px 4px 6px; border: 0; border-radius: 9999px; background: #ebebeb; box-shadow: none; color: #101010; font: inherit; font-family: var(--p-font-family-sans-6e076, "ShopifyInter", "Noto Sans Arabic", "Noto Sans Hebrew", ui-sans-serif, system-ui, sans-serif); font-size: 12px; line-height: 16px; font-weight: 500; letter-spacing: var(--p-font-letter-spacing-body-medium-6e076, -0.01em); text-rendering: optimizeLegibility; white-space: nowrap; cursor: pointer; }
.analytics-pill > s-icon { display: inline-flex; flex: none; inline-size: 20px; block-size: 20px; }
.analytics-pill .period-pill-text, .analytics-pill .compare-pill-text { margin-left: 2px; }
.analytics-pill .disclosure-icon { display: flex; margin-left: 4px; margin-right: -4px; }
.analytics-pill .disclosure-icon s-icon { display: inline-flex; flex: none; inline-size: 16px; block-size: 16px; }
.analytics-pill:hover { background: #e3e3e3; }
.analytics-pill:active, .analytics-pill[aria-expanded="true"] { background: #ccc; box-shadow: inset -1px 0 1px 0 #1a1a1a1f, inset 1px 0 1px 0 #1a1a1a1f, inset 0 2px 1px 0 #1a1a1a33; }
.analytics-pill:focus-visible { outline: 2px solid #005bd3; outline-offset: 1px; }
.compare-menu .menu-item.active { background: #ebebeb; font-weight: 600; }
/* A compact card of Shopify's size: 700px in all, 170px of quick picks and a 530px calendar pane whose
   two months (about 253px each, 32px days) fill it; never wider than the screen less 32px. */
.period-panel { display: flex; box-sizing: border-box; width: 700px; max-width: calc(100vw - 32px); background: #fff; }
.period-list { display: flex; flex-direction: column; gap: 2px; width: 170px; flex: none; box-sizing: border-box; padding: 8px; border-right: 1px solid #e3e3e3; }
.period-pick { display: block; box-sizing: border-box; width: 100%; padding: 6px 10px; border: 0; border-radius: 8px; background: none; font: inherit; font-size: 13px; line-height: 16px; color: #303030; text-align: left; text-decoration: none; cursor: pointer; }
.period-pick:hover { background: #f1f1f1; text-decoration: none; }
.period-pick.active { background: #ebebeb; font-weight: 600; }
.period-pick:focus-visible { outline: 2px solid #005bd3; outline-offset: 1px; }
.period-rule { height: 1px; margin: 4px -8px; background: #e3e3e3; } /* the column's full width, through its padding */
.period-custom { display: flex; flex-direction: column; flex: 1 1 0; min-width: 0; margin: 0; }
.period-fields { display: flex; align-items: center; gap: 8px; padding: 12px 12px 4px; }
.period-fields s-text-field { flex: 1 1 0; min-width: 0; }
.period-calendars { padding: 4px 0 12px; }
.period-calendars s-date-picker { display: block; inline-size: 100%; max-inline-size: 506px; margin-inline: auto; } /* two 253px months of 32px days, centred in the pane; narrower on a small screen, where the months stack */
.period-foot { display: flex; justify-content: flex-end; gap: 8px; margin-top: auto; padding: 12px; border-top: 1px solid #e3e3e3; }
.analytics-report { display: flex; flex-direction: column; gap: 8px; }
.analytics-report form { margin: 0; }
.analytics-select { inline-size: min(320px, 100%); }
.analytics-selects { display: flex; flex-wrap: wrap; gap: 8px; }
.analytics-choice { inline-size: min(240px, 100%); }
.analytics-heading { padding: 12px 12px 0; }
.analytics-note { padding: 12px 12px 0; }
.analytics-banner { padding: 12px 10px 0; }
.analytics-block + .analytics-block { margin-top: 6px; border-top: 1px solid #ebebeb; }
.analytics-card { margin-top: 16px; }
.analytics-empty { display: flex; flex-direction: column; align-items: center; gap: 16px; padding: 40px 16px; text-align: center; }
.analytics-empty form { margin: 0; }
.analytics-tabs { display: flex; flex-wrap: wrap; gap: 4px; padding: 8px 10px 0; }
.analytics-tab { display: inline-flex; align-items: center; height: 28px; padding: 0 12px; border-radius: 8px; color: #4a4a4a; font-weight: 500; text-decoration: none; }
.analytics-tab:hover { background: #f1f1f1; color: #101010; text-decoration: none; }
.analytics-tab.active { background: #ebebeb; color: #101010; }
.analytics-tab:focus-visible { outline: 2px solid #005bd3; outline-offset: 1px; }
.analytics-table { padding-bottom: 10px; }
.analytics-channels { --vt-cols: minmax(180px, 2fr) repeat(3, minmax(110px, 1fr)); --vt-min: 520px; }
.analytics-categories { --vt-cols: minmax(190px, 2fr) repeat(6, minmax(100px, 1fr)); --vt-min: 790px; }
.analytics-products { --vt-cols: 48px minmax(200px, 2fr) repeat(5, minmax(100px, 1fr)); --vt-min: 748px; }
.analytics-top10-categories { --vt-cols: minmax(190px, 2fr) repeat(4, minmax(100px, 1fr)); --vt-min: 590px; }
.analytics-top10-products { --vt-cols: 48px minmax(200px, 3fr) repeat(2, minmax(100px, 1fr)); --vt-min: 448px; }
.analytics-units { --vt-cols: 80px minmax(200px, 2fr) repeat(7, minmax(64px, .6fr)); --vt-min: 728px; }
.analytics-tea-unmapped { --vt-cols: 90px minmax(180px, 2fr) minmax(100px, 1fr) 90px 80px minmax(160px, 1.5fr); --vt-min: 700px; }
.analytics-snacks-unmapped { --vt-cols: 100px minmax(200px, 2fr) 100px 120px; --vt-min: 520px; }
.analytics-skus { --vt-cols: minmax(80px, .8fr) minmax(170px, 2fr) minmax(100px, 1fr) minmax(120px, 1fr) repeat(6, minmax(84px, .8fr)); --vt-min: 974px; }
.analytics-skus .vt-head .vt-cell { white-space: normal; }
.analytics-skus .vt-cell.sku, .analytics-snacks .sku-list { overflow-wrap: anywhere; }
.analytics-table .vt-num { justify-content: flex-end; padding-right: 12px; text-align: right; white-space: nowrap; font-variant-numeric: tabular-nums; }
.analytics-table .vt-body .vt-row { min-height: 41px; }
.analytics-table .vt-row.total { font-weight: 600; }
.analytics-table .vt-body .vt-row.total-first, .analytics-table .vt-body .vt-row.total-first:hover { border-top-color: #d4d4d4; }
.analytics-table .vt-body .vt-row.gap { min-height: 16px; border-top-color: transparent; }
.analytics-table .vt-body .vt-row.gap:hover { background: none; }
.analytics-table .vt-body .vt-row.gap + .vt-row { border-top-color: transparent; }
@media (max-width: 767.98px) {
  .period-panel { flex-direction: column; }
  .period-list { flex-direction: row; flex-wrap: wrap; width: auto; border-right: 0; border-bottom: 1px solid #e3e3e3; }
  .period-list .period-pick { width: auto; }
  .period-list .period-rule { display: none; }
  .period-custom { flex: none; }
}