/* Closo Assistant — storefront chat panel. Spec: design canvas 0b78a99f + spec section 09.
   Mounted only when wholesale_assistant_enabled is on for this buyer. Colors/spacing lifted
   from wholesale-market.css (Inter, #452B90 accent, #E4E2EE lines). */

/* ── entry points ─────────────────────────────────────────────────────────── */
.wm-header-cta .ca-pill,.ca-pill{display:inline-flex;align-items:center;gap:9px;height:36px;padding:0 14px 0 4px !important;background:#fff !important;background-image:none !important;border:1px solid #D9D6E6 !important;border-radius:999px;color:#1A202C !important;font-weight:600;box-shadow:none !important;transform:none !important;transition:background .15s,border-color .15s}
.wm-header-cta .ca-pill:hover,.ca-pill:hover{border-color:#452B90 !important;background:#F7F4FD !important;color:#1A202C !important;box-shadow:none !important;transform:none !important}
.ca-pill .ca-ico{display:inline-flex;align-items:center;justify-content:center;width:26px;height:26px;border-radius:999px;background:linear-gradient(135deg,#452B90 0%,#6A4FD8 100%);color:#fff;flex:0 0 26px}
.ca-pill .ca-ico svg{width:15px;height:15px}
.ca-pill .ca-lbl{font-size:13.5px;letter-spacing:-.005em}
.ca-pill .ca-lbl b{font-weight:700}
.ca-pill .ca-dot{margin-left:2px}.ca-pill .ca-dot b{background:#1F9D62}.ca-pill .ca-dot i{background:#1F9D62}
@media (max-width:900px){.ca-pill .ca-lbl span{display:none}}
.ca-dot{position:relative;display:inline-flex;width:8px;height:8px}
.ca-dot i{position:absolute;inset:0;border-radius:999px;background:#452B90;opacity:.35;animation:ca-pulse 2s ease-out infinite}
.ca-dot b{position:relative;display:inline-flex;width:8px;height:8px;border-radius:999px;background:#452B90}
.ca-dot.off i{display:none}
.ca-dot.off b{background:#A7A3B8}
@keyframes ca-pulse{0%{transform:scale(1);opacity:.45}70%{transform:scale(2.4);opacity:0}100%{transform:scale(2.4);opacity:0}}
.ca-ask{display:flex;align-items:center;gap:6px;justify-content:center;font-size:12.5px;font-weight:600;color:#452B90;text-decoration:none;margin:10px 0 0;background:none;border:0;cursor:pointer;width:100%;font-family:inherit}
.ca-ask:hover{color:#321F69}
.ca-row{display:flex;gap:8px;width:100%}
.ca-row>*{flex:1 1 0;min-width:0;margin-left:0 !important;margin-right:0 !important}
.ca-ask2{display:inline-flex;align-items:center;justify-content:center;gap:8px;height:44px;padding:0 22px;color:#1A202C !important;background:#fff !important;background-image:none !important;border:1px solid #D9D6E6 !important;box-shadow:none !important;transition:background .15s,border-color .15s}
.ca-ask2:hover{border-color:#452B90 !important;background:#F7F4FD !important;color:#1A202C !important;box-shadow:none !important}
.ca-ask2 .ca-ico,.ca-ask .ca-ico{display:inline-flex;align-items:center;justify-content:center;width:26px;height:26px;border-radius:999px;background:linear-gradient(135deg,#452B90 0%,#6A4FD8 100%);color:#fff;flex:0 0 26px;box-shadow:inset 0 0 0 1px rgba(255,255,255,.28)}
.ca-ask2 .ca-ico svg,.ca-ask .ca-ico svg{width:15px;height:15px}
.ca-ask{gap:8px}
.ca-in{display:flex;align-items:center;gap:8px;border:1px solid #DDDBE7;border-radius:999px;padding:10px 14px;color:#556070;font-size:13.5px;background:#fff;cursor:text;text-align:left;width:100%;font-family:inherit}
.ca-in .ph{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.ca-in .snd{margin-left:auto;width:28px;height:28px;border-radius:999px;background:#452B90;display:flex;align-items:center;justify-content:center;flex:0 0 28px}
.ca-hero{display:flex;flex-direction:column;gap:12px;margin:26px 0 0;max-width:100%}
.ca-hero .ca-in{padding:14px 18px;font-size:15px;box-shadow:0 1px 4px rgba(26,32,44,.15)}
.ca-hero .ca-in .snd{width:34px;height:34px;flex-basis:34px}
.ca-chips{display:flex;flex-wrap:wrap;gap:8px}
.ca-chip{font-size:13px;font-weight:500;color:#1A202C;background:#fff;border:1px solid #DDDBE7;border-radius:999px;padding:8px 14px;text-decoration:none;cursor:pointer;font-family:inherit}
.ca-chip:hover{border-color:#452B90}
.ca-catbar{display:flex;margin:16px 24px 0}
/* CWV wave 4: the catalogue prints the bar itself (_ca_composer.php). Inside the
   catalogue shell (.wm-layout, wholesale-market-filters.css «THE CATALOGUE SHELL»,
   2026-09-27) the column carries the sides, so the bar spans it with no margin of its
   own — the script's live copy of the grid's side padding (wholesale-assistant.js
   syncBar) reads 0 there and agrees. Elsewhere it keeps the storefront gutter. */
.wm-layout .ca-catbar{width:100%}
@media (max-width:1024px){.ca-catbar{margin-left:16px;margin-right:16px}}
/* the two composers on the storefront share the pill's idiom: white field, lilac ring, indigo badge and send */
.ca-rich{padding:6px 6px 6px 6px !important;font-size:15px;color:#3A4150;border:1px solid #D9D6E6 !important;background:#fff !important;background-image:none !important;box-shadow:none;gap:10px;transition:border-color .15s,background .15s}
.ca-rich:hover{border-color:#452B90 !important;background:#F7F4FD !important;box-shadow:none}
.ca-rich .ca-ico{display:inline-flex;align-items:center;justify-content:center;width:34px;height:34px;border-radius:999px;background:linear-gradient(135deg,#452B90 0%,#6A4FD8 100%);color:#fff;flex:0 0 34px;box-shadow:inset 0 0 0 1px rgba(255,255,255,.28)}
.ca-rich .ca-ico svg{width:18px;height:18px}
.ca-rich .ph{color:#3A4150}
.ca-rich .snd{width:36px;height:36px;flex-basis:36px;background:#452B90;box-shadow:none}
.ca-hero .ca-in.ca-rich{padding:6px 6px 6px 6px;font-size:15.5px;box-shadow:none}
.ca-hero .ca-in.ca-rich .ca-ico{width:38px;height:38px;flex-basis:38px}.ca-hero .ca-in.ca-rich .ca-ico svg{width:20px;height:20px}
.ca-hero .ca-in.ca-rich .snd{width:38px;height:38px;flex-basis:38px}
.ca-dock{position:fixed;left:0;right:0;bottom:0;padding:10px 16px 14px;background:#fff;border-top:1px solid #E4E2EE;box-shadow:0 -8px 24px rgba(26,32,44,.08);z-index:9998}
.ca-dock .ca-in{padding:5px 5px 5px 5px}
.ca-dock .ca-in.ca-rich .ca-ico{width:32px;height:32px;flex-basis:32px}.ca-dock .ca-in.ca-rich .ca-ico svg{width:17px;height:17px}.ca-dock .ca-in.ca-rich .snd{width:32px;height:32px;flex-basis:32px}
body.ca-has-dock{padding-bottom:70px}

/* ── panel (desktop) and sheet (phone) ────────────────────────────────────── */
.ca-panel{position:fixed;top:0;right:0;bottom:0;width:420px;background:#fff;border-left:1px solid #E4E2EE;box-shadow:-8px 0 24px rgba(26,32,44,.08);display:flex;flex-direction:column;z-index:9999;font-family:Inter, Inter Fallback,sans-serif;color:#1A202C;font-size:14px;line-height:1.5;transform:translateX(24px);opacity:0;transition:transform 280ms cubic-bezier(.26,.62,.12,1),opacity 280ms cubic-bezier(.26,.62,.12,1)}
.ca-panel.on{transform:none;opacity:1}
.ca-panel.closing{transform:translateX(24px);opacity:0;transition-duration:200ms}
html.ca-open-desktop body{padding-right:420px;transition:padding-right 280ms cubic-bezier(.26,.62,.12,1)}
html.ca-open-desktop .wm-header,html.ca-open-desktop .wm-nav,html.ca-open-desktop .wm-quicknav{padding-right:420px}
html.ca-open-desktop .ca-dock{right:420px}
@media (max-width:1199px){
  .ca-panel{width:min(96vw,420px);box-shadow:-12px 0 32px rgba(26,32,44,.18)}
  html.ca-open-desktop body{padding-right:0}
  html.ca-open-desktop .wm-header,html.ca-open-desktop .wm-nav,html.ca-open-desktop .wm-quicknav{padding-right:0}
  html.ca-open-desktop .ca-dock{right:0}
  .ca-scrim{position:fixed;inset:0;background:rgba(26,32,44,.35);z-index:9998;opacity:0;transition:opacity 280ms}
  .ca-scrim.on{opacity:1}
}
@media (max-width:640px){
  .ca-panel .ca-head{padding:14px 16px}.ca-panel .ca-head .s{display:none}.ca-panel .ca-body{padding:16px}.ca-panel .ca-foot{padding:12px 16px 14px}.ca-panel .ca-foot form{padding:5px 5px 5px 14px}
  .ca-panel{top:auto;left:0;right:0;bottom:0;width:auto;height:560px;max-height:calc(100dvh - 48px);border-left:0;border-radius:16px 16px 0 0;box-shadow:0 -12px 32px rgba(26,32,44,.18);transform:translateY(24px)}
  .ca-panel.on{transform:none}
  .ca-panel.closing{transform:translateY(24px)}
  .ca-panel.gate{height:auto}
  html.ca-open-desktop body{overflow:hidden}
}
.ca-head{display:flex;align-items:center;gap:10px;padding:14px 18px;border-bottom:1px solid #E4E2EE}
.ca-head .n{font-weight:700;font-size:15px;display:flex;align-items:center}
.ca-head .s{font-size:12px;color:#556070}
.ca-beta{font-size:11px;font-weight:600;letter-spacing:.04em;text-transform:uppercase;color:#452B90;background:#EDE8F8;border-radius:999px;padding:2px 8px;margin-left:6px}
.ca-x{margin-left:auto;color:#556070;font-size:22px;line-height:1;background:none;border:0;cursor:pointer;padding:2px 6px;font-family:inherit}
.ca-body{flex:1;overflow-y:auto;display:flex;flex-direction:column;gap:14px;padding:16px 18px;position:relative}
.ca-body::-webkit-scrollbar{width:6px}.ca-body::-webkit-scrollbar-thumb{background:#DDDBE7;border-radius:6px}
.ca-u{align-self:flex-end;max-width:82%;background:#452B90;color:#fff;border-radius:16px 16px 4px 16px;padding:10px 14px;white-space:pre-wrap;word-break:break-word}
.ca-a{align-self:flex-start;max-width:92%;display:flex;flex-direction:column;gap:10px}
.ca-a p{margin:0;white-space:pre-wrap;word-break:break-word}
.ca-md{line-height:1.6;word-break:break-word}
.ca-md p{margin:0 0 8px;white-space:normal}.ca-md p:last-child{margin-bottom:0}
.ca-md ul,.ca-md ol{margin:0 0 8px;padding-left:20px}.ca-md li{margin:0 0 4px}.ca-md li:last-child{margin-bottom:0}
.ca-md b{font-weight:600}.ca-md a{color:#452B90;text-decoration:underline;text-underline-offset:2px}
.ca-md.stream>:last-child::after,.ca-md.stream:empty::after{content:"▎";margin-left:1px;color:#1A202C;animation:ca-blink 1s steps(1) infinite}
.ca-u,.ca-a>*{animation:ca-reveal 240ms cubic-bezier(.25,.8,.3,1) both}
.ca-pop{animation:ca-pop 460ms cubic-bezier(.3,.7,.4,1)}
@keyframes ca-pop{0%{transform:scale(1)}40%{transform:scale(1.22)}100%{transform:scale(1)}}
@keyframes ca-blink{0%,100%{opacity:1}50%{opacity:0}}
.ca-act{display:flex;align-items:center;gap:8px;font-size:13px;color:#556070}
.ca-act i{display:inline-block;width:6px;height:6px;border-radius:999px;background:#452B90;animation:ca-pulsedot 1.2s ease-in-out infinite}
@keyframes ca-pulsedot{0%,100%{opacity:1}50%{opacity:.3}}
.ca-act span{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.ca-skel{display:flex;flex-direction:column;gap:8px;width:min(260px,70vw)}
.ca-card .ca-skel{width:auto}
.ca-skel b{display:block;height:14px;border-radius:6px;background:linear-gradient(100deg,#E4E2EE 35%,#F4F2FA 50%,#E4E2EE 65%);background-size:200% 100%;animation:ca-shimmer 1.4s linear infinite}
.ca-skel b:first-child{width:60%}.ca-skel b:last-child{width:40%}
@keyframes ca-shimmer{from{background-position:200% 0}to{background-position:-200% 0}}
.ca-tools{display:flex;flex-wrap:wrap;gap:6px;font-size:11.5px;color:#556070}
.ca-tools span{background:#F4F2FA;border-radius:999px;padding:2px 8px}
.ca-card{display:flex;gap:12px;border:1px solid #E4E2EE;border-radius:10px;padding:10px;background:#fff;animation:ca-reveal 240ms cubic-bezier(.25,.8,.3,1) both}
.ca-card.skel{min-height:96px}
.ca-card .ph{flex:0 0 72px;height:72px;border-radius:8px;background:linear-gradient(135deg,#EDE8F8,#F4F2FA);overflow:hidden}
.ca-card .ph img{display:block;width:100%;height:100%;object-fit:cover}
.ca-card .t{font-weight:600;font-size:13.5px}.ca-card .f{font-size:12.5px;color:#556070}.ca-card .pr{font-weight:700;font-size:15px;margin-top:2px}
.ca-card .pr small{font-weight:400;font-size:12.5px;color:#556070}
.ca-card .roi{font-size:12.5px;color:#1F7A4D;font-weight:600}
.ca-card .acts{display:flex;flex-wrap:wrap;gap:6px;margin-top:6px}
@keyframes ca-reveal{from{opacity:0;transform:translateY(6px)}to{opacity:1;transform:none}}
.ca-btn{display:inline-flex;align-items:center;justify-content:center;font-size:12.5px;font-weight:600;padding:7px 12px;border-radius:999px;text-decoration:none;background:#F4F2FA;color:#1A202C;border:0;cursor:pointer;font-family:inherit}
.ca-btn.p{background:#452B90;color:#fff}
.ca-btn:disabled{opacity:.5;cursor:default}
.ca-btn[aria-pressed="true"]{background:#452B90;color:#fff}
.ca-sugg{display:flex;flex-wrap:wrap;gap:6px}
.ca-sugg .ca-btn{border:1px solid #DDDBE7;background:#fff}
.ca-quote{border-left:2px solid #452B90;padding:2px 0 2px 10px;font-size:13px}
.ca-note{background:#FDF3E0;color:#6B4A12;border-radius:10px;padding:9px 12px;font-size:12.5px}
.ca-err{background:#FBE9EA;color:#8A2A31;border-radius:10px;padding:9px 12px;font-size:12.5px;display:flex;gap:10px;align-items:center;flex-wrap:wrap}
.ca-hand{display:flex;gap:10px;align-items:flex-start;border:1px solid #E4E2EE;border-radius:10px;padding:10px 12px;font-size:13px}
.ca-latest{position:sticky;bottom:0;align-self:center;background:#1A202C;color:#fff;font-size:12px;font-weight:600;border-radius:999px;padding:6px 12px;border:0;cursor:pointer;box-shadow:0 4px 12px rgba(26,32,44,.25);font-family:inherit}
.ca-foot{border-top:1px solid #E4E2EE;padding:12px 18px 14px;display:flex;flex-direction:column;gap:8px}
.ca-foot form{display:flex;align-items:flex-end;gap:8px;border:1px solid #DDDBE7;border-radius:22px;padding:6px 6px 6px 14px;background:#fff}
.ca-foot form:focus-within{border-color:#452B90}
.ca-foot textarea{flex:1;min-width:0;border:0;outline:0;resize:none;font:inherit;font-size:13.5px;line-height:1.45;color:#1A202C;background:transparent;max-height:160px;padding:6px 0;font-family:inherit}
.ca-foot textarea::placeholder{color:#8B8798}
.ca-foot button.snd{width:32px;height:32px;border-radius:999px;background:#452B90;border:0;display:flex;align-items:center;justify-content:center;flex:0 0 32px;cursor:pointer;transition:opacity .15s}
.ca-foot button.snd:disabled{opacity:.35;cursor:default}
.ca-lim{font-size:11.5px;color:#556070;text-align:center}

@media (prefers-reduced-motion:reduce){
  .ca-panel,.ca-scrim,html.ca-open-desktop body{transition:none}
  .ca-dot i,.ca-md.stream>:last-child::after,.ca-act i,.ca-skel b,.ca-card,.ca-u,.ca-a>*,.ca-pop{animation:none}
}

/* memory view */
.ca-new{margin-left:auto;width:28px;height:28px;border-radius:999px;border:1px solid #D9D6E6;background:#fff;color:#556070;display:inline-flex;align-items:center;justify-content:center;cursor:pointer;padding:0;transition:border-color .15s,background .15s}
.ca-new:hover{border-color:#452B90;background:#F7F4FD;color:#1A202C}
.ca-mem{margin-left:6px;font-size:12px;font-weight:600;color:#452B90;background:#EDE8F8;border:0;border-radius:999px;padding:5px 10px;cursor:pointer;font-family:inherit;white-space:nowrap}
.ca-mem:hover{background:#E2DBF5}
.ca-head .ca-mem+.ca-x{margin-left:6px}
.ca-memv{flex:1;overflow-y:auto;display:flex;flex-direction:column;gap:12px;padding:16px 18px}
.ca-memh b{display:block;font-size:14px;margin-bottom:2px}.ca-memh span{font-size:12.5px;color:#556070}
.ca-meml{display:flex;flex-direction:column;gap:8px}
.ca-fact{display:flex;align-items:flex-start;gap:8px;border:1px solid #E4E2EE;border-radius:10px;padding:8px 6px 8px 12px}
.ca-fact>div{flex:1;min-width:0}.ca-fact .k{font-size:11.5px;color:#556070;text-transform:capitalize}.ca-fact .v{font-size:13.5px}
.ca-fact .ca-x{margin:0;font-size:18px}
.ca-memempty{color:#556070;font-size:13px;margin:0}
.ca-memback{align-self:flex-start}
.ca-saved{align-self:flex-start;display:inline-flex;align-items:center;gap:6px;font-size:12px;color:#556070;background:none;border:0;padding:0;cursor:pointer;font-family:inherit}
.ca-saved u{text-decoration-color:#DDDBE7;text-underline-offset:2px}
@media (max-width:640px){.ca-panel .ca-memv{padding:16px}}
/* comparison table */
.ca-cmp{border:1px solid #E4E2EE;border-radius:10px;overflow:hidden;animation:ca-reveal 240ms cubic-bezier(.25,.8,.3,1) both}
.ca-cmph{font-weight:600;font-size:13.5px;padding:10px 12px 6px}
.ca-cmps{overflow-x:auto}
.ca-cmp table{border-collapse:collapse;width:100%;font-size:12.5px;min-width:320px}
.ca-cmp th{text-align:left;font-weight:500;color:#556070;padding:7px 10px;border-top:1px solid #F0EEF6;white-space:nowrap;width:74px;vertical-align:top}
.ca-cmp td{padding:7px 10px;border-top:1px solid #F0EEF6;vertical-align:top;min-width:120px}
.ca-cmp tr.head th,.ca-cmp tr.head td{border-top:0}
.ca-cmp tr.head td{font-weight:600}.ca-cmp .t{color:#1A202C;text-decoration:none}.ca-cmp .t:hover{color:#452B90}
.ca-cmp td.rec{background:#F7F4FD}
.ca-cmpn{font-size:12.5px;color:#452B90;font-weight:600;padding:8px 12px;border-top:1px solid #F0EEF6}

/* hover — every clickable thing in the chat answers the pointer */
.ca-btn{transition:background .15s,border-color .15s,color .15s,transform .15s}
.ca-btn:hover:not(:disabled){background:#E2DBF5;color:#321F69}
.ca-btn.p:hover:not(:disabled){background:#321F69;color:#fff}
.ca-sugg .ca-btn:hover:not(:disabled){border-color:#452B90;background:#F7F4FD;color:#452B90}
.ca-btn:active:not(:disabled){transform:translateY(1px)}
.ca-x:hover{color:#1A202C}
.ca-x svg{display:block}
.ca-latest:hover{background:#452B90}
.ca-in:hover{border-color:#452B90}
.ca-ask2:hover,.ca-ask:hover{color:#321F69}
.ca-foot button.snd:hover:not(:disabled){background:#321F69}
.ca-card .t a,.ca-cmp .t{transition:color .15s}
.ca-mem:hover,.ca-saved:hover{color:#321F69}
.ca-fact .ca-x:hover{color:#8A2A31}
@media (prefers-reduced-motion:reduce){.ca-btn{transition:none}}

/* catalog: the open panel takes a column, the way the filter rail does (5 → 4, with the rail 4 → 3) */
@media (min-width:1200px){
  html.ca-open-desktop .wm-layout.filters-off .wm-grid,html.ca-open-desktop .wm-layout.filters-off .wm-search-sup .wsf-sups{grid-template-columns:repeat(4,minmax(0,1fr))}
  html.ca-open-desktop .wm-layout:not(.filters-off) .wm-grid,html.ca-open-desktop .wm-layout:not(.filters-off) .wm-search-sup .wsf-sups{grid-template-columns:repeat(3,minmax(0,1fr))}
}

/* checkout hand-off card */
.ca-co{background:#F7F4FD;border-color:#E2DBF5}
.ca-colist{display:flex;flex-direction:column;gap:4px;margin:8px 0}
.ca-coline{display:flex;justify-content:space-between;gap:12px;font-size:13px}.ca-coline span:first-child{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.ca-coline.tot{border-top:1px solid #E2DBF5;padding-top:6px;font-weight:600}
.ca-coacts{display:flex;gap:8px;flex-wrap:wrap;margin:8px 0 4px}
.ca-conote{margin:6px 0 0;font-size:12.5px;color:#556070}

/* incentive offer card */
.ca-inc{background:#F7F4FD;border-color:#E2DBF5}
.ca-inc.ok{background:#EEF8F2;border-color:#CFEBDB}
.ca-inc .t{display:block;font-size:13.5px}
.ca-inc .w{margin-top:2px;font-size:13px}
.ca-inc .acts{display:flex;align-items:center;gap:10px;margin-top:8px}
.ca-inc .st{font-size:12.5px;color:#556070}
.ca-inc .n{margin:6px 0 0;font-size:12.5px;color:#556070}

/* shipping quote card */
.ca-fr{background:#F7F4FD;border-color:#E2DBF5}
.ca-fr .t{display:block;font-size:13.5px}
.ca-fr .rows{display:flex;flex-direction:column;gap:4px;margin:8px 0 0}
.ca-fr .r{display:flex;justify-content:space-between;gap:12px;font-size:13px}.ca-fr .r .a{font-weight:600}
.ca-fr .n{margin:8px 0 0;font-size:12.5px;color:#556070}
.ca-coacts .ca-btn{max-width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}

/* phone: the two secondaries under Add to bag keep one line — 'Ask Closo' and 'Follow' */
@media (max-width:640px){.ca-tail{display:none}}

/* home with the panel open (operator 2026-09-04): the 1200px sections centred inside the 946px body lost their
   gutters (text at 0). Floor of 48px on both sides — the hero's own gutter — so every section lines up. */
@media (min-width:1200px){
  html.ca-open-desktop .wsm > .wsm-props,html.ca-open-desktop .wsm > .wsm-promo,html.ca-open-desktop .wsm > .wsm-auction-band,html.ca-open-desktop .wsm > .wsm-liq-band,html.ca-open-desktop .wsm > .wsm-newsup,html.ca-open-desktop .wsm > [class^="wsm-"]:not(.wsm-hero){width:calc(100% - 96px);max-width:1200px;margin-left:auto;margin-right:auto}
  html.ca-open-desktop .wsm-hero{padding-left:48px;padding-right:48px}
  /* the cabinet with the panel open (2026-09-04): its pane drops from 1056 to 931px, but the
     cabinet stacks on VIEWPORT width (max-width:900) — which is still 1366 — so the two-column
     grids stayed and the Insider button ran 40px past the pane and under the panel. Same
     stacking as wholesale-account.css's own narrow block, driven by the width that changed. */
  html.ca-open-desktop .wa-two{grid-template-columns:1fr}
  html.ca-open-desktop .wa-lotgrid,html.ca-open-desktop .wa-lotgrid-page{grid-template-columns:repeat(2,minmax(0,1fr))}
  html.ca-open-desktop .wa-supgrid{grid-template-columns:1fr}
  html.ca-open-desktop .wa-inspr-tiles{grid-template-columns:repeat(2,minmax(0,1fr))}
}

/* a closed panel (and its scrim) must not intercept the pointer: it sat invisibly over the header's
   right 420px and over the whole page under 1200px, so hovers and clicks died until a reload */
.ca-panel:not(.on){pointer-events:none;visibility:hidden;transition:transform 200ms cubic-bezier(.26,.62,.12,1),opacity 200ms cubic-bezier(.26,.62,.12,1),visibility 0s linear 200ms}
.ca-panel.on{visibility:visible;transition-delay:0s}
.ca-scrim:not(.on){pointer-events:none;visibility:hidden;transition:opacity 280ms,visibility 0s linear 280ms}
.ca-scrim.on{visibility:visible;transition-delay:0s}

/* ── Phone (operator 2026-09-04): one input, nothing wider than the screen ──────────────────
   Benchmark: Amazon Rufus and Walmart Sparky give the phone a single, thumb-reachable entry
   at the bottom; the inline composers belong to the desktop. Below 640 the hero composer and
   the catalog bar step aside, the docked bar is the entry, and the header pill shrinks to a
   circle in the icon row so the cluster stops pushing the header past the screen. */
@media (max-width:640px){
  .ca-hero,.ca-catbar{display:none !important}
  .wm-header-cta .ca-pill,.ca-pill{width:36px;height:36px;padding:0 !important;gap:0;justify-content:center;flex:0 0 36px}
  .ca-pill .ca-lbl,.ca-pill .ca-dot{display:none}
  .ca-pill .ca-ico{width:30px;height:30px;flex-basis:30px}
  .ca-pill .ca-ico svg{width:17px;height:17px}
  /* a control may never be wider than its line: the placeholder truncates instead */
  .ca-in,.ca-dock .ca-in{max-width:100%;min-width:0;overflow:hidden}
  .ca-in .ph{flex:1 1 0;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
  .wm-header-cta{flex-wrap:nowrap;min-width:0}
  .wm-header-cta .wm-btn-guide{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
}

/* the sheet's own header on a phone: the name keeps one line, 'What I know' becomes its icon */
@media (max-width:640px){
  .ca-panel .ca-head{gap:8px}
  .ca-panel .ca-head .n{white-space:nowrap;overflow:hidden;text-overflow:ellipsis;min-width:0;display:flex;align-items:center;gap:6px}
  .ca-panel .ca-head>div:nth-child(2){min-width:0;flex:1 1 auto}
  .ca-mem{flex:0 0 28px;width:28px;height:28px;padding:0;border-radius:999px;border:1px solid #D9D6E6;background:#fff;font-size:0;position:relative}
  .ca-mem::after{content:"?";font-size:14px;font-weight:700;color:#452B90}
  .ca-beta{display:none}
}

/* destination card */
.ca-nav{background:#F7F4FD;border-color:#E2DBF5}
.ca-nav .ca-ico{display:inline-flex;align-items:center;justify-content:center;width:26px;height:26px;border-radius:999px;background:linear-gradient(135deg,#452B90,#6A4FD8);color:#fff;flex:0 0 26px}
.ca-nav .t{display:block;font-size:13.5px}
.ca-nav .w{margin-top:2px;font-size:13px;color:#556070}
.ca-nav .acts{margin-top:8px}

/* the chat header's own menu (benchmark: a compose action behind an overflow, not a reload arrow) */
.ca-menu{position:relative;margin-left:auto}
.ca-menu-b{width:28px;height:28px;border-radius:999px;border:1px solid #D9D6E6;background:#fff;color:#556070;display:inline-flex;align-items:center;justify-content:center;cursor:pointer;padding:0;transition:border-color .15s,background .15s,color .15s}
.ca-menu-b:hover,.ca-menu-b[aria-expanded="true"]{border-color:#452B90;background:#F7F4FD;color:#1A202C}
.ca-menu-p{position:absolute;top:34px;right:0;min-width:210px;background:#fff;border:1px solid #E4E2EE;border-radius:12px;box-shadow:0 8px 24px rgba(26,32,44,.14);padding:6px;z-index:3;display:flex;flex-direction:column;gap:2px}
/* a class-level `display` outranks the UA rule for [hidden], so the menu stood open from the
   first paint (operator 2026-09-04) — it closes for real now */
.ca-menu-p[hidden]{display:none !important}
.ca-mi{display:flex;align-items:center;gap:9px;width:100%;padding:9px 10px;border:0;border-radius:8px;background:none;font:inherit;font-size:13.5px;color:#1A202C;text-align:left;cursor:pointer;white-space:nowrap}
.ca-mi:hover{background:#F7F4FD;color:#452B90}
.ca-mi svg{flex:0 0 auto;color:#452B90}
.ca-head .ca-menu+.ca-x{margin-left:6px}
@media (prefers-reduced-motion:reduce){.ca-menu-b{transition:none}}

/* ── The category row keeps ONE line while the panel is open (operator 2026-09-04) ──────────────
   With 420px taken by the chat the auto-fit grid reflows and the six tiles wrap to two rows.
   Every catalogue does the same thing in a narrow column — Amazon, Walmart, Faire — one row
   that scrolls sideways; the storefront itself already switches to that below 640px, so this is
   its own behaviour applied one breakpoint up, with arrows because there is no touch here. */
@media (min-width:1200px){
  html.ca-open-desktop .wm-catnav.is-rich{display:flex;overflow-x:auto;scroll-behavior:smooth;scroll-snap-type:x proximity;gap:16px;padding-bottom:10px;scrollbar-width:thin}
  html.ca-open-desktop .wm-catnav.is-rich>.wm-cattile{flex:0 0 168px;scroll-snap-align:start}
  html.ca-open-desktop .wm-catnav.is-rich::-webkit-scrollbar{height:6px}
  html.ca-open-desktop .wm-catnav.is-rich::-webkit-scrollbar-thumb{background:#DDDBE7;border-radius:6px}
  html.ca-open-desktop .wm-catnav.is-rich::-webkit-scrollbar-track{background:transparent}
  .ca-catarrow{position:absolute;top:calc(50% - 26px);width:36px;height:36px;border-radius:999px;border:1px solid #D9D6E6;background:#fff;color:#1A202C;display:none;align-items:center;justify-content:center;cursor:pointer;padding:0;box-shadow:0 2px 10px rgba(26,32,44,.10);z-index:2;transition:border-color .15s,background .15s}
  .ca-catarrow:hover{border-color:#452B90;background:#F7F4FD}
  html.ca-open-desktop .ca-catarrow.on{display:inline-flex}
  .ca-catarrow.prev{left:12px}
  .ca-catarrow.next{right:12px}
  .ca-catwrap{position:relative}
}

/* what sells: the demand table reuses the comparison table's frame */
.ca-dem th{width:auto;font-weight:600;color:#1A202C}
.ca-dem td{text-align:right;font-variant-numeric:tabular-nums;min-width:0}
.ca-dem tr.head td,.ca-dem tr.head th{color:#556070;font-weight:500;font-size:12px}

/* sold examples: proof rows, each opening the Poshmark listing that sold */
.ca-soldl{display:flex;flex-direction:column}
.ca-soldi{display:flex;align-items:flex-start;gap:12px;padding:9px 12px;border-top:1px solid #EFECF7}
.ca-soldi:first-child{border-top:0}
.ca-soldi .m{flex:1 1 auto;min-width:0}
.ca-soldi .t{display:block;font-size:13px;font-weight:600;line-height:1.3}
.ca-soldi .s{display:block;margin-top:2px;font-size:12px;color:#556070}
.ca-soldi .p{flex:0 0 auto;text-align:right;display:flex;flex-direction:column;align-items:flex-end;gap:1px}
.ca-soldi .p b{font-size:13px}
.ca-soldi .p span{font-size:11.5px;color:#7A8494;font-variant-numeric:tabular-nums}
.ca-soldi .p a{font-size:12px;font-weight:600;color:#452B90;text-decoration:none}
.ca-soldi .p a:hover{text-decoration:underline}
/* ── Signed-out gate, Faire pattern (operator 2026-09-07): one soft card — what the
   assistant does in three lines, one primary action, the cost of the door in a quiet
   line, and what stays open without an account. Tokens: --wash #F1ECFA, brand #452B90. */
.ca-gate{display:flex;flex-direction:column;gap:14px;width:100%;box-sizing:border-box;background:#F1ECFA;border:1px solid #DCD0F5;border-radius:20px;padding:22px 20px 18px}
.ca-gate-top{display:flex;gap:12px;align-items:flex-start}
.ca-gate-top .ca-ico{display:inline-flex;align-items:center;justify-content:center;width:40px;height:40px;border-radius:999px;background:linear-gradient(135deg,#452B90 0%,#6A4FD8 100%);color:#fff;flex:0 0 40px;box-shadow:inset 0 0 0 1px rgba(255,255,255,.28)}
.ca-gate-top .ca-ico svg{width:20px;height:20px}
.ca-gate-eyebrow{font-size:11.5px;font-weight:600;letter-spacing:.08em;text-transform:uppercase;color:#452B90;margin:2px 0 4px}
.ca-gate-h{font-family:"Poppins", Poppins Fallback,"Inter", Inter Fallback,sans-serif;font-size:20px;line-height:1.15;font-weight:600;color:#111118;margin:0;letter-spacing:-.01em}
.ca-gate-list{list-style:none;margin:2px 0 0;padding:0;display:flex;flex-direction:column;gap:9px}
.ca-gate-list li{display:flex;align-items:flex-start;gap:10px;font-size:14px;line-height:1.4;color:#2C2C36}
.ca-gate-list li b{font-weight:600;color:#111118}
.ca-gate-list li i{display:inline-flex;align-items:center;justify-content:center;width:20px;height:20px;border-radius:999px;background:#DCFCE7;color:#15803d;flex:0 0 20px;margin-top:1px}
.ca-gate .ca-gate-cta{display:flex;width:100%;box-sizing:border-box;font-size:14.5px;padding:13px 18px;margin-top:4px}
.ca-gate-cost{font-size:12.5px;color:#556070;text-align:center;margin:-6px 0 0}
.ca-gate-note{font-size:12.5px;line-height:1.45;color:#7A8494;margin:2px 0 0;padding-top:12px;border-top:1px solid #DCD0F5}
/* «Ask the supplier» card (support center wave 1): the buyer's own words, sent by their click */
.ca-ask .ca-askq{display:block;width:100%;box-sizing:border-box;margin-top:8px;padding:8px 10px;border:1px solid #DDDBE7;border-radius:8px;font:inherit;font-size:13px;resize:vertical;background:#fff;color:#1A202C}
.ca-ask .st{margin-left:8px;font-size:12.5px;color:#556070}
.ca-ask .st a{color:#452B90}
/* 2026-10-01 (Ivan: «двойной бордер, сделать по бэнчмарку Faire»). The storefront's
   form-control reset in wholesale-market.css («body textarea:not(.ca *)…») skips only
   descendants of an element classed exactly `ca`; the panel root is `.ca-panel` and the
   ask-the-supplier card is `.ca-hand`, so their textareas inherited the OS-style border,
   min-height 96px and the resize grip — a field inside a field. Faire's composer is one
   rounded ring with a borderless textarea and the round send button inside it. */
.ca-panel .ca-foot textarea,.ca-hand textarea{border:0 !important;outline:0 !important;box-shadow:none !important;background:transparent !important;border-radius:0 !important;min-height:0 !important;resize:none !important;padding:6px 0 !important;margin:0 !important}
.ca-panel .ca-foot textarea:hover,.ca-panel .ca-foot textarea:focus,.ca-panel .ca-foot textarea:focus-visible,.ca-hand textarea:hover,.ca-hand textarea:focus,.ca-hand textarea:focus-visible{border:0 !important;box-shadow:none !important;background:transparent !important}
.ca-panel .ca-foot form{align-items:center}
.ca-panel .ca-foot form:focus-within{box-shadow:0 0 0 3px rgba(69,43,144,.12)}