/* Aurora: the design layer. Loaded last, after app.css and console.css, it
   restyles the shopper pages and the Merchant Center with one set of tokens:
   an indigo-violet-rose gradient accent, glass headers, soft layered depth
   and spring motion. The feedback animations (reveal, count-up, cart burst,
   confetti) are driven by wow.js, which adds .wow-motion to <html> when the
   visitor allows motion; without it everything renders static. */

:root {
  --a-1: #4f46e5;
  --a-2: #7c3aed;
  --a-3: #db2777;
  --a-grad: linear-gradient(135deg, var(--a-1) 0%, var(--a-2) 55%, var(--a-3) 100%);
  --a-grad-soft: linear-gradient(135deg, rgba(79, 70, 229, .10), rgba(124, 58, 237, .08) 55%, rgba(219, 39, 119, .08));
  --a-glow: 0 8px 24px -6px rgba(99, 60, 230, .45);
  --accent: #5b3fe0;
  --primary: #5b3fe0; /* alias used by the 360 badge and video hovers */
  --accent-soft: #efeafe;
  --link: #4338ca;
  --series-1: #6d4aff; --series-2: #f0508a;

  /* Status palette: the single source for good/warn/bad/info. Each tone is a
     background + foreground pair so a component never mixes the two by hand.
     Values are checked for WCAG AA text contrast on their own background. */
  --good-bg: #dcf2e5; --good-fg: #0d652d;
  --warn-bg: #fef3d6; --warn-fg: #8a5300;
  --bad-bg: #fce8e6;  --bad-fg: #b3261e;
  --info-bg: #efeafe; --info-fg: #4c33c9;
  --bg: #fbfbfe;
  --bg-1: #fafaff;   /* subtle raised/inset panel; was referenced, never defined */
  --bg-2: #f5f5fb;
  --bg-3: #eeeef6;
  --text-2: #45454f;
  --text-1: #202124; /* alias of --text; referenced in app.css/console.css */
  /* Aurora's backgrounds are tinted, so the grey inherited from app.css
     (#70757a) fell just under 4.5:1 here. Darkened to clear WCAG AA for
     body text, since this token carries hints, captions and muted labels. */
  --text-3: #5c5c68;
  --surface: #ffffff;
  /* A second surface tone for inset panels (spec cards, list rows, gallery
     frames). The master-catalogue block was written against these names and
     had no definition, so `background: var(--surface-2)` computed to nothing
     and `border: 1px solid var(--line-1)` was dropped as an invalid
     shorthand, leaving that whole section without backgrounds or borders. */
  --surface-2: #f7f7fc;
  --line-1: #e2e2ee;
  --line: #dddde8;
  --line-2: #ececf3;
  --canvas: #f4f3fa;
  --console-border: #e7e5f2;
  --glass: rgba(255, 255, 255, .72);
  --lift-1: 0 1px 2px rgba(24, 20, 60, .05), 0 2px 8px -2px rgba(24, 20, 60, .06);
  --lift-2: 0 2px 4px rgba(24, 20, 60, .04), 0 14px 32px -10px rgba(40, 24, 110, .22);
  --shadow: var(--lift-2);
  --shadow-lg: 0 24px 48px -16px rgba(40, 24, 110, .30);
  --spring: cubic-bezier(.34, 1.56, .64, 1);
  --ease-out: cubic-bezier(.16, 1, .3, 1);
  --r-card: 18px;

  /* ---- Scale ----
     Aurora owns the token layer. app.css and console.css consume these
     instead of re-deriving their own, so a value changed here propagates
     everywhere rather than being overwritten by load order. */

  /* Spacing: a 4px base with a coarse rhythm for page rhythm. */
  --space-0: 0;   --space-1: 2px;  --space-2: 4px;  --space-3: 6px;
  --space-4: 8px; --space-5: 12px; --space-6: 16px; --space-7: 20px;
  --space-8: 24px; --space-9: 32px; --space-10: 40px; --space-11: 48px;

  /* Type scale. A 1.2 ratio anchored on a 16px body, with named steps so a
     heading, a price and a caption each have one value to use. The CSS had 38
     distinct sizes before this, six of them half-pixels.
     The 11/14/15/17px steps are the small-text range a dense UI needs; without
     them every caption would have to be either 12 or 16px. */
  --text-2xs: 0.6875rem; /* 11px micro-labels and badge text */
  --text-xs: 0.75rem;    /* 12px captions, badges */
  --text-sm: 0.8125rem;  /* 13px secondary text */
  --text-body-s: 0.875rem; /* 14px dense body and nav text */
  --text-base-s: 0.9375rem; /* 15px card titles */
  --text-base: 1rem;     /* 16px body */
  --text-md-s: 1.0625rem; /* 17px sub-headings */
  --text-md: 1.125rem;   /* 18px lead text */
  --text-lg: 1.25rem;    /* 20px card titles */
  --text-xl: 1.5rem;     /* 24px section headings */
  --text-2xl: 1.875rem;  /* 30px page titles */
  --text-3xl: 2.5rem;    /* 40px hero */
  --text-4xl: 3.25rem;   /* 52px display */
  /* Line heights, so a heading and body never fight over the same token. */
  --leading-tight: 1.2;
  --leading-snug: 1.35;
  --leading-normal: 1.6;

  /* Radius: one scale for every surface in the app. */
  --radius-1: 4px;  --radius-2: 8px;  --radius-3: 12px; --radius-4: 16px;
  --radius-5: 18px; --radius-pill: 999px;

  /* Elevation. --lift-1/-2 are the only shadows components should use. */
  --elev-0: none;
  --elev-1: var(--lift-1);
  --elev-2: var(--lift-2);
  --elev-3: var(--shadow-lg);

  /* Control heights, so buttons, inputs and selects agree at every density. */
  --control-h-sm: 32px;
  --control-h-md: 36px;
  --control-h-lg: 44px;

  /* Stacking order. Named so a new overlay never guesses a number. */
  --z-base: 0;
  --z-sticky: 20;
  --z-header: 40;
  --z-scrim: 55;
  --z-drawer: 60;
  --z-popover: 70;
  --z-modal: 80;
  --z-toast: 90;

  /* Motion. --dur-* pairs with --ease-* / --spring above. */
  --dur-fast: 120ms;
  --dur-base: 200ms;
  --dur-slow: 320ms;

  /* Minimum comfortable touch target (WCAG 2.5.5 / iOS 44px). */
  --target-min: 44px;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --accent: #a594ff; --primary: #a594ff; --accent-soft: #2a2450; --link: #b4a8ff;
    --series-1: #a594ff; --series-2: #ff8fb8;
    --good-bg: #10331f; --good-fg: #86d6a0;
    --warn-bg: #3a2c05; --warn-fg: #f2c66b;
    --bad-bg: #46201e;  --bad-fg: #f5b3ae;
    --info-bg: #2a2450; --info-fg: #c8beff;
    --bg: #0e0d16; --bg-1: #12111b; --bg-2: #15141f; --bg-3: #1e1c2b; --surface: #16151f;
    --text-1: #e8eaed;
    --text-2: #b9b7c7;
    --text-3: #a3a1b5;
    --surface-2: #1b1a27;
    --line-1: #2c2a3d;
    --line: #34314a; --line-2: #25233a;
    --canvas: #0e0d16; --console-border: rgba(255, 255, 255, .07);
    --glass: rgba(18, 17, 28, .72);
    --lift-1: 0 1px 2px rgba(0, 0, 0, .5), 0 2px 8px -2px rgba(0, 0, 0, .5);
    --lift-2: 0 2px 4px rgba(0, 0, 0, .4), 0 16px 36px -10px rgba(0, 0, 0, .7), 0 0 0 1px rgba(165, 148, 255, .10);
    --shadow-lg: 0 24px 48px -16px rgba(0, 0, 0, .8);
  }
}
:root[data-theme="dark"] {
  --accent: #a594ff; --primary: #a594ff; --accent-soft: #2a2450; --link: #b4a8ff;
  --series-1: #a594ff; --series-2: #ff8fb8;
  --good-bg: #10331f; --good-fg: #86d6a0;
  --warn-bg: #3a2c05; --warn-fg: #f2c66b;
  --bad-bg: #46201e;  --bad-fg: #f5b3ae;
  --info-bg: #2a2450; --info-fg: #c8beff;
  --bg: #0e0d16; --bg-1: #12111b; --bg-2: #15141f; --bg-3: #1e1c2b; --surface: #16151f;
  --text-1: #e8eaed;
  --text-2: #b9b7c7;
  --text-3: #a3a1b5;
  --surface-2: #1b1a27;
  --line-1: #2c2a3d;
  --line: #34314a; --line-2: #25233a;
  --canvas: #0e0d16; --console-border: rgba(255, 255, 255, .07);
  --glass: rgba(18, 17, 28, .72);
  --lift-1: 0 1px 2px rgba(0, 0, 0, .5), 0 2px 8px -2px rgba(0, 0, 0, .5);
  --lift-2: 0 2px 4px rgba(0, 0, 0, .4), 0 16px 36px -10px rgba(0, 0, 0, .7), 0 0 0 1px rgba(165, 148, 255, .10);
  --shadow-lg: 0 24px 48px -16px rgba(0, 0, 0, .8);
}

/* ---- Canvas: a faint aurora behind every page ---- */
body { -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; }
body::before {
  content: ""; position: fixed; inset: -20vh -10vw auto; height: 90vh; z-index: -1; pointer-events: none;
  background:
    radial-gradient(40% 50% at 12% 20%, rgba(124, 58, 237, .10), transparent 70%),
    radial-gradient(35% 45% at 88% 8%, rgba(219, 39, 119, .08), transparent 70%),
    radial-gradient(45% 50% at 60% 40%, rgba(79, 70, 229, .06), transparent 70%);
  filter: blur(8px);
}
.console { background: var(--canvas) radial-gradient(60% 40% at 100% 0%, rgba(124, 58, 237, .07), transparent 70%) no-repeat; }
::selection { background: rgba(124, 58, 237, .22); }
:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; border-radius: 6px; }
* { scrollbar-width: thin; scrollbar-color: rgba(120, 110, 170, .35) transparent; }

/* Horizontal scrollers are affordances, not reading surfaces: a visible
   scrollbar under a tab strip or a filter rail reads as a page-level scrollbar
   and suggests there is more page below. The element still scrolls by touch,
   trackpad and keyboard. */
.ctabs, .tabs, .tabs-row, .feed-filter-bar, .seg-tabs, .tabbar, .curated-rail,
.thumb-filmstrip, .folder-bar, .master-thumbs, .wa-quick-actions, .wa-smart-replies {
  scrollbar-width: none;
  -ms-overflow-style: none;
}
.ctabs::-webkit-scrollbar, .tabs::-webkit-scrollbar, .tabs-row::-webkit-scrollbar,
.feed-filter-bar::-webkit-scrollbar, .seg-tabs::-webkit-scrollbar,
.tabbar::-webkit-scrollbar, .curated-rail::-webkit-scrollbar,
.thumb-filmstrip::-webkit-scrollbar, .folder-bar::-webkit-scrollbar,
.master-thumbs::-webkit-scrollbar, .wa-quick-actions::-webkit-scrollbar,
.wa-smart-replies::-webkit-scrollbar {
  display: none;
  width: 0;
  height: 0;
}
.wow-grad-text {
  background: var(--a-grad); -webkit-background-clip: text; background-clip: text; color: transparent;
}

/* ---- Progress bar ---- */
.progress { height: 3px; background: var(--a-grad); background-size: 200% 100%; box-shadow: 0 0 12px rgba(124, 58, 237, .6); }
@keyframes slide { to { background-position: -200% 0; } }

/* ---- Buttons ----
   Scoped to the shopper chrome. The console styles its own buttons in
   console.css, which is the authoritative source there; Aurora only supplies
   the shared gradient treatment for primary actions. */
.btn, .x-post-btn {
  transition: transform .25s var(--spring), box-shadow .2s ease, background-color .2s ease, border-color .2s ease, filter .2s ease;
  border-radius: var(--radius-pill); position: relative; overflow: hidden; isolation: isolate;
}
.btn:active:not(:disabled) { transform: scale(.96); }
.btn.primary, .x-post-btn {
  background: var(--a-grad); background-size: 140% 140%; background-position: 0 0;
  border-color: transparent; color: #fff; box-shadow: var(--a-glow);
}
.btn.primary:hover, .x-post-btn:hover {
  background: var(--a-grad); background-size: 140% 140%; background-position: 100% 100%;
  transform: translateY(-1px); box-shadow: 0 12px 28px -8px rgba(124, 58, 237, .6); filter: none;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .btn.primary { color: #fff; }
}
:root[data-theme="dark"] .btn.primary { color: #fff; }
.btn:not(.primary):not(.danger):hover { background: var(--accent-soft); border-color: transparent; transform: translateY(-1px); }
.icon-btn { transition: background-color .2s ease, transform .25s var(--spring); }
.icon-btn:active { transform: scale(.9); }
.wow-ripple {
  position: absolute; border-radius: 50%; pointer-events: none; z-index: -1;
  background: currentColor; opacity: .25; transform: scale(0); animation: wow-ripple .6s var(--ease-out) forwards;
}
@keyframes wow-ripple { to { transform: scale(1); opacity: 0; } }

.badge { background: var(--a-grad); box-shadow: 0 0 0 2px var(--bg), 0 4px 10px -2px rgba(219, 39, 119, .5); }
.badge.wow-bump { animation: wow-bump .6s var(--spring); }
@keyframes wow-bump { 0% { transform: scale(1); } 35% { transform: scale(1.6); } 100% { transform: scale(1); } }

/* ---- Top bar and search ---- */
.topbar, .cbar {
  background: var(--glass); backdrop-filter: saturate(1.6) blur(18px); -webkit-backdrop-filter: saturate(1.6) blur(18px);
  border-bottom: 1px solid var(--line-2); box-shadow: none;
}
.topbar.wow-scrolled, .cbar.wow-scrolled { box-shadow: 0 10px 30px -18px rgba(40, 24, 110, .35); }
.searchbox {
  border-color: var(--line); background: var(--surface); box-shadow: var(--lift-1);
  transition: box-shadow .25s ease, border-color .25s ease, transform .25s var(--ease-out);
}
.searchbox:hover { box-shadow: var(--lift-2); border-color: transparent; }
.searchbox:focus-within {
  border-color: transparent; transform: translateY(-1px);
  box-shadow: 0 0 0 2px var(--surface), 0 0 0 4px rgba(124, 58, 237, .35), 0 18px 40px -16px rgba(79, 70, 229, .45);
}
.searchbox.open { box-shadow: var(--shadow-lg); }
.sb-go { color: var(--accent); }
/* The focus lift (transform) makes the search box its own stacking context,
   so lift the whole box above the tab row that follows it; otherwise the
   tabs and their ink bar paint through the suggestions. */
.searchbox { z-index: 40; }
.suggest {
  background: var(--surface);
  border-radius: 0 0 20px 20px;
  box-shadow: var(--shadow-lg);
  border: 1px solid var(--line);
  border-top: none;
  overflow: hidden;
  max-height: 80vh;
  overflow-y: auto;
}
.suggest-popover { display: flex; flex-direction: column; }
.suggest-list { list-style: none; margin: 0; padding: 6px 0; }
.suggest-list li { margin: 0; padding: 0; }
.suggest-list .sg {
  display: flex; align-items: center; gap: 12px; padding: 10px 18px; color: var(--text);
  text-decoration: none; font-size: 15px; transition: background-color .15s ease, color .15s ease;
}
.suggest-list .sg:hover, .suggest-list .sg.active { background: var(--accent-soft); color: var(--accent); }
.suggest-list .sg-icon { font-size: 18px; color: var(--text-3); flex: none; }
.suggest-list .sg:hover .sg-icon, .suggest-list .sg.active .sg-icon { color: var(--accent); }
.suggest-list .sg-text { flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.suggest-list .sg-arrow { font-size: 16px; color: var(--text-3); opacity: 0; transition: opacity .15s ease, transform .15s ease; }
.suggest-list .sg:hover .sg-arrow, .suggest-list .sg.active .sg-arrow { opacity: .8; transform: translate(2px, -2px); color: var(--accent); }
.suggest-footer {
  display: flex; align-items: center; gap: 8px; padding: 10px 18px 12px; border-top: 1px solid var(--line-2);
  background: var(--bg-2); flex-wrap: wrap;
}
.suggest-footer-head {
  display: inline-flex; align-items: center; gap: 4px; font-size: 12px; font-weight: 600;
  color: var(--text-3); text-transform: uppercase; letter-spacing: .04em;
}
.suggest-chips { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.suggest-chip {
  display: inline-flex; align-items: center; gap: 4px; padding: 4px 10px; border-radius: 999px;
  background: var(--surface); border: 1px solid var(--line-2); font-size: 12.5px; font-weight: 500;
  color: var(--text-2); text-decoration: none; transition: transform .2s var(--spring), background-color .15s ease, color .15s ease;
}
.suggest-chip:hover { transform: translateY(-1px); background: var(--accent-soft); color: var(--accent); border-color: rgba(124, 58, 237, .25); }
.suggest-chip.hot { background: rgba(219, 39, 119, .08); border-color: rgba(219, 39, 119, .25); color: var(--a-3); }

/* Spotlight Discovery Panel when search is empty or focused */
.suggest-spotlight { padding: 16px 18px 18px; display: flex; flex-direction: column; gap: 16px; }
.spotlight-section { display: flex; flex-direction: column; gap: 10px; }
.spotlight-title {
  display: inline-flex; align-items: center; gap: 6px; font-size: 12px; font-weight: 700;
  text-transform: uppercase; letter-spacing: .06em; color: var(--text-3);
}
.spotlight-title .ms { color: var(--a-3); }
.spotlight-chips { display: flex; flex-wrap: wrap; gap: 8px; }
.spotlight-chip {
  display: inline-flex; align-items: center; gap: 6px; padding: 6px 14px; border-radius: 999px;
  background: var(--bg-2); border: 1px solid var(--line-2); font-size: 13px; font-weight: 500;
  color: var(--text); text-decoration: none; transition: transform .25s var(--spring), background-color .2s ease, border-color .2s ease;
}
.spotlight-chip:hover {
  transform: translateY(-2px); background: var(--accent-soft); color: var(--accent);
  border-color: rgba(124, 58, 237, .3); box-shadow: 0 4px 12px -2px rgba(124, 58, 237, .15);
}
.spotlight-chip.hot { background: var(--a-grad-soft); border-color: rgba(219, 39, 119, .3); color: var(--a-3); font-weight: 600; }
.spotlight-channels { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; padding-top: 10px; border-top: 1px solid var(--line-2); }
@media (max-width: 520px) { .spotlight-channels { grid-template-columns: 1fr; } }
.spotlight-channel {
  display: flex; align-items: center; gap: 12px; padding: 10px 12px; border-radius: 14px;
  background: var(--bg-2); border: 1px solid transparent; text-decoration: none;
  transition: transform .2s var(--spring), background-color .2s ease, border-color .2s ease;
}
.spotlight-channel:hover { transform: translateY(-1px); background: var(--surface); border-color: var(--line-2); box-shadow: var(--lift-1); }
.spotlight-channel-icon { width: 36px; height: 36px; border-radius: 10px; display: grid; place-items: center; flex: none; font-size: 20px; }
.spotlight-channel-icon.market-ic { background: rgba(79, 70, 229, .12); color: var(--a-1); }
.spotlight-channel-icon.deal-ic { background: rgba(219, 39, 119, .12); color: var(--a-3); }
.spotlight-channel-icon.short-ic { background: rgba(16, 185, 129, .12); color: #059669; }
.spotlight-channel-icon.wire-ic { background: rgba(245, 158, 11, .14); color: #d97706; }
.spotlight-channel-info { display: flex; flex-direction: column; gap: 2px; overflow: hidden; }
.spotlight-channel-info b { font-size: 13.5px; font-weight: 600; color: var(--text); line-height: 1.25; }
.spotlight-channel-info span { font-size: 11.5px; color: var(--text-3); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

/* Tabs: text tabs with a gradient ink bar that slides between them (wow.js) */
.tabs { position: relative; gap: 2px; padding-bottom: 0; }
.tabs-row { padding-bottom: 0; }
.tab {
  position: relative; padding: 10px 12px 12px; border: 0; border-radius: 10px 10px 0 0; background: none;
  font-weight: 500; transition: color .2s ease, background-color .2s ease;
}
.tab:hover { background: var(--bg-2); border-color: transparent; }
.tab.active { background: none; box-shadow: none; border-color: transparent; color: var(--accent); font-weight: 500; }
.tab.active .ms { color: var(--accent); font-variation-settings: "FILL" 1; }
.tab.active::after {
  content: ""; position: absolute; left: 12px; right: 12px; bottom: 0; height: 3px; border-radius: 3px 3px 0 0; background: var(--a-grad);
}
.tabs.wow-inked .tab.active::after { opacity: 0; }
.wow-tab-ink {
  position: absolute; bottom: 0; left: 0; height: 3px; width: 0; border-radius: 3px 3px 0 0; pointer-events: none;
  background: var(--a-grad); box-shadow: 0 -2px 10px rgba(124, 58, 237, .45);
  transition: transform .45s var(--spring), width .45s var(--spring);
}

/* Location: a compact pill in the top bar instead of the tab row */
.topbar-row > .loc-chip {
  flex: none; margin-left: auto; display: inline-flex; align-items: center; gap: 6px; max-width: 200px; height: 36px; padding: 0 14px 0 10px;
  border-radius: 999px; border: 1px solid var(--line-2); background: var(--surface); color: var(--text-2);
  font-size: 13px; font-weight: 500; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; box-shadow: var(--lift-1);
  transition: transform .25s var(--spring), border-color .2s ease, color .2s ease;
}
.topbar-row > .loc-chip .ms { color: var(--accent); flex: none; }
.topbar-row > .loc-chip:hover { transform: translateY(-1px); border-color: rgba(124, 58, 237, .3); color: var(--text); }
.topbar-row > .loc-chip + .actions { margin-left: 0; }
@media (max-width: 760px) {
  /* ---- Mobile header ----
     The old layout put the logo, a 692px search box, the location chip and
     seven 40px icon buttons on one row: about 400px of fixed chrome before
     the search box even wrapped, so a 375px phone scrolled sideways and
     Alerts, Chat and the account menu were unreachable.
     Here the search takes its own full-width row and the controls shrink to
     the minimum comfortable touch target. */
  .topbar-row {
    display: grid;
    grid-template-columns: auto 1fr;
    grid-template-areas: "brand actions" "search search";
    align-items: center;
    gap: 10px 12px;
    padding: 10px 12px 8px;
  }
  .topbar-row > .logo { grid-area: brand; }
  .topbar-row > .actions { grid-area: actions; justify-self: end; }
  /* The form is the direct child that wraps the search box. */
  .topbar-row > form.searchbox,
  .topbar-row > .searchbox { grid-area: search; min-width: 0; }
  .searchbox { max-width: none; width: 100%; }
  .searchbox-lg { font-size: 16px; }

  /* Controls meet the app's own --target-min. */
  .topbar-row .icon-btn { width: var(--target-min); height: var(--target-min); }
  .topbar-row > .loc-chip { width: var(--target-min); padding: 0; justify-content: center; font-size: 0; gap: 0; }
  .topbar-row > .loc-chip .ms { font-size: 22px; }

  /* Deals is duplicated in the bottom bar, so it does not need a second icon
     in a header that is already tight. */
  .topbar-row .actions > a[href="/deals"] { display: none; }

  .tabs-row {
    flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; -webkit-overflow-scrolling: touch; padding: 0 12px 6px;
  }
  .tabs-row::-webkit-scrollbar { display: none; }
  .tabs { flex-wrap: nowrap; white-space: nowrap; }
  .tab { flex: 0 0 auto; padding: 8px 12px 10px; font-size: 13px; }

  /* Nothing in the page may push the document sideways. */
  .topbar, .topbar-row, .tabs-row { max-width: 100vw; overflow-x: hidden; }
}

/* Very narrow phones: keep the wordmark from crowding the actions. */
@media (max-width: 400px) {
  .topbar-row .logo-sm { font-size: 20px; }
  .topbar-row .actions { gap: 0; }
}

.chip { border-radius: 999px; transition: background-color .2s ease, transform .25s var(--spring), box-shadow .2s ease; }
.chip:hover { transform: translateY(-1px); }
.chip.on { background: var(--a-grad); color: #fff; box-shadow: var(--a-glow); }
.pill { border-radius: 999px; transition: transform .25s var(--spring), background-color .2s ease; }
.pill:hover { transform: translateY(-1px); }

/* ---- Cards: lift and a cursor-following sheen ---- */
.card, .prod, .feed-card, .x-composer-card, .sidebar-box, .kpi, .stat-card, .sum-card, .console .card, .store-tile, .site-review-card {
  border-radius: var(--r-card); border-color: var(--line-2); box-shadow: var(--lift-1);
}
.prod, .feed-card, a.kpi[href], .stat-card, .store-tile, .site-review-card, .wow-hover {
  position: relative; transition: transform .35s var(--ease-out), box-shadow .35s var(--ease-out), border-color .25s ease;
}
.prod:hover, .feed-card:hover, a.kpi[href]:hover, .stat-card:hover, .store-tile:hover, .site-review-card:hover, .wow-hover:hover {
  transform: translateY(-4px); box-shadow: var(--lift-2); border-color: rgba(124, 58, 237, .25);
}
.wow-sheen::after {
  content: ""; position: absolute; inset: 0; border-radius: inherit; pointer-events: none; opacity: 0;
  background: radial-gradient(260px circle at var(--mx, 50%) var(--my, 50%), rgba(124, 58, 237, .10), transparent 60%);
  transition: opacity .3s ease;
}
.wow-sheen:hover::after { opacity: 1; }
.prod-img { border-radius: 14px; background: #fff; }
.prod-img img { transition: transform .6s var(--ease-out); }
.prod:hover .prod-img img { transform: scale(1.06); }
.prod-price { font-weight: 500; letter-spacing: -.2px; }
.btn-cart {
  border-radius: 999px; transition: transform .25s var(--spring), background-color .2s ease, box-shadow .2s ease;
}
.btn-cart:hover { transform: translateY(-1px); background: var(--accent-soft); color: var(--accent); }
.btn-cart.added { background: var(--a-grad); color: #fff; box-shadow: var(--a-glow); animation: wow-pop .5s var(--spring); }
@keyframes wow-pop { 0% { transform: scale(.85); } 100% { transform: scale(1); } }

.like-btn { transition: transform .3s var(--spring), color .2s ease; }
.like-btn:active { transform: scale(.8); }
.like-btn.on, .like-btn[aria-pressed="true"] { color: var(--a-3); }
.like-btn.on .ms, .like-btn[aria-pressed="true"] .ms { font-variation-settings: "FILL" 1; animation: wow-heart .6s var(--spring); }
@keyframes wow-heart { 0% { transform: scale(1); } 30% { transform: scale(1.45) rotate(-8deg); } 100% { transform: scale(1); } }

.x-composer-card:focus-within {
  border-color: transparent; box-shadow: 0 0 0 2px rgba(124, 58, 237, .35), 0 18px 40px -18px rgba(79, 70, 229, .45);
}
.x-avatar-circle, .fcard-avatar { background: var(--a-grad); color: #fff; }
.verified-badge { color: var(--a-2); }
.pulse-dot { background: var(--a-3); box-shadow: 0 0 0 0 rgba(219, 39, 119, .6); animation: wow-pulse 1.8s infinite; }
@keyframes wow-pulse { 70% { box-shadow: 0 0 0 10px rgba(219, 39, 119, 0); } 100% { box-shadow: 0 0 0 0 rgba(219, 39, 119, 0); } }

/* ---- Home composer: labelled tools, quiet button until there's text, live line ---- */
.x-composer-card { padding: 14px 18px 10px; gap: 12px; }
.x-avatar-circle { width: 36px; height: 36px; font-size: 14px; }
.x-composer-form { gap: 6px; }
.x-composer-input { font-size: 16px; padding: 6px 0; }
.x-composer-input::placeholder { transition: color .3s ease; }
.x-composer-input.wow-ph-out::placeholder { color: transparent; }
.x-composer-bar { border-top: 0; padding-top: 2px; flex-wrap: wrap; }
.x-composer-tools { gap: 6px; flex-wrap: wrap; }
.x-composer-tool-btn {
  width: auto; height: 30px; padding: 0 11px 0 9px; display: inline-flex; align-items: center; gap: 5px; border-radius: 999px;
  background: var(--bg-2); color: var(--text-2); font-size: 12.5px; font-weight: 500;
  transition: transform .25s var(--spring), background-color .2s ease, color .2s ease;
}
.x-composer-tool-btn .ms { font-size: 16px; color: var(--accent); }
.x-composer-tool-btn:hover { transform: translateY(-1px); background: var(--accent-soft); color: var(--accent); }
.x-composer-form:has(.x-composer-input:placeholder-shown) .x-post-btn {
  background: var(--accent-soft); color: var(--accent); box-shadow: none;
}

/* ---- Home Feed Stream Header Bar ---- */
.stream-header-bar {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 10px 16px;
  background: var(--surface);
  border: 1px solid var(--line-2);
  border-radius: var(--r-card, 16px);
  margin-bottom: 12px;
  box-shadow: var(--lift-1);
}
.stream-header-status {
  display: flex;
  align-items: center;
  gap: 8px;
  min-width: 0;
  font-size: 13px;
}
.stream-header-title {
  font-weight: 700;
  color: var(--text);
}
.stream-header-sub {
  color: var(--text-3);
  font-size: 12.5px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.stream-header-bar .x-new-updates-chip {
  flex: none;
  background: var(--bg-2);
  border: 1px solid var(--line-2);
  color: var(--accent, #1a73e8);
  border-radius: 20px;
  padding: 4px 10px;
  font-size: 12px;
  font-weight: 600;
  display: inline-flex;
  align-items: center;
  gap: 4px;
  cursor: pointer;
  transition: all .2s ease;
}
.stream-header-bar .x-new-updates-chip:hover {
  background: var(--accent-soft, rgba(26,115,232,0.1));
  border-color: var(--accent, #1a73e8);
}

/* ---- Custom Request Sidebar Card (Trade Wire) ---- */
.custom-request-box {
  background: linear-gradient(135deg, rgba(26, 115, 232, 0.04) 0%, rgba(18, 140, 126, 0.04) 100%), var(--surface);
  border: 1px solid var(--line-2);
  border-radius: var(--r-card, 16px);
  padding: 16px;
  display: flex;
  flex-direction: column;
  gap: 10px;
  box-shadow: var(--lift-1);
}
.cr-head {
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.cr-badge {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  padding: 3px 8px;
  border-radius: 12px;
  background: rgba(26, 115, 232, 0.1);
  color: var(--brand-1, #1a73e8);
}
.cr-title {
  font-size: 15.5px;
  font-weight: 800;
  color: var(--text);
  margin: 0;
  letter-spacing: -0.02em;
  line-height: 1.25;
}
.cr-desc {
  font-size: 12.5px;
  color: var(--text-2);
  line-height: 1.45;
  margin: 0;
}
.cr-form {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin-top: 2px;
}
.cr-input-wrap {
  display: flex;
  align-items: center;
  gap: 8px;
  background: var(--bg-2);
  border: 1px solid var(--line-2);
  border-radius: 12px;
  padding: 8px 12px;
  transition: border-color .2s ease, box-shadow .2s ease, background-color .2s ease;
}
.cr-input-wrap:focus-within {
  background: var(--surface);
  border-color: var(--brand-1, #1a73e8);
  box-shadow: 0 0 0 3px rgba(26, 115, 232, 0.15);
}
.cr-icon {
  color: var(--text-3);
  font-size: 15px;
}
.cr-input {
  border: 0;
  background: transparent;
  width: 100%;
  font-size: 13px;
  outline: none;
  color: var(--text);
  padding: 0;
}
.cr-input::placeholder {
  color: var(--text-3);
  transition: color .3s ease;
}
.cr-actions {
  display: flex;
  gap: 8px;
}
.cr-actions .btn {
  flex: 1;
  justify-content: center;
  font-size: 12px;
  font-weight: 600;
  padding: 7px 10px;
  border-radius: 10px;
}
.cr-perks {
  display: flex;
  flex-wrap: wrap;
  gap: 6px 10px;
  font-size: 11px;
  color: var(--text-3);
  padding-top: 8px;
  border-top: 1px solid var(--line-2);
}
.cr-perks span {
  display: inline-flex;
  align-items: center;
  gap: 3px;
}

@media (max-width: 1040px) {
  .home-portal-layout { gap: 20px; padding: 14px 16px 40px; }
}
@media (max-width: 960px) {
  .home-portal-layout { grid-template-columns: minmax(0, 1fr); gap: 16px; padding: 12px 16px 40px; }
}
@media (max-width: 520px) {
  .x-composer-card { padding: 12px 14px 8px; }
  .x-composer-avatar { display: none; }
  .x-composer-tool-btn { padding: 0 9px 0 8px; }
  .x-post-btn { margin-left: auto; }
}

/* ---- Trending chips: a tidy two-column grid with live counts ---- */
.trending-box .sidebar-chips { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.side-chip {
  min-width: 0; height: 36px; padding: 0 10px; border-radius: 12px; gap: 6px; border: 1px solid transparent;
  transition: transform .25s var(--spring), background-color .2s ease, border-color .2s ease;
}
.side-chip > .ms { color: var(--accent); flex: none; }
.side-chip-name { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.side-chip-count {
  flex: none; padding: 0 7px; border-radius: 999px; background: var(--surface); color: var(--text-3);
  font-size: 11px; font-weight: 500; font-variant-numeric: tabular-nums; line-height: 18px;
}
.side-chip:hover { transform: translateY(-1px); border-color: rgba(124, 58, 237, .2); }
.side-chip.hot { background: var(--a-grad-soft); color: var(--text); border-color: rgba(219, 39, 119, .18); }
.side-chip.hot > .ms { color: var(--a-3); font-variation-settings: "FILL" 1; }
.wow-motion .side-chip.hot > .ms { animation: wow-flicker 2.4s ease-in-out infinite; }
@keyframes wow-flicker { 0%, 100% { transform: scale(1) rotate(0); } 40% { transform: scale(1.15) rotate(-6deg); } 60% { transform: scale(.95) rotate(4deg); } }

/* ---- Flash messages become toasts ---- */
.flash {
  position: fixed; left: 50%; top: 16px; z-index: 120; transform: translateX(-50%);
  max-width: min(560px, calc(100vw - 32px)); padding: 12px 20px; border-radius: 999px;
  background: var(--glass); backdrop-filter: blur(16px); -webkit-backdrop-filter: blur(16px);
  border: 1px solid var(--line-2); box-shadow: var(--shadow-lg);
  animation: wow-toast-in .6s var(--spring) both;
}
.flash.wow-out { animation: wow-toast-out .4s var(--ease-out) forwards; }
@keyframes wow-toast-in { from { opacity: 0; transform: translate(-50%, -24px) scale(.9); } }
@keyframes wow-toast-out { to { opacity: 0; transform: translate(-50%, -24px) scale(.95); } }

/* ---- Shop pages ---- */
.shop-logo { border-radius: 20px; box-shadow: var(--lift-2); }
.shop-logo.ph { background: var(--shop-accent, var(--a-grad)); }
.shop-hero h1, .page-head h1, .dash-welcome-title { font-weight: 500; letter-spacing: -.8px; }
.footer { background: transparent; }

/* Storefront hero: compact, so the trust strip and catalogue show above the fold */
.site-hero-full {
  padding: 28px 20px 24px;
  background:
    radial-gradient(50% 120% at 0% 0%, rgba(79, 70, 229, .10), transparent 65%),
    radial-gradient(40% 120% at 100% 100%, rgba(219, 39, 119, .08), transparent 65%),
    var(--surface);
}
.site-hero-inner { gap: 28px; grid-template-columns: 1.4fr .6fr; }
.site-hero-content { gap: 10px; }
.site-hero-badge { padding: 3px 10px; border-radius: 999px; }
.site-hero-title { font-size: clamp(26px, 3vw, 34px); line-height: 1.15; }
.site-hero-desc {
  font-size: 15px; line-height: 1.5;
  display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden;
}
.site-hero-actions { margin-top: 4px; gap: 8px; }
.site-hero-actions .btn, .site-hero-actions .btn.primary { height: 38px; padding: 0 16px; font-size: 14px; }
.site-hero-showcase {
  max-width: 300px; aspect-ratio: 16 / 10; max-height: 190px;
  border-radius: 18px; border-width: 3px; box-shadow: var(--lift-2);
}
@media (max-width: 860px) { .site-hero-full { padding: 22px 16px 20px; } }

/* ==== Merchant storefronts ====
   Every shop page keeps the merchant's own brand: --sf is the shop accent
   (falling back to Aurora violet) and the gradients and glows derive from it. */
:is(.site-wrapper, .shop-page) {
  --sf: var(--shop-accent, var(--a-2));
  --sf-grad: linear-gradient(135deg, var(--sf), color-mix(in oklab, var(--sf) 72%, #000));
  --sf-soft: color-mix(in srgb, var(--sf) 10%, transparent);
  --sf-line: color-mix(in srgb, var(--sf) 28%, transparent);
  --sf-glow: 0 10px 24px -8px color-mix(in srgb, var(--sf) 60%, transparent);
}
:is(.site-wrapper, .shop-page) :is(.btn.primary, .btn.accent) {
  background: var(--sf-grad); border-color: transparent; color: #fff; box-shadow: var(--sf-glow);
}
:is(.site-wrapper, .shop-page) :is(.btn.primary, .btn.accent):hover {
  background: var(--sf-grad); transform: translateY(-1px); filter: brightness(1.06);
  box-shadow: 0 14px 30px -10px color-mix(in srgb, var(--sf) 70%, transparent);
}
:is(.site-wrapper, .shop-page) .btn:not(.primary):not(.accent):not(.site-wa-btn):hover { background: var(--sf-soft); border-color: var(--sf-line); }

/* Nav and utility bars: glass */
.site-nav-bar {
  background: var(--glass); backdrop-filter: saturate(1.6) blur(18px); -webkit-backdrop-filter: saturate(1.6) blur(18px);
  box-shadow: none;
}
.storefront-network-bar { background: var(--a-grad-soft); }
.site-brand-logo { border-radius: 14px; box-shadow: var(--lift-1); }

/* Category chips and product tiles */
.site-cat-chip { border-radius: 999px; transition: transform .25s var(--spring), background-color .2s ease, border-color .2s ease; }
.site-cat-chip:hover { transform: translateY(-1px); }
.site-cat-chip.active { background: var(--sf-grad, var(--a-grad)); border-color: transparent; color: #fff; box-shadow: var(--sf-glow, var(--a-glow)); }
.store-tile-modern {
  border-radius: var(--r-card); box-shadow: var(--lift-1);
  transition: transform .35s var(--ease-out), box-shadow .35s var(--ease-out), border-color .25s ease;
}
.store-tile-modern:hover { transform: translateY(-5px); box-shadow: var(--lift-2); border-color: var(--sf-line, rgba(124, 58, 237, .25)); }
.store-tile-img-wrap img { transition: transform .7s var(--ease-out); }
.store-tile-modern:hover .store-tile-img-wrap img { transform: scale(1.07); }
.store-tile-stock-badge {
  background: rgba(20, 18, 32, .45); backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px);
  border: 1px solid rgba(255, 255, 255, .18); border-radius: 999px;
}
.store-tile-badge { border-radius: 999px; }

/* Product page */
.gallery-hero-wrap, .gallery-main.ph { border-radius: 24px; box-shadow: var(--lift-2); border-color: var(--line-2); }
.gallery-badge { border-radius: 999px; }
.thumb { border-radius: 12px; }
.thumb.on { border-color: var(--sf); box-shadow: 0 0 0 3px var(--sf-soft); }
.product-info h1 { font-weight: 600; letter-spacing: -.8px; font-size: clamp(24px, 2.6vw, 32px); }
.prod-price-row .prod-price { font-size: 30px; font-weight: 600; letter-spacing: -.8px; color: var(--text); }
.sale-pill { padding: 3px 10px; border-radius: 999px; background: var(--bad-bg, #fce8e6); color: var(--bad-fg, #c5221f); }
.buy-box {
  border-radius: 20px; border-color: var(--sf-line); padding: 18px;
  background: linear-gradient(160deg, var(--sf-soft), transparent 60%), var(--surface); box-shadow: var(--lift-1);
}
.product-trust-strip { border-radius: 16px; background: var(--bg-2); }
.trust-item .ms { color: var(--sf); }
.urgency li { padding: 3px 10px; border-radius: 999px; background: var(--bg-2); }
.wow-motion .urgency .u-fast .ms { animation: wow-flicker 2.4s ease-in-out infinite; }
.bundle-offer { border-radius: 18px; border-color: var(--sf-line); background: var(--sf-soft); }
.bundle-items a { border-radius: 12px; }

/* Bag, checkout, pay and order pages */
.checkout-page h1, .content-head h1, .content-title { font-weight: 600; letter-spacing: -.8px; }
.checkout-side .card { position: relative; overflow: hidden; }
.checkout-side .card::before { content: ""; position: absolute; inset: 0 0 auto; height: 3px; background: var(--sf-grad); }
.sum-img, .sum-img img { border-radius: 12px; }
.sum-img i { background: var(--sf-grad); color: #fff; }
.sum-total { font-size: 19px; font-weight: 600; }
.sum-total dd { color: var(--sf); }
.bag-qty input { border-radius: 12px; }
.pay-card .pay-icon {
  width: 72px; height: 72px; display: grid; place-items: center; border-radius: 22px; font-size: 34px;
  background: var(--sf-soft); color: var(--sf); box-shadow: 0 0 0 8px color-mix(in srgb, var(--sf) 5%, transparent);
}
.order-hero {
  padding: 20px 24px; border-radius: 22px; border: 1px solid var(--line-2); box-shadow: var(--lift-1);
  background: linear-gradient(135deg, var(--sf-soft), transparent 70%), var(--surface);
}
.order-hero h1 { font-weight: 600; letter-spacing: -.6px; }

/* Forms across shop pages */
:is(.site-wrapper, .shop-page) .field :is(input, textarea, select) { border-radius: 12px; transition: border-color .2s ease, box-shadow .2s ease; }
:is(.site-wrapper, .shop-page) .field :is(input, textarea, select):focus { outline: none; border-color: var(--sf); box-shadow: 0 0 0 4px var(--sf-soft); }
:is(.site-wrapper, .shop-page) .choice { border-radius: 14px; transition: border-color .2s ease, background-color .2s ease; }
:is(.site-wrapper, .shop-page) .choice:has(input:checked) { border-color: var(--sf); background: var(--sf-soft); }
:is(.site-wrapper, .shop-page) .choice input { accent-color: var(--sf); }

/* Booking: time slots as a pill picker (they had no styling before) */
.slot-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(96px, 1fr)); gap: 8px; }
.slot-opt { position: relative; cursor: pointer; }
.slot-opt input { position: absolute; inset: 0; opacity: 0; margin: 0; cursor: pointer; }
.slot-opt span {
  display: flex; flex-direction: column; align-items: center; justify-content: center; min-height: 44px; padding: 6px 8px;
  border: 1px solid var(--line); border-radius: 14px; background: var(--surface); font-weight: 500; font-variant-numeric: tabular-nums;
  transition: transform .25s var(--spring), border-color .2s ease, background-color .2s ease, color .2s ease;
}
.slot-opt span i { font-style: normal; font-size: 11px; font-weight: 400; }
.slot-opt:hover span { transform: translateY(-1px); border-color: var(--sf-line); }
.slot-opt input:checked + span { background: var(--sf-grad); color: #fff; border-color: transparent; box-shadow: var(--sf-glow); }
.slot-opt input:checked + span i { color: rgba(255, 255, 255, .85); }
.slot-opt input:focus-visible + span { outline: 2px solid var(--sf); outline-offset: 2px; }

/* Blog and content pages */
.shop-content .content-article { border-radius: 22px; }
.content-hero { border-radius: 20px; box-shadow: var(--lift-2); }
.post-card { border-radius: var(--r-card); box-shadow: var(--lift-1); transition: transform .35s var(--ease-out), box-shadow .35s var(--ease-out); }
.post-card:hover { transform: translateY(-4px); box-shadow: var(--lift-2); }
.post-thumb img { transition: transform .7s var(--ease-out); }
.post-card:hover .post-thumb img { transform: scale(1.06); }
.post-title { font-weight: 600; letter-spacing: -.2px; }
.prose blockquote, .product-desc.prose blockquote { border-left-color: var(--sf); background: var(--sf-soft); }
.shop-page .prose a { color: var(--sf); }

/* ---- Empty states ---- */
.empty-state .ms {
  font-size: 48px; background: var(--a-grad); -webkit-background-clip: text; background-clip: text; color: transparent;
  animation: wow-float 4s ease-in-out infinite;
}
@keyframes wow-float { 50% { transform: translateY(-6px); } }

/* ==== Merchant Center ==== */
.cside { background: var(--glass); backdrop-filter: blur(18px); -webkit-backdrop-filter: blur(18px); }
.cside-link, .cside-sublink { transition: background-color .2s ease, color .2s ease, transform .25s var(--spring); }
.cside-link:hover, .cside-sublink:hover { transform: translateX(2px); }
.cside-link[aria-current="page"], .cside-link[aria-current="true"] {
  background: var(--a-grad-soft); color: var(--accent); box-shadow: inset 0 0 0 1px rgba(124, 58, 237, .18);
}
.cside-link[aria-current="page"] .ms, .cside-link[aria-current="true"] .ms { color: var(--accent); }
.cside-sublink[aria-current="page"] { color: var(--accent); font-weight: 500; }
.cside-brand-tag, .eyebrow-tag { background: var(--a-grad); -webkit-background-clip: text; background-clip: text; color: transparent; }

.dash-welcome-title {
  font-size: clamp(28px, 3.4vw, 40px); line-height: 1.1;
  background: linear-gradient(120deg, var(--text) 30%, var(--a-2) 75%, var(--a-3));
  -webkit-background-clip: text; background-clip: text; color: transparent;
}
.page-head h1 { letter-spacing: -.6px; }

.kpi { padding: 18px 20px; overflow: hidden; position: relative; }
.kpi::before {
  content: ""; position: absolute; inset: 0 0 auto; height: 3px; background: var(--a-grad); opacity: .0; transition: opacity .3s ease;
}
.kpi:hover::before { opacity: 1; }
.kpi-value { font-size: 32px; font-weight: 500; letter-spacing: -1px; }
.kpi-icon {
  display: grid; place-items: center; width: 34px; height: 34px; border-radius: 11px;
  background: var(--a-grad-soft); color: var(--accent); font-variation-settings: "FILL" 1;
}
.delta { border-radius: 999px; }
.delta.up { animation: wow-pop .6s var(--spring) both; }

.console .card { border-color: var(--console-border); }
.console .card h2 { font-weight: 500; letter-spacing: -.2px; }
.banner { border-radius: 14px; border: 1px solid rgba(0, 0, 0, .03); }
.banner.info { background: var(--a-grad-soft); color: var(--info-fg); }

.console .table tbody tr, .console table tbody tr { transition: background-color .15s ease; }
.console .table tbody tr:hover, .console table tbody tr:hover { background: var(--a-grad-soft); }
.pill-status.live .dot, .dot.pulse { box-shadow: 0 0 0 0 currentColor; animation: wow-pulse-c 1.8s infinite; }
@keyframes wow-pulse-c { 70% { box-shadow: 0 0 0 7px transparent; } }

/* Dashboard hero: an aurora panel with a drifting glow. The glow is an
   inset gradient layer rather than a blurred orb, so the panel needn't clip
   its overflow and the date filter's popover can open over the cards below. */
.dash-modern-head {
  position: relative; z-index: 5; isolation: isolate; align-items: center;
  padding: 26px 28px; border-radius: 24px; border: 1px solid var(--console-border);
  background:
    radial-gradient(60% 120% at 0% 0%, rgba(79, 70, 229, .14), transparent 60%),
    radial-gradient(50% 120% at 100% 100%, rgba(219, 39, 119, .12), transparent 60%),
    var(--surface);
  box-shadow: var(--lift-1);
}
.dash-modern-head::after {
  content: ""; position: absolute; z-index: -1; inset: 0; border-radius: inherit; pointer-events: none;
  background: radial-gradient(34% 90% at var(--orb-x, 88%) 10%, rgba(124, 58, 237, .20), rgba(219, 39, 119, .10) 45%, transparent 75%);
}
.wow-motion .dash-modern-head::after { animation: wow-drift 14s ease-in-out infinite alternate; }
@property --orb-x { syntax: "<percentage>"; inherits: false; initial-value: 88%; }
@keyframes wow-drift { to { --orb-x: 62%; } }
@media (max-width: 600px) { .dash-modern-head { padding: 20px 18px; border-radius: 20px; } }
.wow-greet { display: block; font-size: 13px; color: var(--text-3); margin: 10px 0 2px; font-weight: 500; }

/* KPI icon hues cycle so the row reads at a glance */
.kpi-grid > :nth-child(5n+1) .kpi-icon { background: rgba(79, 70, 229, .12); color: #4f46e5; }
.kpi-grid > :nth-child(5n+2) .kpi-icon { background: rgba(219, 39, 119, .12); color: #db2777; }
.kpi-grid > :nth-child(5n+3) .kpi-icon { background: rgba(16, 185, 129, .14); color: #059669; }
.kpi-grid > :nth-child(5n+4) .kpi-icon { background: rgba(245, 158, 11, .16); color: #d97706; }
.kpi-grid > :nth-child(5n+5) .kpi-icon { background: rgba(14, 165, 233, .14); color: #0284c7; }

/* The first open setup step is the nudge */
.setup-step.wow-next { background: var(--a-grad-soft); box-shadow: inset 0 0 0 1px rgba(124, 58, 237, .18); }
.setup-step.wow-next .step-icon { color: var(--a-2); }
.setup-step.wow-next .btn { background: var(--a-grad); color: #fff; border-color: transparent; box-shadow: var(--a-glow); }
.wow-motion .setup-step.wow-next .btn { animation: wow-nudge 2.8s ease-in-out 1.2s infinite; }
@keyframes wow-nudge { 0%, 86%, 100% { transform: none; } 90% { transform: translateY(-2px) scale(1.04); } 95% { transform: translateY(0) scale(.98); } }
.wow-next-tag {
  display: inline-block; margin-left: 8px; padding: 1px 8px; border-radius: 999px; font-size: 11px; font-weight: 500;
  background: var(--a-grad); color: #fff; vertical-align: 1px;
}

/* Setup checklist: a progress ring, springy ticks and a celebration at 100% */
.setup { position: relative; overflow: hidden; }
.setup::before {
  content: ""; position: absolute; inset: 0 0 auto; height: 4px; background: var(--a-grad);
}
.setup-head { align-items: center; }
.wow-ring { --p: 0; width: 64px; height: 64px; flex: none; position: relative; display: grid; place-items: center; }
.wow-ring svg { position: absolute; inset: 0; transform: rotate(-90deg); }
.wow-ring circle { fill: none; stroke-width: 6; stroke-linecap: round; }
.wow-ring .track { stroke: var(--bg-3); }
.wow-ring .bar { stroke: url(#wow-ring-grad); stroke-dasharray: 169.6; stroke-dashoffset: calc(169.6 - 169.6 * var(--p) / 100); transition: stroke-dashoffset 1.2s var(--ease-out); }
.wow-ring b { font-size: 14px; font-weight: 500; font-variant-numeric: tabular-nums; }
.setup .meter.wow-has-ring { display: none; }
.meter { border-radius: 999px; }
.meter span { background: var(--a-grad); border-radius: 999px; }
.setup-step { transition: background-color .2s ease; border-radius: 12px; padding-left: 8px; padding-right: 8px; }
.setup-step:hover { background: var(--bg-2); }
.setup-step.done .step-icon { color: var(--a-2); animation: wow-pop .6s var(--spring) both; }

.date-preset-chip { border-radius: 999px; transition: transform .25s var(--spring), background-color .2s ease; }
.date-preset-chip:hover { transform: translateY(-1px); }
.date-preset-chip.active { background: var(--a-grad); color: #fff; border-color: transparent; }
.seg-tabs a[aria-current], .tab-link[aria-current] { color: var(--accent); }

/* ---- Confetti and the fly-to-cart dot (wow.js) ---- */
.wow-confetti { position: fixed; inset: 0; pointer-events: none; z-index: 200; }
.wow-fly {
  position: fixed; z-index: 210; width: 14px; height: 14px; border-radius: 50%; pointer-events: none;
  background: var(--a-grad); box-shadow: 0 0 16px rgba(124, 58, 237, .8);
}

/* ---- Reveal on scroll (only with .wow-motion) ---- */
.wow-motion .wow-reveal { opacity: 0; transform: translateY(14px); }
.wow-motion .wow-reveal.wow-in {
  opacity: 1; transform: none;
  transition: opacity .6s var(--ease-out) var(--wd, 0ms), transform .7s var(--ease-out) var(--wd, 0ms);
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .001ms !important; animation-iteration-count: 1 !important; transition-duration: .001ms !important; }
  .prod:hover, .feed-card:hover, a.kpi[href]:hover, .stat-card:hover, .wow-hover:hover { transform: none; }
}
@media print {
  body::before, .wow-confetti, .wow-fly { display: none; }
}

/* ---- Merchant Center: calm entrances ----
   The console is a work tool opened many times a day, so content appears
   immediately: no reveal-on-scroll, no pops. Hover feedback stays. */
.wow-motion .console .wow-reveal { opacity: 1; transform: none; transition: none; }
.console :is(.delta.up, .setup-step.done .step-icon, .kpi-value, .stat-value, .sum-value, [data-wow-count]) { animation: none !important; transition: none !important; }
.wow-motion .console .setup-step.wow-next .btn { animation: none; }

/* "Create it directly" on Add product: a clear blue call to action */
.create-direct-row { display: flex; align-items: center; flex-wrap: wrap; gap: 6px 10px; margin: 20px 0 0; color: var(--text-2); font-size: 14px; }
.create-direct {
  display: inline-flex; align-items: center; gap: 6px; height: 36px; padding: 0 14px 0 10px; border-radius: 999px;
  background: #e8f0fe; color: #1a73e8; font-weight: 500; border: 1px solid rgba(26, 115, 232, .25);
  transition: background-color .2s ease, transform .25s var(--spring), box-shadow .2s ease;
}
.create-direct:hover { background: #d2e3fc; transform: translateY(-1px); box-shadow: 0 6px 16px -8px rgba(26, 115, 232, .6); }
.create-direct .ms:last-child { transition: transform .25s var(--spring); }
.create-direct:hover .ms:last-child { transform: translateX(3px); }
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .create-direct { background: rgba(138, 180, 248, .14); color: #8ab4f8; border-color: rgba(138, 180, 248, .3); }
}
:root[data-theme="dark"] .create-direct { background: rgba(138, 180, 248, .14); color: #8ab4f8; border-color: rgba(138, 180, 248, .3); }

/* ---- Auto-save states on the save bar (autosave.js) ---- */
.savebar .savebar-note { display: inline-flex; align-items: center; gap: 6px; }
.savebar.autosave-on .savebar-note::before {
  content: ""; width: 8px; height: 8px; border-radius: 50%; flex: none; background: var(--good-fg, #188038);
}
.savebar[data-save-state="dirty"] .savebar-note::before { background: var(--warn-fg, #b06000); }
.savebar[data-save-state="saving"] .savebar-note::before {
  background: none; width: 12px; height: 12px; border: 2px solid var(--line); border-top-color: var(--accent); animation: wow-spin .7s linear infinite;
}
.savebar[data-save-state="saved"] .savebar-note { color: var(--good-fg, #188038); }
.savebar[data-save-state="error"] .savebar-note { color: var(--bad-fg, #c5221f); }
.savebar[data-save-state="error"] .savebar-note::before { background: var(--bad-fg, #c5221f); }
@keyframes wow-spin { to { transform: rotate(360deg); } }
.draft-offer {
  display: flex; align-items: center; flex-wrap: wrap; gap: 8px 12px; margin: 12px 0; padding: 10px 14px;
  border-radius: 14px; background: var(--warn-bg, #fef7e0); color: var(--warn-fg, #b06000); font-size: 13.5px;
}
.draft-offer span { flex: 1; min-width: 180px; }

/* ---- Date filter ---- */
.date-field > span { font-size: 11px; font-weight: 600; text-transform: uppercase; color: var(--text-3); letter-spacing: .05em; }
.date-filter-module.on .date-picker-btn { border-color: rgba(124, 58, 237, .35); background: var(--accent-soft); color: var(--accent); }
.date-preset-chip[aria-current] { font-weight: 500; }
/* Cards clip their tables' corners; let an open date filter spill out. */
.card:has(.date-filter-module[open]) { overflow: visible; }
.card:has(.date-filter-module[open]) .date-popover { z-index: 60; }

/* ---- Trade Wire inside markets ---- */
.wire-mini { list-style: none; margin: 8px 0 12px; padding: 0; display: flex; flex-direction: column; gap: 10px; }
.wire-mini li { display: flex; flex-direction: column; gap: 2px; padding-bottom: 10px; border-bottom: 1px solid var(--line-2); }
.wire-mini li:last-child { border-bottom: 0; padding-bottom: 0; }
.wire-mini a { color: var(--text); font-weight: 500; line-height: 1.35; }
.wire-mini a:hover { color: var(--accent); }
.request-market { display: inline-flex; align-items: center; gap: 3px; padding: 1px 8px; border-radius: 999px; background: var(--accent-soft); color: var(--accent); font-weight: 500; }
.wire-join { display: flex; flex-direction: column; align-items: flex-start; gap: 10px; }

/* ---- Mobile App Bottom Navigation Bar ---- */
.bottom-nav { display: none; }
@media (max-width: 760px) {
  body:not(.console):not(.print-body) {
    padding-bottom: calc(62px + env(safe-area-inset-bottom, 10px));
  }
  .bottom-nav {
    display: block; position: fixed; bottom: 0; left: 0; right: 0; z-index: 90;
    background: var(--glass); backdrop-filter: saturate(1.8) blur(24px); -webkit-backdrop-filter: saturate(1.8) blur(24px);
    border-top: 1px solid var(--line-2); box-shadow: 0 -8px 24px -6px rgba(24, 20, 60, .08);
    padding: 6px 8px calc(6px + env(safe-area-inset-bottom, 8px));
  }
  .bottom-nav-inner { display: flex; align-items: center; justify-content: space-around; max-width: 500px; margin: 0 auto; }
  .bnav-item {
    display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 3px;
    padding: 5px 8px; border-radius: 12px; color: var(--text-2); text-decoration: none; font-size: 11px;
    font-weight: 500; position: relative; transition: color .2s ease, transform .2s var(--spring);
    flex: 1; text-align: center; min-height: 48px; touch-action: manipulation;
  }
  .bnav-item:active { transform: scale(.92); }
  .bnav-icon { font-size: 22px; transition: transform .25s var(--spring), color .2s ease; }
  .bnav-item.active { color: var(--accent); font-weight: 600; }
  .bnav-item.active .bnav-icon { font-variation-settings: "FILL" 1; transform: translateY(-2px); color: var(--accent); }
  .bnav-item.active::after {
    content: ""; position: absolute; bottom: 2px; width: 16px; height: 3px; border-radius: 999px; background: var(--a-grad);
  }
  .bnav-icon-wrap { position: relative; display: inline-flex; align-items: center; justify-content: center; }
  .bnav-dot {
    position: absolute; top: -2px; right: -3px; width: 7px; height: 7px; border-radius: 50%;
    background: var(--a-3); box-shadow: 0 0 6px var(--a-3); animation: wow-pulse 2s infinite;
  }
  .bnav-badge {
    position: absolute; top: -4px; right: -8px; min-width: 16px; height: 16px; padding: 0 4px; border-radius: 999px;
    background: var(--a-grad); color: #fff; font-size: 10px; font-weight: 700; line-height: 16px; text-align: center;
    box-shadow: 0 2px 6px rgba(219, 39, 119, .45);
  }
  .bnav-badge.hidden { display: none; }
  /* The nav carries up to seven items for a signed-in shopper, so the labels
     have to stay readable rather than each taking an equal fifth. */
  .bottom-nav-inner { padding: 0 4px; gap: 0; }
  .bnav-label { font-size: 10px; letter-spacing: -.01em; }
  .bnav-icon { font-size: 20px; }
  .bnav-badge-slot { position: absolute; top: -2px; right: -4px; }
  .bnav-badge-slot .badge {
    position: static; display: inline-block; min-width: 15px; height: 15px; padding: 0 4px;
    border-radius: var(--radius-pill); font-size: 9px; line-height: 15px; box-shadow: none;
  }
  .bnav-badge-slot:empty { display: none; }
}

/* Two product cards fit a 375px phone, but only if the card's contents are
   allowed to shrink: the price row is a flex line of price, was-price and
   sale badge, which overflowed a 165px column. Wrapping the line and letting
   the title clamp keeps two useful cards on screen instead of one. */
@media (max-width: 760px) {
  .prod-grid { gap: 10px; }
  .prod { padding: 10px; gap: 2px; }
  .prod-title { font-size: var(--text-sm); }
  .prod-price { flex-wrap: wrap; row-gap: 2px; }
  .prod-price b { font-size: var(--text-base); }
  .prod .pill { font-size: 10px; padding: 1px 6px; }
  /* A card action must stay on one line: "Add to cart" wrapping to two lines
     made the two cards in a row different heights and read as broken. */
  .prod .btn, .prod-actions .btn { width: 100%; white-space: nowrap; justify-content: center; padding: 0 8px; }

  /* Footer: a single flex line wraps into a ragged block at this width. Give
     the links an even grid so the rows line up under each other. */
  .footer-row { padding: var(--space-6) var(--space-6) calc(62px + env(safe-area-inset-bottom)); }
  .footer nav { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px 16px; width: 100%; }
  .footer nav a { white-space: nowrap; }
  .footer-prefs nav { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  /* The brand and the language row each take a full line. */
  .footer-row > span:first-child { width: 100%; }
  .footer-prefs { flex-direction: column; align-items: flex-start; gap: 10px; }
}

/* ---- Type: one ladder for every heading ----
   Six different h1 treatments existed across the shopper pages, with weights
   flipped between 400, 500 and 600 by three separate rules. These make the
   ladder explicit and let the stylesheets share it. */
h1, .page-head h1, .product-info h1, .shop-hero h1 { font-size: var(--text-2xl); line-height: var(--leading-tight); font-weight: 600; letter-spacing: -.02em; }
h2, .site-section-head h2, .shop-section h2 { font-size: var(--text-xl); line-height: var(--leading-snug); font-weight: 600; letter-spacing: -.015em; }
h3, .site-section-sub + h3, .card h3 { font-size: var(--text-lg); line-height: var(--leading-snug); font-weight: 600; }
h4 { font-size: var(--text-md); line-height: var(--leading-snug); font-weight: 600; }
.lead { font-size: var(--text-md); line-height: var(--leading-normal); color: var(--text-2); }
@media (max-width: 760px) {
  h1, .page-head h1, .product-info h1 { font-size: var(--text-xl); }
  h2, .site-section-head h2, .shop-section h2 { font-size: var(--text-lg); }
}

@media (prefers-reduced-motion: reduce) {
  /* Mandatory scroll-snap still jumps the viewport even with transitions
     disabled, so the rails fall back to free scrolling. */
  .curated-rail, .tabs-row, .feed-filter-bar, .seg-tabs, .tabbar { scroll-behavior: auto !important; scroll-snap-type: none !important; }
  html { scroll-behavior: auto !important; }
}
/* ---- Home Feed Filter Bar ---- */
.feed-filter-bar {
  display: flex; align-items: center; gap: 8px; margin: 14px 0 16px; padding: 4px 2px;
  overflow-x: auto; scrollbar-width: none; -webkit-overflow-scrolling: touch;
  max-width: 100%; min-width: 0;
}
.feed-filter-bar::-webkit-scrollbar { display: none; }
.feed-filter-pill {
  display: inline-flex; align-items: center; gap: 6px; padding: 8px 16px; border-radius: 999px;
  background: var(--surface); border: 1px solid var(--line-2); color: var(--text-2); font-size: 13px;
  font-weight: 500; cursor: pointer; white-space: nowrap; flex: none; box-shadow: var(--lift-1);
  transition: transform .25s var(--spring), background-color .2s ease, color .2s ease, border-color .2s ease, box-shadow .2s ease;
}
.feed-filter-pill:hover { transform: translateY(-1px); color: var(--text); border-color: rgba(124, 58, 237, .3); }
.feed-filter-pill.active {
  background: var(--a-grad); border-color: transparent; color: #fff; font-weight: 600;
  box-shadow: var(--a-glow); transform: translateY(-1px);
}
.feed-filter-pill.active .ms { color: #fff; }
.pill-badge {
  display: inline-block; font-size: 10px; font-weight: 700; padding: 1px 6px; border-radius: 999px;
  background: var(--bg-3); color: var(--text);
}
.pill-badge.hot { background: var(--a-3); color: #fff; }
.feed-filter-pill.active .pill-badge.hot { background: rgba(255, 255, 255, .28); color: #fff; }

/* ---- Skeleton Shimmer Loading States ---- */
@keyframes wow-shimmer {
  0% { background-position: -200% 0; }
  100% { background-position: 200% 0; }
}
.skeleton, [data-skeleton] {
  background: linear-gradient(
    90deg,
    var(--bg-2) 0%,
    color-mix(in srgb, var(--accent) 7%, var(--bg-2)) 35%,
    var(--bg-3) 50%,
    color-mix(in srgb, var(--accent) 7%, var(--bg-2)) 65%,
    var(--bg-2) 100%
  );
  background-size: 250% 100%; animation: wow-shimmer 1.8s ease-in-out infinite; border-radius: 8px; pointer-events: none;
}
.skeleton-card {
  border-radius: var(--r-card); border: 1px solid var(--line-2); background: var(--surface);
  padding: 16px; display: flex; flex-direction: column; gap: 12px; box-shadow: var(--lift-1);
}
.skeleton-img { width: 100%; aspect-ratio: 1; border-radius: 12px; }
.skeleton-line { height: 14px; border-radius: 999px; }
.skeleton-line.w-80 { width: 80%; }
.skeleton-line.w-60 { width: 60%; }
.skeleton-line.w-40 { width: 40%; }
.skeleton-line.w-20 { width: 20%; }
.skeleton-line.lg { height: 22px; }
.skeleton-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 14px; }
.htmx-request.prod-grid, .htmx-request.web-list, .htmx-request.rolling-feed-stream {
  opacity: .6; transition: opacity .2s ease; pointer-events: none;
}

/* ---- Floating Heart Burst Particles ---- */
.wow-heart-particle {
  position: fixed; z-index: 250; pointer-events: none; font-size: 16px;
  transform: translate(-50%, -50%) scale(.6); animation: wow-heart-float .65s var(--ease-out) forwards;
}
@keyframes wow-heart-float {
  0% { transform: translate(-50%, -50%) scale(.5); opacity: 1; }
  50% { transform: translate(calc(-50% + var(--dx, 0px)), calc(-50% + var(--dy, -25px))) scale(1.3); opacity: .95; }
  100% { transform: translate(calc(-50% + var(--dx, 0px) * 1.3), calc(-50% + var(--dy, -40px))) scale(.8); opacity: 0; }
}

/* ---- Floating Toast Notification Pill ---- */
.wow-toast {
  position: fixed; bottom: 28px; left: 50%; transform: translateX(-50%) translateY(20px) scale(.92);
  z-index: 300; padding: 10px 20px; border-radius: 999px; background: rgba(18, 17, 28, .92);
  backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); color: #fff; font-size: 14px;
  font-weight: 500; box-shadow: 0 10px 30px -4px rgba(0, 0, 0, .45); border: 1px solid rgba(255, 255, 255, .15);
  opacity: 0; pointer-events: none; transition: transform .3s var(--spring), opacity .25s ease;
}
@media (max-width: 760px) {
  .wow-toast { bottom: calc(76px + env(safe-area-inset-bottom, 8px)); }
}
.wow-toast.wow-toast-in { opacity: 1; transform: translateX(-50%) translateY(0) scale(1); }
.wow-toast.wow-toast-out { opacity: 0; transform: translateX(-50%) translateY(12px) scale(.94); }

/* ---- Storefront Contrast Guard ---- */
:is(.site-wrapper, .shop-page) :is(.btn.primary, .btn.accent) {
  text-shadow: 0 1px 2px rgba(0, 0, 0, .4);
}

/* ---- Empty State Discovery Cards ---- */
.cart-empty-card, .search-empty-card {
  text-align: left; padding: 48px 24px; display: flex; flex-direction: column;
  align-items: flex-start; gap: 14px; max-width: 620px; margin: 32px auto 32px 0; border-radius: 24px;
}
.cart-empty-icon, .search-empty-icon {
  width: 72px; height: 72px; border-radius: 20px; background: var(--a-grad-soft);
  color: var(--accent); display: grid; place-items: center; font-size: 36px; margin-bottom: 4px;
}
.cart-empty-card h2, .search-empty-card h2 { margin: 0; font-size: 22px; font-weight: 600; }
.cart-empty-actions, .search-empty-cta {
  display: flex; align-items: center; justify-content: flex-start; gap: 10px; flex-wrap: wrap; margin-top: 10px;
}
.cart-trust-note {
  display: inline-flex; align-items: center; gap: 6px; font-size: 13px; color: var(--text-2); margin-bottom: 12px;
}
.cart-trust-note .ms { color: #10b981; }

/* ---- Curated Recommendations & Merchandising Shelves ---- */
.curated-shelf { margin-top: 48px; padding-top: 32px; border-top: 1px solid var(--line-2); }
.curated-shelf-head {
  display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 12px; margin-bottom: 20px;
}
.curated-shelf-title-wrap { display: flex; align-items: center; gap: 12px; }
.curated-shelf-icon {
  font-size: 28px; color: var(--a-2); background: var(--a-grad-soft); width: 44px; height: 44px;
  border-radius: 12px; display: grid; place-items: center; flex: none;
}
.curated-shelf-head h2, .curated-shelf-head h3 { margin: 0; font-size: 20px; font-weight: 700; color: var(--text); }
.curated-rail {
  display: flex; gap: 16px; overflow-x: auto; padding: 4px 2px 16px; scrollbar-width: thin;
  -webkit-overflow-scrolling: touch; scroll-snap-type: x mandatory;
}
.curated-rail .curated-card { flex: 0 0 240px; scroll-snap-align: start; }
.curated-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 18px; }
.curated-card {
  border-radius: var(--r-card); background: var(--surface); border: 1px solid var(--line-2);
  box-shadow: var(--lift-1); display: flex; flex-direction: column; overflow: hidden; position: relative;
  transition: transform .3s var(--spring), box-shadow .3s var(--ease-out), border-color .2s ease;
}
.curated-card:hover {
  transform: translateY(-4px); box-shadow: var(--lift-2); border-color: rgba(124, 58, 237, .28);
}
.curated-media { position: relative; width: 100%; aspect-ratio: 1; background: var(--bg-2); overflow: hidden; }
.curated-img-link { display: block; width: 100%; height: 100%; }
.curated-media img { width: 100%; height: 100%; object-fit: cover; transition: transform .5s var(--ease-out); }
.curated-card:hover .curated-media img { transform: scale(1.06); }
.curated-ph { width: 100%; height: 100%; display: grid; place-items: center; color: var(--text-3); font-size: 32px; }
.curated-badge {
  position: absolute; top: 10px; left: 10px; padding: 3px 9px; border-radius: 999px;
  background: rgba(18, 17, 28, .82); backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px);
  color: #fff; font-size: 11px; font-weight: 600; letter-spacing: .02em;
  box-shadow: 0 4px 10px rgba(0, 0, 0, .25); border: 1px solid rgba(255, 255, 255, .18);
}
.curated-body { padding: 12px 14px 10px; display: flex; flex-direction: column; flex: 1; gap: 4px; }
.curated-meta-row { display: flex; align-items: center; gap: 4px; font-size: 12px; color: var(--text-3); }
.curated-shop { font-weight: 500; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.curated-title {
  margin: 2px 0 4px; font-size: 14.5px; font-weight: 600; line-height: 1.3;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}
.curated-title a { color: var(--text); text-decoration: none; }
.curated-title a:hover { color: var(--accent); }
.curated-pricing { display: flex; align-items: baseline; gap: 8px; margin-top: auto; padding-top: 4px; }
.curated-price { font-weight: 700; font-size: 15px; color: var(--text); }
.curated-was { font-size: 13px; }
.curated-reason {
  display: inline-flex; align-items: center; gap: 4px; font-size: 11.5px; color: var(--a-2);
  background: var(--accent-soft); padding: 2px 8px; border-radius: 999px; margin-top: 6px;
  align-self: flex-start; font-weight: 500;
}
.curated-actions { padding: 8px 14px 14px; }
.curated-actions .btn { width: 100%; }
.curated-filter-tags { display: flex; align-items: center; gap: 6px; }

/* ---- Shop Catalogue Photo Hover Flip & List View ---- */
.site-catalogue-controls {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 12px;
}
.site-view-switch {
  display: inline-flex;
  align-items: center;
  background: var(--bg-2);
  border: 1px solid var(--line);
  border-radius: 999px;
  padding: 2px;
  gap: 2px;
}
.site-view-btn {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 5px 12px;
  border-radius: 999px;
  border: none;
  background: transparent;
  color: var(--text-2);
  font-size: 12px;
  font-weight: 600;
  cursor: pointer;
  transition: all .2s ease;
}
.site-view-btn:hover {
  color: var(--text);
  background: rgba(0, 0, 0, .04);
}
.site-view-btn.on {
  background: var(--surface);
  color: var(--text);
  box-shadow: 0 1px 4px rgba(0, 0, 0, .08);
}

.store-tile-img-wrap {
  position: relative;
  overflow: hidden;
  display: block;
}
.store-tile-img-wrap .tile-primary-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform .5s var(--ease-out), opacity .35s ease;
  display: block;
}
.store-tile-img-wrap .tile-hover-img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: 0;
  transition: transform .5s var(--ease-out), opacity .35s ease;
  pointer-events: none;
  display: block;
}
.store-tile-modern:hover .store-tile-img-wrap.has-hover-photo .tile-primary-img {
  opacity: 0;
  transform: scale(1.04);
}
.store-tile-modern:hover .store-tile-img-wrap.has-hover-photo .tile-hover-img {
  opacity: 1;
  transform: scale(1.06);
}
.store-tile-photos-badge {
  position: absolute;
  bottom: 8px;
  right: 8px;
  background: rgba(18, 17, 28, 0.78);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  color: #fff;
  font-size: 11px;
  font-weight: 600;
  padding: 3px 8px;
  border-radius: 999px;
  display: inline-flex;
  align-items: center;
  gap: 4px;
  pointer-events: none;
  z-index: 2;
  box-shadow: 0 2px 6px rgba(0, 0, 0, .2);
}
.store-tile-meta-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 6px;
  font-size: 11.5px;
  color: var(--text-3);
  margin-bottom: 2px;
}
.store-tile-cat {
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: .03em;
  color: var(--accent);
}
.store-tile-photo-chip {
  display: inline-flex;
  align-items: center;
  gap: 3px;
  font-size: 11px;
  color: var(--text-3);
}
.store-tile-desc {
  font-size: 13px;
  color: var(--text-2);
  margin: 4px 0 8px;
  display: none;
}
.tile-img-ph {
  width: 100%;
  height: 100%;
  display: grid;
  place-items: center;
  background: var(--bg-2);
  color: var(--text-3);
}
.prod-ph-icon {
  font-size: 32px;
  color: var(--text-3);
}

/* List View variant for shop product archive */
.prod-grid-modern.is-list {
  display: flex;
  flex-direction: column;
  gap: 16px;
}
.prod-grid-modern.is-list .store-tile-modern {
  display: grid;
  grid-template-columns: 180px 1fr;
  align-items: stretch;
}
.prod-grid-modern.is-list .store-tile-img-wrap {
  aspect-ratio: auto;
  height: 100%;
  min-height: 160px;
  border-radius: var(--radius-md, 12px) 0 0 var(--radius-md, 12px);
}
.prod-grid-modern.is-list .store-tile-body {
  padding: 18px 22px;
  display: flex;
  flex-direction: column;
  justify-content: center;
}
.prod-grid-modern.is-list .store-tile-desc {
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.prod-grid-modern.is-list .store-tile-title {
  font-size: 17px;
}
.prod-grid-modern.is-list .store-tile-foot-actions {
  margin-top: 10px;
}
@media (max-width: 640px) {
  .prod-grid-modern.is-list .store-tile-modern {
    grid-template-columns: 120px 1fr;
  }
  .prod-grid-modern.is-list .store-tile-body {
    padding: 12px 14px;
  }
  .prod-grid-modern.is-list .store-tile-desc {
    display: none;
  }
}

/* ==========================================================================
   Master Product Catalogue: Manufacturer Specifications & Interactive Gallery
   ========================================================================== */
.master-top {
  display: grid;
  grid-template-columns: minmax(320px, 460px) 1fr;
  gap: 36px;
  align-items: start;
  margin-bottom: 32px;
}
@media (max-width: 860px) {
  .master-top {
    grid-template-columns: 1fr;
    gap: 24px;
  }
}

.master-gallery {
  position: relative;
}
.master-figure {
  position: relative;
  margin: 0;
  border-radius: var(--radius-lg, 16px);
  overflow: hidden;
  background: var(--surface-2, #f5f6f9);
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.05);
  border: 1px solid var(--line-1);
}
.master-hero {
  width: 100%;
  aspect-ratio: 1;
  object-fit: contain;
  display: block;
  background: #fff;
  transition: opacity .25s ease, transform .35s var(--ease-out);
}
.master-hero-verified-badge {
  position: absolute;
  top: 12px;
  left: 12px;
  display: inline-flex;
  align-items: center;
  gap: 4px;
  background: rgba(18, 17, 28, 0.76);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  color: #fff;
  font-size: 11px;
  font-weight: 600;
  padding: 4px 10px;
  border-radius: 999px;
  pointer-events: none;
}
.master-thumbs {
  display: flex;
  gap: 10px;
  margin-top: 12px;
  overflow-x: auto;
  padding-bottom: 4px;
}
.master-thumbs .thumb {
  width: 72px;
  height: 72px;
  padding: 2px;
  border-radius: 10px;
  border: 2px solid transparent;
  background: #fff;
  cursor: pointer;
  overflow: hidden;
  transition: all .2s ease;
  flex: none;
}
.master-thumbs .thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: 8px;
}
.master-thumbs .thumb:hover {
  border-color: var(--line-2);
  transform: translateY(-2px);
}
.master-thumbs .thumb.on {
  border-color: var(--brand-1, #1a73e8);
  box-shadow: 0 0 0 2px rgba(26, 115, 232, 0.25);
}

.master-badge-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  margin-bottom: 12px;
}
.master-brand-tag {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  background: var(--surface-2);
  color: var(--text-2);
  padding: 3px 10px;
  border-radius: 999px;
  font-size: 12px;
  font-weight: 600;
  text-decoration: none;
  border: 1px solid var(--line-1);
  transition: all .2s ease;
}
.master-brand-tag:hover {
  background: var(--brand-1);
  color: #fff;
  border-color: var(--brand-1);
}
.master-specs-strip {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px;
  margin: 8px 0 16px;
  font-size: 13px;
}
.master-model-pill, .master-gtin-pill {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background: var(--surface-2);
  padding: 4px 10px;
  border-radius: 6px;
  border: 1px solid var(--line-1);
}
.master-model-pill code, .master-gtin-pill code {
  font-family: var(--font-mono, monospace);
  font-size: 12px;
  color: var(--text);
}

.master-warranty-banner {
  display: flex;
  align-items: flex-start;
  gap: 14px;
  background: linear-gradient(135deg, rgba(30, 142, 62, 0.08) 0%, rgba(30, 142, 62, 0.03) 100%);
  border: 1px solid rgba(30, 142, 62, 0.25);
  border-radius: var(--radius-md, 12px);
  padding: 14px 18px;
  margin: 20px 0;
}
.master-warranty-banner .ms {
  font-size: 26px;
  color: #1e8e3e;
  flex: none;
}
.master-warranty-banner strong {
  display: block;
  font-size: 14px;
  color: #137333;
  margin-bottom: 2px;
}
.master-warranty-banner p {
  margin: 0;
  font-size: 13px;
  color: var(--text-2);
  line-height: 1.45;
}

/* Master Specifications & Overview Section */
.master-specs-card {
  margin-top: 32px;
}
.master-card-head {
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  gap: 12px;
  padding-bottom: 16px;
  border-bottom: 1px solid var(--line-1);
  margin-bottom: 20px;
}
.master-card-head h2 {
  margin: 0;
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 20px;
}
.master-desc-prose {
  font-size: 15px;
  line-height: 1.65;
  color: var(--text-2);
  margin-bottom: 28px;
  max-width: 820px;
}

.about-grid {
  display: grid;
  grid-template-columns: 1.2fr 1fr;
  gap: 32px;
  align-items: start;
}
@media (max-width: 780px) {
  .about-grid {
    grid-template-columns: 1fr;
    gap: 24px;
  }
}

.specs-col h3, .details-col h3 {
  font-size: 16px;
  font-weight: 700;
  margin: 0 0 14px;
  display: flex;
  align-items: center;
  gap: 8px;
  color: var(--text);
}
.spec-table {
  display: flex;
  flex-direction: column;
  border: 1px solid var(--line-1);
  border-radius: var(--radius-md, 12px);
  overflow: hidden;
  background: var(--surface);
  margin: 0;
}
.spec-row {
  display: grid;
  grid-template-columns: 200px 1fr;
  padding: 10px 16px;
  border-bottom: 1px solid var(--line-1);
  font-size: 13px;
  line-height: 1.45;
}
.spec-row:last-child {
  border-bottom: none;
}
.spec-row:nth-child(even) {
  background: var(--surface-2);
}
.spec-row dt {
  color: var(--text-3);
  font-weight: 500;
}
.spec-row dd {
  margin: 0;
  color: var(--text);
  font-weight: 600;
}
@media (max-width: 540px) {
  .spec-row {
    grid-template-columns: 1fr;
    gap: 4px;
  }
}

.in-box-card, .documents-card {
  background: var(--surface-2);
  border: 1px solid var(--line-1);
  border-radius: var(--radius-md, 12px);
  padding: 20px;
  margin-bottom: 20px;
}
.in-box-checklist {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.in-box-checklist li {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  font-size: 13px;
  line-height: 1.4;
  color: var(--text);
}
.in-box-checklist li .ms {
  color: #1e8e3e;
  margin-top: 1px;
}

.doc-list {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.doc-item-btn {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px 16px;
  background: var(--surface);
  border: 1px solid var(--line-1);
  border-radius: 8px;
  text-decoration: none;
  color: var(--text);
  transition: all .2s ease;
}
.doc-item-btn:hover {
  border-color: var(--brand-1);
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06);
  transform: translateY(-1px);
}
.doc-pdf-ico {
  color: #d93025;
  font-size: 24px;
  flex: none;
}
.doc-info {
  display: flex;
  flex-direction: column;
  flex: 1;
}
.doc-info strong {
  font-size: 13px;
  color: var(--text);
}
.doc-dl-icon {
  color: var(--text-3);
  transition: transform .2s ease;
}
.doc-item-btn:hover .doc-dl-icon {
  color: var(--brand-1);
  transform: translateY(2px);
}

/* ==========================================================================
   WHATSAPP BUSINESS CLONE SYSTEM
   ========================================================================== */
.wa-chat-container {
  background-color: var(--surface);
  border: 1px solid var(--line-2);
  border-radius: 16px;
  box-shadow: 0 4px 24px rgba(0, 0, 0, 0.04);
  position: relative;
  overflow: hidden;
}

/* Header */
.wa-header {
  padding: 10px 14px;
  background: var(--surface);
  border-bottom: 1px solid var(--line-2);
  display: flex;
  align-items: center;
  gap: 12px;
}
.wa-back-btn {
  color: var(--text-2);
}
.wa-avatar {
  position: relative;
  width: 44px;
  height: 44px;
  flex: none;
}
.wa-avatar-img {
  width: 100%;
  height: 100%;
  border-radius: 50%;
  object-fit: cover;
  border: 1px solid var(--line-2);
}
.wa-avatar-placeholder {
  width: 100%;
  height: 100%;
  border-radius: 50%;
  background: #128C7E;
  color: #fff;
  font-weight: 700;
  display: grid;
  place-items: center;
  font-size: 18px;
}
.wa-online-dot {
  position: absolute;
  bottom: 1px;
  right: 1px;
  width: 11px;
  height: 11px;
  border-radius: 50%;
  background: #25D366;
  border: 2px solid var(--surface);
}
.wa-title-block {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
}
.wa-name-row {
  display: flex;
  align-items: center;
  gap: 6px;
}
.wa-verified-badge {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  background: rgba(37, 211, 102, 0.12);
  color: #128C7E;
  font-size: 11px;
  font-weight: 600;
  padding: 2px 7px;
  border-radius: 12px;
  line-height: 1;
}
.wa-subtext {
  font-size: 12px;
  color: var(--text-3);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.wa-header-actions {
  margin-left: auto;
  display: flex;
  align-items: center;
  gap: 8px;
}
.wa-catalog-toggle {
  background: rgba(18, 140, 126, 0.1);
  color: #128C7E;
  border: 1px solid rgba(18, 140, 126, 0.25);
  font-weight: 600;
  border-radius: 20px;
  padding: 5px 12px;
  transition: all .15s ease;
}
.wa-catalog-toggle:hover {
  background: #128C7E;
  color: #fff;
}

/* Bubbles & Area */
.wa-bubbles-area {
  background-color: var(--bg-2);
  background-image: radial-gradient(rgba(0,0,0,0.03) 1px, transparent 1px);
  background-size: 16px 16px;
  padding: 16px 14px;
  min-height: 48vh;
  max-height: 64vh;
}
.wa-bubble {
  border-radius: 10px;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.08);
  font-size: 14px;
  line-height: 1.45;
  margin-bottom: 6px;
}
.wa-bubble.mine {
  background: #d9fdd3;
  color: #111b21;
}
[data-theme="dark"] .wa-bubble.mine {
  background: #005c4b;
  color: #e9edef;
}
.wa-bubble.theirs {
  background: var(--surface);
  color: var(--text);
  border: 1px solid var(--line-2);
}
.rcpt.read {
  color: #53bdeb !important;
  font-weight: 700;
}

/* Quick Action Chips */
.wa-quick-actions {
  display: flex;
  gap: 8px;
  overflow-x: auto;
  padding: 8px 12px;
  background: var(--surface);
  border-top: 1px solid var(--line-2);
  scrollbar-width: none;
}
.wa-quick-actions::-webkit-scrollbar {
  display: none;
}
.wa-action-pill {
  flex: none;
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 6px 13px;
  background: var(--bg-2);
  border: 1px solid var(--line-2);
  border-radius: 20px;
  font-size: 12.5px;
  font-weight: 500;
  color: var(--text);
  cursor: pointer;
  transition: all .15s ease;
  white-space: nowrap;
}
.wa-action-pill:hover {
  background: rgba(37, 211, 102, 0.12);
  border-color: #25D366;
  color: #075E54;
}

/* Interactive Catalog Drawer */
.wa-drawer-backdrop {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.45);
  z-index: 99;
  display: none;
  backdrop-filter: blur(2px);
}
.wa-drawer-backdrop.is-open {
  display: block;
}
.wa-catalog-drawer {
  position: fixed;
  top: 0;
  right: -420px;
  width: 400px;
  max-width: 90vw;
  height: 100vh;
  background: var(--surface);
  box-shadow: -4px 0 28px rgba(0, 0, 0, 0.15);
  z-index: 100;
  display: flex;
  flex-direction: column;
  transition: right .25s cubic-bezier(0.16, 1, 0.3, 1);
}
.wa-catalog-drawer.is-open {
  right: 0;
}
.wa-drawer-head {
  padding: 16px 18px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  border-bottom: 1px solid var(--line-2);
}
.wa-drawer-search {
  padding: 10px 16px;
  border-bottom: 1px solid var(--line-2);
  display: flex;
  align-items: center;
  gap: 8px;
  background: var(--bg-2);
}
.wa-drawer-search input {
  border: 0;
  background: transparent;
  width: 100%;
  font-size: 13.5px;
  outline: none;
  color: var(--text);
}
.wa-drawer-items {
  flex: 1;
  overflow-y: auto;
  padding: 12px 16px;
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.wa-drawer-item {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 10px 12px;
  background: var(--surface);
  border: 1px solid var(--line-2);
  border-radius: 12px;
  transition: border-color .15s ease;
}
.wa-drawer-item:hover {
  border-color: #25D366;
}
.wa-item-media {
  width: 48px;
  height: 48px;
  border-radius: 8px;
  overflow: hidden;
  flex: none;
  background: var(--bg-3);
  display: grid;
  place-items: center;
}
.wa-item-media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.wa-item-info {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.wa-item-title {
  font-size: 13.5px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.wa-item-price {
  font-size: 13px;
  font-weight: 700;
  color: #128C7E;
}
.wa-drawer-cart {
  padding: 14px 18px;
  border-top: 1px solid var(--line-2);
  background: var(--bg-2);
}
.wa-cart-summary {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  margin-bottom: 10px;
}
.wa-cart-total {
  font-size: 16px;
  font-weight: 800;
  color: #128C7E;
}
.wa-cart-note {
  width: 100%;
  padding: 8px 12px;
  border: 1px solid var(--line);
  border-radius: 8px;
  font-size: 12.5px;
  margin-bottom: 8px;
  background: var(--surface);
  color: var(--text);
}

/* In-Chat Quotation Card */
.wa-quote-card {
  background: var(--surface);
  border: 1px solid #128C7E;
  border-radius: 12px;
  overflow: hidden;
  margin: 4px 0;
  box-shadow: 0 2px 10px rgba(18, 140, 126, 0.08);
}
.wa-quote-header {
  background: linear-gradient(135deg, #075E54 0%, #128C7E 100%);
  color: #fff;
  padding: 10px 14px;
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.wa-quote-badge {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.06em;
}
.wa-quote-num {
  font-family: ui-monospace, Menlo, Consolas, monospace;
  font-size: 12px;
  opacity: 0.9;
}
.wa-quote-meta {
  padding: 8px 14px;
  background: rgba(18, 140, 126, 0.04);
  border-bottom: 1px solid var(--line-2);
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: 11.5px;
  color: var(--text-2);
}
.wa-verified-pill {
  color: #128C7E;
  font-weight: 600;
  display: inline-flex;
  align-items: center;
  gap: 3px;
}
.wa-quote-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 12.5px;
}
.wa-quote-table th {
  padding: 8px 14px;
  text-align: left;
  border-bottom: 1px solid var(--line-2);
  color: var(--text-3);
  font-size: 11px;
}
.wa-quote-table td {
  padding: 8px 14px;
  border-bottom: 1px solid var(--line-2);
}
.wa-quote-totals {
  padding: 10px 14px;
  display: flex;
  flex-direction: column;
  gap: 4px;
  background: rgba(0, 0, 0, 0.015);
}
.wa-quote-line {
  display: flex;
  justify-content: space-between;
  font-size: 12.5px;
}
.wa-quote-line.total {
  font-size: 14.5px;
  border-top: 1px dashed var(--line-2);
  padding-top: 6px;
  margin-top: 2px;
  color: #075E54;
}
.wa-quote-terms {
  padding: 6px 14px 10px;
  margin: 0;
  font-size: 11.5px;
}
.wa-quote-pay {
  padding: 10px 14px;
  background: rgba(37, 211, 102, 0.08);
  border-top: 1px solid rgba(37, 211, 102, 0.2);
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.wa-eft-box {
  padding: 10px 14px;
  background: var(--bg-2);
  border-top: 1px solid var(--line-2);
  font-size: 12px;
}
.wa-eft-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 6px 12px;
  margin-top: 6px;
}

/* In-Chat Cart Inquiry Card */
.wa-inquiry-card {
  background: var(--surface);
  border: 1px solid var(--line-2);
  border-left: 4px solid #25D366;
  border-radius: 10px;
  padding: 12px 14px;
  margin: 4px 0;
}
.wa-inquiry-head {
  display: flex;
  align-items: center;
  gap: 6px;
  color: #075E54;
  font-size: 13.5px;
  margin-bottom: 8px;
}
.wa-inquiry-list {
  display: flex;
  flex-direction: column;
  gap: 4px;
  border-bottom: 1px dashed var(--line-2);
  padding-bottom: 8px;
  margin-bottom: 8px;
}
.wa-inquiry-row {
  display: flex;
  justify-content: space-between;
  font-size: 12.5px;
}
.wa-inquiry-total {
  display: flex;
  justify-content: space-between;
  font-size: 14px;
  color: #128C7E;
}
.wa-inquiry-note {
  margin: 8px 0 0;
  font-style: italic;
  font-size: 12.5px;
  color: var(--text-2);
}

/* In-Chat Order Status Tracking Card */
.wa-status-card {
  background: var(--surface);
  border: 1px solid #1a73e8;
  border-radius: 12px;
  overflow: hidden;
  margin: 4px 0;
}
.wa-status-head {
  background: #1a73e8;
  color: #fff;
  padding: 8px 12px;
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 13px;
}
.wa-status-body {
  padding: 10px 12px;
  display: flex;
  flex-direction: column;
  gap: 6px;
  font-size: 12.5px;
}
.wa-status-note {
  padding: 0 12px 10px;
  margin: 0;
  font-size: 12px;
  color: var(--text-2);
}

/* Quote Form within Biz Tools */
.wa-quote-items {
  max-height: 120px;
  overflow-y: auto;
  display: flex;
  flex-direction: column;
  gap: 4px;
  margin: 6px 0;
}
.wa-quote-item-row {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 12px;
  background: var(--bg-2);
  padding: 4px 8px;
  border-radius: 6px;
}

/* ==========================================================================
   CHAT REVAMP & DUAL-PANE SHELL SYSTEM
   ========================================================================== */

.chat-app-shell {
  display: grid;
  grid-template-columns: 360px 1fr;
  height: calc(100vh - 64px);
  max-height: calc(100vh - 64px);
  overflow: hidden;
  background: var(--bg);
  border-top: 1px solid var(--line-2);
}

/* Responsive Single-Pane Transition for Mobile */
@media (max-width: 859px) {
  .chat-app-shell {
    display: block;
    height: auto;
    max-height: none;
    min-height: calc(100vh - 64px);
  }
  .chat-inbox-page .chat-sidebar {
    display: flex;
    width: 100%;
    height: calc(100vh - 64px);
  }
  .chat-inbox-page .chat-welcome-pane {
    display: none;
  }
  .chat-conversation-page .chat-sidebar {
    display: none;
  }
  .chat-conversation-page .chat-main-pane {
    display: flex;
    width: 100%;
    height: calc(100vh - 64px);
  }
}

/* Chat Sidebar (Left Pane) */
.chat-sidebar {
  background: var(--surface);
  border-right: 1px solid var(--line-2);
  display: flex;
  flex-direction: column;
  height: 100%;
  overflow: hidden;
  position: relative;
  z-index: 10;
}

.chat-sidebar-header {
  padding: 14px 16px 10px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  border-bottom: 1px solid var(--line-2);
}

.chat-sidebar-user {
  display: flex;
  align-items: center;
  gap: 10px;
}

.user-avatar-dot {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background: var(--bg-2);
  color: var(--text-2);
}

.user-avatar-dot .user-icon {
  font-size: 28px;
  color: var(--brand-1, #128C7E);
}

.online-indicator {
  position: absolute;
  bottom: 0;
  right: 0;
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: #25D366;
  border: 2px solid var(--surface);
}

.sidebar-title {
  font-size: 18px;
  font-weight: 700;
  letter-spacing: -0.02em;
  color: var(--text);
}

.sidebar-actions {
  display: flex;
  align-items: center;
  gap: 6px;
}

/* Sidebar Instant Search */
.chat-sidebar-search {
  padding: 10px 14px 8px;
}

.sidebar-search-label {
  display: flex;
  align-items: center;
  gap: 8px;
  background: var(--bg-2);
  border: 1px solid var(--line-2);
  border-radius: 20px;
  padding: 6px 12px;
  transition: all .15s ease;
}

.sidebar-search-label:focus-within {
  border-color: #128C7E;
  background: var(--surface);
  box-shadow: 0 0 0 2px rgba(18, 140, 126, 0.15);
}

.sidebar-search-label input {
  border: 0;
  background: transparent;
  width: 100%;
  font-size: 13.5px;
  outline: none;
  color: var(--text);
}

/* Sidebar Filter Pills */
.chat-sidebar-filters {
  display: flex;
  gap: 6px;
  padding: 4px 14px 10px;
  overflow-x: auto;
  scrollbar-width: none;
  border-bottom: 1px solid var(--line-2);
}

.chat-sidebar-filters::-webkit-scrollbar {
  display: none;
}

.filter-chip {
  padding: 5px 12px;
  border-radius: 16px;
  font-size: 12px;
  font-weight: 600;
  background: var(--bg-2);
  color: var(--text-2);
  text-decoration: none;
  white-space: nowrap;
  transition: all .15s ease;
  border: 1px solid transparent;
}

.filter-chip:hover {
  background: var(--bg-3);
  color: var(--text);
}

.filter-chip.on {
  background: rgba(18, 140, 126, 0.12);
  color: #128C7E;
  border-color: rgba(18, 140, 126, 0.3);
}

/* Sidebar Conversation List */
.chat-sidebar-list {
  flex: 1;
  overflow-y: auto;
}

.chat-sidebar-list .inbox-list {
  list-style: none;
  margin: 0;
  padding: 0;
}

.chat-sidebar .inbox-row {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px 14px;
  border-bottom: 1px solid var(--line-2);
  text-decoration: none;
  color: inherit;
  transition: background .15s ease;
  position: relative;
}

.chat-sidebar .inbox-row:hover {
  background: var(--bg-2);
}

.chat-sidebar .inbox-row.is-active {
  background: rgba(18, 140, 126, 0.08);
  border-left: 3px solid #128C7E;
}

.chat-sidebar .inbox-avatar {
  position: relative;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  background: var(--bg-3);
  display: grid;
  place-items: center;
  flex: none;
  overflow: hidden;
  border: 1px solid var(--line-2);
}

.chat-sidebar .inbox-avatar img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.chat-sidebar .inbox-avatar .ms {
  color: var(--text-3);
  font-size: 24px;
}

.chat-sidebar .inbox-avatar .wa-online-dot {
  position: absolute;
  bottom: 0;
  right: 0;
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: #25D366;
  border: 2px solid var(--surface);
}

.chat-sidebar .inbox-body {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 3px;
}

.chat-sidebar .inbox-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 6px;
}

.chat-sidebar .inbox-name-wrap {
  display: flex;
  align-items: center;
  gap: 5px;
  min-width: 0;
}

.chat-sidebar .inbox-name-wrap b {
  font-size: 13.5px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  color: var(--text);
}

.chat-sidebar .pinned-icon {
  color: #128C7E;
  font-size: 13px;
  transform: rotate(45deg);
}

.chat-sidebar .muted-icon {
  color: var(--text-3);
  font-size: 13px;
}

.chat-sidebar .inbox-time {
  font-size: 11px;
  color: var(--text-3);
  flex: none;
}

.chat-sidebar .inbox-snippet {
  font-size: 12.5px;
  color: var(--text-2);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  display: flex;
  align-items: center;
  gap: 4px;
}

.chat-sidebar .snippet-tag {
  color: #128C7E;
  font-weight: 500;
}

.chat-sidebar .inbox-row.unread .inbox-name-wrap b {
  font-weight: 800;
  color: var(--text);
}

.chat-sidebar .inbox-row.unread .snippet-text {
  font-weight: 600;
  color: var(--text);
}

.chat-sidebar .badge {
  background: #25D366;
  color: #fff;
  font-size: 11px;
  font-weight: 700;
  border-radius: 12px;
  padding: 2px 7px;
  min-width: 18px;
  text-align: center;
}

.chat-empty-sidebar {
  padding: 40px 20px;
  text-align: center;
  color: var(--text-3);
}

.chat-empty-sidebar .ms {
  font-size: 44px;
  margin-bottom: 8px;
  opacity: 0.5;
}

/* Chat Main Pane Layout */
.chat-main-pane {
  display: flex;
  flex-direction: column;
  height: 100%;
  overflow: hidden;
  background: var(--surface);
  position: relative;
}

.chat-conversation-page .wa-chat-container {
  border: 0;
  border-radius: 0;
  box-shadow: none;
  display: flex;
  flex-direction: column;
  height: 100%;
}

.chat-conversation-page .wa-bubbles-area {
  flex: 1;
  overflow-y: auto;
  min-height: 0;
  max-height: none;
}

/* Welcome Screen (when no chat is selected on desktop) */
.chat-welcome-pane {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 32px;
  background: var(--bg-2);
  background-image: radial-gradient(rgba(0,0,0,0.03) 1px, transparent 1px);
  background-size: 20px 20px;
}

.chat-welcome-card {
  max-width: 520px;
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 16px;
}

.chat-welcome-icon-wrap {
  position: relative;
  width: 72px;
  height: 72px;
  border-radius: 24px;
  background: linear-gradient(135deg, rgba(18, 140, 126, 0.15) 0%, rgba(37, 211, 102, 0.15) 100%);
  display: grid;
  place-items: center;
  color: #128C7E;
}

.chat-welcome-icon {
  font-size: 38px;
}

.chat-welcome-badge {
  position: absolute;
  top: -4px;
  right: -4px;
  background: #25D366;
  color: #fff;
  border-radius: 50%;
  width: 22px;
  height: 22px;
  display: grid;
  place-items: center;
  border: 2px solid var(--surface);
}

.chat-welcome-card h2 {
  font-size: 24px;
  font-weight: 800;
  letter-spacing: -0.02em;
  margin: 0;
  color: var(--text);
}

.chat-welcome-sub {
  font-size: 14px;
  color: var(--text-2);
  margin: 0;
  line-height: 1.5;
}

.chat-perks-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 12px;
  margin: 12px 0 6px;
  text-align: left;
}

.chat-perk-card {
  background: var(--surface);
  border: 1px solid var(--line-2);
  border-radius: 12px;
  padding: 14px 12px;
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.perk-icon-bubble {
  width: 32px;
  height: 32px;
  border-radius: 8px;
  background: rgba(18, 140, 126, 0.1);
  color: #128C7E;
  display: grid;
  place-items: center;
}

.perk-icon-bubble .ms {
  font-size: 18px;
}

.chat-perk-card b {
  font-size: 12.5px;
  color: var(--text);
}

.chat-perk-card span {
  font-size: 11px;
  color: var(--text-3);
  line-height: 1.4;
}

.chat-welcome-actions {
  display: flex;
  gap: 10px;
  margin-top: 8px;
}

.chat-zero-fee-tag {
  font-size: 11.5px;
  font-weight: 600;
  color: #128C7E;
  display: inline-flex;
  align-items: center;
  gap: 5px;
  background: rgba(18, 140, 126, 0.08);
  padding: 5px 12px;
  border-radius: 16px;
}

/* In-Chat Offer Negotiation Card */
.wa-offer-card {
  background: var(--surface);
  border: 1px solid var(--line-2);
  border-left: 4px solid #ea8600;
  border-radius: 10px;
  padding: 12px 14px;
  margin: 4px 0;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.04);
}

.wa-offer-card.offer-accepted {
  border-left-color: #25D366;
  background: rgba(37, 211, 102, 0.04);
}

.wa-offer-card.offer-declined {
  border-left-color: #dc2626;
  opacity: 0.85;
}

.wa-offer-head {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 12px;
  color: var(--text-2);
  margin-bottom: 8px;
}

.offer-status-badge {
  text-transform: capitalize;
  font-weight: 700;
}

.offer-pending .offer-status-badge { color: #ea8600; }
.offer-accepted .offer-status-badge { color: #128C7E; }
.offer-declined .offer-status-badge { color: #dc2626; }

.discount-pill {
  margin-left: auto;
  background: rgba(234, 134, 0, 0.12);
  color: #ea8600;
  font-size: 11px;
  font-weight: 700;
  padding: 2px 6px;
  border-radius: 10px;
}

.offer-accepted .discount-pill {
  background: rgba(37, 211, 102, 0.15);
  color: #128C7E;
}

.wa-offer-body {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.wa-offer-item {
  display: flex;
  align-items: center;
  gap: 10px;
}

.wa-offer-thumb {
  width: 44px;
  height: 44px;
  border-radius: 8px;
  object-fit: cover;
  border: 1px solid var(--line-2);
  flex: none;
}

.wa-offer-meta {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
}

.wa-offer-meta b {
  font-size: 13.5px;
  color: var(--text);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.wa-offer-prices {
  display: flex;
  align-items: baseline;
  gap: 8px;
}

.wa-offer-hl {
  font-size: 16px;
  font-weight: 800;
  color: #128C7E;
}

.wa-offer-note {
  margin: 0;
  font-style: italic;
  font-size: 12.5px;
  color: var(--text-2);
  background: var(--bg-2);
  padding: 6px 10px;
  border-radius: 6px;
}

.wa-offer-actions {
  display: flex;
  gap: 8px;
  margin-top: 4px;
}

.wa-offer-confirmed {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 12px;
  color: #128C7E;
  font-weight: 600;
  padding: 6px 10px;
  background: rgba(37, 211, 102, 0.1);
  border-radius: 6px;
}

/* In-Chat Safe Meeting Spot Card */
.wa-safespot-card {
  background: var(--surface);
  border: 1px solid var(--line-2);
  border-left: 4px solid #1a73e8;
  border-radius: 10px;
  padding: 12px 14px;
  margin: 4px 0;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.04);
}

.wa-safespot-head {
  display: flex;
  align-items: center;
  gap: 6px;
  color: #1a73e8;
  font-size: 12.5px;
  margin-bottom: 6px;
}

.wa-safespot-body {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.wa-safespot-name {
  font-size: 14px;
  color: var(--text);
}

.wa-safespot-addr {
  font-size: 12px;
}

.wa-safespot-features {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin: 4px 0;
}

.feat-pill {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  background: var(--bg-2);
  border: 1px solid var(--line-2);
  border-radius: 12px;
  padding: 3px 8px;
  font-size: 11px;
  color: var(--text-2);
}

.wa-maps-btn {
  align-self: flex-start;
  margin-top: 4px;
}

.wa-safespot-rules {
  margin-top: 8px;
  padding-top: 6px;
  border-top: 1px dashed var(--line-2);
  font-size: 11px;
  color: var(--text-3);
}

/* Safe Spot Drawer Presets */
.safe-spot-presets {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin-bottom: 16px;
}

.spot-preset-card {
  background: var(--surface);
  border: 1px solid var(--line-2);
  border-radius: 10px;
  padding: 10px 12px;
  display: flex;
  flex-direction: column;
  gap: 4px;
  transition: all .15s ease;
  cursor: pointer;
}

.spot-preset-card:hover {
  border-color: #128C7E;
  background: var(--bg-2);
}

.spot-preset-head {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 13px;
}

.spot-preset-card .spot-pick-btn {
  align-self: flex-end;
  margin-top: 4px;
}

/* In-Chat Voice Note Simulation */
.wa-audio-card {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px 12px;
  background: var(--surface);
  border: 1px solid var(--line-2);
  border-radius: 24px;
  margin: 4px 0;
  width: 240px;
  max-width: 100%;
}

.wa-audio-play-btn {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background: #128C7E;
  color: #fff;
  border: 0;
  display: grid;
  place-items: center;
  cursor: pointer;
  flex: none;
  transition: transform .15s ease, background .15s ease;
}

.wa-audio-play-btn:hover {
  background: #075E54;
  transform: scale(1.05);
}

.wa-audio-waveform {
  display: flex;
  align-items: center;
  gap: 3px;
  flex: 1;
  height: 24px;
}

.wa-audio-waveform .wave-bar {
  width: 3px;
  background: #128C7E;
  border-radius: 2px;
  transition: height .2s ease;
  opacity: 0.8;
}

.wa-audio-card.is-playing .wa-audio-waveform .wave-bar {
  animation: wavePulse 0.6s infinite alternate ease-in-out;
}

.wa-audio-card.is-playing .wa-audio-waveform .wave-bar:nth-child(2n) {
  animation-delay: 0.15s;
}

.wa-audio-card.is-playing .wa-audio-waveform .wave-bar:nth-child(3n) {
  animation-delay: 0.3s;
}

@keyframes wavePulse {
  0% { transform: scaleY(0.4); }
  100% { transform: scaleY(1.1); }
}

.wa-audio-time {
  font-size: 11px;
  font-family: ui-monospace, Menlo, Consolas, monospace;
  color: var(--text-2);
  flex: none;
}

.wa-audio-speed {
  font-size: 10.5px;
  font-weight: 700;
  background: var(--bg-2);
  border: 1px solid var(--line-2);
  border-radius: 8px;
  padding: 1px 5px;
  color: var(--text-2);
  cursor: pointer;
  flex: none;
}

/* Reactions Pill and Floating 1-Tap Quick React Bar */
.bubble-reactions {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
  margin-top: 4px;
}

.rx-pill {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  background: var(--surface);
  border: 1px solid var(--line-2);
  border-radius: 12px;
  padding: 2px 6px;
  font-size: 12px;
  cursor: pointer;
  transition: all .15s ease;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05);
}

.rx-pill:hover, .rx-pill.on {
  border-color: #128C7E;
  background: rgba(18, 140, 126, 0.1);
}

.rx-pill .rx-count {
  font-size: 11px;
  font-weight: 600;
  color: var(--text-2);
}

.bubble-quick-react {
  position: absolute;
  top: -16px;
  right: 12px;
  display: none;
  background: var(--surface);
  border: 1px solid var(--line-2);
  border-radius: 20px;
  padding: 2px 6px;
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
  z-index: 10;
  gap: 2px;
}

.wa-bubble:hover .bubble-quick-react {
  display: flex;
}

.rx-emoji-btn {
  background: transparent;
  border: 0;
  font-size: 15px;
  padding: 3px 5px;
  cursor: pointer;
  border-radius: 50%;
  transition: transform .12s ease;
  line-height: 1;
}

.rx-emoji-btn:hover {
  transform: scale(1.3);
}

/* Attachment Menu Drawer / Drop */
.wa-attach-drop {
  position: relative;
}

.wa-attach-menu {
  position: absolute;
  bottom: calc(100% + 8px);
  left: 0;
  background: var(--surface);
  border: 1px solid var(--line-2);
  border-radius: 12px;
  box-shadow: 0 4px 18px rgba(0, 0, 0, 0.12);
  padding: 6px;
  min-width: 190px;
  display: flex;
  flex-direction: column;
  gap: 2px;
  z-index: 50;
}

.attach-menu-item {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px 10px;
  border-radius: 8px;
  font-size: 13px;
  font-weight: 500;
  color: var(--text);
  background: transparent;
  border: 0;
  cursor: pointer;
  width: 100%;
  text-align: left;
  transition: background .12s ease;
}

.attach-menu-item:hover {
  background: var(--bg-2);
  color: #128C7E;
}

.attach-menu-item .ms {
  font-size: 18px;
  color: #128C7E;
}

.wa-action-drawer {
  padding: 0;
}

.wa-action-drawer .wa-drawer-form {
  padding: 16px;
  display: flex;
  flex-direction: column;
  gap: 12px;
  overflow-y: auto;
}

/* ==========================================================================
   SERVICES & SPECIALISTS HUB SYSTEM
   ========================================================================== */
.services-hub {
  max-width: 1280px;
  margin: 0 auto 0 0 !important;
  padding: 16px 24px 48px;
  box-sizing: border-box;
  width: 100%;
}

/* Hero */
/* Services Products-Style Menu */
.services-filters {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  align-items: center;
  margin: 14px 0 10px;
}

.services-filters .chip {
  height: 36px;
  padding: 0 12px 0 14px;
  border-radius: 20px;
  background: var(--surface);
  border: 1px solid var(--line-2);
  font-size: 13px;
  font-weight: 500;
  color: var(--text-2);
  transition: all .15s ease;
  box-shadow: 0 1px 4px rgba(0,0,0,0.03);
}

.services-filters .chip:hover {
  background: var(--bg-2);
  color: var(--text);
  border-color: var(--line);
}

.services-filters .chip.on {
  background: linear-gradient(135deg, rgba(26, 115, 232, 0.12) 0%, rgba(18, 140, 126, 0.12) 100%);
  border-color: var(--brand-1);
  color: var(--brand-1);
  font-weight: 600;
}

.services-filters .menu {
  border-radius: 14px;
  border: 1px solid var(--line-2);
  box-shadow: 0 8px 24px rgba(0,0,0,0.12);
  padding: 6px 0;
  min-width: 220px;
}

.services-filters .menu a {
  padding: 8px 16px;
  font-size: 13px;
  font-weight: 500;
  display: flex;
  justify-content: space-between;
  align-items: center;
  color: var(--text);
  text-decoration: none;
  transition: background .12s ease;
}

.services-filters .menu a:hover {
  background: var(--bg-2);
}

.services-filters .menu a.on {
  color: var(--brand-1);
  font-weight: 600;
  background: rgba(26, 115, 232, 0.06);
}

.services-filters .menu .count {
  font-size: 11px;
  color: var(--text-3);
  background: var(--bg-2);
  padding: 2px 7px;
  border-radius: 10px;
}

/* Single-line horizontal scroll rail for quick categories */
.services-quick-categories {
  display: flex;
  gap: 8px;
  overflow-x: auto;
  scrollbar-width: none;
  white-space: nowrap;
  padding: 4px 0 8px;
  margin-top: 4px;
  width: 100%;
}

.services-quick-categories::-webkit-scrollbar {
  display: none;
}

.svc-quick-chip {
  flex: none;
  padding: 6px 14px;
  border-radius: 20px;
  background: var(--surface);
  border: 1px solid var(--line-2);
  font-size: 12.5px;
  font-weight: 500;
  color: var(--text-2);
  text-decoration: none;
  transition: all .15s ease;
}

.svc-quick-chip:hover {
  border-color: var(--brand-1);
  color: var(--brand-1);
}

.svc-quick-chip.on {
  background: var(--brand-1);
  border-color: var(--brand-1);
  color: #fff;
  font-weight: 600;
  box-shadow: 0 2px 6px rgba(26, 115, 232, 0.25);
}


.services-hero {
  background: linear-gradient(135deg, rgba(26, 115, 232, 0.08) 0%, rgba(18, 140, 126, 0.08) 100%);
  border: 1px solid var(--line-2);
  border-radius: 20px;
  padding: 40px 28px;
  margin-bottom: 28px;
  text-align: left;
}
.services-hero-inner {
  max-width: 780px;
  margin: 0 auto 0 0;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 14px;
}
.services-badge {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 5px 12px;
  border-radius: 20px;
  background: var(--surface);
  border: 1px solid var(--line-2);
  font-size: 12px;
  font-weight: 600;
  color: var(--brand-1);
}
.services-hero-title {
  font-size: 32px;
  font-weight: 800;
  letter-spacing: -0.03em;
  margin: 0;
  color: var(--text);
  line-height: 1.15;
}
.services-hero-desc {
  font-size: 15px;
  color: var(--text-2);
  line-height: 1.5;
  margin: 0;
}

/* Mode Segmented Navigation */
.services-mode-nav {
  display: inline-flex;
  background: var(--surface);
  border: 1px solid var(--line-2);
  border-radius: 30px;
  padding: 4px;
  gap: 4px;
  margin-top: 6px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.04);
}
.svc-mode-tab {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 6px 14px;
  border-radius: 24px;
  font-size: 13px;
  font-weight: 500;
  color: var(--text-2);
  text-decoration: none;
  transition: all .15s ease;
}
.svc-mode-tab:hover {
  color: var(--text);
  background: var(--bg-2);
}
.svc-mode-tab.on {
  background: var(--brand-1);
  color: #fff;
  font-weight: 600;
  box-shadow: 0 2px 6px rgba(26, 115, 232, 0.25);
}
.svc-mode-count {
  font-size: 11px;
  opacity: 0.85;
  padding: 1px 6px;
  border-radius: 10px;
  background: rgba(0, 0, 0, 0.08);
}
.svc-mode-tab.on .svc-mode-count {
  background: rgba(255, 255, 255, 0.25);
  color: #fff;
}
.svc-mode-indicator {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-size: 12px;
  font-weight: 600;
  padding: 2px 8px;
  border-radius: 12px;
  margin-left: 6px;
}
.svc-mode-indicator.online {
  background: #e0f2fe;
  color: #0284c7;
}
.svc-mode-indicator.local {
  background: #f1f5f9;
  color: #475569;
}

/* Search Form */
.services-search-form {
  display: flex;
  gap: 8px;
  width: 100%;
  max-width: 620px;
  margin-top: 8px;
}
.services-input-wrap {
  flex: 1;
  display: flex;
  align-items: center;
  gap: 10px;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: 28px;
  padding: 0 16px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.04);
}
.services-input-wrap span {
  color: var(--text-3);
}
.services-input-wrap input {
  width: 100%;
  border: 0;
  background: transparent;
  padding: 12px 0;
  font-size: 14px;
  outline: none;
  color: var(--text);
}
.services-search-form button {
  border-radius: 28px;
  padding: 0 22px;
  font-weight: 600;
  flex: none;
}

/* Category Pills */
.services-categories {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 8px;
  margin-top: 10px;
}
.svc-chip {
  padding: 6px 14px;
  border-radius: 20px;
  background: var(--surface);
  border: 1px solid var(--line-2);
  font-size: 12.5px;
  font-weight: 500;
  color: var(--text-2);
  text-decoration: none;
  transition: all .15s ease;
}
.svc-chip:hover {
  border-color: var(--brand-1);
  color: var(--brand-1);
}
.svc-chip.on {
  background: var(--brand-1);
  border-color: var(--brand-1);
  color: #fff;
  font-weight: 600;
}

/* Toolbar */
.services-toolbar {
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  gap: 12px;
  margin-bottom: 20px;
  padding-bottom: 12px;
  border-bottom: 1px solid var(--line-2);
}
.services-count {
  font-size: 14px;
  color: var(--text-2);
}
.services-actions {
  display: flex;
  gap: 8px;
}

/* Grid & Cards */
.services-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
  gap: 20px;
}
.svc-card {
  background: var(--surface);
  border: 1px solid var(--line-2);
  border-radius: 16px;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  transition: transform .2s ease, box-shadow .2s ease, border-color .2s ease;
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.03);
}
.svc-card:hover {
  transform: translateY(-3px);
  border-color: rgba(26, 115, 232, 0.4);
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.08);
}
.svc-media {
  position: relative;
  width: 100%;
  aspect-ratio: 16 / 9;
  background: var(--bg-2);
  overflow: hidden;
}
.svc-media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform .3s ease;
}
.svc-card:hover .svc-media img {
  transform: scale(1.04);
}
.svc-media-placeholder {
  width: 100%;
  height: 100%;
  display: grid;
  place-items: center;
  color: var(--text-3);
  font-size: 32px;
}
.svc-badges {
  position: absolute;
  top: 10px;
  left: 10px;
  right: 10px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  pointer-events: none;
}
.svc-duration-badge {
  background: rgba(15, 23, 42, 0.75);
  color: #fff;
  font-size: 11px;
  font-weight: 600;
  padding: 3px 8px;
  border-radius: 6px;
  backdrop-filter: blur(4px);
  display: inline-flex;
  align-items: center;
  gap: 4px;
}
.svc-delivery-pill {
  font-size: 11px;
  font-weight: 700;
  padding: 3px 8px;
  border-radius: 6px;
  display: inline-flex;
  align-items: center;
  gap: 4px;
  backdrop-filter: blur(4px);
}
.svc-delivery-pill.online {
  background: rgba(2, 132, 199, 0.9);
  color: #fff;
  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.2);
}
.svc-delivery-pill.local {
  background: rgba(15, 23, 42, 0.75);
  color: #fff;
}
.svc-price-badge {
  background: #128C7E;
  color: #fff;
  font-size: 12.5px;
  font-weight: 800;
  padding: 3px 10px;
  border-radius: 6px;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.15);
}
.svc-content {
  padding: 16px 18px;
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.svc-shop-row {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 12px;
}
.svc-shop-name {
  color: var(--text-2);
  text-decoration: none;
  font-weight: 600;
}
.svc-shop-name:hover {
  text-decoration: underline;
}
.svc-verified-badge {
  display: inline-flex;
  align-items: center;
  gap: 3px;
  color: #128C7E;
  font-size: 11px;
  font-weight: 700;
}
.svc-title {
  font-size: 16px;
  font-weight: 700;
  line-height: 1.3;
  margin: 2px 0 0;
}
.svc-title a {
  color: inherit;
  text-decoration: none;
}
.svc-title a:hover {
  color: var(--brand-1);
}
.svc-desc {
  font-size: 13px;
  color: var(--text-2);
  line-height: 1.45;
  margin: 4px 0 8px;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.svc-meta-item {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 12px;
  color: var(--text-3);
  margin-top: 2px;
}
.svc-footer {
  padding: 12px 18px 16px;
  border-top: 1px solid var(--line-2);
  display: flex;
  gap: 8px;
  background: var(--surface);
}
.svc-footer .btn {
  flex: 1;
  justify-content: center;
}
.wa-contact-btn {
  background: rgba(37, 211, 102, 0.12);
  color: #075E54;
  border: 1px solid rgba(37, 211, 102, 0.3);
  font-weight: 600;
}
.wa-contact-btn:hover {
  background: #25D366;
  color: #fff;
}
.services-empty {
  text-align: center;
  padding: 48px 24px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
  margin-top: 20px;
}

/* ==========================================================================
   Chat WhatsApp Out-of-Band Bridge & Product Intelligence Styles
   ========================================================================== */
.wa-btn-header {
  background: #25D366;
  color: #fff;
  border-color: #25D366;
  font-weight: 600;
  border-radius: 20px;
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 5px 12px;
  transition: all .15s ease;
}
.wa-btn-header:hover {
  background: #128C7E;
  color: #fff;
}
.wa-forward-banner {
  display: flex;
  align-items: center;
  gap: 8px;
  background: rgba(37, 211, 102, 0.1);
  border: 1px solid rgba(37, 211, 102, 0.3);
  color: var(--text);
  border-radius: 8px;
  padding: 8px 14px;
  font-size: 12.5px;
  margin-bottom: 8px;
  flex-wrap: wrap;
}
.wa-forward-banner .ms {
  color: #128C7E;
  font-size: 16px;
}
.wa-banner-link {
  color: #075E54;
  font-weight: 600;
  text-decoration: underline;
  margin-left: auto;
}
.wa-active-host-banner {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 12.5px;
  padding: 6px 14px;
  margin-bottom: 8px;
  border-radius: 8px;
}
.wa-smart-replies {
  display: flex;
  align-items: center;
  gap: 6px;
  overflow-x: auto;
  padding: 8px 14px;
  background: var(--bg-2);
  border-top: 1px solid var(--line-2);
  scrollbar-width: none;
}
.wa-smart-replies::-webkit-scrollbar {
  display: none;
}
.wa-smart-tag {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-size: 11.5px;
  font-weight: 700;
  color: #1a73e8;
  white-space: nowrap;
  flex: none;
}
.wa-smart-chip {
  background: var(--surface);
  border: 1px solid var(--line-2);
  color: var(--text);
  font-size: 12px;
  padding: 4px 11px;
  border-radius: 16px;
  white-space: nowrap;
  cursor: pointer;
  transition: all .15s ease;
}
.wa-smart-chip:hover {
  border-color: #1a73e8;
  background: rgba(26, 115, 232, 0.08);
  color: #1a73e8;
}

/* Chat Fitment Intelligence Card */
.wa-fitment-card {
  background: var(--surface);
  border-radius: 12px;
  overflow: hidden;
  margin: 4px 0;
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.06);
  border: 1px solid var(--line-2);
}
.wa-fitment-card.fitment-verified {
  border-color: #137333;
}
.wa-fitment-card.fitment-verified .wa-fitment-head {
  background: linear-gradient(135deg, #137333 0%, #1e8e3e 100%);
}
.wa-fitment-card.fitment-likely {
  border-color: #b06000;
}
.wa-fitment-card.fitment-likely .wa-fitment-head {
  background: linear-gradient(135deg, #b06000 0%, #e37400 100%);
}
.wa-fitment-card.fitment-incompatible {
  border-color: #c5221f;
}
.wa-fitment-card.fitment-incompatible .wa-fitment-head {
  background: linear-gradient(135deg, #c5221f 0%, #ea4335 100%);
}
.wa-fitment-card.fitment-unknown .wa-fitment-head {
  background: linear-gradient(135deg, #5f6368 0%, #80868b 100%);
}
.wa-fitment-head {
  color: #fff;
  padding: 10px 14px;
  display: flex;
  align-items: center;
  gap: 10px;
}
.wa-fitment-title-wrap {
  display: flex;
  flex-direction: column;
}
.wa-fitment-title {
  font-size: 13.5px;
  font-weight: 700;
}
.wa-fitment-conf {
  font-size: 11px;
  opacity: 0.9;
}
.wa-fitment-body {
  padding: 12px 14px;
  display: flex;
  flex-direction: column;
  gap: 6px;
  font-size: 12.5px;
}
.wa-fitment-detail-row {
  display: flex;
  align-items: baseline;
  gap: 6px;
}
.wa-fitment-reason {
  margin: 4px 0;
  line-height: 1.4;
  color: var(--text-2);
}
.wa-fitment-safety {
  display: flex;
  align-items: center;
  gap: 6px;
  background: #fce8e6;
  color: #c5221f;
  padding: 6px 10px;
  border-radius: 6px;
  font-weight: 600;
  font-size: 11.5px;
}
[data-theme="dark"] .wa-fitment-safety {
  background: #3c1414;
  color: #f28b82;
}
.wa-fitment-footer {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-top: 6px;
  padding-top: 8px;
  border-top: 1px solid var(--line-2);
  flex-wrap: wrap;
  gap: 6px;
}
.wa-guarantee-pill {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-size: 11px;
  font-weight: 600;
  color: #137333;
}
[data-theme="dark"] .wa-guarantee-pill {
  color: #81c995;
}
.wa-fwd-tag {
  display: inline-flex;
  align-items: center;
  gap: 3px;
  color: #128C7E;
  font-size: 10.5px;
  margin-left: 6px;
  font-weight: 600;
}

/* Master Product Auto-Suggest & Autolink */
.master-suggest-wrap {
  margin: 6px 0 16px;
}
.master-suggest-bar {
  display: flex;
  align-items: center;
  gap: 8px;
}
.auto-suggest-btn {
  font-size: 12.5px;
  border-radius: 999px;
  gap: 5px;
  height: 30px;
  padding: 0 12px;
}
.master-suggest-box {
  margin-top: 10px;
}
.master-suggest-card {
  border: 1px solid var(--console-border, var(--line-2));
  background: var(--surface-card, var(--surface));
  border-radius: 16px;
  padding: 16px;
  box-shadow: var(--lift-1);
}
.master-suggest-card.master-suggest-empty {
  padding: 12px 16px;
  background: var(--surface-subtle, rgba(0,0,0,.02));
}
.master-suggest-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 6px;
}
.ms-head-title {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 14px;
}
.ms-head-hint {
  margin-bottom: 12px;
}
.suggest-results {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.suggest-results .master-result {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px;
  border: 1px solid var(--line-1);
  border-radius: 12px;
  background: var(--surface);
  transition: border-color .18s ease, box-shadow .18s ease;
}
.suggest-results .master-result.is-best-match {
  border-color: rgba(26, 115, 232, .4);
  background: rgba(26, 115, 232, .03);
}
.badge-best-match {
  display: inline-flex;
  align-items: center;
  gap: 3px;
  background: #e8f0fe;
  color: #1a73e8;
  font-size: 11px;
  font-weight: 600;
  padding: 2px 8px;
  border-radius: 999px;
  margin-left: 6px;
}
[data-theme="dark"] .badge-best-match {
  background: rgba(138, 180, 248, .18);
  color: #8ab4f8;
}
.match-reason-row {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-top: 3px;
}
.match-score.high-score {
  background: #e6f4ea;
  color: #137333;
}
[data-theme="dark"] .match-score.high-score {
  background: rgba(129, 201, 149, .2);
  color: #81c995;
}
.match-score.mid-score {
  background: #fef7e0;
  color: #b06000;
}
[data-theme="dark"] .match-score.mid-score {
  background: rgba(253, 214, 99, .2);
  color: #fdd663;
}
.ms-spec-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
  margin-top: 6px;
}
.spec-chip {
  display: inline-flex;
  font-size: 11px;
  background: var(--surface-subtle, rgba(0,0,0,.04));
  border: 1px solid var(--line-1);
  border-radius: 6px;
  padding: 1px 6px;
  color: var(--text-2);
}
.mr-action-col {
  margin-left: auto;
  display: flex;
  align-items: center;
  gap: 6px;
  flex-shrink: 0;
}
.autolink-prompt-banner {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 16px;
  padding: 12px 18px;
}
.cell-sub-row {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 6px;
  margin-top: 2px;
}

/* ==========================================================================
   MARKETS MODULE REVAMP SYSTEM
   ========================================================================== */

.markets-hub,
.markets-page {
  max-width: 1280px;
  margin: 0 auto 0 0 !important;
  padding: 16px 24px 48px;
  box-sizing: border-box;
  width: 100%;
}

/* Markets Hero */
.markets-hero {
  background: linear-gradient(135deg, rgba(91, 63, 224, 0.08) 0%, rgba(124, 58, 237, 0.06) 50%, rgba(26, 115, 232, 0.06) 100%);
  border: 1px solid var(--line-2);
  border-radius: 20px;
  padding: 36px 28px;
  margin-bottom: 24px;
  text-align: left;
}

.markets-hero-inner {
  max-width: 820px;
  margin: 0 auto 0 0;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 14px;
}

.markets-badge-row {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}

.markets-badge {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 5px 12px;
  border-radius: 20px;
  background: var(--surface);
  border: 1px solid rgba(91, 63, 224, 0.25);
  font-size: 12px;
  font-weight: 700;
  color: #5b3fe0;
  box-shadow: 0 2px 6px rgba(91, 63, 224, 0.08);
}

.markets-sub-badge {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 5px 12px;
  border-radius: 20px;
  background: var(--surface);
  border: 1px solid var(--line-2);
  font-size: 12px;
  font-weight: 600;
  color: var(--text-2);
}

.markets-hero-head {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 20px;
  width: 100%;
  flex-wrap: wrap;
}

.markets-hero-title {
  font-size: 32px;
  font-weight: 800;
  letter-spacing: -0.03em;
  margin: 0 0 6px;
  color: var(--text);
  line-height: 1.15;
}

.markets-hero-desc {
  font-size: 15px;
  color: var(--text-2);
  line-height: 1.5;
  margin: 0;
  max-width: 680px;
}

.markets-hero-actions {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
  flex-shrink: 0;
}

.markets-cta-btn {
  background: linear-gradient(135deg, #5b3fe0 0%, #7c3aed 100%) !important;
  border: none !important;
  border-radius: 24px !important;
  padding: 8px 18px !important;
  font-weight: 600 !important;
  color: #fff !important;
  box-shadow: 0 2px 8px rgba(91, 63, 224, 0.25) !important;
}

/* Search Form */
.markets-search-form {
  display: flex;
  gap: 8px;
  width: 100%;
  max-width: 640px;
  margin-top: 6px;
}

.markets-input-wrap {
  flex: 1;
  display: flex;
  align-items: center;
  gap: 10px;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: 28px;
  padding: 0 16px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.04);
  transition: border-color .15s ease, box-shadow .15s ease;
}

.markets-input-wrap:focus-within {
  border-color: #5b3fe0;
  box-shadow: 0 2px 10px rgba(91, 63, 224, 0.15);
}

.markets-input-wrap span {
  color: var(--text-3);
}

.markets-input-wrap input {
  width: 100%;
  border: 0;
  background: transparent;
  padding: 12px 0;
  font-size: 14.5px;
  outline: none;
  color: var(--text);
}

.markets-search-btn {
  border-radius: 28px;
  padding: 0 24px;
  font-weight: 600;
  flex: none;
  background: linear-gradient(135deg, #5b3fe0 0%, #7c3aed 100%);
  border: none;
  color: #fff;
  box-shadow: 0 2px 8px rgba(91, 63, 224, 0.25);
}

/* Kind Pills in Hero */
.market-kind-pills {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-top: 6px;
  flex-wrap: wrap;
}

.kind-pill {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 7px 16px;
  border-radius: 24px;
  font-size: 13px;
  font-weight: 500;
  color: var(--text-2);
  background: var(--surface);
  border: 1px solid var(--line-2);
  text-decoration: none;
  transition: all .15s ease;
  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.03);
}

.kind-pill:hover {
  background: var(--bg-2);
  color: var(--text);
  border-color: var(--line);
}

.kind-pill.active {
  background: linear-gradient(135deg, #5b3fe0 0%, #7c3aed 100%) !important;
  color: #fff !important;
  border-color: transparent !important;
  box-shadow: 0 2px 8px rgba(91, 63, 224, 0.28) !important;
  font-weight: 600;
}

.market-distance-pills {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-top: 4px;
  flex-wrap: wrap;
}

.markets-near-label {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  color: var(--text-3);
  font-size: 12.5px;
  font-weight: 600;
  margin-right: 2px;
}

.dist-pill {
  padding: 5px 12px;
  font-size: 12px;
}

/* Trade Wire Card */
.b2b-wire-section {
  margin: 10px 0 24px !important;
  padding: 24px !important;
  border-radius: 20px !important;
  border: 1px solid var(--line-2) !important;
  background: linear-gradient(135deg, rgba(91, 63, 224, 0.05) 0%, rgba(26, 115, 232, 0.04) 100%) !important;
}

.b2b-wire-head {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 16px;
  flex-wrap: wrap;
  gap: 12px;
}

.b2b-wire-badge {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 11.5px;
  text-transform: uppercase;
  font-weight: 700;
  letter-spacing: .5px;
  color: #5b3fe0;
  margin-bottom: 4px;
}

.b2b-wire-title {
  font-size: 20px;
  font-weight: 700;
  margin: 0 0 4px;
  color: var(--text);
}

.b2b-wire-sub {
  font-size: 13.5px;
  color: var(--text-2);
  margin: 0;
}

.b2b-wire-actions {
  display: flex;
  align-items: center;
  gap: 8px;
}

.b2b-rfq-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: 14px;
}

.b2b-rfq-card {
  padding: 16px;
  border-radius: 14px;
  text-decoration: none;
  color: inherit;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  gap: 10px;
  border: 1px solid var(--line-2);
  background: var(--surface);
  transition: transform .15s ease, box-shadow .15s ease, border-color .15s ease;
}

.b2b-rfq-card:hover {
  transform: translateY(-2px);
  box-shadow: 0 6px 18px rgba(0, 0, 0, 0.06);
  border-color: rgba(91, 63, 224, 0.3);
}

.b2b-rfq-text {
  margin: 0 0 8px;
  font-weight: 600;
  font-size: 14.5px;
  line-height: 1.4;
  color: var(--text);
}

.b2b-rfq-tags {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
  font-size: 12px;
  color: var(--text-3);
}

.b2b-rfq-footer {
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: 12px;
  color: var(--text-3);
  border-top: 1px solid var(--line-2);
  padding-top: 8px;
}

.b2b-rfq-offers {
  font-weight: 700;
  color: #5b3fe0;
}

/* Market Cards Grid */
.market-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: 16px;
}

.market-card {
  display: flex;
  gap: 14px;
  padding: 16px;
  border: 1px solid var(--line-2);
  border-radius: 16px;
  background: var(--surface);
  color: inherit;
  text-decoration: none;
  transition: transform .15s ease, box-shadow .15s ease, border-color .15s ease;
}

.market-card:hover {
  transform: translateY(-2px);
  box-shadow: 0 6px 18px rgba(0, 0, 0, 0.06);
  border-color: rgba(91, 63, 224, 0.3);
}

.market-icon {
  flex: none;
  width: 48px;
  height: 48px;
  border-radius: 14px;
  background: rgba(91, 63, 224, 0.1);
  color: #5b3fe0;
  display: grid;
  place-items: center;
  font-size: 24px;
}

/* ==========================================================================
   DEALS MODULE REVAMP SYSTEM
   ========================================================================== */

.deals-hub,
.deals-page {
  max-width: 1280px;
  margin: 0 auto 0 0 !important;
  padding: 16px 24px 48px;
  box-sizing: border-box;
  width: 100%;
}

/* Deals Hero */
.deals-hero {
  background: linear-gradient(135deg, rgba(234, 67, 53, 0.08) 0%, rgba(251, 188, 4, 0.07) 50%, rgba(106, 27, 154, 0.06) 100%);
  border: 1px solid var(--line-2);
  border-radius: 20px;
  padding: 36px 28px;
  margin-bottom: 24px;
  text-align: left;
}

.deals-hero-inner {
  max-width: 780px;
  margin: 0 auto 0 0;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 14px;
}

.deals-badge {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 5px 12px;
  border-radius: 20px;
  background: var(--surface);
  border: 1px solid rgba(234, 67, 53, 0.25);
  font-size: 12px;
  font-weight: 700;
  color: #dc2626;
  box-shadow: 0 2px 6px rgba(220, 38, 38, 0.08);
}

.deals-hero-title {
  font-size: 32px;
  font-weight: 800;
  letter-spacing: -0.03em;
  margin: 0;
  color: var(--text);
  line-height: 1.15;
}

.deals-hero-desc {
  font-size: 15px;
  color: var(--text-2);
  line-height: 1.5;
  margin: 0;
}

/* Mode / Discount Segmented Navigation */
.deals-mode-nav {
  display: inline-flex;
  flex-wrap: wrap;
  background: var(--surface);
  border: 1px solid var(--line-2);
  border-radius: 30px;
  padding: 4px;
  gap: 4px;
  margin-top: 6px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.04);
}

.deal-mode-tab {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 6px 14px;
  border-radius: 24px;
  font-size: 13px;
  font-weight: 500;
  color: var(--text-2);
  text-decoration: none;
  transition: all .15s ease;
}

.deal-mode-tab:hover {
  color: var(--text);
  background: var(--bg-2);
}

.deal-mode-tab.on {
  background: linear-gradient(135deg, #e11d48 0%, #ea580c 100%);
  color: #fff;
  font-weight: 600;
  box-shadow: 0 2px 8px rgba(225, 29, 72, 0.28);
}

.deal-mode-count {
  font-size: 11px;
  opacity: 0.9;
  padding: 1px 6px;
  border-radius: 10px;
  background: rgba(0, 0, 0, 0.08);
}

.deal-mode-count.hot {
  background: rgba(220, 38, 38, 0.15);
  color: #dc2626;
  font-weight: 700;
}

.deal-mode-tab.on .deal-mode-count {
  background: rgba(255, 255, 255, 0.25);
  color: #fff;
}

/* Search Form */
.deals-search-form {
  display: flex;
  gap: 8px;
  width: 100%;
  max-width: 620px;
  margin-top: 8px;
}

.deals-input-wrap {
  flex: 1;
  display: flex;
  align-items: center;
  gap: 10px;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: 28px;
  padding: 0 16px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.04);
}

.deals-input-wrap span {
  color: var(--text-3);
}

.deals-input-wrap input {
  width: 100%;
  border: 0;
  background: transparent;
  padding: 12px 0;
  font-size: 14px;
  outline: none;
  color: var(--text);
}

.deals-search-btn {
  border-radius: 28px;
  padding: 0 22px;
  font-weight: 600;
  flex: none;
  background: linear-gradient(135deg, #e11d48 0%, #ea580c 100%);
  border: none;
  color: #fff;
}

/* Category Filter Pills */
.deals-categories {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 8px;
}

.deal-chip {
  padding: 6px 14px;
  border-radius: 20px;
  background: var(--surface);
  border: 1px solid var(--line-2);
  font-size: 12.5px;
  font-weight: 500;
  color: var(--text-2);
  text-decoration: none;
  transition: all .15s ease;
}

.deal-chip:hover {
  border-color: #e11d48;
  color: #e11d48;
}

.deal-chip.on {
  background: linear-gradient(135deg, #e11d48 0%, #ea580c 100%);
  border-color: transparent;
  color: #fff;
  font-weight: 600;
  box-shadow: 0 2px 6px rgba(225, 29, 72, 0.25);
}

/* Toolbar */
.deals-toolbar {
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  gap: 12px;
  margin: 20px 0 24px;
  padding: 12px 18px;
  background: var(--surface);
  border: 1px solid var(--line-2);
  border-radius: 14px;
}

.deals-count {
  font-size: 14px;
  color: var(--text-2);
}

.deals-reset-link {
  color: #e11d48;
  text-decoration: none;
  font-weight: 600;
}

.deals-reset-link:hover {
  text-decoration: underline;
}

.deals-toolbar-actions {
  display: flex;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
}

.deals-sort-form {
  display: flex;
  align-items: center;
  gap: 6px;
}

.deals-sort-label {
  font-size: 12.5px;
  font-weight: 600;
  color: var(--text-3);
  display: inline-flex;
  align-items: center;
  gap: 3px;
}

.deals-select {
  border: 1px solid var(--line-2);
  border-radius: 20px;
  padding: 6px 14px;
  font-size: 13px;
  background: var(--surface);
  color: var(--text);
  outline: none;
  cursor: pointer;
}

.deals-select:focus {
  border-color: #e11d48;
}

/* Spotlight Featured Drop Card */
.deal-spotlight-card {
  background: var(--surface);
  border: 2px solid rgba(225, 29, 72, 0.35);
  border-radius: 18px;
  margin-bottom: 28px;
  overflow: hidden;
  box-shadow: 0 4px 20px rgba(225, 29, 72, 0.08);
  position: relative;
}

.spotlight-badge {
  background: linear-gradient(135deg, #e11d48 0%, #ea580c 100%);
  color: #fff;
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  padding: 5px 16px;
  display: inline-flex;
  align-items: center;
  gap: 6px;
}

.spotlight-inner {
  display: grid;
  grid-template-columns: 240px 1fr;
  gap: 24px;
  padding: 20px;
}

@media (max-width: 680px) {
  .spotlight-inner {
    grid-template-columns: 1fr;
  }
}

.spotlight-media {
  position: relative;
  aspect-ratio: 4 / 3;
  border-radius: 14px;
  overflow: hidden;
  background: var(--bg-2);
  display: grid;
  place-items: center;
  text-decoration: none;
}

.spotlight-media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform .25s ease;
}

.spotlight-media:hover img {
  transform: scale(1.04);
}

.spotlight-img-fallback {
  color: var(--text-3);
  display: grid;
  place-items: center;
  font-size: 36px;
}

.spotlight-discount-tag {
  position: absolute;
  top: 10px;
  left: 10px;
  background: #dc2626;
  color: #fff;
  font-size: 14px;
  font-weight: 800;
  padding: 4px 10px;
  border-radius: 10px;
  box-shadow: 0 2px 8px rgba(0,0,0,0.18);
}

.spotlight-details {
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 10px;
}

.spotlight-meta-top {
  display: flex;
  align-items: center;
  gap: 12px;
  font-size: 12.5px;
  color: var(--text-3);
  flex-wrap: wrap;
}

.spotlight-shop {
  font-weight: 600;
  color: var(--text);
  display: inline-flex;
  align-items: center;
  gap: 4px;
}

.spotlight-title {
  margin: 0;
  font-size: 22px;
  font-weight: 700;
  line-height: 1.3;
}

.spotlight-title a {
  color: inherit;
  text-decoration: none;
}

.spotlight-title a:hover {
  color: #e11d48;
}

.spotlight-pricing {
  display: flex;
  align-items: baseline;
  gap: 12px;
  flex-wrap: wrap;
}

.spotlight-price-now {
  font-size: 26px;
  font-weight: 800;
  color: #dc2626;
}

.spotlight-price-was {
  font-size: 16px;
  color: var(--text-3);
}

.spotlight-savings-pill {
  background: #dcfce7;
  color: #15803d;
  font-size: 12.5px;
  font-weight: 700;
  padding: 3px 10px;
  border-radius: 12px;
}

.spotlight-guarantee {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  color: #059669;
  font-weight: 600;
  font-size: 12.5px;
}

.spotlight-actions {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-top: 6px;
  flex-wrap: wrap;
}

.deals-spotlight-btn {
  background: linear-gradient(135deg, #e11d48 0%, #ea580c 100%) !important;
  border: none !important;
  border-radius: 24px !important;
  padding: 8px 18px !important;
  font-weight: 600 !important;
}

/* Deals Stream Grid */
.deal-feed {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
  gap: 20px;
}

.deal-card {
  display: grid;
  grid-template-rows: auto 1fr;
  border: 1px solid var(--line-2);
  border-radius: 16px;
  overflow: hidden;
  background: var(--surface);
  transition: transform .2s ease, box-shadow .2s ease, border-color .2s ease;
  position: relative;
}

.deal-card:hover {
  transform: translateY(-3px);
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.08);
  border-color: rgba(225, 29, 72, 0.35);
}

.deal-card.hot-deal {
  border-color: rgba(234, 88, 12, 0.35);
}

.deal-img {
  position: relative;
  aspect-ratio: 4 / 3;
  background: var(--bg-2);
  display: grid;
  place-items: center;
  overflow: hidden;
  color: var(--text-3);
  text-decoration: none;
}

.deal-img img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform .3s ease;
}

.deal-card:hover .deal-img img {
  transform: scale(1.05);
}

.deal-img-fallback {
  color: var(--text-3);
  display: grid;
  place-items: center;
  font-size: 32px;
}

.deal-pct {
  position: absolute;
  top: 10px;
  left: 10px;
  background: linear-gradient(135deg, #e11d48 0%, #dc2626 100%);
  color: #fff;
  font-weight: 800;
  font-size: 13px;
  padding: 3px 8px;
  border-radius: 8px;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.2);
}

.deal-hot-tag {
  position: absolute;
  top: 10px;
  right: 10px;
  background: linear-gradient(135deg, #f97316 0%, #ef4444 100%);
  color: #fff;
  font-weight: 700;
  font-size: 11px;
  padding: 2px 8px;
  border-radius: 8px;
  display: inline-flex;
  align-items: center;
  gap: 3px;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.2);
}

.deal-body {
  padding: 14px 16px 16px;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.deal-title {
  font-weight: 600;
  font-size: 15px;
  color: var(--text);
  text-decoration: none;
  line-height: 1.35;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.deal-title:hover {
  color: #e11d48;
}

.deal-price {
  display: flex;
  align-items: baseline;
  gap: 8px;
  flex-wrap: wrap;
}

.deal-price b {
  font-size: 20px;
  font-weight: 800;
  color: #dc2626;
}

.deal-price s {
  font-size: 13.5px;
  color: var(--text-3);
}

.deal-savings-tag {
  font-size: 11.5px;
  font-weight: 700;
  color: #15803d;
  background: #dcfce7;
  padding: 2px 7px;
  border-radius: 6px;
}

.deal-shop-row {
  font-size: 12.5px;
  color: var(--text-2);
  display: flex;
  align-items: center;
  gap: 4px;
  flex-wrap: wrap;
}

.deal-shop-link {
  font-weight: 600;
  color: var(--text);
  text-decoration: none;
}

.deal-shop-link:hover {
  color: #e11d48;
}

.deal-guarantee-row {
  font-size: 11.5px;
  font-weight: 600;
  color: #059669;
  display: inline-flex;
  align-items: center;
  gap: 4px;
}

.deal-actions {
  display: flex;
  align-items: center;
  gap: 6px;
  flex-wrap: wrap;
  margin-top: 4px;
}

.deal-view-btn {
  background: linear-gradient(135deg, #e11d48 0%, #ea580c 100%) !important;
  border: none !important;
  color: #fff !important;
  border-radius: 18px !important;
  font-weight: 600 !important;
  padding: 4px 12px !important;
}

/* Empty State Card */
.deals-empty-card {
  text-align: center;
  padding: 48px 24px;
  background: var(--surface);
  border: 1px dashed var(--line-2);
  border-radius: 20px;
  margin: 20px 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
}

.deals-empty-icon {
  width: 56px;
  height: 56px;
  border-radius: 50%;
  background: rgba(225, 29, 72, 0.1);
  color: #e11d48;
  display: grid;
  place-items: center;
  font-size: 28px;
}

.deals-empty-card h3 {
  margin: 0;
  font-size: 18px;
  font-weight: 700;
  color: var(--text);
}

.deals-empty-card p {
  margin: 0;
  font-size: 14px;
  color: var(--text-2);
  max-width: 440px;
  line-height: 1.5;
}