/* New store selector — scoped under `.store-selector-v2` so styles can't
   leak into the legacy header. We keep the parent .input-group as
   Bootstrap's default table layout to avoid resizing the text input.

   Palette intentionally minimal: brand #47A0E9 (used straight for active
   fills + checked checkbox), a darker variant #2080cb for text-on-tint
   contrast, and a single tint background #e8f4fd. No rounded corners —
   the surrounding ZenMarket UI is square, so the selector follows. */
.store-selector-v2 { position: relative; padding: 0 !important; border: 0 !important; background: transparent; white-space: nowrap; }
/* Match .default-search's 45px so the trigger lines up with the text
   input. The legacy `.shop-categories` got the same height via padding;
   we set it explicitly because our button has no implicit baseline. */
.store-selector-v2 .ssv2-trigger { border: 1px solid #ccc; border-right: 0; background: #fafafa; color: #333; height: 45px; line-height: 1; min-width: 110px; padding: 0 12px; display: inline-flex; align-items: center; gap: 8px; font-size: 14px; font-weight: 500; cursor: pointer; box-sizing: border-box; vertical-align: middle; }
.store-selector-v2 .ssv2-trigger-default:hover { background: #f1f1f1; }
.store-selector-v2 .ssv2-trigger-default .ssv2-chevron { color: #777; }
/* Pill trigger uses the same brand tint as the "All stores" highlight in
   the dropdown — that consistent #47A0E9 family says "currently active". */
.store-selector-v2 .ssv2-trigger-pill { background: #e8f4fd; border-color: #b8dcf5; color: #2080cb; padding: 0; gap: 0; }
.store-selector-v2 .ssv2-pill-label { padding: 0 10px; display: inline-flex; align-items: center; gap: 6px; height: 100%; cursor: pointer; font-weight: 600; }
.store-selector-v2 .ssv2-pill-label .ssv2-pill-more { font-weight: 500; opacity: 0.8; font-size: 12px; }
.store-selector-v2 .ssv2-pill-clear { background: transparent; border: 0; border-left: 1px solid #b8dcf5; height: 100%; padding: 0 8px; color: #2080cb; cursor: pointer; display: inline-flex; align-items: center; min-width: 32px; justify-content: center; }
.store-selector-v2 .ssv2-pill-clear:hover { background: rgba(0,0,0,0.04); }
.store-selector-v2 .ssv2-pill-chevron { background: transparent; border: 0; border-left: 1px solid #b8dcf5; height: 100%; padding: 0 8px; color: #2080cb; cursor: pointer; display: inline-flex; align-items: center; min-width: 32px; justify-content: center; }
.store-selector-v2 .ssv2-pill-chevron:hover { background: rgba(0,0,0,0.04); }

/* Square corners throughout — ZenMarket's surrounding UI is sharp, so
   the selector follows. */
.store-selector-v2 .ssv2-dropdown { position: absolute; top: calc(100% + 4px); left: 0; min-width: 340px; max-width: 380px; background: #fff; border: 1px solid #ddd; box-shadow: 0 8px 24px rgba(0,0,0,0.10); padding: 4px; z-index: 1050; }

/* Management section keeps the brand tint — same visual language as the
   pill trigger: blue = "currently active selection". */
.store-selector-v2 .ssv2-selection { background: #e8f4fd; padding: 12px; margin-bottom: 4px; }
.store-selector-v2 .ssv2-selection-head { display: flex; justify-content: space-between; align-items: center; font-size: 13px; color: #2080cb; font-weight: 600; margin-bottom: 8px; }
.store-selector-v2 .ssv2-selection-clear { color: #2080cb; font-size: 12px; text-decoration: none; font-weight: 500; }
.store-selector-v2 .ssv2-selection-clear:hover { text-decoration: underline; }
.store-selector-v2 .ssv2-chips { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 10px; }
.store-selector-v2 .ssv2-chip { background: #fff; border: 1px solid #b8dcf5; color: #333; padding: 3px 10px; font-size: 12px; line-height: 1.4; cursor: default; }
/* Secondary CTA — lighter than primary buttons because the tinted parent
   does the visual work; stacking strong colors would compete. */
.store-selector-v2 .ssv2-edit-selection { width: 100%; background: #fff; border: 1px solid #b8dcf5; color: #2080cb; padding: 7px 12px; font-size: 13px; font-weight: 500; cursor: pointer; }
.store-selector-v2 .ssv2-edit-selection:hover { background: #f4f9fd; }

/* "── OR  Search one marketplace ──" divider that separates the
   recommended All-stores row from the single-marketplace alternatives.
   Frames the relationship as "default OR pick one" instead of a list of
   equal options. */
.store-selector-v2 .ssv2-divider { display: flex; align-items: center; gap: 10px; padding: 12px 12px 6px; color: #888; font-size: 11px; text-transform: uppercase; letter-spacing: 0.06em; }
.store-selector-v2 .ssv2-divider::before,
.store-selector-v2 .ssv2-divider::after { content: ''; flex: 1; height: 1px; background: #e5e7eb; }
.store-selector-v2 .ssv2-divider-or { font-weight: 600; color: #555; }
.store-selector-v2 .ssv2-divider-label { white-space: nowrap; }

/* text-align:left because some parent stylesheets center .btn / <a>
   contents and the row body would otherwise center the store name in
   the flex track. */
.store-selector-v2 .ssv2-row { display: flex; align-items: center; gap: 10px; padding: 10px 12px; color: #333; text-decoration: none; cursor: pointer; text-align: left; }
.store-selector-v2 .ssv2-row-body { text-align: left; flex: 1; min-width: 0; }
.store-selector-v2 .ssv2-row:hover { background: #f5f7fb; text-decoration: none; }
/* All-stores row is now a plain white row at the top — no tint, no
   "looks selected" trap. Its prominence comes from position + the
   "Recommended" label, not from background colour. */
.store-selector-v2 .ssv2-row-all { padding: 10px 12px; }
.store-selector-v2 .ssv2-row-all .ssv2-row-title { font-weight: 600; color: #333; }
/* Right-aligned within the flex row, same pattern as .ssv2-badge-fee on
   the marketplace rows — keeps the title legible and gives the eye a
   consistent landing spot for "status" labels across all rows. */
.store-selector-v2 .ssv2-recommended-label { font-size: 10px; color: #2080cb; font-weight: 600; text-transform: uppercase; letter-spacing: 0.06em; margin-left: auto; flex-shrink: 0; }
.store-selector-v2 .ssv2-row-check { display: none; color: #47A0E9; margin-left: auto; }
.store-selector-v2 .ssv2-row.ssv2-active .ssv2-row-check { display: inline-block; }
.store-selector-v2 .ssv2-row-title { font-size: 14px; }
.store-selector-v2 .ssv2-row-sub { font-size: 12px; color: #888; }
.store-selector-v2 .ssv2-row-more .ssv2-row-title { color: #2080cb; font-weight: 500; }

/* Lower-fees badge — rendered in both the dropdown row and the modal
   list, so the rule isn't scoped to either container. */
.ssv2-badge-fee { font-size: 11px; padding: 2px 8px; background: #e7f6e7; color: #2e7d32; margin-left: auto; flex-shrink: 0; font-weight: 500; }

/* Modal — Bootstrap's own .modal-* skin is too dated for what we want
   here, so the layout is built directly on .ssv2-modal-* and the only
   Bootstrap pieces we keep are show/hide + backdrop wiring. Square
   corners throughout to match the rest of the ZenMarket UI. */
#ssv2Modal .ssv2-modal-dialog { width: 560px; max-width: calc(100vw - 32px); margin: 60px auto; }
#ssv2Modal .ssv2-modal-content { background: #fff; border: 1px solid #e5e7eb; box-shadow: 0 16px 48px rgba(15, 23, 42, 0.18); position: relative; }
/* Close button shared by both modals (picker + mobile quick picker). */
.ssv2-modal-close { position: absolute; top: 14px; right: 14px; background: transparent; border: 0; padding: 6px; color: #94a3b8; cursor: pointer; line-height: 0; }
.ssv2-modal-close:hover { color: #334155; }

#ssv2Modal .ssv2-modal-head { padding: 24px 28px 16px; }
#ssv2Modal .ssv2-modal-title { font-size: 19px; font-weight: 600; color: #0f172a; }
#ssv2Modal .ssv2-modal-sub { font-size: 13px; color: #64748b; margin-top: 4px; }

#ssv2Modal .ssv2-modal-toolbar { padding: 0 28px 14px; display: flex; gap: 14px; align-items: center; }
#ssv2Modal .ssv2-modal-search-wrap { position: relative; flex: 1; }
#ssv2Modal .ssv2-modal-search-wrap svg { position: absolute; left: 12px; top: 50%; transform: translateY(-50%); color: #94a3b8; pointer-events: none; }
#ssv2Modal .ssv2-modal-search { width: 100%; height: 38px; padding: 0 12px 0 34px; border: 1px solid #e2e8f0; box-shadow: none; font-size: 14px; outline: none; background: #fff; color: #0f172a; }
#ssv2Modal .ssv2-modal-search:focus { border-color: #47A0E9; box-shadow: 0 0 0 3px rgba(71, 160, 233, 0.18); }
#ssv2Modal .ssv2-modal-counter { color: #64748b; font-size: 12px; white-space: nowrap; }
#ssv2Modal .ssv2-modal-counter strong { color: #0f172a; font-weight: 600; }

/* Chips preview — mirrors the dropdown's management section so the
   same blue tint = "currently selected" language carries into the modal. */
#ssv2Modal .ssv2-modal-chips-block { margin: 0 28px 12px; background: #e8f4fd; padding: 12px; }
#ssv2Modal .ssv2-modal-chips-head { display: flex; justify-content: space-between; align-items: center; font-size: 13px; color: #2080cb; font-weight: 600; margin-bottom: 8px; }
#ssv2Modal .ssv2-modal-chips-title { font-weight: 600; }
#ssv2Modal .ssv2-modal-chips-clear { color: #2080cb; font-size: 12px; text-decoration: none; font-weight: 500; }
#ssv2Modal .ssv2-modal-chips-clear:hover { text-decoration: underline; }
#ssv2Modal .ssv2-modal-chips-list { display: flex; flex-wrap: wrap; gap: 6px; }
#ssv2Modal .ssv2-modal-chips-list .ssv2-chip { background: #fff; border: 1px solid #b8dcf5; color: #333; padding: 3px 10px; font-size: 12px; line-height: 1.4; cursor: default; }

/* Tabs — minimal pills, brand fill when active. Buttons not anchors so
   no #-jump on click, and they sit in their own row above the list. */
#ssv2Modal .ssv2-modal-tabs { padding: 0 28px 10px; display: flex; gap: 6px; }
#ssv2Modal .ssv2-modal-tab { background: transparent; border: 1px solid #e2e8f0; padding: 6px 12px; font-size: 13px; color: #475569; cursor: pointer; line-height: 1.2; }
#ssv2Modal .ssv2-modal-tab:hover { background: #f8fafc; color: #0f172a; }
#ssv2Modal .ssv2-modal-tab.ssv2-modal-tab-active { background: #e8f4fd; border-color: #b8dcf5; color: #2080cb; font-weight: 600; }

#ssv2Modal .ssv2-modal-list { max-height: 52vh; overflow-y: auto; padding: 4px 16px 8px; border-top: 1px solid #f1f5f9; border-bottom: 1px solid #f1f5f9; }
#ssv2Modal .ssv2-modal-row { display: flex; align-items: center; gap: 12px; padding: 10px 12px; cursor: pointer; margin: 0; font-weight: normal; }
#ssv2Modal .ssv2-modal-row:hover { background: #f4f9fd; }
/* Custom checkbox — keeps the native control for accessibility but
   restyles its visible look. Square, brand fill when checked. */
#ssv2Modal .ssv2-modal-row input[type="checkbox"] { appearance: none; -webkit-appearance: none; width: 18px; height: 18px; border: 1.5px solid #cbd5e1; margin: 0; flex-shrink: 0; cursor: pointer; position: relative; background: #fff; transition: background 0.12s, border-color 0.12s; }
#ssv2Modal .ssv2-modal-row input[type="checkbox"]:hover { border-color: #94a3b8; }
#ssv2Modal .ssv2-modal-row input[type="checkbox"]:checked { background: #47A0E9; border-color: #47A0E9; }
#ssv2Modal .ssv2-modal-row input[type="checkbox"]:checked::after { content: ''; position: absolute; left: 5px; top: 1px; width: 5px; height: 10px; border: solid #fff; border-width: 0 2px 2px 0; transform: rotate(45deg); }
#ssv2Modal .ssv2-modal-row-name { flex: 1; font-size: 14px; color: #0f172a; }

/* Star toggle — outline by default, filled amber when favorited.
   Sits inside the row's <label>, so the click handler stopPropagation()s
   to avoid flipping the row's checkbox. */
#ssv2Modal .ssv2-fav-btn { background: transparent; border: 0; padding: 4px; cursor: pointer; color: #94a3b8; line-height: 0; flex-shrink: 0; }
#ssv2Modal .ssv2-fav-btn:hover { color: #f59e0b; }
#ssv2Modal .ssv2-fav-btn.ssv2-fav-on { color: #f59e0b; }

#ssv2Modal .ssv2-modal-row.ssv2-disabled { opacity: 0.4; cursor: not-allowed; }
#ssv2Modal .ssv2-modal-row.ssv2-disabled:hover { background: transparent; }
#ssv2Modal .ssv2-modal-empty { color: #94a3b8; text-align: center; padding: 32px 16px; font-size: 14px; }

#ssv2Modal .ssv2-modal-footer { padding: 14px 28px 20px; display: flex; align-items: center; justify-content: flex-end; gap: 10px; }
#ssv2Modal .ssv2-modal-footer-actions { display: flex; gap: 8px; }
#ssv2Modal .ssv2-modal-btn { border: 0; padding: 9px 18px; font-size: 14px; font-weight: 500; cursor: pointer; line-height: 1.2; }
#ssv2Modal .ssv2-modal-btn-ghost { background: transparent; color: #475569; border: 1px solid #e2e8f0; }
#ssv2Modal .ssv2-modal-btn-ghost:hover { background: #f8fafc; color: #0f172a; }
#ssv2Modal .ssv2-modal-btn-primary { background: #47A0E9; color: #fff; }
#ssv2Modal .ssv2-modal-btn-primary:hover { background: #2080cb; }
#ssv2Modal .ssv2-modal-btn-primary:disabled { background: #cbd5e1; cursor: not-allowed; }

/* Mobile quick picker — slimmer modal that hosts a clone of the desktop
   dropdown content. The inner .ssv2-quick-scope reuses the
   .store-selector-v2 namespace so the existing row / selection / divider
   rules apply to cloned rows; specificity + !important here override the
   container properties .store-selector-v2 sets for the input-group cell. */
#ssv2QuickModal .ssv2-quick-dialog { width: 380px; max-width: calc(100vw - 32px); margin: 40px auto; }
#ssv2QuickModal .ssv2-quick-content { background: #fff; border: 1px solid #e5e7eb; box-shadow: 0 16px 48px rgba(15, 23, 42, 0.18); position: relative; }
#ssv2QuickModal .ssv2-quick-head { padding: 18px 24px 4px; }
#ssv2QuickModal .ssv2-quick-title { font-size: 17px; font-weight: 600; color: #0f172a; }
#ssv2QuickModal .ssv2-quick-scope { padding: 4px 8px 12px !important; background: transparent; white-space: normal; }
/* Lift the chip selection-section's outer margin to avoid double padding
   between the modal frame and the tinted block. */
#ssv2QuickModal .ssv2-quick-scope .ssv2-selection { margin-bottom: 8px; }

/* search.aspx filter — collapsed store summary card that replaces the
   inline per-store checkbox list when the unified picker is available.
   Lives inside .facets-container so it doesn't need to fight any of the
   filter wrapper's spacing rules. */
/* search.aspx filter — Favorites tab toggle + per-row star button.
   The inline accordion list is the same one cross-site-searchv2.js
   already rendered; these styles only theme the additions. */
.ssv2-filter-tabs { display: flex; gap: 6px; margin: 6px 0 8px; }
.ssv2-filter-tab { background: transparent; border: 1px solid #e2e8f0; padding: 5px 10px; font-size: 12px; color: #475569; cursor: pointer; line-height: 1.2; }
.ssv2-filter-tab:hover { background: #f8fafc; color: #0f172a; }
.ssv2-filter-tab.ssv2-filter-tab-active { background: #e8f4fd; border-color: #b8dcf5; color: #2080cb; font-weight: 600; }

/* Right cell of each accordion row: [chevron-slot] [star], always in
   that order. The slot reserves chevron-icon width even when the store
   has no sub-filters, so stars line up in a vertical column across
   every row regardless of whether the chevron is rendered. */
.store-row-right { display: inline-flex; align-items: center; gap: 4px; flex-shrink: 0; }
.store-row-chevron { width: 22px; height: 22px; display: inline-flex; align-items: center; justify-content: center; }
.store-row-chevron .store-toggle-icon { padding: 0 !important; }

/* Inline star button. Same colour language as the modal's star —
   outline default, amber when on. */
.ssv2-fav-btn-inline { background: transparent; border: 0; padding: 0; width: 22px; height: 22px; cursor: pointer; color: #94a3b8; line-height: 0; display: inline-flex; align-items: center; justify-content: center; }
.ssv2-fav-btn-inline:hover { color: #f59e0b; }
.ssv2-fav-btn-inline.ssv2-fav-on { color: #f59e0b; }